/* ==========================================================================
   Confetti platform-build retainer proposal
   Design language carried over from dk-portfolio-v4: technical blueprint
   crossed with brutalist editorial. White ground, cool grey ramp, one loud
   blue, saffron reserved for counters. Radius 0. No shadows. Hairlines only.
   Contrast ratios are the measured ones from folio4/app/tokens.css.
   ========================================================================== */

:root{
  --grey-100:#e4e8ed; --grey-200:#b5c1cf; --grey-300:#8b9bac;
  --grey-400:#697683; --grey-500:#49535c; --grey-600:#2c3238; --grey-700:#111417;

  --paper:#ffffff; --paper-2:var(--grey-100); --surface:#ffffff;
  --ink:var(--grey-700); --ink-2:var(--grey-500); --ink-3:var(--grey-400);
  --ink-faint:var(--grey-300);

  --line:var(--grey-200); --line-2:var(--grey-300);

  --blue:#0066ff; --blue-ink:#0047b8; --blue-deep:#003d9e;
  --blue-soft:#e8efff; --line-soft:#ccdaf6; --on-blue:#ffffff;

  --accent:#ffa100;       /* 2.03:1 on white. Decorative numerals ONLY. */
  --accent-ink:#a66600;   /* 4.64:1 on white. The readable step. */

  --font-head:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-body:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace;

  --t-display:clamp(2.25rem,5.2vw,4.25rem);
  --t-h2:clamp(1.625rem,3.2vw,2.5rem);
  --t-h3:clamp(1.0625rem,1.6vw,1.3125rem);
  --t-body:1.0625rem;
  --t-sm:0.9375rem;
  --t-label:0.6875rem;

  --track-label:0.14em;
  --track-display:-0.035em;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4.5rem; --s7:7rem;

  --rail-w:268px;
  --pad-x:56px;
  --measure:74ch;
  --hair:1px;

  --ease-firm:cubic-bezier(.32,.72,0,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:var(--t-body); line-height:1.62;
  -webkit-font-smoothing:antialiased; font-synthesis-weight:none;
}
::selection{background:var(--blue);color:var(--on-blue)}

/* page grain: one fixed layer, never animated */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:60;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--line-soft)}
a:hover{border-bottom-color:var(--blue)}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- shell ------------------------------------------------------- */
.shell{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr)}
.rail,.rail-nav{min-width:0}

/* ---------- left rail --------------------------------------------------- */
.rail{
  position:sticky; top:0; height:100vh; border-right:var(--hair) solid var(--line);
  display:flex; flex-direction:column; background:var(--paper); z-index:20;
}
.rail-head{padding:26px 24px 20px;border-bottom:var(--hair) solid var(--line)}
.rail-head b{
  display:block; font-family:var(--font-head); font-weight:700;
  font-size:.9375rem; letter-spacing:-.012em; line-height:1.25;
}
.rail-head span{
  display:block; margin-top:7px; font-family:var(--font-mono);
  font-size:var(--t-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink-3);
}
.rail-nav{flex:1;overflow-y:auto;padding:12px 0 24px;scrollbar-width:thin}
.rail-nav ol{list-style:none;margin:0;padding:0}
.rail-nav a{
  display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:baseline;
  padding:7px 24px 7px 20px; border:0; color:var(--ink-2);
  font-size:var(--t-sm); line-height:1.3; border-left:2px solid transparent;
  transition:color 140ms var(--ease-firm),border-color 140ms var(--ease-firm);
}
.rail-nav a .n{
  font-family:var(--font-mono); font-size:var(--t-label);
  color:var(--ink-faint); letter-spacing:.04em;
}
.rail-nav a:hover{color:var(--ink);border-left-color:var(--line-2)}
.rail-nav a[aria-current="true"]{
  color:var(--ink); font-weight:500; border-left-color:var(--blue);
}
.rail-nav a[aria-current="true"] .n{color:var(--blue)}
.rail-foot{
  padding:16px 24px 20px; border-top:var(--hair) solid var(--line);
  font-family:var(--font-mono); font-size:var(--t-label);
  letter-spacing:.05em; color:var(--ink-3); line-height:1.7;
}
.rail-foot .pct{color:var(--ink);font-weight:500}

