/* ============================================================
   resume.css - Direction B "The Dossier" v2 (dynamic-resume-v2).
   Ported from docs/design/2026-07-16-dynamic-resume/direction-b-v2.html
   (TheGrove). Tokens come from ../css/tokens.css. Do NOT import
   css/main.css: base.css + layout.css silently destroy this layout
   (p max-width, h1 clamp, a color, section padding-block).
   See TheGrove wiki/decisions/ad192.md + ad193.md.

   Rail budget tension (decision-v2): the contact block consumed the
   rail's remaining vertical slack. Padding/avatar/margins below are the
   reclaimed-from-chrome values verified to keep the sparkline above the
   fold at h=768 AND contact links at 44px targets. If more rail space is
   ever needed, take it from .rail .oneliner margin or .credentials -
   NOT from the avatar a second time (designer forward note, binding).
   ============================================================ */

*{ box-sizing:border-box; }
html{ background:var(--bg); }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--accent); color:#0D1F1C; }

a{ color:inherit; }

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--accent); color:#0D1F1C; padding:.6rem 1rem;
  font-family:var(--font-mono); font-size:.8rem; font-weight:700;
}
.skip-link:focus{ left:.5rem; top:.5rem; }

/* ---------- Focus visibility (WCAG) ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:2px;
}
summary::-webkit-details-marker{ display:none; }
summary{ list-style:none; }

/* ---------- Eyebrow / mono labels ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-muted); font-weight:500;
}
.section-title{
  font-family:var(--font-display); font-weight:600; font-size:1.5rem; color:var(--text);
  letter-spacing:-.01em;
}

/* =========================================================
   MOBILE IDENTITY BLOCK - in-flow, full content, not sticky.
   Scrolls away naturally; the slim bar below it takes over.
   ========================================================= */
.m-identity{
  display:block;
  background:var(--surface);
  border-bottom:1px solid var(--card-border);
  padding:1.75rem 1.25rem 1.5rem;
}
@media (min-width:1024px){ .m-identity{ display:none; } }
.m-identity .avatar{ width:76px; height:76px; }
.m-identity .ident-name{
  font-family:var(--font-display); font-size:1.5rem; font-weight:700; margin:.9rem 0 .15rem;
  letter-spacing:-.01em;
}
.m-identity .motto{
  font-family:var(--font-body); font-style:italic; color:var(--accent); font-size:.95rem; margin:0 0 .65rem;
}
.m-identity .oneliner{
  font-size:.9rem; color:var(--text); opacity:.92; margin:0 0 1rem; max-width:34rem;
}

/* Credentials - rendered as a mono ledger even in the rail/identity block */
.credentials{ font-family:var(--font-mono); font-size:.78rem; }
.credentials .row{
  display:flex; justify-content:space-between; gap:.75rem;
  padding:.5rem 0; border-top:1px solid var(--card-border);
}
.credentials .row:first-child{ border-top:1px solid var(--card-border); }
.credentials .label{ color:var(--text); font-weight:600; letter-spacing:.02em; }
.credentials .value{ color:var(--text-muted); text-align:right; }

.btn-download{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.1rem;
  font-family:var(--font-mono); font-size:.75rem; font-weight:600; letter-spacing:.04em;
  color:var(--bg); background:var(--accent); border:1px solid var(--accent);
  padding:.75rem 1rem; min-height:44px; border-radius:4px;
  text-decoration:none; transition:background 200ms ease-out, transform 200ms ease-out;
}
.btn-download:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-download:active{ transform:translateY(1px); }
.btn-download svg{ width:14px; height:14px; flex:none; }

/* =========================================================
   MOBILE STICKY BAR - the slim collapsed rail.
   Sticks to the top once m-identity scrolls past it.
   Kept deliberately short: one row, ~52px total.
   ========================================================= */
