/* 「LUMA の考え方」(/about): the story of one product photo. A fixed stage shows the photo while the steps
   beside it change the scene, and each scene takes its colours from a work (theme.css --story-*). Around the
   story: a light, magazine-style opening, the comparison table, who it is for and the closing.
   Motion uses translate / rotate / scale / opacity only; about.js adds .about-motion and sets the scenes, so
   without scripts the page simply reads top to bottom. */
.about-page{--about-serif:Georgia,'Yu Mincho','YuMincho','Hiragino Mincho ProN','Noto Serif JP',serif;--about-ease:cubic-bezier(.16,1,.3,1)}
.about-page .credits-nav a[aria-current=page]{color:var(--t-384bff)}
.about-main{overflow-x:clip}
.about-main>:not(.about-story){box-sizing:border-box;max-width:1180px;margin-inline:auto;padding-inline:6%}
.about-mark{display:inline-flex;width:1.1em;height:1.1em;color:var(--t-384bff)}
.about-mark svg{width:100%;height:100%}

/* ---- Lines that rise, sections that arrive ---- */
.about-line{display:block;overflow:clip;padding-bottom:.1em;margin-bottom:-.1em}
.about-line>span{display:block}
.about-motion .about-line>span{translate:0 112%;transform:perspective(700px) rotateX(-75deg);transform-origin:50% 100%;transition:translate 1.1s var(--about-ease),transform 1.3s var(--about-ease)}
.about-motion .is-in .about-line>span{translate:0 0;transform:perspective(700px) rotateX(0deg)}
.about-motion .is-in .about-line+.about-line>span{transition-delay:.09s}
.about-motion [data-reveal]{opacity:0;translate:0 24px;transition:opacity .9s ease,translate 1s var(--about-ease)}
.about-motion [data-reveal].is-in{opacity:1;translate:0 0}

/* ---- Opening ---- */
.about-hero{position:relative;min-height:min(84svh,800px);padding:12vh 6% 12vh;display:flex;flex-direction:column;justify-content:center}
.about-hero-word{position:absolute;right:-3%;bottom:2%;font:800 clamp(120px,27vw,400px)/.78 Arial,sans-serif;letter-spacing:-.085em;color:var(--c-dedcda);opacity:.6;pointer-events:none;user-select:none;z-index:0}
.about-motion .about-hero-word{opacity:0;translate:6vw 0;transition:opacity 1.6s ease .2s,translate 1.8s var(--about-ease) .2s}
.about-motion .about-hero.is-in .about-hero-word{opacity:.6;translate:0 0}
/* The same line of light as the page curtain, at the about page's shallow angle. */
.about-hero-light{position:absolute;left:-20%;right:-20%;top:100%;height:2px;rotate:-12deg;transform-origin:0 50%;background:linear-gradient(90deg,var(--c-ffffff00),var(--c-a5b0ff) 30%,var(--c-384bff) 60%,var(--c-ffffff00));box-shadow:0 0 16px 1px var(--c-384bff44);z-index:0;pointer-events:none}
.about-motion .about-hero-light{scale:0 1;transition:scale 1.3s cubic-bezier(.65,0,.35,1) .35s}
.about-motion .about-hero.is-in .about-hero-light{scale:1 1}
.about-kicker,.about-title,.about-lead,.about-scroll-cue{position:relative;z-index:1}
.about-kicker{display:flex;align-items:center;gap:12px;margin:0 0 28px;font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--t-787779)}
.about-kicker .about-mark{font-size:22px}
.about-title{margin:0;font-family:var(--about-serif);font-weight:500;font-size:clamp(34px,7.2vw,108px);line-height:1.16;letter-spacing:-.02em;color:var(--t-171719)}
.about-lead{margin-top:40px;max-width:560px;font-size:16px;line-height:2.05;color:var(--t-242d28)}
.about-lead p{margin:0}
.about-scroll-cue{margin:48px 0 0;font-size:10px;font-weight:600;letter-spacing:.24em;color:var(--t-787779)}
.about-scroll-cue span{display:inline-block;margin-left:10px;color:var(--t-384bff)}
.about-motion .about-scroll-cue span{animation:about-cue 1.8s ease-in-out infinite}
@keyframes about-cue{50%{translate:0 6px}}

