/* Dyrland Data & AI — shared shell.
   Bergen north light: a cold ground, never a warm one. Both pages pull their
   tokens from here so the CV and the company page cannot drift apart. */

:root{
  --paper:#e6ecee; --card:#eef2f4; --ink:#0d1519; --muted:#5b7480;
  --deep:#12363f; --tide:#2e7185; --rime:#c2d8dc; --live:#1d6f4f;
  --rule:#c7d5d9;
  --measure:66ch;
  --step:clamp(4.5rem,9vw,7.5rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.65 "IBM Plex Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Newsreader,Georgia,serif; font-weight:300; letter-spacing:-.015em; margin:0}
a{color:inherit}
img{max-width:100%; height:auto}
:focus-visible{outline:2px solid var(--tide); outline-offset:3px; border-radius:2px}
.wrap{width:min(1080px,100% - 2.5rem); margin-inline:auto}

/* Mono is the structural voice: labels, data, status. */
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tide);
}

/* ---- masthead ----------------------------------------------------------- */
.masthead{border-bottom:1px solid var(--rule)}
.masthead .wrap{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:baseline;
  justify-content:space-between; padding:1.15rem 0;
}
.wordmark{
  font-family:"IBM Plex Mono",monospace; font-size:.82rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
}
.masthead nav{display:flex; gap:1.4rem; font-family:"IBM Plex Mono",monospace; font-size:.75rem; letter-spacing:.06em}
.masthead nav a{color:var(--muted); text-decoration:none}
.masthead nav a:hover{color:var(--deep)}

/* ---- sections ----------------------------------------------------------- */
section{padding-block:var(--step)}
section + section{border-top:1px solid var(--rule)}
.head{margin-bottom:2.8rem}
.head h2{font-size:clamp(1.7rem,3.2vw,2.4rem); margin-top:.6rem; max-width:24ch}
.head p{max-width:var(--measure); color:var(--muted); margin:.9rem 0 0}

/* ---- the register --------------------------------------------------------
   A manifest, not a card grid. Reused on the CV for roles, where the dates
   genuinely are a sequence. */
.register{border-top:1px solid var(--rule)}
.row{
  display:grid; grid-template-columns:1.6rem minmax(0,10rem) minmax(0,1fr) auto;
  gap:0 1.6rem; align-items:start;
  padding:1.5rem 0; border-bottom:1px solid var(--rule);
  text-decoration:none; color:inherit;
  transition:padding-left .25s cubic-bezier(.2,.7,.3,1), background-color .25s;
}
a.row:hover,a.row:focus-visible{padding-left:.7rem; background:var(--card)}
.dot{width:.62rem; height:.62rem; margin-top:.55rem; border:1.5px solid var(--tide); background:transparent}
.row[data-state="live"] .dot{background:var(--live); border-color:var(--live)}
.name{font-family:Newsreader,serif; font-size:1.42rem; font-weight:400; line-height:1.2}
.state{
  display:block; font-family:"IBM Plex Mono",monospace; font-size:.64rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-top:.3rem;
}
.row[data-state="live"] .state{color:var(--live)}
.what{margin:0; color:var(--muted); font-size:.97rem; max-width:52ch}
.stack{
  display:block; margin-top:.6rem; font-family:"IBM Plex Mono",monospace;
  font-size:.7rem; letter-spacing:.04em; color:var(--tide);
}
.go{
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; padding-top:.45rem;
}
a.row:hover .go,a.row:focus-visible .go{color:var(--deep)}

/* ---- colophon: the verifiable facts a reviewer looks for ---------------- */
.colophon{border-top:1px solid var(--rule); padding:2.6rem 0 3.4rem; background:var(--card)}
.colophon dl{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1.5rem 2.5rem;
  margin:0 0 2rem; font-family:"IBM Plex Mono",monospace; font-size:.76rem;
}
.colophon dt{color:var(--muted); letter-spacing:.11em; text-transform:uppercase; font-size:.65rem; margin-bottom:.35rem}
.colophon dd{margin:0; color:var(--ink)}
.colophon .fine{font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--muted); margin:0}

/* ---- motion: the register populates like a table, once ------------------ */
@media (prefers-reduced-motion:no-preference){
  .row{animation:settle .5s cubic-bezier(.2,.7,.3,1) backwards}
  .row:nth-child(1){animation-delay:.02s} .row:nth-child(2){animation-delay:.06s}
  .row:nth-child(3){animation-delay:.10s} .row:nth-child(4){animation-delay:.14s}
  .row:nth-child(5){animation-delay:.18s} .row:nth-child(6){animation-delay:.22s}
  .row:nth-child(7){animation-delay:.26s} .row:nth-child(8){animation-delay:.30s}
  @keyframes settle{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

@media (max-width:720px){
  .row{grid-template-columns:1.2rem 1fr; gap:0 1rem}
  .row .what{grid-column:2; margin-top:.7rem}
  .row .go{grid-column:2; padding-top:.7rem}
}