/* Abyssa — abyssa.app
 *
 * The app's own design language, carried onto paper: the page itself wears
 * the plate chrome — an outer rule, an inner hairline, corner register
 * marks — the four seas keep their own grounds, the light sweep crosses the
 * hero plate, and Still Unknown is set in Bodoni because that is the act the
 * app sets in the plate's own face.
 *
 * Values are lifted from Palette.swift, Typography.swift and Space.swift
 * rather than chosen again. No framework, no build step, no third-party
 * request of any kind — there is nothing here to consent to, which is why
 * there is no cookie banner.
 */

:root {
  --paper: #f4eee1;
  --sheet: #fbf7ee;
  --ink: #1c1811;
  --ink-soft: #5a5040;
  --teal: #0f6b7a;
  --coral: #b8492f;          /* the app's coral, held at 4.5:1 on this paper */
  --coral-soft: #d4634a;     /* the original hue, for rules and ornament only */
  --gold: #a87b33;
  --rule: rgba(28, 24, 17, .16);
  --rule-strong: rgba(28, 24, 17, .38);

  /* The four grounds of the descent, ivory to black. */
  --north: #f2eada;
  --coral-sea: #e6dac2;
  --south: #c9d3d2;
  --trench: #0b1418;
  --ink-on-dark: #e8e2d4;
  --ink-soft-on-dark: #b6b0a2;
  --teal-on-dark: #7fc4cf;
  --coral-on-dark: #e08a72;

  /* Space.swift — six gaps, and every space between two things is one. */
  --xs: 4px; --s: 8px; --m: 12px; --l: 20px; --xl: 32px; --xxl: 48px;
  --section: clamp(52px, 8vw, 96px);

  --measure: 38rem;
  --chrome: 12px;            /* how far the page's own rule sits from the glass */
}

@media (min-width: 48rem) { :root { --chrome: 20px; } }

@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* The survey rings behind the hero reach past the plate on purpose; nothing
 * may hand the page a horizontal scrollbar for it. */
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 19px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* The paper is lit, not flat: a window's light from above, a warm shadow
 * gathering at the foot. The app's ageing, at a whisper. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(130% 70% at 50% -6%, rgba(255, 255, 255, .55), transparent 58%),
    radial-gradient(120% 55% at 50% 106%, rgba(120, 96, 55, .10), transparent 68%);
}

/* The grain of the sheet, generated rather than fetched: an SVG turbulence
 * as a data URI, multiplied at a few per cent. This is what makes the ground
 * read as paper instead of a hex value. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05;
  mix-blend-mode: multiply;
}

::selection { background: var(--teal); color: var(--paper); }

/* ── the plate chrome ─────────────────────────────────────────────────────
 *
 * The app's signature: every screen is a plate, bounded by an outer rule, an
 * inner hairline and four corner register marks. The site wears the same
 * frame — fixed, faint, and never in the way.
 */
.chrome {
  position: fixed; inset: var(--chrome);
  z-index: 60; pointer-events: none;
  border: 1px solid var(--rule-strong);
  background-image:
    linear-gradient(var(--rule-strong), var(--rule-strong)),
    linear-gradient(var(--rule-strong), var(--rule-strong)),
    linear-gradient(var(--rule-strong), var(--rule-strong)),
    linear-gradient(var(--rule-strong), var(--rule-strong)),
    linear-gradient(var(--rule-strong), var(--rule-strong)),
    linear-gradient(var(--rule-strong), var(--rule-strong)),
    linear-gradient(var(--rule-strong), var(--rule-strong)),
    linear-gradient(var(--rule-strong), var(--rule-strong));
  background-repeat: no-repeat;
  background-size: 13px 1px, 1px 13px, 13px 1px, 1px 13px,
                   13px 1px, 1px 13px, 13px 1px, 1px 13px;
  background-position:
    top 5px left 5px,  top 5px left 5px,
    top 5px right 5px, top 5px right 5px,
    bottom 5px left 5px,  bottom 5px left 5px,
    bottom 5px right 5px, bottom 5px right 5px;
}
.chrome::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid var(--rule);
}

main, header, footer { position: relative; z-index: 1; }

