/* =============================================================================
   Gianni Veronesi — macOS desktop portfolio
   Vanilla CSS, no build step. Tokens first, then components.
   ============================================================================= */

:root {
  /* type */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;   /* a work's label, as in a museum */
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Code", "Courier New", monospace;

  /* ink on the paper wallpaper */
  --ink: #2b2823;
  --ink-soft: #6d675d;

  --hairline: rgba(0, 0, 0, .12);

  /* window chrome */
  --win-bg: rgba(251, 250, 247, .96);
  --win-bar: rgba(244, 242, 238, .86);
  --win-border: rgba(0, 0, 0, .14);
  --win-shadow: 0 32px 90px -22px rgba(24, 20, 14, .5), 0 6px 20px -8px rgba(24, 20, 14, .35);

  --accent: #1f6feb;
  --accent-soft: rgba(31, 111, 235, .16);

  --radius-win: 12px;

  /* No menu bar since 2026-09-21 (his call): the desktop starts at the top.
     The windows still reckon with this height, so it stays as a token. */
  --menubar-h: 0px;

  color-scheme: light;
}

* { box-sizing: border-box; }

/* No link ever changes colour once it has been opened: the browser's purple
   would be unreadable on the dark buttons and off-key everywhere else. Each
   link below says what colour it is; this keeps the visited state out of it. */
a:visited { color: inherit; }

html, body { height: 100%; }
/* A phone's browser counts the part of the screen under its address bar as
   "100vh", and each browser differently, so the desktop is laid out in the
   height that is always in view (svh) where the browser knows it. */
:root { --vh: 1vh; }
@supports (height: 1svh) { :root { --vh: 1svh; } }
/* and a phone's browser may not enlarge the small text on its own */
html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: none; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: #3ab1bf;               /* the wall's own colour, under its picture (desktop-2.css) */
  overflow: hidden;                 /* desktop itself doesn't scroll */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; }

/* focus visibility for keyboard users everywhere */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================================================= DESKTOP === */
.desktop {
  position: absolute;
  inset: var(--menubar-h) 0 0 0;
  overflow: hidden;
}

/* ------------------------------------------------------- desktop icons --- */
.icons {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  gap: 10px 8px;
  justify-items: center;
  direction: rtl;                   /* the first column on the right, as the Finder has it */
}

.icon {
  direction: ltr;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 6px 5px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, transform .12s ease;
}
.icon:hover { background: rgba(255, 255, 255, .16); }
.icon:active { transform: scale(.96); }
.icon.is-selected { background: rgba(31, 111, 235, .28); }

/* Once JS has measured the authored grid it flips this on, and every icon
   becomes absolutely positioned — that is what lets you drag them around the
   desktop. The grid above is still what produces the initial arrangement. */
.icons.is-free { inset: 0; display: block; pointer-events: none; }
.icons.is-free .icon { position: absolute; pointer-events: auto; }
.icon.is-dragging {
  cursor: grabbing;
  transition: none;
  transform: none;
  opacity: .92;
}
.icon.is-dragging:active { transform: none; }

/* animated entrance (respected only when motion is OK) */
@media (prefers-reduced-motion: no-preference) {
  .icon { opacity: 0; animation: pop .42s cubic-bezier(.2, .8, .3, 1.2) forwards; }
  .icon:nth-child(1) { animation-delay: .05s; }
  .icon:nth-child(2) { animation-delay: .10s; }
  .icon:nth-child(3) { animation-delay: .15s; }
  .icon:nth-child(4) { animation-delay: .20s; }
  .icon:nth-child(5) { animation-delay: .25s; }
  .icon:nth-child(6) { animation-delay: .30s; }
  .icon:nth-child(7) { animation-delay: .35s; }
  .icon:nth-child(8) { animation-delay: .40s; }
  .icon:nth-child(9) { animation-delay: .45s; }
  .icon:nth-child(10) { animation-delay: .50s; }
  @keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
}

/* ============================================================== WINDOWS === */
.windows { position: absolute; inset: 0; pointer-events: none; }

