/*
Theme Name: HIRO Sushi
Theme URI: https://hiro.id/
Author: purwa
Author URI: https://crazyslug.net/
Description: A Japandi one-page theme for HIRO — a sushi counter in Denpasar, Bali. Warm bone ground, sumi ink, GSAP + Lenis motion that degrades to a complete static page. Ships a Dish post type for the menu list and is built to be extended with Elementor.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hiro-sushi
Tags: one-column, custom-menu, custom-logo, editor-style, featured-images, translation-ready, threaded-comments, block-styles, wide-blocks
*/

/* ═══════════════════════════════════════════════════════════════
   HIRO 廣 — Japandi Sushi, Denpasar
   Design system: warm bone ground, sumi ink, clay & celadon accents.
   Typography: Newsreader (display) × Jost (grotesque).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root{
  color-scheme:dark;   /* native date picker, select and scrollbars follow */

  /* surface — a warm black ramp, darkest last */
  --bone:#100e0c;      /* page ground        */
  --paper:#17140f;     /* raised panels      */
  --oat:#211d17;       /* wells, hover beds  */
  --clay:#2c261e;
  --ash:#4b4239;

  /* ink — warm light */
  --sumi:#080706;      /* deepest ground     */
  --ink:#f2ede4;
  --ink-2:#b0a596;
  --ink-3:#948a7c;

  /* accents, lifted to carry on black */
  --terra:#c08a63;
  --celadon:#93a392;
  --gold:#c9a877;

  /* the one lit scene */
  --daylight:#f2ede4;
  --night:#0d0b09;

  /* type */
  --display:'Newsreader', 'Times New Roman', serif;
  --sans:'Jost', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* fluid scale */
  --step--1:clamp(.78rem,.74rem + .2vw,.86rem);
  --step-0:clamp(1rem,.96rem + .22vw,1.125rem);
  --step-1:clamp(1.15rem,1.05rem + .5vw,1.5rem);
  --step-2:clamp(1.5rem,1.25rem + 1.1vw,2.2rem);
  --h2:clamp(2.2rem,1.5rem + 2.9vw,4.6rem);
  --h1:clamp(3rem,1.1rem + 5.6vw,7.4rem);

  /* rhythm */
  --gut:clamp(1.25rem,4vw,2.5rem);
  --shell:min(1440px, 100% - (var(--gut) * 2));
  --sec:clamp(5rem,10vh + 3vw,9.5rem);

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --slow:1.1s;

  --line:color-mix(in srgb, var(--ink) 14%, transparent);
}

/* ── 2. RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-0);
  font-weight:300;
  line-height:1.62;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
ul{list-style:none}
::selection{background:var(--ink);color:var(--bone)}

:focus-visible{
  outline:1.5px solid var(--terra);
  outline-offset:4px;
  border-radius:2px;
}

/* ── 3. ATMOSPHERE ─────────────────────────────────────────── */
/* the oversized noise plate is clipped by a viewport-locked shell so it can
   never widen the document's scroll width */