/* ---- The story ------------------------------------------------------------------------------------- */
/* Colours of the current scene (data-tone): background, text, quiet text and accent. */
.about-story{position:relative;color:var(--ink);transition:color .7s ease}
.about-story[data-tone=night]{--bg:var(--story-night-bg);--ink:var(--story-night-ink);--sub:var(--story-night-sub);--accent:var(--story-night-accent)}
.about-story[data-tone=paper]{--bg:var(--story-paper-bg);--ink:var(--story-paper-ink);--sub:var(--story-paper-sub);--accent:var(--story-paper-accent)}
.about-story[data-tone=indigo]{--bg:var(--story-indigo-bg);--ink:var(--story-indigo-ink);--sub:var(--story-indigo-sub);--accent:var(--story-indigo-accent)}
.about-story[data-tone=honey]{--bg:var(--story-honey-bg);--ink:var(--story-honey-ink);--sub:var(--story-honey-sub);--accent:var(--story-honey-accent)}
.about-story[data-tone=wallet]{--bg:var(--story-wallet-bg);--ink:var(--story-wallet-ink);--sub:var(--story-wallet-sub);--accent:var(--story-wallet-accent)}
.about-story[data-tone=beef]{--bg:var(--story-beef-bg);--ink:var(--story-beef-ink);--sub:var(--story-beef-sub);--accent:var(--story-beef-accent)}
.about-story[data-tone=duck]{--bg:var(--story-duck-bg);--ink:var(--story-duck-ink);--sub:var(--story-duck-sub);--accent:var(--story-duck-accent)}
.about-story[data-tone=knit]{--bg:var(--story-knit-bg);--ink:var(--story-knit-ink);--sub:var(--story-knit-sub);--accent:var(--story-knit-accent)}
/* The whole screen changes colour by cross-fading stacked layers (cheap for the browser), held in place while
   the story scrolls. The layers stick inside a box as tall as the story, so they never spill past its end. */
.story-backdrop{position:absolute;inset:0;z-index:0;pointer-events:none}
/* As tall as the screen with the browser's bars hidden (lvh): on a phone the screen grows when they slide away while
   reading, and a 100svh backdrop left a strip of the page colour at the bottom (2026-10-30, user). */
.story-backdrop>div{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden}
.story-backdrop i{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.story-backdrop [data-tone=night]{background:var(--story-night-bg)}
.story-backdrop [data-tone=paper]{background:var(--story-paper-bg)}
.story-backdrop [data-tone=indigo]{background:var(--story-indigo-bg)}
.story-backdrop [data-tone=honey]{background:var(--story-honey-bg)}
.story-backdrop [data-tone=wallet]{background:var(--story-wallet-bg)}
.story-backdrop [data-tone=beef]{background:var(--story-beef-bg)}
.story-backdrop [data-tone=duck]{background:var(--story-duck-bg)}
.story-backdrop [data-tone=knit]{background:var(--story-knit-bg)}
.about-story[data-tone=night] .story-backdrop [data-tone=night],.about-story[data-tone=paper] .story-backdrop [data-tone=paper],
.about-story[data-tone=indigo] .story-backdrop [data-tone=indigo],.about-story[data-tone=honey] .story-backdrop [data-tone=honey],
.about-story[data-tone=wallet] .story-backdrop [data-tone=wallet],.about-story[data-tone=beef] .story-backdrop [data-tone=beef],
.about-story[data-tone=duck] .story-backdrop [data-tone=duck],.about-story[data-tone=knit] .story-backdrop [data-tone=knit]{opacity:1}

/* The stage fills the whole screen; the copy sits over it, in a different corner for each scene, and the
   pictures move aside to the other side (--shift-x / --shift-y on the world). */
.story-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr)}
.story-steps{position:relative;z-index:2;grid-column:1;grid-row:1;padding:12svh 0 22svh;pointer-events:none}
/* Each step is a stretch of scrolling; its copy stays in view (sticky) for that whole stretch, then the next one takes over. */
.story-step{min-height:78svh}
/* With scripts, every scene's copy is moved into one place (the slot) that stays in view: the copies replace
   each other where they stand, the new one coming forward from a little depth and the old one passing towards
   the reader as it fades, instead of pushing each other up the screen. */
