/* Shared editorial / technical / temporal system across all static pages. */
:root {
  --bg:#EEEDE4; --surface:#E3E3D7; --surface-alt:#E7E6DB; --ink:#20241F;
  --muted:#606A61; --accent:#A94E2A; --accent-alt:#46685C; --line:#C5C9BD;
  --glow:rgba(169,78,42,.1); --ambient-one:rgba(113,150,125,.13); --ambient-two:rgba(173,110,66,.09);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px; --space-32:128px;
  --radius:5px; --motion:cubic-bezier(.22,1,.36,1);
  --portrait-base:#C8D3C6; --portrait-wash:#E7E8DC; --portrait-spot:rgba(169,78,42,.09); --portrait-rule:rgba(70,104,92,.3);
  --portrait-depth:drop-shadow(0 14px 25px rgba(24,31,27,.1)) drop-shadow(0 3px 8px rgba(24,31,27,.05));
}
body[data-mode="afterburn"] {
  --bg:#071712; --surface:#10251E; --surface-alt:#0B1D17; --ink:#E9E9DF;
  --muted:#A7B4A9; --accent:#D8753D; --accent-alt:#8EBAA3; --line:#365044;
  --glow:rgba(216,117,61,.12); --ambient-one:rgba(53,112,83,.16); --ambient-two:rgba(161,83,46,.1);
  --portrait-base:#0E2920; --portrait-wash:#294437; --portrait-spot:rgba(142,186,163,.18); --portrait-rule:rgba(142,186,163,.28);
  --portrait-depth:drop-shadow(0 16px 28px rgba(0,0,0,.22)) drop-shadow(0 2px 5px rgba(0,0,0,.1));
}
html { scroll-padding-top:104px; }
body { background:radial-gradient(ellipse 55% 520px at 88% 5%,var(--ambient-one),transparent 76%),var(--bg); transition:background-color .32s,color .32s; }
body::after { display:none; }
.shell { width:min(calc(100% - 88px),1320px); }
.site-header { min-height:76px; padding:12px max(44px,calc((100vw - 1320px)/2)); gap:var(--space-8); border-bottom-color:var(--line); background:var(--bg); transition:background-color .32s,border-color .32s; }
.brand { flex:none; }
.brand-lockup { display:block; width:166px; aspect-ratio:474 / 128; }
.brand-lockup img { display:block; width:100%; height:100%; }
.brand-lockup-afterburn { display:none!important; }
body[data-mode="afterburn"] .brand-lockup-present { display:none!important; }
body[data-mode="afterburn"] .brand-lockup-afterburn { display:block!important; }
.brand small { color:var(--muted); font:10px var(--mono); letter-spacing:.04em; }
.nav { gap:var(--space-6); }
.nav a { font-size:12px; font-weight:500; }
.nav a:hover,.nav a.active { color:var(--accent); }
.mode-toggle { border-radius:var(--radius); font-size:10px; }
.mode-track { border-radius:14px; }
.mode-option+.mode-option:before { content:"/"; }
.eyebrow { font-size:11px; font-weight:400; letter-spacing:.12em; }
h1,h2,h3 { font-weight:500; }
h1 em,h2 em { font-family:Georgia,serif; font-weight:400; }
.hero { min-height:min(810px,calc(100dvh - 76px)); grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr); gap:var(--space-8); padding-block:var(--space-16) var(--space-24); }
body[data-mode="afterburn"] .hero { grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr); }
.hero-copy { max-width:790px; }
.hero-kicker { margin-bottom:var(--space-8); }
.hero-name { margin-bottom:var(--space-12); color:var(--accent-alt); font-size:11px; }
.hero h1 { max-width:790px; font-size:clamp(62px,6.45vw,104px); line-height:.99; letter-spacing:-.067em; }
.hero-summary { max-width:550px; margin:var(--space-8) 0 var(--space-8); font-size:clamp(17px,1.45vw,21px); line-height:1.55; }
.hero-actions { gap:var(--space-4); }
.button { min-height:48px; padding:12px 18px; border-radius:var(--radius); font-size:13px; font-weight:500; }
.primary-button { background:var(--ink); color:var(--bg); }
.text-button { padding-inline:4px; }
.text-button .button-arrow { border-radius:50%; }
.hero-meta { display:flex; gap:var(--space-6); flex-wrap:wrap; margin-top:var(--space-12); padding-top:var(--space-4); border-top:1px solid var(--line); color:var(--muted); font:10px var(--mono); letter-spacing:.07em; }
.hero-visual { width:min(100%,515px); }
.hero-visual::before { filter:blur(17px); }
.time-arc { transition:border-color .35s,transform .6s var(--motion); }
.hero-visual:hover .arc-one { transform:rotate(-16deg) scaleY(.83); }
.hero-visual:hover .arc-two { transform:rotate(-30deg) scaleY(.83); }
.signal-strip { display:flex; align-items:center; justify-content:center; gap:var(--space-6); min-height:58px; padding:var(--space-4) var(--space-6); border-block:1px solid var(--line); color:var(--muted); font:10px var(--mono); letter-spacing:.1em; }
.signal-line { width:clamp(20px,5vw,80px); height:1px; background:var(--line); }
.section { padding-block:clamp(80px,9vw,136px); }
.section-intro { margin-bottom:var(--space-16); }
.section-intro h2,.about-grid h2,.archive-section h2 { font-size:clamp(44px,5.5vw,74px); line-height:1.02; }
.section-intro>p:last-child { margin-top:var(--space-6); font-size:17px; }
.about-section { background:linear-gradient(110deg,var(--surface-alt),var(--surface)); }
.about-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(250px,.76fr); gap:clamp(28px,3.5vw,60px); align-items:start; }
.about-grid .section-intro { margin-bottom:0; }
.about-grid h2 { max-width:720px; font-size:clamp(44px,4.4vw,64px); }
.about-identity { margin:var(--space-8) 0 0; color:var(--ink); font:13px var(--mono); letter-spacing:.08em; }
.about-grid .about-aside { max-width:32ch; margin-top:var(--space-3); }
.about-main { padding-top:var(--space-4); }
.about-text { max-width:58ch; font-size:17px; line-height:1.65; }
.about-text p:first-child { font-size:20px; }
.about-index { display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-12); padding-top:var(--space-6); border-top:1px solid var(--line); color:var(--accent-alt); font:12px var(--mono); letter-spacing:.05em; }
.about-portrait { width:100%; margin:0; }
.about-portrait-shadow { filter:var(--portrait-depth); }
.about-portrait-frame { position:relative; aspect-ratio:4/5; overflow:hidden; clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%); background:radial-gradient(ellipse 85% 60% at 50% 78%,var(--portrait-spot),transparent 76%),linear-gradient(155deg,var(--portrait-wash),var(--portrait-base)); transition:background-color .32s ease; }
.about-portrait-frame::before { content:""; position:absolute; z-index:0; width:80%; aspect-ratio:1; left:10%; top:8%; border:1px solid var(--portrait-rule); border-radius:50%; transform:scaleY(.78) rotate(-22deg); }
.about-portrait-frame::after { content:""; position:absolute; z-index:2; top:var(--space-4); left:var(--space-4); width:24px; height:24px; border-top:1px solid var(--accent); border-left:1px solid var(--accent); }
.about-portrait-frame img { position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center bottom; }
.about-portrait figcaption { display:flex; justify-content:space-between; gap:var(--space-3); padding-top:var(--space-3); color:var(--muted); font:10px var(--mono); line-height:1.5; letter-spacing:.02em; }
.about-portrait figcaption span:last-child { color:var(--accent); white-space:nowrap; }
.projects-section { background:transparent; }
.projects-list,.all-projects-grid { gap:var(--space-32); }
.project-feature,.project-feature:nth-child(even) { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:clamp(44px,5vw,80px); padding:var(--space-6) 0 0; border-top:1px solid var(--line); }
.project-feature:nth-child(even) { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
body[data-mode="afterburn"] .project-feature,body[data-mode="afterburn"] .project-feature:nth-child(even) { padding:var(--space-6) 0 0; border:0; border-top:1px solid var(--line); }
.project-media { min-height:0; aspect-ratio:1.42; border-radius:var(--radius); background:var(--surface); isolation:isolate; }
.project-media::before,.project-media::after { display:none; }
.project-media img { inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; clip-path:inset(0 0 0 0); }
.project-media.contain-media img { object-fit:contain; background:#fff; }
.project-feature[data-project="fake-news"] .project-media.contain-media img { background:#0e1117; }
.project-feature[data-project="fake-news"] .project-media { aspect-ratio:1835 / 872; }
.project-feature.visible .project-media img { animation:image-reveal .8s var(--motion) both; }
@keyframes image-reveal { from { clip-path:inset(100% 0 0 0); transform:scale(1.025); } to { clip-path:inset(0 0 0 0); transform:scale(1); } }
.project-media:hover img,.project-media:focus-visible img { transform:scale(1.025); }
.media-index { position:absolute; z-index:2; top:var(--space-4); left:var(--space-4); padding:6px 8px; background:var(--bg); color:var(--accent); font:10px var(--mono); }
.media-caption { position:absolute; z-index:2; right:0; bottom:0; max-width:80%; padding:8px 12px; background:var(--bg); color:var(--muted); font:10px var(--mono); text-align:right; }
.project-copy { max-width:550px; }
.project-copy .eyebrow { margin-bottom:var(--space-6); }
.project-copy h2,.project-copy h3 { margin:0 0 var(--space-2); font-size:clamp(42px,4.8vw,70px); line-height:1; }
.project-copy h2 a,.project-copy h3 a { transition:color .25s,transform .25s; display:inline-block; }
.project-copy h2 a:hover,.project-copy h3 a:hover { transform:translateX(5px); }
.project-subtitle { margin:0 0 var(--space-6); color:var(--accent-alt); font:12px var(--mono); }
.project-summary { margin:0 0 var(--space-8); font-size:17px; line-height:1.6; }
.project-facts { display:grid; grid-template-columns:90px 1fr; gap:var(--space-3) var(--space-4); margin:0; padding-block:var(--space-6); border-block:1px solid var(--line); color:var(--ink); font:12px var(--mono); letter-spacing:0; }
.project-facts dt { color:var(--muted); text-transform:uppercase; }
.project-facts dd { margin:0; overflow-wrap:anywhere; }
.project-result { display:grid; gap:var(--space-2); margin:var(--space-6) 0; }
.project-result span { color:var(--accent); font:10px var(--mono); letter-spacing:.1em; }
.project-result strong { color:var(--muted); font-size:14px; font-weight:400; line-height:1.5; }
.case-link { display:inline-flex; align-items:center; padding:8px 0; border-bottom:1px solid var(--accent); color:var(--accent); font:12px var(--mono); text-decoration:none; text-transform:uppercase; letter-spacing:.04em; transition:transform .25s var(--motion); }
.case-link:hover { transform:translateX(5px); }
.all-projects-link { margin-top:var(--space-24); font:12px var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.archive-section,body[data-mode="afterburn"] .archive-section { display:block; background:var(--surface-alt); }
.archive-grid { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(50px,9vw,150px); }
.archive-grid .section-intro { margin-bottom:0; }
.archive-records { border-left:0; border-top:1px solid var(--line); }
.archive-record { grid-template-columns:45px minmax(0,1fr) auto; align-items:center; gap:var(--space-6); padding:var(--space-8) 0; border-bottom:1px solid var(--line); }
.archive-record::before { display:none; }
.archive-year { font-size:17px; }
.archive-body .eyebrow { margin-bottom:var(--space-2); }
.archive-record h3 { font-size:clamp(26px,2.6vw,40px); }
.archive-record h3 a { text-decoration:none; transition:transform .25s,color .25s; display:inline-block; }
.archive-record h3 a:hover { color:var(--accent); transform:translateX(5px); }
.archive-open { padding:10px 0; }
.skills-section { background:transparent; }
.skills-list { gap:clamp(25px,4vw,65px); }
.skill-group { padding-top:var(--space-6); }
.skill-group h3 { min-height:55px; font:13px var(--mono); color:var(--accent); letter-spacing:.07em; }
.skill-group li { grid-template-columns:1fr; gap:var(--space-2); padding-bottom:var(--space-4); margin-bottom:var(--space-4); }
.skill-group strong { font-size:19px; font-weight:500; }
.skill-group a { width:max-content; font:11px var(--mono); text-decoration:none; }
.skill-group a:hover { text-decoration:underline; }
.experience-section { background:var(--surface-alt); }
.experience-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-24); }
.experience-detail { padding-top:var(--space-6); border-top:1px solid var(--line); }
.experience-detail h3 { margin:0 0 var(--space-2); font-size:clamp(31px,3vw,44px); }
.experience-detail p { margin:0; color:var(--muted); font-size:17px; line-height:1.55; }
.experience-rule { width:100%; height:1px; margin:var(--space-12) 0; background:var(--line); }
.contact-section { position:relative; overflow:hidden; background:var(--surface); }
.contact-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); align-items:center; gap:var(--space-12); }
.contact-section h2 { font-size:clamp(56px,6.6vw,98px); line-height:.98; }
.contact-description { max-width:580px; }
.contact-links a { border-radius:var(--radius); font-size:13px; font-weight:500; transition:border-color .2s,color .2s,transform .2s; }
.contact-links a:hover { transform:translateY(-2px); }
.contact-orbit { position:relative; width:min(100%,340px); aspect-ratio:1; justify-self:center; display:grid; place-items:center; color:var(--accent); font:76px var(--sans); }
.contact-orbit span { position:absolute; border:1px solid var(--line); border-radius:50%; }
.contact-orbit span:nth-child(1) { width:98%; height:78%; transform:rotate(-21deg); }
.contact-orbit span:nth-child(2) { width:72%; height:58%; transform:rotate(27deg); }
.contact-orbit span:nth-child(3) { width:42%; height:40%; }
.contact-orbit b { font-weight:400; }
.footer small { color:var(--accent); font:10px var(--mono); }
.footer a:hover { color:var(--accent); }
.hero-copy>* { animation:refined-rise .65s var(--motion) both; }
.hero-copy>*:nth-child(2) { animation-delay:.04s; }.hero-copy>*:nth-child(3) { animation-delay:.08s; }.hero-copy>*:nth-child(4) { animation-delay:.12s; }.hero-copy>*:nth-child(5) { animation-delay:.16s; }
.reveal.visible { animation:refined-rise .62s var(--motion) both; }
@keyframes refined-rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
.all-projects,.case-main { padding-block:var(--space-12) var(--space-32); }
.back-link { margin-bottom:var(--space-16); font:11px var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.projects-heading { margin-bottom:var(--space-16); }
.projects-heading h1 { font-size:clamp(55px,6vw,86px); line-height:1; }
.project-toolbar { margin-bottom:var(--space-16); }
.category-filter { border-radius:var(--radius); }
.case-intro::after { opacity:.65; }
.case-title { max-width:950px; font-size:clamp(56px,6.5vw,94px); line-height:1; }
.case-subtitle { margin:var(--space-4) 0 0; color:var(--accent-alt); font:13px var(--mono); }
.case-meta { grid-template-columns:repeat(3,minmax(0,1fr)); }
.case-meta-item { min-width:0; }
.case-meta-item dd { overflow-wrap:anywhere; }
.case-media { aspect-ratio:1.65; min-height:320px; border-radius:var(--radius); background:var(--surface); }
.case-media:not(.has-image)::before,.case-media:not(.has-image)::after { display:none; }
.case-media>span,.expand-preview,.preview-dialog { border-radius:var(--radius); }
.case-media img { object-position:top center; }
.case-media.contain-media img { object-fit:contain; background:#fff; }
.case-media[data-project="fake-news"].contain-media img { background:#0e1117; }
.case-media[data-project="fake-news"] { aspect-ratio:1835 / 872; min-height:0; }
.case-caption { margin:var(--space-3) 0 0; color:var(--muted); font:11px var(--mono); }
.expand-preview-inline { position:static; display:block; width:max-content; min-height:44px; margin:var(--space-3) 0 0 auto; padding:8px 0; border:0; border-bottom:1px solid var(--accent); border-radius:0; background:transparent; color:var(--accent); font:11px var(--mono); text-transform:uppercase; letter-spacing:.04em; }
.case-sections { margin-top:var(--space-24); }
.case-section { grid-template-columns:220px minmax(0,1fr); }
.case-section h2 { font-size:15px; font-family:var(--mono); font-weight:400; text-transform:uppercase; letter-spacing:.07em; color:var(--accent); }
body[data-mode="afterburn"] .about-portrait-frame img { filter:saturate(.96); }
body[data-mode="present"] .hero-visual .time-arc { border-color:color-mix(in srgb,var(--line) 85%,var(--muted)); }
body[data-mode="present"] .hero-visual .visual-note { color:color-mix(in srgb,var(--muted) 88%,var(--ink)); }
.contact-links { display:flex; flex-direction:column; align-items:flex-start; gap:0; max-width:360px; border-top:1px solid var(--line); }
.contact-links a { width:100%; min-height:54px; justify-content:space-between; padding:12px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; font:12px var(--mono); text-transform:uppercase; letter-spacing:.04em; }
.contact-links a:hover { transform:none; color:var(--accent); border-color:var(--line); }
.contact-links a.contact-primary { color:var(--accent); }
.case-sections { margin-top:var(--space-16); }
.case-pair { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-12); margin-bottom:var(--space-12); }
.case-pair .case-section { display:block; padding-top:var(--space-6); }
.case-pair .case-section h2 { margin-bottom:var(--space-6); }
.case-section--brief { padding-block:var(--space-6); }
.case-section--system { padding-block:var(--space-12); }
.case-flow { grid-column:2; display:flex; flex-wrap:wrap; align-items:stretch; gap:var(--space-2); margin:var(--space-8) 0 0; padding:0; list-style:none; }
.case-flow li { display:flex; align-items:center; gap:var(--space-2); color:var(--ink); font:11px var(--mono); line-height:1.5; }
.case-flow li:not(:last-child)::after { content:"→"; margin-inline:var(--space-2); color:var(--accent); }
.case-section--result { border-top:2px solid var(--accent); padding-block:var(--space-12); }
.case-section--result>p { color:var(--ink); font-size:clamp(18px,2vw,23px); line-height:1.5; }
.case-section--limitations { margin-top:var(--space-6); background:linear-gradient(90deg,var(--surface-alt),transparent 75%); padding-inline:var(--space-6); }
.case-section--learning { margin-bottom:var(--space-8); }
.case-next { margin:var(--space-24) auto 0; padding-top:var(--space-6); border-top:1px solid var(--line); max-width:970px; }
.case-next .eyebrow { display:block; margin-bottom:var(--space-4); }
.case-next-link { display:grid; grid-template-columns:80px 1fr auto; align-items:center; gap:var(--space-6); padding:var(--space-4) 0; text-decoration:none; }
.case-next-link strong { font-size:clamp(30px,4vw,54px); font-weight:500; letter-spacing:-.05em; }
.case-next-number,.case-next-arrow { color:var(--accent); font:14px var(--mono); }
.case-next-arrow { font-size:22px; transition:transform .22s var(--motion); }
.case-next-link:hover { color:var(--accent); }
.case-next-link:hover .case-next-arrow { transform:translate(4px,-4px); }
@media(max-width:1050px) {
  .site-header { padding-inline:25px; flex-wrap:wrap; gap:4px 20px; }
  .brand small { display:none; }
  .header-actions { margin-left:auto; }
  .nav { order:3; width:100%; justify-content:center; margin:0; min-height:35px; }
  .hero,body[data-mode="afterburn"] .hero { grid-template-columns:1fr; }
  .hero-visual { position:absolute; right:-8%; top:14%; width:45%; opacity:.2; pointer-events:none; }
  .project-feature,.project-feature:nth-child(even) { grid-template-columns:1fr 1fr; }
  .about-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .about-main { grid-column:2; grid-row:1 / span 2; }
  .about-portrait { grid-column:1; grid-row:2; width:min(100%,280px); margin-top:var(--space-8); }
}
@media(max-width:760px) {
  .shell { width:min(calc(100% - 40px),1320px); }
  .site-header { padding:12px 20px; }
  .brand small { display:none; }
  .nav { gap:10px; }
  .nav a { font-size:11px; }
  .hero,body[data-mode="afterburn"] .hero { min-height:0; grid-template-columns:1fr; padding-block:var(--space-16) var(--space-12); }
  .hero h1 { font-size:clamp(50px,10vw,78px); }
  .hero-name { margin-bottom:var(--space-8); }
  .hero-visual { position:relative; top:auto; right:auto; width:min(100%,450px); justify-self:center; opacity:1; pointer-events:auto; }
  .signal-strip { gap:var(--space-3); font-size:8px; }
  .signal-line { width:15px; }
  .about-grid,.archive-grid,.experience-grid,.contact-grid { grid-template-columns:1fr; gap:var(--space-12); }
  .about-main,.about-portrait { grid-column:auto; grid-row:auto; }
  .about-portrait { width:min(85%,340px); margin:0; justify-self:end; }
  .about-portrait-shadow { filter:drop-shadow(0 10px 18px rgba(24,31,27,.1)); }
  body[data-mode="afterburn"] .about-portrait-shadow { filter:drop-shadow(0 11px 20px rgba(0,0,0,.2)); }
  .project-feature,.project-feature:nth-child(even) { grid-template-columns:1fr; gap:var(--space-6); }
  .project-feature:nth-child(even) .project-media { order:0; }
  .project-media { aspect-ratio:1.5; }
  .project-copy { max-width:650px; }
  .skills-list { grid-template-columns:1fr 1fr; gap:var(--space-12); }
  .contact-orbit { display:none; }
  .case-media { aspect-ratio:auto; min-height:clamp(210px,55vw,320px); }
}
@media(max-width:520px) {
  .brand { font-size:12px; }
  .brand-lockup { width:145px; }
  .mode-toggle { gap:5px; padding:6px; }
  body[data-mode="present"] .mode-afterburn,body[data-mode="afterburn"] .mode-present { display:none; }
  .mode-option+.mode-option:before { display:none; }
  .nav { justify-content:space-between; width:100%; order:3; }
  .nav a { font-size:10px; }
  .hero h1 { font-size:clamp(48px,12vw,63px); }
  .hero-summary { font-size:16px; }
  .hero-meta { gap:var(--space-3); }
  .section { padding-block:var(--space-16); }
  .section-intro { margin-bottom:var(--space-12); }
  .section-intro h2,.about-grid h2,.archive-section h2 { font-size:clamp(40px,10.5vw,58px); }
  .project-copy h2,.project-copy h3 { font-size:44px; }
  .project-summary { font-size:16px; }
  .project-facts { grid-template-columns:72px 1fr; font-size:11px; }
  .projects-list,.all-projects-grid { gap:var(--space-16); }
  .archive-record { grid-template-columns:30px minmax(0,1fr); gap:var(--space-3); }
  .archive-open { grid-column:2; }
  .skills-list { grid-template-columns:1fr; }
  .skill-group h3 { min-height:0; margin-bottom:var(--space-6); }
  .contact-section h2 { font-size:clamp(49px,11vw,70px); }
  .case-title { font-size:clamp(48px,11vw,70px); }
}
@media(prefers-reduced-motion:reduce) {
  .hero-copy>*,.reveal.visible,.project-feature.visible .project-media img { animation:none!important; }
  .time-arc,.project-media img { transition:none!important; }
}
@media(max-width:760px) {
  .case-section { grid-template-columns:1fr; gap:var(--space-4); }
  .case-pair { grid-template-columns:1fr; gap:0; margin-bottom:var(--space-6); }
  .case-flow { grid-column:1; }
  .case-section--limitations { padding-inline:var(--space-4); }
  .case-next-link { grid-template-columns:40px 1fr auto; gap:var(--space-3); }
}

/* Keep the desktop narrative intact while making the mobile path to work shorter. */
.mobile-work-preview { display:none; }
.about-more summary { display:none; }
.skill-group summary { display:block; list-style:none; }
.skill-group summary::-webkit-details-marker { display:none; }
.skill-group .skill-count { display:none; }

@media(max-width:760px) {
  .mobile-work-preview { display:block; padding-block:var(--space-8) var(--space-12); }
  .mobile-work-preview .eyebrow { margin:0 0 var(--space-4); }
  .mobile-work-links { border-top:1px solid var(--line); }
  .mobile-work-link { display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:var(--space-3); min-height:57px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; }
  .mobile-work-link span { color:var(--accent); font:12px var(--mono); }
  .mobile-work-link span:last-child { font-size:18px; }
  .mobile-work-link strong { font-size:17px; font-weight:500; letter-spacing:-.03em; }
  .mobile-work-link:hover,.mobile-work-link:focus-visible { color:var(--accent); }
  .mobile-work-more { display:inline-block; margin-top:20px; padding-block:8px; color:var(--accent); font:11px var(--mono); text-decoration:none; text-transform:uppercase; letter-spacing:.04em; }
  .mobile-work-more:hover,.mobile-work-more:focus-visible { text-decoration:underline; }
  .about-more { margin-top:var(--space-4); }
  .about-more summary { display:list-item; width:max-content; max-width:100%; padding-block:10px; color:var(--accent); font:12px var(--mono); cursor:pointer; }
  .about-more summary:focus-visible,.skill-group summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
  .about-more[open] summary { margin-bottom:var(--space-4); }
  .skill-group { padding-top:0; }
  .skill-group summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); min-height:64px; cursor:pointer; }
  .skill-group summary h3 { min-height:0; margin:0; font-size:14px; }
  .skill-group .skill-count { display:inline; flex:none; color:var(--muted); font:11px var(--mono); }
  .skill-group summary::after { content:"+"; color:var(--accent); font:21px var(--mono); }
  .skill-group[open] summary::after { content:"−"; }
  .skill-group ul { padding-top:var(--space-2); }
  .skill-group li:last-child { margin-bottom:0; }
}

