/* davedixson.co.uk — shares the CV's type and palette so the QR scan feels continuous */

:root{
  --ink:#16212b; --ink2:#33434f; --muted:#6d7d8a; --faint:#8b9aa6;
  --accent:#0f6f7a; --accent-dk:#0a4f57; --accent-soft:#eaf4f5;
  --rule:#dde5ea; --hair:#eef2f5; --paper:#fff; --wash:#f7fafb;
  --shadow:0 1px 2px rgba(22,33,43,.05), 0 8px 24px rgba(22,33,43,.06);
  /* Amstrad CPC464 on the GT65 green-phosphor monitor */
  --cpc-bezel:#2b2f2c; --cpc-paper:#071a0c; --cpc-ink:#4bff7a;
  --cpc-bright:#c9ffd8; --cpc-dim:#2f8f4c; --cpc-glow:rgba(75,255,122,.34);
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e8eef2; --ink2:#c2ced6; --muted:#8fa2ad; --faint:#75868f;
    --accent:#4fbecb; --accent-dk:#8ad7e0; --accent-soft:#12262a;
    --rule:#25333c; --hair:#1d2930; --paper:#0e161b; --wash:#131d23;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--paper); color:var(--ink2);
  font-family:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px; margin:0 auto; padding:0 24px}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
strong{color:var(--ink); font-weight:600}
h1,h2,h3,h4{color:var(--ink); line-height:1.2; margin:0}
.mono{font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--paper);padding:10px 16px;border-radius:8px;box-shadow:var(--shadow)}

/* ---------------- hero ---------------- */
.hero{padding:72px 0 44px; border-bottom:1px solid var(--rule)}
.hero h1{font-size:clamp(2.6rem,8vw,3.9rem); font-weight:700; letter-spacing:-.028em}
.hero h1 .sur{color:var(--accent)}
.hero .role{margin:10px 0 0; font-size:clamp(1.05rem,3.4vw,1.32rem); font-weight:500; color:var(--ink2)}
.hero .role .sep{color:var(--faint); padding:0 .4em; font-weight:400}
.hero .tag{margin:8px 0 0; font-size:.79rem; letter-spacing:.09em; text-transform:uppercase;
           color:var(--muted); font-weight:500}
.hero .lede{margin:26px 0 0; font-size:1.09rem; color:var(--ink2); max-width:62ch}

.actions{display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 0; align-items:center}
.btn{display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:10px;
     font-size:.96rem; font-weight:600; letter-spacing:.005em; border:1.5px solid transparent}
.btn.primary{background:var(--accent); color:#fff; box-shadow:var(--shadow)}
.btn.primary:hover{background:var(--accent-dk); text-decoration:none}
.btn.ghost{border-color:var(--rule); color:var(--ink)}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.btn svg{width:17px; height:17px; flex:none}

.meta{display:flex; flex-wrap:wrap; gap:6px 20px; margin:24px 0 0; font-size:.93rem; color:var(--ink2)}
.meta a{color:var(--ink2)}
.meta a:hover{color:var(--accent)}

/* ---------------- terminal ---------------- */
.term-sec{padding:56px 0 8px}
.term-lead{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 16px; margin:0 0 18px}
.term-lead h2{font-size:1.42rem; letter-spacing:-.015em}
.term-lead p{margin:0; font-size:.93rem; color:var(--muted); flex:1 1 260px}

.crt{
  background:linear-gradient(#343935,#232725); border-radius:14px; padding:17px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.07); position:relative;
}
.screen{
  background:var(--cpc-paper); border-radius:6px; padding:18px 18px 14px;
  font-family:'VT323',ui-monospace,Consolas,monospace;
  font-size:20px; line-height:1.3; color:var(--cpc-ink);
  text-shadow:0 0 6px var(--cpc-glow);
  height:390px; overflow-y:auto; overflow-x:hidden; position:relative;
  cursor:text; -webkit-overflow-scrolling:touch; overflow-anchor:none;
}
.screen::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:6px;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  opacity:.55;
}
.screen::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:6px; z-index:1;
  background:radial-gradient(120% 100% at 50% 42%, transparent 52%, rgba(0,0,0,.42) 100%);
}
.screen::-webkit-scrollbar{width:10px}
.screen::-webkit-scrollbar-track{background:transparent}
.screen::-webkit-scrollbar-thumb{background:#1d5c31; border-radius:5px;
  border:3px solid var(--cpc-paper)}