.story-slot-wrap{position:absolute;inset:0;pointer-events:none}
.story-slot{position:sticky;top:0;height:100svh;box-sizing:border-box;display:grid;padding:13svh 6% 11svh;translate:calc(var(--mx,0) * -16px) calc(var(--my,0) * -10px);transition:translate .6s cubic-bezier(.2,.8,.2,1)}
.story-slot .story-copy{grid-area:1 / 1;max-width:min(580px,42vw);align-self:center;justify-self:start;opacity:0;scale:.94;translate:0 14px;transform-origin:0 50%;pointer-events:none;transition:opacity .45s ease,scale .8s var(--about-ease),translate .8s var(--about-ease)}
.story-copy[data-place=bl]{align-self:end}.story-copy[data-place=tl]{align-self:start}
.story-copy[data-place=tr]{align-self:start;justify-self:end}.story-copy[data-place=br]{align-self:end;justify-self:end}
.story-slot .story-copy.is-past{scale:1.05;translate:0 -10px}
.story-slot .story-copy.is-active{opacity:1;scale:1;translate:0 0;pointer-events:auto;transition-delay:.12s}
/* Each line of the copy stands up from lying flat, one after another; leaving, it tips away. */
.story-slot .story-copy>*{transform:perspective(900px) rotateX(-62deg);transform-origin:0 100%;opacity:0;transition:transform .9s var(--about-ease),opacity .5s ease}
.story-slot .story-copy.is-past>*{transform:perspective(900px) rotateX(30deg)}
.story-slot .story-copy.is-active>*{transform:perspective(900px) rotateX(0deg);opacity:1}
.story-slot .story-copy.is-active>:nth-child(2){transition-delay:.1s}.story-slot .story-copy.is-active>:nth-child(3){transition-delay:.2s}.story-slot .story-copy.is-active>:nth-child(4){transition-delay:.3s}
.story-title{margin:0;font-family:var(--about-serif);font-weight:500;font-size:clamp(32px,4.4vw,72px);line-height:1.3;letter-spacing:-.01em;word-break:auto-phrase;text-wrap:balance}
.story-title span{display:block}
/* The three things you do. */
.story-list{display:grid;gap:14px;margin:30px 0 0;padding:0;list-style:none;font-family:var(--about-serif);font-size:clamp(19px,1.9vw,25px)}
.story-list li{display:flex;align-items:baseline;gap:16px}
.story-list small{flex:none;display:inline-grid;place-items:center;width:1.7em;height:1.7em;border:1px solid var(--accent);border-radius:50%;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--accent);transition:color .7s ease,border-color .7s ease}
.story-text{margin:22px 0 0;font-size:15px;line-height:2.1;color:var(--sub);transition:color .7s ease;word-break:auto-phrase}
/* The products: real buttons (pick one, or let them change by themselves). */
.story-works{display:grid;gap:4px;margin:30px 0 0}
.story-works button{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border:0;border-bottom:1px solid currentColor;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;opacity:.45;transition:opacity .4s ease,padding .4s var(--about-ease)}
.story-works button>span{display:flex;flex-direction:column;gap:2px}
.story-works button em{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--sub);transition:color .7s ease}
.story-works button b{font-family:var(--about-serif);font-weight:500;font-size:clamp(17px,1.7vw,22px)}
.story-works button small{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--accent);transition:color .7s ease}
.story-works button:hover{opacity:.8}
.story-works button[aria-pressed=true]{opacity:1;padding-left:12px}
.story-works button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.story-note{margin:30px 0 0;font-size:11px;color:var(--sub)}

/* The stage: fixed while its story scrolls, and a small 3D space. The world inside it leans towards the mouse
   (--mx / --my, set by about.js); everything on it sits at its own depth (translateZ), so nearer things move
   more. Only the world rotates; the pieces are placed from the centre in stage units. */
/* Only the controls on the stage take clicks; the pictures never get in their way, even when invisible. */
.story-stage *{pointer-events:none}
.about-story[data-scene=steps] .st-press,.about-story[data-scene=poster] .st-compare,.about-story[data-scene=poster] .st-compare .compare-range{pointer-events:auto}
.story-stage{grid-column:1;grid-row:1;position:sticky;top:0;height:100svh;container-type:size;perspective:900px;--pw:40cqw;--tile:calc(var(--pw) * .36)}
.st-world{position:absolute;inset:0;transform-style:preserve-3d;translate:var(--shift-x,0px) var(--shift-y,0px);transform:rotateX(calc(var(--my,0) * -22deg)) rotateY(calc(var(--mx,0) * 30deg));transition:translate 1.2s var(--about-ease),transform .6s cubic-bezier(.2,.8,.2,1)}
.about-story[data-scene=who]{--shift-x:12cqw}
.about-story[data-scene=shelf]{--shift-x:-14cqw;--shift-y:5cqh}
.about-story[data-scene=steps]{--shift-x:10cqw}
.about-story[data-scene=scan]{--shift-x:-17cqw;--shift-y:-7cqh}
.about-story[data-scene=poster]{--shift-x:14cqw;--shift-y:4cqh}
.about-story[data-scene=products]{--shift-x:17cqw}
.about-story[data-scene=found]{--shift-x:13cqw;--shift-y:-4cqh}
.st-world>*{position:absolute;left:50%;top:50%;margin:0}
/* The act counter stands on the right edge, out of the way of the copy. */
.st-counter{position:absolute;right:2.6cqw;top:50%;translate:0 -50%;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;color:var(--sub);transition:color .7s ease}
.st-counter b{font-family:var(--about-serif);font-weight:400;font-size:30px;letter-spacing:0;color:var(--accent);transition:color .7s ease}
.st-counter span{writing-mode:vertical-rl}
.st-counter i{width:2px;height:16px;background:currentColor;opacity:.3;transition:opacity .5s ease,background-color .5s ease}
.st-counter i:first-of-type{margin-top:6px}
.about-story[data-act="1"] .st-counter i:nth-of-type(-n+1),.about-story[data-act="2"] .st-counter i:nth-of-type(-n+2),
.about-story[data-act="3"] .st-counter i:nth-of-type(-n+3),.about-story[data-act="4"] .st-counter i:nth-of-type(-n+4),
.about-story[data-act="5"] .st-counter i:nth-of-type(-n+5),.about-story[data-act="6"] .st-counter i:nth-of-type(-n+6),
.about-story[data-act="7"] .st-counter i:nth-of-type(-n+7){opacity:1;background:var(--accent)}
/* A soft light that follows the mouse, far behind everything. */
.st-light{width:80cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--accent),transparent);opacity:.26;translate:calc(-50% + var(--mx,0) * 70cqw) calc(-50% + var(--my,0) * 60cqh);transform:translateZ(-260px);transition:translate .6s cubic-bezier(.2,.8,.2,1)}
/* A glint on pictures that slides with the mouse, like light on a print. */
.st-photo::after,.st-compare::after,.st-work::after,.st-found::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,transparent 38%,var(--c-ffffff30) 50%,transparent 62%);translate:calc(var(--mx,0) * 90%) 0;transition:translate .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}

