/* a.dria.no
   Type: Libre Franklin for display, Newsreader for reading, Fragment Mono for
   metadata. All three are SIL Open Font License; the licenses sit beside the
   files in /fonts/. Color: a neutral paper, near-black ink, graphite sampled
   from the portrait's own wall, and one red. */

@font-face {
  font-family: "Libre Franklin";
  src: url("/fonts/LibreFranklin-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/Newsreader-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/Newsreader-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("/fonts/FragmentMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #EFEEEA;
  --paper-2: #E6E4DE;
  --ink: #141312;
  --ink-2: #2A2826;
  --muted: #5C5955;
  --rule: #D3D0C8;
  --signal: #C2211A;
  --on-signal: #fff;

  --graphite: #171615;
  --graphite-2: #1E1D1B;
  --bone: #ECE8E1;
  --bone-2: #A39E95;
  --line: #2E2C29;
  --signal-bright: #FF4A3D;

  --display: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --text: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4.4vw, 64px);
  --bar-pad: clamp(18px, 2.4vw, 32px);
  --max: 1360px;
  --space: clamp(72px, 9vw, 152px);
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1.125rem, 1.07rem + 0.25vw, 1.3125rem);
  --step-1: clamp(1.375rem, 1.18rem + 0.85vw, 1.875rem);
  --step-2: clamp(2.375rem, 1.6rem + 3.4vw, 4.75rem);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1C1B19;
    --paper-2: #232220;
    --ink: #ECE8E1;
    --ink-2: #D9D4CB;
    --muted: #A39E95;
    --rule: #34312E;
    --signal: #FF4A3D;
    /* white on #FF4A3D is 3.3:1; graphite on it is 5.4:1 */
    --on-signal: var(--graphite);
  }
  /* Dark paper sits at 1.05:1 against graphite, so a hairline marks where the
     hero ends and the footer begins. */
  .hero { border-bottom: 1px solid var(--line); }
  .foot { border-top: 1px solid var(--line); }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--graphite);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--step-0);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
cite { font-style: italic; }
button { font: inherit; color: inherit; }

::selection { background: var(--signal); color: var(--on-signal); }

a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

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

/* Hidden above the page until it takes focus. Focused, it sits under the bar,
   clear of the wordmark. Its top adds the bar's padding twice, the wordmark's
   0.9375rem line, the wordmark's 12px of padding and a 12px gap. */
.skip {
  position: absolute;
  left: var(--gutter);
  top: calc(2 * var(--bar-pad) + 0.9375rem + 24px);
  z-index: 10;
  padding: 10px 14px;
  background: var(--bone);
  color: var(--graphite);
  font: 400 0.875rem/1 var(--mono);
  text-decoration: none;
  transform: translateY(calc(-100% - 160px));
}
.skip:focus { transform: none; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

/* ---------- Top bar, laid over the hero ---------- */

.bar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  color: var(--bone);
}
.bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: var(--bar-pad);
}
.mark {
  font: 400 0.9375rem/1 var(--mono);
  letter-spacing: 0.01em;
  text-decoration: none;
  padding-block: 6px;
}
.dot { color: var(--signal-bright); }
.nav ul { display: flex; gap: clamp(16px, 2.2vw, 36px); }
.nav a {
  font: 400 var(--step--1)/1 var(--mono);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--bone);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nav a:hover { border-bottom-color: var(--signal-bright); }
.nav-wide { display: none; }
@media (min-width: 52em) { .nav-wide { display: list-item; } }

.bar :focus-visible, .hero :focus-visible, .foot :focus-visible {
  outline-color: var(--signal-bright);
}

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

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--graphite);
  color: var(--bone);
}
/* The wall in the portrait is slatted; on wide screens, where the portrait
   fills the band's full height, carry its rhythm across the rest of the band. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-photo {
  position: relative;
  z-index: -1;
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--graphite) 0, rgba(23, 22, 21, 0.86) 14%, rgba(23, 22, 21, 0) 46%);
}
.hero-inner {
  position: relative;
  margin-top: -27vw;
  padding-bottom: clamp(56px, 8vw, 112px);
}
.kicker {
  font: 400 var(--step--1)/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-2);
  margin-bottom: clamp(16px, 2vw, 28px);
}
.slash { color: var(--signal-bright); padding-inline: 0.2em; }
/* Below 64em the kicker sits on the photo, over the neck and collar. Full bone
   keeps every pixel behind it at 4.5:1 or better; bone-2 fell to 2.2:1. */