/* ---------- main -------------------------------------------------------- */
main{min-width:0}
.wrap{padding:0 var(--pad-x);max-width:1180px}

/* ---------- cover ------------------------------------------------------- */
.cover{padding:104px 0 0;border-bottom:var(--hair) solid var(--line)}
.eyebrow{
  font-family:var(--font-mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-3);
  display:flex; gap:14px; align-items:center; margin-bottom:var(--s4);
}
.eyebrow::after{content:"";flex:1;height:var(--hair);background:var(--line)}
h1{
  font-family:var(--font-head); font-weight:700; font-size:var(--t-display);
  letter-spacing:var(--track-display); line-height:1.02; margin:0 0 var(--s4);
  max-width:19ch;
}
h1 .b{color:var(--blue);display:block}
.cover-lede{
  font-size:1.1875rem; line-height:1.58; color:var(--ink-2);
  max-width:58ch; margin:0 0 var(--s6);
}
.cover-facts{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:var(--hair) solid var(--line); margin-bottom:0;
}
.cover-facts div{
  padding:20px 22px 26px; border-right:var(--hair) solid var(--line);
}
.cover-facts div:last-child{border-right:0}
.cover-facts dt{
  font-family:var(--font-mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--ink-3); margin-bottom:9px;
}
.cover-facts dd{
  margin:0; font-family:var(--font-head); font-weight:500; font-size:1.0625rem;
  line-height:1.32; letter-spacing:-.01em;
}

/* ---------- sections ---------------------------------------------------- */
section{
  padding:var(--s6) 0 var(--s7);
  border-bottom:var(--hair) solid var(--line);
  scroll-margin-top:0;
}
section:last-of-type{border-bottom:0}
.sec-head{
  display:flex; align-items:baseline; gap:16px; margin-bottom:var(--s4);
}
.sec-head .idx{
  font-family:var(--font-mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); color:var(--accent-ink); flex:none;
}
h2{
  font-family:var(--font-head); font-weight:700; font-size:var(--t-h2);
  letter-spacing:-.028em; line-height:1.08; margin:0; flex:none;
}
.sec-head .rule{flex:1;height:var(--hair);background:var(--line);position:relative;top:-.35em}
h3{
  font-family:var(--font-head); font-weight:700; font-size:var(--t-h3);
  letter-spacing:-.016em; line-height:1.25; margin:var(--s5) 0 var(--s2);
}
h4{
  font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--ink-2); margin:var(--s4) 0 var(--s2);
}
p{margin:0 0 var(--s2);max-width:var(--measure)}
.lede{font-size:1.125rem;line-height:1.6;color:var(--ink-2);max-width:64ch}
ul,ol{margin:0 0 var(--s2);padding-left:1.15rem;max-width:var(--measure)}
li{margin-bottom:.4rem}
li::marker{color:var(--ink-faint)}
strong{font-weight:500;color:var(--ink)}
em,i{font-style:normal}
em{color:var(--blue-ink)}
code{
  font-family:var(--font-mono); font-size:.875em; background:var(--paper-2);
  border:var(--hair) solid var(--line); padding:1px 5px; white-space:nowrap;
}

/* ---------- spec sheet: mono label column, sans value column ------------- */
.spec{border-top:var(--hair) solid var(--line);margin:var(--s3) 0 var(--s4)}
.spec .row{
  display:grid; grid-template-columns:190px minmax(0,1fr); gap:26px;
  padding:13px 0; border-bottom:var(--hair) solid var(--line);
}
.spec dt,.spec .k{
  font-family:var(--font-mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--ink-2); padding-top:.28em;
}
.spec dd,.spec .v{margin:0;font-size:var(--t-sm);line-height:1.55}
.spec .v p:last-child{margin-bottom:0}

