/* ==========================================================================
   Chikara — foundation
   Design tokens, reset, typography and utilities.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette — greens sampled from the crest artwork (#536A4F), creams from
     the same file, warm neutrals pulled from the hinoki and plaster in the
     restaurant photography. */
  --green-950: #0C110B;
  --green-900: #131B12;
  --green-850: #182117;
  --green-800: #22301E;
  --green-700: #2C3B28;
  --green-600: #3D5138;
  --green-500: #536A4F;
  --green-400: #71886B;
  --green-300: #9AAC94;

  --cream: #F4F1E6;
  --bone: #E7E0CE;
  --beige: #DED3BC;
  --sand: #CBBB9D;
  --clay: #B3A07E;
  --brass: #A98C57;
  /* Brass, deepened until it clears WCAG AA (4.5:1) on the bone and cream
     surfaces; the lighter brass only has enough contrast on dark green. */
  --brass-deep: #6F5B30;

  /* Semantic surface tokens. Sections re-declare these to flip theme. */
  --bg: var(--green-950);
  --bg-raised: var(--green-900);
  --fg: var(--cream);
  /* Muted clears WCAG AA on every surface, faint does not — the palette has
     no room for a third legible tier. So anything a reader needs (labels,
     captions, terms, notes, tab names) takes muted, and faint is reserved
     for marks that carry no information: eyebrow kickers, the vertical
     Japanese rail, chapter numerals, the wordmark's sub-line, placeholders. */
  --fg-muted: color-mix(in oklab, var(--cream) 58%, transparent);
  --fg-faint: color-mix(in oklab, var(--cream) 34%, transparent);
  --rule: color-mix(in oklab, var(--cream) 14%, transparent);
  --rule-strong: color-mix(in oklab, var(--cream) 26%, transparent);
  --accent: var(--sand);
  --pattern: url("../brand/seigaiha-dark.svg");

  /* Type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-jp: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --fs-hero: clamp(3.4rem, 13vw, 11rem);
  --fs-d1: clamp(2.5rem, 6vw, 5.25rem);
  --fs-d2: clamp(1.95rem, 3.9vw, 3.4rem);
  --fs-d3: clamp(1.4rem, 2.3vw, 2.05rem);
  --fs-d4: clamp(1.15rem, 1.5vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 1.35vw, 1.3rem);
  --fs-body: clamp(0.975rem, 0.95vw, 1.0625rem);
  --fs-sm: 0.875rem;
  /* The floor. Everything tracked and uppercased — eyebrows, captions, form
     labels, tabs, footer — lands here, so it has to stay legible rather than
     merely decorative. */
  --fs-xs: 0.75rem;

  /* Space */
  --gutter: clamp(1.25rem, 4.5vw, 4.75rem);
  --maxw: 1620px;
  --measure: 62ch;
  --section-y: clamp(4.5rem, 11vw, 10rem);
  --header-h: 5.25rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.6s;
  --dur-slow: 1.1s;

  color-scheme: dark;
}

/* Section-level theme flips. Applied with data-surface on any container. */
[data-surface="light"] {
  --bg: var(--bone);
  --bg-raised: var(--cream);
  --fg: var(--green-900);
  --fg-muted: color-mix(in oklab, var(--green-900) 66%, transparent);
  --fg-faint: color-mix(in oklab, var(--green-900) 40%, transparent);
  --rule: color-mix(in oklab, var(--green-900) 16%, transparent);
  --rule-strong: color-mix(in oklab, var(--green-900) 30%, transparent);
  --accent: var(--brass-deep);
  --pattern: url("../brand/seigaiha-light.svg");
  color-scheme: light;
}

[data-surface="forest"] {
  --bg: var(--green-800);
  --bg-raised: var(--green-700);
  --pattern: url("../brand/seigaiha-forest.svg");
}

