/* ==========================================================================
   coram.css · the Coram identity layer for the independent speculative study
   work/coram/*.html and the embedded modules in work/case-coram.html

   SCOPE. Everything here lives under `.coram` and every class is prefixed
   `c-`. The Walker shell (Radikal, Carbon, Bone, Acid) never inherits from
   this sheet and this sheet never reaches past its container, so Coram
   creative keeps Coram's identity inside the portfolio frame.

   TYPE. The observed Coram typeface is TT Commons Classic. No font binary is
   distributed with this study. The stack names the licensed family first and
   falls through to the system sans; the build notes record the fallback.

   COLOUR. Green #039179 and charcoal #1F1F1D are observed website values
   used as provisional starting points, not an official palette. Two greens
   are declared on purpose: the recognition green for marks, rules, fields
   and large type, and a working green for small interactive text and button
   fills where white type must reach 4.5:1. Warning colours are reserved for
   real semantic states and are never the only carrier of meaning.

   v1.0 · 20 September 2026 · first draft
   ========================================================================== */

.coram{
  /* ---- colour ---- */
  --c-green:#039179;          /* recognition green, observed. Marks, rules, fields, large type */
  --c-green-ink:#037A66;      /* working green. Buttons and small text on white: 5.3:1 */
  --c-green-deep:#065F4F;     /* hover / pressed */
  --c-green-soft:#3E8C7F;     /* observed softer link green, used on charcoal only */
  --c-green-050:#F1F8F6;      /* pale green field */
  --c-green-100:#DDEFE9;      /* green tint for quiet emphasis */
  --c-charcoal:#1F1F1D;       /* observed charcoal */
  --c-ink:#1F1F1D;
  --c-ink-2:#4A4A46;          /* secondary text */
  --c-ink-3:#6B6B66;          /* tertiary, labels: 5.0:1 on white */
  --c-white:#FFFFFF;
  --c-paper:#F6F5F1;          /* pale neutral reading surface */
  --c-paper-2:#ECEAE4;
  --c-rule:rgba(31,31,29,.14);
  --c-rule-2:rgba(31,31,29,.30);
  --c-night-text:rgba(255,255,255,.82);
  --c-night-faint:rgba(255,255,255,.58);
  --c-night-rule:rgba(255,255,255,.18);
  /* semantic, real states only, always paired with an explicit label */
  --c-state-warn:#B54708;
  --c-state-alert:#B42318;
  --c-state-ok:#037A66;

  /* ---- type ---- */
  --c-face:'TT Commons Classic','TT Commons',system-ui,-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --c-display:clamp(40px,6.4vw,104px);
  --c-h2:clamp(30px,3.8vw,60px);
  --c-h3:clamp(20px,1.9vw,27px);
  --c-lede:clamp(17px,1.4vw,22px);
  --c-body:clamp(16px,1.15vw,18px);
  --c-small:14px;
  --c-label:12px;

  /* ---- space ---- */
  --c-s1:8px;--c-s2:16px;--c-s3:24px;--c-s4:32px;--c-s5:48px;--c-s6:64px;--c-s7:96px;--c-s8:128px;
  --c-edge:clamp(16px,4.4vw,80px);
  --c-section:clamp(56px,7vw,120px);
  --c-max:1440px;

  font-family:var(--c-face);
  color:var(--c-ink);
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
}
body.coram{margin:0;background:var(--c-white);overflow-x:clip}
.coram ::selection{background:var(--c-green);color:#fff}
.coram *,.coram *::before,.coram *::after{box-sizing:border-box}
:where(.coram) :where(h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote){margin:0}
.coram img{max-width:100%;height:auto;display:block}
.coram a:where(:not([class])){color:var(--c-green-ink);text-underline-offset:.16em;text-decoration-thickness:1px}
.coram a:where(:not([class])):hover{color:var(--c-green-deep)}
.coram :focus-visible{outline:2px solid var(--c-ink);outline-offset:3px}
.coram .c-night :focus-visible{outline-color:#fff}
.coram .c-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.coram [id]{scroll-margin-top:84px}

/* ---------------------------------------------------------------- layout --- */
.c-wrap{width:100%;max-width:var(--c-max);margin:0 auto;padding:0 var(--c-edge)}
.c-section{padding:var(--c-section) 0}
.c-section--tight{padding:calc(var(--c-section) * .6) 0}
.c-paper{background:var(--c-paper)}
.c-green-field{background:var(--c-green-050)}
.c-night{background:var(--c-charcoal);color:#fff}
.c-night .c-body,.c-night .c-lede{color:var(--c-night-text)}
.c-night .c-eyebrow{color:#5FCBB3}
.c-night a:where(:not([class])){color:#fff}
.c-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--c-s3) clamp(16px,2.4vw,40px)}
.c-col-5{grid-column:span 5}.c-col-6{grid-column:span 6}.c-col-7{grid-column:span 7}.c-col-4{grid-column:span 4}.c-col-8{grid-column:span 8}.c-col-12{grid-column:span 12}
@media (max-width:900px){.c-grid>[class*="c-col-"]{grid-column:span 12}}

/* ------------------------------------------------------------------ type --- */
.c-eyebrow{display:flex;align-items:center;gap:10px;font-size:var(--c-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--c-green-ink)}
.c-eyebrow::before{content:'';width:22px;height:2px;background:var(--c-green);flex:none}
.c-eyebrow--plain::before{display:none}
.c-display{font-size:var(--c-display);font-weight:500;line-height:.96;letter-spacing:-.025em;text-wrap:balance;max-width:12ch}
.c-h2{font-size:var(--c-h2);font-weight:500;line-height:1.02;letter-spacing:-.02em;text-wrap:balance;max-width:16ch}
.c-h3{font-size:var(--c-h3);font-weight:500;line-height:1.15;letter-spacing:-.012em;text-wrap:balance}
.c-lede{font-size:var(--c-lede);line-height:1.45;color:var(--c-ink-2);max-width:44ch}
.c-body{font-size:var(--c-body);line-height:1.55;color:var(--c-ink-2);max-width:60ch}
.c-body+.c-body{margin-top:.9em}
.c-small{font-size:var(--c-small);line-height:1.5;color:var(--c-ink-3)}
.c-label{font-size:var(--c-label);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-3)}
.c-stack{display:grid;gap:.05em;font-size:clamp(28px,3.4vw,56px);font-weight:500;line-height:1.02;letter-spacing:-.02em;color:var(--c-ink)}
.c-stack span{display:block}
.c-stack span:nth-child(2){color:var(--c-ink-2)}
.c-stack span:nth-child(3){color:var(--c-ink-3)}
.c-num{font-variant-numeric:tabular-nums}
.c-mt1{margin-top:var(--c-s1)}.c-mt2{margin-top:var(--c-s2)}.c-mt3{margin-top:var(--c-s3)}.c-mt4{margin-top:var(--c-s4)}.c-mt5{margin-top:var(--c-s5)}.c-mt6{margin-top:var(--c-s6)}

/* --------------------------------------------------------------- notice --- */
/* the independent-study strip that sits above every concept page */
.c-notice{background:var(--c-paper-2);color:var(--c-ink-2);font-size:12.5px;line-height:1.4;letter-spacing:.02em}
.c-notice .c-wrap{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;min-height:36px;padding-top:6px;padding-bottom:6px}
.c-notice b{font-weight:500;color:var(--c-ink)}
.c-notice a{color:inherit}

/* ------------------------------------------------------------- wordmark --- */
/* The official wordmark is placed as supplied and never redrawn. Clear space
   is the height of the aperture on every side; the container enforces it. */
.c-brand{display:inline-flex;align-items:center;padding:0;text-decoration:none;flex:none}
.c-brand img{height:var(--c-brand-h,26px);width:auto;display:block}
.c-brand--footer img{height:22px}
.c-brand--card img{height:18px}

/* ------------------------------------------------------------------ nav --- */
.c-nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--c-rule)}
.c-nav .c-wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--c-s3);min-height:64px}
.c-nav__links{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.c-nav__links a:not(.c-btn){font-size:15px;font-weight:500;color:var(--c-ink);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.c-nav__links a:not(.c-btn):hover{border-bottom-color:var(--c-green)}
.c-nav__links .c-btn{margin-left:8px}
.c-nav__toggle{display:none;width:44px;height:44px;border:0;background:transparent;color:var(--c-ink);cursor:pointer;padding:0;align-items:center;justify-content:center}
.c-nav__toggle svg{width:22px;height:22px}
@media (max-width:820px){
  .c-nav__toggle{display:inline-flex}
  .c-nav__links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--c-rule);padding:8px var(--c-edge) 16px}
  .c-nav__links.is-open{display:flex}
  .c-nav__links a:not(.c-btn){padding:14px 0;border-bottom:1px solid var(--c-rule);font-size:17px}
  .c-nav__links a:not(.c-btn):last-of-type{border-bottom:0}
  .c-nav__links .c-btn{margin:10px 0 0;justify-content:center}
}

