:root { --story-ground:#191a1a; --story-panel:#202724; --story-text:#eef1ef; --story-muted:#b5c2bb; --story-accent:#8ac8a8; --story-line:#3e5147; }
.slate-stories-page { box-sizing:border-box; color:var(--story-text); background:var(--story-ground); font-family:Inter,"Helvetica Neue",sans-serif; }
.slate-stories-page * { box-sizing:border-box; }
.slate-stories-page a { color:var(--story-accent); text-decoration:none; }
.slate-stories-page a:focus-visible { outline:2px solid var(--story-accent); outline-offset:5px; }
.slate-stories-page { margin:0; min-height:100vh; }
.story-header, .story-footer { width:min(1160px,100%); margin:auto; padding:24px 32px; display:flex; justify-content:space-between; align-items:center; gap:32px; }
.slate-stories-page .story-brand { display:flex; align-items:center; gap:10px; color:var(--story-text); font-size:30px; font-weight:600; letter-spacing:-1px; }
.story-brand img { object-fit:contain; }
.story-header nav { display:flex; flex-wrap:wrap; align-items:center; gap:24px; font-size:14px; }
.story-header .story-demo { padding:12px 18px; border:1px solid var(--story-line); border-radius:24px; }
.slate-stories-page main { width:min(1080px,calc(100% - 64px)); margin:56px auto 80px; }
.story-intro { max-width:800px; margin-bottom:64px; }
.slate-stories-page h1 { font:600 clamp(36px,6vw,64px)/1.1 Inter,sans-serif; letter-spacing:-.045em; margin:0 0 24px; text-wrap:balance; }
.story-intro > p { font-size:20px; line-height:1.6; color:var(--story-muted); max-width:64ch; }
.story-intro .story-disclosure { font-size:14px; margin-top:28px; max-width:72ch; }
.story-list-item { display:flex; align-items:flex-start; gap:32px; border-top:1px solid var(--story-line); padding:36px 0; }
.story-list-item > img { flex:none; object-fit:contain; border-radius:12px; }
.story-project-name { color:var(--story-muted); font-size:14px; margin:0 0 12px; }
.slate-stories-page h2 { font-size:clamp(24px,3vw,32px); line-height:1.25; letter-spacing:-.025em; font-weight:500; margin:0 0 16px; }
.story-list-item h2 a { color:var(--story-text); }
.story-list-item h2 a:hover { text-decoration:underline; text-underline-offset:5px; }
.story-list-item p:not(.story-project-name) { color:var(--story-muted); line-height:1.7; max-width:66ch; }
.story-list-item .story-authorship { font-size:13px; }
.story-gallery-note { margin-top:48px; padding:36px; border:1px solid var(--story-line); max-width:850px; }
.story-gallery-note p { color:var(--story-muted); line-height:1.7; }
.story-footer { border-top:1px solid var(--story-line); padding-block:28px; font-size:14px; }
.story-article { max-width:780px; margin:auto; }
.story-back { display:inline-block; margin-bottom:40px; font-size:14px; }
.story-article-brand { display:flex; align-items:center; gap:16px; margin-bottom:28px; color:var(--story-muted); }
.story-article-brand img { object-fit:contain; border-radius:12px; }
.story-deck { font-size:22px; line-height:1.6; color:var(--story-muted); }
.story-byline { font-size:13px; line-height:1.7; color:var(--story-muted); padding-bottom:32px; border-bottom:1px solid var(--story-line); margin-bottom:36px; }
.story-prose { font-size:19px; line-height:1.85; }
.story-prose p { margin:0 0 24px; }
.story-project-visit { display:inline-block; margin:8px 0 40px; border-bottom:1px solid var(--story-line); padding-bottom:4px; }
.story-try { border-top:1px solid var(--story-line); padding-top:36px; margin-top:16px; }
.story-try p { color:var(--story-muted); font-size:16px; line-height:1.8; max-width:60ch; }
.story-skip { position:absolute; left:16px; top:-100px; padding:12px 18px; background:var(--story-panel); z-index:10; }
.story-skip:focus { top:12px; }
@media(max-width:700px) {
 .sp-heading { align-items:flex-start; flex-direction:column; }
 .sp-projects { grid-template-columns:1fr; }
 .sp-project { padding:22px; }
 .story-header { align-items:flex-start; flex-direction:column; padding:20px 24px; gap:24px; }
 .story-header nav { gap:20px; }
 .slate-stories-page main { width:calc(100% - 48px); margin-top:32px; }
 .story-list-item { gap:20px; }
 .story-list-item > img { width:44px; height:44px; }
 .story-gallery-note { padding:24px; }
 .story-footer { flex-wrap:wrap; padding-inline:24px; }
 .story-prose { font-size:17px; }
 .story-deck { font-size:19px; }
}
@media(prefers-reduced-motion:reduce) { .slate-stories-page * { scroll-behavior:auto; transition:none; } }