@media (width < 64em) {
  .hero .kicker { color: var(--bone); }
}
.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.5rem, 18.6vw, 11.25rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  margin-left: -0.04em;
}
.hero h1 span { display: block; }
.dek {
  font-family: var(--text);
  font-size: var(--step-1);
  line-height: 1.32;
  color: #DCD7CE;
  max-width: 27em;
  margin-top: clamp(24px, 3vw, 44px);
  text-wrap: pretty;
}
.profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: clamp(28px, 3vw, 40px);
}
.profiles a {
  position: relative;
  display: inline-block;
  min-width: 24px;
  text-align: center;
  font: 400 0.9375rem/1 var(--mono);
  letter-spacing: 0.02em;
  text-decoration: none;
  padding-block: 8px 7px;
  border-bottom: 1px solid var(--signal-bright);
  transition: color 0.2s ease;
}
.profiles a:hover { color: var(--signal-bright); }
.profiles a::after { content: ""; position: absolute; inset: -4px -10px; }

@media (min-width: 64em) {
  .hero {
    min-height: clamp(700px, 92vh, 920px);
    display: flex;
    align-items: flex-end;
  }
  .hero::before {
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 13px);
  }
  /* The box takes the portrait's own 4:5 from the band height, so cover-fit
     never crops the top of his head. When the width cap binds, as on a 1280 by
     800 screen, only the sides are cropped. More comes off the right, so the
     savings.club logo on the left stays clear of the fade. */
  .hero-photo {
    position: absolute;
    top: 0; right: 0; bottom: auto;
    height: 100%;
    width: auto;
    aspect-ratio: 4 / 5;
    max-width: min(48vw, 780px);
  }
  .hero-photo img { object-position: 30% 0; }
  /* A short fade that softens the edge and leaves the savings.club logo whole */
  .hero-photo::after {
    background: linear-gradient(90deg, var(--graphite) 0, rgba(23, 22, 21, 0.62) 5%, rgba(23, 22, 21, 0) 18%);
  }
  .hero-inner {
    margin-top: 0;
    padding-top: 168px;
    padding-bottom: clamp(72px, 8vw, 120px);
  }
  .hero-text { max-width: 60vw; }
  .hero h1 { font-size: clamp(7rem, 11.6vw, 11.25rem); }
  /* the dek stops where the portrait starts; only the name may cross it */
  .hero .dek {
    max-width: min(27em, 100vw - min(48vw, 780px) - max(var(--gutter), (100vw - var(--max)) / 2) - 24px);
  }
}

/* Tablets: the portrait stays on top, capped and centered, so the kicker and
   the name land on the shirt at every width from 640 to 1023. */
@media (40em <= width < 64em) {
  .hero-photo {
    aspect-ratio: auto;
    height: min(84vw, 620px);
    width: min(100%, 560px);
    margin-inline: auto;
  }
  .hero-photo img { object-position: 50% 0; }
  .hero-photo::after {
    background:
      linear-gradient(90deg, var(--graphite) 0, rgba(23, 22, 21, 0) 22%, rgba(23, 22, 21, 0) 78%, var(--graphite) 100%),
      linear-gradient(0deg, var(--graphite) 0, rgba(23, 22, 21, 0.86) 14%, rgba(23, 22, 21, 0) 46%);
  }
  .hero-inner { margin-top: -96px; }
}

/* ---------- Sections ---------- */

.section {
  padding-block: var(--space);
  border-top: 1px solid var(--rule);
}
.hero + .section { border-top: 0; }

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 20px;
}
.label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font: 400 var(--step--1)/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.num {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0;
  color: var(--signal);
}
.body { min-width: 0; }

h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--step-2);
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.role {
  margin-top: 14px;
  font: 400 var(--step--1)/1.4 var(--mono);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.lead {
  font-size: var(--step-1);
  line-height: 1.32;
  margin-top: clamp(24px, 3vw, 40px);
  max-width: 30em;
  text-wrap: pretty;
}
.body > p:not(.lead):not(.role):not(.cta),
.cols p {
  margin-top: 1.1em;
  max-width: 34em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.cols { margin-top: 0.4em; }

.lead-first { margin-top: 0; }
.nowrap { white-space: nowrap; }

/* 01: how the club works, in three steps */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: clamp(32px, 4vw, 56px);
  counter-reset: none;
}
.steps li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  padding-block: 18px 20px;
  border-top: 1px solid var(--ink);
}
.step-n {
  font: 800 1.0625rem/1 var(--display);
  color: var(--signal);
}
.steps p { color: var(--ink); text-wrap: pretty; }
/* Three columns from 80em. Below that width a column holds about 25 characters
   a line. The longest step then runs to eight lines, so the steps stay in rows. */
