/* Oddio site — spec docs/superpowers/specs/2026-09-21-oddio-site-design.md §3. Paper & ink; colour only as dither dots. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
:root { --paper:#FFFFFF; --ink:#000000; --disabled:#8C8C8C; --ghost:#B0B0B0; --gutter:24px; --max:1100px; --measure:62ch;
  --p12:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM4 0h1v1H4zM2 2h1v1H2zM6 2h1v1H6zM0 4h1v1H0zM4 4h1v1H4zM2 6h1v1H2zM6 6h1v1H6z'/%3E%3C/svg%3E");
  --p25:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM4 0h1v1H4zM2 1h1v1H2zM6 1h1v1H6zM0 2h1v1H0zM4 2h1v1H4zM2 3h1v1H2zM6 3h1v1H6zM0 4h1v1H0zM4 4h1v1H4zM2 5h1v1H2zM6 5h1v1H6zM0 6h1v1H0zM4 6h1v1H4zM2 7h1v1H2zM6 7h1v1H6z'/%3E%3C/svg%3E");
  --p50:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z'/%3E%3C/svg%3E");
  --p75:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h8v8H0z' fill='%23000'/%3E%3Cpath d='M0 0h1v1H0zM4 0h1v1H4zM2 1h1v1H2zM6 1h1v1H6zM0 2h1v1H0zM4 2h1v1H4zM2 3h1v1H2zM6 3h1v1H6zM0 4h1v1H0zM4 4h1v1H4zM2 5h1v1H2zM6 5h1v1H6zM0 6h1v1H0zM4 6h1v1H4zM2 7h1v1H2zM6 7h1v1H6z' fill='%23fff'/%3E%3C/svg%3E"); }
* { box-sizing: border-box } html { -webkit-text-size-adjust: 100% }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 Inter, system-ui, sans-serif; }
@media (min-width:720px){ body{ font-size:18px } :root{ --gutter:32px } }
a { color: inherit }
h1,h2,h3 { margin:0; font-weight:700; line-height:1.1 }
h1 { font-size: clamp(28px, 5vw, 44px) } h2 { font-size: clamp(20px, 3vw, 28px); text-transform:uppercase; letter-spacing:.12em } h3 { font-size:1em; text-transform:uppercase; letter-spacing:.12em }
.label { font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--disabled); margin:0 0 10px }
.wrap { max-width:var(--max); margin:0 auto; padding:0 var(--gutter) }
.cols p:not(.label), .wrap > p:not(.label) { max-width:var(--measure) }
.rule { border:0; border-top:1px solid var(--ink); margin:0 }
/* title band → nav */
.band { height:36px; display:flex; align-items:center; gap:12px; padding:0 var(--gutter); border-bottom:1px solid var(--ink);
  background: repeating-linear-gradient(to bottom, var(--ink) 0 1px, var(--paper) 1px 3px); }