.screen::-webkit-scrollbar-thumb:hover{background:var(--cpc-dim)}
.screen{scrollbar-width:thin; scrollbar-color:#1d5c31 transparent}
.screen b{color:var(--cpc-bright); font-weight:400; text-shadow:0 0 8px var(--cpc-glow)}
.screen .dim{color:var(--cpc-dim); text-shadow:none}
.screen .err{background:var(--cpc-ink); color:var(--cpc-paper); text-shadow:none; padding:0 .4ch}
.out{white-space:pre-wrap; word-break:break-word; position:relative; z-index:2}
.line{display:flex; gap:.5ch; position:relative; z-index:2}
.line .ps1{flex:none}
#typed{white-space:pre-wrap; word-break:break-word}
.cur{display:inline-block; width:.62ch; height:1.05em; background:var(--cpc-ink);
     box-shadow:0 0 7px var(--cpc-glow);
     vertical-align:-.16em; animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .cur{animation:none} }
/* The field that receives keystrokes is deliberately position:FIXED.
   A focused input is scrolled into view by the browser on every keypress. Inside
   .screen that scrolls the console away from the prompt; inside .crt it can scroll
   the whole page. Pinned to the viewport there is nothing to scroll to, ever.
   font-size:16px stops iOS zooming when it takes focus. */
#sink{position:fixed; top:50vh; left:0; opacity:0; pointer-events:none; border:0;
      padding:0; width:1px; height:1px; background:transparent; caret-color:transparent;
      font-size:16px; z-index:0}

#game{display:none; position:relative; z-index:2; margin:0 auto; image-rendering:pixelated;
      width:auto; height:100%; max-height:100%; max-width:100%; aspect-ratio:1;
      border:1px solid var(--cpc-dim); border-radius:2px; touch-action:none}
/* while a game is running the console text steps aside so the board fits */
.screen.playing{overflow:hidden; display:flex; align-items:center; justify-content:center}
.screen.playing #out, .screen.playing .line{display:none}
.screen.playing #game{display:block}
.keys{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
.key{font-family:'IBM Plex Mono',monospace; font-size:.76rem; padding:6px 11px; border-radius:6px;
     border:1px solid var(--rule); color:var(--ink2); background:var(--paper); cursor:pointer}
.key:hover{border-color:var(--accent); color:var(--accent)}
.term-note{margin:14px 0 0; font-size:.83rem; color:var(--faint)}

/* ---------------- cv ---------------- */
.cv{padding:20px 0 0}
.sec{padding:44px 0 0}
.sec > h2{
  font-size:.82rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:14px; margin:0 0 18px;
}
.sec > h2::after{content:""; flex:1; height:1px; background:var(--rule)}
.sec p{margin:0 0 14px}

.panel{background:var(--accent-soft); border-left:3px solid var(--accent);
       padding:20px 24px; border-radius:0 10px 10px 0}
.panel ul{margin:0; padding:0; list-style:none; display:grid; gap:12px}
.panel li{padding-left:20px; position:relative; font-size:.98rem}
.panel li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
                  border-radius:50%; background:var(--accent)}
.panel b{color:var(--accent-dk)}

.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px 34px}
.st{padding-left:16px; border-left:2px solid var(--accent-soft); font-size:.96rem}
.st b{display:block; color:var(--ink); font-size:.9rem; letter-spacing:.01em}

.skills{display:grid; grid-template-columns:minmax(120px,168px) 1fr; gap:10px 22px; font-size:.95rem}
.skills dt{font-weight:600; color:var(--ink); font-size:.87rem}
.skills dd{margin:0}
@media (max-width:560px){
  .skills{grid-template-columns:1fr; gap:2px 0}
  .skills dd{margin:0 0 12px}
}

.job{padding:26px 0 0; margin:26px 0 0; border-top:1px solid var(--hair)}
.job:first-of-type{border-top:0; padding-top:0; margin-top:0}
.job h3{font-size:1.2rem; font-weight:700}
.job .co{margin:5px 0 0; font-size:1rem; font-weight:600; color:var(--accent)}
.job .co .sub{color:var(--muted); font-weight:500; font-size:.9rem}
.job .when{margin:4px 0 0; font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--muted)}
.job .blurb{margin:8px 0 0; font-size:.9rem; font-style:italic; color:var(--muted)}
.job ul{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:11px}
.job li{padding-left:20px; position:relative; font-size:.98rem}
.job li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
                border-radius:50%; background:var(--accent)}

.early{display:grid; gap:18px}
.er h4{font-size:1.02rem; display:inline}
.er .rl{color:var(--accent); font-weight:600; font-size:.93rem}
.er .when{font-family:'IBM Plex Mono',monospace; font-size:.79rem; color:var(--muted); margin:0 0 2px}
.er p{margin:3px 0 0; font-size:.95rem}

.card{border:1px solid var(--rule); border-radius:12px; padding:22px 24px; background:var(--wash)}
.card h3{font-size:1.1rem}
.card .stack{margin:8px 0 12px; font-size:.76rem; letter-spacing:.07em; text-transform:uppercase;
             color:var(--muted); font-weight:500}
.card p{font-size:.96rem; margin:0}

.ed{display:grid; gap:14px; padding:0; margin:0; list-style:none}
.ed .q{font-weight:600; color:var(--ink)}
.ed .m{font-size:.92rem; color:var(--muted)}

footer{margin:70px 0 0; padding:26px 0 44px; border-top:1px solid var(--rule);
       font-size:.87rem; color:var(--muted)}
footer .row{display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between}

@media print{ .term-sec, .actions, .skip{display:none} }