@media (min-width: 80em) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(20px, 3vw, 44px);
  }
  .steps li {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    row-gap: 14px;
    padding-block: 18px 0;
  }
}

.cta { margin-top: clamp(28px, 3vw, 44px); }
.cta a, .links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 1.0625rem/1.2 var(--display);
  letter-spacing: -0.005em;
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid var(--signal);
  transition: color 0.2s ease;
}
.cta a { overflow-wrap: anywhere; }
.cta a:hover, .links a:hover { color: var(--signal); }
.arrow {
  width: 0.85em;
  height: 0.85em;
  flex: none;
  transition: transform 0.2s ease;
}
a:hover .arrow { transform: translate(2px, -2px); }

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  margin-top: clamp(28px, 3vw, 44px);
}

@media (min-width: 64em) {
  .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(20px, 2vw, 32px);
  }
  .label {
    grid-column: 1 / span 3;
    align-self: start;
    position: sticky;
    top: 32px;
    padding-top: 0.9em;
  }
  .body { grid-column: 4 / span 7; }
  .body-wide { grid-column: 4 / span 9; }
  .cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 48px);
  }
  .cols p { max-width: none; }
}

/* ---------- 02 Zenmap ---------- */

.figure {
  margin-top: 36px;
  color: var(--ink);
  max-width: 420px;
}
.topo { width: 100%; height: auto; }
.topo-rings circle {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.22;
  stroke-width: 0.8;
  stroke-dasharray: 2 4;
}
.topo-edges line {
  stroke: currentColor;
  stroke-opacity: 0.45;
  stroke-width: 0.9;
}
.topo-nodes circle { fill: currentColor; }
.topo-nodes circle.hot { fill: var(--signal); }
.topo-hub circle { fill: var(--signal); }
.topo-hub circle.halo {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.2;
}
.figure figcaption {
  margin-top: 14px;
  font: 400 0.8125rem/1.4 var(--mono);
  letter-spacing: 0.02em;
  color: var(--muted);
  text-wrap: balance;
}
@media (min-width: 64em) {
  .section-zenmap .body { grid-column: 4 / span 5; }
  .figure {
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
    align-self: center;
    margin-top: 0;
    max-width: none;
  }
}

/* ---------- 03 Record ---------- */

.sub {
  margin-top: clamp(48px, 5vw, 72px);
  font: 400 var(--step--1)/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.records { margin-top: 18px; border-bottom: 1px solid var(--rule); }
.rec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding-block: 22px;
  border-top: 1px solid var(--rule);
}
.rec-id {
  font: 400 1rem/1.4 var(--mono);
  letter-spacing: 0.01em;
}
.rec-id cite { font-family: var(--text); font-size: 1.1875rem; line-height: 1.3; }
.rec-title {
  font-size: var(--step-0);
  line-height: 1.38;
  text-wrap: pretty;
}
.rec-meta {
  margin-top: 4px;
  font: 400 var(--step--1)/1.5 var(--mono);
  color: var(--muted);
  text-wrap: pretty;
}
.rec-note {
  margin-top: 8px;
  color: var(--ink-2);
  font-style: italic;
  text-wrap: pretty;
}
.rec-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 0.9375rem/1.2 var(--display);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 1px solid var(--signal);
  transition: color 0.2s ease;
}
.rec-link a:hover { color: var(--signal); }
.rec-link { margin-top: 6px; }

@media (min-width: 48em) {
  .rec {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
    column-gap: clamp(20px, 3vw, 48px);
    align-items: baseline;
  }
  .rec-link { margin-top: 0; justify-self: end; }
}
/* From 1024 to 1279 the ledger sits in 9 of 12 columns. Its wide gaps squeezed
   the titles into four lines, so the gaps tighten here. The ID column keeps its
   15rem, the width "BS, Information Systems" needs on one line. */
@media (64em <= width < 80em) {
  .rec { column-gap: 20px; }
}

/* ---------- 04 Book ---------- */