.win {
  position: absolute;
  pointer-events: auto;
  width: min(960px, 92vw);
  height: auto;
  max-height: calc(100 * var(--vh) - var(--menubar-h) - 84px);
  display: flex;
  flex-direction: column;
  background: var(--win-bg);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: .5px solid var(--win-border);
  border-radius: var(--radius-win);
  box-shadow: var(--win-shadow);
  overflow: hidden;
}
.win--wide { width: min(1120px, 92vw); }
.win--tall { height: calc(100 * var(--vh) - var(--menubar-h) - 84px); }
@media (prefers-reduced-motion: no-preference) {
  .win { animation: winIn .18s ease-out; }
  @keyframes winIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
}
.win.is-closing { animation: winOut .14s ease-in forwards; }
@keyframes winOut { to { opacity: 0; transform: scale(.97); } }

.win__bar {
  flex: 0 0 auto;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--win-bar);
  border-bottom: .5px solid var(--hairline);
  cursor: grab;
  user-select: none;
}
.win__bar:active { cursor: grabbing; }
.win__lights { display: flex; gap: 8px; }
.light {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: .5px solid rgba(0, 0, 0, .2);
  padding: 0;
  cursor: pointer;
  position: relative;
}
.light--close { background: #ff5f57; }
.light--min   { background: #febc2e; }
.light--zoom  { background: #28c840; }
.win__lights:hover .light::before {
  content: "";
  position: absolute; inset: 0;
  display: block;
  background: center / 8px no-repeat;
}
.light--close:hover::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath stroke='%23730000' stroke-width='1.4' stroke-linecap='round' d='M3 3l4 4M7 3l-4 4'/%3E%3C/svg%3E"); }
.light--min:hover::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath stroke='%237a4b00' stroke-width='1.4' stroke-linecap='round' d='M2.5 5h5'/%3E%3C/svg%3E"); }
.light--zoom:hover::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23006400' d='M3 3h4v4z'/%3E%3C/svg%3E"); }

.win__title {
  font-size: 13px;
  font-weight: 600;
  color: #4a453d;
  letter-spacing: .1px;
}

.win:focus { outline: none; }        /* container gets programmatic focus; no ring */
.win.is-zoomed {
  left: 3vw !important;
  top: calc(var(--menubar-h) + 12px) !important;
  width: 94vw !important;
  height: calc(100 * var(--vh) - var(--menubar-h) - 90px) !important;
}

.win__body { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; }
.win:not(.win--terminal) .win__body { background: linear-gradient(180deg, #fbfaf7 0%, #f1eee7 100%); }

/* ------------------------------------------------- "my work" contents --- */
/* The folder: every cover at once, in rows that fill the width, each at its
   own shape. js/app.js works out the sizes (see justify); everything here is
   the look. */
.work {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 20px 22px 26px;
}
.work__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 14px;
  align-items: flex-start;
}
.work__tile {
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: transform .16s ease;
}
.work__tile:hover { transform: translateY(-4px); }
.work__tile:active { transform: translateY(-1px) scale(.995); }
.work__cover {
  display: block;
  height: 186px;                 /* app.js sets the real size of each */
  width: auto;
  object-fit: contain;
  border-radius: 5px;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45);
}
.work__tile:hover .work__cover { box-shadow: 0 14px 26px -10px rgba(0, 0, 0, .5); }
.work__caption {
  display: block;
  width: 0;                      /* the title wraps at the cover's width */
  min-width: 100%;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;              /* the names, to be read at a glance (his call) */
  color: var(--ink);
  line-height: 1.3;
}

/* a work with no cover yet: a blank sheet the size of one */
.work__soon {
  display: grid;
  place-items: center;
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
  background: linear-gradient(160deg, #f3efe6, #e4ded1);
}

/* An open work takes the folder's window: the covers step aside, and the
   arrow at the top left brings them back (Escape does the same). */
.work.is-one .work__grid { display: none; }
.work__one { display: none; }
.work.is-one .work__one { display: block; }

.work__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 18px -6px;
  padding: 7px 14px 7px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.work__back:hover { background: rgba(0, 0, 0, .06); color: var(--ink); }
.work__back:active { transform: scale(.98); }
.work__arrow { font-size: 17px; line-height: 1; }

/* the work itself: the cover large, its words beside it */
/* Each work hangs like a print with its label beside it: the poster in a
   white mount, the title and its words set in a book face, the year and the
   role between two rules. */
.project {
  display: grid;
  grid-template-columns: auto minmax(0, 620px);
  justify-content: start;            /* the words stay by the poster, not across the window */
  gap: 40px;
  align-items: start;
}
.project__cover {
  display: block;
  height: 250px;
  width: auto;
  object-fit: contain;
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd6c8;
  box-shadow: 0 22px 34px -18px rgba(0, 0, 0, .55);
}
/* a sleeve is wider than a poster: it takes a width, not a height, so the
   words beside it keep their room */
.project__cover--album { height: auto; width: min(340px, 46vw); padding: 0; border: 0; background: none;
  border-radius: 3px; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .55); }   /* the sleeve has its own frame */
.project__words { min-width: 0; }
.project__words h2 { margin: 2px 0 10px; font-family: var(--font-serif); font-weight: 400; font-size: 32px; }
.work__meta {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 0;
  border-top: 1px solid #cfc7b8;
  border-bottom: 1px solid #cfc7b8;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.project__words p { margin: 0 0 20px; font-family: var(--font-serif); line-height: 1.65; font-size: 16px; color: #423d35; }
/* the excerpts of a work, to listen to without leaving the page */
.tracks { display: grid; gap: 8px; margin: 0 0 22px; max-width: 420px; min-width: 0; }
.track {
  padding: 10px 14px 8px;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #e3ddd1;
  border-radius: 10px;
  transition: border-color .16s ease;
}
.track:hover { border-color: #cfc7b8; }
.track__play {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.track__seek {                       /* how far the track has got, to drag back and forth */
  --p: 0%;
  --accent: #8a6d3b;                 /* the gilt of the frame, not the system blue */
  display: block;
  width: 100%;
  height: 16px;
  margin: 6px 0 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.track__seek::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--p), rgba(0, 0, 0, .14) var(--p));
}
.track__seek::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--p), rgba(0, 0, 0, .14) var(--p));
}
.track__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #1d1b17;
  border: 0;
  transform: scale(.7);
  transition: transform .15s ease;
}
.track__seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1d1b17;
  border: 0;
  transform: scale(.7);
  transition: transform .15s ease;
}
.track:hover .track__seek::-webkit-slider-thumb,
.track.is-playing .track__seek::-webkit-slider-thumb,
.track__seek:focus-visible::-webkit-slider-thumb { transform: none; }
.track:hover .track__seek::-moz-range-thumb,
.track.is-playing .track__seek::-moz-range-thumb,
.track__seek:focus-visible::-moz-range-thumb { transform: none; }
.track__seek:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.track__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1d1b17;
  position: relative;
}
.track__icon::before {               /* the triangle, and two bars while it plays */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 8px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translate(-40%, -50%);
}
.track.is-playing .track__icon::before {
  border: 0;
  width: 8px;
  height: 10px;
  background: linear-gradient(90deg, #fff 0 3px, transparent 3px 5px, #fff 5px 8px);
  transform: translate(-50%, -50%);
}
.track__name { flex: 1 1 auto; min-width: 0; }
.track__time { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 13px; }

.work__links { display: flex; flex-wrap: wrap; gap: 10px; }
.work__links a,
.work__links a:link,
.work__links a:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: #fff;                     /* stays white after being visited */
  background: #1d1b17;
  border-radius: 999px;
  transition: background-color .18s ease, transform .12s ease;
}
.work__links a:hover { background: var(--accent); color: #fff; }
/* the colour lives on the span inside, out of reach of the browser's own
   visited-link colour: a link already opened must read exactly like a new one */
.work__links a .work__links__t,
.work__links a:visited .work__links__t { color: #fff; }
/* and the letters are painted white whatever colour the browser gives the
   link: a fill colour is not something a visited link can change */
.work__links a,
.work__links a * { -webkit-text-fill-color: #fff; }
.work__links a:active { transform: scale(.97); }
.work__empty { padding: 40px 28px; color: var(--ink-soft); font-style: italic; }

/* a work's own window is only as wide as it needs to be */
.win--project { width: min(680px, 92vw); }

/* The album opens bigger, the sleeve large in its frame, its title in the
   typewriter of the first page's strips, and who made the pictures typed
   small at the foot. */
@font-face {
  font-family: "Special Elite";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/special-elite-latin.woff2") format("woff2");
}
.win--album { width: min(980px, 94vw); }
.win--album .project__cover--album { width: min(540px, 56vw); }
.win--album .project__words h2 {
  margin-top: 8px;
  font-family: "Special Elite", var(--font-mono);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: 0;
}
.album-credits {
  margin: 0;
  padding: 4px 16px 18px;
  text-align: center;
  font-family: "Special Elite", var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink-soft);
}
.album-credits span + span::before { content: "\00B7"; margin: 0 .7em; opacity: .6; }

/* --------------------------------------------------- "gallery" contents -- */
.gallery {
  columns: 260px;
  column-gap: 12px;
  padding: 16px;
}
.gallery__item {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  break-inside: avoid;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4);
  transition: transform .16s ease, box-shadow .16s ease;
}
.gallery__item:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .5); }
.gallery__item img { width: 100%; display: block; }

