@import url("../fonts/fonts.css");

/* ==========================================================================
   FISHERMAN'S — design system
   Lantern light on dark water. The palette is sampled directly from the hero
   video: a very dark, warm sea — 61% of its pixels near black — lit only by
   the amber lanterns on the boat, which give the accent.
   ========================================================================== */

:root{
  /* --- surface ------------------------------------------------------- */
  /* Sampled from the hero video's luminance bands. The lantern footage is
     far darker than the storm was — 61% of its pixels sit at #0A0709 — and
     warm rather than cold (r-b +8.7). */
  --bg:          #0A0706;
  --bg-2:        #100C0A;
  --bg-3:        #181210;
  --bg-raised:   #221A15;

  /* --- ink ----------------------------------------------------------- */
  /* Contrast on --bg / --bg-2 (AA body text needs 4.5:1):
     text 16.8 · dim 9.2 · faint 6.0 · accent 7.3 · accent-deep 5.9 */
  --text:        #F2EADF;
  --text-dim:    #BCAD9B;
  --text-faint:  #998A78;

  /* --- accent -------------------------------------------------------- */
  /* Lantern light, measured off the flame cores. Named by role, not by
     colour — this is the third palette and renaming tokens each time is
     how stale names end up lying about what they hold. */
  --accent:      #CA9151;
  --accent-lit:  #E0B272;
  --accent-deep: #B87F45;
  --ink:         #0A0706;   /* type sitting on an accent fill */

  /* --- lines --------------------------------------------------------- */
  --line:        rgba(202,145,81,.26);
  --line-soft:   rgba(242,234,223,.11);

  /* --- type ---------------------------------------------------------- */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.08rem);
  --step-1:  clamp(1.15rem, 1.08rem + .35vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + .9vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3.2rem);
  --step-4:  clamp(2.6rem, 1.8rem + 3.6vw, 5.2rem);

  /* --- layout -------------------------------------------------------- */
  --wrap: 1240px;
  --gut:  clamp(1.25rem, 4vw, 2.5rem);
  --sect: clamp(4.5rem, 10vh, 9rem);
  --hdr:      clamp(92px, 7.5vw, 122px);   /* at rest */
  --hdr-min:  clamp(72px, 5.5vw, 88px);    /* condensed after scroll */

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

/* ==========================================================================
   reset
   ========================================================================== */
*,*::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(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:var(--step-0);
  font-weight:300;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* height:auto is load-bearing — without it the width/height attributes on
   <img> win over aspect-ratio and every image renders at natural height. */
img,svg,video{ display:block; max-width:100%; height:auto; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:400; line-height:1.08; letter-spacing:-.015em; }
h1{ font-size:var(--step-4); }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-2); }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; }

::selection{ background:var(--accent); color:var(--ink); }

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

/* ==========================================================================
   grain — sits over everything, gives the flat dark some tooth and
   disguises the softness of the low-resolution source photography
   ========================================================================== */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9999;
  opacity:.5;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* ==========================================================================
   layout helpers
   ========================================================================== */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:820px; }
.section{ padding-block:var(--sect); position:relative; }
.section--alt{ background:var(--bg-2); }
.section--deep{ background:linear-gradient(180deg,var(--bg) 0%,var(--bg-3) 100%); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--ink); padding:.7rem 1.2rem; font-weight:500;
}
.skip:focus{ left:.5rem; top:calc(var(--cbar) + .5rem); }

/* --- eyebrow / small caps label -------------------------------------- */
/* Used on <h2> as well as <p>, so it must reset the heading font itself. */
.eyebrow{
  font-family:var(--body);
  font-weight:500;
  line-height:1.5;
  font-size:var(--step--1);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.9rem;
}
.eyebrow::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,var(--line),transparent);
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ display:none; }

.lede{ font-size:var(--step-1); color:var(--text-dim); font-weight:300; }

/* --- rule -------------------------------------------------------------- */
.rule{ border:0; height:1px; background:var(--line-soft); margin:0; }

/* ==========================================================================
   THE WATERLINE — the site's signature
   Lifted from the restaurant's own hand-painted boat mural: the stretch of
   water either side of the sign board, crossfaded into one continuous band.
   It is not the logo, so repeating it doesn't dilute the mark; it is theirs,
   so nobody else's site can carry it. Warmed to sit under the lantern
   light, with just enough of its painted teal left to read as water.
   One instance per page, directly above the footer.
   ========================================================================== */
