/* Homepage layout (v2). Shared pieces live in tokens/base/components/chrome/characters.css. */

/* Emphasis in body copy follows the headline rule: a highlight, not italics */
main em,main mark{font-style:normal;color:inherit;background:linear-gradient(transparent 60%,var(--hl) 60%,var(--hl) 94%,transparent 94%);border-radius:.15em;padding-inline:.04em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.scene-svg.is-offscreen,.scene-svg.is-offscreen *{animation-play-state:paused!important}

/* 1 Hero */
.hero{padding-block:clamp(var(--space-6),6vw,var(--space-8)) clamp(var(--space-7),7vw,var(--space-9))}
.hero__grid{display:grid;gap:clamp(var(--space-6),5vw,var(--space-8));align-items:center}
@media (min-width:900px){.hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.hero h1{max-inline-size:12ch}
.hero .lead{margin-block:var(--space-5) var(--space-6);max-inline-size:34rem}
.hero__art{position:relative;max-inline-size:420px;justify-self:center;inline-size:100%}
.portrait{position:relative;z-index:1;aspect-ratio:4/4.6;border-radius:46% 54% 50% 50% / 42% 44% 56% 58%;overflow:hidden;background:var(--tint-mikan);box-shadow:var(--shadow-lift)}
.portrait img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 18%}
.hero__art .hero-cast{position:relative;z-index:2;margin-block-start:-24%;margin-inline:-6% -2%;inline-size:108%}
.pcap{text-align:center;margin-block-start:var(--space-2);color:var(--color-text-2);font-size:var(--fs-small)}
.pcap b{color:var(--color-text);font-weight:700}

/* 2 A lot is changing */
.changes{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));margin-block-start:var(--space-6)}
.change{display:flex;flex-direction:column;gap:var(--space-3)}
.change .anim{border-radius:var(--radius-small);background:var(--color-canvas)}
.change h3{font-size:clamp(1.1rem,1.4vw,1.3rem)}
/* The four drawings play twice (about 5 seconds, then stop) each time a card scrolls into view.
   Kept within 5s so no pause control is needed (WCAG 2.2.2). Static without JS; off for reduced motion. */
