:root{--paper:#eeeae1;--ink:#252a25;--muted:#63665d;--line:#c9cabe;--accent:#667852;--serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif;--sans:"Noto Sans CJK JP","Yu Gothic",Meiryo,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.9;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}a:hover{color:var(--accent)}.shell{width:min(1240px,100% - 96px);margin:auto}.skip{position:absolute;top:-80px;background:var(--ink);color:white;padding:12px;z-index:10}.skip:focus{top:0}.masthead{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;font-size:17px;font-weight:600;letter-spacing:.07em;line-height:1.5}.brand small{display:block;font-size:10px;letter-spacing:.22em;font-weight:400}.brand-mark{font:italic 48px Georgia,serif;letter-spacing:-6px;width:45px}.masthead nav{display:flex;gap:32px;font-size:12px}.nav-contact{border-bottom:1px solid var(--ink)}.nav-contact span{margin-left:15px}.hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:65px 0 72px}.eyebrow{font-size:10px;letter-spacing:.14em;margin:0 0 26px}h1{font-family:var(--serif);font-weight:500;font-size:clamp(58px,6.6vw,94px);letter-spacing:.04em;line-height:1.26;margin:0 0 28px}h1 span{padding-left:.75em}.promise{font-size:14px;line-height:2.2;letter-spacing:.02em;margin:0 0 24px}.text-link{display:inline-flex;align-items:center;gap:50px;font-size:12px;border-bottom:1px solid var(--ink);padding:4px 0}.text-link span{font-size:20px}.hero-outline{color:#9ba18f;position:relative}.hero-outline svg{width:100%;height:auto;display:block}.hero-outline>span{display:block;text-align:center;color:var(--muted);font-size:10px;letter-spacing:.18em;margin-top:8px}.approach{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:45px 0 50px}h2{font-family:var(--serif);font-weight:500;letter-spacing:.03em;font-size:30px;line-height:1.7;margin:0 0 24px}.approach .eyebrow{margin-bottom:18px}.approach-copy>p:not(.eyebrow){font-size:13px;line-height:2.1;margin:0 0 16px}.groove-figure{margin:0}.groove-figure svg{width:100%;height:auto;display:block}.groove-figure figcaption{text-align:center;font-size:11px;letter-spacing:.12em;color:var(--muted)}.contact{border-top:1px solid var(--line);padding:35px 0 34px;display:grid;grid-template-columns:1fr 1fr;gap:60px}.contact .eyebrow{margin-bottom:10px}.contact h2{font-size:30px;margin:0 0 8px}.contact p{font-size:11px;color:var(--muted);margin:0}.contact-action{padding-top:16px}.email{font:clamp(20px,2.6vw,34px) Georgia,serif;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:12px}.email span{font-family:var(--sans);font-size:26px}.contact-meta{display:flex;justify-content:space-between;align-items:start;gap:12px;padding-top:12px;font-size:10px;color:var(--muted)}.contact-meta button{font-size:10px;border:0;border-bottom:1px solid var(--line);padding:0 0 3px;background:none}#copy-status{min-height:20px;padding-top:5px}footer{border-top:1px solid var(--line);padding:21px 0 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--muted);font-size:9px}footer p{font:italic 12px Georgia,serif;margin:0}.privacy{max-width:740px;margin:50px auto 90px}.privacy h1{font-size:36px}.privacy h2{font-size:22px;margin-top:35px}.privacy p{font-size:14px}.privacy a{text-decoration:underline}@media(max-width:900px){.shell{width:calc(100% - 48px)}.hero,.approach,.contact{gap:30px}.masthead nav{gap:18px}.wide-only{display:none}.contact-meta{flex-wrap:wrap}}@media(max-width:620px){.shell{width:calc(100% - 40px)}.masthead{height:88px}.brand{font-size:13px;gap:8px}.brand-mark{font-size:38px;width:35px}.brand small{font-size:8px}.masthead nav{gap:15px;font-size:10px}.nav-contact span{margin-left:5px}.hero{grid-template-columns:1fr;padding:38px 0 32px;gap:12px}.eyebrow{font-size:9px;margin-bottom:22px}h1{font-size:68px;margin-bottom:19px}.promise{font-size:12px}.hero-outline{width:80%;margin:5px auto 0}.hero-outline>span{font-size:9px;margin-top:0}.approach{grid-template-columns:1fr;padding:30px 0;gap:15px}h2{font-size:26px}.approach-copy>p:not(.eyebrow){font-size:12px}.groove-figure{padding-bottom:12px}.groove-figure figcaption{font-size:10px}.contact{grid-template-columns:1fr;gap:12px}.email{font-size:30px}footer{flex-wrap:wrap;gap:12px}footer p{order:3;width:100%}.privacy h1{font-size:28px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* A single sticky drawing follows the text from outline to stylus. */
.scroll-story{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:60px}
.story-visual{grid-column:2;grid-row:1;position:sticky;top:0;height:100svh;align-self:start;display:flex;align-items:center;pointer-events:none}
.story-figure{width:100%;margin:0}.story-figure svg{display:block;width:100%;max-height:74svh;aspect-ratio:1;overflow:hidden}.story-figure figcaption{text-align:center;min-height:2em;font-size:11px;letter-spacing:.13em;color:var(--muted);margin-top:12px}.story-track{height:1px;width:80px;background:var(--line);margin:22px auto 0}.story-track span{display:block;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.story-copy{grid-column:1;grid-row:1;min-width:0}.story-step{min-height:110svh;display:flex;align-items:center;padding:70px 0}.story-step:first-child{min-height:calc(100svh - 104px)}.story-step:last-child{min-height:115svh}.story-step p:not(.eyebrow){font-size:13px;line-height:2.2}.story-step .text-link{margin-top:12px}.story-step h2{font-size:32px}.story-step{scroll-margin-top:15svh}
@media(max-width:760px){.scroll-story{display:flex;flex-direction:column;gap:0}.story-visual{top:0;height:44svh;min-height:220px;z-index:2;background:var(--paper);border-bottom:1px solid var(--line)}.story-figure{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.story-figure svg{height:calc(100% - 54px);width:100%;max-height:38svh}.story-figure figcaption{font-size:10px;margin:0}.story-track{margin:9px auto}.story-copy{margin-top:0}.story-step,.story-step:first-child,.story-step:last-child{min-height:85svh;padding:34px 0 18svh;align-items:flex-start}.story-step:first-child{min-height:80svh}.story-step h1{font-size:clamp(48px,13vw,68px)}.story-step h2{font-size:27px}.story-step p:not(.eyebrow){font-size:12px}.story-step{scroll-margin-top:48svh}}
@media(prefers-reduced-motion:reduce){.scroll-story{display:flex;flex-direction:column}.story-visual{position:relative;top:auto;height:auto;min-height:0;padding:24px 0;order:1}.story-figure svg{height:300px;max-height:none}.story-copy{order:0}.story-step,.story-step:first-child,.story-step:last-child{min-height:0;padding:32px 0}.story-track{display:none}}
html.no-story-motion .scroll-story{display:flex;flex-direction:column}html.no-story-motion .story-visual{position:relative;height:auto;padding:24px 0;order:1}html.no-story-motion .story-copy{order:0}html.no-story-motion .story-step{min-height:0;padding:32px 0}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){.story-step,.story-step:first-child,.story-step:last-child{display:block;padding:34px 0;min-height:85svh}.story-step>div{position:sticky;top:calc(44svh + 24px)}}

/* Camera changes never add fill, lighting, or surface texture. */
#line-scene circle,#line-scene path{vector-effect:non-scaling-stroke}

/* Keep the new two-line headline within the story column. */
.story-step h1{font-size:clamp(36px,3.8vw,57px);line-height:1.55;letter-spacing:.01em}.story-step h1 span{padding-left:0}@media(max-width:760px){.story-step h1{font-size:clamp(30px,8vw,48px)}}

#record-face{display:block;width:600px;height:600px;transform-origin:50% 50%;animation:record-idle 36s linear infinite;will-change:transform}
@keyframes record-idle{to{transform:translateZ(0) rotate(360deg)}}
.story-paused #record-face,.story-offscreen #record-face,.story-hidden #record-face,.story-zoomed #record-face{animation-play-state:paused}
.motion-button{display:block;pointer-events:auto;margin:8px auto 0;padding:3px 8px;background:transparent;border:0;font-size:10px;color:var(--muted);text-decoration:underline;text-underline-offset:4px;min-height:28px}.motion-button[hidden]{display:none}
@media(max-width:760px){.story-figure svg{height:calc(100% - 88px)}.motion-button{margin:0 auto;min-height:28px}}
@media(prefers-reduced-motion:reduce){#record-face{animation:none}.motion-button{display:none}}

/* Annotated top revision: compact wordmark, angled record, copy on its surface. */
.masthead{height:64px}.brand{display:flex;gap:8px;font-size:11px;font-weight:500;letter-spacing:.08em}.brand-divider{color:var(--muted)}.story-step:first-child{min-height:calc(100svh - 64px)}
.story-figure svg{max-height:80svh}.motion-button{margin:4px auto 0}.story-track{margin-top:12px}
@media(max-width:760px){.masthead{height:56px}.brand{font-size:9px;gap:5px;letter-spacing:.01em}.masthead nav{font-size:10px;gap:12px}.story-step:first-child{min-height:85svh}.story-figure svg{height:calc(100% - 52px);max-height:40svh}.story-track{margin:8px auto}}
@media(prefers-reduced-motion:reduce){.story-step:first-child{min-height:0}.story-figure svg{height:300px;max-height:none}}

/* Let the large record extend beyond its SVG box, not through the copy. */
body{overflow-x:clip}
.story-figure svg{overflow:visible}

.story-figure{padding-block:24px}
.motion-button{margin-top:28px}
@media(max-width:760px){.story-figure{padding-block:18px}.story-figure svg{height:calc(100% - 72px)}.motion-button{margin-top:18px}}
@media(max-width:760px){.story-visual{width:100%}}

/* The outline stays vector-sharp and still. Only a cached image rotates. */
.story-figure{position:relative}
.record-plane{position:absolute;left:0;top:0;width:600px;height:600px;transform-origin:0 0;pointer-events:none}
.story-zoomed #record-face,.story-paused #record-face,.story-offscreen #record-face,.story-hidden #record-face{will-change:auto}
@media(prefers-reduced-motion:reduce){.record-plane{display:none}}

.record-overlay{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1}

/* Keep the same record beside the contact section; waves sit behind its outline. */
.story-step.contact{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:24px;min-height:100svh}
.story-step.contact .contact-action{padding-top:0}.story-step.contact .email{font-size:clamp(24px,2.6vw,34px)}
#sound-wave{position:absolute;top:0;left:0;width:100vw;height:100%;pointer-events:none;opacity:0}
.story-playing #sound-wave{opacity:1}
#story-art,.motion-button,.story-track{position:relative}
@media(max-width:760px){.story-step.contact{min-height:85svh;padding:34px 0;justify-content:flex-start}.story-step.contact>div{position:static}.story-step.contact .contact-action{margin-top:8px}}
@media(prefers-reduced-motion:reduce){#sound-wave{display:none}.story-step.contact{min-height:0;padding:32px 0}}

/* Full-width waves stay behind the reading column. */
.story-copy{position:relative;z-index:1}

/* Tiny lateral stylus motion starts only after contact. */
.needle-reading #stylus{animation:stylus-read .18s linear infinite}
@keyframes stylus-read{0%,100%{transform:translateX(-.3px)}50%{transform:translateX(.3px)}}
.story-paused #stylus,.story-hidden #stylus,.story-offscreen #stylus{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.needle-reading #stylus{animation:none}}

/* Mobile: explanations above, the continuous illustration below. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
 .scroll-story{display:grid;grid-template-columns:minmax(0,1fr)}
 .story-copy{grid-column:1;grid-row:1}
 .story-visual{grid-column:1;grid-row:1;top:56svh;margin-top:56svh;height:44svh;min-height:0;border-bottom:0;border-top:1px solid var(--line);clip-path:inset(0 -100vw -20px)}
 .story-step,.story-step:first-child,.story-step:last-child,.story-step.contact{min-height:100svh;padding:24px 0;scroll-margin-top:0}
 .story-step>div{top:24px}
 .story-step.contact{justify-content:flex-start}
}

/* Mobile artwork fills the viewport behind each chapter. */
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
 .scroll-story{isolation:isolate}
 .story-visual{grid-column:1;grid-row:1;top:0;left:0;width:100vw;height:100svh;margin-top:0;margin-left:-24px;border:0;background:transparent;clip-path:none;overflow:clip;z-index:0}
 .story-figure{width:100%;height:100%;padding:0;display:block}
 .story-figure svg{position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);width:min(130vw,650px);height:min(130vw,650px);max-height:none;aspect-ratio:1}
 .story-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,var(--paper) 0%,var(--paper) 31%,rgba(238,234,225,.95) 43%,transparent 60%)}
 .story-copy{z-index:2}
 .story-step,.story-step:first-child,.story-step:last-child,.story-step.contact{min-height:100svh;padding:24px 0}
 .story-step>div{position:relative;top:auto}
 .story-step h1,.story-step h2,.story-step p,.story-step .text-link,.story-step .email,.story-step .contact-meta{position:relative;z-index:1;text-shadow:0 0 9px var(--paper),0 0 20px var(--paper)}
 .story-track{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);margin:0}
 .motion-button{position:absolute;bottom:45px;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap}
}