/* video tiles: the poster with a play badge on top. The dark card shows while
   the poster loads, and stays for a video that has none. */
.gallery__item--video {
  position: relative;
  background: linear-gradient(140deg, #26262e, #14141a);
}
.gallery__item--nocover { aspect-ratio: 4 / 3; }
.gallery__item--video svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .4));
}

/* ============================================================ LIGHTBOX === */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: grid;
  place-items: center;
  padding: 4vmin;
  background: rgba(15, 13, 11, .82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }
.lightbox__stage {
  display: grid;
  place-items: center;
  max-width: 92vw;
  max-height: calc(88 * var(--vh));
}
.lightbox__media {
  display: block;
  max-width: 92vw;
  max-height: calc(88 * var(--vh));
  border-radius: 6px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
  background: #000;
}
video.lightbox__media { width: min(1100px, 92vw); }
@media (prefers-reduced-motion: no-preference) {
  .lightbox__media { animation: winIn .2s ease-out; }
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color .15s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .28); }
.lightbox__close { top: 18px; right: 18px; width: 42px; height: 42px; font-size: 24px; line-height: 1; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 30px; line-height: 1; }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }

/* =============================================================== GENIE === */
/* A terminal window. Palette taken from the lamp icon — gold lamp, blue smoke —
   so it belongs to genie rather than to any real terminal app. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.win--terminal {
  width: min(680px, 92vw);
  height: min(560px, calc(100 * var(--vh) - var(--menubar-h) - 84px));
  background: #0e1118;
  border-color: rgba(0, 0, 0, .6);
}
.win--terminal .win__bar {
  background: #1b1e29;
  border-bottom-color: rgba(255, 255, 255, .06);
}
.win--terminal .win__title { color: #cfc6b4; }
.win--terminal .win__body { display: flex; overflow: hidden; }   /* .term scrolls itself */

