/* =========================================================================
   Nordstu Gård — visual system
   Two families, three weights. One accent: the falu red of the barns on the
   tun, which is in half the photographs on this page. It marks exactly two
   things — the booking action, and the season currently on screen.
   ========================================================================= */

@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url("../font/fraunces-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:300 600;
  font-display:swap; src:url("../font/inter-latin.woff2") format("woff2");
}

:root{
  /* surfaces */
  --paper:#f4f1ea;  --paper-2:#e9e3d6;  --paper-3:#ddd5c4;
  --night:#131a1e;  --night-2:#1d262b;

  /* text — --muted is as light as it can go and still clear 4.5:1 on BOTH
     paper surfaces; it carries every caption and secondary line on the page */
  --ink:#222a2c;  --ink-2:#4c5557;  --muted:#5f6668;
  --on-night:#ece7dd;  --on-night-2:#a2aeb2;
  --line:rgba(34,42,44,.15);  --line-night:rgba(236,231,221,.16);

  /* the accent, and the one warm light */
  --falu:#8f3b2b;  --falu-2:#b05340;
  --glow:#e9b26a;

  /* type */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --text:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* geometry */
  --wrap:1220px;  --gut:clamp(20px,5vw,48px);  --r:3px;

  /* motion — one easing, two durations */
  --ease:cubic-bezier(.22,.68,.16,1);
  --fast:190ms;  --slow:760ms;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--text); font-size:17px; line-height:1.62;
  font-weight:400; letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit}
::selection{background:var(--falu); color:#fff}

:focus-visible{ outline:2px solid var(--falu); outline-offset:3px; border-radius:2px }

/* skip link: off-canvas until focused, without inline handlers or a -9999px
   offset that every layout audit then has to be told to ignore */
.skip{
  position:fixed; z-index:90; top:.6rem; left:.6rem;
  background:var(--falu); color:#fdf8f2;
  transform:translateY(-160%); transition:transform var(--fast) var(--ease);
}
.skip:focus{ transform:none }

/* ---------------------------------------------------------------- type */
h1,h2,h3{ font-family:var(--display); font-weight:600; margin:0; text-wrap:balance }
h1{ font-size:clamp(3rem,8.4vw,6.4rem); line-height:.95; letter-spacing:-.028em }
h2{ font-size:clamp(2.1rem,4.9vw,3.7rem); line-height:1.04; letter-spacing:-.022em }
h3{ font-size:clamp(1.3rem,2.1vw,1.66rem); line-height:1.16; letter-spacing:-.014em; font-weight:600 }
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--text); font-size:.735rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--muted);
  margin:0 0 1.5rem; display:flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.55; flex:none }
.lead{ font-size:clamp(1.08rem,1.5vw,1.26rem); line-height:1.58; color:var(--ink-2); max-width:34em }
.small{ font-size:.9rem; line-height:1.55; color:var(--muted) }

.num{ font-variant-numeric:tabular-nums }

/* ---------------------------------------------------------------- layout */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
section{ position:relative }
.band{ padding-block:clamp(5rem,11vw,9.5rem) }
.band--tight{ padding-block:clamp(4rem,8vw,6.5rem) }
.dark{ background:var(--night); color:var(--on-night) }
.dark .eyebrow{ color:var(--on-night-2) }
.dark .lead{ color:var(--on-night-2) }
.dark .small{ color:var(--on-night-2) }
.tone{ background:var(--paper-2) }

.rule{ height:1px; background:var(--line); border:0; margin:0 }
.dark .rule{ background:var(--line-night) }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--text); font-size:.93rem; font-weight:500; letter-spacing:-.005em;
  padding:.82em 1.35em; border-radius:var(--r); border:1px solid transparent;
  text-decoration:none; cursor:pointer; background:none;
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease),
             border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:active{ transform:translateY(1px) }