.m-bar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:.6rem;
  background:rgba(13,31,28,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--card-border);
  padding:.5rem .9rem;
  padding-top:calc(.5rem + env(safe-area-inset-top, 0px));
}
@media (min-width:1024px){ .m-bar{ display:none; } }
.m-bar .avatar{ width:28px; height:28px; flex:none; }
.m-bar .name{
  font-family:var(--font-display); font-weight:600; font-size:.82rem; white-space:nowrap;
}
.m-bar .cred{
  font-family:var(--font-mono); font-size:.66rem; color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-left:1px solid var(--card-border); padding-left:.6rem; margin-left:.1rem;
}

/* Avatar (shared: real image with a graceful CSS fallback). Fully round:
   the photo asset is a circle with transparent corners, so a rounded-square
   container paints a visible card behind it (Chris flagged on mobile,
   2026-07-17). border-radius:50% keeps gradient+border exactly under the
   circle - nothing renders outside it. */
.avatar{
  position:relative; border-radius:50%; overflow:hidden; flex:none;
  background:linear-gradient(155deg,#1A4A44 0%, var(--surface) 55%, var(--card-bg) 100%);
  border:1px solid var(--card-border);
}
.avatar .fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; color:var(--accent);
  letter-spacing:.02em;
}
.m-identity .avatar .fallback, .rail .avatar .fallback{ font-size:1.6rem; }
.m-bar .avatar .fallback{ font-size:.62rem; }
.avatar img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2;
}

/* =========================================================
   DESKTOP RAIL - sticky left column, ~30% width at lg+.
   Padding/avatar/margins are the reclaimed values from the
   decision-v2 rail budget tension - do not restore the old
   larger values without re-verifying the fold at h=768.
   ========================================================= */
.rail{
  display:none;
  background:var(--surface);
  border-right:1px solid var(--card-border);
}
.dossier{ display:block; }
@media (min-width:1024px){
  .dossier{ display:flex; }
  .rail{
    position:sticky; top:0; height:100vh; overflow-y:auto;
    flex:0 0 31%; width:31%; padding:2.25rem 2.25rem 1.5rem;
    display:flex; flex-direction:column;
  }
  .rail .avatar{ width:88px; height:88px; }
  .rail h1{
    font-family:var(--font-display); font-weight:700; font-size:1.9rem; margin:.9rem 0 .3rem;
    letter-spacing:-.01em; line-height:1.1;
  }
  .rail .motto{
    font-family:var(--font-body); font-style:italic; color:var(--accent); font-size:1.02rem; margin:0 0 .7rem;
  }
  .rail .oneliner{ font-size:.92rem; color:var(--text); opacity:.92; margin:0 0 1.25rem; }
  .rail .credentials{ margin-bottom:1.4rem; }
  .rail .sparkline-wrap{ margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--card-border); }
}

/* =========================================================
   SPARKLINE - the rail's footer. A compressed echo of the
   same dated log rendered in full inside #timeline below.
   Not decoration: same source data, different resolution.
   Renders only when ship_log has entries (self-fills via the sweep).
   ========================================================= */
.sparkline-wrap{
  font-family:var(--font-mono);
}
.sparkline-cap{
  display:flex; justify-content:space-between; font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:.5rem;
}
.sparkline-cap b{ color:var(--accent); font-weight:600; }
.sparkline svg{ width:100%; height:34px; display:block; }
.spark-path{
  fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:400; stroke-dashoffset:400;
  animation:draw 1.6s ease-out .2s forwards;
}
.spark-fill{ fill:var(--accent-subtle); }
.spark-dot{ fill:var(--accent); }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){
  .spark-path{ animation:none; stroke-dashoffset:0; }
}
.sparkline-foot{ display:flex; justify-content:space-between; font-size:.68rem; color:var(--text-muted); margin-top:.35rem; }

/* =========================================================
   MAIN COLUMN
   ========================================================= */
main{ padding:2rem 1.25rem 4rem; max-width:56rem; }
@media (min-width:1024px){
  main{ padding:3.25rem 3.5rem 5rem; flex:1; min-width:0; max-width:none; }
}

