/* ============================================================
   ryanlothian.com — "Field Notes", dark
   One stylesheet for every page. Tokens first, then components
   roughly in the order they appear down the page.
   ============================================================ */

:root{
  --paper:#141310;        /* page ground: warm near-black, not neutral   */
  --paper-2:#1d1b16;      /* raised surfaces: tags, project artwork      */
  --ink:#efe9dc;          /* primary text                                */
  --ink-2:#b5ac9c;        /* body copy, captions                         */
  --mute:#918878;         /* meta, small caps                            */
  --rule:#2f2b24;         /* hairlines                                   */
  --rule-strong:#4a443a;  /* structural rules under header/section heads */
  --accent:#e0824c;       /* ember — the rust from the light version,
                             lifted so it survives on a dark ground      */
  --accent-2:#82b09a;     /* sage, for tags                              */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1180px;
  --gap:26px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* Paper grain. Overlay blending so it adds tooth without lifting the blacks. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;
  opacity:.30;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.smallcaps{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--accent);color:#141310;padding:9px 14px;z-index:1000;border-radius:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- header ---------- */
.site-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:30px 0 22px;border-bottom:1px solid var(--rule-strong)}
.brand{font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap}
.site-nav{display:flex;gap:30px;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.site-nav a{text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;white-space:nowrap}
.site-nav a:hover{color:var(--accent);border-color:var(--accent)}
.site-nav a[aria-current="page"]{color:var(--accent);border-color:var(--accent)}
.rule-thin{height:1px;background:var(--rule-strong);margin-top:3px}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.35fr .95fr;gap:64px;padding:64px 0 46px;align-items:end}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(46px,6.4vw,88px);line-height:.95;
  letter-spacing:-.025em;margin:0;font-variation-settings:'SOFT' 30,'WONK' 1}
h1 em{font-style:italic;font-weight:400;color:var(--accent)}
.lead{font-size:16.5px;line-height:1.65;color:var(--ink-2);margin:0 0 20px}
.meta-line{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.dot{width:4px;height:4px;border-radius:50%;background:var(--accent);flex:none}

/* ---------- figures & captions ---------- */
figure{margin:0}
.cap{display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);
  padding-top:9px;border-top:1px solid var(--rule);margin-top:10px}
.cap em{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;
  font-size:14px;color:var(--ink-2)}
.hero-fig img{width:100%;height:min(58vh,470px);object-fit:cover;object-position:50% 42%}

.cap-stack{flex-direction:column;align-items:flex-start;gap:5px}
.cap-stack em{font-size:15px}
.cap-stack span{font-size:11px;letter-spacing:.05em;line-height:1.5;color:var(--mute);text-transform:none}

/* ---------- section heads ---------- */
.sec{padding:70px 0 0}
.sec-head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid var(--rule-strong);padding-bottom:12px;margin-bottom:38px}
.num{font-family:var(--serif);font-size:13px;letter-spacing:.1em;color:var(--accent)}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,34px);margin:0;letter-spacing:-.01em}
.sec-head .status{margin-left:auto;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sec-head .more{margin-left:auto;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);text-decoration:none;border-bottom:1px solid var(--rule)}
.sec-head .more:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- home photography: one lead frame, two beneath ----------
   Photographs keep their native aspect ratio here. The old fixed-height grid
   discarded 16-20% of every frame to boxes the layout picked, not the picture. */
.pfeature a{display:block;text-decoration:none}
.pfeature img{width:100%;height:auto;display:block}
.pfeature .pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:var(--gap)}

/* ---------- gallery (photography page) ----------
   Rows, not columns. Within a row each figure gets flex-grow equal to its
   aspect ratio, so widths land proportional to shape and the heights match
   without anything being cropped. Row composition lives in build.py. */
.gallery{display:flex;flex-direction:column;gap:var(--gap)}
.grow{display:flex;gap:var(--gap);align-items:flex-start}
.grow figure{margin:0;min-width:0}
.grow img{width:100%;height:auto;display:block}
.gallery a{text-decoration:none;display:block}

