/* ==========================================================================
   Project (p-)
   Page / section specific composition. Editorial layout lives here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: Page Hero (sub-pages)
   -------------------------------------------------------------------------- */
.p-page-hero {
  padding-block-start: var(--space-2xl);
}

.p-page-hero__title {
  margin-block-start: var(--space-sm);
  font-size: var(--fs-h1);
  max-width: 16ch;
}

.p-page-hero__lead {
  margin-block-start: var(--space-md);
  max-width: 52ch;
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
}

.p-page-hero__note {
  margin-block-start: var(--space-2xs);
  max-width: 52ch;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .p-page-hero__title {
    margin-inline-start: 8%;
  }
  .p-page-hero__lead,
  .p-page-hero__note {
    margin-inline-start: 8%;
  }
}

/* --------------------------------------------------------------------------
   TOP — Hero
   -------------------------------------------------------------------------- */
.p-hero {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  grid-template-areas:
    'content'
    'main'
    'secondary';
  padding-block-start: var(--space-xl);
  padding-block-end: var(--space-2xl);
}

.p-hero__content {
  grid-area: content;
  position: relative;
  z-index: 2;
}

.p-hero__media-main {
  grid-area: main;
  /* Matches the real hero photo's natural 2:3 portrait proportions much
     more closely than the placeholder-era 4:5, so the crop stays gentle. */
  aspect-ratio: 3 / 4;
}

.p-hero__media-secondary {
  grid-area: secondary;
  width: 68%;
  margin-inline-start: auto;
  margin-block-start: calc(-1 * var(--space-lg));
  aspect-ratio: 3 / 4;
  position: relative;
  z-index: 2;
}

.p-hero__title {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  letter-spacing: var(--ls-display);
  line-height: 0.95;
}

.p-hero__title-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.22em;
  letter-spacing: 0.5em;
  margin-block-start: 0.4em;
  color: var(--color-text-muted);
}

.p-hero__copy {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  margin-block-start: var(--space-md);
  line-height: 1.45;
}

.p-hero__lead {
  margin-block-start: var(--space-md);
  max-width: 38ch;
  color: var(--color-text-muted);
}

.p-hero__actions {
  margin-block-start: var(--space-lg);
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  .p-hero {
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      'content content content content content . main main main main main main'
      '. . . . . . main main main main main main';
    padding-block-start: var(--space-2xl);
    align-items: start;
  }

  .p-hero__content {
    grid-column: 1 / 6;
    grid-row: 1;
    align-self: center;
    padding-block: var(--space-lg) 0;
  }

  .p-hero__media-main {
    grid-column: 7 / 13;
    grid-row: 1 / 3;
  }

  /* Positioned to break over the MAIN image's lower-left corner, not the
     text column — columns 1-5 belong to .p-hero__content (including the
     CTA), so the layered second image now lives entirely in columns 6-9,
     clear of it. The overhang is a fixed amount (not a clamped token) so
     it stays a modest, predictable accent rather than growing with the
     viewport. */
  .p-hero__media-secondary {
    grid-column: 6 / 10;
    grid-row: 2;
    align-self: end;
    width: 78%;
    margin-inline-start: auto;
    margin-block-start: 0;
    margin-block-end: calc(-1 * var(--space-lg));
  }
}

@media (min-width: 1280px) {
  .p-hero__media-main {
    /* A touch shorter than the 3:4 used below this breakpoint — at the
       column widths available from ~1280px up, 3:4 made the hero taller
       than the rest of the page's rhythm warrants. Still close enough to
       the photo's natural 2:3 that the crop stays gentle. */
    aspect-ratio: 4 / 5;
  }
}

/* --------------------------------------------------------------------------
   Editorial split — image + text, reused by Concept teaser / Artist preview
   -------------------------------------------------------------------------- */
.p-split {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  align-items: center;
}

/* Default assumes a portrait source (bio / detail shots — the majority of
   our real photography). Landscape sources (e.g. a salon interior) use
   the --wide modifier instead of forcing a portrait crop on them. */
.p-split__media {
  aspect-ratio: 3 / 4;
}

.p-split__media--wide {
  aspect-ratio: 4 / 3;
}

.p-split__body .c-eyebrow {
  margin-block-end: var(--space-sm);
}

.p-split__body h2 {
  font-size: var(--fs-h2);
  max-width: 14ch;
}

.p-split__body p {
  margin-block-start: var(--space-md);
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .p-split {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-2xl);
  }

  .p-split--reverse {
    grid-template-columns: 5fr 7fr;
  }

  .p-split--reverse .p-split__media {
    order: 2;
  }
}

/* --------------------------------------------------------------------------
   Gallery grid — CSS-grid masonry rhythm, shared by TOP preview and DESIGN
   -------------------------------------------------------------------------- */
.p-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 160px;
  gap: var(--space-sm);
}

@media (min-width: 600px) {
  .p-gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
    gap: var(--space-md);
  }
}

@media (min-width: 1024px) {
  .p-gallery-grid {
    grid-auto-rows: 210px;
    gap: var(--space-lg);
  }
}