/* The photo (the protagonist). Scenes move it with --x / --y / --r / --s / --o and give it depth with --z,
   --lift (leaning back) and --flip (turning over). */
.st-photo{width:var(--pw);aspect-ratio:960/643;overflow:hidden;background:var(--c-dedcda);border:clamp(4px,.7cqw,9px) solid var(--c-ffffff);box-shadow:0 34px 60px -34px var(--c-10111750);translate:calc(-50% + var(--x,0px)) calc(-50% + var(--y,0px));rotate:var(--r,0deg);scale:var(--s,1);opacity:var(--o,1);transform:translateZ(var(--z,0px)) rotateX(var(--lift,0deg)) rotateY(var(--flip,0deg));transition:translate 1.1s var(--about-ease),rotate 1.1s var(--about-ease),scale 1.1s var(--about-ease),transform 1.2s var(--about-ease),opacity .6s ease}
.st-photo img,.st-work img,.st-found img{display:block;width:100%;height:100%;object-fit:cover}
.story-stage img:not([src]){visibility:hidden}
.about-story[data-scene=who] .st-photo{--r:-5deg;--s:.82;--z:30px}
.about-story[data-scene=shelf] .st-photo{--s:.33;--o:.6;--z:-60px;--lift:28deg}
.about-story[data-scene=steps] .st-photo{--x:-5cqw;--y:-6cqh;--s:.74}
.about-story[data-scene=scan] .st-photo{--s:1.12;--z:60px}
/* Turning over: the photo goes edge-on and the poster comes round from behind it. */
.about-story[data-scene=poster] .st-photo{--flip:90deg;--o:0;transition:translate 1.1s var(--about-ease),rotate 1.1s var(--about-ease),scale 1.1s var(--about-ease),transform .5s cubic-bezier(.5,0,.75,0),opacity .1s linear .45s}
.about-story:is([data-scene=products],[data-scene=found]) .st-photo{--o:0;--s:.8;--x:-11cqw}
/* Before the story starts, the photo waits deep in the space, leaning back; it stands up as the story arrives. */
.about-story:not(.is-live) .st-photo{--z:-340px;--lift:55deg;--o:0}

/* The shelf lies like a table top; at the end the poster rises from it towards the reader. */
.st-grid{display:grid;grid-template-columns:repeat(3,var(--tile));gap:calc(var(--tile) * .14);translate:-50% -50%;transform:translateZ(-60px) rotateX(28deg)}
.st-grid i{aspect-ratio:960/643;background:var(--story-tile);opacity:0;scale:.82;transition:opacity .5s ease,scale .7s var(--about-ease)}
.st-grid i:nth-child(3n+2){transition-delay:.06s}.st-grid i:nth-child(3n){transition-delay:.12s}
.about-story:is([data-scene=shelf],[data-scene=found]) .st-grid i:not(.is-slot){opacity:1;scale:1}
.about-story[data-scene=found] .st-grid i:not(.is-slot){opacity:.55}
.st-found{width:calc(var(--tile) * 1.5);aspect-ratio:3/4;overflow:hidden;border:3px solid var(--accent);box-shadow:0 40px 60px -24px var(--c-10111750);translate:-50% -50%;opacity:0;transform:translateZ(-60px) rotateX(28deg) scale(.6);transition:opacity .5s ease .3s,transform 1.2s var(--about-ease) .3s}
.about-story[data-scene=found] .st-found{opacity:1;transform:translateZ(120px) rotateX(-4deg) scale(1)}