/* ---------- projects ---------- */
.proj{border-top:1px solid var(--rule);display:grid;grid-template-columns:180px 1fr 300px;
  gap:40px;padding:34px 0;align-items:start;text-decoration:none}
.proj:first-of-type{border-top:none;padding-top:6px}
.proj:hover h3{color:var(--accent)}
.kicker{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--mute);line-height:1.9}
.proj h3{font-family:var(--serif);font-weight:400;font-size:31px;margin:0 0 12px;
  letter-spacing:-.015em;transition:color .2s}
.proj p{margin:0 0 16px;font-size:15.5px;line-height:1.68;color:var(--ink-2);max-width:52ch}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2);
  border:1px solid var(--rule);padding:4px 10px;border-radius:2px;background:var(--paper-2)}

/* project artwork — drawn, not photographed, so it can't be mistaken for a screenshot */
.shot{width:100%;height:180px;border:1px solid var(--rule);background:var(--paper-2);
  position:relative;overflow:hidden}
.score{padding:20px 18px}
.staff{height:34px;margin-bottom:16px;position:relative;
  background:repeating-linear-gradient(to bottom,transparent 0 7px,#3f3931 7px 8px)}
.staff .nt{position:absolute;width:8px;height:6px;border-radius:50%;background:var(--ink);transform:rotate(-20deg)}
.staff .nt::after{content:"";position:absolute;right:0;bottom:3px;width:1px;height:15px;background:var(--ink)}
.clef{position:absolute;left:-2px;top:-4px;font-family:var(--serif);font-size:34px;line-height:1;color:var(--ink)}
.file{padding:18px}
.file .stamp{display:inline-block;background:rgba(224,130,76,.09);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:3px 7px;
  transform:rotate(-3deg);margin-bottom:14px;opacity:.85}
.file .bar{height:8px;background:#332e27;margin-bottom:8px;border-radius:1px}
.file .bar.red{background:var(--accent);opacity:.5}

.poster{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.proj .poster{max-width:210px;margin-left:auto}
.proj-detail{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start}
.proj-detail .shot{height:auto;padding-bottom:22px}
.proj-lead{margin:0 0 38px}
.proj-lead img{width:100%;height:auto;display:block}

/* ---------- recipes: a table of contents, with leaders ---------- */
.rec-list{display:grid;grid-template-columns:1fr 1fr;gap:0 60px}
.rec{display:flex;align-items:baseline;gap:12px;padding:15px 0;
  border-bottom:1px solid var(--rule);text-decoration:none}
.rec:hover .rn{color:var(--accent)}
.rn{font-family:var(--serif);font-size:20px;font-weight:400;transition:color .2s}
.leader{flex:1;border-bottom:1px dotted #443e35;transform:translateY(-4px);min-width:20px}
.rmeta{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);white-space:nowrap}

/* A recipe's own page. The hero grid elsewhere pairs a title with a lede, and
   a recipe has no lede — a date and a back link stranded in that second column
   sat on their own left edge, lining up with neither the title above nor the
   prose below. So: one column, the way back above the title as a breadcrumb,
   the date beneath it, everything on the same margin. */
.crumb{padding:26px 0 0;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase}
.crumb a{color:var(--mute);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.rec-hero{grid-template-columns:1fr;gap:0;padding:20px 0 42px}
.rec-hero .rec-date{margin:18px 0 0}
.rec-nav{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;
  margin-top:72px;padding-top:22px;border-top:1px solid var(--rule-strong)}
.rec-nav a{font-family:var(--serif);font-size:20px;text-decoration:none;
  display:flex;flex-direction:column;gap:5px;max-width:46%}
.rec-nav a:hover{color:var(--accent)}
.rec-nav .rec-next{margin-left:auto;text-align:right}

/* Recipe detail. The photograph sits beside the method rather than above it:
   the pictures are phone snapshots in portrait, and full width they pushed the
   ingredients a screen and a half down the page. */
.rec-detail{padding-top:58px}
.rec-body{display:grid;grid-template-columns:360px 1fr;gap:52px;align-items:start}
.rec-fig img{width:100%;height:auto;border:1px solid var(--rule)}
.rec-detail .sec-head .more{white-space:nowrap}

/* Recipes contents page: the gallery's rows, but the name is set over the
   picture. A photograph of a bird can caption itself; a bowl of chutney
   cannot, so the title has to be as legible as the dish. The scrim is the
   cover's, sized to the type rather than to the frame. */
.rtile{position:relative;display:block;text-decoration:none;overflow:hidden;
  border:1px solid var(--rule)}
.rtile img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  object-position:var(--focus,50% 50%);display:block;transition:transform .45s ease}
.rtile:hover img,.rtile:focus-visible img{transform:scale(1.028)}
.rtile::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;pointer-events:none;
  background:linear-gradient(to top,rgba(8,7,6,.93),rgba(8,7,6,.55) 42%,rgba(8,7,6,0))}
.rtile .lbl{position:absolute;left:20px;right:20px;bottom:17px;z-index:2}
@media (max-width:680px){.rtile .rn{font-size:23px}}
.rtile .rn{display:block;font-family:var(--serif);font-weight:400;
  font-size:var(--rn,24px);line-height:1.14;letter-spacing:-.01em;
  color:#f3ede1;text-shadow:0 1px 16px rgba(0,0,0,.72);transition:color .2s}
.rtile:hover .rn{color:var(--accent)}
.rtile .rmeta{display:block;margin-top:7px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(243,237,225,.7)}

/* ---------- prose (about, recipe + project detail) ---------- */
.prose{max-width:66ch}
.prose p{font-size:16.5px;line-height:1.72;color:var(--ink-2)}
.prose h3{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.01em;margin:36px 0 10px;color:var(--ink)}
.prose a{color:var(--accent)}
.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px;color:var(--ink-2);
  font-size:16px;line-height:1.7}
.prose li{margin:0 0 7px}
.prose li::marker{color:var(--accent)}
/* Times and equipment: a spec line, so it reads as apparatus rather than copy. */
.standfirst{font-family:var(--serif);font-style:italic;font-size:15.5px;
  color:var(--mute);margin:0 0 24px}
.about{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:76px 0 0}
.about .pull p{font-family:var(--serif);font-weight:300;font-size:22px;line-height:1.55;
  margin:0 0 18px;letter-spacing:-.01em;color:var(--ink)}
.about .side p{font-size:15px;line-height:1.7;color:var(--ink-2);margin:0 0 16px}

/* ---------- footer ---------- */
.site-foot{margin-top:80px;border-top:1px solid var(--rule-strong);padding:26px 0 60px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.site-foot a{text-decoration:none;margin-left:22px}
.site-foot a:first-child{margin-left:0}
.site-foot a:hover{color:var(--accent)}

/* ============================================================
   Responsive. The editorial grid is the first thing to go —
   below ~900px it stops being asymmetric and becomes a column.
   ============================================================ */
@media (max-width:1000px){
  .wrap{padding:0 28px}
  .hero{grid-template-columns:1fr;gap:28px;padding:44px 0 32px}
  .proj{grid-template-columns:1fr 280px;gap:28px}
  .proj-detail{grid-template-columns:1fr 250px;gap:32px}
  .rec-body{grid-template-columns:290px 1fr;gap:34px}
  .proj .kicker{grid-column:1/-1}
  .about{grid-template-columns:1fr;gap:36px;padding:56px 0 0}
}
@media (max-width:680px){
  .wrap{padding:0 20px}
  .site-head{flex-direction:column;align-items:flex-start;gap:14px;padding:22px 0 16px}
  .site-nav{gap:20px;overflow-x:auto;width:100%;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .site-nav::-webkit-scrollbar{display:none}
  .hero-fig img{height:300px}
  .sec{padding:52px 0 0}
  .pfeature .pair{grid-template-columns:1fr;gap:20px;margin-top:20px}
  .grow{flex-direction:column;gap:var(--gap)}
  .proj{grid-template-columns:1fr;gap:20px;padding:28px 0}
  .proj .shot{height:150px}
  .proj-detail{grid-template-columns:1fr;gap:26px}
  .proj .poster{max-width:170px;margin-left:0}
  .rec-list{grid-template-columns:1fr;gap:0}
  .rec-body{grid-template-columns:1fr;gap:24px}
  .rec-fig img{max-width:420px}
  .site-foot{flex-direction:column;gap:12px}
  .site-foot a{margin:0 18px 0 0}
}


/* ============================================================
   Index: cover + contents page
   One photograph given the whole width, then a contents list.
   The list is the wayfinding — there is no nav bar on the index,
   and nothing can scroll out of reach the way the old section
   links did.
   ============================================================ */
.cover{position:relative;width:100%;height:clamp(340px,63vh,720px);overflow:hidden;background:#0d0c0a}
.cover img{width:100%;height:100%;object-fit:cover;object-position:40% 60%;display:block}
/* 40% 60% is the bird's face, measured off the frame. With object-fit:cover a
   percentage pins that point of the IMAGE to the same point of the BOX, so the
   face stays put at any window shape. The old 44% sat above the head, so wide
   windows — which crop hard vertically — cut the face off the bottom. */
/* scrims: type over a photograph needs its own ground */
.cover::before{content:"";position:absolute;top:0;left:0;right:0;height:180px;z-index:1;
  background:linear-gradient(to bottom,rgba(10,9,8,.72),rgba(10,9,8,0))}
.cover::after{content:"";position:absolute;bottom:0;left:0;right:0;height:150px;z-index:1;
  background:linear-gradient(to top,rgba(10,9,8,.65),rgba(10,9,8,0))}
.cover-head{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:baseline;
  padding:28px 40px;max-width:1400px;margin:0 auto}
.cover-head .brand{color:#f3ede1;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.cover-cap{position:absolute;z-index:2;bottom:16px;right:40px;font-size:11.5px;letter-spacing:.05em;
  text-transform:none;color:rgba(243,237,225,.6);text-shadow:0 1px 12px rgba(0,0,0,.6)}

.contents{max-width:860px;margin:0 auto;padding:clamp(28px,4.4vh,52px) 40px 0}
.contents .intro{font-size:16.5px;line-height:1.65;color:var(--ink-2);margin:0 0 clamp(20px,3vh,32px);max-width:52ch}
.entry{display:flex;align-items:baseline;gap:18px;padding:clamp(12px,1.9vh,19px) 0;
  border-bottom:1px solid var(--rule);text-decoration:none;
  /* --lift raises the dots clear of the descenders in the entry name.
     --num-lift is 4px less, which puts the numeral's cap-height centre on the
     dot line rather than its baseline — measured off the rendered ink, so it
     is specific to Fraunces at this size. */
  --lift:9px; --num-lift:5px}
.entry:first-of-type{border-top:1px solid var(--rule)}
.entry .name{font-family:var(--serif);font-weight:300;font-size:clamp(25px,3.3vw,37px);
  letter-spacing:-.02em;line-height:1.05;transition:color .2s}
.entry .leader{flex:1;border-bottom:2px dotted #514839;transform:translateY(calc(var(--lift) * -1));min-width:26px}
.entry .num{font-family:var(--serif);font-size:14px;letter-spacing:.14em;color:var(--mute);
  transform:translateY(calc(var(--num-lift) * -1));transition:color .2s}
.entry:hover .name,.entry:focus-visible .name{color:var(--accent)}
/* Local only: publish.py removes these entries from dist/ entirely. */
.entry[data-draft] .name{color:var(--mute)}
.entry[data-draft] .num::after{content:" draft";color:var(--accent);font-family:var(--sans);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;margin-left:8px}
.entry:hover .num{color:var(--accent)}
.index-foot{max-width:860px;margin:0 auto;padding:clamp(24px,3.6vh,40px) 40px 44px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.index-foot a{text-decoration:none;margin-left:22px}
.index-foot a:first-child{margin-left:0}
.index-foot a:hover{color:var(--accent)}

@media (max-width:680px){
  .cover{height:clamp(300px,52vh,460px)}
  .cover-head{padding:20px}
  .cover-cap{right:20px;bottom:12px}
  .contents{padding:32px 20px 0}
  .index-foot{padding:28px 20px 44px;flex-direction:column;gap:12px}
  .index-foot a{margin:0 18px 0 0}
}