@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Josefin+Sans:wght@400;600;700&family=Playfair+Display:ital,wght@0,700;0,900;1,700;1,900&family=Special+Elite&display=swap');

* { box-sizing: border-box; }

:root {
  --bg: #0d0905;
  --bg-deep: #080603;
  --mahogany: #1b1008;
  --mahogany-2: #25160b;
  --panel: rgba(25, 15, 8, .94);
  --panel-deep: rgba(13, 9, 5, .96);
  --cream: #f4ead8;
  --paper: #d6c3a0;
  --muted: #a89474;
  --amber: #e99a08;
  --amber-bright: #ffad18;
  --amber-dim: #8f5c08;
  --line: rgba(233, 154, 8, .42);
  --line-soft: rgba(214, 195, 160, .18);
  --shadow: rgba(0, 0, 0, .72);
}

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 50% 10%, rgba(87, 49, 13, .14), transparent 38%),
    linear-gradient(180deg, #100b06 0%, var(--bg) 48%, var(--bg-deep) 100%);
  color: var(--cream);
  font-family: "Special Elite", Georgia, serif;
}

body {
  padding-bottom: env(safe-area-inset-bottom);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .14;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 4px),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.025) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.018) 0 1px, transparent 1px);
  background-size: auto, 7px 7px, 9px 9px;
}

button, a { font: inherit; }

button {
  color: var(--cream);
  -webkit-tap-highlight-color: transparent;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 52px;
  padding-top: env(safe-area-inset-top);
  background: rgba(9, 6, 3, .95);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 3px 16px rgba(0,0,0,.48);
  backdrop-filter: blur(10px);
}

.topbar b {
  font-family: "Josefin Sans", sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .24em;
  color: var(--amber);
  text-shadow: 0 0 12px rgba(233,154,8,.22);
}

.topbar button {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--paper);
  font-family: "Josefin Sans", sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.topbar button:first-child { text-align: left; padding-left: 12px; }
.topbar button:last-child { text-align: right; padding-right: 12px; }
#backBtn:disabled { visibility: hidden; }

.screen {
  display: none;
  width: min(100%, 760px);
  margin: auto;
  padding: 22px 16px 30px;
}

.screen.active { display: block; }

/* HOME / MASTHEAD */

.hero {
  text-align: center;
  padding: 28px 4px 24px;
}

.hero small,
.heading small,
.card > small {
  color: var(--amber);
  font-family: "Josefin Sans", sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 12px auto 24px;
  max-width: 100%;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  letter-spacing: -.055em;
  text-shadow: 0 5px 20px rgba(0,0,0,.58);
}

.hero-special,
.hero-signals {
  display: block;
  white-space: nowrap;
}

.hero-special {
  color: var(--cream);
  font-size: clamp(4.05rem, 20.5vw, 6.15rem);
  font-style: normal;
  line-height: .88;
}

.hero-signals {
  position: relative;
  z-index: 1;
  margin-top: -.10em;
  color: var(--amber-bright);
  font-size: clamp(3.75rem, 19vw, 5.75rem);
  font-style: italic;
  line-height: .90;
  transform: translateX(-.025em);
  text-shadow:
    0 5px 20px rgba(0,0,0,.58),
    0 0 14px rgba(233,154,8,.08);
}

.hero p,
.muted {
  color: var(--paper);
  line-height: 1.55;
  text-align: center;
}

.hero p {
  max-width: 34rem;
  margin: 0 auto;
  font-family: "Special Elite", Georgia, serif;
  font-size: .96rem;
  text-shadow: 0 2px 7px rgba(0,0,0,.65);
}

/* NAVIGATION */

#menu {
  display: grid;
  gap: 9px;
}

button,
#museumLink {
  border: 1px solid var(--line);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(45, 27, 12, .92), rgba(20, 12, 6, .96));
  color: var(--cream);
  min-height: 50px;
  padding: 10px 13px;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
  letter-spacing: .1em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 4px 12px rgba(0,0,0,.28);
}

button:not(:disabled):active {
  transform: translateY(1px);
  background: linear-gradient(180deg, rgba(58, 34, 13, .96), rgba(26, 15, 6, .98));
}

#menu button:not(:disabled) {
  color: var(--amber-bright);
  border-color: rgba(233,154,8,.62);
  text-shadow: 0 0 10px rgba(233,154,8,.14);
}

#menu button:disabled {
  color: #796b57;
  border-color: rgba(168,148,116,.16);
  background: rgba(18, 12, 7, .68);
  box-shadow: none;
}

#menu i {
  display: block;
  margin-top: 3px;
  color: #6f6251;
  font-size: .52rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .14em;
}

/* COLLECTION */

.heading {
  text-align: center;
}

.heading h2,
.card h2 {
  margin: 6px 0 14px;
  color: var(--cream);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.48rem;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 3px 12px rgba(0,0,0,.6);
}

.roomnav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.roomnav button {
  min-height: 44px;
  padding: 8px;
  font-size: .64rem;
}

.roomnav span {
  min-width: 55px;
  text-align: center;
  color: var(--amber);
  font-family: "Courier Prime", monospace;
  font-size: .76rem;
}

.room {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: #050301;
  border: 1px solid rgba(233,154,8,.48);
  border-radius: 3px;
  box-shadow:
    0 10px 28px rgba(0,0,0,.62),
    0 0 18px rgba(233,154,8,.04);
}