/* Who it is for: the kinds of sellers float in front of the photo. */
.st-tags{width:0;height:0;transform:translateZ(170px)}
/* Plain labels (not buttons): a small dot and the word. */
.st-tags span{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;width:max-content;font-size:13px;letter-spacing:.06em;line-height:1.5;white-space:nowrap;translate:-50% -50%;opacity:0;scale:.9;transition:translate 1s var(--about-ease),opacity .5s ease,scale .8s var(--about-ease)}
.st-tags span:nth-child(2){transition-delay:.08s}.st-tags span:nth-child(3){transition-delay:.16s}.st-tags span:nth-child(4){transition-delay:.24s}
.st-tags span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.about-story[data-scene=who] .st-tags span{translate:calc(-50% + var(--tx) * .7) calc(-50% + var(--ty) * 1.1);opacity:1;scale:1}

/* LUMA looks first: a line of light reads the photo. */
.st-scan{position:absolute;inset:-30% -70%;z-index:3;background:linear-gradient(102deg,var(--c-ffffff00) 46%,var(--story-indigo-accent) 49.5%,var(--c-ffffff) 50%,var(--story-indigo-accent) 50.5%,var(--c-ffffff00) 54%);translate:-50% 0;opacity:0;pointer-events:none}
.about-story[data-scene=scan] .st-scan{animation:story-scan 1.8s cubic-bezier(.65,0,.35,1) .25s both}
@keyframes story-scan{0%{opacity:1;translate:-50% 0}85%{opacity:1}100%{opacity:0;translate:50% 0}}
/* The facts are pinned exactly as entered, a little in front of the photo. */
.st-facts{display:grid;gap:12px;width:19cqw;translate:calc(-50% + 16cqw) calc(-50% - 6cqh);transform:translateZ(90px)}
.st-facts p{display:flex;flex-direction:column;gap:4px;margin:0;padding:14px 18px;background:var(--story-paper-bg);color:var(--story-paper-ink);border-left:3px solid var(--accent);box-shadow:0 20px 34px -20px var(--c-10111750);opacity:0;translate:40px 0;transition:opacity .5s ease,translate .9s var(--about-ease)}
.st-facts p+p{transition-delay:.18s}
.st-facts small{font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--story-paper-sub)}
.st-facts b{font-family:var(--about-serif);font-weight:500;font-size:clamp(16px,1.8cqw,22px)}
.about-story[data-scene=steps] .st-facts p{opacity:1;translate:0 0}
/* A real button, nearest of all: pressing it plays the press and moves the story on to LUMA's part. */
.st-press{display:flex;align-items:center;gap:10px;padding:14px 26px;border:0;background:var(--accent);color:var(--bg);font:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;white-space:nowrap;cursor:pointer;translate:calc(-50% - 5cqw) calc(-50% + 19cqh);transform:translateZ(230px);box-shadow:0 18px 30px -16px var(--c-10111750);opacity:0;pointer-events:none;transition:opacity .5s ease .5s,box-shadow .3s ease}
.st-press:hover{box-shadow:0 0 0 4px var(--c-384bff44),0 18px 30px -16px var(--c-10111750)}
.st-press:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.about-story[data-scene=steps] .st-press{opacity:1;pointer-events:auto}
.st-press.is-pressed{animation:story-press .6s ease both}
@keyframes story-press{0%,30%{scale:1}45%{scale:.9}70%{scale:1.05}100%{scale:1}}

