/* ═══════════════════════════════════════════════════════════════════════
   PANISSE MAURICE PADILLA — shared design core
   Direction C (cyborg-forward): near-black, bone-white, radiographic,
   monochrome. Editorial-clinical, not medical-startup blue.

   This file carries ONLY what all three properties share: tokens, reset,
   type primitives, image-slot + placeholder machinery, controls, forms,
   footer. Each property has its own layout system:
     personal.css    — specimen-plate archive. Label rail, numbered plates.
     consulting.css  — warmed editorial. Serif accents, air, sentence case.
     lab.css         — institutional technical document. Title blocks,
                       figure numbers, inverted section bars, matrix table.

   TYPE
     Archivo (variable, wdth 62–125)  display — condensed heavy caps at
                                      wdth 62, expanded marks at wdth 125
     IBM Plex Sans                    body — engineered, clinical precision
     IBM Plex Mono                    labels, spec tables, annotations
     Newsreader (consulting only)     the one warm voice in the system

   COLOR DISCIPLINE
     Monochrome only. Amber (--signal) is reserved for placeholders and
     unresolved values — never decoration. Red (--hazard) is reserved for
     the deploy gate — never decoration.

   MOCKUP — not production. No build step. Google Fonts is the only
   external host; every face has a real fallback stack.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:dark;
  --black:#050505;
  --near:#0A0A0A;
  --panel:#0D0D0C;
  --panel-2:#111110;
  --line:#242422;
  --line-soft:#181817;
  --ctl:#767268;     /* form-control + toggle boundaries — 3:1 non-text AA on every ground */
  --bone:#E8E5DE;
  --bone-hi:#F4F2ED;
  --mid:#A6A39B;
  --dim:#8A877F;
  --faint:#847F76;   /* AA on every dark surface: 5.12:1 ground, 4.75:1 worst panel.
                        #5C5A54 was 2.96:1; #7A776F passed ground but failed panels at 4.22:1 */
  --signal:#C9B45B;          /* placeholders ONLY */
  --hazard:#D2685A;  /* was #B44A3E — 3.87:1 on small text; now 6.1:1 */          /* deploy gate ONLY */
  --hazard-dim:#7A2F27;

  --display:"Archivo","Helvetica Neue","Arial Narrow",Arial,sans-serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* type scale — one octave of deliberate steps, not per-use guesses.
     Display sizes are set per-property (each property paces differently). */
  --t-h2:clamp(30px,3.8vw,50px);
  --t-h3:18px;
  --t-lede:clamp(16px,1.6vw,18px);
  --t-body:15px;
  --t-small:13px;
  --t-label:11px;
  --t-micro:10px;

  --gut:clamp(20px,4vw,44px);
  --maxw:1240px;
}

/* ── LIGHT MODE — designed, not inverted ─────────────────────────
   Same semantic roles: --black is THE GROUND, --bone is THE INK.
   Keeping the roles (rather than the literal colors) means every
   ground/ink relationship — .cta, ::selection, .docbar, .tn knockouts —
   flips as a relationship, not as a color swap.
   Base palette = the personal property (bone archival paper). The
   consulting and lab stylesheets re-warm / re-cool it, exactly as
   their dark grounds do. All values verified WCAG 2.2 AA (4.5:1 text,
   3:1 boundaries) — table in README.
   The attribute is set by the inline head script on every page BEFORE
   first paint: stored choice first, else prefers-color-scheme.        */