.room img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 10px;
}

.actions button:first-child {
  color: var(--amber-bright);
  border-color: rgba(233,154,8,.68);
}

/* RADIO DETAIL CARD */

.card {
  border: 1px solid rgba(233,154,8,.48);
  border-radius: 4px;
  background:
    linear-gradient(145deg, rgba(37,22,11,.96), rgba(15,9,5,.98));
  padding: 13px;
  box-shadow:
    0 14px 34px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.photo {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
  margin-bottom: 12px;
  padding: 10px;
  background:
    radial-gradient(circle at 50% 40%, rgba(92,52,14,.16), transparent 58%),
    #080502;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  box-shadow: inset 0 0 24px rgba(0,0,0,.58);
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center center;
}

.scrollbox {
  height: 34vh;
  min-height: 210px;
  max-height: 330px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 4px 13px 15px;
  border: 1px solid rgba(233,154,8,.34);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(9,6,3,.92), rgba(18,10,5,.94));
  line-height: 1.55;
  box-shadow: inset 0 0 18px rgba(0,0,0,.45);
}

.scrollbox h3 {
  margin: 13px 0 5px;
  color: var(--amber);
  font-family: "Josefin Sans", sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
}

.scrollbox p {
  margin: 0;
  color: var(--paper);
  font-family: "Special Elite", Georgia, serif;
  font-size: .9rem;
}

#museumLink {
  display: block;
  margin-top: 9px;
  color: var(--amber-bright);
  text-align: center;
  text-decoration: none;
}

.detailnav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin: 8px 0 10px;
}

.detailnav button {
  width: 100%;
  min-height: 44px;
  padding: 8px;
  font-size: .64rem;
  letter-spacing: .07em;
  white-space: nowrap;
}

.detailnav span {
  min-width: 55px;
  text-align: center;
  color: var(--amber);
  font-family: "Courier Prime", monospace;
  font-size: .76rem;
}

.detailnav button:disabled {
  opacity: .28;
  box-shadow: none;
}

.detailreturn {
  display: flex;
  justify-content: center;
  margin-top: 9px;
}

.detailreturn #backRoom {
  width: 100%;
  text-align: center;
  color: var(--amber-bright);
  border-color: rgba(233,154,8,.58);
}

/* CATALOG */

#catalogList {
  display: grid;
  gap: 8px;
}

.catalogItem {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
}

.catalogItem img {
  width: 48px;
  height: 40px;
  object-fit: contain;
  background: #070402;
  border: 1px solid rgba(214,195,160,.12);
}

.catalogItem strong,
.catalogItem span {
  display: block;
}

.catalogItem strong {
  color: var(--cream);
  font-family: "Playfair Display", Georgia, serif;
  font-size: .9rem;
  letter-spacing: .01em;
}

.catalogItem span {
  margin-top: 2px;
  color: var(--muted);
  font-family: "Courier Prime", monospace;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .02em;
}

/* ROOM LIGHTBOX */

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  padding: 12px;
  background: rgba(4, 2, 1, .98);
}

#lightbox[hidden] { display: none; }

#lightbox img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  touch-action: pinch-zoom;
  border: 1px solid rgba(233,154,8,.28);
  box-shadow: 0 12px 40px rgba(0,0,0,.75);
}

#closeLightbox {
  justify-self: end;
  min-width: 48px;
  border: 0;
  background: transparent;
  color: var(--cream);
  font-family: Georgia, serif;
  font-size: 2rem;
  box-shadow: none;
}

#bigCaption {
  color: var(--paper);
  font-family: "Special Elite", Georgia, serif;
  font-size: .8rem;
  text-align: center;
}

/* PHONE-SIZE MASTHEAD TUNING */

@media (max-width: 430px) {
  .hero {
    padding-top: 24px;
  }

  .hero h1 {
    margin-bottom: 24px;
  }

  .hero-special {
    font-size: clamp(3.9rem, 20vw, 5rem);
  }

  .hero-signals {
    font-size: clamp(3.65rem, 18.8vw, 4.7rem);
  }

  .screen {
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .screen { padding-top: 10px; }
  .hero { padding-top: 12px; }
  .hero-special { font-size: 3.6rem; }
  .hero-signals { font-size: 3.35rem; }
  .room img { max-height: 64vh; }
}


/* OTHER GEAR */
.gear-intro {
  max-width: 38rem;
  margin: 0 auto 14px;
}

#gearList {
  display: grid;
  gap: 8px;
}

.gearListItem {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
}

.gearListItem img {
  width: 58px;
  height: 48px;
  object-fit: contain;
  background: #070402;
  border: 1px solid rgba(214,195,160,.12);
}

.gearListItem strong,
.gearListItem span { display: block; }

.gearListItem strong {
  color: var(--cream);
  font-family: "Playfair Display", Georgia, serif;
  font-size: .9rem;
  letter-spacing: .01em;
}

.gearListItem span {
  margin-top: 2px;
  color: var(--muted);
  font-family: "Courier Prime", monospace;
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.35;
}

.gear-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gear-media img,
.gear-media video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center center;
}

