﻿/* ==========================================================================
   THAT'S NOT WHAT I SAID™
   Crisis PR + Reputation Management

   Visual System:
   PRESS CLIPPING × DAMAGE CONTROL DESK
   ========================================================================== */


/* ==========================================================================
   ROOT
   ========================================================================== */

:root {
    --newsprint: #eee8da;
    --newsprint-deep: #ddd4c3;
    --paper: #fbf8f0;
    --paper-cool: #eef0ec;

    --ink: #171715;
    --ink-soft: #363733;

    --red: #b93631;
    --red-bright: #d54a42;
    --red-dark: #842621;

    --blue-gray: #65727a;
    --blue-gray-light: #c9d0d2;
    --blue-ink: #29363d;

    --manila: #d4b47d;
    --manila-light: #e3c99b;
    --manila-dark: #b58d55;

    --highlighter: #e3d16a;

    --rule: #aaa397;
    --rule-light: #d2ccc0;

    --white: #fffdf8;

    --display: "DM Serif Display", Georgia, serif;
    --body: "Archivo", Arial, sans-serif;
    --mono: "IBM Plex Mono", Consolas, monospace;

    --content: 1040px;
    --wide: 1220px;

    --side: clamp(22px, 4.8vw, 76px);
    --space: clamp(84px, 8vw, 142px);

    --border: 1px solid var(--ink);
    --border-heavy: 2px solid var(--ink);
}


/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--newsprint);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden;
}

body.nav-open {
    overflow: hidden;
}

img {
    display: block;
    width: 100%;
    max-width: 100%;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd {
    margin-top: 0;
}

::selection {
    background: var(--highlighter);
    color: var(--ink);
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.skip-link {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 9999;
    padding: 10px 14px;
    background: var(--white);
    border: var(--border-heavy);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 700;
    transform: translateY(-170%);
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 4px;
}


/* ==========================================================================
   SHARED EDITORIAL TYPE
   ========================================================================== */

.press-label {
    margin-bottom: 16px;
    font-family: var(--mono);
    font-size: 0.68rem;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.press-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 20px;
    background: var(--paper);
    color: var(--ink);
    border: var(--border-heavy);
    text-decoration: none;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: 5px 5px 0 var(--ink);
    transition:
        transform 150ms ease,
        box-shadow 150ms ease;
}

.press-button:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--ink);
}

.press-button--urgent {
    background: var(--red);
    color: var(--white);
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.press-header {
    position: relative;
    z-index: 800;
    background: var(--paper);
    border-bottom: var(--border-heavy);
}

.press-header__utility {
    min-height: 30px;
    padding: 0 var(--side);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--ink);
    color: var(--white);
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.07em;
}

.press-header__main {
    min-height: 76px;
    padding: 0 var(--side);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
}

.press-brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
}

.press-brand__mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: var(--red);
    color: var(--white);
    border: var(--border-heavy);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    transform: rotate(-2deg);
}

.press-brand__name {
    font-family: var(--display);
    font-size: 1.2rem;
    line-height: 1;
}

.press-nav {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.8vw, 28px);
}

.press-nav a {
    text-decoration: none;
    font-size: 0.76rem;
    font-weight: 700;
}

.press-nav a:not(.press-nav__urgent) {
    border-bottom: 1px solid transparent;
}

.press-nav a:not(.press-nav__urgent):hover {
    border-color: var(--ink);
}

.press-nav__urgent {
    padding: 10px 13px;
    background: var(--red);
    color: var(--white);
    border: var(--border-heavy);
    font-family: var(--mono);
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: var(--paper);
    border: var(--border-heavy);
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 4px 0;
    background: var(--ink);
}


/* ==========================================================================
   FRONT PAGE / HERO
   ========================================================================== */

.front-page {
    padding: 0 var(--side) clamp(64px, 7vw, 105px);
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 31px,
            rgba(23, 23, 21, 0.035) 32px
        ),
        var(--newsprint);
    border-bottom: var(--border-heavy);
}

.front-page__edition {
    width: min(var(--wide), 100%);
    min-height: 42px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border-bottom: var(--border-heavy);
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 700;
}

.front-page__layout {
    width: min(var(--wide), 100%);
    margin: 0 auto;
    padding: clamp(54px, 6vw, 88px) 0;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(460px, 1.08fr);
    gap: clamp(50px, 6vw, 96px);
    align-items: center;
}

.front-page__lead .press-label {
    color: var(--red);
}

.front-page h1 {
    max-width: 730px;
    margin-bottom: 20px;
    font-family: var(--display);
    font-size: clamp(4.3rem, 6vw, 6.4rem);
    line-height: 0.78;
    letter-spacing: -0.06em;
    font-weight: 400;
}

.front-page__tagline {
    margin-bottom: 18px;
    font-family: var(--display);
    font-size: clamp(2rem, 3vw, 3.3rem);
    line-height: 1;
    color: var(--red);
}

.front-page__intro {
    max-width: 600px;
    margin-bottom: 32px;
    font-size: 1.03rem;
}

.front-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

.front-page__clipping {
    position: relative;
    margin: 0;
    background: var(--paper);
    border: var(--border-heavy);
    box-shadow: 18px 18px 0 rgba(23, 23, 21, 0.18);
    transform: rotate(1deg);
}

.front-page__clipping::before {
    content: "";
    position: absolute;
    z-index: 4;
    top: -18px;
    left: 50%;
    width: 110px;
    height: 35px;
    background: rgba(227, 209, 106, 0.72);
    transform: translateX(-50%) rotate(-2deg);
}

.front-page__clipping img {
    aspect-ratio: 16 / 11;
    object-fit: cover;
    filter: saturate(0.82) contrast(1.04);
    border-bottom: var(--border-heavy);
}

.front-page__clipping figcaption {
    position: relative;
    padding: 24px 28px 30px;
}

.front-page__clipping figcaption > span {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--red);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 700;
}

.front-page__clipping figcaption > strong {
    display: block;
    max-width: 700px;
    font-family: var(--display);
    font-size: clamp(2.2rem, 3.4vw, 4rem);
    line-height: 0.96;
    font-weight: 400;
}

.front-page__clipping figcaption > em {
    position: absolute;
    right: 24px;
    bottom: -19px;
    padding: 8px 13px;
    background: var(--white);
    color: var(--red);
    border: 3px solid var(--red);
    font-family: var(--mono);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
    transform: rotate(-5deg);
}

.front-page__chronology {
    width: min(var(--wide), 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: var(--border-heavy);
    border-left: var(--border-heavy);
}

.front-page__chronology article {
    min-height: 118px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: var(--border-heavy);
    border-bottom: var(--border-heavy);
    background: rgba(251, 248, 240, 0.46);
}

.front-page__chronology time {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--red);
}

.front-page__chronology strong {
    max-width: 190px;
    font-family: var(--display);
    font-size: clamp(1.2rem, 1.65vw, 1.75rem);
    line-height: 1;
    font-weight: 400;
}

.front-page__chronology-stop {
    background: var(--red) !important;
    color: var(--white);
}

.front-page__chronology-stop time {
    color: var(--white);
}


/* ==========================================================================
   TRANSCRIPT CASE
   ========================================================================== */

.transcript-case {
    padding: var(--space) var(--side);
    background: var(--paper-cool);
}

