@font-face{font-family:SignalDisplay;src:url('assets/display.ttf') format('truetype');font-weight:700;font-display:swap}
/* The same Signal composition, with only its typographic hierarchy strengthened. */
.hero h1{font-family:SignalDisplay,Arial,sans-serif;font-size:clamp(76px,8.4vw,136px);font-weight:700;line-height:.98;letter-spacing:-.075em;margin:30px 0 25px;max-width:100%}
.hero h1>span,.hero h1>em{display:block;white-space:nowrap;transform:scaleX(.84);transform-origin:left;width:119%}
.hero h1>em{font-style:normal;color:var(--accent)}
.intro{font-size:clamp(19px,1.8vw,25px);max-width:400px;line-height:1.4;letter-spacing:-.6px;margin:0 0 16px}
.hero-description{max-width:340px;font-size:13px;line-height:1.9}
.explore{margin-top:18px}
.section h2{font-family:SignalDisplay,Arial,sans-serif;font-weight:700;letter-spacing:-.055em;font-size:clamp(35px,4.1vw,60px);line-height:1.04}
.about h2{font-size:clamp(34px,3.8vw,55px);max-width:500px}
.project-copy .project-lead{font-size:20px;line-height:1.45;max-width:420px}
.project-copy>p:not(.eyebrow):not(.project-lead){max-width:430px}
.version-links{display:flex;gap:22px;flex-wrap:wrap;color:var(--muted);font:8px var(--mono)}
.version-links a:hover{color:var(--accent)}
@media(max-width:1000px){.hero h1{font-size:clamp(66px,8.4vw,92px)}.intro{font-size:21px}.section h2{font-size:44px}.project-copy .project-lead{font-size:18px}}
@media(max-width:700px){.hero h1{font-size:clamp(61px,16vw,100px);margin:26px 0 22px;letter-spacing:-.075em;line-height:1.04}.hero h1>span,.hero h1>em{transform:scaleX(.88);width:113.6%}.intro{font-size:21px;max-width:335px}.hero-description{font-size:13px;max-width:330px}.explore{margin-top:10px}.section h2{font-size:39px}.about h2{font-size:37px;max-width:360px}.project-copy .project-lead{font-size:19px;max-width:350px}.version-links{order:4;width:100%;padding-top:8px;border-top:1px solid var(--line);gap:20px;line-height:1.8}}
@media(max-width:370px){.hero h1{font-size:16vw}.intro{font-size:20px}.section h2{font-size:35px}.about h2{font-size:33px}}

