/* ============================================================= PERSONAL OS — shared stylesheet ------------------------------------------------------------- Two themes in one file: • DARK (default) — brand / landing / index pages • LIGHT reading — add class="reading" to for long-form pages (journal entries, articles) Both share the same fonts, layout grammar and accent system; only the colour variables change. Section tints are applied with .panel. classes. ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400;1,700;1,900&family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap'); /* ---------- Theme tokens ---------- */ :root{ --gold: #CF9D3A; /* gold accent (dark theme) */ --accent: #CF9D3A; /* generic accent → gold in dark */ --bg: #2E2F33; /* base background */ --text: #ECE5D4; /* body + headline text */ --muted: #9A9388; /* metadata / captions */ --rule: rgba(236,229,212,.20); /* section tints — CONSOLIDATED: flattened to base; only Showcase keeps its own value */ --aubergine: #2E2F33; /* was #302F36 — now = base */ --navy: #2E2F33; /* was #181F28 — now = base */ --olive: #2E2F33; /* was #262B22 — now = base */ --black: #202127; /* Showcase only — softened from #161616 to a dark charcoal (a step down from base, not black) */ --maxw: 1180px; --gutter: clamp(24px, 5vw, 72px); /* page side spacing — one token everywhere */ --read-w: 720px; /* long-form measure */ --sd:"Playfair Display","Times New Roman",Georgia,serif; --sb:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif; } /* LIGHT reading theme — warm newsprint, SAME GOLD darkened for cream contrast */ body.reading{ --accent: #7A5E15; /* was oxblood #8A2B1F — now the gold family, darkened to pass on cream */ --bg: #F4EFE2; --text: #1A1714; --muted: #5B5346; --rule: rgba(0,0,0,.18); } /* publication sits UNDER the brand — edition mastheads a notch smaller */ body.reading .masthead h1{ font-size:clamp(32px,5.5vw,66px); } /* ---------- Base ---------- */ *{ box-sizing:border-box; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sb); font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{ color:inherit; text-decoration:none; } a:hover{ color:var(--accent); } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); } .kicker{ font-family:var(--sb); font-size:12px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); } .meta{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); } /* giant ghosted numeral */ .ghost-num{ font-family:var(--sd); font-style:italic; font-weight:900; color:var(--text); opacity:.06; line-height:.8; font-size:clamp(120px,22vw,300px); pointer-events:none; user-select:none; } /* full-width tinted panels */ .panel{ width:100%; } .panel.base{ background:var(--bg); } .panel.alt{ background:var(--aubergine); } .panel.navy{ background:var(--navy); } .panel.olive{ background:var(--olive); } .panel.black{ background:var(--black); } /* ---------- Top bar ---------- */ .topbar{ border-bottom:1px solid var(--rule); } .topbar .wrap{ display:flex; justify-content:space-between; align-items:center; height:38px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); } .topbar .right span{ margin-left:18px; } /* ---------- Masthead ---------- */ .masthead{ text-align:center; padding:40px 0 14px; } .masthead .overline{ font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; } .masthead h1{ font-family:var(--sd); font-weight:900; font-size:clamp(40px,8vw,88px); line-height:.92; margin:0; letter-spacing:-.015em; color:var(--text); } .masthead h1 a{ color:inherit; } .masthead .tagline{ font-family:var(--sd); font-style:italic; font-weight:400; font-size:clamp(16px,2.2vw,21px); color:var(--muted); margin-top:16px; } .dateline{ border-top:3px solid var(--text); border-bottom:1px solid var(--rule); margin-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; padding:8px 0; } .dateline span{ flex:1; text-align:center; } .dateline span:first-child{ text-align:left; } .dateline span:last-child{ text-align:right; } /* ---------- Section nav ---------- */ nav.desks{ border-bottom:1px solid var(--rule); } nav.desks .wrap{ display:flex; justify-content:center; flex-wrap:wrap; gap:34px; padding:13px var(--gutter); } nav.desks a{ font-family:var(--sd); font-size:17px; font-weight:700; } nav.desks a.active{ color:var(--accent); border-bottom:2px solid var(--accent); padding-bottom:2px; } /* ---------- Standfirst ---------- */ .standfirst{ text-align:center; max-width:740px; margin:38px auto 8px; font-family:var(--sd); font-size:clamp(19px,2.4vw,25px); font-style:italic; font-weight:400; line-height:1.45; } .standfirst b{ font-style:normal; color:var(--accent); } /* ---------- Page hero (inner pages) ---------- */ .page-hero{ position:relative; overflow:hidden; padding:50px 0 40px; border-bottom:1px solid var(--rule); } .page-hero .ghost-num{ position:absolute; right:-10px; top:-40px; } .page-hero .inner{ position:relative; z-index:1; } .page-hero .kicker{ display:block; margin-bottom:14px; } .page-hero h1{ font-family:var(--sd); font-weight:900; font-size:clamp(38px,6.5vw,76px); line-height:1; margin:0 0 16px; letter-spacing:-.015em; color:var(--text); max-width:18ch; } .page-hero .dek{ font-style:italic; color:var(--muted); font-size:clamp(17px,2.2vw,22px); max-width:640px; } /* ---------- Home hero ---------- */ .hero{ position:relative; padding:54px 0 64px; border-bottom:1px solid var(--rule); overflow:hidden; } .hero .ghost-num{ position:absolute; left:12px; bottom:-38px; font-size:clamp(100px,14vw,190px); opacity:.05; } .hero .inner{ position:relative; z-index:1; } .hero .kicker{ display:block; text-align:center; margin-bottom:16px; } .hero h2{ font-family:var(--sd); font-weight:900; font-size:clamp(34px,5.5vw,58px); line-height:1.0; text-align:center; margin:0 auto 18px; max-width:18ch; letter-spacing:-.015em; color:var(--text); } .hero .subhead{ text-align:center; font-family:var(--sd); font-style:italic; font-weight:400; color:var(--muted); font-size:clamp(18px,2.3vw,23px); max-width:680px; margin:0 auto 30px; line-height:1.4; } .hero-body{ columns:3; column-gap:34px; column-rule:1px solid var(--rule); max-width:980px; margin:0 auto; } .hero-body p{ margin:0 0 1em; } .hero-body p:first-of-type::first-letter{ font-family:var(--sd); font-weight:900; float:left; font-size:64px; line-height:.7; padding:6px 10px 0 0; color:var(--accent); } .hero-body b{ color:var(--accent); } /* ---------- Three-column desks ---------- */ .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); } .grid-3.two{ grid-template-columns:repeat(2,1fr); } .grid-3 .col{ padding:46px 34px; border-right:1px solid var(--rule); position:relative; } .grid-3 .col:first-child{ padding-left:0; } .grid-3 .col:last-child{ border-right:none; padding-right:0; } .col .num{ font-family:var(--sd); font-weight:900; font-style:italic; font-size:30px; color:var(--accent); opacity:.85; } .col h3{ font-family:var(--sd); font-weight:700; font-size:27px; line-height:1.1; margin:8px 0 12px; color:var(--text); } .col p{ margin:0 0 1em; font-size:18px; color:var(--text); } .col .readmore{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid var(--accent); color:var(--accent); padding-bottom:2px; } /* ---------- Journal + Reading duo ---------- */ .duo-band{ border-top:1px solid var(--rule); } .duo{ display:grid; grid-template-columns:1fr 1fr; } .duo .cell{ padding:54px 0; position:relative; overflow:hidden; } .duo .cell.j{ background:var(--navy); border-right:1px solid var(--rule); padding-right:40px; } .duo .cell.r{ background:var(--olive); padding-left:40px; } .duo .cell .ghost-num{ position:absolute; right:-20px; top:-40px; opacity:.05; } .section-head{ display:flex; align-items:baseline; gap:14px; border-bottom:2px solid var(--text); padding-bottom:8px; margin-bottom:18px; position:relative; z-index:1; } .section-head h3{ font-family:var(--sd); font-weight:900; font-size:24px; margin:0; color:var(--text); } .entry{ padding:14px 0; border-bottom:1px solid var(--rule); position:relative; z-index:1; } .entry:last-child{ border-bottom:none; } .entry h4{ font-family:var(--sd); font-weight:700; font-size:22px; margin:4px 0 6px; line-height:1.15; color:var(--text); } .entry p{ margin:0; color:var(--muted); font-size:17px; } .reading-item{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--rule); position:relative; z-index:1; } .reading-item:last-child{ border-bottom:none; } .reading-item .num{ font-family:var(--sd); font-weight:900; font-size:20px; color:var(--accent); min-width:26px; } .reading-item .t{ font-weight:500; color:var(--text); line-height:1.25; } .reading-item .s{ font-size:13px; color:var(--muted); letter-spacing:.04em; } /* ---------- Showcase ---------- */ .showcase{ padding:56px 0 46px; } .showcase .cards{ display:grid; grid-template-columns:repeat(3,1fr); } .showcase .card{ padding:26px 22px; border:1px solid var(--rule); margin:-0.5px; position:relative; overflow:hidden; } .showcase .card .bignum{ position:absolute; right:-8px; bottom:-30px; font-family:var(--sd); font-style:italic; font-weight:900; font-size:120px; color:var(--text); opacity:.05; line-height:.8; } .showcase .card .tag{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); position:relative; z-index:1; } .showcase .card h4{ font-family:var(--sd); font-weight:700; font-size:21px; margin:8px 0; line-height:1.15; color:var(--text); position:relative; z-index:1; } .showcase .card p{ margin:0 0 12px; font-size:16px; color:var(--muted); position:relative; z-index:1; } .showcase .card .readmore{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); border-bottom:1px solid var(--accent); padding-bottom:2px; position:relative; z-index:1; } /* ---------- Generic content section ---------- */ .section{ padding:64px 0; border-bottom:1px solid var(--rule); } .section > .wrap > .section-head{ margin-bottom:26px; } /* ---------- Journal index list ---------- */ .jlist{ max-width:860px; margin:0 auto; } .jlist .jrow{ display:grid; grid-template-columns:130px 1fr; gap:26px; padding:24px 0; border-bottom:1px solid var(--rule); align-items:baseline; } .jlist .jrow:first-child{ border-top:1px solid var(--rule); } .jlist .jrow .when{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); } .jlist .jrow h3{ font-family:var(--sd); font-weight:700; font-size:26px; margin:0 0 8px; line-height:1.12; } .jlist .jrow p{ margin:0; color:var(--muted); font-size:17px; } /* ---------- Show-more reveal (journal / reading lists) ---------- */ .jrow.is-more{ display:none; } .jlist.is-expanded .jrow.is-more{ display:grid; } .more-row{ text-align:center; margin-top:34px; } .show-more{ font-family:var(--sb); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--accent); background:transparent; border:1px solid var(--rule); border-radius:3px; padding:13px 28px; cursor:pointer; transition:border-color .15s,color .15s; } .show-more:hover{ border-color:var(--accent); } .show-more[hidden]{ display:none; } /* ---------- Long-form article (reading theme) ---------- */ .article{ max-width:var(--read-w); margin:0 auto; padding:54px var(--gutter) 20px; } .article .kicker{ display:block; text-align:center; margin-bottom:18px; } .article h1{ font-family:var(--sd); font-weight:900; font-size:clamp(34px,5.5vw,60px); line-height:1.05; text-align:center; margin:0 0 16px; letter-spacing:-.01em; } .article .byline{ text-align:center; color:var(--muted); font-style:italic; margin-bottom:40px; padding-bottom:30px; border-bottom:1px solid var(--rule); } .article p{ font-size:20px; line-height:1.65; margin:0 0 1.25em; } .article p:first-of-type::first-letter{ font-family:var(--sd); font-weight:900; float:left; font-size:74px; line-height:.66; padding:8px 12px 0 0; color:var(--accent); } .article h2{ font-family:var(--sd); font-weight:700; font-size:30px; margin:1.6em 0 .5em; } .article blockquote{ margin:1.5em 0; padding-left:22px; border-left:3px solid var(--accent); font-style:italic; font-size:22px; color:var(--text); } .article hr{ border:none; border-top:1px solid var(--rule); margin:2.4em auto; width:80px; } .article .backlink{ display:block; text-align:center; margin:40px 0; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); } /* ---------- Footer ---------- */ footer.site{ padding:44px 0 60px; text-align:center; } footer.site .name{ font-family:var(--sd); font-weight:900; font-size:30px; margin-bottom:8px; color:var(--text); } footer.site .links{ margin:14px 0; } footer.site .links a{ margin:0 14px; font-size:14px; letter-spacing:.06em; } footer.site .colophon{ margin-top:22px; font-size:12px; color:var(--muted); font-style:italic; } /* ---------- Proof strip (hard outcomes, front-loaded) ---------- */ /* same multicol geometry as .hero-body so the dividers line up exactly */ .proof{ columns:3; column-gap:34px; column-rule:1px solid var(--rule); max-width:980px; margin:32px auto 6px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); } .proof .stat{ break-inside:avoid; text-align:center; padding:22px 14px; } .proof .stat + .stat{ break-before:column; } .proof .stat .big{ font-family:var(--sd); font-weight:900; font-size:38px; color:var(--accent); line-height:1; letter-spacing:-.01em; } .proof .stat .lbl{ font-size:13px; letter-spacing:.02em; color:var(--muted); margin-top:10px; line-height:1.45; } /* ---------- Buttons / CTA row ---------- */ .cta-row{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:42px; } .btn{ display:inline-block; font-family:var(--sb); font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:14px 28px; border:1px solid var(--rule); border-radius:3px; white-space:nowrap; transition:background .15s,color .15s,border-color .15s; cursor:pointer; } .btn.primary{ background:var(--accent); color:var(--bg); border-color:var(--accent); } .btn.primary:hover{ background:transparent; color:var(--accent); } .btn.ghost{ color:var(--text); } .btn.ghost:hover{ border-color:var(--accent); color:var(--accent); } /* ---------- topbar contact link ---------- */ .topbar .right a.tb-cta{ color:var(--accent); border-bottom:1px solid var(--accent); padding-bottom:1px; white-space:nowrap; } .topbar .right a.tb-cta:hover{ color:var(--text); border-color:var(--text); } /* ---------- Contact band ---------- */ .contact{ position:relative; overflow:hidden; text-align:center; padding:70px 0; border-bottom:1px solid var(--rule); } .contact .ghost-num{ position:absolute; right:-10px; top:-40px; opacity:.05; } .contact .inner{ position:relative; z-index:1; } .contact .kicker{ display:block; margin-bottom:16px; } .contact h3{ font-family:var(--sd); font-weight:900; font-size:clamp(30px,4.6vw,50px); margin:0 0 14px; letter-spacing:-.015em; color:var(--text); } .contact .dek{ color:var(--muted); font-family:var(--sd); font-style:italic; font-size:clamp(18px,2.3vw,22px); max-width:580px; margin:0 auto 30px; line-height:1.4; } /* ---------- Responsive ---------- */ @media (max-width:900px){ .hero-body{ columns:2; } .grid-3{ grid-template-columns:1fr; } .grid-3 .col, .grid-3 .col:first-child, .grid-3 .col:last-child{ border-right:none; border-bottom:1px solid var(--rule); padding-left:0; padding-right:0; } .duo{ grid-template-columns:1fr; } .duo .cell.j{ border-right:none; border-bottom:1px solid var(--rule); padding-right:0; } .duo .cell.r{ padding-left:0; } .grid-3.two{ grid-template-columns:1fr; } .showcase .cards{ grid-template-columns:1fr; } .jlist .jrow{ grid-template-columns:1fr; gap:6px; } } @media (max-width:680px){ .proof{ columns:1; column-rule:none; } .proof .stat + .stat{ break-before:auto; border-top:1px solid var(--rule); } } @media (max-width:560px){ body{ font-size:18px; } .hero-body{ columns:1; } .topbar .right span:first-child{ display:none; } nav.desks .wrap{ gap:18px; } .article p{ font-size:18px; } } /* ============================================================= JOURNAL EDITIONS — daily / weekly brief in magazine style Designed on the cream reading theme (body class="reading"). "Full" = private (all sections); "Public" = published subset. ============================================================= */ .edition-banner{ text-align:center; font-size:11px; letter-spacing:.22em; text-transform:uppercase; padding:9px 0; border-bottom:1px solid var(--rule); font-weight:500; } .edition-banner.private{ color:var(--muted); } .edition-banner.public{ color:var(--accent); } /* per-block public/private tags (shown in the full edition) */ .tag-private,.tag-public{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:2px 7px; border-radius:2px; margin-left:10px; font-family:var(--sb); white-space:nowrap; } .tag-private{ color:var(--muted); border:1px solid var(--rule); } .tag-public{ color:var(--accent); border:1px solid var(--accent); } .edition{ max-width:860px; margin:0 auto; padding:0 var(--gutter); } .edition .lede{ text-align:center; font-family:var(--sd); font-style:italic; font-weight:400; font-size:clamp(20px,3vw,30px); line-height:1.3; margin:36px auto 6px; max-width:720px; } .edition .lede .label{ display:block; font-family:var(--sb); font-style:normal; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; } .brief-sec{ padding:30px 0; border-bottom:1px solid var(--rule); } .brief-sec:last-of-type{ border-bottom:none; } .brief-sec .sechead{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:18px; border-bottom:2px solid var(--text); padding-bottom:8px; } .brief-sec .sechead h2{ font-family:var(--sd); font-weight:900; font-size:25px; margin:0; } .brief-sec .sechead .meta{ margin-left:auto; } /* progress bars (light theme) */ .pbar-row{ margin:0 0 15px; } .pbar-row:last-child{ margin-bottom:0; } .pbar-row .top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; } .pbar-row .nm{ font-weight:700; font-family:var(--sd); font-size:18px; } .pbar-row .pc{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; } .pbar{ height:9px; background:rgba(0,0,0,.08); border-radius:5px; overflow:hidden; } .pfill{ height:100%; background:var(--accent); border-radius:5px; } .pbar-row .nt{ font-size:14.5px; color:var(--muted); margin:6px 0 0; } /* takeaway list (reading) */ .takes{ list-style:none; margin:0; padding:0; } .takes li{ padding:13px 0; border-bottom:1px solid var(--rule); } .takes li:last-child{ border-bottom:none; } .takes .src{ font-family:var(--sd); font-weight:700; font-size:19px; display:block; margin-bottom:3px; } .takes .pt{ color:var(--muted); font-size:16.5px; } /* Q&A */ .qa{ margin:0 0 20px; } .qa:last-child{ margin-bottom:0; } .qa .q{ font-family:var(--sd); font-weight:700; font-size:19px; margin:0 0 5px; } .qa .a{ margin:0; color:var(--muted); font-size:16.5px; } /* ops lists (private) */ .ops-list{ margin:0; padding-left:20px; } .ops-list li{ margin:0 0 9px; font-size:16.5px; } .ops-list.warn li{ color:#8A2B1F; } .ops-ok{ font-size:17px; } @media (max-width:560px){ .brief-sec .sechead .meta{ margin-left:0; width:100%; } } /* ============================================================= CHEATSHEET — one-page edition (everything visible, expand for detail) ============================================================= */ .sheet{ max-width:1180px; margin:0 auto; padding:16px var(--gutter) 44px; } .sheet-top{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:3px solid var(--text); padding-bottom:9px; margin-bottom:16px; gap:12px; flex-wrap:wrap; } .sheet-top .ttl{ font-family:var(--sd); font-weight:900; font-size:clamp(24px,4vw,34px); line-height:1; } .sheet-top .dt{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } /* the one thing — prominent */ .onething{ border:2px solid var(--accent); border-radius:5px; padding:13px 17px; margin:0 0 16px; display:flex; gap:16px; align-items:flex-start; } .onething .k{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); white-space:nowrap; padding-top:5px; font-weight:600; } .onething .v{ font-family:var(--sd); font-weight:700; font-size:clamp(17px,2.4vw,21px); line-height:1.25; margin:0; } /* compact build bars */ .bars{ margin:0 0 16px; } .bars h3, .sheet-card h3{ font-family:var(--sb); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 9px; font-weight:700; } .minibar{ display:grid; grid-template-columns:96px 1fr 86px; gap:11px; align-items:center; margin:0 0 3px; } .mbn{ font-size:12.5px; color:var(--muted); line-height:1.35; margin:0 0 11px; } .mbn:last-child{ margin-bottom:0; } .minibar:last-child{ margin-bottom:0; } .minibar .mn{ font-weight:600; font-size:14px; font-family:var(--sd); } .minibar .mt{ height:7px; background:rgba(0,0,0,.08); border-radius:4px; overflow:hidden; } .minibar .mf{ height:100%; background:var(--accent); border-radius:4px; } .minibar .mp{ font-size:12px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; } /* card grid */ .sheet-2col{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; } .sheet-2col .col{ display:flex; flex-direction:column; gap:14px; } .sheet-card .bars{ margin:0; } .sheet-card{ border:1px solid var(--rule); border-radius:5px; padding:13px 15px; } .sheet-card .hl{ font-size:15px; margin:0; color:var(--text); } .sheet-card .hl b{ font-family:var(--sd); } .sheet-card.warn .hl{ color:#8A2B1F; } .sheet-card ul{ margin:9px 0 0; padding-left:18px; } .sheet-card li{ margin:0 0 5px; font-size:14.5px; line-height:1.45; } .sheet-card li:last-child{ margin-bottom:0; } .sheet-card .src{ font-weight:700; font-family:var(--sd); } /* expanders in cream theme */ .sheet-card details{ margin-top:9px; } .sheet-card summary{ cursor:pointer; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); list-style:none; outline:none; font-weight:600; } .sheet-card summary::-webkit-details-marker{ display:none; } .sheet-card summary::before{ content:"▸ "; } .sheet-card details[open] > summary::before{ content:"▾ "; } .sheet-card.span2{ grid-column:1 / -1; } @media (max-width:680px){ .sheet-2col{ grid-template-columns:1fr; } .minibar{ grid-template-columns:84px 1fr 74px; } }