/* Siriology.com — phone typography, spacing and touch targets.
   Added 09-20-2026 at 9:40 am PDT after he sent an iPhone screenshot;
   widened to the whole site at 10:05 am PDT at his ask.

   ⛔ THIS SHEET LOADS LAST AND EDITS NONE OF HIS STYLESHEETS. together.css,
   brand.css, unified.css, apple.css, research.css, style.css and theme.css are
   exactly as supplied. ⛔ No word is changed, nothing is removed, and every one
   of his hard <br> breaks is kept — they are where he wanted the sentence to
   turn, and at a workable type size they land correctly on their own.

   ⭐ EVERY RULE IS INSIDE A PHONE MEDIA QUERY. Verified at 1280px: the desktop
   layout is identical to the live site on every measured value.

   THE CAUSE UNDER THE SYMPTOMS, measured rather than guessed: headings were
   pinned to flat desktop sizes at every phone width — the h1 at 62px inside a
   325px column — so his two-line breaks became three and four ragged lines and
   stranded single words. `text-wrap: balance` then evens out what is left.
   It is ignored by browsers that do not know it, so nothing regresses. */

@media (max-width: 650px) {

  /* ------------------------------------------------------------------
     1 · HEADER — three rows become two.
     The logo and the theme switch share the top row; the nav takes the
     second. The switch is appended by theme.js as the last child, so it is
     placed with `order` rather than by moving it in the DOM.
     ------------------------------------------------------------------ */
  header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
  }
  header .site-logo    { order: 1; flex: 0 0 auto; }
  header .theme-switch { order: 2; margin-left: auto; }
  header nav           { order: 3; flex: 1 1 100%; }

  /* ⭐ THE NAV FITS TWO ROWS, NOT THREE — measured, not guessed.
     Adding "Tell us what happened" made five items, and at the inherited
     20px column gap they wrapped to three rows: the header went to 227px,
     which is taller than the problem this section was written to fix.
     The five labels total 566px inside a 331px column, so two rows need
     645px of space and 14px gaps give exactly that. The type size is left
     alone — shrinking the words would have been the wrong economy. */
  header nav { gap: 10px 14px; }

  /* The switch needed 354px in a 331px row, so it fell to a row of its own.
     Narrower horizontally — and TALLER, because its buttons were 30px high,
     under the 44pt minimum a finger needs. Only the width gives. */
  header .theme-switch { padding: 2px; }

  /* ⭐ THE STICKY HEADER STANDS DOWN ON PHONES — the single biggest gain.
     His header is `position:sticky` and is 178px tall at 375px even after the
     row above. That is 22% of the screen permanently occupied, and it was
     overlapping the running text while reading. On a desktop, where the header
     is 85px against a 900px window, sticky is a good call and it is untouched.
     ⚠ WHAT IS LOST, said plainly: the nav no longer follows you down the page
     on a phone; you scroll back up for it. For a site that is two long reads,
     the reading area is worth more. ⛔ One line reverts it if he disagrees. */
  header {
    position: static;
    backdrop-filter: none;
  }

  /* With the header out of the flow, the anchor offsets it was compensating
     for (100–150px) would leave a gap above every target. */
  section, li[id], .purpose, .together,
  .research-body section, .perspective { scroll-margin-top: 16px; }
  header .theme-switch button {
    padding-left: 9px;
    padding-right: 9px;
    min-height: 44px;
  }

  /* ------------------------------------------------------------------
     2 · HEADINGS — sized to the column they actually have, then balanced.
     Applies to EVERY heading on both pages, not only the two on the home
     page: all eleven of his hard-broken headings and decks were measured.
     ------------------------------------------------------------------ */
  /* ⛔ .contents li is NOT here. `balance` on a numbered list item moves the
     first line away from its own marker, so "3." ended up beside the SECOND
     line of its entry. Also caught by looking. */
  h1, h2, h3,
  .hero-deck, .subtitle, .closing-line,
  .principles p {
    text-wrap: balance;
  }

  .opening h1        { font-size: clamp(34px, 10.8vw, 62px); letter-spacing: -.045em; }
  .research-title h1 { font-size: clamp(32px, 10vw, 55px);   letter-spacing: -.045em; }
  .perspective h2,
  .purpose h2,
  .together h2,
  .closing h2        { font-size: clamp(24px, 7vw, 44px); letter-spacing: -.03em; }
  .research-body h2  { font-size: clamp(25px, 7.4vw, 34px); letter-spacing: -.02em; }
  .subtitle          { font-size: clamp(18px, 5.2vw, 24px); }

  /* ------------------------------------------------------------------
     3 · TWO-SENTENCE DECKS — each sentence becomes its own balanced block.
     That is what kills the one-word last line ("future.", "it real.",
     "Together."). The <br> would double the gap once they are blocks, so it
     stands down — his break is honoured, not removed.
     ------------------------------------------------------------------ */
  /* ⛔ .article-meta is NOT in this list, deliberately. Hiding its <br> ran
     his two sentences together as "critical analysisDeveloped from..." —
     a <br> between two bare text runs carries the only space there is.
     Only elements whose halves are wrapped in their own <strong> can have
     the break replaced by a block. Caught by looking, not by measuring. */
  .opening .hero-deck br,
  .closing-line br { display: none; }

  .opening .hero-deck strong,
  .closing-line strong {
    display: block;
    text-wrap: balance;
    margin-bottom: .4em;
  }
  .opening .hero-deck strong:last-child,
  .closing-line strong:last-child { margin-bottom: 0; }
  .article-meta { line-height: 1.55; text-wrap: pretty; }

  /* ------------------------------------------------------------------
     4 · RUNNING TEXT — `pretty` asks the browser not to leave one word alone
     on the last line of a paragraph. Long prose keeps its natural rag.
     ------------------------------------------------------------------ */
  .opening-copy > p, .perspective > p, .purpose > p,
  .research-body p, .closing > p, .note, .limitations p,
  .art figcaption, .opening figcaption, .research-art figcaption,
  .sources li, .perspectives p, details p { text-wrap: pretty; }

  /* ------------------------------------------------------------------
     5 · TOUCH TARGETS — standalone controls a finger has to hit.
     ⚠ Deliberately NOT applied to footnote and citation links inside running
     prose: padding those would break the paragraphs they sit in, and inline
     links in a sentence are exempt from the minimum-target rule.
     ------------------------------------------------------------------ */
  header nav a {
    display: inline-block;
    padding: 9px 0;          /* 20px of text becomes a 40px target */
    line-height: 1.35;
  }
  /* ⛔ `.contents a` is NOT in this list. Making a list item's link an
     inline-block with padding lifts its first line off its own number, so
     "3." ended up level with the SECOND line of entry 3. The numbered
     contents get their target from spacing on the li instead, which leaves
     the marker alignment alone. Caught by looking, twice. */
  .text-link,
  footer .social a,
  footer nav a,
  footer > div a,
  .pill {
    display: inline-block;
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
    line-height: 1.4;
  }
  footer .social { align-items: center; }
  .contents li { padding: 7px 0; }

  /* ------------------------------------------------------------------
     6 · THE RESEARCH TABLES — they are wider than the screen by design and
     scroll inside their own box, which is correct. But a table that scrolls
     with no visible sign of it reads as a table that is simply cut off.
     A soft edge fade says "there is more this way" without adding chrome.
     ------------------------------------------------------------------ */
  .table-wrap {
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--s-bg, #fff) 30%, rgba(255,255,255,0)) left center / 32px 100% no-repeat,
      linear-gradient(to left,  var(--s-bg, #fff) 30%, rgba(255,255,255,0)) right center / 32px 100% no-repeat;
    background-attachment: local, local;
  }
  .table-wrap + .table-note,
  .table-wrap caption { text-wrap: pretty; }

  /* ------------------------------------------------------------------
     7 · SPECIFICITY SETTLEMENT — written last, and on purpose.
     Section 4's `.perspective > p` and `.opening-copy > p` outrank a bare
     `.lead` or `.eyebrow`, so those two were silently getting `pretty` when
     they needed something else. Measured, not assumed.
     ------------------------------------------------------------------ */

  /* The lead is two sentences with his <br> between them. Balance each half. */
  .perspective > p.lead,
  .opening-copy > p.lead { text-wrap: balance; }

  /* ⛔ The eyebrow carries a DATE. Both `balance` and `pretty` broke it as
     "... September / 20, 2026", splitting the date across two lines — worse
     than the browser's own wrapping, which keeps the date whole. So it is
     explicitly returned to normal wrapping. A date is one object. */
  .opening-copy > p.eyebrow,
  .opening .eyebrow,
  .research-title .eyebrow,
  .perspective .eyebrow {
    text-wrap: wrap;
    max-width: 20em;
    margin-left: auto;
    margin-right: auto;
  }
}

/* The narrowest phones (SE and below): the logo gives back a few pixels so it
   and the switch still share one row rather than taking two. */
@media (max-width: 430px) {
  header .site-logo img { width: 150px; height: 50px; }
}

/* ---------------------------------------------------------------------------
   ⚠ THE ONE RULE IN THIS FILE THAT IS NOT PHONE-ONLY.
   Named here rather than hidden, because the filename would otherwise lie.

   He asked (09-20-2026) for the artwork to sit just above the headline — then
   "We're more than a waitlist", reworded 09-21-2026 to "Hey Apple, we deserve
   more than a waitlist." — and it now does. On a phone that reads well. On a 1280x900
   desktop the image is 880px tall, which pushed the headline to y=1181 —
   entirely below the fold, so the first screen became the picture and nothing
   else. The words are the argument; they should not be the reward for
   scrolling.

   Capping the image's HEIGHT rather than its width keeps it as wide as the
   column allows on a phone, where there is no problem to solve, and only
   constrains it where the screen is short relative to its width.
   --------------------------------------------------------------------------- */
.opening figure img {
  max-height: 44vh;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 650px) {
  /* On a phone the image is the width of the column and nothing is buried,
     so the cap stands down and it renders exactly as he asked. */
  .opening figure img { max-height: none; width: 100%; }
}

/* ===========================================================================
   8 · THE BROKEN LINES — and the cause was NOT what either of us assumed
   Added 09-20-2026 after he wrote: "All throughout the site, the sentences and
   lines are badly broken visually in phone screen."

   ⛔ FIRST ATTEMPT, REMOVED: left-aligning the centred copy. It was measured
   and it does NOT fix this. Alignment changes where text SITS, not where it
   BREAKS — the stranded lines landed in exactly the same places. He chose to
   keep his centring once the measurements were in, and he was right to.

   ⛔ SECOND IDEA, ALSO REJECTED, and his: a smaller type size. Measured at 80%
   on four blocks — two improved, two got noticeably WORSE (one from 0.63 to
   0.17 of the full measure). Shrinking the type re-rolls where the break lands
   rather than removing the cause, so it would look fixed on the paragraph you
   checked and broken on the next one.

   ⭐ THE ACTUAL CAUSE IS THE HARD <br> TAGS IN THE COPY. A browser will not
   rebalance lines ACROSS A FORCED BREAK — each <br>-separated run is its own
   fragment, so `text-wrap: balance` never reaches the text. The proof: the one
   paragraph here with NO <br> went from 0.63 to 0.90 on balance alone, while
   every block WITH one was completely unmoved.

   So on a phone the body-copy breaks stand down and the sentences reflow as a
   single run, which lets the browser balance them:
     "Let's make almost there…"   0.72 -> 1.00
     "Apple brings the tools…"    0.21 -> 0.88

   ⚠ EACH OF THESE HAS A SPACE BEFORE ITS <br> IN THE HTML. Without it, hiding
   the break glues the two sentences together — that bug shipped into a local
   build earlier as "critical analysisDeveloped from".
   =========================================================================== */

@media (max-width: 650px) {

  .purpose .lead br,
  .purpose > p br,
  .closing > p br,
  .article-meta br { display: none; }

  .purpose .lead,
  .purpose > p,
  .closing > p,
  .article-meta { text-wrap: balance; }

  /* ⛔ THE BREAKS THAT STAY, because they are not accidents:
     - .closing-line  "…a place we move through." / "Together."  — the break
       IS the line. Dropping it would flatten the last beat of the page.
     - the artwork credit, and the "Not affiliated with or endorsed by Apple"
       disclaimer — two separate statements, not one sentence that wrapped.
     - every heading. "You're part of / what comes next." is deliberate and
       already reads correctly on his phone. */
}

/* ===========================================================================
   9 · CENTRED EVERYWHERE, AND THE FOOTER REBUILT
   His instruction, 09-20-2026: "there is inconsistency on left justified and
   center justified... Please make all centered." Also: centre the footer with
   the social links, and put the copyright BELOW them.

   ⚠ THESE RULES ARE NOT PHONE-ONLY. He said "across site", so they apply at
   every width. The filename now understates what this sheet does; that is
   named here rather than left for someone to discover.

   ⭐ WHERE THE INCONSISTENCY ACTUALLY CAME FROM — his own stylesheets, not
   from anything we added. Three places set left against a centred page:
   together.css `.principles`, apple.css `.art figcaption`, and research.css's
   table cells. The first two are prose and are corrected below.
   =========================================================================== */

.principles,
.principles p,
.principles span,
figcaption,
.art figcaption,
.opening figcaption,
.research-art figcaption,
.research-title .subtitle,
.article-meta,
.perspectives,
.perspectives p,
.perspectives h3 { text-align: center; }

/* ---------- THE FOOTER: one centred column, copyright last ----------
   His footer markup already ends with the copyright; the flex row was
   wrapping it up beside the other blocks. A centred column puts the DOM
   order back on screen: logo · line · links · social · copyright. */
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
footer > div,
footer nav.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  width: 100%;
}
footer .site-copyright {
  order: 99;                 /* below the social links, whatever the source order */
  width: 100%;
  margin: 4px 0 0;
  text-align: center;
}
footer p { margin: 0; }

