/* ==========================================================================
   Sam Hall — Music & Digital Media
   Cream / orange / blue, pixel headings, readable body, console-shell layout.
   One stylesheet for the whole site. All paths relative.

   Core three (from the original site):
     cream  #fcf8e8   orange #f15a29   blue #27aae1
   Orange and blue are too light on cream for small text (3.2:1 and 2.5:1),
   so --accent-ink and --accent-2 are darkened siblings used for body-sized
   text. The bright originals stay on headings, fills, borders, and art.

   Light only, on purpose — no dark-mode block. The cream IS the design.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  color-scheme: light;   /* keep form controls + scrollbars light too */

  /* room = the space around the device */
  --room:        #3d1305;
  --shell:       #b83c11;
  --shell-dark:  #7d2709;
  --shell-light: #f15a29;   /* their orange, as the outset bevel highlight */
  --bezel:       #2a2622;

  --screen:      #fcf8e8;
  --panel:       #f7f1dc;
  --panel-2:     #efe7cd;
  --tile:        #fcf8e8;

  --ink:         #2a2622;
  --ink-soft:    #6b6357;
  --line:        #ddd3b6;
  --edge:        #2a2622;
  --card-edge:   #2a2622;

  --accent:      #f15a29;   /* orange: h1, borders, fills, decoration */
  --accent-ink:  #c53c0c;   /* orange for small text (4.9:1 on cream) */
  --accent-2:    #12718f;   /* blue for links + small text (5.2:1) */
  --highlight:   #27aae1;   /* their bright blue: buttons, shadows, LED */

  --on-shell:    #fcf8e8;
  --on-accent:   #2a2622;   /* dark text on bright-blue buttons (5.7:1) */
  --scanline:    rgba(42,38,34,.05);

  --pixel: "Press Start 2P", ui-monospace, "Courier New", monospace;

  /* Body text: DotGothic16 — dot-matrix, but with unambiguous numerals, which
     most pixel faces don't have (Pixelify Sans renders 5 as an S and 6 as an
     8 — fatal on a page full of ages and lesson lengths). Single weight only,
     so nothing here may ask for bold: synthetic bold smears the dot grid. */
  --sans: "DotGothic16", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --shadow: 5px 5px 0 var(--edge);
  --shadow-sm: 3px 3px 0 var(--edge);
  --measure: 56ch;

  /* whole-number upscale for every pixel sprite, so the grid stays crisp and
     the character and the item above it always scale together */
  --px: 5;
}

@media (max-width: 620px) {
  :root { --px: 4; }
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--ink);
  background-color: var(--room);
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
}

img { max-width: 100%; display: block; }
.pix { image-rendering: pixelated; image-rendering: crisp-edges; }

a { color: var(--accent-2); }
a:hover { color: var(--accent-ink); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  font-family: var(--pixel);
  font-size: .7rem;
  padding: .9rem 1.1rem;
  background: var(--highlight);
  color: var(--on-accent);
  text-decoration: none;
}
.skip-link:focus { left: .5rem; top: .5rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- The device ----------------------------------------------------------- */

.device {
  max-width: 1160px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--shell);
  display: flex;
  flex-direction: column;
  box-shadow:
    inset  4px 0 0 var(--shell-light),
    inset -4px 0 0 var(--shell-dark),
    0 0 0 1px rgba(0,0,0,.5);
}

/* --- Deck (sticky nav) ---------------------------------------------------- */

.deck {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--shell);
  border-bottom: 4px solid var(--shell-dark);
  box-shadow: 0 5px 0 rgba(0,0,0,.22);
}

