/* ============================================================
   base.css
   ────────────────────────────────────────────────────────────
   Reset + global typography + page chrome (header, footer,
   skip-link, primary CTAs). Section-specific styles live in
   sections.css.
   ============================================================ */

/* ── 1. Tiny modern reset ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
input, button, textarea, select { font: inherit; color: inherit; }

/* ── 2. Page chrome ────────────────────────────────────────── */
html {
  /* Lock background-paint to opaque dark so the URL bar / iOS rubber-band
     doesn't flash white when the user over-scrolls. */
  background: var(--sumi-800);
  /* Smooth anchor-jumps. Native, hardware-accelerated, free. */
  scroll-behavior: smooth;
  /* Hint the browser our color scheme is dark — affects form controls etc. */
  color-scheme: dark;
}

body {
  background: var(--sumi-800);
  color: var(--washi-100);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Reserve space for the fixed header on anchor jumps. */
  scroll-padding-top: calc(var(--header-h) + 16px);
  overflow-x: clip;          /* never let a stray transform create a horizontal scrollbar */
}

/* ── 3. Selection & focus ──────────────────────────────────── */
::selection { background: var(--akami); color: var(--washi-50); }
:focus-visible {
  outline: 2px solid var(--yuzu);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Skip link — visible on focus only, jumps over header */
.skip-link {
  position: fixed;
  top: -100px; left: 16px;
  background: var(--washi-50);
  color: var(--sumi-800);
  padding: 12px 18px;
  border-radius: var(--r-md);
  font-weight: 600;
  z-index: 100;
  transition: top var(--dur-1) var(--ease-out);
}
.skip-link:focus { top: 16px; }

/* ── 4. Typography defaults ────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--washi-50);
}
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; }
p  { color: var(--washi-100); }

em { font-style: italic; }
strong { font-weight: 600; }

/* Italic display lock-ups — used inline inside big headlines */
.story__title-italic,
.menu__title-italic,
.locations__title-italic,
.voices__title-italic,
.visit__title-italic,
.hero__title-line--italic {
  font-style: italic;
  font-weight: 400;
  color: var(--washi-300);
  display: inline-block;
}

/* Eyebrow / section tag — uppercase tracked Manrope */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-ui);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--washi-300);
  margin-bottom: var(--space-5);
}
.section-tag::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

/* ── 5. Site header ────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);

  /* Frosted glass once shrunk; transparent at the top of the page. */
  background: transparent;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  /* The border below appears when the header sticks. */
  border-bottom: 1px solid transparent;
  transition:
    background var(--dur-2) var(--ease-out),
    backdrop-filter var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
  /* GPU layer hint so the blur transition doesn't jank. */
  will-change: background-color, backdrop-filter;
}
.site-header[data-shrink="true"] {
  background: rgba(8, 7, 10, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: rgba(255,255,255,0.06);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brand__mark {
  width: 38px;
  height: 38px;
  object-fit: contain;
  /* The supplied logo has a near-white background; invert it on dark surface. */
  filter: invert(1) brightness(1.05);
  /* Subtle plate-like circular crop */
  border-radius: 50%;
}
.brand__wordmark {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--washi-50);
  white-space: nowrap;
}

/* Primary nav — center column. Hides under 720px so the layout breathes. */
.primary-nav ul {
  display: flex;
  gap: var(--space-7);
  justify-content: center;
}
.primary-nav a {
  position: relative;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--washi-100);
  padding: 6px 0;
  letter-spacing: 0.01em;
  transition: color var(--dur-1) var(--ease-out);
}
.primary-nav a::after {
  /* Animated underline that reveals on hover from left to right. */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--yuzu);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-2) var(--ease-out);
}
.primary-nav a:hover { color: var(--washi-50); }
.primary-nav a:hover::after { transform: scaleX(1); }

@media (max-width: 760px) {
  .primary-nav { display: none; }
  .site-header { grid-template-columns: auto 1fr; }
}

/* ── 6. Primary CTAs (used in header + hero + visit) ───────── */
.cta {
  --cta-fg: var(--sumi-800);
  --cta-bg: var(--washi-50);

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cta-fg);
  background: var(--cta-bg);
  overflow: hidden;
  isolation: isolate;
  /* Slight transform so we can animate a y-lift on hover */
  transform: translateZ(0);
  transition:
    transform var(--dur-2) var(--ease-spring),
    color var(--dur-1) var(--ease-out);
}
.cta--lg { padding: 16px 28px; font-size: 1rem; }
.cta--solid { --cta-fg: var(--sumi-800); --cta-bg: var(--washi-50); }
.cta--ghost {
  --cta-fg: var(--washi-50);
  --cta-bg: transparent;
  border: 1px solid rgba(244,239,227,0.28);
}

.cta::before {
  /* The akami sweep — a tuna-red disc that slides in from the bottom on hover.
     Pure transform, GPU-cheap. The text color flips via plain :hover rule. */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--akami);
  transform: translateY(101%);
  transition: transform var(--dur-3) var(--ease-out);
  z-index: -1;
}
.cta:hover {
  color: var(--washi-50);
  transform: translateY(-2px);
}
.cta:hover::before { transform: translateY(0); }

.cta__arrow {
  display: inline-block;
  transition: transform var(--dur-2) var(--ease-spring);
}
.cta:hover .cta__arrow { transform: translateX(4px); }

/* ── 7. Footer ─────────────────────────────────────────────── */
.site-footer {
  background: var(--sumi-900);
  padding: var(--space-9) var(--gutter) var(--space-6);
  color: var(--washi-300);
}
.site-footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-7);
}
@media (max-width: 720px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 38ch;
}
.site-footer__brand img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  filter: invert(1) brightness(1.05);
  object-fit: contain;
}
.site-footer__brand p { color: var(--washi-300); font-size: 0.92rem; }

.site-footer__nav h3 {
  font-family: var(--font-ui);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--washi-500);
  margin-bottom: var(--space-4);
}
.site-footer__nav ul { display: flex; flex-direction: column; gap: 10px; }
.site-footer__nav a {
  color: var(--washi-100);
  font-size: 0.95rem;
  transition: color var(--dur-1) var(--ease-out);
}
.site-footer__nav a:hover { color: var(--yuzu); }

.site-footer__rule {
  max-width: var(--maxw);
  margin: var(--space-8) auto var(--space-5);
  height: 1px;
  background: var(--sumi-500);
}
.site-footer__fine {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
  color: var(--washi-500);
}
@media (max-width: 560px) {
  .site-footer__fine { flex-direction: column; gap: var(--space-2); }
}

/* ── 8. Reveal-on-scroll primitive ─────────────────────────── */
/* Elements tagged with data-reveal start translated + faded.
   js/scroll.js flips them to .is-revealed when they intersect. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* Once revealed, drop the will-change hint so we're not paying for an extra layer. */
[data-reveal].is-settled { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}