/* ============================================================
   釉 YŪ — index.css  (home page only)
   Builds on tokens.css. Uses only :root tokens; no new hex
   except SVG-internal glaze tints already in the palette.
   ============================================================ */

.svg-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;}

/* ---------- header / nav (mix-blend difference) ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:8000;mix-blend-mode:difference;color:#fff;}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);height:var(--nav-h);padding-inline:var(--page-inline);}
.brand{display:inline-flex;align-items:baseline;gap:.35em;color:#fff;font-family:var(--font-mincho);font-weight:900;letter-spacing:.04em;}
.brand-jp{font-size:var(--step-1);font-feature-settings:"palt" 1;}
.brand-latin{font-family:var(--font-display);font-weight:900;font-size:var(--step-0);letter-spacing:.06em;}
.nav-list{display:flex;gap:clamp(.9rem,3.5vw,2.75rem);}
.nav-list a{position:relative;display:inline-block;padding-block:.5em;color:#fff;font-family:var(--font-display);font-weight:500;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.18em;}
.nav-list a::after{content:"";position:absolute;left:0;right:0;bottom:.2em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out-quart);}
.nav-list a:hover::after,.nav-list a:focus-visible::after,.nav-list a.is-current::after{transform:scaleX(1);}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding-top:calc(var(--nav-h) + var(--space-3));padding-bottom:var(--space-6);overflow:hidden;}
.hero-inner{position:relative;width:var(--maxw);max-width:100%;margin-inline:auto;padding-inline:var(--page-inline);}
/* editorial hairline composes the upper band so the top third reads as
   intentional silence rather than a vacant, unfinished screen */
.hero-inner::before{content:"";position:absolute;left:var(--page-inline);right:var(--page-inline);top:calc(-1 * var(--space-3));height:1px;background:var(--fg-12);z-index:2;}
.hero-tag{position:absolute;top:0;left:calc(var(--page-inline) - .3rem);color:var(--color-accent);font-size:var(--step--1);letter-spacing:.24em;z-index:4;}
.hero-title{position:relative;z-index:3;margin:0;font-size:clamp(3.4rem,10vw,10.5rem);line-height:.98;letter-spacing:.02em;max-width:12ch;}
/* give the overflow:hidden split wrappers vertical breathing room so
   ascenders/descenders are never cropped inside the reveal mask */
