/* ============================================================
   釉 YŪ — story.css  (page-specific: STORY / 釉薬という文化)
   Only tokens from tokens.css are used. No new palette, no new
   font families. Grammar: "melt, then settle."
   ============================================================ */

/* ---------- header ----------
   Keep the difference blend on the FIXED element itself (as on the home
   page). On the inner wrapper the fixed header's own stacking context
   trapped the blend, so the paper-coloured text showed as-is over the
   paper background and vanished. */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 8000;
  pointer-events: none;
  mix-blend-mode: difference;
  color: var(--kohiki);
}
.header-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
}
.brand { display: inline-flex; align-items: baseline; gap: 0.4em; }
.brand-mark { font-family: var(--font-mincho); font-weight: 900; font-size: var(--step-1); line-height: 1; }
.brand-latin { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.14em; font-size: var(--step--1); text-transform: uppercase; }
.site-nav ul { display: flex; gap: clamp(1rem, 3vw, 2.4rem); }
.site-nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-nav a.is-current { font-weight: 900; }
@media (max-width: 720px) {
  .site-nav ul { gap: 1rem; }
}

/* ---------- shared bits ---------- */
.label.light { color: color-mix(in srgb, var(--kohiki) 70%, transparent); }
.on-dark { color: var(--kohiki); }
.on-dark-body { color: color-mix(in srgb, var(--kohiki) 84%, transparent); }

/* ============ HERO ============ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + var(--space-3));
  padding-bottom: var(--space-5);
  overflow: clip;
}
.hero-grid { width: 100%; align-items: center; row-gap: var(--space-3); }
.hero-head { align-self: start; }
.hero-head .label { margin-bottom: var(--space-2); }
.hero h1 {
  font-size: clamp(3.4rem, 10.5vw, 9.5rem);
  letter-spacing: 0.005em;
  margin-left: -0.03em;
}
.hero-body { align-self: end; }
.hero-body p {
  max-width: 40ch;
  color: color-mix(in srgb, var(--color-fg) 90%, transparent);
}

.hero-index {
  position: absolute;
  left: clamp(0.5rem, 2.2vw, 1.75rem);
  top: 30vh;
  color: var(--accent-live);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  z-index: 3;
}

.crack {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}
.crack svg { width: 100%; height: 100%; }
.crack-line {
  fill: none;
  stroke: var(--fg-12);
  stroke-width: 1.2;
}

.hero-art-wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  grid-row: 1 / span 2;
  align-self: center;
  z-index: 2;
}
.hero-art {
  position: relative;
  width: min(34vw, 340px);
  filter: drop-shadow(0 30px 40px color-mix(in srgb, var(--tetsu) 18%, transparent));
  transition: filter 0.9s var(--ease-out-expo);
}
.vessel-svg { width: 100%; height: auto; overflow: visible; }
.art-cap {
  position: absolute;
  bottom: -1.8em;
  right: 0.2em;
  color: var(--color-muted);
}
@media (max-width: 720px) {
  .hero-art-wrap { grid-row: auto; justify-content: center; margin-block: var(--space-3); }
  .hero-art { width: min(62vw, 300px); }
}

/* vessel SVG parts */
.bisque { fill: color-mix(in srgb, var(--hai) 42%, var(--kohiki)); }
.rim-in { fill: color-mix(in srgb, var(--hai) 70%, var(--tetsu)); opacity: 0.4; }
.rim-line { fill: none; stroke: color-mix(in srgb, var(--tetsu) 55%, transparent); stroke-width: 1.4; }
.vessel-outline { fill: none; stroke: color-mix(in srgb, var(--tetsu) 60%, transparent); stroke-width: 1.6; }
.glz-a { stop-color: var(--ruri); }
.glz-b { stop-color: var(--oribe); }
.glz-c { stop-color: var(--ame); }
.glaze-fill { will-change: transform; }
.drip { fill: none; stroke-width: 3.4; stroke-linecap: round; opacity: 0.9; }
.drip--ame { stroke: var(--ame); }
.drip--ruri { stroke: color-mix(in srgb, var(--ruri) 60%, var(--kohiki)); }
.drip--oribe { stroke: color-mix(in srgb, var(--oribe) 62%, var(--kohiki)); }
.spec {
  fill: var(--kohiki);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out-expo);
}
.hero-art.is-fired { filter: drop-shadow(0 30px 44px color-mix(in srgb, var(--tetsu) 24%, transparent)) contrast(1.06) saturate(1.1) brightness(1.03); }
.hero-art.is-fired .spec { opacity: 0.5; }