/* ---------- ruled table ------------------------------------------------- */
.tbl{width:100%;border-collapse:collapse;margin:var(--s3) 0 var(--s4);font-size:var(--t-sm)}
.tbl th,.tbl td{
  text-align:left; vertical-align:top; padding:12px 18px 12px 0;
  border-bottom:var(--hair) solid var(--line); line-height:1.5;
}
.tbl th{
  font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-2);
  border-bottom-color:var(--line-2); padding-bottom:9px; white-space:nowrap;
}
.tbl td:last-child,.tbl th:last-child{padding-right:0}
.tbl .num{font-family:var(--font-mono);white-space:nowrap}
.tbl tfoot td{
  border-bottom:0; border-top:2px solid var(--ink);
  font-weight:500; color:var(--ink); padding-top:14px;
}
.tbl-scroll{overflow-x:auto;margin:var(--s3) 0 var(--s4)}
.tbl-scroll .tbl{margin:0;min-width:640px}

/* ---------- module cells: hairline grid, cells share borders ------------- */
.cells{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:var(--hair) solid var(--line); border-left:var(--hair) solid var(--line);
  margin:var(--s3) 0 var(--s4);
}
.cells > div{
  border-right:var(--hair) solid var(--line);
  border-bottom:var(--hair) solid var(--line);
  padding:20px 24px 24px;
}
.cells .tag{
  font-family:var(--font-mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); color:var(--blue); display:block; margin-bottom:8px;
}
.cells h5{
  font-family:var(--font-head); font-weight:700; font-size:1rem;
  letter-spacing:-.012em; margin:0 0 8px; line-height:1.28;
}
.cells p{font-size:var(--t-sm);line-height:1.55;color:var(--ink-2);margin:0;max-width:none}

/* ---------- callout: solid tint, no blur, no left stripe ---------------- */
.note{
  background:var(--blue-soft); border:var(--hair) solid var(--line-soft);
  padding:22px 26px; margin:var(--s4) 0; max-width:var(--measure);
}
.note .tag{
  font-family:var(--font-mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--blue-ink); display:block; margin-bottom:10px;
}
.note p{margin:0;font-size:var(--t-sm);line-height:1.6}
.note p + p{margin-top:.7rem}
.note--flag{background:var(--paper-2);border-color:var(--line-2)}
.note--flag .tag{color:var(--ink-2)}

/* ---------- architecture stack diagram ---------------------------------- */
.stack{border:var(--hair) solid var(--line-2);margin:var(--s4) 0}
.layer{border-bottom:var(--hair) solid var(--line);display:grid;grid-template-columns:150px minmax(0,1fr)}
.layer:last-child{border-bottom:0}
.layer .lab{
  font-family:var(--font-mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-2);
  padding:16px 18px; border-right:var(--hair) solid var(--line);
  background:var(--paper-2); display:flex; align-items:center;
}
.layer .box{padding:14px 18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.02em;
  border:var(--hair) solid var(--line-2); padding:5px 10px; color:var(--ink);
  white-space:nowrap;
}
.chip--blue{background:var(--blue);color:var(--on-blue);border-color:var(--blue)}
.chip--soft{background:var(--blue-soft);border-color:var(--line-soft);color:var(--blue-ink)}