.transcript-case__header,
.transcript-case__desk,
.source-interview,
.transcript-case__note {
    width: min(var(--wide), 100%);
    margin-left: auto;
    margin-right: auto;
}

.transcript-case__header {
    margin-bottom: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.55fr);
    gap: 60px;
    align-items: end;
}

.transcript-case__header .press-label {
    grid-column: 1 / -1;
    color: var(--red);
    margin-bottom: -12px;
}

.transcript-case__header h2 {
    margin-bottom: 0;
    font-family: var(--display);
    font-size: clamp(3.5rem, 5vw, 5.5rem);
    line-height: 0.88;
    letter-spacing: -0.05em;
    font-weight: 400;
}

.transcript-case__header > p:last-child {
    margin-bottom: 8px;
}

.transcript-case__desk {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 4vw, 64px);
}

.transcript-sheet {
    position: relative;
    min-height: 620px;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 32px,
            rgba(101, 114, 122, 0.15) 33px
        ),
        var(--paper);
    border: var(--border-heavy);
    box-shadow: 12px 14px 0 rgba(23, 23, 21, 0.13);
}

.transcript-sheet--original {
    transform: rotate(-0.7deg);
}

.transcript-sheet--internet {
    transform: rotate(0.9deg);
}

.transcript-sheet > header {
    min-height: 48px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: var(--border-heavy);
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
}

.transcript-sheet__line {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 22px;
    padding: 42px 34px;
    border-bottom: var(--border);
}

.transcript-sheet__speaker {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: var(--border-heavy);
    font-family: var(--mono);
    font-weight: 700;
}

.transcript-sheet__line p {
    margin-bottom: 0;
    font-family: var(--display);
    font-size: clamp(1.9rem, 3vw, 3.5rem);
    line-height: 1.04;
}

.transcript-sheet > footer {
    padding: 20px 34px;
    color: var(--blue-gray);
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 700;
}

.transcript-case__cut {
    position: absolute;
    z-index: 10;
    top: 46%;
    left: 50%;
    min-width: 260px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    background: var(--red);
    color: var(--white);
    border: var(--border-heavy);
    box-shadow: 6px 6px 0 var(--ink);
    transform: translate(-50%, -50%) rotate(-3deg);
    font-family: var(--mono);
    font-size: 0.72rem;
}

.transcript-case__cut span {
    font-size: 1.4rem;
}

.transcript-sheet__stamp {
    position: absolute;
    right: 28px;
    bottom: 30px;
    padding: 10px 14px;
    border: 4px solid var(--red);
    color: var(--red);
    font-family: var(--mono);
    font-size: 1.1rem;
    font-weight: 700;
    transform: rotate(-8deg);
}

.source-interview {
    margin-top: 80px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    background: var(--ink);
    color: var(--white);
}

.source-interview img {
    min-height: 480px;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.75);
}

.source-interview figcaption {
    padding: clamp(38px, 4vw, 58px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.source-interview figcaption span {
    margin-bottom: 18px;
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--highlighter);
}

.source-interview figcaption strong {
    font-family: var(--display);
    font-size: clamp(2.2rem, 3vw, 3.8rem);
    line-height: 0.97;
    font-weight: 400;
}

.source-interview__context {
    max-width: 34ch;
    margin: 28px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 253, 248, 0.28);
    color: rgba(255, 253, 248, 0.76);
    font-size: clamp(0.9rem, 1vw, 1rem);
    line-height: 1.65;
}

.transcript-case__note {
    padding: 38px 0 4px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
    gap: clamp(48px, 7vw, 110px);
    align-items: center;
    border-top: var(--border-heavy);
    margin-top: 60px;
}

.transcript-case__note strong {
    max-width: 700px;
    font-family: var(--display);
    font-size: clamp(2rem, 2.8vw, 3.35rem);
    line-height: 0.98;
    font-weight: 400;
}

.transcript-case__note span {
    max-width: 250px;
    justify-self: end;
    font-family: var(--mono);
    font-size: 0.7rem;
    line-height: 1.55;
}


/* ==========================================================================
   PRESS CLIPPING WALL
   ========================================================================== */

.clipping-wall {
    padding: var(--space) var(--side);
    background: #c8c1b5;
    border-top: var(--border-heavy);
    border-bottom: var(--border-heavy);
}

.clipping-wall__header,
.clipping-wall__board {
    width: min(var(--wide), 100%);
    margin-left: auto;
    margin-right: auto;
}

.clipping-wall__header {
    margin-bottom: 60px;
}

.clipping-wall__header .press-label {
    color: var(--red-dark);
}

.clipping-wall__header h2 {
    max-width: 1000px;
    margin-bottom: 16px;
    font-family: var(--display);
    font-size: clamp(3.5rem, 4.9vw, 5.4rem);
    line-height: 0.88;
    letter-spacing: -0.05em;
    font-weight: 400;
}

.clipping-wall__header > p:last-child {
    font-family: var(--mono);
    font-size: 0.78rem;
}

.clipping-wall__board {
    position: relative;
    min-height: 920px;
}

.press-clipping {
    position: absolute;
    padding: 26px;
    background: var(--paper);
    border: var(--border-heavy);
    box-shadow: 8px 10px 0 rgba(23, 23, 21, 0.16);
}

.press-clipping::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    width: 76px;
    height: 24px;
    background: rgba(227, 209, 106, 0.65);
    transform: translateX(-50%) rotate(-2deg);
}

.press-clipping > span,
.press-clipping time {
    display: block;
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 700;
}

.press-clipping blockquote {
    margin-bottom: 18px;
    font-family: var(--display);
    font-size: clamp(2rem, 3vw, 3.5rem);
    line-height: 1;
}

.press-clipping--headline {
    top: 10px;
    left: 0;
    width: 44%;
    transform: rotate(-2deg);
}

.press-clipping--headline h3 {
    margin-bottom: 20px;
    font-family: var(--display);
    font-size: clamp(2.8rem, 4.8vw, 5.5rem);
    line-height: 0.9;
    font-weight: 400;
}

.press-clipping--headline > span {
    color: var(--red);
}

.press-clipping--comment {
    top: 40px;
    right: 4%;
    width: 34%;
    transform: rotate(2deg);
}

.press-clipping--thread {
    top: 315px;
    left: 15%;
    width: 38%;
    transform: rotate(1.5deg);
}

.press-clipping--music {
    top: 300px;
    right: 2%;
    width: 30%;
    background: var(--manila-light);
    transform: rotate(-2deg);
}

.press-clipping--music strong {
    display: block;
    margin-bottom: 18px;
    font-family: var(--display);
    font-size: clamp(2rem, 3vw, 3.4rem);
    line-height: 1;
    font-weight: 400;
}

.press-clipping--mother {
    top: 575px;
    left: 3%;
    width: 31%;
    transform: rotate(-3deg);
}

.press-clipping--mother strong {
    font-family: var(--mono);
    font-size: 0.72rem;
}

.press-clipping--sentiment {
    top: 590px;
    left: 39%;
    width: 22%;
    background: var(--blue-ink);
    color: var(--white);
    transform: rotate(2deg);
}