.section-book {
  background: var(--paper-2);
  border-top: 0;
}
.section-book + .section { border-top: 0; }
.book-title {
  font-family: var(--text);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.5rem, 1.5rem + 4.2vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.book-title cite { font-style: italic; }

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

.handles { margin-top: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--rule); }
.handles a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-block: clamp(14px, 1.6vw, 22px);
  border-top: 1px solid var(--rule);
  text-decoration: none;
  transition: color 0.2s ease;
}
.h-name {
  font: 800 clamp(2rem, 1.2rem + 3.6vw, 4.25rem)/1 var(--display);
  letter-spacing: -0.035em;
}
/* the handle and its arrow travel together, so a narrow row wraps them as a pair */
.h-end {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.h-id {
  font: 400 var(--step--1)/1.2 var(--mono);
  color: var(--muted);
  transition: color 0.2s ease;
}
.handles .arrow { width: 1.1rem; height: 1.1rem; color: var(--signal); }
.handles a:hover { color: var(--signal); }
.handles a:hover .h-id { color: var(--signal); }

.bio {
  margin-top: clamp(48px, 6vw, 88px);
  padding: clamp(22px, 3vw, 40px);
  background: var(--paper-2);
  border-left: 3px solid var(--signal);
}
.bio-h {
  font: 400 var(--step--1)/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.bio p#bio-text {
  margin-top: 16px;
  max-width: 40em;
  text-wrap: pretty;
}
/* The button never shrinks. The message wraps beside it. "Copied." fits on one
   line at every width, so a tap does not move the page. Where there is no room
   beside the button, the message drops under it. */
.bio-actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-height: 2.5rem;
}
.copy {
  flex: none;
  white-space: nowrap;
  font: 400 0.875rem/1 var(--mono);
  letter-spacing: 0.04em;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.copy:hover { background: var(--signal); color: var(--on-signal); }
.copy-status {
  flex: 1 1 12ch;
  min-width: 0;
  font: 400 0.875rem/1.4 var(--mono);
  color: var(--muted);
}

/* ---------- Footer ---------- */

.foot {
  background: var(--graphite);
  color: var(--bone);
  padding-block: clamp(56px, 7vw, 104px) clamp(28px, 3vw, 40px);
  overflow: hidden;
}
/* Sized so the ink of "a.dria.no" spans the measure. The word is 3.69em wide.
   The margin cancels the left side bearing of the "a". */
.foot-mark {
  font-family: var(--display);
  font-weight: 800;
  font-size: calc(min(100vw - 2 * var(--gutter), var(--max)) / 3.69);
  line-height: 0.82;
  letter-spacing: -0.055em;
  margin-left: -0.0165em;
  white-space: nowrap;
}
.foot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 32px;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font: 400 0.875rem/1.4 var(--mono);
  color: var(--bone-2);
}
.foot-meta p:last-child { margin-left: auto; }
.foot-meta a {
  display: inline-block;
  padding-block: 4px 2px;
  text-decoration: none;
  border-bottom: 1px solid var(--signal-bright);
  color: var(--bone);
}
.foot-meta a:hover { color: var(--signal-bright); }

/* ---------- 404 ---------- */

.lost {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--graphite);
  color: var(--bone);
  position: relative;
  isolation: isolate;
}
.lost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 13px);
}
.lost-inner { padding-block: 140px clamp(56px, 9vw, 120px); }
.lost h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3rem, 1.6rem + 7vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  max-width: 12ch;
  text-wrap: balance;
}
.lost .dek { max-width: 26em; }
.lost .cta a { border-bottom-color: var(--signal-bright); }
.lost .cta a:hover { color: var(--signal-bright); }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  a:hover .arrow { transform: none; }
}

/* Paper is white whatever the screen's color scheme, so print resets the
   tokens and every color the dark band sets by hand. */
@media print {
  :root {
    --paper: #fff;
    --paper-2: #fff;
    --ink: #000;
    --ink-2: #222;
    --muted: #555;
    --rule: #ccc;
    --signal: #C2211A;
    --on-signal: #fff;
  }
  .bar, .skip, .bio-actions, .figure { display: none; }
  .hero, .foot, .lost { background: none; color: #000; border: 0; }
  .hero, .lost { display: block; min-height: 0; }
  .hero::before, .hero-photo::after, .lost::before { display: none; }
  .hero .dek, .hero .kicker, .kicker, .foot-meta, .foot-meta a { color: #000; }
  .foot-meta a { border-bottom-color: #000; }
  .hero-photo {
    position: relative;
    inset: auto;
    width: 40%;
    height: auto;
    max-width: none;
    aspect-ratio: 4 / 5;
    margin-inline: 0;
  }
  .hero-inner { margin-top: 24px; }
  body { background: #fff; color: #000; }
}