[data-surface="ink"] {
  --bg: var(--green-950);
  --bg-raised: var(--green-900);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.is-locked {
  overflow: hidden;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  border-style: none;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

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

::selection {
  background: var(--green-500);
  color: var(--cream);
}

[data-surface="light"] ::selection {
  background: var(--sand);
  color: var(--green-900);
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.display-hero {
  font-size: var(--fs-hero);
  line-height: 0.86;
  letter-spacing: -0.03em;
}

.display-1 {
  font-size: var(--fs-d1);
  line-height: 0.98;
}

.display-2 {
  font-size: var(--fs-d2);
  line-height: 1.06;
}

.display-3 {
  font-size: var(--fs-d3);
  line-height: 1.16;
  letter-spacing: -0.005em;
}

.display-4 {
  font-size: var(--fs-d4);
  line-height: 1.25;
  letter-spacing: 0;
}

.italic {
  font-style: italic;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: var(--measure);
}

.prose {
  max-width: var(--measure);
  color: var(--fg-muted);
}

.prose > * + * {
  margin-top: 1.15em;
}

.prose strong {
  color: var(--fg);
  font-weight: 400;
}

/* Small letterspaced label used above every section heading. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.eyebrow::before {
  content: "";
  inline-size: clamp(1.5rem, 4vw, 3.25rem);
  block-size: 1px;
  background: currentColor;
  flex: none;
}

.eyebrow--plain::before {
  display: none;
}

.eyebrow .jp {
  color: var(--accent);
}

/* Over photography the sand accent can drop under 4.5:1 where the image
   brightens; on picture bands the accent defers to the eyebrow's colour. */
.cta-band .eyebrow .jp,
.hero .eyebrow .jp,
.masthead .eyebrow .jp,
.notfound .eyebrow .jp {
  color: inherit;
}

.jp {
  font-family: var(--font-jp);
  font-weight: 400;
  letter-spacing: 0.14em;
}

/* Vertical Japanese rail, used as an ornamental section marker. */
.jp-rail {
  writing-mode: vertical-rl;
  font-family: var(--font-jp);
  font-size: var(--fs-sm);
  letter-spacing: 0.5em;
  color: var(--fg-faint);
  text-transform: none;
  user-select: none;
}

.kanji-mark {
  font-family: var(--font-jp);
  line-height: 1;
  color: var(--accent);
}

.num {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.28em;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   4. Layout utilities
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow {
  max-width: 1100px;
}

.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--fg);
}

.section--flush-top {
  padding-block-start: 0;
}

.section--flush-bottom {
  padding-block-end: 0;
}

.section--tight {
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.stack {
  display: flex;
  flex-direction: column;
}

.stack-1 > * + * { margin-block-start: 0.5rem; }
.stack-2 > * + * { margin-block-start: 1rem; }
.stack-3 > * + * { margin-block-start: 1.5rem; }
.stack-4 > * + * { margin-block-start: 2.25rem; }
.stack-5 > * + * { margin-block-start: 3.25rem; }

.grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.grid-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.rule {
  block-size: 1px;
  inline-size: 100%;
  background: var(--rule);
  border: 0;
}

.center {
  text-align: center;
}

.center .lead,
.center .prose {
  margin-inline: auto;
}

.center .eyebrow {
  justify-content: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--cream);
  color: var(--green-900);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform 0.25s var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* Film grain. Sits above everything, never intercepts pointers. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-drift 6s steps(6) infinite;
}

@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* Seigaiha wash, applied to a positioned ancestor. */
.wave-wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--pattern);
  background-size: clamp(240px, 30vw, 480px);
  opacity: 0.9;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}

/* --------------------------------------------------------------------------
   5. Media
   -------------------------------------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  background: var(--green-850);
}

.media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.media--3-2 { aspect-ratio: 3 / 2; }
.media--4-3 { aspect-ratio: 4 / 3; }
.media--1-1 { aspect-ratio: 1 / 1; }
.media--4-5 { aspect-ratio: 4 / 5; }
.media--2-3 { aspect-ratio: 2 / 3; }
.media--16-9 { aspect-ratio: 16 / 9; }
.media--tall { aspect-ratio: 3 / 4; }

/* Slow drift applied to hero and feature imagery. */
.media--drift img {
  animation: drift 26s var(--ease-in-out) infinite alternate;
}

@keyframes drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); }
}

/* Warm veil that keeps text legible over photography. */
.veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, color-mix(in oklab, var(--green-950) 90%, transparent) 0%, transparent 55%),
    linear-gradient(to bottom, color-mix(in oklab, var(--green-950) 55%, transparent) 0%, transparent 45%);
}

.veil--even::after {
  background: color-mix(in oklab, var(--green-950) 42%, transparent);
}

/* --------------------------------------------------------------------------
   6. Scroll reveal
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="fade"] {
  transform: none;
}

/* The curtain clips the image, not the figure. Clipping the observed element
   itself would zero out its IntersectionObserver ratio (Chrome measures the
   clipped box), so a below-the-fold figure could never cross the threshold
   that reveals it — the clip would wait on the observer and the observer on
   the clip. */
[data-reveal="curtain"] {
  opacity: 1;
  transform: none;
}

[data-reveal="curtain"] img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.3s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="curtain"].is-in img {
  clip-path: inset(0 0 0 0);
}

[data-reveal="lines"] {
  opacity: 1;
  transform: none;
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* Words split by JS for line-by-line heading reveals. */
.reveal-line {
  display: block;
  overflow: hidden;
}

.reveal-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease-out);
  transition-delay: var(--line-delay, 0ms);
}

.reveal-line:nth-child(2) > span { --line-delay: 90ms; }
.reveal-line:nth-child(3) > span { --line-delay: 180ms; }
.reveal-line:nth-child(4) > span { --line-delay: 270ms; }
.reveal-line:nth-child(5) > span { --line-delay: 360ms; }

.is-in .reveal-line > span,
.reveal-line.is-in > span {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   7. Cross-document transitions & motion preferences
   -------------------------------------------------------------------------- */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-out 0.32s var(--ease-in-out) both;
}

::view-transition-new(root) {
  animation: vt-in 0.5s var(--ease-out) both;
}

@keyframes vt-out {
  to { opacity: 0; }
}

@keyframes vt-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal="curtain"] img,
  .reveal-line > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .grain {
    animation: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}