.btn--solid{ background:var(--falu); color:#fdf8f2 }
.btn--solid:hover{ background:var(--falu-2) }
.btn--line{ border-color:var(--line); color:var(--ink) }
.btn--line:hover{ border-color:var(--ink); background:rgba(34,42,44,.04) }
.dark .btn--line{ border-color:var(--line-night); color:var(--on-night) }
.dark .btn--line:hover{ border-color:var(--on-night); background:rgba(236,231,221,.07) }
.btn .arw{ transition:transform var(--fast) var(--ease) }
.btn:hover .arw{ transform:translateX(3px) }

/* a text link that behaves like a rule */
.tlink{
  display:inline-flex; align-items:center; gap:.45em; text-decoration:none;
  font-weight:500; font-size:.95rem;
  border-bottom:1px solid var(--line); padding-bottom:2px;
  transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.tlink:hover{ border-color:currentColor; color:var(--falu) }
.dark .tlink{ border-color:var(--line-night) }
.dark .tlink:hover{ color:var(--glow) }

/* ================================================================ header */
/* The header carries its own surface at every scroll position. It used to be
   transparent over the hero with a gradient behind it; the painting is the
   point of that screen, and nothing is washed over it any more. */
.hdr{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; gap:1.4rem;
  padding:.82rem var(--gut);
  background:rgba(244,241,234,.95); color:var(--ink);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
  transition:padding var(--slow) var(--ease);
}
.hdr[data-solid="1"]{ padding-block:.62rem }
.hdr__mark{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; flex:none }
/* masked, not <img>: an external SVG in an <img> cannot inherit currentColor,
   and this mark has to read on both the dark hero and the light header */
.mark{
  display:block; background:currentColor;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain;    mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.mark--word{
  width:68px; height:40px; transition:width var(--slow) var(--ease), height var(--slow) var(--ease);
  -webkit-mask-image:url("../svg/nordstu-wordmark.svg"); mask-image:url("../svg/nordstu-wordmark.svg");
}
.hdr[data-solid="1"] .mark--word{ width:58px; height:34px }
.mark--angus{
  width:74px; height:74px; opacity:.9;
  -webkit-mask-image:url("../svg/angus-mark.svg"); mask-image:url("../svg/angus-mark.svg");
}

.nav{ display:flex; gap:.2rem; margin-inline:auto }
.nav a{
  text-decoration:none; font-size:.9rem; font-weight:450; padding:.5em .78em;
  border-radius:var(--r); opacity:.86;
  transition:opacity var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav a:hover{ opacity:1; background:currentColor }
.nav a:hover{ background:rgba(128,128,128,.14) }

.hdr__side{ display:flex; align-items:center; gap:.55rem; flex:none }
.lang{ display:flex; border:1px solid; border-color:currentColor; border-radius:var(--r); overflow:hidden }
.lang button{
  display:flex; align-items:center; padding:7px 7px; background:none; border:0;
  color:inherit; cursor:pointer;
  /* the chosen flag is the only one in full colour */
  opacity:.55; filter:saturate(.2);
  transition:opacity var(--fast) var(--ease), background var(--fast) var(--ease), filter var(--fast) var(--ease);
}
.lang button svg{ display:block; width:21px; height:14px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.18) }
.lang button:hover{ opacity:.9; filter:saturate(.7) }
.lang button[aria-pressed="true"]{ opacity:1; filter:none; background:rgba(128,128,128,.28) }
.lang button:focus-visible{ outline-offset:-3px }

.navtoggle{ display:none }

/* ================================================================= hero */
.hero{ position:relative; background:var(--night) }
.hero__track{ height:440vh }
.hero__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; grid-template-rows:1fr auto;
  /* the header is solid and the band is solid, so the photograph only ever
     occupies the strip between them — give it that strip as its own box */
  padding-top:var(--hdr-h,64px);
  background:var(--night);
}
.hero__frame{
  position:relative; min-height:0; overflow:hidden;
  /* the 1000 px plate doubles as a low-quality placeholder: something is on
     screen while the full plate decodes, and it is the no-JS fallback too */
  background:var(--night) url("../scene/plate-var-s.webp") 34% 50%/cover no-repeat;
}
.hero__cv{ position:absolute; inset:0; width:100%; height:100%; display:block }
.hero__frame::after{           /* film grain — rasterised once, no per-frame cost */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain); background-size:150px 150px;
  opacity:.5; mix-blend-mode:overlay;
}

/* One slim row under the photograph: the line, the year, one button. The
   photograph is the hero; the band only has to be tall enough to read. */
.hero__band{
  position:relative; z-index:2; align-self:end; width:100%;
  background:var(--night); color:var(--on-night);
  border-top:1px solid rgba(246,242,234,.12);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(1rem,3vw,3rem);
  padding:.85rem max(var(--gut),calc((100% - var(--wrap)) / 2));
}
.hero h1{
  color:#fff; margin:0; white-space:nowrap;
  font-size:clamp(1.25rem,1.9vw,1.7rem); line-height:1.05; letter-spacing:-.02em;
}
.hero__band .btn{ padding:.62em 1.1em; font-size:.86rem; white-space:nowrap }

/* the year, as four words with a fill line above each */
.year{ display:flex; justify-content:center; gap:clamp(.9rem,2.4vw,2rem); min-width:0 }
.yr{ position:relative; padding-top:.55rem; color:rgba(246,242,234,.45);
     font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
     transition:color var(--slow) var(--ease) }
.yr::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:rgba(246,242,234,.2);
}
.yr::after{                    /* filled by hero.js through --f */
  content:""; position:absolute; top:0; left:0; height:2px;
  width:calc(var(--f,0) * 100%); background:var(--falu-2);
}
.yr[data-on="1"]{ color:#f6f2ea }

/* the scroll hint, small, in the band's top-right corner */
.hero__hint{
  position:absolute; z-index:3; right:var(--gut); top:-1.9rem; margin:0;
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:#f6f2ea; text-shadow:0 1px 6px rgba(0,0,0,.55);
  display:flex; align-items:center; gap:.6em;
  transition:opacity var(--slow) var(--ease);
}
.hero__hint i{ display:block; width:1px; height:14px; background:currentColor; opacity:.7;
               animation:drop 2.4s var(--ease) infinite }
@keyframes drop{ 0%,100%{transform:scaleY(.35);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} }

/* static fallback — reduced motion, or no JS */
.hero--static .hero__track{ height:auto }
.hero--static .hero__stage{ position:relative; height:auto; min-height:100svh }
.hero--static .hero__hint{ display:none }
.hero--static .yr{ color:#f6f2ea }

/* ============================================================ the houses */
.houses{ display:grid; gap:clamp(1rem,2.2vw,1.6rem) }
.house{
  position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; display:grid;
}
.tone .house{ background:var(--paper) }
.house__img{ position:relative; overflow:hidden; background:var(--paper-3) }
.house__img img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease) }
.house:hover .house__img img{ transform:scale(1.028) }
.house__body{ padding:clamp(1.5rem,2.6vw,2.4rem); display:flex; flex-direction:column; gap:.95rem }
.house__body h3 .cnt{ color:var(--muted); font-family:var(--text); font-size:.8rem;
  font-weight:500; letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:.5rem }

