/* About: a letter from the developer. Loaded after inner.css, and only on /about (with about.js).
   One idea: the page is set like a letter. A title page on the afternoon sky, with the sun standing in the space the
   title leaves open (about.js); the letter itself on one sheet of night glass, headings in the margin and a signature
   at the end; the house rules on the notch's black material with the orb in its header; and the page's one action,
   saying hello, on day glass with the address set almost as large as the title.
   One vertical axis holds it together: line two of the headline steps in to where "one" begins in line one, and the
   lede, the letter's text, the rules and the invitation to say hello all hang from that same line (--ab-b).
   Nothing here uses backdrop-filter or animates a blur. */

.inner .ab {
  /* the site's own measure, so the title, the sheets and the footer's columns share one left edge */
  --ab-max: var(--max);
  /* the headline size; both lines together are 11.21em wide, so 106px is the most that fits in 1200 */
  --ab-t: clamp(46px, 7.4vw, 106px);
  /* the axis: "Made by " measured in Geist 500 at -.058em is 3.77em */
  --ab-b: calc(var(--ab-t) * 3.77);
  /* the letter sheet's side padding, so its text column can land exactly on the axis */
  --ab-pad: clamp(22px, 5.4vw, 80px);
}
.inner .ab > * { max-width: var(--ab-max); }