.grain{position:fixed;inset:0;z-index:9998;pointer-events:none;overflow:hidden}
.grain::before{
  content:'';position:absolute;inset:-50%;
  opacity:.07;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change:transform;
}
@media (prefers-reduced-motion: no-preference){
  .grain::before{animation:grainShift 8s steps(6) infinite}
}
@keyframes grainShift{
  0%{transform:translate3d(0,0,0)}      16%{transform:translate3d(-2%,-3%,0)}
  33%{transform:translate3d(-4%,2%,0)}  50%{transform:translate3d(2%,-4%,0)}
  66%{transform:translate3d(-2%,3%,0)}  83%{transform:translate3d(3%,1%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* ── 4. TYPOGRAPHY PRIMITIVES ──────────────────────────────── */
.h2{
  font-family:var(--display);
  font-weight:200;
  font-size:var(--h2);
  line-height:1.02;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.h2--wide{max-width:16ch}

.label{
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.label--light{color:var(--ink-3)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-2);font-weight:400;
}
.eyebrow__dot{
  width:5px;height:5px;border-radius:50%;background:var(--terra);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--terra) 16%,transparent);
}

.lede{
  font-family:var(--display);
  font-size:var(--step-2);
  font-weight:200;
  line-height:1.4;
  letter-spacing:-.012em;
  color:var(--ink);
}
.lede em{font-style:normal;font-variant:small-caps;letter-spacing:.06em}
.body{color:var(--ink-2);max-width:62ch}
.body--lead{font-size:var(--step-1);line-height:1.6;max-width:60ch;color:var(--ink-2);font-weight:300}
.jp{font-style:italic;color:var(--terra)}
.muted{color:var(--ink-3)}

.rule{height:1px;background:var(--line);width:100%;transform-origin:left;margin-top:2.4rem}

.shell{width:var(--shell);margin-inline:auto}
.section{padding-block:var(--sec)}

/* ── 5. SPLIT-TEXT ENTRANCE ────────────────────────────────── */
.split .l{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.split .l > i{display:inline-block;font-style:inherit;will-change:transform}
html.motion .split .l > i{transform:translate3d(0,110%,0)}

html.motion .reveal{opacity:0;transform:translate3d(0,26px,0);will-change:transform,opacity}

/* ── 6. BUTTONS ────────────────────────────────────────────── */
.btn{
  --bg:transparent; --fg:var(--ink); --bd:var(--ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.6rem;
  padding:1.15em 2.3em;
  border:1px solid var(--bd);
  border-radius:999px;
  background:var(--bg);
  color:var(--fg);
  font-size:.76rem;font-weight:400;letter-spacing:.19em;text-transform:uppercase;
  line-height:1;cursor:pointer;overflow:hidden;
  isolation:isolate;
  transition:color .55s var(--ease), border-color .55s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transform:translate3d(0,101%,0);
  transition:transform .62s var(--ease-out);
}
.btn__label{position:relative;display:block}
.btn:hover{color:var(--bone);border-color:var(--ink)}
.btn:hover::before{transform:translate3d(0,0,0)}

.btn--solid{--bg:var(--ink);--fg:var(--bone);--bd:var(--ink)}
.btn--solid::before{background:var(--terra)}
.btn--solid:hover{color:var(--bone);border-color:var(--terra)}
.btn--ghost{--bd:var(--line)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--outline{--bd:var(--ink)}
.btn--sm{padding:.85em 1.6em;font-size:.68rem}
.btn--full{width:100%;margin-top:.6rem}

/* magnetic wrapper is handled in JS via transform on the element itself */
.magnetic{will-change:transform}

/* ── 7. LOADER ─────────────────────────────────────────────── */
.loader{
  position:fixed;inset:0;z-index:9990;
  display:grid;place-items:center;
  pointer-events:none;
}
.loader__panel{
  position:absolute;left:0;width:100%;height:50.5%;
  background:var(--paper);will-change:transform;
}
.loader__panel--t{top:0}
.loader__panel--b{bottom:0}
.loader__inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;
  will-change:transform,opacity;
}
.loader__mark{
  font-family:var(--display);font-size:clamp(3.4rem,9vw,6rem);font-weight:200;
  color:var(--ink);line-height:1;
}
.loader__meta{
  display:flex;align-items:baseline;gap:1.1rem;
  font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-3);
}
.loader__count{display:inline-flex;font-variant-numeric:tabular-nums;letter-spacing:.1em}
.loader__count i{font-style:normal}
.loader__bar{width:min(220px,44vw);height:1px;background:var(--line);overflow:hidden}
.loader__bar span{display:block;height:100%;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
html.loaded .loader{display:none}
html.no-js .loader{display:none}

/* ── 8. NAV ───────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:900;
  transition:transform .6s var(--ease-out), background-color .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
  will-change:transform;
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--bone) 72%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  backdrop-filter:blur(18px) saturate(1.1);
  border-bottom-color:var(--line);
}
.nav.is-hidden{transform:translate3d(0,-102%,0)}
.nav__inner{
  width:var(--shell);margin-inline:auto;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem;
  padding-block:clamp(1rem,2.2vh,1.6rem);
}
.nav__brand{display:inline-flex;align-items:center;gap:.66rem}
.nav__glyph{font-family:var(--display);font-size:1.5rem;font-weight:300;line-height:1}
.nav__name{font-size:.82rem;letter-spacing:.42em;font-weight:400}
.nav__links{display:flex;gap:clamp(1.4rem,2vw,2.2rem);justify-self:start;margin-left:clamp(1.5rem,3vw,3rem)}
.nav__link{
  position:relative;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);overflow:hidden;display:inline-block;padding-block:.2em;
}
.nav__link::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out);
}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after{transform:scaleX(1);transform-origin:left}
.nav__right{display:flex;align-items:center;gap:1rem;justify-self:end}

.burger{
  display:none;width:42px;height:42px;background:none;border:1px solid var(--line);
  border-radius:50%;position:relative;cursor:pointer;
}
.burger span{
  position:absolute;left:50%;width:15px;height:1px;background:var(--ink);
  transform:translateX(-50%);transition:transform .45s var(--ease-out),opacity .3s;
}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:23px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateX(-50%) translateY(2.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateX(-50%) translateY(-2.5px) rotate(-45deg)}

/* ── 9. OVERLAY MENU ──────────────────────────────────────── */
.overlay{
  position:fixed;inset:0;z-index:880;
  display:flex;flex-direction:column;justify-content:center;
  /* clear the fixed header so the first link never collides with the brand */
  padding:clamp(6.5rem,15vh,8.5rem) var(--gut) var(--gut);
  visibility:hidden;
}
.overlay__bg{
  position:absolute;inset:0;background:var(--paper);
  transform:translate3d(0,-100%,0);will-change:transform;
}
.overlay__nav{position:relative;display:flex;flex-direction:column;gap:.3rem}
.overlay__link{
  display:flex;align-items:baseline;gap:1.1rem;
  font-family:var(--display);font-size:clamp(2.2rem,11vw,3.6rem);font-weight:200;
  line-height:1.14;letter-spacing:-.02em;
  overflow:hidden;
}
.overlay__link i{font-family:var(--sans);font-size:.66rem;font-style:normal;letter-spacing:.22em;color:var(--ink-3)}
.overlay__link span{display:inline-block;will-change:transform}
.overlay__foot{
  position:relative;margin-top:auto;padding-top:2rem;
  display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
  font-size:.76rem;color:var(--ink-3);line-height:1.6;
  border-top:1px solid var(--line);
}
html.menu-open .overlay{visibility:visible}

/* ── 10. HERO ──────────────────────────────────────────────
   Editorial split: type breathes on the bone ground at left,
   full-bleed photography holds the right edge.
   ─────────────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;min-height:100dvh;
  overflow:hidden;background:var(--paper);
}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 48vw;
  min-height:100svh;min-height:100dvh;
}
.hero__col{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(7rem,16vh,10rem) clamp(5rem,10vh,7rem);
}

.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__wash{
  position:absolute;inset:0;
  background:
    radial-gradient(80% 55% at 40% 8%, #221c15 0%, transparent 62%),
    radial-gradient(90% 70% at 96% 96%, #2a2017 0%, transparent 60%),
    linear-gradient(180deg,var(--paper) 0%,var(--bone) 46%,#0a0907 100%);
}
.hero__bloom{
  position:absolute;left:46%;top:46%;
  width:min(900px,92vw);aspect-ratio:1;
  translate:-50% -50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(198,152,98,.22) 0%, rgba(158,114,68,.10) 36%, rgba(158,114,68,0) 68%);
  filter:blur(6px);
  will-change:transform;
}
.hero__rules{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr)}
.hero__rules i{border-left:1px solid color-mix(in srgb,var(--ink) 5%,transparent)}

.hero__rail{
  position:absolute;top:50%;z-index:4;
  font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;
}
.hero__rail--l{left:calc(var(--gut) * .55);transform:translateY(-50%) rotate(-90deg);transform-origin:left center}
.hero__rail--r{
  right:calc(var(--gut) * .55);transform:translateY(-50%) rotate(90deg);transform-origin:right center;
  color:rgba(242,237,228,.72);
}
@media (max-width:1100px){.hero__rail{display:none}}

.hero__inner{
  position:relative;z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(1.4rem,3vh,2.2rem);
  padding-left:var(--gut);
  padding-right:clamp(1.5rem,4vw,4rem);
  margin-left:max(0px, calc((100vw - 1440px) / 2));
}
.hero__title{
  font-family:var(--display);
  font-size:var(--h1);
  font-weight:200;
  line-height:.94;
  letter-spacing:-.035em;
  max-width:11ch;
  text-wrap:balance;
}
.hero__sub{
  max-width:40ch;font-size:var(--step-1);font-weight:300;line-height:1.55;color:var(--ink-2);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:.6rem}

.scrollcue{
  position:absolute;bottom:clamp(1.6rem,4vh,2.6rem);left:50%;z-index:5;
  translate:-50% 0;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);
}
.scrollcue__line{display:block;width:1px;height:56px;background:var(--line);overflow:hidden;position:relative}
.scrollcue__line i{position:absolute;inset:0;background:var(--ink);transform-origin:top}
@media (prefers-reduced-motion: no-preference){
  .scrollcue__line i{animation:cue 2.3s var(--ease) infinite}
}
@keyframes cue{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ── 11. CONCEPT ───────────────────────────────────────────── */
.concept__grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.72fr);
  gap:clamp(2.5rem,5.5vw,5.5rem);
  align-items:start;
}
.concept__text{display:flex;flex-direction:column;gap:1.55rem}
.concept__text .h2{margin-top:1.1rem;max-width:18ch}
.concept__text .rule{margin-top:.2rem;margin-bottom:.9rem}
.concept__media{position:sticky;top:14vh}


.pillars{display:flex;flex-direction:column;gap:0;margin-top:1.4rem;border-top:1px solid var(--line)}
.pillars li{
  display:grid;grid-template-columns:2.4rem 6.5rem 1fr;align-items:baseline;gap:1rem;
  padding-block:1.15rem;border-bottom:1px solid var(--line);
}
.pillars i{font-family:var(--display);font-style:normal;font-size:1.3rem;color:var(--terra);line-height:1}
.pillars b{font-weight:400;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase}
.pillars span{font-size:var(--step--1);color:var(--ink-3)}

/* ── 12. CRAFT / MENU LIST ─────────────────────────────────── */
.craft{background:linear-gradient(180deg,var(--bone) 0%,var(--paper) 100%);overflow-x:clip}
.craft__head{display:flex;flex-direction:column;gap:1.6rem;max-width:none}
.craft__head .h2{margin-top:.2rem}
.craft__head .body--lead{margin-top:.6rem}

.menulist{position:relative;margin-top:clamp(3rem,7vw,5.5rem);border-top:1px solid var(--line)}
.mitem{
  position:relative;display:grid;
  grid-template-columns:clamp(92px,9.5vw,140px) minmax(0,1fr) auto 3rem;
  align-items:center;gap:clamp(1.1rem,2.6vw,2.4rem);
  padding-block:clamp(1.6rem,3.4vw,2.6rem);
  border-bottom:1px solid var(--line);
  transition:color .5s var(--ease);
}
.mitem::before{
  /* bleed is tied to the gutter so the backdrop can never exceed the viewport */
  content:'';position:absolute;left:calc(var(--gut) * -.6);right:calc(var(--gut) * -.6);top:0;bottom:0;z-index:-1;
  background:color-mix(in srgb,var(--oat) 65%,transparent);
  opacity:0;transform:scaleY(.7);transform-origin:center;
  transition:opacity .5s var(--ease),transform .5s var(--ease-out);
  border-radius:3px;
}
.mitem:hover::before{opacity:1;transform:scaleY(1)}
/* the dish plate, seated at the head of each row */
.mitem__n{
  font-family:var(--display);font-size:.86rem;font-style:italic;color:var(--ink-3);
  letter-spacing:.08em;
}
.mitem__main{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.mitem__title{
  font-family:var(--display);font-weight:200;
  font-size:clamp(1.5rem,3.1vw,2.75rem);line-height:1.05;letter-spacing:-.02em;
  transition:transform .55s var(--ease-out);
}
.mitem:hover .mitem__title{transform:translate3d(10px,0,0)}
.mitem__desc{font-size:var(--step--1);color:var(--ink-3);max-width:52ch;line-height:1.6}
.mitem__price{
  display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;
}
.mitem__price i{font-style:normal;font-size:.86rem;letter-spacing:.06em;color:var(--ink);text-transform:none}
.mitem__arrow{
  justify-self:end;width:2.6rem;height:2.6rem;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--ink-2);
  transition:transform .55s var(--ease-out),background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
}
.mitem__arrow svg{width:15px;height:15px}
.mitem:hover .mitem__arrow{background:var(--ink);border-color:var(--ink);color:var(--bone);transform:rotate(-45deg)}

.craft__cta{margin-top:clamp(2.6rem,6vw,4rem);display:flex;justify-content:center}

/* ── 13. THE SPACE (dark scene) ────────────────────────────── */
.space{
  /* the one lit scene: tokens flip locally so descendants follow */
  position:relative;
  background:var(--daylight);
  --ink:#211d17;
  --ink-2:#4e463c;
  --ink-3:#6b6256;
  --terra:#8a5b3e;
  --gold:#8a6b3f;
  --line:color-mix(in srgb, #211d17 14%, transparent);
  color:var(--ink);
}
.space__pin{
  position:relative;min-height:100svh;display:grid;place-items:center;
  padding-block:clamp(6rem,14vh,10rem);overflow:hidden;
}
.space__bg{position:absolute;inset:0;pointer-events:none}
.space__glow{
  position:absolute;left:50%;top:34%;width:min(1000px,120vw);aspect-ratio:1;
  translate:-50% -50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,253,247,.95) 0%, rgba(240,229,210,.45) 34%, rgba(240,229,210,0) 68%);
  filter:blur(10px);will-change:transform;
}
.space__grid{position:absolute;inset:0;width:var(--shell);margin-inline:auto;display:grid;grid-template-columns:repeat(4,1fr)}
.space__grid i{border-left:1px solid color-mix(in srgb, #211d17 6%, transparent)}
.space__grid i:last-child{border-right:1px solid color-mix(in srgb, #211d17 6%, transparent)}

.space__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.8rem}
.space__title{
  font-family:var(--display);font-weight:200;
  font-size:clamp(2.8rem,8.4vw,8rem);line-height:.96;letter-spacing:-.035em;
  color:var(--ink);
}
.space__body{max-width:60ch;color:var(--ink-2);font-weight:300;font-size:var(--step-1);line-height:1.62}
.space__body em{font-style:normal;font-variant:small-caps;letter-spacing:.06em;color:var(--ink)}
.space__specs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,3vw,2.4rem);width:100%;max-width:900px;margin-top:2.4rem;
  padding-top:2rem;border-top:1px solid var(--line);
}
.space__specs li{display:flex;flex-direction:column;gap:.5rem;align-items:center}
.space__specs b{font-family:var(--display);font-weight:200;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--gold)}
.space__specs span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}