.p-gallery-item {
  position: relative;
  grid-column: span 1;
  grid-row: span 1;
}

.p-gallery-item--r2 { grid-row: span 2; }
.p-gallery-item--c2 { grid-column: span 2; }

/* `grid-auto-rows` above is a fixed length (not `auto`/`minmax()`), so a
   grid item stretches to exactly that height regardless of its content —
   and a frame at height:100% then consumes ALL of it, leaving the
   caption below with nowhere to go inside its own cell. The caption
   still renders (normal flow), just past the bottom edge of the grid
   track, overlapping whatever sits below. This was always technically
   true at every breakpoint, but stayed invisible on wide screens only
   because the grid's own row `gap` (40px at 1024px+) happened to be
   larger than the caption's actual overflow (~34px) — SP's much
   smaller gap (16px) does not have that slack, so the same overflow
   there visibly lands on the next row's photo. Reserving that space
   from the frame itself (rather than depending on gap size) fixes this
   at every breakpoint without touching the deliberate `grid-auto-rows`
   masonry values. --space-lg (40px) comfortably covers one caption line
   (~22px) plus its own margin-block-start (12px) with a little room to
   spare. */
.p-gallery-item__frame {
  height: calc(100% - var(--space-lg));
}

.p-gallery-item__caption {
  margin-block-start: var(--space-xs);
}

/* Hover-capable devices only: subtle scale + caption emphasis */
@media (hover: hover) and (pointer: fine) {
  .p-gallery-item__frame img {
    transition: transform var(--duration-slow) var(--ease-out);
  }

  .p-gallery-item:hover .p-gallery-item__frame img,
  .p-gallery-item:focus-within .p-gallery-item__frame img {
    transform: scale(1.035);
  }
}

.p-gallery-cta {
  /* Was --space-xl (up to 96px); the gallery's own images already end in
     varied heights (the masonry rhythm), so a slightly tighter gap here
     reads as "next element" rather than "end of a separate block". */
  margin-block-start: var(--space-lg);
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   DESIGN page — filter UI (progressive enhancement)
   -------------------------------------------------------------------------- */
.p-filter {
  display: none;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-end: var(--space-lg);
}

.has-js .p-filter {
  display: flex;
}

.p-filter__button {
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  padding-block: var(--space-2xs);
  padding-inline: var(--space-sm);
  min-height: 44px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.p-filter__button:hover,
.p-filter__button:focus-visible {
  border-color: var(--color-charcoal);
  color: var(--color-charcoal);
}

.p-filter__button.is-active {
  background: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-offwhite);
}

.p-gallery-item[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Features (TOP) — editorial list, not card UI
   -------------------------------------------------------------------------- */
/* The four hairlines below were plain `border-*` declarations. They're
   now pseudo-elements instead, positioned to sit exactly where those
   borders used to be — same colour, same 1px thickness, same place —
   so that Grid Draw (component.css / stagger-reveal.js) has something it
   can animate with `transform: scale()`, which a real `border` can't do.
   Without JS (or with it not yet run) they render at their default,
   untransformed scale — visually identical to the old static borders.
   The 1px of padding added below each replaces the box-height that
   border used to contribute, so nothing shifts by even a pixel. */
.p-features__list {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  padding-block-start: 1px;
}

.p-features__list::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--color-border);
  transform-origin: left center;
  pointer-events: none;
}

@media (min-width: 768px) {
  .p-features__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-features__item {
  position: relative;
  padding-block: var(--space-lg);
  padding-block-end: calc(var(--space-lg) + 1px);
  padding-inline-end: var(--space-lg);
}

.p-features__item::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--color-border);
  transform-origin: left center;
  pointer-events: none;
}

@media (min-width: 768px) {
  .p-features__item:nth-child(odd) {
    padding-inline-end: var(--space-xl);
    padding-inline-start: 0;
  }

  .p-features__item:nth-child(even) {
    padding-inline-start: var(--space-xl);
  }

  .p-features__item:nth-child(odd)::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 1px;
    height: 100%;
    background: var(--color-border);
    transform-origin: top center;
    pointer-events: none;
  }
}

.p-features__item h3 {
  margin-block-start: var(--space-sm);
  font-size: var(--fs-h3);
}

.p-features__item p {
  margin-block-start: var(--space-xs);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Menu Preview (TOP)
   -------------------------------------------------------------------------- */
.p-menu-preview__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .p-menu-preview__list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
  }
}

.p-menu-preview__item {
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--color-border);
}

.p-menu-preview__item h3 {
  font-size: var(--fs-h3);
}

.p-menu-preview__item .p-menu-preview__price {
  display: block;
  margin-block-start: var(--space-2xs);
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--color-mocha-deep);
}