.gear-media video { background: #050301; }
.gear-scrollbox p { margin: 0 0 12px; }
.gear-scrollbox p:last-child { margin-bottom: 0; }

.gear-spec-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gear-spec-chip {
  display: inline-block;
  padding: 5px 7px;
  border: 1px solid var(--amber-dim);
  border-radius: 2px;
  background: rgba(143,92,8,.13);
  color: var(--amber);
  font-family: "Josefin Sans", sans-serif;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
}

#gearLink {
  display: block;
  margin-top: 9px;
  min-height: 50px;
  padding: 15px 13px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(45, 27, 12, .92), rgba(20, 12, 6, .96));
  color: var(--amber-bright);
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 4px 12px rgba(0,0,0,.28);
}

#gearLink[hidden] { display: none; }

.detailreturn #backGear {
  width: 100%;
  text-align: center;
  color: var(--amber-bright);
  border-color: rgba(233,154,8,.58);
}


/* ESSENTIAL LIBRARY */
.library-intro { max-width:38rem; margin:0 auto 16px; }
.library-notice { margin:0 0 22px; padding:14px 15px; border:1px solid rgba(233,154,8,.34); border-left:3px solid var(--amber-dim); border-radius:3px; background:linear-gradient(180deg,rgba(37,22,11,.78),rgba(16,10,5,.9)); box-shadow:0 8px 24px rgba(0,0,0,.28); }
.library-notice h3 { margin:0 0 7px; color:var(--amber-bright); font-family:"Playfair Display",Georgia,serif; font-size:1rem; font-style:italic; }
.library-notice p { margin:0; color:var(--paper); font-family:"Special Elite",Georgia,serif; font-size:.84rem; line-height:1.65; }
#librarySections,#libraryCategoryList { display:grid; gap:9px; }
.library-category-button,.library-title-item { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; width:100%; text-align:left; }
.library-category-button strong,.library-title-item strong { display:block; color:var(--cream); font-family:"Playfair Display",Georgia,serif; font-size:.96rem; line-height:1.25; letter-spacing:.01em; }
.library-category-button span,.library-title-item span { display:block; margin-top:4px; color:var(--amber); font-family:"Josefin Sans",sans-serif; font-size:.59rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; line-height:1.35; }
.library-category-button > b,.library-title-item > b { color:var(--amber-bright); font-size:1rem; }
.library-category-intro { margin-top:0; margin-bottom:14px; }
.library-detail-card .detailnav { margin-top:12px; }
.library-detail-author { margin:-7px 0 4px; color:var(--amber); font-family:"Josefin Sans",sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; line-height:1.4; }
.library-detail-description { margin:0 0 10px; padding:17px 15px; border:1px solid rgba(233,154,8,.28); border-radius:4px; background:radial-gradient(circle at 85% 10%,rgba(92,52,14,.12),transparent 40%),linear-gradient(145deg,rgba(37,22,11,.92),rgba(15,9,5,.96)); box-shadow:inset 0 0 18px rgba(0,0,0,.35); }
.library-detail-description p { margin:0; color:var(--paper); font-family:"Special Elite",Georgia,serif; font-size:.91rem; line-height:1.68; }
.library-detail-badge { margin:2px 0 9px; color:var(--amber); font-family:"Josefin Sans",sans-serif; font-size:.58rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-align:center; }
.library-detail-buy { display:flex; align-items:center; justify-content:center; width:100%; min-height:50px; padding:10px 13px; border:1px solid rgba(233,154,8,.58); border-radius:4px; background:linear-gradient(180deg,rgba(45,27,12,.92),rgba(20,12,6,.96)); color:var(--amber-bright); font-family:"Josefin Sans",sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.28); }
.library-detail-buy[hidden] { display:none; }
#backLibrary,#backCategory { width:100%; color:var(--amber-bright); border-color:rgba(233,154,8,.58); }
.library-load-error { padding:18px; border:1px solid rgba(233,154,8,.3); color:var(--paper); text-align:center; line-height:1.55; }


/* OPERATIONS — HELLSCHREIBER MONITOR */

.operations-screen {
  width: 100%;
  max-width: none;
  padding: 0;
}

.ops-rotate {
  display: none;
  min-height: calc(100dvh - 52px);
  padding: 28px 22px;
  place-content: center;
  text-align: center;
}
.ops-rotate-icon {
  color: var(--amber);
  font-family: "Courier Prime", monospace;
  font-size: 3rem;
}
.ops-rotate h2 {
  margin: 10px 0 8px;
  color: var(--amber-bright);
  font-family: "Josefin Sans", sans-serif;
  letter-spacing: .16em;
}
.ops-rotate p {
  max-width: 24rem;
  margin: auto;
  color: var(--paper);
  line-height: 1.55;
}

.hell-console {
  min-height: calc(100dvh - 52px);
  padding: 7px 10px max(7px, env(safe-area-inset-bottom));
  background: #10130f;
}

.hell-faceplate {
  position: relative;
  width: 100%;
  min-height: calc(100dvh - 66px);
  padding: 8px 12px 7px;
  overflow: hidden;
  border: 2px solid #1d211b;
  border-radius: 7px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.10), transparent 25%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #777b67 0%, #666b59 48%, #555b4c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 30px rgba(0,0,0,.32),
    0 8px 25px rgba(0,0,0,.65);
  color: #161a14;
  font-family: "Courier Prime", monospace;
}

