/* The Halloran — shared styles (step 2).
 * Fonts, base, chrome, shared components, then the motion layer.
 * Colour comes from tokens.css only: var(--accent) / var(--neon) for the one red light,
 * --neon-hot / --neon-deep / --neon-off inside glows only.
 * Animations move opacity, transform and filter: brightness() and nothing else.
 */

/* ---- Fonts: two families, self-hosted, SIL OFL 1.1 (licences sit beside the files) ---- */

@font-face { font-family: "Limelight"; src: url("../fonts/limelight/Limelight-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courierprime/CourierPrime-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courierprime/CourierPrime-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courierprime/CourierPrime-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ---- Base ---- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ink); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-type);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  animation: page-in var(--dur-dip-in) var(--ease-film) both; /* the second half of the dip to black */
}

main { flex: 1 0 auto; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; filter: grayscale(1) contrast(1.06); } /* photography is always mono */
button, input, select, textarea { font: inherit; color: inherit; border-radius: var(--radius); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--white); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--bone); color: var(--ink); }

/* ---- Shared type ---- */

.display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--white);
  text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.15; }

.kicker, .label, .caption {
  font-family: var(--font-type);
  font-size: var(--fs-micro);
  line-height: 1.5;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.kicker { font-size: 0.8125rem; }

.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: var(--measure); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
.muted { color: var(--text-muted); }
.figure { font-family: var(--font-display); letter-spacing: var(--track-display); } /* room numbers, the year, prices */

/* ---- Layout ---- */

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-pad); background: var(--bg); color: var(--text); }

/* Upstairs: the ledger. Bone ground, Ink text, the red mark solid with no glow. */
.upstairs { --bg: var(--bone); --text: var(--ink); --text-muted: var(--smoke); --rule: var(--fog); }
.upstairs .display, .upstairs .h1, .upstairs .h2, .upstairs .h3 { color: var(--ink); }
.upstairs a:hover { color: var(--ink); }
.upstairs ::selection { background: var(--ink); color: var(--bone); }

/* Downstairs: The Night Desk goes one stop darker. */
.downstairs { --bg: var(--pitch); }

/* ---- Deco devices: thin double rule, square corners, one small diamond ---- */

.frame { position: relative; border: var(--rule-hair) solid var(--rule); padding: calc(var(--frame-inset) + var(--s-4)); }
.frame::before {
  content: "";
  position: absolute;
  inset: calc(var(--frame-inset) - var(--rule-hair));
  border: var(--rule-hair) solid var(--rule);
  pointer-events: none;
}

.rule { border: 0; height: var(--rule-hair); margin: 0; background: var(--rule); }
.rule--double { height: var(--rule-double); background: none; border-block: var(--rule-hair) solid var(--rule); }

.divider { position: relative; height: 9px; margin: 0; border: 0; }
.divider::before { content: ""; position: absolute; inset: 3px 0; border-block: var(--rule-hair) solid var(--rule); }
.divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--text-muted);
  box-shadow: 0 0 0 6px var(--bg);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ---- Buttons: square, 1px rule, caps. The glow is a layer that only changes opacity. ---- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7em 1.5em 0.6em;
  border: var(--rule-hair) solid var(--accent);
  background: none;
  color: var(--bone);
  font-family: var(--font-type);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  box-shadow: 0 0 6px var(--neon-hot), 0 0 18px var(--accent), 0 0 40px var(--neon-deep);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) linear;
}
.btn:hover, .btn:focus-visible { color: var(--white); }
.btn:hover::after, .btn:focus-visible::after { opacity: 0.55; }
.btn:active::after { opacity: 0.3; }

.btn--secondary { border-color: var(--rule); }
.btn--secondary::after { box-shadow: none; border: var(--rule-hair) solid var(--bone); }
.btn--secondary:hover::after, .btn--secondary:focus-visible::after { opacity: 1; }

