/* ============================================================
   釉 YŪ — colors.css  (COLORS page only)
   Swatch catalog / glaze picker playground / texture band.
   Every value derives from tokens.css custom properties;
   the two extended glaze hues below are the brand's own
   fired colors, treated as art direction for the catalog.
   ============================================================ */

:root{
  --glaze-shinsha:#9a3b2b; /* 辰砂 — kiln-shifted cinnabar */
  --glaze-kizeto: #c3a049; /* 黄瀬戸 — seto yellow */
}

/* ---------- header ----------
   The difference blend must live on the FIXED element itself (as on
   the home page) so it composites against the page content behind it.
   When it sat on the inner wrapper, the fixed header's own stacking
   context trapped the blend and the paper-coloured text rendered as-is
   over the paper background — invisible. */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:100; pointer-events:none;
  mix-blend-mode:difference; color:var(--kohiki); }
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3); padding-block:clamp(.85rem,2vw,1.35rem);
  pointer-events:auto;
}
.brand{ font-family:var(--font-mincho); font-weight:900; font-size:var(--step-1);
  letter-spacing:.04em; display:inline-flex; gap:.3em; align-items:baseline; }
.brand__latin{ font-family:var(--font-display); font-weight:500; font-size:.66em; letter-spacing:.06em; }
.site-nav{ display:flex; gap:clamp(1rem,3vw,2.4rem); font-family:var(--font-display);
  font-weight:500; text-transform:uppercase; letter-spacing:.14em; font-size:var(--step--1); }
.site-nav a[aria-current="page"]{ background-size:100% 1.5px; }
@media (max-width:720px){ .brand__latin{ display:none; } .site-nav{ gap:1rem; } }

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + var(--space-4)); overflow:hidden; }
.hero__grid{ width:100%; align-items:end; row-gap:var(--space-3); }
.hero__title{ font-size:clamp(3.6rem,10vw,11rem); line-height:var(--lh-display-jp);
  position:relative; z-index:2; margin-top:var(--space-2); }
/* keep the split-reveal mask from cropping ascenders/descenders */
.hero__title .split-word{ padding-block:.08em .04em; }
.hero__ghost{ position:absolute; top:6%; right:-3vw; z-index:0;
  font-size:clamp(6rem,27vw,26rem); }
.hero__index{ position:absolute; left:calc(var(--page-inline) * .34); top:50%;
  transform:translateY(-50%); color:var(--color-accent); z-index:3; letter-spacing:.2em; }
.hero__body{ align-self:end; }
.hero__body p{ color:color-mix(in srgb, var(--color-fg) 82%, transparent); }
.hero__vessel{ width:clamp(120px,16vw,200px); margin-top:var(--space-3); }
.vessel-echo .drop{ opacity:0; transform:translateY(0);
  transition:transform .9s var(--ease-in-out), opacity .5s var(--ease-out-quart); }
.hero__vessel:hover .vessel-echo .drop{ opacity:.95; transform:translateY(42px); }
.v-bisque{ fill:color-mix(in srgb, var(--hai) 52%, var(--kohiki)); }
.v-rim{ fill:var(--color-fg); fill-opacity:.16; }
.v-outline{ stroke:var(--color-fg); stroke-opacity:.5; stroke-width:2; }
.vessel-echo .drop{ fill:var(--color-accent); }

/* mobile: stop the vertical index + vessel from colliding with the copy */
@media (max-width:720px){
  .hero__index{ display:none; }
  .hero__grid{ row-gap:var(--space-4); }
  .hero__body{ margin-top:var(--space-3); }
  .hero__vessel{ width:clamp(110px,32vw,180px); margin-inline:0 auto; }
}

/* ---------- SWATCHES ---------- */
.swatches__head{ margin-bottom:var(--space-5); align-items:end; }
.swatches__intro p{ color:color-mix(in srgb, var(--color-fg) 78%, transparent); }
.swatch-grid{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gutter); }
.swatch{ display:flex; flex-direction:column; margin-bottom:var(--space-5); }
.swatch:nth-child(1){ grid-column:1 / 7; }
.swatch:nth-child(2){ grid-column:8 / 13; margin-top:var(--space-7); }
.swatch:nth-child(3){ grid-column:2 / 8; margin-top:calc(-1 * var(--space-4)); }
.swatch:nth-child(4){ grid-column:9 / 13; }
.swatch:nth-child(5){ grid-column:1 / 6; margin-top:var(--space-5); }
.swatch:nth-child(6){ grid-column:7 / 12; margin-top:calc(-1 * var(--space-4)); }
.swatch:nth-child(7){ grid-column:3 / 9; }
.swatch:nth-child(8){ grid-column:9 / 13; margin-top:calc(-1 * var(--space-6)); }
@media (max-width:720px){
  .swatch-grid{ grid-template-columns:1fr; }
  .swatch, .swatch:nth-child(n){ grid-column:1 / -1; margin-top:0; margin-bottom:var(--space-4); }
}

