/* =========================================================
   BRIM Kaffi & Bakarí
   ---------------------------------------------------------
   1. Tokens          6. Story
   2. Base + type     7. Interlude / Gallery
   3. Nav             8. Orders + form
   4. Hero            9. Visit + map
   5. Menu           10. Strip / Footer / Motion / Responsive
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* colour */
  --cream:        #EFE6D4;
  --cream-deep:   #E5D9C2;
  --cream-warm:   #F5EEE0;
  --navy:         #151F2C;
  --navy-soft:    #23303F;
  --navy-line:    rgba(21,31,44,.16);
  --brick:        #A8432A;
  --brick-warm:   #C15A38;
  --stone:        #8A8375;
  --crust:        #6E4B30;
  --coast:        #8FA3AE;
  --ink:          #151F2C;
  --ink-mute:     #5C5344;
  --ink-on-dark:  #EFE6D4;
  --mute-on-dark: #A9AFB4;

  --map-bg:       #E7DCC6;
  --map-sea:      #C6CFD2;
  --map-sea-line: #9DAEB6;
  --map-block:    #DCCFB6;
  --map-street:   #F3ECDF;
  --map-ink:      #151F2C;

  /* type */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --step--1: clamp(.78rem, .74rem + .18vw, .875rem);
  --step-0:  clamp(.95rem, .9rem + .22vw, 1.0625rem);
  --step-1:  clamp(1.1rem, 1rem + .5vw, 1.375rem);
  --step-2:  clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --step-3:  clamp(2rem, 1.4rem + 3vw, 3.75rem);
  --step-4:  clamp(2.8rem, 1.6rem + 5.6vw, 6.5rem);
  --step-5:  clamp(3.6rem, .5rem + 12vw, 10.5rem);

  /* space */
  --pad: clamp(1.1rem, 4vw, 3.5rem);
  --gap: clamp(.9rem, 1.6vw, 1.9rem);
  --sec: clamp(4.5rem, 11vh, 9rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. BASE + TYPE ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
img{ height:auto; background:var(--cream-deep); }

h1,h2,h3{ margin:0; font-weight:400; line-height:1.02; letter-spacing:-.015em; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }

a{ color:inherit; }
::selection{ background:var(--brick); color:var(--cream-warm); }

:focus-visible{
  outline:2px solid var(--brick);
  outline-offset:3px;
  border-radius:1px;
}
.foot :focus-visible,.interlude :focus-visible,.story :focus-visible{ outline-color:var(--brick-warm); }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip-link{
  position:fixed; top:.6rem; left:.6rem; z-index:200;
  transform:translateY(-160%);
  background:var(--navy); color:var(--cream);
  padding:.7rem 1.1rem; font-size:var(--step--1);
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:none; }

.wrap{ width:min(100% - (var(--pad) * 2), 1620px); margin-inline:auto; }

.section{ padding-block:var(--sec); position:relative; }

/* film grain */
.grain{
  position:fixed; inset:-50%; z-index:900; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%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='220' height='220' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

/* shared editorial bits */
.secnum{
  font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); display:flex; align-items:baseline; gap:.75rem;
}
.secnum span{
  font-family:var(--serif); font-size:1.9em; letter-spacing:0;
  color:var(--brick); font-variant-numeric:lining-nums;
}
.secnum--light{ color:var(--mute-on-dark); }
.secnum--light span{ color:var(--brick-warm); }

.hand{
  font-family:var(--serif); font-style:italic;
  font-variation-settings:'SOFT' 60,'WONK' 1;
  color:var(--brick);
}

.rule{ display:inline-block; width:3.5rem; height:1px; background:currentColor; opacity:.55; vertical-align:middle; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-size:var(--step--1); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  padding:.85rem 1.5rem; border:1px solid transparent; cursor:pointer;
  background:none; color:inherit; border-radius:0;
  transition:background-color .28s var(--ease), color .28s var(--ease),
             border-color .28s var(--ease), transform .28s var(--ease);
}
.btn--solid{ background:var(--navy); color:var(--cream); }
.btn--solid:hover{ background:var(--brick); }
.btn--brick{ background:var(--brick); color:var(--cream-warm); }
.btn--brick:hover{ background:var(--brick-warm); }
.btn--lg{ padding:1.05rem 2.2rem; }
.btn:active{ transform:translateY(1px); }

/* ---------- 3. NAV ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  color:var(--cream);
  transition:background-color .45s var(--ease), color .45s var(--ease),
             box-shadow .45s var(--ease);
}
.nav__inner{
  width:min(100% - (var(--pad) * 2), 1620px); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding-block:clamp(.9rem,1.8vh,1.4rem);
  border-bottom:1px solid transparent;
  transition:border-color .45s var(--ease), padding .45s var(--ease);
}
.nav.is-stuck{ background:var(--cream); color:var(--ink); box-shadow:0 1px 0 rgba(21,31,44,.10); }
.nav.is-stuck .nav__inner{ border-bottom-color:var(--navy-line); padding-block:.7rem; }
.nav.is-stuck .btn--solid{ background:var(--navy); color:var(--cream); }

.wordmark{ display:flex; flex-direction:column; gap:.28rem; text-decoration:none; line-height:1; }
.wordmark__text{
  font-family:var(--serif); font-size:clamp(1.35rem,2.4vw,1.75rem);
  font-weight:600; letter-spacing:.16em; font-variation-settings:'SOFT' 20,'WONK' 0;
}
.wordmark__mark{ width:clamp(3.4rem,6vw,4.6rem); height:auto; opacity:.85; }

.nav__links ul{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.2rem); }
.nav__links a{
  font-size:var(--step--1); letter-spacing:.05em; text-decoration:none;
  position:relative; padding-block:.35rem;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .32s var(--ease);
}
.nav__links a:hover::after,.nav__links a:focus-visible::after{ transform:scaleX(1); }

.nav__end{ display:flex; align-items:center; gap:1rem; }
/* over the hero the CTA is an outline; it fills in once the nav sticks */
.nav__cta{ white-space:nowrap; background:transparent; border-color:rgba(239,230,212,.5); color:var(--cream); }
.nav__cta:hover{ background:var(--cream); color:var(--navy); border-color:var(--cream); }
.nav.is-stuck .nav__cta{ background:var(--navy); border-color:var(--navy); color:var(--cream); }
.nav.is-stuck .nav__cta:hover{ background:var(--brick); border-color:var(--brick); }
.nav__cta-short{ display:none; }

.nav__toggle{
  display:none; align-items:center; gap:.6rem;
  font-family:var(--sans); font-size:var(--step--1);
  letter-spacing:.1em; text-transform:uppercase;
  background:none; border:0; color:inherit; cursor:pointer; padding:.5rem .2rem;
}
.nav__toggle-lines{ display:grid; gap:5px; width:22px; }
.nav__toggle-lines i{ height:1.5px; background:currentColor; transition:transform .3s var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__toggle-lines i:first-child{ transform:translateY(3.25px) rotate(9deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-lines i:last-child{ transform:translateY(-3.25px) rotate(-9deg); }

.mobnav{ display:none; }

/* ---------- 4. HERO ---------- */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; color:var(--cream); isolation:isolate; }
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:65% 55%; }
/* the scrim is doing accessibility work, not decoration: it keeps every piece
   of hero text above 4.5:1 against the photograph underneath */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(105deg,
      rgba(12,18,26,.95) 0%, rgba(12,18,26,.78) 32%, rgba(12,18,26,.24) 56%,
      rgba(12,18,26,.62) 86%, rgba(12,18,26,.74) 100%),
    linear-gradient(to top, rgba(12,18,26,.78) 0%, rgba(12,18,26,0) 42%);
}

/* Type sitting directly on photography: a soft shadow guarantees legibility
   over stray highlights (flour dust, bokeh) that a flat scrim can't flatten. */
.hero__place,.hero__tagline,.hero__intro p,.hero__menulink,.status__next,
.hero__inset figcaption,.hero__folio{
  text-shadow:0 1px 14px rgba(12,18,26,.8), 0 0 3px rgba(12,18,26,.55);
}
.interlude__text,.interlude__cap{
  text-shadow:0 1px 16px rgba(12,18,26,.85), 0 0 4px rgba(12,18,26,.6);
}

.hero__grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
  align-items:end;
  padding-bottom:clamp(2.4rem,6vh,4rem);
  padding-top:clamp(5.5rem,11vh,7.5rem);
}