.press-clipping--sentiment strong,
.press-clipping--direction strong,
.press-clipping--advice strong {
    display: block;
    font-family: var(--display);
    font-size: clamp(3rem, 5vw, 5.7rem);
    line-height: 0.9;
    font-weight: 400;
}

.press-clipping--direction {
    top: 560px;
    right: 3%;
    width: 31%;
    background: var(--red);
    color: var(--white);
    transform: rotate(-1deg);
}

.press-clipping--advice {
    top: 770px;
    left: 27%;
    width: 48%;
    background: var(--white);
    transform: rotate(1deg);
}

.press-clipping--advice strong {
    color: var(--red);
}


/* ==========================================================================
   DAMAGE CONTROL DESK
   ========================================================================== */

.damage-desk {
    padding: var(--space) var(--side);
    background: var(--newsprint);
}

.damage-desk__header,
.damage-desk__photo,
.damage-desk__protocol {
    width: min(var(--wide), 100%);
    margin-left: auto;
    margin-right: auto;
}

.damage-desk__header {
    margin-bottom: 60px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.5fr);
    gap: 70px;
    align-items: end;
}

.damage-desk__header .press-label {
    grid-column: 1 / -1;
    color: var(--red);
    margin-bottom: -12px;
}

.damage-desk__header h2 {
    margin-bottom: 0;
    font-family: var(--display);
    font-size: clamp(3.5rem, 4.9vw, 5.4rem);
    line-height: 0.88;
    letter-spacing: -0.05em;
    font-weight: 400;
}

.damage-desk__header > p:last-child {
    margin-bottom: 8px;
}

.damage-desk__photo {
    margin-bottom: 70px;
    background: var(--paper);
    border: var(--border-heavy);
    box-shadow: 12px 12px 0 rgba(23, 23, 21, 0.17);
}

.damage-desk__photo img {
    height: clamp(520px, 58vw, 760px);
    object-fit: cover;
}

.damage-desk__photo figcaption {
    padding: 12px 16px;
    border-top: var(--border-heavy);
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 700;
}

.damage-desk__protocol {
    margin-top: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
    border-top: var(--border-heavy);
}

.damage-desk__protocol li {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 28px;
    padding: 30px 0;
    border-bottom: var(--border-heavy);
}

.damage-desk__time {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--red);
}

.damage-desk__protocol li > div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

.damage-desk__protocol strong {
    display: block;
    padding-top: 5px;
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}

.damage-desk__protocol p {
    max-width: 760px;
    margin-bottom: 0;
    font-family: var(--display);
    font-size: clamp(1.55rem, 2.15vw, 2.3rem);
    line-height: 1.05;
}


/* ==========================================================================
   CRISIS FILES / SEVERITY
   ========================================================================== */

.crisis-files {
    padding: var(--space) var(--side);
    overflow: hidden;
    background: var(--blue-gray-light);
    border-top: var(--border-heavy);
    border-bottom: var(--border-heavy);
}

.crisis-files__header,
.crisis-files__stack,
.crisis-files__footer {
    width: min(var(--wide), 100%);
    margin-left: auto;
    margin-right: auto;
}

.crisis-files__header {
    margin-bottom: 66px;
}

.crisis-files__header h2 {
    margin-bottom: 16px;
    font-family: var(--display);
    font-size: clamp(3.6rem, 5vw, 5.5rem);
    line-height: 0.88;
    letter-spacing: -0.05em;
    font-weight: 400;
}

.crisis-files__header > p:last-child {
    max-width: 560px;
}

.crisis-files__stack {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(210px, 1fr));
    gap: 0;
    overflow-x: auto;
    padding: 42px 0 30px;
}

.crisis-folder {
    position: relative;
    min-height: 330px;
    padding: 44px 22px 24px;
    background: var(--manila);
    border: var(--border-heavy);
    margin-right: -2px;
    display: flex;
    flex-direction: column;
}

.crisis-folder::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 18px;
    width: 118px;
    height: 31px;
    background: inherit;
    border: var(--border-heavy);
    border-bottom: 0;
}

.crisis-folder:nth-child(2) {
    margin-top: 10px;
    background: #d9bc87;
}

.crisis-folder:nth-child(3) {
    margin-top: 21px;
    background: #cfab72;
}

.crisis-folder:nth-child(4) {
    margin-top: 31px;
    background: #c69d67;
}

.crisis-folder > span {
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
}

.crisis-folder strong {
    margin: auto 0 14px;
    font-family: var(--display);
    font-size: clamp(2.2rem, 3vw, 3.5rem);
    line-height: 0.94;
    font-weight: 400;
}

.crisis-folder p {
    margin-bottom: 0;
    font-size: 0.86rem;
}

.crisis-folder--red {
    margin-top: 40px;
    background: var(--red);
    color: var(--white);
}

.crisis-folder--kevin {
    margin-top: 48px;
    background: var(--ink);
    color: var(--white);
}

.crisis-folder--kevin::after {
    content: "DO NOT GIVE HIM THE PASSWORD";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    padding: 8px;
    background: var(--white);
    color: var(--red);
    border: 2px solid var(--red);
    font-family: var(--mono);
    font-size: 0.56rem;
    font-weight: 700;
    transform: rotate(-3deg);
}

.crisis-folder--kevin p {
    padding-bottom: 58px;
}

.crisis-files__footer {
    padding-top: 32px;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: 30px;
    align-items: center;
    border-top: var(--border-heavy);
}

.crisis-files__footer span {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--red-dark);
}

.crisis-files__footer strong {
    font-family: var(--display);
    font-size: clamp(2rem, 3vw, 3.3rem);
    font-weight: 400;
}

.crisis-files__footer a {
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 700;
}


/* ==========================================================================
   CASE FILE INDEX / SERVICES
   ========================================================================== */

.case-index {
    padding: var(--space) var(--side);
    background: var(--paper);
}

.case-index__header,
.case-index__files {
    width: min(var(--wide), 100%);
    margin-left: auto;
    margin-right: auto;
}

.case-index__header {
    margin-bottom: 58px;
}

.case-index__header .press-label {
    color: var(--red);
}

.case-index__header h2 {
    margin-bottom: 15px;
    font-family: var(--display);
    font-size: clamp(3.6rem, 5vw, 5.5rem);
    line-height: 0.88;
    letter-spacing: -0.05em;
    font-weight: 400;
}

.case-index__header > p:last-child {
    font-family: var(--mono);
    font-size: 0.74rem;
}

.case-index__files {
    padding-top: 24px;
}

.case-file {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(300px, 0.82fr) minmax(360px, 1.18fr);
    gap: 34px;
    min-height: 180px;
    padding: 32px 34px;
    background: var(--manila-light);
    border: var(--border-heavy);
    margin-top: -2px;
}

.case-file:nth-child(even) {
    background: #dfc292;
}

.case-file__tab {
    position: absolute;
    top: -28px;
    left: 20px;
    width: 90px;
    height: 29px;
    padding: 6px 10px;
    background: inherit;
    border: var(--border-heavy);
    border-bottom: 0;
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 700;
}

.case-file + .case-file {
    margin-top: 38px;
}

.case-file__problem,
.case-file__service {
    align-self: center;
}

