/* chrome borrows harkonnen's neutrals - no house is privileged here.
     common.css reads these role vars; the house cards re-scope them. */
  :root {
    --bg-dim: #0A0A0B; --bg: #111113; --surface: #1B1B1E; --overlay: #29292E;
    --fg: #EEEDEA; --fg-dim: #C9C7C2; --muted: #7E7D82; --kw: #EEEDEA;
    --num: #B4B2AC; --str: #98968F; --fn: #7E99B4; --ty: #A188CC;
    --err: #D05837; --special: #E4F1FF; --add: #7E8D80;
    --series-hover: #C1C0C0;
  }

  /* the index's own opening: masthead ON the artwork as one banner -
     the house pages stack hero then masthead; this page fuses them */
  .banner { position: relative; margin-top: 1.1rem; }
  .banner img { display: block; width: 100%; height: 42vh; object-fit: cover; object-position: center; }
  .banner .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,11,0.3), rgba(10,10,11,0.55) 70%, #0A0A0B); }
  .banner .mast { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 1.5rem; }
  /* the wordmark mirrors the README banner (assets/banner.webp in the main
     repo): lowercase mono, wide-tracked, spice-amber, a breathing dot */
  .banner h1 { font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: clamp(1.6rem, 4.6vw, 2.8rem); letter-spacing: 0.5em; text-indent: 0.5em; color: #DDB05E; text-shadow: 0 0 30px #E5913A59, 0 2px 26px rgba(0,0,0,0.65); }
  .banner h1 .dot { color: #E5913A; padding: 0 0.2em; }
  .banner .tag { margin-top: 0.7rem; font-style: italic; color: #C9C7C2; font-size: 1.05rem; text-shadow: 0 1px 14px rgba(0,0,0,0.7); }
  .banner-caption { position: absolute; right: 1.5rem; bottom: 1rem; z-index: 1; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.08em; color: #EEEDEA; opacity: 0.45; }
  .banner-caption a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }

  /* --gut fixes the role-gutter width so the editor, kickers, and captions
     can share the card field's left axis (the gutter reads as a margin
     annotation, like line numbers) */
  .content { max-width: 1280px; margin: 0 auto; padding: 2.8rem 2rem 3.5rem; --gut: 150px; }
  .content > .pk, .content > .note, .content > .swipe-hint { margin-left: calc(var(--gut) + 5px); }
  .scroll { overflow-x: auto; }
  .swipe-hint { display: none; }

  /* five core samples + one role gutter; every column carries the same
     row skeleton (hd / gap / bands / ft), so roles align across houses */
  .board { display: grid; grid-template-columns: var(--gut) repeat(5, 1fr); gap: 0; min-width: 960px; }
  /* sticky, so the role labels stay put while narrow screens swipe the houses */
  .gut { padding: 11px 0 13px; position: sticky; left: 0; z-index: 2; background: #0A0A0B; }
  .card { margin: 0 5px; padding: 10px 8px 12px; background: var(--bg); border: 1px solid var(--overlay); border-radius: 12px; }

  .hd { height: 100px; overflow: hidden; padding: 6px 10px 0; }
  .hd h2 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 1.02rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 0; }
  .hd h2 a { color: var(--fg); text-decoration: none; }
  .hd h2 a:hover { color: var(--kw); }
  .hd .world { font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; line-height: 1.45; }
  .hd .trait { font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kw); margin-top: 4px; line-height: 1.45; opacity: 0.9; }

  .gap { height: 26px; }
  .b-g { height: 34px; }
  .b-t { height: 38px; }
  .b-a { height: 46px; }
  .ft  { height: 34px; display: flex; align-items: center; padding: 0 10px; }
  .ft a { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kw); text-decoration: none; }
  .ft a:hover { color: var(--fg); }

  .band, .rl { margin-bottom: 4px; }
  .band {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 10px; border-radius: 4px; cursor: default;
    font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.04em;
  }
  .band:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
  .band em { font-style: normal; opacity: 0.75; }
  .dk { color: var(--fg-dim); }
  .lt { color: var(--bg-dim); }

  /* the one color that crosses every house: an unbroken ribbon.
     -14px = card padding 8 + card margin 5 + border 1, so neighboring
     bands meet edge to edge */
  .rib { margin-left: -14px; margin-right: -14px; border-radius: 0; }
  .rib-c { justify-content: center; font-style: italic; font-family: 'Crimson Pro', Georgia, serif; font-size: 0.85rem; letter-spacing: 0.04em; }
  .rib-r { justify-content: flex-end; }

  .rl { display: flex; align-items: center; justify-content: flex-end; padding-right: 14px; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: #7E7D82; }
  .gl { display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 14px 6px 0; font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: #7E7D82; font-weight: 500; }

  .note { text-align: left; margin-top: 1.8rem; font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: #7E7D82; }

  /* one sample, five houses - a hidden radio per house restyles the
     editor below it (pure CSS, no script) */
  .preview { margin: 0 5px 3.2rem calc(var(--gut) + 5px); }
  .preview input { position: absolute; opacity: 0; pointer-events: none; }
  .pk { text-align: left; margin-bottom: 0.9rem; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: #7E7D82; }
  .picker { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem; margin-bottom: 1.2rem; }
  .picker label { cursor: pointer; padding: 0.32rem 0.9rem; border: 1px solid #1B1B1E; border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: #7E7D82; }
  .picker label:hover { color: #C1C0C0; }
  .editor { margin-top: 0; box-shadow: none; background: var(--bg); border: 1px solid var(--overlay); border-radius: 12px; overflow: hidden; }
  .editor .ebar { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; background: var(--bg-dim); border-bottom: 1px solid var(--surface); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--muted); }
  .editor .dot { width: 9px; height: 9px; border-radius: 50%; opacity: 0.85; }
  .editor pre { padding: 1.1rem 1.2rem; overflow-x: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; line-height: 1.7; color: var(--fg); }

  #t-atreides:checked  ~ .editor { --bg-dim: #0D121D;  --bg: #141B2A;    --surface: #1E2938;         --overlay: #2C3B4D;   --fg: #EAD9B4;   --muted: #7C8899;  --kw: #E5913A;       --num: #DDB05E;  --str: #74B0A0;       --fn: #649CD6; --ty: #A188CC; --err: #CB6854;  --special: #8AC6BF;        --add: #7FA871; --op: #C9B58B;     --fn-call: #649CD6;  --kw-weight: 400; }
  #t-harkonnen:checked ~ .editor { --bg-dim: #0A0A0B;    --bg: #111113;  --surface: #1B1B1E; --overlay: #29292E; --fg: #EEEDEA;  --muted: #7E7D82;     --kw: #F4F3EF;       --num: #B4B2AC;   --str: #98968F;        --fn: #7E99B4;     --ty: #A188CC; --err: #D05837;    --special: #E4F1FF;    --add: #7E8D80;       --op: #C9C7C2;      --fn-call: #7E99B4;      --kw-weight: 700; }
  #t-corrino:checked   ~ .editor { --bg-dim: #150E12; --bg: #1D1318; --surface: #2A1C22;  --overlay: #3A2730;    --fg: #F2E2B8;   --muted: #9A8781; --kw: #EFB63B;  --num: #D4A63F;     --str: #53A874;       --fn: #7290D9;    --ty: #A188CC; --err: #CE5B6B;     --special: #87A0AD;    --add: #99A75E;      --op: #B99441;      --fn-call: #7290D9;     --kw-weight: 700; }
  #t-fremen:checked    ~ .editor { --bg-dim: #151109;    --bg: #1B1710;    --surface: #272117;       --overlay: #362E20;     --fg: #E6D5A9; --muted: #928463;     --kw: #E08A35; --num: #D2A855; --str: #7FAC7C; --fn: #5D9BC8;    --ty: #A188CC; --err: #CC6341; --special: #C9D2D4;  --add: #98A967;    --op: #C6B287;      --fn-call: #5D9BC8;     --kw-weight: 400; }
  #t-tleilaxu:checked  ~ .editor { --bg-dim: #0D110D;   --bg: #131813;      --surface: #1C241C;      --overlay: #283128;     --fg: #CDD5C2;      --muted: #788574;  --kw: #DBD8B0;     --num: #BDB47B; --str: #8AB37D;        --fn: #98BDB8;     --ty: #A188CC; --err: #CC6055; --special: #85B7AE; --add: #7EA770;       --op: #999770;  --fn-call: #628980; --kw-weight: 700; }

  #t-atreides:checked  ~ .picker label[for="t-atreides"]  { color: #E5913A;       border-color: #E5913A; }
  #t-harkonnen:checked ~ .picker label[for="t-harkonnen"] { color: #EEEDEA;  border-color: #EEEDEA; }
  #t-corrino:checked   ~ .picker label[for="t-corrino"]   { color: #EFB63B;  border-color: #EFB63B; }
  #t-fremen:checked    ~ .picker label[for="t-fremen"]    { color: #E08A35; border-color: #E08A35; }
  #t-tleilaxu:checked  ~ .picker label[for="t-tleilaxu"]  { color: #DBD8B0;     border-color: #DBD8B0; }

  /* below this the editor is full-width, so the shared axis resets */
  @media (max-width: 940px) {
    .preview { margin: 0 0 3.2rem; }
    .content > .pk, .content > .note, .content > .swipe-hint { margin-left: 0; }
  }
  @media (max-width: 700px) {
    .banner img { height: 30vh; }
    .content { padding: 2rem 1rem 2.5rem; }
    .swipe-hint { display: block; text-align: left; margin-bottom: 0.9rem; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: #7E7D82; }
    .band em { display: none; } /* hexes live on the house pages; names win the narrow columns */
  }

  .h-atreides  { --bg-dim: #0D121D;  --bg: #141B2A;    --surface: #1E2938;         --overlay: #2C3B4D;   --fg: #EAD9B4;   --fg-dim: #C9B58B;  --muted: #7C8899;  --kw: #E5913A;       --num: #DDB05E;  --str: #74B0A0;       --fn: #649CD6; --ty: #A188CC; --err: #CB6854;  --special: #8AC6BF;        --add: #7FA871; }
  .h-harkonnen { --bg-dim: #0A0A0B;    --bg: #111113;  --surface: #1B1B1E; --overlay: #29292E; --fg: #EEEDEA;  --fg-dim: #C9C7C2;   --muted: #7E7D82;     --kw: #F4F3EF;       --num: #B4B2AC;   --str: #98968F;        --fn: #7E99B4;     --ty: #A188CC; --err: #D05837;    --special: #E4F1FF;    --add: #7E8D80; }
  .h-corrino   { --bg-dim: #150E12; --bg: #1D1318; --surface: #2A1C22;  --overlay: #3A2730;    --fg: #F2E2B8;   --fg-dim: #CFBC96; --muted: #9A8781; --kw: #EFB63B;  --num: #D4A63F;     --str: #53A874;       --fn: #7290D9;    --ty: #A188CC; --err: #CE5B6B;     --special: #87A0AD;    --add: #99A75E; }
  .h-fremen    { --bg-dim: #151109;    --bg: #1B1710;    --surface: #272117;       --overlay: #362E20;     --fg: #E6D5A9; --fg-dim: #C6B287;   --muted: #928463;     --kw: #E08A35; --num: #D2A855; --str: #7FAC7C; --fn: #5D9BC8;    --ty: #A188CC; --err: #CC6341; --special: #C9D2D4;  --add: #98A967; }
  .h-tleilaxu  { --bg-dim: #0D110D;   --bg: #131813;      --surface: #1C241C;      --overlay: #283128;     --fg: #CDD5C2;      --fg-dim: #A7B09B; --muted: #788574;  --kw: #DBD8B0;     --num: #BDB47B; --str: #8AB37D;        --fn: #98BDB8;     --ty: #A188CC; --err: #CC6055; --special: #85B7AE; --add: #7EA770; --g-kw: #999770; --g-num: #827A52; --g-str: #54754C; --g-fn: #628980; --g-ty: #7563A6; --g-err: #763A30; --g-special: #527A72; --g-add: #506D47; }