/* ---------------------------------------------------------------------------
   RNCP retro-planner — the Aya talk deck's identity, turned into a page.
   An engineering data-sheet on instrument paper: paper greys with a cyan bias,
   grid-teal as the accent, vermilion for the red-pen annotations, one forest
   green for what is done. Tokens copied from rncp-work-experience-1/index.html.
   --------------------------------------------------------------------------- */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/Archivo-400-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/IBMPlexMono-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/IBMPlexMono-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/IBMPlexMono-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url(../fonts/IBMPlexSans-100-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/IBMPlexSerif-400-italic.woff2) format('woff2'); }

:root{
  color-scheme: light;
  --disp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;

  --paper:#EDEFEA; --paper-2:#E3E6DF; --paper-3:#F6F7F3;
  --ink:#151A1B; --ink-2:#4E5A5B; --ink-3:#6F7B79;
  --rule:#C6CDC3; --grid:rgba(21,26,27,.055);
  --cool:#0F6277; --cool-line:rgba(15,98,119,.38); --cool-soft:rgba(15,98,119,.09);
  --hot:#BE3C21; --hot-line:rgba(190,60,33,.40); --hot-soft:rgba(190,60,33,.08);
  --green:#2C7A4C; --green-line:rgba(44,122,76,.40); --green-soft:rgba(44,122,76,.09);
  --ochre:#9E7318;
  --hatch:rgba(21,26,27,.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#0F1518; --paper-2:#171F23; --paper-3:#1A2429;
    --ink:#E9EDE7; --ink-2:#9DABA9; --ink-3:#7F8B88;
    --rule:#2B363B; --grid:rgba(233,237,231,.045);
    --cool:#6BC0D6; --cool-line:rgba(107,192,214,.42); --cool-soft:rgba(107,192,214,.12);
    --hot:#F07A55; --hot-line:rgba(240,122,85,.45); --hot-soft:rgba(240,122,85,.11);
    --green:#6BC98F; --green-line:rgba(107,201,143,.45); --green-soft:rgba(107,201,143,.12);
    --ochre:#D8A93C;
    --hatch:rgba(233,237,231,.10);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#0F1518; --paper-2:#171F23; --paper-3:#1A2429;
  --ink:#E9EDE7; --ink-2:#9DABA9; --ink-3:#7F8B88;
  --rule:#2B363B; --grid:rgba(233,237,231,.045);
  --cool:#6BC0D6; --cool-line:rgba(107,192,214,.42); --cool-soft:rgba(107,192,214,.12);
  --hot:#F07A55; --hot-line:rgba(240,122,85,.45); --hot-soft:rgba(240,122,85,.11);
  --green:#6BC98F; --green-line:rgba(107,201,143,.45); --green-soft:rgba(107,201,143,.12);
  --ochre:#D8A93C;
  --hatch:rgba(233,237,231,.10);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh;
  background-color:var(--paper);
  background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--grid) 1px,transparent 1px);
  background-size:48px 48px; background-position:-1px -1px;
  color:var(--ink); font:400 17px/1.5 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
