:root {
  --phosphor: #a7ffb5;
  --phosphor-strong: #c8ffd1;
  --phosphor-dim: rgba(167, 255, 181, .68);
  --screen: #07170f;
  --screen-deep: #031008;
  --line: rgba(167, 255, 181, .34);
  --line-soft: rgba(167, 255, 181, .16);
  --selection: rgba(176, 255, 191, .88);
  --selection-ink: #0b2816;
}

* { box-sizing: border-box; }
/* Visually hidden, still read by screen readers and crawlers. */
.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; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: #111411;
  color: var(--phosphor);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
button, a { font: inherit; }

.viewport { position: fixed; inset: 0; overflow: hidden; background: #111411; }

/* Fixed photographic composition. On wide screens the CRT fills the viewport
   and the keyboard is intentionally cropped to a subtle nod at the hardware. */
.scene {
  position: absolute;
  top: 0;
  left: 50%;
  width: max(100vw, 150vh);
  aspect-ratio: 3 / 2;
  transform: translateX(-50%);
  transform-origin: top center;
  isolation: isolate;
  user-select: none;
  background: #141613;
}
.photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  pointer-events: none;
}

/* Live HTML screen placed over the photographed glass. The underlying screen
   image never needs to be regenerated when content changes. */
.crt {
  position: absolute;
  left: 23.15%;
  top: 7.55%;
  width: 54.55%;
  height: 59.20%;
  z-index: 5;
  overflow: hidden;
  border-radius: 5.7% 5.7% 7.4% 7.4% / 6.4% 6.4% 8.6% 8.6%;
  background: #020a05;
  box-shadow: inset 0 0 3.9vw rgba(0,0,0,.88), inset 0 0 .35vw rgba(190,255,207,.09);
  container-type: inline-size;
  transform: translateZ(0);
}
.screen-live {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--phosphor);
  background:
    radial-gradient(ellipse at 48% 42%, rgba(31,79,49,.29), transparent 58%),
    linear-gradient(180deg, #0a1e13 0%, var(--screen) 62%, var(--screen-deep) 100%);
  text-shadow: 0 0 .07em rgba(175,255,193,.84), 0 0 .35em rgba(88,255,126,.22);
  transform-origin: center;
  will-change: transform, opacity, filter;
}

/* Keep the live screen visible after the one-off boot animation finishes.
   Without this explicit powered-on state the base .screen-live opacity: 0
   would make the display disappear as soon as .is-booting is removed. */
.crt.is-on .screen-live {
  opacity: 1;
  transform: scale(1);
  filter: brightness(1);
  pointer-events: auto;
}

.screen-live::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.17) 3px, rgba(0,0,0,.17) 4px),
    repeating-linear-gradient(to right, rgba(88,255,126,.018) 0, rgba(88,255,126,.018) 1px, rgba(0,0,0,.018) 1px, rgba(0,0,0,.018) 3px);
  mix-blend-mode: multiply;
  opacity: .72;
}
.screen-live::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 61;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 54%, rgba(0,0,0,.16) 72%, rgba(0,0,0,.55) 100%);
}
.glass {
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  background:
    linear-gradient(108deg, transparent 0 5%, rgba(255,255,255,.16) 8%, rgba(255,255,255,.032) 13%, transparent 20% 77%, rgba(255,255,255,.075) 82%, transparent 87%),
    radial-gradient(ellipse at 49% -12%, rgba(255,255,255,.19), transparent 30%);
  opacity: .54;
  mix-blend-mode: screen;
}

.boot-copy {
  position: absolute;
  left: 7.2%;
  top: 9.5%;
  z-index: 20;
  opacity: 0;
  color: var(--phosphor);
  font-size: clamp(7px, 1.28cqw, 12px);
  line-height: 1.58;
  letter-spacing: .02em;
  text-transform: uppercase;
  pointer-events: none;
}
.boot-brand { color: var(--phosphor-strong); margin-bottom: .75em; font-weight: 700; }
.boot-line { opacity: 0; }