/* ------------------------------------------------------------------ CTA --- */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;font-family:inherit;font-size:16px;font-weight:500;line-height:1;letter-spacing:.005em;text-decoration:none;border:1.5px solid transparent;border-radius:3px;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.c-btn--primary{background:var(--c-green-ink);color:#fff;border-color:var(--c-green-ink)}
.c-btn--primary:hover{background:var(--c-green-deep);border-color:var(--c-green-deep);color:#fff}
.c-btn--secondary{background:transparent;color:var(--c-ink);border-color:var(--c-ink)}
.c-btn--secondary:hover{background:var(--c-ink);color:#fff}
.c-btn--quiet{background:transparent;color:var(--c-ink);border-color:var(--c-rule-2);min-height:44px;padding:0 16px;font-size:15px}
.c-btn--quiet:hover{border-color:var(--c-ink)}
.c-btn[disabled],.c-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.c-night .c-btn--secondary{color:#fff;border-color:#fff}
.c-night .c-btn--secondary:hover{background:#fff;color:var(--c-ink)}
.c-btn .c-arr{transition:transform .2s ease}
.c-btn:hover .c-arr{transform:translateX(3px)}
.c-textlink{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:500;color:var(--c-green-ink);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.c-textlink:hover{color:var(--c-green-deep)}
.c-actions{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}

/* ------------------------------------------------------------------ tag --- */
.c-tag{display:inline-flex;align-items:center;gap:8px;min-height:26px;padding:0 10px;font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;border-radius:2px;white-space:nowrap}
.c-tag--drill{background:var(--c-charcoal);color:#fff}
.c-tag--drill::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--c-green)}
.c-tag--illustrative{background:var(--c-paper-2);color:var(--c-ink-2)}
.c-tag--outline{background:transparent;border:1px solid var(--c-rule-2);color:var(--c-ink-2)}
.c-tag--state{border:1px solid currentColor;background:transparent}
.c-tag--warn{color:var(--c-state-warn)}
.c-tag--alert{color:var(--c-state-alert)}
.c-tag--ok{color:var(--c-state-ok)}

/* ----------------------------------------------------------------- hero --- */
/* The responsive hero: one idea, large type, a photograph with a hard
   architectural edge. Desktop: type left, photograph bleeding to the right
   edge. Phone: type, then the photograph at full width. */
.c-hero{position:relative;background:var(--c-white);overflow:hidden}
.c-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--c-s4)}
.c-hero__text{padding:clamp(40px,6vw,96px) 0 clamp(24px,3vw,48px)}
.c-hero__text .c-display{margin-top:var(--c-s3)}
.c-hero__text .c-lede{margin-top:var(--c-s3)}
.c-hero__text .c-actions{margin-top:var(--c-s4)}
.c-hero__media{position:relative;min-width:0}
.c-hero__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.c-hero__cap{position:absolute;left:0;bottom:0;margin:0;padding:8px 12px;background:rgba(31,31,29,.78);color:#fff;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
@media (min-width:1000px){
  .c-hero .c-wrap{padding-right:0}
  .c-hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,6fr);gap:clamp(32px,4vw,72px);align-items:stretch}
  .c-hero__text{padding:clamp(56px,7vw,120px) 0;align-self:center}
  .c-hero__media img{aspect-ratio:auto;min-height:560px;height:100%}
}

/* --------------------------------------------------------------- ledger --- */
/* The product roles as a ledger, not a card grid: one idea per row, the
   distinctions readable across a line. */
.c-ledger{margin-top:var(--c-s5);border-top:2px solid var(--c-ink)}
.c-ledger__row{display:grid;grid-template-columns:56px minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,1fr);gap:var(--c-s2) clamp(16px,2.4vw,40px);padding:clamp(20px,2.4vw,32px) 0;border-bottom:1px solid var(--c-rule)}
.c-ledger__n{font-size:13px;font-weight:500;letter-spacing:.1em;color:var(--c-green-ink);padding-top:.35em}
.c-ledger__t{font-size:clamp(20px,1.9vw,27px);font-weight:500;line-height:1.15;letter-spacing:-.012em}
.c-ledger__t small{display:block;margin-top:6px;font-size:13px;font-weight:400;letter-spacing:.04em;color:var(--c-ink-3)}
.c-ledger__d{font-size:var(--c-body);line-height:1.5;color:var(--c-ink-2)}
.c-ledger__m{display:grid;gap:10px;align-content:start;font-size:13.5px;line-height:1.45;color:var(--c-ink-2)}
.c-ledger__m b{display:block;font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-3);margin-bottom:2px}
@media (max-width:900px){
  .c-ledger__row{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"n t" "n d" "n m"}
  .c-ledger__n{grid-area:n}.c-ledger__t{grid-area:t}.c-ledger__d{grid-area:d}.c-ledger__m{grid-area:m;grid-template-columns:1fr 1fr;gap:12px}
}
@media (max-width:520px){.c-ledger__m{grid-template-columns:1fr}}

