/* ==========================================================================
   Pardalote website — shared stylesheet   ·   "Graph Line / Bauhaus" theme
   White pages · graph-paper headers · outlined cards · geometric accents.
   Type: Poppins (UI) + mono (code).  Palette: ink brown, red-ochre,
   teal, amber, warm cream.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  /* new palette (old variable names kept, remapped, so every rule resolves) */
  --ink:       #2B2420;
  --ink-soft:  #4a463f;
  --grey:      #6d6a5f;
  --paper:     #FFFFFF;
  --paper-dim: #F2E9D8;
  --cream:     #F2E9D8;
  --white:     #FFFFFF;

  --orange:    #D3542B;   /* primary accent (was --ochre)  */
  --ochre:     #D3542B;
  --teal:      #3FA9A0;
  --amber:     #E8A33D;   /* highlight (was --yellow)      */
  --yellow:    #E8A33D;
  --yellow-soft: #f0bd66;
  --js:        #f7df1e;   /* official JavaScript yellow (JS code tags/badges) */
  --pardalote: #f2b705;   /* pardalote yellow, from the logo                 */

  --line:      #2B2420;   /* structural / card borders (dark, thin) */
  --hair:      #d9d2c2;   /* soft content dividers                  */
  --grid:      #ededed;   /* graph-paper lines                      */
  --mono: "SF Mono", "Fira Code", ui-monospace, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-weight: 400;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 3rem); width: 100%; }