.hell-faceplate::before,
.hell-faceplate::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #bbb, #353a31 55%, #171a16 70%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.45);
}
.hell-faceplate::before { left: 5px; top: 5px; }
.hell-faceplate::after { right: 5px; bottom: 5px; }

.hell-topline,
.hell-source-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hell-nameplate {
  min-height: 0;
  padding: 4px 8px 3px;
  border: 1px solid #22271f;
  border-radius: 2px;
  background: linear-gradient(#3c4136,#262b23);
  color: #e7e2c8;
  font-family: "Courier Prime", monospace;
  font-size: clamp(.58rem, 1.7vw, .76rem);
  font-weight: 700;
  letter-spacing: .08em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.hell-nameplate:active { transform: translateY(1px); background: #292e26; }

.hell-station {
  font-size: clamp(.48rem, 1.45vw, .66rem);
  font-weight: 700;
  letter-spacing: .10em;
  white-space: nowrap;
}

.hell-display-wrap {
  position: relative;
  height: clamp(112px, 34vh, 205px);
  margin: 6px 0 5px;
  overflow: hidden;
  border: 7px solid #252a22;
  border-radius: 12px;
  background: #010603;
  box-shadow:
    inset 0 0 0 2px #11150f,
    inset 0 0 32px #000,
    0 2px 3px rgba(255,255,255,.08);
}

#hellCanvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #010603;
}

.hell-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(255,255,255,.07), transparent 18% 70%, rgba(255,255,255,.025)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.42) 100%);
  mix-blend-mode: screen;
  opacity: .55;
}

.hell-controls {
  display: grid;
  grid-template-columns: minmax(170px,1.3fr) minmax(300px,2fr) minmax(72px,.55fr);
  gap: 12px;
  align-items: end;
}

.hell-phase-block label,
.hell-control-label {
  display: block;
  margin-bottom: 2px;
  font-size: clamp(.5rem, 1.35vw, .63rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
}

#hellPhase {
  width: 100%;
  height: 24px;
  margin: 0;
  accent-color: #242920;
  background: transparent;
}
#hellPhase::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid #242820;
  border-radius: 1px;
  background: #3a4034;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}
#hellPhase::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border: 2px solid #151814;
  border-radius: 50%;
  -webkit-appearance: none;
  background: radial-gradient(circle at 35% 30%, #555b4e, #171b16 62%, #080a08);
  box-shadow: 0 2px 4px rgba(0,0,0,.6);
}
#hellPhase { -webkit-appearance: none; }

.hell-phase-scale {
  display: flex;
  justify-content: space-between;
  margin-top: -2px;
  font-size: clamp(.42rem, 1.1vw, .52rem);
  font-weight: 700;
}

.hell-channel-block {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}

.hell-control-button {
  min-height: 32px;
  padding: 5px 10px;
  border: 2px solid #171a16;
  border-radius: 3px;
  background: linear-gradient(#383d33,#1e221c);
  color: #e4dfc7;
  font-family: "Courier Prime", monospace;
  font-size: clamp(.52rem, 1.4vw, .65rem);
  letter-spacing: .08em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 3px rgba(0,0,0,.45);
}

.hell-channel-lamps {
  display: flex;
  justify-content: space-evenly;
  gap: 5px;
}

.hell-channel-lamp {
  display: grid;
  place-items: center;
  width: clamp(25px, 4.1vw, 34px);
  height: clamp(25px, 4.1vw, 34px);
  border: 2px solid #2b3027;
  border-radius: 50%;
  background: #3c4236;
  color: #1b1e19;
  font-size: clamp(.66rem, 1.8vw, .85rem);
  font-weight: 700;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.13);
}
.hell-channel-lamp.active {
  border-color: #606b4d;
  background: #b7d66b;
  color: #14200d;
  text-shadow: 0 0 5px #efffc0;
  box-shadow:
    inset 0 0 5px rgba(255,255,220,.75),
    0 0 8px rgba(185,230,100,.9),
    0 0 17px rgba(157,214,75,.55);
}