/* ---------------------------------------------------------- footage frame --- */
/* A camera view is always a labelled frame: camera name and location in the
   bar, an illustrative time, a drill or illustrative tag where it applies,
   and corner marks. Concept overlays never pretend to be product UI. */
.c-frame{position:relative;background:var(--c-charcoal);color:#fff;border-radius:3px;overflow:hidden}
.c-frame__bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:8px 12px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-night-text);background:rgba(0,0,0,.35);border-bottom:1px solid var(--c-night-rule)}
.c-frame__bar b{font-weight:500;color:#fff}
.c-frame__bar .c-num{margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:.08em}
.c-frame__img{position:relative;aspect-ratio:16/9;background:#000}
.c-frame__img img{width:100%;height:100%;object-fit:cover;opacity:.96}
.c-frame__img::before,.c-frame__img::after{content:'';position:absolute;width:18px;height:18px;border:1.5px solid rgba(255,255,255,.75);pointer-events:none}
.c-frame__img::before{left:10px;top:10px;border-right:0;border-bottom:0}
.c-frame__img::after{right:10px;bottom:10px;border-left:0;border-top:0}
.c-frame__foot{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:8px 12px;font-size:12px;color:var(--c-night-faint);border-top:1px solid var(--c-night-rule)}
.c-frame__foot .c-tag{min-height:22px;font-size:10.5px}
.c-frame--still .c-frame__img::before,.c-frame--still .c-frame__img::after{display:none}
.c-frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--c-s2)}

