/* SACRED SON — the look, assembled from tokens.css. Her red, her emblem, her words as verse, and a page that arrives. */
:root{--ground:#FFFFFF;--ink:#0D141A;--signal:#C40B2A;--signal-deep:#9E0822;--head:'Cormorant Garamond',Georgia,serif;--name:'Cinzel',serif;--body:'Figtree',system-ui,sans-serif;--kanji:'Shippori Mincho','Hiragino Mincho ProN',serif}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--ink);font-family:var(--body);margin:0;font-size:1.05rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
.skip-link{position:absolute;left:-999px}.skip-link:focus{left:16px;top:16px;background:var(--ink);color:#fff;padding:8px 12px;z-index:9}
a{color:inherit}

/* the quiet underlined word is how somebody moves forward here */
.ss-go{font-family:var(--body);font-weight:500;color:var(--signal);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.4em;letter-spacing:.02em;transition:text-underline-offset .25s}
.ss-go:hover,.ss-go:focus-visible{color:var(--signal-deep);text-underline-offset:.55em;outline:none}
.ss-go--large{font-size:1.25rem}

.ss-eyebrow{font:500 .74rem/1.5 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--signal);margin:0 0 1rem}
.ss-eyebrow--light{color:#fff;opacity:.85}
.ss-h2{font:600 clamp(2rem,4.2vw,3.4rem)/1.06 var(--head);letter-spacing:-.005em;margin:0 0 1rem;text-wrap:balance}
.ss-sub{font:italic 500 1.35rem/1.4 var(--head);margin:0 0 3rem}
.ss-prose{max-width:62ch;font-size:1.08rem;line-height:1.72;margin:0}

/* arriving — a line, a card, a slab: each stands up as it is reached */
.ss-js .ss-line,.ss-js .ss-rise{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.ss-js .ss-line.in,.ss-js .ss-rise.in{opacity:1;transform:none}
.ss-js .ss-rite.ss-rise{transition-delay:calc(var(--i) * .12s)}
.ss-still .ss-line,.ss-still .ss-rise{opacity:1!important;transform:none!important;transition:none!important}

/* the bar */
.ss-bar{display:flex;align-items:center;gap:1.5rem;padding:.9rem clamp(20px,5vw,64px);border-bottom:1px solid rgba(13,20,26,.08);position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);z-index:5}
.ss-bar__home{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.ss-bar__mark{width:48px;height:auto}
.ss-bar__name{font:500 .98rem var(--name);letter-spacing:.16em;text-transform:uppercase}
.ss-bar__nav{margin-left:auto;display:flex;gap:1.4rem;font-size:.9rem}
.ss-bar__nav a{text-decoration:none;color:var(--ink);opacity:.8}.ss-bar__nav a:hover{opacity:1;color:var(--signal)}
.ss-bar__go{font-size:.92rem}
@media(max-width:820px){.ss-bar__nav{display:none}.ss-bar__name{font-size:.86rem}}

/* THE OPENING — the heart lights. The page arrives in silver and the red comes in. */
.ss-open{position:relative;text-align:center;padding:clamp(2rem,5vw,4rem) clamp(20px,5vw,64px) clamp(4rem,8vw,7rem);min-height:calc(100vh - 72px);display:flex;flex-direction:column;align-items:center;justify-content:center}
.ss-open__emblem{position:relative;width:min(94vw,1100px);margin:0 auto 1rem}
.ss-open__emblem img{position:relative;width:100%;filter:grayscale(1);transition:filter 2.4s ease .3s}
.ss-lit .ss-open__emblem img{filter:grayscale(0)}
.ss-still .ss-open__emblem img{filter:none;transition:none}
/* her film of the emblem: the heart is handed over in the frame itself, so no grey is put on it */
.ss-open__film{position:relative;display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--ground);transition:none;filter:brightness(1.03);-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 62%,transparent 100%)}
/* her export is a hair off white (251/255); the lift takes it to the page's own white and the mask melts the frame's edge into the ground */
.ss-still .ss-open__film{cursor:pointer}
.ss-open__glow{position:absolute;left:36%;top:36%;width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(196,11,42,.42),rgba(196,11,42,0));opacity:0;transform:scale(.6);transition:opacity 1.6s ease 1.2s,transform 1.6s ease 1.2s;pointer-events:none}
.ss-lit .ss-open__glow{opacity:1;transform:scale(1.15);animation:ss-breathe 4s ease-in-out 3s infinite}
.ss-still .ss-open__glow{display:none}
@keyframes ss-breathe{0%,100%{transform:scale(1.15)}50%{transform:scale(1.32)}}
.ss-open__eyebrow{margin-top:.5rem}
.ss-open__name{font:600 clamp(2.4rem,7vw,5.6rem)/1 var(--name);letter-spacing:.14em;text-transform:uppercase;margin:0 0 1.2rem;color:var(--ink)}
.ss-open__line{font:italic 500 clamp(1.4rem,2.6vw,2.15rem)/1.22 var(--head);max-width:26ch;margin:0 auto 2rem;text-wrap:balance}
.ss-open__thread{position:absolute;left:50%;bottom:0;width:1.5px;height:0;background:var(--signal);transition:height 1.4s ease 1.8s}
.ss-lit .ss-open__thread{height:clamp(2.5rem,6vw,5rem)}
.ss-js .ss-open__eyebrow,.ss-js .ss-open__name,.ss-js .ss-open__line,.ss-js .ss-open .ss-go{opacity:0;transform:translateY(10px);transition:opacity 1s ease,transform 1s ease}
.ss-lit .ss-open__eyebrow{opacity:1;transform:none;transition-delay:.9s}
.ss-lit .ss-open__name{opacity:1;transform:none;transition-delay:1.1s}
.ss-lit .ss-open__line{opacity:1;transform:none;transition-delay:1.4s}
.ss-lit .ss-open .ss-go{opacity:1;transform:none;transition-delay:1.8s}
.ss-still .ss-open *{opacity:1!important;transform:none!important;transition:none!important}