@media (max-width: 650px) {
  footer { gap: 14px; padding-bottom: 34px; }
  footer > div, footer nav.social { gap: 8px 16px; }
}

/* ---------- 9b · BALANCE THE SHORT BLOCKS, NOT JUST THEIR LAST WORD ----------
   `text-wrap: pretty` only rescues a single stranded word. Centred copy shows
   every ragged line from both edges, so the short blocks want `balance`, which
   evens ALL the lines instead of just the last one. Measured at 375px:
   the artwork caption ended at 30% of its longest line, and the "We can love
   Apple's ambition" paragraph at 39%.

   ⚠ Applied only to blocks that are a few lines long. Chromium stops balancing
   past about six lines, and on a long research paragraph it would cost layout
   work for nothing — those keep `pretty`. */
figcaption,
.opening figcaption,
.art figcaption,
.research-art figcaption,
.purpose > p,
.purpose .lead,
.closing > p,
.together-heading > p,
.principles p,
.perspectives p,
.research-title .subtitle,
.article-meta,
.hero-deck,
footer p,
footer .site-copyright { text-wrap: balance; }

/* ---------- 9c · THE READING SECTIONS, which were the real inconsistency ----
   `.perspective` on the home page and the research article body were the
   left-aligned blocks he was seeing against a centred page. His instruction
   was explicit and repeated: make all centred. Done.

   ⚠ ONE HONEST NOTE, said once and not relitigated: these are the longest
   prose on the site, and centring long copy gives the eye no left rail to
   return to. He has looked at the site and asked for this twice; it is his
   call and it is reversible by deleting this block.

   ⛔ TABLE CELLS ARE THE ONE EXCEPTION AND IT IS DELIBERATE. Centring the
   columns of the research tables would make the data genuinely hard to read
   across a row — that is not a style choice, it is comprehension. Raised with
   him rather than done silently. */
.perspective,
.perspective > p,
.perspective h2,
.perspective h3,
.perspective .eyebrow,
.perspective .perspective-note,
.research-body,
.research-body p,
.research-body h2,
.research-body h3,
.research-body .method,
.research-body .note,
.limitations,
.limitations p,
.contents,
.sources,
.sources p,
.sources li,
.timeline,
.timeline p,
.actions,
.actions p,
blockquote { text-align: center; }

/* Numbered/bulleted lists centre their text but keep their markers sane. */
.contents ol, .sources ol, .actions { list-style-position: inside; padding-left: 0; }
.contents li, .sources li { text-align: center; }

/* ⛔ Data stays readable. */
table, table th, table td, table caption { text-align: left; }

/* The footer's link block is `flex-direction: column` in together.css, so the
   four links stacked one per line and made the footer needlessly tall. A
   wrapped row matches the social links directly beneath it. */
footer > div { flex-direction: row; }

/* ⛔ .article-meta KEEPS ITS BREAK. Hiding it joins two separate statements
   into "…critical analysis Developed from…", which reads as one broken
   sentence with a capital letter in the middle. Same reasoning as the artwork
   credit and the Apple disclaimer: two statements, not one that wrapped. */
.article-meta br { display: inline; }
.article-meta { text-wrap: pretty; }

/* ===========================================================================
   10 · FOOTER LINK ICONS, AND ROOM TO BREATHE
   His ask, 09-20-2026: the footer links need space between them and "an
   appropriate similar theme style icon" next to each, including "Get updates".

   ⭐ HOW, AND WHY THIS WAY: the icons are drawn in CSS as masks, keyed to each
   link's HREF. No markup changes on five pages, nothing to keep in sync, and
   because a mask paints with `currentColor` the icons take the link colour and
   follow light/dark automatically — there is no second set for dark mode and
   no image that can go invisible on the wrong ground.

   The drawings are deliberately plain: 1.8px round strokes on a 24 grid, the
   same register as the rest of the site. Not decoration — each one names what
   is on the other end of the link.
   =========================================================================== */

footer > div {
  gap: 14px 28px;              /* his ask: space between the links */
  align-items: center;
}

footer > div a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;

  /* ⛔ THE DEFAULT ICON LIVES HERE, ON THE ELEMENT — NOT ON ::before.
     An unset --ico means an EMPTY mask, and an empty mask masks nothing: the
     17px box renders as a SOLID SQUARE of the link color. Found 09-20-2026 in
     dark mode, where "What we record" was a filled blue block.
     ⚠ Declaring the fallback on ::before instead looks equivalent and is not:
     a value set on the pseudo-element BEATS the one it would inherit from the
     link, so the default silently replaced every real icon. Tried it, watched
     four links turn into identical rings, moved it here. The [href] rules
     below are more specific than this one, so each real icon wins. */
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E");
}