.welle{
  width:100%;
  margin-top:clamp(3rem,7vh,5rem);
  line-height:0;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.welle img{
  width:100%; height:auto;
  opacity:.66;
  /* Warmed toward lantern light; the painted teal survives underneath. */
  filter:saturate(.80) sepia(.16) hue-rotate(-8deg) brightness(.78) contrast(1.14);
}
.welle--tight{ margin-top:0; }

/* ==========================================================================
   buttons
   ========================================================================== */
.btn{
  --btn-c: var(--text);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.95em 2.1em;
  font-family:var(--body); font-size:var(--step--1); font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; text-decoration:none;
  color:var(--btn-c);
  background:transparent;
  border:1px solid currentColor;
  cursor:pointer;
  transition:background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.btn:hover,.btn:focus-visible{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.btn--accent{ --btn-c: var(--accent); }
.btn--solid{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.btn--solid:hover,.btn--solid:focus-visible{ background:var(--accent-lit); border-color:var(--accent-lit); }
.btn--sm{ padding:.7em 1.4em; letter-spacing:.13em; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  color:var(--accent); text-decoration:none;
  font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), gap .25s var(--ease);
}
.link-arrow:hover,.link-arrow:focus-visible{ border-color:var(--accent); gap:.9em; }

/* ==========================================================================
   concept-study notice
   This site is a portfolio piece for a restaurant that did not commission it,
   so it has to say so everywhere, permanently, without being asked.

   It sits above the fixed header rather than in the flow, because the header
   is position:fixed and would cover anything placed before it. --cbar is the
   height both agree on; nothing measures at runtime, so this holds with
   JavaScript off. Keep the copy short enough to fit --cbar — the full
   statement lives in the footer and the Impressum, where there is room.
   ========================================================================== */
:root{ --cbar:2.5rem; }

.conceptbar{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:90;
  min-height:var(--cbar);
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:.2rem 1rem;
  padding:.4rem var(--gut);
  /* Deliberately not the site palette: this band is not part of the design
     being shown, and should not read as though it were. */
  background:#F2EADF; color:#171310;
  font-size:.78rem; line-height:1.3; text-align:center;
}
.conceptbar p{ margin:0; }
.conceptbar strong{ font-weight:600; }
.conceptbar a{
  color:#171310; text-decoration:underline; text-underline-offset:2px;
  white-space:nowrap;
}
.conceptbar a:hover,.conceptbar a:focus-visible{ text-decoration-thickness:2px; }

/* --cbar has to clear the *longest* rendering, which is the German copy
   wrapping to three lines on a narrow phone — 4.9rem measured at 360px.
   If this copy is ever reworded, re-measure: the header is positioned from
   this number and will be overlapped if the text outgrows it. */
@media (max-width:640px){
  :root{ --cbar:4.9rem; }
  .conceptbar{ font-size:.72rem; padding-block:.35rem; }
}

/* The full statement, above the footer's copyright row. */
.ftr__concept{
  margin:0 0 1.6rem; padding-top:1.6rem;
  border-top:1px solid var(--line-soft);
  max-width:80ch;
  font-size:var(--step--1); color:var(--text-faint);
}

/* A contact detail with its href removed: still readable, no longer an
   action. Reset the affordances the anchor rules give it. */
a.is-inert{
  cursor:default; text-decoration:none; border-bottom:0;
  color:inherit;
}

/* ==========================================================================
   header
   ========================================================================== */
.hdr{
  position:fixed; inset-block-start:var(--cbar); inset-inline:0; z-index:80;
  height:var(--hdr);
  display:flex; align-items:center;
  transition:height .4s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
/* Condenses once you're reading, so the wordmark can be generous at rest
   without permanently eating the viewport. */
.hdr.is-solid{ height:var(--hdr-min); }
.hdr__in{ display:flex; align-items:center; gap:1.5rem; width:100%; }
.hdr.is-solid,
body:not(.has-hero) .hdr{
  background:rgba(10,7,6,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
}

/* Stacked lockup: the name carries the weight, "sushi & bar" sits under it
   as a tracked-out gold rule rather than competing on the same line. */
.brand{
  display:flex; flex-direction:column; align-items:flex-start; gap:.28em;
  text-decoration:none; margin-inline-end:auto; line-height:1;
}
.brand__name{
  font-family:var(--display);
  font-size:clamp(1.45rem, 1.05rem + 1.35vw, 2.35rem);
  font-weight:600;
  letter-spacing:.14em;
  color:var(--text);
  line-height:1;
  transition:font-size .4s var(--ease), color .25s var(--ease);
}
.brand:hover .brand__name{ color:var(--accent-lit); }
.hdr.is-solid .brand__name{ font-size:clamp(1.2rem, .95rem + .8vw, 1.7rem); }
.brand__sub{
  font-size:clamp(.56rem, .5rem + .18vw, .72rem);
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
  padding-inline-start:.14em;   /* optically aligns under the F */
}

.nav{ display:flex; align-items:center; gap:2rem; }
.nav a{
  text-decoration:none; color:var(--text-dim);
  font-size:var(--step--1); letter-spacing:.15em; text-transform:uppercase; font-weight:400;
  position:relative; padding-block:.35rem;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--accent); transition:width .3s var(--ease);
}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current="page"]{ color:var(--text); }
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{ width:100%; }

.lang{ display:flex; align-items:center; gap:.5rem; font-size:var(--step--1); letter-spacing:.1em; }
.lang button{
  background:none; border:0; padding:.2rem .1rem; cursor:pointer;
  color:var(--text-faint); font:inherit; letter-spacing:inherit; text-transform:uppercase;
  transition:color .25s var(--ease);
}
.lang button[aria-pressed="true"]{ color:var(--accent); }
.lang button:hover{ color:var(--text); }
.lang span{ color:var(--text-faint); }

.burger{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; color:var(--text);
}
.burger span{ display:block; width:22px; height:1px; background:currentColor; position:relative; transition:background .2s; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:22px; height:1px; background:currentColor;
  transition:transform .3s var(--ease);
}
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }

/* --- mobile drawer ---------------------------------------------------- */
.drawer{
  position:fixed; inset:0; z-index:79;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.drawer.is-open{ opacity:1; visibility:visible; transform:none; }
.drawer a{
  font-family:var(--display); font-size:var(--step-2); color:var(--text);
  text-decoration:none; padding:.5rem 1rem;
}
.drawer a:hover{ color:var(--accent); }
.drawer .lang{ margin-top:2.5rem; }

/* ==========================================================================
   hero
   ========================================================================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--bg);
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 60%; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,7,6,.72) 0%, rgba(10,7,6,.22) 38%, rgba(10,7,6,.86) 82%, var(--bg) 100%),
    radial-gradient(120% 85% at 50% 40%, transparent 30%, rgba(10,7,6,.6) 100%);
}
/* warm the photograph toward candlelight */
.hero__media img{ filter:saturate(.78) contrast(1.08) brightness(.80); }

.hero__in{ position:relative; z-index:2; width:100%; padding-bottom:clamp(3.5rem,9vh,7rem); padding-top:calc(var(--cbar) + var(--hdr) + 3rem); }

/* ==========================================================================
   FILM HERO — the whole first screen is the video; the wordmark is the
   only thing on it. The video already contains the painted boat and its
   sign board, so overlaying the boat artwork would be boat on boat: the
   mark here is typographic.
   ========================================================================== */
.hero--film{ align-items:center; text-align:center; }
.hero--film .hero__media video{
  width:100%; height:100%; object-fit:cover; object-position:center;
  /* Darkened enough that the wordmark sits cleanly on top, not so far
     that the storm stops reading. */
  filter:brightness(.92) contrast(1.04) saturate(1.02);
}
.hero--film .hero__scrim{
  background:
    /* A soft pool of shadow directly behind the type block. Without it the
       nav links land on the boat's own lit sign board and lose their
       contrast against it. */
    radial-gradient(58% 46% at 50% 56%, rgba(10,7,6,.72) 0%, rgba(10,7,6,.30) 64%, transparent 100%),
    /* edge vignette */
    radial-gradient(92% 74% at 50% 46%, transparent 38%, rgba(10,7,6,.62) 100%),
    /* top scrim for the header, bottom fade into the page */
    linear-gradient(180deg, rgba(10,7,6,.74) 0%, transparent 26%, transparent 60%, var(--bg) 100%);
}
.hero--film .hero__in{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.6rem,4vh,2.8rem);
  padding-block:calc(var(--cbar) + var(--hdr) + 2rem) clamp(5rem,12vh,8rem);
}

.filmmark{ display:flex; flex-direction:column; align-items:center; gap:.55em; margin:0; }
.filmmark__name{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.6rem, 1.1rem + 7.6vw, 8rem);
  line-height:.95; letter-spacing:.06em;
  color:var(--text);
  text-shadow:0 2px 40px rgba(10,7,6,.78);
}
.filmmark__sub{
  font-family:var(--body); font-weight:500;
  font-size:clamp(.66rem, .55rem + .5vw, 1rem);
  letter-spacing:.62em; text-transform:uppercase;
  color:var(--accent-lit);
  padding-inline-start:.62em;
  text-shadow:0 1px 20px rgba(10,7,6,.88);
}

.filmnav{ display:flex; align-items:center; gap:clamp(1.1rem,3vw,2.2rem); }
.filmnav a{
  font-family:var(--body); text-decoration:none;
  font-size:clamp(.8rem,.72rem+.3vw,1rem);
  letter-spacing:.24em; text-transform:uppercase; font-weight:500;
  color:var(--text);
  padding-block:.4rem; position:relative;
  text-shadow:0 1px 18px rgba(10,7,6,.82);
}
.filmnav a::after{
  content:""; position:absolute; left:50%; bottom:0; width:0; height:1px;
  background:var(--accent-lit); transition:width .35s var(--ease), left .35s var(--ease);
}
.filmnav a:hover::after,.filmnav a:focus-visible::after{ width:100%; left:0; }
.filmnav__sep{ width:1px; height:1.1em; background:var(--line-soft); }

.filmcta{
  font-family:var(--body); text-decoration:none;
  font-size:var(--step--1); letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  color:var(--text-dim);
  border-bottom:1px solid rgba(242,234,223,.26);
  padding-bottom:.35rem;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.filmcta:hover,.filmcta:focus-visible{ color:var(--accent-lit); border-color:var(--accent-lit); }

@media (max-width:600px){
  .filmmark__sub{ letter-spacing:.42em; padding-inline-start:.42em; }
  .filmnav{ flex-direction:column; gap:.8rem; }
  .filmnav__sep{ width:2.5rem; height:1px; }
}
/* Autoplay is blocked in iOS Low Power Mode and under reduced-motion, so the
   poster frame has to stand on its own — it already does. */
@media (prefers-reduced-motion: reduce){
  .hero--film .hero__media video{ display:none; }
  .hero--film .hero__media{
    background:url("../video/poster.jpg") center/cover no-repeat;
    filter:brightness(.92) contrast(1.04) saturate(1.02);
  }
}
.hero__kicker{
  font-size:var(--step--1); letter-spacing:.34em; text-transform:uppercase;
  color:var(--accent); margin:0 0 1.6rem; font-weight:500;
}
.hero h1{
  font-size:clamp(2.9rem, 1.4rem + 6.4vw, 7rem);
  font-weight:300; line-height:.92; letter-spacing:-.03em;
  margin:0 0 1.4rem; max-width:14ch;
}
.hero h1 em{ font-style:italic; color:var(--accent-lit); }
.hero__lede{ font-size:var(--step-1); color:var(--text-dim); max-width:44ch; margin-bottom:2.4rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

/* One boat on the site, and it lives here — on flat dark ground where it
   reads as artwork rather than as a watermark laid over a photograph. */
.boatmark{
  display:block;
  width:clamp(200px, 26vw, 420px);
  margin-inline:auto;
  opacity:.5;
  filter:saturate(.65) brightness(.9);
  pointer-events:none;
  animation:drift 13s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) rotate(-1.6deg); }
  to  { transform:translate3d(-14px,-16px,0) rotate(1.6deg); }
}

.scrollcue{
  position:absolute; right:var(--gut); bottom:2.2rem; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--text-faint);
}
.scrollcue i{ display:block; width:1px; height:44px; background:linear-gradient(180deg,var(--accent),transparent); }