.deck-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: var(--on-shell);
}
.brand:hover { color: var(--on-shell); }
.brand:hover .brand-name { color: #ffffff; }

.brand-mark { width: 30px; height: 30px; }
.brand:hover .brand-mark { transform: translateY(-2px); }
.brand-mark { transition: transform .1s steps(2); }

.brand-text { display: flex; flex-direction: column; gap: .3rem; }
.brand-name {
  font-family: var(--pixel);
  font-size: .78rem;
  letter-spacing: .04em;
  line-height: 1;
  transition: color .1s;
}
.brand-sub {
  /* bumped from .62rem: a dot-matrix face falls apart under ~12px */
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fce4d5;
  line-height: 1;
}

.led {
  width: 9px; height: 9px;
  background: #9fe4ff;
  box-shadow: 0 0 0 2px var(--shell-dark), 0 0 10px rgba(159,228,255,.85);
  margin-right: .25rem;
  flex: none;
  animation: blip 3.2s steps(1, end) infinite;
}
@keyframes blip { 0%, 92% { opacity: 1; } 96% { opacity: .35; } }

.nav { display: flex; align-items: center; gap: .15rem; }

.nav a {
  font-family: var(--pixel);
  font-size: .58rem;
  letter-spacing: .03em;
  line-height: 1;
  color: var(--on-shell);
  text-decoration: none;
  padding: .8rem .7rem;
  border: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover {
  color: var(--ink);
  background: var(--highlight);
  border-color: var(--shell-dark);
}
.nav a[aria-current="page"] {
  color: #ffffff;
  border-bottom-color: var(--highlight);
}
.nav a[aria-current="page"]:hover { color: var(--ink); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  font-family: var(--pixel);
  font-size: .62rem;
  color: var(--on-shell);
  background: var(--shell-light);
  border: 3px solid var(--shell-dark);
  padding: .7rem .8rem;
  cursor: pointer;
}
.nav-toggle:hover { background: var(--highlight); color: var(--ink); }
.nav-toggle::after { content: "\25BE"; }
.nav-toggle[aria-expanded="true"]::after { content: "\25B4"; }

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 1.25rem;
    left: 1.25rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--shell);
    border: 3px solid var(--shell-dark);
    box-shadow: 6px 6px 0 rgba(0,0,0,.35);
    padding: .35rem;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .85rem .8rem; font-size: .62rem; }
  .brand-sub { display: none; }
}

/* --- Screen --------------------------------------------------------------- */

.bezel {
  --notch: 8px;
  flex: 1;
  display: flex;
  margin: 1.1rem;
  padding: 6px;
  background: var(--bezel);
  clip-path: polygon(
    0 var(--notch), var(--notch) var(--notch), var(--notch) 0,
    calc(100% - var(--notch)) 0, calc(100% - var(--notch)) var(--notch), 100% var(--notch),
    100% calc(100% - var(--notch)), calc(100% - var(--notch)) calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
    var(--notch) 100%, var(--notch) calc(100% - var(--notch)), 0 calc(100% - var(--notch))
  );
}

.screen {
  --notch: 6px;
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--screen);
  clip-path: polygon(
    0 var(--notch), var(--notch) var(--notch), var(--notch) 0,
    calc(100% - var(--notch)) 0, calc(100% - var(--notch)) var(--notch), 100% var(--notch),
    100% calc(100% - var(--notch)), calc(100% - var(--notch)) calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
    var(--notch) 100%, var(--notch) calc(100% - var(--notch)), 0 calc(100% - var(--notch))
  );
}

/* scanlines */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, var(--scanline) 0 1px, transparent 1px 4px);
}

.page {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.1rem, 4vw, 2.5rem) 3.5rem;
}
.page--wide { max-width: 1000px; }

/* --- Controls + tray ------------------------------------------------------ */

.controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1.5rem 1rem;
}

.dpad {
  width: 34px; height: 34px; flex: none;
  background:
    linear-gradient(var(--shell-dark), var(--shell-dark)) 0 50% / 100% 12px no-repeat,
    linear-gradient(var(--shell-dark), var(--shell-dark)) 50% 0 / 12px 100% no-repeat;
}

.abtns { display: flex; gap: .5rem; flex: none; }
.abtns i {
  width: 15px; height: 15px;
  border: 2px solid var(--shell-dark);
}
.abtns i:first-child { background: var(--accent); }
.abtns i:last-child  { background: var(--highlight); }

.grille {
  flex: 1;
  height: 16px;
  background: repeating-linear-gradient(0deg, var(--shell-dark) 0 3px, transparent 3px 7px);
  opacity: .85;
}

.tray {
  border-top: 4px solid var(--shell-dark);
  padding: 1.1rem 1.5rem 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.25rem;
}