section + section{ margin-top:2.75rem; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1rem; gap:1rem; }
.section-head .hint{ font-family:var(--font-mono); font-size:.68rem; color:var(--text-muted); white-space:nowrap; }
/* Linux webkit (the containerized verify leg) renders the mono fallback a few
   px wider than macOS; the longest hint overflows 375px by 3px. Let hints wrap
   on narrow viewports instead of forcing horizontal scroll. */
@media (max-width:480px){ .section-head .hint{ white-space:normal; text-align:right; } }

/* ---------- Ventures ledger ---------- */
.ledger{ border-top:1px solid var(--rule); }
details.venture{ border-bottom:1px solid var(--rule); }

details.venture > summary{
  display:grid;
  grid-template-columns:28px 1fr auto;
  align-items:center; gap:.6rem;
  padding:.95rem .15rem;
  cursor:pointer; min-height:44px;
  -webkit-tap-highlight-color:transparent;
}
details.venture > summary:hover .venture-name{ color:var(--accent); }

.marker{
  width:22px; height:22px; border:1px solid var(--card-border); border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:.85rem; color:var(--accent);
  transition:transform 200ms ease-out, border-color 200ms ease-out, background 200ms ease-out;
}
details.venture > summary:hover .marker{ border-color:var(--accent); }
details[open] .marker{ transform:rotate(45deg); background:var(--accent-subtle); }

.venture-main{ min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.65rem; row-gap:.15rem; }
.venture-name{
  font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--text);
  transition:color 200ms ease-out;
}
.venture-tag{
  font-family:var(--font-mono); font-size:.72rem; color:var(--text-muted);
  letter-spacing:.01em;
}

.venture-meta{
  font-family:var(--font-mono); font-size:.74rem; color:var(--text-muted);
  text-align:right; white-space:nowrap;
}
.venture-meta.is-total{ color:var(--accent); font-weight:700; font-size:.85rem; }
.venture-meta.is-total small{ display:block; font-weight:500; color:var(--text-muted); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }

.venture-body{
  padding:0 .15rem 1.35rem 34px;
}
.venture-body p{ margin:0 0 .6rem; font-size:.92rem; color:var(--text); max-width:38rem; }
.venture-field{
  display:inline-block; font-family:var(--font-mono); font-size:.8rem; color:var(--text-muted);
  border-bottom:1px dotted var(--card-border); padding-bottom:1px;
}
a.venture-field:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------- iLink Tools exemplars ---------- */
.exemplars{ margin-top:1rem; border-top:1px solid var(--card-border); }
.exemplar{
  display:grid; grid-template-columns:104px 1fr; gap:.85rem;
  padding:.95rem 0; border-bottom:1px solid var(--card-border);
  align-items:start;
}
@media (min-width:640px){ .exemplar{ grid-template-columns:120px 1fr; } }