/* ============ ORIGIN ============ */
.origin { padding-block: var(--space-7); }
.origin-grid { align-items: center; }
.origin-num-col { position: relative; }
.origin-num {
  display: block;
  font-size: clamp(5rem, 20vw, 15rem);
  font-weight: 300;
  line-height: 0.82;
  color: var(--fg-15);
  letter-spacing: -0.04em;
}
.origin-vlabel {
  position: absolute;
  top: 0.2em;
  right: -0.4em;
  color: var(--color-muted);
}
.origin-body .label { margin-bottom: var(--space-2); }
.origin-body h2 { margin-bottom: var(--space-3); }
.origin-body .hairline { margin-bottom: var(--space-3); }
.origin-body strong { color: var(--accent-live); font-weight: 700; }
@media (max-width: 720px) {
  .origin-num { font-size: clamp(4.5rem, 32vw, 9rem); }
  .origin-vlabel { position: static; display: inline-block; writing-mode: horizontal-tb; margin-top: 0.5rem; }
}

/* ============ PROCESS ============ */
.process { padding-block: var(--space-4); --p: 0; }
.process-band {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}
.panel-kiln {
  background:
    radial-gradient(90% 70% at 78% 8%, color-mix(in srgb, var(--ame) 26%, transparent), transparent 55%),
    radial-gradient(70% 60% at 12% 96%, color-mix(in srgb, var(--ruri) 30%, transparent), transparent 60%),
    linear-gradient(155deg, color-mix(in srgb, var(--tetsu) 92%, var(--ame)), var(--tetsu));
}
.process-inner {
  position: relative;
  padding-block: var(--space-7);
}
.process-ghost {
  position: absolute;
  top: 0.1em;
  right: var(--page-inline);
  font-size: clamp(4rem, 16vw, 13rem);
  color: color-mix(in srgb, var(--kohiki) 5%, transparent);
  z-index: 0;
}
.process-grid { position: relative; z-index: 1; align-items: start; }
.process-head { position: sticky; top: calc(var(--nav-h) + 2vh); align-self: start; }
.process-head h2 { margin-block: var(--space-2) var(--space-3); }
.process-head .on-dark-body { max-width: 34ch; }

.process-steps { position: relative; padding-left: clamp(1.5rem, 4vw, 3.5rem); }
.process-line {
  position: absolute;
  left: 0;
  top: 0.4em;
  bottom: 0.4em;
  width: 1px;
  background: color-mix(in srgb, var(--kohiki) 16%, transparent);
  overflow: hidden;
}
.process-line-fill {
  position: absolute;
  inset: 0;
  background: var(--accent-live);
  transform: scaleY(var(--p));
  transform-origin: top;
}
.steps { display: grid; gap: var(--space-6); }
.step { position: relative; }
.step-no { color: color-mix(in srgb, var(--kohiki) 60%, transparent); display: block; margin-bottom: var(--space-1); }
.step-vlabel {
  position: absolute;
  left: calc(-1 * clamp(1.5rem, 4vw, 3.5rem) - 1.1em);
  top: 0;
  font-family: var(--font-mincho);
  font-weight: 900;
  font-size: var(--step-1);
  color: color-mix(in srgb, var(--kohiki) 50%, transparent);
}
.step-title { font-size: var(--step-2); margin-bottom: var(--space-2); }
.step .on-dark-body { max-width: 32ch; }

.process-vessel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(70px, 9vw, 110px);
  text-align: center;
}
.process-vessel svg { width: 100%; height: auto; }
.process-vessel .bisque { fill: color-mix(in srgb, var(--hai) 40%, var(--tetsu)); }
.pv-glaze { fill: var(--ame); }
.pv-spec { fill: var(--kohiki); mix-blend-mode: screen; opacity: calc(0.15 + var(--p) * 0.6); }
.process-vessel svg { filter: saturate(calc(0.5 + var(--p) * 0.8)) brightness(calc(0.9 + var(--p) * 0.25)); transition: filter 0.2s linear; }
.pv-cap { display: block; margin-top: 0.5em; color: color-mix(in srgb, var(--kohiki) 55%, transparent); }
@media (max-width: 720px) {
  .process-head { position: static; }
  .process-vessel { position: static; margin-top: var(--space-3); width: 90px; text-align: left; }
  .step-vlabel { position: static; writing-mode: horizontal-tb; display: inline-block; margin-bottom: 0.2em; }
}

/* ============ PEOPLE ============ */
.people { padding-block: var(--space-7); }
.people-grid { align-items: start; }
.people-head { position: sticky; top: calc(var(--nav-h) + 3vh); }
.people-head h2 { margin-block: var(--space-2) var(--space-3); }
.people-head p { max-width: 30ch; color: color-mix(in srgb, var(--color-fg) 78%, transparent); }

