/* Digital Pet site, shared by index.html, docs.html and release.html: tokens (dark and light), type, buttons, the header and the footer.
   The identity comes from the pet itself (petd/looks.js): the Pixel look's warm dark ground, peach ink and Claude orange for the dark theme,
   the LCD look's sage screen for the light one, IBM Plex Mono throughout, square corners and hard offset shadows. The r1's own orange
   (--r1) is the hardware colour, kept separate from the pet's Claude orange (--accent). */
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(../pet/fonts/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(../pet/fonts/plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:700;font-display:swap;src:url(../pet/fonts/plex-mono-700.woff2) format("woff2")}

:root{
  --bg:#1b1410;--bg-2:#211813;--card:#2a1e17;--well:#120c09;--ink:#f4c9a8;--dim:#c0a18d;--accent:#d97757;--accent-ink:#1b1410;--accent-text:#e88a68;
  --line:rgba(244,201,168,.16);--line-2:rgba(244,201,168,.32);--shadow:4px 4px 0 rgba(0,0,0,.45);--dot:rgba(244,201,168,.07);
  --crab-body:#d97757;--crab-hi:#eb9a7c;--crab-lo:#b25c40;--crab-eye:#1f1512;--crab-leg:#c4633f;
  /* the r1 body: a fluorescent orange, measured off product photos */
  --r1:#ff4f12;--r1-hi:#ff7a3d;--r1-lo:#d8430b;--r1-deep:#a83208;--r1-ink:#140904;
  /* the stage behind the 3D r1 stays deep in both themes so the orange glows */
  --stage:#0d0806;--stage-2:#1d0f09;--stage-ink:#f6d6bf;--stage-dim:#b99784;--stage-line:rgba(246,214,191,.16);
  --focus:#ffd166;--warn:#ff8b6b;--ok:#9fd38a;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --gut:16px;--max:1240px;--head-h:64px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#c5cfae;--bg-2:#bcc7a4;--card:#d3dbbd;--well:#aeb997;--ink:#22281c;--dim:#3a4330;--accent:#ad4824;--accent-ink:#f3f5ea;--accent-text:#73270e;
    --line:rgba(34,40,28,.22);--line-2:rgba(34,40,28,.45);--shadow:4px 4px 0 rgba(34,40,28,.28);--dot:rgba(34,40,28,.09);
    --crab-eye:#22281c;--stage:#17110d;--stage-2:#2a1810;--focus:#1d4ed8;--warn:#9a2a10;--ok:#2f6b1f;color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#c5cfae;--bg-2:#bcc7a4;--card:#d3dbbd;--well:#aeb997;--ink:#22281c;--dim:#3a4330;--accent:#ad4824;--accent-ink:#f3f5ea;--accent-text:#73270e;
  --line:rgba(34,40,28,.22);--line-2:rgba(34,40,28,.45);--shadow:4px 4px 0 rgba(34,40,28,.28);--dot:rgba(34,40,28,.09);
  --crab-eye:#22281c;--stage:#17110d;--stage-2:#2a1810;--focus:#1d4ed8;--warn:#9a2a10;--ok:#2f6b1f;color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 12px);overscroll-behavior-y:none}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.6 var(--mono);overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column;
  background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:7px 7px}
main{display:block;flex:1}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--accent-text);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
code,kbd,pre{font-family:var(--mono)}
code{font-size:.92em;background:var(--well);padding:.08em .35em;overflow-wrap:anywhere}
kbd{font-size:.85em;border:1px solid var(--line-2);border-bottom-width:2px;padding:0 .35em;background:var(--card)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;margin:0;font-weight:700}
p{margin:0 0 1em}
.skip{position:absolute;left:var(--gut);top:-60px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;z-index:100;font-weight:700}
.skip:focus{top:10px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.kicker,.tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.tag{display:inline-block;color:var(--accent-text)}
.todo{outline:1px dashed var(--warn);outline-offset:2px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 18px;font:700 14px/1 var(--mono);letter-spacing:.02em;
  color:var(--ink);background:var(--card);border:2px solid var(--line-2);text-decoration:none;cursor:pointer;box-shadow:var(--shadow);transition:transform .08s,box-shadow .08s,border-color .12s}
.btn:hover{border-color:var(--ink);text-decoration:none}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 rgba(0,0,0,.4)}
.btn-solid{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-solid:hover{border-color:var(--ink)}
/* the r1 button: the hardware orange, for the one primary action on a page */
.btn-r1{background:var(--r1);color:var(--r1-ink);border-color:var(--r1);box-shadow:4px 4px 0 var(--r1-deep)}
.btn-r1:hover{border-color:#fff}
.btn-r1:active{box-shadow:1px 1px 0 var(--r1-deep)}
.btn-small{min-height:36px;padding:7px 12px;font-size:12.5px;box-shadow:none}

/* ---- header (site.js fills <header data-site-header>) ---- */
.site-head{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:2px solid var(--line);transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.site-head.away{transform:translateY(calc(-100% - 4px))}
.head-in{max-width:var(--max);margin:0 auto;padding:10px var(--gut);display:flex;align-items:center;gap:10px;min-height:var(--head-h)}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;margin-right:auto;min-width:0}
.brand-crab{flex:none}
.brand-name{font-weight:700;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.brand-for{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.brand-for b{color:var(--r1);font-weight:700}
.site-nav{display:flex;gap:2px}
.site-nav a{white-space:nowrap;color:var(--ink);text-decoration:none;font-size:13px;padding:10px 9px;min-height:44px;display:inline-flex;align-items:center;border-bottom:2px solid transparent}
.site-nav a:hover{border-bottom-color:var(--accent)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--r1);font-weight:700}
.theme{flex:none;width:44px;height:44px;display:grid;place-items:center;background:transparent;color:var(--ink);border:2px solid var(--line-2);cursor:pointer}
.theme:hover{border-color:var(--ink)}
.theme .moon{display:none}
:root[data-eff-theme="light"] .theme .sun{display:none}
:root[data-eff-theme="light"] .theme .moon{display:block}
.head-scan{position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--r1);transform-origin:left;transform:scaleX(0)}
/* The entrance, on every load and on pull to refresh: the bar drops in, in pixel steps, and a scan line sweeps under it. */
.site-head.enter{animation:head-in .62s steps(7,end) backwards}   /* backwards, not both: a held transform would beat .away */
.site-head.enter .head-scan{animation:scan .9s .35s cubic-bezier(.6,0,.2,1) both}
.site-head.enter .brand-crab{animation:hop .5s .55s steps(4,end) both}
@keyframes head-in{from{transform:translateY(-105%)}to{transform:none}}
@keyframes scan{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes hop{0%,100%{transform:none}50%{transform:translateY(-6px)}}

/* pull to refresh (touch only; site.js drives --pull) */
.pull{position:fixed;left:0;right:0;top:0;z-index:60;height:var(--pull,0px);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:4px;padding-bottom:8px;background:var(--well);color:var(--dim);font-size:12px;letter-spacing:.06em;pointer-events:none;border-bottom:2px solid var(--line)}
.pull[data-on="0"]{height:0;border-bottom-width:0}
.pull.armed{color:var(--accent-text)}
.pull.armed .pull-crab{animation:hop .4s steps(3,end) infinite}
.pull.settle{transition:height .3s cubic-bezier(.2,.8,.3,1)}

/* ---- footer (site.js fills <footer data-site-footer>) ---- */
.site-foot{margin-top:56px;border-top:2px solid var(--line-2);background:var(--bg-2);position:relative}
.foot-walk{position:absolute;left:0;right:0;top:-36px;height:34px;overflow:hidden;pointer-events:none}
.walker{position:absolute;left:0;bottom:0;animation:walk 26s steps(120,end) infinite}
@keyframes walk{from{transform:translateX(-50px)}to{transform:translateX(calc(100vw + 10px))}}
.foot-in{max-width:var(--max);margin:0 auto;padding:36px var(--gut) 20px;display:grid;gap:28px}
.foot-mark{font-size:clamp(2.2rem,10vw,4.2rem);font-weight:700;letter-spacing:-.06em;line-height:.9;margin:0 0 10px;color:var(--ink)}
.foot-mark span{color:var(--r1)}
.foot-line{color:var(--dim);margin:0}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:22px}
.foot-h{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 8px;font-weight:700}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols li a{display:inline-block;padding:7px 0;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.foot-cols li a:hover{border-bottom-color:var(--accent)}
.socials a[data-todo]{color:var(--dim);border-bottom-style:dashed}
.socials a[data-todo]::after{content:" (soon)";font-size:11px}
.foot-legal{max-width:var(--max);margin:0 auto;padding:16px var(--gut) 28px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--dim)}
.foot-legal p{margin:0 0 6px}
.foot-legal strong{color:var(--ink)}

@media (min-width:760px){
  :root{--gut:28px}
  .site-nav a{padding:10px 12px}
}
@media (min-width:1040px){
  :root{--gut:40px}
  .foot-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:end}
}
@media (max-width:479px){
  .brand-for{display:none}
  .head-in{gap:4px}
  .site-nav a{padding:10px 7px;font-size:12.5px}
  .brand-name{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .walker{animation:none;left:24px}
}

/* Digihome (2026-10-19): the wordmark's orange full stop and the header buy link */
.brand-dot{color:var(--r1)}
.head-buy{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;margin-right:10px;font-size:13px;font-weight:700;text-decoration:none;
  color:var(--r1-ink);background:var(--r1);border:2px solid var(--r1-deep);box-shadow:3px 3px 0 var(--r1-deep)}
.head-buy b{padding-left:8px;border-left:2px solid currentColor}
.head-buy:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--r1-deep)}
.head-buy:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:520px){ .head-buy{padding:0 9px;margin-right:6px;font-size:12px} .head-buy b{display:none} }
@media (max-width:520px){ .site-nav a[href="index.html"]{display:none} .site-nav a{padding:10px 6px} .brand{gap:6px} .brand-crab{width:28px;height:24px} }
@media (max-width:359px){ .brand-name{display:none} }
/* hold the header's place before site.js fills it, so nothing below jumps on a cold load (measured 66px at 1440 and 390) */
header[data-site-header]{min-height:calc(var(--head-h) + 2px);display:block}