/* ==========================================================================
   directions.css · the three additional Coram directions
   work/coram/open-day.html, shared-effort.html, steady-hand.html and the
   embedded System modules in work/case-coram.html

   SCOPE. Everything lives under `.cr` (Coram route) and every class is
   prefixed `cr-`. A route surface sets its own type, colour and motif
   through custom properties on `.cr-2`, `.cr-3` and `.cr-4`; nothing here
   reaches the Walker shell, and the shell's Radikal, Carbon, Bone and Acid
   never enter a route surface. Approach 1 keeps its own layer (coram.css).

   TYPE. Three bundled open-source families under the SIL Open Font License,
   installed at assets/fonts/coram-study/ with their licence texts:
     Newsreader (variable)   The Open Day headlines
     Manrope (variable)      The Open Day text; The Shared Effort throughout
     Public Sans (variable)  The Steady Hand throughout
   These are deliberate choices for the new directions, not substitutes for
   TT Commons Classic and not represented as matches.

   COLOUR. Study applications proposed for comparison, not official Coram
   standards. Warning and emergency colours are never replaced by these
   campaign relationships.

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

@font-face{font-family:'Newsreader';src:url('../../assets/fonts/coram-study/Newsreader-variable.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../../assets/fonts/coram-study/Manrope-variable.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url('../../assets/fonts/coram-study/PublicSans-variable.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}

.cr{
  --r-bg:#F5F0E5;--r-ink:#203D34;--r-ink-2:rgba(32,61,52,.78);--r-green:#276C60;--r-soft:#D8E1C9;--r-accent:#E7B38A;--r-bright:#F5D87C;--r-card:#FFFFFF;--r-rule:rgba(32,61,52,.18);
  --r-display:'Newsreader',Georgia,'Times New Roman',serif;--r-display-weight:400;--r-display-track:-.03em;
  --r-sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-edge:clamp(16px,4.4vw,80px);--r-max:1440px;
  background:var(--r-bg);color:var(--r-ink);font-family:var(--r-sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;font-synthesis:none
}
.cr-2{--r-bg:#F5F0E5;--r-ink:#203D34;--r-ink-2:rgba(32,61,52,.78);--r-soft:#D8E1C9;--r-accent:#E7B38A;--r-bright:#F5D87C;--r-card:#FFFFFF;--r-display:'Newsreader',Georgia,serif;--r-display-weight:400;--r-display-track:-.03em}
.cr-3{--r-bg:#E9EBDD;--r-ink:#15332A;--r-ink-2:rgba(21,51,42,.8);--r-soft:#BECFA9;--r-accent:#DD7C59;--r-bright:#F4C5A3;--r-card:#F4F5EC;--r-display:'Manrope',system-ui,sans-serif;--r-display-weight:800;--r-display-track:-.035em}
.cr-4{--r-bg:#EEEDE5;--r-ink:#243B35;--r-ink-2:rgba(36,59,53,.8);--r-soft:#CAD6CC;--r-accent:#CFB56F;--r-bright:#DFE5F1;--r-card:#FFFFFF;--r-display:'Public Sans',system-ui,sans-serif;--r-display-weight:600;--r-display-track:-.03em;--r-sans:'Public Sans',system-ui,-apple-system,sans-serif}
.cr *,.cr *::before,.cr *::after{box-sizing:border-box}
:where(.cr) :where(h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote){margin:0}
.cr img{max-width:100%;height:auto;display:block}
.cr a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
.cr :is(button,input,select,textarea){font:inherit;color:inherit}
.cr :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--r-green);outline-offset:5px}
.cr ::selection{background:var(--r-green);color:#fff}
.cr [id]{scroll-margin-top:84px}
.cr-wrap{width:100%;max-width:var(--r-max);margin:0 auto;padding:0 var(--r-edge)}
.cr-sec{padding:clamp(48px,6vw,96px) 0}
.cr-sec--tight{padding:clamp(28px,3.4vw,52px) 0}
.cr-sec--rule{border-top:1px solid var(--r-rule)}

/* ------------------------------------------------------------------ type --- */
.cr-kicker{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--r-ink-2)}
.cr-display{font-family:var(--r-display);font-weight:var(--r-display-weight);font-size:clamp(44px,7.4vw,124px);line-height:.96;letter-spacing:var(--r-display-track);text-wrap:balance;max-width:11ch;font-variation-settings:'opsz' 72}
.cr-h2{font-family:var(--r-display);font-weight:var(--r-display-weight);font-size:clamp(30px,4vw,64px);line-height:1.02;letter-spacing:var(--r-display-track);text-wrap:balance;max-width:16ch}
.cr-h3{font-family:var(--r-display);font-weight:var(--r-display-weight);font-size:clamp(22px,2.4vw,36px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.cr-large{font-family:var(--r-display);font-weight:var(--r-display-weight);font-size:clamp(24px,2.8vw,42px);line-height:1.28;letter-spacing:-.02em;max-width:22ch;text-wrap:pretty}
.cr-lede{font-size:clamp(17px,1.4vw,22px);line-height:1.45;color:var(--r-ink-2);max-width:46ch}
.cr-body{font-size:clamp(15.5px,1.1vw,17.5px);line-height:1.55;color:var(--r-ink-2);max-width:62ch}
.cr-body+.cr-body{margin-top:.9em}
.cr-body b{font-weight:700;color:var(--r-ink)}
.cr-small{font-size:13.5px;line-height:1.5;color:var(--r-ink-2)}
.cr-mt2{margin-top:16px}.cr-mt3{margin-top:24px}.cr-mt4{margin-top:32px}.cr-mt5{margin-top:48px}

/* -------------------------------------------------------------- header --- */
.cr-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:14px 0;border-bottom:1px solid var(--r-rule);font-size:13px}
.cr-nav__back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;text-decoration:none;letter-spacing:.02em}
.cr-nav__back:hover{text-decoration:underline}
.cr-nav__routes{display:flex;gap:4px;list-style:none;padding:0;margin:0}
.cr-nav__routes a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;text-decoration:none;font-weight:700;letter-spacing:.06em;border:1px solid transparent;border-radius:3px}
.cr-nav__routes a[aria-current="page"]{border-color:var(--r-ink)}
.cr-nav__routes a:hover{border-color:var(--r-rule)}
.cr-head{padding:clamp(36px,5vw,80px) 0 clamp(24px,3vw,40px);display:grid;gap:14px}
.cr-head .cr-lede{margin-top:6px}
.cr-head__meta{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13.5px;color:var(--r-ink-2);margin-top:8px}
.cr-head__meta b{font-weight:700;color:var(--r-ink)}