.case-file__problem small,
.case-file__service small {
    display: block;
    margin-bottom: 9px;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.case-file__problem h3 {
    margin-bottom: 0;
    font-family: var(--display);
    font-size: clamp(2rem, 3vw, 3.5rem);
    line-height: 0.95;
    font-weight: 400;
}

.case-file__service p {
    max-width: 620px;
    margin-bottom: 0;
}


/* ==========================================================================
   MARKED-UP STATEMENT
   ========================================================================== */

.markup-desk {
    padding: var(--space) var(--side);
    background: var(--blue-gray);
    border-top: var(--border-heavy);
    border-bottom: var(--border-heavy);
}

.markup-desk__header,
.markup-desk__papers {
    width: min(var(--wide), 100%);
    margin-left: auto;
    margin-right: auto;
}

.markup-desk__header {
    margin-bottom: 60px;
    color: var(--white);
}

.markup-desk__header .press-label {
    color: var(--highlighter);
}

.markup-desk__header h2 {
    max-width: 920px;
    margin-bottom: 0;
    font-family: var(--display);
    font-size: clamp(3.6rem, 5vw, 5.6rem);
    line-height: 0.88;
    letter-spacing: -0.05em;
    font-weight: 400;
}

.markup-desk__papers {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(340px, 0.78fr);
    gap: clamp(34px, 5vw, 70px);
    align-items: start;
}

.draft-statement {
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 35px,
            rgba(101, 114, 122, 0.14) 36px
        ),
        var(--paper);
    border: var(--border-heavy);
    box-shadow: 15px 16px 0 rgba(23, 23, 21, 0.28);
    transform: rotate(-0.8deg);
}

.draft-statement > header {
    min-height: 48px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: var(--border-heavy);
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 700;
}

.draft-statement > header span:first-child {
    color: var(--red);
}

.draft-statement__line {
    position: relative;
    padding: 40px clamp(28px, 4vw, 54px);
    border-bottom: var(--border);
}

.draft-statement__line:last-child {
    border-bottom: 0;
}

.draft-statement__line p {
    padding-right: 120px;
    margin-bottom: 0;
    font-family: var(--display);
    font-size: clamp(1.9rem, 3vw, 3.3rem);
    line-height: 1.04;
}

.draft-statement__line aside {
    position: absolute;
    top: 20px;
    right: 18px;
    max-width: 165px;
    padding: 9px 11px;
    color: var(--red);
    border: 3px solid var(--red);
    background: var(--paper);
    font-family: var(--mono);
    font-size: 0.62rem;
    transform: rotate(4deg);
}

.draft-statement__nuclear {
    max-width: 210px !important;
    background: var(--red) !important;
    color: var(--white) !important;
    transform: rotate(-4deg) !important;
}

.approved-statement {
    position: sticky;
    top: 30px;
    padding: 42px;
    background: var(--paper);
    color: var(--ink);
    border: var(--border-heavy);
    box-shadow: 12px 12px 0 rgba(23, 23, 21, 0.26);
    transform: rotate(1deg);
}

.approved-statement::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    width: 92px;
    height: 28px;
    background: rgba(227, 209, 106, 0.72);
    transform: translateX(-50%) rotate(2deg);
}

.approved-statement__stamp {
    display: inline-block;
    margin-bottom: 28px;
    padding: 8px 11px;
    color: var(--red);
    border: 4px solid var(--red);
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
    transform: rotate(-3deg);
}

.approved-statement__label {
    display: block;
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 700;
}

.approved-statement blockquote {
    margin-bottom: 28px;
    font-family: var(--display);
    font-size: clamp(2rem, 3.3vw, 3.8rem);
    line-height: 1;
}

.approved-statement p {
    margin-bottom: 0;
    font-family: var(--mono);
    font-size: 0.7rem;
}


/* ==========================================================================
   RECOVERY DOSSIER
   ========================================================================== */

.recovery-file {
    width: min(var(--wide), calc(100% - (var(--side) * 2)));
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(440px, 0.95fr);
    min-height: 800px;
    background: var(--newsprint);
}

.recovery-file__content {
    padding: var(--space) clamp(36px, 6vw, 94px);
}

.recovery-file__content .press-label {
    color: var(--red);
}

.recovery-file__content h2 {
    margin-bottom: 50px;
    font-family: var(--display);
    font-size: clamp(3.5rem, 4.8vw, 5.3rem);
    line-height: 0.87;
    letter-spacing: -0.05em;
    font-weight: 400;
}

.recovery-file__comparison {
    border-top: var(--border-heavy);
}

.recovery-file__comparison article {
    padding: 26px 0 30px;
    border-bottom: var(--border-heavy);
}

.recovery-file__comparison article > span {
    display: block;
    margin-bottom: 18px;
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
}

.recovery-file__comparison article:first-child > span {
    color: var(--red);
}

.recovery-file__comparison dl {
    margin-bottom: 0;
}

.recovery-file__comparison dl > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    padding: 8px 0;
    border-bottom: 1px solid var(--rule-light);
}

.recovery-file__comparison dl > div:last-child {
    border-bottom: 0;
}

.recovery-file__comparison dt {
    font-size: 0.85rem;
}

.recovery-file__comparison dd {
    margin: 0;
    text-align: right;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 700;
}

.recovery-file__photo {
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--ink);
    color: var(--white);
}

.recovery-file__photo img {
    flex: 1 1 auto;
    min-height: 690px;
    object-fit: cover;
    filter: saturate(0.78);
}

.recovery-file__photo figcaption {
    padding: 14px 18px;
    font-family: var(--mono);
    font-size: 0.64rem;
    color: var(--highlighter);
}


/* ==========================================================================
   PREVENTION BRIEF
   ========================================================================== */

.prevention-brief {
    padding: var(--space) var(--side);
    background: var(--paper);
    border-top: var(--border-heavy);
}

.prevention-brief__header,
.prevention-brief__layout {
    width: min(var(--wide), 100%);
    margin-left: auto;
    margin-right: auto;
}

.prevention-brief__header {
    margin-bottom: 62px;
}

.prevention-brief__header .press-label {
    color: var(--red);
}

.prevention-brief__header h2 {
    max-width: 1040px;
    margin-bottom: 17px;
    font-family: var(--display);
    font-size: clamp(3.5rem, 5vw, 5.5rem);
    line-height: 0.88;
    letter-spacing: -0.05em;
    font-weight: 400;
}

.prevention-brief__header > p:last-child {
    font-family: var(--mono);
    font-size: 0.76rem;
    color: var(--red);
}

.prevention-brief__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.75fr);
    gap: 54px;
    align-items: start;
}

.prevention-brief__layout figure {
    margin: 0;
    border: var(--border-heavy);
    background: var(--newsprint);
    transform: rotate(-0.5deg);
}

.prevention-brief__layout figure img {
    aspect-ratio: 5 / 4;
    object-fit: cover;
    filter: saturate(0.84);
}

.prevention-brief__layout figcaption {
    padding: 12px 14px;
    border-top: var(--border-heavy);
    font-family: var(--mono);
    font-size: 0.64rem;
}

.prevention-brief__notes {
    border-top: var(--border-heavy);
}

.prevention-brief__notes article {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 18px;
    padding: 24px 0;
    border-bottom: var(--border-heavy);
}

.prevention-brief__notes article > span {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--red);
}

.prevention-brief__notes h3 {
    margin-bottom: 7px;
    font-family: var(--display);
    font-size: clamp(1.8rem, 2.4vw, 2.8rem);
    line-height: 1;
    font-weight: 400;
}