/* THE RED — her words, as verse, read at the pace they are reached */
.ss-red{background:var(--signal);color:#fff;padding:clamp(4rem,9vw,8rem) clamp(20px,5vw,64px);text-align:center}
.ss-red__verse{max-width:38rem;margin:0 auto;font:500 clamp(1.25rem,2vw,1.55rem)/1.55 var(--head)}
.ss-red__verse p{margin:0 0 1.8em}.ss-red__verse p:last-child{margin-bottom:0}
.ss-red__verse .ss-line{display:block}
.ss-red__verse+.ss-red__verse{margin-top:2.4rem}
.ss-red__law{font:italic 600 clamp(1.5rem,2.8vw,2.3rem)/1.3 var(--head);max-width:30ch;margin:3.2rem auto;text-wrap:balance}
.ss-red__imagine{font-size:clamp(1.35rem,2.2vw,1.7rem)}

/* your son — the photograph with the slab */
.ss-son{position:relative;display:grid}
.ss-son__photo img{width:100%;height:min(78vh,760px);object-fit:cover;object-position:center 30%}
.ss-son__slab{background:var(--signal);color:#fff;padding:clamp(2rem,4vw,3.2rem) clamp(1.6rem,4vw,3.4rem);max-width:44rem;margin:-6rem clamp(20px,5vw,64px) 0 auto;position:relative;box-shadow:0 30px 60px rgba(13,20,26,.18)}
.ss-son__slab h2{font:600 clamp(1.7rem,3vw,2.5rem)/1.12 var(--head);margin:0 0 1rem;text-wrap:balance}
.ss-son__slab p{margin:0;font-size:1.02rem;line-height:1.65}
@media(max-width:820px){.ss-son__slab{margin:-3rem 16px 0}}

/* THE WALK — four rites from nine to twenty-five, the kanji as the gifts */
.ss-rites{padding:clamp(4rem,8vw,7rem) clamp(20px,5vw,64px);text-align:center}
.ss-walk{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem);text-align:left;margin-top:1rem}
.ss-walk__line{position:absolute;left:0;right:0;top:calc(var(--walk-y,0px) + 0px);height:0}
.ss-rite{position:relative}
.ss-rite__photo{position:relative;overflow:hidden}
.ss-rite__photo img{aspect-ratio:4/5;object-fit:cover;width:100%;transition:transform 1.2s ease}
.ss-rite:hover .ss-rite__photo img{transform:scale(1.04)}
.ss-rite__kanji{position:absolute;right:.6rem;bottom:.4rem;font:500 clamp(2.4rem,4vw,3.6rem)/1 var(--kanji);color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35);writing-mode:vertical-rl;letter-spacing:.08em}
.ss-rite__dot{display:block;width:100%;height:1.5px;background:var(--signal);margin:1.4rem 0 1.1rem;position:relative}
.ss-rite__dot::after{content:"";position:absolute;left:0;top:-4.5px;width:10px;height:10px;border-radius:50%;background:var(--signal)}
.ss-rite__who{font:500 .74rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--signal);margin:0 0 .5rem}
.ss-rite__word{font:600 clamp(1.5rem,2.2vw,2rem)/1 var(--name);letter-spacing:.08em;margin:0 0 .3rem}
.ss-rite__say{font:italic 1rem var(--head);opacity:.7;margin:0 0 .7rem}
.ss-rite__line{font-size:.98rem;line-height:1.55;margin:0}
@media(max-width:900px){.ss-walk{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.ss-walk{grid-template-columns:1fr}}

/* two columns — words beside a photograph */
.ss-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,5vw,5rem);padding:clamp(3rem,7vw,6rem) clamp(20px,5vw,64px)}
.ss-two--flip .ss-two__photo{order:-1}
.ss-two__photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media(max-width:820px){.ss-two{grid-template-columns:1fr}.ss-two--flip .ss-two__photo{order:0}.ss-two__photo img{aspect-ratio:4/3}}

