/* ============================================================
   Sushi Dojo — Boca Raton
   Palette sampled directly from the restaurant's own photography.
   ============================================================ */

:root{
  /* Core palette — sampled from Media/DSCF6702.JPG */
  --ink:        #0B0705;   /* warm near-black, the room in shadow      */
  --ink-soft:   #16100C;
  --bone:       #F2EAE4;   /* warm off-white, the lit case             */
  --brass:      #D6AC6E;   /* the warm highlight on steel and wood     */
  --brass-lit:  #E5C089;
  --hinoki:     #94714B;   /* the cypress of the display case          */

  --font-display: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

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

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;               /* single-screen page               */
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

/* Focus — visible, brass, never removed ------------------------------ */
:focus-visible{
  outline:2px solid var(--brass-lit);
  outline-offset:3px;
  border-radius:2px;
}

/* ============================================================
   Stage
   ============================================================ */
.stage{
  position:relative;
  height:100dvh;
  min-height:100svh;
  width:100%;
  overflow:hidden;
  isolation:isolate;
}

/* --- the photograph -------------------------------------------------- */
.stage__media{
  position:absolute;
  inset:0;
  z-index:0;
  /* A blurred 24px thumbnail of the same frame, inlined at ~190 bytes.
     The hero is a large file; without this the scrim paints over an
     undecoded image and the first frame can flash black. */
  background:#1A120C url("data:image/webp;base64,UklGRoQAAABXRUJQVlA4IHgAAADwAwCdASoYABAAPuleqE0pJSQiMAgBIB0JYwCdACG7lvAoOH8thVAAAP7vYyIEXFX/W0Clx2WiUI1aigPiARktqV9ITVG6c8wDnFcRKFPxXvbev+Z+cjmjyZ2J2en4qj/r833ynarSuw1p8btLIt+/3Ep0qBLJIAA=") center/cover no-repeat;
}
.stage__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:58% 50%;
  transform-origin:60% 55%;
  animation:drift 34s var(--ease) infinite alternate;
}

@keyframes drift{
  from{ transform:scale(1.005); }
  to  { transform:scale(1.085); }
}

/* --- scrim ----------------------------------------------------------
   Left-weighted so the copy sits on near-black while the knife case
   keeps its warmth. Stops chosen against measured p95 luminance of the
   source frame: bone >= 7.9:1 and brass >= 4.6:1 at the copy's far edge.
   ------------------------------------------------------------------ */
.stage__scrim{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(100deg,
      rgba(11,7,5,.95)   0%,
      rgba(11,7,5,.91)  28%,
      rgba(11,7,5,.74)  46%,
      rgba(11,7,5,.40)  62%,
      rgba(11,7,5,.18)  78%,
      rgba(11,7,5,.44) 100%),
    linear-gradient(to bottom,
      rgba(11,7,5,.82)   0%,
      rgba(11,7,5,.14)  26%,
      rgba(11,7,5,0)    55%,
      rgba(11,7,5,.55) 100%);
}


/* ============================================================
   Masthead
   ============================================================ */
.masthead{
  position:absolute;
  top:0; left:0; right:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:clamp(1.25rem,2.6vw,2.25rem) clamp(1.25rem,4vw,3.5rem);
}

.brand{
  display:flex;
  align-items:center;
  gap:.85rem;
  text-decoration:none;
}
.brand__crest{
  width:clamp(20px,2.1vw,27px);
  height:auto;
  flex:none;
  opacity:.95;
}
.brand__word{
  width:clamp(104px,10.5vw,148px);
  height:auto;
  opacity:.95;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--bone);
  --btn-bd:rgba(242,234,228,.44);   /* 3.83:1 — WCAG 1.4.11 non-text */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7em;
  min-height:44px;                         /* touch target */
  padding:.85em 1.7em;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  border-radius:999px;
  font-family:var(--font-ui);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background .28s var(--ease), color .28s var(--ease),
             border-color .28s var(--ease), transform .28s var(--ease);
}
.btn:hover{
  --btn-bg:rgba(242,234,228,.1);
  --btn-bd:rgba(242,234,228,.72);
}
.btn:active{ transform:translateY(1px); }

.btn--primary{
  --btn-bg:var(--brass);
  --btn-fg:var(--ink);                     /* 9.54:1 */
  --btn-bd:var(--brass);
  font-weight:600;
}
.btn--primary:hover{
  --btn-bg:var(--brass-lit);
  --btn-bd:var(--brass-lit);
}
.btn__arrow{
  transition:transform .28s var(--ease);
}
.btn--primary:hover .btn__arrow{ transform:translateX(4px); }

/* ============================================================
   Hero copy
   ============================================================ */
.hero{
  position:relative;
  z-index:5;
  height:100%;
  display:flex;
  align-items:center;
  padding:0 clamp(1.25rem,4vw,3.5rem);
}
.hero__inner{
  max-width:min(46%,620px);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:1rem;
  margin:0 0 clamp(1.1rem,2.4vw,1.9rem);
  color:var(--brass-lit);                  /* small caps need the
                                              lighter gold: 4.50 -> 5.35
                                              at 1024x768 */
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  width:clamp(28px,3.4vw,52px);
  height:1px;
  background:var(--brass);
  opacity:.85;
  flex:none;
}

.hero__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(3rem,7vw,6.2rem);
  line-height:1.02;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.hero__title em{
  font-style:italic;
  color:var(--brass-lit);
}

.hero__lede{
  margin:clamp(1.4rem,2.8vw,2.1rem) 0 0;
  max-width:var(--measure);
  color:rgba(242,234,228,.82);             /* >= 4.9:1 on scrim */
  font-size:clamp(1.02rem,1.25vw,1.2rem);
  line-height:1.6;
}