.facade{
  position:relative; aspect-ratio:16/9; border-radius:4px; overflow:hidden;
  background:linear-gradient(155deg,#1A4A44, var(--card-bg));
  border:1px solid var(--card-border);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  min-height:44px;
}
.facade .mono-mark{
  font-family:var(--font-mono); font-weight:700; font-size:.8rem; color:rgba(240,237,230,.35);
  letter-spacing:.05em;
}
.facade .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.facade .play span{
  width:26px; height:26px; border-radius:50%; background:rgba(13,31,28,.55);
  border:1px solid rgba(194,138,5,.65);
  display:flex; align-items:center; justify-content:center;
  transition:background 200ms ease-out, border-color 200ms ease-out;
}
.facade:hover .play span{ background:var(--accent); border-color:var(--accent); }
.facade:hover .play svg{ fill:#0D1F1C; }
.facade .play svg{ width:9px; height:9px; fill:var(--accent); margin-left:1px; transition:fill 200ms ease-out; }
.facade .dur{
  position:absolute; right:5px; bottom:5px; font-family:var(--font-mono); font-size:.66rem;
  color:var(--text-muted); background:rgba(13,31,28,.7); padding:1px 4px; border-radius:2px;
}
/* Thumbnail fills the 16/9 facade box (source is 480x360, so crop, don't
   letterbox). The img is absolutely positioned, so the static .mono-mark
   needs position:relative to keep painting above it; .play and .dur are
   already positioned and later in DOM order, so they stay on top. */
.facade img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.facade .mono-mark{ position:relative; }

.exemplar-body .head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; }
.exemplar-name{ font-family:var(--font-mono); font-weight:600; font-size:.88rem; color:var(--text); }
.exemplar-name::before{ content:"\203A"; color:var(--accent); margin-right:.35rem; }
.exemplar-url{ font-family:var(--font-mono); font-size:.7rem; color:var(--text-muted); text-decoration:none; border-bottom:1px dotted var(--card-border); }
.exemplar-url:hover{ color:var(--accent); border-color:var(--accent); }
.exemplar-body p{ margin:.3rem 0 0; font-size:.84rem; color:var(--text-muted); max-width:34rem; }

/* ---------- AI-production disclosure (lead-in above the demo cards) ----------
   Deliberately lighter than the retired .thesis treatment: this is a lead-in,
   not a closing statement - muted small text with a thin top rule. */
.ai-disclosure{
  margin:1.1rem 0 0; padding-top:.7rem; border-top:1px solid var(--rule);
  font-size:.8rem; color:var(--text-muted); max-width:40rem; font-style:italic;
}

/* ---------- Storytelling ---------- */
.story-block{ padding:1rem 0; border-bottom:1px solid var(--rule); }
.story-block:first-child{ border-top:1px solid var(--rule); }
.story-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.story-name{ font-family:var(--font-display); font-weight:600; font-size:1rem; }
.story-kicker{ font-family:var(--font-mono); font-size:.7rem; color:var(--text-muted); white-space:nowrap; }
.story-block p{ margin:.5rem 0 0; font-size:.86rem; color:var(--text); opacity:.92; max-width:40rem; }
.story-wins{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.7rem 0 .2rem; }
.story-win{
  font-family:var(--font-mono); font-size:.74rem; color:var(--text);
  border:1px solid var(--card-border); border-radius:4px; padding:.5rem .65rem;
  display:flex; flex-direction:column; gap:.2rem; min-width:8.5rem;
}
.story-win .w-event{ color:var(--accent); font-weight:600; letter-spacing:.02em; }
.story-win .w-title{ color:var(--text); font-style:italic; font-family:var(--font-body); font-size:.82rem; }
.story-win .w-foot{ display:flex; align-items:center; gap:.4rem; margin-top:.1rem; }
.story-win .w-meta{ color:var(--text-muted); font-size:.68rem; }
.story-win .w-yt{ display:inline-flex; align-items:center; margin-left:auto; }
.story-win .w-yt svg{ width:18px; height:13px; display:block; }
.story-win .w-yt:hover svg .yt-bg{ fill:#FF0000; }
.story-win .w-yt svg .yt-bg{ fill:#8B9E8A; transition:fill 180ms ease-out; }
.mantra{
  margin-top:1.25rem; padding:.9rem 1rem; border-left:2px solid var(--accent);
  background:rgba(255,255,255,.045);
  font-family:var(--font-body); font-style:italic; font-size:.92rem; color:var(--text);
}

/* ---------- Speaking statline (Direction B) ---------- */
.stat-row{ display:flex; flex-wrap:wrap; gap:1.5rem 2.25rem; padding:.9rem 0 1.4rem; }
.stat-pair{ display:flex; flex-direction:column; gap:.35rem; }
.stat-pair .cap{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted);
}
.stat-pair .num{ font-family:var(--font-mono); font-size:1.5rem; font-weight:700; color:var(--accent); }
.mini-play{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%; vertical-align:middle; margin-left:.35rem;
  background:rgba(13,31,28,.55); border:1px solid rgba(194,138,5,.65);
}
.mini-play svg{ width:7px; height:7px; fill:var(--accent); margin-left:1px; }
/* .mini-play is a <span>; inside a .skill-list chip (also a <span>) the
   ".skill-list span" rule (0,1,1) outranks the bare ".mini-play" (0,1,0)
   on border/radius/padding - re-assert with a higher-specificity override. */
.skill-list .mini-play{ border:1px solid rgba(194,138,5,.65); border-radius:50%; padding:0; }

/* ---------- Career as disclosure ledger ---------- */
.career-ledger{ border-top:1px solid var(--rule); }
details.career-item{ border-bottom:1px solid var(--rule); }
details.career-item > summary{
  display:grid; grid-template-columns:28px 1fr auto; gap:.6rem;
  align-items:start; padding:1rem .15rem; cursor:pointer; min-height:44px;
  -webkit-tap-highlight-color:transparent;
}
details.career-item > summary .marker{ margin-top:.15rem; }
details.career-item > summary:hover .career-co{ color:var(--accent); }
details.career-item[open] .marker{ transform:rotate(45deg); background:var(--accent-subtle); }
.career-co{ font-family:var(--font-display); font-weight:600; font-size:1rem; }
.career-conote{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-muted); font-weight:400; }
.career-role{ font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted); margin-top:.2rem; }
.career-dates{ font-family:var(--font-mono); font-size:.78rem; color:var(--accent); text-align:right; white-space:nowrap; margin-top:.15rem; }
.career-body{ padding:.1rem .15rem 1.1rem 34px; }

