/* Kōhī by Ifuku — one stylesheet, cascade layers keep specificity honest. */
@layer reset, base, layout, components, utilities;

@import '/assets/fonts/fonts.css' layer(base);

/* ============================= RESET ============================= */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, picture, video { display: block; max-width: 100%; }
  input, button, textarea { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; padding: 0; }
  button { background: none; border: none; padding: 0; cursor: pointer; }
}

/* ============================= BASE ============================= */
@layer base {
  :root {
    /* — Palette (measured, §2.1 — do not add other hex values) — */
    --ink: #14140F;
    --surface: #211F1A;
    --plaster: #95968F;
    --teak: #9C6640;
    --teak-light: #BF8257;
    --matcha: #7D9945;
    --matcha-bright: #B3D458; /* reserved: now-playing dot + focus rings ONLY */
    --washi: #D4C9B7;

    /* — Type — */
    --font-display: 'Shippori Mincho B1', serif;
    --font-body: 'Zen Kaku Gothic New', sans-serif;
    --font-mono: 'DM Mono', ui-monospace, monospace;

    --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
    --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
    --step-1:  clamp(1.25rem, 1.15rem + 0.50vw, 1.50rem);
    --step-2:  clamp(1.75rem, 1.50rem + 1.20vw, 2.60rem);
    --step-3:  clamp(2.60rem, 2.00rem + 3.00vw, 4.80rem);

    /* — Rhythm — */
    --section-pad-y: clamp(4rem, 3rem + 5vw, 7.5rem);
    --measure: 62ch;
    --measure-lead: 46ch;

    --scroll-progress: 0; /* 0–1, written by tonearm.js */

    color-scheme: dark;
  }

  html {
    background: var(--ink);
    scroll-behavior: auto;
  }

  body {
    background: var(--ink);
    color: var(--washi);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--step-0);
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--washi);
  }

  h1 { font-size: var(--step-3); }
  h2 { font-size: var(--step-2); }

  p { max-width: var(--measure); }
  p.lead { font-size: var(--step-1); max-width: var(--measure-lead); color: var(--plaster); }

  .mono {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--step--1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--plaster);
  }

  a, button, [tabindex] {
    -webkit-tap-highlight-color: transparent;
  }

  :focus-visible {
    outline: 2px solid var(--matcha-bright);
    outline-offset: 2px;
    border-radius: 2px;
  }

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

  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 420ms cubic-bezier(.2,.6,.2,1), transform 420ms cubic-bezier(.2,.6,.2,1);
    }
    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ============================= LAYOUT ============================= */