.term {
  --t-bg:   #0e1118;
  --t-fg:   #ece4d3;
  --t-dim:  #9a917e;
  --t-gold: #e8b64c;
  --t-blue: #9cc0ff;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--t-bg);
  color: var(--t-fg);
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.55;
  cursor: text;
}
.term__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 20px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

/* header box, with its title sitting in the top border */
.term__head {
  position: relative;
  margin: 8px 0 20px;
  padding: 22px 16px 18px;
  border: 1.5px solid var(--t-gold);
  border-radius: 10px;
  text-align: center;
}
.term__legend {
  position: absolute;
  top: 0;
  left: 16px;
  transform: translateY(-58%);
  padding: 0 8px;
  background: var(--t-bg);
  color: var(--t-gold);
  font-weight: 700;
  letter-spacing: .05em;
}
.term__lamp {
  display: block;
  width: min(300px, 72%);          /* 600px source: exactly 2x, crisp on retina */
  height: auto;
  margin: 0 auto 12px;
  image-rendering: pixelated;      /* keep the pixel-art edges hard when scaled */
  user-select: none;
}
.term__title {
  margin: 0;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--t-fg);
}
.term__title::after {
  content: "_";
  margin-left: .08em;
  color: #b9b1a1;
  font-weight: 400;
}
@media (prefers-reduced-motion: no-preference) {
  .term__title::after { animation: term-blink 1.06s steps(1) infinite; }
  @keyframes term-blink { 50% { opacity: 0; } }
}