/* The poster, coming round from behind the photo; then compare with the line (the gallery's compare parts). */
.st-compare{width:min(36cqw,calc(76cqh * .75));aspect-ratio:3/4;overflow:hidden;background:var(--story-honey-bg);border:clamp(4px,.7cqw,9px) solid var(--c-ffffff);box-shadow:0 34px 60px -34px var(--c-10111750);translate:-50% -50%;opacity:0;pointer-events:none;transform:translateZ(40px) rotateY(-90deg);transition:opacity .1s linear,transform .35s ease;--split:0%}
.st-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.st-compare .compare-before{object-fit:contain;background:var(--story-honey-bg);clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.about-story[data-scene=poster] .st-compare{opacity:1;pointer-events:auto;transform:translateZ(40px) rotateY(0deg);transition:opacity .1s linear .45s,transform .9s cubic-bezier(.2,.9,.3,1.15) .45s}
.about-story[data-scene=poster] .st-compare::after{animation:story-glint 1.1s ease 1.3s both}
@keyframes story-glint{from{translate:-100% 0}to{translate:100% 0}}
.st-compare:has(.compare-range:focus-visible){outline:2px solid var(--accent);outline-offset:4px}

/* Different products: a little deck of cards. The chosen one comes to the front (--d 0); the others wait
   behind it at a slant (--d 1, 2, 3, set by about.js). */
.st-works{width:0;height:0;transform-style:preserve-3d}
.st-work{position:absolute;left:0;top:0;margin:0;width:min(40cqw,calc(62cqh * var(--ratio)));aspect-ratio:var(--ratio);translate:calc(-50% + var(--d,0) * 4cqw) calc(-50% - var(--d,0) * 2.5cqh);rotate:calc(var(--d,0) * 4deg);transform:translateZ(calc(60px - var(--d,0) * 120px));opacity:0;transition:opacity .6s ease,translate .9s var(--about-ease),rotate .9s var(--about-ease),transform .9s var(--about-ease)}
.st-work>img:first-child{box-shadow:0 34px 60px -34px var(--c-10111750)}
.st-work .st-before{position:absolute;left:-7%;bottom:-9%;z-index:3;width:30%;height:auto;aspect-ratio:auto;object-fit:contain;border:4px solid var(--c-ffffff);box-shadow:0 14px 30px -14px var(--c-10111750);rotate:-4deg;opacity:0;transition:opacity .4s ease}
.st-work.is-front .st-before{opacity:1;transition-delay:.3s}
.about-story[data-scene=products] .st-work{opacity:calc(1 - var(--d,0) * .28)}
/* ---- Other ways: one card per method; on wide screens the cards line up as the columns of a table. ---- */
/* Other ways: kept behind a button; the table lights up when it opens. */
.about-ways{padding-block:clamp(56px,8vw,96px) 0;text-align:center}
.about-more>summary{list-style:none;cursor:pointer}
.about-more>summary::-webkit-details-marker{display:none}
.about-more>summary span{transition:rotate .3s var(--about-ease)}
.about-more[open]>summary span{rotate:45deg}
.about-more .about-table{margin-top:40px;text-align:left}
.about-more .about-footnote{text-align:left}
.about-table-scroll{display:grid;grid-template-columns:minmax(96px,.7fr) repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,auto);column-gap:8px;outline-offset:4px}
.about-table-labels,.about-way{grid-row:1 / span 4;display:grid;grid-template-rows:subgrid}
.about-table-labels span{display:flex;align-items:center;padding:14px 12px 14px 0;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--t-787779);border-top:1px solid var(--c-d2d7cc)}
.about-table-labels span:first-child{border-top:0}
.about-way{position:relative;padding:0 2px}
.about-way dl{display:contents}
.about-way dl>div{display:flex;padding:16px 14px;border-top:1px solid var(--c-d2d7cc)}
.about-way dt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Each row has its own picture language: what it does well (a large icon), what you need (one small icon per
   thing to prepare) and how it gets finished (a little process sketch). */