.index-list { display: block; }
.prow {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "no swatch name"
    "no swatch role"
    "cap cap cap";
  align-items: center;
  column-gap: clamp(0.75rem, 2vw, 1.5rem);
  row-gap: 0.2rem;
  padding-block: var(--space-3);
}
.prow-no { grid-area: no; align-self: start; padding-top: 0.5em; }
.prow-swatch {
  grid-area: swatch;
  width: clamp(48px, 6vw, 80px);
  aspect-ratio: 1;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.prow-swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 30% 20%, color-mix(in srgb, #fff 24%, transparent), transparent 60%),
    conic-gradient(from 210deg at 70% 80%, color-mix(in srgb, #000 34%, transparent), transparent 45%);
}
.sw-ame { background: var(--ame); }
.sw-oribe { background: var(--oribe); }
.sw-ruri { background: var(--ruri); }
.prow-name {
  grid-area: name;
  font-family: var(--font-mincho);
  font-weight: 900;
  font-size: var(--step-2);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
.prow-name small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--color-muted);
  letter-spacing: 0.12em;
}
.prow-role {
  grid-area: role;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step-0);
  color: color-mix(in srgb, var(--color-fg) 76%, transparent);
}
.prow-cap {
  grid-area: cap;
  margin-top: 0.4em;
  color: var(--color-muted);
  font-size: var(--step-0);
}
.prow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--accent-live);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out-expo);
}
.prow:hover::after,
.prow:focus-within::after { transform: scaleX(1); }
@media (max-width: 720px) {
  .people-head { position: static; }
  .prow-name { font-size: var(--step-1); }
}

/* ============ CONTACT ============ */
.contact { padding-block: var(--space-3); }
.panel-ruri {
  background:
    radial-gradient(100% 80% at 82% 10%, color-mix(in srgb, #fff 16%, transparent), transparent 55%),
    conic-gradient(from 210deg at 24% 88%, color-mix(in srgb, var(--tetsu) 40%, transparent), transparent 42%),
    linear-gradient(158deg, var(--ruri), color-mix(in srgb, var(--ruri) 62%, var(--tetsu)));
}
.contact-band { position: relative; width: 100%; overflow: hidden; isolation: isolate; }
.contact-inner { position: relative; padding-block: var(--space-7); }
.contact-ghost {
  position: absolute;
  bottom: -0.18em;
  left: var(--page-inline);
  font-size: clamp(5rem, 20vw, 16rem);
  color: color-mix(in srgb, var(--kohiki) 18%, transparent);
  -webkit-text-stroke: 1px color-mix(in srgb, var(--kohiki) 22%, transparent);
  z-index: 0;
}
.contact-grid { position: relative; z-index: 1; align-items: center; }
.contact-h { font-size: clamp(2.6rem, 8vw, 6rem); }
.contact-body { align-self: center; }
.contact-body .on-dark-body { max-width: 40ch; }
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-block: var(--space-3);
}
.clink {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  color: var(--kohiki);
  letter-spacing: 0.01em;
}
.clink .link-underline { color: inherit; }
.contact-note { color: color-mix(in srgb, var(--kohiki) 62%, transparent); }

/* ============ FOOTER ============ */
.site-footer {
  position: relative;
  padding-top: var(--space-5);
  overflow: hidden;
}
.footer-top {
  padding-block: var(--space-4) var(--space-5);
  align-items: start;
}
.footer-lead .footer-blurb { margin-top: var(--space-2); max-width: 34ch; color: color-mix(in srgb, var(--color-fg) 76%, transparent); }
.footer-nav ul, .footer-contact ul { display: grid; gap: 0.5rem; }
.footer-nav a, .footer-contact a {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--step--1);
}
.col-8-10 { grid-column: 8 / 11; }
.col-11-12 { grid-column: 11 / 13; }
@media (max-width: 720px) {
  .col-8-10, .col-11-12 { grid-column: 1 / -1; }
}

.footer-big {
  font-family: var(--font-mincho);
  font-weight: 900;
  font-size: clamp(4.5rem, 22vw, 18rem);
  line-height: 0.82;
  letter-spacing: 0.02em;
  text-align: center;
  padding-inline: var(--page-inline);
  margin-block: var(--space-2);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1em;
}
.footer-big-latin {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 0.5em;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.footer-marquee {
  border-top: 1px solid var(--fg-12);
  border-bottom: 1px solid var(--fg-12);
  padding-block: var(--space-2);
  margin-top: var(--space-2);
}
.footer-marquee span {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: var(--step-1);
  color: color-mix(in srgb, var(--color-fg) 60%, transparent);
}
.footer-marquee .dot { color: var(--accent-live); font-size: var(--step-0); }

.footer-base { padding-block: var(--space-3) var(--space-4); }
.footer-base .hairline { margin-bottom: var(--space-3); }
.footer-base-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
}
.footer-base-row .index-mono { color: var(--color-muted); }

/* ---------- reduced motion: show scrub state fully ---------- */
@media (prefers-reduced-motion: reduce) {
  .process { --p: 1; }
  .hero-art .spec { opacity: 0.45; }
  .hero-art { filter: contrast(1.05) saturate(1.08); }
  .prow::after { transition: none; }
}