/* ==========================================================================
   page head (inner pages)
   ========================================================================== */
.pagehead{
  padding-top:calc(var(--cbar) + var(--hdr) + clamp(3.5rem,9vh,6.5rem));
  padding-bottom:clamp(2.5rem,6vh,4.5rem);
  border-bottom:1px solid var(--line-soft);
}
.pagehead h1{ font-size:var(--step-4); font-weight:300; letter-spacing:-.028em; }
.pagehead .lede{ margin-top:1.2rem; max-width:52ch; }

/* ==========================================================================
   rooms — wide landscape panels, alternating. Built for the photography
   that actually exists (all of it is landscape), not for portrait crops.
   ========================================================================== */
.room{
  display:grid; gap:clamp(1.6rem,4vw,4rem); align-items:center;
  grid-template-columns:1fr 1fr;
  padding-block:clamp(2rem,5vh,4rem);
}
.room + .room{ border-top:1px solid var(--line-soft); }
.room:nth-child(even) .room__media{ order:2; }
.room__media{ position:relative; overflow:hidden; }
.room__media img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  filter:saturate(.88) brightness(.88) contrast(1.05);
  transition:transform .9s var(--ease), filter .6s var(--ease);
}
.room:hover .room__media img{ transform:scale(1.035); filter:saturate(1) brightness(1) contrast(1.02); }
.room__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(202,145,81,.10), transparent 55%);
  pointer-events:none;
}