/* the feature house gets a different shape from the other three */
.house--feature{ grid-template-columns:1fr }
.house--feature .house__img img{ aspect-ratio:3/2 }
@media (min-width:900px){
  /* the photograph keeps its own shape; the text column is free to be as long
     as it needs without cropping the house to a band */
  .house--feature{ grid-template-columns:1.12fr 1fr; align-items:start }
  .house--feature .house__body{ padding:clamp(2rem,3.2vw,2.9rem) }
}
.house--feature .stills{ margin:0; padding:clamp(.7rem,1.1vw,1rem) }
.houses__row{ display:grid; gap:clamp(1rem,2.2vw,1.6rem); grid-template-columns:1fr }
@media (min-width:720px){ .houses__row{ grid-template-columns:repeat(3,1fr) } }
.houses__row .house__img{ aspect-ratio:3/2 }

.facts{ list-style:none; margin:0; padding:0; display:grid; gap:.42rem }
.facts li{ position:relative; padding-left:1.15em; font-size:.945rem; color:var(--ink-2) }
.facts li::before{
  content:""; position:absolute; left:0; top:.72em; width:5px; height:1px; background:var(--falu)
}
.dark .facts li{ color:var(--on-night-2) }

.statline{
  display:flex; flex-wrap:wrap; gap:0 1.4rem; margin:.2rem 0 0; padding:0; list-style:none;
  border-top:1px solid var(--line); padding-top:1rem;
}
.statline--sm{ gap:0 1.2rem; padding-top:.8rem }
.statline--sm b{ font-size:1.12rem }
.statline--sm span{ font-size:.68rem; margin-top:.25rem }