.hero__place{
  grid-column:1 / 6; align-self:start;
  font-size:var(--step--1); letter-spacing:.2em; text-transform:uppercase;
  display:flex; align-items:center; gap:.9rem; margin-bottom:auto;
}

.hero__title{ grid-column:1 / 9; margin-top:clamp(.8rem,3vh,2.4rem); }
.hero__brim{
  display:block; font-family:var(--serif); font-size:var(--step-5);
  font-weight:600; letter-spacing:-.02em; line-height:.82;
  font-variation-settings:'SOFT' 15,'WONK' 0;
  text-indent:-.04em;
}
.hero__sub{
  display:block; font-family:var(--serif); font-size:clamp(1.3rem,3.2vw,2.6rem);
  font-weight:300; letter-spacing:.06em; margin-top:.5rem; opacity:.92;
}
.hero__sub em{ font-style:italic; color:var(--brick-warm); }

.hero__tagline{
  grid-column:1 / 7; margin-top:clamp(.8rem,1.6vh,1.3rem);
  font-family:var(--serif); font-size:var(--step-2); line-height:1.12; font-weight:300;
}
.hero__tagline em{ font-style:italic; display:block; }

.hero__intro{ grid-column:1 / 5; margin-top:clamp(1rem,2.4vh,1.8rem); }
.hero__intro p{ font-size:var(--step-0); max-width:34ch; color:rgba(239,230,212,.92); }
.hero__menulink{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.3rem;
  font-size:var(--step--1); letter-spacing:.11em; text-transform:uppercase;
  text-decoration:none; padding-bottom:.35rem;
  border-bottom:1px solid rgba(239,230,212,.42);
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.hero__menulink svg{ width:1rem; height:1rem; transition:transform .4s var(--ease); }
.hero__menulink:hover{ border-bottom-color:var(--brick-warm); }
.hero__menulink:hover svg{ transform:translateY(3px); }

.hero__status{
  grid-column:8 / 13; justify-self:end; text-align:right;
  display:flex; flex-direction:column; align-items:flex-end; gap:.55rem;
}
.status{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--step--1); letter-spacing:.1em; text-transform:uppercase;
  border:1px solid rgba(239,230,212,.34); padding:.6rem 1rem .55rem;
  background:rgba(12,18,26,.35);
}
.status__dot{
  width:7px; height:7px; border-radius:50%; background:var(--stone);
  box-shadow:0 0 0 0 rgba(168,67,42,.55); flex:none;
}
.status.is-open .status__dot,.hours__now.is-open .status__dot{
  background:var(--brick-warm); animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(193,90,56,.5); }
  70%{ box-shadow:0 0 0 9px rgba(193,90,56,0); }
  100%{ box-shadow:0 0 0 0 rgba(193,90,56,0); }
}
.status__next{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:var(--step--1); color:var(--cream); max-width:30ch; text-align:right;
}
.status__next b{ font-weight:600; color:var(--cream); font-variant-numeric:tabular-nums; }
.steam{ width:1.15rem; height:1rem; flex:none; opacity:.75; }
.steam__a,.steam__b{ animation:steam 3.6s ease-in-out infinite; transform-origin:center bottom; }
.steam__b{ animation-delay:-1.4s; }
@keyframes steam{
  0%,100%{ opacity:.3; transform:translateY(1px) scaleY(.96); }
  50%{ opacity:.85; transform:translateY(-1px) scaleY(1.04); }
}

