/* =========================================================================
   Wren Arkle — Field Almanac  (Photographer Demo 04)
   Lichen stone + peat ink + rust signal; four earth season grounds flood on scroll.
   Webflow-portable habits: literal grid lists, longhand box sides, separate gaps.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --lichen:#D8D6CB; --bone:#ECEAE2; --peat:#1C1D19; --scree:#5C5D55; --rule:#B4B2A6; --rust:#8A3B23;
  --spring:#A3A77F; --summer:#B98A3E; --autumn:#8A3B23; --winter:#2E3D44;
  --bg:var(--lichen); --fg:var(--peat); --muted:var(--scree); --line:var(--rule); --signal:var(--rust); --mat:var(--bone);
  --f-display:'Gloock', 'Georgia', serif;
  --f-script:'Corinthia', 'Brush Script MT', cursive;
  --f-ui:'Host Grotesk', 'Arial', sans-serif;
  --m:32px; --g:24px; --maxw:1760px; --hdr:64px; --sec:160px;
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.86,0,.07,.995);
  --shadow:0 1px 2px rgb(28 29 25 / .18), 0 18px 40px -18px rgb(28 29 25 / .35);
}
@media (max-width:991px){ :root{ --m:24px; --g:20px; --sec:128px; } }
@media (max-width:767px){ :root{ --m:16px; --g:12px; --hdr:52px; --sec:96px; } }
/* season grounds: text is always full peat or full bone (never muted) */
html.is-season{ --muted:var(--fg); --signal:var(--fg); }
html.is-dark{ --fg:var(--bone); --muted:var(--bone); --line:rgb(236 234 226 / .32); --signal:var(--bone); }
::selection{ background:var(--rust); color:var(--bone); }

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--bg); color:var(--fg); scroll-padding-top:calc(var(--hdr) + 16px); overflow-x:clip; }
html:has(.seasons.is-on){ scroll-padding-bottom:64px; }
body{ margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; background:var(--bg); color:var(--fg); font-family:var(--f-ui); font-weight:400; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip; transition:color .4s; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; cursor:pointer; border-top-width:0; border-right-width:0; border-bottom-width:0; border-left-width:0; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; letter-spacing:inherit; text-transform:inherit; }
h1,h2,h3,h4,p,ol,ul,dl,dd,figure,fieldset{ margin-top:0; margin-right:0; margin-bottom:0; margin-left:0; }
ol,ul{ padding-left:0; list-style:none; }
fieldset{ border-top-width:0; border-right-width:0; border-bottom-width:0; border-left-width:0; padding-top:0; padding-right:0; padding-bottom:0; padding-left:0; min-width:0; }
input, textarea, select{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }
:focus{ outline:none; }
:focus-visible{ outline-width:2px; outline-style:solid; outline-color:var(--signal); outline-offset:3px; }
.vh{ position:absolute !important; top:0; left:0; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.skip{ position:fixed; top:8px; left:8px; z-index:900; background:var(--peat); color:var(--bone); padding-top:14px; padding-right:14px; padding-bottom:14px; padding-left:14px; transform:translateY(-200%); }
.skip:focus-visible{ transform:none; }

/* 44px hit areas for inline underlined links (the underline stays where it is) */
.bloom__cap a, .tile__open, .print__reserve, .link-u, .capcol__links a, .drawer__link, .hdr__m3 a, .hdr__pdf, .foot__next a, .reps a{ position:relative; }
.bloom__cap a::before, .tile__open::before, .print__reserve::before, .link-u::before, .capcol__links a::before, .drawer__link::before, .hdr__m3 a::before, .hdr__pdf::before, .foot__next a::before, .reps a::before{ content:''; position:absolute; left:-4px; right:-4px; top:50%; height:44px; margin-top:-22px; }

/* ---------- 3. Type ---------- */
.micro{ font-family:var(--f-ui); font-weight:500; font-size:12px; line-height:1.35; letter-spacing:.02em; text-transform:uppercase; }
.cap{ font-family:var(--f-ui); font-weight:400; font-size:12px; line-height:1.4; }
.body{ font-size:clamp(16px, 1.15vw, 17px); line-height:1.55; max-width:56ch; }
.muted{ color:var(--muted); }
.display{ font-family:var(--f-display); font-weight:400; letter-spacing:-.025em; line-height:.95; }
.h2{ font-family:var(--f-display); font-weight:400; font-size:clamp(44px, 7vw, 120px); line-height:.95; letter-spacing:-.025em; }
.sig{ display:inline-block; font-family:var(--f-script); font-weight:700; font-size:1.28em; line-height:0; letter-spacing:0; margin-left:.02em; margin-right:.06em; position:relative; vertical-align:baseline; }
.sig__w{ display:inline-block; }
html.js .sig.is-pending .sig__w{ clip-path:inset(-1.5em 100% -1.5em 0em); }
.tnum{ font-variant-numeric:tabular-nums; }
.line-mask{ display:block; overflow:clip; overflow-clip-margin:.12em; }
.line-mask > span{ display:block; }

/* ---------- 4. Grid ---------- */
.grid{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows:auto; column-gap:var(--g); row-gap:0; max-width:var(--maxw); margin-left:auto; margin-right:auto; padding-left:var(--m); padding-right:var(--m); }
@media (max-width:991px){ .grid{ grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } }
@media (max-width:767px){ .grid{ grid-template-columns:1fr 1fr 1fr 1fr; } }
.sec{ padding-top:var(--sec); padding-bottom:var(--sec); position:relative; }
.full{ grid-column:1 / -1; }

/* ---------- 5. Compass star (the one shape) ---------- */
.star{ display:inline-block; width:10px; height:10px; flex-shrink:0; color:var(--signal); vertical-align:middle; transition:transform .9s var(--e-out), color .4s; }
.star svg{ display:block; width:100%; height:100%; overflow:visible; }
.star .n{ fill:currentColor; }
.star .s{ fill:none; stroke:currentColor; stroke-width:1.2; vector-effect:non-scaling-stroke; }

/* ---------- 6. Header ---------- */
.hdr{ position:fixed; top:0; left:0; right:0; z-index:300; background:var(--bg); transition:color .4s; }
.hdr__in{ height:var(--hdr); align-items:center; }
.hdr__mark{ grid-column:1 / 3; display:inline-flex; align-items:center; column-gap:8px; justify-self:start; min-height:44px; white-space:nowrap; }
.hdr__mark .full-name{ display:inline-block; overflow:hidden; max-width:0; transition:max-width .6s var(--e-out), opacity .4s; opacity:0; }
html.is-past-wall .hdr__mark .full-name{ max-width:9em; opacity:1; }
html.is-past-wall .hdr__mark .initials{ display:none; }
.hdr__meta{ display:flex; flex-direction:column; row-gap:2px; transition:opacity .4s, visibility 0s; }
.hdr__meta .k{ color:var(--muted); }
.hdr__m1{ grid-column:3 / 5; }
.hdr__m2{ grid-column:5 / 7; }
.hdr__m3{ grid-column:7 / 9; }
.hdr__m3 a{ align-self:flex-start; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:currentColor; }
.hdr__nav{ grid-column:9 / 13; justify-self:end; display:flex; align-items:center; column-gap:18px; white-space:nowrap; }
.snav{ display:flex; align-items:center; position:relative; }
.snav a{ color:var(--muted); padding-top:14px; padding-bottom:14px; transition:color .3s; }
.snav a[aria-current="true"], .snav a:hover, .snav a:focus-visible{ color:var(--fg); }
.snav .comma{ color:var(--muted); margin-right:.35em; }
.snav__star{ position:absolute; top:2px; left:0; width:9px; height:9px; pointer-events:none; }
.hdr__cta{ padding-top:14px; padding-bottom:14px; }
.hdr__menu{ display:none; min-height:44px; padding-left:8px; }
html.is-past-hero .hdr__meta{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .4s, visibility 0s .4s; }
@media (max-width:1359px){
  .hdr__m1{ grid-column:3 / 6; }
  .hdr__m3{ display:none; }
  .hdr__m2{ grid-column:6 / 9; }
  .hdr__nav{ grid-column:9 / 13; }
}
@media (max-width:1119px){
  .hdr__meta, .snav, .hdr__pdf{ display:none; }
  .hdr__nav{ grid-column:5 / -1; }
  .hdr__menu{ display:inline-flex; align-items:center; }
}
@media (max-width:767px){
  .hdr__mark{ grid-column:1 / 3; }
  .hdr__nav{ grid-column:3 / 5; column-gap:14px; }
}

/* ---------- 7. The Field Wall (hero + hang) ---------- */
main{ display:block; }
.field{ position:relative; padding-top:var(--hdr); }
.field__mark{ position:sticky; top:var(--hdr); z-index:1; pointer-events:none; }
.wordmark{ font-family:var(--f-display); font-weight:400; font-size:14.2vw; line-height:.95; letter-spacing:-.025em; white-space:nowrap; padding-top:.08em; margin-left:-.02em; color:var(--fg); transition:color .6s; }
@media (min-width:1760px){ .wordmark{ font-size:min(14.2vw, 250px); } }
.wordmark .sig{ font-size:1.22em; margin-left:-.02em; margin-right:.02em; }
.field.is-passing .wordmark{ color:var(--scree); }
.field__wall{ position:relative; z-index:2; row-gap:0; align-items:start; margin-top:calc(var(--g) * .5); }
.field__intro{ grid-column:1 / 4; grid-row:1; font-size:15px; line-height:1.42; max-width:30ch; }
.field__intro .short{ display:none; }
.plate{ position:relative; display:block; background:var(--ph, #8f8d84); }
.plate img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s; }
.plate img.is-in{ opacity:1; }
.plate__label{ display:block; padding-top:8px; font-size:12px; line-height:1.35; }
.plate__label b{ font-weight:500; }
.plate--hover .plate__label{ position:absolute; top:100%; left:0; white-space:nowrap; opacity:0; transform:translateY(-4px); transition:opacity .3s, transform .3s var(--e-out); pointer-events:none; }
.plate--hover:hover .plate__label, .plate--hover:focus-visible .plate__label{ opacity:1; transform:none; }
.w-s2 .plate__label{ left:auto; right:0; text-align:right; }
.fig{ position:relative; }
.fig .plate{ width:100%; }
/* first screen */
.w-xl{ grid-column:5 / 13; grid-row:1 / 3; justify-self:end; width:min(100%, calc((100svh - var(--wall-top, 272px) - 22px) * 1.5)); }
.w-xl .plate{ aspect-ratio:3 / 2; }
.w-xl-label{ grid-column:4 / 5; grid-row:2; align-self:end; padding-bottom:2px; }
.w-l{ grid-column:1 / 4; grid-row:2; margin-top:var(--g); }
.w-l .plate{ aspect-ratio:4 / 5; }
.w-s1{ grid-column:4 / 5; grid-row:2; align-self:start; margin-top:calc(var(--g) * 4); }
.w-s1 .plate, .w-s2 .plate{ aspect-ratio:4 / 5; }
.w-s2{ position:absolute; z-index:2; top:calc(var(--hdr) + 32px); right:max(var(--m), calc((100% - var(--maxw)) / 2 + var(--m))); width:calc((min(100vw, var(--maxw)) - 2 * var(--m) - 11 * var(--g)) / 12); }
.w-m{ grid-column:2 / 4; grid-row:3; margin-top:var(--g); }
.w-m .plate{ aspect-ratio:1 / 1; }
/* the hang below the fold */
.field__hang{ position:relative; z-index:2; padding-top:var(--sec); padding-bottom:calc(var(--sec) * 1.4); row-gap:calc(var(--g) * 3); align-items:start; }
.h1{ grid-column:7 / 11; grid-row:1; }
.h1 .plate{ aspect-ratio:4 / 5; }
.h2p{ grid-column:2 / 5; grid-row:1; margin-top:22vh; }
.h2p .plate{ aspect-ratio:3 / 2; }
.h3{ grid-column:12 / 13; grid-row:1; margin-top:40vh; }
.h3 .plate{ aspect-ratio:4 / 5; }
.h4{ grid-column:5 / 8; grid-row:2; }
.h4 .plate{ aspect-ratio:4 / 5; }
.h5{ grid-column:1 / 2; grid-row:2; margin-top:16vh; }
.h5 .plate{ aspect-ratio:4 / 5; }
.h6{ grid-column:8 / 13; grid-row:2; margin-top:30vh; }
.h6 .plate{ aspect-ratio:3 / 2; }
.h7{ grid-column:3 / 6; grid-row:3; }
.h7 .plate{ aspect-ratio:4 / 5; }
@media (max-width:991px){
  .w-xl{ grid-column:3 / 9; }
  .w-xl-label{ grid-column:7 / 9; grid-row:3; align-self:start; padding-top:8px; }
  .w-l{ grid-column:1 / 3; }
  .w-s1{ display:none; }
  .w-m{ grid-column:4 / 7; grid-row:3; }
  .field__intro{ grid-column:1 / 3; }
  .h1{ grid-column:4 / 8; } .h2p{ grid-column:1 / 4; } .h3{ grid-column:8 / 9; }
  .h4{ grid-column:2 / 5; } .h5{ grid-column:1 / 2; } .h6{ grid-column:5 / 9; } .h7{ grid-column:2 / 5; }
}
@media (max-width:767px){
  .wordmark{ font-size:25vw; white-space:normal; line-height:.86; }
  .wordmark .wm-line{ display:block; }
  .w-s2{ top:calc(var(--hdr) + 18px); width:84px; }
  .field__intro{ grid-column:1 / -1; grid-row:1; font-size:11px; line-height:1.35; letter-spacing:.02em; text-transform:uppercase; font-weight:500; max-width:none; padding-top:6px; }
  .field__intro .long{ display:none; }
  .field__intro .short{ display:inline; }
  .w-xl{ grid-column:1 / -1; grid-row:2; width:100%; margin-top:12px; }
  .w-xl .plate{ aspect-ratio:4 / 5; max-height:calc(100svh - 340px); min-height:300px; width:100%; }
  .w-xl-label{ grid-column:1 / -1; grid-row:3; padding-top:8px; }
  .w-l{ grid-column:2 / 5; grid-row:4; margin-top:calc(var(--g) * 3); }
  .w-m{ grid-column:1 / 3; grid-row:5; }
  .field__hang{ row-gap:calc(var(--g) * 4); }
  .h1{ grid-column:1 / 4; grid-row:1; } .h2p{ grid-column:2 / 5; grid-row:2; margin-top:0; } .h3{ grid-column:4 / 5; grid-row:2; margin-top:0; align-self:start; display:none; }
  .h4{ grid-column:1 / 3; grid-row:3; } .h5{ grid-column:3 / 5; grid-row:3; margin-top:18vh; } .h6{ grid-column:1 / 5; grid-row:4; margin-top:0; } .h7{ grid-column:2 / 4; grid-row:5; }
}

/* ---------- 8. Statement ---------- */
.statement{ align-items:start; row-gap:var(--s7, 48px); }
.statement__text{ grid-column:2 / 10; font-family:var(--f-display); font-size:clamp(26px, 3vw, 46px); line-height:1.12; letter-spacing:-.015em; }
.almanac{ grid-column:10 / 13; display:flex; flex-direction:column; row-gap:14px; padding-top:10px; border-top-width:1px; border-top-style:solid; border-top-color:var(--line); }
.almanac li{ display:flex; justify-content:space-between; column-gap:16px; padding-bottom:12px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line); }
.almanac b{ font-family:var(--f-display); font-weight:400; font-size:28px; line-height:1; }
@media (max-width:991px){ .statement__text{ grid-column:1 / -1; } .almanac{ grid-column:1 / 6; } }
@media (max-width:767px){ .almanac{ grid-column:1 / -1; } }

/* ---------- 9. Star Bloom ---------- */
.bloom{ position:relative; height:250vh; }
.bloom__stage{ position:sticky; top:0; height:100svh; overflow:hidden; }
.bloom__pic{ position:absolute; top:0; right:0; bottom:0; left:0; will-change:clip-path; background:var(--ph, #7d8a87); clip-path:polygon(50% 40%, 52% 50%, 50% 60%, 48% 50%); }
.bloom__pic img{ width:100%; height:100%; object-fit:cover; }
.bloom__side{ position:absolute; top:50%; z-index:2; transform:translateY(-50%); }
.bloom__l{ left:var(--m); }
.bloom__r{ right:var(--m); text-align:right; max-width:32vw; }
.bloom__title{ font-family:var(--f-display); font-size:clamp(36px, 4.6vw, 76px); line-height:.95; letter-spacing:-.02em; padding-bottom:.62em; }
.bloom__cap{ position:absolute; left:0; right:0; bottom:0; height:96px; z-index:2; display:flex; align-items:center; justify-content:space-between; column-gap:24px; padding-left:var(--m); padding-right:var(--m); opacity:0; }
.bloom__cap a{ border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:currentColor; padding-top:8px; padding-bottom:2px; }
/* the caption link is the keyboard stop: never let it sit invisible while focused */
.bloom:focus-within .bloom__cap{ opacity:1 !important; }
html.no-anim .bloom{ height:auto; }
html.no-anim .bloom__stage{ position:relative; height:min(100svh, 900px); }
html.no-anim .bloom__pic{ clip-path:inset(16px 16px 96px 16px); }
html.no-anim .bloom__side{ display:none; }
html.no-anim .bloom__cap{ opacity:1; }
@media (max-width:767px){
  .bloom{ height:210vh; }
  .bloom__l{ top:calc(var(--hdr) + 24px); transform:none; }
  .bloom__r{ top:auto; bottom:120px; transform:none; max-width:none; left:var(--m); text-align:left; }
  .bloom__cap{ height:auto; min-height:96px; flex-direction:column; align-items:flex-start; justify-content:center; row-gap:6px; }
}

/* ---------- 10. The Year ---------- */
.year__head{ align-items:end; padding-bottom:var(--g); }
.year__title{ grid-column:1 / 8; }
.year__intro{ grid-column:8 / 13; padding-bottom:12px; }
.chapter{ position:relative; padding-top:calc(var(--sec) * .75); padding-bottom:calc(var(--sec) * .5); }
.chapter__head{ align-items:end; padding-bottom:calc(var(--g) * 2); }
.chapter__name{ grid-column:1 / 9; font-family:var(--f-display); font-size:clamp(64px, 10vw, 160px); line-height:.9; letter-spacing:-.03em; }
.chapter__name .dash{ font-family:var(--f-ui); font-size:.14em; letter-spacing:.02em; text-transform:uppercase; font-weight:500; vertical-align:top; margin-left:.4em; display:inline-block; padding-top:1.2em; }
.chapter__alm{ grid-column:9 / 13; display:flex; flex-direction:column; row-gap:4px; padding-bottom:10px; }
.chapter__alm .months{ font-weight:500; }
.tiles{ display:flex; flex-direction:column; row-gap:calc(var(--g) * 4); }
.tile{ display:flex; justify-content:space-between; align-items:stretch; column-gap:1.5rem; width:100%; max-width:var(--maxw); margin-left:auto; margin-right:auto; padding-left:var(--m); padding-right:var(--m); }
.tile--b{ flex-direction:row-reverse; }
.tile__photo{ flex-grow:7; flex-shrink:1; flex-basis:0%; max-width:60rem; position:relative; overflow:hidden; display:block; background:var(--ph); }
.tile__photo img{ width:100%; height:100%; aspect-ratio:3 / 2; object-fit:cover; transition:transform 1.2s var(--e-out); }
.tile__photo:hover img, .tile:focus-within .tile__photo img{ transform:scale(1.03); }
.tile__card{ flex-grow:4; flex-shrink:1; flex-basis:0%; max-width:34rem; display:flex; flex-direction:column; justify-content:space-between; row-gap:24px; padding-top:28px; padding-right:28px; padding-bottom:28px; padding-left:28px; background:var(--card); color:var(--ink); transition:transform .6s var(--e-out); --signal:var(--ink); }
.tile:hover .tile__card{ transform:translateX(-8px); }
.tile--b:hover .tile__card{ transform:translateX(8px); }
.tile__top{ display:flex; align-items:center; justify-content:space-between; column-gap:12px; }
.tile__top .star{ width:14px; height:14px; color:var(--ink); transform:rotate(var(--rot, 0deg)); }
.tile:hover .tile__top .star, .tile:focus-within .tile__top .star{ transform:rotate(calc(var(--rot, 0deg) + 90deg)); }
.tile__client{ font-family:var(--f-display); font-size:clamp(26px, 2.6vw, 40px); line-height:1; letter-spacing:-.02em; }
.tile__title{ font-family:var(--f-display); font-size:clamp(20px, 1.7vw, 26px); line-height:1.1; }
.tile__rows{ display:flex; flex-direction:column; row-gap:4px; }
.tile__open{ display:inline-flex; align-items:center; column-gap:8px; align-self:flex-start; padding-top:10px; padding-bottom:10px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:currentColor; }
.tile__card a:focus-visible{ outline-color:var(--ink); }
/* daylight bar: sunrise→sunset on a 24h track */
.daylight{ display:flex; flex-direction:column; row-gap:6px; }
.daylight__track{ position:relative; height:6px; background:color-mix(in srgb, var(--ink) 18%, transparent); }
.daylight__fill{ position:absolute; top:0; bottom:0; left:var(--from); width:var(--span); background:var(--ink); transform-origin:50% 50%; }
.daylight__ticks{ display:flex; justify-content:space-between; font-size:11px; letter-spacing:.02em; }
.daylight__sum{ display:flex; justify-content:space-between; column-gap:12px; }
/* season bar */
.seasons{ position:fixed; left:0; right:0; bottom:0; z-index:250; height:48px; display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:auto; column-gap:0; row-gap:0; transform:translateY(100%); visibility:hidden; transition:transform .6s var(--e-out), visibility 0s .6s; }
.seasons.is-on{ transform:none; visibility:visible; transition:transform .6s var(--e-out), visibility 0s; }
/* without GSAP the bar is a static row of anchors after The Year */
html.no-gsap .seasons{ position:relative; transform:none; visibility:visible; }
.seasons button{ display:flex; align-items:center; justify-content:center; column-gap:10px; height:48px; font-weight:500; font-size:12px; letter-spacing:.02em; text-transform:uppercase; }
.seasons .s-spring{ background:var(--spring); color:var(--peat); }
.seasons .s-summer{ background:var(--summer); color:var(--peat); }
.seasons .s-autumn{ background:var(--autumn); color:var(--bone); }
.seasons .s-winter{ background:var(--winter); color:var(--bone); }
.seasons .star{ width:12px; height:12px; color:currentColor; opacity:0; transform:scale(.4); }
.seasons button[aria-current="true"] .star{ opacity:1; transform:scale(1) rotate(var(--rot, 0deg)); }
.seasons button:focus-visible{ outline-color:currentColor; outline-offset:-5px; }
/* no-JS / static fallback: each chapter carries its own ground */
html:not(.anim-ready) .chapter[data-season="spring"]{ background:var(--spring); --signal:var(--peat); }
html:not(.anim-ready) .chapter[data-season="summer"]{ background:var(--summer); --signal:var(--peat); }
html:not(.anim-ready) .chapter[data-season="autumn"]{ background:var(--autumn); color:var(--bone); --fg:var(--bone); --muted:var(--bone); --signal:var(--bone); }
html:not(.anim-ready) .chapter[data-season="winter"]{ background:var(--winter); color:var(--bone); --fg:var(--bone); --muted:var(--bone); --signal:var(--bone); }
html.is-dark .tile__photo, html.is-dark .print__mat, html.is-dark .sheet{ box-shadow:0 0 0 1px rgb(236 234 226 / .35); }
@media (max-width:991px){
  .year__title{ grid-column:1 / -1; } .year__intro{ grid-column:1 / 7; padding-top:16px; }
  .chapter__name{ grid-column:1 / -1; } .chapter__alm{ grid-column:1 / 6; padding-top:12px; }
}
@media (max-width:767px){
  .year__intro, .chapter__alm{ grid-column:1 / -1; }
  .tile, .tile--b{ flex-direction:column; padding-left:var(--m); padding-right:var(--m); }
  .tile__photo, .tile__card{ max-width:none; flex-grow:0; flex-basis:auto; }
  .tile__photo img{ aspect-ratio:4 / 5; }
  .tile__card{ min-height:196px; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px; }
  .tile:hover .tile__card, .tile--b:hover .tile__card{ transform:none; }
  .seasons .s-long{ display:none; }
}

/* ---------- 11. Prints + compass dial ---------- */
.prints__head{ align-items:end; padding-bottom:calc(var(--g) * 2); }
.prints__title{ grid-column:1 / 8; }
.prints__intro{ grid-column:8 / 13; padding-bottom:12px; }
.prints__body{ align-items:start; }
.dial{ grid-column:1 / 5; position:sticky; top:calc(var(--hdr) + 32px); }
.dial__svg{ width:100%; height:auto; overflow:visible; }
.dial__arc{ fill:none; stroke:var(--line); stroke-width:1; }
.dial__tick{ stroke:var(--fg); stroke-width:1; }
.dial__needle{ transform-origin:0 0; transform-box:view-box; }
.dial__needle line{ stroke:var(--fg); stroke-width:1; }
.dial__needle path{ fill:var(--signal); }
.dial__words{ position:absolute; top:0; left:0; width:100%; aspect-ratio:340 / 200; }
.dial__word{ position:absolute; transform:translate(-50%, -50%); padding-top:10px; padding-right:8px; padding-bottom:10px; padding-left:8px; min-height:44px; display:inline-flex; align-items:center; font-family:var(--f-ui); font-weight:500; font-size:12px; letter-spacing:.04em; text-transform:uppercase; line-height:1; color:var(--muted); white-space:nowrap; transition:color .3s; }
.dial__word[aria-checked="true"], .dial__word:hover, .dial__word:focus-visible{ color:var(--fg); }
.dial__word[aria-checked="true"]::after{ content:''; position:absolute; left:8px; right:8px; bottom:8px; height:1px; background:currentColor; }
.dial__count{ padding-top:16px; text-align:center; }
.print-grid{ grid-column:6 / 13; display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:auto; column-gap:var(--g); row-gap:calc(var(--g) * 2.5); align-items:start; justify-items:stretch; }
.print{ display:flex; flex-direction:column; row-gap:12px; }
.print__mat{ position:relative; background:var(--bone); padding-top:7%; padding-right:7%; padding-bottom:16%; padding-left:7%; box-shadow:var(--shadow); }
.print__mat .plate{ aspect-ratio:var(--ar, 4 / 5); }
.print__sign{ position:absolute; left:7%; right:7%; bottom:3%; display:flex; justify-content:space-between; align-items:flex-end; color:var(--scree); }
.print__sign .w{ font-family:var(--f-script); font-weight:700; font-size:clamp(20px, 1.8vw, 28px); line-height:1; color:#5C5D55; }
.print__sign .n{ font-size:11px; color:#5C5D55; }
.print__title{ font-family:var(--f-display); font-size:24px; line-height:1.05; }
.print__sizes{ display:flex; flex-wrap:wrap; column-gap:12px; row-gap:2px; }
.print__reserve{ align-self:flex-start; padding-top:8px; padding-bottom:4px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:currentColor; font-weight:500; }
@media (max-width:991px){
  .prints__title{ grid-column:1 / -1; } .prints__intro{ grid-column:1 / 7; padding-top:16px; }
  .dial{ grid-column:1 / 4; } .print-grid{ grid-column:4 / 9; grid-template-columns:1fr 1fr; }
}
@media (max-width:767px){
  .prints__intro{ grid-column:1 / -1; }
  .dial{ grid-column:1 / -1; position:relative; top:auto; padding-bottom:var(--g); }
  .print-grid{ grid-column:1 / -1; grid-template-columns:1fr; }
}

/* ---------- 12. As published in (tear sheets) + clients ---------- */
.press__head{ padding-bottom:calc(var(--g) * 2); }
.press__title{ grid-column:1 / 9; }
.sheets{ position:relative; display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows:auto auto; column-gap:var(--g); row-gap:calc(var(--g) * 2); max-width:var(--maxw); margin-left:auto; margin-right:auto; padding-left:var(--m); padding-right:var(--m); padding-top:24px; padding-bottom:24px; overflow:clip; }
.sheet{ position:relative; display:block; background:#F4F2EB; color:var(--peat); box-shadow:var(--shadow); transform:rotate(var(--tilt, 0deg)); transition:transform .6s var(--e-out), box-shadow .6s; z-index:1; }
.sheet:hover, .sheet:focus-within{ transform:rotate(0deg) translateY(-8px); z-index:5; }
.sheet__cap{ display:block; padding-top:10px; color:var(--fg); }
.sheet-wrap{ display:flex; flex-direction:column; }
.sheet-wrap .sheet__cap{ max-width:30ch; }
/* cover */
.sh-cover{ aspect-ratio:3 / 4; overflow:hidden; }
.sh-cover .plate{ position:absolute; top:0; right:0; bottom:0; left:0; }
.sh-cover .mast{ position:absolute; top:5%; left:6%; right:6%; z-index:1; font-family:var(--f-display); font-size:clamp(26px, 3vw, 46px); line-height:.9; letter-spacing:-.02em; color:#F4F2EB; }
.sh-cover .issue{ position:absolute; bottom:5%; left:6%; right:6%; z-index:1; color:#F4F2EB; display:flex; justify-content:space-between; }
/* spread */
.sh-spread{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto; column-gap:2px; row-gap:0; padding-top:6%; padding-right:4%; padding-bottom:6%; padding-left:4%; aspect-ratio:3 / 2; }
.sh-spread .pg{ position:relative; display:flex; flex-direction:column; row-gap:8px; overflow:hidden; }
.sh-spread .pg .plate{ flex-grow:1; flex-shrink:1; flex-basis:0%; }
.sh-spread .kicker{ font-family:var(--f-display); font-size:clamp(14px, 1.4vw, 20px); line-height:1; }
.sh-spread .col{ font-size:7px; line-height:1.4; color:#5C5D55; columns:2; column-gap:8px; }
/* billboard */
.sh-board{ aspect-ratio:2 / 1; overflow:hidden; }
.sh-board .plate{ position:absolute; top:0; right:0; bottom:0; left:0; }
.sh-board .line{ position:absolute; left:5%; bottom:10%; z-index:1; font-family:var(--f-display); font-size:clamp(22px, 2.6vw, 40px); line-height:.95; color:#F4F2EB; max-width:60%; }
.sh-board .brand{ position:absolute; right:4%; top:8%; z-index:1; color:#F4F2EB; }
.sh-cover::after, .sh-board::after{ content:''; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(180deg, rgb(10 10 8 / .35), transparent 30%, transparent 70%, rgb(10 10 8 / .3)); pointer-events:none; }
.clients{ padding-top:calc(var(--g) * 3); align-items:start; row-gap:var(--g); }
.clients__label{ grid-column:1 / 4; }
.clients__list{ grid-column:4 / 13; display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:auto; column-gap:var(--g); row-gap:14px; }
.clients__list li{ display:flex; flex-direction:column; row-gap:2px; padding-top:12px; border-top-width:1px; border-top-style:solid; border-top-color:var(--line); }
.clients__list b{ font-family:var(--f-display); font-weight:400; font-size:22px; line-height:1.1; }
.awards{ grid-column:4 / 13; display:flex; flex-wrap:wrap; column-gap:32px; row-gap:6px; padding-top:var(--g); }
@media (max-width:991px){ .clients__label{ grid-column:1 / -1; } .clients__list, .awards{ grid-column:1 / -1; grid-template-columns:1fr 1fr; } }
@media (max-width:767px){
  .sheets{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:var(--m); scroll-padding-right:var(--m); column-gap:20px; padding-bottom:32px; scrollbar-width:none; }
  .sheets::-webkit-scrollbar{ display:none; }
  .sheet-wrap{ flex-grow:0; flex-shrink:0; flex-basis:72vw; scroll-snap-align:start; }
  .sheet-wrap--wide{ flex-basis:86vw; }
  .clients__list{ grid-template-columns:1fr; }
}

/* ---------- 13. Seasons & rates ---------- */
.rates__head{ align-items:end; padding-bottom:calc(var(--g) * 2); }
.rates__title{ grid-column:1 / 9; }
.rates__promise{ grid-column:9 / 13; padding-bottom:12px; }
.packages{ display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:auto; column-gap:var(--g); row-gap:var(--g); align-items:stretch; justify-items:stretch; }
.pkg{ display:flex; flex-direction:column; row-gap:18px; padding-top:28px; padding-right:28px; padding-bottom:28px; padding-left:28px; background:var(--bone); color:var(--peat); position:relative; --signal:var(--rust); }
.pkg--feature{ background:var(--peat); color:var(--bone); --signal:var(--bone); }
.pkg__tag{ align-self:flex-start; }
/* side by side, an untagged card keeps the tag row so the names line up */
@media (min-width:992px){ .pkg:not(:has(.pkg__tag))::before{ content:''; display:block; height:16px; } }
.pkg__name{ font-family:var(--f-display); font-size:clamp(30px, 2.8vw, 44px); line-height:1; letter-spacing:-.02em; }
.pkg__price{ font-family:var(--f-display); font-size:clamp(26px, 2.2vw, 34px); line-height:1; }
.pkg__price small{ font-family:var(--f-ui); font-size:12px; letter-spacing:.02em; text-transform:uppercase; font-weight:500; margin-right:6px; }
.pkg__list{ display:flex; flex-direction:column; row-gap:8px; }
.pkg__list li{ display:flex; column-gap:10px; align-items:baseline; padding-bottom:8px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(92 93 85 / .3); }
.pkg--feature .pkg__list li{ border-bottom-color:rgb(236 234 226 / .25); }
.pkg__list .star{ width:8px; height:8px; position:relative; top:-1px; }
.pkg__cta{ margin-top:auto; align-self:flex-start; padding-top:12px; padding-right:18px; padding-bottom:12px; padding-left:18px; min-height:44px; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-color:currentColor; border-right-color:currentColor; border-bottom-color:currentColor; border-left-color:currentColor; font-weight:500; }
.addons{ padding-top:calc(var(--g) * 2); align-items:start; }
.addons__label{ grid-column:1 / 4; }
.addons__list{ grid-column:4 / 13; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto; column-gap:var(--g); row-gap:0; }
.addons__list li{ display:flex; justify-content:space-between; column-gap:16px; padding-top:12px; padding-bottom:12px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line); }
.process{ padding-top:calc(var(--g) * 4); }
.process__list{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:auto; column-gap:var(--g); row-gap:var(--g); counter-reset:step; }
.process__list li{ display:flex; flex-direction:column; row-gap:10px; padding-top:16px; border-top-width:1px; border-top-style:solid; border-top-color:var(--fg); }
.process__list .n{ font-family:var(--f-display); font-size:44px; line-height:1; }
.process__list h4{ font-family:var(--f-display); font-weight:400; font-size:24px; line-height:1.05; }
.quotes{ padding-top:calc(var(--g) * 4); align-items:start; row-gap:calc(var(--g) * 2); }
.quote{ grid-column:span 4; display:flex; flex-direction:column; row-gap:16px; }
.quote p{ font-family:var(--f-display); font-size:clamp(20px, 1.7vw, 26px); line-height:1.2; }
@media (max-width:991px){
  .rates__title{ grid-column:1 / -1; } .rates__promise{ grid-column:1 / 7; padding-top:16px; }
  .packages{ grid-template-columns:1fr; }
  .addons__label{ grid-column:1 / -1; padding-bottom:12px; } .addons__list{ grid-column:1 / -1; }
  .process__list{ grid-template-columns:1fr 1fr; }
  .quote{ grid-column:span 8; }
}
@media (max-width:767px){
  .rates__promise{ grid-column:1 / -1; }
  .addons__list{ grid-template-columns:1fr; }
  .process__list{ grid-template-columns:1fr; }
  .quote{ grid-column:1 / -1; }
}

/* ---------- 14. Journal ledger + drawer ---------- */
.journal__head{ padding-bottom:calc(var(--g) * 2); }
.journal__title{ grid-column:1 / 9; }
.ledger{ grid-column:1 / -1; border-top-width:1px; border-top-style:solid; border-top-color:var(--fg); }
.entry{ display:grid; grid-template-columns:auto 1fr 1fr 1fr auto; grid-template-rows:auto; column-gap:var(--g); row-gap:0; align-items:center; min-height:72px; padding-top:12px; padding-bottom:12px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line); }
.entry__thumb{ width:0; height:56px; overflow:hidden; background:var(--ph); transition:width .5s var(--e-out); }
.entry__thumb img{ width:96px; height:56px; object-fit:cover; }
.entry:hover .entry__thumb, .entry:focus-within .entry__thumb{ width:96px; }
.entry__title{ display:flex; align-items:center; column-gap:12px; font-family:var(--f-display); font-size:clamp(20px, 1.8vw, 28px); line-height:1.1; grid-column:2 / 3; }
.entry__title .star{ width:9px; height:9px; }
.entry:hover .entry__title .star{ transform:rotate(90deg); }
.entry__read{ min-height:44px; display:inline-flex; align-items:center; padding-left:12px; padding-right:4px; font-weight:500; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:transparent; }
.entry__read:hover{ border-bottom-color:currentColor; }
@media (max-width:767px){
  .entry{ grid-template-columns:1fr auto; row-gap:4px; }
  .entry__thumb{ display:none; }
  .entry__title{ grid-column:1 / 2; grid-row:1; }
  .entry__place, .entry__date{ grid-column:1 / 2; }
  .entry__read{ grid-column:2 / 3; grid-row:1 / 4; }
}
.drawer{ position:fixed; top:0; right:0; bottom:0; z-index:600; width:min(480px, 100vw); background:var(--bone); color:var(--peat); transform:translateX(100%); visibility:hidden; transition:transform .6s var(--e-io), visibility 0s .6s; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; --fg:var(--peat); --muted:var(--scree); --signal:var(--rust); --line:var(--rule); }
.drawer.is-open{ transform:none; visibility:visible; transition:transform .6s var(--e-io), visibility 0s; }
.drawer__in{ display:flex; flex-direction:column; row-gap:18px; padding-top:28px; padding-right:28px; padding-bottom:40px; padding-left:28px; }
.drawer__top{ display:flex; justify-content:space-between; align-items:center; }
.drawer__close{ min-height:44px; min-width:44px; text-align:right; }
.drawer__title{ font-family:var(--f-display); font-size:clamp(30px, 3vw, 40px); line-height:1.02; }
.drawer__pics{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto; column-gap:8px; row-gap:0; }
.drawer__pics .plate{ aspect-ratio:4 / 5; }
.drawer__body p + p{ margin-top:12px; }
.drawer__link{ align-self:flex-start; padding-top:10px; padding-bottom:4px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:currentColor; font-weight:500; }
.scrim{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:590; background:rgb(28 29 25 / .45); opacity:0; visibility:hidden; transition:opacity .5s, visibility 0s .5s; }
.scrim.is-on{ opacity:1; visibility:visible; transition:opacity .5s, visibility 0s; }
@media (max-width:767px){ .drawer{ width:100vw; } }

/* ---------- 15. About ---------- */
.about{ align-items:start; row-gap:calc(var(--g) * 2); }
.about__fig{ grid-column:1 / 5; }
.about__fig .plate{ aspect-ratio:4 / 5; }
.about__text{ grid-column:6 / 12; display:flex; flex-direction:column; row-gap:24px; }
.about__bio{ font-family:var(--f-display); font-size:clamp(22px, 2.2vw, 34px); line-height:1.18; letter-spacing:-.01em; }
.creds{ display:flex; flex-direction:column; }
.creds li{ padding-top:10px; padding-bottom:10px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line); }
.reps{ display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:auto; column-gap:var(--g); row-gap:12px; }
.reps li{ display:flex; flex-direction:column; row-gap:2px; }
.reps a{ border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:currentColor; align-self:flex-start; }
@media (max-width:1279px){ .reps{ grid-template-columns:1fr; } }
@media (max-width:991px){ .about__fig{ grid-column:1 / 4; } .about__text{ grid-column:4 / 9; } }
@media (max-width:767px){ .about__fig{ grid-column:1 / 4; } .about__text{ grid-column:1 / -1; } }

/* ---------- 16. Book a date ---------- */
.book__head{ align-items:end; padding-bottom:calc(var(--g) * 2); }
.book__title{ grid-column:1 / 8; }
.book__note{ grid-column:8 / 13; padding-bottom:12px; }
.book__body{ align-items:start; row-gap:calc(var(--g) * 2); }
.cal{ grid-column:1 / 7; }
.cal__bar{ display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; }
.cal__month{ font-family:var(--f-display); font-size:clamp(28px, 2.6vw, 40px); line-height:1; }
.cal__nav{ display:flex; column-gap:4px; }
.cal__nav button{ min-width:44px; min-height:44px; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-color:var(--fg); border-right-color:var(--fg); border-bottom-color:var(--fg); border-left-color:var(--fg); }
.cal__nav button[disabled]{ opacity:.35; cursor:default; }
.cal__grid{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows:auto; column-gap:4px; row-gap:4px; }
.cal__dow{ text-align:center; padding-bottom:6px; color:var(--muted); }
.day{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1 / 1; min-height:44px; font-size:15px; font-variant-numeric:tabular-nums; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-color:transparent; border-right-color:transparent; border-bottom-color:transparent; border-left-color:transparent; transition:background-color .2s, color .2s; }
.js-cal-grid [role="gridcell"]{ display:block; }
.js-cal-grid .day{ width:100%; aspect-ratio:auto; height:clamp(44px, 4.4vw, 64px); }
.day--open{ cursor:pointer; }
.day--open:hover{ border-top-color:var(--fg); border-right-color:var(--fg); border-bottom-color:var(--fg); border-left-color:var(--fg); }
.day--hold{ background:repeating-linear-gradient(135deg, #C9C7BC 0, #C9C7BC 4px, #D8D6CB 4px, #D8D6CB 8px); color:var(--peat); }
.day--booked{ color:var(--scree); text-decoration:line-through; }
.day--field{ background:var(--peat); color:var(--bone); }
.day--field .band{ position:absolute; left:3px; bottom:3px; font-size:9px; letter-spacing:.02em; text-transform:uppercase; font-weight:500; }
.day--past{ color:rgb(92 93 85 / .55); }
.day.is-sel, .day.is-range{ background:var(--rust); color:var(--bone); }
.day.is-range{ background:rgb(138 59 35 / .88); }
.day:focus-visible{ outline-offset:1px; }
.cal__legend{ display:flex; flex-wrap:wrap; column-gap:18px; row-gap:8px; padding-top:16px; }
.cal__legend span{ display:inline-flex; align-items:center; column-gap:8px; }
.cal__legend i{ display:inline-block; width:16px; height:16px; }
.cal__next{ margin-left:auto; color:var(--fg); font-weight:500; }
.lg-open{ border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-color:var(--fg); border-right-color:var(--fg); border-bottom-color:var(--fg); border-left-color:var(--fg); }
.lg-hold{ background:repeating-linear-gradient(135deg, #C9C7BC 0, #C9C7BC 3px, #D8D6CB 3px, #D8D6CB 6px); }
.lg-field{ background:var(--peat); }
.lg-booked{ background:linear-gradient(180deg, transparent 45%, var(--scree) 45%, var(--scree) 55%, transparent 55%); }
.cal__sum{ padding-top:14px; font-weight:500; min-height:1.6em; }
.form{ grid-column:8 / 13; display:flex; flex-direction:column; row-gap:18px; position:relative; }
.field-row{ display:flex; flex-direction:column; row-gap:6px; }
.field-row label, .field-row .lbl{ font-weight:500; font-size:12px; letter-spacing:.02em; text-transform:uppercase; }
.field-row input[type="text"], .field-row input[type="email"], .field-row textarea, .field-row select{ width:100%; min-height:48px; padding-top:10px; padding-right:12px; padding-bottom:10px; padding-left:12px; background:var(--bone); color:var(--peat); border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-color:var(--rule); border-right-color:var(--rule); border-bottom-color:var(--rule); border-left-color:var(--rule); border-radius:0; font-size:16px; }
.field-row textarea{ min-height:120px; resize:vertical; }
.field-row input:focus-visible, .field-row textarea:focus-visible, .field-row select:focus-visible{ outline-offset:0; }
.field-2{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto; column-gap:12px; row-gap:18px; }
.chips{ display:flex; flex-wrap:wrap; column-gap:8px; row-gap:8px; }
.chip{ position:relative; display:inline-flex; }
.chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.chip span{ display:inline-flex; align-items:center; min-height:44px; padding-top:8px; padding-right:14px; padding-bottom:8px; padding-left:14px; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-color:var(--fg); border-right-color:var(--fg); border-bottom-color:var(--fg); border-left-color:var(--fg); font-size:14px; cursor:pointer; transition:background-color .2s, color .2s; }
.chip input:checked + span{ background:var(--fg); color:var(--bg); }
.chip input:focus-visible + span{ outline-width:2px; outline-style:solid; outline-color:var(--signal); outline-offset:3px; }
.check{ display:inline-flex; align-items:center; column-gap:10px; min-height:44px; cursor:pointer; }
.check input{ width:18px; height:18px; accent-color:var(--rust); }
.err{ color:var(--rust); font-size:13px; }
html.is-dark .err{ color:var(--bone); }
.form__actions{ display:flex; flex-wrap:wrap; align-items:center; column-gap:18px; row-gap:10px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; column-gap:10px; min-height:52px; padding-top:14px; padding-right:24px; padding-bottom:14px; padding-left:24px; background:var(--peat); color:var(--bone); font-weight:500; }
.btn:hover{ background:var(--rust); }
.link-u{ border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:currentColor; padding-top:8px; padding-bottom:2px; font-weight:500; }
.postmark{ position:absolute; right:-8px; top:50%; width:190px; height:190px; margin-top:-95px; pointer-events:none; color:var(--rust); opacity:0; transform:rotate(-12deg); }
.postmark svg{ width:100%; height:100%; overflow:visible; }
.form__done{ position:relative; display:flex; align-items:center; min-height:170px; padding-top:16px; padding-right:200px; padding-bottom:16px; padding-left:18px; background:var(--bone); color:var(--peat); border-left-width:3px; border-left-style:solid; border-left-color:var(--rust); }
@media (max-width:991px){ .book__title{ grid-column:1 / -1; } .book__note{ grid-column:1 / 7; padding-top:16px; } .cal, .form{ grid-column:1 / -1; } }
@media (max-width:767px){ .book__note{ grid-column:1 / -1; } .field-2{ grid-template-columns:1fr; } .postmark{ width:136px; height:136px; right:-6px; margin-top:-68px; } .form__done{ min-height:150px; padding-right:128px; } }

/* ---------- 17. Footer ---------- */
.foot{ padding-top:calc(var(--sec) * .6); padding-bottom:40px; }
.foot__row{ align-items:start; row-gap:24px; padding-bottom:40px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line); }
.foot__mark{ grid-column:1 / 4; display:flex; align-items:center; column-gap:10px; font-family:var(--f-display); font-size:28px; line-height:1; }
.foot__mark .star{ width:16px; height:16px; }
.foot__links{ grid-column:4 / 9; display:flex; flex-wrap:wrap; column-gap:24px; row-gap:4px; }
.foot__links a{ padding-top:14px; padding-bottom:14px; }
.foot__next{ grid-column:9 / 13; justify-self:end; text-align:right; }
.foot__fine{ padding-top:18px; row-gap:6px; }
.foot__fine p:first-child{ grid-column:1 / 8; }
.foot__fine p:last-child{ grid-column:8 / 13; justify-self:end; }
@media (max-width:991px){ .foot__mark, .foot__links, .foot__next{ grid-column:1 / -1; justify-self:start; text-align:left; } .foot__fine p:first-child, .foot__fine p:last-child{ grid-column:1 / -1; justify-self:start; } }

/* ---------- 18. Mobile menu (star bloom) ---------- */
.menu{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:700; background:var(--bone); color:var(--peat); visibility:hidden; clip-path:polygon(var(--mx) var(--my), var(--mx) var(--my), var(--mx) var(--my), var(--mx) var(--my)); display:flex; flex-direction:column; justify-content:space-between; padding-top:16px; padding-right:var(--m); padding-bottom:28px; padding-left:var(--m); overflow-y:auto; --mx:90%; --my:4%; --fg:var(--peat); --muted:var(--scree); --signal:var(--rust); }
.menu.is-open{ visibility:visible; }
.menu__top{ display:flex; justify-content:space-between; align-items:center; min-height:44px; }
.menu__list{ display:flex; flex-direction:column; row-gap:2px; padding-top:24px; padding-bottom:24px; }
.menu__list a{ font-family:var(--f-display); font-size:12vw; line-height:1.02; color:var(--scree); display:inline-flex; align-items:center; column-gap:12px; min-height:44px; }
.menu__list a[aria-current="true"]{ color:var(--peat); }
.menu__list .star{ width:14px; height:14px; }
.menu__bottom{ display:flex; flex-direction:column; row-gap:8px; }
.menu__bottom a{ display:inline-flex; align-items:center; align-self:flex-start; min-height:44px; }
@media (min-width:768px){ .menu__list a{ font-size:8vw; } }

/* ---------- 19. Cursor (pointer: fine) ---------- */
.cursor{ position:fixed; top:0; left:0; z-index:800; width:18px; height:18px; margin-top:-9px; margin-left:-9px; pointer-events:none; color:var(--fg); display:none; transition:width .35s var(--e-out), height .35s var(--e-out), margin .35s var(--e-out), color .3s; }
.cursor__star{ width:100%; height:100%; }
.cursor__star svg{ width:100%; height:100%; overflow:visible; }
.cursor__label{ position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%); white-space:nowrap; font-size:12px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; opacity:0; transition:opacity .25s; }
.cursor.is-big{ width:56px; height:56px; margin-top:-28px; margin-left:-28px; }
.cursor.is-big .cursor__label{ opacity:1; }
.cursor.is-small{ width:8px; height:8px; margin-top:-4px; margin-left:-4px; }
html.has-cursor .cursor{ display:block; }
html.has-cursor:has(input:hover, textarea:hover, select:hover) .cursor{ opacity:0; }

/* ---------- 20. Loader (compass ring) ---------- */
.loader{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:850; background:var(--lichen); pointer-events:none; }
.loader__star{ position:absolute; top:50%; left:50%; width:22px; height:22px; margin-top:-30px; margin-left:-11px; color:var(--rust); }
.loader__star svg{ display:block; width:100%; height:100%; overflow:visible; }
.loader__star .n{ fill:currentColor; }
.loader__star .s{ fill:none; stroke:currentColor; stroke-width:1.2; vector-effect:non-scaling-stroke; }
.loader__mark{ position:absolute; top:50%; left:50%; transform:translate(-50%, 0); margin-top:6px; font-family:var(--f-display); font-size:22px; line-height:1; color:var(--peat); white-space:nowrap; transform-origin:0 0; }
.loader__thumb{ position:absolute; top:0; left:0; overflow:hidden; background:var(--ph); }
.loader__thumb img{ width:100%; height:100%; object-fit:cover; }
html.is-seen .loader, html.rm .loader, html.no-js .loader{ display:none; }
html.no-gsap .loader{ animation:loaderOut .4s .2s forwards; }
@keyframes loaderOut{ to{ opacity:0; visibility:hidden; } }

/* ---------- 21. Page transition (colour card flood) ---------- */
.flood{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:880; pointer-events:none; visibility:hidden; display:flex; align-items:center; justify-content:center; text-align:center; padding-left:var(--m); padding-right:var(--m); }
.flood.is-on{ visibility:visible; }
.flood__title{ font-family:var(--f-display); font-size:clamp(40px, 6vw, 96px); line-height:.95; letter-spacing:-.02em; opacity:0; }
html.is-flooding .flood{ visibility:visible; background:var(--flood-bg); color:var(--flood-fg); }
html.is-flooding .flood__title{ opacity:1; }
@keyframes floodFailsafe{ to{ visibility:hidden; } }
html.is-flooding:not(.flood-live) .flood{ animation:floodFailsafe .01s 1.4s forwards; }

/* ---------- 22. Reveal pre-states (only once GSAP is confirmed) ---------- */
html.anim-ready .js-rise{ opacity:0; }
html.rm body, html.rm .hdr, html.rm .wordmark, html.rm .star{ transition:none; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ scroll-behavior:auto !important; }
  html.anim-ready .js-rise{ opacity:1; }
}

/* =========================================================================
   PROJECT PAGE
   ========================================================================= */
.proj{ padding-top:calc(var(--hdr) + 32px); padding-bottom:var(--sec); align-items:start; }
.frames{ grid-column:1 / 8; display:flex; flex-direction:column; row-gap:24px; }
.frame{ position:relative; display:block; background:var(--ph); scroll-margin-top:calc(var(--hdr) + 24px); }
.frame img{ width:100%; height:auto; opacity:0; transition:opacity .6s; }
.frame img.is-in{ opacity:1; }
.frame__cap{ display:none; }
.capcol{ grid-column:9 / 13; align-self:stretch; display:flex; flex-direction:column; row-gap:16px; }
/* the live panel (route, counter, links) pins; brief and facts scroll away above it, so it fits any height */
.capcol__live{ position:sticky; top:calc(var(--hdr) + 24px); display:flex; flex-direction:column; row-gap:16px; padding-top:8px; }
.capcol__top{ display:flex; justify-content:space-between; align-items:center; }
.capcol__close{ display:inline-flex; align-items:center; column-gap:8px; min-height:44px; font-weight:500; }
.capcol__title{ font-family:var(--f-display); font-size:clamp(40px, 4.4vw, 72px); line-height:.95; letter-spacing:-.025em; }
.capcol__place{ padding-top:8px; }
.capcol__brief{ font-size:15px; line-height:1.5; max-width:44ch; }
.facts{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto; column-gap:16px; row-gap:0; font-size:13px; }
.facts dt, .facts dd{ padding-top:6px; padding-bottom:6px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line); }
.facts dt{ color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:.02em; font-size:11px; }
.facts .daylight{ --ink:var(--fg); }
.route{ position:relative; }
.route svg{ display:block; width:100%; height:auto; overflow:visible; }
.route__base{ fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:3 4; }
.route__path{ fill:none; stroke:var(--fg); stroke-width:1.5; }
.route__dot{ fill:var(--bg); stroke:var(--fg); stroke-width:1; }
.route__dot.is-past{ fill:var(--fg); }
.route__name{ font-family:var(--f-ui); font-size:calc(10px * var(--k, 1)); letter-spacing:.02em; text-transform:uppercase; fill:var(--muted); paint-order:stroke; stroke:var(--bg); stroke-width:3px; stroke-linejoin:round; transition:opacity .3s; }
.route__name.is-cur{ fill:var(--fg); font-weight:600; }
.route__cur{ color:var(--signal); transition:transform .6s var(--e-out); }
.route__grid line{ stroke:var(--line); stroke-width:.5; opacity:.5; }
.counter{ display:flex; align-items:baseline; justify-content:space-between; column-gap:16px; }
.counter__n{ flex-shrink:0; white-space:nowrap; font-family:var(--f-display); font-size:40px; line-height:1; font-variant-numeric:tabular-nums; }
.capcol__links{ display:flex; flex-direction:column; row-gap:6px; }
.capcol__links a{ align-self:flex-start; padding-top:6px; padding-bottom:2px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:currentColor; font-weight:500; }
.nextx{ margin-top:var(--sec); padding-top:var(--sec); padding-bottom:var(--sec); background:var(--card); color:var(--ink); --fg:var(--ink); --signal:var(--ink); }
.nextx__in{ align-items:center; }
.nextx__pic{ grid-column:1 / 8; display:block; background:var(--ph); }
.nextx__pic img{ width:100%; aspect-ratio:3 / 2; object-fit:cover; }
.nextx__text{ grid-column:9 / 13; display:flex; flex-direction:column; row-gap:14px; }
.nextx__title{ font-family:var(--f-display); font-size:clamp(40px, 4.4vw, 72px); line-height:.95; letter-spacing:-.025em; }
.pbar{ display:none; }
@media (max-width:991px){
  .frames{ grid-column:1 / 6; } .capcol{ grid-column:6 / 9; }
  /* narrow map: only the current waypoint is named */
  .route__name{ opacity:0; } .route__name.is-cur{ opacity:1; }
  .nextx__pic{ grid-column:1 / 6; } .nextx__text{ grid-column:6 / 9; }
}
@media (max-width:767px){
  .proj{ padding-top:calc(var(--hdr) + 20px); }
  .capcol{ grid-column:1 / -1; grid-row:1; align-self:start; padding-bottom:28px; }
  .capcol__live{ position:static; padding-top:0; }
  .capcol__counter, .capcol__links{ display:none; }
  .facts{ grid-template-columns:auto 1fr; }
  .frames{ grid-column:1 / -1; grid-row:2; row-gap:12px; }
  .frame__cap{ display:block; padding-top:6px; font-size:12px; background:var(--bg); color:var(--fg); }
  .nextx__pic, .nextx__text{ grid-column:1 / -1; }
  .nextx__text{ padding-top:20px; }
  .pbar{ position:fixed; left:0; right:0; bottom:0; z-index:260; display:flex; align-items:center; justify-content:space-between; column-gap:12px; height:48px; padding-left:var(--m); padding-right:var(--m); background:var(--lichen); color:var(--peat); border-top-width:1px; border-top-style:solid; border-top-color:var(--rule); }
  .pbar a{ min-height:44px; display:inline-flex; align-items:center; font-weight:500; }
  body[data-page="project"] .foot{ padding-bottom:88px; }
}