/* --kc (the dossier's kind colour) is set per page on , so this file is shared. */ :root{ --paper:#f2e9d4; --card:#f7f1e1; --ink:#2b2620; --muted:#7c6f56; --line:#d9c9a6; --pine:#2f5c46; --rust:#b0562e; --kc:#777; } *{ box-sizing:border-box; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:"Spectral",Georgia,serif; font-size:1.06rem; line-height:1.7; -webkit-font-smoothing:antialiased; } body::before{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.5; background-image:url("data:image/svg+xml;utf8,"); } a{ color:var(--rust); } /* hero band */ .hero{ position:relative; min-height:44vh; padding:26px 24px 62px; overflow:hidden; color:#f7f1e1; background:linear-gradient(150deg, color-mix(in srgb,var(--kc) 82%, #000) 0%, var(--kc) 55%, color-mix(in srgb,var(--kc) 70%, #f2e9d4) 100%); } .hero.has-img{ background-size:cover; background-position:center; } .hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 40%, rgba(30,22,12,.55)); } .hero-ghost{ position:absolute; right:-2%; bottom:-8%; font-family:"Fraunces",serif; font-weight:900; font-size:min(30vw,240px); line-height:.8; color:#fff; opacity:.09; letter-spacing:-.03em; text-transform:lowercase; white-space:nowrap; pointer-events:none; } .hero-inner{ position:relative; z-index:2; max-width:720px; margin:0 auto; } .back{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#f7f1e1; text-decoration:none; opacity:.85; } .back:hover{ opacity:1; } .kicker{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; opacity:.8; margin:44px 0 10px; } h1{ font-family:"Fraunces",serif; font-weight:900; font-size:clamp(2.3rem,7vw,4rem); line-height:.98; letter-spacing:-.02em; margin:0 0 16px; text-wrap:balance; } .tags{ display:flex; flex-wrap:wrap; gap:7px; } .tag{ font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; border:1px solid rgba(247,241,225,.5); border-radius:20px; padding:3px 11px; } /* instrument bar */ .meta{ position:relative; z-index:3; max-width:720px; margin:-34px auto 0; padding:0 24px; } .meta-in{ display:flex; flex-wrap:wrap; gap:22px 30px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:5px; padding:16px 22px; box-shadow:0 10px 34px rgba(60,45,20,.15); } .stat{ font-family:"IBM Plex Mono",monospace; font-size:.74rem; color:var(--muted); line-height:1.3; } .stat b{ display:block; font-size:.92rem; color:var(--ink); font-weight:600; margin-top:2px; } .meter{ display:inline-flex; gap:3px; margin-top:4px; } .meter i{ width:15px; height:7px; border-radius:1px; background:var(--line); } .meter i.on{ background:var(--kc); } /* reading column */ .wrap{ max-width:720px; margin:38px auto 90px; padding:0 24px; } .sec{ margin:0 0 30px; } .sec h2{ font-family:"Fraunces",serif; font-weight:600; font-size:1.5rem; line-height:1.1; margin:34px 0 10px; display:flex; align-items:baseline; gap:12px; } .sec h2 .idx{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; font-weight:500; color:var(--rust); letter-spacing:.05em; } .sec p{ margin:.55rem 0; } .sec.lead p{ font-size:1.24rem; line-height:1.55; } .sec.lead p:first-of-type::first-letter{ font-family:"Fraunces",serif; font-weight:900; float:left; font-size:4.1rem; line-height:.72; padding:6px 12px 0 0; color:var(--kc); } .sec.skip{ border-left:3px solid var(--rust); padding:2px 0 2px 20px; } .sec.skip h2{ color:var(--rust); } .sec.odd h2{ font-style:italic; } /* The honest note is a caveat block, not body prose — it should read as the page arguing with itself. Heavier than .skip (a one-liner) and quieter than .locals (a pull-quote). */ .sec.honest{ background:color-mix(in srgb,var(--rust) 7%, var(--card)); border-left:3px solid var(--rust); border-radius:0 6px 6px 0; padding:4px 24px 18px; margin-top:36px; } .sec.honest h2{ color:var(--rust); } .sec.honest p{ font-size:.98rem; } .sec.honest strong{ color:var(--rust); } .sec.locals{ background:color-mix(in srgb,var(--kc) 9%, var(--card)); border:1px solid var(--line); border-radius:6px; padding:6px 26px 20px; margin-top:40px; position:relative; } .sec.locals::before{ content:"\201C"; position:absolute; top:-18px; left:16px; font-family:"Fraunces",serif; font-weight:900; font-size:5rem; color:var(--kc); opacity:.4; } .sec.locals h2{ font-style:italic; } .sec.locals p{ font-style:italic; color:#4a4232; } blockquote{ border-left:3px solid var(--kc); margin:1rem 0; padding:.2rem 0 .2rem 1rem; color:var(--muted); font-style:italic; } ul{ padding-left:1.2rem; } li{ margin:.3rem 0; } code{ background:#e9dfc6; padding:1px 5px; border-radius:3px; font-family:"IBM Plex Mono",monospace; font-size:.85em; } .sources{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--muted); line-height:1.7; border-top:1px solid var(--line); padding-top:16px; margin-top:44px; word-break:break-word; } .sources a{ color:var(--muted); } /* onward links — the way out of a dossier that isn't the back button */ .onward{ margin:34px 0 10px; padding-top:20px; border-top:1px solid var(--line); } .onward-row{ display:flex; gap:9px; flex-wrap:wrap; align-items:baseline; margin-bottom:11px; } .onward-lbl{ font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); flex:none; width:66px; padding-top:3px; } .onward-c{ font-family:"IBM Plex Mono",monospace; font-size:.74rem; text-decoration:none; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:2px; padding:5px 10px; } .onward-c:hover{ border-color:var(--kc); color:var(--kc); } .nearby .onward-c{ font-family:"Spectral",serif; font-size:.86rem; } .nearby .nd{ color:var(--muted); font-size:.74rem; margin-left:6px; } .visit{ font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; padding:8px 14px; border:1px solid var(--line); border-radius:3px; background:var(--card); color:var(--muted); cursor:pointer; } .visit:hover{ border-color:var(--pine); color:var(--pine); } .visit.on{ background:var(--pine); border-color:var(--pine); color:#f6efdd; } .mine{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .react{ display:inline-flex; gap:5px; } .rx{ font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; padding:8px 11px; border:1px solid var(--line); border-radius:3px; background:var(--card); color:var(--muted); cursor:pointer; } .rx:hover{ border-color:var(--rust); color:var(--rust); } .rx.on{ background:var(--rust); border-color:var(--rust); color:#f6efdd; } .scorecard{ max-width:720px; margin:14px auto 0; padding:0 24px; } .scorecard-in{ display:flex; flex-wrap:wrap; gap:10px 26px; background:var(--card); border:1px solid var(--line); border-radius:5px; padding:13px 22px; } .sc-axis{ font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); } .sc-axis .m{ display:inline-flex; gap:2px; margin-left:7px; vertical-align:middle; } .sc-axis .m i{ width:11px; height:6px; border-radius:1px; background:var(--line); } .sc-axis .m i.on{ background:var(--kc); } .sc-axis .m i.neg{ background:var(--rust); } .sc-why{ font-size:.62rem; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; font-family:"IBM Plex Mono",monospace; width:100%; }