/* One Acre Fields: home ("One Acre Dawn", prototype 01).
   Only what is specific to the home sections; tokens, base, nav, buttons,
   .page, .fieldnote, .num, .dusk and .foot come from the shared layer
   (including the .oaf-home overrides in base.css). Values are verbatim
   from the prototype. */

/* ===== hero ===== */
.hero{position:relative;min-height:92vh;isolation:isolate;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}
.art{position:absolute;inset:0;z-index:-1}
/* the scene is a stack of svg layers (hero-art.php), one per depth: what keeps moving (fog, mist,
   stream, birds, parallax) is its own compositor layer, so the painted scene is rasterised once */
.art .lay{position:absolute;inset:0;width:100%;height:100%;display:block}
.grain{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 .18'/></feComponentTransfer></filter><rect width='220' height='220' filter='url(%23n)'/></svg>")}

/* layers with parallax: home.js eases `translate` on each .L by its data-depth. The small scale
   is bleed, so a shifted layer never shows its edge. The washes multiply (below), and each layer
   is its own stacking context, so the layer itself multiplies onto what is behind it. */
.L{will-change:transform,translate;mix-blend-mode:multiply}
.L.far{scale:1.008}
.L.mid{scale:1.016}
.L.near{scale:1.032}

/* ink draw-on */
.ink{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round;stroke-width:2;stroke-dasharray:3000;stroke-dashoffset:3000;animation:draw 2.8s cubic-bezier(.45,0,.2,1) forwards}
.ink.t{stroke-width:1.2}.ink.tt{stroke-width:.9;opacity:.75}
.d0{animation-delay:.3s}.d1{animation-delay:.9s}.d2{animation-delay:1.5s}.d3{animation-delay:2.1s}.d4{animation-delay:2.7s}
@keyframes draw{to{stroke-dashoffset:0}}
/* watercolour washes */
.wash{opacity:0;animation:bloom 2.6s ease forwards;mix-blend-mode:multiply}
.w0{animation-delay:1.6s}.w1{animation-delay:2.2s}.w2{animation-delay:2.8s}.w3{animation-delay:3.4s}
@keyframes bloom{to{opacity:1}}
/* valley mist lifts */
.mistL{overflow:visible;will-change:transform,opacity;animation:lift 9s cubic-bezier(.25,.6,.2,1) forwards;transform-origin:50% 60%}
.mistL.m2{animation-duration:11s;animation-delay:.4s}
.mistL.m3{animation-duration:13s;animation-delay:.8s}
@keyframes lift{0%{opacity:1;transform:translateY(0) scale(1)}30%{opacity:1}100%{opacity:.42;transform:translateY(-10%) scale(1.12)}}
/* stream, fog, birds */
.stream{fill:none;stroke:var(--ink);stroke-width:.9;stroke-linecap:round;stroke-dasharray:7 6;opacity:0;animation:flow 24s linear infinite,streamin 1.6s ease 3.4s forwards}
@keyframes streamin{to{opacity:.75}}
.fog{overflow:visible;will-change:transform;animation:roll 38s ease-in-out infinite alternate;transform-origin:50% 60%}
@keyframes roll{from{transform:translate(-3%,1%) scale(1.02)}to{transform:translate(3%,-2%) scale(1.08)}}
@keyframes flow{to{stroke-dashoffset:-520}}
.birds{animation:fly 46s linear infinite;opacity:0;animation-delay:4s}
@keyframes fly{0%{transform:translate(-8%,4%);opacity:0}6%{opacity:.8}94%{opacity:.8}100%{transform:translate(70%,-10%);opacity:0}}
.wing{animation:flap 1.1s ease-in-out infinite alternate;transform-origin:center}
@keyframes flap{from{transform:scaleY(.4)}to{transform:scaleY(1)}}

/* lingering mist: CSS only, renders everywhere */
.fogc{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fogc i{position:absolute;display:block;border-radius:50%;background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.55) 55%, rgba(255,255,255,0));filter:blur(22px);opacity:0;animation:fogin 6s ease 5s forwards, fogdrift var(--d,40s) ease-in-out infinite alternate;will-change:transform,opacity}
.fogc i:nth-child(1){left:-12%;top:44%;width:70%;height:24%;--d:46s}
.fogc i:nth-child(2){left:35%;top:50%;width:60%;height:22%;--d:38s;animation-delay:5.6s,0s}
.fogc i:nth-child(3){left:55%;top:58%;width:64%;height:26%;--d:52s;animation-delay:6.2s,0s}
.fogc i:nth-child(4){left:-8%;top:62%;width:56%;height:20%;--d:44s;animation-delay:6.8s,0s}
.fogc i:nth-child(5){left:22%;top:70%;width:80%;height:22%;--d:58s;animation-delay:7.4s,0s}
@keyframes fogin{to{opacity:.75}}
@keyframes fogdrift{from{transform:translate(-4%,1%) scale(1)}to{transform:translate(5%,-3%) scale(1.12)}}
.end .fogc i{animation:none;opacity:.75}
@media (prefers-reduced-motion: reduce){.fogc i{animation:none;opacity:.6}}