footer > div a::before {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

/* an eye — a perspective, a way of seeing */
footer > div a[href*="#essay"],
footer > div a[href="index.html"],
footer > div a[href*="index.html#"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.9'/%3E%3C/svg%3E");
}

/* a page with lines — the sources and the research */
footer > div a[href*="research"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9.5 12.5h5M9.5 16h5'/%3E%3C/svg%3E");
}

/* a speech bubble — someone telling us what happened */
footer > div a[href*="tell.php"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a7.5 7.5 0 0 1-7.5 7.5H8l-4.5 3V16A7.5 7.5 0 0 1 10.5 4h3A7.5 7.5 0 0 1 21 11.5z'/%3E%3C/svg%3E");
}

/* an envelope — something arriving */
footer > div a[href*="substack"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.6'/%3E%3Cpath d='M3.2 7.2l8.8 6.2 8.8-6.2'/%3E%3C/svg%3E");
}

/* a house — back to the start */
footer > div a[href="index.html"]:not([href*="#"]) {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 12 3.5l8.5 7'/%3E%3Cpath d='M5.5 9.8V20h13V9.8'/%3E%3C/svg%3E");
}

/* a shield — what is kept, and what is kept safe */
footer > div a[href*="privacy.html"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l7 2.8v5.6c0 4.3-2.9 8.1-7 9.9-4.1-1.8-7-5.6-7-9.9V5.6z'/%3E%3C/svg%3E");
}

/* a page with a check — the terms, agreed to */
footer > div a[href*="terms.html"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 14.5l2 2 4-4.5'/%3E%3C/svg%3E");
}

/* ⛔ NO ICONS IN THE TOP NAV, deliberately. It already carries six items and
   wraps to two rows at 375px; an icon on each would push it to three and undo
   the header height he asked to reclaim. Raised with him rather than assumed. */

@media (max-width: 650px) {
  footer > div { gap: 12px 22px; }
  footer > div a::before { width: 16px; height: 16px; }
}

/* ---------- The research page's footer opens with a plain "Siriology.com"
   text link rather than the logo image, so it needs the same centring the
   home page gets from `.site-logo`. His ask: centre that bottom block. ---- */
footer > a:first-child {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.5px;
  text-decoration: none;
}

/* ===========================================================================
   11 · SOCIAL ICONS, same technique and same register
   His ask: "use the icons (in same theme) for the various social media sites
   next to their names."

   Same mask approach as the footer links, so every mark paints in
   `currentColor` and follows light and dark without a second set. The names
   stay — the icon sits beside the word rather than replacing it, which keeps
   the row readable for anyone who does not recognise a glyph.

   ⚠ These are simplified monochrome marks drawn to sit at 16px beside text,
   not the platforms' official brand assets. That is normal practice for
   linking to your own profiles; worth knowing rather than assuming.
   =========================================================================== */

footer nav.social a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
footer nav.social a::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

footer nav.social a[href*="x.com"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 1.5h3.6l-7.9 9 9.3 12h-7.3l-5.7-7.4-6.5 7.4H.8l8.4-9.6L.4 1.5h7.5l5.1 6.8zM17.6 20.4h2L6.5 3.4H4.3z'/%3E%3C/svg%3E");
}
footer nav.social a[href*="instagram"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2.6' y='2.6' width='18.8' height='18.8' rx='5.4'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
footer nav.social a[href*="tiktok"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.3 1.5c.4 2.7 1.9 4.3 4.5 4.5v3c-1.5.1-2.9-.3-4.4-1.2v6.6c0 5.6-6.1 8.4-10.1 4.4-3.1-3.1-2.1-8.4 2.2-9.6.8-.2 1.6-.2 2.4-.1v3.1c-1.9-.3-3.2.8-3.2 2.4 0 1.5 1.3 2.6 2.7 2.4 1.4-.1 2.4-1.2 2.4-2.7V1.5z'/%3E%3C/svg%3E");
}
footer nav.social a[href*="facebook"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.7-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.2c-1.2 0-1.6.8-1.6 1.6V12h2.7l-.4 2.9h-2.3v7A10 10 0 0 0 22 12z'/%3E%3C/svg%3E");
}
footer nav.social a[href*="reddit"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='12' cy='13.4' r='8.4'/%3E%3Ccircle cx='9' cy='12.6' r='1.1' fill='%23000' stroke='none'/%3E%3Ccircle cx='15' cy='12.6' r='1.1' fill='%23000' stroke='none'/%3E%3Cpath d='M9 16.6c1.7 1.2 4.3 1.2 6 0' stroke-linecap='round'/%3E%3Cpath d='M15.4 5.1 16.2 2l3 .8' stroke-linecap='round'/%3E%3Ccircle cx='19.6' cy='3.1' r='1.5' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
footer nav.social a[href*="bsky"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 10.3C10.7 7.8 7.1 3.1 3.8 2.3 2.2 1.9 1 2.6 1 4.7c0 1.9 1.1 8 1.8 9 1.2 1.7 3.1 1.5 5 1.1-3.3.6-4.1 2.4-2.3 4.3 3.4 3.5 4.9-.9 5.3-2 .1-.3.2-.6.2-.6s.1.3.2.6c.4 1.1 1.9 5.5 5.3 2 1.8-1.9 1-3.7-2.3-4.3 1.9.4 3.8.6 5-1.1.7-1 1.8-7.1 1.8-9 0-2.1-1.2-2.8-2.8-2.4-3.3.8-6.9 5.5-8.2 8z'/%3E%3C/svg%3E");
}
footer nav.social a[href*="linkedin"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.9 3.5a2.1 2.1 0 1 1 0 4.2 2.1 2.1 0 0 1 0-4.2zM3.1 9.2h3.6v11.3H3.1zM9.4 9.2h3.4v1.6h.1c.5-.9 1.7-1.8 3.4-1.8 3.6 0 4.3 2.3 4.3 5.4v6.1h-3.6v-5.4c0-1.3 0-2.9-1.8-2.9s-2.1 1.4-2.1 2.8v5.5H9.4z'/%3E%3C/svg%3E");
}
footer nav.social a[href*="youtube"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.5 7.1a2.8 2.8 0 0 0-2-2C18.8 4.6 12 4.6 12 4.6s-6.8 0-8.5.5a2.8 2.8 0 0 0-2 2C1 8.8 1 12 1 12s0 3.2.5 4.9a2.8 2.8 0 0 0 2 2c1.7.4 8.5.4 8.5.4s6.8 0 8.5-.5a2.8 2.8 0 0 0 2-2c.5-1.6.5-4.8.5-4.8s0-3.2-.5-4.9zM9.8 15.3V8.7l5.7 3.3z'/%3E%3C/svg%3E");
}
footer nav.social a[href*="substack"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 3.5h17v2.6h-17zM3.5 8.1h17v2.6h-17zM3.5 12.7 12 17l8.5-4.3v7.8L12 24l-8.5-3.5z'/%3E%3C/svg%3E");
}

@media (max-width: 650px) {
  footer nav.social { gap: 10px 14px; }
  footer nav.social a::before { width: 14px; height: 14px; }
  footer nav.social a { gap: 6px; }
}

/* ---------- 12 · THE DATELINE MOVES DOWN ----------
   His ask, 09-20-2026: put "An independent customer perspective • September
   20, 2026" directly above "The case for a better relationship".

   ⭐ THE TEXT CHANGED 09-23-2026 and now reads "We are all on the same ship •
   September 20, 2026". His ask above still governs the POSITION; only the
   words changed. He rejected the old phrasing as corporate, and he was right
   about something sharper: "customer perspective" is the vocabulary of the
   thing this site argues against — it is how a company refers to listening,
   and it turns a person into an input category.

   ⚠ AND THE ORDERING BELOW IS WHY THE NEW WORDING WORKS. Because the line is
   FIRST in the source, a screen reader and a crawler meet it before anything
   else on the page. Two earlier candidates — "We all use it" and "What it's
   actually like" — would have arrived there with a pronoun pointing at
   nothing. His phrase has no pronoun, so it reads correctly whether it is met
   first (by a screen reader) or fourth (by eye). ⛔ Do not swap it for a
   shorter line without checking that the shorter line survives being read
   first.

   Done with flex ORDER rather than by moving the markup: the dateline stays
   first in the source, where a screen reader and a search engine meet it as
   the article's byline, and only its visual position changes. */
.opening-copy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.opening-copy > figure      { order: 1; }
.opening-copy > h1          { order: 2; }
.opening-copy > .hero-deck  { order: 3; }
.opening-copy > .eyebrow    { order: 4; margin-top: 4px; margin-bottom: 14px; }
.opening-copy > .text-link  { order: 5; }

/* ===========================================================================
   13 · THE TOP OF THE START PAGE — his three asks, 09-20-2026
   "center justify the menu buttons on the top of the start page and move up
   the image higher up, close to the buttons and decrease the space between
   first and 2nd line of top menu buttons"

   Measured before: nav left-aligned · 47px between nav rows · 45px of empty
   space between the header and the artwork · header 223px tall.
   =========================================================================== */

/* 1 · the menu centres */
header nav {
  justify-content: center;
  text-align: center;
}

/* 2 · the rows close up.
   47px came from a 10px row gap PLUS 9px of padding above and below each
   link. Both come down. ⚠ The padding is also the finger target, so it is
   trimmed rather than removed: ~32px tall, still comfortably above the 24px
   minimum, below the 44px ideal. Tightened at his ask, and said plainly. */
header nav { gap: 2px 16px; }
header nav a { padding: 6px 0; }

/* 3 · the artwork moves up to meet the menu */
.opening { padding-top: 10px; }
.opening-copy > figure { margin-top: 0; }
.opening figure { margin-bottom: 22px; }

@media (max-width: 650px) {
  header nav { gap: 2px 14px; }
  .opening { padding-top: 8px; }
}

/* 3b · AND THE RESEARCH PAGE'S MENU CENTRES TOO — it never did.
   His instruction of 09-20-2026 was "all are center justified across site",
   and every nav obeyed it except this one. The cause is in research.css:
   `@media(max-width:700px){ .research nav{justify-content:start} }`. That
   selector carries a CLASS, so it outranks the `header nav` rule above no
   matter which sheet loads last — the centering was never reaching this page,
   and nothing looked broken because left-aligned is a normal thing to be.
   `.research header nav` outranks it in turn. Found 09-20-2026 while adding
   "What people shared" to the menus. */
@media (max-width: 700px) {
  .research header nav {
    justify-content: center;
    text-align: center;
  }
}

/* 14 · "Hey Apple, we deserve more than a waitlist." moves up to sit close under the caption.
   His ask, 09-20-2026. The gap was the figure's own bottom margin plus the
   headline's top margin stacking; both come down. */
.opening figure { margin-bottom: 10px; }
.opening figcaption { margin-bottom: 0; padding-bottom: 6px; }
.opening h1 { margin-top: 6px; }

/* ===========================================================================
   15 · THE IMAGE AND THE HEADLINE BOTH FIT ON A PHONE SCREEN
   His ask, 09-20-2026: "we want the image and 'we're more than a waitlist' to
   fully load and be present on phone screen". (The headline was reworded to
   "Hey Apple, we deserve more than a waitlist." on 09-21-2026; his words above
   are left exactly as he said them.)

   ⭐ THE UNIT MATTERS AND IT IS THE WHOLE TRICK. A phone reports a 812px CSS
   viewport, but Safari's address bar and toolbar cover roughly 150px of it, so
   sizing against `vh` fits the layout to a screen the reader cannot fully see.
   `svh` — the SMALL viewport height — is the height WITH that chrome showing,
   which is exactly "what is actually on screen".

   The artwork is given whatever is left after the header, the caption and the
   headline have taken theirs, so both of the things he named are above the
   fold on a real handset.
   ⚠ `vh` first as a fallback for anything older than iOS 15.4.

   ⛔ THE NUMBER BELOW IS THE HEIGHT OF EVERYTHING THAT IS NOT THE IMAGE, AND IT
   IS HAND-MEASURED — so it goes stale the moment the header changes. It was
   356px while the phone nav wrapped to TWO rows. Adding "What people shared"
   on 09-20-2026 made it THREE (one row is 33px at this width), which left the
   headline clearing a 667px screen by 12px instead of 45px. 356 + 33 = 389.
   ⚠ If a nav item is ever added or removed again, measure the header at 375px
   wide and move this number by the same amount, or the artwork quietly grows
   until it pushes "Hey Apple, we deserve more than a waitlist" off the screen. */
@media (max-width: 650px) {
  /* ⛔ THE FORCED BREAK IN THE HEADLINE COMES OUT ON A PHONE, and this is what
     keeps the headline on screen rather than any change to the type size.
     "Hey Apple, we deserve <br> more than a waitlist." (09-21-2026) is 43
     characters where the old headline was 27. With the <br> honoured, the
     break lands after "deserve" and BOTH halves are still too wide for a
     375px column, so each wraps again: FOUR lines, 168px tall, and the
     headline he asked to keep on screen finished 39px BELOW the fold.
     Letting the browser choose the breaks gives three lines at 126px with the
     type size untouched — the break was the whole problem, not the size.
     ⚠ index.html carries a SPACE before that <br> on purpose. Hiding a <br>
     with no space around it glues the words together ("deservemore"), which
     is a real bug this file has shipped once before. */
  .opening h1 br { display: none; }
  .opening h1 { text-wrap: balance; }
  /* 09-25-2026: the headline is now a question and an invitation ("After the wait, what's Siri
     really like? / Share your experience."). The question may wrap freely, but the blue invitation
     keeps its own line, as on a desktop, so it never starts mid-line after the question. */
  .opening h1 em { display: block; }

  .opening figure img {
    /* 389 + 42: the headline is one line taller here than it was. */
    max-height: calc(100vh - 431px);
    max-height: calc(100svh - 431px);
    min-height: 200px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .opening figure { margin-bottom: 8px; }
  .opening figcaption { font-size: 12.5px; line-height: 1.45; padding-bottom: 4px; }
  .opening h1 { margin-top: 4px; margin-bottom: 18px; }

  /* the header gives back a little so the artwork has more to work with */
  header { padding-top: 6px; padding-bottom: 6px; }
  header .site-logo img { width: 142px; height: 47px; }
}

/* 16 · LIGHT IS THE DEFAULT (his instruction, 09-20-2026).
   theme.css still answers `prefers-color-scheme: dark` for readers who choose
   Auto. This turns that off for everyone who has NOT chosen, so the page does
   not flash dark before theme.js runs on a device set to dark.
   ⛔ Scoped with :not([data-theme]) so an explicit Dark choice still wins. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --s-bg:#fff; --s-panel:#f5f5f7; --s-ink:#1d1d1f; --s-soft:#6e6e73;
    --s-rule:#d2d2d7; --s-rule-soft:#e5e5ea; --s-link:#0066cc;
    --s-accent:#0071e3; --s-header:rgba(255,255,255,.94);
    --s-switch-bg:rgba(0,0,0,.05); --s-switch-on:#fff;
    color-scheme: light;
  }
}

/* ===========================================================================
   17 · THE THEME SWITCH BECOMES A PILL THAT OPENS
   His ask, 09-20-2026. Closed it shows only what is currently on — the one
   thing a reader needs — and gives the header back about 90px of width.
   =========================================================================== */

.theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: none;
}

.theme-toggle {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 15px;
  border-radius: 980px;
  background: var(--s-switch-bg, rgba(0,0,0,.05));
  color: var(--s-ink, #1d1d1f);
}
.theme-toggle:hover { filter: brightness(.96); }
.theme-toggle:focus-visible { outline: 3px solid var(--s-accent, #0071e3); outline-offset: 3px; }

/* a small mark for the mode that is on — sun, moon, or half-and-half */
.theme-toggle::before {
  content: "";
  width: 15px; height: 15px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--mode-ico) center / contain no-repeat;
  mask: var(--mode-ico) center / contain no-repeat;
}
.theme-switch[data-mode="light"] .theme-toggle,
.theme-switch:not([data-mode]) .theme-toggle {
  --mode-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.4'/%3E%3Cpath d='M12 1.8v2.6M12 19.6v2.6M4.4 4.4l1.9 1.9M17.7 17.7l1.9 1.9M1.8 12h2.6M19.6 12h2.6M4.4 19.6l1.9-1.9M17.7 6.3l1.9-1.9'/%3E%3C/svg%3E");
}
.theme-switch[data-mode="dark"] .theme-toggle {
  --mode-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.3A8.8 8.8 0 0 1 9.7 3.5a8.8 8.8 0 1 0 10.8 10.8z'/%3E%3C/svg%3E");
}
.theme-switch[data-mode="auto"] .theme-toggle {
  --mode-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 3.4a8.6 8.6 0 0 1 0 17.2z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* the three choices, revealed under the pill */
.theme-options {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 980px;
  background: var(--s-bg, #fff);
  border: 1px solid var(--s-rule, #d2d2d7);
  box-shadow: 0 6px 22px rgba(0,0,0,.14);
}
.theme-options[hidden] { display: none; }
.theme-options button {
  appearance: none; border: 0; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 500; line-height: 1;
  color: var(--s-soft, #6e6e73);
  padding: 0 13px; min-height: 38px; border-radius: 980px;
  background: none; white-space: nowrap;
}
.theme-options button:hover { color: var(--s-ink, #1d1d1f); }
.theme-options button[aria-pressed="true"] {
  background: var(--s-switch-on, #f5f5f7);
  color: var(--s-ink, #1d1d1f);
}
.theme-options button:focus-visible { outline: 3px solid var(--s-accent, #0071e3); outline-offset: 2px; }

@media (max-width: 650px) {
  .theme-toggle { min-height: 38px; padding: 0 13px; font-size: 12.5px; }
  .theme-options button { min-height: 40px; }
}

/* speech bubbles, plural — other people's accounts */
footer > div a[href*="shared.php"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 13.5a6 6 0 0 1-6 6H7.5L4 22v-4.4a6 6 0 0 1 3.5-10.6h4a6 6 0 0 1 6 6z'/%3E%3Cpath d='M9.6 4.6A6 6 0 0 1 14 2.5h3a6 6 0 0 1 4.6 9.9'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   THE CREDIT SECTION — added 09-21-2026 at his approval, after the trademark
   research. It carries two things Apple's own third-party guidelines ask for:
   the disclaimer in their stated form (Section 3(e)) and a trademark
   attribution notice in a credit section (Section 3(f)).

   ⚠ "trademarks", not "registered trademarks": APPLE INTELLIGENCE is a PENDING
   application (serial 98776400, filed 09-29-2024), not a registration. Claiming
   otherwise would be inaccurate on a page whose point is accuracy.

   ⭐ It sits last and reads quiet on purpose. A disclaimer shouting for
   attention reads as anxiety; this is a credit, and credits are small. */
.site-legal {
  /* ⛔ ORDER IS LOAD-BEARING HERE. The footer is a flex column with explicit
     order values (the copyright is 99), so a new child with no order defaults
     to 0 and lands ABOVE the tagline and the social links — which is where
     this block first appeared. A credit section goes last, just before the
     copyright. Caught by looking at it, not by reading the DOM, which was in
     the right order the whole time. */
  order: 98;
  flex: 1 1 100%;
  max-width: 46rem;
  margin: 18px auto 0;
  padding-top: 14px;
  border-top: 1px solid var(--s-rule, #d2d2d7);
}
.site-legal p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--s-soft, #6e6e73);
  margin: 0 0 6px;
  text-wrap: pretty;
}
.site-legal p:last-child { margin-bottom: 0; }

@media (max-width: 650px) {
  .site-legal { margin-top: 14px; padding: 12px 4px 0; }
  .site-legal p { font-size: 12px; }
}

/* ---------------------------------------------------------------------------
   THE FOOTER WORDMARK IS CENTRED — his ask, 09-21-2026.

   ⛔ WHY text-align WAS NOT ENOUGH, and it measured as centred while plainly
   not being it. `footer .site-logo` is display:block, full width, and already
   carries text-align:center — so the ANCHOR's centre sat exactly on the
   footer's centre and any check of the anchor reported success. But the <img>
   inside is display:block with margin-right:0, and text-align does nothing to
   a block child. The mark sat at the left edge, 466px off centre at 1200px.
   ⭐ Measuring the box said centred; looking said otherwise. Only the second
   was right.

   ⚠ AND THE OPTICAL NUDGE IS KEPT, DELIBERATELY. theme.css shifts the image
   left — 11.9px at 190px wide, 10.7px at 170px, 10.3px at 165px. Those are all
   6.3% of the width: the wordmark PNG carries about that much empty space on
   its left, so the shift is what puts the visible INK where the box claims to
   be. Dropping it would centre the file and leave the mark looking right of
   centre. It moves from margin to transform so it offsets the centring rather
   than defeating it. */
footer .site-logo img {
  margin-left: auto;
  margin-right: auto;
  transform: translateX(-10.7px);
}

@media (max-width: 650px) {
  /* the footer mark is 170px here too, so the same 6.3% correction holds */
  footer .site-logo img { transform: translateX(-10.7px); }
}

/* =====================================================================
   09-21-2026 · THE PAGE YOU ARE ON, THE INVITATION, AND THE EXAMPLE
   ===================================================================== */

/* ⭐ The nav used to OMIT the current page. That is a real convention, but it
   left a reader with no way to tell where they were — and it is why the first
   published account looked, to its own author standing on that page, as though
   "What people shared" was missing from the menu entirely. Every page now
   names itself and marks it. */
header nav a[aria-current="page"] {
  color: var(--s-ink, #1d1d1f);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
}

/* The quiet pill. ⛔ Defined HERE because phone.css loads last: together.css
   and theme.css both set .pill's background, and the later file wins. */
.pill-quiet {
  background: transparent;
  color: var(--s-accent, #0071e3);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.pill-quiet:hover { background: var(--s-accent, #0071e3); color: #fff; }

/* ⛔⛔ THE DARK-MODE OVERRIDE, AND WHY IT HAS TO BE THIS SPECIFIC.
   theme.css carries `html[data-theme="dark"] .pill{background:var(--s-accent)}`
   — specificity (0,2,1) — which BEATS a bare `.pill-quiet` (0,1,0) no matter
   how late phone.css loads. So on a dark ground the quiet pill rendered with
   the SAME blue fill and black text as the primary one: two buttons that are
   supposed to read as primary and secondary, identical.
   ⚠ Found by measuring the computed colours on a dark ground, 09-21-2026 —
   not by reading this file, where it is invisible. Both dark paths are
   mirrored below: the explicit choice, and the system preference. */
html[data-theme="dark"] .pill-quiet {
  background: transparent;
  color: var(--s-accent, #0071e3);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
html[data-theme="dark"] .pill-quiet:hover {
  background: var(--s-accent, #0071e3); color: #000;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .pill-quiet {
    background: transparent;
    color: var(--s-accent, #0071e3);
    box-shadow: inset 0 0 0 1.5px currentColor;
  }
  html:not([data-theme="light"]) .pill-quiet:hover {
    background: var(--s-accent, #0071e3); color: #000;
  }
}

/* The invitation on the home page — a SECTION, not a banner.
   ⚠ His instruction, 09-21-2026: these two pages are the interactive part of
   the community and must be "emphasized properly but not in a tacky manner,
   beautiful and flowing in style of the rest of the site." So it borrows the
   page's own idiom — an eyebrow, a headline at the site's scale with a colored
   second line, one lede, and air — rather than a call-to-action strip.
   ⛔ Deliberately below the opening and the essay: it must not sit in the top
   third, where the illustration is on first load. */
.invite {
  max-width: 840px; margin: 0 auto;
  padding: 72px 35px 84px; text-align: center;
}
.invite .eyebrow { color: var(--s-soft, #6e6e73); font-size: 17px; }
.invite h2 {
  font-size: clamp(36px, 4.3vw, 57px); font-weight: 650;
  letter-spacing: -.03em; line-height: 1.08; margin: 10px 0 22px;
  text-wrap: balance;
}
.invite h2 span { color: var(--s-accent, #0071e3); }
.invite-lede {
  color: var(--s-soft, #6e6e73); font-size: 21px; line-height: 1.6;
  margin: 0 auto 32px; max-width: 34em; text-wrap: pretty;
}
.invite-actions, .closing-actions {
  display: flex; flex-wrap: wrap; gap: 13px; justify-content: center;
}
.invite-note {
  margin: 26px 0 0; font-size: 15px; line-height: 1.55;
  color: var(--s-soft, #6e6e73); text-wrap: pretty;
}
.closing-actions { margin-top: 8px; }
.closing-also { margin: 22px 0 0; font-size: 16px; }

/* The example account on the submission page. */
.example { max-width: 700px; margin: 0 auto 40px; }
.example details {
  background: var(--s-panel, #f5f5f7);
  border-radius: 18px; padding: 20px 24px;
}
.example summary {
  cursor: pointer; font-size: 16.5px; font-weight: 600;
  color: var(--s-ink, #1d1d1f); list-style-position: outside;
}
.example summary::marker { content: ""; }
/* ⭐ The site already has a disclosure idiom — together.css turns a <span> into
   a "+" that rotates 45° into a "×" on open, and hides the native marker
   site-wide. This box uses THAT, rather than inventing a second one. The only
   local change is scale: the research page's summaries are section headings at
   28px, and that is too loud for a box sitting above a form. */
.example summary span { font-size: 22px; line-height: 1; }
.example .who {
  font-size: 13.5px; color: var(--s-soft, #6e6e73);
  margin: 16px 0 4px; border-top: 1px solid var(--s-rule, #d2d2d7); padding-top: 16px;
}
.example dt {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--s-accent, #0071e3); font-weight: 650; margin: 14px 0 4px;
}
.example dd { margin: 0; font-size: 15.5px; line-height: 1.55; text-wrap: pretty; }
.example dd p { margin: 0 0 9px; }
.example dd p:last-child { margin-bottom: 0; }
.example .more { margin: 18px 0 0; font-size: 15px; }

@media (max-width: 650px) {
  .invite { padding: 48px 20px 58px; }
  .invite h2 { font-size: 36px; }
  .invite .eyebrow { font-size: 15px; }
  .invite-lede { font-size: 18px; margin-bottom: 26px; }
  .invite-actions .pill, .closing-actions .pill { width: 100%; }
  .example details { padding: 16px 18px; border-radius: 14px; }
}

/* =====================================================================
   09-21-2026 · READING THE ACCOUNTS, AND SHARING THEM
   ⛔ Every control here is hidden until browse.js unhides it. With no
   JavaScript the page is exactly what it was: every account, newest first.
   ===================================================================== */

.browse {
  max-width: 760px; margin: 0 auto 8px;
  border-top: 1px solid var(--s-rule, #d2d2d7);
  border-bottom: 1px solid var(--s-rule, #d2d2d7);
  padding: 16px 0;
}
.browse .count {
  margin: 0 0 12px; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--s-soft, #6e6e73); font-weight: 650;
}
.browse .count-note { margin: 0; font-size: 14px; color: var(--s-soft, #6e6e73); }
.browse-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
}
.browse-controls[hidden] { display: none; }

/* The two ways to read. A segmented control, because they are alternatives
   rather than a list of commands. */
.seg { display: inline-flex; border: 1px solid var(--s-rule, #d2d2d7); border-radius: 980px; overflow: hidden; }
.seg button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--s-soft, #6e6e73);
  padding: 9px 16px; min-height: 40px;
}
.seg button + button { border-left: 1px solid var(--s-rule, #d2d2d7); }
.seg button[aria-pressed="true"] {
  background: var(--s-accent, #0071e3); color: #fff; font-weight: 600;
}
/* Dark mode lightens the accent to #2997ff, where white text falls to 3.02:1.
   theme.css already solves this for .pill by switching to black; the segmented
   control does the same rather than inventing a different answer. */
html[data-theme="dark"] .seg button[aria-pressed="true"] { color: #000; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .seg button[aria-pressed="true"] { color: #000; }
}
.browse .order { font-size: 15px; color: var(--s-soft, #6e6e73); }
.browse .order select {
  font: inherit; font-size: 15px; margin-left: 6px; padding: 8px 6px;
  min-height: 40px; border-radius: 8px;
  border: 1px solid var(--s-rule, #d2d2d7);
  background: var(--s-bg, #fff); color: var(--s-ink, #1d1d1f);
}
/* ⛔ `--s-field` DOES NOT EXIST on this site — the variable is `--s-bg`.
   A misspelt custom property falls back silently, so the select rendered
   dark-mode text (#f5f5f7) on the literal fallback #fff: 1.09:1, effectively
   invisible, while looking perfectly theme-aware in the source. Measured on a
   dark ground 09-21-2026. This is the shape the shared rules warn about: a
   palette variable is not a check. */
.share-page, .share-one {
  appearance: none; cursor: pointer; font: inherit;
  background: transparent; color: var(--s-accent, #0071e3);
  border: 1px solid currentColor; border-radius: 980px;
}
.share-page { font-size: 15px; padding: 8px 16px; min-height: 40px; margin-left: auto; }
.share-one { font-size: 13px; padding: 5px 12px; min-height: 32px; margin-left: auto; }
.share-page:hover, .share-one:hover { background: var(--s-accent, #0071e3); color: #fff; }
.share-page.said, .share-one.said { border-color: #1d7a4c; color: #1d7a4c; background: transparent; }

/* Reading one question across everybody. */
.qgroup { padding: 34px 0; border-top: 1px solid var(--s-rule, #d2d2d7); }
.qgroup:first-child { border-top: 0; }
.qgroup h2 {
  font-size: clamp(24px, 3.4vw, 34px); font-weight: 650;
  letter-spacing: -.02em; margin: 0 0 4px; text-wrap: balance;
}
.qcount {
  margin: 0 0 22px; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--s-soft, #6e6e73); font-weight: 650;
}
.qanswer { margin: 0 0 22px; padding-left: 16px; border-left: 2px solid var(--s-rule, #d2d2d7); }
.qanswer:last-child { margin-bottom: 0; }
.qbody { font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.qwho { margin: 7px 0 0; font-size: 14px; color: var(--s-soft, #6e6e73); }
.qwho a { color: inherit; }

/* Someone arriving from a shared link should be shown where they landed. */
.entry.landed { animation: landed 2.6s ease-out; }
@keyframes landed {
  0%, 62% { box-shadow: -14px 0 0 -11px var(--s-accent, #0071e3); }
  100%    { box-shadow: -14px 0 0 -11px transparent; }
}
@media (prefers-reduced-motion: reduce) { .entry.landed { animation: none; } }

@media (max-width: 650px) {
  .browse-controls { gap: 10px 12px; }
  .seg button { padding: 9px 13px; font-size: 14.5px; }
  .share-page { margin-left: 0; width: 100%; }
  .qgroup { padding: 26px 0; }
  .qbody { font-size: 16.5px; }
}

/* =====================================================================
   09-21-2026 · THE FOUR THINGS THAT MAKE IT LOOK ALIVE
   ⛔ Every live element carries the hidden attribute in the markup and is
   revealed only by live.js. A page with no JavaScript, or a failed request,
   simply shows nothing extra — never an empty box or a spinner.
   ===================================================================== */

/* The newest account, quoted on the home page. */
.latest {
  margin: 30px auto 0; max-width: 34em; padding: 0 0 0 18px;
  border-left: 2px solid var(--s-accent, #0071e3); text-align: left;
}
.latest[hidden] { display: none; }
.latest .latest-line {
  margin: 0; font-size: 19px; line-height: 1.5;
  color: var(--s-ink, #1d1d1f); text-wrap: pretty;
}
.latest .latest-who {
  margin: 9px 0 0; font-size: 14.5px; color: var(--s-soft, #6e6e73);
}

/* When the site last changed. Quiet on purpose — it is proof, not news. */
.site-updated {
  font-size: 13px; color: var(--s-soft, #6e6e73); margin: 0;
}
.site-updated[hidden] { display: none; }

/* What would have helped — the fourth question on its own. */
.helps .help {
  margin: 0 0 30px; padding: 0 0 0 20px;
  border-left: 3px solid #1d7a4c; text-align: left;
}
html[data-theme="dark"] .helps .help { border-left-color: #4cc38a; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .helps .help { border-left-color: #4cc38a; }
}
.helps .help-body {
  font-size: 19px; line-height: 1.55; text-wrap: pretty;
  color: var(--s-ink, #1d1d1f);
}
.helps .help-who {
  margin: 10px 0 0; font-size: 14px; color: var(--s-soft, #6e6e73);
}
.helps .cta .pill + .pill { margin-left: 10px; }

/* ⚠ Added 09-27-2026. This page never had the frame What people shared gets
   from its inline <style> (shared.php:61-99), so since 09-21 it ran edge to
   edge on a phone, with no panel behind the intro and a bare link for a button.
   The same values, scoped to .helps so shared.php is untouched. */
main.helps { max-width: 760px; margin: 0 auto; padding: 30px 25px 90px; }
.helps h1 {
  font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -.045em; line-height: 1.07;
  margin: 8px 0 12px; font-weight: 650; text-wrap: balance;
}
.helps .standfirst {
  font-size: 19px; line-height: 1.55; color: var(--s-soft, #6e6e73);
  margin: 0 0 14px; text-wrap: pretty;
}
.helps .about {
  background: var(--s-panel, #f5f5f7); border-radius: 18px;
  padding: 22px 24px; margin: 0 0 38px; text-align: left;
}
.helps .about p {
  font-size: 15.5px; line-height: 1.6; color: var(--s-soft, #6e6e73);
  margin: 0 0 11px; text-wrap: pretty;
}
.helps .about p:last-child { margin-bottom: 0; }
.helps .about strong { color: var(--s-ink, #1d1d1f); font-weight: 600; }
.helps .empty {
  background: var(--s-panel, #f5f5f7); border-radius: 18px;
  padding: 34px 28px; text-align: left;
}
.helps .empty h2 { font-size: 21px; font-weight: 650; margin: 0 0 12px; letter-spacing: -.02em; }
.helps .empty p {
  font-size: 16.5px; line-height: 1.6; color: var(--s-soft, #6e6e73);
  margin: 0 0 13px; text-wrap: pretty;
}
.helps .empty p:last-child { margin-bottom: 0; }
.helps .cta { margin: 44px 0 0; text-align: center; }
.helps .cta .pill {
  display: inline-block; background: var(--s-accent, #0071e3); color: #fff;
  border-radius: 980px; padding: 14px 28px; font-size: 17px;
  text-decoration: none; min-height: 50px;
}
.helps .cta .pill:hover { filter: brightness(1.08); }

/* The thank-you page, which used to be a full stop. */
.sent-others, .sent-pass {
  margin: 38px 0 0; padding: 26px 0 0;
  border-top: 1px solid var(--s-rule, #d2d2d7); text-align: left;
}
.sent-others h2, .sent-pass h2 {
  font-size: 21px; font-weight: 650; letter-spacing: -.015em; margin: 0 0 16px;
}
.sent-quote {
  margin: 0 0 18px; padding: 0 0 0 16px;
  border-left: 2px solid var(--s-rule, #d2d2d7);
}
.sent-quote p { margin: 0; font-size: 16.5px; line-height: 1.5; text-wrap: pretty; }
.sent-quote footer { margin-top: 6px; font-size: 14px; color: var(--s-soft, #6e6e73); }
.sent-pass p { font-size: 16.5px; line-height: 1.6; text-wrap: pretty; }
.sent-pass .pill { border: 0; cursor: pointer; font: inherit; font-size: 17px; }

@media (max-width: 650px) {
  .latest { margin-top: 26px; padding-left: 14px; }
  .latest .latest-line { font-size: 17.5px; }
  main.helps { padding: 18px 18px 60px; }
  .helps .about { padding: 18px 20px; }
  .helps .help-body { font-size: 17.5px; }
  .helps .cta .pill { display: block; margin: 0 0 10px; }
  .helps .cta .pill + .pill { margin-left: 0; }
}

/* =====================================================================
   09-21-2026 · "I'M NOT A ROBOT"
   ⛔ The box carries the hidden attribute in the markup and is revealed by
   human.js — without JavaScript the noscript note explains instead.
   ===================================================================== */
.human { margin: 30px 0 6px; }
.human[hidden] { display: none; }
.human-box {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 14px 18px; cursor: pointer;
  background: var(--s-panel, #f5f5f7);
  border: 1px solid var(--s-rule, #d2d2d7); border-radius: 14px;
  transition: border-color .15s;
}
.human-box input {
  width: 24px; height: 24px; margin: 0; flex: none; cursor: pointer;
  accent-color: var(--s-accent, #0071e3);
}
.human-box input:disabled { cursor: default; }
.human-text { font-size: 17px; font-weight: 600; color: var(--s-ink, #1d1d1f); }
.human-state {
  margin-left: auto; font-size: 14.5px; color: var(--s-soft, #6e6e73);
  display: inline-flex; align-items: center; gap: 7px; text-align: right;
}
.human.done .human-state { color: #1d7a4c; font-weight: 600; }
.human.done .human-state::before { content: "✓"; font-size: 16px; }
html[data-theme="dark"] .human.done .human-state { color: #4cc38a; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .human.done .human-state { color: #4cc38a; }
}
.human.needed .human-box { border-color: var(--s-accent, #0071e3); box-shadow: 0 0 0 3px rgba(0,113,227,.18); }
/* ⚠ Not --s-accent: #0071e3 on the light grey panel measured 4.31:1, under the
   4.5 floor for text this size. --s-link is the site's own darker blue for text. */
.human.needed .human-state { color: var(--s-link, #0066cc); font-weight: 600; }
.human-mark { display: none; }
.human.working .human-mark {
  display: block; width: 18px; height: 18px; flex: none; margin-left: -4px;
  border-radius: 50%; border: 2px solid var(--s-rule, #d2d2d7);
  border-top-color: var(--s-accent, #0071e3);
  animation: human-spin .8s linear infinite;
}
@keyframes human-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .human.working .human-mark { animation: none; } }
.human-note { margin: 9px 2px 0; font-size: 13.5px; line-height: 1.5; color: var(--s-soft, #6e6e73); }
.human-noscript {
  margin: 26px 0 0; padding: 14px 18px; border-radius: 14px;
  background: var(--s-panel, #f5f5f7); font-size: 15px; color: var(--s-ink, #1d1d1f);
}
@media (max-width: 650px) {
  .human-box { padding: 13px 15px; gap: 12px; }
  .human-text { font-size: 16.5px; }
  .human-state { font-size: 14px; }
}

/* ===========================================================================
   THE DATED UPDATE UNDER THE HEADLINE — 09-24-2026, his "lets do them".
   Siri AI reached his iPhone on 09-23 with no notification, email or Settings
   line; the headline stays his, and this line dates the moment it moved on.
   Tokens only, so it reads on both grounds. Sits after the deck on phones too.
   =========================================================================== */
.opening .opening-copy > p.hero-update {
  order: 3;
  max-width: 620px;
  margin: 6px auto 26px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--s-panel, #f5f5f7);
  color: var(--s-soft, #6e6e73);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.opening .opening-copy > p.hero-update strong { color: var(--s-ink, #1d1d1f); font-weight: 600; }
.opening .opening-copy > p.hero-update a { color: var(--s-accent, #0071e3); white-space: nowrap; }
@media (max-width: 650px) {
  .opening .opening-copy > p.hero-update { font-size: 16px; margin: 4px 0 20px; padding: 11px 14px; }
}

/* ===========================================================================
   SIRI, 2003 TO NOW — the start page's door to the life canvas, 09-24-2026.
   The headlines are the ones he published; the dot is the one he chose.
   =========================================================================== */
.siri-now{max-width:860px;margin:0 auto;padding:70px 24px 60px;text-align:center}
.siri-now h2 span{color:var(--s-accent,#0071e3)}
.siri-now-lede{font-size:20px;line-height:1.55;color:var(--s-soft,#6e6e73);max-width:640px;margin:0 auto 22px;text-wrap:pretty}
.siri-now-news{list-style:none;margin:0 auto 26px;padding:0;max-width:640px;text-align:left}
.siri-now-news li{display:grid;grid-template-columns:18px 1fr;column-gap:10px;padding:12px 0;border-top:1px solid var(--s-rule-soft,#e5e5ea)}
.siri-now-news li:first-child{border-top:0}
.siri-now-news .nd{width:11px;height:11px;border-radius:50%;margin-top:7px;grid-row:span 2}
.siri-now-news .nd-meant{background:#8e8e93}
.siri-now-news .nd-make{background:linear-gradient(135deg,#5e5ce6,#bf5af2 38%,#ff375f 70%,#ff9f0a)}
.siri-now-news a{font-size:17px;font-weight:600;line-height:1.35;color:var(--s-ink,#1d1d1f)}
.siri-now-news .nm{font-size:13.5px;color:var(--s-soft,#6e6e73);margin-top:2px}
@media (max-width:650px){ .siri-now{padding:45px 18px 40px} .siri-now-lede{font-size:18px} }

/* ===========================================================================
   THE OPENER ABOVE THE HEADLINE — his line, 09-24-2026: "Drum roll please, is Siri finally
   here?" Playful first, then the headline says plainly what the site is (the header rule).
   Same flex order as the headline, and first in the source, so it sits directly above it.
   =========================================================================== */
.opening .opening-copy > p.hero-kicker {
  order: 2;
  margin: 0 auto 10px;
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--s-soft, #6e6e73);
  text-wrap: balance;
}
@media (max-width: 650px) {
  .opening .opening-copy > p.hero-kicker { font-size: 19px; margin-bottom: 6px; }
}

/* ===========================================================================
   THE HERO, REBALANCED — 09-24-2026, his words: "the text sizes are off the chart! … fix the font
   sizes on the headers and make it look right! … how will this header work with intention of the
   siriology and fit the main graphic which is still key and inspiration of the site."

   ⭐ The artwork stays the hero. On a computer it sits LEFT and the words RIGHT — the same
   arrangement as the share card — so the page reads as one story, left to right:
     the artwork  = the wait (his, September 19, with its caption "we deserve more than a waitlist")
     the opener   = "Drum roll please, is Siri finally here?"
     the headline = what the site is, and the invitation
     the update   = his answer: it arrived on the 23rd, and nothing told him.
   On a phone the same order simply stacks.

   ⚠ WHY THE SIZES WERE WRONG: the headline kept the 112px set for the old, shorter line; the new
   one wrapped into three lines with a single word alone. Sizes below are measured against the
   column they sit in, not the viewport.
   =========================================================================== */
.opening h1 { font-size: clamp(38px, 6vw, 60px); letter-spacing: -.045em; line-height: 1.06; text-wrap: balance; }
.opening .hero-deck { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; }
.opening .opening-copy > p.hero-kicker { font-size: clamp(18px, 1.6vw, 22px); }
.siri-now h2 { font-size: clamp(32px, 4vw, 50px); }
.opening figcaption { font-size: 13px; }

@media (min-width: 900px) {
  .opening { padding-top: 44px; padding-bottom: 30px; }
  .opening .opening-copy {
    display: grid;
    max-width: 1180px;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: 1fr auto auto auto auto auto auto 1fr;
    grid-template-areas:
      "art ."
      "art kicker"
      "art title"
      "art deck"
      "art update"
      "art link"
      "art dateline"
      "art .";
    column-gap: clamp(36px, 4.5vw, 64px);
    text-align: left;
    align-items: start;
  }
  .opening .opening-copy > figure       { grid-area: art; margin: 0; max-width: none; width: 100%; align-self: center; }
  .opening .opening-copy > p.hero-kicker { grid-area: kicker; margin: 0 0 10px; }
  .opening .opening-copy > h1           { grid-area: title; margin: 0 0 18px; }
  .opening .opening-copy > .hero-deck   { grid-area: deck; margin: 0 0 20px; max-width: 34em; }
  .opening .opening-copy > p.hero-update{ grid-area: update; margin: 0 0 18px; max-width: 34em; text-align: left; }
  .opening .opening-copy > .text-link   { grid-area: link; justify-self: start; }
  .opening .opening-copy > .eyebrow     { grid-area: dateline; margin: 14px 0 0; font-size: 13px; }
  .opening .opening-copy > .hero-deck strong { display: inline; }
  .opening .opening-copy > .hero-deck br { display: none; }
  .opening figcaption { text-align: left; margin-top: 12px; max-width: none; }
}

/* ---- 09-24-2026, his word: an "appetizer" of the Siri life canvas on the start page ----
   Rebuilt the same day after his note ("the format … is very poorly done … You can do much
   better"): the heading centered, then ONE panel holding the canvas and the news side by side,
   the same arrangement as timeline.php, so the start page previews the page it leads to.
   The canvas appears only once live.js has the story; without it the panel is simply the
   news and the button, and the layout does not depend on it (:has on the art, not on order). */
.siri-now{max-width:1120px;margin:0 auto;padding:56px 24px 72px;text-align:center}
.siri-now-head{max-width:760px;margin:0 auto 28px}
.siri-now-head .siri-now-lede{margin-bottom:0;text-wrap:balance}
.siri-now-stage{background:var(--lc-paper,#f5f5f7);border-radius:28px;padding:18px;display:grid;grid-template-columns:1fr;gap:16px;text-align:left}
.siri-now-art{margin:0;padding:8px 4px 4px}
.siri-now-art[hidden]{display:none}
.siri-now-art .lc-canvas{min-height:0}
.siri-now-art .lc-mark{cursor:pointer}
.siri-now-key{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin-top:10px;font-size:13px;line-height:1.5;color:var(--s-soft,#6e6e73);text-align:center}
.siri-now-key > span{display:inline-flex;align-items:center;gap:5px}
.siri-now-key b{color:var(--s-ink,#1d1d1f);font-weight:600}
.siri-now-how{flex-basis:100%;justify-content:center}
.siri-now-side{background:var(--s-bg,#fff);border-radius:20px;padding:22px 24px 24px;display:flex;flex-direction:column}
.siri-now-newsh{font-size:21px;letter-spacing:-.02em;margin:0 0 4px;font-weight:650}
.siri-now-newsh:has(+ .siri-now-news[hidden]){display:none}
.siri-now-side .siri-now-news{margin:0 0 20px;max-width:none}
.siri-now-go{margin:auto 0 0;padding-top:4px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.siri-now-go span{font-size:15px;line-height:1.5;color:var(--s-soft,#6e6e73)}
@media (min-width:900px){
  .siri-now-stage:has(.siri-now-art:not([hidden])){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch;padding:22px}
  .siri-now-art{align-self:center}
}
@media (max-width:650px){
  .siri-now{padding:40px 16px 52px}
  .siri-now-stage{padding:12px;border-radius:22px}
  .siri-now-side{padding:18px 18px 20px}
}

/* ---- 09-24-2026, his note: "fix these short lines here on first section and else where" ----
   The phone rules above already balance short blocks; on a desktop nothing did, and the essay's
   paragraphs were never in the list, so "imagination." and "about it." stood alone. Every width
   now: headings and short centered blocks are BALANCED (all lines evened), running text is
   PRETTY (no word left alone on the last line). Browsers that do not know either ignore it. */
h1,h2,h3,.eyebrow,.perspective > p,.invite-lede,.invite-note,.siri-now-lede,.hero-deck,.hero-kicker,
.purpose > p,.purpose .lead,.together-heading > p,.closing > p,.principles p,figcaption,.lc-deck,.lc-sub{text-wrap:balance}
p,li,dd,summary{text-wrap:pretty}

/* ---- 09-24-2026, his note on "all the empty spaces between sections" ----
   Fixed padding, not anything loading: the essay's 90px bottom plus the invitation's 72px top
   made a 162px band of nothing between two white sections. Tightened on a desktop to one even
   rhythm; the grey "purpose" band keeps its own air because the color change already separates it. */
@media (min-width:651px){
  .perspective{padding-bottom:44px}
  .invite{padding-top:44px;padding-bottom:40px}
  .purpose{padding-top:80px}
}
.siri-now-news .nd-open{background:transparent;box-shadow:inset 0 0 0 2px #8e8e93}

/* ---- 09-25-2026, Payman: "Get updates" explains itself on the site before anyone leaves it ---- */
.updates{max-width:760px;margin:0 auto;padding:60px 24px 70px;text-align:center}
.updates h2{margin-bottom:14px}
.updates-lede{font-size:20px;line-height:1.55;color:var(--s-soft,#6e6e73);margin:0 auto 12px;max-width:620px}
.updates-how{font-size:16px;line-height:1.6;color:var(--s-soft,#6e6e73);margin:0 auto 22px;max-width:560px}
.updates-how strong{color:var(--s-ink,#1d1d1f);font-weight:600}
.updates-form{display:flex;flex-direction:column;align-items:center;gap:12px}
.updates-form button.pill{border:0;cursor:pointer;font:inherit;font-size:17px}
.updates-note{font-size:13.5px;color:var(--s-soft,#6e6e73);margin:0;max-width:460px}
.updates-form iframe{border-radius:14px}
@media (max-width:650px){ .updates{padding:44px 18px 52px} .updates-lede{font-size:18px} }

/* ===========================================================================
   10b · ICONS IN THE TOP MENU TOO, AND ONE SET FOR BOTH MENUS · 09-26-2026
   Payman: "please create and add appropriate icons for the menu items." This
   REVERSES the 09-20 note above ("no icons in the top nav"), at his word; the
   cost it named is handled below: on a phone the icons are smaller and the
   gaps tighter, so the menu does not grow a row.
   The same drawings serve the header menu and the footer links, keyed to each
   link's href, so a page and its menus always agree. Declared after section
   10, so these win for the footer too; that also fixes "Get updates", whose
   href moved to #updates on 09-25 and had fallen to the plain ring (start page)
   or the eye (every other page, via index.html#).
   =========================================================================== */
header nav a{
  display:inline-flex;align-items:center;gap:6px;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E");
}
header nav a::before{
  content:"";flex:none;width:15px;height:15px;background:currentColor;opacity:.85;
  -webkit-mask:var(--ico) center / contain no-repeat;mask:var(--ico) center / contain no-repeat;
}
/* an eye: a way of seeing */
:is(header nav, footer > div) a[href*="#essay"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.9'/%3E%3C/svg%3E");
}
/* a compass: what the site is for */
:is(header nav, footer > div) a[href*="#purpose"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M15.5 8.5l-2.2 4.8-4.8 2.2 2.2-4.8z'/%3E%3C/svg%3E");
}
/* a sprout: growing together */
:is(header nav, footer > div) a[href*="#together"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-8'/%3E%3Cpath d='M12 13C12 8.5 9 6 4.5 6c0 4.5 3 7 7.5 7z'/%3E%3Cpath d='M12 11c0-3.8 2.6-6 6.5-6 0 3.8-2.6 6-6.5 6z'/%3E%3C/svg%3E");
}
/* a page with lines: the deeper story and its sources */
:is(header nav, footer > div) a[href*="research"],
:is(header nav, footer > div) a[href="#sources"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9.5 12.5h5M9.5 16h5'/%3E%3C/svg%3E");
}
/* a list: the contents */
:is(header nav, footer > div) a[href="#contents"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6.5h11M9 12h11M9 17.5h11'/%3E%3Ccircle cx='4.5' cy='6.5' r='.9'/%3E%3Ccircle cx='4.5' cy='12' r='.9'/%3E%3Ccircle cx='4.5' cy='17.5' r='.9'/%3E%3C/svg%3E");
}
/* a speech bubble: sharing what happened */
:is(header nav, footer > div) a[href*="tell.php"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a7.5 7.5 0 0 1-7.5 7.5H8l-4.5 3V16A7.5 7.5 0 0 1 10.5 4h3A7.5 7.5 0 0 1 21 11.5z'/%3E%3C/svg%3E");
}
/* two speech bubbles: what people shared */
:is(header nav, footer > div) a[href*="shared.php"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 9.5a5.5 5.5 0 0 1-5.5 5.5H6.5l-3.5 2.5V14A5.5 5.5 0 0 1 8.5 4h1.5a5.5 5.5 0 0 1 5.5 5.5z'/%3E%3Cpath d='M9.8 18.2A5.5 5.5 0 0 0 14 20h3.5l3.5 2.5V19a5.5 5.5 0 0 0-2.6-9.5'/%3E%3C/svg%3E");
}
/* an orbit with marks: the Siri life canvas */
:is(header nav, footer > div) a[href*="timeline.php"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Ccircle cx='6.8' cy='8' r='.9'/%3E%3Ccircle cx='17.4' cy='9.4' r='.9'/%3E%3Ccircle cx='15' cy='17.2' r='.9'/%3E%3Cpath d='M7.5 15.8a6 6 0 0 0 3.2 2.1'/%3E%3C/svg%3E");
}
/* two people: the people at Apple */
:is(header nav, footer > div) a[href*="for-apple"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.5 2.7-6 6-6s6 2.5 6 6'/%3E%3Ccircle cx='17' cy='9' r='2.6'/%3E%3Cpath d='M16 14.2c2.9 0 5 2 5 5'/%3E%3C/svg%3E");
}
/* a page with a check: the terms */
:is(header nav, footer > div) a[href*="terms.html"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 14.5l2 2 4-4.5'/%3E%3C/svg%3E");
}
/* a shield: what is kept, and kept safe */
:is(header nav, footer > div) a[href*="privacy.html"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l7 2.8v5.6c0 4.3-2.9 8.1-7 9.9-4.1-1.8-7-5.6-7-9.9V5.6z'/%3E%3C/svg%3E");
}
/* an envelope: an email when something new arrives */
:is(header nav, footer > div) a[href*="#updates"],
:is(header nav, footer > div) a[href*="substack"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.6'/%3E%3Cpath d='M3.2 7.2l8.8 6.2 8.8-6.2'/%3E%3C/svg%3E");
}
/* a house: back to the start */
:is(header nav, footer > div) a[href="index.html"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 12 3.5l8.5 7'/%3E%3Cpath d='M5.5 9.8V20h13V9.8'/%3E%3C/svg%3E");
}
@media (max-width:650px){
  header nav a{gap:4px}
  header nav a::before{width:12px;height:12px}
}

/* ===========================================================================
   10c · ONE MENU, THE SAME ON EVERY PAGE · 09-26-2026
   Payman chose "a": one short menu everywhere, "Share your experience" as the
   button, the start page's own sections moved to the footer, and on phones the
   menu opens from one "Menu" button (added by theme.js).
   =========================================================================== */
header nav { gap: 6px 16px; align-items: center; }
header nav a { gap: 5px; }
header nav a::before { width: 14px; height: 14px; }
header nav a.nav-cta {
  background: var(--s-accent, #0071e3); color: #fff; border-radius: 980px;
  padding: 7px 13px; font-weight: 600; text-decoration: none;
}
header nav a.nav-cta:hover { filter: brightness(1.08); text-decoration: none; }
header nav a.nav-cta[aria-current="page"] { color: #fff; text-decoration: none; box-shadow: 0 0 0 2px var(--s-bg, #fff), 0 0 0 4px var(--s-accent, #0071e3); }
header .menu-toggle { display: none; }

@media (max-width: 650px) {
  header .menu-toggle {
    display: inline-flex; align-items: center; gap: 6px; order: 3; margin-left: 8px;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--s-ink, #1d1d1f);
    background: var(--s-panel, #f5f5f7); border: 0; border-radius: 980px; padding: 8px 13px; min-height: 40px; cursor: pointer;
  }
  header .menu-toggle::before {
    content: ""; width: 15px; height: 15px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  header .menu-toggle[aria-expanded="true"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  }
  header .theme-switch { margin-left: auto; order: 2; }
  /* icon only on phones, per the rule that light/dark takes as little space as possible; the button
     keeps its label "Color theme" for screen readers, and the open menu still names each choice */
  header .theme-toggle .theme-now { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  header nav { order: 4; }
  header.menu-ready nav { display: none; }
  header.menu-ready.menu-open nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 8px 0 6px; border-top: 1px solid var(--s-rule-soft, #e5e5ea); margin-top: 6px;
  }
  header.menu-open nav a { font-size: 17px; padding: 11px 4px; gap: 10px; }
  header.menu-open nav a::before { width: 18px; height: 18px; }
  header.menu-open nav a.nav-cta { order: -1; justify-content: center; margin-bottom: 6px; padding: 12px 14px; }
}