.hero__address{
  margin:clamp(1.5rem,2.8vw,2.2rem) 0 0;
  color:rgba(242,234,228,.72);
  font-size:.79rem;
  font-weight:400;
  letter-spacing:.085em;
  line-height:1.55;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin-top:clamp(1.9rem,3.6vw,2.9rem);
}

/* --- calligraphy signature ------------------------------------------ */
.signature{
  position:absolute;
  right:clamp(1.25rem,4vw,3.5rem);
  bottom:clamp(1.5rem,3.6vw,2.9rem);
  z-index:6;
  width:clamp(96px,9.5vw,150px);
  height:auto;
  aspect-ratio:1852/578;
  opacity:.34;
  pointer-events:none;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.55));
}

/* ============================================================
   Entrance
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(18px);
  animation:rise .95s var(--ease) forwards;
}
.reveal:nth-child(1){ animation-delay:.15s; }
.reveal:nth-child(2){ animation-delay:.28s; }
.reveal:nth-child(3){ animation-delay:.41s; }
.reveal:nth-child(4){ animation-delay:.54s; }
.reveal:nth-child(5){ animation-delay:.67s; }

@keyframes rise{ to{ opacity:1; transform:none; } }

.masthead .reveal{ animation-delay:.05s; }
.masthead > :last-child.reveal{ animation-delay:.6s; }

/* ============================================================
   Responsive

   These breakpoints key off ASPECT RATIO, not width. Aspect ratio is
   what decides how object-fit:cover crops the photograph — and so
   whether the dark left edge of the frame, which the copy sits on,
   survives the crop at all.

     wider than 3:2  the whole frame width is visible, the dark edge
                     is intact, and the horizontal scrim carries it.
     under 3:2       the frame is cropped horizontally, the dark edge
                     is gone, and the lit case ends up directly behind
                     the copy. Scrim vertically and anchor the copy low.

   Getting this wrong measured 1.97:1 on a portrait tablet.
   ============================================================ */

@media (min-aspect-ratio:3/2) and (max-width:1180px){
  .hero__inner{ max-width:min(54%,560px); }
}

/* --- portrait-ish: phones, tablets, narrow desktop windows --------- */
@media (max-aspect-ratio:3/2){
  body{ overflow:auto; }
  .stage__media{ background-image:url("data:image/webp;base64,UklGRq4AAABXRUJQVlA4IKIAAACwBACdASoUABkAPuliqE2pJaOiMAgBIB0JQBOmW5notv8B4/ckTMPzeEn7eOAAAP7y2ZMpM1WmzNacEfXgWDx9eNlRGBs4dwswkhiV1sIefB8jeRX6V0cBaEcRnATGJAVMAkMpyG0dPqd2zJm7mdesmIy2CBoqjmD6lFWQY27ig8z0gl3fvFnESqBWhicRdrk4zdN42vxv/zKvNsuhaDi4gAA="); }
  .stage__media img{ object-position:52% 45%; }
  .stage__scrim{
    /* Ramps to full strength exactly where the copy begins (~46%) so the
       eyebrow and lede clear 4.5:1 over the lit case behind them. */
    background:linear-gradient(to bottom,
      rgba(11,7,5,.78)   0%,
      rgba(11,7,5,.26)  17%,
      rgba(11,7,5,.36)  30%,
      rgba(11,7,5,.84)  43%,
      rgba(11,7,5,.94)  62%,
      rgba(11,7,5,.97) 100%);
  }
  .hero{ align-items:flex-end; padding-bottom:clamp(2.5rem,9vh,5rem); }
  .hero__inner{ max-width:min(100%,640px); }
  .signature{ display:none; }
}

/* --- phones -------------------------------------------------------- */
@media (max-width:640px){
  .hero__title{ font-size:clamp(2.6rem,12vw,3.8rem); }
  .hero__lede{ max-width:34ch; }
  /* break the address by line of meaning rather than wherever it lands */
  .hero__address{ font-size:.75rem; }
  .hero__address span{ display:block; }
  .hero__address .sep{ display:none; }
  .masthead__cta{ display:none; }   /* the hero CTA carries it here */
  .brand__word{ width:118px; }
}

/* --- short landscape (phone rotated) ------------------------------- */
@media (max-height:520px) and (orientation:landscape){
  body{ overflow:auto; }
  .stage{ height:auto; min-height:100dvh; padding:5.5rem 0 3rem; }
  .hero{ height:auto; align-items:center; }
  .hero__title{ font-size:clamp(2rem,5.4vw,2.9rem); }
  .hero__inner{ max-width:min(56%,480px); }
  .signature{ display:none; }

  /* The stage grows past the viewport here and the gradient stretches out
     from under the copy — measured 4.28 on the lede and 3.12 on the nav
     button. This is already a compromised layout, so legibility wins over
     the photograph. */
  .stage__scrim{
    background:
      linear-gradient(100deg,
        rgba(11,7,5,.96)   0%,
        rgba(11,7,5,.92)  40%,
        rgba(11,7,5,.72)  60%,
        rgba(11,7,5,.55) 100%),
      linear-gradient(to bottom,
        rgba(11,7,5,.85)   0%,
        rgba(11,7,5,.30)  30%,
        rgba(11,7,5,.30)  70%,
        rgba(11,7,5,.60) 100%);
  }
}

/* ============================================================
   Reduced motion — honour it completely
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .stage__media img{ animation:none; transform:none; }
  .reveal{ animation:none; opacity:1; transform:none; }
  .btn,.btn__arrow{ transition:none; }
  *{ scroll-behavior:auto !important; }
}

/* Print — a clean card rather than a black page */
@media print{
  body{ background:#fff; color:#000; overflow:visible; }
  .stage__media,.stage__scrim,.signature{ display:none; }
  .hero__title{ color:#000; }
}