/*
Theme Name: Filmic Gaze
Theme URI: https://filmicgaze.com/
Author: Filmic Gaze
Description: A classic, text-first theme with featured stories, compact entries and marginal notes.
Version: 1.0.3
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: filmic-gaze
*/

/* Type and palette */
@font-face { font-family:FG; src:url('assets/EBGaramond.ttf') format('truetype'); font-weight:400 800; font-style:normal; font-display:swap; }
@font-face { font-family:FG; src:url('assets/EBGaramond-Italic.ttf') format('truetype'); font-weight:400 800; font-style:italic; font-display:swap; }
@font-face { font-family:Jost; src:url('assets/Jost.ttf') format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; }
:root { --lime:#d4e99a; --cream:#fcfcf5; --ink:#292d27; --red:#8e3929; --quiet:#5c6355; --pad:clamp(24px,4.6vw,64px); --entry-margin:220px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--lime); color:var(--ink); font:21px/1.32 FG,Georgia,serif; font-synthesis:none; font-variant-numeric:oldstyle-nums proportional-nums; }
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:4px; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid var(--red); outline-offset:5px; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
img { max-width:100%; height:auto; }
p { margin:0; }
h1,h2,h3,h4,h5,h6 { font-weight:400; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link:focus { clip:auto; width:auto; height:auto; top:8px; left:8px; z-index:100000; padding:12px; background:var(--cream); }

/* Shared masthead and navigation */
.site-sheet { max-width:1160px; min-height:100vh; margin:0 auto; padding:0 var(--pad); background:var(--cream); }
.site-header { padding:0; }
.identity { display:flex; justify-content:center; background:var(--lime); margin:0 calc(-1 * var(--pad)); padding:34px var(--pad); }
.blur-wordmark { display:block; width:448px; max-width:100%; height:auto; }
.site-nav { padding:12px 0; font:400 16px/1.32 Jost,sans-serif; letter-spacing:.015em; }
.section-links { display:flex; gap:27px; padding:0; margin:0; list-style:none; }
.section-links .current-menu-item > a,.section-links .current-menu-ancestor > a { color:var(--red); }
.section-links .menu-about,.section-links li:has(a[href$='/about/']) { margin-left:auto; }
.site-footer { margin-top:24px; padding:25px 0; color:var(--quiet); font:14px/1.4 Jost,sans-serif; }
.section-tag { display:inline-block; color:var(--red); font:14px/1.3 Jost,sans-serif; }

/* Homepage's newest featured story; title bands follow natural wrapping. */
.lead { position:relative; isolation:isolate; margin:25px calc(-1 * var(--pad) - 55px) 45px 0; min-height:470px; padding:35px 0 24px; }
.lead-image { position:absolute; inset:0 0 0 28%; z-index:-1; overflow:hidden; clip-path:polygon(0 0,100% 0,97.5% 100%,0 100%); }
.lead-image img { width:100%; height:100%; display:block; object-fit:cover; object-position:54% 50%; transition:transform .5s ease; }
.lead:has(h1 a:hover) .lead-image img { transform:scale(1.035); }
.lead-copy { width:83%; padding-top:2px; }
.lead .section-tag { background:var(--cream); padding:4px 13px 8px 0; }
.lead h1 { font-size:clamp(48px,6.7vw,88px); line-height:calc(1.16em + 4px); letter-spacing:-.04em; max-width:11em; margin:0 0 24px; overflow-wrap:anywhere; }
.lead h1 a:hover { text-decoration:none; }
.lead h1 span { color:var(--red); background-image:linear-gradient(var(--cream),var(--cream)); background-repeat:no-repeat; background-size:100% calc(1.02em + 2px); background-position:0 calc(55% + .11em + 1.1px); padding:0 .13em 0 0; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.lead-excerpt { max-width:400px; background:var(--cream); padding:14px 24px 14px 0; font:22px/1.28 FG,Georgia,serif; }
.lead-excerpt p + p { margin-top:.7em; }
.lead.no-image { min-height:0; margin-right:0; padding-top:5px; }
.lead.no-image .lead-copy { width:100%; }
.lead.no-image .lead-excerpt { max-width:650px; }

/* Category and lower-page lists */
.archive-title { font:400 30px/1.15 FG,Georgia,serif; color:var(--ink); margin:28px 0 28px var(--entry-margin); }
.essay-list { padding-top:14px; }
.archive .essay-list,.search .essay-list { padding-top:0; }
.entry h2 { color:var(--red); }
.standard-run { max-width:620px; margin:0 0 24px var(--entry-margin); font:19px/1.42 FG,Georgia,serif; }
.standard-entry { display:block; padding:0; margin:0; }
.standard-entry h2 { display:inline; font:500 20px/1.42 FG,Georgia,serif; font-variant-caps:small-caps; letter-spacing:.035em; margin:0; }
.standard-entry .entry-excerpt,.standard-entry .entry-excerpt p { display:inline; font-size:19px; line-height:inherit; }
.standard-entry .entry-excerpt p + p::before { content:' '; }
.entry-fleuron { font:20px/1 FG,Georgia,serif; padding:0 .24em; color:var(--ink); }
.secondary-feature { display:block; position:relative; min-height:225px; margin:28px 0; padding:5px 0 0; }
.essay-list > .secondary-feature:first-child { margin-top:0; }
.secondary-photo { position:absolute; left:0; top:0; width:300px; margin:0; }
.secondary-photo img { display:block; width:100%; height:auto; }
.secondary-photo figcaption { font:11px/1.35 Jost,sans-serif; margin-top:7px; color:var(--quiet); }
/* Keep the following entry and footer clear of the featured photograph. */
.essay-list > .secondary-feature { display:flow-root; }
.essay-list > .secondary-feature .secondary-photo { position:static; float:left; }
.secondary-feature .entrytext { margin-left:340px; max-width:500px; }
.secondary-feature h2 { font:400 36px/1.06 FG,Georgia,serif; letter-spacing:-.025em; margin:0 0 12px; }
.secondary-feature .entry-excerpt { font:19px/1.3 FG,Georgia,serif; }
.secondary-feature .entry-excerpt p + p { margin-top:.7em; }
.secondary-feature.without-photo { min-height:0; }
.secondary-feature.without-photo .entrytext { margin-left:var(--entry-margin); max-width:620px; }
.snippet-anchor { position:relative; }
.entry-note { position:absolute; left:calc(100% + 30px); top:0; width:150px; font:italic 17px/1.3 FG,Georgia,serif; color:var(--red); }
.entry-note p + p { margin-top:.6em; }
.empty-message,.pagination { margin:30px 0 40px var(--entry-margin); }
.pagination { font:16px/1.4 Jost,sans-serif; }
.nav-links { display:flex; gap:18px; }
.page-numbers.current { color:var(--red); }

/* Article reading measure, paragraph rhythm and marginal notes */
.single .site-sheet,.page .site-sheet { max-width:1140px; --pad:60px; }
.reading { padding:38px 0; }
.readinghead,.prose { max-width:620px; margin-left:220px; }
.readinghead { margin-bottom:30px; }
.readinghead .section-tag { color:var(--quiet); font-size:12px; letter-spacing:.09em; text-transform:uppercase; }
.readinghead h1 { font:400 46px/1.08 FG,Georgia,serif; margin:10px 0 18px; word-break:keep-all; overflow-wrap:break-word; }
.prose { font:22px/1.38 FG,Georgia,serif; overflow-wrap:break-word; }
.prose > p { position:relative; margin:0; }
.prose > p + p { text-indent:1em; }
.prose h2 { font:500 24px/1.2 FG,Georgia,serif; font-variant-caps:small-caps; letter-spacing:.035em; color:var(--ink); margin:1.35em 0 .5em; }
.prose h3 { font:italic 400 24px/1.2 FG,Georgia,serif; margin:1.2em 0 .5em; }
.prose h4,.prose h5,.prose h6 { font:500 22px/1.2 FG,Georgia,serif; margin:1.2em 0 .5em; }
.prose a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.prose blockquote { margin:1em 1.4em; padding:0; font-style:italic; }
.prose blockquote p { margin:0; }
.prose blockquote p + p { text-indent:1em; }
.prose blockquote cite { display:block; margin-top:.6em; font-size:.85em; font-style:normal; }
.prose ul,.prose ol { margin:.8em 0; padding-left:1.25em; }
.prose li + li { margin-top:.3em; }
.prose hr { border:0; width:3em; height:1px; margin:1.5em auto; background:var(--ink); }
.prose pre { max-width:100%; overflow-x:auto; font-size:16px; }
.prose table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; font-size:.9em; }
.prose th,.prose td { text-align:left; padding:.4em .65em; border-bottom:1px solid #d4d8c8; }
.prose figure,.prose .wp-caption { max-width:100%; margin:1em 0; }
.prose figure img { display:block; }
.prose figcaption,.prose .wp-caption-text { font:13px/1.4 Jost,sans-serif; color:var(--quiet); margin-top:7px; }
.alignleft { float:left; margin:6px 24px 12px 0; }
.alignright { float:right; margin:6px 0 12px 24px; }
.aligncenter { display:block; margin:1em auto; }
.prose iframe,.prose video { max-width:100%; }
.prose .sidenote-anchor { text-indent:0; }
.note-marker { border:0; background:none; color:var(--red); font:inherit; line-height:1; padding:0 2px; vertical-align:super; font-size:.7em; }
.sidenote { position:absolute; right:calc(100% + 42px); top:5px; width:168px; text-align:right; text-indent:0; font:italic 17px/1.3 FG,Georgia,serif; color:#454f32; }
.sidenote > span:first-child { color:var(--red); }
.endmark { clear:both; text-align:center; font-size:24px; padding-top:22px; }
.prose .publication { text-indent:0; font:13px/1.5 Jost,sans-serif; color:var(--quiet); margin-top:30px; }
.comments-area { margin-top:40px; }
.comment-list { font-size:19px; }
.comment-meta { font:13px/1.4 Jost,sans-serif; }
.comment-respond textarea,.comment-respond input:not([type=checkbox]):not([type=submit]) { max-width:100%; width:100%; padding:8px; border:1px solid #9ca38d; background:var(--cream); }
.comment-form p { margin:12px 0; }

/* Smaller desktops keep the same measure with the note below its excerpt. */
@media(max-width:1150px) and (min-width:701px) {
    .secondary-photo { width:240px; }
    .secondary-feature .entrytext { margin-left:272px; max-width:calc(100% - 292px); }
    .secondary-feature { min-height:190px; }
    .entry-note { position:static; width:auto; max-width:400px; margin:16px 0 0; }
    .standard-run { max-width:calc(100% - var(--entry-margin) - 24px); }
}
@media(max-width:1000px) and (min-width:701px) { :root { --entry-margin:180px; } }
@media(max-width:950px) {
    .single .site-sheet,.page .site-sheet { --pad:30px; }
    .readinghead,.prose { margin-left:180px; }
    .sidenote { width:145px; right:calc(100% + 25px); }
}
@media(max-width:900px) {
    .lead { min-height:400px; margin-right:calc(-1 * var(--pad) - 18px); }
    .lead-copy { width:88%; }
    .lead-excerpt { max-width:340px; }
}
@media(max-width:700px) {
    :root { --entry-margin:0px; }
    .archive-title { margin:22px 0 26px; }
    .standard-run { max-width:none; margin:0 0 24px; }
    .secondary-feature { min-height:0; margin:26px 0; padding:0; }
    .secondary-photo { position:static; width:100%; margin:0 0 17px; }
    .secondary-feature .entrytext,.secondary-feature.without-photo .entrytext { margin:0; max-width:none; }
    .secondary-feature h2 { font-size:31px; }
    .entry-note { position:static; width:auto; max-width:260px; margin:16px 0 0 24px; }
}
@media(max-width:650px) {
    .single .site-sheet,.page .site-sheet { --pad:22px; margin:0 9px; }
    .readinghead,.prose { margin-left:0; max-width:none; }
    .readinghead h1 { font-size:38px; }
    .prose { font-size:21px; }
    .sidenote { display:none; position:static; width:auto; text-align:left; border-left:2px solid var(--lime); padding-left:16px; margin:14px 0; }
    .sidenote.is-open { display:block; }
    .prose blockquote { margin:1em .8em; }
}
@media(max-width:600px) {
    :root { --pad:20px; }
    .site-sheet { margin:0 10px; }
    .identity { padding-top:29px; padding-bottom:29px; }
    .site-nav { font-size:15px; }
    .section-links { gap:20px; }
    .lead { margin:14px calc(-1 * var(--pad) - 6px) 43px 0; padding-top:25px; min-height:400px; }
    .lead-image { left:16%; }
    .lead-copy { width:92%; }
    .lead h1 { font-size:49px; letter-spacing:-.035em; }
    .lead-excerpt { font-size:20px; max-width:83%; padding-right:16px; }
}
@media(prefers-reduced-motion:reduce) { .lead-image img { transition:none; } }