/* D1 Daylight — shared web layer (hdi.vision + test.hdi.vision). Uses tokens.css. */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
body{ margin:0; background:var(--surface-base) url(../img/grain-day.png) repeat; background-size:256px 256px; color:var(--role-body); font-family:var(--font-body);
      font-size:var(--fs-body); line-height:var(--lh-body); font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility; overflow-x:clip }
img,svg{ display:block; max-width:100% }
h1,h2,h3{ font-family:var(--font-display); color:var(--role-heading); font-weight:380; letter-spacing:-.015em; margin:0; text-wrap:balance }
p{ margin:0 0 1em; text-wrap:pretty }
a{ color:var(--role-link); text-decoration-thickness:1px; text-underline-offset:.2em }
a:hover{ color:var(--brand-accent-hover); text-decoration-thickness:2px }
:focus-visible{ outline:var(--focus-ring-width) solid var(--focus-ring-color); outline-offset:var(--focus-ring-offset); border-radius:var(--radius) }
.wrap{ width:min(1200px, 100% - 32px); margin-inline:auto }
.skip{ position:absolute; left:16px; top:-60px; background:var(--ink); color:var(--paper); padding:.75rem 1rem; z-index:50; text-decoration:none }
.skip:focus{ top:12px; color:var(--paper) }

/* label: small caps line, used for kickers */
.label{ font-size:var(--fs-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-accent) }

/* ---------- header ---------- */
.site-head{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--surface-base) 92%, transparent);
            backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--border-subtle) }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:68px; gap:1rem }
.wordmark{ font-family:var(--font-display); font-size:1.5rem; line-height:1; color:var(--ink); text-decoration:none; letter-spacing:-.01em }
.wordmark b{ font-weight:640 } .wordmark span{ font-style:italic; font-weight:400 }
.nav{ display:flex; gap:.25rem; align-items:center }
.nav a{ color:var(--ink); text-decoration:none; font-size:1rem; padding:.6rem .7rem; min-height:44px; display:inline-flex; align-items:center }
.nav a[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.45em }
.nav a:hover{ color:var(--brand-accent) }
.menu{ display:none }
@media (max-width: 900px){
  .nav{ display:none }
  .menu{ display:block; position:relative }
  .menu summary{ list-style:none; cursor:pointer; min-height:44px; min-width:44px; display:inline-flex; align-items:center; gap:.5rem;
                 font-weight:600; padding:0 .9rem; border:1.5px solid var(--border-default); border-radius:var(--radius) }
  .menu summary::-webkit-details-marker{ display:none }
  .menu[open] .panel{ position:absolute; right:0; top:52px; background:var(--surface-elevated); border:1px solid var(--border-default);
                      padding:.5rem; display:grid; min-width:220px; box-shadow:0 12px 32px -18px rgba(0,34,49,.35) }
  .menu .panel a{ color:var(--ink); text-decoration:none; padding:.7rem .8rem; min-height:44px }
}

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:52px; padding:0 1.5rem;
      font:600 1.0625rem/1 var(--font-body); text-decoration:none; border-radius:var(--radius); border:1.5px solid var(--ink);
      transition:transform var(--motion-duration-fast) var(--motion-ease-out), background-color var(--motion-duration-fast), color var(--motion-duration-fast) }
.btn-primary{ background:var(--ink); color:var(--paper) }
.btn-primary:hover{ background:var(--harbour-dk); border-color:var(--harbour-dk); color:var(--paper-3); transform:translateY(-2px) }
.btn-secondary{ background:transparent; color:var(--ink) }
.btn-secondary:hover{ background:var(--surface-card); color:var(--ink); transform:translateY(-2px) }
.btn .arr{ transition:transform var(--motion-duration-base) var(--motion-ease-out) }
.btn:hover .arr{ transform:translateX(4px) }
:root[data-theme="dark"] .btn-primary{ background:var(--paper); color:var(--role-body) }

/* ---------- footer strip ---------- */
.foot{ border-top:2px solid var(--ink); padding:2.5rem 0 3rem; font-size:var(--fs-small); color:var(--text-secondary) }
.foot .wrap{ display:grid; gap:1.5rem 3rem; grid-template-columns:1.2fr 1fr 1fr }
.foot .motto{ font-family:var(--font-display); font-style:italic; font-size:1.25rem; color:var(--ink); margin:.4rem 0 0 }
.foot a{ color:var(--ink) }
.foot .legal{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; border-top:1px solid var(--border-subtle); padding-top:1.25rem }
@media (max-width: 760px){ .foot .wrap{ grid-template-columns:1fr } }

/* theme toggle (opt-in dark) */
.theme{ min-height:44px; min-width:44px; border:1.5px solid var(--border-default); background:transparent; color:var(--ink);
        border-radius:var(--radius); font:600 .9375rem var(--font-body); padding:0 .8rem; cursor:pointer }