main{max-width:1248px;margin:0 auto;padding:0 56px;display:grid;grid-template-columns:minmax(0,1fr);gap:88px}
main > *,.grid2 > *{min-width:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- rails --------------------------------------------------------------- */
.rail{max-width:1248px;margin:0 auto;display:flex;align-items:center;gap:20px;
  padding:36px 56px;font:500 13px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.rail.bot{padding-top:96px;padding-bottom:44px}
.rail .hair{flex:1;height:1px;background:var(--rule);min-width:12px}
.rail .mark{white-space:nowrap}
.rail .mark b{color:var(--cool);font-weight:600}
.rail .mark em{font-style:normal;color:var(--ink-2)}
.tbtn{all:unset;display:grid;place-items:center;width:30px;height:30px;
  border:1px solid var(--rule);color:var(--ink-2);cursor:pointer;flex:0 0 auto}
.tbtn:hover{border-color:var(--ink-3);color:var(--ink)}
.tbtn:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.tbtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}
.tbtn svg path{fill:currentColor;stroke:none}

/* --- type ---------------------------------------------------------------- */
.eyebrow{margin:0;font:500 13px/1.3 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
h1,h2,h3{margin:0;font-family:var(--disp);text-wrap:balance}
h1{font-size:clamp(46px,8.4vw,112px);font-weight:800;font-variation-settings:"wdth" 112;
  line-height:.94;letter-spacing:-.03em;max-width:12ch}
h2{font-size:clamp(28px,3.6vw,44px);font-weight:700;font-variation-settings:"wdth" 104;
  line-height:1.05;letter-spacing:-.018em}
h3{font-size:24px;font-weight:700;line-height:1.15}
.lede{margin:0;font-size:clamp(19px,2vw,24px);line-height:1.46;color:var(--ink-2);max-width:60ch}
.lede strong{color:var(--ink);font-weight:600}
.hero{display:grid;gap:30px;padding-top:40px}
.shead{display:grid;gap:14px;margin-bottom:32px}

/* --- data-sheet field ---------------------------------------------------- */
.field{border-top:1px solid var(--rule);padding-top:18px;min-width:0}
.field > .k{display:block;margin:0 0 16px;font:500 12px/1.2 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.field.on-hot{border-top-color:var(--hot-line)} .field.on-hot > .k{color:var(--hot)}
.field.on-cool{border-top-color:var(--cool-line)} .field.on-cool > .k{color:var(--cool)}
.field.on-green{border-top-color:var(--green-line)} .field.on-green > .k{color:var(--green)}
.field p{margin:10px 0 0;color:var(--ink-2)}
.field p .late{color:var(--hot)}
.field h3 + p{margin-top:12px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:52px}
.grid2.wide-left{grid-template-columns:1.25fr 1fr}

/* --- hero numbers -------------------------------------------------------- */
.verdict{display:grid;gap:44px}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:36px}
.stat .n{display:block;font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 112;
  font-size:clamp(34px,4vw,58px);line-height:.9;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.stat .u{font:500 16px/1 var(--mono);color:var(--ink-2);letter-spacing:.04em;margin-left:6px}
.stat .sub{display:block;margin-top:12px;font-size:14px;line-height:1.4;color:var(--ink-3)}
.stat.good .n{color:var(--green)} .stat.bad .n{color:var(--hot)} .stat.acc .n{color:var(--cool)}

/* --- the presenter's red-pen annotation ---------------------------------- */
.ask{display:inline-flex;align-items:center;gap:20px;max-width:64ch;justify-self:start;
  padding:18px 24px;border:1.5px solid var(--hot-line);background:var(--hot-soft);
  transform:rotate(-.55deg)}
.ask .tag{font:600 12px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--hot);border-right:1px solid var(--hot-line);padding-right:20px;white-space:nowrap}
.ask q{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2vw,26px);line-height:1.3;
  color:var(--hot);quotes:"\201C" "\201D"}
.ask.ok{border-color:var(--green-line);background:var(--green-soft)}
.ask.ok .tag{color:var(--green);border-right-color:var(--green-line)}
.ask.ok q{color:var(--green)}

/* --- chips --------------------------------------------------------------- */
.chip{display:inline-block;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  padding:7px 9px;border:1px solid var(--rule);background:var(--paper-3);color:var(--ink-2);white-space:nowrap}
.chip.cool{color:var(--cool);border-color:var(--cool-line);background:var(--cool-soft)}
.chip.bad{color:var(--hot);border-color:var(--hot-line);background:var(--hot-soft)}
.chip.good{color:var(--green);border-color:var(--green-line);background:var(--green-soft)}
.chip.warn{color:var(--ochre);border-color:var(--ochre)}

/* --- gantt --------------------------------------------------------------- */
.legend{display:flex;flex-wrap:wrap;gap:10px 24px;margin:-8px 0 22px;
  font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.lg{display:inline-block;width:22px;height:10px}
.lg.done{background:var(--green)} .lg.active{background:var(--hot)}
.lg.planned{background:var(--cool)} .lg.base{height:0;border-top:2px dashed var(--ink-3)}
.lg.off{background:repeating-linear-gradient(45deg,var(--hatch) 0 2px,transparent 2px 6px);border:1px solid var(--rule)}

.gwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);background:color-mix(in srgb,var(--paper-3) 55%,transparent)}
.gantt{position:relative;min-width:880px;display:grid;grid-template-columns:200px 1fr}
.g-axis,.g-row{display:contents}
.g-lab{padding:0 14px;display:flex;align-items:center;gap:10px;min-height:38px;min-width:0;overflow:hidden;
  font:500 13px/1.2 var(--mono);color:var(--ink-2);border-right:1px solid var(--rule);white-space:nowrap}