/* ── type ─────────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: "Bodoni Moda", Georgia, "Times New Roman", serif;
  font-weight: 400; line-height: 1.1; margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(3.1rem, 9.5vw, 6rem); letter-spacing: -0.01em; }
h1 em { font-style: italic; }
h2 { font-size: clamp(2rem, 5vw, 3.1rem); }
h3 { font-size: 1.4rem; }

p { margin: 0 0 var(--l); max-width: var(--measure); }

a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }

.wrap { width: 100%; max-width: 64rem; margin-inline: auto;
        padding-inline: clamp(var(--l), 5vw, var(--xxl)); }
.column { max-width: var(--measure); }

/* Only the page's own top-level movements get the big vertical breath — a
 * <section> inside a text column (the FAQ entries) must not inherit it,
 * which is exactly what made the support page gape. */
main > section { padding-block: var(--section); }

.overline {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: var(--l);
}
.overline::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 30px; height: 1px; background: currentColor; opacity: .55;
  margin-right: var(--m); transform: translateY(-1px);
}

/* A rule with the app's fleuron riding on it. */
.fleuron {
  display: flex; align-items: center; gap: var(--m);
  color: rgba(28, 24, 17, .36); margin-bottom: var(--l);
}
.fleuron::before, .fleuron::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
.fleuron span { font-size: .66rem; transform: rotate(45deg); }

/* ── the masthead ─────────────────────────────────────────────────────── */

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;                     /* a phone puts the nav on its own line */
  gap: var(--m) var(--l);
  padding-block: calc(var(--chrome) + var(--l)) var(--l);
}
.masthead .mark {
  display: flex; align-items: center; gap: var(--m);
  font-family: "Bodoni Moda", Georgia, serif; font-size: 1.35rem;
  color: var(--ink); text-decoration: none; letter-spacing: .01em;
}
.masthead .mark img { width: 34px; height: 34px; border-radius: 8px; }
.masthead nav { display: flex; gap: var(--l); font-size: .78rem;
                letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 30rem) {
  .masthead nav { width: 100%; gap: var(--l); font-size: .72rem; }
}
.masthead nav a { color: var(--ink-soft); text-decoration: none; }
.masthead nav a:hover { color: var(--ink); text-decoration: underline; }

/* ── 1 · the hero ─────────────────────────────────────────────────────── */

.hero {
  min-height: min(88svh, 860px);
  display: grid; align-content: center; gap: var(--xxl);
  padding-block: var(--l) var(--section);
}
@media (min-width: 60rem) {
  .hero { grid-template-columns: 1.02fr .98fr;
          align-items: center; gap: clamp(var(--xxl), 7vw, 110px); }
}

.hero h1 { margin-bottom: var(--l); }
.hero .pitch {
  font-family: "Bodoni Moda", Georgia, serif; font-style: italic;
  font-size: 1.3rem; color: var(--ink-soft); max-width: 26rem;
  line-height: 1.5;
}

/* The plate stands on the desk with a dashed survey ring behind it — the
 * cover's own ornament. */
.hero-art { position: relative; margin: 0; }
.hero-art::before {
  content: ""; position: absolute; z-index: -1;
  width: 116%; aspect-ratio: 1; border: 1px dashed rgba(28, 24, 17, .22);
  border-radius: 50%; top: -8%; right: -22%;
}
.hero-art::after {
  content: ""; position: absolute; z-index: -1;
  width: 42%; aspect-ratio: 1; border: 1px dashed rgba(28, 24, 17, .16);
  border-radius: 50%; bottom: -10%; left: -12%;
}

/* A sheet: paper margin, printed rule, the picture inset into it. */
.sheet {
  position: relative;
  background: var(--sheet);
  padding: clamp(14px, 3.2vw, 26px);
  border: 1px solid var(--rule-strong);
  box-shadow:
    0 1px 2px rgba(28, 24, 17, .08),
    0 24px 60px rgba(28, 24, 17, .18);
  overflow: hidden;
  isolation: isolate;
}
.sheet > picture img, .sheet > img { border: 1px solid var(--rule); }

/* **The one effect on the site.** LightSweep.swift: a soft band, its pale
 * gold trailing the white core, crossing once every six seconds. */