/* Booking is what the page is for, so the booking control looks like one.
   These used to be quiet underlined links, which read as footnotes. */
.house__cta{ margin:.3rem 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .9rem }
.btn--book{ font-size:.95rem; padding:.9em 1.5em }
.house__via{ font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted) }
.statline li{ display:flex; flex-direction:column }
.statline b{ font-family:var(--display); font-size:1.6rem; font-weight:600; line-height:1;
             letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.statline span{ font-size:.73rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-top:.32rem }

/* the three detail stills beside the main house */
.stills{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.5rem,1.2vw,.9rem); margin-top:1.4rem }
.stills img{ aspect-ratio:4/5 }
.stills img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r) }
.stills figcaption{ font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-top:.5rem }

/* ======================================================== the site plan
   Painted from a measured block plan of the real footprints, so the
   arrangement is the farm's and not the illustrator's guess. */
.plan{ position:relative; margin:0 }
.plan img{ width:100%; height:auto; display:block; border-radius:var(--r) }
/* the photo card that opens beside a lit pin (or inside a lit row on a phone) */
.plan__card{
  position:absolute; z-index:3; width:min(240px,34%); margin:0; pointer-events:none;
  background:var(--paper); color:var(--ink); border-radius:var(--r);
  box-shadow:0 10px 30px rgba(19,26,30,.28), 0 1px 0 rgba(19,26,30,.12);
  overflow:hidden; animation:cardin var(--fast) var(--ease);
}
.plan__card img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; border-radius:0 }
.plan__card figcaption{ font-size:.74rem; font-weight:500; margin:0; padding:.45rem .6rem .5rem; color:var(--ink) }
/* which corner of the card sits at the pin: l/r = card to the left/right of it, t/b = above/below */
.plan__card[data-side="rb"]{ transform:translate(18px,14px) }
.plan__card[data-side="rt"]{ transform:translate(18px,calc(-100% - 14px)) }
.plan__card[data-side="lb"]{ transform:translate(calc(-100% - 18px),14px) }
.plan__card[data-side="lt"]{ transform:translate(calc(-100% - 18px),calc(-100% - 14px)) }
@keyframes cardin{ from{ opacity:0 } to{ opacity:1 } }
/* inside a legend row, on narrow screens */
.plan__key li{ position:relative }
.plan__key .plan__card{ position:static; width:100%; margin:.1rem 0 .8rem; transform:none; box-shadow:none;
  border:1px solid var(--line); pointer-events:auto }
.plan__key .plan__card img{ aspect-ratio:16/8 }

.plan__view{ margin-top:clamp(2.2rem,4.5vw,3.4rem) }
.plan__view img{ width:100%; border-radius:var(--r); aspect-ratio:4/3; object-fit:cover; object-position:50% 45% }
.plan__north{                  /* the drawing is north-up; say so */
  position:absolute; right:.7rem; top:.6rem; width:1.7rem; height:1.7rem;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(19,26,30,.72); color:#f6f2ea;
  font-size:.66rem; font-weight:600; letter-spacing:.04em;
}
.plan__north::before{
  content:""; position:absolute; top:-.42rem; left:50%; transform:translateX(-50%);
  border:.32rem solid transparent; border-bottom-color:rgba(19,26,30,.72); border-top:0;
}

.pin{
  position:absolute; translate:-50% -50%;
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--text); font-size:.76rem; font-weight:600; font-variant-numeric:tabular-nums;
  background:var(--falu); color:#fdf8f2;
  box-shadow:0 0 0 3px rgba(250,247,240,.85), 0 3px 10px rgba(0,0,0,.22);
  transition:transform var(--fast) var(--ease), background var(--fast) var(--ease);
}
.pin[data-hot="1"]{ transform:scale(1.28); background:var(--ink) }