.g-lab .nm{overflow:hidden;text-overflow:ellipsis}
.g-lab .i{color:var(--ink-3);font-variant-numeric:tabular-nums;width:1.6em}
.g-lab.cur{color:var(--hot)}
.g-lab.done{color:var(--ink-3)}
.g-track{position:relative;min-height:38px;border-bottom:1px solid var(--grid)}
.g-axis .g-lab,.g-axis .g-track{min-height:44px;border-bottom:1px solid var(--rule)}
.g-month{position:absolute;top:0;bottom:0;border-left:1px solid var(--rule);padding:14px 0 0 6px;
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.g-month b{display:block;margin-top:5px;font-weight:500;color:var(--ink-2)}
.g-over{position:absolute;top:0;bottom:0;left:200px;right:0;pointer-events:none}
.g-off{position:absolute;top:44px;bottom:44px;background:repeating-linear-gradient(45deg,var(--hatch) 0 2px,transparent 2px 6px)}
.g-line{position:absolute;top:0;bottom:0;width:0;border-left:1.5px solid var(--ink-2)}
.g-line span{position:absolute;bottom:8px;left:5px;font:600 10px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;background:var(--paper);padding:2px 3px}
.g-line.wed{border-left-color:var(--ochre)} .g-line.wed span{color:var(--ochre)}
.g-line.dead{border-left:2px solid var(--hot)} .g-line.dead span{color:var(--hot);left:auto;right:5px;bottom:24px}
.g-line.risk{border-left:1.5px dashed var(--hot-line)} .g-line.risk span{color:var(--hot);left:auto;right:5px}
.g-line.today{border-left:2px solid var(--cool)} .g-line.today span{color:var(--cool)}
.g-marks .g-track,.g-marks .g-lab{min-height:44px;border-bottom:0}
.bar{position:absolute;top:10px;height:13px;min-width:3px}
.bar.done{background:var(--green)}
.bar.active{background:var(--hot)}
.bar.planned{background:var(--cool)}
.bar.team{background-image:repeating-linear-gradient(90deg,transparent 0 6px,rgba(255,255,255,.28) 6px 8px)}
.g-base{position:absolute;top:28px;height:0;border-top:2px dashed var(--ink-3);opacity:.7}

/* --- ledger -------------------------------------------------------------- */
.twrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.ledger{width:100%;border-collapse:collapse;font-size:15px;min-width:820px}
.ledger th{font:500 11px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;padding:0 12px 12px;border-bottom:1px solid var(--ink-3)}
.ledger td{padding:13px 12px;border-bottom:1px solid var(--rule);vertical-align:baseline}
.ledger td.num,.ledger th.num{text-align:right;font-variant-numeric:tabular-nums}
.ledger td.mono{font:400 14px/1.3 var(--mono);white-space:nowrap}
.ledger td.name{font-weight:600}
.ledger tr.cur td{background:var(--hot-soft)}
.ledger tr.done td{color:var(--ink-3)}
.ledger .late{color:var(--hot);font-weight:600} .ledger .early{color:var(--green);font-weight:600}

/* --- checkpoints + calendar --------------------------------------------- */
ol.checks,ul.cal{list-style:none;margin:0;padding:0;display:grid}
ol.checks li,ul.cal li{display:grid;grid-template-columns:128px 1fr auto;gap:16px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--rule)}
ol.checks .d,ul.cal .d{font:500 13px/1.3 var(--mono);color:var(--ink-2);white-space:nowrap}
ol.checks .t{font-weight:500}
ol.checks li.done .t{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--green-line)}
ul.cal li{grid-template-columns:128px 1fr}
ul.cal .t{color:var(--ink-2)} ul.cal .t strong{color:var(--ink);font-weight:600}
ul.cal .t em{font-style:normal;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ochre);margin-left:8px}
ul.cal li.risk .t strong{color:var(--hot)}

a{color:var(--cool)}
a:focus-visible,button:focus-visible{outline:2px solid var(--hot);outline-offset:2px}

/* --- small screens ------------------------------------------------------- */
@media (max-width: 1080px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 760px){
  main{padding:0 16px;gap:64px}
  .rail{padding:22px 16px;gap:12px;font-size:11px}
  .rail.bot{padding-top:64px}
  .rail .wide{display:none}
  .grid2,.grid2.wide-left{grid-template-columns:1fr;gap:44px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
  .ask{display:grid;gap:10px;transform:none}
  .ask .tag{border-right:0;padding-right:0}
  .ask .tag br{display:none}
  ol.checks li{grid-template-columns:1fr auto;gap:4px 12px}
  ol.checks .d{grid-column:1 / -1}
  ul.cal li{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion: no-preference){
  .bar{transition:opacity .2s ease}
}