/* ── 14. VISIT + RESERVE ───────────────────────────────────── */
.visit{background:linear-gradient(180deg,var(--paper) 0%,var(--bone) 40%)}
.visit__head{display:flex;flex-direction:column;gap:1.4rem;margin-bottom:clamp(3rem,7vw,5rem)}
.visit__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,6vw,5rem);align-items:start}

.details{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.details__row{display:grid;grid-template-columns:7.5rem 1fr;gap:1.4rem;padding-block:1.6rem;border-bottom:1px solid var(--line)}
.details dt{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);padding-top:.3rem}
.details dd{font-size:var(--step-0);line-height:1.7;color:var(--ink)}
.details dd a{position:relative;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .5s var(--ease-out)}
.details dd a:hover{background-size:100% 1px}

.mapcard{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:3px;
  padding:clamp(1.5rem,3vw,2.4rem);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.8);
}
.mapcard__title{
  font-family:var(--display);font-weight:200;
  font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.06;letter-spacing:-.025em;
  margin-block:1rem 1.8rem;
}

.mapcard__frame{
  position:relative;aspect-ratio:4/3;
  overflow:hidden;border-radius:2px;
  background:var(--oat);
  border:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.mapcard__map{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  /* Google's embed ships light; invert then re-warm it onto the palette */
  filter:invert(1) hue-rotate(180deg) saturate(.42) brightness(1.04) contrast(.96) sepia(.16);
}

/* the veil stops the embed swallowing page scroll until it is asked to */
.mapveil{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
  background:color-mix(in srgb, var(--bone) 42%, transparent);
  -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);
  border:0;cursor:pointer;
  transition:opacity .5s var(--ease), background-color .5s var(--ease);
}
.mapveil__pin{
  width:10px;height:10px;border-radius:50%;
  background:var(--terra);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--terra) 22%, transparent),
             0 0 0 14px color-mix(in srgb, var(--terra) 10%, transparent);
}
.mapveil__hint{
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink);
}
.mapveil:hover{background:color-mix(in srgb, var(--bone) 26%, transparent)}
.mapcard__frame.is-live .mapveil{opacity:0;pointer-events:none}