/* Reading comfort and a shorter path to the work. */
.hero-description{font-size:15px;line-height:1.8;max-width:370px}
.hero-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:25px}
.hero-actions .explore{margin:0;font-size:12px}
.hero-contact{font-size:12px;color:var(--muted);padding:16px 0}
.hero-contact:hover{color:var(--accent)}
.eyebrow{font-size:10px}
.project-copy>p:not(.eyebrow):not(.project-lead),.about-copy>p:not(.about-lead),.section-heading>p:last-child{font-size:15px;line-height:1.8}
.project-category{font-size:11px;line-height:1.8}
.project-open{font-size:12px;min-height:44px}
.project-copy>p.proof-available{font:11px/1.8 var(--mono);color:var(--accent);margin-bottom:12px}
dialog.case-dialog{width:min(850px,calc(100% - 32px));max-width:850px}
dialog{max-height:88svh;overflow:auto;overscroll-behavior:contain}
dialog #detail-body p{font-size:15px;line-height:1.8}
dialog #detail-body .case-lead{font-size:23px;line-height:1.5;color:var(--fg);max-width:580px}
dialog #detail-body .case-status{font:10px/1.7 var(--mono);color:var(--accent);margin:20px 0 32px}
.case-section{margin:26px 0}
.case-section h3,.context-demo h3{font-size:16px;font-weight:500;color:var(--fg);margin:0 0 12px}
.case-section p{margin:0}
.case-section ul{padding-left:20px;margin:0;color:var(--muted);font-size:15px;line-height:1.9}
.context-demo{margin:36px 0 15px;padding-top:30px;border-top:1px solid var(--line)}
.context-demo h3{font-size:24px;letter-spacing:-.6px}
dialog #detail-body .demo-note{font-size:13px}
dialog #detail-body .demo-version{font:10px/1.8 var(--mono);color:var(--muted)}
.demo-choices{display:flex;gap:8px;margin:20px 0;flex-wrap:wrap}
.demo-choices button{font-size:12px;text-align:left;border:1px solid var(--line);padding:13px;line-height:1.5}
.demo-choices button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:#e8b96e0a}
.demo-result{background:#080a09;border:1px solid var(--line);padding:18px;min-width:0}
dialog #detail-body .demo-file{font:12px/1.7 var(--mono);color:var(--accent);margin:0 0 15px;overflow-wrap:anywhere}
.demo-result pre{font:11px/1.8 var(--mono);white-space:pre;overflow:auto;max-height:360px;color:#c3cbbd;max-width:100%;margin:0}
.demo-result pre:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.demo-result details{margin-top:20px;border-top:1px solid var(--line);padding-top:15px}
.demo-result summary{font-size:12px;cursor:pointer;padding:5px 0;color:var(--muted)}
.demo-result details pre{margin-top:15px}
.evidence-link{display:inline-block;font-size:12px;color:var(--accent);padding:18px 0;text-decoration:underline;text-underline-offset:4px}
.contact-address{display:inline-block;color:var(--accent);font-size:clamp(18px,3vw,28px);overflow-wrap:anywhere;padding:15px 0}
.contact-github{display:block;width:fit-content;font-size:13px;padding:14px 0;color:var(--muted);text-decoration:underline;text-underline-offset:5px}
.contact-github:hover{color:var(--accent)}
.footer-links{display:flex;align-items:center;gap:28px;margin-left:auto;flex-wrap:wrap}
.footer-links a{padding:10px 0}
.footer-links a:hover{color:var(--accent)}
@media(max-width:700px){
 .hero{padding-top:34px;padding-bottom:65px;gap:20px}
 .hero h1{margin-top:22px;margin-bottom:20px}
 .hero-description{font-size:15px}
 .hero-actions{gap:20px;margin-top:15px}
 .hero-actions .explore,.hero-contact{font-size:11px}
 .ascii-stage{height:240px}
 .eyebrow{font-size:9px}
 .project-copy>p:not(.eyebrow):not(.project-lead),.about-copy>p:not(.about-lead){font-size:15px}
 dialog{padding:38px 22px}
 dialog #detail-body .case-lead{font-size:21px}
 .demo-result{padding:13px}
 .demo-choices button{flex:1 1 140px}
}
.about-rule-label{font:10px var(--mono)!important;text-transform:uppercase;letter-spacing:2px;color:var(--accent)!important;margin:0 0 18px!important}.about-rule{font-size:clamp(24px,3vw,39px)!important;line-height:1.35!important;letter-spacing:-1px;color:var(--fg)!important;max-width:680px}.about-rule-sign{font-size:17px!important;line-height:1.7!important;color:var(--fg)!important;margin:22px 0 38px!important}.project-category{color:#999e96!important;font-family:var(--mono);font-size:10px;letter-spacing:.2px}
#detail-body .contact-method{display:flex;align-items:center;flex-wrap:wrap;position:relative;gap:10px;width:100%;padding:40px 20px 18px;background:#ffffff04;border:1px solid var(--line);border-radius:7px;margin:16px 0;font-size:clamp(16px,2.8vw,25px);color:var(--fg);text-decoration:none}#detail-body .contact-method:before{content:attr(data-label);position:absolute;top:15px;left:20px;font:9px var(--mono);letter-spacing:1.5px;color:var(--muted)}#detail-body .contact-address:hover{border-color:var(--accent);background:#e8b96e08}#detail-body .contact-discord{font-size:21px}.contact-discord .discord-copy{margin-left:auto;border-radius:4px;font-size:11px}.contact-discord .copy-status{flex-basis:100%;font-size:12px}.contact-discord .copy-status:empty{display:none}#detail-body .contact-github{margin-top:20px;text-decoration:none}.contact-github:hover{text-decoration:underline}
#detail-body .contact-discord .discord-copy{border:1px solid transparent;border-radius:6px;background:#ffffff08;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:10px 13px;color:#aeb4a7;min-width:92px;transition:background .18s,color .18s,border-color .18s}#detail-body .contact-discord .discord-copy:before{content:'⧉';font-size:17px;line-height:1}#detail-body .contact-discord .discord-copy:hover{background:#ffffff10;color:var(--fg);border-color:#ffffff19}#detail-body .contact-discord .discord-copy[data-copied="true"]{color:#c9dbb0;background:#c9dbb00b}#detail-body .contact-discord .discord-copy[data-copied="true"]:before{content:'✓'}#detail-body .contact-discord .discord-copy:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.section-heading{grid-template-columns:1fr 2fr!important}.section-heading #projects-title{grid-column:2}@media(max-width:650px){.section-heading #projects-title{grid-column:auto}}
/* Evidence and purpose before exploration, with the existing desktop composition. */
.featured>.project-copy{grid-column:2;grid-row:1}.featured>.project-preview{grid-column:1;grid-row:1}.project-pair>.project{display:flex;flex-direction:column}.project-pair>.project>.project-preview{order:0}.project-pair>.project>.project-copy{order:1}.project-preview{min-width:0;border:0;padding:0;margin:0}.project-preview>summary{display:none}.project-copy>.project-state{font:11px/1.7 var(--mono)!important;color:#b6bbae!important;margin:12px 0 18px;letter-spacing:0}.project-copy>.proof-available{display:inline-block;align-self:flex-start;font-size:12px;line-height:1.7;color:var(--accent);text-decoration:underline;text-underline-offset:5px;margin:12px 0}.work-entry{display:grid;grid-template-columns:1fr 1fr;gap:8vw;border-top:1px solid var(--line)}.work-entry h2{font-family:SignalDisplay,Arial,sans-serif;font-size:clamp(30px,3.5vw,52px);line-height:1.08;letter-spacing:-2px;max-width:540px;margin:30px 0}.work-entry p:not(.eyebrow){font-size:15px;line-height:1.85;color:var(--muted)}.work-entry .work-lead{font-size:22px!important;line-height:1.5!important;color:var(--fg)!important;margin-top:0}.work-contact{display:inline-flex;min-height:44px;align-items:center;padding:12px 0;color:var(--accent);border-bottom:1px solid var(--line);font-size:13px}.work-contact:hover{border-color:var(--accent)}
@media(max-width:650px){.featured{display:flex;flex-direction:column;gap:20px}.featured>.project-copy,.project-pair>.project>.project-copy{order:0;padding:0 0 18px}.featured>.project-preview,.project-pair>.project>.project-preview{order:1;width:100%}.project-preview>summary{display:list-item;cursor:pointer;min-height:48px;padding:15px 16px;border:1px solid var(--line);font-size:12px;color:var(--accent);background:#ffffff03}.project-preview[open]>summary{border-bottom:0}.project-copy>.project-state{font-size:12px!important;line-height:1.7!important}.project-category{font-size:11px!important}.project-copy>.proof-available{font-size:13px}.work-entry{display:block}.work-entry h2{font-size:35px;margin-bottom:30px;letter-spacing:-1.2px}.work-entry p:not(.eyebrow){font-size:15px}.work-entry .work-lead{font-size:21px!important}.work-contact{font-size:14px}}