:root[data-theme="light"]{
  color-scheme:light;
  --black:#F2F0EA;       /* ground: bone archival paper */
  --near:#EAE7E0;
  --panel:#E9E6DF;
  --panel-2:#E2DFD7;
  --line:#CFCCC3;
  --line-soft:#DEDBD3;
  --ctl:#7F7B72;         /* 3.3:1+ vs every light panel/ground */
  --bone:#191813;        /* ink */
  --bone-hi:#000000;
  --mid:#4B4841;         /* 8.0:1 on ground */
  --dim:#5D5A52;         /* 6.0:1 on ground */
  --faint:#63605A;       /* 5.5:1 ground · 4.7:1 worst panel */
  --signal:#7A5A00;      /* placeholders ONLY — 5.6:1, still unmistakably amber */
  --hazard:#A72D1A;      /* deploy gate ONLY — 6.1:1 on ground */
  --hazard-dim:#C08B7E;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--black);color:var(--bone);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.6;
  font-feature-settings:"ss01" 0;overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
::selection{background:var(--bone);color:var(--black)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ── type primitives ──────────────────────────────────────────── */
.lbl{
  font:500 var(--t-label)/1.2 var(--mono);letter-spacing:.28em;
  text-transform:uppercase;color:var(--dim);display:block;
}
.lbl-a{color:var(--bone)}
.micro{font:400 var(--t-micro)/1.6 var(--mono);letter-spacing:.08em;color:var(--faint)}

h1,h2,h3,h4{margin:0}
.display{
  font-family:var(--display);font-weight:780;font-stretch:62%;
  text-transform:uppercase;letter-spacing:.005em;line-height:.86;
}
h2{
  font-family:var(--display);font-weight:740;font-stretch:70%;
  font-size:var(--t-h2);line-height:.94;text-transform:uppercase;
  letter-spacing:.008em;
}
h3{font:600 var(--t-h3)/1.3 var(--sans);letter-spacing:-.012em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.lede{font-size:var(--t-lede);line-height:1.7;color:var(--mid);max-width:52ch}
.body{font-size:var(--t-body);line-height:1.68;color:var(--mid);max-width:62ch}
.small{font-size:var(--t-small);line-height:1.6;color:var(--dim)}
.num{font-variant-numeric:tabular-nums}

/* ── image slot — a designed placeholder for photography ─────────
   Every slot names its asset ID, ratio, and intended subject so the
   generation prompt can be written directly against the markup.
   The amber tag keeps it unmistakably NOT a finished asset.        */
.slot{
  position:relative;overflow:hidden;background:
    linear-gradient(160deg,#0E0E0D 0%,#080808 55%,#0C0C0B 100%);
  border:1px solid var(--line);
  display:grid;place-items:center;min-height:120px;
}
.slot::before{ /* film-grain scrim so the block reads as latent image */
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:
    repeating-linear-gradient(45deg,rgba(232,229,222,.028) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(-45deg,rgba(232,229,222,.02) 0 1px,transparent 1px 13px);
}
.slot::after{ /* registration crosshair */
  content:"";position:absolute;width:26px;height:26px;pointer-events:none;
  top:50%;left:50%;transform:translate(-50%,-50%);
  background:
    linear-gradient(var(--faint),var(--faint)) center/1px 100% no-repeat,
    linear-gradient(var(--faint),var(--faint)) center/100% 1px no-repeat;
  opacity:.55;
}
.slot-tag{
  position:absolute;top:12px;left:12px;z-index:2;
  border:1px dashed var(--signal);color:var(--signal);background:rgba(5,5,5,.72);
  padding:5px 9px;font:500 var(--t-micro)/1.4 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;
}
.slot-spec{ /* film-annotation position: bottom-left, clear of the crosshair */
  position:absolute;left:14px;bottom:12px;right:22%;z-index:1;
  text-align:left;font:400 var(--t-micro)/1.75 var(--mono);
  letter-spacing:.07em;text-transform:uppercase;color:var(--dim);max-width:58ch;
}
.slot-cap{ /* figure caption under a slot or figure */
  display:flex;gap:14px;align-items:baseline;padding:10px 2px 0;
  font:400 var(--t-micro)/1.6 var(--mono);letter-spacing:.06em;color:var(--dim);
}
.slot-cap b{font-weight:600;color:var(--bone);letter-spacing:.14em;white-space:nowrap}

/* ── unresolved-value placeholders — must never read as real ──── */
.ph{color:var(--signal);border-bottom:1px dashed var(--signal)}
.ph-box{
  border:1px dashed var(--signal);color:var(--signal);padding:4px 9px;
  font:500 var(--t-micro)/1.5 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;display:inline-block;background:rgba(201,180,91,.05);
}

/* ── hazard / deploy gate — red is reserved for this ──────────── */
.flag{
  margin:36px 0 0;padding:16px 18px;border:1px solid var(--hazard-dim);
  background:#140807;color:#D99A90;font:500 12px/1.7 var(--mono);
}
.flag b{color:#EFB9B0;letter-spacing:.1em}

/* ── controls ─────────────────────────────────────────────────── */
.cta{
  display:inline-block;background:var(--bone);color:var(--black);
  text-decoration:none;font:600 12px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;padding:17px 30px;border:1px solid var(--bone);
  transition:background .15s ease,color .15s ease;
}
.cta:hover,.cta:focus-visible{background:transparent;color:var(--bone)}
.cta-ghost{background:transparent;color:var(--bone)}
.cta-ghost:hover,.cta-ghost:focus-visible{background:var(--bone);color:var(--black)}
.arrow-link{
  display:inline-flex;gap:10px;align-items:baseline;text-decoration:none;
  font:600 var(--t-label)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);padding:6px 0;border-bottom:1px solid var(--line);
  transition:border-color .15s ease;
}
.arrow-link:hover,.arrow-link:focus-visible{border-color:var(--bone)}
.arrow-link::after{content:"→";font-family:var(--sans)}

/* ── form ─────────────────────────────────────────────────────── */
.form{display:grid;gap:16px;max-width:540px}
.form label{display:grid;gap:8px}
.form select,.form input,.form textarea{
  background:var(--panel);border:1px solid var(--ctl);color:var(--bone);
  font:400 15px/1.5 var(--sans);padding:13px 14px;border-radius:0;width:100%;
}
.form textarea{min-height:120px;resize:vertical}
.form :is(select,input,textarea):focus-visible{outline:2px solid var(--bone);outline-offset:-2px}

/* ── footer ───────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:30px 0 46px}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:baseline}
footer a{color:var(--dim);text-decoration:none}
footer a:hover,footer a:focus-visible{color:var(--bone);text-decoration:underline}
.foot-note{font:400 var(--t-micro)/1.6 var(--mono);letter-spacing:.06em;color:var(--faint)}

/* ── footer type — .mono-sm was used on every footer and defined nowhere,
   so footers rendered in unstyled body text. Defined here once.        ── */
.mono-sm{
  font:400 var(--t-micro)/1.7 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}
/* footer link zones: own pages · other properties · legal.
   Zones are separated by a rule, not by whitespace — a gap alone was
   indistinguishable from the separator between links inside a zone. */
.f-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 0;margin-left:auto}
.f-zone{display:flex;flex-wrap:wrap;gap:0 6px;align-items:baseline}
.f-zone + .f-zone{
  margin-left:16px;padding-left:16px;border-left:1px solid var(--line);
}
.f-links a{white-space:nowrap}
.f-links .sep{color:var(--line)}
@media(max-width:700px){
  footer .wrap{gap:12px}
  .f-links{margin-left:0;gap:8px 0}
  .f-zone + .f-zone{margin-left:12px;padding-left:12px}
}

/* ── shared media behaviour ───────────────────────────────────── */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── theme toggle — self-contained; must NOT assume .nav context
   (legal pages + 404 carry no property nav styling). DARK · LIGHT
   as a segmented mono label; the active segment is the bright one.
   aria-pressed = light mode engaged. Hidden without JS (a dead
   control is worse than none) — the head script stamps .js on html. */
html:not(.js) .theme-toggle{display:none}
.theme-toggle{
  display:inline-flex;align-items:center;align-self:center;gap:8px;
  padding:8px 11px;cursor:pointer;background:transparent;
  border:1px solid var(--ctl);color:var(--dim);
  font:500 var(--t-micro)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  transition:border-color .15s ease;
}
.theme-toggle:hover,.theme-toggle:focus-visible{border-color:var(--bone)}
.theme-toggle .tt-o{color:var(--faint);transition:color .15s ease}
.theme-toggle[aria-pressed="false"] .tt-o:first-child{color:var(--bone)}
.theme-toggle[aria-pressed="true"] .tt-o:last-child{color:var(--bone)}
.theme-toggle .tt-dot{ /* mode glyph: half-inked circle */
  width:9px;height:9px;border-radius:50%;border:1px solid currentColor;
  background:linear-gradient(90deg,currentColor 0 50%,transparent 50%);
  flex:none;
}
.theme-toggle-corner{position:fixed;top:16px;right:16px;z-index:60;background:var(--black)}

/* ── light-mode structure: the pieces a token swap cannot carry ── */
/* latent-image slot becomes an unexposed plate: paper-grey field    */
[data-theme="light"] .slot{
  background:linear-gradient(160deg,#EDEBE4 0%,#F5F3EE 55%,#EFEDE6 100%);
}
[data-theme="light"] .slot::before{
  background:
    repeating-linear-gradient(45deg,rgba(25,24,19,.035) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(-45deg,rgba(25,24,19,.025) 0 1px,transparent 1px 13px);
}
[data-theme="light"] .slot-tag{background:rgba(245,243,238,.88)}
[data-theme="light"] .ph-box{background:rgba(122,90,0,.06)}
/* deploy-gate flag: light clinical-incident register, same weight   */
[data-theme="light"] .flag{background:#F6E5E0;border-color:var(--hazard-dim);color:#7E2A1C}
[data-theme="light"] .flag b{color:#5E1F13}
/* photography: dark plates MOUNTED on the light page — white mat +
   rule, the specimen-plate idiom — instead of raw dark rectangles   */
[data-theme="light"] .plate-img{
  background:#FFFFFF;padding:clamp(8px,1vw,14px);border-color:var(--line);
  box-shadow:0 1px 2px rgba(25,24,19,.08);
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ── delivered photography — same footprint as .slot it replaces ── */
.plate-img{
  width:100%;height:auto;object-fit:cover;display:block;
  border:1px solid var(--line);background:var(--panel);
}


/* ── skip link — first tab stop, visually hidden until focused ─── */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--bone);color:var(--black);padding:14px 20px;
  font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;
}
.skip:focus{left:0}

/* ── print — the CV page will get printed; make it survive ───────
   Reconciled with the theme layer: print forces the LIGHT ink/paper
   tokens with !important so it beats both the [data-theme] blocks and
   the property stylesheets' literal body colors, whatever mode the
   screen was in. One palette definition owns print.                  */
@media print{
  :root{--black:#fff!important;--near:#fff!important;--panel:#fff!important;
        --panel-2:#fff!important;--bone:#000!important;--bone-hi:#000!important;
        --mid:#333!important;--dim:#444!important;--faint:#555!important;
        --line:#bbb!important;--line-soft:#ddd!important;--ctl:#888!important;
        --signal:#7A5A00!important;--hazard:#A72D1A!important;
        --hazard-dim:#C08B7E!important}
  body{background:#fff!important;color:#000!important;font-size:11pt;line-height:1.45}
  .nav,.skip,.gate,.cta,.arrow-link,.form,.embed-stub,.slot,.ph-box,
  .theme-toggle,.theme-toggle-corner{display:none!important}
  img{max-width:100%!important;filter:grayscale(1) contrast(1.1)}
  .plate-img{background:#fff!important;padding:0!important;box-shadow:none!important}
  .rad-ghost,.rad-band,.door-rad,.field{display:none!important}
  .docbar{background:#fff!important;color:#000!important;
          border-top:1pt solid #000;border-bottom:1pt solid #000}
  .docbar .dan{color:#444!important}
  .pullband,.titleblock,.contrib-cols>div{background:#fff!important}
  section,.plate,.doc{padding:14pt 0!important;break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .flag{border:1pt solid #900!important;color:#900!important;background:#fff!important}
  .flag b{color:#900!important}
}

/* form result note */
.form-note{margin:12px 0 0;font:500 12.5px/1.6 var(--mono);letter-spacing:.02em}
.form-note.ok{color:var(--bone)}
.form-note.warn{color:var(--signal)}

/* ══════════════════════════════════════════════════════════════════
   MOBILE NAV — below 780px the nav collapses to a disclosure menu.
   Above it, the button is hidden and the list behaves as before.
   Without this the 6–7 item navs wrapped into a ragged multi-row
   block with orphaned borders. JS lives in theme.js; with JS off the
   list stays visible (progressive enhancement, never a dead nav).
   ══════════════════════════════════════════════════════════════════ */
.nav-toggle{
  display:none;align-items:center;gap:9px;margin-left:auto;
  background:transparent;border:1px solid var(--line);color:var(--bone);
  font:600 var(--t-micro)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  padding:11px 13px;cursor:pointer;
}
.nav-toggle:hover,.nav-toggle:focus-visible{border-color:var(--dim)}
.nav-toggle .bars{display:inline-flex;flex-direction:column;gap:3px;width:14px}
.nav-toggle .bars i{display:block;height:1.5px;background:var(--bone);border-radius:1px}
.nav-toggle[aria-expanded="true"] .lbl-open{display:none}
.nav-toggle[aria-expanded="false"] .lbl-close{display:none}

@media(max-width:780px){
  /* selectors here are deliberately one element deeper than the per-property
     rules (.nav ul a), because property stylesheets load AFTER system.css and
     would otherwise win on equal specificity. */
  .nav .wrap{flex-wrap:wrap;align-items:center;gap:10px;min-height:56px}
  .nav-toggle{display:inline-flex;order:2;margin-left:auto}
  .nav .wrap .mark{order:1;border-right:0;padding-right:0;margin-right:0}
  /* compact the theme control to its icon — the word labels pushed the
     control onto a second row whenever the wordmark was long. */
  .nav .wrap .theme-toggle{order:3;margin-left:0!important;padding:11px 12px;gap:0}
  .nav .wrap .theme-toggle .tt-o{display:none}
  /* wordmarks are widely tracked at desktop; at 390 that alone could exceed
     the row and push the controls onto a second line. */
  .nav .wrap .mark{
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:11.5px;letter-spacing:.16em;
  }
  .nav .wrap .nav-toggle{padding:11px 12px;letter-spacing:.12em}

  /* JS present: collapse the list until opened */
  .js .nav ul{
    display:none;order:4;width:100%;flex-direction:column;gap:0;
    margin:0;padding:4px 0 8px;border-top:1px solid var(--line);
  }
  .js .nav.open ul{display:flex}
  .nav ul li{width:100%}
  .nav ul li a{
    display:block;width:100%;padding:14px 2px;min-height:0;height:auto;
    border-left:0;border-right:0;border-top:0;
    border-bottom:1px solid var(--line-soft);background:transparent;
  }
  .nav ul li:last-child a{border-bottom:0}
  .nav ul li a.on{border-bottom-color:var(--bone);background:transparent}
}