/* ---------- timeline gantt --------------------------------------------- */
.gantt{margin:var(--s4) 0;border-top:var(--hair) solid var(--line);overflow-x:auto}
.gantt-inner{min-width:720px}
.gantt-row{
  display:grid; grid-template-columns:172px minmax(0,1fr);
  border-bottom:var(--hair) solid var(--line); align-items:center;
}
.gantt-row .who{
  font-family:var(--font-mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-2);
  padding:14px 16px 14px 0;
}
.gantt-row .track{
  position:relative; display:grid; grid-template-columns:repeat(16,1fr);
  border-left:var(--hair) solid var(--line);
}
.gantt-row .track > .c{border-right:var(--hair) solid var(--line);min-height:46px}
.gantt-row.head .track > .c{
  min-height:auto; padding:8px 0 8px 5px; font-family:var(--font-mono);
  font-size:.625rem; color:var(--ink-3); letter-spacing:.03em;
}
.gantt-row.head .who{padding-bottom:8px}
.bar{
  position:absolute; top:10px; bottom:10px; background:var(--blue-soft);
  border:var(--hair) solid var(--line-soft);
}
.bar b{
  position:absolute; inset:0; display:flex; align-items:center; padding-left:9px;
  font-family:var(--font-mono); font-weight:400; font-size:.625rem;
  letter-spacing:.03em; color:var(--blue-ink); white-space:nowrap; overflow:hidden;
}
.bar--solid b{color:var(--on-blue)}
.bar--design b{color:var(--ink-2)}
.bar--solid{background:var(--blue);border-color:var(--blue)}
.bar--design{background:var(--paper-2);border-color:var(--line-2)}
.bar--hard{background:repeating-linear-gradient(135deg,var(--blue-soft) 0 6px,var(--paper) 6px 12px);border-color:var(--line-soft)}
.gantt-key{
  display:flex; flex-wrap:wrap; gap:20px; padding:14px 0 0;
  font-family:var(--font-mono); font-size:var(--t-label);
  letter-spacing:.05em; color:var(--ink-2);
}
.gantt-key span{display:flex;align-items:center;gap:8px}
.gantt-key i{width:22px;height:11px;display:block;border:var(--hair) solid var(--line-soft)}

/* ---------- price block ------------------------------------------------- */
.price{
  border:2px solid var(--ink); padding:34px 36px; margin:var(--s4) 0;
  max-width:var(--measure);
}
.price .amt{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(2rem,4.2vw,3.125rem); letter-spacing:-.035em; line-height:1;
  margin:0 0 6px;
}
.price .per{
  font-family:var(--font-mono); font-size:var(--t-label);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-2);
  margin:0 0 var(--s3);
}
.price .sub{font-size:var(--t-sm);color:var(--ink-2);margin:0;max-width:none}

/* ---------- footer ------------------------------------------------------ */
.foot{padding:var(--s6) 0 var(--s7);font-size:var(--t-sm);color:var(--ink-2)}
.foot .sig{
  font-family:var(--font-head); font-weight:700; font-size:1.125rem;
  color:var(--ink); letter-spacing:-.015em; margin-bottom:6px;
}