/* ---------- Career bullets ---------- */
.career-bullets{
  margin:0; padding:0; list-style:none; max-width:40rem;
}
.career-bullets li{
  position:relative; padding-left:1rem; margin:.3rem 0;
  font-size:.85rem; color:var(--text); opacity:.92; line-height:1.5;
}
.career-bullets li::before{
  content:"\2014"; position:absolute; left:0; color:var(--accent); font-family:var(--font-mono);
}
/* ---------- Career bullet tags ("AI for X" metadata pills) ----------
   Gold text + border per Chris (2026-07-17), overriding the designer's
   muted-chip recommendation - operator call on his own page. */
.b-tag{
  display:inline-flex; align-items:center; vertical-align:middle;
  margin-left:.45rem;
  font-family:var(--font-mono); font-size:.66rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); white-space:nowrap;
  border:1px solid var(--accent); border-radius:4px;
  padding:.15rem .45rem; line-height:1.4;
}
.career-awards{
  margin-top:.55rem; font-family:var(--font-mono);
  font-size:.72rem; color:var(--text-muted); letter-spacing:.01em;
}
.career-awards b{ color:var(--accent); font-weight:600; }

/* ---------- Skills ---------- */
.skill-group{ margin-bottom:1.1rem; }
.skill-group .cat{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:.5rem; display:block;
}
.skill-list{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; }
.skill-list span{
  font-family:var(--font-mono); font-size:.78rem; color:var(--text);
  border:1px solid var(--card-border); border-radius:4px; padding:.28rem .55rem;
}

/* ---------- Signature skills (Top 5 rated strip) ---------- */
.sig-skills{ margin-bottom:1.6rem; }
.sig-skills .cat{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:.7rem; display:block;
}
.sig-row{
  display:grid; grid-template-columns:9.5rem 1fr auto; align-items:center; gap:.75rem;
  padding:.4rem 0;
}
@media (max-width:520px){ .sig-row{ grid-template-columns:7.5rem 1fr auto; gap:.5rem; } }
.sig-name{ font-family:var(--font-body); font-size:.86rem; color:var(--text); }
.sig-meter{ display:flex; gap:.28rem; }
.sig-meter i{
  flex:1; height:6px; border-radius:2px; background:var(--card-border);
}
.sig-meter i.on{ background:var(--accent); }
.sig-meter i.half{ background:linear-gradient(90deg,var(--accent) 50%,var(--card-border) 50%); }
.sig-score{ font-family:var(--font-mono); font-size:.74rem; color:var(--accent); font-weight:600; white-space:nowrap; }

