/* ========================================================================== THEME: CARTOGRAPHER The reading style. Long-form posts and full records. Always dark — add class="dark cartographer" to . Requires 01-tokens.css and 02-base.css ========================================================================== */ body.cartographer{ font-family:var(--font-prose); font-size:17px; line-height:1.78; background:#080d13; } /* Contour rings — the one texture in this theme. Sits behind content on the page shell, never on top of text. */ .cartographer .paper{ max-width:840px; margin:0 auto; min-height:100vh; background:#0d141c; position:relative; } .cartographer .paper::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.55; background-image: repeating-radial-gradient(circle at 9% 10%, transparent 0 27px, rgba(77,155,230,.085) 27px 28px), repeating-radial-gradient(circle at 90% 62%, transparent 0 35px, rgba(77,155,230,.05) 35px 36px); } .cartographer .paper > *{ position:relative; } /* -------------------------------------------------------------------------- MASTHEAD -------------------------------------------------------------------------- */ .cartographer .masthead{ padding:20px var(--gut) 32px; } .cartographer .masthead h1{ font-family:var(--font-serif-display); font-weight:700; font-size:clamp(34px,5.6vw,52px); line-height:1.04; letter-spacing:-0.015em; color:var(--tx); margin:15px 0 0; } .cartographer .masthead h1 em{ font-style:italic; font-weight:400; color:var(--gold); } .cartographer .standfirst{ font-size:19.5px; line-height:1.62; color:var(--tx-2); margin-top:18px; max-width:54ch; font-weight:300; } @media(max-width:640px){ .cartographer .masthead{ padding:16px var(--gut-sm) 26px; } } /* Wax-seal rule under the masthead */ .rule-seal{ display:flex; align-items:center; gap:11px; margin-top:26px; } .rule-seal__line{ flex:1; height:1px; background:linear-gradient(90deg,rgba(77,155,230,.55),rgba(77,155,230,0)); } .rule-seal__seal{ width:20px; height:20px; border-radius:50%; background:var(--gold); flex:none; box-shadow:inset 0 -2px 4px rgba(0,0,0,.35); } /* Site title in the nav */ .cartographer .sitename{ font-family:var(--font-serif-display); font-weight:700; font-size:21px; color:var(--tx); letter-spacing:-0.01em; text-decoration:none; } .cartographer .sitename em{ font-style:italic; font-weight:400; color:var(--gold); } /* -------------------------------------------------------------------------- VERDICT — one-sentence summary above the detail. Put it on every record. -------------------------------------------------------------------------- */ .verdict{ border:1px solid rgba(238,241,245,.15); border-left:2px solid var(--gold); background:rgba(255,255,255,.026); padding:20px 22px; margin:0 var(--gut) 30px; } .verdict__h{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); } .verdict p{ margin:10px 0 0; font-family:var(--font-serif-display); font-size:23px; line-height:1.35; color:var(--tx); font-weight:600; max-width:48ch; } @media(max-width:640px){ .verdict{ margin-left:var(--gut-sm); margin-right:var(--gut-sm); } } /* -------------------------------------------------------------------------- PROSE -------------------------------------------------------------------------- */ .prose{ padding:0 var(--gut) 20px; } .prose p{ margin:0 0 23px; max-width:var(--measure); } .prose > p:first-of-type::first-letter, .prose p.drop::first-letter{ font-family:var(--font-serif-display); font-weight:700; font-size:64px; line-height:.8; float:left; margin:7px 13px 0 0; color:var(--gold); } .prose h2{ font-family:var(--font-serif-display); font-weight:600; font-size:30px; color:var(--tx); margin:44px 0 4px; letter-spacing:-0.012em; line-height:1.2; } .prose h2::after{ content:""; display:block; width:46px; height:1px; background:var(--gold); margin-top:13px; } .prose h2 + p{ margin-top:15px; } .prose ul,.prose ol{ margin:0 0 23px; padding-left:22px; max-width:62ch; } .prose li{ margin-bottom:9px; } .prose li::marker{ color:var(--gold); } .prose blockquote{ margin:32px 0; padding:2px 0 2px 22px; border-left:2px solid var(--accent); font-style:italic; font-size:19.5px; color:var(--tx); max-width:56ch; font-weight:300; } .prose code{ font-family:var(--font-mono); font-size:14px; color:var(--gold); background:rgba(216,178,107,.08); padding:1px 6px; border:1px solid rgba(216,178,107,.2); } .prose a{ color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(77,155,230,.35); } @media(max-width:640px){ .prose{ padding:0 var(--gut-sm) 16px; } } /* Aside — setup notes, buried settings, things worth pulling out */ .aside{ border:1px solid rgba(238,241,245,.15); border-left:2px solid var(--accent); background:rgba(255,255,255,.026); padding:18px 20px; margin:32px 0; max-width:62ch; } .aside__h{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent); } .aside p{ margin:9px 0 0; font-size:16px; line-height:1.7; color:var(--tx-2); } /* -------------------------------------------------------------------------- SPEC PLATE — the structured half of a record, above the prose -------------------------------------------------------------------------- */ .spec{ margin:0 var(--gut) 36px; border:1px solid rgba(238,241,245,.15); background:rgba(255,255,255,.026); } .spec__hd{ padding:13px 20px; border-bottom:1px solid rgba(238,241,245,.11); display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; } .spec__lbl{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--tx-3); } .spec__flag{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.11em; text-transform:uppercase; padding:4px 9px; border:1px solid var(--gold); color:var(--gold); } .spec__rows{ display:grid; grid-template-columns:118px 1fr; } .spec__rows > div{ padding:10px 20px; font-size:15.5px; line-height:1.6; border-bottom:1px solid rgba(238,241,245,.07); } .spec__rows .k{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent); background:rgba(77,155,230,.035); padding-top:13px; } @media(max-width:640px){ .spec{ margin-left:var(--gut-sm); margin-right:var(--gut-sm); } .spec__rows{ grid-template-columns:1fr; } .spec__rows .k{ border-bottom:none; padding-bottom:2px; } } /* Outlined chip, for use inside the spec plate */ .chip{ display:inline-block; font-family:var(--font-mono); font-size:10px; padding:2px 8px; border:1px solid rgba(238,241,245,.24); margin:0 4px 4px 0; color:var(--tx-2); } .chip.is-on{ border-color:var(--accent); color:var(--accent); } .chip.is-warn{ border-color:var(--gold); color:var(--gold); } /* -------------------------------------------------------------------------- PROS / CONS — the one place a review benefits from being scannable -------------------------------------------------------------------------- */ .pc{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:30px 0; } @media(max-width:640px){ .pc{ grid-template-columns:1fr; } } .pc__col{ border:1px solid rgba(238,241,245,.15); background:rgba(255,255,255,.026); padding:19px 20px; } .pc__h{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.15em; text-transform:uppercase; margin-bottom:12px; } .pc__col--good .pc__h{ color:var(--accent); } .pc__col--bad .pc__h{ color:var(--gold); } .pc__col ul{ margin:0; padding-left:19px; } .pc__col li{ font-size:15.5px; line-height:1.6; margin-bottom:9px; } .pc__col--good li::marker{ color:var(--accent); } .pc__col--bad li::marker{ color:var(--gold); } /* -------------------------------------------------------------------------- RELATED -------------------------------------------------------------------------- */ .related{ padding:34px var(--gut) 40px; border-top:1px solid rgba(238,241,245,.15); } .related__cap{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--tx-3); margin-bottom:18px; } .related__grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media(max-width:640px){ .related__grid{ grid-template-columns:1fr; } .related{ padding:28px var(--gut-sm) 34px; } } .related__card{ display:block; border:1px solid rgba(238,241,245,.15); padding:17px 18px; text-decoration:none; background:rgba(255,255,255,.026); } .related__card:hover{ border-color:var(--accent); } .related__k{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); } .related__t{ font-family:var(--font-serif-display); font-size:22px; font-weight:600; color:var(--tx); margin-top:7px; line-height:1.15; } .related__d{ font-size:14.5px; color:var(--tx-3); margin-top:6px; line-height:1.55; }