/* =========================================================================
   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; white-space:nowrap;
  transition:opacity var(--fast) var(--ease), background var(--fast) var(--ease);
}
/* seven words in the menu since Cabinfield joined it; German is the longest.
   Between the phone menu and a wide window the row is set a little tighter,
   so no word ever breaks in two and the header keeps its one-line height */
@media (max-width:1120px){ .nav{ gap:0 } .nav a{ font-size:.84rem; padding:.5em .56em } }
.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:480vh }        /* five photographs — ~76vh of scroll each */
.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 summer plate doubles as the placeholder: something is on screen while
     it decodes into the canvas, and it is the no-JS fallback too */
  background:var(--night) url("../scene/plate-sommer-s.webp?v=20260928a") 50% 60%/cover no-repeat;
}
@media (min-width:760px){
  .hero__frame{ background-image:url("../scene/plate-sommer.webp?v=20260928a"); background-position:34% 60% }
}
.hero__cv{ position:absolute; inset:0; width:100%; height:100%; display:block }
/* no film grain over the hero: these are photographs, and grain laid over a
   photograph is one more thing that makes it look processed */

/* 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; line-height:1.35; margin:0; padding:.5rem .65rem .6rem; color:var(--ink) }
.plan__card figcaption b{ display:block; font-size:.8rem; font-weight:600 }
.plan__card figcaption span{ display:block; color:var(--muted); margin-top:.15rem }
.plan__card figcaption span:empty{ display:none }
.plan__card--text{ width:min(220px,32%) }
/* no photo, no photo box: `display:block` above would otherwise beat [hidden] */
.plan__card img[hidden], .plan__card--text img{ display:none }
/* 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__key .plan__card figcaption{ display:none }   /* the row above says it already */

.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 }
/* Beside the drawing the legend is names only — the line about each building
   opens in the card on the drawing, so the list ends where the drawing does
   instead of running 600 px past it. Screen readers still get the <em>. */
@media (min-width:900px){
  .plan__key{ grid-template-columns:1fr 1fr; column-gap:1.2rem }
  .plan__key li:nth-last-child(2){ border-bottom:1px solid var(--line) }
  .plan__key button{ padding:.62rem .2rem; align-items:center }
  .plan__key em{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
}

/* 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{ display:flex }
/* every cut is a button: tap it and it goes into the e-mail order below */
.cut{
  font:inherit; font-size:.83rem; letter-spacing:.01em; padding:.32em .62em; cursor:pointer;
  background:none; border:1px solid var(--line-night); border-radius:var(--r); color:var(--on-night-2);
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.cuts li.is-rare .cut{ border-color:rgba(176,83,64,.6); color:#e6b9ad }
.cut:hover{ border-color:#f6f2ea; color:#f6f2ea }
.cut[aria-pressed="true"], .cuts li.is-rare .cut[aria-pressed="true"]{
  background:var(--falu); border-color:var(--falu); color:#fdf8f2 }
.cut[aria-pressed="true"]::before{ content:"✓ "; }

/* the e-mail order box under the cuts */
.order{ margin-top:1.6rem; padding:1.1rem 1.2rem 1.25rem; border:1px solid var(--line-night);
        border-radius:var(--r) }
.order__h{ margin:0 0 .35rem; font-weight:600; color:#f6f2ea }
.order__p{ margin:0 0 .9rem; font-size:.9rem; color:var(--on-night-2) }
.order__picked{ margin:0 0 .9rem; font-size:.85rem; color:#e6b9ad }
.order__picked:empty{ display:none }

/* 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 }

/* the hunting stay: a panel of its own under the four pictures, because it is
   the one thing in this section you can book */
.hunt{ margin-top:clamp(2.2rem,4.5vw,3.2rem); padding:clamp(1.3rem,3vw,2rem);
       display:grid; gap:1.2rem 2.4rem; grid-template-columns:1fr;
       background:var(--paper); border:1px solid var(--line); border-radius:var(--r) }
.hunt h3{ font-size:clamp(1.3rem,2.2vw,1.7rem); margin:.2rem 0 .7rem }
.hunt p{ margin:0 }
@media (min-width:900px){ .hunt{ grid-template-columns:7fr 5fr; align-items:start } }
.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) }
.ftr__about{ margin:0; font-size:.84rem; max-width:62ch }

/* ========================================================== 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
   980, not 880: with seven items the row no longer fits a 900 px window in
   German, and a wrapped menu is worse than a hamburger. */
@media (max-width:980px){
  .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:430vh }
  .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 } }