/* ─── theme tokens ─── */
:root {
--bone:#F2F3F5; --bone2:#DCDEE2; --paper:#FAFBFC;
--ink:#141414; --ink2:#2A2825; --ink3:#4A4842; --ink4:#7E7A72;
--white:#FFFFFF; --red:#CB2828;
--rule: rgba(20,20,20,0.18);
--rule-w: rgba(244,241,234,0.18);
--header-bg: rgba(242,243,245,.82);
--traffic-1:#E94B3C; --traffic-2:#E8B43A; --traffic-3:#3DAA5E;
--sans:'Inter',Helvetica,Arial,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,monospace;
--pad: clamp(20px,4vw,56px);
--max: 1440px;
}
[data-theme="dark"] {
--bone:#23252A; --bone2:#181A1E; --paper:#2E3137;
--ink:#F2F4F6; --ink2:#D6D8DB; --ink3:#9CA0A6; --ink4:#65686D;
--white:#FFFFFF; --red:#FF6452;
--rule: rgba(242,244,246,0.16);
--rule-w: rgba(242,244,246,0.24);
--header-bg: rgba(24,26,30,0.85);
--traffic-1:#FF5F57; --traffic-2:#FEBC2E; --traffic-3:#28C840;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--bone); color:var(--ink);
font-family:var(--sans); font-size:17px; line-height:1.5;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
transition:background .25s ease, color .25s ease;
}
a{color:inherit}
::selection{background:var(--red); color:#fff}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
section{position:relative}
/* legacy dark-section markers - now neutral, inherit theme */
/* ─── type ─── */
.mono{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:500}
.display{font-weight:800; letter-spacing:-.045em; line-height:.92; font-size:clamp(44px, 7vw, 116px); margin:0}
.h2{
font-weight:800; letter-spacing:-.035em; line-height:.96;
font-size:clamp(40px, 5.6vw, 96px); margin:0;
text-wrap:balance;
}
.h3{font-weight:700; letter-spacing:-.025em; line-height:1.05; font-size:clamp(22px, 2.4vw, 36px); margin:0}
.lead{font-size:clamp(18px, 1.5vw, 22px); line-height:1.5; max-width:58ch; color:var(--ink3); margin:0}
.red3{color:var(--red)}
/* ─── marker (section number tag) ─── */
.marker{
display:flex; align-items:center; gap:14px;
padding-top:clamp(56px,8vw,112px);
margin-bottom:clamp(28px,4vw,56px);
font-family:var(--mono); font-size:11px; letter-spacing:.18em;
text-transform:uppercase; color:var(--ink3);
}
.marker::before{content:""; width:22px; height:1px; background:currentColor; opacity:.5}
.marker .n{color:var(--red); font-weight:600}
/* ─── header ─── */
.header{
position:fixed; top:0; left:0; right:0; z-index:50;
height:72px; display:flex; align-items:center;
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
background:var(--header-bg);
border-bottom:1px solid var(--rule);
transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.header-inner{width:100%; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; line-height:1}
.brand-mark{display:block; height:30px; width:auto; flex-shrink:0}
.brand-text{display:flex; flex-direction:column; gap:3px}
.brand-word{font-family:var(--sans); font-weight:800; font-size:19px; letter-spacing:-.03em; line-height:1}
.brand-word .brand-three{color:var(--red)}
.brand-tag{
font-family:var(--mono); font-size:9px; font-weight:500;
letter-spacing:.22em; text-transform:uppercase;
color:var(--ink3); line-height:1;
}
/* Mobile header - keep the Swiss-AI-Builders tag visible, shrink the
wordmark and the CTA button so everything fits on a phone. */
@media (max-width: 640px){
.brand-mark{ height:26px }
.brand-word{ font-size:16px }
.brand-tag{ font-size:8px; letter-spacing:.16em }
}
@media (max-width: 480px){
.brand-tag{ font-size:7.5px; letter-spacing:.12em }
.header .btn{
padding:8px 12px;
font-size:10px;
letter-spacing:.12em;
gap:6px;
}
.header .btn .ar{ font-size:11px }
}
.nav{display:flex; gap:30px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase}
.nav a{text-decoration:none; opacity:.65; transition:opacity .15s}
.nav a:hover{opacity:1}
.nav .idx{color:var(--red); margin-right:6px}
@media (max-width:820px){ .nav{display:none} }
/* ─── buttons ─── */
.btn{
display:inline-flex; align-items:center; gap:10px;
padding:11px 18px; font-family:var(--mono); font-size:11px;
letter-spacing:.18em; text-transform:uppercase; font-weight:500;
text-decoration:none; cursor:pointer; border:1px solid var(--ink);
background:var(--ink); color:var(--bone);
transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover{background:var(--red); border-color:var(--red); color:#fff}
.btn .ar{display:inline-block; transition:transform .2s ease}
.btn:hover .ar{transform:translateX(4px)}
.btn-ghost{background:transparent; color:inherit; border-color:currentColor}
.btn-ghost:hover{background:var(--red); border-color:var(--red); color:#fff}
.btn-light{background:var(--bone); color:var(--ink); border-color:var(--bone)}
.btn-light:hover{background:var(--red); border-color:var(--red); color:#fff}
/* ─── hero ─── */
.hero{padding:128px 0 80px; position:relative; overflow:hidden}
.hero-tag{
display:flex; justify-content:space-between; align-items:baseline;
padding:18px 0; border-bottom:1px solid var(--rule);
margin-bottom:clamp(48px,6vw,84px);
font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.hero-tag .pulse{display:inline-flex; align-items:center; gap:8px}
.hero-tag .pulse::before{
content:""; width:8px; height:8px; border-radius:50%;
background:var(--red); animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.85)}}
.hero h1 .line{display:block}
.hero h1 .quiet{color:var(--ink3); font-weight:400}
.hero h1 em{font-style:italic; color:var(--red); font-weight:800}
/* glitch - subtle, intermittent */
/* scramble - per-letter independent roll */
.scram{
display:inline-block;
font-variant-ligatures:none;
white-space:nowrap;
}
.scram > i{
display:inline-block; font-style:inherit;
overflow:visible;
}
.scram > i.rolling{ color:var(--red) }
@media (prefers-reduced-motion: reduce){
.scram > i.rolling{ color:inherit }
}
.hero-grid{
display:grid;
grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr);
gap:clamp(32px,5vw,72px);
align-items:stretch;
}
.hero-main{
display:flex; flex-direction:column;
justify-content:space-between;
min-height:62vh;
gap:clamp(40px,5vw,72px);
}
.hero-foot{
padding-top:28px; border-top:1px solid var(--rule);
display:flex; flex-direction:column; gap:22px;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
/* right column - terminal anchors top, swiss meta beneath */
.hero-side{
display:flex; flex-direction:column;
gap:18px; align-self:start;
padding-top:8px;
}
.hero-term{ width:100%; max-width:none; margin:0 }
.hero-term .term-body{padding:18px 18px 20px}
.hero-term .term-line{margin-bottom:2px}
.term-line .ok{color:var(--red); margin-right:6px; font-weight:600}
.hero-side-meta{
display:flex; align-items:center; gap:10px;
font-family:var(--mono); font-size:10px; letter-spacing:.22em;
text-transform:uppercase; color:var(--ink3);
padding:0 4px;
}
.hero-side-meta .dot{
width:7px; height:7px; border-radius:50%;
background:var(--red);
animation:pulse 1.8s ease-in-out infinite;
}
@media (max-width:900px){
.hero-grid{grid-template-columns:1fr; gap:48px}
.hero-main{min-height:0}
.hero-side{align-self:stretch}
}
/* Mobile - drop the decorative work-order terminal entirely so the hero
reads cleanly on a phone. Lugano/Swiss meta moves into the page flow
beneath the lead via a separate inline copy if/when we add one. */
@media (max-width:640px){
.hero-side{ display:none; }
}
@keyframes blink{50%{opacity:0}}
/* hero terminal - swiss-precise mock work order */
.term-body.invoice{
font-family:var(--mono); font-size:12.5px; line-height:1.65;
display:flex; flex-direction:column; gap:1px;
}
.invoice .term-line + .inv-rule{margin-top:6px}
.invoice .inv-rule + .term-comment{margin-top:4px}
.invoice .inv-rule{
border-top:1px dashed var(--ink);
opacity:.6;
margin:2px 0;
}
.invoice .inv-title{
display:flex; justify-content:space-between; align-items:baseline;
font-size:11px; letter-spacing:.22em; text-transform:uppercase;
font-weight:700; color:var(--ink);
padding:2px 0;
}
.invoice .inv-title .inv-ref{color:var(--red); font-weight:600; letter-spacing:.18em}
.invoice .inv-row{
display:flex; align-items:baseline; justify-content:space-between;
font-size:12.5px;
}
.invoice .inv-k{color:var(--ink2); font-weight:500}
.invoice .inv-v{color:var(--ink); font-weight:600; white-space:nowrap}
.invoice .term-comment{margin-top:6px}
/* ─── marquee ─── */
.marquee{
background:var(--ink); color:var(--bone);
padding:20px 0; overflow:hidden;
border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.marquee-track{
display:flex; gap:56px; white-space:nowrap;
font-family:var(--sans); font-weight:800;
font-size:clamp(28px,4.2vw,56px); letter-spacing:-.025em;
animation:scroll 34s linear infinite;
}
.marquee-track > span{display:inline-flex; align-items:center; gap:56px}
.marquee-track .dot{width:14px; height:14px; background:var(--red); border-radius:50%; flex-shrink:0}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
/* ─── 3 things ─── */
.what{padding-bottom:clamp(80px,8vw,128px)}
.what-head{
display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(32px,4vw,72px);
align-items:end; margin-bottom:clamp(48px,6vw,80px);
}
@media (max-width:820px){ .what-head{grid-template-columns:1fr} }
.threes{
display:grid; grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
}
@media (max-width:820px){ .threes{grid-template-columns:1fr} }
.three{
padding:36px 28px 32px; min-height:380px;
border-right:1px solid var(--ink);
display:flex; flex-direction:column;
background:var(--bone); color:var(--ink);
transition:background .2s ease, color .2s ease;
}
.three:last-child{border-right:none}
@media (max-width:820px){
.three{border-right:none; border-bottom:1px solid var(--ink); min-height:0}
.three:last-child{border-bottom:none}
}
.three:hover{background:var(--paper)}
.three:hover .three-num{color:var(--red)}
.three:hover .three-title{color:var(--red)}
.three-head{display:flex; justify-content:space-between; margin-bottom:36px}
.three-num{font-family:var(--mono); font-size:14px; letter-spacing:.05em; color:var(--ink3); font-weight:600}
.three-verb{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase}
.three-title{
font-family:var(--sans); font-weight:800;
font-size:clamp(36px,4vw,58px); letter-spacing:-.04em; line-height:1;
margin:0 0 18px;
}
.three-body{font-size:15px; line-height:1.5; margin:0 0 auto; max-width:34ch}
.three-meta{
margin-top:32px; padding-top:14px;
border-top:1px solid currentColor;
display:flex; justify-content:space-between;
font-family:var(--mono); font-size:10px; letter-spacing:.18em;
text-transform:uppercase; color:var(--ink3); opacity:.75;
}
/* ─── timeline (HOW) ─── */
.how{padding-bottom:clamp(80px,8vw,128px)}
.how-head{
display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(32px,4vw,72px);
align-items:end; margin-bottom:clamp(48px,6vw,80px);
}
@media (max-width:820px){ .how-head{grid-template-columns:1fr} }
.timeline{
display:grid; grid-template-columns:repeat(4,1fr);
border-top:1px solid var(--rule);
}
@media (max-width:820px){ .timeline{grid-template-columns:1fr} }
.step{
padding:32px 24px;
border-right:1px solid var(--rule);
display:flex; flex-direction:column; gap:14px;
}
.step:last-child{border-right:none}
@media (max-width:820px){
.step{border-right:none; border-bottom:1px solid var(--rule)}
.step:last-child{border-bottom:none}
}
.step-week{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink4)}
.step-week .n{color:var(--red)}
.step-title{font-weight:800; font-size:clamp(24px,2.4vw,34px); letter-spacing:-.025em; line-height:1.1; margin:0}
.step-body{font-size:14px; line-height:1.5; color:var(--ink4); margin:0; max-width:34ch}
.step-art{
margin-top:12px; height:80px;
font-family:var(--mono); font-size:11px; color:var(--ink4);
border:1px solid var(--rule);
padding:10px 12px; display:flex; flex-direction:column; justify-content:space-between;
background:transparent;
}
.step-art .ok{color:#6FCF97}
.step-art .red{color:#FF8A8A}
/* ─── guarantee strip ─── */
.guarantee{padding:clamp(48px,7vw,96px) 0}
.guarantee-inner{
border:1px solid var(--ink); padding:clamp(28px,4vw,56px);
display:grid; grid-template-columns:auto 1fr auto; gap:clamp(24px,3vw,48px);
align-items:center;
}
@media (max-width:820px){ .guarantee-inner{grid-template-columns:1fr} }
.guarantee-tag{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase}
.guarantee-headline{
font-weight:800; font-size:clamp(28px,3.6vw,52px);
letter-spacing:-.03em; line-height:1.02; margin:0;
}
.guarantee-headline em{font-style:italic; font-weight:800; color:var(--red)}
/* ─── case studies (grid of built things) ─── */
.built{padding-bottom:clamp(80px,8vw,128px)}
.case-grid{
display:grid; grid-template-columns:repeat(3,1fr);
gap:1px; background:var(--rule);
border:1px solid var(--rule);
}
@media (max-width:980px){ .case-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .case-grid{grid-template-columns:1fr} }
.case{
background:var(--bone); padding:28px 24px 24px;
display:flex; flex-direction:column; gap:14px;
min-height:280px; position:relative;
text-decoration:none; color:inherit;
transition:background .2s ease, color .2s ease;
}
.case:hover{background:var(--paper)}
.case:hover .case-name{color:var(--red)}
.case-tag{
display:flex; justify-content:space-between;
font-family:var(--mono); font-size:11px; letter-spacing:.16em;
text-transform:uppercase; color:var(--ink3);
}
.case-tag .live{color:var(--red); display:inline-flex; align-items:center; gap:6px}
.case-tag .live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--red)}
.case-name{font-weight:800; font-size:clamp(28px,2.6vw,38px); letter-spacing:-.03em; line-height:1; margin:0}
.case-desc{font-size:14px; line-height:1.5; color:inherit; opacity:.85; margin:0 0 auto}
.case-meta{
margin-top:auto; padding-top:14px;
border-top:1px solid currentColor;
font-family:var(--mono); font-size:10px; letter-spacing:.18em;
text-transform:uppercase; opacity:.7;
display:flex; justify-content:space-between; align-items:center;
}
.case-meta .arrow{transition:transform .2s ease}
.case:hover .case-meta .arrow{transform:translateX(4px); color:var(--red)}
/* ─── 03 Built · clean list + sticky preview ──────────────────────────
Two-column layout: typographic product list on the left, image preview
pane on the right. Hover/focus a row → that product's screenshot fades
in on the right. No terminal chrome; this section is for marketing, the
playground keeps the developer aesthetic. */
.built--clean .built-grid{
display:grid;
grid-template-columns: 1fr 1.1fr;
gap: clamp(28px, 4vw, 56px);
margin-top: clamp(24px, 3vw, 40px);
align-items: start;
}
@media (max-width: 900px){
.built--clean .built-grid{ grid-template-columns: 1fr; }
}
/* ── List (left) ── 2-column grid; stacks to 1 col under 640px ── */
.built-list{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 clamp(16px, 2vw, 32px);
}
@media (max-width: 640px){
.built-list{ grid-template-columns: 1fr; }
}
.built-item{
display:grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
padding: 22px 12px 22px 4px;
margin: 0 -4px;
border-top:1px solid rgba(20,20,20,0.10);
text-decoration:none; color:inherit;
transition: background .15s ease, padding-left .15s ease;
}
/* the last two items in the grid both need a bottom border (since "last-child"
only matches one cell in a multi-column grid). Using nth-last to cover both
columns of the final row plus a fallback for odd counts. */
.built-item:last-child,
.built-item:nth-last-child(2){
border-bottom: 1px solid rgba(20,20,20,0.10);
}
.built-item:hover,
.built-item.is-active,
.built-item:focus{
background: rgba(0,0,0,0.025);
outline: none;
}
.built-item-num{
font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
color: var(--ink4); padding-top: 8px;
}
.built-item-body{ display:flex; flex-direction:column; gap: 6px; min-width: 0; }
.built-item-name{
margin:0; font-weight: 800;
font-size: clamp(20px, 2vw, 28px);
letter-spacing: -.025em; line-height: 1.05;
}
.built-item:hover .built-item-name,
.built-item.is-active .built-item-name{ color: var(--red); }
.built-item-desc{
/* same mono uppercase treatment as the old tag row (IBM Plex Mono, */
/* letter-spaced caps, ink3). Bumped one notch (10px → 11px) so the */
/* longer one-liners stay readable. */
margin: 0;
font-family: var(--mono);
font-size: 11px; letter-spacing: .18em;
text-transform: uppercase;
line-height: 1.5;
color: var(--ink3);
}
.built-item-arrow{
align-self: center;
font-family: var(--mono); color: var(--ink4); font-size: 16px;
transition: transform .15s ease, color .15s ease;
}
.built-item:hover .built-item-arrow,
.built-item.is-active .built-item-arrow{
transform: translateX(4px); color: var(--red);
}
/* ── Preview pane (right) ── */
.built-preview-pane{
position: sticky; top: 24px;
display: grid;
background: var(--paper);
overflow: hidden;
min-height: 480px; /* keeps height stable across cards */
}
.built-preview-card{
grid-area: 1 / 1;
display: flex; flex-direction: column;
opacity: 0; transition: opacity .25s ease;
pointer-events: none;
}
.built-preview-card.is-active{ opacity: 1; }
/* image (or placeholder) on top - supports a multi-image carousel: all
![]()
elements are absolutely stacked; only .is-active is opaque. JS
rotates the .is-active class on a timer while the parent card is the
active hover target. */
.built-preview-shot{
position: relative;
width: 100%; aspect-ratio: 16 / 10;
background: var(--bone);
overflow: hidden;
}
.built-preview-shot img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: top center;
display: block;
opacity: 0; transition: opacity .6s ease;
pointer-events: none;
}
.built-preview-shot img.is-active{ opacity: 1; }
/* info block below the image - extended description + tech stack */
.built-preview-info{
padding: 24px 24px 28px;
display: flex; flex-direction: column; gap: 18px;
flex: 1;
}
.built-preview-long{
margin: 0; font-size: 14px; line-height: 1.55;
color: var(--ink); max-width: 60ch;
}
.built-preview-tech{ display: flex; flex-direction: column; gap: 8px; }
.built-tech-label{
font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
text-transform: uppercase; color: var(--ink4);
}
.built-tech-list{
display: flex; flex-wrap: wrap; gap: 6px;
list-style: none; padding: 0; margin: 0;
}
.built-tech-tag{
font-family: var(--mono); font-size: 11px;
padding: 4px 9px;
background: rgba(20,20,20,0.05);
color: var(--ink2, var(--ink));
line-height: 1;
}
/* idle card - brand-aligned: trinity mark + editorial headline + mono hint */
.built-preview-idle{
width: 100%; height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center;
gap: 18px;
padding: clamp(32px, 5vw, 56px);
}
.built-idle-mark{
width: clamp(64px, 7vw, 88px);
height: auto; display: block;
opacity: .95;
}
.built-idle-tag{
font-family: var(--mono); font-size: 10px; letter-spacing: .35em;
text-transform: uppercase; color: var(--ink3);
}
.built-idle-headline{
margin: 0;
font-weight: 800;
font-size: clamp(26px, 3vw, 38px);
letter-spacing: -.025em; line-height: 1.05;
color: var(--ink);
max-width: 14ch;
}
.built-idle-headline em.r{
font-style: italic; font-weight: 400;
font-family: 'Instrument Serif', Georgia, serif;
color: var(--red);
}
.built-idle-hint{
font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
text-transform: uppercase; color: var(--ink4);
margin-top: 4px;
}
.built-idle-hint .ar{ display: inline-block; transform: translateY(-1px); }
/* placeholder card (when a product has no bg_image yet) */
.built-preview-empty{
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap: 14px; color: var(--ink3); text-align: center;
padding: 32px; width: 100%; height: 100%;
}
.built-preview-num{
font-family: var(--mono); font-size: 12px; letter-spacing: .2em;
color: var(--ink4);
}
.built-preview-name{
font-weight: 800; font-size: 28px; letter-spacing: -.02em;
color: var(--ink);
}
/* CTA preview card */
.built-preview-empty--cta{ color: var(--ink); }
.built-preview-empty--cta p{
font-size: 22px; font-weight: 600; letter-spacing: -.01em;
line-height: 1.3; margin: 0;
}
.built-preview-pulse{
color: var(--red); font-size: 14px;
animation: pulse 1.4s ease-in-out infinite;
}
/* idle and CTA fill the WHOLE pane (no shot/info subdivision) */
.built-preview-card[data-key="idle"],
.built-preview-card[data-key="cta"]{
align-items: center; justify-content: center;
}
/* ─── team - terminal cards (light) ─── */
.team.term{
padding-top:0; padding-bottom:clamp(80px,8vw,128px);
}
.team.term .marker{color:var(--ink3)}
.team.term .marker .n{color:var(--red)}
/* Title (left) + supporting paragraph (right), same rhythm as .how-head. */
.team-head{
display:grid; grid-template-columns:1.4fr 1fr;
gap:clamp(32px,4vw,72px);
align-items:start;
margin:clamp(20px,3vw,40px) 0 clamp(36px,4vw,56px);
}
@media (max-width:820px){ .team-head{grid-template-columns:1fr; gap:20px} }
.team-headline{
margin:0;
font-size:clamp(44px, 5.6vw, 96px);
letter-spacing:-.03em;
line-height:.95;
text-wrap:balance;
}
.team-headline em{ font-weight:800; }
.team-head .lead{
margin:0;
max-width:42ch;
align-self:end; /* paragraph anchors to baseline of title */
}
.term-grid{
display:grid; grid-template-columns:repeat(4,1fr);
gap:20px;
}
/* Team section - five cards in a single row on desktop, with tighter horizontal
breathing room so the cards don't crush. */
/* Team: horizontally-scrolling list - fixed-width terminal cards in a
single row that the user swipes/drags through. Works identically on
desktop and mobile so the team reads like an editorial reel rather
than a wrapping grid. */
.team.term .wrap{ padding:0 clamp(20px,4vw,56px); max-width:var(--max); }
.team.term .term-grid{
display:flex;
gap:14px;
overflow-x:auto;
overflow-y:visible;
scroll-snap-type:x mandatory;
scroll-padding-left:clamp(20px,4vw,56px);
padding-bottom:14px; /* room for the scrollbar so it doesn't crowd content */
margin-bottom:-14px;
/* edge-fade hint that there's more to the right */
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent);
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent);
}
.team.term .term-card{
flex:0 0 clamp(240px, 22vw, 300px);
scroll-snap-align:start;
min-width:0;
}
.team.term .term-card *{ min-width:0; }
.team.term .term-host{
font-size:11px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Subtle scrollbar for desktop browsers that show one */
.team.term .term-grid::-webkit-scrollbar{ height:6px }
.team.term .term-grid::-webkit-scrollbar-thumb{ background:var(--ink3); border-radius:3px }
.team.term .term-grid::-webkit-scrollbar-track{ background:transparent }
/* Mobile: shrink the card a touch and let the wrap bleed full-width
so swiping starts right at the screen edge. */
@media (max-width:640px){
.team.term .wrap{ padding-left:clamp(16px,4vw,24px); padding-right:0; }
.team.term .term-card{ flex:0 0 78vw; }
}
.term-card{
background:var(--paper);
border:1px solid var(--ink);
display:flex; flex-direction:column;
font-family:var(--mono);
color:var(--ink2);
overflow:hidden;
}
.term-bar{
display:flex; align-items:center; justify-content:space-between;
padding:10px 14px;
border-bottom:1px solid var(--ink);
background:var(--bone2);
}
.term-bar .dots{display:flex; gap:6px}
.term-bar .dots i{
width:10px; height:10px; border-radius:50%;
background:var(--ink3); display:block;
}
.term-bar .dots i:nth-child(1){background:#E94B3C}
.term-bar .dots i:nth-child(2){background:#E8B43A}
.term-bar .dots i:nth-child(3){background:#3DAA5E}
.term-host{font-size:11px; color:var(--ink3); letter-spacing:.04em}
.term-body{padding:16px 16px 18px; font-size:13px; line-height:1.7; flex:1}
.term-line{display:block; white-space:normal}
.term-line .sym{color:var(--red); margin-right:6px; font-weight:700}
.term-line .kw{color:var(--ink); font-weight:500}
.term-name{color:var(--ink); font-weight:600; margin:2px 0 4px}
.term-line .key{color:var(--ink3)}
.term-line .str{color:var(--red); font-weight:500}
.term-line .num{color:var(--ink); font-weight:600}
.term-comment{color:var(--ink3); font-style:italic}
.caret{
display:inline-block; width:7px; height:1em; background:var(--ink);
vertical-align:-2px; animation:blink 1s steps(1) infinite;
}
.term-foot{
padding:14px 16px;
border-top:1px solid var(--ink);
background:var(--bone2);
display:flex; flex-direction:column; gap:10px;
font-size:12px;
}
.term-foot .stats{display:flex; flex-wrap:wrap; gap:14px}
.term-foot .stats .k{color:var(--ink3)}
.term-foot .stats .num{color:var(--ink); font-weight:600}
.term-foot .pills{display:flex; gap:6px}
.term-foot .pill{
display:inline-flex; align-items:center; justify-content:center;
width:28px; height:28px;
border:1px solid var(--ink);
font-family:var(--mono); font-size:11px; color:var(--ink);
text-decoration:none; background:transparent;
transition:background .15s, color .15s;
}
.term-foot .pill:hover{background:var(--ink); color:var(--bone)}
/* ─── CTA / contact ─── */
.cta{padding:clamp(80px,10vw,160px) 0}
.cta-inner{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:center}
@media (max-width:820px){ .cta-inner{grid-template-columns:1fr} }
.cta h2 em{font-style:italic; font-weight:800; color:var(--red)}
.cta-headline{font-size:clamp(40px, 4.8vw, 80px); text-wrap:balance}
.cta-side{display:flex; flex-direction:column; gap:24px}
.cta-card{
border:1px solid var(--ink); padding:24px;
display:flex; flex-direction:column; gap:14px;
background:var(--paper);
position:relative;
}
.cta-card--primary .cta-card-tag{color:var(--red); font-weight:600}
.cta-card--primary h3{font-size:30px; letter-spacing:-.025em}
.cta-card--primary::after{
content:""; position:absolute; top:-1px; left:-1px; right:-1px;
height:3px; background:var(--red);
display:none;
}
[data-theme="dark"] .cta-card--primary::after{display:block}
.cta-card--ghost{background:transparent}
.cta-card-tag{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink3)}
.cta-card h3{margin:0; font-weight:800; font-size:24px; letter-spacing:-.02em}
.cta-card p{margin:0; font-size:14px; line-height:1.5; color:var(--ink3)}
.cta-card .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.cta-card--primary{
background:var(--paper);
border:1px solid var(--ink);
}
.cta-card--primary h3{color:var(--ink)}
.cta-card--primary p{color:var(--ink2)}
.email-line{font-family:var(--mono); font-size:13px; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px; text-decoration:none}
/* ─── footer ─── */
.footer{background:var(--bone2); color:var(--ink); padding:clamp(48px,6vw,96px) 0 32px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:clamp(24px,3vw,48px)}
.footer-brand{display:flex; flex-direction:column; gap:18px}
.footer-brand .display-sm{font-weight:800; font-size:48px; letter-spacing:-.04em; line-height:1}
.footer-brand .display-sm em{color:var(--red); font-style:normal}
.footer-brand p{margin:0; max-width:34ch; color:var(--ink4); font-size:14px; line-height:1.5}
.footer h5{margin:0 0 14px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink4); font-weight:500}
.footer ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:14px}
.footer ul a{text-decoration:none; opacity:.8; transition:opacity .15s, color .15s}
.footer ul a:hover{opacity:1; color:var(--red)}
.footer-bottom{
margin-top:clamp(48px,6vw,80px); padding-top:24px;
border-top:1px solid var(--rule);
display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:12px;
font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink4);
}
.footer-bottom .ver{color:var(--red)}
/* ─── footer · tablet ─── */
@media (max-width:820px){
.footer-grid{grid-template-columns:1fr 1fr; gap:28px}
}
/* ─── footer · mobile (tighter, smaller, single column) ─── */
@media (max-width:560px){
.footer{padding:40px 0 24px}
.footer-grid{grid-template-columns:1fr 1fr; gap:22px 18px}
.footer-brand{grid-column:1 / -1; gap:10px; margin-bottom:4px}
.footer-brand > div:first-child{gap:10px !important}
.footer-brand svg{width:32px !important}
.footer-brand .display-sm{font-size:28px}
.footer-brand p{font-size:12px; line-height:1.45; max-width:36ch}
.footer h5{margin:0 0 8px; font-size:9.5px; letter-spacing:.16em}
.footer h5::before{width:4px; height:4px; margin-right:6px}
.footer ul{gap:5px; font-size:12.5px}
.footer-bottom{
margin-top:32px; padding-top:16px; gap:6px;
flex-direction:column; align-items:flex-start;
font-size:9.5px; letter-spacing:.12em;
}
}
/* ─── theme toggle ─── */
.theme-toggle{
display:inline-flex; align-items:center; justify-content:center;
width:36px; height:36px; padding:0; margin-left:12px;
border:1px solid var(--ink); background:transparent; color:var(--ink);
cursor:pointer; font-family:var(--mono); font-size:13px; line-height:1;
transition:background .15s, color .15s, border-color .15s;
position:relative; flex-shrink:0;
}
.theme-toggle:hover{background:var(--ink); color:var(--bone)}
.theme-toggle .sun, .theme-toggle .moon{
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
transition:opacity .2s ease, transform .2s ease;
}
.theme-toggle .moon{opacity:0; transform:rotate(-30deg)}
[data-theme="dark"] .theme-toggle .sun{opacity:0; transform:rotate(30deg)}
[data-theme="dark"] .theme-toggle .moon{opacity:1; transform:rotate(0)}
/* case 'next' tag */
.case-tag .live.live--next{color:var(--ink)}
.case-tag .live.live--next::before{background:var(--ink)}
/* ─── built - stats strip ─── */
.built-head{margin-bottom:clamp(28px,3vw,40px)}
.built-stats{
display:grid; grid-template-columns:repeat(5,1fr);
border:1px solid var(--ink);
background:var(--ink);
gap:1px;
margin-bottom:clamp(28px,3vw,40px);
}
@media (max-width:820px){ .built-stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .built-stats{grid-template-columns:1fr} }
.bs-cell{
background:var(--bone);
padding:22px 22px 18px;
display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}
.bs-num{
font-family:var(--sans); font-weight:800;
font-size:clamp(40px,4.4vw,64px);
letter-spacing:-.04em; line-height:1; color:var(--ink);
display:inline-flex; align-items:baseline;
}
.bs-num i{
font-style:normal; color:var(--red);
font-size:.55em; margin-left:2px; font-weight:700;
}
.bs-lbl{
font-family:var(--mono); font-size:10px; font-weight:500;
letter-spacing:.18em; text-transform:uppercase; color:var(--ink3);
}
/* ─── 'Yours' CTA case card ─── */
.case.case--cta{
background:var(--bone2); color:var(--ink);
padding:28px 24px 24px;
display:flex; flex-direction:column; gap:14px;
min-height:280px;
text-decoration:none;
position:relative; overflow:hidden;
transition:background .2s ease, color .2s ease;
}
.case.case--cta::before{
content:""; position:absolute; left:0; top:0; bottom:0;
width:4px; background:var(--red);
}
.case.case--cta:hover{background:var(--red); color:#fff}
.case.case--cta:hover::before{background:#fff}
.case-cta-tag{
display:flex; justify-content:space-between; align-items:center;
font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--ink3);
}
.case-cta-tag .pulse{
color:var(--red); font-size:14px; animation:pulse 1.8s ease-in-out infinite;
}
.case--cta:hover .case-cta-tag{color:rgba(255,255,255,0.85)}
.case--cta:hover .case-cta-tag .pulse{color:#fff}
.case-cta-headline{
font-family:var(--sans); font-weight:800;
font-size:clamp(28px,2.6vw,38px); letter-spacing:-.03em; line-height:1;
margin:0; color:inherit;
}
.case-cta-desc{
margin:0 0 auto; font-size:14px; line-height:1.5;
color:var(--ink3); max-width:32ch;
}
.case-cta-desc{
margin:0 0 auto; font-size:14px; line-height:1.5;
color:var(--ink3); max-width:32ch;
}
.case--cta:hover .case-cta-desc{color:rgba(255,255,255,0.92)}
.case-cta-foot{
margin-top:auto; padding-top:14px;
border-top:1px solid var(--rule);
display:flex; justify-content:space-between; align-items:center;
font-family:var(--mono); font-size:11px; letter-spacing:.18em;
text-transform:uppercase; font-weight:600;
}
.case-cta-foot .arrow{font-size:18px; transition:transform .2s ease}
.case.case--cta:hover .case-cta-foot{border-top-color:rgba(255,255,255,0.4)}
.case.case--cta:hover .case-cta-foot .arrow{transform:translateX(6px)}
/* ─── alternating sections ─── */
section, footer.footer{ background:var(--bone) }
.hero { background:var(--bone) }
section#what { background:var(--bone2) }
section#how { background:var(--bone) }
section#built { background:var(--bone2) }
section#team { background:var(--bone) }
section#contact{ background:var(--bone2) }
footer.footer { background:var(--bone) }
/* Card surfaces should pop against their section */
section#what .three { background:var(--bone) }
section#built .case { background:var(--bone) }
section#built .case.case--cta{ background:var(--bone2) }
[data-theme="dark"] section#built .case.case--cta{
background:var(--paper);
}
section#team .term-card{ background:var(--paper) }
section#team .term-bar { background:var(--bone2) }
section#team .term-foot{ background:var(--bone2) }
section#contact .cta-card{ background:var(--bone) }
section#contact .cta-card--ghost{ background:transparent }
/* Hover surfaces - bump one step further */
section#what .three:hover{ background:var(--paper) }
section#built .case:hover{ background:var(--paper) }
/* ─── more red accents (both modes) ─── */
/* Section marker red bullet */
.marker::before{
content:""; width:8px; height:8px; background:var(--red);
transform:rotate(45deg);
opacity:1; border-radius:0;
}
/* Hero terminal: cursor + prompt in red is good, but bump $ to red bold consistently */
/* Underline 'AI' in hero (h1 first 'AI' word) gets red */
.hero h1 .ai-accent{
color:var(--red); font-style:italic; font-weight:800;
}
/* Mono "v3.0 / 2026" style elements get red */
.footer-bottom .ver{color:var(--red); font-weight:600}
/* Section index numbers - slightly bolder */
.marker .n{color:var(--red); font-weight:700}
/* Three-cards verb line in red */
.three-verb{color:var(--red); font-weight:600}
/* Step week label - red W## */
.step-week{color:var(--ink3)}
.step-week .n{color:var(--red); font-weight:700; letter-spacing:.18em}
/* Guarantee strip red top hairline */
.guarantee-inner{
border:1px solid var(--ink);
}
[data-theme="dark"] .guarantee-inner{
border-top:3px solid var(--red);
}
/* Case grid border + cells (let red gridline subtly read) */
.case-tag .live{color:var(--red)}
/* Member tag dot already red - bump pulse */
/* Footer header dot accent */
.footer h5::before{
content:""; display:inline-block;
width:5px; height:5px; background:var(--red); margin-right:8px;
vertical-align:2px;
}
/* CTA recommended top strip already red - good */
/* H2 'em' across page is red (consistency) */
.h2 em, .display em{color:var(--red); font-style:italic}
/* ─── inline red highlights ─── */
em.r{
font-style:normal;
color:var(--red);
font-weight:500;
}
.lead em.r{font-weight:600}
/* ─── BLOG / STREAM ─── */
.nav .is-current{opacity:1; color:var(--red)}
.nav .is-current .idx{color:var(--red)}
.stream-hero{padding:128px 0 56px; position:relative}
.stream-head{
display:grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .9fr);
gap:clamp(32px,5vw,72px); align-items:start;
padding-bottom:clamp(36px,4vw,56px);
border-bottom:1px solid var(--rule);
}
.stream-head .h2{margin-bottom:28px}
.stream-head .h2 .quiet{color:var(--ink3); font-weight:400; font-style:italic}
.stream-head-main{display:flex; flex-direction:column; gap:6px}
.stream-head-term{width:100%; max-width:none}
.stream-head-term .term-body{padding:16px 18px 18px}
.stream-head-term .term-line{margin-bottom:2px}
.stream-head-term .term-line strong{font-weight:700; color:var(--red)}
@media (max-width:900px){
.stream-head{grid-template-columns:1fr}
}
.stream-filters{
margin-top:clamp(28px,3vw,40px);
display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,56px);
align-items:center;
}
.filter-group{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.filter-label{
font-family:var(--mono); font-size:10px; font-weight:600;
letter-spacing:.22em; text-transform:uppercase;
color:var(--ink4); margin-right:6px;
}
.filter-label::before{
content:""; display:inline-block;
width:5px; height:5px; background:var(--red);
margin-right:8px; vertical-align:2px;
}
.chip{
font-family:var(--mono); font-size:11px; font-weight:500;
letter-spacing:.14em; text-transform:uppercase;
padding:8px 14px; border:1px solid var(--rule);
background:transparent; color:var(--ink2);
cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.is-active{
background:var(--ink); color:var(--bone); border-color:var(--ink);
}
/* ── stream list ── */
.stream{padding:0 0 clamp(64px,8vw,112px)}
.stream .wrap{display:flex; flex-direction:column}
/* ─── featured (top dispatch) ─── */
.dispatch--featured{
display:block; padding:0;
border-top:1px solid var(--ink);
border-bottom:1px solid var(--ink);
margin-bottom:clamp(48px,5vw,72px);
}
.featured-card{
display:grid; grid-template-columns: 1fr 1fr; gap:0;
text-decoration:none; color:inherit;
align-items:stretch; min-height:480px;
}
@media (max-width:900px){
.featured-card{grid-template-columns:1fr}
}
.featured-thumb{
background:var(--red); color:#fff;
display:flex; flex-direction:column; justify-content:space-between;
padding:clamp(24px,3vw,40px); position:relative; overflow:hidden;
}
.featured-thumb::after{
content:""; position:absolute; inset:0;
background:
repeating-linear-gradient(135deg,
rgba(255,255,255,.06) 0 1px,
transparent 1px 14px);
pointer-events:none;
}
.featured-tag{
font-family:var(--mono); font-size:11px; font-weight:600;
letter-spacing:.22em; text-transform:uppercase;
opacity:.95; z-index:1;
}
.featured-num{
font-family:var(--sans); font-weight:800;
font-size:clamp(140px,18vw,260px); letter-spacing:-.06em;
line-height:.8; align-self:flex-end;
color:#fff; opacity:.96; z-index:1;
}
.featured-cap{
font-family:var(--mono); font-size:11px;
letter-spacing:.18em; text-transform:uppercase;
opacity:.9; z-index:1;
}
.featured-body{
padding:clamp(28px,3vw,48px);
display:flex; flex-direction:column; gap:18px;
background:var(--paper);
border-left:1px solid var(--rule);
}
@media (max-width:900px){
.featured-body{border-left:none; border-top:1px solid var(--rule)}
}
.featured-meta{
display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;
font-family:var(--mono); font-size:11px; font-weight:500;
letter-spacing:.15em; text-transform:uppercase; color:var(--ink3);
}
.featured-meta .sep{opacity:.4}
.featured-meta .d-num-inline{color:var(--red); font-weight:700}
.featured-title{
font-family:var(--sans); font-weight:800;
font-size:clamp(28px, 3.4vw, 52px);
letter-spacing:-.035em; line-height:1.02;
margin:6px 0 4px; color:var(--ink);
text-wrap:pretty;
}
.featured-title em.r{color:var(--red); font-style:italic; font-weight:800}
.featured-summary{
margin:0; color:var(--ink3);
font-size:16px; line-height:1.55; max-width:54ch;
}
.featured-card .dispatch-cta{margin-top:auto; padding-top:14px}
.featured-card:hover .featured-title{color:var(--red)}
.featured-card:hover .featured-num{transform:translate(4px,-4px)}
.featured-num{transition:transform .25s ease}
/* ─── list head ─── */
.stream-list-head{
display:flex; justify-content:space-between; align-items:baseline;
padding-bottom:18px; border-bottom:1px solid var(--ink);
margin-bottom:0;
}
.stream-list-head .marker{padding-top:0; margin:0}
.stream-list-count{
font-family:var(--mono); font-size:11px; font-weight:600;
letter-spacing:.22em; text-transform:uppercase; color:var(--ink4);
}
/* ─── compact dispatch list (2-col) ─── */
.stream-list{
display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
gap:0;
border-bottom:1px solid var(--rule);
}
@media (max-width:760px){
.stream-list{grid-template-columns:1fr}
}
.dispatch{
display:flex; flex-direction:column;
gap:12px;
padding:clamp(20px,2vw,28px) clamp(20px,2vw,28px);
border-top:1px solid var(--rule);
border-right:1px solid var(--rule);
position:relative;
transition:background .15s ease;
}
.stream-list .dispatch:nth-child(2n){border-right:none}
@media (max-width:760px){
.stream-list .dispatch{border-right:none}
}
.dispatch:hover{background:var(--paper)}
.dispatch-meta{
display:flex; align-items:center; gap:10px;
font-family:var(--mono); font-size:10px;
letter-spacing:.18em; text-transform:uppercase;
color:var(--ink4); padding-bottom:2px;
}
.dispatch-meta .d-date{
font-size:10px; font-weight:600; color:var(--ink2);
letter-spacing:.14em;
}
.dispatch-meta .d-time{color:var(--ink4); font-size:10px}
.dispatch-meta .d-num{
margin-left:auto;
color:var(--red); font-weight:700; letter-spacing:.2em;
padding:0; border:none; font-size:10px;
}
.dispatch-meta .d-num br{display:none}
.dispatch-meta .d-read{
padding:3px 7px; border:1px solid var(--rule);
color:var(--ink3); font-weight:500;
font-size:9px; letter-spacing:.16em;
}
.dispatch-card{
display:grid; grid-template-columns: 84px minmax(0, 1fr);
gap:16px;
text-decoration:none; color:inherit;
align-items:start;
}
.dispatch-card > .dispatch-thumb{grid-row:1 / span 3}
.dispatch-card > .dispatch-tags,
.dispatch-card > .dispatch-title,
.dispatch-card > .dispatch-cta{grid-column:2}
.dispatch-thumb{
width:84px; height:84px; aspect-ratio:1;
background:var(--bone2); color:var(--ink);
display:flex; flex-direction:column; justify-content:space-between;
padding:8px 9px; position:relative; overflow:hidden;
border:1px solid var(--rule);
flex-shrink:0;
}
.thumb-num{
font-family:var(--sans); font-weight:800;
font-size:32px; letter-spacing:-.04em;
line-height:.85; align-self:flex-end;
color:inherit; opacity:.92;
}
.thumb-cap{display:none}
/* thumb tone variants - keep same palette, smaller scale */
.dispatch[data-tone="red"] .dispatch-thumb{background:var(--red); color:#fff; border-color:var(--red)}
.dispatch[data-tone="ink"] .dispatch-thumb{background:var(--ink); color:var(--bone); border-color:var(--ink)}
.dispatch[data-tone="ink"] .thumb-num{color:var(--red); opacity:1}
.dispatch[data-tone="bone"] .dispatch-thumb{background:var(--bone2); color:var(--ink)}
.dispatch[data-tone="grid"] .dispatch-thumb{
background:
linear-gradient(var(--rule) 1px, transparent 1px) 0 0/14px 14px,
linear-gradient(90deg, var(--rule) 1px, transparent 1px) 0 0/14px 14px,
var(--paper);
color:var(--ink);
}
.dispatch[data-tone="grid"] .thumb-num{color:var(--red); opacity:.92}
.dispatch[data-tone="stripe"] .dispatch-thumb{
background:
repeating-linear-gradient(135deg,
var(--ink) 0 1px,
transparent 1px 7px),
var(--bone);
color:var(--ink);
}
.dispatch[data-tone="stripe"] .thumb-num{color:var(--red); opacity:1}
.dispatch-tags{
display:flex; flex-wrap:wrap; gap:4px; margin:0 0 6px;
}
.dispatch--featured .dispatch-tags{margin-bottom:2px}
.tag{
font-family:var(--mono); font-size:9px; font-weight:500;
letter-spacing:.16em; text-transform:uppercase;
color:var(--ink3);
padding:3px 7px; border:1px solid var(--rule);
background:transparent;
}
.dispatch--featured .tag{font-size:10px; padding:4px 9px; letter-spacing:.18em}
.dispatch-title{
font-family:var(--sans); font-weight:700;
font-size:16px; letter-spacing:-.015em; line-height:1.22;
margin:0 0 6px; color:var(--ink);
transition:color .15s;
text-wrap:balance;
}
.dispatch-summary{display:none}
.dispatch-cta{
display:inline-flex; align-items:center; gap:8px;
font-family:var(--mono); font-size:10px; font-weight:600;
letter-spacing:.18em; text-transform:uppercase;
color:var(--ink3); padding-top:0;
border-top:none; align-self:flex-start;
}
.dispatch-cta .ar{transition:transform .15s ease}
.dispatch-card:hover .dispatch-title{color:var(--red)}
.dispatch-card:hover .dispatch-cta{color:var(--red)}
.dispatch-card:hover .dispatch-cta .ar{transform:translateX(4px)}
.dispatch-card:hover .dispatch-thumb{transform:translateY(-2px)}
.dispatch-thumb{transition:transform .2s ease}
/* featured keeps its full summary + bigger CTA */
.dispatch--featured .dispatch-cta{
font-size:11px; color:var(--ink);
border-top:1px solid var(--ink); padding-top:12px;
}
.dispatch--featured .dispatch-cta:hover,
.featured-card:hover .dispatch-cta{color:var(--red); border-color:var(--red)}
@media (max-width:760px){
.dispatch-card{grid-template-columns: 64px minmax(0,1fr); gap:12px}
.dispatch-thumb{width:64px; height:64px}
.thumb-num{font-size:24px}
}
/* ── load more ── */
.stream-more{
display:flex; flex-direction:column; align-items:center; gap:14px;
padding-top:clamp(40px,5vw,64px);
}
.stream-more-meta{
font-family:var(--mono); font-size:11px; letter-spacing:.18em;
text-transform:uppercase; color:var(--ink4);
}
.stream-more-meta strong{color:var(--ink); font-weight:700}
/* page-specific section bg alternation for blog */
body[data-page="blog"] .stream-hero{background:var(--bone)}
body[data-page="blog"] .stream{background:var(--bone)}
/* ─── PLAYGROUND PAGE - terminal browser ─── */
body[data-page="playground"]{background:var(--bone2)}
.pg-shell{
padding:104px 0 clamp(40px,5vw,72px);
min-height:calc(100vh - 80px);
}
/* outer terminal card */
.pg-term{
width:100%; max-width:none;
margin:0;
border:1px solid var(--ink);
background:var(--paper);
display:flex; flex-direction:column;
overflow:hidden;
}
.pg-term-bar{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:12px;
padding:10px 14px;
border-bottom:1px solid var(--ink);
}
.pg-term-bar .term-host{
text-align:center;
font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--ink3);
}
.pg-meta-stamp{
font-family:var(--mono); font-size:10px; font-weight:700;
letter-spacing:.18em; color:var(--red);
}
.pg-term-body{
background:var(--paper);
color:var(--ink);
padding:clamp(20px,3vw,36px);
font-family:var(--mono); font-size:13px; line-height:1.7;
}
[data-theme="dark"] .pg-term-body{background:#101012}
[data-theme="dark"] .pg-term{border-color:#2a2a2e}
[data-theme="dark"] .pg-term-bar{border-bottom-color:#2a2a2e; background:#101012}
/* 2-col split: cli + preview */
.pg-term-grid{
display:grid;
grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr);
gap:clamp(20px,3vw,40px);
align-items:start;
}
@media (max-width:1080px){
.pg-term-grid{grid-template-columns:1fr}
}
/* ── CLI column ── */
.pg-cli{
display:flex; flex-direction:column; gap:4px;
}
.pg-line{
white-space:normal;
display:block;
}
.pg-boot{color:var(--ink3)}
.pg-boot .ok{
display:inline-block;
color:var(--red); font-weight:700;
margin-right:10px;
}
[data-theme="dark"] .pg-boot .ok{color:#7CFF6E}
.pg-hint{
color:var(--ink2);
margin:14px 0 18px;
font-weight:500;
}
.pg-meta{color:var(--ink4); padding-left:0}
.pg-prompt{
display:flex; align-items:center; gap:2px; margin:6px 0;
}
.pg-prompt .user{color:var(--ink); font-weight:600}
[data-theme="dark"] .pg-prompt .user{color:#fff}
.pg-prompt .sep{color:var(--ink3); margin:0 1px}
.pg-prompt .path{color:var(--red); font-weight:600; margin-right:6px}
.pg-prompt .dollar{color:var(--red); font-weight:700; margin-right:8px}
.pg-prompt .cmd{color:var(--ink)}
[data-theme="dark"] .pg-prompt .cmd{color:#fff}
.pg-prompt--tail{margin-top:18px}
.pg-prompt--tail .caret{
display:inline-block; width:8px; height:14px;
background:var(--red);
vertical-align:-2px; margin-left:4px;
animation:blink 1s steps(1) infinite;
}
/* table */
.pg-table{
display:flex; flex-direction:column;
margin:14px 0 0;
}
.pg-thead{
display:grid;
grid-template-columns: 110px 50px 110px minmax(180px, 1.1fr) minmax(0, 1.6fr);
gap:18px;
padding:0 0 8px;
color:var(--ink4);
font-size:11px; letter-spacing:.04em;
border-bottom:1px solid var(--rule);
}
.pg-row{
display:grid;
grid-template-columns: 110px 50px 110px minmax(180px, 1.1fr) minmax(0, 1.6fr);
gap:18px;
padding:5px 0;
text-decoration:none;
border-left:2px solid transparent;
padding-left:10px; margin-left:-12px;
transition:background .12s ease, border-color .12s ease;
cursor:pointer;
}
.pg-row:hover,
.pg-row.is-active,
.pg-row:focus{
background:var(--bone);
border-left-color:var(--red);
outline:none;
}
[data-theme="dark"] .pg-row:hover,
[data-theme="dark"] .pg-row.is-active,
[data-theme="dark"] .pg-row:focus{
background:rgba(255,255,255,.04);
}
.pg-row .perm,
.pg-row .size,
.pg-row .mod{color:var(--ink4)}
.pg-row .name{
color:var(--red);
font-weight:600;
}
[data-theme="dark"] .pg-row .name{
color:#9EFF00;
text-shadow:0 0 14px rgba(158,255,0,.18);
}
.pg-row .name i{
font-style:normal; color:var(--ink4); font-weight:400;
margin-left:1px;
}
.pg-row .desc{
color:var(--ink2);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
[data-theme="dark"] .pg-row .desc{color:#D6D8DB}
/* responsive table → stacked rows on small */
@media (max-width:760px){
.pg-thead{display:none}
.pg-row{
grid-template-columns: 1fr;
gap:2px;
padding:10px 12px;
}
.pg-row .perm,
.pg-row .size,
.pg-row .mod{display:none}
.pg-row .desc{white-space:normal}
}
/* ── PREVIEW column ── */
.pg-preview{
position:sticky; top:96px;
display:grid;
align-items:start;
}
.pg-preview-card{
grid-area:1 / 1;
opacity:0; visibility:hidden;
transform:translateY(4px);
transition:opacity .15s ease, transform .15s ease;
display:flex; flex-direction:column; gap:12px;
}
.pg-preview-card.is-active{
opacity:1; visibility:visible;
transform:translateY(0);
}
.pg-preview-empty{
border:1px dashed var(--rule);
padding:48px 20px;
text-align:center;
display:flex; flex-direction:column; gap:10px; align-items:center;
background:var(--bone);
}
[data-theme="dark"] .pg-preview-empty{background:rgba(255,255,255,.02)}
.pg-preview-glyph{
display:inline-block;
width:44px; height:44px;
font-size:24px; line-height:44px;
color:var(--red);
border:1px solid var(--rule);
}
.pg-preview-hint{
margin:0; font-family:var(--mono); font-size:11px;
letter-spacing:.22em; text-transform:uppercase;
color:var(--ink4);
}
.pg-preview-frame{
position:relative;
aspect-ratio: 4 / 3;
padding:18px;
display:flex; flex-direction:column; justify-content:space-between;
overflow:hidden;
background:var(--bone); color:var(--ink);
border:1px solid var(--rule);
}
.pg-preview-frame[data-tone="red"] {background:var(--red); color:#fff; border-color:var(--red)}
.pg-preview-frame[data-tone="ink"] {background:#1a1c20; color:#fff; border-color:#1a1c20}
.pg-preview-frame[data-tone="bone"] {background:var(--bone); color:var(--ink)}
.pg-preview-frame[data-tone="grid"]{
background:
linear-gradient(var(--rule) 1px, transparent 1px) 0 0/22px 22px,
linear-gradient(90deg, var(--rule) 1px, transparent 1px) 0 0/22px 22px,
var(--paper);
}
.pg-preview-frame[data-tone="stripe"]{
background:
repeating-linear-gradient(135deg,
var(--ink) 0 1px,
transparent 1px 10px),
var(--bone);
}
.pg-preview-num{
font-family:var(--mono); font-size:11px;
letter-spacing:.22em; font-weight:700;
color:inherit; opacity:.85;
}
.pg-preview-name{
font-family:var(--mono); font-size:13px;
letter-spacing:.04em; font-weight:600;
color:inherit; opacity:.95;
align-self:flex-start; margin-top:-4px;
}
.pg-preview-art{
position:absolute; inset:50px 18px 18px;
display:flex; align-items:center; justify-content:center;
}
/* ── per-preview art ── */
.pg-art--trail{
align-items:center; justify-content:center; gap:6px;
}
.pg-art--trail span{
width:34px; height:34px;
background:currentColor; opacity:.18;
border-radius:50%;
transform:translateY(0);
}
.pg-art--trail span:nth-child(1){opacity:.5}
.pg-art--trail span:nth-child(2){opacity:.4; transform:translateY(-6px)}
.pg-art--trail span:nth-child(3){opacity:.3; transform:translateY(-14px)}
.pg-art--trail span:nth-child(4){opacity:.2; transform:translateY(-24px)}
.pg-art--trail span:nth-child(5){opacity:.1; transform:translateY(-34px)}
.pg-art--scrub{
flex-direction:column; align-items:stretch; gap:8px;
}
.pg-art--scrub .track{
height:6px; background:currentColor; opacity:.2;
position:relative;
}
.pg-art--scrub .head{
position:absolute; left:42%; top:-4px;
width:14px; height:14px; background:var(--red);
}
.pg-art--scrub .frame{
height:18px; background:currentColor; opacity:.12;
}
.pg-art--scrub .f2{opacity:.22}
.pg-art--scrub .f3{opacity:.32}
.pg-art--logo{flex-direction:column; gap:10px; color:#fff}
.pg-art--logo svg{width:60%; max-width:160px}
.pg-art-cap{
font-family:var(--mono); font-size:10px;
letter-spacing:.22em; opacity:.85;
}
.pg-art--invoice{
flex-direction:column; align-items:stretch; gap:4px;
font-family:var(--mono); font-size:10px;
padding:6px; width:100%;
}
.inv-mock-h{
font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:var(--ink); margin-bottom:4px;
}
.inv-mock-rule{border-top:1px dashed currentColor; margin:2px 0; opacity:.5}
.inv-mock-row{
display:flex; justify-content:space-between;
color:var(--ink2); padding:2px 0;
}
.inv-mock-total{
display:flex; justify-content:space-between;
font-weight:700; padding-top:4px;
}
.inv-mock-total .r{color:var(--red)}
.pg-art--crm{
display:grid; grid-template-columns:repeat(3, 1fr);
gap:6px; align-items:stretch; width:100%;
font-family:var(--mono);
}
.crm-col{display:flex; flex-direction:column; gap:4px}
.crm-h{
font-size:9px; letter-spacing:.2em; font-weight:700;
color:rgba(255,255,255,.6); padding-bottom:2px;
border-bottom:1px solid rgba(255,255,255,.2);
}
.crm-card{
font-size:9px; padding:5px 6px;
background:rgba(255,255,255,.08); color:#fff;
border-left:2px solid rgba(255,255,255,.3);
line-height:1.2;
}
.crm-card--r{border-left-color:var(--red)}
.crm-done{opacity:.5; text-decoration:line-through}
.pg-art--cv{
flex-direction:column; align-items:flex-start; gap:3px;
width:100%; padding:4px 6px; font-family:var(--mono); font-size:10px;
}
.cv-name{font-weight:700; font-size:13px; color:var(--ink); letter-spacing:-.01em}
.cv-role{color:var(--ink3); font-size:10px}
.cv-rule{height:1px; background:var(--ink); width:100%; margin:4px 0; opacity:.6}
.cv-row{
display:flex; gap:10px; color:var(--ink2); font-size:9px;
width:100%;
}
.cv-row span:first-child{color:var(--red); font-weight:600; min-width:55px}
.pg-art--rag{
flex-direction:column; align-items:stretch; gap:5px;
width:100%; font-family:var(--mono); font-size:9.5px;
}
.rag-msg{
padding:4px 8px;
background:rgba(0,0,0,.04);
border-left:2px solid var(--ink3);
color:var(--ink2); line-height:1.4;
}
.rag-msg--in{border-left-color:var(--red)}
.rag-msg--out{background:rgba(0,0,0,.08); color:var(--ink)}
.rag-msg em{color:var(--red); font-style:normal; font-size:8px}
.rag-loading{color:var(--ink4); letter-spacing:.4em}
/* preview meta list */
.pg-preview-meta{
list-style:none; padding:0; margin:0;
display:flex; flex-direction:column;
border:1px solid var(--rule);
}
.pg-preview-meta li{
display:flex; justify-content:space-between;
padding:7px 12px;
border-bottom:1px solid var(--rule);
font-family:var(--mono); font-size:11px;
}
.pg-preview-meta li:last-child{border-bottom:none}
.pg-preview-meta .k{
color:var(--ink4); letter-spacing:.18em;
text-transform:uppercase; font-size:10px;
}
.pg-preview-meta .v{color:var(--ink); font-weight:600}
.pg-preview-meta .v.r{color:var(--red)}
/* below-terminal note */
.pg-foot-note{
margin:clamp(20px,3vw,32px) 0 0;
font-family:var(--mono); font-size:11px;
letter-spacing:.18em; text-transform:uppercase;
color:var(--ink4); text-align:center;
}
.pg-foot-note a{
color:var(--red); text-decoration:none;
border-bottom:1px solid currentColor; padding-bottom:1px;
}
/* ─── WORKSHOP PAGE ─── */
body[data-page="workshop"]{background:var(--bone)}
.ws-hero{padding:128px 0 40px; position:relative}
.ws-hero .display{font-size:clamp(40px, 6.5vw, 96px)}
.ws-hero .hero-main{min-height:auto; gap:clamp(28px,4vw,48px)}
.ws-hero .hero-foot{padding-top:24px}
.ws-section{
padding:clamp(40px,5vw,72px) 0;
border-top:1px solid var(--rule);
}
.ws-section .marker{margin-bottom:clamp(16px,2vw,28px); padding-top:0}
.ws-briefing { background:var(--bone2) }
.ws-workshop { background:var(--bone) }
.ws-verticals { background:var(--bone2) }
.ws-cobuild { background:var(--bone) }
.ws-cobuild .marker::before{background:currentColor; opacity:.5}
.ws-cobuild .h2 em,
.ws-cobuild .lead em.r{color:var(--red)}
.ws-cta{ background:var(--bone2) }
/* head block (h2 + lead) */
.ws-head{
display:grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap:clamp(28px,4vw,72px); align-items:end;
margin-bottom:clamp(28px,3vw,48px);
}
.ws-head .h2{margin:0; font-size:clamp(32px,4vw,60px)}
.ws-head em{font-style:italic; font-weight:800; color:var(--red)}
.ws-head .lead{margin:0; padding-bottom:6px; font-size:clamp(16px,1.3vw,19px)}
@media (max-width:820px){ .ws-head{grid-template-columns:1fr} }
/* specs row (briefing) */
.ws-specs{
display:grid; grid-template-columns:repeat(4,1fr);
gap:0; border:1px solid var(--rule);
margin-bottom:clamp(20px,3vw,32px);
}
@media (max-width:820px){ .ws-specs{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .ws-specs{grid-template-columns:1fr} }
.ws-spec{
padding:16px 18px;
border-right:1px solid var(--rule);
display:flex; flex-direction:column; gap:4px;
background:var(--paper);
}
.ws-spec:last-child{border-right:none}
@media (max-width:820px){
.ws-spec{border-right:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.ws-spec:nth-child(2n){border-right:none}
}
.ws-spec-k{
font-family:var(--mono); font-size:10px; font-weight:600;
letter-spacing:.22em; text-transform:uppercase; color:var(--ink4);
}
.ws-spec-v{
font-family:var(--sans); font-weight:700;
font-size:18px; color:var(--ink);
letter-spacing:-.01em;
}
.ws-spec-v em.r{color:var(--red); font-style:italic; font-weight:800}
.ws-spec--price{background:var(--red); color:#fff; border-color:var(--red)}
.ws-spec--price .ws-spec-k{color:#fff; opacity:.85}
.ws-spec--price .ws-spec-v{color:#fff}
.ws-spec--price .ws-spec-v em.r{color:#fff; font-weight:800}
.ws-foot{margin-top:clamp(20px,3vw,32px)}
/* coverage list - two-column compact (workshop section) */
.ws-coverage{
list-style:none; padding:0; margin:0 0 clamp(20px,3vw,32px);
display:grid; grid-template-columns:1fr; gap:0;
border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
background:var(--paper);
}
.ws-coverage--two{grid-template-columns:1fr 1fr}
@media (max-width:760px){ .ws-coverage--two{grid-template-columns:1fr} }
.ws-coverage li{
display:flex; gap:14px; align-items:baseline;
padding:14px 20px;
border-bottom:1px solid var(--rule);
border-right:1px solid var(--rule);
font-size:15px; line-height:1.35; color:var(--ink2);
}
.ws-coverage--two li:nth-child(2n){border-right:none}
@media (max-width:760px){
.ws-coverage--two li{border-right:none}
}
.ws-coverage li:last-child,
.ws-coverage--two li:nth-last-child(-n+2){border-bottom:none}
.ws-bullet{
color:var(--red); font-family:var(--mono); font-weight:700;
font-size:11px; letter-spacing:.18em;
flex-shrink:0;
}
/* price strip - tighter, red accent */
.ws-price{
display:flex; flex-wrap:wrap; align-items:baseline; gap:18px;
padding:14px 22px; border:1px solid var(--red);
background:var(--red); color:#fff;
}
.ws-price-k{
font-family:var(--mono); font-size:11px; font-weight:500;
letter-spacing:.18em; text-transform:uppercase; color:#fff; opacity:.9;
flex:1; min-width:180px;
}
.ws-price-v{
font-family:var(--sans); font-size:clamp(24px,2.6vw,34px);
font-weight:800; letter-spacing:-.025em; color:#fff;
}
.ws-price-v strong{color:#fff; font-weight:800}
.ws-price-note{
font-family:var(--mono); font-size:10px; letter-spacing:.18em;
text-transform:uppercase; color:#fff; opacity:.8;
}
/* verticals - compact, no descriptions */
.vert-grid{
display:grid; grid-template-columns:repeat(4,1fr);
gap:0; border:1px solid var(--ink);
background:var(--ink);
margin-bottom:clamp(20px,3vw,32px);
}
@media (max-width:1080px){ .vert-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .vert-grid{grid-template-columns:1fr} }
.vert{
background:var(--paper); padding:20px 18px 18px;
display:flex; flex-direction:column; gap:10px;
border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
transition:background .15s ease;
position:relative;
min-height:140px;
}
.vert:hover{background:var(--bone)}
.vert:hover .vert-name{color:var(--red)}
.vert-grid > .vert:nth-child(4n){border-right:none}
.vert-grid > .vert:nth-last-child(-n+4){border-bottom:none}
@media (max-width:1080px){
.vert-grid > .vert{border-right:1px solid var(--ink); border-bottom:1px solid var(--ink)}
.vert-grid > .vert:nth-child(2n){border-right:none}
.vert-grid > .vert:nth-last-child(-n+2){border-bottom:none}
}
@media (max-width:560px){
.vert-grid > .vert{border-right:none}
.vert-grid > .vert:last-child{border-bottom:none}
}
.vert-num{
font-family:var(--mono); font-size:11px; font-weight:700;
letter-spacing:.22em; color:var(--red);
}
.vert-name{
font-family:var(--sans); font-weight:800;
font-size:22px; letter-spacing:-.02em; color:var(--ink);
line-height:1.05; transition:color .15s;
}
.vert-tags{
list-style:none; padding:0; margin:auto 0 0;
display:flex; flex-wrap:wrap; gap:5px;
}
.vert-tags li{
font-family:var(--mono); font-size:9px; font-weight:500;
letter-spacing:.16em; text-transform:uppercase;
color:var(--ink3);
padding:3px 7px; border:1px solid var(--rule);
}
/* co-build */
.ws-head--cobuild .h2 em{color:var(--red)}
.cobuild-steps{
list-style:none; padding:0; margin:0;
display:grid; grid-template-columns:repeat(4,1fr);
gap:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
@media (max-width:820px){ .cobuild-steps{grid-template-columns:1fr} }
.cobuild-steps li{
padding:22px 18px 20px;
border-right:1px solid var(--rule);
display:flex; flex-direction:column; gap:10px;
}
.cobuild-steps li:last-child{border-right:none}
@media (max-width:820px){
.cobuild-steps li{border-right:none; border-bottom:1px solid var(--rule)}
.cobuild-steps li:last-child{border-bottom:none}
}
.cb-num{
font-family:var(--mono); font-size:11px; font-weight:700;
letter-spacing:.22em; color:var(--red);
}
.cobuild-steps p{margin:0; font-size:15px; line-height:1.35; color:var(--ink); font-weight:500}
.cobuild-steps em.r{color:var(--red); font-style:italic; font-weight:700}
.ws-cobuild .ws-foot{margin-top:clamp(22px,3vw,32px)}
/* CTA - single row */
.ws-cta{padding:clamp(40px,5vw,72px) 0; border-top:1px solid var(--rule)}
.ws-cta-row{
display:flex; flex-wrap:wrap; align-items:center;
gap:clamp(20px,3vw,40px);
padding:clamp(20px,3vw,32px) 0;
border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
}
.ws-cta-tag{
font-family:var(--mono); font-size:11px; font-weight:600;
letter-spacing:.22em; text-transform:uppercase; color:var(--ink3);
display:inline-block; margin-bottom:8px;
}
.ws-cta .h2{margin:0; font-size:clamp(28px,3.6vw,48px)}
.ws-cta .h2 em{font-style:italic; color:var(--red); font-weight:800}
.ws-cta-row > div{flex:1; min-width:240px}
.ws-cta-mail{
font-family:var(--mono); font-size:14px;
color:var(--ink); border-bottom:1px solid var(--ink);
padding-bottom:2px; text-decoration:none;
}
.ws-cta-mail:hover{color:var(--red); border-color:var(--red)}
/* ═══════ BLOG DETAIL (dispatch page) ═══════ */
.post-crumbs{
display:flex; align-items:center; gap:6px;
font-family:var(--mono); font-size:11px;
letter-spacing:.18em; text-transform:uppercase;
color:var(--ink4);
margin-bottom:clamp(20px,3vw,32px);
}
.post-crumbs a{
color:var(--ink4); text-decoration:none;
transition:color .15s;
}
.post-crumbs a:hover{color:var(--red)}
.post-crumbs .sep{color:var(--ink4); opacity:.6}
.post-crumbs .here{color:var(--red); font-weight:600}
/* ═══════ BLOG POST ═══════ */
body[data-page="post"]{background:var(--bone)}
.post-hero{
padding:128px 0 clamp(32px,4vw,56px);
background:var(--bone);
border-bottom:1px solid var(--rule);
}
.post-hero .wrap{max-width:1100px}
.post-tags{
display:flex; flex-wrap:wrap; gap:6px;
margin-bottom:clamp(18px,2.5vw,28px);
}
.post-tags .tag{
font-family:var(--mono); font-size:10px; font-weight:500;
letter-spacing:.18em; text-transform:uppercase;
color:var(--ink3);
padding:4px 9px; border:1px solid var(--rule);
background:transparent;
}
.post-title{
font-family:var(--sans); font-weight:800;
font-size:clamp(36px, 5.5vw, 76px);
letter-spacing:-.035em; line-height:1.02;
margin:0 0 clamp(20px,3vw,32px); color:var(--ink);
text-wrap:balance;
}
.post-title em{font-style:italic; color:var(--red); font-weight:800}
.post-lead{
font-family:'Newsreader','Newsreader Display',Georgia,serif;
font-size:clamp(20px,1.8vw,26px); line-height:1.5;
color:var(--ink2); max-width:64ch;
margin:0 0 clamp(28px,4vw,44px);
}
.post-byline{
display:flex; justify-content:space-between; align-items:flex-end;
flex-wrap:wrap; gap:18px;
padding-top:clamp(16px,2vw,24px);
border-top:1px solid var(--ink);
}
.post-byline-l{display:flex; align-items:center}
.post-author{display:flex; align-items:center; gap:12px}
.post-author-mark{
display:inline-flex; align-items:center; justify-content:center;
width:36px; height:36px;
background:var(--ink); color:var(--bone);
font-family:var(--mono); font-size:11px; font-weight:700;
letter-spacing:.06em;
}
[data-theme="dark"] .post-author-mark{background:var(--red); color:#fff}
.post-author-name{
font-weight:700; font-size:15px; color:var(--ink);
letter-spacing:-.01em;
}
.post-byline-r{
display:flex; flex-wrap:wrap; gap:clamp(14px,2vw,28px);
align-items:flex-end;
}
.post-byline-stamp{display:flex; flex-direction:column; gap:2px}
.post-byline-stamp .k{
font-family:var(--mono); font-size:9px; font-weight:600;
letter-spacing:.22em; text-transform:uppercase; color:var(--ink4);
}
.post-byline-stamp .v{
font-family:var(--mono); font-size:12px; font-weight:600;
color:var(--ink);
}
.post-byline-stamp .v.r{color:var(--red); font-weight:700}
/* body */
.post-body{
padding:clamp(40px,6vw,80px) 0 clamp(40px,6vw,80px);
background:var(--bone2);
border-bottom:1px solid var(--rule);
}
.post-grid{
max-width:1100px;
display:grid;
grid-template-columns: 220px minmax(0, 1fr);
gap:clamp(28px,4vw,72px);
align-items:start;
}
@media (max-width:900px){
.post-grid{grid-template-columns:1fr; gap:36px}
}
.post-rail{
position:sticky; top:104px;
display:flex; flex-direction:column; gap:24px;
}
@media (max-width:900px){
.post-rail{position:static; order:2; flex-direction:row; flex-wrap:wrap; gap:18px}
.post-rail .rail-block{flex:1; min-width:200px}
}
.rail-block{
display:flex; flex-direction:column; gap:10px;
padding:14px 16px;
border:1px solid var(--rule);
background:var(--paper);
}
.rail-k{
font-family:var(--mono); font-size:9px; font-weight:600;
letter-spacing:.22em; text-transform:uppercase; color:var(--ink4);
}
.rail-toc{
list-style:none; padding:0; margin:0;
display:flex; flex-direction:column; gap:6px;
counter-reset: toc;
}
.rail-toc li{counter-increment: toc}
.rail-toc a{
display:flex; gap:8px; align-items:baseline;
text-decoration:none;
font-family:var(--mono); font-size:12px;
color:var(--ink3); line-height:1.35;
padding:4px 0;
border-left:2px solid transparent;
padding-left:10px; margin-left:-12px;
transition:color .15s, border-color .15s, background .15s;
}
.rail-toc a::before{
content:counter(toc, decimal-leading-zero) " ·";
color:var(--ink4); font-weight:600;
}
.rail-toc a:hover{color:var(--ink); border-left-color:var(--red)}
.rail-toc a.is-active{
color:var(--red); border-left-color:var(--red);
background:var(--bone); font-weight:600;
}
.rail-toc a.is-active::before{color:var(--red)}
.rail-share{
display:flex; flex-direction:column; gap:6px;
}
.rail-share-link{
font-family:var(--mono); font-size:11px;
color:var(--ink2); text-decoration:none;
letter-spacing:.04em;
transition:color .15s;
}
.rail-share-link:hover{color:var(--red)}
.rail-cta{
background:var(--ink);
color:var(--bone);
border-color:var(--ink);
}
[data-theme="dark"] .rail-cta{background:var(--red); border-color:var(--red); color:#fff}
.rail-cta-k{
font-family:var(--mono); font-size:9px; font-weight:600;
letter-spacing:.22em; text-transform:uppercase; color:var(--red);
}
[data-theme="dark"] .rail-cta-k{color:#fff; opacity:.85}
.rail-cta p{
margin:0; font-size:13px; line-height:1.45;
color:var(--bone);
}
[data-theme="dark"] .rail-cta p{color:#fff}
.rail-cta em.r{color:var(--red); font-style:italic; font-weight:700}
[data-theme="dark"] .rail-cta em.r{color:#fff; text-decoration:underline}
.rail-cta-link{
display:inline-flex; align-items:center; gap:8px;
margin-top:6px;
font-family:var(--mono); font-size:11px; font-weight:600;
letter-spacing:.18em; text-transform:uppercase;
color:var(--bone); text-decoration:none;
padding-top:8px; border-top:1px solid currentColor;
align-self:flex-start;
}
.rail-cta-link:hover{color:var(--red)}
[data-theme="dark"] .rail-cta-link{color:#fff}
.rail-cta-link .ar{transition:transform .15s}
.rail-cta-link:hover .ar{transform:translateX(3px)}
/* main article column */
.post-main{
max-width:720px;
font-family:'Newsreader','Newsreader Display',Georgia,serif;
font-size:19px; line-height:1.6;
color:var(--ink2);
}
.post-main > * + *{margin-top:1.1em}
.post-main p{margin:0}
.post-main strong{color:var(--ink); font-weight:700}
.post-main em.r{color:var(--red); font-style:italic; font-weight:500}
.post-drop{
font-size:21px; line-height:1.55;
}
.post-drop .dropcap{
float:left;
font-family:var(--sans);
font-size:5.4em; line-height:.85;
font-weight:800;
color:var(--red);
padding:6px 12px 0 0;
margin-right:6px;
}
.post-h2{
font-family:var(--sans); font-weight:800;
font-size:clamp(24px,2.4vw,32px);
letter-spacing:-.025em; line-height:1.1;
color:var(--ink);
margin-top:1.6em !important;
padding-top:8px;
border-top:1px solid var(--rule);
scroll-margin-top:96px;
}
.post-h2::before{
content:""; display:block; width:32px; height:2px;
background:var(--red); margin-bottom:14px;
}
.post-list{
margin:0; padding:0 0 0 28px;
list-style:none;
display:flex; flex-direction:column; gap:.5em;
}
.post-list li{
position:relative;
}
.post-list li::before{
content:"›"; position:absolute; left:-22px; top:0;
color:var(--red); font-family:var(--mono); font-weight:700;
}
.post-list--num{counter-reset: pl}
.post-list--num li{counter-increment: pl}
.post-list--num li::before{
content:counter(pl, decimal-leading-zero);
font-size:12px; font-weight:700; top:.4em; left:-28px;
}
.post-quote{
margin:1.6em 0;
padding:18px 24px;
border-left:3px solid var(--red);
background:var(--paper);
font-family:'Newsreader','Newsreader Display',Georgia,serif;
font-style:italic;
font-size:22px; line-height:1.45;
color:var(--ink);
}
.post-quote p{margin:0}
.post-quote cite{
display:block; margin-top:12px;
font-style:normal; font-family:var(--mono);
font-size:11px; letter-spacing:.14em;
color:var(--ink4); text-transform:uppercase;
}
.post-quote em{color:var(--red); font-weight:500}
.post-figure{
margin:1.4em 0;
border:1px solid var(--ink);
background:var(--paper);
}
.post-figure--callout{
display:grid; grid-template-columns:auto 1fr; gap:0;
}
.post-figure-k{
background:var(--red); color:#fff;
font-family:var(--mono); font-size:10px; font-weight:700;
letter-spacing:.22em; text-transform:uppercase;
padding:14px 18px;
display:flex; align-items:center;
}
.post-figure-v{
padding:14px 18px;
font-family:var(--sans);
display:flex; flex-direction:column; gap:4px;
}
.post-figure-v strong{
font-size:clamp(22px,2.4vw,30px); font-weight:800;
letter-spacing:-.02em; color:var(--ink);
}
.post-figure-v span{
font-size:14px; color:var(--ink3); line-height:1.4;
}
.post-rule{
border:none; height:1px; background:var(--ink);
margin:2em 0; opacity:.4;
}
.post-foot{
margin-top:1em !important;
font-family:var(--mono); font-size:12px;
line-height:1.7; color:var(--ink4);
letter-spacing:.02em;
}
.post-foot a{color:var(--red); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px}
/* pager (prev/next) */
.post-pager{
padding:clamp(40px,5vw,72px) 0;
background:var(--bone);
border-bottom:1px solid var(--rule);
}
.post-pager-grid{
display:grid; grid-template-columns:1fr 1fr; gap:0;
border:1px solid var(--ink);
background:var(--paper);
}
@media (max-width:760px){ .post-pager-grid{grid-template-columns:1fr} }
.post-pager-card{
padding:clamp(22px,3vw,32px);
text-decoration:none;
display:flex; flex-direction:column; gap:8px;
border-right:1px solid var(--ink);
transition:background .15s;
}
.post-pager-card:last-child{border-right:none}
@media (max-width:760px){
.post-pager-card{border-right:none; border-bottom:1px solid var(--ink)}
.post-pager-card:last-child{border-bottom:none}
}
.post-pager-card:hover{background:var(--bone)}
.post-pager-card--next{text-align:right; align-items:flex-end}
.post-pager-k{
font-family:var(--mono); font-size:11px; font-weight:600;
letter-spacing:.22em; text-transform:uppercase; color:var(--red);
}
.post-pager-v{
font-family:var(--sans); font-weight:700;
font-size:clamp(18px,1.8vw,22px); letter-spacing:-.02em;
color:var(--ink); line-height:1.25;
}
.post-pager-card:hover .post-pager-v{color:var(--red)}
.post-pager-t{
font-family:var(--mono); font-size:10px; letter-spacing:.18em;
text-transform:uppercase; color:var(--ink4);
}
/* ═══════ CV TOOL ═══════ */
body[data-page="cv"]{background:var(--bone2)}
/* ═══════ BLOG DETAIL · DB-content fallbacks ═══════
The .post-h2 / .post-list / .post-quote / .post-figure / .post-drop classes
above apply when a dispatch is hand-authored with those classes. Posts
coming from blog.Post.body_html ship plain ////
/
tags - these rules apply the same editorial treatment to
the raw tags inside .post-main so author conventions don't matter. */
/* drop-cap on the first paragraph */
.post-main > p:first-of-type::first-letter{
float:left;
font-family:var(--sans);
font-size:5.4em; line-height:.85;
font-weight:800; color:var(--red);
padding:6px 12px 0 0;
margin-right:6px;
}
/* section headings */
.post-main h2{
font-family:var(--sans); font-weight:800;
font-size:clamp(24px,2.4vw,32px);
letter-spacing:-.025em; line-height:1.1;
color:var(--ink);
margin-top:1.6em !important;
padding-top:8px;
border-top:1px solid var(--rule);
scroll-margin-top:96px;
}
.post-main h2::before{
content:""; display:block; width:32px; height:2px;
background:var(--red); margin-bottom:14px;
}
.post-main h3{
font-family:var(--sans); font-weight:700;
font-size:clamp(20px,1.8vw,24px);
letter-spacing:-.02em; line-height:1.2;
color:var(--ink);
margin-top:1.6em; scroll-margin-top:96px;
}
/* lists */
.post-main ul,
.post-main ol{
margin:0; padding:0 0 0 28px;
list-style:none;
display:flex; flex-direction:column; gap:.5em;
}
.post-main li{position:relative}
.post-main ul li::before{
content:"›"; position:absolute; left:-22px; top:0;
color:var(--red); font-family:var(--mono); font-weight:700;
}
.post-main ol{counter-reset: pl-tag}
.post-main ol li{counter-increment: pl-tag}
.post-main ol li::before{
content:counter(pl-tag, decimal-leading-zero);
position:absolute; left:-30px; top:.4em;
color:var(--red); font-family:var(--mono);
font-size:12px; font-weight:700;
}
/* pull quotes */
.post-main blockquote{
margin:1.6em 0;
padding:18px 24px;
border-left:3px solid var(--red);
background:var(--paper);
font-family:'Newsreader','Newsreader Display',Georgia,serif;
font-style:italic;
font-size:22px; line-height:1.45;
color:var(--ink);
}
.post-main blockquote p{margin:0}
.post-main blockquote em{color:var(--red); font-weight:500}
/* inline images and figures */
.post-main figure{
margin:1.4em 0;
display:flex; flex-direction:column; gap:10px;
}
.post-main figure img{
width:100%; height:auto; display:block;
border:1px solid var(--rule);
}
.post-main figure figcaption{
font-family:var(--mono); font-size:11px;
letter-spacing:.06em; color:var(--ink4);
text-align:center;
}
.post-main img{max-width:100%; height:auto; display:block}
.post-main img.article-inline-img{
margin:1.4em 0; border:1px solid var(--rule);
}
/* rule + body links */
.post-main hr{
border:none; height:1px; background:var(--ink);
margin:2em 0; opacity:.4;
}
.post-main a{
color:var(--red); text-decoration:none;
border-bottom:1px solid currentColor;
padding-bottom:1px;
transition:opacity .15s;
}
.post-main a:hover{opacity:.7}
/* ═══════ UTILITY PAGE HEADER (assets, CV, ...) ═══════ */
.cv-bar{
padding:104px 0 clamp(20px,3vw,32px);
background:var(--bone);
border-bottom:1px solid var(--rule);
}
.cv-bar-row{
display:flex; justify-content:space-between; align-items:flex-end;
flex-wrap:wrap; gap:18px;
}
.cv-bar-title{
margin:0; font-family:var(--sans); font-weight:800;
font-size:clamp(28px,3.2vw,42px); letter-spacing:-.03em;
color:var(--ink); line-height:1.05;
display:flex; flex-direction:column; gap:4px;
}
.cv-bar-sub{
font-family:var(--mono); font-size:11px; font-weight:500;
letter-spacing:.22em; text-transform:uppercase;
color:var(--ink3);
}
.cv-bar-actions{display:flex; gap:10px; flex-wrap:wrap}
/* ═══════ LOGO EXPORT (the /assets page) ═══════ */
.lx-shell{
padding:clamp(28px,4vw,48px) 0;
background:var(--bone);
}
.lx-grid{
display:grid;
grid-template-columns: minmax(0, 1.3fr) minmax(280px, .8fr);
gap:clamp(24px,3vw,40px);
align-items:start;
}
@media (max-width:900px){ .lx-grid{grid-template-columns:1fr} }
/* stage */
.lx-stage{
display:flex; flex-direction:column;
background:var(--paper);
border:1px solid var(--rule);
position:sticky; top:104px;
overflow:hidden;
}
@media (max-width:900px){ .lx-stage{position:static} }
.lx-canvas{
position:relative;
aspect-ratio: 4 / 3;
display:flex; flex-direction:column;
align-items:center; justify-content:center;
gap:24px;
padding:48px 32px;
background:#F2F3F5; /* default bone */
transition:background .2s;
}
/* canvas backgrounds */
.lx-stage[data-bg="bone"] .lx-canvas{background:#F2F3F5}
.lx-stage[data-bg="paper"] .lx-canvas{background:#FFFFFF}
.lx-stage[data-bg="ink"] .lx-canvas{background:#141414}
.lx-stage[data-bg="red"] .lx-canvas{background:#CB2828}
.lx-stage[data-bg="transparent"] .lx-canvas{
background:
repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 50% / 24px 24px;
}
/* logo svg - zoom + variant */
.lx-logo{
width:50%; max-width:340px; height:auto;
transition:width .2s;
}
.lx-stage[data-zoom="s"] .lx-logo{width:30%}
.lx-stage[data-zoom="m"] .lx-logo{width:50%}
.lx-stage[data-zoom="l"] .lx-logo{width:70%}
/* variant fills */
.lx-stage[data-variant="red"] .lx-logo .t1{fill:#CB2828}
.lx-stage[data-variant="red"] .lx-logo .t2{fill:#141414}
.lx-stage[data-variant="red"] .lx-logo .t3{fill:#7E7A72}
.lx-stage[data-variant="ink"] .lx-logo .t1{fill:#141414}
.lx-stage[data-variant="ink"] .lx-logo .t2{fill:#4A4842}
.lx-stage[data-variant="ink"] .lx-logo .t3{fill:#7E7A72}
.lx-stage[data-variant="mono"] .lx-logo .t1,
.lx-stage[data-variant="mono"] .lx-logo .t2,
.lx-stage[data-variant="mono"] .lx-logo .t3{fill:#141414}
.lx-stage[data-variant="white"] .lx-logo .t1,
.lx-stage[data-variant="white"] .lx-logo .t2,
.lx-stage[data-variant="white"] .lx-logo .t3{fill:#FFFFFF}
.lx-stage[data-variant="nuit"] .lx-logo .t1{fill:#CB2828}
.lx-stage[data-variant="nuit"] .lx-logo .t2{fill:#FFFFFF}
.lx-stage[data-variant="nuit"] .lx-logo .t3{fill:#9D9890}
/* wordmark on canvas */
.lx-mark-text{
display:flex; flex-direction:column; align-items:flex-start; gap:4px;
text-align:left;
}
/* Show-text ON → horizontal lockup matching the exported SVG: peaks
on the left, mont3 + Swiss AI Builders stacked on the right. Peaks
shrink so the text has room. */
.lx-stage[data-show-text="yes"] .lx-canvas{
flex-direction:row;
align-items:center; justify-content:center;
gap:clamp(20px,4vw,48px);
}
.lx-stage[data-show-text="yes"] .lx-logo{
width:auto; height:clamp(60px, 18vh, 120px); max-width:none;
}
/* Show-text OFF → peaks centered alone (default lx-canvas column
layout already centers; we just hide the wordmark and treat the
logo size with the existing data-zoom rules). */
.lx-stage[data-show-text="no"] .lx-mark-text{ display:none }
.lx-word{
font-family:var(--sans); font-weight:800; font-size:28px;
letter-spacing:-.03em; line-height:1;
color:#141414;
}
.lx-word em{color:#CB2828; font-style:normal}
.lx-sub{
font-family:var(--mono); font-size:9px;
letter-spacing:.22em; text-transform:uppercase;
color:#7E7A72;
}
/* wordmark color adapts to variant + background */
.lx-stage[data-bg="ink"] .lx-word,
.lx-stage[data-bg="red"] .lx-word{color:#fff}
.lx-stage[data-bg="ink"] .lx-word em{color:#CB2828}
.lx-stage[data-bg="red"] .lx-word em{color:#fff; text-decoration:underline; text-underline-offset:3px}
.lx-stage[data-bg="ink"] .lx-sub,
.lx-stage[data-bg="red"] .lx-sub{color:rgba(255,255,255,.7)}
.lx-stage[data-variant="white"] .lx-word{color:#fff}
.lx-stage[data-variant="white"] .lx-word em{color:#fff}
.lx-stage[data-variant="white"] .lx-sub{color:rgba(255,255,255,.7)}
.lx-stage[data-variant="mono"] .lx-word em{color:#141414}
.lx-stage[data-variant="nuit"] .lx-word{color:#fff}
.lx-stage[data-variant="nuit"] .lx-word em{color:#CB2828}
.lx-stage[data-variant="nuit"] .lx-sub{color:#9D9890}
.lx-stage-foot{
display:flex; justify-content:space-between; align-items:center;
padding:10px 14px;
border-top:1px solid var(--rule);
background:var(--paper);
}
.lx-stage-k{
font-family:var(--mono); font-size:10px; font-weight:700;
letter-spacing:.22em; color:var(--red);
}
.lx-stage-zooms{display:flex; gap:4px}
.lx-zoom{
width:28px; height:24px;
font-family:var(--mono); font-size:11px; font-weight:700;
background:transparent; color:var(--ink3);
border:1px solid var(--rule); cursor:pointer;
transition:background .12s, color .12s, border-color .12s;
}
.lx-zoom:hover{color:var(--ink); border-color:var(--ink)}
.lx-zoom.is-active{
background:var(--ink); color:var(--bone); border-color:var(--ink);
}
/* controls */
.lx-controls{
display:flex; flex-direction:column; gap:0;
border:1px solid var(--rule);
background:var(--paper);
}
.lx-group{
padding:18px 20px;
border-bottom:1px solid var(--rule);
display:flex; flex-direction:column; gap:12px;
}
.lx-group:last-child{border-bottom:none}
.lx-group-k{
font-family:var(--mono); font-size:10px; font-weight:700;
letter-spacing:.22em; text-transform:uppercase;
color:var(--ink4);
}
.lx-swatches{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
gap:8px;
}
.lx-swatches--small{
grid-template-columns:repeat(5, 1fr);
gap:6px;
}
.lx-sw{
display:flex; flex-direction:column; align-items:stretch; gap:0;
background:var(--bone); color:var(--ink);
border:1px solid var(--rule); cursor:pointer;
padding:0; overflow:hidden;
transition:border-color .12s;
}
.lx-sw:hover{border-color:var(--ink)}
.lx-sw.is-active{border-color:var(--red); border-width:2px}
.lx-sw-preview{
display:block; aspect-ratio: 3 / 2;
}
.lx-sw-name{
font-family:var(--mono); font-size:11px; font-weight:600;
letter-spacing:.18em; text-transform:uppercase;
padding:8px 10px; text-align:left;
border-top:1px solid var(--rule);
color:var(--ink);
}
.lx-pal--red{
background:
linear-gradient(135deg,
#CB2828 0% 33%, #141414 33% 66%, #7E7A72 66% 100%);
}
.lx-pal--ink{
background:
linear-gradient(135deg,
#141414 0% 33%, #4A4842 33% 66%, #7E7A72 66% 100%);
}
.lx-pal--mono{background:#141414}
.lx-pal--white{
background:#141414;
background-image:
linear-gradient(135deg, #fff 0%, #fff 100%);
background-color:#141414;
position:relative;
}
.lx-pal--white::after{
content:""; position:absolute; inset:0;
background:#fff;
}
.lx-pal--nuit{
background:#141414;
background-image:
linear-gradient(135deg,
#CB2828 0% 33%, #FFFFFF 33% 66%, #9D9890 66% 100%);
}
.lx-bg{
aspect-ratio: 1 / 1;
border:1px solid var(--rule); cursor:pointer;
transition:border-color .12s, transform .12s;
padding:0;
}
.lx-bg:hover{transform:scale(1.08)}
.lx-bg.is-active{border-color:var(--red); border-width:2px}
/* toggle */
.lx-toggle{
display:flex; align-items:center; gap:10px; cursor:pointer;
font-family:var(--mono); font-size:12px;
color:var(--ink2);
}
.lx-toggle input{display:none}
.lx-toggle-mark{
width:34px; height:18px; flex-shrink:0;
background:var(--bone2); border:1px solid var(--rule);
position:relative; transition:background .15s;
}
.lx-toggle-mark::after{
content:""; position:absolute; top:1px; left:1px;
width:14px; height:14px; background:var(--ink);
transition:left .15s, background .15s;
}
.lx-toggle input:checked + .lx-toggle-mark{
background:var(--red); border-color:var(--red);
}
.lx-toggle input:checked + .lx-toggle-mark::after{
left:17px; background:#fff;
}
.lx-toggle-lbl{user-select:none}
/* download grid */
.lx-dl-grid{
display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
}
.lx-dl{
background:var(--bone); color:var(--ink);
border:1px solid var(--rule); cursor:pointer;
padding:10px 12px;
display:flex; flex-direction:column; gap:2px;
text-align:left;
transition:background .12s, border-color .12s, color .12s;
}
.lx-dl:hover{background:var(--ink); color:var(--bone); border-color:var(--ink)}
.lx-dl-fmt{
font-family:var(--mono); font-size:12px; font-weight:700;
letter-spacing:.04em;
}
.lx-dl-meta{
font-family:var(--mono); font-size:9px;
letter-spacing:.18em; text-transform:uppercase;
color:var(--ink4);
}
.lx-dl:hover .lx-dl-meta{color:var(--bone); opacity:.75}
.lx-dl-note{
margin:0; padding:8px 0 0;
font-family:var(--mono); font-size:10px;
letter-spacing:.16em; text-transform:uppercase;
color:var(--ink4);
transition:color .2s;
}
.lx-dl-note.is-flash{color:var(--red); font-weight:700}
.lx-rules{
list-style:none; padding:0; margin:0;
display:flex; flex-direction:column; gap:6px;
}
.lx-rules li{
display:flex; gap:8px; align-items:baseline;
font-size:13px; line-height:1.4; color:var(--ink2);
}
.lx-rule-y{color:var(--red); font-weight:700; flex-shrink:0}
.lx-rule-n{color:var(--ink4); font-weight:700; flex-shrink:0}
/* ═══════ 404 PAGE ═══════ */
body[data-page="404"]{background:var(--bone)}
.nf-shell{
padding:120px 0 clamp(40px,5vw,72px);
min-height:calc(100vh - 80px);
display:flex; flex-direction:column; justify-content:center;
}
.nf-grid{
display:grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap:clamp(28px,4vw,72px);
align-items:center;
}
@media (max-width:900px){
.nf-grid{grid-template-columns:1fr; gap:32px}
}
.nf-glyph{display:flex; flex-direction:column; gap:14px}
.nf-code{
font-family:var(--sans); font-weight:900;
font-size:clamp(120px, 22vw, 260px);
letter-spacing:-.06em; line-height:.85;
color:var(--red);
display:block;
}
.nf-code .scram{display:inline-flex}
.nf-code .scram > i{
display:inline-block; overflow:visible;
font-style:inherit;
}
.nf-code .scram > i.rolling{color:var(--ink)}
.nf-tag{
font-family:var(--mono); font-size:13px; font-weight:600;
letter-spacing:.32em; text-transform:uppercase;
color:var(--ink3);
padding-top:12px;
border-top:1px solid var(--ink);
align-self:flex-start;
}
.nf-term{
width:100%; max-width:none;
font-family:var(--mono);
}
.nf-term .term-body{padding:18px 20px 22px}
.nf-term .term-line{margin-bottom:3px; font-size:13px}
.nf-path,
.nf-path-2{
color:var(--red); font-weight:600;
word-break:break-all;
}
.nf-link{
color:var(--ink); text-decoration:none; font-weight:600;
border-bottom:1px dotted var(--ink4);
padding-bottom:1px; transition:color .12s, border-color .12s;
}
.nf-link:hover{color:var(--red); border-color:var(--red)}
.nf-dim{color:var(--ink4); margin-left:6px}
.nf-mailto{
margin:clamp(28px,4vw,44px) 0 0;
font-family:var(--mono); font-size:12px;
letter-spacing:.06em; color:var(--ink4);
text-align:center;
padding-top:18px;
border-top:1px solid var(--rule);
}
.nf-mailto a{
color:var(--red); text-decoration:none;
border-bottom:1px solid currentColor; padding-bottom:1px;
/* ═══════ CV VIEWER (/playground/cv/) ═══════ */
.cv-viewer{
padding:clamp(28px,4vw,52px) 0 clamp(48px,6vw,80px);
background:var(--bone2);
}
.cv-pdf-frame{
position:relative;
width:100%;
max-width:880px;
margin:0 auto;
background:#fff;
border:1px solid var(--rule);
box-shadow:0 18px 60px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.04);
overflow:hidden;
}
.cv-pdf-frame iframe{
display:block;
width:100%;
height: clamp(640px, 92vh, 1244px); /* A4 ~= 880 × 1244 */
border:0;
background:#fff;
}
[data-theme="dark"] .cv-pdf-frame{
box-shadow:0 18px 60px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.3);
}
.cv-viewer-note{
max-width:880px;
margin:18px auto 0;
font-family:var(--mono);
font-size:11px;
letter-spacing:.04em;
color:var(--ink4);
text-align:center;
line-height:1.6;
}
.cv-viewer-note a{
color:var(--ink);
border-bottom:1px solid currentColor;
padding-bottom:1px;
}
.cv-viewer-note a:hover{color:var(--red)}
@media (max-width:720px){
.cv-pdf-frame iframe{ height:80vh }
}