/* transcript */
.term__out   { margin: 0 0 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
.term__q     { margin-top: 12px; color: var(--t-fg); }
.term__think { color: var(--t-dim); }
.term__a     { color: var(--t-blue); }
.term__punch { color: var(--t-gold); font-weight: 700; }
.term__else  { margin-bottom: 14px; color: var(--t-dim); }
.term__prompt { color: var(--t-gold); font-weight: 700; }

/* the prompt line */
.term__line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 2px;
  padding: 10px 2px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  transition: border-color .15s ease;
}
.term__line:focus-within { border-color: rgba(232, 182, 76, .45); }  /* its focus ring */
.term__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--t-fg);
  font: inherit;
  caret-color: var(--t-gold);
}
.term__input::placeholder { color: #7b7466; opacity: 1; }

/* status bar, powerline style */
.term__status {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 7px 12px;
  background: #0c0e14;
  border-top: 1px solid rgba(255, 255, 255, .05);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  user-select: none;
}
.term__seg {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 16px 0 10px;
  font-weight: 700;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
}
.term__seg + .term__seg {
  margin-left: -7px;
  padding-left: 17px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%);
}
.term__seg--gold { background: var(--t-gold); color: #1c1507; }
.term__seg--blue { background: #3a6bd4; color: #eef3ff; }
.term__count { margin-left: auto; padding-left: 12px; color: var(--t-dim); white-space: nowrap; }
.term__count b { color: var(--t-gold); }

/* ============================================================ RESPONSIVE = */
/* scaled-down desktop: shrink the whole UI, keep the metaphor */
@media (max-width: 720px) {


  .icons {
    top: 12px;
    right: 8px;
    grid-template-rows: repeat(4, auto);
    gap: 18px 2px;
  }
  .icon { padding: 6px 4px; }

  .win, .win--wide { width: 94vw; }
  .win--tall { height: min(calc(80 * var(--vh)), calc(100 * var(--vh) - var(--menubar-h) - 56px)); }
  .work { padding: 14px 14px 20px; }
  .work__grid { gap: 20px 10px; }
  .project { grid-template-columns: 1fr; gap: 16px; }
  .project__cover { height: 190px; }
  .project__cover--album, .win--album .project__cover--album { height: auto; width: 100%; }
  .win--album .project__words h2 { font-size: 26px; }
  .album-credits span { display: block; }
  .album-credits span + span::before { content: none; }
  .project__words h2 { font-size: 19px; }
  .work__back { margin-bottom: 12px; }
  .gallery { columns: 150px; }

  .win--terminal { width: 94vw; height: min(calc(76 * var(--vh)), calc(100 * var(--vh) - var(--menubar-h) - 56px)); }
  .term { font-size: 13px; }
  .term__scroll { padding: 16px 12px 8px; }
  .term__title { font-size: 16px; }
  .term__input { font-size: 16px; }   /* under 16px, iOS zooms the page on focus */
  .term__status { padding: 6px 8px; }
}