.sheet::after {
  content: ""; position: absolute; inset: -20%; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(212, 176, 108, .10) 45%,
    rgba(255, 255, 255, .26) 50%,
    transparent 62%);
  transform: translate3d(-130%, 0, 0);
  animation: sweep 6s cubic-bezier(.25, .1, .25, 1) infinite;
  mix-blend-mode: plus-lighter;
}
@keyframes sweep {
  0% { transform: translate3d(-130%, 0, 0); }
  30% { transform: translate3d(130%, 0, 0); }
  100% { transform: translate3d(130%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sheet::after { animation: none; opacity: .45; transform: translate3d(-12%, 0, 0); }
}

.hero-art figcaption, figcaption {
  margin-top: var(--m); text-align: center;
  font-family: "Bodoni Moda", Georgia, serif; font-style: italic;
  color: var(--ink-soft); font-size: .98rem;
}

/* ── the App Store line ───────────────────────────────────────────────── */

/* The app's `primary`: filled with ink, label in the paper colour, radius
 * 26 — the one thing a screen is for. */
.store-pill {
  display: inline-flex; align-items: center;
  padding: 16px 30px; border-radius: 28px;
  background: var(--ink); color: var(--paper);
  font-size: .86rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  margin-block: var(--l) var(--m);
}
a.store-pill:hover { background: #2c261a; color: var(--paper); }

/* The `secondary`, kept for downloads on the press page: transparent with a
 * line round it, never lesser. */
.badge--waiting {
  display: inline-flex; align-items: center;
  padding: 15px 26px; border: 1px solid var(--rule-strong); border-radius: 28px;
  color: var(--ink); font-size: .88rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none;
  margin-block: var(--l) var(--m);
}
a.badge--waiting:hover { background: var(--ink); color: var(--paper); }

.free { color: var(--ink-soft); font-size: .96rem; margin: 0; }

/* ── 2 · the idea, three numbered blocks ──────────────────────────────── */

.idea { display: grid; gap: clamp(var(--xxl), 7vw, 84px); }

.block { display: grid; gap: var(--xl); align-items: center; }
@media (min-width: 54rem) {
  .block { grid-template-columns: 1fr 19rem; gap: clamp(var(--xl), 7vw, 96px); }
  .block:nth-child(even) > figure { order: -1; }
}

/* The digit sits on a drawn badge — NumberBadge, not an icon. Digits,
 * because every number the player reads is set in digits. */
.step {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--rule-strong);
  outline: 1px solid var(--rule); outline-offset: 3px;
  font-family: "Bodoni Moda", Georgia, serif; font-size: 1.15rem;
  margin-bottom: var(--l); color: var(--ink);
}
.block h2 { margin-bottom: var(--l); }
.block p { color: var(--ink-soft); font-size: 1.08rem; }
.block figure { margin: 0; }
.block figure img {
  border-radius: clamp(18px, 4vw, 30px);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 44px rgba(28, 24, 17, .16);
}

/* ── 3 · the proof: three plates on their own desks ───────────────────── */

.proof > .column { margin-bottom: var(--xxl); }

/* **Rows, not columns.** Three cards side by side left the Bodoni quotes in
 * shafts two words wide; a plate with its open question is a spread, and it
 * gets one — image beside text, each on its sea's own desk, stacked like
 * sheets in a portfolio. */
.proof-cards {
  display: grid; gap: var(--l);
  margin: 0; padding: 0; list-style: none;
}

.desk {
  padding: clamp(var(--l), 5vw, 56px);
  display: grid; gap: var(--xl); align-content: start;
}
@media (min-width: 52rem) {
  .desk {
    grid-template-columns: minmax(220px, 300px) 1fr;
    align-items: center;
    gap: clamp(var(--xl), 6vw, 72px);
  }
}
.desk > div { max-width: 36rem; }
.desk--north { background: var(--north); }
.desk--trench { background: var(--trench); color: var(--ink-on-dark); }

.desk .sheet { box-shadow: 0 14px 34px rgba(28, 24, 17, .22); }
.desk--trench .sheet { background: #10171a; border-color: rgba(232, 226, 212, .28); }
.desk--trench .sheet > picture img { border-color: rgba(232, 226, 212, .16); }
.desk--trench .sheet::after { mix-blend-mode: screen; }
.proof-cards li:nth-child(1) .sheet::after { animation-delay: 1.2s; }
.proof-cards li:nth-child(2) .sheet::after { animation-delay: 3.2s; }
.proof-cards li:nth-child(3) .sheet::after { animation-delay: 5.2s; }

.desk .binomial {
  font-family: "Bodoni Moda", Georgia, serif; font-style: italic;
  font-size: clamp(1.7rem, 3.4vw, 2.2rem); margin: 0; line-height: 1.12;
}
.desk .common {
  font-size: .72rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--teal); margin: var(--s) 0 0;
}
.desk--trench .common { color: var(--teal-on-dark); }
.desk .label {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--coral); margin: var(--l) 0 var(--s);
}
.desk--trench .label { color: var(--coral-on-dark); }

/* Still Unknown is set in Bodoni — it is the act the app sets in the
 * plate's own face. */
.desk blockquote {
  margin: 0;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 1.12rem; line-height: 1.7;
}
.desk--trench blockquote { color: var(--ink-on-dark); }

/* ── 4 · the descent, four grounds darkening ──────────────────────────── */

.seas {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--m);
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 44rem) { .seas { grid-template-columns: repeat(4, 1fr); gap: var(--l); } }

