/* ───────────────────────────────────────────────────────────────
   PARANOID AND READY — the About page

   Loaded by about.html and by nothing else. One screen: the statement on
   paper, with how the site pays for itself and where to write it under the
   same fold.

   It was a photograph until now — a night road under one lamp, with a scrim
   over it and a text-shadow under every line to keep the words off the lit
   parts of the frame. The picture is gone and so is all of that: type on a
   flat ground needs no shadow, and a shadow left behind on one is a grey
   halo round every letter.

   No deck here. A deck exists to snap between screens and there is only one,
   so the page is a plain section with a floor of one viewport.
   ─────────────────────────────────────────────────────────────── */

.ab-page { display: flex; flex-direction: column; }

/* min-height, never height. The page is one screen on anything that can hold
   it, and grows rather than clipping on anything that cannot — a short
   laptop window, a phone in landscape, a reader running large type. */
.ab-panel {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bone);
  color: var(--void);
  overflow: hidden;
}

/* ── What is on it ─────────────────────────────────────────────
   A stack that starts near the top, not a stack centred on the screen. It
   was a three-row grid built to hold the four lines on the exact centre
   line, then tuned to 0.62fr above against 1fr below to lift them off it —
   the long way round to a page that simply begins where it begins. The
   centre line is for a headline with nothing above or below it, and this one
   has an address, three icons and a disclaimer underneath.

   The top padding is the only thing holding it down, and it is generous on
   purpose: clear of the fixed wordmark, and enough that the statement reads
   as placed rather than as pushed against the top of the window. On a short
   window the page grows rather than compressing, same as before. */
.ab-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: clamp(20px, 3.2vh, 40px);
  padding-block: clamp(96px, 17vh, 200px) clamp(34px, 4.5vh, 56px);
}

/* Pushed well down off the statement. The gap on .ab-inner spaces the blocks
   evenly, and the foot wants far more air above it than the disclaimer wants
   under the address — the statement is one thing and the way to reach the
   site is another, and with the stack no longer centred the gap between them
   is the only thing saying so. */
.ab-foot {
  margin-top: clamp(64px, 15vh, 190px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3.2vh, 34px);
}

/* Twice the gap it opened with. Four separate statements want air between
   them: at the old spacing they read as one paragraph that happened to break
   four times, which is the opposite of the point. */
.ab-statement {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.2vh, 28px);
  max-width: min(92vw, 1000px);
}

/* Anton, uppercase. It is the site's headline face and this is the site's one
   headline. One sentence to a line, which is why the line-height is tighter
   than a paragraph would want: these are four statements stacked, not a block
   of prose that happens to wrap. */
.ab-line {
  font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.18;
  font-size: clamp(18px, min(2.6vw, 3.4vh), 38px);
  /* The page's own ink, not the signal red it opened with. With the address
     and its label already plain, red on four lines above them was the only
     red left on the page and it read as a leftover rather than as an accent.
     The red is on the hovers now, where a page with one thing to click
     wants it. */
  color: var(--void);
}

/* Under the statement and quieter than it: this is the small print of the
   arrangement, not the argument. Plain rather than red, so the red stays the
   one voice on the page. */
.ab-disclaimer {
  max-width: min(90vw, 620px);
  font-size: clamp(13px, 1.3vw, 17px);
  line-height: 1.6;
  color: rgba(var(--rgb-void), 0.78);
}

.ab-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.2vh, 14px);
}

/* The address is the whole section, so it is set at the size of a heading and
   not at the size of a link in a paragraph. Anton would shout it; mono is what
   the site uses when something is meant to be read exactly, which an address
   is. The 44px target comes from padding rather than from the line, so the
   address keeps its own leading. */
/* Plain, not red. The statement above is the one voice on the page, and a
   red address under a red headline reads as a second one competing with it.
   The label over it goes the same way for the same reason — .eyebrow is red
   everywhere else on the site, and everywhere else it is not sitting under
   four lines of Anton in the same colour. */
.ab-contact .eyebrow { color: var(--void); }

.ab-mail {
  font-family: var(--mono);
  font-size: clamp(14px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--void);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 0.2s;
}

.ab-mail:hover { color: var(--signal); }

/* Under the address, quieter than it: the address is how you reach the site,
   these are where it already is. Plain rather than red so the red stays on the
   statement and the one thing under it worth clicking. 44px each, and the
   width comes from padding so the icons keep their own spacing. */
.ab-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 10px);
  margin-top: clamp(2px, 0.6vh, 8px);
}

.ab-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: rgba(var(--rgb-void), 0.72);
  transition: color 0.2s;
}

.ab-social a:hover { color: var(--signal); }
.ab-social svg { display: block; }

@media (max-width: 860px) {
  /* Tighter at both ends. A phone screen has no room to spend on a hundred
     and fifty pixels of air above the first line, and the wordmark it has to
     clear sits closer to the top here than it does on a desktop. */
  .ab-inner {
    gap: clamp(20px, 3.4vh, 34px);
    padding-block: clamp(76px, 11vh, 120px) clamp(22px, 3.4vh, 36px);
  }
}

/* ── Two parts, two screens ─────────────────────────────────────
   The page is one panel holding a statement and a way to get in touch,
   spaced apart by a margin. On a desktop window that reads correctly: both
   are on screen at once, and the gap is what says they are different
   things.

   On a phone the same arrangement puts the statement hard against the top
   of the screen, the contact block halfway down it, and nothing below the
   fold at all. So the gap is doing the work of a section break while both
   halves share one screen, which is the worst of both: the statement is
   not composed, and the contact block is not arrived at.

   Given a screen each they are simply two parts. The statement is centred
   in the first, which is what a statement of four lines wants, and the
   contact block is the next thing down rather than the bottom half of the
   current one.

   A screen each, not one and two thirds. At 70dvh the page came to 1380
   against an 812 viewport, so the furthest a reader could scroll was 568
   and the contact block never reached the top of the screen: it sat in the
   lower half with 244px of the statement's empty tail above it, which is
   the arrangement this was meant to undo. A full screen each means the
   second scroll lands on the second part, composed the same way as the
   first. */
@media (max-width: 860px) {
  .ab-panel { min-height: 0; }

  /* The panel's own padding goes to the two parts, which now own their
     spacing, and the gap between them goes with it: they are no longer
     two items in one stack. */
  .ab-inner { padding-block: 0; gap: 0; }

  .ab-statement {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(20px, 3.4vh, 34px);
    /* Centred in the screen, but against the chrome rather than through
       it: without this the middle of the block is the middle of the
       viewport and the first line can sit under the wordmark. */
    padding-block: var(--chrome-h) clamp(16px, 2.4vh, 28px);
  }

  .ab-foot {
    margin-top: 0;
    min-height: 100dvh;
    justify-content: center;
    padding-bottom: clamp(28px, 4.5vh, 48px);
  }
}

/* The two legal links. About carries no footer, so they sit under the
   disclaimer: the same small print, the same colour. */
.ab-legal {
  display: flex;
  gap: 18px;
  justify-content: center;
  font-size: clamp(12px, 1.1vw, 14px);
}
.ab-legal a {
  color: rgba(var(--rgb-void), 0.78);
  text-decoration: underline;
  text-underline-offset: 3px;
}