.hell-power-block { text-align: center; }
.hell-power-button {
  width: 50px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: 2px solid #161916;
  border-radius: 4px;
  background: linear-gradient(#393e34,#1d211b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.5);
}
.hell-power-lamp {
  display: block;
  width: 13px;
  height: 13px;
  margin: auto;
  border-radius: 50%;
  background: #351e12;
  box-shadow: inset 0 0 4px #000;
}
.hell-power-button.on .hell-power-lamp {
  background: #ef8e36;
  box-shadow: 0 0 5px #ffad5e, 0 0 12px rgba(255,126,35,.8), inset 0 0 3px #fff0c2;
}

.hell-source-line {
  margin-top: 5px;
  padding-top: 4px;
  border-top: 1px solid rgba(20,24,18,.35);
  font-size: clamp(.44rem, 1.2vw, .57rem);
  font-weight: 700;
  letter-spacing: .08em;
}
#hellStatus { text-align: right; }

.hell-info-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4,7,4,.84);
  backdrop-filter: blur(4px);
}
.hell-info-modal[hidden] { display: none; }
.hell-info-card {
  width: min(92vw, 540px);
  padding: 18px;
  border: 2px solid #272c24;
  border-radius: 5px;
  background: linear-gradient(145deg,#737762,#545a4a);
  color: #141813;
  font-family: "Courier Prime", monospace;
  box-shadow: 0 16px 45px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.12);
}
.hell-info-plate {
  display: inline-block;
  padding: 3px 6px;
  background: #292e26;
  color: #e7e2c8;
  font-size: .58rem;
  letter-spacing: .12em;
}
.hell-info-card h2 {
  margin: 12px 0 8px;
  font-size: 1.15rem;
  letter-spacing: .10em;
}
.hell-info-card p {
  margin: 0 0 14px;
  font-size: .82rem;
  line-height: 1.55;
}
.hell-info-card button {
  display: block;
  width: 100%;
  min-height: 40px;
  border-color: #242820;
  background: linear-gradient(#3a4034,#22261f);
  color: #eee8ce;
  font-family: "Courier Prime", monospace;
}

@media (orientation: portrait) {
  #operations.active .ops-rotate { display: grid; }
  #operations.active .hell-console { display: none; }
}

@media (orientation: landscape) and (max-height: 560px) {
  body:has(#operations.active) .topbar { display: none; }
  body:has(#operations.active) { overflow: hidden; }
  #operations.active { height: 100dvh; overflow: hidden; }
  #operations.active .hell-console {
    display: block;
    height: 100dvh;
    min-height: 0;
    padding: max(4px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  #operations.active .hell-faceplate {
    height: 100%;
    min-height: 0;
  }
  #operations.active .hell-display-wrap {
    height: clamp(105px, 45vh, 190px);
  }
}

@media (orientation: landscape) and (max-width: 700px) {
  .hell-controls {
    grid-template-columns: minmax(135px,1.15fr) minmax(260px,2fr) 62px;
    gap: 7px;
  }
  .hell-faceplate { padding-left: 9px; padding-right: 9px; }
}


/* OPERATIONS — DESKTOP PERFORMANCE SAFETY */
@media (orientation: landscape) and (min-width: 1000px) {
  #operations.active .hell-console { display:grid; place-items:center; }
  #operations.active .hell-faceplate { width:min(1100px, calc(100vw - 32px)); }
}


/* OPERATIONS — PORTRAIT LANDING COPY */
.ops-life {
  max-width: 31rem;
  margin: 12px auto 18px;
  color: var(--paper);
  font-family: "Special Elite", Georgia, serif;
  font-size: clamp(.88rem, 3.8vw, 1.02rem);
  line-height: 1.62;
  text-align: center;
}
.ops-instruction {
  max-width: 27rem;
  margin: 0 auto;
  color: var(--paper);
  font-family: "Special Elite", Georgia, serif;
  font-size: clamp(.82rem, 3.5vw, .96rem);
  line-height: 1.55;
  text-align: center;
}


/* MORSE TRAINER — MATCHED TO CURRENT MOBILE MARKUP v37 */
.morse-screen{
  width:100%;
  max-width:none;
  padding:0;
}
.morse-rotate{
  display:none;
  min-height:calc(100dvh - 52px);
  padding:28px 22px;
  place-content:center;
  text-align:center;
}
.morse-rotate-icon{
  color:var(--amber);
  font:3rem "Courier Prime",monospace;
}
.morse-rotate h2{
  margin:10px 0 8px;
  color:var(--amber-bright);
  font-family:"Josefin Sans",sans-serif;
  letter-spacing:.16em;
}
.morse-rotate p{
  max-width:27rem;
  margin:8px auto;
  color:var(--paper);
  line-height:1.55;
}

.morse-console{
  min-height:calc(100dvh - 52px);
  padding:6px 9px;
  background:#10130f;
}

.morse-faceplate{
  position:relative;
  width:100%;
  min-height:calc(100dvh - 64px);
  padding:8px 11px 7px;
  overflow:hidden;
  border:2px solid #1d211b;
  border-radius:7px;
  background:
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.10),transparent 25%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 4px),
    linear-gradient(145deg,#777b67 0%,#666b59 48%,#555b4c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 30px rgba(0,0,0,.32),
    0 8px 25px rgba(0,0,0,.65);
  color:#161a14;
  font-family:"Courier Prime",monospace;
}

.morse-topline{
  display:grid;
  grid-template-columns:minmax(160px,1fr) minmax(235px,1.2fr) minmax(150px,1fr);
  gap:9px;
  align-items:center;
}
.morse-nameplate{
  min-width:0;
  padding:4px 8px 3px;
  border:1px solid #22271f;
  border-radius:2px;
  background:linear-gradient(#3c4136,#262b23);
  color:#e7e2c8;
  font-size:clamp(.50rem,1.45vw,.70rem);
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.2;
}
.morse-station{
  min-width:0;
  justify-self:end;
  font-size:clamp(.43rem,1.2vw,.60rem);
  font-weight:700;
  letter-spacing:.10em;
  line-height:1.25;
  text-align:right;
}

.morse-response-face{
  display:grid;
  grid-template-columns:auto minmax(90px,1fr) auto;
  gap:6px;
  align-items:center;
  min-width:0;
  font-size:clamp(.46rem,1.3vw,.62rem);
  font-weight:700;
  letter-spacing:.05em;
  white-space:nowrap;
}
#morseResponse{
  width:100%;
  min-width:0;
  height:20px;
  margin:0;
  accent-color:#242920;
  background:transparent;
}
#morseResponseValue{
  min-width:2.2em;
  text-align:left;
}

