/* Design notebook: shared portfolio typography, original art, ordinary scrolling. */
body.design-route{--page-bg:#121310;--page-fg:#e8e6dc;--page-muted:#b2b1a7;--page-line:#37392f;--page-accent:#d2bd9a;background:var(--page-bg);color:var(--page-fg)}
.design-route #detail-view{background:transparent}
.design-route .site-header{position:relative;height:90px;padding-inline:5vw}
.design-route #main{padding-top:0!important}
.design-route .site-header .wordmark{font:italic 29px Georgia,serif;letter-spacing:-3px}
.design-route .site-header a[aria-current="page"]{color:#ead6b7;border-bottom:1px solid #ad9574}
.dn-shell{width:90%;max-width:2400px;margin:auto;padding-bottom:70px;font-family:Arial,Helvetica,sans-serif}
.dn-shell h1,.dn-shell h2,.dn-shell h3{font-weight:400;letter-spacing:-.055em}
.dn-shell em{font-family:Georgia,serif;font-weight:400;color:inherit}
.dn-label{font:11px/1.6 var(--mono);letter-spacing:.12em;color:#afa99a;margin:0 0 24px;text-transform:uppercase}
.dn-lead{font-size:clamp(19px,1.5vw,34px);line-height:1.65;color:#b9b9ad;max-width:34em;margin:32px 0 0}
.dn-index-intro{padding:clamp(45px,7vw,140px) 0 65px;display:grid;grid-template-columns:1.15fr 1fr;column-gap:8vw;align-items:end}
.dn-index-intro>.dn-label{grid-column:1/-1}
.dn-index-intro h1{font-size:clamp(70px,8vw,200px);line-height:.97}
.dn-index-intro>.dn-lead{margin-bottom:6px;max-width:27em}
.dn-feature{display:grid;grid-template-columns:1.15fr 1fr;border-block:1px solid #414136;align-items:center;margin:20px 0 100px}
.dn-feature-copy{padding:50px 5vw}
.dn-feature-copy h2{font-size:clamp(38px,4.2vw,105px);line-height:1.02}
.dn-feature-copy h2 span{font-family:Georgia,serif;font-style:italic}
.dn-entry p:not(.dn-label){font-size:clamp(17px,1.1vw,25px);line-height:1.65;color:#b9b9ad;max-width:34em;margin:28px 0}
.dn-entry-link,.dn-link{display:inline-flex;align-items:center;gap:40px;padding:12px 0;border-bottom:1px solid #726c5b;font-size:15px}
.dn-entry-link span{transition:transform .2s}.dn-entry:hover .dn-entry-link span{transform:translate(3px,-3px)}
.dn-horse-art{position:relative;aspect-ratio:1.12;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#54433044,transparent 65%),#181914}
.dn-horse-art img{position:absolute;object-fit:contain;image-rendering:pixelated}
.dn-rider{width:57%;height:58%;left:22%;top:23%;animation:dn-horse-bob 3s ease-in-out infinite}
.dn-alien{width:22%;height:25%;left:66%;top:9%;animation:dn-alien-drift 7s ease-in-out infinite}
.dn-orbit{position:absolute;border:1px solid #c1a47226;border-radius:50%;width:85%;height:38%;left:7%;top:43%;transform:rotate(-20deg)}
.dn-orbit-two{width:115%;height:55%;left:-9%;top:35%;border-style:dashed}
.dn-art-caption{position:absolute;bottom:24px;left:28px;font:9px var(--mono);letter-spacing:.12em;color:#b6a489}
.dn-animated *{animation-play-state:paused!important}
.dn-animated.dn-playing *{animation-play-state:running!important}
@keyframes dn-horse-bob{50%{transform:translateY(-9px) rotate(-2deg)}}
@keyframes dn-alien-drift{50%{transform:translate(-20px,12px)}}
.dn-index-pair{display:grid;grid-template-columns:1fr 1fr;gap:5vw}
.dn-index-pair h2{font-size:clamp(35px,4vw,96px)}
.dn-index-pair .dn-label{margin-top:28px}
.dn-photo-preview,.dn-souls-art{aspect-ratio:1.4;overflow:hidden;position:relative}
.dn-photo-preview img{width:100%;height:100%;object-fit:cover;object-position:50% 61%}
.dn-souls-art{background:radial-gradient(ellipse at 45% 60%,#6a343122,transparent 70%),#171516;display:flex;align-items:center;justify-content:center}
.dn-heal-mark{display:flex;align-items:center;gap:clamp(20px,3vw,65px);height:65%;transform:rotate(18deg)}
.dn-heal-mark i{width:clamp(16px,2vw,46px);height:90%;background:linear-gradient(#d6c2a4,#9f6150 65%,#4c3329);display:block;box-shadow:1px 0 #f1deba55}
.dn-heal-mark i:nth-child(2){height:60%;opacity:.7}.dn-heal-mark i:nth-child(3){height:30%;opacity:.45}
.dn-souls-art>span{position:absolute;bottom:25px;left:30px;font:10px var(--mono);color:#b8a996;letter-spacing:.14em}
.dn-index-end{margin-top:100px;padding-top:40px;border-top:1px solid #3e4037;display:flex;align-items:center;justify-content:space-between;gap:24px}
.dn-index-end p{margin:0;color:#b9b9ad}
.dn-topline{display:flex;align-items:center;justify-content:space-between;padding:30px 0;color:#b9b9ad;font-size:14px}
.dn-topline span{font:11px var(--mono)}
.dn-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:6vw;align-items:center;padding:55px 0 85px;min-height:65svh}
.dn-hero h1{font-size:clamp(55px,6vw,150px);line-height:1.03}
.dn-hero .dn-horse-art{aspect-ratio:1}
.dn-hero .dn-souls-art{aspect-ratio:1}
.dn-section{display:grid;grid-template-columns:1fr 1fr;gap:6vw;border-top:1px solid #3d3e35;padding:clamp(45px,6vw,120px) 0}
.dn-section h2,.dn-art-section>h2{font-size:clamp(34px,3.7vw,82px);line-height:1.1}
.dn-copy p{font-size:clamp(17px,1.25vw,27px);line-height:1.8;color:#c0c0b5;margin:0 0 24px}
.dn-copy p:last-child{margin-bottom:0}
.dn-copy .dn-note,.dn-note{font-size:clamp(13px,.9vw,19px);color:#a2a293;border-left:1px solid #71624c;padding-left:22px;margin-top:30px}
.dn-figure{margin:0 0 70px;background:#191b16;border:1px solid #383c31}
.dn-figure svg{width:100%;height:auto}
.dn-svg-kicker{font:12px monospace;fill:#b5af9e;letter-spacing:2px}
.dn-svg-label{font:19px Arial;fill:#e2decf}.dn-svg-small{font:13px Arial;fill:#a7ad9c}
.dn-pixels{image-rendering:pixelated}
.dn-shell figcaption{font-size:clamp(12px,.8vw,18px);line-height:1.7;color:#aaa99d}
.dn-figure>figcaption{padding:18px 26px;border-top:1px solid #373a30}
.dn-art-section{border-top:1px solid #3d3e35;padding:65px 0 80px}
.dn-art-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;margin-top:45px}
.dn-art-grid figure{grid-column:span 2;margin:0;background:#1a1b16;border-bottom:1px solid #494536}
.dn-art-grid figure:nth-last-child(-n+2){grid-column:span 3}
.dn-art-grid img{height:clamp(160px,17vw,340px);width:100%;object-fit:contain;padding:30px}
.dn-art-grid figcaption{padding:14px 22px}
.dn-origin-photo{margin:0}
.dn-origin-photo img{max-height:76svh;width:100%;object-fit:contain;background:#131e27}
.dn-origin-photo figcaption{padding-top:14px}
.dn-concept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3vw;margin-top:55px}
.dn-concept-grid article{padding-top:25px;border-top:1px solid #595c4d}
.dn-concept-grid article>span{font:12px var(--mono);color:#ad9f84;display:block;margin-bottom:25px}
.dn-concept-grid h3{font-size:clamp(23px,2vw,44px);line-height:1.2;margin:0 0 20px}
.dn-concept-grid p{font-size:clamp(16px,1.05vw,23px);color:#b8baad;line-height:1.75}
.dn-boss-sequence{margin:0 0 75px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #484c3c}
.dn-boss-sequence>div{padding:35px;background:#1a1e17}
.dn-boss-sequence>div+div{border-left:1px solid #484c3c}
.dn-boss-sequence strong{font-size:clamp(23px,2vw,42px);line-height:1.15;font-weight:400;display:block;margin-bottom:22px}
.dn-boss-sequence p:not(.dn-label){font-size:16px;line-height:1.7;color:#b8baad;margin:0}
.dn-boss-sequence figcaption{grid-column:1/-1;padding:20px 30px;border-top:1px solid #484c3c}
.dn-resource-figure{display:grid;grid-template-columns:1fr 1fr;gap:30px 5vw;margin:0 0 75px;padding:40px;border:1px solid #484c3c;background:#191d17}
.dn-resource-figure h3{font-size:32px}.dn-resource-figure p:not(.dn-label){color:#b8baad;font-size:16px;line-height:1.6;margin:20px 0 0}
.dn-resource-line{height:12px;background:#2e3329;margin-top:30px}.dn-resource-line span{display:block;height:100%;width:65%;background:#b3aa76}.dn-resource-line.gas span{width:40%;background:#788b68}
.dn-resource-figure figcaption{grid-column:1/-1}
.dn-healing{background:#1b1717;padding:40px 4vw}
.dn-healing-top{display:flex;gap:20px;justify-content:space-between;align-items:start}
.dn-healing-top>span{font:13px var(--mono);color:#dbbba0;white-space:nowrap}
.dn-heal-rows{margin:25px 0 50px}
.dn-heal-row{display:grid;grid-template-columns:120px 1fr 110px;gap:25px;align-items:center;margin:25px 0}
.dn-heal-row>span{font-size:16px;color:#d4c9b7}
.dn-heal-row>div{height:30px;background:#372b29}
.dn-heal-row i{display:block;height:100%;width:var(--amount);background:linear-gradient(90deg,#9b6050,#cbb18a);transition:opacity .5s}
.dn-heal-row small{font-size:12px;color:#bcae99}
.dn-rest-rule{display:flex;gap:25px;justify-content:space-between;border-top:1px solid #56433b;padding:28px 0;color:#b9aa98}
.dn-rest-rule strong{font-weight:400}.dn-rest-rule.is-current{color:#efd7ae}
.dn-healing>figcaption{padding:18px 0 0;border-color:#493832}
.dn-closing-note{color:#aaa99d;font-size:14px;padding:0 0 40px}
.dn-study-end{display:flex;justify-content:space-between;align-items:end;border-top:1px solid #464638;padding:40px 0;gap:30px}
.dn-study-end>a:first-child{font-size:14px;color:#b9b9ad}
.dn-study-end .dn-label{margin-bottom:15px}
.dn-study-end strong{font-size:clamp(22px,2vw,40px);font-weight:400}
.dn-missing{min-height:65vh;padding-top:100px}.dn-missing h1{font-size:50px;margin-bottom:40px}
@media(min-width:2200px){.dn-label{font-size:15px}.dn-entry-link,.dn-link,.dn-topline,.dn-study-end>a:first-child{font-size:20px}.dn-shell{width:86%}}
@media(max-width:800px){
 .site-header nav{gap:18px}.dn-index-intro{grid-template-columns:1fr;gap:0;padding-top:45px}.dn-index-intro>.dn-lead{margin-top:30px}
 .dn-feature{grid-template-columns:1fr;margin-bottom:60px}.dn-horse-art{aspect-ratio:1.3}.dn-feature-copy{padding:35px 0}
 .dn-index-pair{gap:35px}.dn-index-pair h2{font-size:34px}
 .dn-hero{grid-template-columns:1fr;gap:40px;padding:30px 0 55px;min-height:0}
 .dn-hero .dn-horse-art,.dn-hero .dn-souls-art{aspect-ratio:1.3}
 .dn-section{grid-template-columns:1fr;gap:32px;padding:45px 0}
 .dn-section h2{font-size:40px}
 .dn-art-grid{gap:15px}.dn-art-grid img{padding:20px}
 .dn-concept-grid{grid-template-columns:1fr;gap:20px;margin-top:35px}
 .dn-concept-grid article>span{margin-bottom:15px}
 .dn-boss-sequence{grid-template-columns:1fr}.dn-boss-sequence>div+div{border-left:0;border-top:1px solid #484c3c}
 .dn-resource-figure{padding:25px;gap:30px}
 .dn-healing{padding:25px}.dn-heal-row{grid-template-columns:85px 1fr;gap:12px}.dn-heal-row small{grid-column:2}
 .dn-rest-rule{flex-direction:column;gap:8px}.dn-healing-top{flex-direction:column;gap:0}
 .dn-index-end{margin-top:65px;align-items:start;flex-direction:column}
}
@media(max-width:520px){
 .site-header,.home-route .site-header,.design-route .site-header{padding-inline:5vw}
 .site-header nav,.home-route .site-header nav{gap:13px;font-size:11px}
 .site-header #motion-toggle{font-size:9px}.site-header nav span{display:none}
 .dn-index-intro h1{font-size:68px}.dn-index-pair{grid-template-columns:1fr;gap:55px}
 .dn-hero h1{font-size:54px}.dn-art-grid{grid-template-columns:1fr 1fr}
 .dn-art-grid figure,.dn-art-grid figure:nth-last-child(-n+2){grid-column:auto}.dn-art-grid figure:last-child{grid-column:1/-1}
 .dn-resource-figure{grid-template-columns:1fr}.dn-study-end{align-items:start;flex-direction:column}
 .dn-figure svg{min-width:650px}.dn-figure[data-design-scene="horse"]{overflow-x:auto}.dn-figure[data-design-scene="horse"] figcaption{position:sticky;left:0;max-width:90vw}
 .dn-origin-photo img{max-height:65svh}
}
@media(prefers-reduced-motion:reduce){.dn-animated *{animation:none!important}.dn-heal-row i{transition:none}}
.no-motion .dn-animated *{animation-play-state:paused!important}.no-motion .dn-heal-row i{transition:none}

/* Keep route focus off the page frame; links retain visible keyboard focus. */
.design-route #main:focus{outline:none}
.dn-rider{width:78%;height:78%;left:11%;top:12%}
.dn-diagram-key{display:flex;gap:24px;padding:18px 26px 0;margin:0;font-size:13px;color:#b9b9ad}
@media(max-width:520px){.dn-figure[data-design-scene=horse]{overflow:hidden}.dn-figure svg{min-width:0}.dn-figure .dn-svg-label,.dn-figure .dn-svg-small,.dn-figure .dn-svg-kicker{display:none}.dn-diagram-key{flex-direction:column;gap:5px;padding:15px 18px 0;font-size:12px}}

/* Headless art: characters, full arsenal, then both sides of the shop. */
.dn-art-intro{max-width:44em;font-size:clamp(17px,1.25vw,27px);line-height:1.75;color:#c0c0b5;margin:28px 0 0}
.dn-art-grid.dn-headless-art figure{grid-column:span 2}
.dn-art-grid.dn-headless-art figure:nth-child(-n+2),.dn-art-grid.dn-headless-art figure:nth-last-child(-n+2){grid-column:span 3}
@media(max-width:520px){.dn-art-grid.dn-headless-art figure,.dn-art-grid.dn-headless-art figure:nth-child(-n+2){grid-column:auto}.dn-art-grid.dn-headless-art figure:nth-child(5){grid-column:1/-1}.dn-art-grid.dn-headless-art figure:nth-last-child(-n+2){grid-column:1/-1}}

/* Notebook discovery in the ordinary project-browsing flow. */
.notebook-feature{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr;position:relative;overflow:hidden;color:#e8e6dc!important;background:#1a1b16;border-block:1px solid #4b4d40;margin-block:12px;isolation:isolate}
.notebook-feature-copy{padding:clamp(32px,4.5vw,100px);padding-right:0;position:relative;z-index:1}
.notebook-feature-label{font:11px/1.6 var(--mono);letter-spacing:.12em;color:#ada98e;margin:0 0 26px}
.notebook-feature h2{font:400 clamp(48px,5.3vw,130px)/.98 Arial,sans-serif;letter-spacing:-.055em;margin:0}
.notebook-feature h2 em{font-family:Georgia,serif;color:inherit}
.notebook-feature-copy>p:not(.notebook-feature-label){font:clamp(17px,1.2vw,28px)/1.65 Arial,sans-serif;max-width:29em;color:#bdc0b1;margin:30px 0}
.notebook-feature-link{display:inline-flex;gap:40px;border-bottom:1px solid #8c8f75;padding:10px 0;font:clamp(14px,1vw,23px) Arial,sans-serif}
.notebook-feature-link>span{transition:transform .2s}.notebook-feature:hover .notebook-feature-link>span{transform:translate(3px,-3px)}
.notebook-feature-art{position:relative;min-height:360px;align-self:stretch}
.notebook-feature-art img{position:absolute;object-fit:contain}
.notebook-preview-horse{width:67%;height:78%;left:-3%;top:10%;image-rendering:pixelated;transform:rotate(-7deg)}
.notebook-preview-lego{width:48%;height:69%;right:5%;top:15%;transform:rotate(9deg)}
.notebook-feature-entries{grid-column:1/-1;border-top:1px solid #414638;padding:24px clamp(30px,4.5vw,100px);display:flex;justify-content:space-between;gap:25px;font:10px var(--mono);color:#909981}
.notebook-feature-entries strong{font:400 clamp(13px,1vw,23px) Arial,sans-serif;color:#c9cebc;margin-left:12px}
.notebook-followup{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:45px 0;border-top:1px solid var(--page-line,#414638);margin-top:45px}
.notebook-followup p{font:11px/1.6 var(--mono);letter-spacing:.1em;color:var(--page-muted,#b5b8ac);margin:0 0 14px}
.notebook-followup h2{font-size:clamp(28px,3vw,55px)}
.notebook-followup a{display:inline-flex;gap:25px;padding:12px 0;border-bottom:1px solid currentColor;font-size:15px}
@media(max-width:800px){
 .notebook-feature{grid-template-columns:1fr}.notebook-feature-copy{padding:35px 30px 0}
 .notebook-feature h2{font-size:60px}.notebook-feature-art{min-height:280px}
 .notebook-feature-entries{flex-direction:column;gap:16px;padding:25px 30px}
 .notebook-followup{flex-direction:column;align-items:start}
}
@media(prefers-reduced-motion:reduce){.notebook-feature-link>span{transition:none}}
.no-motion .notebook-feature-link>span{transition:none}

.dn-photo-preview img{object-fit:contain;object-position:center;padding:6%}.dn-origin-photo img{background:transparent;max-height:70svh;object-fit:contain}