/* Shared page chrome for the Osmio static rebuild. Everything else — colour, type, spacing,
   drawn edges — comes from tokens/*.css via styles.css. This file only adds layout utilities
   that reskin.html established and every page reuses. */

html,body{margin:0}

/* NEVER set a `padding` shorthand on .wrap — it resets padding-left/right and kills the
   gutter. Use .band-pad (or padding-top/padding-bottom longhand) for vertical rhythm. */
.wrap{max-width:var(--container-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.band-pad{padding-top:var(--space-20);padding-bottom:var(--space-24)}
.band-pad-even{padding-top:var(--space-20);padding-bottom:var(--space-20)}
.band-pad-sm{padding-top:var(--space-12);padding-bottom:var(--space-12)}
.band{background:var(--surface-page)}
.rule-ink{border-bottom:2px solid var(--border-ink)}
.sect{padding:var(--space-24) 0;border-top:1px solid var(--border-hairline)}
.sect:first-child{border-top:0}
.eyerow{display:flex;align-items:center;gap:12px}

.cta{display:inline-block;background:var(--surface-accent);color:var(--text-on-accent);font:700 15px/1 var(--font-body);letter-spacing:.01em;padding:9px 18px;border:9px solid transparent;border-image:var(--frame-drawn) 26 stretch;background-clip:padding-box}
.cta-ghost{display:inline-block;color:var(--text-primary);font:700 15px/1 var(--font-body);padding:9px 18px;border:9px solid transparent;border-image:var(--frame-drawn-faint) 26 stretch}

/* Masthead nav. Wordmark and nav links sit in their own baseline-aligned group — they
   differ in font-size and line-height, so aligning the outer row on center (rather than
   the text baseline) let the wordmark float visibly above the nav's line. */
.topnav{display:flex;align-items:center;gap:var(--space-10);height:100px}
.topnav-left{display:flex;align-items:baseline;gap:var(--space-12);flex:1}
.topnav nav{display:flex;gap:var(--space-6);align-items:baseline}
.topnav nav a{color:var(--text-secondary);font:var(--type-body-sm);border:0}
.topnav nav a[aria-current]{color:var(--text-primary);border-bottom:1px solid var(--border-accent);padding-bottom:2px}
/* Measured against the Basalt staging header: its icon+wordmark lockup renders ~52px
   tall. Osmio has no icon (no logo file was supplied — see readme), so the plain-text
   wordmark is set to the same ~52px cap height to carry equivalent visual weight. */
.wordmark{font:700 52px/1 var(--font-display);letter-spacing:-.035em;color:var(--text-primary)}
@media (max-width:860px){
  .wordmark{font-size:32px}
}
.nav-toggle{display:none;background:none;border:1.8px solid var(--border-ink);color:var(--text-primary);width:38px;height:38px;align-items:center;justify-content:center}
@media (max-width:860px){
  .topnav nav{display:none !important}
  .nav-toggle{display:flex}
  .topnav{height:78px}
  .nav-open .topnav nav{display:flex !important;position:absolute;top:78px;left:0;right:0;flex-direction:column;gap:18px !important;background:var(--surface-page);padding:20px var(--gutter);border-bottom:2px solid var(--border-ink);z-index:30}
  .nav-open .topnav .cta-mount{display:none}
}

/* Drawn block card shell (fallback markup before the bundle hydrates .card-mount) */
.blk{background:var(--surface-card);border:2px solid var(--border-ink);display:flex;flex-direction:column}
.blk>.cap{height:22px;border-bottom:2px solid var(--border-ink);background:var(--column-lit);flex:none}
.blk>.body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.fig{font-family:var(--font-mono);font-weight:500;letter-spacing:-.01em;line-height:1}

/* Grids */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-20)}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-12)}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-12)}

/* Stakeholder / bullet lists — mono arrow, no colour icon */
.audience h3{font:var(--type-heading-2);letter-spacing:var(--tracking-heading);margin-bottom:var(--space-5)}
.audience ul,.arrow-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.audience li,.arrow-list li{display:flex;gap:10px;font:var(--type-body-sm);color:var(--text-secondary)}
.audience li::before,.arrow-list li::before{content:"→";font-family:var(--font-mono);color:var(--text-accent);flex:none}

/* Numbered phase / process steps */
.steps{display:flex;flex-direction:column;gap:0}
.step{display:grid;grid-template-columns:56px 1fr;gap:var(--space-6);padding:var(--space-8) 0;border-top:1px solid var(--border-hairline)}
.step:first-child{border-top:0}
.step-num{font:700 28px/1 var(--font-mono);color:var(--text-accent)}
.step-meta{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}

/* Comparison table — a sheet, not a block: drawn frame, no cap */
.osmio-table{width:100%;border-collapse:collapse;border:2px solid var(--border-ink)}
.osmio-table th,.osmio-table td{border-bottom:1px solid var(--border-hairline);padding:14px 16px;text-align:left;vertical-align:top;font:var(--type-body-sm)}
.osmio-table thead th{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);border-bottom:2px solid var(--border-ink)}
.osmio-table tr:last-child td{border-bottom:0}
.osmio-table tr.is-featured td{background:var(--surface-accent-quiet)}
.osmio-table-wrap{overflow-x:auto}

/* Icon-in-card row — used inside a card-mount's fallback markup only; the hydrated Card
   renders the icon through its own `action` slot. */
.icon-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}

footer.site-footer{background:var(--ink-950);border-top:2px solid var(--border-ink)}

@media (max-width:980px){
  .four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .three-col{grid-template-columns:1fr;gap:var(--space-10)}
  .two-col{grid-template-columns:1fr}
}
@media (max-width:560px){
  .four{grid-template-columns:1fr}
  .three{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
}

/* ==========================================================================
   Brand scoping — endorsed-brand demonstration only.
   Every child company reads the exact same drawn components (Button, Card,
   SectionHead, Wordmark) as Osmio itself. The ONLY thing that changes per
   company is which colour these three semantic tokens resolve to — hand-drawn
   line work, type, spacing and motion are never touched. Osmio needs no rule
   here: it simply is the root tokens in tokens/theme.css (brass).
   ========================================================================== */

[data-brand="basalt"]{
  --surface-accent:var(--product-basalt);
  --border-accent:var(--product-basalt);
  --text-accent:var(--product-basalt);
}
[data-brand="green"]{
  --surface-accent:#2E6B4C;
  --border-accent:#2E6B4C;
  --text-accent:#2E6B4C;
}
[data-brand="teal"]{
  --surface-accent:#1D6E74;
  --border-accent:#1D6E74;
  --text-accent:#1D6E74;
}

.brand-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.brand-col{border:2px solid var(--border-ink);background:var(--surface-card);padding:28px 22px;display:flex;flex-direction:column;gap:18px}
.brand-col .brand-role{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.brand-col .wordmark-mount{min-height:30px}
.brand-swatch{height:56px;border:2px solid var(--border-ink);background:var(--surface-accent)}

@media (max-width:980px){ .brand-row{grid-template-columns:1fr} }

/* Org chart: parent centered on its own row, a drawn connector, then the three
   children in the same 3-column grid the connector's drops are aligned to. */
.orgchart-parent{display:flex;justify-content:center;padding:0 0 var(--space-4)}
.orgchart-parent .brand-col{width:100%;max-width:340px}
.orgchart-mount{width:100%}
@media (max-width:980px){ .orgchart-mount{display:none} }