/* ---------------------------------------------------------------- board --- */
.cr-board{margin:0}
.cr-board img{width:100%;height:auto;border:1px solid var(--r-rule)}
.cr-board figcaption{margin-top:10px;font-size:13px;color:var(--r-ink-2);max-width:70ch}

/* ------------------------------------------------------------- editorial --- */
.cr-editorial{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,64px)}
@media (min-width:900px){.cr-editorial{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.cr-lines{display:grid;gap:0;border-top:1px solid var(--r-ink)}
.cr-lines div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 20px;padding:14px 0;border-bottom:1px solid var(--r-rule)}
.cr-lines dt{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--r-ink-2);padding-top:.35em}
.cr-lines dd{font-size:clamp(16px,1.25vw,19px);line-height:1.4}
.cr-lines dd.cr-lines__sig{font-family:var(--r-display);font-weight:var(--r-display-weight);font-size:clamp(22px,2vw,30px);line-height:1.15;letter-spacing:-.02em}
@media (max-width:640px){.cr-lines div{grid-template-columns:1fr;gap:4px}}
.cr-voice{display:inline-flex;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--r-ink-2)}
.cr-voice span+span::before{content:'\00B7';margin-right:10px}

/* ---------------------------------------------------------------- motifs --- */
.cr-motifs{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,48px)}
@media (min-width:900px){.cr-motifs{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.cr-motif-lg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cr-motif-lg figure{margin:0;background:var(--r-card);border:1px solid var(--r-rule);padding:clamp(16px,2.4vw,32px);display:grid;gap:12px}
.cr-motif-lg img{width:100%;height:auto;aspect-ratio:1}
.cr-motif-lg figcaption{font-size:12.5px;color:var(--r-ink-2)}
.cr-motif-lg figcaption b{display:block;font-weight:700;color:var(--r-ink)}
.cr-rule-list{display:grid;gap:12px;padding-left:0;list-style:none;counter-reset:rr}
.cr-rule-list li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;font-size:15.5px;line-height:1.5;color:var(--r-ink-2)}
.cr-rule-list li::before{counter-increment:rr;content:counter(rr,decimal-leading-zero);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--r-ink);padding-top:.3em}
.cr-family{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-top:20px}
.cr-family figure{margin:0;background:var(--r-card);border:1px solid var(--r-rule);padding:10px;display:grid;gap:6px}
.cr-family img{width:100%;height:auto;aspect-ratio:1}
.cr-family figcaption{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--r-ink-2);text-align:center}
@media (max-width:900px){.cr-family{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cr-motif-app{position:relative;background:var(--r-card);border:1px solid var(--r-rule);padding:clamp(20px,3vw,40px);display:grid;gap:14px;overflow:hidden;min-height:260px;container-type:inline-size}
.cr-motif-app__mark{position:absolute;right:-2cqw;top:-2cqw;width:34cqw;height:34cqw;opacity:.95;pointer-events:none}
.cr-motif-app__h{font-family:var(--r-display);font-weight:var(--r-display-weight);font-size:clamp(26px,5cqw,52px);line-height:1;letter-spacing:var(--r-display-track);max-width:12ch;position:relative}
.cr-motif-app__p{font-size:clamp(14px,1.6cqw,17px);color:var(--r-ink-2);max-width:36ch;position:relative}
.cr-motif-app--photo{padding:0;display:block}
.cr-motif-app--photo img.cr-photo{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.cr-motif-app--photo .cr-motif-app__cap{padding:12px 14px;font-size:12.5px;color:var(--r-ink-2)}

/* ---------------------------------------------------------------- motion --- */
.cr-motion{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:center}
@media (min-width:900px){.cr-motion{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.cr-video{position:relative;background:var(--r-card);border:1px solid var(--r-rule)}
.cr-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--r-card)}
.cr-video__tag{position:absolute;left:12px;top:12px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;background:var(--r-ink);color:var(--r-bg);pointer-events:none}
.cr-video__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-top:10px;font-size:13px;color:var(--r-ink-2)}
.cr-video__bar b{font-weight:700;color:var(--r-ink)}
.cr-video__bar a{font-weight:700}
.cr-videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,28px)}
@media (max-width:900px){.cr-videos{grid-template-columns:1fr}}