/* ---------- Contact block (rail + mobile identity) ----------
   Dedicated block under the Download button, visually distinct
   from the credentials ledger: credentials = pedigree,
   contact = how to reach me. Mono, icon + value.
   min-height:44px on .contact a is a WCAG target-size fix
   (decision-v2 designer pass) - do NOT remove to reclaim rail space. */
.contact{ margin-top:1.1rem; font-family:var(--font-mono); }
.contact .cap{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:.55rem; display:block;
}
.contact a, .contact span.c-row{
  display:flex; align-items:center; gap:.55rem;
  padding:.32rem 0; min-height:44px; font-size:.78rem; color:var(--text);
  text-decoration:none;
}
.contact a:hover{ color:var(--accent); }
.contact svg{ width:14px; height:14px; flex:none; stroke:var(--accent); }
.contact .c-val{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Credentials (education + certs disclosure) ---------- */
.edu-row{
  display:grid; grid-template-columns:1fr auto; gap:.5rem 1rem;
  padding:1rem 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.edu-co{ font-family:var(--font-display); font-weight:600; font-size:1rem; }
.edu-deg{ font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted); margin-top:.2rem; }
.edu-loc{ font-family:var(--font-mono); font-size:.78rem; color:var(--accent); text-align:right; white-space:nowrap; }

details.certs{ border-bottom:1px solid var(--rule); }
details.certs > summary{
  display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:.6rem;
  padding:.95rem .15rem; cursor:pointer; min-height:44px;
  -webkit-tap-highlight-color:transparent;
}
details.certs > summary:hover .certs-title{ color:var(--accent); }
details.certs[open] .marker{ transform:rotate(45deg); background:var(--accent-subtle); }
.certs-title{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; transition:color 200ms ease-out; }
.certs-count{ font-family:var(--font-mono); font-size:.74rem; color:var(--accent); font-weight:700; white-space:nowrap; }
.certs-body{ padding:0 .15rem 1.35rem 34px; }
.cert-group{ margin-bottom:.9rem; }
.cert-group .issuer{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:.45rem; display:block;
}
.cert-list{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; }
.cert-list span{
  font-family:var(--font-mono); font-size:.75rem; color:var(--text);
  border:1px solid var(--card-border); border-radius:4px; padding:.26rem .5rem;
}

/* ---------- Principles (in Credentials, disclosure) ---------- */
.principles-body{ padding:0 .15rem 1.35rem 34px; }
.prin-group{ margin-bottom:1rem; }
.prin-group .plabel{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:.45rem; display:block;
}
.prin-values{ font-family:var(--font-body); font-size:.9rem; color:var(--text); }
.prin-books{ margin:0; padding:0; list-style:none; }
.prin-books li{ font-size:.85rem; color:var(--text); opacity:.92; padding:.2rem 0; }
.prin-books li b{ font-weight:600; }
.prin-books li span{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-muted); }
.prin-quote{
  margin:.3rem 0 0; padding-left:.85rem; border-left:2px solid var(--accent);
  font-style:italic; font-size:.86rem; color:var(--text);
}
.prin-quote cite{ display:block; font-style:normal; font-family:var(--font-mono); font-size:.7rem; color:var(--text-muted); margin-top:.25rem; }

/* ---------- Timeline (full, main column) ---------- */
.timeline{ border-top:1px solid var(--rule); }
.t-row{
  display:grid; grid-template-columns:96px 1fr; gap:.75rem;
  padding:.75rem 0; border-bottom:1px solid var(--rule);
}
.t-date{ font-family:var(--font-mono); font-size:.74rem; color:var(--accent); white-space:nowrap; }
.t-body{ font-size:.86rem; }
.t-tag{ font-family:var(--font-mono); font-size:.68rem; color:var(--text-muted); margin-right:.5rem; }

footer.page-footer{
  font-family:var(--font-mono); font-size:.68rem; color:var(--text-muted);
  padding:2rem 1.25rem 3rem; border-top:1px solid var(--card-border);
}
@media (min-width:1024px){ footer.page-footer{ padding-left:3.5rem; } }