/* --- night grade -------------------------------------------------------
   Half the photography is bright midday with a blue sky; the rest is warm
   candlelight. Dropped straight onto a near-black page the daylight frames
   read as glowing rectangles. This warm multiply layer sits them all in the
   same evening. Add .is-daylight to the offenders for a heavier dose.
   --------------------------------------------------------------------- */
.room__media::before,
.bleed::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:multiply;
  background:linear-gradient(180deg, rgba(54,34,14,.42), rgba(14,9,6,.60));
}
.room__media.is-daylight img,
.bleed.is-daylight img{ filter:saturate(.66) brightness(.80) contrast(1.10) sepia(.18) hue-rotate(-6deg); }
.room:hover .room__media.is-daylight img{ filter:saturate(.78) brightness(.88) contrast(1.06) sepia(.10); }
.bleed{ isolation:isolate; }
.room__n{
  font-family:var(--display); font-size:var(--step--1); letter-spacing:.2em;
  color:var(--accent); display:block; margin-bottom:.9rem;
}
.room h3{ margin-bottom:.9rem; font-weight:300; }
.room p{ color:var(--text-dim); max-width:46ch; }

/* ==========================================================================
   feature strip / full-bleed image
   ========================================================================== */
.bleed{ position:relative; width:100vw; margin-inline:calc(50% - 50vw); overflow:hidden; }
.bleed img{ width:100%; height:clamp(320px,52vh,620px); object-fit:cover; filter:saturate(.85) brightness(.72) contrast(1.06); }
.bleed__cap{
  position:absolute; inset:auto 0 0 0; padding:var(--gut);
  background:linear-gradient(0deg, rgba(10,7,6,.9), transparent);
}