/* ------------------------------------------------------------- patterns --- */
.cr-patterns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
@media (max-width:1100px){.cr-patterns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cr-patterns{grid-template-columns:1fr}}
.cr-card{position:relative;background:var(--r-card);border:1px solid var(--r-rule);padding:clamp(18px,2vw,26px);display:grid;gap:12px;align-content:start;min-width:0}
.cr-card__k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--r-ink-2)}
.cr-card__h{font-family:var(--r-display);font-weight:var(--r-display-weight);font-size:clamp(22px,1.9vw,28px);line-height:1.12;letter-spacing:-.02em}
.cr-card__why{font-size:13px;line-height:1.5;color:var(--r-ink-2);padding-top:10px;border-top:1px dashed var(--r-rule);margin-top:auto}
.cr-card p{font-size:15px;line-height:1.5}
.cr-card label:not(.cr-choice){display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.cr-card :is(select,textarea){width:100%;min-height:48px;padding:11px 12px;border:1px solid var(--r-ink);border-radius:0;background:#fff;color:var(--r-ink);font-size:16px}
.cr-card textarea{resize:vertical;min-height:88px}
.cr-card fieldset{border:0;padding:0;margin:0;min-width:0}
.cr-card legend{font-size:13px;font-weight:700;padding:0 0 8px}
.cr-choice{display:flex;gap:12px;align-items:flex-start;padding:8px 0;font-size:15px;cursor:pointer;min-height:44px}
.cr-choice input{width:20px;height:20px;flex-shrink:0;margin-top:2px;accent-color:var(--r-green)}
.cr-card dl{display:grid;gap:10px}
.cr-card dt{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--r-ink-2)}
.cr-card dd{font-size:15px;line-height:1.45}
.cr-card summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700;font-size:14px;list-style:none}
.cr-card summary::-webkit-details-marker{display:none}
.cr-card summary::after{content:'+';margin-left:auto;font-size:18px}
.cr-card details[open] summary::after{content:'\2013'}
.cr-card [aria-live]{font-size:14px;color:var(--r-ink-2)}
.cr-card .cr-motif-inline{width:56px;height:56px}
.cr-card .cr-motif-corner{position:absolute;right:14px;top:14px;width:34px;height:34px}
.cr .cr-button{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:48px;padding:0 18px;background:var(--r-ink);color:var(--r-bg);border:1px solid var(--r-ink);border-radius:3px;text-decoration:none;font-weight:700;font-size:14.5px;cursor:pointer;text-align:left}
.cr .cr-button:hover{background:var(--r-green);border-color:var(--r-green);color:#fff}
.cr .cr-button--ghost{background:transparent;color:var(--r-ink)}
.cr .cr-button--ghost:hover{background:var(--r-ink);color:var(--r-bg)}
.cr-note{font-size:12.5px;color:var(--r-ink-2)}

/* ---------------------------------------------------------------- notes --- */
.cr-notes{display:grid;gap:10px;max-width:78ch;font-size:14.5px;line-height:1.55;color:var(--r-ink-2)}
.cr-notes b{font-weight:700;color:var(--r-ink)}
.cr-notes a{color:inherit}
.cr-tests{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,32px)}
@media (max-width:900px){.cr-tests{grid-template-columns:1fr}}
.cr-tests div{padding-top:12px;border-top:1px solid var(--r-ink);font-size:15px;line-height:1.5;color:var(--r-ink-2)}
.cr-tests b{display:block;font-weight:700;color:var(--r-ink);margin-bottom:4px}
.cr-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:20px 0 6px;border-top:1px solid var(--r-ink);font-size:13.5px}
.cr-foot a{font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.cr-foot a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.cr *{transition:none!important;animation:none!important}}