.mapcard__acts{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.mapcard__note{font-size:.72rem;color:var(--ink-3);line-height:1.6;margin-top:1.1rem}

/* ── 15. FOOTER ────────────────────────────────────────────── */
.foot{background:var(--sumi);color:var(--ink);padding-block:clamp(3.5rem,8vw,6rem) 2.2rem;overflow:hidden}
.foot__mark{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-bottom:clamp(2rem,5vw,3.5rem)}
.foot__word{
  font-family:var(--display);font-weight:200;
  font-size:clamp(4rem,18vw,15rem);line-height:.82;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(246,243,238,.3);
}
.foot__glyph{font-family:var(--display);font-weight:200;font-size:clamp(2.4rem,7vw,6rem);color:rgba(246,243,238,.16);line-height:1}
.foot__bar{
  display:flex;justify-content:space-between;align-items:center;gap:1.4rem;flex-wrap:wrap;
  padding-top:2rem;border-top:1px solid rgba(246,243,238,.12);
  font-size:.68rem;letter-spacing:.12em;color:rgba(246,243,238,.45);
}
.foot__links{display:flex;gap:1.6rem;flex-wrap:wrap}
.foot__links a{transition:color .4s var(--ease)}
.foot__links a:hover{color:var(--ink)}

/* ── 16. RESPONSIVE ────────────────────────────────────────── */
@media (max-width:1080px){
  .concept__grid{grid-template-columns:1fr;gap:2.5rem}
  .concept__media{position:static;max-width:520px}
  .visit__grid{grid-template-columns:1fr}
  .space__specs{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}
}
/* the split unstacks: type first, photography as a full-width panel beneath */
@media (max-width:1200px){
  .hero,.hero__grid{min-height:auto}
  .hero__grid{grid-template-columns:1fr}
  .hero__col{min-height:88svh;padding-block:clamp(7rem,18vh,10rem) clamp(3.5rem,8vh,5rem)}
  .hero__inner{margin-left:0;padding-right:var(--gut)}
  .media--hero{height:auto;aspect-ratio:4/5}
}
@media (max-width:860px){
  .nav__links{display:none}
  .burger{display:block}
  .nav__right .btn--pill{display:none}
  .mitem{
    grid-template-columns:clamp(76px,22vw,104px) minmax(0,1fr);
    grid-template-areas:'thumb main' 'thumb price';
    align-items:start;row-gap:.9rem;
  }
  .mitem .media--plate{grid-area:thumb;align-self:start}
  .mitem__main{grid-area:main}
  .mitem__price{grid-area:price;align-items:flex-start;flex-direction:row;gap:1rem;align-self:start}
  .mitem__arrow{display:none}
}
@media (max-width:560px){
  .hero__col{min-height:82svh}
  .media--hero{aspect-ratio:3/4}
  .pillars li{grid-template-columns:1.8rem 1fr;row-gap:.3rem}
  .pillars span{grid-column:2}
  .details__row{grid-template-columns:1fr;gap:.6rem}
  .foot__bar{flex-direction:column;align-items:flex-start}
}

/* ── 17. REDUCED MOTION ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  html.motion .reveal,html.motion .split .l > i{opacity:1!important;transform:none!important}
}

/* ── 18. ADDENDA ───────────────────────────────────────────── */
/* keep split words unbreakable so char-splitting never orphans letters */
.split .w{display:inline-block;white-space:nowrap}

/* ── 19. MEDIA COMPONENT ───────────────────────────────────────
   One structure behind every photograph on the site:

     .media            positioning context + caption host
       .media__frame   clips, and carries the hover lift + gleam
         .media__drift GSAP's territory — pointer drift, scroll scale
           .media__img CSS's territory — hover zoom + tone

   Each layer owns different properties, so GSAP's inline transforms
   and the CSS hover states can never overwrite one another.

   Every variant sets --media-drift; the drift layer's inset is derived
   from it, so travel can never outrun its own headroom.
   ─────────────────────────────────────────────────────────── */
.media{
  --media-drift:12px;   /* px the picture travels toward the pointer */
  --media-lift:0px;     /* how far the frame rises on hover          */
  --media-frame:1;      /* frame scale on hover                      */
  --media-zoom:1.05;    /* image scale on hover                      */
  --media-shadow:none;
  position:relative;display:block;
}

.media__frame{
  position:absolute;inset:0;overflow:hidden;border-radius:2px;
  transition:transform .8s var(--ease-out),
             box-shadow .8s var(--ease-out),
             border-color .6s var(--ease);
}
/* headroom is always double the travel, so an edge can never appear */
.media__drift{
  position:absolute;inset:calc(var(--media-drift) * -2);
  will-change:transform;
}
.media__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.9) brightness(.93);
  transition:transform 1s var(--ease-out), filter .8s var(--ease);
}