/* ==========================================================================
   story
   ========================================================================== */
.story{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.story__body{ font-size:var(--step-1); color:var(--text-dim); font-weight:300; }
.story__body p + p{ margin-top:1.2em; }
.story__body strong{ color:var(--text); font-weight:400; }
.dropcap::first-letter{
  font-family:var(--display); font-size:3.4em; line-height:.82; float:left;
  padding-inline-end:.12em; padding-block-start:.06em; color:var(--accent);
  font-weight:300;
}

/* ==========================================================================
   info columns
   ========================================================================== */
.info{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:clamp(1.6rem,4vw,3rem); }
.info h3{
  font-family:var(--body); font-size:var(--step--1); font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:.9rem;
}
.info p,.info a{ color:var(--text-dim); text-decoration:none; }
.info a:hover{ color:var(--accent); }
.info dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.3rem 1.2rem; }
.info dt{ color:var(--text-faint); }
.info dd{ margin:0; color:var(--text); }

/* ==========================================================================
   menu page
   ========================================================================== */
.menubar{
  /* pinned to the condensed height — by the time this sticks, the header
     has already shrunk, so --hdr would leave a gap above it */
  position:sticky; top:calc(var(--cbar) + var(--hdr-min)); z-index:40;
  background:rgba(10,7,6,.95);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  padding-block:.75rem;
}
.menubar__in{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.menubar__jump{ display:flex; gap:.35rem; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0; }
.menubar__jump::-webkit-scrollbar{ display:none; }
.menubar__jump a{
  flex:none; text-decoration:none; white-space:nowrap;
  font-size:var(--step--1); letter-spacing:.08em;
  color:var(--text-dim); padding:.4rem .75rem; border:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.menubar__jump a:hover,.menubar__jump a.is-active{ color:var(--accent); border-color:var(--line); }

.pricetoggle{ display:flex; align-items:center; gap:.5rem; flex:none; }
.pricetoggle__label{ font-size:var(--step--1); color:var(--text-faint); letter-spacing:.1em; text-transform:uppercase; }
.seg{ display:flex; border:1px solid var(--line); }
.seg button{
  background:none; border:0; cursor:pointer; font:inherit;
  font-size:var(--step--1); letter-spacing:.08em;
  padding:.4rem .9rem; color:var(--text-dim);
  transition:background .22s, color .22s;
}
.seg button[aria-pressed="true"]{ background:var(--accent); color:var(--ink); }

.mcat{ padding-block:clamp(2.2rem,5vh,3.6rem); scroll-margin-top:calc(var(--cbar) + var(--hdr-min) + 68px); }
.mcat + .mcat{ border-top:1px solid var(--line-soft); }
.mcat__h{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1.8rem; }
.mcat__h h2{ font-size:var(--step-2); font-weight:300; }
.mcat__h span{ font-size:var(--step--1); color:var(--text-faint); letter-spacing:.14em; }

.dish{
  display:grid; grid-template-columns:3.2rem 1fr auto auto;
  gap:.4rem 1rem; align-items:baseline;
  padding-block:1.05rem;
  border-bottom:1px solid rgba(242,234,223,.07);
}
.dish:last-child{ border-bottom:0; }
.dish__n{ font-family:var(--display); color:var(--accent-deep); font-size:.95rem; letter-spacing:.04em; }
.dish__name{ font-size:var(--step-0); color:var(--text); font-weight:400; }
.dish__desc{ grid-column:2/-1; color:var(--text-faint); font-size:var(--step--1); line-height:1.6; margin-top:.15rem; }
.dish__price{ font-family:var(--display); font-size:var(--step-0); color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums; }
.dish__price small{ display:block; font-family:var(--body); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.dish__add{
  background:none; border:1px solid var(--line); color:var(--accent);
  width:2.1rem; height:2.1rem; cursor:pointer; font-size:1.1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s, border-color .2s, transform .12s;
}
.dish__add:hover{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
.dish__add:active{ transform:scale(.9); }
.dish__add.is-added{ background:var(--accent); color:var(--ink); border-color:var(--accent); }
.dish__na{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); white-space:nowrap; }
.dish.is-hidden{ display:none; }

.note{
  border-left:2px solid var(--accent-deep);
  padding:1rem 0 1rem 1.3rem;
  color:var(--text-dim); font-size:var(--step--1);
}
.note strong{ color:var(--text); display:block; margin-bottom:.3rem; font-weight:500; letter-spacing:.04em; }

/* ==========================================================================
   cart
   ========================================================================== */
.cartbtn{
  position:fixed; z-index:60; right:var(--gut); bottom:var(--gut);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9em 1.5em; background:var(--accent); color:var(--ink);
  border:0; cursor:pointer; font-family:var(--body); font-weight:600;
  font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  transform:translateY(140%); transition:transform .4s var(--ease), background .25s;
}
.cartbtn.is-visible{ transform:none; }
/* keep the sticky order bar from covering the last dish */
body.has-cart{ padding-bottom:5.5rem; }
.cartbtn:hover{ background:var(--accent-lit); }
.cartbtn__n{
  background:var(--ink); color:var(--accent); border-radius:50%;
  width:1.5rem; height:1.5rem; display:grid; place-items:center; font-size:.72rem;
}

.drw{
  position:fixed; inset-block:0; inset-inline-end:0; z-index:90;
  width:min(430px,100%); background:var(--bg-2);
  border-left:1px solid var(--line-soft);
  display:flex; flex-direction:column;
  transform:translateX(101%); transition:transform .42s var(--ease);
}
.drw.is-open{ transform:none; }
.drw__hd{ display:flex; align-items:center; justify-content:space-between; padding:1.4rem var(--gut); border-bottom:1px solid var(--line-soft); }
.drw__hd h2{ font-size:var(--step-1); font-weight:400; }
.drw__x{ background:none; border:0; color:var(--text-dim); font-size:1.6rem; line-height:1; cursor:pointer; padding:.2rem .4rem; }
.drw__x:hover{ color:var(--accent); }
.drw__body{ flex:1; overflow-y:auto; padding:1.2rem var(--gut); }
.drw__ft{ border-top:1px solid var(--line-soft); padding:1.2rem var(--gut) calc(1.2rem + env(safe-area-inset-bottom)); display:grid; gap:.85rem; }

.citem{ display:grid; grid-template-columns:1fr auto; gap:.2rem .8rem; padding-block:.85rem; border-bottom:1px solid rgba(242,234,223,.08); }
.citem__nm{ font-size:var(--step--1); color:var(--text); }
.citem__nm b{ color:var(--accent-deep); font-family:var(--display); font-weight:400; margin-right:.4rem; }
.citem__pr{ font-family:var(--display); font-variant-numeric:tabular-nums; }
.citem__qty{ display:flex; align-items:center; gap:.55rem; grid-column:1/-1; margin-top:.35rem; }
.citem__qty button{
  width:1.7rem; height:1.7rem; background:none; border:1px solid var(--line);
  color:var(--accent); cursor:pointer; line-height:1;
  display:grid; place-items:center;
}
.citem__qty button:hover{ background:var(--accent); color:var(--ink); }
.citem__qty span{ min-width:1.4rem; text-align:center; font-variant-numeric:tabular-nums; }

.ctotal{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--display); font-size:var(--step-1); }
.cempty{ color:var(--text-faint); text-align:center; padding:3rem 0; }
.cnote{ font-size:.74rem; color:var(--text-faint); line-height:1.55; }

.scrim{
  position:fixed; inset:0; z-index:85; background:rgba(4,3,2,.76);
  opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s;
  backdrop-filter:blur(2px);
}
.scrim.is-on{ opacity:1; visibility:visible; }

/* ==========================================================================
   forms
   ========================================================================== */
.field{ display:grid; gap:.4rem; }
.field label{ font-size:var(--step--1); letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }
.field input,.field select,.field textarea{
  font:inherit; font-size:var(--step-0); color:var(--text);
  background:var(--bg-3); border:1px solid var(--line-soft);
  padding:.8rem .95rem; width:100%;
  transition:border-color .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); outline:none; }
.field textarea{ min-height:110px; resize:vertical; }
.formgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.1rem; }

