@font-face{font-family:"Big Shoulders Display";font-weight:700;font-display:swap;src:url(fonts/big-shoulders-display-700.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:900;font-display:swap;src:url(fonts/big-shoulders-display-900.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600.woff2) format("woff2")}

/* Brand kit colors (README). Light = paper, dark = blueprint. */
:root{
  color-scheme:light dark;
  --paper:#EEF3F2; --sheet:#FAFCFB; --ink:#1B2A40; --orange:#EE5F1B; --orange-text:#C9500F;
  --muted:#56687A; --grid-major:#C3D7DB; --grid-minor:#D6E4E7; --rule:#B6C7CB;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0D2440; --sheet:#0F2A4A; --ink:#E3EDF6; --orange:#FF7A33; --orange-text:#FF7A33;
    --muted:#9DB4C9; --grid-major:#1D3D62; --grid-minor:#153253; --rule:#2C4D72;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; color:var(--ink); background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid-minor) 1px,transparent 1px),linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  font:500 16px/1.6 "IBM Plex Mono",ui-monospace,monospace;
  display:flex; flex-direction:column; align-items:center; padding:16px;
}
a{color:inherit}
a:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.sheet{
  width:100%; max-width:880px; margin:auto 0; background:var(--sheet);
  border:3px solid var(--ink); position:relative; overflow:hidden;
}
.corner{
  margin:0; padding:10px 16px; font-size:12px; letter-spacing:.16em; color:var(--muted);
  border-bottom:1px solid var(--rule);
}

.hero{padding:40px 24px 32px; display:flex; align-items:center; gap:28px; flex-wrap:wrap}
.mark{width:128px; height:128px; flex:none}
.mark .ink{fill:var(--ink)} .mark .tee{fill:var(--orange)}
h1{margin:0; font-weight:900}
.t{display:block; font:900 clamp(64px,15vw,124px)/.82 "Big Shoulders Display",sans-serif; letter-spacing:.02em; text-transform:uppercase}
.s{display:block; font:700 clamp(18px,4.2vw,33px)/1 "Big Shoulders Display",sans-serif; letter-spacing:.36em; text-transform:uppercase; color:var(--muted); margin-top:10px}
.tag{margin:14px 0 0; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-text)}

.about{padding:0 24px 32px; max-width:62ch}
.about p{margin:0}

.links{margin:0 -1px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); border-top:3px solid var(--ink)}
.links a{
  display:block; padding:20px 24px; text-decoration:none; border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);
}
.links a:hover{background:var(--paper)}
.links .k{display:block; font-size:12px; letter-spacing:.14em; color:var(--muted)}
.links .v{display:block; font:700 26px/1.15 "Big Shoulders Display",sans-serif; letter-spacing:.04em; text-transform:uppercase; margin-top:4px}
.links .n{display:block; font-size:13px; color:var(--muted); margin-top:6px; overflow-wrap:anywhere}
.links a:hover .v{color:var(--orange-text)}

.tb{margin:0 -1px -1px 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); border-top:3px solid var(--ink)}
.tb div{padding:10px 16px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.tb dt{font-size:11px; letter-spacing:.14em; color:var(--muted)}
.tb dd{margin:2px 0 0; font-weight:600; font-size:14px; text-transform:uppercase}

.fine{margin:16px 0 0; font-size:12px; color:var(--muted); text-align:center}

@media (max-width:520px){
  .hero{padding:28px 16px 24px; gap:18px}
  .mark{width:88px; height:88px}
  .about{padding:0 16px 24px}
  .links a{padding:16px}
}