.hero-title .split-word{padding-block:.09em .04em;}
.hero-lead{position:absolute;top:0;right:var(--page-inline);width:min(40ch,40%);z-index:3;}
.hero-lead .label{margin-bottom:var(--space-2);}
.hero-lead p{color:var(--color-fg);}
.hero-hint{margin-top:var(--space-2);font-size:var(--step--1);color:var(--color-muted);}
.hero-stage{position:absolute;right:-2%;top:47%;transform:translateY(-50%);width:min(48vw,540px);z-index:1;cursor:crosshair;touch-action:pan-y;}
.hero-stage .vessel{width:100%;height:auto;overflow:visible;}
.vessel-shadow{fill:#17140f;fill-opacity:.12;}
.hero-wet{opacity:var(--wet,0);filter:url(#glazeTurb);transition:opacity .6s var(--ease-out-quart);}
.hero-stage.is-fired{--wet:.8;}
#heroGlaze .drip{opacity:.85;}
.drip.drip-run{transform-box:fill-box;transform-origin:top center;animation:dripGrow 1.9s var(--ease-out-quart) forwards;}
@keyframes dripGrow{0%{transform:scaleY(0);opacity:.9}50%{transform:scaleY(1);opacity:.85}100%{transform:scaleY(1);opacity:0}}
.hero-scroll{position:absolute;bottom:var(--space-3);right:var(--page-inline);writing-mode:vertical-rl;letter-spacing:.3em;color:var(--color-muted);z-index:3;}

/* ---------- manifesto ---------- */
.manifesto-band{position:relative;overflow:hidden;padding-block:var(--space-7);}
.manifesto-band::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 15% 8%,color-mix(in srgb,#fff 15%,transparent),transparent 55%),conic-gradient(from 200deg at 82% 92%,color-mix(in srgb,#000 34%,transparent),transparent 42%);mix-blend-mode:soft-light;pointer-events:none;}
.manifesto-inner{position:relative;align-items:center;}
.manifesto-ghost{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:clamp(4rem,16vw,15rem);color:transparent;-webkit-text-stroke:1px color-mix(in srgb,#fff 26%,transparent);z-index:0;}
.manifesto-copy{position:relative;z-index:1;color:var(--color-bg);}
.manifesto-copy h2{color:var(--color-bg);margin-block:var(--space-2) var(--space-3);}
.manifesto-copy .mani-eyebrow{color:var(--paper-70);}
.manifesto-copy p{color:color-mix(in srgb,var(--color-bg) 92%,transparent);}

/* ---------- colors preview: horizontal shelf ---------- */
.shelf-sec{position:relative;padding-top:var(--space-6);}
.shelf-head{position:relative;width:var(--maxw);max-width:100%;margin-inline:auto;margin-bottom:var(--space-4);}
.shelf-tag{position:absolute;top:0;right:0;color:var(--color-accent);letter-spacing:.24em;font-size:var(--step--1);}
.shelf-head h2{max-width:16ch;margin-bottom:var(--space-3);}
.shelf-head p{max-width:54ch;color:var(--color-fg);}
.shelf{position:relative;height:100svh;overflow:hidden;display:flex;align-items:center;}
.shelf-track{display:flex;gap:clamp(1.25rem,3vw,2.5rem);align-items:stretch;padding-inline:var(--page-inline);will-change:transform;}
.shelf-card{flex:0 0 auto;width:min(72vw,560px);height:min(70vh,620px);}
.card-inner{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate;padding:clamp(1.25rem,2.5vw,2.25rem);display:flex;flex-direction:column;justify-content:flex-end;color:var(--color-bg);}
.card-drip{position:absolute;inset:-12% -12% auto -12%;height:72%;filter:url(#glazeTurb);opacity:.85;z-index:-1;}
.card-ruri .card-inner{background:radial-gradient(120% 80% at 25% 10%,color-mix(in srgb,#fff 20%,transparent),transparent 55%),linear-gradient(160deg,var(--ruri),color-mix(in srgb,var(--ruri) 55%,var(--tetsu)));}
.card-ruri .card-drip{background:linear-gradient(180deg,color-mix(in srgb,var(--tetsu) 55%,var(--ruri)),transparent);}
.card-oribe .card-inner{background:radial-gradient(120% 80% at 25% 10%,color-mix(in srgb,#fff 18%,transparent),transparent 55%),linear-gradient(160deg,var(--oribe),color-mix(in srgb,var(--oribe) 55%,var(--tetsu)));}
.card-oribe .card-drip{background:linear-gradient(180deg,color-mix(in srgb,var(--tetsu) 50%,var(--oribe)),transparent);}
.card-ame .card-inner{background:radial-gradient(120% 80% at 25% 10%,color-mix(in srgb,#fff 26%,transparent),transparent 55%),linear-gradient(160deg,var(--ame),color-mix(in srgb,var(--ame) 55%,var(--tetsu)));}
.card-ame .card-drip{background:linear-gradient(180deg,color-mix(in srgb,var(--tetsu) 45%,var(--ame)),transparent);}
.card-kohiki .card-inner{color:var(--color-fg);background:radial-gradient(120% 80% at 25% 10%,#ffffff,transparent 55%),linear-gradient(160deg,#f3eee3,color-mix(in srgb,var(--kohiki) 68%,var(--hai)));}
.card-kohiki .card-drip{background:linear-gradient(180deg,color-mix(in srgb,var(--hai) 55%,transparent),transparent);}
.card-meta{position:absolute;top:clamp(1.25rem,2.5vw,2.25rem);left:clamp(1.25rem,2.5vw,2.25rem);color:inherit;opacity:.82;}
.card-name{position:absolute;top:clamp(1.25rem,2.5vw,2.25rem);right:clamp(1.25rem,2.5vw,2.25rem);writing-mode:vertical-rl;font-family:var(--font-mincho);font-weight:900;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1;color:inherit;opacity:.92;font-feature-settings:"palt" 1;}
.card-title{font-size:var(--step-2);margin-bottom:.25em;color:inherit;}
.card-desc{max-width:26ch;font-size:var(--step-0);color:inherit;opacity:.94;line-height:1.7;}
.shelf-tail{flex:0 0 26vw;display:flex;align-items:center;color:var(--color-muted);font-family:var(--font-display);font-style:italic;font-size:var(--step-2);}
.shelf-progress-wrap{position:absolute;left:var(--page-inline);right:var(--page-inline);bottom:clamp(1.5rem,4vh,3rem);height:2px;background:var(--fg-12);}
.shelf-progress{display:block;height:100%;width:100%;background:var(--color-accent);transform:scaleX(0);transform-origin:left;}

/* ---------- kiln (pinned signature) ---------- */
.kiln-pin{position:relative;height:100svh;overflow:hidden;display:flex;align-items:center;}
.kiln-inner{position:relative;width:100%;align-items:center;}
.kiln-side{position:absolute;left:calc(var(--page-inline) - .3rem);top:50%;transform:translateY(-50%);color:var(--color-accent);letter-spacing:.5em;font-size:var(--step-0);z-index:3;}
.kiln-head{position:relative;z-index:2;}
.kiln-head h2{max-width:12ch;margin-top:var(--space-2);}
.kiln-body{position:relative;z-index:2;align-self:end;}
.kiln-body p{color:var(--color-fg);}
.kiln-stage{position:absolute;right:5%;top:50%;transform:translateY(-50%);width:min(40vw,440px);--fire:0;--fired:#21506f;z-index:1;pointer-events:none;}
.kiln-stage .vessel{width:100%;height:auto;overflow:visible;}
.kilnv .kv-color{opacity:var(--fire);}
.kilnv .kv-inner-color{opacity:var(--fire);}
.kilnv .kv-gloss{opacity:calc(var(--fire) * .85);}
.kilnv .kv-sweep{opacity:calc(var(--fire) * .7);transform:translateX(calc(var(--fire) * 470px - 90px));}
.kiln-temp{position:absolute;right:5%;bottom:10%;z-index:2;display:flex;align-items:baseline;gap:.08em;color:var(--color-fg);}
.temp-num{font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,6vw,4.6rem);font-variant-numeric:tabular-nums;line-height:1;}
.temp-unit{font-family:var(--font-display);font-size:var(--step-1);color:var(--color-muted);}
.kiln-result{position:absolute;left:var(--page-inline);bottom:10%;z-index:2;opacity:0;font-size:var(--step--1);letter-spacing:.1em;color:var(--color-fg);}
.kiln-result [data-fired-name]{font-family:var(--font-mincho);font-weight:900;color:var(--color-accent);}

/* ---------- lifestyle index list ---------- */
.lifestyle{padding-block:var(--space-6);}
.life-head{position:relative;}
.life-tag{position:absolute;top:0;left:-.3rem;color:var(--color-accent);letter-spacing:.24em;font-size:var(--step--1);}
.life-head .label{margin-bottom:var(--space-2);}
.life-head h2{margin-bottom:var(--space-3);}
.life-head p{color:var(--color-muted);max-width:32ch;}
.life-list{align-self:end;}
.life-row{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:clamp(1rem,2.5vw,2rem);row-gap:.25em;align-items:baseline;padding-block:clamp(1rem,2vw,1.75rem);border-top:1px solid var(--fg-12);}
.life-list .life-row:last-child{border-bottom:1px solid var(--fg-12);}
.life-row .row-no{grid-column:1;grid-row:1;color:var(--color-muted);}
.life-row .row-name{grid-column:2;grid-row:1;font-family:var(--font-mincho);font-weight:600;font-size:var(--step-1);}
.life-row .row-cap{grid-column:2;grid-row:2;color:var(--color-muted);font-size:var(--step-0);}
.life-row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out-quart);}
.life-row:hover::after,.life-row:focus-within::after{transform:scaleX(1);}
.life-row:hover .row-name{color:color-mix(in srgb,var(--color-fg) 80%,var(--color-accent));}

/* ---------- footer ---------- */
.foot-cta{position:relative;overflow:hidden;padding-block:var(--space-7);}
.foot-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 82% 8%,color-mix(in srgb,#fff 14%,transparent),transparent 55%),conic-gradient(from 160deg at 12% 92%,color-mix(in srgb,#000 34%,transparent),transparent 42%);mix-blend-mode:soft-light;pointer-events:none;}
.foot-cta-inner{position:relative;z-index:1;align-items:center;color:var(--color-bg);}
.foot-cta-head .label{color:var(--paper-70);margin-bottom:var(--space-2);}
.foot-cta h2{color:var(--color-bg);max-width:12ch;}
.foot-cta-side p{color:color-mix(in srgb,var(--color-bg) 90%,transparent);margin-bottom:var(--space-3);}
.foot-btn{border-color:var(--color-bg);color:var(--color-bg);}
.foot-btn:hover,.foot-btn:focus-visible{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg);}
.foot-body{padding-block:var(--space-5) var(--space-4);}
.foot-cols{margin-top:var(--space-4);row-gap:var(--space-4);}
.foot-contact .foot-line{margin:0 0 .5em;max-width:none;}
.foot-contact .muted{color:var(--color-muted);}
.foot-nav ul{display:flex;flex-direction:column;gap:.6em;}
.foot-nav a{font-size:var(--step-0);}
.foot-big{display:flex;align-items:baseline;gap:.12em;line-height:.8;padding-block:var(--space-4) var(--space-3);font-family:var(--font-mincho);font-weight:900;font-size:clamp(4rem,12vw,11rem);}
.foot-big-jp{font-family:var(--font-mincho);font-feature-settings:"palt" 1;}
.foot-big-latin{font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;}
.foot-marquee{padding-block:var(--space-3);border-top:1px solid var(--fg-12);border-bottom:1px solid var(--fg-12);}
.foot-marquee span{font-family:var(--font-mincho);font-weight:600;font-size:var(--step-2);color:var(--color-fg);}
.foot-marquee .sep{color:var(--color-muted);}
.foot-meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);justify-content:space-between;padding-block:var(--space-4) var(--space-6);color:var(--color-muted);font-size:var(--step--1);}

/* ---------- responsive ---------- */
/* PC only: let the hero column fill the full viewport height so the
   top-right lead sits at the true top and the bottom-pinned headline
   "まだ見ぬ色を、まとう。" no longer overlaps the copy beside it. */
@media (min-width:901px){
  .hero{align-items:stretch;}
  .hero-inner{display:flex;flex-direction:column;justify-content:flex-end;}
}
@media (max-width:900px){
  .hero{align-items:flex-start;}
  .hero-inner::before{display:none;}
  .hero-title{max-width:16ch;}
  .hero-lead{position:static;width:auto;max-width:46ch;margin-top:var(--space-4);}
  .hero-stage{position:relative;right:auto;top:auto;transform:none;width:min(72vw,420px);margin:var(--space-4) auto 0;}
  .hero-scroll{display:none;}
  .kiln-stage{position:relative;right:auto;top:auto;transform:none;width:min(60vw,340px);margin:var(--space-4) auto 0;}
  .kiln-temp{position:static;justify-content:flex-start;margin-top:var(--space-3);}
  .kiln-result{position:static;margin-top:var(--space-2);}
  .kiln-side{display:none;}
  .kiln-pin{height:auto;min-height:100svh;padding-block:var(--space-6);}
}
@media (max-width:720px){
  .hero-title{line-height:1.08;}
  .hero-title .split-word{padding-block:.13em .06em;}
  .shelf-card{width:82vw;height:62vh;}
  .manifesto-ghost{font-size:24vw;}
  .life-head{margin-bottom:var(--space-3);}
}