/* ==========================================================================
   map — consent gate (no Google request before the user agrees)
   ========================================================================== */
.mapbox{ position:relative; background:var(--bg-3); border:1px solid var(--line-soft); }
.mapbox iframe{ width:100%; height:clamp(300px,42vh,440px); border:0; display:block; filter:grayscale(1) invert(.92) contrast(.88) hue-rotate(180deg) saturate(.5); }
.mapgate{ padding:clamp(2rem,6vw,3.5rem); text-align:center; display:grid; gap:1rem; justify-items:center; }
.mapgate p{ color:var(--text-dim); max-width:46ch; font-size:var(--step--1); }

/* ==========================================================================
   footer
   ========================================================================== */
.ftr{ background:var(--bg); border-top:1px solid var(--line-soft); padding-block:clamp(3rem,7vh,5rem) 1.5rem; }
.ftr__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(1.8rem,4vw,3rem); }
.ftr__brand .brand__name{ font-size:1.3rem; }
.ftr__brand p{ color:var(--text-faint); font-size:var(--step--1); margin-top:1rem; max-width:30ch; }
.ftr h3{
  font-family:var(--body); font-size:var(--step--1); font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem;
}
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.ftr a{ color:var(--text-dim); text-decoration:none; font-size:var(--step--1); }
.ftr a:hover{ color:var(--accent); }
.ftr__social{ display:flex; gap:.9rem; margin-top:.4rem; }
.ftr__social a{ width:38px; height:38px; border:1px solid var(--line); display:grid; place-items:center; color:var(--text-dim); }
.ftr__social a:hover{ color:var(--ink); background:var(--accent); border-color:var(--accent); }
.ftr__btm{
  margin-top:clamp(2.5rem,5vh,3.5rem); padding-top:1.4rem; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center;
  font-size:.75rem; color:var(--text-faint);
}
.ftr__btm a{ font-size:.75rem; }