.about-way dd{display:flex;flex-direction:column;gap:10px;margin:0;font-size:13px;line-height:1.6;color:var(--t-242d28);word-break:auto-phrase}
.about-way svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--t-384bff)}
.about-way .way-icon{width:34px;height:34px}
.about-way dd:has(.need-icon){flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
.about-way .need-icon{width:30px;height:30px;padding:6px;box-sizing:border-box;border:1px solid var(--c-d2d7cc);border-radius:50%}
.about-way .need-icon+span,.about-way .need-icon+.need-icon+span{flex:1 1 100%}
.about-way .flow-icon{width:72px;height:24px}
/* LUMA column: a second, quieter line under 仕上げ方 (the image text check). */
.about-way .about-way-note{margin-top:-4px;padding-top:8px;border-top:1px dashed color-mix(in srgb,currentColor 45%,transparent);font-size:12px;color:inherit;opacity:.88}
.about-way-name{display:flex;align-items:flex-end;gap:6px;margin:0;padding:0 12px 14px;font-family:var(--about-serif);font-weight:500;font-size:15px;line-height:1.5;color:var(--t-171719)}
/* LUMA stands out: a solid blue column, a little larger and lifted from the page. */
.about-way.is-luma{z-index:1;background:var(--c-384bff);color:var(--t-ffffff);border-radius:6px;box-shadow:0 30px 60px -28px var(--c-384bff44),0 0 0 1px var(--c-384bff);overflow:hidden;scale:1.06;transform-origin:50% 40%}
.about-way.is-luma .about-way-name{padding-top:18px;color:var(--t-ffffff);font:800 26px/1 Arial,sans-serif;letter-spacing:-.04em}
.about-way.is-luma .about-mark{color:var(--t-ffffff)}
.about-way.is-luma dl>div{border-top-color:var(--c-ffffff30)}
.about-way.is-luma dd{color:var(--t-ffffff);font-weight:700;font-size:14px}
.about-way.is-luma svg{color:var(--t-ffffff)}
.about-way.is-luma .need-icon{border-color:var(--c-ffffff80)}
/* The cells light up column by column; LUMA's column comes last, then the line of light runs through it. */
.about-way dl>div:nth-child(2){--row:1}.about-way dl>div:nth-child(3){--row:2}.about-way dl>div:nth-child(4){--row:3}.about-way dl>div:nth-child(5){--row:4}
.about-motion .about-way dd,.about-motion .about-way-name{opacity:.12;translate:0 6px;transition:opacity .5s ease,translate .7s var(--about-ease);transition-delay:calc(var(--col) * 140ms + var(--row,0) * 55ms + 120ms)}
.about-motion .about-table.is-in dd,.about-motion .about-table.is-in .about-way-name{opacity:1;translate:0 0}
.about-sweep{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.about-sweep::before{content:"";position:absolute;inset:-30% 0;background:linear-gradient(168deg,var(--c-ffffff00) 44%,var(--c-384bff44) 48.5%,var(--c-a5b0ff) 49.6%,var(--c-ffffff) 50%,var(--c-a5b0ff) 50.4%,var(--c-384bff44) 51.5%,var(--c-ffffff00) 56%);translate:0 -100%;opacity:0}
.about-motion .about-table.is-in .about-sweep::before{animation:about-sweep 1.15s cubic-bezier(.65,0,.35,1) 1.05s both}
@keyframes about-sweep{0%{opacity:1;translate:0 -100%}85%{opacity:1}100%{opacity:0;translate:0 100%}}
.about-footnote{margin:22px 0 0;font-size:11px;line-height:1.8;color:var(--t-787779)}

/* ---- Closing ---- */
.about-end{position:relative;padding-block:clamp(90px,14vw,180px);text-align:center;border-top:1px solid var(--c-d2d7cc);overflow:hidden}
.about-end-light{position:absolute;left:-10%;right:-10%;top:50%;height:2px;rotate:-12deg;transform-origin:0 50%;background:linear-gradient(90deg,var(--c-ffffff00),var(--c-a5b0ff) 35%,var(--c-384bff) 65%,var(--c-ffffff00));box-shadow:0 0 16px 1px var(--c-384bff44);opacity:.55;pointer-events:none}
.about-motion .about-end-light{scale:0 1;transition:scale 1.4s cubic-bezier(.65,0,.35,1) .2s}
.about-motion .about-end.is-in .about-end-light{scale:1 1}
.about-end-title{position:relative;margin:0 auto;max-width:900px;font-family:var(--about-serif);font-weight:500;font-size:clamp(28px,4.8vw,66px);line-height:1.35;color:var(--t-171719);word-break:auto-phrase;text-wrap:balance}
.about-actions{position:relative;display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:44px}
.about-button{display:inline-flex;align-items:center;gap:12px;padding:16px 28px;border:1px solid var(--t-171719);color:var(--t-171719);font-size:14px;font-weight:600;letter-spacing:.04em;text-decoration:none;transition:background-color .25s ease,color .25s ease,translate .3s var(--about-ease)}
.about-button.is-primary{border-color:var(--c-384bff);background:var(--c-384bff);color:var(--t-ffffff)}
.about-button:hover{translate:0 -2px}
.about-button:focus-visible{outline:2px solid var(--c-384bff);outline-offset:3px}
.about-end-note{position:relative;margin:26px 0 0;font-size:12px;color:var(--t-787779)}
.about-end{border-top:0}
.about-footer{justify-content:center;flex-wrap:wrap;gap:24px;padding-block:36px 56px;border-top:1px solid var(--c-d2d7cc)}

/* ---- Narrow screens ---- */
@media(max-width:900px){
}
@media(max-width:760px){
 /* Phones read the page one screen at a time (2026-10-30, user: no picture cut in half, no hard seam): the opening
    fills the first screen on its own, the story comes in through a soft fade from the page colour to its first scene
    (the backdrop starts below it), and its pictures, counter and copy appear once it fills the screen (about.js
    .is-filling), so none is ever seen half on screen on the way in or out. */
 .about-hero{min-height:calc(100svh - var(--navigation-height,0px));padding:10vh 6% 12vh}
 .about-story{padding-top:24svh;background:linear-gradient(to bottom,transparent,var(--story-night-bg) 24svh)}
 .story-backdrop{top:24svh}
 .st-world{transition:opacity .5s ease,translate 1.2s var(--about-ease),transform .6s cubic-bezier(.2,.8,.2,1)}
 .st-counter{transition:opacity .5s ease,color .7s ease}
 .story-slot{transition:opacity .5s ease,translate .6s cubic-bezier(.2,.8,.2,1)}
 /* only once about.js has taken this over ([data-fill]): without it (scripts off, or a stale script) all shows */
 .about-story[data-fill]:not(.is-filling) :is(.st-world,.st-counter,.story-slot){opacity:0}
 .about-lead{margin-top:28px;font-size:14px}
 /* The stage sits on the top of the screen; the steps scroll up underneath it. */
 .story-layout{display:block;padding:0}
 .about-story{--shift-x:0px!important;--shift-y:0px!important}
 .story-steps{pointer-events:auto}
 .story-slot .story-copy{max-width:none;align-self:start!important;justify-self:start!important}
 .st-counter{right:auto;top:auto;translate:none;flex-direction:row;align-items:baseline}
 .st-counter span{writing-mode:horizontal-tb}
 .st-counter i{width:10px;height:2px;align-self:center}
 .st-counter i:first-of-type{margin:0 0 0 6px}
 /* The stage, the copy under it and the backdrop let go at the same moment at the end of the story: the stage's
    margin reaches down to where the copy ends (the steps move back up by as much), so the copy never slides up over a
    stage that is still held — scrolling back up from the end, it stood in the middle of the screen (2026-10-30, user). */
 .story-stage{z-index:2;height:52svh;margin-bottom:48svh;background:var(--bg);transition:background-color .9s ease;--pw:min(52cqw,46cqh)} .st-counter{bottom:5cqh;left:6cqw}
 .st-counter b{font-size:22px}

 .story-steps{padding:2svh 6% 20svh;margin-top:-48svh}
 /* On phones the copy waits just under the stage. */
 .story-step{min-height:64svh}
 .story-slot{top:52svh;height:48svh;align-items:start;padding:20px 6% 0}
 .story-title{font-size:clamp(26px,7.4vw,34px)}
 .story-list{gap:8px;margin-top:16px;font-size:17px}
 /* Two columns, so the four products fit above the bottom of the screen */
 .story-works{margin-top:14px;grid-template-columns:1fr 1fr;column-gap:16px}
 .story-works button{padding:8px 0;flex-direction:column;align-items:flex-start;gap:2px}
 .story-works button[aria-pressed=true]{padding-left:0}
 .story-works button b{font-size:15px;word-break:keep-all}
 .story-text{margin-top:14px;font-size:14px;line-height:2}
 .st-tags span{padding:6px 10px;font-size:10px}
 /* One label per row on phones, two above the photo and two below, all inside the screen and clear of the counter
    (side by side, the long ones ran past the edges of the screen). The pictures are sized by the smaller of the
    stage's width and height (--pw above), so on a short phone they shrink along with the labels' rows. */
 .about-story[data-scene=who] .st-tags span{translate:calc(-50% + var(--mtx)) calc(-50% + var(--mty))}
 .st-tags span:nth-child(1){--mtx:-9cqw;--mty:-26cqh}.st-tags span:nth-child(2){--mtx:11cqw;--mty:-17cqh}
 .st-tags span:nth-child(3){--mtx:-11cqw;--mty:19cqh}.st-tags span:nth-child(4){--mtx:9cqw;--mty:27cqh}
 .about-story[data-scene=steps] .st-photo{--x:-19cqw;--y:-8cqh;--s:.82}
 .st-facts{width:36cqw;translate:calc(-50% + 23cqw) calc(-50% - 8cqh);gap:8px}
 .st-facts p{padding:9px 11px}
 .st-press{translate:-50% calc(-50% + 21cqh);padding:10px 16px;font-size:11px}
 .st-compare{width:min(52cqw,calc(78cqh * .75))}
 .st-work{width:min(60cqw,calc(70cqh * var(--ratio)))}
 /* The comparison becomes a row of cards to swipe through; each card shows its own row labels. */
 .about-table-scroll{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 6% 14px;margin:0 -6.4%;scroll-padding:0 6%;overscroll-behavior-x:contain}
 .about-table-labels{display:none}
 .about-way{flex:0 0 80%;display:block;padding:18px 18px 6px;border:1px solid var(--c-d2d7cc);scroll-snap-align:start}
 .about-way.is-luma{order:-1;scale:1;border:0}
 .about-way.is-luma dt{color:var(--t-ffffff);opacity:.8}
 .about-way-name{padding:0 0 12px;min-height:3em}
 .about-way dl{display:block;margin:0}
 .about-way dl>div{display:block;padding:12px 0}
 .about-way dt{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;margin-bottom:4px;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--t-787779)}
 .about-button{padding:14px 22px}
}

@media(prefers-reduced-motion:reduce){
 .about-motion .about-line>span{translate:none;transition:none}
 .about-motion [data-reveal],.about-motion .about-way dd,.about-motion .about-way-name{opacity:1;translate:none;transition:none}
 .about-motion .about-hero-word{opacity:.6;translate:none;transition:none}
 .about-motion .about-hero-light,.about-motion .about-end-light{scale:none;transition:none}
 .about-sweep::before,.about-motion .about-table.is-in .about-sweep::before{animation:none;opacity:0}
 .about-motion .about-scroll-cue span{animation:none}
 /* The story still changes scene as you read, but without movement. */
 .about-story,.story-backdrop i,.story-text,.story-list small,.st-counter,.st-counter b,.st-counter i,.story-stage,.story-stage *,.story-slot .story-copy,.story-works button{transition:none!important}
 .about-story .st-scan,.about-story .st-press,.st-compare::after{animation:none!important}
 /* No depth or leaning either: the stage stays flat and still. */
 .st-world,.story-stage *,.about-motion .about-line>span,.story-slot .story-copy>*{transform:none!important}
 .story-slot,.st-light,.st-photo::after,.st-compare::after,.st-work::after,.st-found::after{translate:none!important}
 .about-button{transition:none}
 .about-button:hover{translate:none}
}