.sea {
  padding: var(--l); display: grid; gap: var(--m); align-content: start;
  border: 1px solid var(--rule);
}
.sea img { border: 1px solid rgba(28, 24, 17, .2); }
.sea h3 { font-size: clamp(1rem, 2vw, 1.2rem); }
.sea .depth {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0;
}
.sea--north { background: var(--north); }
.sea--coral { background: var(--coral-sea); }
.sea--south { background: var(--south); }
.sea--trench { background: var(--trench); color: var(--ink-on-dark); }
.sea--trench img { border-color: rgba(232, 226, 212, .2); }
.sea--trench .depth { color: var(--ink-soft-on-dark); }

/* ── 5 · what it is, plainly ──────────────────────────────────────────── */

.plainly { margin: 0; padding: 0; list-style: none; max-width: var(--measure); }
.plainly li { padding: var(--m) 0; border-bottom: 1px solid var(--rule); }
.plainly li:last-child { border-bottom: 0; }

/* ── 6 · the disclosure ───────────────────────────────────────────────── */

.disclosure p {
  border-left: 2px solid var(--coral-soft);
  padding-left: var(--l); color: var(--ink-soft);
}

/* ── 7 · closing ──────────────────────────────────────────────────────── */

.closing { text-align: center; }
.closing .column { margin-inline: auto; }
.closing h2 { margin-bottom: var(--l); }
.closing .fleuron { max-width: 20rem; margin-inline: auto; }

/* ── 8 · the foot ─────────────────────────────────────────────────────── */

footer {
  margin-top: var(--section);
  padding-block: var(--l) calc(var(--chrome) + var(--l));
  color: var(--ink-soft); font-size: .88rem;
}
.footline {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--m) var(--l);
  border-top: 1px solid var(--rule);
  padding-top: var(--l);
}
.foot-mark {
  font-family: "Bodoni Moda", Georgia, serif; font-size: 1.15rem;
  color: var(--ink); text-decoration: none;
}
footer nav {
  display: flex; flex-wrap: wrap;
  gap: var(--l);
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
}
footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
.foot-name { margin: var(--s) 0 0; font-size: .8rem; color: var(--ink-soft); }

/* ── the arrival — polish only, and absent without JavaScript ─────────── */

.rise { opacity: 1; }
.js .rise { opacity: 0; transform: translateY(16px);
            transition: opacity .7s ease, transform .7s ease; }
.js .rise.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; transition: none; }
}

/* ── the legal and support pages: read, not admired ───────────────────── */

.legal { max-width: 36rem; }
.legal h1 { font-size: clamp(2.3rem, 6vw, 3.2rem); margin-bottom: var(--s); }
/* The page's head is set like a plate's: title, its overline beneath, and a
 * rule with the fleuron before the text begins. */
.legal .overline { margin-bottom: 0; }
.legal .overline + *,
.legal h1 + .overline {
  margin-top: 0;
}
.legal .overline::after {
  content: ""; display: block; height: 1px;
  background: var(--rule); margin-top: var(--xl);
}
.legal h2 { font-size: 1.3rem; margin: var(--xxl) 0 var(--m); }
.legal p, .legal ul { font-size: 1.02rem; line-height: 1.7; }
.legal hr { border: 0; border-top: 1px solid var(--rule); margin: var(--xxl) 0 var(--xl); }