.plan__key{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem }
.plan__key li{ border-top:1px solid var(--line) }
.plan__key li:last-child{ border-bottom:1px solid var(--line) }
.plan__key button{
  width:100%; display:flex; align-items:baseline; gap:.8rem; text-align:left;
  font:inherit; background:none; border:0; color:inherit; cursor:pointer;
  padding:.72rem .2rem; transition:background var(--fast) var(--ease);
}
.plan__key button:hover,.plan__key button[data-hot="1"]{ background:rgba(143,59,43,.07) }
.plan__key b{
  flex:none; width:1.55em; height:1.55em; border-radius:50%; display:grid; place-items:center;
  background:var(--falu); color:#fdf8f2; font-size:.74rem; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.plan__key span{ font-size:.97rem }
.plan__key i{ font-style:normal; display:block }
.plan__key em{ display:block; font-style:normal; font-size:.84rem; color:var(--muted); margin-top:.12rem }

/* the painted object that marks a section — one specific thing, not an icon */
.spot{ display:block; width:clamp(66px,7vw,104px); height:auto; margin-bottom:1.1rem;
       filter:drop-shadow(0 6px 14px rgba(34,42,44,.16)) }
.dark .spot{ filter:drop-shadow(0 6px 16px rgba(0,0,0,.5)) }

/* the Angus, life-drawn, beside the list of what comes off it */
.angus{ width:100%; height:auto; display:block; margin:0 0 .8rem }

/* =============================================================== the farm */
.split{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:start }
@media (min-width:900px){
  .split{ grid-template-columns:1fr 1fr }
  .split--7-5{ grid-template-columns:1.32fr 1fr }
  .split--5-7{ grid-template-columns:1fr 1.32fr }
}
.figset{ display:grid; gap:clamp(.6rem,1.4vw,1rem) }
.figset img{ width:100%; border-radius:var(--r); object-fit:cover }
.figset--2{ grid-template-columns:1fr 1fr }
figure{ margin:0 }
figcaption{ font-size:.79rem; color:var(--muted); margin-top:.6rem; line-height:1.45 }
.dark figcaption{ color:var(--on-night-2) }

.bignum{ display:grid; gap:1.6rem; grid-template-columns:repeat(2,1fr); margin:0; padding:0 }
@media (min-width:760px){ .bignum{ grid-template-columns:repeat(4,1fr) } }
.bignum div{ border-top:1px solid var(--line-night); padding-top:.9rem }
.bignum b{ display:block; font-family:var(--display); font-weight:600;
  font-size:clamp(2rem,3.4vw,2.9rem); line-height:1; letter-spacing:-.025em;
  font-variant-numeric:tabular-nums }
.bignum span{ display:block; font-size:.8rem; line-height:1.4; color:var(--on-night-2); margin-top:.6rem }

.cuts{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none }
.cuts li{
  font-size:.83rem; letter-spacing:.01em; padding:.32em .62em;
  border:1px solid var(--line-night); border-radius:var(--r); color:var(--on-night-2);
}
.cuts li.is-rare{ border-color:rgba(176,83,64,.6); color:#e6b9ad }

/* the shop block: the counter photograph tall on the left, the words beside it */
.shop{ margin-top:clamp(2.6rem,5vw,4rem) }
.shop__hero img{ width:100%; border-radius:var(--r); aspect-ratio:4/5; object-fit:cover }
.shop__k{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-night-2);
          margin:1.4rem 0 .55rem }
.shop__shelf{ margin-top:1.4rem }
.shop__shelf img{ width:100%; border-radius:var(--r); aspect-ratio:16/9; object-fit:cover }

/* ============================================================== the area */
.area{ display:grid; gap:clamp(1rem,2.4vw,1.7rem); grid-template-columns:1fr }
@media (min-width:660px){ .area{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1000px){ .area{ grid-template-columns:repeat(4,1fr) } }
.area figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r) }
.area h3{ font-size:1.16rem; margin:.85rem 0 .35rem }
.area p{ font-size:.9rem; color:var(--ink-2); line-height:1.5 }
/* break the grid's symmetry: the second card sits a little lower */
@media (min-width:1000px){ .area figure:nth-child(2){ margin-top:2.6rem } .area figure:nth-child(4){ margin-top:1.3rem } }
.credit{ margin-top:1.4rem; font-size:.76rem; opacity:.7; max-width:70ch }
.credit a{ color:inherit }

