/* =====================================================================
   ATTO SUSHI — HOME PAGE
   Page-specific layer on top of style.css. Uses only its tokens.

   CONTRAST NOTES (computed, worst case = video frame pure white)
     Hero copy sits on an indigo scrim of at least .82 opacity:
       cream on .82 indigo-over-white   7.9:1
       cream .78 (muted) on the same    5.6:1
       bright gold on the same          5.9:1
     Every other pair uses band tokens already verified in style.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO — full-bleed video, left-aligned copy, omakase price as hero number
   --------------------------------------------------------------------- */
.home-hero {
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: var(--s-8);
}
@media (min-width: 900px) { .home-hero { padding-bottom: var(--s-12); } }

/* MEDIA STRATEGY
   The clip is the takeout box, whose printed sleeve copy ("ATTO SUSHI",
   "Casual Omakase features...") would sit right behind the H1. So:
   - Default (mobile, tablet portrait, reduced motion, no JS): a clean
     still photo (sushi-plating.jpg). No video is downloaded.
   - Landscape >=900px with motion allowed: the video plays over the still.
     Its window is pushed low (y 64%) so the sleeve's front copy falls above
     the frame and the burned-in captions (lower ~19%) stay below it:
       aspect 4/3 -> visible 37%-79% of frame height; 16/10 -> 42%-77%.
     A frosted (blurred) veil under the copy column keeps any remaining
     sleeve type unreadable. */
.home-hero__video { display: none; }
.home-hero__frost { display: none; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (prefers-reduced-motion: no-preference) {
  .home-hero__video { display: block; object-position: 50% 64%; }
  .home-hero__frost {
    display: block;
    position: absolute; inset: 0; z-index: -1;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    /* copy column + a top band (sleeve type can drift into the top-right
       corner behind the header CTAs) */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--gutter) + 780px), transparent calc(var(--gutter) + 1000px)), linear-gradient(180deg, #000 0, #000 16%, transparent 34%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--gutter) + 780px), transparent calc(var(--gutter) + 1000px)), linear-gradient(180deg, #000 0, #000 16%, transparent 34%);
    pointer-events: none;
  }
}

.home-hero__still { object-position: 50% 55%; }
/* Portrait / narrow: the photo owns the top of the hero, fades into indigo
   under the copy, so the space above the headline reads as an image, not
   dead space. */
@media (max-width: 899px), (max-aspect-ratio: 5/4) {
  .home-hero__still {
    height: 58%;
    object-position: 46% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
}
@media (min-width: 600px) and (max-aspect-ratio: 4/3) {
  .home-hero { min-height: 86vh; min-height: 86svh; }
  .home-hero__still { height: 62%; object-position: 46% 45%; }
}

.home-hero .hero__scrim {
  background:
    linear-gradient(180deg, rgba(26, 28, 44, .6) 0%, rgba(26, 28, 44, 0) 24%),
    linear-gradient(0deg, rgba(26, 28, 44, .7) 0%, rgba(26, 28, 44, .25) 55%, rgba(26, 28, 44, .1) 100%);
}
@media (min-width: 900px) {
  .home-hero .hero__scrim {
    background:
      linear-gradient(180deg, rgba(26, 28, 44, .55) 0%, rgba(26, 28, 44, 0) 22%),
      /* the dark column is sized to the copy (max 760px + gutter), not to a
         percentage, so at 1024px the full H1 still sits on >=.84 */
      linear-gradient(90deg, rgba(26, 28, 44, .86) 0, rgba(26, 28, 44, .84) calc(var(--gutter) + 800px), rgba(26, 28, 44, .5) calc(var(--gutter) + 1100px), rgba(26, 28, 44, .3) 100%),
      linear-gradient(0deg, rgba(26, 28, 44, .6) 0%, rgba(26, 28, 44, 0) 40%);
  }
}

.home-hero__inner {
  position: relative;
  display: grid;
  gap: var(--s-8);
}
/* Mobile: a soft backdrop that always starts above the copy, so text
   contrast never depends on how tall the copy wraps. */
.home-hero__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--s-24)) calc(-1 * var(--gutter)) calc(-1 * var(--s-12));
  background: linear-gradient(180deg, rgba(26, 28, 44, 0) 0, rgba(26, 28, 44, .84) var(--s-24));
  pointer-events: none;
}
@media (min-width: 900px) { .home-hero__inner::before { display: none; } }