/* ==========================================================================
   cookie bar
   ========================================================================== */
.cookie{
  position:fixed; z-index:95; inset-inline:0; inset-block-end:0;
  background:var(--bg-raised); border-top:1px solid var(--line);
  padding:1rem var(--gut) calc(1rem + env(safe-area-inset-bottom));
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  transform:translateY(110%); transition:transform .45s var(--ease);
}
.cookie.is-on{ transform:none; }
.cookie p{ margin:0; flex:1; min-width:240px; font-size:var(--step--1); color:var(--text-dim); }

/* ==========================================================================
   legal pages
   ========================================================================== */
/* .legal shares its element with .wrap, whose auto margins would otherwise
   centre the text column away from the page heading above it. */
.legal{ max-width:70ch; margin-inline:0; }

/* The provider is established in Spain, so the governing statute is Spanish
   while the readership is German. The Spanish term is carried alongside the
   German heading — quieter, so it reads as a citation rather than a second
   heading competing with the first. */
.legal__es{
  color:var(--text-faint); font-weight:400;
  font-size:.8em; white-space:nowrap;
}
.legal h2{ font-size:var(--step-2); font-weight:300; margin-top:2.6rem; margin-bottom:.9rem; }
.legal h3{ font-size:var(--step-1); font-weight:400; margin-top:1.8rem; margin-bottom:.6rem; }
.legal p,.legal li{ color:var(--text-dim); }
.legal ul{ padding-left:1.2rem; }
.legal .todo{
  background:var(--bg-3); border-left:2px solid var(--accent);
  padding:1rem 1.2rem; color:var(--accent-lit); font-size:var(--step--1);
}