.interface {
  position: absolute;
  inset: 0;
  z-index: 10;
  padding: 6.5% 7.2% 5.9%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 1.6%;
  transform: perspective(1200px) scale(.986, .983);
  transform-origin: center;
}
.terminal-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 4%;
  font-size: clamp(8px, 1.52cqw, 14px);
  line-height: 1.22;
  letter-spacing: .012em;
  text-transform: uppercase;
}
.prompt { font-weight: 700; }
.local-time { text-align: right; color: var(--phosphor-dim); min-width: 35%; }
.local-time time { display: block; color: var(--phosphor); white-space: nowrap; }
.timezone {
  display: block;
  margin: .25em 0 0 auto;
  max-width: 31ch;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .88em;
}

.masthead { min-width: 0; }
.masthead h1 {
  margin: 0;
  font-size: clamp(26px, 6.05cqw, 56px);
  line-height: .95;
  letter-spacing: .045em;
  font-weight: 800;
  color: var(--phosphor-strong);
  text-transform: uppercase;
}
.cursor {
  display: inline-block;
  width: .56em;
  height: .13em;
  margin-left: .16em;
  background: currentColor;
  vertical-align: -.04em;
  animation: cursorBlink 1.04s steps(1,end) infinite;
  box-shadow: 0 0 .35em rgba(115,255,147,.45);
}
@keyframes cursorBlink { 0%,46% { opacity:1; } 47%,100% { opacity:0; } }
.role {
  margin: 2.15% 0 0;
  font-size: clamp(8px, 1.65cqw, 15px);
  line-height: 1.25;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.tagline {
  margin: .85% 0 0;
  max-width: 72ch;
  color: var(--phosphor-dim);
  font-size: clamp(7px, 1.32cqw, 12px);
  line-height: 1.45;
}

.terminal-main {
  min-height: 0;
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 6%;
  align-items: stretch;
  padding-top: .4%;
}
.side {
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.menu {
  display: grid;
  gap: .2cqw;
  padding-top: .5cqw;
}
/* Centred in the space left under the menu: equal gap above and below. */
.sidebar-brands { padding: 0 .65em; margin: auto 0; }
.sidebar-brands .small-label {
  margin-bottom: 1.2em;
  text-align: center;
  font-size: clamp(6px, 1.05cqw, 10px);
  letter-spacing: .06em;
  color: var(--phosphor-dim);
  text-transform: uppercase;
}
.sidebar-brands .chips { margin-top: 0; gap: .32em; }
/* Logo wall: equal bordered cells, each mark centred. */
.sidebar-brands .brand-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75em 1em;
}
/* Cells are borderless but keep a fixed height so rows stay aligned. Set
   --brand-border: 1px to draw the boxes. */
.sidebar-brands .brand-pills .brand-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-width: 0;
  height: 2.35em;
  padding: 0 .4em;
  border: var(--brand-border, 0) solid var(--line-soft);
}
.brand-mark {
  display: inline-block;
  height: 2.35em; /* PNG canvas = 1.35x the nominal mark, so 2.35em shows a 1x mark at ~1.75em */
  max-width: 100%;
  aspect-ratio: 1;
  flex: none;
  background: var(--phosphor);
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}
/* Mark + name cells: smaller mark, name kept on one line. */
.brand-pill:not(.logo-only) .brand-mark { height: 1.75em; }
.brand-pill:not(.logo-only) { white-space: nowrap; }
.menu button {
  appearance: none;
  width: 100%;
  border: 0;
  color: var(--phosphor);
  background: transparent;
  text-align: left;
  padding: .3em .65em;
  cursor: pointer;
  font-size: clamp(8px, 1.6cqw, 15px);
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: background 90ms linear, color 90ms linear;
}
.menu button::before { content: "  "; white-space: pre; }
.menu button.active {
  color: var(--selection-ink);
  background: var(--selection);
  text-shadow: none;
}
.menu button.active::before { content: "> "; }
.menu button:hover:not(.active), .menu button:focus-visible:not(.active) { background: rgba(167,255,181,.08); outline: none; }
.menu button:focus-visible { outline: 1px dashed rgba(167,255,181,.46); outline-offset: 2px; }

.content { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.3cqw);
  transition: opacity 110ms linear, transform 120ms ease, visibility 0s linear 120ms;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: .6em;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.panel::-webkit-scrollbar { width: .35cqw; }