/* ---------- responsive -------------------------------------------------- */
@media (max-width:1080px){
  :root{--rail-w:230px;--pad-x:40px}
  .cover-facts{grid-template-columns:repeat(2,1fr)}
  .cover-facts div:nth-child(2){border-right:0}
  .cover-facts div:nth-child(-n+2){border-bottom:var(--hair) solid var(--line)}
}
@media (max-width:820px){
  :root{--pad-x:20px}
  .shell{grid-template-columns:1fr}
  .rail{
    position:static; height:auto; border-right:0; min-width:0; overflow:hidden;
    border-bottom:var(--hair) solid var(--line);
  }
  .rail-nav{max-height:none;padding:0;min-width:0;overflow:visible}
  .rail-nav ol{
    display:flex; overflow-x:auto; gap:0; scrollbar-width:none; max-width:100%;
    border-bottom:var(--hair) solid var(--line);
  }
  .rail-nav ol::-webkit-scrollbar{display:none}
  .rail-nav li{flex:none}
  .rail-nav a{
    grid-template-columns:auto; padding:13px 16px; white-space:nowrap;
    border-left:0; border-bottom:2px solid transparent;
  }
  .rail-nav a .n{display:none}
  .rail-nav a[aria-current="true"]{border-left:0;border-bottom-color:var(--blue)}
  .rail-foot{display:none}
  .sec-head{flex-wrap:wrap;gap:12px}
  .sec-head h2{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
  .sec-head .rule{display:none}
  .cover{padding-top:48px}
  .cover-facts{grid-template-columns:1fr}
  .cover-facts div{border-right:0;border-bottom:var(--hair) solid var(--line)}
  .spec .row{grid-template-columns:1fr;gap:5px;padding:14px 0}
  .cells{grid-template-columns:1fr}
  .layer{grid-template-columns:1fr}
  .layer .lab{border-right:0;border-bottom:var(--hair) solid var(--line)}
  .price{padding:26px 22px}
  section{padding:var(--s5) 0 var(--s6)}
}

/* ---------- print: the PDF deliverable ---------------------------------- */
@media print{
  @page{size:A4;margin:14mm 13mm}
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
  :root{--pad-x:0;--t-body:9.5pt;--t-sm:8.5pt;--t-label:6.5pt;--s2:.55rem;--s3:.8rem;--s4:1rem}
  body{font-size:9.5pt;line-height:1.44}
  body::after{display:none}
  .rail{display:none}
  .gantt-key i{width:16pt;height:8pt}
  .shell{display:block}
  .wrap{max-width:none;padding:0}
  .cover{padding:0 0 10pt;page-break-after:always;border-bottom:0}
  h1{font-size:27pt;max-width:none;margin-bottom:14pt;line-height:1.03}
  .cover-lede{font-size:11pt;margin-bottom:20pt;max-width:none}
  .cover-facts div{padding:10pt 12pt 12pt}
  .cover-facts dd{font-size:9.5pt}
  h2{font-size:15pt}
  h3{font-size:11pt;margin:14pt 0 5pt}
  h4{margin:12pt 0 5pt}
  p{margin-bottom:6pt}
  section{page-break-inside:auto;padding:13pt 0 9pt;border-bottom:.5pt solid #b5c1cf}
  .sec-head{margin-bottom:9pt;page-break-after:avoid;flex-wrap:nowrap}
  .sec-head .rule{display:block}
  h3,h4{page-break-after:avoid}
  .lede{font-size:10pt;margin-bottom:8pt}
  .spec{margin:8pt 0 10pt}
  .spec .row{padding:6pt 0;grid-template-columns:150px minmax(0,1fr);gap:16px}
  .tbl{margin:8pt 0 10pt}
  .tbl th,.tbl td{padding:6pt 12pt 6pt 0}
  .cells{margin:8pt 0 10pt;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cells > div{padding:10pt 12pt 11pt}
  .cells h5{font-size:9pt;margin-bottom:4pt}
  .stack{margin:8pt 0 10pt}
  .layer .lab{padding:8pt 10pt}
  .layer .box{padding:7pt 10pt;gap:5pt}
  .chip{font-size:6.5pt;padding:2pt 5pt}
  .note{padding:11pt 13pt;margin:10pt 0}
  .price{padding:16pt 18pt;margin:10pt 0}
  .price .amt{font-size:26pt}
  .gantt{margin:8pt 0 10pt}
  .gantt-row .track > .c{min-height:26pt}
  .bar{top:5pt;bottom:5pt}
  .bar b{font-size:6pt;padding-left:5pt}
  .gantt-key{padding-top:7pt;gap:12pt}
  ol,ul{margin-bottom:7pt}
  li{margin-bottom:3pt}
  .foot{padding:14pt 0 0}
  .tbl,.spec .row,.cells > div,.stack,.price,.note,.gantt{page-break-inside:avoid}
  .tbl-scroll,.gantt{overflow:visible}
  .tbl-scroll .tbl,.gantt-inner{min-width:0}
  a{color:var(--ink);border-bottom:0}
  p,ul,ol,.lede{max-width:none}
}