.home-hero__copy { max-width: 760px; }
.home-hero__copy > * + * { margin-top: var(--s-5); }
.home-hero__copy .kicker { color: var(--c-yellow); }
.home-hero h1 {
  font-size: var(--fs-80);   /* top of the shared scale, same as menu/catering h1 */
  line-height: 1;
  letter-spacing: -.035em;
}
.home-hero__tagline {
  font-size: var(--fs-18);
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 44ch;
}
@media (min-width: 900px) { .home-hero__tagline { font-size: var(--fs-22); } }

.home-hero__offer {
  display: grid;
  gap: var(--s-6);
  align-items: end;
  max-width: 920px;
}
@media (min-width: 600px) {
  .home-hero__offer { grid-template-columns: auto 1fr; gap: var(--s-10); }
  .home-hero__ctas { padding-left: var(--s-10); border-left: 1px solid var(--line); }
}
.home-hero .price-hero__amount { font-size: clamp(4rem, 2.6rem + 5.6vw, 7rem); }
.home-hero .price-hero__from {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.home-hero .price-hero__note { margin-top: var(--s-1); }
.price-hero__unit .nw { white-space: nowrap; }
.home-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-bottom: var(--s-2); }

.home-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-14);
  color: var(--fg-muted);
}
.home-hero__facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); list-style: none; }
.home-hero__facts strong { color: var(--fg); font-weight: 600; }

.video-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--fg);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(26, 28, 44, .55);   /* sits outside the darkened copy column */
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.video-toggle:hover { border-color: var(--fg); background: rgba(26, 28, 44, .72); }
.video-toggle svg { width: 12px; height: 12px; fill: currentColor; }
.video-toggle[hidden] { display: none; }
.video-toggle .icon-play { display: none; }
.video-toggle[data-state="paused"] .icon-play { display: block; }
.video-toggle[data-state="paused"] .icon-pause { display: none; }

/* Header ghost-pill backing over the hero now lives in v2.css (shared with catering). */

/* ---------------------------------------------------------------------
   THE CRAFT — editorial essay split
   --------------------------------------------------------------------- */
.craft { display: grid; gap: var(--s-12); }
@media (min-width: 900px) {
  .craft { grid-template-columns: 7fr 5fr; gap: var(--s-16); align-items: start; }
}
.craft__figure { position: relative; }
@media (min-width: 900px) { .craft__figure { position: sticky; top: calc(var(--header-h) + var(--s-8)); } }
.craft__figure .media { aspect-ratio: 4 / 3; }
.craft__figure .media img { object-position: 46% 60%; }

.essay > * + * { margin-top: var(--s-5); }
.essay h2 { margin-top: var(--s-3); }
.essay__open {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.3;
  color: var(--fg);
  max-width: 30ch;
}
.essay p:not(.essay__open):not(.kicker) { color: var(--fg-muted); }
.essay p.body-l { color: var(--fg); }

.stats-line {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--s-10);
  border-top: 1px solid var(--line-strong);
}
.stats-line > div { padding: var(--s-4) var(--s-3) 0 0; }
/* Labels may wrap to two lines on narrow screens; subgrid keeps the three
   numbers on one baseline regardless. */
.stats-line dt { min-height: 2.8em; }
@supports (grid-template-rows: subgrid) {
  .stats-line { grid-template-rows: auto auto; }
  .stats-line > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; }
  .stats-line dt { min-height: 0; align-self: end; }
}
.stats-line > div + div { padding-left: var(--s-4); border-left: 1px solid var(--line); }
.stats-line dt { font-size: var(--fs-12); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); line-height: 1.4; }
.stats-line dd {
  margin-top: var(--s-1);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--fg);
}
.stats-line dd small { display: block; margin-top: var(--s-1); font-size: var(--fs-12); font-weight: 400; letter-spacing: 0; color: var(--fg-muted); line-height: 1.4; }

/* ---------------------------------------------------------------------
   OMAKASE — two-column editorial comparison
   --------------------------------------------------------------------- */
.courses {
  display: grid;
  border-top: 1px solid var(--line-strong);
}
@media (min-width: 900px) {
  .courses { grid-template-columns: 1fr 1fr; }
  .course + .course { border-left: 1px solid var(--line); padding-left: var(--s-12); }
  .course:first-child { padding-right: var(--s-12); }
}
.course { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.course + .course { border-top: 1px solid var(--line); }
@media (min-width: 900px) { .course + .course { border-top: 0; } }

.course__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.course__name { font-size: var(--fs-28); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.1; }
.course__courses { display: block; margin-top: var(--s-2); }
.course__price {
  font-size: clamp(3.25rem, 2.2rem + 4vw, 5rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--accent);
}
.course__price sup { font-size: .42em; vertical-align: top; position: relative; top: .12em; margin-right: .03em; letter-spacing: 0; }

.course__parts { list-style: none; margin-top: var(--s-8); border-top: 1px solid var(--line); }
.course__parts li {
  display: grid;
  grid-template-columns: 3ch 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-18);
}
.course__parts .num { font-weight: 600; color: var(--accent); text-align: right; }
.course__desc { margin-top: var(--s-6); color: var(--fg-muted); max-width: 46ch; }
.course__cta { margin-top: var(--s-8); }