.anim *{transform-box:fill-box;transform-origin:50% 50%}
@keyframes shuffle-a{0%,20%,100%{transform:none}40%,80%{transform:translateY(52px)}}
@keyframes shuffle-b{0%,20%,100%{transform:none}40%,80%{transform:translateY(-52px)}}
@keyframes morph-sq{0%,30%,100%{opacity:1;transform:none}50%,80%{opacity:0;transform:scale(.6) rotate(45deg)}}
@keyframes morph-ci{0%,30%,100%{opacity:0;transform:scale(.5)}50%,80%{opacity:1;transform:none}}
@keyframes travel{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes drift-l{0%,100%{transform:translateX(-14px)}50%{transform:translateX(14px)}}
@keyframes drift-r{0%,100%{transform:translateX(14px)}50%{transform:translateX(-14px)}}
@keyframes split-tl{0%,100%{transform:none}50%{transform:translate(-14px,-10px)}}
@keyframes split-tr{0%,100%{transform:none}50%{transform:translate(14px,-10px)}}
@keyframes split-bl{0%,100%{transform:none}50%{transform:translate(-14px,10px)}}
@keyframes split-br{0%,100%{transform:none}50%{transform:translate(14px,10px)}}
.morph-ci{opacity:0}
.traveller{offset-distance:100%;offset-rotate:0deg}
.change.is-playing .anim .shuffle-a{animation:shuffle-a 2.4s ease-in-out 2}
.change.is-playing .anim .shuffle-b{animation:shuffle-b 2.4s ease-in-out 2}
.change.is-playing .anim .morph-sq{animation:morph-sq 2.4s ease-in-out 2}
.change.is-playing .anim .morph-ci{animation:morph-ci 2.4s ease-in-out 2}
.change.is-playing .anim .traveller{animation:travel 2.2s ease-in-out calc(var(--i) * .3s) 2 both}
.change.is-playing .anim .drift-l{animation:drift-l 2.4s ease-in-out 2}
.change.is-playing .anim .drift-r{animation:drift-r 2.4s ease-in-out 2}
.change.is-playing .anim .split-tl{animation:split-tl 2.4s ease-in-out 2}.change.is-playing .anim .split-tr{animation:split-tr 2.4s ease-in-out 2}
.change.is-playing .anim .split-bl{animation:split-bl 2.4s ease-in-out 2}.change.is-playing .anim .split-br{animation:split-br 2.4s ease-in-out 2}

/* 3 What is expected */
.expect__intro{font-size:var(--fs-lead);max-inline-size:36rem}
.expect__rows{margin-block:var(--space-5) var(--space-7)}
.expect__rows .xl{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1.1;letter-spacing:var(--track-display);max-inline-size:22ch}
.expect__rows .row+.row{margin-block-start:var(--space-3)}
.expect__trail{display:grid;gap:var(--space-5);align-items:end}
@media (min-width:900px){.expect__trail{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.expect__trail .stmt{font-size:var(--fs-lead);max-inline-size:32rem}
.expect__trail .big{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.1;letter-spacing:var(--track-display)}
.expect__trail .bridge{font-weight:600}

/* 4 Three ways to work together */
.offer__head h2{font-size:clamp(1.6rem,3vw,2.4rem);max-inline-size:28ch;margin-block-start:var(--space-3)}
.tiles{display:grid;gap:clamp(var(--space-4),2vw,var(--space-6));grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-block-start:var(--space-6)}
.tile .tile__art{min-block-size:0;margin-inline:calc(var(--space-6) * -.5)}
.tile .chips{margin-block:var(--space-2)}
.tile .chip{background:color-mix(in srgb,var(--color-surface) 70%,transparent)}
.tile .go{margin-block-start:auto;padding-block-start:var(--space-2);font-weight:700;color:var(--color-action);text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.2em}
.tile .go i{font-style:normal;display:inline-block;transition:transform var(--dur) var(--ease-spring)}
.tile:hover .go i,.tile:focus-visible .go i{transform:translateX(5px)}
.tile .tag{font-size:1.05rem}

/* 5 Who is TMatsu */
.who__grid{display:grid;gap:clamp(var(--space-6),5vw,var(--space-8));align-items:start}
@media (min-width:900px){.who__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.who .sub{color:var(--color-text-2);margin-block:var(--space-2) var(--space-4)}
.who .hook{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.25;letter-spacing:-.01em}
.who .who-paths{margin-block-start:var(--space-5);max-inline-size:440px}
.lg-h{font-weight:700;margin-block-end:var(--space-3)}
.legend{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-3)}
.legend li{display:flex;gap:var(--space-3);align-items:baseline}
.legend i{flex:none;inline-size:14px;block-size:14px;border-radius:50%;transform:translateY(2px)}
.legend b{font-weight:700}
.who .closing-line{margin-block-start:var(--space-5)}
.creds{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-block:var(--space-7) var(--space-5)}
.creds details{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) ease}
.creds details:hover,.creds details:focus-within{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.creds summary{list-style:none;cursor:pointer;display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-5);border-radius:var(--radius-card)}
.creds summary::-webkit-details-marker{display:none}
.creds .ci{flex:none;inline-size:40px;block-size:40px;border-radius:12px;background:var(--tint-asamidori);color:var(--jp-aotake-iro);display:grid;place-items:center}
.creds .ci svg{inline-size:22px;block-size:22px}
.creds .ct{flex:1;display:grid;gap:2px}
.creds .ct b{font-weight:700}
.creds .ct em{background:none;color:var(--color-text-2);font-size:var(--fs-small)}
.creds summary>i{flex:none;font-style:normal;inline-size:30px;block-size:30px;border-radius:50%;background:var(--color-action);color:var(--color-on-action);display:grid;place-items:center;font-weight:700;line-height:1;transition:transform var(--dur) var(--ease-spring)}
.creds details[open] summary>i{transform:rotate(45deg)}
.creds details>p{padding:0 var(--space-5) var(--space-5);font-family:var(--font-display);font-weight:600;line-height:1.5;max-inline-size:none}

/* 6 In their words */
.voices__head{display:flex;align-items:flex-end;justify-content:flex-start;gap:var(--space-4);flex-wrap:wrap}
.voices__head .listen{inline-size:150px;margin-block-end:-6px}
.tcard{display:flex;flex-direction:column;gap:var(--space-4);block-size:100%;border:4px solid var(--tc,var(--jp-sakura-iro))}
.tcard blockquote{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.4}
.tcard .who2{margin-block-start:auto;font-size:var(--fs-small);color:var(--color-text-2)}
.tcard .who2 b{color:var(--color-text);font-weight:700}
.bdg{display:inline-block;padding:.05em .6em;margin-inline:.3em;border-radius:var(--radius-pill);background:var(--tint-wasurenagusa);color:var(--color-text);font-weight:700;font-size:.8rem}
.voices .carousel{--card:min(86%,360px);margin-block-start:var(--space-5)}
.carousel__btn svg{inline-size:18px;block-size:18px}
.hero-dot{display:none}
@media (min-width:900px){.hero-dot{display:block}}