.tray-links { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.tray-links a {
  font-family: var(--pixel);
  font-size: .58rem;
  color: var(--on-shell);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
}
.tray-links a:hover { color: #ffffff; border-bottom-color: #ffffff; }

.tray-copy {
  margin: 0;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fce4d5;
}

/* --- Typography ----------------------------------------------------------- */

.eyebrow {
  font-family: var(--pixel);
  font-size: .6rem;
  letter-spacing: .12em;
  color: var(--accent-ink);
  text-transform: uppercase;
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: "";
  width: 10px; height: 10px;
  background: var(--accent);
  flex: none;
}

h1, h2, h3 {
  font-family: var(--pixel);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .01em;
  text-wrap: balance;
}

h1 {
  /* orange is 3.2:1 on cream — fine as WCAG "large text", so keep the
     floor at 1.5rem/24px. Smaller headings stay ink. */
  color: var(--accent);
  font-size: clamp(1.5rem, 4.6vw, 2.15rem);
  line-height: 1.45;
  margin: 0 0 1rem;
}

h2 {
  font-size: clamp(.95rem, 2.6vw, 1.2rem);
  line-height: 1.6;
  margin: 3rem 0 1.1rem;
}

h3 {
  font-size: .82rem;
  line-height: 1.6;
  margin: 0 0 .6rem;
}

p { margin: 0 0 1.1rem; max-width: var(--measure); }

.lede {
  font-size: 1.32rem;
  line-height: 1.7;
  color: var(--ink);
}

.tagline {
  font-family: var(--pixel);
  font-size: clamp(.7rem, 2.2vw, .85rem);
  line-height: 1.7;
  color: var(--accent-2);
  margin: 0 0 1.75rem;
}

.muted { color: var(--ink-soft); }
.small { font-size: .95rem; }

/* pixel dashed divider */
.rule {
  height: 6px;
  margin: 2.5rem 0;
  border: 0;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--pixel);
  font-size: .68rem;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  padding: .95rem 1.15rem;
  border: 3px solid var(--edge);
  background: var(--highlight);
  color: var(--on-accent);
  box-shadow: var(--shadow);
  transition: transform .06s steps(1), box-shadow .06s steps(1);
  cursor: pointer;
}
.btn:hover  { color: var(--on-accent); transform: translate(2px, 2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--edge); }

.btn img { width: 20px; height: 20px; flex: none; }

.btn--ghost {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { color: var(--ink); background: var(--panel-2); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  margin: 1.75rem 0;
}

/* --- Icon tiles ----------------------------------------------------------- */

.tile {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  flex: none;
  background: var(--tile);
  border: 3px solid var(--card-edge);
}
.tile img { width: 34px; height: 34px; }

.tile--sm { width: 42px; height: 42px; border-width: 2px; }
.tile--sm img { width: 24px; height: 24px; }

/* --- Cards ---------------------------------------------------------------- */

.card {
  background: var(--panel);
  border: 3px solid var(--card-edge);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem;
}

/* --- Mascot --------------------------------------------------------------- */

/* Mana Seed Character Base (Seliel the Shaper), licensed for commercial use.
   Only the frames actually used are shipped, composited flat from
   base + outfit + hair. --px is a whole-number upscale: at integer multiples
   the sprite grid stays crisp and the sprite strip lands exactly on frame
   boundaries. --w is the sprite's own width in source pixels; every pose is
   31 tall, so only the width varies. */
.mascot {
  --w: 14;
  --h: 31;
  display: block;
  width: calc(var(--w) * var(--px) * 1px);
  height: calc(var(--h) * var(--px) * 1px);
  margin: .75rem auto .25rem;
  image-rendering: pixelated;
}

/* Animated idles run off a horizontal strip driven by background-position:
   one request, and no flash on the first loop waiting for a later frame.
   Each frame is cropped to the UNION bounding box of the whole cycle, so the
   character doesn't shuffle around as limbs change the tight bounds. */

/* toe-tapping, page 4, 3 frames — the artist's suggested ~400ms a frame */
.mascot--idle {
  --w: 16;
  background-image: url("../assets/mascot-idle.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: calc(48 * var(--px) * 1px) calc(31 * var(--px) * 1px);
  animation: mascot-toetap 1.2s steps(3) infinite;
}
@keyframes mascot-toetap {
  from { background-position-x: 0; }
  to   { background-position-x: calc(-48 * var(--px) * 1px); }
}

/* sword & shield combat idle, 4 frames, weapon layers omitted. He gives no
   idle timing ("figure out some timings that work well"), so ~225ms a frame
   — slower than his 160/65/65/200 attack, to read as a sway not a twitch. */
.mascot--idle-combat {
  --w: 18;
  --h: 30;
  background-image: url("../assets/mascot-idle-combat.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: calc(72 * var(--px) * 1px) calc(30 * var(--px) * 1px);
  animation: mascot-idle-combat .9s steps(4) infinite;
}
@keyframes mascot-idle-combat {
  from { background-position-x: 0; }
  to   { background-position-x: calc(-72 * var(--px) * 1px); }
}

/* Static poses — no animation, by design. */
.mascot--hold    { --w: 21; --h: 31; }   /* fishing "show the catch", arms aloft */
.mascot--victory { --w: 18; --h: 31; }

@media (prefers-reduced-motion: reduce) {
  .mascot--idle,
  .mascot--idle-combat { animation: none; }
}

/* --- Item-get: page header with the character holding something aloft ----- */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
}
.page-head-text { flex: 1 1 320px; min-width: 0; }
.page-head-text > :last-child { margin-bottom: 0; }

/* the item sits above the raised hands, like a get-item screen */
.item-get {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1 * var(--px) * 1px);
}
/* the icons are a 16-unit viewBox, so scale by --px too — anything else
   lands the art on fractional pixels and softens the edges.
   The hold pose raises one arm up-and-left (the hand sits around sprite x3-6
   of 21, where the fish used to dangle), so shift the item left to land in
   the hand rather than centred over the body. Transform, not margin, so it
   can overhang the column without disturbing layout. */
.item-get img.item {
  width: calc(16 * var(--px) * 1px);
  height: calc(16 * var(--px) * 1px);
  image-rendering: pixelated;
  transform: translateX(calc(-5 * var(--px) * 1px));
}
.item-get .mascot { margin: 0; }

@media (max-width: 620px) {
  .page-head { flex-direction: column; align-items: center; }
  /* reset the flex-basis: once the axis flips it would set a 320px HEIGHT */
  .page-head-text { flex: 0 0 auto; width: 100%; }
}

/* --- Character-select --------------------------------------------------- */

.select {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.7rem, 2vw, 1.25rem);
  list-style: none;
  margin: 2rem 0 1rem;
  padding: 0;
}

.select li { display: flex; }   /* let each card stretch to the row height */

.select-card {
  display: flex;
  flex: 1;              /* fill the list item, so all three stay equal */
  flex-direction: column;
  min-width: 0;
  background: var(--panel);
  border: 3px solid var(--card-edge);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
  transition: transform .08s steps(1), box-shadow .08s steps(1);
}
.select-card:hover,
.select-card:focus-visible {
  color: var(--ink);
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--highlight);
  outline: none;
}
.select-card:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--highlight); }

