/* news-event / dossier (its own layout: variants/dossier.html)
   The story filed as a case. The first screen is an open manila folder on a green
   leather desk: the tab with the case name, the inside flap with the evidence photo
   (the hero art, paper-clipped, "Exhibit A", captioned from the brand bible) and a
   typed case card whose file number is a redaction bar (there is none on file), and on
   the right the memorandum: RE the kicker, the brief's newest date, the headline as
   the subject, the summary, the calls to action as stamps, an ON RECORD stamp. Below,
   every section is the next document out of the file, each at its own angle: the
   report, a printout of the post, the chronology as a ruled form, witness statements
   on index cards, established facts, evidence photos with exhibit letters, the
   interview transcript, and an evidence tag with the contract. */

:root {
  --ds-desk: #1d2a24;
  --ds-manila: #e4ca90;
  --ds-manila-2: #d9bb79;
  --ds-paper: #fbf8f0;
  --ds-ink: #22201b;
  --ds-ink-2: #55503f;
  --ds-red: #b3261e;
  --ds-blue: #26468a;
  --ds-rule: rgb(34 32 27 / 0.16);
  --ds-type: "Courier Prime", "Courier New", Courier, "Liberation Mono", monospace;
  --ds-serif: Georgia, "Iowan Old Style", "Bitstream Charter", "Liberation Serif", "Times New Roman", serif;

  --v-bg: var(--ds-desk);
  --v-fg: var(--ds-ink);
  --v-soft: var(--ds-ink-2);
  --v-faint: #8a8270;
  --v-line: var(--ds-rule);
  --v-line-strong: rgb(34 32 27 / 0.34);
  --v-surface: #f3eedf;
  --v-surface-2: #e9e1cb;
  --v-card-bg: var(--ds-paper);
  --v-accent: var(--wl-accent);
  --v-accent-text: var(--ds-red);
  --v-on-accent: var(--wl-on-accent);
  --v-secondary: var(--ds-blue);
  --v-seg-1: var(--ds-red);
  --v-seg-2: var(--ds-blue);
  --v-seg-3: var(--ds-ink);
  --v-seg-4: #a0957a;
  --v-seg-5: var(--wl-accent);
  --v-seg-6: #c9bc98;
  --v-font-body: var(--ds-serif);
  --v-font-display: var(--ds-type);
  --v-font-mono: var(--ds-type);
  --v-display-weight: 700;
  --v-display-tracking: 0;
  --v-display-case: uppercase;
  --v-display-lh: 1.15;
  --v-title-size: clamp(1.4rem, 2.3vw, 1.9rem);
  --v-body-size: clamp(1rem, 0.3vw + 0.95rem, 1.1rem);
  --v-radius: 2px;
  --v-radius-sm: 2px;
  --v-radius-lg: 4px;
  --v-border: 1px solid var(--ds-rule);
  --v-shadow: 0 1px 1px rgb(0 0 0 / 0.2), 0 18px 34px -16px rgb(0 0 0 / 0.7);
  --v-card-pad: 22px;
  --v-maxw: none;
  --v-pad-x: clamp(12px, 3vw, 40px);
  --v-sec-gap: 0px;
  --v-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --wl-label-lore: "Report";
  --wl-label-features: "Findings";
  --wl-label-supply: "Figures";
  --wl-label-flow: "Procedure";
  --wl-label-timeline: "Chronology";
  --wl-label-comparison: "Comparison";
  --wl-label-stats: "Figures";
  --wl-label-tweet: "Printout";
  --wl-label-gallery: "Evidence photos";
  --wl-label-facts: "Established facts";
  --wl-label-quotes: "Witness statements";
  --wl-label-faq: "Interview transcript";
  --wl-label-access: "Evidence tag";
}

html { background: var(--ds-desk); }
body {
  color: var(--ds-ink);
  background:
    radial-gradient(circle at 30% 40%, rgb(255 255 255 / 0.018) 0 1px, transparent 1.6px) 0 0 / 4px 4px,
    radial-gradient(ellipse 90% 70% at 50% 30%, rgb(255 255 255 / 0.05), transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.45)),
    var(--ds-desk);
}
::selection { background: var(--ds-manila); color: var(--ds-ink); }