.prevention-brief__notes p {
    margin-bottom: 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
}


/* ==========================================================================
   BRIEFING NOTES / FAQ
   ========================================================================== */

.briefing-notes {
    padding: var(--space) var(--side);
    background:
        linear-gradient(
            90deg,
            transparent 0,
            transparent 72px,
            rgba(185, 54, 49, 0.16) 73px,
            transparent 74px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 37px,
            rgba(101, 114, 122, 0.13) 38px
        ),
        var(--newsprint);
    border-top: var(--border-heavy);
}

.briefing-notes__header,
.briefing-notes__list {
    width: min(var(--content), 100%);
    margin-left: auto;
    margin-right: auto;
}

.briefing-notes__header {
    margin-bottom: 52px;
}

.briefing-notes__header .press-label {
    color: var(--red);
}

.briefing-notes__header h2 {
    max-width: 950px;
    margin-bottom: 0;
    font-family: var(--display);
    font-size: clamp(3.5rem, 4.7vw, 5.2rem);
    line-height: 0.89;
    letter-spacing: -0.05em;
    font-weight: 400;
}

.briefing-notes__list {
    border-top: var(--border-heavy);
}

.briefing-notes details {
    border-bottom: var(--border-heavy);
}

.briefing-notes summary {
    min-height: 94px;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 18px;
    list-style: none;
    cursor: pointer;
    font-family: var(--display);
    font-size: clamp(1.5rem, 2.3vw, 2.45rem);
    line-height: 1;
}

.briefing-notes summary::-webkit-details-marker {
    display: none;
}

.briefing-notes summary span {
    font-family: var(--mono);
    font-size: 0.66rem;
    color: var(--red);
}

.briefing-notes summary::after {
    content: "+";
    text-align: right;
    font-family: var(--mono);
    font-size: 1.4rem;
}

.briefing-notes details[open] summary::after {
    content: "−";
}

.briefing-notes details p {
    max-width: 790px;
    padding: 0 0 32px 88px;
    margin-bottom: 0;
}


/* ==========================================================================
   CONFIDENTIAL INTAKE
   ========================================================================== */

.confidential-intake {
    padding: var(--space) var(--side);
    display: grid;
    grid-template-columns: minmax(320px, 0.72fr) minmax(480px, 1.28fr);
    gap: clamp(46px, 7vw, 105px);
    background: var(--red);
    border-top: var(--border-heavy);
    border-bottom: var(--border-heavy);
}

.confidential-intake__cover {
    align-self: start;
    position: sticky;
    top: 28px;
    color: var(--white);
}

.confidential-intake__cover .press-label {
    color: var(--white);
}

.confidential-intake__cover h2 {
    margin-bottom: 24px;
    font-family: var(--display);
    font-size: clamp(3.7rem, 5vw, 5.7rem);
    line-height: 0.84;
    letter-spacing: -0.055em;
    font-weight: 400;
}

.confidential-intake__cover > p:not(.press-label) {
    max-width: 480px;
}

.confidential-intake__contact {
    margin-top: 48px;
    padding-top: 24px;
    display: grid;
    gap: 7px;
    border-top: 2px solid var(--white);
}

.confidential-intake__contact span {
    margin-top: 12px;
    font-family: var(--mono);
    font-size: 0.62rem;
}

.confidential-intake__contact a {
    width: fit-content;
    font-family: var(--display);
    font-size: clamp(1.7rem, 2.6vw, 2.7rem);
    line-height: 1;
}

.intake-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-self: start;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 38px,
            rgba(101, 114, 122, 0.1) 39px
        ),
        var(--paper);
    border: var(--border-heavy);
    box-shadow: 16px 16px 0 var(--ink);
    transform: rotate(0.4deg);
}

.intake-form__header {
    grid-column: 1 / -1;
    min-height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--ink);
    color: var(--white);
    font-family: var(--mono);
    font-size: 0.64rem;
}

.intake-form__field {
    min-width: 0;
    padding: 20px;
    border-right: var(--border);
    border-bottom: var(--border);
}

.intake-form__field:nth-of-type(even) {
    border-right: 0;
}

.intake-form__field--full {
    grid-column: 1 / -1;
    border-right: 0;
}

.intake-form label {
    display: block;
    margin-bottom: 9px;
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
}

.intake-form input,
.intake-form textarea,
.intake-form select {
    width: 100%;
    padding: 11px 0;
    background: transparent;
    color: var(--ink);
    border: 0;
    border-bottom: 2px solid var(--ink);
    border-radius: 0;
    outline: none;
}

.intake-form textarea {
    resize: vertical;
}

.intake-form input:focus,
.intake-form textarea:focus,
.intake-form select:focus {
    border-bottom-color: var(--red);
}

.intake-form__footer {
    grid-column: 1 / -1;
    padding: 24px;
}

.intake-form__footer button {
    min-height: 56px;
    padding: 0 22px;
    background: var(--red);
    color: var(--white);
    border: var(--border-heavy);
    box-shadow: 6px 6px 0 var(--ink);
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 700;
}

.intake-form__footer button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--ink);
}

#form-status {
    min-height: 24px;
    margin: 20px 0 0;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
}

#form-status[data-status="error"] {
    color: var(--red-dark);
}

#form-status[data-status="success"] {
    color: var(--blue-ink);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.press-footer {
    padding: 46px var(--side) 28px;
    background: var(--ink);
    color: var(--white);
}