/* ==========================================================================
   reveal on scroll
   ========================================================================== */
/* There used to be a blanket fade-up on 35 elements across the site. It is
   the exact "everything slides up on scroll" pattern that reads as stock, so
   it is gone. What is left is one orchestrated arrival in the hero, and
   photographs that settle rather than slide. Text simply is where it is.

   .rv is kept as an inert no-op so any stray class in the markup cannot
   hide content. */
.rv{ opacity:1; transform:none; }

/* --- the one orchestrated moment: the hero, once, on load --------------- */
@keyframes heroRise{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:none; }
}
@keyframes heroTrack{           /* the sub-line settles into its tracking */
  from{ opacity:0; letter-spacing:1.05em; }
  to  { opacity:1; letter-spacing:.62em; }
}
@keyframes heroFade{ from{ opacity:0; } to{ opacity:1; } }

.hero--film .filmmark__name{ animation:heroRise  1100ms var(--ease) both; }
.hero--film .filmmark__sub { animation:heroTrack  900ms var(--ease) 460ms both; }
.hero--film .filmnav       { animation:heroFade   700ms var(--ease) 820ms both; }
.hero--film .filmcta       { animation:heroFade   700ms var(--ease) 980ms both; }
.hero--film .scrollcue     { animation:heroFade   700ms var(--ease) 1200ms both; }

/* --- photographs settle into frame -------------------------------------
   The hiding is armed BY the script, not merely scoped to it. CSS only
   hides an image once JS has added .is-armed to its wrapper — which the
   same script is then committed to clearing.

   A `.js` body class was not enough: it survives a stale cached script that
   no longer knows about this class, which then never reveals anything and
   leaves every photograph invisible. Requiring the arming class means any
   script that is missing, stale or broken simply leaves the photos on
   screen. Never let CSS hide what only JS can restore. */
.reveal{ overflow:hidden; }
.reveal.is-armed img{
  opacity:0; transform:scale(1.06);
  transition:opacity 900ms var(--ease), transform 1400ms var(--ease);
}
.reveal.is-armed.is-in img{ opacity:1; transform:none; }
/* the room hover zoom must win once the reveal has finished */
.room:hover .room__media.is-in img{ transform:scale(1.035); }

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width:960px){
  :root{ --hdr:78px; --hdr-min:64px; }
  .nav{ display:none; }
  .hdr .lang{ display:none; }
  .burger{ display:flex; }
  .story{ grid-template-columns:1fr; gap:1.6rem; }
  .room{ grid-template-columns:1fr; }
  .room:nth-child(even) .room__media{ order:0; }
  .ftr__top{ grid-template-columns:1fr 1fr; }
  .boatmark{ width:min(62vw,300px); opacity:.4; }
}
@media (max-width:600px){
  .ftr__top{ grid-template-columns:1fr; }
  .dish{ grid-template-columns:2.6rem 1fr auto; }
  .dish__add{ grid-column:3; }
  .dish__price{ grid-column:2/3; justify-self:end; }
  .menubar__in{ gap:.6rem; }
  .pricetoggle{ width:100%; justify-content:space-between; }
  .cartbtn{ left:var(--gut); right:var(--gut); justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
  .boatmark{ animation:none; }
  /* the hero arrival and the photo settle must land, not animate */
  .hero--film .filmmark__name,
  .hero--film .filmmark__sub,
  .hero--film .filmnav,
  .hero--film .filmcta,
  .hero--film .scrollcue{ animation:none; opacity:1; letter-spacing:revert; }
  .reveal.is-armed img{ opacity:1; transform:none; }
}

@media print{
  .hdr,.drawer,.cookie,.cartbtn,.drw,.scrim,.menubar,body::after{ display:none !important; }
  body{ background:#fff; color:#000; }
  .dish{ break-inside:avoid; }
}