/* speckled → now a light graph-paper wash (kept for backward compatibility) */
.speckled {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* graph-paper helper for headers */
.grid-head {
  position: relative; overflow: hidden;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* decorative geometric shapes (used explicitly on the home hero) */
.shape { position: absolute; pointer-events: none; z-index: 1; }
.shape.circle { border-radius: 50%; }
.shape.tri { width: 0; height: 0; border-style: solid; border-width: 0 60px 100px 60px; border-color: transparent; }
.c-teal   { border: 1.5px solid var(--teal); }
.c-amber  { border: 1.5px solid var(--amber); }
.c-orange { border: 1.5px solid var(--orange); }

/* ---- nav ---------------------------------------------------------------- */
nav.site-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: 16px clamp(1.2rem, 4vw, 3rem);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.25rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink); text-decoration: none;
}
.logo svg, .logo img { display: block; }
nav.site-nav .links {
  margin-left: auto; display: flex; gap: clamp(1rem, 2.4vw, 1.9rem);
  font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
nav.site-nav .links a { text-decoration: none; opacity: .55; padding-bottom: 3px; border-bottom: 1.5px solid transparent; }
nav.site-nav .links a:hover { opacity: 1; }
nav.site-nav .links a.active { opacity: 1; border-bottom-color: var(--orange); }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-weight: 700; font-size: .94rem; text-transform: uppercase; letter-spacing: .03em;
  padding: 13px 27px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  transition: background .15s, color .15s, border-color .15s;
}
.btn-solid, .btn-dark { background: var(--ink); color: #fff; }
.btn-solid:hover, .btn-dark:hover { background: var(--orange); border-color: var(--orange); }
.btn-yellow { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.btn-yellow:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-try { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-try:hover { background: #5fc3ba; border-color: #5fc3ba; color: #fff; }
/* keep button labels white (outrank .md-body a) and drop the link underline on hover */
.md-body .ex-meta-row a.btn { color: #fff; }
.md-body .ex-meta-row a.btn:hover { text-decoration: none; }

/* ---- hero (home) -------------------------------------------------------- */
header.hero {
  position: relative; overflow: hidden;
  padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5.25rem);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
}
.hero h1 {
  position: relative; z-index: 2;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 800; line-height: 1.1;
  max-width: 16ch; color: var(--ink);
}
.hero h1 em { font-style: normal; color: var(--ink); }
.hero h1 .hl { color: #f2b705; }   /* pardalote yellow, from the logo */
.hero h1 .ard { color: var(--teal); }   /* Arduino highlight colour */
.hero h1 .stop { color: var(--orange); }
.hero p.tagline {
  position: relative; z-index: 2;
  margin: 26px 0 0; max-width: 48ch; font-size: clamp(1rem, 1.6vw, 1.13rem); color: var(--ink-soft);
}
.hero .cta-row { position: relative; z-index: 2; margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- split video band --------------------------------------------------- */
.video-band { padding: 0 0 1rem; }
.split-video { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--line); }
.split-video .pane {
  aspect-ratio: 8/5; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 1rem; text-align: center;
}
.split-video .pane + .pane { border-left: 1.5px solid var(--line); }
.split-video .pane video { width: 100%; height: 100%; object-fit: cover; }
.pane .chip { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; padding: 4px 12px; border: 1px solid var(--ink); color: var(--ink); }
.pane .play { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.pane .play::after { content: ""; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--ink); margin-left: 3px; }
.pane span:last-child { font-size: .82rem; color: var(--ink-soft); }
.video-caption { text-align: center; color: var(--grey); font-size: .88rem; margin-top: 16px; }

/* ---- sections ----------------------------------------------------------- */
section { padding: clamp(3rem, 6vw, 4rem) 0; }
section h2 { font-size: clamp(1.5rem, 3vw, 1.85rem); font-weight: 800; margin-bottom: .6rem; color: var(--ink); }
section p.lede { color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.1rem); max-width: 66ch; margin-bottom: 2rem; }
.lede { color: var(--ink-soft); }
.kicker { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: .5rem; }

/* ---- outlined feature grid (home) — .grid-cards/.cell and legacy .pillars */
.grid-cards, .pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 28px;
}
.grid-cards .cell, .pillar {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 28px 24px; background: transparent;
}
/* .mark colour comes from the paired .c-teal/.c-amber/.c-orange class */
.cell .mark { width: 26px; height: 26px; margin-bottom: 16px; background: transparent; }
.cell .mark.circle { border-radius: 50%; }
.cell .mark.diamond { transform: rotate(45deg); }
.cell .mark.tri { width: 0; height: 0; border-style: solid; border-width: 0 13px 22px 13px; border-color: transparent transparent var(--orange) transparent; }
.pillar .dot { width: 26px; height: 26px; margin-bottom: 16px; border: 1.5px solid var(--teal); border-radius: 50%; background: transparent; }
/* legacy pillar dots → outlined marks in rotating accent colours */
.pillar:nth-child(1) .dot { border-color: var(--teal); }
.pillar:nth-child(2) .dot { border-color: var(--amber); }
.pillar:nth-child(3) .dot { border-color: var(--orange); }
.pillar:nth-child(4) .dot { border-color: var(--teal); }
.pillar:nth-child(5) .dot { border-color: var(--amber); }
.cell h3, .pillar h3 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; color: var(--ink); }
.cell p, .pillar p { font-size: .85rem; color: var(--grey); }

/* ---- code cards (home) -------------------------------------------------- */
.code-band { padding: clamp(3rem, 6vw, 4rem) 0; }
.code-band .kicker { color: var(--orange); }
.code-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.code-card { border: 1.5px solid var(--line); background: var(--paper); overflow: hidden; }
.code-card .bar { display: flex; align-items: center; gap: .5rem; padding: 10px 18px; font-size: .8rem; font-weight: 700; color: var(--ink); border-bottom: 1.5px solid var(--line); }
.code-card .bar b { color: var(--orange); font-weight: 700; }
.code-card pre { margin: 0; padding: 18px; font-family: var(--mono); font-size: .82rem; line-height: 1.6; overflow-x: auto; color: var(--ink); }
.c-kw { color: #9a6b00; } .c-fn { color: #2a7ab5; } .c-str { color: #b05c3a; } .c-cm { color: #8a867f; } .c-num { color: #8a4fbf; }
.code-note { margin-top: 1.4rem; color: var(--grey); font-size: .95rem; max-width: 66ch; }
.code-note code { font-family: var(--mono); background: #f2f2f2; color: var(--ink); padding: .1em .4em; }

/* ---- captioned code cards (```lang caption fences) ---------------------- */
.code-ex { background: var(--paper); border: 1.5px solid var(--line); overflow: hidden; margin: 1rem 0 1.4rem; max-width: 720px; position: relative; }
.lang-badge {
  position: absolute; top: .5rem; right: .55rem; z-index: 2;
  font-family: 'Poppins', system-ui, sans-serif; font-size: .6rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: .12rem .45rem; line-height: 1.5; pointer-events: none;
}
.lang-js { background: var(--js); color: #1a1a1a; }
.lang-arduino { background: var(--teal); color: #fff; }
.code-ex .bar { padding: .5rem 1rem; font-size: .78rem; font-weight: 600; color: var(--ink); border-bottom: 1.5px solid var(--line); background: var(--paper); }
.code-ex pre, .ref-main .code-ex pre, .md-body .code-ex pre { border: none; margin: 0; max-width: none; padding: 1rem 1.2rem; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: .82rem; line-height: 1.6; overflow-x: auto; }
.code-ex pre code { background: none; padding: 0; color: inherit; font-size: 1em; }
.code-ex.scroll pre { max-height: 420px; overflow: auto; }

/* ---- syntax highlighting (Pygments tokens, light theme) ----------------- */
pre .k, pre .kd, pre .kr, pre .kc, pre .kt, pre .cp { color: #9a6b00; }          /* keywords / types / #include */
pre .nf, pre .fm, pre .nb, pre .nt { color: #2a7ab5; }                           /* functions / builtins / tags */
pre .s, pre .s1, pre .s2, pre .sa, pre .sc, pre .sb, pre .si, pre .cpf { color: #b05c3a; }  /* strings / include paths */
pre .mi, pre .mf, pre .mh, pre .no { color: #8a4fbf; }                           /* numbers / constants */
pre .c, pre .c1, pre .cm, pre .cs { color: #8a867f; font-style: italic; }        /* comments */
pre .na { color: #9a6b00; }                                                      /* html attributes */
pre .o, pre .ow { color: var(--grey); }                                          /* operators */
pre .nx, pre .n, pre .p, pre .w { color: var(--ink); }                           /* names / punctuation */

/* ---- footer ------------------------------------------------------------- */
footer.site-footer {
  margin-top: auto; border-top: 1.5px solid var(--line);
  padding: 26px 0; font-size: .8rem; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .03em; background: var(--paper);
}
footer.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
footer.site-footer a { text-decoration: none; }
footer.site-footer a:hover { text-decoration: underline; }

/* ---- inner page headers (download / examples / detail) ------------------ */
.page-head {
  position: relative; overflow: hidden; color: var(--ink);
  padding: clamp(3rem, 6vw, 4rem) 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
}
/* download + example pages: page-head top + bottom padding at 2/3 of the standard */
body[data-nav="download"] .page-head,
body[data-nav="examples"] .page-head { padding-top: clamp(1rem, 2vw, 1.333rem); padding-bottom: clamp(1rem, 2vw, 1.333rem); }
/* auto decorative shapes for generated pages that lack explicit .shape divs */
.page-head::before { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 1.5px solid var(--teal); top: -60px; right: 120px; pointer-events: none; }
.page-head::after  { content: ""; position: absolute; width: 100px; height: 100px; border-radius: 50%; border: 1.5px solid var(--orange); bottom: -30px; right: 40px; pointer-events: none; }
.page-head h1 { position: relative; z-index: 2; font-size: clamp(2.1rem, 4.5vw, 2.75rem); font-weight: 800; color: var(--ink); }
.page-head p { position: relative; z-index: 2; margin-top: 16px; max-width: 60ch; font-size: clamp(1rem, 1.6vw, 1.06rem); color: var(--ink-soft); }
.page-head .crumb { position: relative; z-index: 2; font-size: .8rem; color: var(--grey); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .04em; }
.page-head .crumb a { text-decoration: none; color: var(--orange); }
.page-head .crumb a:hover { text-decoration: underline; }

/* ---- downloads ---------------------------------------------------------- */
.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; margin-bottom: 1rem; }
.dl-card { border: 1.5px solid var(--line); padding: 32px; background: var(--paper); }
.dl-card .lang { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.dl-card.arduino .lang { color: var(--teal); }
.dl-card.js .lang { color: #d9b30a; }   /* golden JS yellow — a touch darker for readable text on the light card */
/* button highlight matches the code-tag colours: Arduino = teal, JS = official JS yellow */
.dl-card.arduino .btn-solid:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.dl-card.js .btn-solid:hover { background: var(--js); border-color: var(--js); color: var(--ink); }
.dl-card h3 { font-size: 1.35rem; font-weight: 800; margin: 10px 0; color: var(--ink); }
.dl-card p { color: var(--grey); font-size: .92rem; margin-bottom: 1.25rem; }
.dl-card .meta { font-size: .8rem; color: var(--grey); margin-top: 1rem; }

/* ---- steps -------------------------------------------------------------- */
.steps { counter-reset: step; border-top: 1px solid var(--line); margin: 1.75rem 0 0; }
.step { display: flex; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.step::before {
  counter-increment: step; content: counter(step);
  flex: 0 0 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; color: var(--ink);
}
.step h4 { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; color: var(--ink); }
.step p { color: var(--grey); font-size: .9rem; }
.step code, .prose code, .inline-code, p code, li code, td code {
  font-family: var(--mono); font-size: .87em; background: #f2f2f2; color: var(--ink); padding: .1em .4em;
}
.prose p { max-width: 66ch; color: var(--ink-soft); font-size: .95rem; margin-bottom: .75rem; }
.prose a { color: var(--orange); }
.prose a:hover { text-decoration: underline; }

/* ---- examples gallery --------------------------------------------------- */
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 28px; }
.filter {
  font-size: .8rem; padding: 8px 18px; border: 1.5px solid var(--ink); background: transparent;
  color: var(--ink); cursor: pointer; font-family: inherit; text-transform: uppercase; letter-spacing: .03em; opacity: .7;
}
.filter:hover { opacity: 1; }
.filter.active { background: var(--ink); color: #fff; opacity: 1; }

.ex-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line); padding: 0; margin-bottom: 3.5rem;
}
.ex-card {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 26px 22px; text-decoration: none; display: block; transition: background .15s; background: transparent;
}
.ex-card:hover { background: var(--cream); transform: none; box-shadow: none; }
/* per-example line-drawing icons ('shared' examples pair two → .wide) */
.ex-icon { width: 34px; height: 34px; margin-bottom: 18px; color: var(--teal); }
.ex-icon.wide { width: 62px; }
.ex-icon svg { width: 100%; height: 100%; display: block; }
.ic-teal { color: var(--teal); }
.ic-amber { color: var(--amber); }
.ic-orange { color: var(--orange); }
.ex-card .mark { width: 30px; height: 30px; margin-bottom: 18px; background: transparent; }
.ex-card .mark.circle { border-radius: 50%; }
.ex-card .mark.diamond { transform: rotate(45deg); }
.ex-card .mark.tri { width: 0; height: 0; border-style: solid; border-width: 0 15px 26px 15px; border-color: transparent transparent var(--orange) transparent; }
.ex-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .35rem; color: var(--ink); }
.ex-card p { font-size: .84rem; color: var(--grey); margin-bottom: .85rem; }
.ex-card .meta { font-size: .68rem; color: var(--grey); text-transform: uppercase; letter-spacing: .05em; }

/* tag chips (used on example detail pages + anywhere .tags appears) */
.tags { display: flex; gap: .4rem; margin-top: .8rem; flex-wrap: wrap; }
.tag { font-size: .68rem; font-weight: 600; padding: .18rem .6rem; border: 1px solid var(--line); color: var(--ink); text-transform: uppercase; letter-spacing: .03em; }
.tag.lvl-start { border-color: var(--teal); color: #2f7a6f; }
.tag.lvl-mid   { border-color: var(--amber); color: #9a6b00; }
.tag.lvl-adv   { border-color: var(--orange); color: var(--orange); }

/* ---- reference layout --------------------------------------------------- */
.ref-layout { display: grid; grid-template-columns: 230px 1fr; gap: 2.5rem; padding: 2.5rem 0 4rem; }
.ref-nav { font-size: .9rem; position: sticky; top: 5rem; align-self: start; max-height: calc(100vh - 6rem); overflow-y: auto; border-right: 1px solid var(--line); padding-right: 1.5rem; }
.ref-nav h4 { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: #276b93; margin: 1.4rem 0 .5rem; font-weight: 700; }
.ref-nav h4:first-child { margin-top: 0; }
.ref-nav h4 a { display: inline; padding: 0; color: inherit; text-decoration: none; font-weight: inherit; }
.ref-nav h4 a:hover { color: var(--ink); font-weight: inherit; }
.ref-nav a { display: block; text-decoration: none; padding: .22rem 0; color: var(--grey); font-weight: 500; }
.ref-nav a:hover { color: var(--ink); font-weight: 600; }
.ref-nav a.active { color: var(--orange); font-weight: 600; }
/* narrow-screen "Contents" disclosure — button hidden on desktop, links always shown */
.ref-nav-toggle { display: none; }

.ref-main { min-width: 0; }
.ref-main > h1 { font-size: clamp(1.8rem, 3.5vw, 2.1rem); font-weight: 800; margin-bottom: .4rem; color: var(--ink); }
.ref-main .lede { color: var(--grey); font-size: 1.05rem; max-width: 64ch; margin-bottom: 1.6rem; }
.ref-main h2 { font-size: 1.3rem; font-weight: 700; margin: 2.4rem 0 .7rem; padding-top: 1.2rem; border-top: 1px solid var(--hair); scroll-margin-top: 4.5rem; }
.ref-main h2:first-of-type { border-top: none; padding-top: 0; }
.ref-main h2 code, .ref-main h3 code { background: none; padding: 0; font-size: .95em; }
.ref-main h3 { font-size: 1.05rem; font-weight: 700; margin: 1.6rem 0 .5rem; }
.ref-main p { max-width: 68ch; margin-bottom: 1rem; }
.ref-main ul, .ref-main ol { margin: 0 0 1rem 1.4rem; max-width: 64ch; }
.ref-main li { margin-bottom: .3rem; }
.ref-main .sig { font-family: var(--mono); font-size: .88rem; background: var(--ink); color: #fff; padding: .9rem 1.2rem; margin: 1rem 0; overflow-x: auto; max-width: 720px; }
.ref-main .sig .fn { color: var(--amber); }
.ref-main .sig-js  { background: var(--js); color: #1e1c17; }
.ref-main .sig-js .fn  { color: #006a6e; font-weight: 700; }
.ref-main .sig-ino { background: var(--teal); color: #eafafa; }
.ref-main .sig-ino .fn { color: #fff2cf; font-weight: 700; }
.ref-main table { border-collapse: collapse; font-size: .9rem; margin: 1.2rem 0 1.6rem; width: 100%; max-width: 720px; }
.ref-main th { text-align: left; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); padding: .5rem .8rem; border-bottom: 2px solid var(--line); }
.ref-main td { padding: .55rem .8rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
.ref-main pre { background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); padding: 1rem 1.2rem; margin: 1rem 0 1.4rem; font-family: var(--mono); font-size: .82rem; line-height: 1.6; overflow-x: auto; max-width: 720px; }
.ref-main pre code { background: none; padding: 0; font-size: 1em; color: inherit; }
.ref-main .note { background: #fbf3e2; border-left: 3px solid var(--amber); padding: .8rem 1.1rem; font-size: .92rem; margin: 1.2rem 0; max-width: 680px; }
.ref-main .see-also { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--hair); color: var(--grey); font-size: .9rem; }
.ref-main a { color: var(--orange); text-decoration: none; }
.ref-main a:hover { text-decoration: underline; }

/* ---- example detail pages (markdown body) ------------------------------- */
.md-layout { padding-top: 1.25rem; padding-bottom: 4rem; display: grid; grid-template-columns: 1fr; }
.md-body { max-width: 780px; }
.md-body h1 { display: none; }
.md-body h2 { font-size: 1.3rem; font-weight: 700; margin: 2.2rem 0 .7rem; padding-top: 1.2rem; border-top: 1px solid var(--hair); }
.md-body h3 { font-size: 1.05rem; font-weight: 700; margin: 1.6rem 0 .5rem; }
.md-body p { margin-bottom: 1rem; max-width: 68ch; }
.md-body ul, .md-body ol { margin: 0 0 1rem 1.4rem; }
.md-body li { margin-bottom: .3rem; }
.md-body pre { background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); padding: 1rem 1.2rem; margin: 1rem 0 1.4rem; font-family: var(--mono); font-size: .82rem; line-height: 1.6; overflow-x: auto; }
.md-body pre code { background: none; padding: 0; color: inherit; font-size: 1em; }
.md-body table { border-collapse: collapse; font-size: .9rem; margin: 1.2rem 0 1.6rem; width: 100%; }
.md-body th { text-align: left; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); padding: .5rem .8rem; border-bottom: 2px solid var(--line); }
.md-body td { padding: .55rem .8rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
.md-body a { color: var(--orange); }
.md-body a:hover { text-decoration: underline; }
.md-body blockquote { border-left: 3px solid var(--amber); padding: .3rem 1.1rem; color: var(--grey); margin: 1.2rem 0; }
/* section dividers are drawn by each h2's top border; a Markdown --- before a
   heading would double the line, so hide the redundant rule inside example bodies */
.md-body hr { display: none; }
.md-body img { max-width: 100%; }

.ex-meta-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 0; }
.ex-code-cols { display: grid; grid-template-columns: 1fr; gap: 1.3rem; margin: 0 0 1.4rem; max-width: 780px; }
.screenshot-slot {
  margin: 2.2rem 0; aspect-ratio: 16/9; max-width: 780px;
  border: 1.5px dashed var(--ink); display: flex; align-items: center; justify-content: center;
  color: var(--grey); font-size: .9rem; background: var(--paper);
}
/* Filled screenshot (simulated run of the example). */
.screenshot {
  display: block; margin: 2.2rem 0; max-width: 780px; width: 100%; height: auto;
  border: 1.5px solid var(--line); border-radius: 6px; background: var(--paper);
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  /* block, not grid: a sticky grid item can only stick within its own row */
  .ref-layout { display: block; }
  /* sidebar becomes a collapsed "Contents" card pinned just below the header;
     --header-h is measured by site.js (the header wraps taller at 680px) */
  .ref-nav {
    position: sticky; top: var(--header-h, 59px); z-index: 40;
    max-height: none; overflow: visible; border-right: none; padding-right: 0;
    border: 1.5px solid var(--line); background: var(--paper);
    margin-bottom: 2rem;
  }
  .ref-nav-toggle {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: var(--paper); border: none; color: var(--ink);
    font-family: var(--mono); font-size: .78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em; padding: .75rem 1rem;
  }
  .ref-nav-toggle::after { content: "\25BE"; float: right; }           /* ▾ */
  .ref-nav.open .ref-nav-toggle::after { content: "\25B4"; }           /* ▴ */
  .ref-nav-links { display: none; padding: .2rem 1rem .9rem;
                   max-height: calc(100vh - var(--header-h, 59px) - 6rem);
                   overflow-y: auto; }
  .ref-nav.open .ref-nav-links { display: block; }
  /* anchor jumps must clear the header + pinned strip */
  .ref-main h2 { scroll-margin-top: calc(var(--header-h, 59px) + 4.5rem); }
}

/* two-column (desktop) layout: lift the h1 so the top of its uppercase letters
   aligns with the top of the LHS nav's first heading (cap-to-cap) */
@media (min-width: 901px) {
  .ref-main > h1 { margin-top: -0.97rem; }
}
@media (max-width: 860px) {
  .grid-cards, .pillars, .ex-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  nav.site-nav { flex-wrap: wrap; gap: 12px; padding: 12px 1.2rem; }
  nav.site-nav .links { margin-left: 0; width: 100%; gap: 14px; }
  .split-video, .code-cols, .dl-grid { grid-template-columns: 1fr; }
  .split-video .pane + .pane { border-left: none; border-top: 1.5px solid var(--line); }
  .grid-cards, .pillars, .ex-grid { grid-template-columns: 1fr; }
  .shape, .page-head::before, .page-head::after { display: none; }
  .wrap { padding: 0 1.2rem; }
}