/* ============================================================== quotes */
.quotes{ display:grid; gap:clamp(1.6rem,4vw,3rem) }
@media (min-width:840px){ .quotes{ grid-template-columns:1fr 1fr } }
blockquote{ margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.42rem); line-height:1.42; letter-spacing:-.012em }
blockquote p{ margin:0 0 .9rem }
blockquote cite{ font-family:var(--text); font-style:normal; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }

/* ============================================================= contact */
.contact{ display:grid; gap:clamp(2rem,5vw,4rem) }
@media (min-width:860px){ .contact{ grid-template-columns:1.1fr .9fr } }
.dl{ margin:0; display:grid; gap:1.3rem }
.dl dt{ font-size:.73rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-night-2) }
.dl dd{ margin:.3rem 0 0; font-family:var(--display); font-size:clamp(1.2rem,2.2vw,1.62rem);
        font-weight:500; letter-spacing:-.015em }
.dl dd a{ text-decoration:none; border-bottom:1px solid var(--line-night); padding-bottom:2px }
.dl dd a:hover{ border-color:currentColor; color:var(--glow) }

.ftr{ background:var(--night); color:var(--on-night-2); padding-block:2.6rem;
      border-top:1px solid var(--line-night); font-size:.85rem }
.ftr__in{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between }
.ftr a{ text-decoration:none; border-bottom:1px solid transparent }
.ftr a:hover{ border-color:currentColor; color:var(--on-night) }
.ftr__links{ display:flex; flex-wrap:wrap; gap:1.2rem }
.ftr__mark{ color:var(--on-night) }

/* ========================================================== entrances
   Scoped to .js, which the inline script in <head> sets. Without it every
   .rv element is simply visible: a page whose text depends on JavaScript
   having run is a page that can go blank, and this one is someone's shop
   window.

   (There is no content-visibility here on purpose. It skips the layout of
   off-screen sections, but the estimated heights move every anchor target
   until the section has been rendered once, and IntersectionObserver does
   not fire inside a skipped subtree — so the reveals never ran and the
   section stayed blank. Eight sections is not worth that.) */
.js .rv{ opacity:0; transform:translateY(19px) }
.js .rv.in{ opacity:1; transform:none;
  transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease) }
.js .rv.in.d1{ transition-delay:80ms }
.js .rv.in.d2{ transition-delay:160ms }
.js .rv.in.d3{ transition-delay:240ms }

/* ============================================================== mobile */
@media (max-width:880px){
  .nav{
    position:fixed; inset:0 0 auto; top:0; padding:5.2rem var(--gut) 2rem;
    background:var(--paper); color:var(--ink); flex-direction:column; gap:.2rem;
    border-bottom:1px solid var(--line);
    transform:translateY(-101%); transition:transform 420ms var(--ease);
    box-shadow:0 20px 40px rgba(0,0,0,.14); margin:0;
  }
  .nav a{ font-size:1.24rem; font-family:var(--display); padding:.5em 0; opacity:1 }
  .nav a:hover{ background:none }
  body[data-nav="1"] .nav{ transform:none }
  .navtoggle{
    display:grid; place-items:center; width:40px; height:40px; order:3;
    background:none; border:1px solid currentColor; border-radius:var(--r);
    color:inherit; cursor:pointer; opacity:.7;
  }
  .hdr__side{ margin-left:auto }
  .hero__track{ height:400vh }
  .hero__band{ grid-template-columns:1fr auto; gap:.7rem 1rem; padding-block:.8rem .9rem }
  .hero h1{ font-size:1.2rem; white-space:normal }
  .year{ grid-column:1 / -1; justify-content:space-between; gap:.6rem }
  .yr{ flex:1; font-size:.66rem; letter-spacing:.12em }
  .stills{ grid-template-columns:repeat(3,1fr) }
  .hero__hint{ display:none }
}
/* the header button repeats the one in the hero band right under it; on a
   phone there is no room for the mark, three flags, the button and the menu */
@media (max-width:600px){ .hdr__side > .btn{ display:none } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
                        transition-duration:.01ms!important }
  .js .rv{ opacity:1; transform:none }
}

@media print{ .hdr,.hero__track{ display:none } }