.panel::-webkit-scrollbar-thumb { background: var(--line); }
.panel.active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.panel h3 {
  margin: .4em 0 .55em;
  font-size: clamp(8px, 1.5cqw, 14px);
  line-height: 1.1;
  letter-spacing: .035em;
  text-transform: uppercase;
  color: var(--phosphor-strong);
}
.list {
  margin: 0 0 .85em;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 2em;
  color: var(--phosphor-dim);
  font-size: clamp(7px, 1.28cqw, 12px);
  line-height: 1.5;
}
.list li { break-inside: avoid; padding-left: 1.4em; text-indent: -1.4em; margin-bottom: .45em; }
.list li::before { content: "> "; color: var(--phosphor); }
.ascii-map {
  margin: 1.2% 0 0;
  white-space: pre;
  font-size: clamp(5px, .98cqw, 9px);
  line-height: .95;
  letter-spacing: .015em;
  color: rgba(167,255,181,.82);
}
.panel h2 {
  margin: 0 0 .7em;
  font-size: clamp(11px, 2.16cqw, 20px);
  line-height: 1.08;
  letter-spacing: .035em;
  text-transform: uppercase;
  color: var(--phosphor-strong);
}
.panel p {
  margin: 0 0 .85em;
  max-width: 68ch;
  color: var(--phosphor-dim);
  font-size: clamp(7px, 1.28cqw, 12px);
  line-height: 1.45;
}
.panel strong { color: var(--phosphor); font-weight: 700; }
.home-copy { display: flex; flex-direction: column; height: 100%; justify-content: center; }
.home-copy .small-label { margin-bottom: .8em; font-size: clamp(6px, 1.12cqw, 10px); color: var(--phosphor-dim); text-transform: uppercase; }
.quote { margin-top: auto; color: var(--phosphor-dim); font-size: clamp(6px, 1.12cqw, 10px); }
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: 31% 1fr;
  gap: 4%;
  padding: 2.15% 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: clamp(6px, 1.16cqw, 11px);
  line-height: 1.32;
}
.row b { color: var(--phosphor); }
.row span { color: var(--phosphor-dim); }
.chips { display: flex; flex-wrap: wrap; gap: .48em; margin-top: 1.1em; }
.chips span {
  border: 1px solid var(--line-soft);
  padding: .37em .55em;
  color: var(--phosphor-dim);
  font-size: clamp(5px, 1.02cqw, 9px);
  text-transform: uppercase;
}
.links { border-top: 1px solid var(--line); }
.link-row {
  display: grid;
  grid-template-columns: 2.2em 1fr auto;
  gap: .8em;
  align-items: center;
  padding: 2.1% .1%;
  border-bottom: 1px solid var(--line-soft);
  color: var(--phosphor);
  text-decoration: none;
  font-size: clamp(6px, 1.15cqw, 11px);
}
.link-row .num, .link-row .sub { color: var(--phosphor-dim); }
.link-row:hover, .link-row:focus-visible { background: rgba(167,255,181,.07); outline: none; }
.link-row:hover .name, .link-row:focus-visible .name { text-decoration: underline; text-underline-offset: .18em; }
.link-row.is-static { cursor: default; }
.link-row.is-static:hover { background: transparent; }
.link-row.is-static:hover .name { text-decoration: none; }
.contact-list a {
  display: flex;
  justify-content: space-between;
  gap: 1.2em;
  padding: 2.9% 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--phosphor);
  text-decoration: none;
  font-size: clamp(7px, 1.32cqw, 12px);
}
.contact-list a:first-child { border-top: 1px solid var(--line-soft); }
.contact-label { display: inline-flex; align-items: center; gap: .7em; }
.contact-list .icon {
  display: inline-flex;
  width: 1.35em;
  height: 1.35em;
  color: var(--phosphor);
  filter: drop-shadow(0 0 .12em rgba(175,255,193,.6));
}
.contact-list .icon svg { width: 100%; height: 100%; }
.contact-list a:hover span:first-child, .contact-list a:focus-visible span:first-child { text-decoration: underline; text-underline-offset: .18em; }
.contact-list a:focus-visible { outline: none; }