.morse-main{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(108px,.90fr);
  gap:7px;
  margin:6px 0;
  align-items:stretch;
}
.morse-display-wrap{
  position:relative;
  height:clamp(94px,31vh,158px);
  overflow:hidden;
  border:7px solid #252a22;
  border-radius:12px;
  background:#010603;
  box-shadow:inset 0 0 0 2px #11150f,inset 0 0 32px #000,0 2px 3px rgba(255,255,255,.08);
}
.morse-display-wrap canvas{
  display:block;
  width:100%;
  height:100%;
  background:#010603;
}
.morse-glass{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(110deg,rgba(255,255,255,.07),transparent 18% 70%,rgba(255,255,255,.025)),
    repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.42) 100%);
  opacity:.55;
}

.morse-sidepanel{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:6px;
  min-width:0;
}
.morse-side-button{
  width:100%;
  min-width:0;
  min-height:0;
  padding:5px 6px;
  border:2px solid #171a16;
  border-radius:3px;
  background:linear-gradient(#383d33,#1e221c);
  color:#eee8ce;
  font:700 clamp(.50rem,1.25vw,.64rem) "Courier Prime",monospace;
  letter-spacing:.07em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 3px rgba(0,0,0,.45);
}
.morse-side-button:active{
  transform:translateY(1px);
  background:#292e26;
}
.morse-start-button.running{
  background:#743b27;
  color:#fff2df;
}

.morse-keyboard{
  display:grid;
  gap:3px;
  margin:2px 0 0;
  user-select:none;
  -webkit-user-select:none;
}
.morse-key-row{
  display:flex;
  justify-content:center;
  gap:3px;
  min-width:0;
}
.morse-key-row button{
  flex:1 1 0;
  min-width:0;
  min-height:0;
  height:clamp(25px,7vh,34px);
  padding:1px 2px;
  border:1px solid #171a16;
  border-radius:2px;
  background:linear-gradient(#383d33,#1e221c);
  color:#eee8ce;
  font:700 clamp(.48rem,1.35vw,.66rem) "Courier Prime",monospace;
  letter-spacing:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.35);
}
.morse-key-row-mid{padding-inline:4.7%}
.morse-key-row-low{padding-inline:9.2%}
.morse-key-row-low button[data-morse-key=" "]{
  flex:1.55 1 0;
  font-size:clamp(.42rem,1.1vw,.56rem);
  letter-spacing:.03em;
}
.morse-keyboard.locked .morse-key-row button,
.morse-key-row button:disabled{
  opacity:.36;
}
.morse-key-row button.key-correct,
.morse-key-row button.key-error{
  background:#b7d66b;
  color:#14200d;
  box-shadow:0 0 7px rgba(185,230,100,.55);
}
.morse-key-row button.key-error{
  background:#b66a52;
  color:#fff1e9;
  box-shadow:0 0 7px rgba(190,96,72,.55);
}

.morse-status{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:8px;
  align-items:center;
  margin-top:4px;
  padding-top:3px;
  border-top:1px solid rgba(20,24,18,.35);
  font-size:clamp(.38rem,.95vw,.50rem);
  font-weight:700;
  letter-spacing:.04em;
}
#morseScore{text-align:center}
#morseState{text-align:right}

/* SETTINGS MODAL */
.morse-settings-modal{
  position:fixed;
  inset:0;
  z-index:2000;
  display:grid;
  place-items:center;
  padding:max(12px,env(safe-area-inset-top))
          max(12px,env(safe-area-inset-right))
          max(12px,env(safe-area-inset-bottom))
          max(12px,env(safe-area-inset-left));
  background:rgba(0,0,0,.78);
  overflow:auto;
}
.morse-settings-modal[hidden]{display:none!important}
.morse-settings-card{
  width:min(94vw,620px);
  max-height:92dvh;
  overflow:auto;
  padding:14px;
  border:2px solid #2b3027;
  border-radius:7px;
  background:
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.08),transparent 25%),
    linear-gradient(145deg,#777b67 0%,#666b59 48%,#555b4c 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 0 24px rgba(0,0,0,.28),0 14px 40px rgba(0,0,0,.78);
  color:#161a14;
  font-family:"Courier Prime",monospace;
}
.morse-settings-plate{
  display:inline-block;
  margin-bottom:6px;
  padding:4px 8px 3px;
  border:1px solid #22271f;
  border-radius:2px;
  background:linear-gradient(#3c4136,#262b23);
  color:#e7e2c8;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.09em;
}
.morse-settings-card h2{
  margin:2px 0 10px;
  color:#171b16;
  font-family:"Courier Prime",monospace;
  font-size:clamp(.9rem,2.4vw,1.15rem);
  letter-spacing:.10em;
}
.morse-settings-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.morse-settings-grid label,
.morse-settings-close-wrap{
  display:grid;
  gap:3px;
  min-width:0;
  color:#171b16;
  font-size:clamp(.48rem,1.25vw,.60rem);
  font-weight:700;
  letter-spacing:.07em;
}
.morse-settings-grid select,
.morse-settings-faux-select{
  width:100%;
  min-width:0;
  min-height:32px;
  padding:5px 7px;
  border:1px solid #252a22;
  border-radius:2px;
  background:#d1ceb1;
  color:#151914;
  font:700 clamp(.50rem,1.25vw,.62rem) "Courier Prime",monospace;
}
.morse-settings-faux-select{
  display:grid;
  place-items:center;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
}
.morse-reference{
  max-height:34dvh;
  overflow:auto;
  margin-top:10px;
  padding:9px;
  border:1px solid #30352b;
  border-radius:2px;
  background:#11150f;
  color:#e5e1ca;
  white-space:pre-wrap;
  font:.68rem/1.42 "Courier Prime",monospace;
}

@media (orientation:portrait){
  #morse.active .morse-rotate{display:grid}
  #morse.active .morse-console{display:none}
}

@media (orientation:landscape) and (max-height:560px){
  body:has(#morse.active) .topbar{display:none}
  body:has(#morse.active){overflow:hidden}
  #morse.active{height:100dvh;overflow:hidden}
  #morse.active .morse-console{
    display:block;
    height:100dvh;
    min-height:0;
    padding:max(4px,env(safe-area-inset-top))
            max(8px,env(safe-area-inset-right))
            max(4px,env(safe-area-inset-bottom))
            max(8px,env(safe-area-inset-left));
  }
  #morse.active .morse-faceplate{
    height:100%;
    min-height:0;
    padding:6px 8px 5px;
  }
  .morse-topline{
    grid-template-columns:minmax(145px,1fr) minmax(205px,1.2fr) minmax(135px,.95fr);
    gap:6px;
  }
  .morse-main{
    grid-template-columns:minmax(0,4fr) minmax(100px,.86fr);
    gap:5px;
    margin:4px 0;
  }
  .morse-display-wrap{
    height:clamp(88px,29vh,138px);
    border-width:6px;
  }
  .morse-sidepanel{gap:4px}
  .morse-keyboard{gap:2px}
  .morse-key-row{gap:2px}
  .morse-key-row button{height:clamp(23px,6.6vh,31px)}
  .morse-status{margin-top:2px;padding-top:2px}
  .morse-settings-modal{padding:6px 10px}
  .morse-settings-card{
    width:min(96vw,720px);
    max-height:96dvh;
    padding:10px;
  }
  .morse-settings-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
  }
  .morse-settings-card h2{margin-bottom:6px}
  .morse-settings-grid select,
  .morse-settings-faux-select{
    min-height:29px;
    padding:3px 5px;
  }
}