.upstairs .btn { color: var(--ink); }
.upstairs .btn::after { box-shadow: none; } /* no glow on light grounds */
.upstairs .btn:hover, .upstairs .btn:focus-visible { color: var(--ink); }

/* ---- Cards, bar-chit leaders, photo plates ---- */

.card { background: var(--surface); border: var(--rule-hair) solid var(--rule); padding: var(--s-5); }
.upstairs .card { background: var(--white); }

.leader { display: flex; align-items: baseline; gap: var(--s-2); }
.leader__dots { flex: 1 1 2rem; min-width: 1.5rem; border-bottom: 2px dotted var(--ash); transform: translateY(-0.28em); }

/* A photograph: mono, dust at 18%, heavy vignette. Never rounded, never shadowed. */
.plate { position: relative; overflow: hidden; background: var(--char); }
.plate > img { width: 100%; height: 100%; object-fit: cover; }
.plate--letterbox { aspect-ratio: 2.39 / 1; }
.plate--portrait { aspect-ratio: 4 / 5; }
.plate--dust::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--dust-url) 0 0 / 512px 512px;
  opacity: var(--dust-opacity);
  pointer-events: none;
}
.plate--vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 35%, color-mix(in srgb, var(--ink) 60%, transparent) 100%);
  pointer-events: none;
}

/* Light through venetian blinds, with smoke hanging in it. Static: it is light, not a moving part.
   Put an empty <div class="blinds" aria-hidden="true"> inside a positioned parent. */
.blinds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.blinds::before {
  content: "";
  position: absolute;
  inset: -30% -20%;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bone) 13%, transparent) 0 0.9rem,
    transparent 0.9rem 1.15rem,
    transparent 1.15rem 2.9rem
  );
  transform: rotate(-17deg) skewX(-24deg);
  filter: blur(1.2px);
  -webkit-mask-image: radial-gradient(ellipse 46% 40% at 62% 46%, #000 0, #000 30%, transparent 72%);
  mask-image: radial-gradient(ellipse 46% 40% at 62% 46%, #000 0, #000 30%, transparent 72%);
}
.blinds::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.011' numOctaves='4' seed='47'/%3E%3CfeColorMatrix values='0 0 0 0 0.91 0 0 0 0 0.9 0 0 0 0 0.87 1.9 0 0 0 -0.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E") center / cover no-repeat;
  opacity: 0.22;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 60% 45%, #000 0, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 60% 45%, #000 0, transparent 75%);
}
.upstairs .blinds { display: none; }

/* ---- Chrome: header ---- */

.site-header, main, .site-footer { position: relative; z-index: var(--z-content); }

.site-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--s-5);
  row-gap: var(--s-2);
  padding: var(--s-4) var(--gutter);
  border-bottom: var(--rule-hair) solid var(--rule);
}

.site-header__name {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); /* neon text never under 24px */
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}

.site-nav ul { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--s-4); list-style: none; }
.site-nav a {
  display: inline-block;
  padding: 0.85rem 0 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.55em; }

/* The sign is the red light in this viewport, so the header button stays monochrome. */
.site-header__book {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.7em 1.2em 0.6em;
  border: var(--rule-hair) solid var(--rule);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--bone);
}
.site-header__book::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: var(--rule-hair) solid var(--bone);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) linear;
}
.site-header__book:hover::after, .site-header__book:focus-visible::after { opacity: 1; }

@media (max-width: 60rem) {
  .site-header { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: var(--s-3); padding-block: var(--s-3); }
  .site-nav { order: 3; flex: 1 0 100%; }
  .site-nav ul { justify-content: flex-start; column-gap: var(--s-3); }
  .site-nav a { letter-spacing: 0.16em; }
}
@media (max-width: 26rem) {
  .site-header .site-header__name { letter-spacing: 0.06em; }
  .site-header__book { min-height: 2.5rem; padding-inline: 0.8em; font-size: 0.6875rem; letter-spacing: 0.1em; }
  .site-nav ul { column-gap: 0.85rem; }
  .site-nav a { letter-spacing: 0.1em; }
}