/* ================================================================== the title page */
.inner .ab-hero { display: block; text-align: left; }
.ab-kicker { font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: #fff; }
.ab-title { margin-top: clamp(18px, 2.6vh, 28px); font-size: var(--ab-t); font-weight: 500; letter-spacing: -.058em; line-height: .94; color: #fff;
  text-shadow: 0 0 2px rgba(28, 58, 140, .3), 0 4px 50px rgba(28, 58, 140, .42); }
.ab-l1, .ab-l2 { display: block; }
.ab-l2 { padding-left: var(--ab-b); }
.ab-lede { margin: clamp(30px, 4.6vh, 52px) 0 0 var(--ab-b); max-width: 31em; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; letter-spacing: -.012em; color: #fff;
  text-wrap: pretty; text-shadow: 0 1px 14px rgba(28, 58, 140, .55); }
.ab-lede b { font-weight: 500; }
/* On this page things arrive by rising and fading, never by blurring: most of what reveals here is large type, and an
   animated filter on large type is re-rasterised every frame. The headline settles word by word. */
.ab [data-rv] { filter: none; }
.ab .kin .w { filter: none; transform: translateY(.22em); }
.ab .kin.in .w { transform: none; transition: opacity var(--reveal) var(--enter), transform 1100ms var(--enter); transition-delay: calc(var(--i) * 65ms + 80ms); }

/* ================================================================== the letter */
.inner .ab-letter { position: relative; margin-top: clamp(88px, 13vh, 132px); padding: clamp(34px, 6vw, 96px) var(--ab-pad) clamp(40px, 6.4vw, 104px); border-radius: 36px;
  background: rgba(8, 20, 52, .86); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(178, 200, 240, .17), inset 0 1px 0 rgba(210, 225, 252, .12), 0 50px 120px -50px rgba(2, 8, 30, .85); }
/* the rules panel arrives by rising, never by blurring (a blurred panel is re-rasterised every frame of the reveal) */
.ab-rules[data-rv] { filter: none; transform: translateY(48px); }
.ab-rules[data-rv].in { transform: none; transition-duration: 1100ms; }

.ab-sec { display: grid; grid-template-columns: calc(var(--ab-b) - var(--ab-pad)) minmax(0, 1fr); align-items: baseline; }
.ab-sec + .ab-sec { margin-top: clamp(64px, 8.4vw, 120px); }
/* margin headings: small, in the glacier ink, sharing the lead's first baseline (the grid aligns them) */
.ab-sec h2 { padding: 0 24px 0 0; font-size: 15px; font-weight: 500; letter-spacing: -.005em; line-height: 1.4; color: var(--accent); }
.ab-text { max-width: 40em; }
.ab-lead { max-width: 25em; font-size: clamp(22px, 2.05vw, 30px); line-height: 1.36; letter-spacing: -.024em; color: var(--ink); text-wrap: pretty; }
.ab-text p:not(.ab-lead) { max-width: 33em; margin-top: clamp(20px, 2vw, 28px); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.62; letter-spacing: -.008em; color: var(--ink-2); text-wrap: pretty; }
/* paragraphs settle as they come into view (pages.js); here they rise without the blur */
.pr-on .ab [data-pr] { filter: none; transform: translateY(12px); }
.pr-on .ab [data-pr].in { transform: none; }

/* the signature: the name, set like a hand would sign it, under the last paragraph */
.ab-sign { margin: clamp(64px, 8vw, 112px) 0 0 calc(var(--ab-b) - var(--ab-pad)); }
.ab-sign::before { content: ""; display: block; width: 40px; height: 1px; margin-bottom: 26px; background: rgba(178, 200, 240, .4); }
.ab-sign-name { font-size: clamp(26px, 2.3vw, 34px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; color: var(--ink); }
.ab-sign-role { margin-top: 8px; font-size: 15px; letter-spacing: -.005em; color: var(--ink-2); }

/* ================================================================== the rules, on notch material */
.inner .ab-rules { position: relative; margin-top: clamp(120px, 20vh, 200px); padding: clamp(10px, 1.4vw, 18px) var(--ab-pad) clamp(40px, 6vw, 88px); border-radius: 34px;
  background: #000; color: var(--n-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .08), 0 60px 110px -36px rgba(6, 16, 56, .7), 0 18px 40px -20px rgba(6, 16, 56, .5); }
/* the panel header, as in the app: the orb, then the panel's name */
.ab-rules-head { display: flex; align-items: center; gap: 12px; height: 54px; margin-left: -4px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--ui-text); }
.ab-orb { width: 26px; height: 26px; flex: none; }
.ab-rules-in { display: grid; grid-template-columns: calc(var(--ab-b) - var(--ab-pad)) minmax(0, 1fr); align-items: baseline; margin-top: clamp(32px, 4.2vw, 60px); }
.ab-rules h2 { max-width: 7em; padding-right: 32px; font-size: clamp(32px, 3.15vw, 46px); font-weight: 500; letter-spacing: -.045em; line-height: 1.02; color: #fff; text-wrap: balance; }
.ab-rule-list { list-style: none; padding: 0; margin: 0; }
.ab-rule-list li { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); align-items: baseline; gap: 8px 32px; padding: clamp(22px, 2.4vw, 30px) 0; border-top: 1px solid var(--n-hair); }
.ab-rule-list li:first-child { border-top: 0; padding-top: clamp(6px, .6vw, 10px); }
.ab-rule-list li:last-child { padding-bottom: 0; }
.ab-rule-list h3 { font-size: clamp(20px, 1.75vw, 24px); font-weight: 500; letter-spacing: -.026em; line-height: 1.2; color: #fff; }
.ab-rule-list p { max-width: 26em; font-size: 16px; line-height: 1.55; color: var(--n-ink-2); text-wrap: pretty; }

/* ================================================================== say hello, on day glass
   The page's one action, so it gets the light material the site keeps for actions: day glass as a tinted fill (never
   a backdrop blur over the live sky), opaque enough that small type keeps its contrast over the brightest cloud. */
.inner .ab-hello { position: relative; margin-top: clamp(120px, 18vh, 180px); padding: clamp(40px, 6vw, 96px) var(--ab-pad) clamp(30px, 4.4vw, 64px); border-radius: 36px;
  background: rgba(246, 248, 253, .9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), inset 0 1px 0 #fff, 0 50px 100px -40px rgba(24, 52, 128, .5), 0 14px 32px -14px rgba(24, 52, 128, .3); }
/* day ink on the day glass (set on the children: inner.css gives every part of the page night ink, more specifically) */
.inner .ab-hello > * { --ink: #0E0F12; --ink-2: rgba(14, 15, 18, .64); --rule: rgba(14, 15, 18, .11); --accent: #3a60b5; color: var(--ink); }
.ab-hello[data-rv] { filter: none; transform: translateY(48px); }
.ab-hello[data-rv].in { transform: none; transition-duration: 1100ms; }
/* the title in the margin column, the invitation on the axis, sharing a last line */
.ab-hello-h { display: grid; grid-template-columns: calc(var(--ab-b) - var(--ab-pad)) minmax(0, 1fr); align-items: end; }
.ab-hello-h h2 { padding-right: 24px; font-size: clamp(40px, 4.6vw, 68px); font-weight: 500; letter-spacing: -.05em; line-height: 1; white-space: nowrap; }
.ab-hello-h p { max-width: 30em; padding-bottom: .12em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; letter-spacing: -.012em; color: var(--ink-2); text-wrap: pretty; }
.ab-k { display: block; font-size: 14.5px; font-weight: 500; letter-spacing: -.005em; color: var(--accent); }
.ab-n { display: block; font-size: 16px; line-height: 1.45; color: var(--ink-2); }

/* the address is the headline of this part, and the easiest thing on the page to hit */
.ab-mail { display: block; width: fit-content; max-width: 100%; margin-top: clamp(56px, 7.4vw, 104px); padding: 10px 0; color: var(--ink); text-decoration: none; border-radius: 14px; }
.ab-mail-v { display: block; margin-top: 12px; font-size: clamp(30px, 6.6vw, 98px); font-weight: 500; letter-spacing: -.055em; line-height: 1.02; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: max(1px, .018em); text-underline-offset: .15em; text-decoration-color: rgba(58, 96, 181, .3); transition: text-decoration-color var(--ui) var(--enter); }
.ab-mail .ab-n { margin-top: 16px; }
.ab-mail:hover .ab-mail-v { text-decoration-color: var(--accent); }

.ab-elsewhere { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); margin-top: clamp(48px, 6vw, 84px); }
.ab-elsewhere li { border-top: 1px solid var(--rule); }
.ab-elsewhere a { display: block; min-height: 44px; padding: 22px 0 8px; color: var(--ink); text-decoration: none; border-radius: 10px; }
.ab-v { display: block; margin-top: 8px; font-size: clamp(21px, 1.9vw, 27px); font-weight: 500; letter-spacing: -.035em; line-height: 1.15;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: rgba(58, 96, 181, 0); transition: text-decoration-color var(--ui) var(--enter); }
.ab-elsewhere .ab-n { margin-top: 6px; }
.ab-elsewhere a:hover .ab-v { text-decoration-color: var(--accent); }
.ab-mail:focus-visible, .ab-elsewhere a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* ================================================================== smaller screens: one axis, flush left */
@media (max-width: 1100px) {
  .ab-rule-list li { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .inner .ab { --ab-b: 0px; }
  .ab-l1, .ab-l2 { display: inline; }
  .ab-l2 { padding-left: 0; }
  .ab-title { text-wrap: balance; }
  .ab-sec, .ab-rules-in, .ab-hello-h { grid-template-columns: minmax(0, 1fr); }
  .ab-hello-h p { margin-top: 20px; }
  .ab-sec h2 { padding: 0 0 16px; }
  .ab-sign { margin-left: 0; }
  .ab-rules h2 { max-width: 10em; padding: 0 0 clamp(28px, 6vw, 40px); }
  .ab-elsewhere { grid-template-columns: minmax(0, 1fr); }
  .ab-elsewhere a { padding: 20px 0; }
}
@media (max-width: 560px) {
  /* a phone gets the title as large as three balanced lines allow */
  .inner .ab { --ab-t: min(14.4vw, 64px); }
  .inner .ab-letter { border-radius: 28px; }
  .inner .ab-rules, .inner .ab-hello { border-radius: 28px; }
  /* the address stays on one line inside the card's padding, down to 360px */
  .ab-mail-v { font-size: clamp(26px, 8.1vw, 44px); }
}

@media (prefers-reduced-motion: reduce) {
  .ab .kin .w, .ab-rules[data-rv], .ab-hello[data-rv], .pr-on .ab [data-pr] { transform: none; }
}