@media (orientation:landscape) and (max-width:700px){
  .morse-topline{
    grid-template-columns:minmax(128px,1fr) minmax(180px,1.15fr) minmax(118px,.90fr);
    gap:5px;
  }
  .morse-nameplate{padding-inline:5px}
  .morse-response-face{gap:4px}
  .morse-main{
    grid-template-columns:minmax(0,4.2fr) minmax(94px,.82fr);
  }
}


/* MERCHANDISE */
.merch-intro-mobile { max-width: 34rem; margin: 0 auto 16px; }
.merch-notice { margin-bottom: 14px; }
#merchList { display:grid; gap:8px; }
.merch-list-item {
  display:grid; grid-template-columns:58px 1fr auto; gap:10px; align-items:center;
  width:100%; min-height:66px; text-align:left; padding:8px 10px;
}
.merch-list-item img {
  width:58px; height:48px; object-fit:contain; background:#070402;
  border:1px solid rgba(214,195,160,.12); border-radius:2px;
}
.merch-list-item strong,.merch-list-item span { display:block; }
.merch-list-item strong {
  color:var(--cream); font-family:"Playfair Display",Georgia,serif;
  font-size:.9rem; line-height:1.18; letter-spacing:.01em;
}
.merch-list-item span {
  margin-top:4px; color:var(--amber); font-family:"Josefin Sans",sans-serif;
  font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.merch-list-item > b { color:var(--amber); font-size:1.1rem; }
.merch-media img { width:100%; height:auto; object-fit:contain; object-position:center; }
.merch-scrollbox { height:30vh; min-height:180px; max-height:280px; }
.merch-buy {
  display:block; width:100%; min-height:46px; margin-top:9px; padding:12px 13px;
  border:1px solid rgba(233,154,8,.58); border-radius:4px;
  background:linear-gradient(180deg,rgba(45,27,12,.92),rgba(20,12,6,.96));
  color:var(--amber-bright); font-family:"Josefin Sans",sans-serif; font-size:.68rem;
  font-weight:700; letter-spacing:.12em; text-align:center; text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.28);
}
#backMerch { width:100%; color:var(--amber-bright); border-color:rgba(233,154,8,.58); }