/* hero copy (the .top row itself is .oaf-nav-over .top in nav.css) */
.hero > .mid{display:grid;align-content:center;padding:2rem clamp(18px,4.5vw,56px);position:relative;z-index:3}
.copy{max-width:min(92vw,720px);display:grid;gap:1.2rem;position:relative;padding:1.6rem 1.8rem 1.6rem 0;margin-left:-.2rem}
.copy::before{content:"";position:absolute;inset:-6% -14% -10% -24%;z-index:-1;background:radial-gradient(70% 70% at 40% 50%, rgba(246,242,232,.92) 0%, rgba(246,242,232,.75) 45%, rgba(246,242,232,0) 78%);pointer-events:none}
/* the copy (and the h1, the LCP) comes in fast, ~.5s; the dawn keeps drawing behind it */
.copy{opacity:0;transform:translateY(14px);animation:up .6s cubic-bezier(.2,.7,.2,1) .05s forwards}
@keyframes up{to{opacity:1;transform:none}}
.who{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.hero h1{font-family:var(--display);font-weight:var(--dw);font-size:clamp(2.1rem,4.8vw,4.3rem);line-height:1.02;letter-spacing:var(--dls);text-transform:var(--dcase);text-wrap:balance;margin:0}
.hero h1 em{font-style:normal;color:var(--earth)}
.sub{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--ink-2);max-width:42ch}
.bot{display:flex;justify-content:space-between;align-items:end;padding:0 clamp(18px,4.5vw,56px) 1.5rem;position:relative;z-index:3;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);gap:1rem}
.bot .alt{line-height:1.8}
.cue{display:flex;align-items:center;gap:.6rem}
.cue i{display:block;width:1px;height:34px;background:var(--ink-2);opacity:.6;animation:drop 2.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* hand-written notes on the scene. n1 sits on the red beds just below the
   bamboo tripod (the prototype's 22% ran the words across its legs; Kalam
   is wider than the old hand font); n2 stays on the wooded ridge above the
   house, and steps up at tablet widths so it clears the roof corner. */
.hero .note{position:absolute;right:clamp(18px,6vw,80px);bottom:19%}
.hero .note.n1{right:auto;left:38%;bottom:9%;transform:rotate(-3deg);text-align:left}
.hero .note.n2{right:clamp(18px,4vw,60px);bottom:36%;transform:rotate(3deg)}
@media (max-width:1100px){.hero .note.n2{bottom:40%}}
.hero .note{z-index:3;font-family:var(--hand);font-size:clamp(1rem,1.5vw,1.3rem);color:var(--earth);line-height:1.3;letter-spacing:0;text-align:right;opacity:0;animation:up 1.4s ease 4.2s forwards}
.hero .note small{display:block;font-family:var(--hand);font-weight:300;font-size:.9em;color:var(--ink-2);line-height:1.25}
.replay{position:absolute;right:clamp(18px,4.5vw,56px);top:calc(4.2rem + env(safe-area-inset-top,0px));z-index:4;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(246,242,232,.7);border:1px solid rgba(30,37,32,.3);color:var(--ink);padding:.5em .9em;border-radius:999px;cursor:pointer}
/* settled state: ?end=1 (and the ?flat=1 review shot) */
.end .ink,.end .wash,.end .mistL,.end .copy,.end .hero .note{animation-duration:.01s !important;animation-delay:0s !important}
.end .birds{animation:none;opacity:.7;transform:translate(30%,-3%)}
.end .fog{animation:none}
.end .stream{animation:flow 24s linear infinite;opacity:.75}
@media (prefers-reduced-motion: reduce){
  .ink,.wash,.mistL,.copy,.hero .note,.birds,.stream,.cue i,.wing,.fog{animation:none}
  .ink{stroke-dashoffset:0}
  .stream{opacity:.75}
  .wash,.copy,.hero .note{opacity:1;transform:none}
  .mistL{opacity:.08}
  .birds{opacity:.7;transform:translate(30%,-3%)}
  .replay{transition:none}
}
@media (max-width:760px){.replay{top:auto;bottom:1.5rem}.hero .note{display:none}.bot .alt{display:none}.hero > .mid{align-content:end;padding-bottom:5rem}.hero h1{font-size:clamp(2.3rem,11vw,3.6rem)}}

/* ===== the day continues below the hero ===== */
/* clip, not hidden: `hidden` makes each section a scroll container, and the view() timelines
   inside it (base.css: the .rv rise, the spots' line draw) then measure against the section
   instead of the page and never move. */
.oaf-home .sec{overflow:clip}
/* point of view: morning */
.pov{background:linear-gradient(var(--paper), #F3EEE2)}
.pov .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.pov .h2{max-width:22ch}
.stops{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.stops li{display:grid;gap:.35rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.stops b{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--earth-text);font-weight:500}
.stops span{color:var(--ink-2);font-size:.98rem;line-height:1.55}
/* the acre: where the why was learned */
.why{background:linear-gradient(#EFE8D8, #EBE2CE)}
.why .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.facts{font-family:var(--mono);font-size:.72rem;color:var(--ink-3-text);margin:1.8rem 0 0;border-top:1px solid var(--line)}
.facts div{display:flex;justify-content:space-between;gap:1rem;padding-block:.7rem;border-bottom:1px solid var(--line)}
.facts dt,.facts dd{margin:0}
.facts b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
/* what I do: afternoon */
.cap{background:linear-gradient(#E6D6B8, #E0CDA9)}
.cap .head{max-width:60ch;margin-bottom:2.6rem}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.6rem)}
.card{position:relative;padding:1.6rem 1.4rem 1.8rem;border-radius:4px;background:rgba(255,255,255,.35);box-shadow:0 1px 0 rgba(30,37,32,.12), inset 0 0 0 1px rgba(30,37,32,.08)}
.card::before{content:"";position:absolute;inset:8px;border:1px solid rgba(30,37,32,.18);border-radius:3px;pointer-events:none;transform:rotate(-.4deg)}
.card .spot{max-width:150px;margin-bottom:1rem}
.card h3{font-family:var(--display);font-weight:var(--dw);font-size:1.35rem;letter-spacing:var(--dls);text-transform:var(--dcase);margin:0 0 .5rem}
.card p{color:var(--ink-2);font-size:.95rem;margin:0}
.card .hand{margin-top:.9rem;font-size:1rem}
/* the principle: a field note (.fieldnote itself is in components.css) */
.note-sec{background:linear-gradient(#EBE2CE, #E6D6B8)}
.note-sec .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.note-sec .h2 + .p{margin-top:1rem}
/* the proof: late morning */
.work{background:linear-gradient(#F3EEE2, #EFE8D8)}
.work .head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end;margin-bottom:2.4rem}
.work .head .to-confirm{margin:0}
.pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.2rem)}
.pages .page{color:inherit}
.pages .page:nth-child(1){transform:rotate(-1deg)}.pages .page:nth-child(2){transform:rotate(.6deg) translateY(10px)}.pages .page:nth-child(3){transform:rotate(-.5deg)}
.pages .page:hover{transform:rotate(0) translateY(-4px)}
.pages .page .k{margin-bottom:.2rem}
.pages .page h3{margin:0;max-width:none}
/* the spot sits beside the kicker + headline, never over the text (review D7) */
.pages .page-head{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:.9rem;align-items:start}
.pages .page-head > div{display:grid;gap:.7rem;align-content:start}
.pages .page .page-head .spot{position:static;max-width:96px;justify-self:end;opacity:.85}
.pages .page .row b{color:var(--ink-3-text)}
.quotes{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.2rem)}
.quotes li{border-left:2px solid var(--earth);padding-left:1rem}
.quotes blockquote{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink);font-style:italic}
.quotes blockquote::before{content:"\201C"}.quotes blockquote::after{content:"\201D"}
.quotes cite{display:block;margin-top:.6rem;font-family:var(--mono);font-style:normal;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.more{margin-top:1.6rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink-2)}
/* numbers: golden */
.nums{background:linear-gradient(#E0CDA9, #D9C39C)}
.nums .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}

@media (max-width:860px){.why .wrap,.pov .wrap,.note-sec .wrap{grid-template-columns:1fr}.three,.pages,.quotes{grid-template-columns:1fr}.nums .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.work .head{grid-template-columns:1fr}.pages .page{transform:none !important}.pages .page-head{grid-template-columns:minmax(0,1fr) 72px}.pages .page .page-head .spot{max-width:72px}
  /* dusk: stacked, the copy sits high; darken in px so it reads on the dark (review A2) */
  .oaf-home .dusk{padding-top:7rem;background:linear-gradient(#D9C39C 0, #6E5A48 60px, #2A2A2A 180px, #1C201D 100%)}}
@media (prefers-reduced-motion: reduce){.card,.pages .page{transition:none}}

/* ===== arrivals =====
   front-page.php marks <html> .home-live (JS on, motion allowed) and home.js adds .in to each
   .rv as it comes into view; --i (set by home.js) staggers neighbours. These replace the
   scroll-scrubbed rise and line draw from base.css, which stay as the no-JS version.
   Entrances fill backwards only: once they end, the rules above are the resting state. */
@media screen and (prefers-reduced-motion: no-preference){
  .home-live{--hm-out:cubic-bezier(.2,.7,.2,1)}
  .home-live main .rv{animation:none}
  .home-live main .rv:not(.in){opacity:0}
  .home-live main .rv.in{animation:hm-rise .9s var(--hm-out) calc(var(--i,0)*90ms) backwards}
  @keyframes hm-rise{from{opacity:0;translate:0 26px}}
  /* lists inside a block come in row by row */
  .home-live .stops.rv.in{animation:none}
  .home-live .rv.in .stops li,.home-live .stops.in li,.home-live .rv.in .facts div,.home-live .quotes.in li{animation:hm-rise .8s var(--hm-out) backwards}
  .home-live .stops.in li:nth-child(1){animation-delay:.1s}.home-live .stops.in li:nth-child(2){animation-delay:.22s}.home-live .stops.in li:nth-child(3){animation-delay:.34s}
  .home-live .rv.in .facts div:nth-child(1){animation-delay:.3s}.home-live .rv.in .facts div:nth-child(2){animation-delay:.38s}.home-live .rv.in .facts div:nth-child(3){animation-delay:.46s}.home-live .rv.in .facts div:nth-child(4){animation-delay:.54s}.home-live .rv.in .facts div:nth-child(n+5){animation-delay:.62s}
  .home-live .quotes.rv.in{animation:none}
  .home-live .quotes.in li:nth-child(2){animation-delay:.12s}.home-live .quotes.in li:nth-child(3){animation-delay:.24s}
  /* the spots are inked once their card has arrived: the lines draw, then the wash blooms */
  .home-live main .spot .i,.home-live main .spot .it{animation:none;stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.7s cubic-bezier(.45,0,.2,1) calc(.25s + var(--i,0)*90ms)}
  .home-live main .rv.in .spot .i,.home-live main .rv.in .spot .it{stroke-dashoffset:0}
  .home-live main .spot .w{transition:opacity 1.2s ease calc(.9s + var(--i,0)*90ms)}
  .home-live main .rv:not(.in) .spot .w{opacity:0}
}