.page { padding-block: var(--xl) var(--section); }
.page ul { padding-left: 1.2em; }
.page li { margin-bottom: var(--s); }
.note { border-left: 2px solid var(--coral-soft); padding-left: var(--l); color: var(--ink-soft); }

/* The FAQ reads as entries in a ledger: a hairline above each, the question
 * in the plate's face, the answer in the soft ink. */
.faq { border-top: 1px solid var(--rule); padding: var(--l) 0 0; margin-top: var(--xl); }
.faq h2 { font-size: 1.35rem; margin: 0 0 var(--s); }
.faq p { color: var(--ink-soft); margin-bottom: var(--s); }
.contact { font-size: 1.1rem; }

dl.facts { margin: 0; max-width: var(--measure); }
dl.facts div {
  display: grid; grid-template-columns: 11rem 1fr; gap: var(--m);
  padding: var(--s) 0; border-bottom: 1px solid var(--rule);
}
dl.facts dt {
  color: var(--ink-soft); font-size: .72rem;
  letter-spacing: .09em; text-transform: uppercase; padding-top: 5px;
}
dl.facts dd { margin: 0; }
@media (max-width: 36rem) { dl.facts div { grid-template-columns: 1fr; gap: 2px; } }

.desc { border-left: 2px solid var(--rule); padding-left: var(--l); margin-bottom: var(--l); }
.desc h3 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
           color: var(--ink-soft); font-family: inherit; margin-bottom: var(--s); }
.desc p { margin: 0; }

.dims { color: var(--ink-soft); font-size: .82rem; letter-spacing: .04em; }

.assets { list-style: none; margin: var(--l) 0 0; padding: 0; }
.assets li {
  display: grid; gap: 2px var(--m); align-items: baseline;
  padding: var(--m) 0; border-bottom: 1px solid var(--rule);
}
@media (min-width: 34rem) { .assets li { grid-template-columns: 1fr auto auto; gap: var(--l); } }
.assets a { font-size: 1rem; }
.assets span:nth-of-type(1) { color: var(--ink-soft); font-size: .9rem; }

/* A fact the site cannot supply, marked so it cannot be published by
 * accident — held at 4.5:1, which the app's own ink tests would demand. */
.owed { color: #b8492f; font-weight: 600; }

/* ── the room answers ─────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161b1e;
    --sheet: #10171a;
    --ink: #f0ede6;
    --ink-soft: #c3beb4;
    --teal: #7fc4cf;
    --coral: #e08a72;
    --rule: rgba(240, 237, 230, .15);
    --rule-strong: rgba(240, 237, 230, .34);
  }
  body::before {
    background:
      radial-gradient(130% 70% at 50% -6%, rgba(255, 255, 255, .06), transparent 58%);
  }
  .fleuron { color: rgba(240, 237, 230, .3); }
  .hero-art::before, .hero-art::after { border-color: rgba(240, 237, 230, .2); }
  .sheet { box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
  .sheet::after { mix-blend-mode: screen; }
  a.badge--waiting:hover { background: var(--ink); color: #10171a; }
  .sea--north { background: #1b2124; }
  .sea--coral { background: #241f1a; color: var(--ink-on-dark); }
  .sea--south { background: #182022; color: var(--ink-on-dark); }
  .sea--north img, .sea--coral img, .sea--south img { border-color: rgba(240, 237, 230, .16); }
  .sea--north .depth, .sea--coral .depth, .sea--south .depth { color: var(--ink-soft-on-dark); }
  .desk--north { background: #1b2124; color: var(--ink-on-dark); }
  .desk--north .sheet { background: #10171a; border-color: rgba(232, 226, 212, .28); }
  .desk--north .common { color: var(--teal-on-dark); }
  .desk--north .label { color: var(--coral-on-dark); }
  .block figure img, .sheet > picture img { border-color: rgba(240, 237, 230, .14); }
  .owed { color: #e08a72; }
  body::after { opacity: .07; mix-blend-mode: screen; }
  a.store-pill:hover { background: #ffffff; color: #10171a; }
}