/* ------------------------------------------------------------ event row --- */
/* One event per line: time, what, where, state, action. Tabular numerals
   keep the column steady. The state is a word, never a colour alone. */
.c-events{border-top:1px solid var(--c-rule-2)}
.c-event{display:grid;grid-template-columns:76px minmax(0,1.4fr) minmax(0,1fr) minmax(148px,auto) auto;gap:8px 16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--c-rule);font-size:14.5px;line-height:1.35}
.c-event__t{font-variant-numeric:tabular-nums;font-weight:500;color:var(--c-ink)}
.c-event__what{color:var(--c-ink)}
.c-event__what small{display:block;font-size:12.5px;color:var(--c-ink-3);margin-top:2px}
.c-event__where{color:var(--c-ink-2)}
.c-event__state{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-2)}
.c-event__state::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:1px}
.c-event__state--drill{color:var(--c-green-ink)}
.c-event__state--sent{color:var(--c-ink-3)}
.c-event__state--ack{color:var(--c-green-deep)}
.c-event__state--open{color:var(--c-state-warn)}
.c-event__act{justify-self:end}
.c-event__act a,.c-event__act button{font-family:inherit;font-size:13px;font-weight:500;color:var(--c-green-ink);background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:none;border-bottom:1px solid currentColor}
.c-night .c-events{border-top-color:var(--c-night-rule)}
.c-night .c-event{border-bottom-color:var(--c-night-rule)}
.c-night .c-event__t,.c-night .c-event__what{color:#fff}
.c-night .c-event__where,.c-night .c-event__state{color:var(--c-night-text)}
@media (max-width:760px){
  .c-event{grid-template-columns:64px minmax(0,1fr);grid-template-areas:"t what" "t where" "t state" "t act"}
  .c-event__t{grid-area:t;align-self:start}.c-event__what{grid-area:what}.c-event__where{grid-area:where;font-size:13.5px}.c-event__state{grid-area:state}.c-event__act{grid-area:act;justify-self:start}
}

/* ---------------------------------------------------- evidence reference --- */
/* A finding points at its evidence: a thumbnail, the camera, the time, the
   length, and where it sits in the record. */
.c-evidence{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border:1px solid var(--c-rule-2);border-radius:3px;background:#fff;color:var(--c-ink);text-decoration:none}
.c-evidence:hover{border-color:var(--c-ink)}
.c-evidence__thumb{aspect-ratio:16/9;overflow:hidden;background:var(--c-charcoal);border-radius:2px}
.c-evidence__thumb img{width:100%;height:100%;object-fit:cover}
.c-evidence__t,.c-evidence__m{display:block}
.c-evidence__t{font-size:15px;font-weight:500;line-height:1.3}
.c-evidence__m{margin-top:4px;font-size:12.5px;color:var(--c-ink-3);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.c-evidence__m b{font-weight:500;color:var(--c-ink-2)}
.c-evidences{display:grid;gap:10px}
@media (min-width:760px){.c-evidences{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------- proof module --- */
/* Customer evidence appears only with attribution and a source. The module
   holds a paraphrase or an approved quotation, the organisation, and the link. */
.c-proof{display:grid;gap:var(--c-s2);padding:clamp(22px,2.6vw,36px);border-left:3px solid var(--c-green);background:var(--c-green-050)}
.c-proof__q{font-size:clamp(19px,1.7vw,25px);line-height:1.3;letter-spacing:-.01em;color:var(--c-ink);max-width:40ch;text-wrap:pretty}
.c-proof__src{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:13.5px;color:var(--c-ink-2)}
.c-proof__src b{font-weight:500;color:var(--c-ink)}
.coram .c-proof__src a{color:var(--c-green-ink)}
.c-proof__note{font-size:12.5px;color:var(--c-ink-3)}

/* --------------------------------------------------------------- figure --- */
.c-fig{margin:0}
.c-fig img{width:100%;height:auto;background:var(--c-paper-2)}
.c-fig figcaption{margin-top:10px;font-size:13px;line-height:1.45;color:var(--c-ink-3)}
.c-fig figcaption b{font-weight:500;color:var(--c-ink)}

/* ------------------------------------------------------------- architecture --- */
.c-arch{display:grid;gap:var(--c-s2)}
.c-arch__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:stretch}
.c-arch__box{position:relative;padding:18px 18px 16px;border:1.5px solid var(--c-ink);border-radius:3px;background:#fff;min-height:112px;display:grid;align-content:start;gap:6px}
.c-arch__box--soft{border-color:var(--c-rule-2);border-style:dashed}
.c-arch__box--green{border-color:var(--c-green);background:var(--c-green-050)}
.c-arch__k{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-3)}
.c-arch__t{font-size:17px;font-weight:500;line-height:1.2}
.c-arch__d{font-size:13.5px;line-height:1.45;color:var(--c-ink-2)}
.c-arch__link{display:flex;align-items:center;justify-content:center;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-3);padding:2px 0}
.c-arch__link::before{content:'';flex:1;height:1px;background:var(--c-rule-2);margin-right:12px}
.c-arch__link::after{content:'';flex:1;height:1px;background:var(--c-rule-2);margin-left:12px}
.c-arch__point{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:center}
.c-arch__point img{width:100%;max-width:360px;height:auto}
@media (min-width:760px){.c-arch__point{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ------------------------------------------------------------ checklist --- */
.c-check{display:grid;gap:0;border-top:1px solid var(--c-rule-2);counter-reset:cq}
.c-check li{list-style:none;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--c-rule);font-size:var(--c-body);line-height:1.45;color:var(--c-ink)}
.c-check li::before{counter-increment:cq;content:counter(cq,decimal-leading-zero);font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--c-green-ink);padding-top:.35em}
.c-check li small{display:block;grid-column:2;margin-top:-6px;font-size:13.5px;color:var(--c-ink-3)}

/* ----------------------------------------------------------------- email --- */
/* The email block: a 600px single column that survives most clients when
   rebuilt with tables at production; here it is the layout and the copy. */
.c-email{width:100%;max-width:600px;margin:0 auto;background:#fff;border:1px solid var(--c-rule-2);color:var(--c-ink);font-size:16px;line-height:1.5}
.c-email__pre{padding:10px 24px;font-size:12px;color:var(--c-ink-3);background:var(--c-paper);border-bottom:1px solid var(--c-rule)}
.c-email__pre b{font-weight:500;color:var(--c-ink-2)}
.c-email__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px 18px}
.c-email__head span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-3)}
.c-email__hero img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
.c-email__body{padding:26px 24px 8px;display:grid;gap:14px}
.c-email__h{font-size:26px;font-weight:500;line-height:1.1;letter-spacing:-.015em}
.c-email__body p{color:var(--c-ink-2)}
.c-email__body ul{padding-left:20px;color:var(--c-ink-2);display:grid;gap:6px}
.c-email__cta{padding:10px 24px 26px}
.c-email__foot{padding:18px 24px 22px;border-top:1px solid var(--c-rule);font-size:12px;line-height:1.5;color:var(--c-ink-3)}
.c-email__foot a{color:inherit}

/* --------------------------------------------------------------- debrief --- */
/* After the drill: a one-page record. Fields are for the team's own words.
   No scores, no ranking. */
.c-debrief{border:1.5px solid var(--c-ink);border-radius:3px;background:#fff;overflow:hidden}
.c-debrief__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;padding:16px 20px;border-bottom:1.5px solid var(--c-ink)}
.c-debrief__head h3{font-size:20px;font-weight:500;letter-spacing:-.01em}
.c-debrief__head span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-3)}
.c-debrief__grid{display:grid;grid-template-columns:1fr;}
.c-debrief__f{padding:14px 20px 16px;border-bottom:1px solid var(--c-rule);display:grid;gap:6px}
.c-debrief__f:last-child{border-bottom:0}
.c-debrief__f b{font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-3)}
.c-debrief__f p{font-size:15px;line-height:1.45;color:var(--c-ink)}
.c-debrief__f p.c-blank{color:var(--c-ink-3)}
@media (min-width:700px){
  .c-debrief__grid{grid-template-columns:1fr 1fr}
  .c-debrief__f--wide{grid-column:span 2}
  .c-debrief__f:nth-last-child(-n+2){border-bottom:0}
  .c-debrief__f:nth-child(odd):not(.c-debrief__f--wide){border-right:1px solid var(--c-rule)}
}