.swatch__field{
  position:relative; aspect-ratio:4 / 5; overflow:hidden; isolation:isolate; border-radius:2px;
  --gm:var(--ruri); --gd:#0d2233; color:var(--color-bg);
  background:
    radial-gradient(120% 78% at 22% 6%, color-mix(in srgb,#fff 20%,transparent), transparent 55%),
    radial-gradient(96% 72% at 82% 92%, color-mix(in srgb, var(--gd) 60%, transparent), transparent 62%),
    conic-gradient(from 210deg at 66% 76%, color-mix(in srgb,#000 22%,transparent), transparent 46%),
    linear-gradient(155deg, var(--gm), color-mix(in srgb, var(--gm) 52%, var(--gd)));
}
/* 釉だれ — running glaze */
.swatch__field::before{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; opacity:.6;
  background:
    radial-gradient(7px 70px at 30% -2%, color-mix(in srgb,#fff 22%,transparent), transparent 70%),
    radial-gradient(9px 110px at 61% -2%, color-mix(in srgb,#000 24%,transparent), transparent 72%),
    radial-gradient(6px 60px at 84% -2%, color-mix(in srgb,#fff 18%,transparent), transparent 70%);
}
/* 貫入 — crackle */
.swatch__field::after{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='0.6'%3E%3Cpath d='M20 0 L34 40 L18 78 L40 120 L26 180'/%3E%3Cpath d='M90 0 L78 44 L104 82 L86 130 L110 180'/%3E%3Cpath d='M150 0 L138 48 L160 90 L146 140 L168 180'/%3E%3Cpath d='M0 60 L60 52 L120 66 L180 58'/%3E%3Cpath d='M0 120 L54 128 L118 116 L180 126'/%3E%3C/g%3E%3C/svg%3E");
  background-size:180px 180px;
}
.g-ruri{   --gm:var(--ruri);          --gd:#0d2233; }
.g-oribe{  --gm:var(--oribe);         --gd:#1d2a17; }
.g-ame{    --gm:var(--ame);           --gd:#5a2708; }
.g-kohiki .swatch__field{ --gm:var(--kohiki); --gd:#c6bda9; color:var(--color-fg); }
.g-shinsha{--gm:var(--glaze-shinsha); --gd:#3a120b; }
.g-kizeto .swatch__field{ --gm:var(--glaze-kizeto); --gd:#5c4410; color:var(--color-fg); }
.g-namako{ --gm:var(--ruri);         --gd:#e5ded0; }
.g-tetsu{  --gm:#2a2620;             --gd:#050505; }

.swatch__name{
  position:absolute; left:.7em; bottom:.7em; writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--font-mincho); font-weight:900; font-size:var(--step-2);
  font-feature-settings:"palt" 1; letter-spacing:.05em; color:currentColor;
  text-shadow:0 1px 24px rgba(0,0,0,.28); z-index:2;
}
.g-kohiki .swatch__name, .g-kizeto .swatch__name, .g-namako .swatch__name{ text-shadow:none; }
.swatch__temp{ position:absolute; top:.9em; right:1em; z-index:2;
  color:color-mix(in srgb, currentColor 78%, transparent); }
.swatch__foot{ display:flex; align-items:baseline; gap:var(--space-2); margin-top:var(--space-2); }
.swatch__num{ font-size:var(--step-0); color:var(--color-muted); }
.swatch__caption{ font-size:var(--step--1); color:var(--color-muted); max-width:34ch; }

/* signature echo — a single ame drop falls on hover */
.drip-drop{
  position:absolute; left:50%; top:12%; width:12px; height:16px; z-index:2;
  margin-left:-6px; border-radius:50% 50% 56% 56%; background:var(--color-accent);
  opacity:0; transform:translateY(0) scale(.6);
  transition:transform .85s var(--ease-in-out), opacity .5s var(--ease-out-quart);
}
.swatch:hover .drip-drop, .swatch:focus-within .drip-drop{ opacity:.92; transform:translateY(230%) scale(1); }

/* ---------- PICKER ---------- */
.picker__grid{ align-items:center; row-gap:var(--space-5); }
.picker__intro h2{ margin:var(--space-2) 0 var(--space-3); }
.picker__intro > p{ color:color-mix(in srgb, var(--color-fg) 82%, transparent); }
.picker__controls{ margin-top:var(--space-4); }
.control{ display:flex; flex-direction:column; gap:.55rem; margin-top:var(--space-3);
  padding-top:var(--space-3); border-top:1px solid var(--fg-12); }
.control__label{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-family:var(--font-display); font-weight:500; text-transform:uppercase;
  letter-spacing:.12em; font-size:var(--step--1); color:var(--color-muted); }
.control__label span:last-child{ font-family:var(--font-mincho); font-weight:600; text-transform:none;
  letter-spacing:.02em; color:var(--color-fg); }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:2px;
  background:var(--fg-15); border-radius:2px; cursor:pointer; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px;
  border-radius:50%; background:var(--accent-live); border:2px solid var(--color-bg);
  box-shadow:0 0 0 1px var(--fg-15); transition:transform .2s var(--ease-out-expo); }
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.12); }
input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%;
  background:var(--accent-live); border:2px solid var(--color-bg); box-shadow:0 0 0 1px var(--fg-15); }
.picker__fire{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  margin-top:var(--space-4); }
.picker__fired{ font-size:var(--step--1); color:var(--color-muted); }
.picker__fired span{ font-family:var(--font-mincho); font-weight:600; color:var(--color-fg); }

.picker__stage{ display:flex; justify-content:center; }
.vessel-wrap{ position:relative; width:min(100%, 30rem); }
.vessel-wrap svg{ width:100%; height:auto; filter:drop-shadow(0 30px 40px color-mix(in srgb, var(--tetsu) 22%, transparent)); }
.vessel-caption{ position:absolute; right:-1.6em; top:50%; transform:translateY(-50%);
  color:var(--color-muted); letter-spacing:.24em; }
#vessel-gloss{ transition:opacity .5s var(--ease-out-quart); }
#vessel-glaze, #vessel-drips path{ transition:fill .45s var(--ease-out-quart); }
@media (max-width:720px){ .vessel-caption{ display:none; } }

/* ---------- TEXTURE ---------- */
.texture{ position:relative; padding-block:var(--space-6); overflow:hidden; color:var(--kohiki); }
.texture__side{ position:absolute; top:var(--space-4); right:var(--page-inline);
  writing-mode:vertical-rl; font-family:var(--font-display); font-weight:500;
  text-transform:uppercase; letter-spacing:.24em; font-size:var(--step--1);
  color:color-mix(in srgb, var(--kohiki) 55%, transparent); }
.texture__eyebrow{ color:color-mix(in srgb, var(--kohiki) 60%, transparent); }
.texture__head{ position:relative; z-index:2; }
.texture__head h2{ color:var(--kohiki); }
.texture__panels{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); margin-top:var(--space-4); }
.texture__panel{ position:relative; aspect-ratio:4 / 3; overflow:hidden; border-radius:2px; }
.texture__surface{ position:absolute; inset:0; }
.texture__tag{ position:absolute; left:1em; bottom:1em; z-index:2;
  color:color-mix(in srgb, var(--kohiki) 85%, transparent); }
.surface-gloss{
  background:linear-gradient(118deg,
    #060606 0%,
    color-mix(in srgb, var(--hai) 80%, #fff) 40%,
    #ffffff 49%,
    color-mix(in srgb, var(--tetsu) 70%, var(--hai)) 58%,
    #0a0a0a 100%);
}
.surface-matte{ background:color-mix(in srgb, var(--kohiki) 20%, var(--tetsu)); }
.surface-matte::after{
  content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.7'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
.texture__body{ margin-top:var(--space-4); }
.texture__body p{ color:color-mix(in srgb, var(--kohiki) 82%, transparent); }
@media (max-width:720px){ .texture__panels{ grid-template-columns:1fr; } }

/* ---------- FOOTER ---------- */
.site-footer{ position:relative; background:var(--color-bg); padding-bottom:var(--space-4); }
.footer-cta{ padding-block:var(--space-6) var(--space-5); }
.footer-cta .label{ color:var(--color-muted); }
.footer-cta__title{ font-size:var(--step-3); margin:var(--space-2) 0 var(--space-3); max-width:20ch; }
.footer-cta__lead{ color:color-mix(in srgb, var(--color-fg) 80%, transparent); }
.footer-cta__btn{ margin-top:var(--space-4); }
.footer-grid{ padding-block:var(--space-4); align-items:start; }
.footer-nav{ display:flex; flex-direction:column; gap:.6em; align-items:flex-start;
  font-family:var(--font-mincho); font-weight:600; font-size:var(--step-1); }
.footer-contact p{ margin-top:.35em; }
.footer-contact .label{ margin-bottom:.6em; }
.footer-place{ color:var(--color-muted); font-size:var(--step--1); margin-top:.9em; }
.footer-wordmark{ display:block; text-align:center; font-family:var(--font-mincho); font-weight:900;
  font-size:clamp(4rem,12vw,11rem); line-height:.9; letter-spacing:.02em;
  padding-block:var(--space-4) var(--space-3); font-feature-settings:"palt" 1; }
.footer-wordmark .display-latin{ font-size:.5em; letter-spacing:.04em; }
.footer-marquee{ font-family:var(--font-mincho); font-weight:600; font-size:var(--step-1);
  color:var(--color-muted); padding-block:var(--space-2); border-block:1px solid var(--fg-12); }
.footer-marquee .marquee-track > span::after{ content:"／"; margin-left:clamp(1.5rem,4vw,4rem);
  color:var(--fg-15); }
.footer-base{ display:flex; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap;
  padding-top:var(--space-3); font-size:var(--step--1); color:var(--color-muted); }