/* Cross-document transitions between the Aeons pages and Pleroma.
   Both documents have to opt in for the browser to animate between them, and
   styles.css is an untouched shared copy, so the opt-in lives in its own file
   that is added alongside it rather than edited into it. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 240ms; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* The home hero's two beats. Same reason this lives here rather than in
   styles.css: that file is an untouched shared copy, and this has to win
   against it, so it goes in the sheet that loads after.

   Animations, not transitions. A transition needs the element to be painted
   at one opacity and then changed to another, which means unhiding it and
   clearing the class in two separate frames — and if those frames never come,
   because the tab is in the background or rAF is throttled, the class is never
   cleared and the hero stays blank. That is not a cosmetic failure: the
   headline is the only text on this page. An animation starts by itself when
   the element begins being displayed, and `both` holds the final frame, so the
   resting state is opaque whether the animation ran, was throttled, or was
   switched off entirely. */
@keyframes hero-line-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-line-out { from { opacity: 1; } to { opacity: 0; } }

.home-hero-line { animation: hero-line-in 600ms ease both; }
.home-hero-line.is-leaving { animation: hero-line-out 600ms ease both; }

@media (prefers-reduced-motion: reduce) {
  .home-hero-line,
  .home-hero-line.is-leaving { animation: none; }
}

/* The language button is 31x31 — the one control on this half small enough to
   be awkward on a phone. styles.css already gives the nav links a 44px
   minimum on small screens; this brings the last one into line. Same technique
   as pleroma.css: the hit area grows, the drawn button does not, so nothing in
   the footer bar shifts.

   Safe against the menu it opens: .lang-menu sits above the button with an 8px
   gap and a higher z-index, and this reaches only 6.5px past the button's
   edge, so it can never swallow a tap meant for a language.

   The home link on the emblem gets the same treatment: it is 22px wide, and
   it is the way back to the front page from every prose page.

   Text links inside sentences are deliberately NOT included. Their size is set
   by the line height of the words around them, and growing them would put
   overlapping hit areas on adjacent lines — a tap landing on the wrong link is
   worse than a small one. Both the accessibility guidance and common sense
   make an exception for links in running text. */
#lang-toggle::after,
.center-logo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
}

.center-logo { position: relative; }

/* styles.css gives the nav a 44px minimum, but only under `max-width: 800px`.
   A phone held sideways is 844px wide, so it misses the query and gets the
   sizing meant for a mouse — the MENU button ends up under 24px on the one
   device that cannot afford it. Width was never the right question here;
   `pointer: coarse` asks the actual one, which is whether the thing doing the
   pointing is a finger. */
@media (pointer: coarse) {
  .menu-trigger-toggle { position: relative; }

  .menu-trigger-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 44px);
    height: max(100%, 44px);
  }
}

/* The thesis lockup on /beautiful-story/: a struck word and the word that
   replaces it. Same reason this lives here rather than in styles.css — that
   file is an untouched copy of the reference, and this is ours.

   The strike itself is the browser's own <s> rendering, not a border or a
   background gradient. That matters: a reader who overrides colours, or prints
   the page, or reads it through a translation proxy, still gets the line,
   because the line is what the element means rather than something painted
   over it.

   The struck word is dimmed rather than deleted. It has to stay legible —
   an argument you cannot read is not an argument. */
.thesis-lockup {
  margin: 0 0 1.4em;
  font-family: var(--serif-font);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  font-style: italic;
  font-weight: 400;
  text-wrap: balance;
}

.thesis-lockup s {
  opacity: 0.45;
  text-decoration-thickness: 0.05em;
  margin-inline-end: 0.15em;
}

/* The thesis line and the five audience lines. Both sit under the lockup on
   /beautiful-story/, and both are here rather than in styles.css for the same
   reason as everything else in this file: that sheet is an untouched copy.

   The list carries its own full stops, so the inherited bullet would be a
   second mark of punctuation on every line. styles.css draws that bullet with
   a ::before on li inside .letter-body, which is why turning it off takes
   content: none as well as list-style: none. */
.thesis-line {
  font-family: var(--serif-font);
  font-size: var(--text-title);
  font-style: italic;
  line-height: var(--leading-tight);
  margin: 0 0 1.6em;
}

.audience-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.audience-list li {
  padding-inline-start: 0;
  margin: 0.35em 0;
}

.audience-list li::before {
  content: none;
}

/* The letter opens on a greeting, and a greeting wants air under it rather
   than the paragraph spacing the rest of the prose uses. */
.letter-greeting {
  margin-top: 2.4em;
}

/* The three partner marks at the foot of /beautiful-story/.
   Full colour on a page that is otherwise paper and ink — that contrast is
   deliberate, so nothing here tints, desaturates or otherwise touches them.
   Every one of the three vendors forbids recolouring their mark in any case.

   Three separate things have to be true for a row like this to look right,
   and each is solved below rather than left to chance.

   Even spacing. Laid out as a flex row, the distance between marks is set by
   how wide each caption happens to be — "Microsoft Foundry" is half again the
   width of "Amazon Bedrock", so the marks end up unevenly spread. Equal grid
   columns make the spacing a property of the layout instead of the words, so
   it survives translation into a language with longer names.

   Aligned captions. The marks are not the same height, so a column that
   simply stacks image over text puts the three captions on three different
   lines. The first grid row is a fixed height with the mark centred inside
   it, which pins every caption to the same baseline whatever the artwork
   does.

   Optical sizing. Amazon's mark is a filled square reaching the edge of its
   own artboard; Google's and Microsoft's are open shapes floating in theirs.
   At equal heights the solid square reads noticeably heavier, so it is set
   smaller. The aim is three marks that look the same size, which is not the
   same as three marks that are the same size. */
.partner-marks {
  list-style: none;
  margin: 3.2em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 2em 1em;
  max-width: 34rem;
}

.partner-marks li {
  padding-inline-start: 0;
  margin: 0;
  display: grid;
  grid-template-rows: 3rem auto;
  /* Flush left, not centred in the cell. The columns are equal, so the marks
     stay evenly spaced either way — but starting them on the same edge the
     prose starts on ties the strip to the letter above it instead of leaving
     it floating a dozen pixels inboard of the text. */
  justify-items: start;
  align-items: center;
  gap: 0.8em;
}

/* styles.css draws a bullet on every li inside .letter-body */
.partner-marks li::before {
  content: none;
}

.partner-mark {
  display: block;
  width: auto;
  height: 2.75rem;
}

.partner-mark--boxed {
  height: 2.25rem;
}

.partner-name {
  font-family: var(--mono-font);
  font-size: var(--text-meta);
  line-height: 1.25;
  color: rgba(25, 24, 22, 0.62);
}

.theme-night .partner-name {
  color: rgba(240, 240, 240, 0.62);
}

/* On a phone the three-across grid cannot hold: at 390px it fits two columns,
   so the third mark drops to a row of its own and "Microsoft Foundry" wraps
   inside its column — an orphan beside a broken caption. Below the site's own
   520px breakpoint the strip becomes a single column and each mark sits beside
   its name rather than above it, which reads as a list and gives the longest
   name the full width it needs. */
@media (max-width: 520px) {
  .partner-marks {
    grid-template-columns: 1fr;
    gap: 1.15em;
    max-width: none;
  }

  .partner-marks li {
    grid-template-rows: auto;
    grid-template-columns: 2.75rem auto;
    justify-items: start;
    gap: 0.9em;
  }

  .partner-mark {
    height: 2.25rem;
  }

  .partner-mark--boxed {
    height: 1.9rem;
  }
}