/* Keep groove labels legible above the mobile readability gradient. */
#mobile-wall-labels{display:none}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
 .story-visual::after{z-index:1}
 #wall-labels{visibility:hidden}
 #mobile-wall-labels{display:block;position:fixed;inset:0;z-index:2;pointer-events:none}
 #mobile-wall-labels span{position:absolute;display:block;transform:translate(-50%,-50%);font-size:12px;font-family:var(--sans);font-weight:600;letter-spacing:.1em;color:var(--muted);white-space:nowrap;text-shadow:0 0 4px var(--paper),0 0 8px var(--paper)}
}

@media(max-width:620px) and (prefers-reduced-motion:no-preference){.story-visual{margin-left:-20px}}
/* Short, wide screens give copy and artwork separate columns. */
@media(min-width:560px) and (max-width:760px) and (max-height:620px) and (prefers-reduced-motion:no-preference){
 .scroll-story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}
 .story-copy{grid-column:1;grid-row:1}
 .story-visual{grid-column:2;grid-row:1;left:0;top:0;width:100%;height:100svh;margin:0}
 .story-visual::after{display:none}
 .story-figure{display:flex;align-items:center;justify-content:center}
 .story-figure svg{position:relative;top:auto;left:auto;transform:none;width:100%;height:auto;max-height:84svh}
 .motion-button{bottom:18px}
 .story-track{bottom:8px}
}