/* Fishbed — the slow water, in daylight. A day passes over seven screens. */
:root{
  /* — type slots: swap these three lines to change the whole site — */
  --loud:"Anton","Impact","Arial Narrow",sans-serif;          /* the heavy word */
  --quiet:"Shadows Into Light","Bradley Hand",cursive;         /* the whispered line */
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;          /* reading */
  --ink:#16202B; --ink-70:rgba(22,32,43,.72); --cream:#FFFDF7; --eye:#E0532F;
  --sky:#4FA3E3; --sky-pale:#CBE8FB; --wheat:#E9C46A; --wheat-2:#F4DC93; --grass:#5FB36A; --grass-2:#2F7A46;
  --gold:#F2A65A; --dusk:#F7C9B0; --night:#0B1D3A; --night-2:#1F3F6E;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--sky-pale);color:var(--ink);font-family:var(--sans);font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
::selection{background:var(--eye);color:var(--cream)}
a:focus-visible,button:focus-visible{outline:2px solid var(--eye);outline-offset:4px;border-radius:2px}
.gauge a:focus-visible,.foot a:focus-visible{outline-color:#fff}
.label{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase}

/* fixed instruments — invert over whatever sky they sit on */
.gauge,.foot{position:fixed;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:24px clamp(20px,3vw,40px);color:#fff;mix-blend-mode:difference;pointer-events:none}
.gauge{top:0}.foot{bottom:0;padding-bottom:22px}
.gauge a,.foot a{pointer-events:auto}
.gauge .right{display:flex;gap:1.8em}
.rail{display:flex;align-items:center;gap:18px}
.rail button{all:unset;cursor:pointer;font:inherit;font-weight:600;letter-spacing:inherit;opacity:.45;transition:opacity .3s;padding:6px 2px}
.rail button:hover,.rail button.on{opacity:1}
.rail button:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* screens */
main{position:relative;z-index:1}
.screen{min-height:100svh;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px clamp(20px,6vw,120px);overflow:hidden}
.screen .marker{position:absolute;left:clamp(20px,3vw,40px);top:72px;opacity:.6}
.beat{max-width:820px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;z-index:2}
.beat .quiet{font-family:var(--quiet);font-size:clamp(28px,3.4vw,46px);line-height:1;letter-spacing:.01em}
.beat .loud{font-family:var(--loud);font-weight:400;font-size:clamp(64px,10.5vw,150px);line-height:.92;letter-spacing:-.005em;text-transform:uppercase;text-wrap:balance}
.beat p{margin-top:18px;max-width:520px;font-size:clamp(17px,1.4vw,20px);color:var(--ink-70)}
.on-dark .beat p{color:rgba(255,253,247,.8)}
.on-dark{color:var(--cream)}

/* skies */
.sky-dawn{background:linear-gradient(180deg,#A9D3F5 0%,#DCEEFB 55%,#F9E6D2 100%)}
.sky-noon{background:linear-gradient(180deg,#3F98E0 0%,#7CC0F0 45%,#BFE3FA 62%,#BFE3FA 62.2%,#E9C46A 62.3%,#D9AE4E 100%)}
.sky-hill{background:linear-gradient(180deg,#4FA3E3 0%,#A6D4F5 58%,#A6D4F5 58.2%,#5FB36A 58.3%,#2F7A46 100%)}
.sky-gold{background:linear-gradient(180deg,#F7C9B0 0%,#F2A65A 60%,#B86B3A 100%)}
.sky-dusk{background:linear-gradient(180deg,#2C3E7A 0%,#6B5B95 55%,#E08E79 100%)}
.sky-night{background:linear-gradient(180deg,#0B1D3A 0%,#1F3F6E 70%,#0E2340 100%)}
.sky-morning{background:linear-gradient(180deg,#CBE8FB 0%,#FFFDF7 100%)}
/* horizon line, clouds, hill */
.horizon{position:absolute;left:0;right:0;height:1px;background:rgba(22,32,43,.18)}
.cloud{position:absolute;width:26vw;height:9vw;border-radius:50%;background:rgba(255,255,255,.75);filter:blur(28px)}
.sky-hill .beat{margin-bottom:14vw}
.hill{position:absolute;left:-10%;right:-10%;bottom:-16vw;height:34vw;background:radial-gradient(ellipse at 50% 100%,#6FC17A 0%,#3E8E5A 70%);border-radius:50% 50% 0 0}
.stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 12% 22%,#fff 99%,transparent),radial-gradient(1px 1px at 34% 12%,#fff 99%,transparent),radial-gradient(1.5px 1.5px at 58% 28%,#fff 99%,transparent),radial-gradient(1px 1px at 76% 16%,#fff 99%,transparent),radial-gradient(1px 1px at 88% 36%,#fff 99%,transparent),radial-gradient(1px 1px at 22% 44%,#fff 99%,transparent),radial-gradient(1.5px 1.5px at 66% 8%,#fff 99%,transparent);opacity:.8}

/* the mark — a house on the field, a lit window at night */
.mark{width:var(--w,180px);height:auto;display:block}
.mark rect{fill:currentColor}
.mark circle{fill:var(--eye)}
.on-dark .mark circle{filter:drop-shadow(0 0 14px var(--eye)) drop-shadow(0 0 40px rgba(224,83,47,.7))}

/* reveals */
.js [data-drift]{opacity:0;transform:translateY(22px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.65,.25,1)}
.js [data-drift].in{opacity:1;transform:none}

/* hero */
.hero .beat{gap:22px}
.hero .mark{--w:clamp(150px,16vw,230px);margin-top:10px}

/* the menu */
.menu .beat{max-width:900px;width:100%;align-items:stretch;text-align:left}
.menu .head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.menu .lede{text-align:center;margin:8px auto 34px;max-width:560px}
.dish{display:grid;grid-template-columns:1fr auto;gap:36px;padding:26px 0;border-top:1px solid rgba(22,32,43,.22);align-items:baseline;background:rgba(255,253,247,.0)}
.dish:last-of-type{border-bottom:1px solid rgba(22,32,43,.22)}
.dish h3{font-family:var(--loud);font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1;text-transform:uppercase}
.dish h3 em{font-family:var(--quiet);font-style:normal;text-transform:none;font-size:.62em;margin-left:.3em;color:var(--ink-70)}
.dish p{margin-top:8px;font-size:17px;color:var(--ink-70);max-width:560px}
.dish .price{font-weight:600;font-size:15px;letter-spacing:.06em;white-space:nowrap}
.menu .fine{margin-top:14px;text-align:right;opacity:.7}

/* ending (night) */
.ending .beat{gap:22px}
.ending .mail{font-family:var(--quiet);font-size:clamp(28px,3.4vw,44px);text-decoration:underline;text-underline-offset:10px;text-decoration-color:rgba(255,253,247,.4)}
.ending .mail:hover{color:var(--eye)}
.ending .meta{display:flex;gap:2em;flex-wrap:wrap;justify-content:center;opacity:.8}
.ending .mark{--w:200px}

/* work (footnote) */
.index{padding:150px clamp(20px,6vw,120px) 200px;display:flex;flex-direction:column;background:linear-gradient(180deg,#CBE8FB 0,#FFFDF7 40%)}
.index .head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:48px}
.index .quiet{font-family:var(--quiet);font-size:clamp(26px,3vw,40px);line-height:1}
.index .loud{font-family:var(--loud);font-size:clamp(56px,8vw,110px);line-height:.95;text-transform:uppercase}
.index .lede{color:var(--ink-70);margin-top:14px;max-width:520px}
.row{display:grid;grid-template-columns:48px 1fr 240px 120px;gap:32px;align-items:center;padding:24px 0;border-top:1px solid rgba(22,32,43,.2)}
.row:last-of-type{border-bottom:1px solid rgba(22,32,43,.2)}
.row .n{color:var(--eye);font-weight:600}
.row h2{font-family:var(--loud);font-weight:400;font-size:clamp(26px,3vw,40px);line-height:1;text-transform:uppercase}
.row .meta{display:flex;gap:1.4em;margin-top:8px;color:var(--ink-70)}
.row .thumb{width:240px;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block;border:1px solid rgba(22,32,43,.15);transition:transform .5s}
.row:hover .thumb{transform:translateY(-3px) rotate(-1deg)}
.row .yr{text-align:right;opacity:.7}

@media (prefers-reduced-motion:reduce){.js [data-drift]{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
@media (max-width:760px){
  body{font-size:17px}
  .gauge .right span:not(.depth),.rail{display:none}
  .foot{justify-content:space-between}
  .screen{padding:110px 22px 96px}
  .dish{grid-template-columns:1fr;gap:8px}
  .row{grid-template-columns:32px 1fr;row-gap:10px}
  .row .thumb,.row .meta,.row .yr{grid-column:2}.row .thumb{width:100%}.row .yr{text-align:left}
  .row .meta{flex-direction:column;gap:4px}
}

/* the river */
.river{position:absolute;top:0;left:0;z-index:1;pointer-events:none;overflow:visible;--on:0}
.river-deep{opacity:.82}
.river-shallow{fill:#BFE3FA;opacity:.28}
.river-motes circle{fill:#fff}
.river-wake circle{fill:#E0532F}
.river-lantern{fill:#E0532F;opacity:var(--on);transition:opacity .5s}
.river-halo{fill:#E0532F;opacity:.3}
.river-wake{opacity:var(--on);transition:opacity .5s}
@media (prefers-reduced-motion:reduce){.river-motes,.river-halo{display:none}}

/* where the water goes, life follows */
.life{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.flock{opacity:.5}
.inview .flock{animation:cross var(--dur) linear var(--delay) infinite}
.bird{fill:none;stroke:#16202B;stroke-width:1.3;stroke-linecap:round}
.bird .wing{transform-origin:0 0}
.inview .bird .wing{animation:flap var(--beat,1.1s) ease-in-out var(--ph,0s) infinite alternate}
@keyframes cross{from{transform:translate(-160px,var(--y))}to{transform:translate(calc(100vw + 160px),calc(var(--y) - 70px))}}
@keyframes flap{from{transform:scaleY(.35)}to{transform:scaleY(1.15)}}
.mist{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:0}
.mist i{position:absolute;display:block;height:120px;width:60vw;border-radius:50%;background:rgba(255,255,255,.85);filter:blur(34px);will-change:transform;opacity:var(--o,.7);transition:opacity 2.4s ease}
.inview .mist i{animation:lie var(--dur) ease-in-out var(--ph) infinite alternate}
@keyframes lie{from{transform:translate(-4vw,0) scaleX(1)}to{transform:translate(6vw,-6px) scaleX(1.15)}}
.mist.thin i{opacity:calc(var(--o,.7) * .22)}
.daylight{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 70% 55% at 50% 100%,rgba(255,230,180,.95) 0%,rgba(255,220,170,.5) 35%,rgba(255,220,170,0) 70%);opacity:0;transition:opacity 3s ease}
.daylight.on{opacity:1}
.field .stalks path{fill:none;stroke:#C99A3B;stroke-width:1.2;stroke-linecap:round;opacity:.55}
.field .patches path{opacity:0;transform:scale(.6);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.field .patches path.on{opacity:.9;transform:scale(1)}
.flower .stem{fill:none;stroke:#2F7A46;stroke-width:1.6;stroke-linecap:round;transform:scaleY(0);transition:transform .7s cubic-bezier(.3,.8,.3,1)}
.flower .bloom{transform:scale(0);transition:transform .8s cubic-bezier(.2,1.5,.4,1) .45s}
.flower .bloom{fill:var(--c)}
.flower.on .stem{transform:scaleY(1)}.flower.on .bloom{transform:scale(1)}
.inview .meadow.alive .flower.on{animation:sway var(--sway) ease-in-out var(--ph) infinite alternate}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.butterfly{opacity:0;fill:var(--c);transition:opacity 1s}
.meadow.alive .butterfly{opacity:.95}
.inview .meadow.alive .butterfly{animation:flutter var(--dur) ease-in-out var(--ph) infinite alternate}
.butterfly .wl,.butterfly .wr{transform-origin:0 0}
.inview .butterfly .wl,.inview .butterfly .wr{animation:beat .28s ease-in-out infinite alternate}
.butterfly .wr{animation-direction:alternate-reverse}
@keyframes beat{from{transform:scaleX(.35)}to{transform:scaleX(1)}}
@keyframes flutter{0%{transform:translate(var(--x),var(--y))}50%{transform:translate(calc(var(--x) + 90px),calc(var(--y) - 46px))}100%{transform:translate(calc(var(--x) + 30px),calc(var(--y) + 20px))}}
.banks .sun{fill:#FFD98A;opacity:.55}
.tuft{transform:scaleY(0);transition:transform .9s cubic-bezier(.25,.9,.3,1)}
.tuft.on{transform:scaleY(1)}
.inview .tuft.on{animation:sway var(--sway) ease-in-out var(--ph) infinite alternate}
.village .star{fill:#FFF6D6;opacity:0;transition:opacity 1.6s}.village .star.on{opacity:.9}
.village .ground{fill:#1A1F3A;opacity:.9}
.house .wall{fill:#151A32}.house .win{fill:#2A3050;transition:fill .6s}.house .glow{fill:#FFD27A;opacity:0;transition:opacity .9s}
.house.lit .win{fill:#FFD27A}.house.lit .glow{opacity:.22}
.fly{opacity:0;transition:opacity .8s}
.fly.on{opacity:1;transform:translate(var(--x),var(--y))}
.inview .fly.on{animation:driftx var(--dx) ease-in-out var(--ph) infinite alternate}
.inview .fly .fly-y{animation:drifty var(--dy) ease-in-out var(--ph) infinite alternate}
.fly-dot{fill:#FFE08A}
.inview .fly-dot{animation:blink 2.3s ease-in-out var(--ph) infinite}
@keyframes driftx{from{transform:translate(var(--x),var(--y))}to{transform:translate(calc(var(--x) + var(--ax)),var(--y))}}
@keyframes drifty{from{transform:translateY(0)}to{transform:translateY(calc(-1 * var(--ay)))}}
@keyframes blink{0%,100%{opacity:.15}45%{opacity:1}}
@media (prefers-reduced-motion:reduce){.flock,.bird .wing,.mist i,.meadow.alive .flower.on,.butterfly,.butterfly .wl,.butterfly .wr,.tuft.on,.fly.on,.fly .fly-y,.fly-dot{animation:none}.field .patches path,.flower .stem,.flower .bloom,.tuft{transition:none}.butterfly{opacity:.9}.fly.on{opacity:1;transform:translate(var(--x),var(--y))}}

/* the work — cases */
.work{position:relative;max-width:1180px;margin:0 auto;padding:150px clamp(20px,3vw,40px) 200px;color:var(--ink)}
body:has(.work){background:linear-gradient(180deg,#BFE3FA 0,#EAF4FB 480px,#FAF7F1 1100px,#F2EEE3 100%)}
.work .head{margin-bottom:110px}.work .head .loud{font-size:clamp(56px,9vw,128px)}.work .lede{max-width:52ch;margin-top:18px;font-size:clamp(17px,1.3vw,20px)}
.case{margin:0 0 150px}
.case-head{display:flex;gap:26px;align-items:flex-start;margin-bottom:18px}
.case-head .n{color:var(--eye);padding-top:12px}
.case-head h2{font-family:var(--loud);font-weight:400;text-transform:uppercase;letter-spacing:.005em;font-size:clamp(34px,4.6vw,64px);line-height:.95}
.case-head .meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:10px;opacity:.7}
.case>p{max-width:60ch;font-size:clamp(16px,1.2vw,19px);line-height:1.55;margin:0 0 34px 0;opacity:.85}
.visit{display:inline-block;margin:-14px 0 30px;font-family:var(--quiet);font-size:clamp(22px,2.2vw,30px);color:var(--eye);text-decoration:none;border-bottom:2px solid currentColor;line-height:1.1}
.visit span{display:inline-block;transition:transform .3s}.visit:hover span{transform:translateX(6px)}
.band{margin:0 0 16px;position:relative}
.band video{width:100%;display:block;border-radius:10px;box-shadow:0 30px 60px -20px rgba(22,32,43,.35)}
.band figcaption{position:absolute;left:16px;bottom:14px;color:#fff;opacity:.85;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.strip .vid{margin:0;aspect-ratio:4/5;border-radius:8px;overflow:hidden;box-shadow:0 12px 30px -12px rgba(22,32,43,.35)}
.strip .vid video{width:100%;height:100%;object-fit:cover;display:block}
.strip .photo{aspect-ratio:16/9}.strip .land{aspect-ratio:3/2}
.strip{display:grid;gap:16px;margin-top:22px}
.strip.four{grid-template-columns:repeat(4,1fr)}.strip.two{grid-template-columns:repeat(2,1fr)}.strip.three{grid-template-columns:repeat(3,1fr)}.strip.wide{grid-template-columns:repeat(4,1fr)}
.strip img,.strip .card{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:8px;box-shadow:0 12px 30px -12px rgba(22,32,43,.35);margin:0}
.strip .span3{grid-column:span 3;aspect-ratio:auto;height:100%}.strip .span4{grid-column:span 4;aspect-ratio:3/1}.strip .tall{aspect-ratio:9/16}
.strip .card{background:#f5f0ea;display:grid;place-items:center;padding:16%}.strip .card img{width:100%;aspect-ratio:auto;box-shadow:none;border-radius:0}
.case.small .aside{display:grid;grid-template-columns:260px 1fr;gap:30px;align-items:center}
.case.small .poster{width:100%;border-radius:8px;box-shadow:0 12px 30px -12px rgba(22,32,43,.35)}
.case.small p{max-width:40ch;font-size:clamp(16px,1.2vw,19px);line-height:1.55;opacity:.85}
.seven{text-align:center;padding-top:60px}.seven .loud{font-size:clamp(48px,8vw,110px)}.seven .mail{display:inline-block;margin-top:26px;font-family:var(--quiet);font-size:clamp(22px,2.4vw,34px);color:var(--eye);text-decoration:none;border-bottom:2px solid currentColor}
@media (max-width:760px){.work{padding-top:120px;padding-bottom:140px}.work .head{margin-bottom:70px}.case{margin-bottom:100px}.case-head{gap:14px}.strip.four,.strip.three,.strip.wide,.strip.two{grid-template-columns:repeat(2,1fr)}.strip .span3,.strip .span4{grid-column:span 2}.strip .span4{aspect-ratio:2/1}.case.small .aside{grid-template-columns:1fr}.case.small .poster{max-width:280px}}

.wa{display:block;margin-top:14px;font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:inherit;opacity:.75;text-decoration:none}.wa:hover{opacity:1}
.seven .wa{margin-top:18px}