/* OYAKO — one word. Press it, and the page says yes. */
.ss-oyako{position:relative;overflow:hidden}
.ss-oyako__kanji{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:700 clamp(14rem,40vw,30rem)/1 var(--kanji);color:#fff;opacity:.07;pointer-events:none;white-space:nowrap}
.ss-oyako__word{position:relative;font:600 clamp(3rem,9vw,7rem)/1 var(--name);letter-spacing:.14em;color:#fff;background:none;border:0;padding:.2em .3em;cursor:pointer;transition:letter-spacing .5s ease,text-shadow .5s ease}
.ss-oyako__word:hover,.ss-oyako__word:focus-visible{letter-spacing:.2em;text-shadow:0 0 40px rgba(255,255,255,.45);outline:none}
.ss-oyako__say{position:relative;font:italic 1.2rem var(--head);opacity:.85;margin:.4rem 0 .6rem}
.ss-oyako__hint{position:relative;font-size:.86rem;opacity:.7;margin:0 0 1.2rem;transition:opacity .4s}
.said .ss-oyako__hint{opacity:0}
.ss-oyako__answer{position:relative;height:0;overflow:hidden;transition:height .6s ease}
.said .ss-oyako__answer{height:9.5rem}
.ss-oyako__yes{font:italic 600 clamp(3.4rem,8vw,6rem)/1 var(--head);margin:.4rem 0 .4rem;opacity:0;transform:translateY(12px)}
.ss-oyako__every{font:500 1.05rem var(--body);letter-spacing:.06em;margin:0;opacity:0}
.said .ss-oyako__yes{animation:ss-yes 1.1s cubic-bezier(.2,.7,.2,1) .1s forwards}
.said .ss-oyako__every{animation:ss-yes 1s ease .9s forwards}
@keyframes ss-yes{to{opacity:1;transform:none}}
.ss-still .ss-oyako__answer{transition:none}.ss-still .said .ss-oyako__yes,.ss-still .said .ss-oyako__every{animation:none;opacity:1;transform:none}
.ss-oyako__head{position:relative;font:600 clamp(1.7rem,3.2vw,2.6rem)/1.15 var(--head);margin:2rem auto 1.4rem;max-width:22ch;text-wrap:balance}
.ss-oyako__body{position:relative;max-width:60ch;margin:0 auto;font-size:1.05rem;line-height:1.7}

/* the close */
.ss-close{padding:clamp(4rem,9vw,8rem) clamp(20px,5vw,64px);max-width:64rem;margin:0 auto;text-align:center}
.ss-close .ss-prose{margin:0 auto}
.ss-close__last{font:italic 600 clamp(2.4rem,6vw,4.6rem)/1 var(--head);color:var(--signal);margin:2.2rem 0 2rem}

/* the foot */
.ss-foot{text-align:center;padding:3rem clamp(20px,5vw,64px) 3.5rem;border-top:1px solid rgba(13,20,26,.08)}
.ss-foot__mark{width:72px;height:auto;margin:0 auto 1rem}
.ss-foot__name{font:500 .95rem var(--name);letter-spacing:.18em;text-transform:uppercase;margin:0 0 .5rem}
.ss-foot__line{font:italic 1.05rem var(--head);margin:0 0 1rem}
.ss-foot__small{font-size:.85rem;opacity:.7;margin:0}

/* pages the world writes later stand in the same clothes */
.w-page{padding:clamp(24px,6vw,80px) clamp(20px,5vw,64px);max-width:44rem;margin:0 auto}
.w-page h1{font:600 clamp(2rem,5vw,3.4rem)/1.05 var(--head)}
.w-prose{font-size:1.1rem;line-height:1.7}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}