.press-footer__masthead {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.press-footer__masthead > span {
    max-width: 720px;
    font-family: var(--display);
    font-size: clamp(2.7rem, 4.8vw, 5.4rem);
    line-height: 0.9;
}

.press-footer__masthead > strong {
    font-family: var(--display);
    font-size: clamp(1.7rem, 2.5vw, 2.8rem);
    color: #e7c7c3;
    font-weight: 400;
}

.press-footer__details {
    padding: 26px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 34px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    font-family: var(--mono);
    font-size: 0.68rem;
}

.press-footer__legal {
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: rgba(255, 255, 255, 0.46);
    font-family: var(--mono);
    font-size: 0.62rem;
}


/* ==========================================================================
   COMPACT DESKTOP
   ========================================================================== */

@media (max-width: 1180px) {

    .press-nav {
        gap: 12px;
    }

    .press-nav a {
        font-size: 0.68rem;
    }

    .front-page__layout {
        grid-template-columns: 0.9fr 1.1fr;
        gap: 42px;
    }

    .front-page h1 {
        font-size: clamp(4.1rem, 6vw, 6rem);
    }

    .clipping-wall__board {
        min-height: 980px;
    }

    .case-file {
        grid-template-columns: 55px 0.9fr 1.1fr;
    }

    .markup-desk__papers {
        grid-template-columns: 1fr;
    }

    .approved-statement {
        position: relative;
        top: auto;
        width: min(700px, 100%);
        margin-left: auto;
    }

}


/* ==========================================================================
   TABLET / MOBILE NAV
   ========================================================================== */

@media (max-width: 820px) {

    :root {
        --side: 18px;
        --space: 76px;
    }

    .press-header__utility {
        min-height: 28px;
        padding: 0 14px;
        overflow-x: hidden;
        white-space: nowrap;
    }

    .press-header__utility span:last-child {
        display: none;
    }

    .press-header__main {
        min-height: 66px;
        padding: 0 14px;
    }

    .press-brand__name {
        font-size: 1rem;
    }

    .menu-toggle {
        display: block;
        position: relative;
        z-index: 4;
    }

    .press-nav {
        position: fixed;
        inset: 94px 0 0;
        z-index: 3;
        padding: 28px 18px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--paper);
        border-top: var(--border-heavy);
        transform: translateX(100%);
        transition: transform 220ms ease;
    }

    body.nav-open .press-nav {
        transform: translateX(0);
    }

    .press-nav a {
        padding: 17px 0;
        border-bottom: var(--border) !important;
        font-family: var(--display);
        font-size: 1.8rem;
        font-weight: 400;
    }

    .press-nav__urgent {
        margin-top: 18px;
        padding: 16px !important;
        font-family: var(--mono) !important;
        font-size: 0.72rem !important;
    }

    .front-page__edition {
        overflow-x: hidden;
        justify-content: space-between;
        white-space: normal;
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .front-page__layout {
        grid-template-columns: 1fr;
    }

    .front-page__clipping {
        width: min(650px, 100%);
    }

    .front-page__chronology {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow-x: hidden;
    }

    .transcript-case__header,
    .damage-desk__header {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .transcript-case__header .press-label,
    .damage-desk__header .press-label {
        grid-column: 1;
        margin-bottom: 0;
    }

    .transcript-case__desk {
        grid-template-columns: 1fr;
        gap: 76px;
    }

    .transcript-case__cut {
        top: 50%;
    }

    .source-interview {
        grid-template-columns: 1fr;
    }

    .source-interview img {
        min-height: 400px;
    }

    .transcript-case__note {
        display: block;
    }

    .transcript-case__note strong {
        display: block;
        margin-bottom: 15px;
    }

    .clipping-wall__board {
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .press-clipping,
    .press-clipping--headline,
    .press-clipping--comment,
    .press-clipping--thread,
    .press-clipping--music,
    .press-clipping--mother,
    .press-clipping--sentiment,
    .press-clipping--direction,
    .press-clipping--advice {
        position: relative;
        inset: auto;
        width: auto;
        transform: none;
    }

    .press-clipping--headline,
    .press-clipping--advice {
        grid-column: 1 / -1;
    }

    .damage-desk__photo img {
        height: 520px;
    }

    .damage-desk__protocol li {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 18px;
    }

    .damage-desk__protocol li > div {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 20px;
    }

    .crisis-files__footer {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .case-file {
        grid-template-columns: 45px minmax(0, 1fr);
    }

    .case-file__service {
        grid-column: 2;
    }

    .draft-statement__line p {
        padding-right: 0;
    }

    .draft-statement__line aside {
        position: relative;
        top: auto;
        right: auto;
        width: fit-content;
        margin: 22px 0 0 auto;
    }

    .recovery-file {
        grid-template-columns: 1fr;
    }

    .recovery-file__photo img {
        min-height: 520px;
    }

    .prevention-brief__layout {
        grid-template-columns: 1fr;
    }

    .briefing-notes summary {
        grid-template-columns: 50px minmax(0, 1fr) 24px;
    }

    .briefing-notes details p {
        padding-left: 68px;
    }

    .confidential-intake {
        grid-template-columns: 1fr;
    }

    .confidential-intake__cover {
        position: relative;
        top: auto;
    }

    .press-footer__masthead {
        display: block;
    }

    .press-footer__masthead > span {
        display: block;
        margin-bottom: 18px;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 560px) {

    :root {
        --side: 14px;
        --space: 64px;
    }

    .press-brand__mark {
        width: 36px;
        height: 36px;
    }

    .press-brand__name {
        max-width: 195px;
        font-size: 0.88rem;
    }

    .front-page {
        padding-left: 14px;
        padding-right: 14px;
    }

    .front-page__layout {
        padding-top: 48px;
        gap: 48px;
    }

    .front-page h1 {
        font-size: clamp(3.7rem, 17vw, 5.7rem);
    }

    .front-page__tagline {
        font-size: 2rem;
    }

    .front-page__actions {
        display: grid;
    }

    .press-button {
        width: 100%;
    }

    .front-page__clipping figcaption {
        padding: 20px;
    }

    .front-page__clipping figcaption > strong {
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .front-page__clipping figcaption > em {
        position: relative;
        right: auto;
        bottom: auto;
        display: inline-block;
        margin-top: 20px;
    }

    .transcript-case__header h2,
    .clipping-wall__header h2,
    .damage-desk__header h2,
    .crisis-files__header h2,
    .case-index__header h2,
    .markup-desk__header h2,
    .recovery-file__content h2,
    .prevention-brief__header h2,
    .briefing-notes__header h2,
    .confidential-intake__cover h2 {
        font-size: clamp(3.3rem, 14vw, 5rem);
    }

    .transcript-sheet {
        min-height: auto;
    }

    .transcript-sheet__line {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 12px;
        padding: 28px 20px;
    }

    .transcript-sheet__speaker {
        width: 34px;
        height: 34px;
    }

    .transcript-sheet__line p {
        font-size: clamp(1.7rem, 8vw, 2.6rem);
    }

    .transcript-case__cut {
        min-width: 220px;
        font-size: 0.64rem;
    }

    .source-interview img {
        min-height: 330px;
    }

    .source-interview figcaption {
        padding: 24px;
    }

    .clipping-wall__board {
        grid-template-columns: 1fr;
    }

    .press-clipping--headline,
    .press-clipping--advice {
        grid-column: 1;
    }

    .press-clipping {
        padding: 22px;
    }

    .damage-desk__photo img {
        height: 400px;
    }

    .damage-desk__protocol li {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .damage-desk__protocol li > div {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .damage-desk__protocol p {
        font-size: clamp(1.45rem, 6.5vw, 2.15rem);
    }

    .crisis-files__stack {
        grid-template-columns: 1fr;
        overflow-x: hidden;
        scroll-snap-type: none;
    }

    .crisis-folder {
        min-height: 300px;
        scroll-snap-align: none;
        margin-top: 0 !important;
    }

    .case-file {
        grid-template-columns: 1fr;
        padding: 34px 20px 24px;
    }

    .case-file__problem,
    .case-file__service {
        grid-column: 1;
    }

    .draft-statement > header {
        display: block;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .draft-statement > header span {
        display: block;
    }

    .draft-statement > header span + span {
        margin-top: 4px;
    }

    .draft-statement__line {
        padding: 30px 20px;
    }

    .approved-statement {
        padding: 32px 22px;
    }

    .recovery-file__content {
        padding: 64px 14px;
    }

    .recovery-file__comparison dl > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .recovery-file__comparison dd {
        text-align: left;
    }

    .recovery-file__photo img {
        min-height: 400px;
    }

    .prevention-brief__notes article {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .briefing-notes {
        background:
            repeating-linear-gradient(
                0deg,
                transparent 0,
                transparent 37px,
                rgba(101, 114, 122, 0.13) 38px
            ),
            var(--newsprint);
    }

    .briefing-notes summary {
        grid-template-columns: 34px minmax(0, 1fr) 20px;
        min-height: 82px;
        gap: 10px;
        font-size: 1.45rem;
    }

    .briefing-notes details p {
        padding-left: 44px;
    }

    .confidential-intake {
        padding-left: 14px;
        padding-right: 14px;
    }

    .intake-form {
        grid-template-columns: 1fr;
        box-shadow: 9px 9px 0 var(--ink);
    }

    .intake-form__header {
        grid-column: 1;
        min-height: auto;
        padding-top: 11px;
        padding-bottom: 11px;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .intake-form__field,
    .intake-form__field:nth-of-type(even),
    .intake-form__field--full,
    .intake-form__footer {
        grid-column: 1;
        border-right: 0;
    }

    .press-footer__legal {
        flex-direction: column;
        gap: 7px;
    }

}


/* ==========================================================================
   ULTRAWIDE
   ========================================================================== */

@media (min-width: 1600px) {

    :root {
        --content: 1080px;
        --wide: 1260px;
        --side: max(76px, calc((100vw - 1680px) / 2));
    }

    .front-page h1 {
        font-size: 6.4rem;
    }

    .front-page__layout {
        gap: 100px;
    }

    .transcript-case__header h2,
    .clipping-wall__header h2,
    .damage-desk__header h2,
    .crisis-files__header h2,
    .case-index__header h2,
    .markup-desk__header h2,
    .prevention-brief__header h2,
    .briefing-notes__header h2 {
        font-size: 5.6rem;
    }

    .damage-desk__photo img {
        height: 760px;
    }

    .clipping-wall__board {
        min-height: 940px;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

}

/* TF TRANSCRIPT CUT COMPOSITION — FINAL OVERRIDE START */

/*
|--------------------------------------------------------------------------
| Give the edited transcript a deliberate physical "cut" zone.
|--------------------------------------------------------------------------
*/

.transcript-case__desk {
    align-items: stretch;
}

.transcript-sheet {
    min-height: 650px;
}

/*
|--------------------------------------------------------------------------
| Question block
|--------------------------------------------------------------------------
*/

.transcript-sheet__line:first-of-type {
    min-height: 230px;
    padding-top: 42px;
    padding-bottom: 42px;
}

/*
|--------------------------------------------------------------------------
| Answer block
|--------------------------------------------------------------------------
| Extra space above the answer creates a clear editorial splice zone
| instead of letting the red strip cover the copy.
*/

.transcript-sheet__line:nth-of-type(2) {
    min-height: 250px;
    padding-top: 82px;
    padding-bottom: 42px;
}

/*
|--------------------------------------------------------------------------
| Context removed strip
|--------------------------------------------------------------------------
*/

.transcript-case__cut {
    top: 48.2%;
    left: 50%;
    min-width: 220px;
    padding: 11px 18px;
    gap: 12px;

    transform:
        translate(-50%, -50%)
        rotate(-2deg);

    box-shadow: 5px 5px 0 var(--ink);
}

.transcript-case__cut span {
    font-size: 1.25rem;
}

.transcript-case__cut strong {
    white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Well, shit stamp
|--------------------------------------------------------------------------
*/

.transcript-sheet__stamp {
    right: 28px;
    bottom: 28px;
    padding: 9px 13px;
    font-size: 0.92rem;
}


/* Tablet */

@media (max-width: 820px) {

    .transcript-sheet {
        min-height: auto;
    }

    .transcript-sheet__line:first-of-type {
        min-height: 0;
        padding-top: 38px;
        padding-bottom: 38px;
    }

    .transcript-sheet__line:nth-of-type(2) {
        min-height: 0;
        padding-top: 72px;
        padding-bottom: 38px;
    }

    .transcript-case__cut {
        top: 50%;
        min-width: 205px;
    }

}


/* Small mobile */

@media (max-width: 560px) {

    .transcript-sheet__line:first-of-type {
        padding-top: 28px;
        padding-bottom: 32px;
    }

    .transcript-sheet__line:nth-of-type(2) {
        padding-top: 62px;
        padding-bottom: 32px;
    }

    .transcript-case__cut {
        min-width: 190px;
        padding: 10px 14px;
        font-size: 0.6rem;
    }

    .transcript-case__cut span {
        font-size: 1.05rem;
    }

}

/* TF TRANSCRIPT CUT COMPOSITION — FINAL OVERRIDE END */

/* TF CRISIS FOLDERS — FINAL DESKTOP COMPOSITION START */

/*
|--------------------------------------------------------------------------
| Desktop / compact desktop
|--------------------------------------------------------------------------
| All six folders must be visible at once.
| Horizontal scrolling is reserved for mobile.
*/

@media (min-width: 821px) {

    .crisis-files__stack {
        width: min(var(--wide), 100%);
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        overflow: visible;
        padding: 44px 0 30px;
    }

    .crisis-folder {
        width: auto;
        min-width: 0;
        min-height: 350px;
        margin-right: -2px;
        padding: 46px 16px 22px;
        overflow: visible;
    }

    .crisis-folder::before {
        left: 14px;
        width: min(108px, calc(100% - 28px));
    }

    .crisis-folder:nth-child(2) {
        margin-top: 8px;
    }

    .crisis-folder:nth-child(3) {
        margin-top: 16px;
    }

    .crisis-folder:nth-child(4) {
        margin-top: 24px;
    }

    .crisis-folder--red {
        margin-top: 32px;
    }

    .crisis-folder--kevin {
        margin-top: 40px;
    }

    .crisis-folder > span {
        font-size: 0.58rem;
    }

    .crisis-folder strong {
        width: 100%;
        margin-top: auto;
        margin-bottom: 12px;
        font-size: clamp(1.45rem, 2.2vw, 2.8rem);
        line-height: 0.92;
        overflow-wrap: anywhere;
    }

    .crisis-folder p {
        width: 100%;
        margin-bottom: 0;
        font-size: clamp(0.68rem, 0.9vw, 0.82rem);
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .crisis-folder--kevin strong {
        color: var(--white);
    }

    .crisis-folder--kevin::after {
        left: 10px;
        right: 10px;
        bottom: 12px;
        padding: 7px 5px;
        text-align: center;
        font-size: 0.48rem;
        line-height: 1.25;
    }

    .crisis-folder--kevin p {
        padding-bottom: 62px;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
| Preserve the deliberate horizontal folder swipe.
*/

@media (max-width: 820px) {

    .crisis-files__stack {
        overflow-x: hidden;
    }

}

/* TF CRISIS FOLDERS — FINAL DESKTOP COMPOSITION END */

/* TF CASE FILE INDEX — FINAL COMPOSITION START */

/*
|--------------------------------------------------------------------------
| Desktop
|--------------------------------------------------------------------------
| The numbered folder tab is absolutely positioned.
| It does NOT need its own grid column.
*/

.case-file {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(42px, 6vw, 92px);
    align-items: center;

    min-height: 210px;
    padding:
        46px
        clamp(34px, 5vw, 72px)
        38px;

    overflow: visible;
}

.case-file__problem,
.case-file__service {
    min-width: 0;
}

.case-file__problem small,
.case-file__service small {
    margin-bottom: 12px;
}

.case-file__problem h3 {
    max-width: 360px;
    margin: 0;

    font-size: clamp(2rem, 3vw, 3.35rem);
    line-height: 0.96;

    overflow-wrap: normal;
}

.case-file__service {
    padding-left: clamp(20px, 3vw, 46px);
    border-left: 1px solid rgba(23, 23, 21, 0.34);
}

.case-file__service p {
    max-width: 680px;
    margin: 0;

    font-size: clamp(0.95rem, 1.1vw, 1.06rem);
    line-height: 1.55;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 820px) {

    .case-file {
        grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1.2fr);
        gap: 28px;

        padding:
            42px
            24px
            30px;
    }

    .case-file__service {
        grid-column: auto;
        padding-left: 24px;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 560px) {

    .case-file {
        grid-template-columns: 1fr;
        gap: 26px;

        padding:
            44px
            20px
            28px;
    }

    .case-file__problem,
    .case-file__service {
        grid-column: 1;
    }

    .case-file__problem h3 {
        max-width: none;
    }

    .case-file__service {
        padding-top: 22px;
        padding-left: 0;
        border-top: var(--border);
        border-left: 0;
    }

}

/* TF CASE FILE INDEX — FINAL COMPOSITION END */

/* TF STATEMENT MARKUP — FINAL COMPOSITION START */

/*
|--------------------------------------------------------------------------
| Give editorial notes their own margin.
|--------------------------------------------------------------------------
*/

.draft-statement__line {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;

    min-height: 150px;

    padding:
        38px
        clamp(26px, 4vw, 52px);

    border-bottom: var(--border);
}

.draft-statement__line p {
    min-width: 0;
    max-width: none;
    padding-right: 0;
    margin: 0;

    font-family: var(--display);
    font-size: clamp(1.85rem, 2.75vw, 3.05rem);
    line-height: 1.04;
}

.draft-statement__line aside {
    position: relative;
    inset: auto;

    width: 100%;
    max-width: 190px;
    margin: 0;

    padding: 10px 12px;

    justify-self: end;

    background: var(--paper);
    color: var(--red);

    border: 3px solid var(--red);

    font-family: var(--mono);
    font-size: 0.62rem;
    line-height: 1.35;

    transform: rotate(3deg);
}

.draft-statement__line:nth-child(3) aside {
    transform: rotate(-2deg);
}

.draft-statement__nuclear {
    width: 100%;
    max-width: 210px !important;

    padding: 12px 14px !important;

    background: var(--red) !important;
    color: var(--white) !important;

    border-color: var(--red) !important;

    transform: rotate(-3deg) !important;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 820px) {

    .draft-statement__line {
        grid-template-columns: minmax(0, 1fr) 155px;
        gap: 24px;

        padding:
            32px
            24px;
    }

    .draft-statement__line p {
        font-size: clamp(1.65rem, 4vw, 2.4rem);
    }

    .draft-statement__line aside {
        max-width: 155px;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 560px) {

    .draft-statement__line {
        grid-template-columns: 1fr;
        gap: 22px;

        padding:
            30px
            20px;
    }

    .draft-statement__line p {
        font-size: clamp(1.65rem, 7.5vw, 2.35rem);
    }

    .draft-statement__line aside,
    .draft-statement__nuclear {
        width: fit-content;
        max-width: min(240px, 90%) !important;

        justify-self: end;
    }

}

/* TF STATEMENT MARKUP — FINAL COMPOSITION END */

/* TF BRIEFING NOTES MARGIN — FINAL OVERRIDE START */

/*
|--------------------------------------------------------------------------
| Keep the notebook red margin line inside the gutter.
| It must never pass through the section label or heading.
|--------------------------------------------------------------------------
*/

.briefing-notes {
    background:
        linear-gradient(
            90deg,
            transparent 0,
            transparent 24px,
            rgba(185, 54, 49, 0.16) 25px,
            transparent 26px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 37px,
            rgba(101, 114, 122, 0.13) 38px
        ),
        var(--newsprint);
}


/* Small mobile already does not need the red notebook margin. */

@media (max-width: 560px) {

    .briefing-notes {
        background:
            repeating-linear-gradient(
                0deg,
                transparent 0,
                transparent 37px,
                rgba(101, 114, 122, 0.13) 38px
            ),
            var(--newsprint);
    }

}

/* TF BRIEFING NOTES MARGIN — FINAL OVERRIDE END */

/* TF MOBILE OVERFLOW HARD STOP START */

/*
|--------------------------------------------------------------------------
| TABLET + MOBILE — REMOVE INTERNAL HORIZONTAL RAILS
|--------------------------------------------------------------------------
*/

@media (max-width: 820px) {

    .press-header__utility,
    .front-page__edition,
    .front-page__chronology,
    .crisis-files__stack {
        overflow-x: hidden !important;
        max-width: 100% !important;
        scrollbar-width: none !important;
    }

    .press-header__utility::-webkit-scrollbar,
    .front-page__edition::-webkit-scrollbar,
    .front-page__chronology::-webkit-scrollbar,
    .crisis-files__stack::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }


    /* --------------------------------------------------------
       Hero chronology
       -------------------------------------------------------- */

    .front-page__chronology {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .front-page__chronology article {
        min-width: 0 !important;
    }

    .front-page__chronology article:last-child {
        grid-column: 1 / -1;
    }


    /* --------------------------------------------------------
       Crisis folders — tablet
       -------------------------------------------------------- */

    .crisis-files__stack {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        scroll-snap-type: none !important;
        gap: 34px 0 !important;
    }

    .crisis-folder {
        min-width: 0 !important;
        width: auto !important;
        margin-top: 0 !important;
        scroll-snap-align: none !important;
    }
}


/*
|--------------------------------------------------------------------------
| PHONE — COMPACT VERTICAL FOLDER STACK
|--------------------------------------------------------------------------
*/

@media (max-width: 560px) {

    .crisis-files__header {
        margin-bottom: 42px !important;
    }

    .crisis-files__stack {
        grid-template-columns: 1fr !important;

        row-gap: 46px !important;

        padding-top: 32px !important;
        padding-bottom: 20px !important;
    }

    .crisis-folder {
        width: 100% !important;

        min-width: 0 !important;
        min-height: 190px !important;

        margin: 0 !important;

        padding:
            36px
            20px
            18px !important;

        overflow: visible !important;
    }


    /* Folder tab */

    .crisis-folder::before {
        top: -30px !important;
        left: 18px !important;

        width: 116px !important;
        height: 31px !important;
    }


    /* Level number */

    .crisis-folder > span {
        font-size: 0.6rem !important;
    }


    /* Main title */

    .crisis-folder strong {
        width: 100% !important;

        margin-top: auto !important;
        margin-bottom: 8px !important;

        font-size: clamp(1.9rem, 8vw, 2.35rem) !important;
        line-height: 0.96 !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }


    /* Description */

    .crisis-folder p {
        width: 100% !important;

        margin-bottom: 0 !important;

        font-size: 0.82rem !important;
        line-height: 1.35 !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
    }


    /* Kevin needs room for his warning label */

    .crisis-folder--kevin {
        min-height: 255px !important;
    }

    .crisis-folder--kevin p {
        padding-bottom: 58px !important;
    }

    .crisis-folder--kevin::after {
        left: 18px !important;
        right: 18px !important;
        bottom: 16px !important;
    }
}

/* TF MOBILE OVERFLOW HARD STOP END */