.hero__inset{ grid-column:10 / 13; margin:0; align-self:end; }
.hero__inset img{
  width:100%; filter:saturate(.94);
  height:clamp(6.5rem,15vh,11rem); object-fit:cover; object-position:center 40%;
}
.hero__inset figcaption{
  margin-top:.6rem; font-size:var(--step--1); color:rgba(239,230,212,.72); letter-spacing:.02em;
}

.hero__folio{
  position:absolute; right:var(--pad); top:50%; transform:rotate(90deg) translateX(0);
  transform-origin:right center;
  font-size:var(--step--1); letter-spacing:.24em; text-transform:uppercase;
  color:rgba(239,230,212,.55); display:flex; align-items:center; gap:.7rem;
}
.hero__folio span{ font-family:var(--serif); font-size:1.5em; letter-spacing:0; color:var(--brick-warm); }

/* ---------- 5. MENU ---------- */
.menu{ background:var(--cream); padding-top:clamp(3.5rem,8vh,6rem); }
.menu__grid{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap); row-gap:clamp(1.6rem,3vw,2.6rem);
}
.menu__head{ grid-column:1 / 9; }
.menu__title{
  font-family:var(--serif); font-size:var(--step-4); font-weight:400;
  margin-top:.7rem; font-variation-settings:'SOFT' 12,'WONK' 1;
}
.menu__title em{ font-style:italic; color:var(--brick); }
.menu__updated{
  margin-top:1rem; font-size:var(--step--1); color:var(--ink-mute);
  letter-spacing:.02em; border-top:1px solid var(--navy-line); padding-top:.7rem;
  max-width:36ch;
}
.menu__note{
  grid-column:9 / 13; align-self:end; font-size:var(--step--1);
  color:var(--ink-mute); max-width:34ch; border-left:2px solid var(--brick);
  padding-left:1rem;
}

.menu__cols{
  grid-column:1 / 10; margin-top:clamp(1.5rem,4vh,3rem);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2rem,5vw,5rem); row-gap:clamp(2.6rem,5vh,4rem);
  border-top:1px solid var(--ink); padding-top:clamp(1.6rem,3vh,2.4rem);
}

.mgroup__title{
  font-family:var(--serif); font-size:var(--step-2); font-weight:400;
  display:flex; align-items:baseline; gap:1rem;
}
.mgroup__title::after{ content:''; flex:1; height:1px; background:var(--navy-line); }
.mgroup__meta{
  font-size:var(--step--1); color:var(--ink-mute); letter-spacing:.04em;
  margin-top:.35rem; font-variant-numeric:tabular-nums;
}
.mlist{ margin-top:1.5rem; display:grid; gap:1.15rem; }

.mitem{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline;
  column-gap:.6rem; row-gap:.15rem;
}
.mitem__name{ font-size:var(--step-0); font-weight:500; letter-spacing:.005em; }
.mitem__dots{
  border-bottom:1px dotted rgba(21,31,44,.42); transform:translateY(-.28em);
  min-width:1.5rem;
}
.mitem__price{
  font-size:var(--step-1); font-family:var(--serif); font-weight:500;
  font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.01em;
}
.mitem__price::after{ content:' kr.'; font-family:var(--sans); font-size:.55em; letter-spacing:.06em; color:var(--ink-mute); }
.mitem__desc{
  grid-column:1 / -1; font-size:var(--step--1); color:var(--ink-mute); max-width:44ch;
}
.mitem.is-out .mitem__name,.mitem.is-out .mitem__price{ opacity:.45; }
.mitem.is-out .mitem__price{ text-decoration:line-through; text-decoration-thickness:1px; }
.tag{
  font-family:var(--sans); font-size:.62em; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream-warm); background:var(--brick);
  padding:.18em .5em .14em; margin-left:.5rem; vertical-align:.14em; opacity:1;
}
.mitem.is-out .mitem__name .tag{ opacity:1; }

.menu__fig{ grid-column:10 / 13; margin:0; align-self:start; margin-top:clamp(1.5rem,4vh,3rem); }
.menu__fig img{ width:100%; }
.menu__fig figcaption{
  margin-top:.7rem; font-size:var(--step--1); color:var(--ink-mute);
  display:flex; flex-direction:column; gap:.2rem;
}
.menu__fig .hand{ font-size:1.05em; transform:rotate(-1.6deg); transform-origin:left; }