/* COLLECTING */
.collecting-intro-mobile { max-width:34rem; margin:0 auto 16px; }
#collectingList { display:grid; gap:8px; }
.collecting-list-item {
  display:grid; grid-template-columns:68px 1fr auto; gap:10px; align-items:center;
  width:100%; min-height:72px; text-align:left; padding:8px 10px;
}
.collecting-list-media {
  display:grid; place-items:center; width:68px; height:54px; overflow:hidden;
  background:#070402; border:1px solid rgba(214,195,160,.12); border-radius:2px;
}
.collecting-list-media img { width:100%; height:100%; padding:5px; object-fit:contain; }
.collecting-list-item strong,.collecting-list-item span { display:block; }
.collecting-list-item > div:nth-child(2) > strong {
  color:var(--cream); font-family:"Playfair Display",Georgia,serif; font-size:.9rem; line-height:1.18;
}
.collecting-list-item > div:nth-child(2) > span {
  margin-top:4px; color:var(--amber); font-family:"Josefin Sans",sans-serif;
  font-size:.56rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.collecting-list-item > b { color:var(--amber); font-size:1.1rem; }
.collecting-nameplate { width:100%; text-align:center; line-height:1.05; }
.collecting-nameplate strong {
  display:block; color:var(--amber-bright); font-family:"Playfair Display",Georgia,serif;
  font-size:.8rem; font-style:italic;
}
.collecting-nameplate span {
  display:block; margin-top:4px; color:var(--amber-dim); font-family:"Josefin Sans",sans-serif;
  font-size:.4rem; letter-spacing:.09em; text-transform:uppercase;
}
.collecting-media { display:grid; place-items:center; min-height:150px; }
.collecting-media img { display:block; width:100%; max-height:210px; object-fit:contain; object-position:center; }
.collecting-media .collecting-nameplate { padding:30px 12px; }
.collecting-media .collecting-nameplate strong { font-size:1.45rem; }
.collecting-media .collecting-nameplate span { margin-top:8px; font-size:.62rem; letter-spacing:.18em; }
.collecting-scrollbox { height:30vh; min-height:180px; max-height:280px; }
.collecting-visit,.collecting-extra {
  display:block; width:100%; min-height:46px; margin-top:9px; padding:12px 13px;
  border:1px solid rgba(233,154,8,.58); border-radius:4px;
  background:linear-gradient(180deg,rgba(45,27,12,.92),rgba(20,12,6,.96));
  color:var(--amber-bright); font-family:"Josefin Sans",sans-serif; font-size:.68rem;
  font-weight:700; letter-spacing:.12em; text-align:center; text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.28);
}
.collecting-extra { color:var(--paper); border-color:rgba(214,195,160,.26); }
.collecting-extra[hidden] { display:none; }
#backCollecting { width:100%; color:var(--amber-bright); border-color:rgba(233,154,8,.58); }

/* COLLECTING — GRAPHIC CONSTRAINT FIX v32 */
#collecting #collectingList .collecting-list-item {
  overflow: hidden;
}
#collecting #collectingList .collecting-list-media {
  width: 68px;
  height: 54px;
  min-width: 68px;
  min-height: 54px;
  max-width: 68px;
  max-height: 54px;
  overflow: hidden;
}
#collecting #collectingList .collecting-list-media img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 58px !important;
  max-height: 44px !important;
  margin: auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}
#collectingDetail #collectingMedia {
  display: grid;
  place-items: center;
  min-height: 150px;
  max-height: 230px;
  overflow: hidden;
  padding: 14px;
}
#collectingDetail #collectingMedia img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 200px !important;
  margin: auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}


/* ABOUT THE COLLECTOR — MOBILE v33 */
.about-mobile-screen { padding-bottom:34px; }
.about-mobile-card { margin-top:14px; }
.about-mobile-photo {
  width:100%;
  max-width:420px;
  margin:0 auto 8px;
}
.about-mobile-photo img {
  display:block;
  width:100%;
  height:auto;
  max-height:38vh;
  object-fit:contain;
  object-position:center;
  border:1px solid rgba(233,154,8,.42);
  border-radius:3px;
  filter:sepia(.12);
  background:#080502;
}
.about-mobile-caption {
  margin:6px 0 0;
  color:var(--amber-bright);
  font-family:"Playfair Display",Georgia,serif;
  font-size:.9rem;
  font-style:italic;
  text-align:center;
}
.about-mobile-tagline {
  margin:10px auto 13px;
  color:var(--amber-bright);
  font-family:"Playfair Display",Georgia,serif;
  font-size:1rem;
  font-style:italic;
  line-height:1.45;
  text-align:center;
}
.about-mobile-scroll {
  height:34vh;
  min-height:230px;
  max-height:360px;
  padding-top:12px;
}
.about-mobile-scroll p { margin:0 0 14px; }
.about-mobile-scroll p:last-child { margin-bottom:2px; }
.about-mobile-scroll strong { color:var(--cream); }
.about-mobile-contact {
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(233,154,8,.28);
  text-align:center;
}
.about-mobile-contact span {
  display:block;
  margin-bottom:7px;
  color:var(--amber);
  font-family:"Josefin Sans",sans-serif;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.13em;
}
.about-mobile-contact a {
  color:var(--amber-bright);
  font-family:"Courier Prime",monospace;
  font-size:.82rem;
  text-decoration:none;
}
@media (max-width:430px) {
  .about-mobile-photo img { max-height:34vh; }
  .about-mobile-scroll { min-height:220px; }
}

/* MAIN SITE LINK */
#menu .main-site-link {
  display: block;
  width: 100%;
  margin: 10px auto 4px;
  text-align: center;
  color: var(--muted);
  font-family: "Courier Prime", monospace;
  font-size: .86rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-decoration: none;
}
#menu .main-site-link:hover,
#menu .main-site-link:focus {
  color: var(--paper);
  text-decoration: underline;
}