/* ══════════════════════════════════════════════════════════════════════════
   THEME.CSS — companion-panel chrome for the EBS project
   trevor.marketing personal-project shell · light only · no Compaytence.

   Derivation, so nothing here is arbitrary:
   · Ground, hairlines, black ink, Fraunces display at tight leading, the
     pill, ease cubic-bezier(.22,1,.36,1), 10px container radius
       → trevor-portfolio/assets/css/v11.css (www.trevor.marketing)
   · Silverpoint neutrals (#1B1D1D ink · #5E5A52 slate · #8A867C pewter ·
     #C6C3BA sterling · bone ground), wide-tracked uppercase mono labels
     (.20em), spec-sheet folio, signal #E4551F used sparingly
       → outdoor-brand/LEPUS-BRAND-BOOK.html (SILVERPOINT palette)

   Defines the same token names panel.css consumes, so the p-* components
   work unchanged. Load BEFORE panel.css.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* type */
  --face-display:'Fraunces', Georgia, serif;
  --face-text:'Inter', system-ui, -apple-system, sans-serif;
  --face-code:'JetBrains Mono', ui-monospace, Consolas, monospace;
  --t-xs:11px; --t-sm:13.5px; --t-base:16px; --t-md:19px; --t-lg:24px;
  --t-xl:30px; --t-2xl:38px; --t-3xl:48px; --t-4xl:60px;
  --lh-body:1.6;

  /* silverpoint neutrals on a light ground */
  --paper:#f7f6f2;                    /* bone-white sheet                */
  --paper-2:#fbfaf7;
  --wash:rgba(27,29,29,.05);
  --rule-c:27,29,29;                  /* borders = rgba(var(--rule-c),a) */
  --ink:#1b1d1d;                      /* LEPUS black                     */
  --ink-soft:#3a3c3b;
  --graphite:#5e5a52;                 /* slate-t                         */
  --pewter:#8a867c;
  --sterling:#c6c3ba;

  /* roles panel.css expects. Figures are black Fraunces; the only
     chromatic thing on the page is the LEPUS signal, used sparingly.    */
  --mark:#1b1d1d; --mark-deep:#000000;
  --mark-tint:rgba(27,29,29,.06);
  --mark-solid:#e4551f;               /* signal — score fills, dots      */
  --fig:#1b1d1d; --fig-inline:#1b1d1d;
  --risk:#b0421f; --good:#4c7a3d;

  --card:#ffffff; --card-hover:#ffffff; --sheen:255,255,255;
  --shadow:0 1px 2px rgba(27,29,29,.05), 0 12px 28px -18px rgba(27,29,29,.22);
  --shadow-lift:0 2px 4px rgba(27,29,29,.06), 0 22px 44px -20px rgba(27,29,29,.28);

  /* rhythm + geometry */
  --s1:6px; --s2:12px; --s3:18px; --s4:24px;
  --s5:30px; --s6:44px; --s7:60px; --s8:88px;
  --r-lg:10px;                        /* trevor.marketing media radius   */
  --r-ctl:7px; --r-xs:4px; --hair:1px;
  --ease:cubic-bezier(.22,1,.36,1);   /* trevor.marketing house ease     */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-lead:.6s; --dur-sub:.45s;

  /* LEPUS tracking */
  --track-tech:.20em;
  color-scheme:light;
}

/* ═══ BASE ═══════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink-soft);
  font-family:var(--face-text);font-size:var(--t-base);line-height:var(--lh-body);
  font-weight:450;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%;height:auto}
a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
strong{color:var(--ink);font-weight:600}
code{font-family:var(--face-code);font-size:.85em;color:var(--ink);
  background:var(--wash);border-radius:var(--r-xs);padding:1px 5px}
em{font-style:italic}

.wrap{max-width:1060px;margin:0 auto;padding:0 clamp(18px,4vw,44px) var(--s7)}

/* ═══ FOLIO + MASTHEAD — spec-sheet chrome, personal identity ════════════ */
.folio{display:flex;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) 0;border-bottom:var(--hair) solid rgba(var(--rule-c),.12);
  font-family:var(--face-code);font-size:var(--t-xs);letter-spacing:var(--track-tech);
  text-transform:uppercase;color:var(--pewter)}

.masthead{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s3);padding:var(--s5) 0 var(--s4);
  border-bottom:var(--hair) solid rgba(var(--rule-c),.18)}
.mast-name{font-family:var(--face-display);font-weight:700;font-size:26px;
  line-height:.96;letter-spacing:-.015em;color:var(--ink);
  font-variation-settings:"opsz" 144}
.mast-name a{text-decoration:none;color:inherit}
.mast-tag{font-family:var(--face-code);font-size:var(--t-xs);
  letter-spacing:var(--track-tech);text-transform:uppercase;color:var(--graphite);
  white-space:nowrap}
.mast-tag .arr{color:var(--mark-solid)}

/* ═══ TITLE BLOCK ════════════════════════════════════════════════════════ */
.doc-title{font-family:var(--face-display);font-weight:700;
  font-size:clamp(42px,6vw,68px);line-height:.96;letter-spacing:-.015em;
  color:var(--ink);margin-top:var(--s7);
  font-variation-settings:"opsz" 144}
.doc-title em{font-style:italic;font-weight:600;color:var(--graphite)}
.standfirst{margin-top:var(--s4);max-width:56ch;font-size:var(--t-md);
  line-height:1.55;color:var(--ink-soft)}
.standfirst em{color:var(--ink)}