/* ---------- 6. STORY ---------- */
.story{
  background:var(--navy); color:var(--ink-on-dark);
  padding-block:clamp(5rem,13vh,10rem);
}
.story__grid{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap); row-gap:clamp(1.4rem,3vw,2.4rem);
  align-items:start;
}
.story .secnum{ grid-column:1 / 5; }
.story__title{
  grid-column:1 / 9; font-family:var(--serif); font-size:var(--step-4);
  font-weight:400; margin-top:.6rem; font-variation-settings:'SOFT' 12,'WONK' 1;
}
.story__title em{ font-style:italic; color:var(--brick-warm); }

.story__fig{ margin:0; }
.story__fig figcaption{
  margin-top:.65rem; font-size:var(--step--1); color:var(--mute-on-dark);
  font-variant-numeric:tabular-nums;
}
.story__fig--hands{ grid-column:1 / 5; margin-top:clamp(2rem,5vh,3.5rem); }
.story__fig--oven{ grid-column:6 / 13; margin-top:clamp(3rem,9vh,7rem); }
.story__fig--crust{ grid-column:2 / 5; margin-top:clamp(2rem,5vh,3.5rem); }

.story__text{
  grid-column:6 / 11; margin-top:clamp(2rem,5vh,3.5rem);
  display:grid; gap:1.1rem;
}
.story__text p{ color:rgba(239,230,212,.82); max-width:56ch; }
.story__text .lead{
  font-family:var(--serif); font-size:var(--step-1); line-height:1.4;
  color:var(--cream); max-width:32ch;
}

.story__quote{
  grid-column:6 / 12; margin:clamp(1.5rem,4vh,3rem) 0 0;
  border-top:1px solid rgba(239,230,212,.2); padding-top:1.6rem;
}
.story__quote p{
  font-family:var(--serif); font-style:italic; font-size:var(--step-2);
  line-height:1.25; font-weight:300; color:var(--cream);
  font-variation-settings:'SOFT' 60,'WONK' 1; max-width:20ch;
}
.story__quote footer{
  margin-top:.9rem; font-size:var(--step--1); letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute-on-dark);
}

.principles{
  grid-column:1 / 5; margin-top:clamp(2rem,5vh,3.2rem);
  border-top:1px solid rgba(239,230,212,.2);
}
.principles__item{
  display:grid; grid-template-columns:2.6rem 1fr; align-items:baseline;
  gap:.2rem 1rem; padding:1rem 0;
  border-bottom:1px solid rgba(239,230,212,.14);
}
.principles__n{
  font-family:var(--serif); font-size:var(--step-0); color:var(--brick-warm);
  font-variant-numeric:lining-nums;
}
.principles__t{ font-size:var(--step-0); font-weight:500; }
.principles__d{ grid-column:2; font-size:var(--step--1); color:var(--mute-on-dark); }

.story__annot{
  grid-column:11 / 13; align-self:center; text-align:left;
  font-size:var(--step-1); line-height:1.3; color:var(--brick-warm);
  transform:rotate(-4deg); margin-top:clamp(1rem,4vh,3rem);
}

/* ---------- 7. INTERLUDE + GALLERY ---------- */
.interlude{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(22rem,62vh,40rem);
  display:flex; align-items:center; color:var(--cream);
}
.interlude img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  object-fit:cover; object-position:center 58%;
}
.interlude::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(12,18,26,.92) 0%, rgba(12,18,26,.62) 52%, rgba(12,18,26,.76) 100%);
}
.interlude__inner{ padding-block:clamp(3rem,8vh,6rem); }
.interlude__text{
  font-family:var(--serif); font-size:var(--step-3); font-weight:300;
  line-height:1.06; max-width:16ch;
  font-variation-settings:'SOFT' 30,'WONK' 1;
}
.interlude__text em{ font-style:italic; color:var(--brick-warm); }
.interlude__cap{
  margin-top:1.6rem; font-size:var(--step--1); letter-spacing:.08em;
  color:var(--cream); border-left:2px solid var(--brick-warm); padding-left:.9rem;
}

.gallery{ background:var(--cream-warm); }
.gallery__head{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); }
.gallery__head .secnum{ grid-column:1 / 6; }
.gallery__title{
  grid-column:1 / 8; font-family:var(--serif); font-size:var(--step-3);
  margin-top:.6rem; font-variation-settings:'SOFT' 12,'WONK' 1;
}
.gallery__title em{ font-style:italic; color:var(--brick); }
.gallery__intro{
  grid-column:9 / 13; align-self:end; font-size:var(--step--1);
  color:var(--ink-mute); max-width:34ch;
}

.gallery__grid{
  margin-top:clamp(2.5rem,6vh,4.5rem);
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap); row-gap:clamp(2rem,5vh,4rem);
}
.gitem{ margin:0; }
.gitem__frame{ overflow:hidden; position:relative; background:var(--cream-deep); }
.gitem img{ width:100%; transition:transform 1.2s var(--ease), filter 1.2s var(--ease); }
.gitem:hover img,.gitem:focus-within img{ transform:scale(1.035); }
.gitem figcaption{
  margin-top:.7rem; font-size:var(--step--1); color:var(--ink-mute);
  display:flex; align-items:baseline; gap:.7rem;
}
.gitem__n{
  font-family:var(--serif); font-size:1.15em; color:var(--brick);
  font-variant-numeric:lining-nums;
}