/* ------------------------------------------------------------ top strip */
.ds-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  height: 52px; padding: 0 var(--v-pad-x);
  background: rgb(18 26 22 / 0.92);
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  color: #e8dcc0;
  font-family: var(--ds-type);
}
.ds-top__name { flex: none; color: inherit; text-decoration: none; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ds-top__label { padding: 2px 6px; margin-right: 6px; background: var(--ds-manila); color: var(--ds-ink); font-size: 0.72rem; }
.ds-top__nav { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ds-top__nav::-webkit-scrollbar { display: none; }
.ds-top__nav .wl-nav__link { flex: none; padding: 6px 10px; color: #b9ad90; text-decoration: none; white-space: nowrap; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ds-top__nav .wl-nav__link:hover, .ds-top__nav .wl-nav__link.is-active { color: #fff; background: rgb(255 255 255 / 0.06); }
.ds-top__cta { margin-left: auto; display: flex; flex: none; }
.ds-top__cta .wl-btn:not(.wl-btn--primary) { display: none; }
.ds-top__cta .wl-btn { padding: 7px 12px; border: 2px solid var(--ds-manila); border-radius: 2px; background: transparent; color: var(--ds-manila); font-family: var(--ds-type); font-size: 0.78rem; text-transform: uppercase; }
.ds-top__cta .wl-btn__ca { display: none; }

/* ------------------------------------------------------------ the open folder */
.ds-desk { padding: 26px var(--v-pad-x) 60px; }
.ds-folder {
  position: relative;
  max-width: 1200px; margin: 18px auto 0;
  min-height: calc(100vh - 52px - 70px);
  min-height: calc(100svh - 52px - 70px);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  background: linear-gradient(90deg, var(--ds-manila-2), var(--ds-manila) 6%, var(--ds-manila) 48%, #c9aa6a 50%, var(--ds-manila) 52%, var(--ds-manila) 94%, var(--ds-manila-2));
  border-radius: 4px 6px 6px 6px;
  box-shadow: 0 2px 0 #b99a5c, 0 30px 60px -20px rgb(0 0 0 / 0.8);
}
.ds-folder__tab {
  position: absolute; left: 36px; top: -30px; margin: 0;
  padding: 7px 26px 8px 18px;
  background: var(--ds-manila);
  border-radius: 8px 14px 0 0;
  font-family: var(--ds-type); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 -2px 6px -2px rgb(0 0 0 / 0.3);
}
.ds-folder__tab-k { color: var(--ds-red); margin-right: 6px; }
.ds-folder__tab-t { color: var(--ds-ink-2); margin-left: 6px; }

.ds-flap { display: grid; align-content: start; gap: 22px; padding: 44px 34px 34px 40px; }
.ds-evidence { position: relative; margin: 0; padding: 12px 12px 14px; background: #fcfbf7; box-shadow: var(--v-shadow); rotate: -2.2deg; }
.ds-clip { position: absolute; left: 38px; top: -18px; z-index: 2; width: 22px; height: 56px; border: 3px solid #9aa0a6; border-radius: 12px 12px 12px 12px; border-bottom-color: transparent; box-shadow: inset 0 0 0 3px transparent; }
.ds-clip::after { content: ""; position: absolute; left: 3px; top: 8px; width: 10px; height: 38px; border: 3px solid #b8bdc2; border-radius: 8px; border-top-color: transparent; }
.ds-evidence__photo { aspect-ratio: 4 / 3; overflow: hidden; background: #333; }
.ds-evidence__photo .wl-hero-img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.18) contrast(1.05); }
.ds-evidence__photo.wl-media--post { aspect-ratio: auto; background: none; }
.ds-evidence:has(.wl-media--none) { display: none; }
.ds-evidence__cap { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-family: var(--ds-type); font-size: 0.76rem; line-height: 1.4; color: var(--ds-ink-2); }
.ds-exhibit { padding: 1px 7px; border: 2px solid var(--ds-blue); color: var(--ds-blue); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; rotate: -3deg; }

.ds-card { margin: 0; padding: 16px 18px 12px; background: #fdfbf4; box-shadow: var(--v-shadow); rotate: 1.2deg; font-family: var(--ds-type); font-size: 0.86rem; }
.ds-card div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--ds-rule); }
.ds-card div:last-child { border-bottom: 0; }
.ds-card dt { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.ds-card dd { margin: 0; overflow-wrap: anywhere; }
.ds-redact { display: inline-block; width: 9em; height: 1em; vertical-align: -0.12em; background: #16140f; }

/* the memo */
.ds-memo {
  position: relative;
  margin: 30px 34px 34px 16px; padding: 38px 40px 34px;
  background:
    linear-gradient(transparent 0 0),
    var(--ds-paper);
  box-shadow: var(--v-shadow);
  rotate: 0.6deg;
}
.ds-stamp {
  position: absolute; right: 30px; top: 26px; margin: 0;
  padding: 6px 14px;
  border: 4px double var(--ds-red); border-radius: 4px;
  color: var(--ds-red);
  font-family: var(--ds-type); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.2em; text-transform: uppercase;
  rotate: -9deg; opacity: 0.85;
  -webkit-mask-image: repeating-radial-gradient(circle at 30% 40%, #000 0 2px, rgb(0 0 0 / 0.55) 2.5px 3px);
  mask-image: repeating-radial-gradient(circle at 30% 40%, #000 0 2px, rgb(0 0 0 / 0.55) 2.5px 3px);
}
.ds-memo__head { margin: 0 0 16px; font-family: var(--ds-type); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.3em; text-transform: uppercase; }
.ds-memo__fields { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--ds-ink); font-family: var(--ds-type); font-size: 0.92rem; }
.ds-memo__fields div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 3px 0; }
.ds-memo__fields dt { font-weight: 700; text-transform: uppercase; }
.ds-memo__fields dt::after { content: ":"; }
.ds-memo__fields dd { margin: 0; text-transform: uppercase; }
.ds-memo__subject { margin: 0 0 14px; font-family: var(--ds-type); font-weight: 700; font-size: clamp(1.6rem, 2.7vw, 2.4rem); line-height: 1.12; text-transform: uppercase; text-wrap: balance; }
.ds-memo__summary { margin: 0 0 22px; font-family: var(--ds-serif); font-size: 1.1rem; line-height: 1.6; color: var(--ds-ink); max-width: 36rem; }
.ds-memo__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ds-memo__cta .wl-btn {
  padding: 8px 14px;
  border: 3px solid var(--ds-blue); border-radius: 3px;
  background: transparent; color: var(--ds-blue);
  font-family: var(--ds-type); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.ds-memo__cta .wl-btn:nth-child(2) { rotate: -1.5deg; }
.ds-memo__cta .wl-btn:nth-child(3) { rotate: 1.2deg; }
.ds-memo__cta .wl-btn:hover { background: color-mix(in srgb, var(--ds-blue) 10%, transparent); border-color: var(--ds-blue); transform: none; }
.ds-memo__cta .wl-btn--primary { border-color: var(--ds-red); color: var(--ds-red); rotate: -2deg; }
.ds-memo__cta .wl-btn--primary:hover { background: color-mix(in srgb, var(--ds-red) 10%, transparent); box-shadow: none; }
.ds-memo__cta .wl-btn__ca { font-size: 0.82em; opacity: 0.85; }
.ds-memo__sign { margin: 26px 0 0; text-align: right; font-family: var(--ds-type); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ds-ink-2); }
.ds-memo__sign::before { content: ""; display: inline-block; width: 120px; margin-right: 12px; vertical-align: middle; border-top: 1px solid var(--ds-ink-2); }

/* ------------------------------------------------------------ the documents that follow */
.ds-docs { max-width: 1040px; margin: 40px auto 0; display: grid; gap: 34px; }
.ds-docs .wl-sec { padding: 0; }
.ds-docs .wl-sec__inner {
  position: relative; max-width: none;
  padding: 36px clamp(22px, 4vw, 48px) 32px;
  background: var(--ds-paper);
  box-shadow: var(--v-shadow);
  rotate: var(--ds-tilt, 0deg);
  translate: var(--ds-shift, 0px) 0;
}
.ds-docs .wl-sec__inner::before { content: ""; position: absolute; left: 30px; top: -14px; width: 20px; height: 48px; border: 3px solid #9aa0a6; border-radius: 12px; border-bottom-color: transparent; }
.wl-sec__head { margin: 0 0 20px; padding-bottom: 12px; border-bottom: 2px solid var(--ds-ink); max-width: none; }
.wl-kicker { margin: 0 0 6px; gap: 10px; font-family: var(--ds-type); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; color: var(--ds-red); }
.wl-kicker .wl-ord { order: -1; opacity: 1; color: var(--ds-ink-2); }
.wl-kicker .wl-ord::before { content: "Doc "; }
.wl-kicker .wl-ord::after { content: " \2014"; }

.wl-lore { max-width: 44rem; }
.wl-lore__lead { font-size: 1.14rem; line-height: 1.65; font-weight: 400; }
.wl-lore__p { max-width: none; color: var(--ds-ink); line-height: 1.7; }

/* a printout of the post */
.ds-docs .wl-post { max-width: 600px; padding: 18px 20px; background: #fff; border: 1px solid #ccc; border-radius: 12px; box-shadow: none; filter: grayscale(1) contrast(1.05); }
.ds-docs .wl-post__text { font-family: var(--v-font-body); }

/* chronology: a ruled form */
.wl-milestones { gap: 0; max-width: none; border: 2px solid var(--ds-ink); }
.wl-milestones::before { content: none; }
.wl-ms { grid-template-columns: 170px minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--ds-ink); }
.wl-ms:last-child { border-bottom: 0; }
.wl-ms__dot { display: none; }
.wl-ms__body { display: contents; }
.wl-ms__when { grid-row: 1 / span 2; margin: 0; padding: 12px 14px; border-right: 1px solid var(--ds-ink); font-family: var(--ds-type); font-size: 0.86rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--ds-ink); background: rgb(228 202 144 / 0.25); }
.wl-ms__title { grid-column: 2; margin: 0; padding: 12px 16px 2px; font-family: var(--ds-type); font-size: 0.96rem; text-transform: uppercase; }
.wl-ms__text { grid-column: 2; margin: 0; padding: 0 16px 12px; color: var(--ds-ink); }

/* witness statements: index cards */
.wl-quotes { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.wl-quote { display: flex; flex-direction: column; padding: 12px 16px 16px; border: 0; border-radius: 0; background: repeating-linear-gradient(transparent 0 25px, #c8d9ec 25px 26px) 0 38px / 100% calc(100% - 38px) no-repeat, #fffef9; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 10px 18px -12px rgb(0 0 0 / 0.5); rotate: var(--ds-tilt, 0deg); }
.wl-quote::before { content: none; }
.wl-quote__who { order: -1; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 2px solid #d9534f66; font-family: var(--ds-type); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-ink); }
.wl-quote__who::before { content: "Statement of: "; color: var(--ds-red); }
.wl-quote__text { margin: 0; font-family: var(--ds-serif); font-style: italic; font-size: 1.06rem; line-height: 26px; }

/* established facts */
.wl-facts { gap: 0; max-width: none; counter-reset: ds-fact; }
.wl-fact { counter-increment: ds-fact; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 10px 0; border: 0; border-bottom: 1px dashed var(--v-line-strong); border-radius: 0; background: none; font-size: 1.04rem; }
.wl-fact__mark { width: 34px; height: auto; border-radius: 0; background: none; color: var(--ds-ink); font-family: var(--ds-type); font-weight: 700; }
.wl-fact__mark .wl-glyph { display: none; }
.wl-fact__mark::before { content: counter(ds-fact) "."; }
.wl-sec--facts .wl-sec__inner::after { content: "On record"; position: absolute; right: 26px; bottom: 22px; padding: 4px 10px; border: 3px solid var(--ds-blue); color: var(--ds-blue); font-family: var(--ds-type); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; rotate: -7deg; opacity: 0.75; }

/* evidence photos */
.wl-gallery { gap: 18px; }
.wl-shot { padding: 10px 10px 36px; border-radius: 0; background: #fcfbf7; overflow: visible; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 12px 20px -12px rgb(0 0 0 / 0.55); rotate: var(--ds-tilt, 0deg); }
.wl-shot img { filter: sepia(0.18) contrast(1.05); }
.wl-shot:hover img { transform: none; }
.wl-shot::before { content: attr(data-ds-exhibit); position: absolute; right: 12px; top: 18px; z-index: 1; padding: 1px 7px; background: #fcfbf7; border: 2px solid var(--ds-blue); color: var(--ds-blue); font-family: var(--ds-type); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.wl-shot__caption { left: 10px; right: 10px; bottom: 8px; padding: 0; background: none; color: var(--ds-ink); backdrop-filter: none; font-family: var(--ds-type); font-size: 0.74rem; }

/* the interview transcript */
.wl-faq { gap: 0; max-width: none; }
.wl-qa { border: 0; border-bottom: 1px solid var(--ds-rule); border-radius: 0; background: none; }
.wl-qa__q { padding: 12px 0 6px; font-family: var(--ds-type); font-size: 0.98rem; }
.wl-qa__q > span:first-child::before { content: "Q: "; color: var(--ds-red); }
.wl-qa__sign { display: none; }
.wl-qa__a { padding: 0 0 12px; color: var(--ds-ink); }
.wl-qa__a::before { content: "A: "; font-family: var(--ds-type); font-weight: 700; color: var(--ds-blue); }

/* the evidence tag */
.ds-docs .wl-sec--access .wl-sec__inner { max-width: 640px; background: linear-gradient(160deg, #e9d29f, #dcbf80); clip-path: polygon(34px 0, 100% 0, 100% 100%, 34px 100%, 0 calc(100% - 34px), 0 34px); }
.ds-docs .wl-sec--access .wl-sec__inner::before { left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 3px solid #8a7443; border-radius: 50%; background: var(--ds-desk); }
.wl-access { gap: 14px; max-width: none; }
.wl-access__net { font-family: var(--ds-type); color: var(--ds-ink-2); letter-spacing: 0.1em; }
.wl-ca { border: 2px solid var(--ds-ink); border-radius: 0; background: rgb(255 255 255 / 0.5); }
.wl-ca__label { font-family: var(--ds-type); color: var(--ds-red); font-weight: 700; }
.wl-ca__value { font-family: var(--ds-type); }
.wl-copy { border-radius: 2px; background: var(--ds-ink); color: var(--ds-paper); font-family: var(--ds-type); text-transform: uppercase; }
.wl-link { border-radius: 2px; border: 2px solid var(--ds-ink); background: transparent; font-family: var(--ds-type); font-size: 0.84rem; text-transform: uppercase; }
.wl-link:hover { background: rgb(0 0 0 / 0.06); border-color: var(--ds-ink); }

/* anything else a brief may bring */
.wl-features { gap: 10px; }
.wl-feature { background: #fff; border-radius: 0; }
.wl-feature:hover { transform: none; }
.wl-stats { border-radius: 0; border: 2px solid var(--ds-ink); }
.wl-node__card { background: #fff; border-radius: 0; }
.wl-table-wrap { border-radius: 0; border: 2px solid var(--ds-ink); }

.ds-foot { max-width: 1040px; margin: 0 auto; padding: 20px var(--v-pad-x) 48px; color: #d8ccae; font-family: var(--ds-type); }
.ds-foot .wl-foot__net, .ds-foot .wl-foot__nfa { color: #a99c7c; }
.ds-foot .wl-link { border-color: #a99c7c; color: #e8dcc0; }

/* ------------------------------------------------------------ motion */
.ds-stamp { animation: ds-stamp 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) 0.6s both; }
@keyframes ds-stamp { from { opacity: 0; scale: 1.8; } }
.ds-evidence { animation: ds-drop 0.7s var(--v-ease) 0.1s both; }
@keyframes ds-drop { from { opacity: 0; transform: translateY(-16px) rotate(-3deg); } }
[data-wl-reveal="on"] .ds-docs .wl-reveal { transform: translateY(18px); }

/* ------------------------------------------------------------ smaller screens */
@media (max-width: 960px) {
  .ds-folder { grid-template-columns: minmax(0, 1fr); background: var(--ds-manila); }
  .ds-flap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; padding: 40px 22px 10px; }
  .ds-memo { margin: 10px 22px 26px; }
  .ds-top__nav { display: none; }
}
@media (max-width: 640px) {
  .ds-desk { padding: 34px 8px 40px; }
  .ds-flap { grid-template-columns: minmax(0, 1fr); padding: 36px 14px 6px; }
  .ds-memo { margin: 8px 10px 20px; padding: 30px 18px 22px; rotate: none; }
  .ds-stamp { right: 12px; top: 12px; font-size: 0.9rem; }
  .ds-memo__head { font-size: 1.1rem; letter-spacing: 0.2em; }
  .ds-card div { grid-template-columns: 80px minmax(0, 1fr); }
  .ds-docs .wl-sec__inner { rotate: none; translate: none; }
  .wl-ms { grid-template-columns: minmax(0, 1fr); }
  .wl-ms__when { grid-row: auto; border-right: 0; border-bottom: 1px solid var(--ds-ink); }
  .wl-ms__title, .wl-ms__text { grid-column: 1; }
  .wl-sec--facts .wl-sec__inner::after { position: static; display: inline-block; margin-top: 16px; }
}