/* ---- Chrome: footer (the CRD credit strip is wired in the last step) ---- */

.site-footer {
  padding: var(--s-6) var(--gutter) var(--s-5);
  border-top: var(--rule-hair) solid var(--rule);
  text-align: center;
}
.site-footer__mark {
  font-size: max(12px, var(--fs-micro));
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fog);
}
.site-footer__fictional { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--text-muted); }

/* ==========================================================================
   Motion layer. JS (motion.js) adds the classes; site.js sets
   data-motion="full|reduced" and data-tab="visible|hidden" on <html>.
   ========================================================================== */

/* ---- 1. Film-reel fade ---- */

@keyframes page-in { from { opacity: 0; } }

.js .reel { opacity: 0; transform: translateY(12px); }
.js .reel.is-in { animation: reel var(--dur-reel) var(--ease-film) var(--reel-delay, 0ms) both; }
.js .reel--img.is-in { animation: reel-img 1400ms var(--ease-film) var(--reel-delay, 0ms) both; }

@keyframes reel {
  0%   { opacity: 0; transform: translateY(12px); filter: brightness(1.6); }
  33%  { filter: brightness(1.15); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes reel-img {
  0%   { opacity: 0; transform: scale(1.04); filter: brightness(1.6); }
  22%  { filter: brightness(1.15); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}

/* Page to page: dip to black before leaving. */
.fx-dip {
  position: fixed;
  inset: 0;
  z-index: var(--z-dip);
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-dip-out) var(--ease-film);
}
.fx-dip.is-on { opacity: 1; }

/* ---- 2. Neon sign ----
   Without JS the sign is simply lit. With JS, the element is the unlit tube and
   ::after is the lit copy; only the opacity of ::after ever changes. */

.neon-sign {
  position: relative;
  font-family: var(--font-sign);
  font-weight: 400;
  letter-spacing: var(--track-sign);
  text-transform: uppercase;
  color: var(--neon-core);
  text-shadow: var(--glow-neon);
}
.neon-sign:hover { color: var(--neon-core); }

.neon-sign[data-lit] { color: var(--neon-off); text-shadow: none; }
.neon-sign[data-lit]::after {
  content: attr(data-lit);
  content: attr(data-lit) / "";
  position: absolute;
  inset: 0;
  padding: inherit;
  color: var(--neon-core);
  text-shadow: var(--glow-neon);
  opacity: 0;
  pointer-events: none;
}
.neon-sign.is-lit::after { opacity: 1; }
.neon-sign.is-igniting::after { animation: ignite var(--dur-ignite) steps(1, end) 1 both; }
.neon-sign.is-stutter::after { animation: stutter var(--dur-stutter) steps(1, end) 1; }

/* Three catches in the first 0.6s, then it holds. Never loops. */
@keyframes ignite {
  0%, 6%   { opacity: 0; }
  8%       { opacity: 1; }
  12%      { opacity: 0; }
  16%      { opacity: 1; }
  19%, 33% { opacity: 0; }
  36%, 100% { opacity: 1; }
}
@keyframes stutter {
  0%   { opacity: 0.4; }
  100% { opacity: 1; }
}

/* On light grounds the neon is a small solid red mark with no glow. */
.upstairs .neon-sign, .upstairs .neon-sign[data-lit] { color: var(--accent); text-shadow: none; }
.upstairs .neon-sign[data-lit]::after { content: none; }

/* ---- 3. Rain (one canvas per host, drawn in motion.js) ---- */

[data-rain] { position: relative; }
.fx-rain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Shell stand-ins, mounted in #fx only while <main> is empty. */
.fx-rain--page, .fx-blinds { position: fixed; z-index: 0; }

/* ---- 4. Film grain: the PNG tile over the whole page.
   Static by default (no JS, mobile, reduced motion). Desktop jumps the tile about nine times a second. */

body::after {
  content: "";
  position: fixed;
  inset: -128px;
  z-index: var(--z-grain);
  background: var(--grain-url) 0 0 / var(--grain-size) var(--grain-size);
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  pointer-events: none;
}

@media (min-width: 56.25rem) and (hover: hover) and (pointer: fine) {
  [data-grain="run"] body::after { animation: grain var(--grain-duration) steps(1, end) infinite; will-change: transform; }
}

/* Eight positions per cycle (--grain-steps), each held, none on the tile's own period. */
@keyframes grain {
  0%    { transform: translate(0, 0); }
  12.5% { transform: translate(-61px, 37px); }
  25%   { transform: translate(43px, -89px); }
  37.5% { transform: translate(-103px, -23px); }
  50%   { transform: translate(79px, 67px); }
  62.5% { transform: translate(-29px, 109px); }
  75%   { transform: translate(113px, -47px); }
  87.5% { transform: translate(-83px, -71px); }
}

/* ---- 5. Film-reel intro (built by motion.js, once per session, about 3.7s) ---- */

.intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  animation: intro-out 600ms var(--ease-film) 3.1s forwards;
}
.intro.is-leaving { animation: intro-out 200ms linear forwards; }

.intro__gate { display: grid; place-items: center; width: 100%; height: 100%; animation: intro-weave 0.48s steps(1, end) infinite; }
.intro__gate > * { grid-area: 1 / 1; }

.intro__leader {
  position: relative;
  display: grid;
  place-items: center;
  width: min(52vmin, 21rem);
  aspect-ratio: 1;
  animation: intro-cut 120ms linear 2.1s forwards;
}
.intro__leader > * { grid-area: 1 / 1; }

/* Crosshair through the gate, two rings, one sweeping hand. */
.intro__leader::before, .intro__leader::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--smoke); }
.intro__leader::before { width: 200vmax; height: 1px; transform: translate(-50%, -50%); }
.intro__leader::after { width: 1px; height: 200vmax; transform: translate(-50%, -50%); }