.terminal-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4%;
  padding-top: 1.3%;
  border-top: 1px solid var(--line);
  color: var(--phosphor-dim);
  font-size: clamp(6px, 1.08cqw, 10px);
  line-height: 1.25;
  text-transform: uppercase;
}
.path { color: var(--phosphor); }
.copyright { margin-left: auto; white-space: nowrap; opacity: .78; }
.keys { text-align: right; opacity: .78; margin-left: 1.6em; }
.footer-social { display: flex; align-items: center; gap: .9em; margin-left: 2.4em; }
.footer-social a {
  display: inline-flex;
  color: var(--phosphor);
  opacity: .78;
  transition: opacity 90ms linear;
}
.footer-social a:hover, .footer-social a:focus-visible { opacity: 1; outline: none; }
.footer-social .icon {
  display: inline-flex;
  width: 2em;
  height: 2em;
  filter: drop-shadow(0 0 .12em rgba(175,255,193,.6));
}
.footer-social .icon svg { width: 100%; height: 100%; }

.flash-line {
  position: absolute;
  left: 6%; right: 6%; top: 50%;
  height: .23%;
  z-index: 70;
  opacity: 0;
  background: rgba(224,255,232,.98);
  box-shadow: 0 0 .8cqw rgba(202,255,216,.98), 0 0 2cqw rgba(118,255,151,.65);
  transform: scaleX(.015);
  transform-origin: center;
  pointer-events: none;
}
.white-flash { position: absolute; inset: 0; z-index: 69; opacity: 0; background: rgba(213,255,224,.88); pointer-events: none; }
.crt.is-booting .screen-live { animation: screenBoot 960ms cubic-bezier(.18,.73,.22,1) both; }
.crt.is-booting .flash-line { animation: lineBoot 960ms cubic-bezier(.16,.78,.2,1) both; }
.crt.is-booting .white-flash { animation: whiteBoot 960ms ease-out both; }
.crt.is-booting .interface { animation: interfaceBoot 960ms linear both; }
.crt.is-booting .boot-copy { animation: bootCopy 960ms linear both; }
.crt.is-booting .boot-line-1 { animation: bootLine1 960ms linear both; }
.crt.is-booting .boot-line-2 { animation: bootLine2 960ms linear both; }
.crt.is-booting .boot-line-3 { animation: bootLine3 960ms linear both; }
.crt.is-on .interface { opacity: 1; }
.crt.is-on .boot-copy { opacity: 0; }
@keyframes screenBoot {
  0%, 10% { opacity:0; transform:scaleX(.025) scaleY(.0015); filter:brightness(5.5) contrast(1.3); }
  18% { opacity:.95; transform:scaleX(.30) scaleY(.0025); filter:brightness(7); }
  29% { opacity:1; transform:scaleX(.98) scaleY(.004); filter:brightness(8); }
  39% { transform:scaleX(1) scaleY(.10); filter:brightness(4.4); }
  51% { transform:scale(1); filter:brightness(1.95); }
  62% { filter:brightness(.74); }
  70% { filter:brightness(1.13); }
  81% { filter:brightness(.94); }
  100% { opacity:1; transform:scale(1); filter:brightness(1); }
}
@keyframes lineBoot {
  0%,10% { opacity:0; transform:scaleX(.015); }
  17% { opacity:1; transform:scaleX(.12); }
  29% { opacity:1; transform:scaleX(1); }
  43% { opacity:.66; transform:scaleX(1); }
  54%,100% { opacity:0; transform:scaleX(1); }
}
@keyframes whiteBoot {
  0%,26% { opacity:0; }
  34% { opacity:.72; }
  47% { opacity:.10; }
  58% { opacity:.27; }
  67%,100% { opacity:0; }
}
@keyframes interfaceBoot {
  0%, 70% { opacity: 0; }
  78% { opacity: .25; }
  84% { opacity: 1; }
  89% { opacity: .82; }
  94%, 100% { opacity: 1; }
}
@keyframes bootCopy {
  0%, 36% { opacity: 0; }
  43%, 68% { opacity: 1; }
  74%, 100% { opacity: 0; }
}
@keyframes bootLine1 { 0%, 43% { opacity:0; } 47%, 68% { opacity:1; } 74%,100% { opacity:0; } }
@keyframes bootLine2 { 0%, 50% { opacity:0; } 54%, 68% { opacity:1; } 74%,100% { opacity:0; } }
@keyframes bootLine3 { 0%, 57% { opacity:0; } 61%, 70% { opacity:1; } 76%,100% { opacity:0; } }
.crt.is-shutting .screen-live { animation: screenOff 430ms cubic-bezier(.55,.04,.88,.5) both; }
.crt.is-shutting .flash-line { animation: lineOff 430ms ease-in both; }
@keyframes screenOff {
  0% { opacity:1; transform:scale(1); filter:brightness(1); }
  29% { opacity:1; transform:scaleX(1) scaleY(.44); filter:brightness(1.8); }
  64% { opacity:.92; transform:scaleX(.94) scaleY(.006); filter:brightness(5.4); }
  83% { opacity:.75; transform:scaleX(.11) scaleY(.003); filter:brightness(7); }
  100% { opacity:0; transform:scale(.003,.0015); filter:brightness(8); }
}
@keyframes lineOff {
  0%,44% { opacity:0; transform:scaleX(1); }
  64% { opacity:1; transform:scaleX(.94); }
  84% { opacity:.9; transform:scaleX(.11); }
  100% { opacity:0; transform:scaleX(.01); }
}
.crt.is-off .screen-live { opacity:0; transform:scale(.003); pointer-events:none; }
.crt.is-off .glass {
  opacity: .42;
  background:
    linear-gradient(108deg, transparent 0 5%, rgba(255,255,255,.105) 8%, transparent 18% 80%, rgba(255,255,255,.045) 84%, transparent 88%),
    radial-gradient(ellipse at 49% -12%, rgba(255,255,255,.12), transparent 31%);
}
.crt.is-booting .screen-live, .crt.is-shutting .screen-live { pointer-events: none; }

