@font-face {
  font-family: "Special Elite";
  src: url("../fonts/SpecialElite-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "IM Fell English";
  src: url("../fonts/IMFeENrm28P.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IM Fell English";
  src: url("../fonts/IMFeENit28P.ttf") format("truetype");
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/CourierPrime-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/CourierPrime-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --font-type: "Special Elite", "Courier New", monospace;
  --font-head: "IM Fell English", Georgia, serif;
  --font-num: "Courier Prime", "Courier New", monospace;

  --ink: #1c2a44;
  --ink-red: #8d2b1f;
  --ink-green: #2c5a3a;
  --text: #2b2418;
  --paper: #efe4c8;
  --news-paper: #e2dccb;

  --paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .38  0 0 0 0 .30  0 0 0 0 .18  .5 0 0 0 -.08'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --leather-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  .9 0 0 0 -.25'/></filter><rect width='100%' height='100%' filter='url(%23l)'/></svg>");
  --wood-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='260'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.004 0.45' numOctaves='4' seed='4'/><feColorMatrix values='0 0 0 0 .10  0 0 0 0 .05  0 0 0 0 .02  1.3 0 0 0 -.45'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>");
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background-color: #4b2f1b;
  background-image:
    var(--wood-grain),
    repeating-linear-gradient(0deg, transparent 0 258px, rgba(0, 0, 0, 0.5) 258px 261px, rgba(255, 215, 160, 0.07) 261px 263px),
    linear-gradient(90deg, #3d2615, #5d3b22 35%, #47301b 70%, #603d22);
  color: var(--text);
  font-family: var(--font-type);
  font-size: 14px;
  line-height: 1.35;
}

#desk {
  min-height: 100vh;
  padding: 20px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.7);
}

/* Leather desk pad with a stitched border */
#pad {
  position: relative;
  width: min(1320px, 100%);
  height: calc(100vh - 40px);
  min-height: 640px;
  padding: 30px;
  display: grid;
  grid-template-columns: minmax(360px, 1.1fr) minmax(300px, 1fr) minmax(300px, 0.9fr);
  gap: 24px;
  background-color: #26322c;
  background-image:
    var(--leather-grain),
    radial-gradient(ellipse at 30% 15%, rgba(255, 255, 255, 0.08), transparent 60%);
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.45),
    inset 0 0 80px rgba(0, 0, 0, 0.6),
    0 20px 44px rgba(0, 0, 0, 0.65);
}

#pad::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(224, 196, 140, 0.4);
  border-radius: 10px;
  pointer-events: none;
}

#side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 22px;
  min-height: 0;
}

#pad > * { min-height: 0; }