/* ---------------------------------------------------------------- footer --- */
.c-footer{background:var(--c-charcoal);color:var(--c-night-text);padding:clamp(40px,5vw,72px) 0 clamp(28px,3vw,44px)}
.c-footer__top{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:var(--c-s4) var(--c-s3)}
.c-footer h4{font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--c-night-faint);margin-bottom:12px}
.c-footer ul{list-style:none;padding:0;display:grid;gap:8px;font-size:15px}
.coram .c-footer ul a{color:#fff;text-decoration:none}
.c-footer ul a:hover{text-decoration:underline}
.c-footer__note{font-size:13.5px;line-height:1.5;max-width:44ch;margin-top:16px;color:var(--c-night-text)}
.c-footer__bottom{margin-top:var(--c-s5);padding-top:18px;border-top:1px solid var(--c-night-rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-night-faint)}
@media (max-width:760px){.c-footer__top{grid-template-columns:1fr 1fr}.c-footer__top>:first-child{grid-column:span 2}}

/* ---------------------------------------------------------------- ad --- */
/* Campaign compositions built in HTML so the words, type, geometry and
   photograph are editable. 4:5 for social, 1200x628 for landscape. */
.c-ad{position:relative;display:grid;grid-template-rows:auto 1fr auto;background:#fff;border:1px solid var(--c-rule);overflow:hidden;color:var(--c-ink);container-type:inline-size}
.c-ad--portrait{aspect-ratio:4/5}
.c-ad--landscape{aspect-ratio:1200/628}
.c-ad__photo{position:relative;overflow:hidden;min-height:0}
.c-ad__photo img{width:100%;height:100%;object-fit:cover}
.c-ad__text{padding:6cqw 6cqw 5cqw;display:grid;gap:2cqw;align-content:end}
.c-ad__h{font-size:8.2cqw;font-weight:500;line-height:.98;letter-spacing:-.025em;text-wrap:balance;max-width:12ch}
.c-ad__s{font-size:3.4cqw;line-height:1.35;color:var(--c-ink-2);max-width:34ch}
.c-ad__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 6cqw 5cqw}
.c-ad__foot img{height:3.6cqw;width:auto}
.c-ad__foot span{font-size:2.6cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-3)}
.c-ad__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5cqw 6cqw 0}
.c-ad__top img{height:3.6cqw;width:auto}
.c-ad__top span{font-size:2.5cqw;letter-spacing:.12em;text-transform:uppercase;color:var(--c-green-ink);font-weight:500}
.c-ad--night{background:var(--c-charcoal);color:#fff}
.c-ad--night .c-ad__s{color:var(--c-night-text)}
.c-ad--night .c-ad__foot span,.c-ad--night .c-ad__top span{color:#5FCBB3}
.c-ad--green{background:var(--c-green);color:#fff}
.c-ad--green .c-ad__s{color:rgba(255,255,255,.9)}
.c-ad--green .c-ad__top span,.c-ad--green .c-ad__foot span{color:#fff}
/* landscape: photo left, words right */
.c-ad--landscape{grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.c-ad--landscape .c-ad__photo{grid-row:1/-1}
.c-ad--landscape .c-ad__text{padding:5cqw 4.5cqw 1cqw 4.5cqw;align-content:center}
.c-ad--landscape .c-ad__h{font-size:5.6cqw}
.c-ad--landscape .c-ad__s{font-size:2.1cqw}
.c-ad--landscape .c-ad__foot{grid-column:2;padding:0 4.5cqw 4cqw;align-self:end}
.c-ad--landscape .c-ad__foot img{height:2.4cqw}
.c-ad--landscape .c-ad__foot span{font-size:1.7cqw}
.c-ads{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--c-s3)}

/* ------------------------------------------------------------ utilities --- */
.c-rule-top{border-top:1px solid var(--c-rule-2);padding-top:var(--c-s3)}
.c-two{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--c-s4)}
@media (min-width:900px){.c-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:start}}
.c-two--wide{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.c-two--wide{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.c-source{font-size:12.5px;line-height:1.5;color:var(--c-ink-3);max-width:70ch}
.c-source a{color:inherit}
@media (prefers-reduced-motion:reduce){.coram *{transition:none!important;animation:none!important}}
@media print{.c-nav,.c-notice{position:static}.c-btn{border:1px solid #000}}