.gitem--a{ grid-column:1 / 7; }
.gitem--b{ grid-column:8 / 11; margin-top:clamp(2rem,7vh,5.5rem); }
.gitem--c{ grid-column:11 / 13; }
.gitem--d{ grid-column:3 / 8; margin-top:clamp(1rem,3vh,2.5rem); }
.gitem--e{ grid-column:9 / 12; }
.gitem--f{ grid-column:1 / 3; margin-top:clamp(1rem,4vh,3rem); }
.gitem--g{ grid-column:4 / 7; }
.gitem--h{ grid-column:7 / 10; margin-top:clamp(1rem,4vh,3rem); }
.gitem--i{ grid-column:10 / 13; align-self:end; }

/* ---------- 8. ORDERS + FORM ---------- */
.orders{ background:var(--cream); }
.orders__grid{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap); row-gap:clamp(1.4rem,3vw,2.2rem);
}
.orders .secnum{ grid-column:1 / 6; }
.orders__title{
  grid-column:1 / 9; font-family:var(--serif); font-size:var(--step-3);
  margin-top:.6rem; font-variation-settings:'SOFT' 12,'WONK' 1;
}
.orders__title em{ font-style:italic; color:var(--brick); }
.orders__intro{
  grid-column:9 / 13; align-self:end; font-size:var(--step--1);
  color:var(--ink-mute); max-width:36ch;
}

.packs{
  grid-column:1 / 9; margin-top:clamp(2rem,5vh,3.5rem);
  border-top:1px solid var(--ink);
}
.pack{
  display:grid; grid-template-columns:3.5rem 1fr auto;
  gap:.4rem clamp(1rem,2.5vw,2.5rem); align-items:start;
  padding:clamp(1.4rem,3vh,2.2rem) 0;
  border-bottom:1px solid var(--navy-line);
  transition:background-color .4s var(--ease);
}
.pack:hover{ background:rgba(21,31,44,.035); }
.pack__n{
  font-family:var(--serif); font-size:var(--step-1); color:var(--brick);
  font-variant-numeric:lining-nums; grid-row:1 / 3;
}
.pack__name{ font-family:var(--serif); font-size:var(--step-2); font-weight:400; }
.pack__desc{ grid-column:2; font-size:var(--step--1); color:var(--ink-mute); max-width:52ch; }
.pack__price{
  grid-column:3; grid-row:1 / 3; text-align:right; white-space:nowrap;
  font-family:var(--serif); font-size:var(--step-2);
  font-variant-numeric:tabular-nums lining-nums;
}
.pack__price span{
  display:block; font-family:var(--sans); font-size:.36em; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute);
}
.pack__price span:first-child{ margin-bottom:.2rem; }

.orders__also{
  grid-column:1 / 9; display:flex; flex-wrap:wrap; gap:.6rem 1.6rem;
  margin-top:1.4rem; font-size:var(--step--1); color:var(--ink-mute);
}
.orders__also li{ display:flex; align-items:center; gap:.6rem; }
.orders__also li::before{ content:''; width:5px; height:5px; background:var(--brick); flex:none; }

.orders__fig{ grid-column:9 / 13; grid-row:3 / 6; margin:0; align-self:start; margin-top:clamp(2rem,5vh,3.5rem); }
.orders__fig img{ width:100%; }
.orders__fig figcaption{ margin-top:.7rem; font-size:var(--step--1); color:var(--ink-mute); }

.fyrirspurn{
  grid-column:1 / 13; margin-top:clamp(3rem,8vh,6rem);
  border-top:2px solid var(--ink); padding-top:clamp(2rem,4vh,3rem);
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap);
}
.fyrirspurn__head{ grid-column:1 / 5; }
.fyrirspurn__title{
  font-family:var(--serif); font-size:var(--step-2);
  font-variation-settings:'SOFT' 12,'WONK' 1;
}
.fyrirspurn__note{ margin-top:.8rem; font-size:var(--step--1); color:var(--ink-mute); max-width:26ch; }

.form{
  grid-column:5 / 13;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(1.1rem,2.4vw,1.8rem);
}
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field--half{ grid-column:span 3; }
.field--third{ grid-column:span 2; }
.field--full{ grid-column:1 / -1; }

.field label{
  font-size:var(--step--1); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute);
}
.req{ color:var(--brick); }

.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:var(--step-0); color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid rgba(21,31,44,.35);
  padding:.55rem 0; border-radius:0; width:100%;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:6rem; }
.field select{
  appearance:none; padding-right:1.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23151F2C' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .2rem center; background-size:.7rem;
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(92,83,68,.6); }
.field input:hover,.field select:hover,.field textarea:hover{ border-bottom-color:rgba(21,31,44,.6); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--brick); border-bottom-width:2px;
  padding-bottom:calc(.55rem - 1px);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ outline:2px solid var(--brick); outline-offset:4px; }
.field.is-invalid input,.field.is-invalid select{ border-bottom-color:var(--brick); }
.err{ font-size:var(--step--1); color:var(--brick); min-height:0; }
.err:empty{ display:none; }

.form__foot{
  grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center;
  gap:1.2rem 2rem; margin-top:.6rem;
}
.form__small{ font-size:var(--step--1); color:var(--ink-mute); }
.form__small a{ color:var(--brick); text-underline-offset:3px; }
.form__status{ grid-column:1 / -1; font-size:var(--step-0); color:var(--brick); }
.form__status:empty{ display:none; }
.form__status.is-ok{
  color:var(--ink); border-left:2px solid var(--brick); padding-left:1rem;
  font-family:var(--serif); font-size:var(--step-1); line-height:1.35;
}

