.sf{--sf-bg:oklch(13% .01 60);--sf-fg:oklch(93% .02 80);--sf-muted:oklch(62% .02 60);--sf-accent:oklch(75% .1 350);--sf-rule:oklch(35% .02 60);--sf-quote:var(--sf-accent);background:var(--sf-bg);color:var(--sf-fg);padding:0 max(1.25rem,5%) 6rem}.sf[data-variant=luxury]{--sf-bg:oklch(14% .015 50);--sf-fg:oklch(94% .025 85);--sf-muted:oklch(66% .03 70);--sf-accent:oklch(55% .09 15);--sf-rule:oklch(40% .03 60)}.sf[data-variant=gothic]{--sf-bg:oklch(10% .005 40);--sf-fg:oklch(90% .02 75);--sf-muted:oklch(55% .015 50);--sf-accent:oklch(42% .1 20);--sf-rule:oklch(28% .01 40);--sf-quote:oklch(62% .14 20)}.sf[data-variant=chaos]{--sf-bg:oklch(12% .01 30);--sf-fg:oklch(90% .01 60);--sf-muted:oklch(60% .02 40);--sf-accent:oklch(62% .22 25);--sf-rule:oklch(32% .02 30)}.sf[data-variant=prep]{--sf-bg:oklch(15% .02 70);--sf-fg:oklch(94% .03 90);--sf-muted:oklch(65% .03 70);--sf-accent:oklch(70% .15 350);--sf-rule:oklch(38% .03 60)}.sf-hero{border-top:1px solid var(--sf-rule);padding:4rem 0 3rem;position:relative}.sf-kicker{font:700 13px var(--font-mono);letter-spacing:.35em;color:var(--sf-accent);margin:0 0 1rem}.sf-headline{font-family:var(--font-editorial-display);letter-spacing:-.02em;margin:0;font-weight:800;line-height:.88}.sf-headline span{font-size:clamp(64px,13vw,168px);display:block}.sf[data-variant=chaos] .sf-headline span:last-child{color:var(--sf-accent);transform:skew(-6deg)}.sf[data-variant=gothic] .sf-headline{letter-spacing:.02em}.sf[data-variant=luxury] .sf-headline span:last-child{color:#0000;-webkit-text-stroke:1.5px var(--sf-fg)}.sf-tagline{font:700 15px var(--font-mono);letter-spacing:.25em;color:var(--sf-muted);margin:1.5rem 0 0}.sf-intro{border-top:1px solid var(--sf-rule);grid-template-columns:minmax(140px,220px) minmax(0,56ch);gap:2rem;margin-top:3rem;padding-top:1.5rem;display:grid}.sf-intro-label{font:700 11px var(--font-mono);letter-spacing:.2em;color:var(--sf-accent);margin:0}.sf-intro-copy{color:var(--sf-fg);margin:0;font-size:17px;line-height:1.7}.sf-disclosure{font:12px/1.6 var(--font-sans);color:var(--sf-muted);margin:2.5rem 0 0}.sf-chapter{padding:4rem 0 2rem}.sf-chapter-head{border-bottom:1px solid var(--sf-rule);align-items:baseline;gap:1.25rem;margin-bottom:3rem;padding-bottom:1rem;display:flex}.sf-chapter-no{font:700 13px var(--font-mono);color:var(--sf-accent);letter-spacing:.2em}.sf-chapter-head h2{font:800 clamp(28px, 4.5vw, 52px)/1 var(--font-editorial-display);letter-spacing:.01em;margin:0}.sf-chapter-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:3.5rem 2.5rem;display:grid}.sf-piece{min-width:0}.sf-piece:nth-child(3n+3){padding-top:2.5rem}.sf-piece-large{grid-area:span 2/span 2}.sf-piece-media{display:block;position:relative;overflow:hidden}.sf-piece-media .shop-cutout,.sf-piece-media img{object-fit:contain;width:100%;height:300px;transition:transform .3s;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.sf-piece-large .sf-piece-media .shop-cutout,.sf-piece-large .sf-piece-media img{height:460px}.sf-piece-cta{text-align:center;font:700 12px var(--font-mono);letter-spacing:.3em;color:var(--sf-bg);background:var(--sf-accent);opacity:0;padding:.65rem 0;transition:opacity .25s,transform .25s;position:absolute;inset:auto 0 0;transform:translateY(100%)}.sf-piece-media:hover .shop-cutout,.sf-piece-media:hover img{transform:scale(1.045)}.sf-piece-media:hover .sf-piece-cta,.sf-piece-media:focus-visible .sf-piece-cta{opacity:1;transform:translateY(0)}.sf-piece-brand{font:700 22px/1.1 var(--font-editorial-display);margin:1rem 0 .25rem}.sf-piece-brand a,.sf-piece-name a{color:inherit;text-decoration:none;transition:color .15s}.sf-piece-brand a:hover,.sf-piece-name a:hover{color:var(--sf-accent)}.sf-piece-name{margin:0;font-size:14px;line-height:1.5}.sf-piece-price{font:700 13px var(--font-mono);color:var(--sf-accent);margin:.5rem 0 0}.sf-piece-note{color:var(--sf-muted);max-width:40ch;margin:.6rem 0 0;font-size:13px;line-height:1.6}.sf-piece-large .sf-piece-note{font-size:14px}.sf-moment{border-top:1px solid var(--sf-rule);border-bottom:1px solid var(--sf-rule);text-align:center;margin:4rem calc(-1*max(1.25rem,5%));padding:5rem max(1.25rem,5%)}.sf-moment p{max-width:22ch;font:800 clamp(30px, 5.5vw, 64px)/1.05 var(--font-editorial-display);color:var(--sf-quote);letter-spacing:.01em;margin:0 auto}.sf[data-variant=luxury] .sf-moment p{color:var(--sf-fg);font-style:italic}.sf[data-variant=chaos] .sf-moment p{transform:skew(-4deg)}@media (prefers-reduced-motion:reduce){.sf-piece-media .shop-cutout,.sf-piece-media img,.sf-piece-cta{transition:none}.sf-piece-media:hover .shop-cutout,.sf-piece-media:hover img{transform:none}}@media (width<=800px){.sf-intro{grid-template-columns:1fr;gap:.75rem}.sf-chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 1.25rem}.sf-piece:nth-child(3n+3){padding-top:0}.sf-piece-large{grid-column:span 2}.sf-piece-media .shop-cutout,.sf-piece-media img{height:220px}.sf-piece-large .sf-piece-media .shop-cutout,.sf-piece-large .sf-piece-media img{height:300px}.sf-piece-cta{opacity:1;margin-top:.5rem;display:block;position:static;transform:none}}.sf-hero-photo{grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);align-items:end;gap:3rem;display:grid}.sf-hero-figure{grid-area:1/2/span 4;margin:0}.sf-hero-figure img{filter:grayscale(12%)contrast(1.05);width:100%;height:auto;display:block}.sf-hero-photo .sf-kicker,.sf-hero-photo .sf-headline,.sf-hero-photo .sf-tagline{grid-column:1}.sf-moment-photo{text-align:left;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:3rem;display:grid}.sf-moment-photo p{max-width:16ch}.sf-moment-img{filter:grayscale(15%)contrast(1.05);width:100%;height:auto}@media (width<=800px){.sf-hero-photo{grid-template-columns:1fr}.sf-hero-figure{grid-area:auto/1}.sf-moment-photo{grid-template-columns:1fr}}.sf-plate{max-width:min(760px,92vw);margin:clamp(2.5rem,6vw,5rem) auto;position:relative}.sf-plate img{filter:grayscale(.15)contrast(1.08);width:100%;height:auto;display:block;transform:rotate(-.6deg);box-shadow:0 30px 60px -20px #000c}.sf-plate figcaption{font-family:var(--sf-display,inherit);letter-spacing:.18em;color:var(--sf-accent,currentColor);text-align:right;margin-top:1rem;font-size:.78rem}.sf-plate-insert img{transform:rotate(.7deg)}.sf-plate-insert figcaption{text-align:left}.sf-stylenote{border-left:3px solid var(--sf-accent);background:color-mix(in oklab, var(--sf-fg) 5%, transparent);flex-direction:column;justify-content:center;align-self:stretch;padding:2rem;display:flex}.sf-stylenote-label{letter-spacing:.22em;color:var(--sf-accent);margin-bottom:1rem;font-size:10px}.sf-stylenote-copy{font-family:var(--sf-display,inherit);text-transform:uppercase;color:var(--sf-fg);max-width:22ch;font-size:clamp(20px,2.2vw,30px);line-height:1.15}.sf-stylenote-cite{letter-spacing:.16em;color:color-mix(in oklab, var(--sf-muted) 60%, var(--sf-fg));margin-top:.9rem;font-size:11px}.sf-moment-quote{margin:0}.sf-moment-quote cite{font-family:var(--sf-body,inherit);letter-spacing:.18em;text-transform:uppercase;color:color-mix(in oklab, var(--sf-muted) 60%, var(--sf-fg));margin-top:1.2rem;font-size:12px;font-style:normal;display:block}@media (width<=800px){.sf-stylenote{grid-column:1/-1!important}}.sf-hero-figure,.sf-moment-figure,.sf-plate-media{position:relative}.sf-moment-figure{margin:0}.sf-tape{z-index:4;aspect-ratio:5.2;width:25%;min-width:120px;filter:var(--notebook-vinyl-depth);pointer-events:none;isolation:isolate;--sf-tape-fill:var(--sf-accent);--sf-tape-span:168% 100%;position:absolute}.sf-tape:before{content:"";background:var(--sf-tape-fill);-webkit-mask:var(--notebook-vinyl-black-image) center / var(--sf-tape-span) no-repeat;-webkit-mask:var(--notebook-vinyl-black-image) center / var(--sf-tape-span) no-repeat;-webkit-mask:var(--notebook-vinyl-black-image) center / var(--sf-tape-span) no-repeat;mask:var(--notebook-vinyl-black-image) center / var(--sf-tape-span) no-repeat;-webkit-mask-source-type:alpha;position:absolute;inset:0;-webkit-mask-source-type:alpha;mask-mode:alpha}.sf-tape:after{content:"";background:var(--notebook-vinyl-black-image) center / var(--sf-tape-span) no-repeat;mix-blend-mode:screen;opacity:.5;position:absolute;inset:0}.sf-tape-b{--sf-tape-fill:color-mix(in oklab, var(--sf-accent) 55%, black)}.sf-tape-a{top:0;left:14%;transform:translate(-10%,-50%)rotate(-6deg)}.sf-tape-b{width:22%;bottom:0;right:14%;transform:translate(10%,50%)rotate(5deg)}.sf-plate .sf-tape{width:20%}.sf-plate .sf-tape-b{width:18%}@media (width<=800px){.sf-tape{min-width:96px}}