.intro__ring { width: 100%; height: 100%; border: 1px solid var(--fog); border-radius: 50%; }
.intro__ring--inner { width: 84%; height: 84%; border-color: var(--ash); }

.intro__hand {
  align-self: start;
  width: 2px;
  height: 50%;
  background: var(--bone);
  opacity: 0.7;
  transform-origin: 50% 100%;
  animation: intro-sweep 0.7s linear 3;
}

.intro__count {
  position: relative;
  z-index: 1;
  font-family: var(--font-display); /* Limelight */
  font-size: min(26vmin, 10.5rem);
  line-height: 1;
  color: var(--bone); /* #E9E6DF */
  opacity: 0;
  animation: intro-count 0.7s var(--ease-out) forwards;
}
.intro__count--2 { animation-delay: 0.7s; }
.intro__count--3 { animation-delay: 1.4s; }

.intro__title {
  padding-inline: var(--gutter);
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--track-sign);
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  animation: intro-burn 900ms var(--ease-film) 2.15s both;
}

.intro__scratch {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: var(--bone);
  opacity: 0;
  animation: intro-scratch 1.3s steps(1, end) infinite;
}
.intro__scratch--b { animation-duration: 0.9s; animation-delay: 0.35s; animation-direction: reverse; }

.intro__skip {
  position: absolute;
  right: var(--gutter);
  bottom: var(--gutter);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.7em 1.2em 0.6em;
  border: 1px solid var(--smoke);
  background: var(--ink);
  color: var(--bone);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
}
.intro__skip:hover { border-color: var(--bone); color: var(--white); }