/* ---------- 9. VISIT ---------- */
.visit{ background:var(--navy); color:var(--ink-on-dark); }
.visit__grid{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap); row-gap:clamp(1.6rem,4vh,3rem);
}
.visit .secnum{ grid-column:1 / 6; }
.visit__title{
  grid-column:1 / 7; font-family:var(--serif); font-size:var(--step-3);
  margin-top:.6rem; font-variation-settings:'SOFT' 12,'WONK' 1;
}
.visit__title em{ font-style:italic; color:var(--brick-warm); }

.hours{ grid-column:8 / 13; align-self:start; margin-top:clamp(.5rem,2vh,1.5rem); }
.hours__now{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--step--1); letter-spacing:.1em; text-transform:uppercase;
  border:1px solid rgba(239,230,212,.3); padding:.55rem .95rem;
}
.hours__list{ margin-top:1.6rem; border-top:1px solid rgba(239,230,212,.2); }
.hours__list > div{ padding:1.1rem 0; border-bottom:1px solid rgba(239,230,212,.14); }
.hours__list dt{
  font-size:var(--step--1); letter-spacing:.09em; text-transform:uppercase;
  color:var(--mute-on-dark);
}
.hours__list dd{ display:flex; align-items:baseline; gap:.5rem; margin-top:.25rem; }
.hours__list .big{
  font-family:var(--serif); font-size:clamp(2rem,4.4vw,3.4rem); line-height:1;
  font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.02em;
}
.hours__list .dash{ font-family:var(--serif); font-size:clamp(1.4rem,3vw,2.4rem); color:var(--brick-warm); }
.hours__note{ margin-top:1rem; font-size:var(--step--1); color:var(--mute-on-dark); }

.visit__map{ grid-column:1 / 8; }
.map{ width:100%; height:auto; border:1px solid rgba(239,230,212,.16); }
.map__label{
  font-family:var(--sans); font-size:13px; letter-spacing:.09em;
  text-transform:uppercase; fill:var(--map-ink); opacity:.62;
}
.map__label--sea{ opacity:.5; }
.map__pinlabel{
  font-family:var(--serif); font-size:26px; font-weight:600;
  letter-spacing:.08em; fill:var(--map-ink);
}
.map__pulse{ animation:mappulse 3.4s var(--ease) infinite; transform-box:fill-box; transform-origin:center; }
@keyframes mappulse{
  0%,100%{ transform:scale(.72); opacity:.28; }
  50%{ transform:scale(1.1); opacity:.1; }
}
.visit__mapcap{ margin-top:.9rem; font-size:var(--step--1); color:var(--mute-on-dark); max-width:44ch; }

.visit__info{
  grid-column:8 / 13; display:grid; gap:1.5rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-self:start;
}
.info h3{
  font-size:var(--step--1); letter-spacing:.11em; text-transform:uppercase;
  color:var(--brick-warm); margin-bottom:.45rem;
}
.info p{ font-size:var(--step--1); color:rgba(239,230,212,.8); line-height:1.65; }
.info a{ text-decoration:none; border-bottom:1px solid rgba(239,230,212,.35); }
.info a:hover{ border-bottom-color:var(--brick-warm); }

/* ---------- 10. STRIP / FOOTER ---------- */
.daglegt{ background:var(--cream); padding-block:clamp(3.5rem,9vh,6.5rem) clamp(3rem,7vh,5rem); overflow:hidden; }
.daglegt__head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:1rem; padding-bottom:1.4rem; border-bottom:1px solid var(--navy-line);
}
.daglegt__title{
  font-family:var(--serif); font-size:var(--step-2);
  font-variation-settings:'SOFT' 12,'WONK' 1;
}
.daglegt__handle{
  font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--brick); border-bottom:1px solid currentColor; padding-bottom:.2rem;
}

.strip{ margin-top:clamp(1.6rem,4vh,2.6rem); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.strip__track{ display:flex; gap:var(--gap); width:max-content; animation:marquee 68s linear infinite; }
.strip:hover .strip__track,.strip:focus-within .strip__track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.strip__item{ margin:0; width:clamp(11rem,20vw,17rem); flex:none; }
.strip__item img{ width:100%; height:clamp(13rem,22vw,17rem); object-fit:cover; }
.strip__item figcaption{ margin-top:.55rem; font-size:var(--step--1); color:var(--ink-mute); letter-spacing:.04em; }

.foot{ background:var(--navy); color:var(--ink-on-dark); padding-block:clamp(3.5rem,9vh,6rem) 2rem; }
.foot__grid{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap); row-gap:clamp(2rem,5vh,3.5rem);
}
.foot__brand{ grid-column:1 / 4; }
.foot__mark{
  font-family:var(--serif); font-size:clamp(3.5rem,8vw,6rem); font-weight:600;
  letter-spacing:.06em; line-height:.9;
}
.foot__name{ font-family:var(--serif); font-size:var(--step-1); font-weight:300; letter-spacing:.12em; margin-top:.3rem; }
.foot__tag{ margin-top:1.2rem; font-family:var(--serif); font-size:var(--step-1); font-weight:300; color:rgba(239,230,212,.8); }
.foot__tag em{ font-style:italic; color:var(--brick-warm); }