/* the gleam — light crossing the surface */
.media__frame::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,
    transparent 36%, rgba(255,255,255,var(--media-gleam,.09)) 47%, transparent 58%);
  transform:translate3d(-130%,0,0);
  transition:transform var(--media-gleam-time,1.3s) var(--ease-out);
}

.media__cap{
  position:absolute;left:clamp(1rem,2vw,1.8rem);bottom:clamp(1rem,2.4vw,1.8rem);z-index:3;
  display:flex;align-items:center;gap:.6rem;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(246,243,238,.9);text-shadow:0 1px 12px rgba(0,0,0,.35);
}
.media__cap i{width:16px;height:1px;background:currentColor;display:block}
/* scrim seats the caption; only drawn where there is one */
.media:has(.media__cap) .media__frame::before{
  content:'';position:absolute;inset:auto 0 0 0;height:44%;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(6,5,4,.58) 0%, rgba(6,5,4,.16) 46%, transparent 100%);
}

/* ── variants ── */
.media--hero{
  --media-drift:16px;
  --media-gleam:.06;
  --media-gleam-time:1.9s;
  height:100%;background:var(--night);
  overflow:hidden;            /* clips the intro curtain */
}
/* The hero frame is the one frame GSAP animates (the intro curtain), and it
   never lifts, so it carries no transform transition — a CSS transition on a
   property GSAP is writing corrupts the value GSAP records as its end state.
   The lifting variants keep their transition; GSAP never touches those. */
