/*
 * Sitewide base and chrome. Implemented from the design language
 * (canon/design/dbcom-web-design-language-beta.md, section 6) and the comp
 * (dbcom-work-template-beta.html). Values are copied, not interpreted.
 * The aesthetic is Artlord's; this file deploys the codified primitives.
 */

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--paper);            /* paper edge to edge, all widths (A1) */
  font-family:var(--sans);
  font-size:var(--fs-ui);
  line-height:var(--lh-ui);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;}

/* ---------- focus: the one ring, ink never red (A4) ---------- */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:-200vw;top:var(--sp-2);
  background:var(--ink);color:var(--paper);
  padding:var(--sp-2) var(--sp-4);text-decoration:none;z-index:100;
}
.skip:focus{left:var(--sp-2);}

/* ---------- shell ---------- */
.shell{
  max-width:calc(var(--container) + 2*var(--pad-x));
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

/* ---------- site header ---------- */
.site-head{padding-block:var(--sp-5) var(--sp-4);}
.site-head .bar{
  display:flex;flex-wrap:wrap;align-items:center;
  column-gap:var(--sp-6);row-gap:var(--sp-3);
}
.brand{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;color:var(--ink);}
.brand img{width:28px;height:28px;mix-blend-mode:multiply;}  /* sigil, interim (A8) */
.brand .brand-name{
  font-family:var(--serif);font-weight:700;font-size:1.0625rem;
  letter-spacing:var(--ls-display);
}
.site-nav{margin-left:auto;}
.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-5);}
.site-nav a{color:var(--ink);text-decoration:none;}                 /* chrome links are ink (A9) */
.site-nav a:hover{text-decoration:underline;text-underline-offset:0.2em;}
.site-nav a[aria-current="page"]{
  font-weight:600;text-decoration:underline;
  text-decoration-thickness:1.5px;text-underline-offset:0.25em;     /* never colour alone */
}

/* ---------- section-head device (the interior-page h1) ---------- */
.section-head{display:flex;align-items:center;gap:var(--sp-3);margin-block:var(--sp-6);}
.section-head .sq{width:10px;height:10px;background:var(--red);flex:0 0 auto;}
.section-head h1{
  font-family:var(--sans);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:var(--ls-micro);text-transform:uppercase;
  color:var(--ink);white-space:nowrap;line-height:var(--lh-micro);
}
.section-head .line{flex:1 1 auto;height:var(--rule-mid);background:var(--ink);}

/* ---------- intro (Signal) ---------- */
.intro{
  font-family:var(--serif);font-size:var(--fs-body-lg);
  line-height:var(--lh-body);max-width:var(--measure);
  margin-block-end:var(--sp-8);
}

/* ---------- metric emphasis, parent-verbatim. Red + weight 600 (the ---------
   non-colour carrier); never the sole carrier of meaning. ---------------- */
.m{color:var(--red);font-weight:600;}

/* ---------- body-copy links, parent-verbatim. Underline is the carrier. -- */
a.link{
  color:var(--red);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:0.15em;
}
a.link:hover{color:var(--ink);}

/* ---------- buttons: net-new vocabulary, zero radius (section 6) ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:600;
  font-size:var(--fs-ui);line-height:var(--lh-ui);
  padding:var(--sp-3) var(--sp-5);border:1.5px solid var(--ink);
  text-decoration:none;cursor:pointer;
}
.btn--primary{background:var(--ink);color:var(--paper);}
.btn--primary:hover{background:var(--ink-soft);border-color:var(--ink-soft);}
.btn--secondary{background:var(--paper);color:var(--ink);}
.btn--secondary:hover{background:var(--ink);color:var(--paper);}

/* ---------- pantry (sitewide footer) ---------- */
.site-foot{margin-block-start:var(--sp-9);padding-block-end:var(--sp-7);}
.pantry{
  background:var(--pantry-bg);border:1px dashed var(--pantry-border);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);
}
.pantry .plabel{
  font-weight:600;font-size:var(--fs-micro);
  letter-spacing:var(--ls-plabel);text-transform:uppercase;
  color:var(--red);line-height:var(--lh-micro);
}
.pantry .pkeys{font-size:var(--fs-small);line-height:1.8;color:var(--muted);}
.pantry .patents{
  font-family:var(--serif);font-style:italic;
  font-size:var(--fs-small);color:var(--muted);margin-block-start:var(--sp-2);
}

/* ---------- footline (sitewide, below the pantry) ---------- */
.footline{
  display:flex;align-items:baseline;gap:var(--sp-4);
  margin-block-start:var(--sp-5);font-size:var(--fs-small);color:var(--muted);
}
.footline .fname{
  font-weight:600;letter-spacing:var(--ls-slight);
  text-transform:uppercase;font-size:var(--fs-micro);
}
.footline .fspace{flex:1 1 auto;}
.footline a{color:var(--muted);text-decoration:none;}
.footline a:hover{color:var(--ink);text-decoration:underline;}

/* footer colophon link: chrome, ink, quiet */
.foot-colophon{margin-block-start:var(--sp-3);font-size:var(--fs-small);}
.foot-colophon a{color:var(--muted);text-decoration:none;}
.foot-colophon a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:0.2em;}

/* ---------- motion: nothing moves in V1; declaration models prod shape --- */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}

/* ---------- accessibility helper ---------- */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}