/* luther-rotmg.com — engineering-notebook portfolio
   paper + blueprint grid, ink navy, red-pen annotations for measured values only. */

/* self-hosted fonts — no third-party requests */
@font-face{font-family:"Space Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/SpaceGrotesk-400.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url("assets/fonts/SpaceGrotesk-500.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:600;font-style:normal;font-display:swap;src:url("assets/fonts/SpaceGrotesk-600.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url("assets/fonts/SpaceGrotesk-700.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/Newsreader-400.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400;font-style:italic;font-display:swap;src:url("assets/fonts/Newsreader-400i.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-weight:500;font-style:normal;font-display:swap;src:url("assets/fonts/Newsreader-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/PlexMono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url("assets/fonts/PlexMono-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-style:normal;font-display:swap;src:url("assets/fonts/PlexMono-600.woff2") format("woff2")}

:root{
  --paper:#F4F2EC;
  --paper-2:#ECE9E0;
  --ink:#1B2330;
  --ink-soft:#5A6472;
  --grid:#C9D4E0;
  --pen:#D8371F;          /* measured values / annotations ONLY */
  --live:#2E8B57;         /* live status ONLY */
  --rule:#D5D0C4;
  --display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;color:var(--ink);background-color:var(--paper);
  font-family:var(--serif);font-size:18px;line-height:1.6;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;background-position:-1px -1px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:940px;margin:0 auto;padding:0 28px}
a{color:inherit}
.mono{font-family:var(--mono)}
.disp{font-family:var(--display)}
:focus-visible{outline:2.5px solid var(--pen);outline-offset:3px}

/* topbar */
.topbar{border-bottom:1.5px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:10}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:58px;gap:16px}
.brand{font-family:var(--display);font-weight:700;letter-spacing:-.01em;font-size:19px;white-space:nowrap}
.brand small{font-family:var(--mono);font-weight:500;color:var(--ink-soft);font-size:12px;margin-left:8px}
.nav{display:flex;gap:22px;font-family:var(--mono);font-size:13px}
.nav a{text-decoration:none;color:var(--ink-soft);padding-bottom:2px;border-bottom:1.5px solid transparent}
.nav a:hover,.nav a:focus-visible{color:var(--ink);border-color:var(--pen)}
.status{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;color:var(--ink);white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px rgba(46,139,87,.18)}

/* masthead */
.mast{padding:64px 0 34px}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:22px}
.eyebrow b{color:var(--ink);font-weight:600}
h1{font-family:var(--display);font-weight:600;letter-spacing:-.02em;font-size:clamp(32px,5.6vw,60px);line-height:1.02;margin:0 0 22px;max-width:16ch}
h1 .u{background:linear-gradient(transparent 62%,rgba(216,55,31,.22) 0);padding:0 2px}
.lede{font-size:20px;max-width:60ch;color:#2b3542;margin:0 0 30px}
.lede em{font-style:italic;color:var(--ink)}

/* live readout */
.readout{display:grid;grid-template-columns:auto 1px 1fr;border:1.5px solid var(--ink);background:var(--paper);max-width:640px;box-shadow:5px 5px 0 rgba(27,35,48,.09)}
.readout .cell{padding:16px 20px}
.readout .vline{background:var(--rule)}
.r-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.r-num{font-family:var(--display);font-weight:700;font-size:40px;line-height:1;letter-spacing:-.02em;position:relative;display:inline-block}
.r-num .annot{position:absolute;right:-16px;top:-15px;font-family:var(--mono);font-size:10.5px;color:var(--pen);transform:rotate(-7deg);white-space:nowrap}
.r-sub{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-top:8px}
.r-sub .live{color:var(--live)}
.ticker{font-family:var(--mono);font-size:12.5px;line-height:1.9}
.ticker .row{color:var(--ink-soft)}
.ticker .row b{color:var(--ink);font-weight:600}
.ticker .tag{color:var(--pen)}

/* sections */
section{padding:52px 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1.5px solid var(--ink);padding-bottom:10px;margin-bottom:30px;gap:12px}
.sec-head h2{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.01em;margin:0}
.sec-head .idx{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)}

/* log entries */
.entry{border-left:2px solid var(--rule);padding:0 0 0 22px;margin-bottom:38px;position:relative}
.entry::before{content:"";position:absolute;left:-6px;top:6px;width:10px;height:10px;background:var(--paper);border:2px solid var(--ink);border-radius:50%}
.entry.live::before{background:var(--live);border-color:var(--live)}
.meta{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);margin-bottom:8px;display:flex;flex-wrap:wrap;gap:0 12px}
.meta .k{color:var(--ink);font-weight:600}
.meta .badge{color:var(--live);font-weight:600}
.entry h3{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.01em;margin:0 0 8px}
.entry p{margin:0 0 12px;max-width:62ch;color:#2b3542}
.entry p .num{font-family:var(--mono);color:var(--pen);font-weight:600;font-size:.94em}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.chip{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);border:1px solid var(--rule);padding:3px 9px;background:var(--paper)}
.open{font-family:var(--mono);font-size:12.5px;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--pen);padding-bottom:1px}
.open:hover,.open:focus-visible{color:var(--pen)}

/* RE artifact */
.re-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:start}
.re-grid p{max-width:46ch;color:#2b3542;margin:0 0 14px}
.artifact{border:1.5px solid var(--ink);background:#161d29;color:#c9d3e0;font-family:var(--mono);font-size:12.5px;line-height:1.7;overflow:hidden;box-shadow:5px 5px 0 rgba(27,35,48,.12)}
.artifact .bar{background:#0f1520;color:#7f8da0;padding:8px 14px;border-bottom:1px solid #26304099;display:flex;justify-content:space-between}
.artifact pre{margin:0;padding:16px 18px;white-space:pre;overflow-x:auto}
.artifact .off{color:#5f6b80}
.artifact .hi{color:#e0836a}
.artifact .an{color:#8fb98f}

/* contact */
.contact{border-top:1.5px solid var(--ink);padding:44px 0 26px}
.contact h2{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.01em;margin:0 0 10px}
.contact p{max-width:54ch;color:#2b3542;margin:0 0 22px}
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.lines{font-family:var(--mono);font-size:15px;line-height:2.1}
.lines a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--pen)}
.lines .k{color:var(--ink-soft)}
.btn{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:13px;color:var(--paper);background:var(--ink);border:1.5px solid var(--ink);padding:9px 16px;text-decoration:none}
.btn:hover,.btn:focus-visible{background:var(--pen);border-color:var(--pen)}
form label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 5px}
form input,form textarea{width:100%;font-family:var(--serif);font-size:16px;color:var(--ink);background:var(--paper);border:1.5px solid var(--rule);padding:9px 11px;margin-bottom:14px}
form input:focus,form textarea:focus{outline:none;border-color:var(--ink)}
form button{font-family:var(--mono);font-size:13px;color:var(--paper);background:var(--ink);border:1.5px solid var(--ink);padding:10px 20px;cursor:pointer}
form button:hover{background:var(--pen);border-color:var(--pen)}
.form-note{font-family:var(--mono);font-size:12px;margin-top:10px;min-height:1.2em}
.form-note.ok{color:var(--live)}
.form-note.err{color:var(--pen)}

.foot{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);border-top:1px solid var(--rule);padding:18px 0 40px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

@media (max-width:720px){
  body{font-size:17px}
  .nav{display:none}
  .readout{grid-template-columns:1fr;max-width:100%}
  .readout .vline{display:none}
  .re-grid,.c-grid{grid-template-columns:1fr}
}