@keyframes intro-out { to { opacity: 0; } }
@keyframes intro-cut { to { opacity: 0; } }
@keyframes intro-sweep { to { transform: rotate(360deg); } }
@keyframes intro-count {
  0%   { opacity: 0.6; transform: scale(1.06); }
  88%  { opacity: 0.6; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes intro-burn {
  0%   { opacity: 0; transform: scale(1.03); filter: brightness(2.4); }
  30%  { opacity: 1; filter: brightness(1.5); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes intro-weave {
  0%   { transform: translate(0, 0); }
  17%  { transform: translate(-1px, 2px); }
  33%  { transform: translate(1px, -1px); }
  50%  { transform: translate(0, 1px); }
  67%  { transform: translate(-2px, -1px); }
  83%  { transform: translate(1px, 1px); }
}
@keyframes intro-scratch {
  0%   { opacity: 0;    transform: translateX(22vw); }
  14%  { opacity: 0.28; transform: translateX(22vw); }
  22%  { opacity: 0;    transform: translateX(71vw); }
  47%  { opacity: 0.2;  transform: translateX(71.4vw); }
  55%  { opacity: 0.2;  transform: translateX(70.8vw); }
  61%  { opacity: 0;    transform: translateX(38vw); }
  86%  { opacity: 0.32; transform: translateX(38vw); }
  92%  { opacity: 0;    transform: translateX(38vw); }
}

/* ---- Pause on a hidden tab ---- */

[data-tab="hidden"] body::after,
[data-tab="hidden"] .neon-sign::after,
[data-tab="hidden"] .intro,
[data-tab="hidden"] .intro *,
[data-tab="hidden"] .intro *::before { animation-play-state: paused; }

/* ---- Reduced motion: static grain, no rain, no flicker (the sign is simply lit), no intro, instant fades ---- */

[data-motion="reduced"] body,
[data-motion="reduced"] body::after { animation: none; }
[data-motion="reduced"] .reel { opacity: 1; transform: none; animation: none; }
[data-motion="reduced"] .neon-sign::after { opacity: 1; animation: none; }
[data-motion="reduced"] .fx-rain, [data-motion="reduced"] .intro { display: none; }
[data-motion="reduced"] .fx-dip, [data-motion="reduced"] .btn::after, [data-motion="reduced"] .site-header__book::after { transition: none; }

@media (prefers-reduced-motion: reduce) {
  body, body::after { animation: none; }
  .js .reel, .js .reel.is-in { opacity: 1; transform: none; animation: none; }
  .neon-sign[data-lit]::after { opacity: 1; animation: none; }
  .fx-rain, .intro { display: none; }
  .fx-dip, .btn::after, .site-header__book::after { transition: none; }
}


/* ---- Hand reconcile (after step 2): Dante's logo system ---- */
.site-header__brand {
  display: block;
  line-height: 0;
  text-decoration: none;
}
.site-header__lockup {
  display: block;
  height: 42px;
  width: auto;
  min-width: 170px;
}
.site-header__mono { display: none; height: 36px; width: auto; }
/* Below the lockup's 170px minimum, use the monogram. */
@media (max-width: 36rem) {
  .site-header__lockup { display: none; }
  .site-header__mono { display: block; }
}

.sign-standin {
  display: flex;
  justify-content: center;
  padding: var(--s-7) var(--gutter) var(--s-4);
}
.sign-standin .blade-sign {
  display: block;
  height: clamp(110px, 36vh, 280px);
  width: auto;
}
.sign-standin .blade-mono { display: none; height: 72px; width: auto; }
/* Blade sign must not be shown under 110px tall. 110 / 0.36 ≈ 306px viewport height. */
@media (max-height: 305px) {
  .sign-standin .blade-sign { display: none; }
  .sign-standin .blade-mono { display: block; }
}

.site-footer__study,
.site-footer__photos {
  margin-top: var(--s-2);
  font-size: max(12px, var(--fs-micro));
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fog);
}
.site-footer__photos a { color: inherit; text-decoration: underline; text-underline-offset: 0.3em; }
.site-footer__photos a:hover { color: var(--fog); }