/* ============================================================
joshuaduhon.com — Digital HQ design system (P0 foundation)
Direction: "The Cartographer's Mind" (C) + Mission-Control (B)
Not linked by any page yet — safe to iterate. See REBUILD-PLAN.md.
Fonts: each migrated page adds in :
(self-host later for perf/offline).
============================================================ */
/* ---- design tokens : LIGHT (default) ---- */
:root{
--paper:#ECE7DD; --paper-2:#E4DCCB; --oak:#E0D8C6;
--ink:#1A1712; --ink-soft:#3B342A; --walnut:#5C5140; --faint:#8A7C64;
--brass:#B08D4F; --brass-deep:#8A6D38; --oxblood:#7C3A2D; --oxblood-ink:#6B3126;
--rule:#D2C6AE; --rule-soft:#DED4BF;
/* console sub-palette — data / security zones only */
--con-bg:#0E1223; --con-bg-2:#020617; --con-line:#1E293B;
--con-text:#E5E9F0; --con-faint:#94A3B8; --amber:#F59E0B;
--sig-good:#22C55E; --sig-warn:#F59E0B; --sig-crit:#DC5B4B;
/* semantic roles */
--bg:var(--paper); --surface:var(--oak); --text:var(--ink);
--text-2:var(--ink-soft); --muted:var(--walnut); --accent:var(--oxblood);
--line:var(--rule);
/* type */
--serif:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
--mono:"IBM Plex Mono","Cascadia Code",Consolas,ui-monospace,monospace;
--measure:65ch;
/* scale (8px base) */
--s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4.5rem; --s7:7rem;
--maxw:74rem;
--focus:var(--oxblood);
}
@media (prefers-color-scheme:dark){
:root{
--paper:#14100B; --paper-2:#1C1710; --oak:#211A12;
--ink:#E8DFD4; --ink-soft:#C9BEAC; --walnut:#A2917A; --faint:#7C6E58;
--brass:#C6A46A; --brass-deep:#B08D4F; --oxblood:#D06450; --oxblood-ink:#E0765F;
--rule:#33291D; --rule-soft:#2A2116;
--con-bg:#0B0E1A; --con-line:#243044; --con-text:#E5E9F0; --con-faint:#8595AC;
}
}
:root[data-theme="light"]{
--paper:#ECE7DD; --paper-2:#E4DCCB; --oak:#E0D8C6;
--ink:#1A1712; --ink-soft:#3B342A; --walnut:#5C5140; --faint:#8A7C64;
--brass:#B08D4F; --brass-deep:#8A6D38; --oxblood:#7C3A2D; --oxblood-ink:#6B3126;
--rule:#D2C6AE; --rule-soft:#DED4BF;
}
:root[data-theme="dark"]{
--paper:#14100B; --paper-2:#1C1710; --oak:#211A12;
--ink:#E8DFD4; --ink-soft:#C9BEAC; --walnut:#A2917A; --faint:#7C6E58;
--brass:#C6A46A; --brass-deep:#B08D4F; --oxblood:#D06450; --oxblood-ink:#E0765F;
--rule:#33291D; --rule-soft:#2A2116;
--con-bg:#0B0E1A; --con-line:#243044; --con-text:#E5E9F0; --con-faint:#8595AC;
}
/* ---- reset / base ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;background:var(--bg);color:var(--text);
font-family:var(--serif);font-size:1.0625rem;line-height:1.62;
font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
/* ---- type scale ---- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;
letter-spacing:-.012em;margin:0 0 var(--s2);text-wrap:balance;color:var(--text)}
h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3.4vw,2.7rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:600}
p{margin:0 0 var(--s2);max-width:var(--measure)}
em{font-style:italic;color:var(--accent)}
a{color:inherit;text-decoration-color:color-mix(in srgb,var(--brass) 60%,transparent);
text-underline-offset:.18em}
a:hover{text-decoration-color:var(--brass)}
/* uppercase mono labels / eyebrows / marginalia */
.label,.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--faint)}
.eyebrow{color:var(--oxblood)}
/* editorial drop cap — opt-in via .drop on a paragraph */
.drop::first-letter{font-family:var(--serif);font-weight:600;color:var(--oxblood);
font-size:3.4em;line-height:.72;float:left;padding:.08em .12em 0 0}
/* ---- layout primitives ---- */
.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.stack>*+*{margin-top:var(--s3)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.brass-rule{display:flex;align-items:center;gap:.75rem;color:var(--brass);margin:var(--s3) 0}
.brass-rule::before,.brass-rule::after{content:"";height:1px;flex:1;
background:linear-gradient(90deg,transparent,var(--brass) 40%,var(--brass) 60%,transparent)}
/* manuscript grid: margin rail + main column */
.manuscript{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,var(--measure));
gap:var(--s4);align-items:start}
.manuscript .margin{font-family:var(--mono);font-size:.72rem;line-height:1.7;
letter-spacing:.06em;color:var(--faint);border-right:1px solid var(--line);padding-right:var(--s2)}
@media (max-width:760px){
.manuscript{grid-template-columns:1fr}
.manuscript .margin{border-right:0;border-left:2px solid var(--brass);
padding:0 0 0 var(--s2);margin-bottom:var(--s2)}
}
/* ---- console zone (Mission-Control instrumentation) ---- */
.console{background:var(--con-bg);color:var(--con-text);font-family:var(--mono);
border:1px solid var(--con-line);border-radius:2px;
background-image:linear-gradient(color-mix(in srgb,var(--con-faint) 6%,transparent) 1px,transparent 1px),
linear-gradient(90deg,color-mix(in srgb,var(--con-faint) 6%,transparent) 1px,transparent 1px);
background-size:34px 34px}
.console .readout{font-family:var(--serif);font-weight:600;font-size:1.7rem;
letter-spacing:-.02em;color:var(--con-text);font-variant-numeric:tabular-nums}
.console .k{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--con-faint)}
.status{display:inline-flex;align-items:center;gap:.4em;font-family:var(--mono);font-size:.72rem}
.status::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--sig-good)}
.status.warn::before{background:var(--sig-warn)}
.status.crit::before{background:var(--sig-crit)}
/* ---- accessibility primitives ---- */
.skip-link{position:absolute;left:.5rem;top:-3rem;z-index:100;background:var(--ink);
color:var(--paper);padding:.6rem 1rem;border-radius:2px;font-family:var(--mono);
font-size:.8rem;transition:top .15s}
.skip-link:focus{top:.5rem}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
outline:2px solid var(--focus);outline-offset:2px;border-radius:1px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* reveal-on-scroll (JS adds .in); no-JS + reduced-motion => always visible */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.no-js .reveal{opacity:1;transform:none}
/* ============================================================
BUILDING SHELL + ROOM TRANSITIONS
One building, many rooms. The masthead + footer are the
permanent structure; the room swaps beneath. Each page sets
for its own personality.
============================================================ */
/* Cross-document view transitions (MPA). No-op where unsupported. */
@view-transition{navigation:auto}
/* Permanent structure keeps its own transition group => it appears to persist
while the room glides through the doorway. */
.hq-header{view-transition-name:hq-masthead}
.hq-footer{view-transition-name:hq-footer}
.room{view-transition-name:hq-room} /* the content */
.room-plaque{view-transition-name:hq-plaque} /* the door-sign morphs room to room */
::view-transition-old(hq-room){animation:room-out .28s ease both}
::view-transition-new(hq-room){animation:room-in .42s ease .06s both}
@keyframes room-out{to{opacity:0;transform:translateY(-6px) scale(.995)}}
@keyframes room-in{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
/* ---- per-room personality : shared language, own accent + character ---- */
:root{--room-accent:var(--brass)}
[data-room="entrance"] {--room-accent:var(--brass)}
[data-room="manual"] {--room-accent:var(--walnut)}
[data-room="library"] {--room-accent:var(--oxblood)}
[data-room="engineering"]{--room-accent:var(--amber)}
[data-room="strategy"] {--room-accent:var(--brass-deep)}
[data-room="investment"] {--room-accent:#5E6B4C} /* ledger green, patinated */
[data-room="history"] {--room-accent:#B4552F} /* controlled ember */
/* The Secure Operations Center is the dark room — console takes the ground. */
[data-room="soc"]{
--bg:var(--con-bg); --surface:var(--con-bg-2); --text:var(--con-text);
--text-2:#C7CEDA; --muted:var(--con-faint); --line:var(--con-line);
--accent:var(--amber); --room-accent:var(--amber); --serif:var(--mono);
}
/* Room plaque — the engraved door-sign every room carries. */
.room-plaque{display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);
font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--room-accent)}
.room-plaque::before{content:"";width:1.6em;height:1px;background:var(--room-accent)}
/* accent hooks so components use the room's color without naming the room */
.accent{color:var(--room-accent)}
.accent-rule{background:var(--room-accent)}
/* ============================================================
SHARED COMPONENTS — the building's fittings
============================================================ */
.hq-header,.hq-footer,.room{display:block}
/* section rhythm inside a room */
.bay{padding:var(--s6) 0;border-top:1px solid var(--rule-soft)}
.bay:first-child{border-top:0}
.bay-head{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s4);flex-wrap:wrap}
.bay-head .idx{font-family:var(--mono);color:var(--room-accent);font-size:.78rem;letter-spacing:.1em}
.bay-head h2{margin:0}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-size:.76rem;
letter-spacing:.1em;text-transform:uppercase;padding:.85em 1.35em;border:1px solid var(--ink);
color:var(--ink);background:transparent;border-radius:2px;cursor:pointer;text-decoration:none;
transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn--accent{border-color:var(--room-accent);color:var(--room-accent)}
.btn--accent:hover{background:var(--room-accent);color:var(--bg)}
.btn--ghost{border-color:var(--line);color:var(--muted)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink);background:transparent}
/* masthead — permanent structure */
.hq-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 85%,transparent);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.hq-header .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:4.4rem}
.wordmark{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;color:var(--ink)}
.wordmark b{font-family:var(--serif);font-weight:600;font-size:1.2rem;letter-spacing:-.01em}
.wordmark span{font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.wings{display:flex;gap:1.15rem;align-items:center;flex-wrap:wrap}
.wings a{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);text-decoration:none;padding:.3em 0;position:relative;white-space:nowrap}
.wings a:hover{color:var(--ink)}
.wings a[aria-current="page"]{color:var(--room-accent)}
.wings a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-.25em;height:1px;background:var(--room-accent)}
.hq-tools{display:flex;align-items:center;gap:.55rem}
.icon-btn{width:2.2rem;height:2.2rem;display:grid;place-items:center;border:1px solid var(--rule);
background:transparent;color:var(--muted);border-radius:2px;cursor:pointer;font-family:var(--mono);font-size:.9rem;line-height:1}
.icon-btn:hover{color:var(--ink);border-color:var(--ink)}
.nav-toggle{display:none}
@media (max-width:920px){
.wings{position:fixed;inset:4.4rem 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
background:var(--bg);border-bottom:1px solid var(--rule);padding:var(--s2) 1.25rem var(--s3);
transform:translateY(-125%);transition:transform .32s ease;box-shadow:0 22px 44px rgba(0,0,0,.14)}
.wings.open{transform:none}
.wings a{font-size:.95rem;padding:.7em 0;width:100%;border-bottom:1px solid var(--rule-soft)}
.wings a[aria-current="page"]::after{display:none}
.nav-toggle{display:grid}
}
@media (prefers-reduced-motion:reduce){.wings{transition:none}}
/* footer — permanent structure (the front desk) */
.hq-footer{border-top:1px solid var(--rule);padding:var(--s5) 0 var(--s6);margin-top:var(--s7);color:var(--muted)}
.hq-footer .cols{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.hq-footer .col b{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--faint);display:block;margin-bottom:.8rem}
.hq-footer .col a{display:block;font-family:var(--serif);font-size:1.02rem;padding:.16rem 0;color:var(--text-2);text-decoration:none}
.hq-footer .col a:hover{color:var(--ink)}
.hq-footer .sig{max-width:22rem}
.hq-footer .sig p{font-size:.98rem;color:var(--muted)}
.colophon{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;
font-family:var(--mono);font-size:.66rem;color:var(--faint);letter-spacing:.05em;
margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule-soft)}
/* ---- shared room furniture (every room's hero uses these bones) ---- */
.room-hero{padding-top:clamp(2.5rem,6vw,var(--s6))}
.room-hero-grid{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media(min-width:920px){.room-hero-grid{grid-template-columns:minmax(0,1fr) 15rem;gap:var(--s6);align-items:end}}
.room-title{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:400;line-height:1.02;letter-spacing:-.025em;margin:.7rem 0 var(--s3);max-width:16ch}
.room-title em{font-style:italic;color:var(--room-accent)}
.lede{font-size:clamp(1.08rem,1.45vw,1.3rem);color:var(--text-2);max-width:56ch;margin-bottom:var(--s4)}
.plate{display:grid;grid-template-columns:1fr;border-left:2px solid var(--room-accent);padding-left:var(--s2)}
.plate .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin-top:.85rem}
.plate .k:first-child{margin-top:0}
.plate .v{font-family:var(--serif);font-size:1rem;color:var(--text-2);line-height:1.35}
/* pull-quote — editorial device shared across reading rooms */
.pull{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.6vw,2.05rem);
line-height:1.3;color:var(--text);max-width:26ch;margin:0;padding-left:var(--s3);
border-left:2px solid var(--room-accent)}
.pull cite{display:block;font-style:normal;font-family:var(--mono);font-size:.68rem;
letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:var(--s2)}
/* ============================================================
MEDIA — archival & editorial. Driven by data/media.json.
Photographs and footage are captioned, quiet, and connected
to the surrounding story — never a feed, gallery, or player UI.
============================================================ */
.media-mount{margin-top:var(--s3)}
figure.fig{margin:0 0 var(--s3);display:flex;flex-direction:column;gap:.7rem}
figure.fig img,figure.fig video{display:block;width:100%;height:auto;
border:1px solid var(--rule);border-radius:2px;background:var(--surface)}
figure.fig video{aspect-ratio:16/9;object-fit:cover}
figure.fig figcaption{font-family:var(--serif);font-size:.96rem;color:var(--muted);line-height:1.5;
padding-left:var(--s2);border-left:2px solid var(--room-accent);max-width:60ch}
figure.fig figcaption .cap-label{display:block;font-family:var(--mono);font-size:.6rem;
letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:.28rem}
figure.fig--portrait{max-width:26rem}
figure.fig--portrait img{aspect-ratio:4/5;object-fit:cover}
figure.fig--wide img{aspect-ratio:21/9;object-fit:cover}
.media-gallery{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.media-gallery figure.fig{margin:0}
.media-strip{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.media-strip figure.fig{margin:0}
/* archival empty state — intentional, quiet; never a broken-image icon */
.media-empty{border:1px solid var(--rule);border-radius:2px;
background:repeating-linear-gradient(135deg,transparent,transparent 11px,
color-mix(in srgb,var(--rule) 20%,transparent) 11px,color-mix(in srgb,var(--rule) 20%,transparent) 12px);
padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.media-empty .ml{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--room-accent)}
.media-empty p{margin:0;font-family:var(--serif);font-style:italic;color:var(--muted);max-width:54ch;font-size:.98rem}
/* auto-indexed galleries (masonry, no crop) + lightbox */
.media-gallery{columns:16rem 3;column-gap:var(--s2)}
@media(max-width:640px){.media-gallery{columns:1}}
.media-gallery .fig{break-inside:avoid;margin:0 0 var(--s2)}
.media-inline{max-width:22rem}
.media-intro{color:var(--muted);max-width:62ch;margin:0 0 var(--s4)}
.fig--photo .fig-open{display:block;width:100%;padding:0;border:1px solid var(--rule);border-radius:2px;
background:var(--surface);cursor:zoom-in;overflow:hidden;line-height:0}
.fig--photo .fig-open img{width:100%;height:auto;object-fit:contain;transition:opacity .2s ease}
.fig--photo .fig-open:hover{border-color:var(--room-accent)}
.fig--photo .fig-open:hover img{opacity:.92}
.fig--photo figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--faint);margin-top:.5rem}
.media-videos{display:grid;gap:var(--s4)}
@media(prefers-reduced-motion:reduce){.fig--photo .fig-open img{transition:none}}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(12,9,6,.93);
display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)}
.lightbox[hidden]{display:none}
.lb-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.9rem;max-width:100%;max-height:100%}
.lb-img{max-width:min(94vw,1500px);max-height:82vh;width:auto;height:auto;object-fit:contain;
border:1px solid rgba(255,255,255,.14);background:#0c0906}
.lb-cap{font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;color:#E8DFD4;text-align:center;max-width:64ch}
.lb-btn{position:absolute;width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(255,255,255,.28);
background:rgba(0,0,0,.4);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;font-family:system-ui,sans-serif}
.lb-btn:hover{background:rgba(0,0,0,.7)}
.lb-close{top:1.1rem;right:1.1rem}
.lb-prev{left:1.1rem;top:50%;transform:translateY(-50%)}
.lb-next{right:1.1rem;top:50%;transform:translateY(-50%)}