/* Physical power switch hotspot. */
.power {
  position: absolute;
  left: 81.55%;
  top: 65.40%;
  width: 4.0%;
  height: 7.1%;
  z-index: 25;
  appearance: none;
  border: 0;
  padding: 0;
  border-radius: 10%;
  background: transparent;
  cursor: pointer;
}
.power::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 12%;
  opacity: 0;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), 0 0 .75vw rgba(255,255,255,.05);
  transition: opacity 100ms linear, transform 70ms linear;
}
.power:hover::before, .power:focus-visible::before { opacity: 1; }
.power:focus-visible { outline: none; }
.power:active::before { transform: translateY(1px); }
/* Covers the lit LED in the photograph while the machine is off. Measured
   from the image: the lit area is at 82.9% / 64.1%, 1.56% x 0.88% of the
   scene; the patch is slightly larger to hide the glow around it. */
.led-off {
  position: absolute;
  left: 82.72%;
  top: 63.82%;
  width: 1.9%;
  height: 1.35%;
  z-index: 20;
  border-radius: 18% / 30%;
  background: radial-gradient(ellipse at 50% 45%, #2a3a2a 0%, #1d2a1e 55%, #151d16 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), 0 0 .15vw rgba(0,0,0,.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms linear;
}
.scene.is-off .led-off { opacity: 1; }
.power-hint {
  position: absolute;
  left: 81.7%;
  top: 72.8%;
  z-index: 26;
  color: rgba(242,240,229,.72);
  font-size: clamp(8px,.66vw,11px);
  letter-spacing: .025em;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 120ms linear, transform 120ms ease;
  pointer-events: none;
}
.power:hover + .power-hint, .power:focus-visible + .power-hint { opacity:1; transform:none; }

.fatal {
  padding: 7%;
  color: var(--phosphor);
  font-size: clamp(8px,1.5cqw,14px);
  line-height: 1.5;
}

@media (max-aspect-ratio: 1/1) { .power-hint { display:none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  .cursor { opacity: 1 !important; }
}

/* -------------------------------------------------------------
   LIVE DESK COPY
   -------------------------------------------------------------
   The book-spine and notepad wording is real HTML rendered from
   js/content.js. The photographed props stay untouched when the text changes.
*/
.scene { container-type: inline-size; }
.desk-props {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

/* Five blank black books on the right edge of the photograph. Measured from
   the photo: spine hinge at 91% across, first book top at ~47.8%, book pitch
   ~5.7% of scene height, edges tilted ~5deg clockwise, spines receding to the
   right. */
.book-spines {
  position: absolute;
  left: 91.1%;
  top: 47.9%;
  width: 9.2%;
  height: 28.4%;
  transform: perspective(70cqw) rotateY(14deg) rotate(5deg);
  transform-origin: 0 0;
  font-family: Georgia, "Times New Roman", "Iowan Old Style", serif;
}
.book-label {
  position: absolute;
  left: 0;
  right: 0;
  height: 20%;
  display: flex;
  align-items: center;
  padding: 0 4% .9% 9%;
  overflow: hidden;
  font-size: clamp(8px, 1.15cqw, 19px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  /* Foil stamp: warm metallic fill, pressed into the cover. */
  color: #c9b98f;
  background: linear-gradient(100deg, #b6a67c 0%, #e9dcb7 38%, #cbb98b 55%, #f0e4c0 78%, #a8996f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 .06em 0 rgba(255,244,214,.22))
    drop-shadow(0 -.05em .02em rgba(0,0,0,.75))
    blur(.25px);
  opacity: .9;
}
.book-label span { display: block; max-width: 100%; }
.book-label-1 { top: 0; }
.book-label-2 { top: 20%; }
.book-label-3 { top: 40%; }
.book-label-4 { top: 60%; }
.book-label-5 { top: 80%; }

/* Ruled notepad in the lower-right corner. Its rulings are almost flat
   (about -0.4deg, rising slightly to the right) and ~0.62cqw apart; each
   handwritten line spans three rulings. */
.notepad-copy {
  position: absolute;
  left: 90.6%;
  top: 81.4%;
  width: 11%;
  color: rgba(42, 38, 33, .84);
  font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(14px, 1.85cqw, 34px);
  line-height: 2.1cqw;
  letter-spacing: .01em;
  transform: rotate(-1.5deg) skewX(-2deg);
  transform-origin: 0 0;
  text-shadow: 0 .35px .25px rgba(70, 55, 42, .28);
}
.note-title {
  margin: 0;
  text-decoration: underline;
  text-decoration-thickness: .06em;
  text-underline-offset: .13em;
}
.note-line { white-space: nowrap; }

/* On narrower/taller windows the scene crops horizontally. Hide props before
   they become awkward fragments; the CRT remains the primary experience. */
@media (max-aspect-ratio: 6/5) {
  .desk-props { display: none; }
}

/* -------------------------------------------------------------
   SYSTEM EXTENSIONS (js/sys.js)
   ------------------------------------------------------------- */

/* Amber phosphor. */
:root[data-phosphor="amber"] {
  --phosphor: #ffb347;
  --phosphor-strong: #ffd58a;
  --phosphor-dim: rgba(255, 179, 71, .7);
  --screen: #170f04;
  --screen-deep: #0f0902;
  --line: rgba(255, 179, 71, .34);
  --line-soft: rgba(255, 179, 71, .16);
  --selection: rgba(255, 196, 110, .9);
  --selection-ink: #2a1804;
}
:root[data-phosphor="amber"] .screen-live {
  background:
    radial-gradient(ellipse at 48% 42%, rgba(96,58,20,.32), transparent 58%),
    linear-gradient(180deg, #1e1306 0%, var(--screen) 62%, var(--screen-deep) 100%);
  text-shadow: 0 0 .07em rgba(255,200,120,.84), 0 0 .35em rgba(255,150,40,.22);
}
:root[data-phosphor="amber"] .menu button:hover:not(.active),
:root[data-phosphor="amber"] .menu button:focus-visible:not(.active),
:root[data-phosphor="amber"] .link-row:hover,
:root[data-phosphor="amber"] .link-row:focus-visible { background: rgba(255,179,71,.08); }
:root[data-phosphor="amber"] .cursor { box-shadow: 0 0 .35em rgba(255,170,60,.45); }
:root[data-phosphor="amber"] .contact-list .icon,
:root[data-phosphor="amber"] .footer-social .icon { filter: drop-shadow(0 0 .12em rgba(255,200,120,.6)); }

/* Command line. */
.console {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: clamp(7px, 1.28cqw, 12px);
  line-height: 1.45;
  color: var(--phosphor);
  overflow: hidden;
  padding-right: 0;
}
.console-log { overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.console-out { white-space: pre-wrap; word-break: break-word; color: var(--phosphor-dim); }
.console-out.console-echo { color: var(--phosphor); margin-top: .35em; }
.console-line { white-space: pre; color: var(--phosphor); padding-top: .2em; }
.console-line .cursor { width: .6em; height: .12em; margin-left: .05em; vertical-align: -.05em; }

/* Snake and screensaver canvases. */
.sys-canvas { display: none; }
.sys-canvas.active { display: block; }
.sys-canvas.snake { position: absolute; inset: 0; z-index: 2; }
.sys-canvas.saver { position: absolute; inset: 0; z-index: 50; }

/* -------------------------------------------------------------
   SHORT LANDSCAPE (phones on their side)
   -------------------------------------------------------------
   The photo is cropped at the bottom by design; on a phone that hides the
   notepad, so let the page scroll down to the desk.
*/
@media (min-aspect-ratio: 1/1) and (max-height: 540px) {
  html, body { height: auto; overflow: auto; }
  .viewport { position: relative; inset: auto; height: auto; overflow: visible; }
  .scene { position: relative; top: auto; height: auto; }

  /* The CRT is only ~460px wide here, so the desktop clamp() minimums give
     7px type. Lift everything to phone-readable sizes and simplify. */
  .interface { padding: 5% 6% 4.5%; gap: 1.6%; }
  .terminal-top { font-size: 9px; }
  .timezone { display: none; }
  .masthead h1 { font-size: 22px; }
  .role { font-size: 8.5px; margin-top: 4px; }
  .tagline { display: none; }
  .terminal-main { grid-template-columns: 26% 1fr; gap: 5%; padding-top: 0; }
  .menu button { font-size: 10px; padding: 3px 6px; }
  .sidebar-brands { display: none; }
  .panel h2 { font-size: 12px; }
  .panel h3 { font-size: 10px; }
  .panel p, .list, .row, .link-row, .contact-list a { font-size: 9.5px; line-height: 1.45; }
  .list { columns: 1; }
  .console { font-size: 9.5px; }
  .terminal-bottom { font-size: 7.5px; padding-top: 1.2%; }
  .keys { display: none; }
  .footer-social .icon { width: 14px; height: 14px; }
  .power-hint { display: none; }
}

/* -------------------------------------------------------------
   PORTRAIT / MOBILE
   -------------------------------------------------------------
   The desk photo sits at the top at full width, with the name lit on its
   small screen, and the readable terminal follows below as a bezelled
   panel. The page scrolls normally. Sizes are fixed px here because the
   container-query sizes above assume a desktop-width screen.
*/
@media (max-aspect-ratio: 1/1) {
  html, body { height: auto; overflow: auto; }
  body { background: #0d100d; }
  .viewport { position: relative; inset: auto; height: auto; overflow: visible; background: #0d100d; }

  /* Photo header in normal flow, full width at its natural 3:2; the
     terminal (.crt) follows it inside the same .scene. */
  .scene {
    position: relative;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    transform: none;
    overflow: visible;
  }
  .photo { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .desk-props, .power, .led-off, .power-hint { display: none; }

  /* The small screen in the photo shows the name only. Positioned in vw
     because the photo is exactly 100vw wide and 66.67vw tall. */
  .scene::before, .scene::after {
    position: absolute;
    left: 23.15vw;
    top: 5.03vw;
    width: 54.55vw;
    height: 39.47vw;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 6%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 800;
    font-size: clamp(14px, 5.2vw, 44px);
    letter-spacing: .06em;
    color: var(--phosphor-strong);
    text-shadow: 0 0 .08em rgba(175,255,193,.9), 0 0 .5em rgba(88,255,126,.35);
    pointer-events: none;
  }
  .scene::before {
    content: "CARL HENDY";
    /* Opaque: the photograph has a faint burnt-in UI on its screen. */
    background:
      radial-gradient(ellipse at 48% 42%, rgba(31,79,49,.35), transparent 60%),
      linear-gradient(180deg, #0a1e13 0%, #07170f 62%, #031008 100%);
    border-radius: 6% 6% 8% 8% / 7% 7% 9% 9%;
    box-shadow: inset 0 0 6vw rgba(0,0,0,.85);
  }
  /* Blinking cursor: eleven no-break spaces then "_", centred with the same
     font as the name, so the underscore lands just after the Y. */
  .scene::after {
    content: "\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0_";
    white-space: pre;
    animation: cursorBlink 1.04s steps(1,end) infinite;
  }
  :root[data-phosphor="amber"] .scene::before,
  :root[data-phosphor="amber"] .scene::after { text-shadow: 0 0 .08em rgba(255,200,120,.9), 0 0 .5em rgba(255,150,40,.35); }
  :root[data-phosphor="amber"] .scene::before {
    background:
      radial-gradient(ellipse at 48% 42%, rgba(96,58,20,.38), transparent 60%),
      linear-gradient(180deg, #1e1306 0%, #170f04 62%, #0f0902 100%);
  }

  /* Hint under the photo: the full desk needs a wide screen. */
  .photo::after { content: none; }
  .scene > .photo + .desk-props::before {
    content: "\21bb  best viewed in landscape";
  }
  .desk-props {
    display: block;
    position: relative;
    inset: auto;
    height: auto;
    overflow: visible;
    pointer-events: none;
  }
  .desk-props::before {
    display: block;
    padding: 9px 0 0;
    text-align: center;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--phosphor-dim);
    opacity: .75;
  }
  .book-spines, .notepad-copy { display: none; }

  /* Terminal panel below the photo. */
  .crt {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    margin: 12px max(10px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    min-height: 50vh;
    border-radius: 16px;
    box-shadow:
      inset 0 0 36px rgba(0,0,0,.9),
      0 0 0 7px #d8d3c4,
      0 0 0 9px #a9a394,
      0 14px 40px rgba(0,0,0,.7);
  }
  .screen-live { position: relative; inset: auto; min-height: 50vh; }
  .interface {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 12px;
    transform: none;
  }
  .boot-copy { font-size: 11px; }
  .terminal-top { font-size: 11px; }
  .local-time { min-width: 0; }
  .timezone { max-width: 24ch; }
  .masthead h1 { font-size: clamp(26px, 8vw, 34px); }
  .role { font-size: 11px; margin-top: 8px; }
  .tagline { font-size: 12px; margin-top: 6px; }

  .terminal-main { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; min-height: 0; }
  .side { overflow: visible; flex: none; }
  .menu { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; }
  .menu button { width: auto; font-size: 13px; padding: 8px 12px; }
  .menu button::before { content: ""; }
  .menu button.active::before { content: "> "; }

  .sidebar-brands { margin: 4px 0 0; padding: 0; }
  .sidebar-brands .small-label { display: none; }
  .sidebar-brands .brand-pills { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 10px; }
  .sidebar-brands .brand-pills .brand-pill { height: 26px; padding: 0 2px; font-size: 8px; gap: .3em; }
  .brand-mark { height: 20px; }
  .brand-pill:not(.logo-only) .brand-mark { height: 14px; }

  /* Pages flow in the document; only the active one is shown. */
  .content { overflow: visible; min-height: 0; }
  .panel { position: static; display: none; overflow: visible; padding-right: 0; transform: none; transition: none; }
  .panel.active { display: block; }
  .panel h2 { font-size: 17px; }
  .panel h3 { font-size: 13px; }
  .panel p, .list, .row, .link-row, .contact-list a { font-size: 13px; line-height: 1.5; }
  .list { columns: 1; }
  .list li { margin-bottom: .35em; }
  .chips span { font-size: 10px; }
  .link-row { padding: 9px 2px; gap: .7em; grid-template-columns: 2em 1fr auto; }
  .contact-list a { padding: 11px 0; }
  .console { font-size: 13px; min-height: 50vh; }
  .console-log { max-height: 60vh; }
  .sys-canvas.snake { position: relative; inset: auto; width: 100% !important; }
  .sys-canvas.saver { position: absolute; inset: 0; }

  .terminal-bottom { font-size: 10px; padding-top: 8px; gap: 6px 12px; margin-top: 10px; }
  .keys { display: none; }
  .copyright { margin-left: auto; }
  .footer-social { margin-left: 12px; }
  .footer-social .icon { width: 22px; height: 22px; }

  /* 404 page */
  .error-screen { font-size: 13px; }
  .error-screen .code { font-size: 26px; }
  .error-screen .actions a { padding: 8px 12px; font-size: 12px; }
}