/* ═══════════════════════════════════════════════════════════════ THE ARCHITECT SERIES — "THE INSTRUMENT" Design system v3 · malachyalceac.com Field: the covers' dark void. Accents: one glow per volume. Components: the drafting instruments. Corners: square. Motion: near-none. ═══════════════════════════════════════════════════════════════ */ /* ---------- FONTS (self-hosted, subset, swapped) ---------- */ @font-face{font-family:'Archivo Black';src:url('/series-assets/fonts/archivo-black.woff2') format('woff2');font-display:swap} @font-face{font-family:'Plex Mono';src:url('/series-assets/fonts/plex-mono.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Plex Mono';src:url('/series-assets/fonts/plex-mono-sb.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Source Serif 4';src:url('/series-assets/fonts/source-serif-var.woff2') format('woff2');font-weight:400 700;font-display:swap} @font-face{font-family:'Source Serif 4';src:url('/series-assets/fonts/source-serif-it.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap} /* ---------- TOKENS ---------- */ :root{ --ink:#EDEBE6; --ink-dim:#A6A29A; --ink-faint:#8B867D; /* faint ink still clears WCAG AA on the void */ --void:#0A0A0C; --void-2:#101014; --display:'Archivo Black',Impact,sans-serif; --serif:'Source Serif 4',Georgia,serif; --mono:'Plex Mono',ui-monospace,monospace; --max:1200px; --gutter:clamp(22px,5vw,60px); --hair:color-mix(in oklab,var(--ink) 12%,transparent); --hair-soft:color-mix(in oklab,var(--ink) 7%,transparent); --accent:#EDEBE6; --accent-deep:#4A4A52; --glow:rgba(237,235,230,.07); --t:160ms ease; /* the one permitted transition speed band */ } /* THE THREE VOLUMES — set on ; default = series neutral */ body[data-world="i"]{ --accent:#7FE9DF; --accent-deep:#2E6C86; --glow:rgba(127,233,223,.13); } body[data-world="ii"]{ --accent:#F0A742; --accent-deep:#8A4B1E; --glow:rgba(240,167,66,.12); } body[data-world="iii"]{ --accent:#B78BF5; --accent-deep:#3C5A46; --glow:rgba(183,139,245,.13); } /* local accent override for cards/rows that carry a sibling volume's mark */ .acc-i{ --accent:#7FE9DF; --accent-deep:#2E6C86; --glow:rgba(127,233,223,.13); } .acc-ii{ --accent:#F0A742; --accent-deep:#8A4B1E; --glow:rgba(240,167,66,.12); } .acc-iii{ --accent:#B78BF5; --accent-deep:#3C5A46; --glow:rgba(183,139,245,.13); } /* ---------- RESET ---------- */ *{margin:0;padding:0;box-sizing:border-box;border-radius:0} html{-webkit-text-size-adjust:100%} body{background:var(--void);color:var(--ink);font:400 19px/1.65 var(--serif); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip} img,svg,canvas{display:block;max-width:100%} a{color:inherit;text-decoration:none} ::selection{background:var(--accent);color:var(--void)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} main,header,section,footer{overflow-x:clip} /* field: void gradient + single volume glow (fixed, cheap) */ body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(110% 70% at 50% -6%, var(--glow), transparent 62%), linear-gradient(180deg, var(--void), var(--void-2))} /* drafting grid — ~4% opacity, on field sections via .grid-field */ .grid-field{position:relative} .grid-field::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.045; background: repeating-linear-gradient(0deg, var(--ink) 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 48px)} /* ---------- LAYOUT ---------- */ .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)} .wrap--narrow{max-width:780px} .pad{padding-block:clamp(72px,12vh,150px)} .pad-s{padding-block:clamp(48px,7vh,96px)} /* ---------- TYPE ---------- */ .kicker{font:600 12px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--accent)} .kicker--dim{color:var(--ink-faint)} .display{font-family:var(--display);text-transform:uppercase;line-height:.95;letter-spacing:-.005em;font-weight:400} h1.display{font-size:clamp(40px,7.5vw,104px)} h2.display{font-size:clamp(30px,4.8vw,64px)} h3.display{font-size:clamp(21px,2.6vw,32px)} .anchor-line{font-family:var(--serif);font-style:italic;font-weight:400;line-height:1.18;letter-spacing:-.01em; font-size:clamp(26px,4.4vw,54px)} .lede{font-size:clamp(19px,2vw,24px);line-height:1.55;color:var(--ink-dim);max-width:58ch} .prose{max-width:62ch;color:var(--ink-dim)} .prose p+p{margin-top:1.25em} .prose em,em{font-style:italic;color:var(--ink)} .mono{font-family:var(--mono);letter-spacing:.02em} .accent{color:var(--accent)} .center{text-align:center} /* ---------- DIMENSION-LINE DIVIDER (rule with end ticks + mono caption) ---------- */ .dim{display:flex;align-items:center;gap:18px;margin-block:clamp(40px,7vh,80px)} .dim .line{flex:1;height:1px;background:var(--hair);position:relative} .dim .line::before,.dim .line::after{content:'';position:absolute;top:-5px;width:1px;height:11px;background:var(--hair)} .dim .line::before{left:0} .dim .line::after{right:0} .dim .cap{font:600 10px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap} /* ---------- NAV ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;transition:background var(--t)} .nav.scrolled{background:color-mix(in oklab,var(--void) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair-soft)} .nav__in{display:flex;align-items:center;justify-content:space-between;height:64px} .brand{font:600 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:10px} .brand .mark{width:14px;height:10px;display:flex;gap:2px} .brand .mark i{flex:1;background:var(--accent)} .brand .mark i:nth-child(2){opacity:.65} .brand .mark i:nth-child(3){opacity:.35} .nav__links{display:flex;gap:26px;align-items:center} .nav__links a{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);transition:color var(--t);padding:6px 0} .nav__links a:hover,.nav__links a[aria-current]{color:var(--ink)} .nav__links a.is-cta{border:1px solid var(--accent);color:var(--accent);padding:10px 16px} .nav__links a.is-cta:hover{background:var(--accent);color:var(--void)} /* measure dropdown */ .measure{position:relative} .measure>a::after{content:' ▾';font-size:9px} .measure__menu{position:absolute;top:100%;right:0;min-width:250px;background:var(--void-2);border:1px solid var(--hair); display:none;flex-direction:column;padding:6px 0} .measure:hover .measure__menu,.measure:focus-within .measure__menu{display:flex} .measure__menu a{padding:11px 16px;letter-spacing:.1em} .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px} .burger span{width:22px;height:2px;background:var(--ink);transition:transform var(--t),opacity var(--t)} @media(max-width:920px){ .nav__links{position:fixed;inset:0;background:var(--void);flex-direction:column;justify-content:center;gap:30px;display:none;z-index:99} .nav__links.open{display:flex} .nav__links a{font-size:15px} .burger{display:flex;z-index:100;position:relative} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .measure__menu{position:static;border:none;background:none;display:flex;align-items:center;gap:14px;padding:0} .measure>a{display:none} } /* ---------- CTA BUTTONS (mono caps, square, fill or 1px outline) ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase; padding:16px 26px;min-height:48px;border:1px solid var(--accent);background:var(--accent);color:var(--void);cursor:pointer; transition:opacity var(--t)} .btn:hover{opacity:.85} .btn--ghost{background:transparent;color:var(--ink)} .btn--ghost:hover{opacity:1;border-color:var(--accent);color:var(--accent)} .btn-row{display:flex;gap:14px;flex-wrap:wrap} /* ---------- SPEC-SHEET CARD (mono header block + serif body, hairline border) ---------- */ .spec{border:1px solid var(--hair);background:color-mix(in oklab,var(--void-2) 60%,transparent)} .spec__head{padding:14px 20px;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;align-items:baseline;gap:10px} .spec__head .t{font:600 11px/1.4 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)} .spec__head .n{font:600 10px/1 var(--mono);letter-spacing:.18em;color:var(--ink-faint)} .spec__body{padding:22px 20px;font-size:17px;line-height:1.6;color:var(--ink-dim)} .spec__body .anchor-line{font-size:clamp(19px,2vw,24px);color:var(--ink);margin-bottom:12px} a.spec{display:block;transition:border-color var(--t)} a.spec:hover{border-color:color-mix(in oklab,var(--accent) 55%,transparent)} /* the strike — diagonal correction mark as hover/active accent */ .strike{position:relative;display:inline-block} .strike::after{content:'';position:absolute;left:-2%;right:-2%;top:54%;height:2px;background:var(--accent);transform:rotate(-2deg)} /* ---------- ROUTER CARDS (START WHERE IT BLEEDS) ---------- */ .router{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)} @media(max-width:880px){.router{grid-template-columns:1fr}} .router a{background:var(--void);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:18px;min-height:230px; transition:background var(--t)} .router a:hover{background:var(--void-2)} .router .bleed{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,26px);line-height:1.3;color:var(--ink);flex:1} .router .route{font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)} .router a:hover .route{text-decoration:underline;text-underline-offset:4px} /* ---------- LEDGER TABLE (sticky first column on mobile) ---------- */ .ledger-scroll{overflow-x:auto;border:1px solid var(--hair)} table.ledger{border-collapse:collapse;width:100%;min-width:760px;font-size:15px} .ledger th,.ledger td{padding:13px 16px;border-bottom:1px solid var(--hair-soft);border-right:1px solid var(--hair-soft); text-align:left;vertical-align:top} .ledger tr:last-child td{border-bottom:none} .ledger th{font:600 10px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);background:var(--void-2)} .ledger td:first-child,.ledger th:first-child{position:sticky;left:0;background:var(--void-2); font:600 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);min-width:150px} .ledger td{color:var(--ink-dim)} .ledger td em{color:var(--ink)} /* proof strip — mono ledger line */ .proof-strip{border-block:1px solid var(--hair);padding-block:18px; font:600 clamp(11px,1.5vw,14px)/1.9 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink); display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:center} .proof-strip b{color:var(--accent);font-weight:600} /* ---------- STAT / DELTA ---------- */ .delta{font-family:var(--mono)} .delta .n{font:400 clamp(30px,4.2vw,52px)/1.1 var(--display);color:var(--ink);display:block;letter-spacing:0} .delta .n b{color:var(--accent);font-weight:400} .delta .l{font:400 10px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-top:8px;display:block} /* ---------- INSTALL LIST (mono) ---------- */ .installs{list-style:none;border-top:1px solid var(--hair)} .installs li{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:18px 4px;border-bottom:1px solid var(--hair);align-items:baseline} .installs .n{font:600 11px/1 var(--mono);letter-spacing:.1em;color:var(--accent)} .installs .t{font:400 16px/1.55 var(--serif);color:var(--ink-dim)} .installs .t b{color:var(--ink);font-weight:600} /* ---------- INDEX TOOL (question cards, progress, gauge) ---------- */ .tool-progress{display:flex;align-items:center;gap:14px;margin-bottom:34px} .tool-progress .track{flex:1;height:1px;background:var(--hair);position:relative} .tool-progress .track::before,.tool-progress .track::after{content:'';position:absolute;top:-5px;width:1px;height:11px;background:var(--hair)} .tool-progress .track::before{left:0}.tool-progress .track::after{right:0} .tool-progress .fill{position:absolute;left:0;top:0;height:1px;background:var(--accent);width:0;transition:width var(--t)} .tool-progress .count{font:600 11px/1 var(--mono);letter-spacing:.2em;color:var(--ink-faint)} .qcard{border:1px solid var(--hair);padding:clamp(26px,4vw,44px)} .qcard .q-eyebrow{font:600 11px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin-bottom:16px} .qcard .q-text{font-family:var(--serif);font-size:clamp(20px,2.6vw,28px);line-height:1.4;color:var(--ink);margin-bottom:28px} .qcard .opts{display:flex;flex-direction:column;gap:1px;background:var(--hair);border:1px solid var(--hair)} .qcard .opt{display:flex;gap:14px;align-items:baseline;background:var(--void);padding:16px 18px;cursor:pointer; font-size:16px;line-height:1.5;color:var(--ink-dim);transition:background var(--t),color var(--t);border:none;text-align:left;width:100%} .qcard .opt:hover{background:var(--void-2);color:var(--ink)} .qcard .opt[aria-checked="true"]{background:var(--void-2);color:var(--ink);box-shadow:inset 2px 0 0 var(--accent)} .qcard .opt .k{font:600 11px/1.6 var(--mono);letter-spacing:.06em;color:var(--accent);min-width:34px} .tool-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:14px} .tool-hint{font:400 11px/1.6 var(--mono);letter-spacing:.1em;color:var(--ink-faint)} .q-isolated .qcard{border-color:var(--accent);min-height:60vh;display:flex;flex-direction:column;justify-content:center} .q-isolated .q-text{font-size:clamp(26px,4vw,42px)} /* gauge */ .gauge{position:relative;width:min(320px,80vw);margin-inline:auto} .gauge .score{font:400 clamp(64px,10vw,110px)/1 var(--display);color:var(--ink);text-align:center} .gauge .score b{color:var(--accent);font-weight:400} .gauge .band-name{font:600 13px/1.4 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--accent);text-align:center;margin-top:14px} .gauge-bar{height:1px;background:var(--hair);position:relative;margin-top:26px} .gauge-bar .fill{position:absolute;left:0;top:0;height:1px;background:var(--accent)} .gauge-bar .tick{position:absolute;top:-5px;width:1px;height:11px;background:var(--hair)} /* ---------- FORMS (Kit) ---------- */ .kit-form{display:flex;flex-direction:column;gap:12px;max-width:460px} .kit-form input[type=text],.kit-form input[type=email]{background:var(--void-2);border:1px solid var(--hair);color:var(--ink); font:400 15px/1 var(--mono);padding:15px 16px;width:100%} .kit-form input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent} .kit-form ::placeholder{color:var(--ink-faint)} .form-note{font:400 11px/1.7 var(--mono);letter-spacing:.06em;color:var(--ink-faint)} /* ---------- COVER RENDER (SVG elevation view) ---------- */ .cover{border:1px solid var(--hair);background:var(--void-2);display:block} .cover-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,32px);align-items:end} @media(max-width:760px){.cover-row{grid-template-columns:1fr;max-width:280px;margin-inline:auto}} .cover-row figure{margin:0} .cover-row figcaption{font:600 10px/1.6 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint); margin-top:12px;text-align:center} a.cover-link:hover .cover{border-color:color-mix(in oklab,var(--accent) 55%,transparent)} /* draw-on animation for SVG schematics — once, on first viewport entry */ .draw [data-draw]{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)} .draw.in [data-draw]{animation:draw 1.4s ease forwards} @keyframes draw{to{stroke-dashoffset:0}} @media(prefers-reduced-motion:reduce){ .draw [data-draw]{stroke-dasharray:none;stroke-dashoffset:0} .draw.in [data-draw]{animation:none} *{transition-duration:0s!important} } /* ---------- DRAFTING-STAMP FOOTER ---------- */ .foot{border-top:1px solid var(--hair);margin-top:clamp(48px,8vh,90px)} .foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-block:52px} @media(max-width:760px){.foot__grid{grid-template-columns:1fr;gap:30px}} .foot h3{font:600 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px} .foot a{display:block;color:var(--ink-dim);padding:4px 0;font-size:15px;transition:color var(--t)} .foot a:hover{color:var(--accent)} .foot .anchor-mini{font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.6;color:var(--ink-faint)} .foot .anchor-mini span{display:block;padding:3px 0} .stamp{border-top:1px solid var(--hair);padding-block:20px 26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px; font:600 10px/1.8 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint)} .stamp .no{border:1px solid var(--hair);padding:4px 10px} /* ---------- UTILITY ---------- */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center} @media(max-width:860px){.grid-2{grid-template-columns:1fr;gap:36px}} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px)} @media(max-width:860px){.grid-3{grid-template-columns:1fr}} .skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--accent);color:var(--void);padding:12px 18px; font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase} .skip-link:focus{left:12px;top:12px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .status-tag{display:inline-block;font:600 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase; border:1px solid color-mix(in oklab,var(--accent) 40%,transparent);color:var(--accent);padding:8px 13px} .status-tag--dim{border-color:var(--hair);color:var(--ink-faint)}