.foot__col{ grid-column:span 2; }
.foot__h{
  font-family:var(--sans); font-size:var(--step--1); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brick-warm);
  margin-bottom:1rem; padding-bottom:.6rem; border-bottom:1px solid rgba(239,230,212,.16);
}
.foot__col p{ font-size:var(--step--1); color:rgba(239,230,212,.82); line-height:1.75; }
.foot__col a{ text-decoration:none; border-bottom:1px solid rgba(239,230,212,.28); }
.foot__col a:hover{ border-bottom-color:var(--brick-warm); color:var(--cream); }
.foot__addr + .foot__hours{ margin-top:1rem; }
.foot__hours span{ display:inline-block; min-width:4.6rem; color:var(--mute-on-dark); }
.foot__nav{ display:grid; gap:.5rem; font-size:var(--step--1); }
.foot__orderlink{ display:inline-block; margin-top:1rem; color:var(--brick-warm); }

.foot__news{ grid-column:10 / 13; }
.foot__newstext{ font-size:var(--step--1); color:rgba(239,230,212,.82); margin-bottom:1.1rem; max-width:32ch; }
.news__row{ display:flex; border-bottom:1px solid rgba(239,230,212,.35); }
.news__row input{
  flex:1; min-width:0; background:transparent; border:0; color:var(--cream);
  font-family:var(--sans); font-size:var(--step-0); padding:.6rem 0;
}
.news__row input::placeholder{ color:rgba(239,230,212,.45); }
.news__row input:focus{ outline:none; }
.news__row input:focus-visible{ outline:2px solid var(--brick-warm); outline-offset:3px; }
.news__row .btn{ padding:.55rem 1.1rem; margin-left:.6rem; align-self:center; }
.news__status{ margin-top:.7rem; font-size:var(--step--1); color:var(--brick-warm); }
.news__status:empty{ display:none; }

.foot__poetic{
  grid-column:1 / 13; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.6rem,5vw,3.6rem); font-weight:300; color:var(--cream);
  font-variation-settings:'SOFT' 60,'WONK' 1;
  border-top:1px solid rgba(239,230,212,.16); padding-top:clamp(2rem,5vh,3.5rem);
  margin-top:clamp(1rem,3vh,2rem);
}
.foot__legal{
  grid-column:1 / 13; display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:.8rem 2rem; font-size:var(--step--1); color:var(--mute-on-dark);
}
.foot__legal a{ text-decoration:none; border-bottom:1px solid rgba(239,230,212,.28); }

/* ---------- MOTION ---------- */
/* Kept in sync with REVEAL in assets/js/main.js.
   Every argument must stay a SINGLE class selector: :is() inherits the
   specificity of its most specific argument, so one compound selector in here
   would out-rank the .is-in rule below and elements would never appear. */
.js :is(
  .hero__place, .hero__title, .hero__tagline, .hero__intro, .hero__status, .hero__inset,
  .secnum, .menu__head, .menu__note, .mgroup__title, .mgroup__meta, .mitem, .menu__fig,
  .story__title, .story__text, .story__quote, .principles__item, .story__fig,
  .interlude__text, .interlude__cap,
  .gallery__title, .gallery__intro, .gitem,
  .orders__title, .orders__intro, .pack, .orders__also,
  .orders__fig, .fyrirspurn__head, .field, .form__foot,
  .visit__title, .hours, .visit__map, .info,
  .daglegt__title, .daglegt__handle,
  .foot__brand, .foot__col, .foot__news, .foot__poetic
){
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}
/* menu lines print in tighter and quicker */
.js .mitem,.js .mgroup__title,.js .mgroup__meta{ transform:translateY(10px); transition-duration:.6s; }

/* Must come after every initial-state rule above, and must out-rank them —
   hence html.js. No !important: inline parallax transforms have to win. */
html.js .is-in{ opacity:1; transform:none; }

/* Images unmask upward. The clip-path lives on the image, but the
   IntersectionObserver watches its container: Chromium counts clip-path when
   computing intersection, so a clipped image can never reveal itself. */
.js [data-mask]{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.2s var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-mask].is-in{ clip-path:inset(0 0 0 0); }

.parallax{ will-change:transform; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .js [data-reveal],.js [data-reveal-mask]{ opacity:1; transform:none; clip-path:none; }
  .strip__track{ animation:none; }
  .strip{ overflow-x:auto; }
}

/* ---------- RESPONSIVE ---------- */
/* short landscape windows: drop the inset rather than push the hero past a screen */
@media (min-width:901px) and (max-height:780px){
  .hero__inset{ display:none; }
}