.courses__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--s-4) var(--s-8);
  margin-top: var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-strong);
  font-size: var(--fs-14);
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------------
   SIGNATURE PIECES — asymmetric bento
   --------------------------------------------------------------------- */
.sig-grid { display: grid; gap: var(--s-10); list-style: none; }
.sig { display: flex; flex-direction: column; min-height: 0; }
.sig .media { flex: 1 1 auto; aspect-ratio: 4 / 3; }
.sig--wagyu .media { aspect-ratio: 4 / 5; }
.sig .media img { transition: transform 600ms var(--ease); }
.sig:hover .media img { transform: scale(1.025); }
.sig__cap {
  display: flex; align-items: baseline; gap: var(--s-4);
  margin-top: var(--s-4);
}
.sig__no { flex: none; font-size: var(--fs-12); font-weight: 600; letter-spacing: .12em; color: var(--accent); }
.sig__name { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: var(--fs-22); line-height: 1.25; color: var(--fg); }
.sig__desc { display: block; margin-top: var(--s-1); font-size: var(--fs-14); color: var(--fg-muted); }

.sig--otoro .media img { object-position: 50% 30%; }
.sig--wagyu .media img { object-position: 50% 30%; }
.sig--ebi .media img   { object-position: 60% 35%; }
.sig--eel .media img   { object-position: 40% 65%; }

@media (min-width: 900px) {
  .sig-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 300px 300px 360px;
    gap: var(--s-10) var(--s-6);
    grid-template-areas:
      "o o o o o o o w w w w w"
      "o o o o o o o w w w w w"
      "b b b b b e e e e e e e";
  }
  .sig .media { aspect-ratio: auto; min-height: 0; }
  .sig--otoro { grid-area: o; }
  .sig--wagyu { grid-area: w; }
  .sig--ebi   { grid-area: b; }
  .sig--eel   { grid-area: e; }
  /* rows 1–2 span two tracks plus one row gap */
  .sig--otoro, .sig--wagyu { margin-bottom: 0; }
}
@media (min-width: 1120px) {
  .sig-grid { grid-template-rows: 330px 330px 400px; }
}

/* ---------------------------------------------------------------------
   LUNCH (+ omakase seatings timeline, used in the Omakase band)
   --------------------------------------------------------------------- */
.lunch { display: grid; gap: var(--s-12); }
@media (min-width: 900px) {
  .lunch { grid-template-columns: 7fr 5fr; gap: var(--s-16); align-items: end; }
}
.lunch__menu { margin-top: var(--s-8); border-top: 1px solid var(--line-strong); }
.lunch__figure .media { aspect-ratio: 4 / 5; }
.lunch__figure .media img { object-position: 46% 55%; }

.seatings { margin-top: var(--s-12); }
.seatings__title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.seatings__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--s-4);
  border-top: 1px solid var(--line-strong);
}
.seatings__list li {
  position: relative;
  padding-top: var(--s-4);
}
.seatings__list li::before {
  content: "";
  position: absolute; top: -4px; left: 0;
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.seatings__time { display: block; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.seatings__label { display: block; margin-top: var(--s-1); font-size: var(--fs-12); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }

/* ---------------------------------------------------------------------
   CATERING TEASER (indigo)
   --------------------------------------------------------------------- */
.cater { display: grid; gap: var(--s-12); }
@media (min-width: 900px) {
  .cater { grid-template-columns: 6fr 5fr; gap: var(--s-20); align-items: center; }
}
.cater__copy > * + * { margin-top: var(--s-5); }
.cater .price-hero { margin-top: var(--s-8); }
.cater .price-hero__amount { font-size: clamp(3.5rem, 2.4rem + 4.4vw, 6rem); }
.cater__ctas { margin-top: var(--s-8); }
.cater__areas { margin-top: var(--s-8); }
.cater__areas .cluster { margin-top: var(--s-3); gap: var(--s-2); }

.cater__panel {
  border-top: 1px solid var(--line-strong);
}
.cater__panel .menu-item__name { font-size: var(--fs-18); }
.cater__panel-head {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.cater__fine { margin-top: var(--s-5); font-size: var(--fs-14); color: var(--fg-muted); }

/* ---------------------------------------------------------------------
   REVIEWS — literary pull quote + two quiet quotes
   --------------------------------------------------------------------- */
.reviews__rating {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-10);
}
.reviews__score { font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem); font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.reviews__star { color: var(--accent); font-size: .6em; vertical-align: .35em; margin-left: .1em; }
.reviews .pullquote { max-width: 1000px; }
.reviews__more {
  display: grid;
  gap: var(--s-8);
  margin-top: var(--s-16);
  border-top: 1px solid var(--line-strong);
  padding-top: var(--s-8);
}
@media (min-width: 900px) {
  .reviews__more { grid-template-columns: 1fr 1fr; gap: var(--s-16); }
}
.quote-s blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-22);
  line-height: 1.4;
  color: var(--fg);
}
.quote-s figcaption {
  margin-top: var(--s-4);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg);
}
.quote-s figcaption span { font-weight: 400; color: var(--fg-muted); letter-spacing: .04em; text-transform: none; }
.reviews__link { margin-top: var(--s-10); }

