/* Memorio Studio — dark authoritative hero, serif display, alternating bands.
   System fonts only. No build step, no JavaScript, no third-party requests. */
:root {
  --night:    #121417;
  --night-2:  #191c21;
  --night-3:  #21252b;
  --night-ln: #2c313a;
  --on-night: #f2f4f7;
  --on-night-dim: #a7b0bd;

  --paper:   #ffffff;
  --paper-2: #f5f6f8;
  --rule:    #e4e7ec;
  --ink:     #12151a;
  --body:    #464e59;
  --muted:   #5a626d;

  --steel:      #2d5ce0;
  --steel-soft: #8fb0ff;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
/* The canvas behind the page, which is what overscroll reveals. Both ends of
   every page are dark (topbar, footer), so a white canvas shows as a white bar
   above the wordmark the moment the page is pulled down on a phone. Giving html
   its own background makes IT the propagated canvas colour; body's paper still
   paints the body box, which is everything between the two dark ends. */
html { -webkit-text-size-adjust: 100%; background: var(--night); }
body { margin: 0; background: var(--paper); color: var(--body); font: 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 70rem; margin: 0 auto; padding: 0 2rem; }

/* ── Top bar, sits on the dark hero ─────────────────────────────────────── */
.topbar { background: var(--night); border-bottom: 1px solid rgba(255,255,255,.06); }
.topbar .wrap { display: flex; align-items: center; gap: 1rem 2.5rem; flex-wrap: wrap; min-height: 60px; padding-top: .5rem; padding-bottom: .5rem; }
.wordmark { display: inline-flex; align-items: center; gap: .6rem; color: var(--on-night); text-decoration: none; font: 600 1.04rem/1 var(--sans); letter-spacing: -.012em; }
.wordmark svg { display: block; }
.topbar nav { margin-left: auto; display: flex; gap: 1.75rem; flex-wrap: wrap; }
.topbar nav a { color: var(--on-night-dim); text-decoration: none; font-size: .92rem; }
.topbar nav a:hover, .topbar nav a:focus-visible { color: var(--on-night); }
.topbar nav a[aria-current="page"] { color: var(--on-night); }

/* On a phone the five links wrapped to a second row, which pushed the bar to
   117px and left the wordmark pinned flush against the very top edge. The nav
   now takes its own full-width row under the wordmark and stays on ONE line:
   nowrap plus overflow-x means a long link scrolls rather than folding the bar
   in half, and space-between spreads the five across the width when they fit. */
@media (max-width: 46rem) {
  .topbar .wrap {
    /* Vertical padding only. The horizontal 2rem is inherited from .wrap on
       purpose: shrinking it here would set the wordmark 12px left of every
       heading and paragraph below it, trading one alignment bug for another. */
    padding-top: .9rem;
    padding-bottom: .9rem;
    gap: .85rem;
    min-height: 0;
  }
  .topbar nav {
    margin-left: 0;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: .75rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { white-space: nowrap; font-size: .88rem; }
}

@media (max-width: 22rem) {
  .topbar nav a { font-size: .82rem; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--night); color: var(--on-night); overflow: hidden; padding: 5.5rem 0 4.5rem; text-align: center; }
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 80%;
  background: radial-gradient(48rem 22rem at 50% 40%, rgba(77,124,254,.30), rgba(77,124,254,.06) 45%, transparent 72%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(40rem 18rem at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(40rem 18rem at 50% 30%, #000 20%, transparent 75%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { margin: 0 auto 1.25rem; max-width: 24ch; color: #fff; font: 500 clamp(2.6rem, 6.4vw, 4.4rem)/1.02 var(--serif); letter-spacing: -.028em; }
.hero .sub { margin: 0 auto; max-width: 48ch; color: var(--on-night-dim); font-size: 1.06rem; }

.cta { display: inline-block; margin-top: 2.25rem; padding: .8rem 1.6rem; border-radius: 7px; background: var(--steel); color: #fff; font-weight: 600; font-size: .96rem; text-decoration: none; }
.cta:hover { background: #2450cc; }

.hero-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; max-width: 52rem; margin: 3.25rem auto 0; text-align: left; }
.hero-card { padding: 1.4rem 1.5rem; border: 1px solid var(--night-ln); border-radius: 12px; background: linear-gradient(180deg, var(--night-3), var(--night-2)); }
.hero-card .tag { margin: 0 0 .55rem; color: var(--steel-soft); font: 600 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.hero-card h2 { margin: 0 0 .45rem; color: #fff; font: 600 1.02rem/1.3 var(--sans); letter-spacing: -.005em; }
.hero-card p { margin: 0; color: var(--on-night-dim); font-size: .93rem; line-height: 1.6; }

/* ── Trust / label band ─────────────────────────────────────────────────── */
.band-label { padding: 1.4rem 0; border-bottom: 1px solid var(--rule); background: var(--paper); text-align: center; }
.band-label p { margin: 0; color: var(--muted); font: 600 .7rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }

/* ── Content bands ──────────────────────────────────────────────────────── */
.band { padding: 4.5rem 0; border-bottom: 1px solid var(--rule); }
.band.alt { background: var(--paper-2); }
.band h2 { margin: 0 0 1rem; color: var(--ink); font: 500 clamp(1.7rem, 3.4vw, 2.3rem)/1.2 var(--serif); letter-spacing: -.018em; max-width: 22ch; }
.band .lede { margin: 0 0 2rem; max-width: 46ch; font-size: 1.05rem; }
.band p { max-width: 44rem; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
@media (max-width: 52rem) { .split { grid-template-columns: 1fr; gap: 1.75rem; } }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 2rem; }
.tile { padding: 1.35rem 1.45rem; border: 1px solid var(--rule); border-radius: 11px; background: var(--paper); }
.tile h3 { margin: 0 0 .4rem; color: var(--ink); font-size: .99rem; font-weight: 600; }
.tile p { margin: 0; font-size: .93rem; max-width: none; }

/* ── Ledger ─────────────────────────────────────────────────────────────── */
.ledger { border-top: 1px solid var(--rule); }
.ledger dl { margin: 0; }
.ledger .row { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--rule); }
.ledger dt { margin: 0; color: var(--muted); font: 600 .71rem/1.9 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.ledger dd { margin: 0; color: var(--ink); }
@media (max-width: 40rem) { .ledger .row { grid-template-columns: 1fr; gap: .1rem; } }

/* ── Documents ──────────────────────────────────────────────────────────── */
.doc-head { padding: 3.5rem 0 1.6rem; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.doc-head h1 { margin: 0 0 .5rem; color: var(--ink); font: 500 clamp(2rem, 4.4vw, 2.7rem)/1.12 var(--serif); letter-spacing: -.02em; }
.updated { margin: 0; color: var(--muted); font: 600 .71rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.doc { padding: 2.75rem 0 4rem; max-width: 44rem; }
.doc h2 { margin: 2.5rem 0 .7rem; color: var(--ink); font: 500 1.28rem/1.3 var(--serif); letter-spacing: -.01em; }
.doc h2:first-of-type { margin-top: 0; }
.doc p, .doc li { max-width: 42rem; }
.doc ul { padding-left: 1.15rem; }
/* Inline monospace for a literal — a domain, a path, a header name. */
.doc .mono-inline { font: 500 .93em/1 var(--mono); color: var(--ink); }
.doc li { margin-bottom: .45rem; }

a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: #b9c0ca; }
a:hover { text-decoration-color: var(--ink); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer.site { background: var(--night); color: var(--on-night-dim); }
footer.site a { color: var(--on-night-dim); text-decoration: none; }
footer.site a:hover { color: var(--on-night); }

/* .push is PLACEMENT ONLY. It used to carry its own type — .72rem/1, weight 600
   — left over from when the footer was one flex line. Inside .foot-base that
   made the third item a different size, weight and line-height from the two
   beside it, so even when the three DID share a row their baselines sat 4px
   apart. The type now comes from .foot-base, so all three lines match. */
.push { margin-left: 0; }

:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }

/* Skip link — keyboard users reach content without walking the nav. */
.skip {
  position: absolute; left: -9999px; top: 0;
  padding: .7rem 1.1rem; background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 0 0 7px 0; z-index: 50;
  font-size: .92rem; text-decoration: none;
}
.skip:focus { left: 0; }

/* Print: legal pages get printed and filed. */
@media print {
  .topbar, .cta, footer.site { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { background: #fff; color: #000; padding: 1rem 0; text-align: left; }
  .hero h1, .hero::before, .hero::after { color: #000; background: none; }
  a { text-decoration: underline; }
  a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ── Updates / journal ──────────────────────────────────────────────────── */
.notes { border-top: 1px solid var(--rule); margin-top: 1.75rem; }
.note { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
.note time { color: var(--muted); font: 600 .71rem/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.note h3 { margin: 0 0 .35rem; color: var(--ink); font-size: 1rem; font-weight: 600; }
.note p { margin: 0; font-size: .95rem; max-width: 44rem; }
@media (max-width: 40rem) { .note { grid-template-columns: 1fr; gap: .3rem; } }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { margin-top: 1.5rem; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { padding: 1rem 0; color: var(--ink); font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; gap: .75rem; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; color: var(--muted); font: 500 1.1rem/1 var(--mono); width: 1rem; }
.faq details[open] summary::before { content: "\2013"; }
.faq details p { margin: 0 0 1rem 1.75rem; font-size: .96rem; }

/* ── Tiles, upgraded ────────────────────────────────────────────────────── */
.tiles { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }

.tile {
  position: relative;
  border: 0;
  border-radius: 0;
  padding: 1.9rem 1.5rem 1.6rem;
  background: var(--paper);
}

.tile::before {
  content: attr(data-k);
  display: block;
  margin-bottom: .85rem;
  color: var(--steel);
  font: 600 .67rem/1 var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.tile::after {
  content: "";
  position: absolute;
  left: 1.5rem; top: 1.75rem;
  width: 1.5rem; height: 2px;
  background: var(--steel);
  opacity: 0;
  transform: translateX(-6px);
}

.tile h3 { margin: 0 0 .5rem; font-size: 1rem; letter-spacing: -.005em; }
.tile p { color: var(--body); }

@media (prefers-reduced-motion: no-preference) {
  .tile, .tile::after { transition: background .18s ease, opacity .18s ease, transform .18s ease; }
}
.tile:hover { background: var(--paper-2); }
.tile:hover::after { opacity: 1; transform: translateX(0); }

/* Dev-type wordmark: monospace, lowercased, with a prompt caret. */
.wordmark { gap: .5rem; font-family: var(--mono); font-weight: 600; font-size: .95rem; letter-spacing: -.01em; }
.wordmark .caret { color: var(--steel-soft); font-weight: 700; }
.wordmark .dim { color: #8b95a3; font-weight: 500; }

/* ── Footer: a real grid, not a run-on line ─────────────────────────────── */
footer.site { padding: 3.25rem 0 2.5rem; }

footer.site .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  align-items: start;
}

.foot-brand .wordmark { color: var(--on-night); margin-bottom: .75rem; }
.foot-brand address { font-style: normal; color: var(--on-night-dim); font-size: .88rem; line-height: 1.7; }
.foot-brand address a { color: var(--on-night-dim); text-decoration: none; }
.foot-brand address a:hover { color: var(--on-night); text-decoration: underline; }

.foot-col h2 {
  margin: 0 0 .8rem;
  color: #7c8593;
  font: 600 .66rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.foot-col ul { margin: 0; padding: 0; list-style: none; }
.foot-col li { margin-bottom: .5rem; }
.foot-col a { color: var(--on-night-dim); text-decoration: none; font-size: .9rem; }
.foot-col a:hover { color: var(--on-night); }

/* A grid, not wrapping flex. Flex + margin-left:auto reads as "left, left,
   right" only while all three fit on one line; the moment they wrap, each lands
   on its own line and the auto margin shoves the last one to a third, arbitrary
   x — two flush-left lines and one adrift. A grid cannot wrap mid-row, so the
   layout is either three columns or one, and both are aligned by construction. */
.foot-base {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: .5rem 1.5rem;
  align-items: baseline;
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #7c8593;
  font: 500 .74rem/1.6 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.foot-base .push { justify-self: end; text-align: right; }

/* Below this the three lines no longer fit across, so they stack — all flush
   left, including the one that was pushed right. */
@media (max-width: 56rem) {
  .foot-base { grid-template-columns: 1fr; gap: .35rem; }
  .foot-base .push { justify-self: start; text-align: left; }
}

@media (max-width: 46rem) {
  footer.site .wrap { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

/* ── Hero status line ───────────────────────────────────────────────────── */
.status-line {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.9rem;
  padding: .55rem 1rem .55rem .8rem;
  border: 1px solid var(--night-ln);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  font: 600 .72rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #cdd5e0;
}

.status-line .pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5ad3a0;
  box-shadow: 0 0 0 0 rgba(90, 211, 160, .55);
}

@media (prefers-reduced-motion: no-preference) {
  .status-line .pulse { animation: pulse 2.4s ease-out infinite; }
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(90, 211, 160, .5); }
    70%  { box-shadow: 0 0 0 7px rgba(90, 211, 160, 0); }
    100% { box-shadow: 0 0 0 0 rgba(90, 211, 160, 0); }
  }
}