@media (max-width:1100px){
  .hero__title{ grid-column:1 / 11; }
  .hero__intro{ grid-column:1 / 7; }
  .hero__inset{ display:none; }
  .hero__status{ grid-column:7 / 13; }

  .menu__head{ grid-column:1 / 13; }
  .menu__note{ grid-column:1 / 13; border-left:0; border-top:1px solid var(--brick); padding:.9rem 0 0; max-width:48ch; }
  .menu__cols{ grid-column:1 / 13; }
  .menu__fig{ grid-column:1 / 7; }

  .story__title{ grid-column:1 / 13; }
  .story__text{ grid-column:6 / 13; }
  .story__quote{ grid-column:1 / 13; }
  .story__annot{ display:none; }

  .gallery__title{ grid-column:1 / 13; }
  .gallery__intro{ grid-column:1 / 9; }

  .orders__title{ grid-column:1 / 13; }
  .orders__intro{ grid-column:1 / 9; }
  .packs{ grid-column:1 / 13; }
  .orders__also{ grid-column:1 / 13; }
  .orders__fig{ grid-column:1 / 7; grid-row:auto; }
  .fyrirspurn__head{ grid-column:1 / 13; margin-bottom:1.8rem; }
  .form{ grid-column:1 / 13; }

  .visit__title{ grid-column:1 / 13; }
  .visit__map{ grid-column:1 / 13; }
  .hours{ grid-column:1 / 7; }
  .visit__info{ grid-column:7 / 13; }

  .foot__brand{ grid-column:1 / 13; }
  .foot__col{ grid-column:span 4; }
  .foot__news{ grid-column:span 12; }
}

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__toggle{ display:inline-flex; }
  /* ordering stays one tap away on mobile, just shorter */
  .nav__cta{ padding:.7rem 1rem; }
  .nav__cta-long{ display:none; }
  .nav__cta-short{ display:inline; }
  .nav__end{ gap:.7rem; }

  .secnum{ grid-column:1 / 13 !important; }
  .gallery__intro,.orders__intro{ margin-top:1.2rem; }
  .nav:not(.is-stuck).is-open{ background:var(--cream); color:var(--ink); }

  .mobnav{
    display:block; border-top:1px solid var(--navy-line);
    background:var(--cream); color:var(--ink);
    max-height:calc(100svh - 4.5rem); overflow-y:auto;
  }
  .mobnav[hidden]{ display:none; }
  .mobnav__list{
    width:min(100% - (var(--pad) * 2),1620px); margin-inline:auto;
    padding-block:1rem;
  }
  .mobnav__list li{
    display:flex; align-items:baseline; gap:1.1rem;
    border-bottom:1px solid var(--navy-line);
  }
  .mobnav__list a{
    flex:1; display:block; padding:1rem 0; text-decoration:none;
    font-family:var(--serif); font-size:var(--step-2);
  }
  .mobnav__num{ font-size:var(--step--1); color:var(--brick); font-variant-numeric:lining-nums; }
  .mobnav__foot{
    width:min(100% - (var(--pad) * 2),1620px); margin-inline:auto;
    padding-block:1.2rem 1.8rem; display:grid; gap:1rem; justify-items:start;
  }
  .mobnav__hours{ font-size:var(--step--1); color:var(--ink-mute); font-variant-numeric:tabular-nums; }
  .mobnav__hours span{ display:inline-block; min-width:4.4rem; letter-spacing:.08em; text-transform:uppercase; }

  .hero{ min-height:92svh; }
  .hero__scrim{ background:linear-gradient(to top, rgba(12,18,26,.94) 8%, rgba(12,18,26,.55) 55%, rgba(12,18,26,.5) 100%); }
  .hero__grid{ align-items:start; }
  .hero__place{ grid-column:1 / 13; }
  .hero__title,.hero__tagline,.hero__intro{ grid-column:1 / 13; }
  .hero__status{
    grid-column:1 / 13; justify-self:start; text-align:left;
    align-items:flex-start; margin-top:2rem;
  }
  .status__next{ text-align:left; }
  .hero__folio{ display:none; }

  .menu__cols{ grid-template-columns:1fr; }
  .menu__fig{ grid-column:1 / 13; }
  .menu__fig img{ max-height:60vh; object-fit:cover; }

  .story__fig--hands{ grid-column:1 / 8; }
  .story__fig--oven{ grid-column:1 / 13; }
  .story__fig--crust{ grid-column:8 / 13; align-self:end; }
  .story__text{ grid-column:1 / 13; }
  .principles{ grid-column:1 / 13; }

  /* gallery becomes a horizontal contact sheet */
  .gallery__grid{
    display:flex; gap:var(--gap);
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; padding-bottom:1rem;
    width:100vw; margin-left:calc(50% - 50vw); padding-inline:var(--pad);
    /* without this, snapping to the first item scrolls the left padding away */
    scroll-padding-inline:var(--pad);
    scrollbar-width:thin;
  }
  .gitem{ flex:none; width:min(74vw,22rem); scroll-snap-align:start; margin-top:0 !important; }
  .gitem__frame{ height:min(74vw,22rem); }
  .gitem img{ width:100%; height:100%; object-fit:cover; }

  .pack{ grid-template-columns:2.4rem 1fr; }
  .pack__price{ grid-column:1 / -1; grid-row:auto; text-align:left; margin-top:.5rem; }
  .pack__price span{ display:inline; font-size:.42em; }
  .pack__price span:first-child{ margin-right:.3rem; }

  .field--half,.field--third{ grid-column:1 / -1; }
  .field--third{ grid-column:span 3; }

  .hours{ grid-column:1 / 13; }
  .visit__info{ grid-column:1 / 13; }

  .foot__col{ grid-column:span 6; }
}

@media (max-width:560px){
  /* hidden, not removed — the label is the button's accessible name */
  .nav__toggle-label{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  .nav__toggle{ padding:.6rem .4rem; }

  .hero__brim{ font-size:clamp(4.2rem,26vw,8rem); }
  .field--third{ grid-column:1 / -1; }
  .visit__info{ grid-template-columns:1fr; }
  .foot__col{ grid-column:1 / 13; }
  .foot__legal{ flex-direction:column; }
  .news__row .btn{ padding:.55rem .9rem; }
  .strip__item{ width:min(62vw,14rem); }
  .strip__item img{ height:min(62vw,14rem); }
}

@media print{
  .nav,.grain,.strip,.hero__media{ display:none !important; }
  body{ background:#fff; color:#000; }
}