/* ---------------------------------------------------------------------
   VISIT
   --------------------------------------------------------------------- */
.visit { display: grid; gap: var(--s-12); }
@media (min-width: 900px) {
  .visit { grid-template-columns: 5fr 6fr; gap: var(--s-16); align-items: start; }
}
.visit__figure .media { aspect-ratio: 4 / 5; }
.visit__figure .media img { object-position: 62% 50%; }
.visit__info > * + * { margin-top: var(--s-5); }
.visit__address { font-style: normal; font-size: var(--fs-22); line-height: 1.4; font-weight: 600; }
.visit__address span { display: block; font-weight: 400; color: var(--fg-muted); font-size: var(--fs-18); }

.hours {
  width: 100%;
  margin-top: var(--s-8);
  border-collapse: collapse;
  font-size: var(--fs-16);
}
.hours caption { text-align: left; padding-bottom: var(--s-3); }
.hours th, .hours td {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: baseline;
  font-weight: 400;
}
.hours thead th { border-top: 1px solid var(--line-strong); }
.hours th[scope="row"] { font-weight: 600; padding-right: var(--s-4); white-space: nowrap; }
.hours td { color: var(--fg-muted); }
.hours td:last-child { text-align: right; color: var(--fg); }
.hours tr.is-closed td:last-child { color: var(--fg-muted); }
.hours tbody tr:first-child th, .hours tbody tr:first-child td { border-top: 1px solid var(--line-strong); }

.visit__contact {
  display: grid; gap: var(--s-1);
  margin-top: var(--s-8);
}
.visit__phone { font-size: var(--fs-28); font-weight: 900; letter-spacing: -.02em; color: var(--fg); }
.visit__phone:hover { color: var(--accent); }
.visit__ctas { margin-top: var(--s-8); }

/* Lining numerals for .kicker live in v2.css; home-only Cormorant blocks: */
.sig__name, .essay__open, .quote-s blockquote { font-variant-numeric: lining-nums; }

/* No-JS nav fallback now lives in v2.css (all pages). */


/* ---------------------------------------------------------------------
   WAYS TO VISIT + JOURNAL (links into the rest of the site)
   --------------------------------------------------------------------- */
.ways { display: grid; border-top: 1px solid var(--line-strong); }
@media (min-width: 800px) { .ways { grid-template-columns: 1fr 1fr; column-gap: var(--s-16); } }
.way { padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.way__title { font-size: var(--fs-22); font-weight: 700; line-height: 1.3; }
.way__title a { color: var(--fg); }
.way__title a:hover { color: var(--accent); }
.way p { margin-top: var(--s-2); color: var(--fg-muted); }
.way .btn--link { margin-top: var(--s-3); }
.ways__foot { margin-top: var(--s-10); }

.journal { display: grid; gap: var(--s-6); }
@media (min-width: 800px) { .journal { grid-template-columns: repeat(3, 1fr); } }
.journal__item { display: flex; flex-direction: column; }
.journal__item .media { aspect-ratio: 3 / 2; }
.journal__meta { margin-top: var(--s-4); font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--fg-muted); }
.journal__title { margin-top: var(--s-2); font-size: var(--fs-22); font-weight: 600; line-height: 1.3; }
.journal__title a { color: var(--fg); }
.journal__title a:hover { color: var(--accent); }
.journal__item p { margin-top: var(--s-2); font-size: var(--fs-14); line-height: 1.6; color: var(--fg-muted); }
.journal__foot { margin-top: var(--s-10); }