@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;450;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================
   Portfolio · CASE PAGE SYSTEM   v1.0   ·   2026-07-27
   ------------------------------------------------------------
   Loaded AFTER each page's own <style>, so it owns the shared
   components and each page keeps only its palette and its
   bespoke artwork.

   Colour comes ONLY from palette slots the page defines:
     --bg  --ink  --body  --mut  --line  --hair  --accent
   Never hardcode a colour in this file.

   Type pair: Inter everywhere, IBM Plex Mono for eyebrows,
   the footer, and anything that should read as data.

   Where each rule came from (Cesar's picks):
     body copy .......... Confirmo
     hero title + lede .. Confirmo
     section title size . Starcount
     section eyebrow .... Starcount, auto-numbered
     stat frame ......... Starcount, left dividers, no rules
     stat type .......... Confirmo canon sizes, in Inter
     role summary line .. Confirmo
     section rhythm ..... between Confirmo and Mara
     figure spacing ..... Confirmo
     footer ............. Confirmo
   ============================================================ */

:root{
  --sysFont:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --sysMono:'IBM Plex Mono',ui-monospace,monospace;
  --figT:48px;      /* air above a graphic  · Confirmo */
  --figB:56px;      /* air below a graphic  · Confirmo */
  --figT1:72px;     /* air above the HERO graphic, more than a section figure */
  --secGap:166px;   /* section separation   · Confirmo 168, Mara 264, this lands between */
  --secPadT:50px;   /* section top padding, under the rule */
  --sec1Gap:140px;  /* before the FIRST section: 140 + 40 = 180 */
  --sec1PadT:40px;
  --heroTop:90px;   /* air above the hero  · Confirmo */
  --colW:900px;     /* content column      · Confirmo */
  --colPad:32px;    /* column side padding · Confirmo */
}

/* ---- page order ---------------------------------------------
   HERO      h1 + .lede + artwork       no eyebrow, no number
   STATS     .band > .in > .stat x4     no eyebrow, no number
             + .roleline
   SECTIONS  .sec, numbered 01..N       first one with body copy is 01
   FOOTER    .foot
   Only .sec increments the counter, so the hero and the stats
   can never take a number.
   ------------------------------------------------------------ */

/* ---- body copy · Confirmo ---------------------------------- */
body{font-family:var(--sysFont);font-size:16.5px;line-height:1.7;font-weight:450;-webkit-font-smoothing:antialiased;counter-reset:sec}
p{font-family:var(--sysFont);font-size:16.5px;line-height:1.7;font-weight:450;color:var(--body);max-width:64ch;margin:0 0 16px}
p:last-child{margin-bottom:0}
b,strong{font-weight:600}

/* ---- hero · Confirmo --------------------------------------- */
.hd{padding-top:var(--heroTop)}
/* hero title and lede run to 88% of the stat band's width */
h1{font-family:var(--sysFont);font-size:clamp(38px,5.6vw,64px);line-height:1.04;letter-spacing:-.035em;font-weight:800;margin:0 0 24px;max-width:88%;color:var(--ink)}
.lede{font-family:var(--sysFont);font-size:clamp(17px,1.6vw,19.5px);line-height:1.65;font-weight:450;max-width:88%;color:var(--body);margin:0}

/* ---- section title · size from Starcount ------------------- */
h2{font-family:var(--sysFont);font-size:clamp(30px,4.2vw,46px);line-height:1.12;letter-spacing:-.028em;font-weight:700;margin:0 0 22px;max-width:24ch;color:var(--ink)}

/* ---- section eyebrow · Starcount, self-numbering ------------ */
.sec{counter-increment:sec}
.lab{font:600 11px/1 var(--sysMono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.lab::before{content:counter(sec,decimal-leading-zero) " \00b7  "}

/* ---- section rhythm ---------------------------------------- */
.sec{margin-top:var(--secGap);padding:var(--secPadT) 0 0;border-top:1px solid;border-image:linear-gradient(90deg,var(--hair),transparent 80%) 1}
.sec:first-of-type{border-top:0;margin-top:var(--sec1Gap);padding-top:var(--sec1PadT)}   /* the hero separates it */

/* ---- stats · Starcount frame, Confirmo canon type in Inter -- */
.band{margin:64px 0 0;padding:0;border:0}
.band .in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.band .stat{padding:6px 0 8px 20px;border-left:1px solid var(--line)}
.band .stat b{display:block;font:700 clamp(24px,2.7vw,33px)/1.2 var(--sysFont);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.band .stat span{display:block;margin-top:5px;font:500 11px/1.5 var(--sysFont);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.band .stat i{display:block;margin-top:4px;font:450 11px/1.45 var(--sysFont);font-style:normal;color:var(--mut);opacity:.75}

/* ---- role summary · Confirmo ------------------------------- */
.roleline{margin:20px 0 0;font:450 13.5px/1.65 var(--sysFont);color:var(--mut);max-width:none}
.roleline b{color:var(--body);font-weight:600}

/* ---- figures · Confirmo spacing ----------------------------
   ALIGNMENT RULE: a figure that fits the column is LEFT aligned,
   flush with the text edge. Only a composition wider than the
   column is centred, and it centres by bleeding past the column
   (left:50% + translateX(-50%)), never by auto side margins.
   ------------------------------------------------------------ */
.fig{margin:var(--figT) 0 var(--figB)}

/* ---- footer · Confirmo -------------------------------------
   Contract: Cesar Garcia · <role, exactly as spine.js> · <Company>
   ------------------------------------------------------------ */
.foot{margin-top:120px;border-top:1px solid var(--hair);padding:22px 0;font:400 12px/1.5 var(--sysMono);color:var(--mut);text-align:center;max-width:none}

@media(max-width:760px){
  .band .in{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  :root{--secGap:110px}
}

/* ---- global project navbar -------------------------------------
   [ Home ]            [ Project · Descriptor ]            [ theme ]
   3-col grid so the middle is truly centred whatever the sides weigh.
   Pages must NOT redeclare .flag; this layer owns it.
   ---------------------------------------------------------------- */
.flag{position:sticky;top:0;z-index:300;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  padding:9px 20px;background:var(--paperT);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);font:11px/1.4 var(--sysMono);letter-spacing:.08em;color:var(--flagink)}
.flag .navhome{justify-self:start;font:700 11px/1 var(--sysFont);letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);text-decoration:none;transition:color .15s}
.flag .navhome:hover{color:var(--ink)}
.flag .fv{justify-self:center;text-align:center;white-space:nowrap;margin:0}
.flag b{color:var(--lab);font-weight:600}
.flag .thsw{justify-self:end;display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);
  border-radius:999px;padding:2px;cursor:pointer}
.flag .thsw button{font:600 10px/1 var(--sysFont);letter-spacing:.1em;text-transform:uppercase;background:none;
  border:0;color:var(--mut);cursor:pointer;padding:5px 9px;border-radius:999px;transition:background .15s,color .15s}
.flag .thsw button.ic{width:32px;padding:0;height:20px;display:inline-flex;align-items:center;justify-content:center}
.flag .thsw button.ic svg{width:14px;height:14px;display:block}
.flag .thsw button:hover{color:var(--ink)}
.flag .thsw button.on{background:var(--line);color:var(--ink)}
@media(max-width:560px){.flag .fv{font-size:10px}}