/* ========================================================================= CS Blackwoods — site.css All values translated from design_handoff_csblackwoods/DESIGN_TOKENS.md. Near-monochrome. Oxblood is punctuation only. Radius: 0 everywhere. ========================================================================= */ :root { /* Surfaces */ --bg: #0d0d0f; --panel: #111114; --panel-2: #141417; --surface-hover: #121215; /* Ink */ --ink: #e7e4dd; --ink-strong: #f4f1ea; --ink-soft: #cdc9c0; --dim: #8c887f; --dim-2: #a8a49a; --muted: #6f6b62; --faint: #56524b; --ghost: #3f3c37; /* Hairlines */ --hairline: rgba(231, 228, 221, 0.12); --hairline-soft: rgba(231, 228, 221, 0.10); --hairline-strong: rgba(231, 228, 221, 0.16); /* Accent — oxblood, used sparingly */ --accent: #9e2b25; --accent-hover: #b5322b; /* Status */ --status-unsolved: #9e2b25; --status-cold: #b8923f; --status-solved: #7faf8a; /* Type */ --serif: "Libre Caslon Display", Georgia, "Times New Roman", serif; --read: "Newsreader", Georgia, serif; --mono: "Courier Prime", "Courier New", monospace; /* Layout */ --pad: 28px; } /* ---- Light theme (creamy vintage) -------------------------------------- */ /* Toggled via [data-theme="light"] on . Warm parchment surfaces, ink the color of old typewriter ribbon, oxblood accent retained. */ html[data-theme="light"] { --bg: #e9e1cf; --panel: #e3dac4; --panel-2: #ded4bc; --surface-hover: #e4dbc6; --ink: #2c2620; --ink-strong: #1b1712; --ink-soft: #3b342a; --dim: #6b6452; --dim-2: #564e3f; --muted: #847c67; --faint: #9c947f; --ghost: #c1b79f; --hairline: rgba(41, 33, 20, 0.18); --hairline-soft: rgba(41, 33, 20, 0.12); --hairline-strong: rgba(41, 33, 20, 0.26); --accent-hover: #872019; } /* Retint the deliberately-dark "wells" (photo mats, hatches, grids) for cream. */ html[data-theme="light"] .evf, html[data-theme="light"] .evf__frame, html[data-theme="light"] .cs-frame, html[data-theme="light"] .cs-frame__inner, html[data-theme="light"] .imgph, html[data-theme="light"] .locator__plate { background: #ddd2b6; } html[data-theme="light"] .imgph::before, html[data-theme="light"] .evf__frame--empty::before { background: repeating-linear-gradient(45deg, #d7ccb0, #d7ccb0 11px, #cabf9f 11px, #cabf9f 22px); } html[data-theme="light"] .ad { background: repeating-linear-gradient(45deg, #ddd3ba, #ddd3ba 9px, #d3c8aa 9px, #d3c8aa 18px); } html[data-theme="light"] .locator__grid { background-image: linear-gradient(to right, rgba(41, 33, 20, 0.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(41, 33, 20, 0.10) 1px, transparent 1px); } html[data-theme="light"] .evf__frame::after { mix-blend-mode: multiply; opacity: 0.07; } /* Redaction bar stays solid ink on cream — classic. */ /* ---- Reset / base ------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--read); font-weight: 300; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: var(--accent); color: var(--ink-strong); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ---- Reusable typographic atoms ---------------------------------------- */ .kicker { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); } .mono { font-family: var(--mono); text-transform: uppercase; } .serif { font-family: var(--serif); font-weight: 400; } .wrap { padding-left: var(--pad); padding-right: var(--pad); } /* ---- Status strip ------------------------------------------------------- */ .status-strip { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px var(--pad); border-bottom: 1px solid var(--hairline-soft); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .status-strip__right { display: flex; align-items: center; gap: 16px; } .status-strip__dotgroup { display: inline-flex; align-items: center; gap: 8px; } .dot { width: 6px; height: 6px; background: var(--accent); display: inline-block; animation: blink 1.6s steps(1) infinite; } /* Dark / light theme toggle (typographic, no icons) */ .theme-toggle { display: inline-flex; align-items: center; gap: 7px; } .theme-toggle__btn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); background: none; border: none; padding: 0; cursor: pointer; transition: color 160ms ease; } .theme-toggle__btn:hover { color: var(--ink-soft); } .theme-toggle__sep { color: var(--ghost); } html:not([data-theme="light"]) .theme-toggle__btn[data-set-theme="dark"], html[data-theme="light"] .theme-toggle__btn[data-set-theme="light"] { color: var(--ink-strong); } @media (max-width: 640px) { .status-strip__est { display: none; } } /* ---- Masthead nav ------------------------------------------------------- */ .masthead { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px var(--pad); border-bottom: 1px solid var(--hairline); } .wordmark { display: flex; flex-direction: column; line-height: 1; } .wordmark__name { font-family: var(--serif); font-size: 26px; letter-spacing: 0.02em; color: var(--ink-strong); } .wordmark__kicker { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.42em; text-transform: uppercase; color: #7d7970; margin-top: 5px; padding-left: 2px; } .nav { display: flex; align-items: center; gap: 30px; } .nav__toggle { display: none; } .nav a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); transition: color 160ms ease; } .nav a:hover { color: #fff; } .nav a.is-active { color: #fff; border-bottom: 1px solid var(--accent); padding-bottom: 3px; } .btn-outline { border: 1px solid var(--accent); color: var(--ink); padding: 9px 16px; letter-spacing: 0.18em; transition: background 160ms ease, color 160ms ease; } .btn-outline:hover { background: var(--accent); color: var(--ink-strong); } /* ---- Buttons ------------------------------------------------------------ */ .btn-primary { display: inline-block; background: var(--accent); color: #f6f0ea; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 15px 28px; border: none; cursor: pointer; transition: background 160ms ease; } .btn-primary:hover { background: var(--accent-hover); } /* ---- Ad slots ----------------------------------------------------------- */ .ad { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--hairline-strong); background: repeating-linear-gradient(45deg, #121216, #121216 9px, #0f0f12 9px, #0f0f12 18px); } .ad__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint); } .ad__size { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; color: var(--ghost); } .ad--leaderboard { max-width: 728px; height: 90px; margin: 26px auto; } .ad--infeed { min-height: 230px; } .ad--inarticle { width: 100%; max-width: 336px; height: 280px; margin: 40px auto; } .ad__unit { width: 100%; } /* ---- Image placeholders ------------------------------------------------- */ .imgph { position: relative; overflow: hidden; border: 1px solid var(--hairline); background: #0a0a0c; } .imgph::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #16161a, #16161a 11px, #101013 11px, #101013 22px); } .imgph__inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 0 16px; } .imgph__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #5c584f; } .imgph__hint { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ghost); } .imgph__tag { position: absolute; top: 14px; left: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--muted); border: 1px solid rgba(231, 228, 221, 0.2); padding: 4px 8px; } /* ---- Status tag / dot --------------------------------------------------- */ .tag-status { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid currentColor; padding: 3px 9px; } /* ===== HOME =============================================================== */ .hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; border-bottom: 1px solid var(--hairline); } .hero__text { padding: 56px var(--pad) 56px 0; } .hero__media { padding: 56px 0 56px var(--pad); border-left: 1px solid var(--hairline); } .hero__tags { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-bottom: 22px; } .hero__tags .tag-status { color: var(--accent); } .hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5.2vw, 68px); line-height: 1.02; letter-spacing: -0.01em; color: var(--ink-strong); margin: 0 0 22px; } .dek { font-family: var(--read); font-weight: 300; font-size: 20px; line-height: 1.55; color: var(--dim-2); margin: 0 0 26px; } .meta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-bottom: 28px; } .sep { color: var(--ghost); } .read-link { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-strong); border-bottom: 1px solid var(--accent); padding-bottom: 4px; display: inline-flex; gap: 8px; transition: gap 160ms ease; } .read-link:hover { gap: 14px; } /* Section heading row */ .section { padding: 56px var(--pad); } .section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 18px; margin-bottom: 0; border-bottom: 1px solid var(--hairline); } .section__head .kicker { color: var(--ink-soft); letter-spacing: 0.28em; font-weight: 700; } .section__more { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); } .section__more:hover { color: #fff; } /* Card grid */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 28px 24px 30px; border-right: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft); min-height: 230px; transition: background 160ms ease; } .card:hover { background: var(--surface-hover); } /* Faint hero photo revealed behind the title on hover (when set inline). */ .card::after, .case-row::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--card-img, none) center / cover no-repeat; opacity: 0; filter: grayscale(1) contrast(1.05) brightness(0.8); transition: opacity 400ms ease; } .card:hover::after { opacity: 0.16; } .card__top { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .card__title { font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1.12; color: #f0ede6; margin: 0 0 12px; } .card__dek { font-family: var(--read); font-weight: 300; font-size: 14.5px; line-height: 1.5; color: var(--dim); margin: 0; } .card__foot { margin-top: auto; padding-top: 18px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } /* ---- Subscribe band ----------------------------------------------------- */ .subscribe { padding: 8px var(--pad) 56px; } .subscribe__panel { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; border: 1px solid var(--hairline-strong); background: var(--panel); padding: 44px 40px; } .subscribe__panel--accent { border-color: var(--accent); } .subscribe h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.12; color: var(--ink-strong); margin: 12px 0 14px; } .subscribe p { font-family: var(--read); font-weight: 300; font-size: 16px; line-height: 1.55; color: var(--dim-2); margin: 0; } .subscribe .kicker { color: var(--accent); } .form-field { display: block; margin-bottom: 16px; } .form-label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .form-input { width: 100%; background: var(--bg); border: 1px solid var(--hairline-strong); color: var(--ink); font-family: var(--read); font-size: 17px; padding: 14px 16px; transition: border-color 160ms ease; } .form-input::placeholder { color: var(--muted); } .form-input:focus { outline: none; border-color: var(--accent); } .form-fine { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-top: 14px; } .subscribe form .btn-primary { width: 100%; margin-top: 4px; } .subscribe__success { display: flex; flex-direction: column; justify-content: center; gap: 10px; } .subscribe__success .check { font-family: var(--serif); font-size: 30px; color: var(--status-solved); } .subscribe__success .msg { font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-strong); } /* ===== CASES INDEX ======================================================= */ .page-head { padding: 56px var(--pad) 40px; max-width: 900px; } .page-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 82px); line-height: 0.98; letter-spacing: -0.01em; color: var(--ink-strong); margin: 14px 0 22px; } .page-head__intro { font-family: var(--read); font-weight: 300; font-size: 20px; line-height: 1.55; color: var(--dim-2); margin: 0 0 30px; max-width: 60ch; } .filters { display: flex; gap: 10px; flex-wrap: wrap; } .chip { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); background: transparent; border: 1px solid var(--hairline-strong); padding: 9px 16px; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .chip:hover { border-color: var(--ink-soft); } .chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--ink-strong); } .case-list { border-top: 1px solid var(--hairline); } .case-row { display: grid; grid-template-columns: 120px 1fr 200px; gap: 24px; align-items: center; padding: 30px var(--pad); border-bottom: 1px solid var(--hairline); transition: background 160ms ease; } .case-row { position: relative; isolation: isolate; overflow: hidden; } .case-row:hover { background: var(--surface-hover); } .case-row:hover::after { opacity: 0.12; } .case-row__no { font-family: var(--serif); font-weight: 400; font-size: 34px; color: var(--ghost); } .case-row__status { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; } .case-row__title { font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1.12; color: #f0ede6; margin: 0 0 8px; } .case-row__dek { font-family: var(--read); font-weight: 300; font-size: 15px; line-height: 1.5; color: var(--dim); margin: 0; max-width: 62ch; } .case-row__meta { text-align: right; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); line-height: 1.8; } /* ===== ARTICLE =========================================================== */ .breadcrumb { padding: 18px var(--pad) 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .breadcrumb a { color: var(--dim); } .breadcrumb a:hover { color: #fff; } .breadcrumb .file-no { color: var(--accent); } .article-head { max-width: 760px; margin: 0 auto; padding: 40px var(--pad) 0; } .article-head__tags { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-bottom: 24px; } .article-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 68px); line-height: 1.02; letter-spacing: -0.01em; color: var(--ink-strong); margin: 0 0 24px; } .standfirst { font-family: var(--read); font-weight: 300; font-style: italic; font-size: 22px; line-height: 1.5; color: #b8b4aa; margin: 0 0 32px; } .byline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); } .byline__author { color: var(--ink-soft); } .byline__actions { margin-left: auto; display: flex; gap: 14px; } .byline__actions a:hover { color: #fff; } .article-hero { max-width: 980px; margin: 34px auto 0; padding: 0 var(--pad); } .article-hero .imgph { aspect-ratio: 16 / 9; } .article-hero__caption { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--faint); margin-top: 10px; } /* Body */ .article-body { max-width: 680px; margin: 0 auto; padding: 48px var(--pad) 0; } .article-body p { font-family: var(--read); font-weight: 300; font-size: 20px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 26px; } /* Drop cap: automatic on the first paragraph of every story (only when the story opens with a paragraph), plus a manual .dropcap class the editor can toggle on any paragraph. .no-dropcap opts the first paragraph out. */ .article-body > p:first-child:not(.no-dropcap)::first-letter, .article-body p.dropcap::first-letter { float: left; font-family: var(--serif); font-size: 78px; line-height: 0.78; padding: 6px 14px 0 0; color: var(--ink-strong); } .article-body h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.12; color: var(--ink-strong); margin: 40px 0 18px; } .pull-quote { margin: 38px 0; padding: 28px 0 28px 30px; border-left: 2px solid var(--accent); } .pull-quote p { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.25; color: #f0ede6; margin: 0; } .pull-quote cite { display: block; margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; color: var(--dim); } .evidence-log { background: var(--panel); border: 1px solid var(--hairline-strong); padding: 26px 28px; margin: 34px 0; } .evidence-log__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .evidence-log__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--dim-2); } .evidence-log__item { display: flex; gap: 10px; } .evidence-log__item span { color: var(--faint); } /* Inline subscribe CTA inside an article */ .inline-cta { max-width: 680px; margin: 10px auto 0; padding: 0 var(--pad); } .inline-cta__box { border: 1px solid var(--accent); background: var(--panel); padding: 34px 32px; text-align: center; } .inline-cta .kicker { color: var(--accent); } .inline-cta h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.15; color: var(--ink-strong); margin: 14px 0 12px; } .inline-cta p { font-family: var(--read); font-weight: 300; font-size: 17px; line-height: 1.5; color: var(--dim-2); margin: 0 0 22px; } /* Related files */ .related { max-width: 980px; margin: 56px auto 0; padding: 0 var(--pad); } .related h2 { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); } .related__grid { display: grid; grid-template-columns: repeat(3, 1fr); } /* ===== ABOUT ============================================================= */ .about-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; border-bottom: 1px solid var(--hairline); } .about-hero__text { padding: 56px var(--pad) 56px 0; } .about-hero__media { padding: 56px 0 56px var(--pad); border-left: 1px solid var(--hairline); display: flex; } .about-hero__media .imgph { width: 100%; aspect-ratio: 4 / 5; } .about-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.4vw, 70px); line-height: 1.02; letter-spacing: -0.01em; color: var(--ink-strong); margin: 16px 0 22px; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--hairline); } .stat { padding: 40px var(--pad); border-right: 1px solid var(--hairline-soft); } .stat:last-child { border-right: none; } .stat__num { font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: 1; color: var(--ink-strong); margin-bottom: 12px; } .stat__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); } .story { max-width: 680px; margin: 0 auto; padding: 56px var(--pad); } .story h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.12; color: var(--ink-strong); margin: 0 0 22px; } .story p { font-family: var(--read); font-weight: 300; font-size: 20px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 26px; } .principles { padding: 0 var(--pad) 56px; } .principles__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hairline-soft); border: 1px solid var(--hairline-soft); } .principle { background: var(--bg); padding: 34px 30px; } .principle__no { font-family: var(--serif); font-size: 30px; color: var(--ghost); margin-bottom: 14px; } .principle h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.14; color: #f0ede6; margin: 0 0 10px; } .principle p { font-family: var(--read); font-weight: 300; font-size: 15.5px; line-height: 1.55; color: var(--dim); margin: 0; } /* ===== LOGIN / 404 ======================================================= */ .center-narrow { max-width: 460px; margin: 0 auto; padding: 72px var(--pad); } .center-narrow h1 { font-family: var(--serif); font-weight: 400; font-size: 42px; line-height: 1.05; color: var(--ink-strong); margin: 14px 0 24px; } .panel-form { border: 1px solid var(--hairline-strong); background: var(--panel); padding: 34px 32px; } .panel-form .btn-primary { width: 100%; margin-top: 6px; } .alt-link { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin-top: 22px; } .alt-link a { color: var(--ink-soft); border-bottom: 1px solid var(--accent); padding-bottom: 2px; } .notfound { max-width: 680px; margin: 0 auto; padding: 96px var(--pad); text-align: center; } .notfound h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 8vw, 90px); color: var(--ink-strong); margin: 0 0 18px; } .notfound p { font-family: var(--read); font-weight: 300; font-size: 20px; color: var(--dim-2); margin: 0 0 30px; } /* ===== EVIDENCE LOCATOR (styled coordinate plate) ======================= */ .locator { max-width: 680px; margin: 48px auto 0; padding: 0 var(--pad); display: grid; grid-template-columns: 140px 1fr; gap: 0; } .locator__plate { position: relative; aspect-ratio: 1 / 1; background: #0a0a0c; border: 1px solid var(--hairline-strong); overflow: hidden; } .locator__grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(231,228,221,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(231,228,221,0.06) 1px, transparent 1px); background-size: 18px 18px; } .locator__mark { position: absolute; inset: 0; } .locator__ring { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 1px solid currentColor; border-radius: 50%; opacity: 0.7; } .locator__cross { position: absolute; top: 50%; left: 50%; background: currentColor; opacity: 0.8; } .locator__cross--v { width: 1px; height: 100%; transform: translateX(-50%); top: 0; } .locator__cross--h { height: 1px; width: 100%; transform: translateY(-50%); left: 0; } .locator__dot { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: currentColor; border-radius: 50%; } .locator__info { border: 1px solid var(--hairline-strong); border-left: none; padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; gap: 6px; background: var(--panel); } .locator__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); } .locator__place { font-family: var(--serif); font-size: 26px; line-height: 1.1; color: var(--ink-strong); } .locator__coords { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--dim-2); } .locator__status { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } @media (max-width: 560px) { .locator { grid-template-columns: 1fr; } .locator__info { border-left: 1px solid var(--hairline-strong); border-top: none; } } /* ===== CASE TIMELINE ===================================================== */ .timeline { border-left: 1px solid var(--hairline-strong); margin: 36px 0; } .timeline__row { position: relative; display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 0 0 22px 28px; } .timeline__row::before { content: ""; position: absolute; left: -5px; top: 7px; width: 9px; height: 9px; background: var(--accent); } .timeline__row:last-child { padding-bottom: 0; } .timeline__time { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); padding-top: 3px; } .timeline__event { font-family: var(--read); font-weight: 300; font-size: 18px; line-height: 1.5; color: var(--ink-soft); } @media (max-width: 560px) { .timeline__row { grid-template-columns: 1fr; gap: 4px; } } /* ===== DISPATCH TAPE (native audio player) ============================== */ .dispatch-tape { width: 100%; background: var(--panel); border: 1px solid var(--hairline-strong); padding: 18px 22px; margin: 36px 0; } .dispatch-tape__head { margin-bottom: 14px; } .dispatch-tape__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); } .dispatch-tape__audio { width: 100%; display: block; } /* ===== REDACTED PHOTO (reveal on click) ================================= */ .cs-frame--redacted .cs-frame__inner { cursor: pointer; } .cs-frame--redacted .cs-frame__inner::after { content: attr(data-redact-label) "\A Tap to reveal"; white-space: pre; text-align: center; line-height: 2.2; position: absolute; inset: 0; z-index: 3; background: #0a0a0c; color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; transition: opacity 320ms ease; } .cs-frame--redacted.is-revealed .cs-frame__inner::after { opacity: 0; pointer-events: none; } /* ===== REDACTED TEXT (classified censor bar) ============================= */ .redacted { background: #000; color: transparent; padding: 0 0.18em; -webkit-box-decoration-break: clone; box-decoration-break: clone; user-select: none; } .redacted::selection { background: #000; color: transparent; } /* ===== PHOTO FILTERS (reusable, work on any ) ======================= */ /* The case-file "look": desaturated, controlled. Pick per photo. */ .ph-noir { filter: grayscale(1) contrast(1.06) brightness(0.95); } .ph-evidence { filter: grayscale(1) sepia(0.22) contrast(1.08) brightness(0.9); } .ph-cold { filter: grayscale(0.55) saturate(0.8) contrast(1.05) brightness(0.97); } .ph-stark { filter: grayscale(1) contrast(1.28) brightness(0.86); } .ph-oxblood { filter: url("#csb-duotone") brightness(0.96) contrast(1.05); } .ph-none { filter: none; } /* ===== EVIDENCE FRAME (premium photo treatment) ========================== */ .evf { position: relative; margin: 0; background: #0a0a0c; border: 1px solid var(--hairline-strong); padding: 16px; } .evf__mat { display: flex; flex-direction: column; gap: 12px; } .evf__tagrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .evf__tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; } .evf__tag .evf__plus { color: var(--accent); font-weight: 700; } .evf__stamp { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); } .evf__frame { position: relative; overflow: hidden; background: #0a0a0c; border: 1px solid var(--hairline); } .evf__frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .evf--wide .evf__frame { aspect-ratio: 16 / 9; } .evf--tall .evf__frame { aspect-ratio: 4 / 5; } /* Faint film-grain texture overlay (not a gradient/shadow) — premium, subtle. */ .evf__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Hatch placeholder when there's no photo yet */ .evf__frame--empty { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; text-align: center; padding: 0 16px; } .evf__frame--empty::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #16161a, #16161a 11px, #101013 11px, #101013 22px); } .evf__ph-label { position: relative; font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #5c584f; } .evf__ph-hint { position: relative; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ghost); } .evf__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .evf__caption { font-family: var(--read); font-style: italic; font-weight: 300; font-size: 14px; line-height: 1.4; color: var(--dim); } .evf__meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); white-space: nowrap; } /* Rubber-stamp status seal over the photo */ .evf__seal { position: absolute; bottom: 18px; right: 18px; z-index: 2; font-family: var(--mono); font-weight: 700; font-size: clamp(14px, 1.6vw, 20px); letter-spacing: 0.16em; text-transform: uppercase; border: 2px solid currentColor; padding: 7px 13px; outline: 1px solid currentColor; outline-offset: 3px; transform: rotate(-8deg); opacity: 0.92; animation: seal-stamp 650ms cubic-bezier(0.2, 0.9, 0.25, 1) both; } @keyframes seal-stamp { 0% { opacity: 0; transform: rotate(-8deg) scale(2.3); } 55% { opacity: 0.95; } 72% { transform: rotate(-8deg) scale(0.92); } 100% { opacity: 0.92; transform: rotate(-8deg) scale(1); } } @media (prefers-reduced-motion: reduce) { .evf__seal { animation: none; } } /* Oxblood corner ticks (top-left + bottom-right) */ .evf::before, .evf::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; } .evf::before { top: 6px; left: 6px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); } .evf::after { bottom: 6px; right: 6px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); } /* ===== UNIFORM IMAGE FRAMES (fixed dimensions, premium + tidy) =========== */ /* Bare/legacy inline images (rare) — simple full-width. Declared BEFORE .cs-frame so framed images (equal specificity) override via order. */ .article-body img, .page-body img { max-width: 100%; height: auto; display: block; margin: 36px auto; } /* Every inline image snaps to one of two fixed frames so the page stays uniform. The photo fills the frame (object-fit: cover); focal point + zoom are set inline via the editor's Adjust control. */ .cs-frame { margin: 36px auto; background: #0a0a0c; border: 1px solid var(--hairline-strong); padding: 10px; } .cs-frame__inner { position: relative; overflow: hidden; background: #0a0a0c; border: 1px solid var(--hairline); } .cs-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; margin: 0; } .cs-frame--landscape { width: 100%; } .cs-frame--landscape .cs-frame__inner { aspect-ratio: 3 / 2; } .cs-frame--portrait { width: min(100%, 440px); } .cs-frame--portrait .cs-frame__inner { aspect-ratio: 4 / 5; } .cs-frame__tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .cs-frame__tag .cs-frame__plus { font-weight: 700; } .cs-frame figcaption { font-family: var(--read); font-style: italic; font-size: 14.5px; line-height: 1.45; color: var(--dim-2); margin-top: 11px; text-align: left; } /* ===== LEGAL PAGES ======================================================= */ .legal { max-width: 760px; margin: 0 auto; padding: 48px var(--pad) 16px; } .legal h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 60px); line-height: 1.04; letter-spacing: -0.01em; color: var(--ink-strong); margin: 14px 0 8px; } .legal__meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 32px; } .legal h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--ink-strong); margin: 38px 0 14px; } .legal p { font-family: var(--read); font-weight: 300; font-size: 18px; line-height: 1.66; color: var(--ink-soft); margin: 0 0 18px; } .legal ul { margin: 0 0 18px; padding-left: 22px; } .legal li { font-family: var(--read); font-weight: 300; font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 8px; } .legal a { color: var(--ink-strong); border-bottom: 1px solid var(--accent); padding-bottom: 1px; } .legal a:hover { color: #fff; } .legal strong { color: var(--ink); font-weight: 600; } .legal__note { font-family: var(--mono); font-size: 11.5px; line-height: 1.7; letter-spacing: 0.02em; color: var(--faint); border-top: 1px solid var(--hairline); margin-top: 36px; padding-top: 22px; } .legal__note { text-transform: none; } /* ===== CONSENT BANNER ==================================================== */ .consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--panel); border-top: 1px solid var(--hairline-strong); } .consent[hidden] { display: none; } .consent__inner { max-width: 1100px; margin: 0 auto; padding: 18px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .consent__text { font-family: var(--read); font-weight: 300; font-size: 15px; line-height: 1.55; color: var(--dim-2); margin: 0; max-width: 70ch; } .consent__text a { color: var(--ink-soft); border-bottom: 1px solid var(--accent); padding-bottom: 1px; } .consent__text a:hover { color: #fff; } .consent__actions { display: flex; gap: 12px; flex-shrink: 0; } .consent__btn { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 11px 18px; border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink-soft); cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .consent__btn--ghost:hover { border-color: var(--ink-soft); color: #fff; } .consent__btn--accept { background: var(--accent); border-color: var(--accent); color: #f6f0ea; } .consent__btn--accept:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .footer__legal-links a { color: var(--faint); } .footer__legal-links a:hover { color: var(--ink-soft); } @media (max-width: 560px) { .consent__inner { flex-direction: column; align-items: stretch; } .consent__actions { justify-content: stretch; } .consent__btn { flex: 1; } } /* ===== FOOTER ============================================================ */ .footer { border-top: 1px solid var(--hairline); margin-top: 56px; padding: 46px var(--pad) 30px; } .footer__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-bottom: 30px; border-bottom: 1px solid var(--hairline-soft); } .footer__brand-name { font-family: var(--serif); font-size: 24px; color: var(--ink-strong); margin-bottom: 8px; } .footer__tagline { font-family: var(--read); font-weight: 300; font-size: 15px; line-height: 1.5; color: var(--dim); margin: 0; max-width: 40ch; } .footer__cols { display: flex; gap: 56px; flex-wrap: wrap; } .footer__col h4 { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; } .footer__col a { display: block; font-family: var(--read); font-size: 15px; color: var(--dim-2); margin-bottom: 9px; } .footer__col a:hover { color: #fff; } .footer__legal { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 22px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); } .footer__cta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); border: 1px solid rgba(231, 228, 221, 0.25); padding: 12px 20px; transition: border-color 160ms ease; } .footer__cta:hover { border-color: var(--accent); } /* ===== RESPONSIVE ======================================================== */ @media (max-width: 900px) { .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20; flex-direction: column; align-items: flex-start; gap: 0; background: var(--bg); border-bottom: 1px solid var(--hairline); padding: 8px var(--pad) 20px; } .masthead { position: relative; } .nav.is-open .nav__links { display: flex; } .nav__links a { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--hairline-soft); } .nav__links a.is-active { border-bottom: 1px solid var(--accent); } .nav__toggle { display: inline-flex; background: none; border: 1px solid var(--hairline-strong); color: var(--ink-soft); font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 9px 14px; cursor: pointer; } .hero, .about-hero { grid-template-columns: 1fr; } .hero__text, .about-hero__text { padding: 44px 0; } .hero__media, .about-hero__media { padding: 0 0 44px; border-left: none; } .card-grid, .related__grid { grid-template-columns: 1fr; } .subscribe__panel { grid-template-columns: 1fr; gap: 28px; } .case-row { grid-template-columns: 64px 1fr; } .case-row__meta { display: none; } .stats { grid-template-columns: repeat(2, 1fr); } .principles__grid { grid-template-columns: 1fr; } .evidence-log__grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .status-strip { font-size: 10px; } .stats { grid-template-columns: 1fr; } }