/* sprite-preview window */
.select-art {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.1rem, 3.5vw, 1.9rem) .5rem;
  background: var(--screen);
  background-image:
    repeating-linear-gradient(0deg,  var(--line) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 8px);
  border-bottom: 3px solid var(--card-edge);
}
.select-art img {
  width: clamp(44px, 9vw, 64px);
  height: auto;
}

/* 01 / 02 / 03 in the corner */
.select-num {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--pixel);
  font-size: .5rem;
  line-height: 1;
  padding: .35rem .4rem;
  background: var(--card-edge);
  color: var(--screen);
}

/* name plate */
.select-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  flex: 1;
  padding: .85rem .5rem;
  font-family: var(--pixel);
  font-size: clamp(.52rem, 1.5vw, .66rem);
  line-height: 1.5;
  text-align: center;
}
/* the select cursor, revealed on hover/focus */
.select-label::before {
  content: "\25B8";
  color: var(--accent);
  visibility: hidden;
}
.select-card:hover .select-label,
.select-card:focus-visible .select-label {
  background: var(--highlight);
  color: var(--on-accent);
}
.select-card:hover .select-label::before,
.select-card:focus-visible .select-label::before { visibility: visible; }

@media (max-width: 620px) {
  .select { grid-template-columns: 1fr; }
  .select-card { flex-direction: row; align-items: stretch; }
  .select-art { border-bottom: 0; border-right: 3px solid var(--card-edge); padding: 1rem 1.25rem; }
  .select-label { justify-content: flex-start; padding-left: 1rem; text-align: left; }
}

/* --- Skill grid ----------------------------------------------------------- */