.media--hero .media__frame{border-radius:0;transition:none}
.media--hero .media__img{object-position:52% 46%;filter:saturate(.96) brightness(.97)}

.media--panel{
  --media-drift:12px;
  --media-lift:-6px;
  --media-frame:1.012;
  aspect-ratio:3/4;
}
.media--panel .media__frame{
  background:var(--oat);
  border:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.media--panel .media__img{object-position:50% 62%;filter:saturate(.88) brightness(.92)}

.media--plate{
  --media-drift:7px;
  --media-lift:-5px;
  --media-frame:1.03;
  --media-zoom:1.09;
  --media-gleam:.11;
  --media-gleam-time:1.15s;
  aspect-ratio:4/5;
}
.media--plate .media__frame{
  border:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.media--plate .media__img{object-position:50% 55%;filter:saturate(.86) brightness(.9)}

/* ── hover, behind a real pointer: on touch :hover latches after a tap
   and would strand a photograph lifted and mid-gleam ── */
@media (hover:hover) and (pointer:fine){
  /* A media can be triggered by itself, or by any ancestor that opts in
     with [data-media-hover] — a menu row is far wider than its plate, and
     should animate it from anywhere along the row. */
  .media:hover .media__frame,
  [data-media-hover]:hover .media__frame{
    transform:translate3d(0,var(--media-lift),0) scale(var(--media-frame));
    box-shadow:var(--media-shadow);
  }
  .media:hover .media__img,
  [data-media-hover]:hover .media__img{
    transform:scale(var(--media-zoom));
    filter:saturate(1.05) brightness(1.05);
  }
  .media:hover .media__frame::after,
  [data-media-hover]:hover .media__frame::after{transform:translate3d(130%,0,0)}

  .media--panel{--media-shadow:0 38px 70px -34px rgba(0,0,0,.85)}
  .media--plate{--media-shadow:0 22px 44px -22px rgba(0,0,0,.8)}
  .media--panel:hover .media__frame,
  [data-media-hover]:hover .media--plate .media__frame{
    border-color:color-mix(in srgb, var(--ink) 18%, transparent);
  }
}

/* responsive overrides live with the component so source order cannot
   strand them behind the base rules */
@media (max-width:860px){
  .media--panel{aspect-ratio:4/5}
}
@media (max-width:560px){
  .media--panel{aspect-ratio:3/4}
}

/* ── 20. WORDPRESS ─────────────────────────────────────────────
   Everything above is the design system, untouched from the static
   build. Everything below exists only because this now runs inside
   WordPress: core's required classes, the admin bar, and the pages
   that are not the one-pager.
   ─────────────────────────────────────────────────────────── */

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:.6rem;left:.6rem;z-index:9999;
  transform:translate3d(0,-160%,0);
  padding:.7rem 1.1rem;background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:2px;
  font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;
  transition:transform .4s var(--ease-out);
}
.skip-link:focus-visible{transform:none}

/* the admin bar owns the top strip, so the fixed nav starts below it */
.admin-bar .nav{top:32px}
.admin-bar .loader,.admin-bar .overlay{top:32px}
@media (max-width:782px){
  .admin-bar .nav,.admin-bar .loader,.admin-bar .overlay{top:46px}
}

/* core's required output classes */
.alignleft{float:left;margin:.4rem 1.6rem 1.2rem 0}
.alignright{float:right;margin:.4rem 0 1.2rem 1.6rem}
.aligncenter{display:block;margin-inline:auto}
.alignwide{width:min(100%, 1080px);margin-inline:auto}
.alignfull{width:100%}
.wp-caption{max-width:100%}
.wp-caption-text,.gallery-caption,figcaption{
  margin-top:.7rem;font-size:var(--step--1);color:var(--ink-3);
}
.sticky,.bypostauthor{position:relative}
.wp-block-image img{height:auto}

/* ── the templates that are not the one-pager ── */
.page-head{padding-top:clamp(8rem,16vh,11rem);padding-bottom:clamp(2rem,5vw,3.5rem)}
.page-head__title{
  font-family:var(--display);font-weight:200;line-height:1.02;
  font-size:var(--h2);letter-spacing:-.015em;max-width:20ch;
}
.page-head__meta{margin-top:1.1rem;font-size:var(--step--1);color:var(--ink-3);letter-spacing:.1em}

.entry{max-width:72ch;margin-inline:auto;padding-bottom:var(--sec)}
.entry > * + *{margin-top:1.5rem}
.entry h1,.entry h2,.entry h3,.entry h4{
  font-family:var(--display);font-weight:300;line-height:1.14;letter-spacing:-.01em;
  margin-top:2.6rem;
}
.entry h2{font-size:var(--step-2)}
.entry h3{font-size:var(--step-1)}
.entry h4{font-size:var(--step-0)}
.entry a{color:var(--terra);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.entry a:hover{color:var(--ink)}
.entry ul,.entry ol{padding-left:1.3rem;color:var(--ink-2)}
.entry ul{list-style:disc}
.entry ol{list-style:decimal}
.entry li + li{margin-top:.45rem}
.entry blockquote{
  border-left:1px solid var(--line);padding-left:1.6rem;
  font-family:var(--display);font-size:var(--step-1);font-style:italic;color:var(--ink-2);
}
.entry code,.entry pre{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
  background:var(--oat);border-radius:2px;
}
.entry code{padding:.15em .4em}
.entry pre{padding:1.2rem;overflow-x:auto}
.entry pre code{background:none;padding:0}
.entry table{width:100%;border-collapse:collapse;font-size:var(--step--1)}
.entry th,.entry td{padding:.7rem .9rem;border-bottom:1px solid var(--line);text-align:left}
.entry img{border-radius:2px}

/* index / archive */
.cards{
  display:grid;gap:clamp(1.6rem,3vw,2.6rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  padding-bottom:var(--sec);
}
.card{display:flex;flex-direction:column;gap:.9rem;padding-block:1.8rem;border-top:1px solid var(--line)}
.card__thumb{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:2px}
.card__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) brightness(.93);transition:transform 1s var(--ease-out),filter .8s var(--ease)}
.card:hover .card__thumb img{transform:scale(1.05);filter:saturate(1.05) brightness(1.05)}
.card__meta{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.card__title{font-family:var(--display);font-weight:300;font-size:var(--step-1);line-height:1.2}
.card__excerpt{font-size:var(--step--1);color:var(--ink-3)}

.pager{
  display:flex;justify-content:space-between;gap:1rem;
  padding-block:2rem 6rem;border-top:1px solid var(--line);
  font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;
}
.pager a:hover{color:var(--terra)}

/* comments — quiet by design; this is a restaurant, not a journal */
.comments{max-width:72ch;margin-inline:auto;padding-bottom:var(--sec)}
.comments__title{font-family:var(--display);font-weight:300;font-size:var(--step-1);margin-bottom:1.8rem}
.comments ol{list-style:none}
.comments .comment-body{padding-block:1.4rem;border-top:1px solid var(--line)}
.comments .children{padding-left:1.6rem}
.comments .comment-meta{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem}
.comments .comment-meta a{color:inherit}
.comment-respond{margin-top:2.4rem}
.comment-form input[type=text],.comment-form input[type=email],
.comment-form input[type=url],.comment-form textarea,.search-field{
  width:100%;padding:.85rem 1rem;background:var(--oat);color:var(--ink);
  border:1px solid var(--line);border-radius:2px;
}
.comment-form p{margin-top:1rem}
.comment-form .submit,.search-submit{
  padding:.8rem 1.6rem;background:var(--ink);color:var(--bone);
  border:0;border-radius:999px;cursor:pointer;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
}
.searchform{display:flex;gap:.6rem;max-width:34rem}

/* ── 21. ELEMENTOR ─────────────────────────────────────────────
   The build's own notes, expressed as CSS. See README.md.
   ─────────────────────────────────────────────────────────── */

/* The editor never runs the intro, so nothing may start hidden there.
   main.js already takes the static path, but a stalled script must not
   leave an author staring at empty sections. */
body.elementor-editor-active .reveal,
body.elementor-editor-active .split .l > i{opacity:1!important;transform:none!important}
body.elementor-editor-active .loader{display:none!important}

/* `overflow:hidden` on an Elementor container breaks position:sticky and
   clips the shadow that .media--panel / .media--plate cast outside their
   box on hover. Free any ancestor that holds one. .media--hero is the
   exception: it needs its own clip for the intro curtain. */
.elementor-element:has(.concept__media),
.elementor-element:has(.media--panel),
.elementor-element:has(.menulist),
.elementor-widget-container:has(.concept__media),
.elementor-widget-container:has(.media--panel),
.elementor-widget-container:has(.menulist){overflow:visible!important}

/* Elementor's own container padding would double up with --shell, which
   already centres to min(1440px, 100% - 2*--gut). Let one of them win. */
.elementor-element > .shell{width:var(--shell);margin-inline:auto}