.byline{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);
  margin:var(--s5) 0 0;padding:var(--s3) 0;
  border-top:var(--hair) solid rgba(var(--rule-c),.12);
  border-bottom:var(--hair) solid rgba(var(--rule-c),.12)}
.byline dt{font-family:var(--face-code);font-size:var(--t-xs);
  letter-spacing:var(--track-tech);text-transform:uppercase;color:var(--pewter)}
.byline dd{margin:2px 0 0;font-size:var(--t-sm);color:var(--ink)}

/* ═══ SECTIONS ═══════════════════════════════════════════════════════════ */
.sec{margin-top:var(--s8)}
.eyebrow{font-family:var(--face-code);font-size:var(--t-xs);
  letter-spacing:var(--track-tech);text-transform:uppercase;color:var(--pewter);
  display:flex;align-items:center;gap:var(--s2)}
.eyebrow::before{content:"";width:22px;height:var(--hair);
  background:var(--sterling);flex:none}
.sec-head{display:flex;align-items:baseline;gap:var(--s3);margin-top:var(--s2)}
.sec-n{font-family:var(--face-code);font-size:var(--t-sm);
  letter-spacing:var(--track-tech);color:var(--pewter)}
.sec-t{font-family:var(--face-display);font-weight:600;
  font-size:clamp(25px,3.2vw,36px);line-height:1.04;letter-spacing:-.012em;
  color:var(--ink);font-variation-settings:"opsz" 100}
.lede{margin-top:var(--s3);max-width:62ch;font-size:17px;line-height:1.55;
  color:var(--ink-soft)}
.sec p{margin-top:var(--s3);max-width:68ch}
.sec h3{color:var(--ink);font-weight:600}

/* ═══ CARDS · NOTES · TABLES ═════════════════════════════════════════════ */
.grid{display:grid;gap:var(--s3);margin-top:var(--s4)}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

.card{background:var(--card);border:var(--hair) solid rgba(var(--rule-c),.14);
  border-radius:var(--r-lg);padding:var(--s4);margin-top:var(--s4);
  transition:box-shadow .4s var(--ease)}
.grid .card{margin-top:0}
.card:hover{box-shadow:var(--shadow)}
.card-h{font-family:var(--face-code);font-size:var(--t-xs);
  letter-spacing:var(--track-tech);text-transform:uppercase;color:var(--graphite);
  margin-bottom:var(--s3)}
.card p{margin-top:var(--s2);font-size:var(--t-sm);line-height:1.6}

.pts{display:flex;flex-direction:column;gap:var(--s2)}
.pts li{position:relative;padding-left:var(--s4);font-size:var(--t-sm);
  line-height:1.55;color:var(--ink-soft)}
.pts li::before{content:"";position:absolute;left:0;top:.62em;width:12px;
  height:var(--hair);background:var(--pewter)}

.note{border:var(--hair) solid rgba(var(--rule-c),.14);
  border-left:2px solid var(--ink);border-radius:var(--r-xs);
  background:var(--card);padding:var(--s3) var(--s4);margin-top:var(--s4)}
.note-l{font-family:var(--face-code);font-size:var(--t-xs);
  letter-spacing:var(--track-tech);text-transform:uppercase;color:var(--graphite);
  margin-bottom:var(--s1)}
.note p{margin-top:var(--s1);font-size:var(--t-sm);line-height:1.6}
.note--risk{border-left-color:var(--risk)}
.note--risk .note-l{color:var(--risk)}
.note--good{border-left-color:var(--good)}

.tw{width:100%;border-collapse:collapse;margin-top:var(--s4);
  font-size:var(--t-sm);background:var(--card);
  border:var(--hair) solid rgba(var(--rule-c),.14);border-radius:var(--r-lg);
  overflow:hidden}
.tw th{font-family:var(--face-code);font-size:var(--t-xs);
  letter-spacing:var(--track-tech);text-transform:uppercase;font-weight:400;
  color:var(--pewter);text-align:left;
  padding:var(--s2) var(--s3);border-bottom:var(--hair) solid rgba(var(--rule-c),.18)}
.tw td{padding:var(--s2) var(--s3);vertical-align:top;color:var(--ink-soft);
  border-bottom:var(--hair) solid rgba(var(--rule-c),.08);line-height:1.5}
.tw tr:last-child td{border-bottom:0}
.tw .num, .tw td.num{font-family:var(--face-code);font-variant-numeric:tabular-nums;
  color:var(--ink);white-space:nowrap}

/* ═══ FOOT ═══════════════════════════════════════════════════════════════ */
.foot{display:flex;justify-content:space-between;gap:var(--s3);
  margin-top:var(--s8);padding-top:var(--s3);
  border-top:var(--hair) solid rgba(var(--rule-c),.12);
  font-family:var(--face-code);font-size:var(--t-xs);
  letter-spacing:var(--track-tech);text-transform:uppercase;color:var(--pewter)}

/* ═══ REVEALS — same contract as before, guarded by script ═══════════════ */
.rise,.rise-sub{opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-lead) var(--ease),transform var(--dur-lead) var(--ease)}
.rise-sub{transition-duration:var(--dur-sub),var(--dur-sub)}
.rise.in,.rise-sub.in{opacity:1;transform:none}
.no-motion .rise,.no-motion .rise-sub{transition:none}
@media (prefers-reduced-motion:reduce){
  .rise,.rise-sub{transition:none;opacity:1;transform:none}
}

@media (max-width:720px){
  .masthead{flex-direction:column;gap:var(--s1)}
  .byline{gap:var(--s2) var(--s4)}
  .sec{margin-top:var(--s7)}
}