.skills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: .8rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.skills li {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .65rem .8rem;
  background: var(--panel);
  border: 2px solid var(--line);
}
.skills span {
  font-family: var(--pixel);
  font-size: .58rem;
  line-height: 1.5;
}

.group-label {
  font-family: var(--pixel);
  font-size: .62rem;
  color: var(--accent-2);
  letter-spacing: .06em;
  margin: 2rem 0 .25rem;
}

/* --- Facts / checklist ---------------------------------------------------- */

.facts {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: grid;
  gap: .7rem;
}
.facts li {
  position: relative;
  padding-left: 1.75rem;
  max-width: var(--measure);
}
.facts li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 10px; height: 10px;
  background: var(--accent-2);
}

/* --- Hero ----------------------------------------------------------------- */

.hero { text-align: center; }
.hero .eyebrow { justify-content: center; }
.hero p { margin-left: auto; margin-right: auto; }
.hero .btn-row { justify-content: center; }

/* the wobbling guitars flanking "~ with ~ SAM" */
.with-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.5rem, 3vw, 1.75rem);
  margin: 0 0 1.5rem;
}

.with-row img {
  width: clamp(58px, 13vw, 88px);
  height: auto;
  flex: none;
}

.with {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  margin: 0;
  max-width: none;
}

.with-tilde {
  font-family: var(--pixel);
  font-size: clamp(.62rem, 2vw, .8rem);
  letter-spacing: .22em;
  line-height: 1;
  color: var(--accent-2);
  text-indent: .22em;   /* balance the trailing letter-space */
}

.with-name {
  font-family: var(--pixel);
  font-size: clamp(1.15rem, 4.4vw, 1.9rem);
  letter-spacing: .1em;
  line-height: 1;
  color: var(--accent-2);
  text-indent: .1em;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
}
.with-name:hover,
.with-name:focus-visible { color: var(--accent-ink); }

/* --- About: portrait + work ----------------------------------------------- */

.intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 1rem;
}
.intro > div { flex: 1 1 300px; min-width: 0; }

.portrait {
  flex: none;
  width: 176px;
  height: 176px;
  object-fit: cover;
  border: 4px solid var(--card-edge);
  box-shadow: 8px 8px 0 var(--highlight);
  background: var(--tile);
}

.work { display: grid; gap: 2.5rem; margin-top: 1.5rem; }

.work-item {
  background: var(--panel);
  border: 3px solid var(--card-edge);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}
.work-item h3 { margin-bottom: .5rem; }
.work-item p { margin: 0; font-size: 1rem; color: var(--ink-soft); }
.work-item .credit {
  font-family: var(--pixel);
  font-size: .55rem;
  color: var(--accent-ink);
  letter-spacing: .08em;
  margin: 0 0 .9rem;
  text-transform: uppercase;
}

.embed {
  border: 3px solid var(--edge);
  background: #101210;
  margin-bottom: 1.1rem;
  line-height: 0;
}
.embed iframe { display: block; width: 100%; border: 0; }
.embed--video iframe { aspect-ratio: 16 / 9; height: auto; }
.embed--audio iframe { height: 352px; }
.embed--game  iframe { height: 167px; }

/* --- Contact -------------------------------------------------------------- */

.contact-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.contact-head .tile { width: 72px; height: 72px; }
.contact-head .tile img { width: 44px; height: 44px; }

/* --- Callout -------------------------------------------------------------- */

.callout {
  border: 3px solid var(--card-edge);
  border-left-width: 10px;
  border-left-color: var(--accent);
  background: var(--panel);
  padding: 1.1rem 1.25rem;
  margin: 2rem 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout p:first-child { margin-bottom: .5rem; }
.callout .facts { margin: .5rem 0 0; }
.callout strong { font-family: var(--pixel); font-weight: 400; font-size: .62rem; letter-spacing: .04em; }

/* --- Next steps ----------------------------------------------------------- */

.next {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 3px dashed var(--line);
}
.next .eyebrow { color: var(--accent-2); }
.next .eyebrow::before { background: var(--accent-2); }

/* --- Motion / print ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (max-width: 560px) {
  .bezel { margin: .6rem; padding: 4px; }
  .controls { padding: 0 1rem .8rem; }
  .tray { padding: 1rem; }
  .portrait { width: 132px; height: 132px; }
}