@layer layout {
  .wrap {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
  }

  main { display: block; }

  section {
    padding-block: var(--section-pad-y);
    border-bottom: 1px solid color-mix(in srgb, var(--plaster) 18%, transparent);
  }
  section:last-of-type { border-bottom: none; }

  .split {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  @media (min-width: 860px) {
    .split { grid-template-columns: 1.1fr 0.9fr; }
    .split--reverse { grid-template-columns: 0.9fr 1.1fr; }
    .split--reverse > :first-child { order: 2; }
  }

  .quotes-grid {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
  }
  @media (min-width: 720px) {
    .quotes-grid { grid-template-columns: repeat(3, 1fr); }
  }
}

/* ============================= COMPONENTS ============================= */
@layer components {

  /* — Header — */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    padding-block: 0.6rem;
    background: transparent;
    transition: background-color 300ms ease, border-color 300ms ease;
    border-bottom: 1px solid transparent;
  }
  .site-header.is-scrolled {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-bottom-color: color-mix(in srgb, var(--plaster) 20%, transparent);
    backdrop-filter: blur(6px);
  }
  .site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }
  .wordmark { color: var(--washi); }
  .wordmark svg { display: block; width: 68px; height: auto; }
  @media (min-width: 720px) { .wordmark svg { width: 84px; } }
  @media (min-width: 860px) { .wordmark svg { width: 96px; } }

  .site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem clamp(0.65rem, 2.5vw, 1.5rem);
  }
  .site-nav a {
    font-family: var(--font-mono);
    font-size: clamp(0.6rem, 0.52rem + 0.6vw, 0.78rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--plaster);
    padding: 0.35rem 0.15rem;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
  @media (min-width: 720px) {
    .site-nav a { letter-spacing: 0.12em; min-height: 44px; padding: 0.5rem 0.25rem; }
  }
  .site-nav a:hover { color: var(--washi); }

  /* — Buttons — */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.85rem 1.5rem;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--step-0);
    border-radius: 2px;
    border: 1px solid transparent;
    transition: transform 200ms ease, background-color 200ms ease, border-color 200ms ease;
  }
  .btn:active { transform: scale(0.98); }
  .btn--primary {
    background: var(--washi);
    color: var(--ink);
  }
  .btn--primary:hover { background: var(--teak-light); color: var(--ink); }
  .btn--secondary {
    background: transparent;
    color: var(--washi);
    border-color: color-mix(in srgb, var(--plaster) 50%, transparent);
  }
  .btn--secondary:hover { border-color: var(--washi); }
  .btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

  /* — Eyebrow / section head — */
  .eyebrow {
    display: block;
    margin-bottom: 0.85rem;
    color: var(--matcha);
  }
  .section-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

  /* — Status line — */
  .status-line {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--matcha);
    margin-top: 1.25rem;
  }

  /* — Hero — */
  .hero {
    position: relative;
    padding-block: clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid color-mix(in srgb, var(--plaster) 18%, transparent);
    overflow: clip;
  }
  .hero .wrap {
    display: grid;
    gap: 2.5rem;
    align-items: center;
  }
  @media (min-width: 1024px) {
    .hero .wrap { grid-template-columns: 1fr 38vw; min-height: calc(100dvh - 90px); }
  }
  .hero__copy { position: relative; z-index: 2; }
  .hero__wordmark { margin-bottom: 1.5rem; }
  .hero__wordmark svg { width: min(320px, 60vw); height: auto; color: var(--washi); }
  .hero h1 { margin-bottom: 1rem; }
  .hero .lead { margin-bottom: 1.75rem; }
  .hero__locator { margin-bottom: 1.75rem; }

  .hero__media {
    position: relative;
    border-left: 1px solid var(--teak);
  }
  .hero__media video, .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1180 / 2048;
  }
  @media (min-width: 1024px) {
    .hero__media { height: calc(100dvh - 90px); }
    .hero__media video, .hero__media img { aspect-ratio: auto; }
  }

  @media (max-width: 1023.98px) {
    .hero .wrap { padding-block: 0; }
    .hero__media {
      position: absolute;
      inset: 0;
      border-left: none;
      z-index: 0;
    }
    .hero {
      min-height: 100dvh;
      display: flex;
      align-items: flex-end;
      padding-block: 0;
    }
    .hero .wrap { min-height: auto; padding-block: 2.5rem clamp(3rem, 10vw, 4.5rem); }
    .hero__scrim {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, var(--ink) 0%, color-mix(in srgb, var(--ink) 55%, transparent) 45%, transparent 75%);
      z-index: 1;
    }
  }
  @media (min-width: 1024px) {
    .hero__scrim { display: none; }
  }

  /* — Photos (never exceed ~590 CSS px, brief §6.3) — */
  .figure { max-width: 480px; }
  .figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
  .figure figcaption {
    margin-top: 0.75rem;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--plaster);
    letter-spacing: 0.04em;
    text-transform: none;
  }

  /* — Placeholder panel (used where real photography is pending) — */
  .photo-placeholder {
    max-width: 480px;
    aspect-ratio: 4 / 5;
    border: 1px solid color-mix(in srgb, var(--teak) 55%, transparent);
    background:
      repeating-linear-gradient(135deg, transparent 0 22px, color-mix(in srgb, var(--teak) 10%, transparent) 22px 23px),
      var(--surface);
    display: flex;
    align-items: flex-end;
    padding: 1.25rem;
  }
  .photo-placeholder span {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    color: var(--plaster);
  }

  /* — Drink lists — */
  .bar-lists {
    display: grid;
    gap: 2rem;
    margin-block: 2rem;
  }
  @media (min-width: 560px) { .bar-lists { grid-template-columns: 1fr 1fr; } }
  .bar-list h3 {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teak-light);
    margin-bottom: 0.9rem;
    font-weight: 400;
  }
  .bar-list li {
    padding-block: 0.65rem;
    border-top: 1px solid color-mix(in srgb, var(--teak) 40%, transparent);
    font-size: var(--step-0);
  }
  .bar-list li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--teak) 40%, transparent); }

  /* — Sessions band — */
  .sessions {
    background: var(--surface);
    border-bottom: none;
  }
  .sessions .detail-line { margin-block: 1.5rem; }
  .sessions__inner { max-width: 640px; }

  /* — Quotes — */
  .quote blockquote {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 700;
    font-size: var(--step-1);
    line-height: 1.4;
    color: var(--washi);
    margin-bottom: 1rem;
  }
  .quote cite {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--plaster);
  }

  /* — Visit — */
  .visit__grid {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
  }
  @media (min-width: 860px) { .visit__grid { grid-template-columns: 1fr 1fr; } }
  .hours-table { font-family: var(--font-mono); font-size: var(--step-0); color: var(--washi); }
  .hours-table div { display: flex; justify-content: space-between; max-width: 320px; padding-block: 0.4rem; border-top: 1px solid color-mix(in srgb, var(--plaster) 25%, transparent); letter-spacing: 0.06em; }
  .hours-table div:last-child { border-bottom: 1px solid color-mix(in srgb, var(--plaster) 25%, transparent); }
  .contact-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
  .contact-list a { font-size: var(--step-1); color: var(--washi); }
  .contact-list a:hover { color: var(--teak-light); }

  .map-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    max-width: 480px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--teak) 55%, transparent);
  }
  .map-frame img { width: 100%; height: 100%; object-fit: cover; }
  .map-frame button {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ink) 45%, transparent);
  }
  .map-frame button span {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--washi);
    border: 1px solid var(--washi);
    padding: 0.75rem 1.25rem;
    border-radius: 2px;
  }
  .map-frame iframe { width: 100%; height: 100%; border: 0; }

  /* — Footer — */
  .site-footer {
    padding-block: 3rem;
    border-top: 1px solid color-mix(in srgb, var(--plaster) 18%, transparent);
  }
  .site-footer .wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  .site-footer .wordmark svg { width: 84px; }
  .site-footer p { color: var(--plaster); font-size: var(--step--1); font-family: var(--font-mono); letter-spacing: 0.06em; }

  /* — The Tonearm (signature element, §3) — */
  .tonearm {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 56px;
    z-index: 50;
    display: none;
    pointer-events: none;
  }
  @media (min-width: 1024px) {
    .tonearm { display: flex; flex-direction: column; align-items: center; }
  }
  .tonearm__track {
    position: relative;
    width: 1px;
    flex: 1;
    background: color-mix(in srgb, var(--plaster) 25%, transparent);
    margin-block: 2rem;
  }
  .tonearm__disc {
    position: absolute;
    left: 50%;
    top: calc(var(--scroll-progress) * 100%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--teak);
    transform: translate(-50%, -50%) rotate(calc(var(--scroll-progress) * 1turn));
    transition: top 60ms linear;
  }
  .tonearm__disc::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--matcha-bright); /* reserved use #1 of 2 */
  }
  .tonearm__arm {
    position: absolute;
    left: 50%;
    top: calc(var(--scroll-progress) * 100%);
    width: 22px;
    height: 1px;
    background: var(--teak);
    transform-origin: left center;
    transform: translate(-1px, -0.5px) rotate(calc(-35deg + var(--scroll-progress) * -40deg));
    transition: top 60ms linear;
  }
  .tonearm__label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: var(--plaster);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-bottom: 0.5rem;
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: reduce) {
    .tonearm__disc, .tonearm__arm { transition: none; }
  }

  /* mobile progress bar variant */
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 51;
    background: color-mix(in srgb, var(--plaster) 20%, transparent);
  }
  .scroll-progress__fill {
    height: 100%;
    width: calc(var(--scroll-progress) * 100%);
    background: var(--teak);
  }
  @media (min-width: 1024px) { .scroll-progress { display: none; } }

  .now-playing {
    position: fixed;
    top: 8px;
    left: 12px;
    z-index: 51;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: var(--plaster);
    background: color-mix(in srgb, var(--ink) 70%, transparent);
    padding: 2px 8px;
    border-radius: 2px;
  }
  @media (min-width: 1024px) { .now-playing { display: none; } }
}

/* ============================= UTILITIES ============================= */
@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .no-js .js-only { display: none !important; }
}