.band .mark { height:24px; width:32px; display:block } .band .mark svg{ height:100%; width:auto; display:block }
.band .wordmark { background:var(--paper); border:1px solid var(--ink); padding:2px 8px; display:flex; align-items:center; height:26px } .band .wordmark svg { height:16px; width:auto; display:block }
.band nav { margin-left:auto; display:flex; gap:6px } .band nav a { background:var(--paper); border:1px solid var(--ink); padding:1px 8px; font-size:13px; text-decoration:none }
@media (max-width:719px){ .band nav a:not(.menu){ display:none } }
@media (min-width:720px){ .band nav a.menu{ display:none } }
/* ground + clearing */
.ground-wrap { position:relative; overflow:hidden; background:var(--paper) }
.ground { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; pointer-events:none }
.ground-wrap > .wrap { position:relative }
.clearing { background:var(--paper); border-radius:6px; padding:28px 32px; display:inline-block; max-width:100% }
/* card, button, box */
.card { background:var(--paper); border:1px solid var(--ink); box-shadow:2px 2px 0 var(--ink); padding:24px 26px; text-decoration:none }
.btn { font:inherit; font-size:14px; line-height:1; background:var(--paper); color:var(--ink); border:1px solid var(--ink); box-shadow:1px 1px 0 var(--ink); padding:8px 14px; cursor:pointer; border-radius:0; text-decoration:none }
.btn.primary { background:var(--ink); color:var(--paper) } .btn[aria-pressed="true"] { background:var(--ink); color:var(--paper) }
.btn:active { box-shadow:none; transform:translate(1px,1px) }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px }
.halftone { background-image:var(--p50); background-repeat:repeat } .halftone.p12{background-image:var(--p12)} .halftone.p25{background-image:var(--p25)} .halftone.p75{background-image:var(--p75)}
.licensing { border:1px solid var(--ink); box-shadow:2px 2px 0 var(--ink); padding:32px 36px; background:var(--paper) }
.licensing p { margin:0; font-weight:600 }
.tipbar { height:34px; display:flex; align-items:center; gap:16px; padding:0 var(--gutter); border-top:1px solid var(--ink); font-size:13px; color:var(--disabled) } .tipbar .right{ margin-left:auto; display:flex; gap:14px }
.modes { display:inline-flex; gap:0; align-items:center; font-size:12px; letter-spacing:.12em; text-transform:uppercase; background:var(--paper); padding:2px 8px }
.modes button { font:inherit; letter-spacing:inherit; text-transform:inherit; background:none; border:0; padding:2px 6px; color:var(--disabled); cursor:pointer } .modes button[aria-pressed="true"]{ color:var(--ink); text-decoration:underline; text-underline-offset:3px }
.modes .sep { color:var(--ghost) }
/* player */
.player { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px }
.player .ab { display:inline-flex } .player .ab .btn{ padding:6px 10px } .player .ab .btn + .btn{ margin-left:-1px }
.player .ex, .live .ex { font:inherit; border:1px solid var(--ink); background:var(--paper); padding:5px 8px; border-radius:0 }
.player .scrub { flex:1 1 120px; height:12px; border:1px solid var(--ink); position:relative; background:var(--paper) } .player .fill { position:absolute; inset:0; width:0; background-image:var(--p50) }
.player .time { font-variant-numeric:tabular-nums; min-width:3ch }
/* live demo (spec 2026-09-23-echohost-live-demo §7): monochrome ranges, toggles are .btn */
.live { display:grid; gap:14px; font-size:14px }
.live .transport .state { color:var(--disabled); font-size:13px }
.live .rows { display:grid; gap:8px }
.live .ctl { display:grid; grid-template-columns:96px 1fr auto; align-items:center; gap:10px }
.live .ctl .name { font-size:14px; color:var(--ink); letter-spacing:0; text-transform:none }
.live .ctl .btn { justify-self:start; padding:5px 10px; min-width:4ch }
.live .val { font-variant-numeric:tabular-nums; min-width:5ch; text-align:right }
.live .slot { border-top:1px solid var(--ghost); padding-top:8px; display:grid; gap:6px }
.live .slot > .ctl { grid-template-columns:96px auto auto } .live .slot .guest { display:grid; gap:6px; padding-left:16px }
.live input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:12px; margin:0; background-color:var(--paper); background-image:var(--p50); background-repeat:no-repeat; background-size:var(--fill, 0%) 100%; border:1px solid var(--ink); border-radius:0; cursor:pointer }
.live input[type=range]::-webkit-slider-runnable-track { height:10px; background:transparent }
.live input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:10px; height:10px; background:var(--ink); border:0; border-radius:0; margin-top:0 }
.live input[type=range]::-moz-range-track { height:10px; background:transparent }
.live input[type=range]::-moz-range-thumb { width:10px; height:10px; background:var(--ink); border:0; border-radius:0 }
@media (max-width:719px){ .live .ctl { grid-template-columns:1fr auto } .live .ctl .name { grid-column:1 / -1 } .live .slot > .ctl { grid-template-columns:1fr auto } }
/* grid helpers */
.cols { display:grid; gap:40px; grid-template-columns:1fr } @media (min-width:720px){ .cols{ gap:48px } .cols-3{ grid-template-columns:repeat(3,1fr) } .cols-2{ grid-template-columns:repeat(2,1fr) } .cols-catalog{ grid-template-columns:2fr 1fr 1fr 1fr } }
.section { padding:56px 0 } @media (min-width:720px){ .section{ padding:104px 0 } }
.capture { display:block; width:100%; border:1px solid var(--ink); image-rendering:pixelated; background:var(--paper) }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
/* prefers-reduced-motion: ground.js freezes the canvas at the mode's quiet depth instead of animating — no CSS hiding needed, the frozen ground is the design */
/* Task 11: hero section needs a minimum height so the ground has room to render before content determines page height */
.hero .section { min-height: min(72vh, 560px) }