.p-menu-preview__item p {
  margin-block-start: var(--space-xs);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Reservation CTA band (shared)
   -------------------------------------------------------------------------- */
.p-reservation-cta {
  text-align: center;
  border-block: var(--border-hairline);
}

.p-reservation-cta .c-eyebrow {
  justify-content: center;
}

.p-reservation-cta h2 {
  margin-block-start: var(--space-sm);
  font-size: var(--fs-h1);
}

.p-reservation-cta p {
  margin-inline: auto;
  margin-block-start: var(--space-md);
  color: var(--color-text-muted);
}

.p-reservation-cta__actions {
  margin-block-start: var(--space-lg);
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   CONCEPT page
   -------------------------------------------------------------------------- */
.p-message {
  text-align: center;
}

.p-message .c-quote {
  margin-inline: auto;
  max-width: 20ch;
}

/* The three border declarations below were plain `border-*`. They're now
   pseudo-elements instead, positioned exactly where those borders used to
   be — same colour, same 1px thickness, same place — so Grid Draw
   (component.css / stagger-reveal.js) has something it can animate with
   `transform: scale()`, the same technique used for the TOP page's WHY
   LINOA grid. Without JS (or with it not yet run) they render at their
   default, untransformed scale — visually identical to the old static
   borders. The 1px of padding added below each replaces the box-height/
   width that border used to contribute, so nothing shifts by even a
   pixel. */
.p-values__list {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  padding-block-start: 1px;
}

.p-values__list::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--color-border);
  transform-origin: left center;
  pointer-events: none;
}

@media (min-width: 768px) {
  .p-values__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-values__item {
  position: relative;
  display: flex;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  padding-block-end: calc(var(--space-lg) + 1px);
}

.p-values__item::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--color-border);
  transform-origin: left center;
  pointer-events: none;
}

@media (min-width: 768px) {
  .p-values__item:nth-child(odd) {
    padding-inline-end: calc(var(--space-lg) + 1px);
  }

  .p-values__item:nth-child(even) {
    padding-inline-start: var(--space-lg);
  }

  .p-values__item:nth-child(odd)::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 1px;
    height: 100%;
    background: var(--color-border);
    transform-origin: top center;
    pointer-events: none;
  }
}

.p-values__item h3 {
  font-size: var(--fs-h3);
}

.p-values__item p {
  margin-block-start: var(--space-2xs);
  color: var(--color-text-muted);
}

.p-artist__figure {
  margin-block-start: var(--space-lg);
  aspect-ratio: 4 / 3;
}

.p-artist__quote {
  margin-block-start: var(--space-lg);
  padding-inline-start: var(--space-md);
  border-inline-start: 2px solid var(--color-mocha);
}

/* --------------------------------------------------------------------------
   MENU page
   -------------------------------------------------------------------------- */
.p-menu-list {
  display: flex;
  flex-direction: column;
}

.p-menu-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-block-end: var(--border-hairline);
}

.p-menu-item:first-child {
  border-block-start: var(--border-hairline);
}

.p-menu-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.p-menu-item__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.p-menu-item__name {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
}

.p-menu-item__name-jp {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-block-start: var(--space-3xs);
}

.p-menu-item__price {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  color: var(--color-mocha-deep);
  white-space: nowrap;
}

.p-menu-item__desc {
  color: var(--color-text-muted);
  max-width: 56ch;
}

.p-menu-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  margin-block-start: var(--space-2xs);
}

.p-menu-item__meta div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.p-menu-item__meta dt {
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.p-menu-item__meta dd {
  font-size: var(--fs-small);
}

@media (min-width: 768px) {
  .p-menu-item {
    grid-template-columns: 4rem 1fr;
    gap: var(--space-lg);
  }
}

.p-menu-note {
  margin-block-start: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-surface);
  border: var(--border-hairline);
}

.p-menu-note h3 {
  font-size: var(--fs-h3);
}

.p-menu-note ul {
  margin-block-start: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  color: var(--color-text-muted);
}

.p-menu-note li::before {
  content: '— ';
}

/* --------------------------------------------------------------------------
   ACCESS page
   -------------------------------------------------------------------------- */
.p-access-grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .p-access-grid {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
}

.p-access-map {
  aspect-ratio: 4 / 3;
  margin-block-start: var(--space-lg);
}

/* Waiting space photo: a full-width landscape banner below the info/map
   grid, rather than squeezed into the narrow map column — the real photo
   is landscape and reads best given the whole container width. */
.p-access-waiting {
  margin-block-start: var(--space-xl);
}

.p-access-map__note {
  margin-block-start: var(--space-2xs);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.p-flow-list {
  display: flex;
  flex-direction: column;
}

.p-flow-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-block-end: var(--border-hairline);
}

.p-flow-item:first-child {
  border-block-start: var(--border-hairline);
}

.p-flow-item__body h3 {
  font-size: var(--fs-h3);
}

.p-flow-item__body p {
  margin-block-start: var(--space-2xs);
  color: var(--color-text-muted);
}

.p-first-visit__list {
  display: grid;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
}

.p-first-visit__list li {
  padding-inline-start: var(--space-md);
  position: relative;
  color: var(--color-text-muted);
}

.p-first-visit__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.6rem;
  height: 1px;
  background: var(--color-mocha);
}

.p-reservation-note {
  margin-block-start: var(--space-lg);
  padding: var(--space-md);
  border: var(--border-hairline);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-inline: auto;
}