@media(max-width:520px) {
  .hero,body[data-mode="afterburn"] .hero { padding-block:40px var(--space-12); overflow:hidden; }
  .hero-visual { position:absolute; top:155px; right:-88px; width:230px; opacity:.13; pointer-events:none; }
  .hero-visual .visual-center { display:none; }
  .hero-kicker { margin-bottom:20px; }
  .hero-name { margin-bottom:var(--space-6); }
  .hero-meta { margin-top:var(--space-8); }
  .about-section { padding-block:var(--space-12); }
  .about-grid { gap:var(--space-6); }
  .about-grid .about-identity,.about-grid .about-aside,.about-index { display:none; }
  .about-portrait { width:min(65%,240px); justify-self:start; }
  .about-portrait figcaption { font-size:9px; }
  .skills-section { padding-block:var(--space-12); }
  .skills-section .section-intro { margin-bottom:var(--space-6); }
  .skills-list { gap:0; }
}

/* Mobile cards frame a single UI task; case studies still use the original image. */
@media(max-width:760px) {
  .project-feature[data-project="wise"] .project-media img,
  .project-feature[data-project="pca"] .project-media img,
  .project-feature[data-project="fake-news"] .project-media img {
    max-width:none;
    height:auto;
    object-fit:unset;
  }
  .project-feature[data-project="wise"] .project-media img { width:280%; top:-88%; left:-88%; }
  .project-feature[data-project="pca"] .project-media img { width:330%; top:-35%; left:-34%; }
  .project-feature[data-project="fake-news"] .project-media { aspect-ratio:1.35; }
  .project-feature[data-project="fake-news"] .project-media.contain-media img { width:275%; top:-17%; left:-75%; object-fit:unset; }
}