@font-face{
  /* SkjarPixel — a 5x7 bitmap face built for this site (tools/build-font.py).
     Self-hosted: no CDN, 1.8 KB, and every Icelandic glyph is present. */
  font-family:"SkjarPixel";
  src:url("../fonts/skjarpixel.woff2") format("woff2"),
      url("../fonts/skjarpixel.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ═══════════════════════════════════════════════════════════════
   SKJÁR & DISKUR — base.css
   Tokens, reset, typography, buttons, layout primitives.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── palette ───────────────────────────────────────────── */
  --beige:      #C8BFA8;
  --panel:      #DED5BD;
  --panel-hi:   #EFE8D3;
  --grey:       #8B887E;
  --blue:       #506A78;
  --teal:       #47746F;
  --black:      #1D211F;
  --red:        #A94F45;
  --green:      #83C96B;
  --amber:      #D99B43;
  --amber-text: #E8B967;         /* amber, light enough to read on the dark room */
  --cream:      #E8E1CA;

  /* ── derived surfaces ──────────────────────────────────── */
  --desk:       #22302F;         /* desktop background            */
  --desk-2:     #16201F;
  --ink:        #191D1B;         /* text on light panels          */
  --ink-soft:   #4A4C44;
  --paper:      var(--panel);
  --line:       #6E6A5F;

  --bevel-hi:   #F6F1E0;
  --bevel-lo:   #6A665B;
  --bevel-sh:   #3B3931;

  --titlebar:   linear-gradient(90deg, var(--blue), #6d8a97);
  --titlebar-off: linear-gradient(90deg, #6f6c62, #8d8a80);

  /* ── type ──────────────────────────────────────────────── */
  --f-display: "SkjarPixel", "Courier New", monospace;
  --f-ui:      Tahoma, Verdana, Geneva, "DejaVu Sans", sans-serif;
  --f-term:    ui-monospace, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
  --f-mono:    ui-monospace, "Lucida Console", "DejaVu Sans Mono", monospace;

  /* ── metrics ───────────────────────────────────────────── */
  --bezel: clamp(0px, 1.2vw, 22px);
  --taskbar-h: 42px;
  --menubar-h: 58px;
  --wrap: 1240px;
  --radius: 2px;

  --step: cubic-bezier(.2,.9,.3,1);
}

/* ── reset ───────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--menubar-h) + 14px);
  scroll-padding-bottom:calc(var(--taskbar-h) + 14px);  /* the taskbar is fixed */
  background:transparent;   /* the .workshop layer behind it is the background */
}
body{
  margin:0;
  font-family:var(--f-ui);
  font-size:16px;
  line-height:1.6;
  color:var(--cream);
  background:transparent;   /* the .workshop layer behind it is the background */
  padding-bottom:var(--taskbar-h);
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,pre{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; }

/* ── typography ──────────────────────────────────────────── */
.mono{ font-family:var(--f-term); font-size:.96em; letter-spacing:.03em; }
h1,h2,h3,.brand__name,.shead__title{
  font-family:var(--f-display);
  font-weight:400;
  font-synthesis:none;
  letter-spacing:.04em;
  line-height:1.05;
  text-transform:uppercase;
}
h1{ font-size:clamp(2.1rem, 6.2vw, 4.1rem); }
h2{ font-size:clamp(1.5rem, 4vw, 2.6rem); }
h3{ font-size:clamp(1.05rem, 2vw, 1.35rem); }

::selection{ background:var(--amber); color:var(--black); }

/* ── layout ──────────────────────────────────────────────── */
.wrap{ width:min(100% - 2.4rem, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2.4rem, 900px); }
.section{ padding:clamp(3.2rem, 7vw, 6rem) 0; position:relative; }

/* ── skip link ───────────────────────────────────────────── */
.skiplink{
  position:fixed; top:8px; left:8px; z-index:900;
  transform:translateY(-200%);
  background:var(--amber); color:var(--black);
  padding:.6rem 1rem; font-weight:700; text-decoration:none;
  border:2px solid var(--black);
}
.skiplink:focus{ transform:none; }

/* ── focus ───────────────────────────────────────────────── */
:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
}
.win__body :focus-visible,
.panelbox :focus-visible{ outline-color:var(--blue); }

/* ═══════════ buttons: physical, beveled, clicky ═══════════ */
.btn{
  --btn-face:var(--panel);
  display:inline-flex; align-items:center; gap:.5ch;
  font-family:var(--f-ui);
  font-size:.86rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; text-decoration:none;
  color:var(--ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(0,0,0,.06)),
    var(--btn-face);
  padding:.7rem 1.15rem;
  border:1px solid var(--bevel-sh);
  border-radius:var(--radius);
  box-shadow:
    inset 1px 1px 0 var(--bevel-hi),
    inset -1px -1px 0 var(--bevel-lo),
    inset 2px 2px 0 rgba(255,255,255,.35),
    inset -2px -2px 0 rgba(0,0,0,.16),
    2px 2px 0 rgba(0,0,0,.35);
  cursor:pointer;
  position:relative;
  transition:none;
}
.btn:hover{ --btn-face:var(--panel-hi); }
.btn:active,
.btn[aria-pressed="true"]{
  translate:2px 2px;
  box-shadow:
    inset 1px 1px 0 var(--bevel-lo),
    inset -1px -1px 0 var(--bevel-hi),
    inset 2px 2px 0 rgba(0,0,0,.18),
    0 0 0 rgba(0,0,0,0);
}
.btn--primary{ --btn-face:#C2A15E; color:#221c0e; }
.btn--primary:hover{ --btn-face:#d2b16c; }
.btn--sm{ padding:.45rem .8rem; font-size:.76rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ── LED indicators ──────────────────────────────────────── */
.led{
  width:8px; height:8px; flex:0 0 8px;
  display:inline-block; border-radius:50%;
  background:#3d4340;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
  vertical-align:middle;
}
.led--green{ background:var(--green); box-shadow:0 0 6px rgba(131,201,107,.75), inset 0 0 0 1px rgba(0,0,0,.35); }
.led--amber{ background:var(--amber); box-shadow:0 0 6px rgba(217,155,67,.75), inset 0 0 0 1px rgba(0,0,0,.35); }
.led--red{   background:var(--red);   box-shadow:0 0 6px rgba(169,79,69,.8),  inset 0 0 0 1px rgba(0,0,0,.35); }
.led--off{   background:#40453f; }

html:not([data-motion="reduce"]) .led--amber{ animation:ledpulse 2.4s steps(2,end) infinite; }
@keyframes ledpulse{ 0%,60%{opacity:1} 61%,100%{opacity:.45} }

/* ── blinking cursor ─────────────────────────────────────── */
.blink{ color:var(--green); }
html:not([data-motion="reduce"]) .blink{ animation:blink 1.06s steps(1,end) infinite; }
@keyframes blink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* ── keyboard key ────────────────────────────────────────── */
.kbd{
  display:inline-block; font-family:var(--f-mono); font-size:.7em;
  padding:.05em .45em; margin-inline:.2em;
  background:var(--panel); color:var(--ink);
  border-radius:2px;
  box-shadow:inset 1px 1px 0 #fff, inset -1px -1px 0 var(--bevel-lo), 1px 1px 0 rgba(0,0,0,.5);
}

/* ── pixel icon container (filled by JS) ─────────────────── */
[data-icon]{
  display:inline-block; width:1.5em; height:1.5em;
  flex:0 0 auto; vertical-align:middle;
  image-rendering:pixelated;
}
[data-icon] svg{ width:100%; height:100%; display:block; }

/* ── section reveal ──────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(14px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .01s steps(4,end) , transform .32s steps(5,end); }
html[data-motion="reduce"] .reveal{ opacity:1; transform:none; transition:none; }

/* static flash on reveal */
html[data-static="on"]:not([data-motion="reduce"]) .reveal.is-in::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background-image:var(--noise);
  opacity:.5; mix-blend-mode:screen;
  animation:staticout .28s steps(4,end) forwards;
}
@keyframes staticout{ to{ opacity:0; visibility:hidden; } }

/* ── screen-reader only ──────────────────────────────────── */
.sr{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ── shared: sticker + tape props ────────────────────────── */
.sticker{
  font-family:var(--f-display);
  font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  color:#4a2b25;
  background:repeating-linear-gradient(-8deg,#e6dcc0 0 6px,#dfd4b6 6px 12px);
  border:1px solid #a9866a;
  padding:.34rem .6rem;
  box-shadow:1px 2px 0 rgba(0,0,0,.4);
  transform:rotate(-4deg);
}
.tape{
  position:absolute; width:74px; height:22px;
  background:rgba(233,225,199,.42);
  border-left:1px dashed rgba(255,255,255,.3);
  border-right:1px dashed rgba(255,255,255,.3);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.tape--tl{ top:-11px; left:-18px; transform:rotate(-32deg); }