/* App Inquirer, ported from design 09 (Front Page, light and dark). Dark = data-theme="night" (set by the server from
   the ai_theme cookie, or by the <head> script), or the system setting when no theme is set. Colours and type: tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
:root[data-theme="night"] { color-scheme: dark; }
body {
  margin: 0;
  background: var(--ai-paper);
  color: var(--ai-ink);
  font-family: var(--ai-font-text);
  font-size: 18px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }

:focus-visible { outline: 3px solid var(--ai-ink); outline-offset: 3px; border-radius: var(--ai-radius); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ai-ink); color: var(--ai-paper); padding: 12px 16px; font: 700 14px var(--ai-font-display); z-index: 10; }
.skip:focus { top: 12px; }

.wrap { max-width: 1312px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }

/* ---------- Masthead ---------- */
.masthead { padding-top: 28px; }
.masthead__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  padding: 24px 0 28px;          /* clear space well over the Q's counter */
}
.masthead__title { line-height: 0; }
.masthead__logo { display: block; }
.masthead__logo img { height: 104px; width: auto; }

.ear {
  justify-self: start;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 44px; justify-content: center;
  padding: 10px 14px;
  border: 1px solid var(--ai-ink);
  border-radius: var(--ai-radius);
  text-decoration: none;
  max-width: 200px;
}
.ear--right { justify-self: end; text-align: right; }
.ear__label { font-size: 11px; color: var(--ai-ink-3); }
.ear__text { font: 700 16px/1.2 var(--ai-font-display); }
.ear:hover { background: var(--ai-ink); color: var(--ai-paper); }
.ear:hover .ear__label { color: var(--ai-paper); }

.dateline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  border-top: 1px solid var(--ai-ink);
  border-bottom: 1px solid var(--ai-ink);
  padding: 5px 0;
  align-items: center;
  font: 600 13px/1.3 var(--ai-font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dateline__count { text-align: center; color: var(--ai-ink-2); }
.logo-night { display: none; }
:root[data-theme="night"] .logo-day { display: none; }
:root[data-theme="night"] .logo-night { display: block; }

/* Theme switch: three segments, native radios underneath (arrow keys work) */
.theme { justify-self: end; display: inline-flex; margin: 0; padding: 0; border: 1px solid var(--ai-ink); border-radius: var(--ai-radius); min-inline-size: 0; }
.theme__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.theme label { position: relative; display: flex; }
.theme label + label { border-left: 1px solid var(--ai-ink); }
.theme input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.theme span {
  display: flex; align-items: center; justify-content: center;
  min-height: 30px; min-width: 56px; padding: 0 10px;
  font: 800 11px/1 var(--ai-font-display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ai-ink-2); pointer-events: none;
}
.theme label:hover span { color: var(--ai-ink); text-decoration: underline; text-underline-offset: 3px; }
.theme input:checked + span { background: var(--ai-ink); color: var(--ai-paper); text-decoration: none; }
.theme input:focus-visible + span { outline: 3px solid var(--ai-ink); outline-offset: 2px; position: relative; z-index: 1; }

.sections { border-bottom: 5px solid var(--ai-ink); }
.sections ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 4px; }
.sections a {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px;
  font: 700 14px/1 var(--ai-font-display); text-decoration: none;
}
.sections a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* ---------- Front grid ---------- */
.front {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  gap: 0 48px;
  padding-top: 36px;
  padding-bottom: 56px;
}
.front__main { min-width: 0; }
.front__rail { position: relative; min-width: 0; }
.front__rail::before { content: ""; position: absolute; left: -24px; top: 0; bottom: 0; border-left: 1px solid var(--ai-ink); }

.kicker { color: var(--ai-red); font-size: 12px; margin-bottom: 10px; }
.meta { font: 500 13px/1.4 var(--ai-font-display); color: var(--ai-ink-3); letter-spacing: .01em; }

h2 a, h3 a, .fapp__name a { text-decoration: none; }
h2 a:hover, h3 a:hover, .fapp__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }

/* Lead */
.lead { padding-bottom: 36px; border-bottom: 1px solid var(--ai-ink); }
.lead__title {
  font: 800 76px/.98 var(--ai-font-display);
  font-stretch: 78%;
  letter-spacing: -.01em;
  max-width: 22ch;
  text-wrap: balance;
  margin-bottom: 28px;
}
.lead__body { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.lead__art { background: var(--ai-wash); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 28px; border-radius: var(--ai-radius); }
.lead__art img { width: 100%; height: 100%; object-fit: contain; }
/* Night: the lead picture fills its frame, so a white screenshot reads as a photo, not a lit panel. */
:root[data-theme="night"] .lead__art { padding: 0; }
.lead__dek { font: 400 25px/1.35 var(--ai-font-text); font-style: italic; color: var(--ai-ink); margin-bottom: 14px; text-wrap: pretty; }
.lead__side .meta { padding-bottom: 20px; border-bottom: 1px solid var(--ai-rule); }
.lead--text .lead__body { grid-template-columns: 1fr; }

.instory { padding-top: 16px; }
.instory__label { font-size: 11px; color: var(--ai-ink-3); margin-bottom: 8px; }
.instory__app { display: flex; gap: 12px; align-items: center; text-decoration: none; padding: 6px 0; min-height: 52px; }
.instory__text { display: flex; flex-direction: column; }
.instory__name { font: 700 16px/1.25 var(--ai-font-display); }
.instory__tag { font: 400 16px/1.3 var(--ai-font-text); color: var(--ai-ink-2); }
.instory__app:hover .instory__name { text-decoration: underline; }

.icon { border-radius: var(--ai-radius-icon); flex: none; object-fit: contain; }
/* Night: a faint light ring keeps dark icons (Scry, Flighty, Terminal Tags, SayCopyPaste, Markd.ly) off the black.
   It goes on every icon so apps added later get it too; on bright icons it disappears into the edge. */
:root[data-theme="night"] .icon { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }

/* Secondary stories in columns */
.secondary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; padding: 32px 0; border-bottom: 1px solid var(--ai-ink); }
.story, .brief, .fapp { position: relative; }
.story + .story::before, .brief + .brief::before { content: ""; position: absolute; left: -24px; top: 0; bottom: 0; border-left: 1px solid var(--ai-rule); }
.story__art { background: var(--ai-wash); aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; padding: 16px; margin-bottom: 16px; border-radius: var(--ai-radius); }
.story__art img { width: 100%; height: 100%; object-fit: contain; }
.story__title { font: 800 25px/1.12 var(--ai-font-display); font-stretch: 85%; margin-bottom: 10px; text-wrap: balance; }
.story__dek { font: 400 18px/1.45 var(--ai-font-text); color: var(--ai-ink-2); margin-bottom: 10px; text-wrap: pretty; }

/* Briefs */
.briefs { padding: 24px 0 40px; }
.briefs__label { font-size: 12px; margin-bottom: 16px; }
.briefs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.brief__title { font: 700 21px/1.2 var(--ai-font-display); font-stretch: 88%; margin-bottom: 6px; text-wrap: balance; }
.brief__dek { font: 400 17px/1.45 var(--ai-font-text); color: var(--ai-ink-2); margin-bottom: 8px; }

/* Section flags: a heavy rule with a label */
.flag { border-top: 5px solid var(--ai-ink); padding: 10px 0 0; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: baseline; }
.flag__title { font-size: 14px; }

/* Featured apps */
.featured__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }
.fapp { padding: 4px 0 28px; }
.fapp::before { content: ""; position: absolute; left: -24px; top: 0; bottom: 0; border-left: 1px solid var(--ai-rule); }
.fapp:nth-child(3n + 1)::before { display: none; }
.fapp:nth-child(n + 4) { border-top: 1px solid var(--ai-rule); padding-top: 24px; }
.fapp__head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.fapp__names { min-width: 0; }
.fapp__name { font: 800 22px/1.15 var(--ai-font-display); }
.fapp__maker { font: 500 13px/1.35 var(--ai-font-display); color: var(--ai-ink-3); }
.fapp__tagline { font: italic 400 19px/1.35 var(--ai-font-text); margin-bottom: 6px; }
.fapp__summary { font: 400 16px/1.5 var(--ai-font-text); color: var(--ai-ink-2); margin-bottom: 10px; }

/* Rail: the classifieds */
.rail-block { margin-bottom: 36px; }
.rail-block:last-child { margin-bottom: 0; }
.classifieds li + li { border-top: 1px solid var(--ai-rule); }
.ad { display: flex; gap: 12px; align-items: center; padding: 10px 0; min-height: 64px; text-decoration: none; }
.ad__text { display: flex; flex-direction: column; min-width: 0; }
.ad__name { font: 700 16px/1.25 var(--ai-font-display); }
.ad__tag { font: 400 16px/1.3 var(--ai-font-text); color: var(--ai-ink-2); }
.ad__note { font: 500 12px/1.4 var(--ai-font-display); color: var(--ai-ink-3); margin-top: 2px; }
.ad:hover .ad__name { text-decoration: underline; }

.leaders { margin-bottom: 20px; }
.leader { display: flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 10px 0; text-decoration: none; font: 400 17px/1.3 var(--ai-font-text); }
.leader__dots { flex: 1; border-bottom: 2px dotted var(--ai-ink-3); transform: translateY(-4px); }
.leader__count { font: 700 15px/1 var(--ai-font-display); font-variant-numeric: tabular-nums; }
.leader:hover .leader__name { text-decoration: underline; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  background: var(--ai-ink); color: var(--ai-paper);
  border: 2px solid var(--ai-ink); border-radius: var(--ai-radius);
  font: 800 14px/1 var(--ai-font-display); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
}
.button:hover { background: var(--ai-paper); color: var(--ai-ink); }
.button--block { display: flex; width: 100%; }

/* ---------- Notices: submit + newsletter ---------- */
.notices { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-bottom: 64px; }
.notice { border-top: 5px solid var(--ai-ink); border-bottom: 1px solid var(--ai-ink); padding: 24px 0 32px; }
.notice__kicker { font-size: 12px; color: var(--ai-ink-3); margin-bottom: 8px; }
.notice__title { font: 800 40px/1.05 var(--ai-font-display); font-stretch: 80%; margin-bottom: 12px; }
.notice__text { font: 400 19px/1.45 var(--ai-font-text); color: var(--ai-ink-2); margin-bottom: 20px; max-width: 44ch; }
.signup__label { display: block; font: 700 14px/1.3 var(--ai-font-display); margin: 4px 0 8px; }
.signup__row { display: flex; gap: 8px; }
.signup input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 14px;
  font: 400 18px var(--ai-font-text); color: var(--ai-ink); background: var(--ai-paper);
  border: 2px solid var(--ai-ink); border-radius: var(--ai-radius);
}
.signup input::placeholder { color: var(--ai-ink-3); }
.signup__status { font: 500 14px/1.4 var(--ai-font-display); color: var(--ai-ink-2); min-height: 20px; margin-top: 8px; }

/* ---------- Footer ---------- */
.footer { padding-bottom: 64px; }
.footer__inner {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px;
  border-top: 5px solid var(--ai-ink);
  padding-top: 16px;
  font: 600 14px/1.3 var(--ai-font-display);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 0 4px; }
.footer__links a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; text-decoration: none; }
.footer__links li:last-child a { padding-right: 0; }
.footer__links a:hover { text-decoration: underline; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1180px) {
  .lead__title { font-size: 54px; }
  .front { grid-template-columns: minmax(0, 1fr) 272px; gap: 0 40px; }
  .front__rail::before { left: -20px; }
  .featured__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fapp, .fapp:nth-child(n) { padding: 24px 0; border-top: 1px solid var(--ai-rule); }
  .fapp:nth-child(n)::before { display: block; }
  .fapp:nth-child(2n + 1)::before { display: none; }
  .fapp:nth-child(-n + 2) { border-top: 0; padding-top: 4px; }
}

@media (max-width: 960px) {
  .wrap { padding-left: 32px; padding-right: 32px; }
  .front { grid-template-columns: 1fr; }
  .front__rail::before { display: none; }
  .front__rail { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; padding-top: 40px; }
  .front__rail #categories { grid-column: 1 / -1; }
  .lead__body { grid-template-columns: 1fr; }
  .notices { gap: 32px; }
}

@media (max-width: 720px) {
  body { font-size: 17px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .masthead { padding-top: 16px; }
  .masthead__top { grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px 0 20px; }
  .masthead__title { grid-column: 1 / -1; grid-row: 1; justify-self: center; padding: 8px 0 12px; }
  .masthead__logo img { height: auto; width: min(100%, 310px); }
  .ear, .ear--right { justify-self: stretch; max-width: none; text-align: left; }
  .ear--right { text-align: right; }
  .ear__text { font-size: 15px; }
  .dateline { grid-template-columns: 1fr; gap: 2px; text-align: center; font-size: 12px; }
  .dateline { padding: 8px 0 10px; gap: 4px; }
  .dateline__count { text-align: center; }
  .theme { justify-self: center; margin-top: 6px; }
  .theme span { min-height: 44px; min-width: 76px; font-size: 12px; }
  .sections ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 10px; }
  .sections ul::-webkit-scrollbar { display: none; }
  .sections li { flex: none; }
  .sections a { padding: 0 10px; font-size: 14px; }

  .front { padding-top: 24px; padding-bottom: 40px; }
  .lead { padding-bottom: 28px; }
  .lead__title { font-size: 38px; line-height: 1.02; margin-bottom: 20px; }
  .lead__body { gap: 20px; }
  .lead__art { padding: 16px; }
  :root[data-theme="night"] .lead__art { padding: 0; }
  .lead__dek { font-size: 21px; }

  .secondary { grid-template-columns: 1fr; padding: 0; }
  .secondary, .briefs__list, .featured__list { gap: 0; }
  .story::before, .brief::before, .fapp::before, .fapp:nth-child(n)::before { display: none; }
  .story { padding: 28px 0; }
  .story__art { aspect-ratio: 16 / 10; }
  .story + .story { border-top: 1px solid var(--ai-rule); }
  .story__title { font-size: 25px; }

  .briefs { padding: 24px 0 32px; }
  .briefs__list { grid-template-columns: 1fr; }
  .brief + .brief { border-top: 1px solid var(--ai-rule); margin-top: 20px; padding-top: 20px; }

  .featured__list { grid-template-columns: 1fr; }
  .fapp, .fapp:nth-child(n) { padding: 22px 0; border-top: 1px solid var(--ai-rule); }
  .fapp:first-child { border-top: 0; padding-top: 4px; }

  .front__rail { grid-template-columns: 1fr; padding-top: 32px; }
  .rail-block { margin-bottom: 32px; }

  .notices { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  .notice__title { font-size: 34px; }
  .signup__row { flex-direction: column; }
  .signup .button { width: 100%; }
  .notice > .button { width: 100%; }

  .footer { padding-bottom: 72px; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__links { margin-left: -10px; }
}

/* ---------- Night by system setting, when no theme is set (no script, or before it runs) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
  :root:not([data-theme]) .logo-day { display: none; }
  :root:not([data-theme]) .logo-night { display: block; }
  :root:not([data-theme]) .lead__art { padding: 0; }
  :root:not([data-theme]) .icon { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
}

/* ---------- Labels ---------- */
.house { display: inline-block; margin-top: 6px; font-size: 10px; letter-spacing: .08em; color: var(--ai-ink-3); border: 1px solid var(--ai-rule); border-radius: var(--ai-radius); padding: 3px 6px; line-height: 1.2; }
.ad__house { align-self: flex-start; margin-top: 4px; }
.sample { display: inline-block; font-size: 10px; color: var(--ai-paper); background: var(--ai-ink); border-radius: var(--ai-radius); padding: 3px 6px; line-height: 1.2; vertical-align: 1px; margin-left: 4px; }
.empty { font: 400 17px/1.5 var(--ai-font-text); color: var(--ai-ink-3); padding: 8px 0 24px; }

/* ---------- Secondary pages ---------- */
.page { padding-top: 32px; padding-bottom: 64px; }
.narrow > * { max-width: 760px; }
.pagehead { border-bottom: 1px solid var(--ai-ink); padding-bottom: 24px; margin-bottom: 28px; }
.pagehead__title { font: 800 64px/1.02 var(--ai-font-display); font-stretch: 80%; letter-spacing: -.01em; text-wrap: balance; }
.pagehead__dek { font: italic 400 22px/1.4 var(--ai-font-text); color: var(--ai-ink-2); margin-top: 12px; max-width: 60ch; text-wrap: pretty; }
.crumbs { font: 600 13px/1.3 var(--ai-font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ai-ink-3); margin-bottom: 18px; }
.crumbs a { text-decoration: none; color: var(--ai-ink-2); }
.crumbs a:hover { text-decoration: underline; }
.section-label { font-size: 12px; color: var(--ai-ink-3); margin-bottom: 10px; }
.button--ghost { background: var(--ai-paper); color: var(--ai-ink); }
.button--ghost:hover { background: var(--ai-ink); color: var(--ai-paper); }
.page p > .button + .button { margin-left: 8px; }

/* Category chips above the table */
.chips { margin-bottom: 24px; }
.chips ul { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--ai-ink); border-radius: var(--ai-radius); text-decoration: none; font: 700 14px/1 var(--ai-font-display); }
.chips a:hover { background: var(--ai-ink); color: var(--ai-paper); }
.chips__n { font-weight: 500; color: var(--ai-ink-3); font-variant-numeric: tabular-nums; }
.chips a:hover .chips__n { color: var(--ai-paper); }

/* The apps table (draft 04 The Index) */
.ftable { font-family: var(--ai-font-display); }
.frow {
  display: grid; align-items: center; column-gap: 20px;
  grid-template-columns: 28px 44px minmax(0, 1.55fr) minmax(0, 1.15fr) minmax(0, .9fr) 336px 64px;
  grid-template-areas: "no icon app maker cat plat date";
  border-bottom: 1px solid var(--ai-rule);
  padding: 14px 0;
}
.frow:hover { background: var(--ai-wash); }
.fhead { padding: 6px 0 8px; border-bottom: 1px solid var(--ai-ink); font-size: 11px; font-weight: 700; color: var(--ai-ink-3); letter-spacing: .02em; text-transform: uppercase; }
.fhead:hover { background: none; }
.fhead .c-app { grid-column: icon / app; }
.c-no { grid-area: no; font-weight: 800; font-size: 13px; color: var(--ai-ink-3); font-variant-numeric: tabular-nums; }
.c-icon { grid-area: icon; }
.c-icon .icon { width: 44px; height: 44px; }
.c-app { grid-area: app; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.c-app .name { font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -.005em; }
.c-app .name a { text-decoration: none; }
.c-app .name a:hover { text-decoration: underline; }
.c-app .tagline { font-size: 14px; color: var(--ai-ink-2); line-height: 1.35; }
.c-app .house { margin-top: 4px; }
.c-maker { grid-area: maker; font-size: 14px; color: var(--ai-ink-2); line-height: 1.3; }
.c-cat { grid-area: cat; font-size: 14px; line-height: 1.3; }
.c-cat a { text-decoration: none; }
.c-cat a:hover { text-decoration: underline; }
.c-meta { display: none; }
.c-plat { grid-area: plat; }
.c-date { grid-area: date; font-size: 13px; color: var(--ai-ink-3); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.phead, .pgrid { display: grid; grid-template-columns: repeat(6, 1fr); }
.phead span { text-align: center; }
.pgrid span { display: flex; justify-content: center; align-items: center; height: 14px; }
.pgrid .on::before { content: ""; width: 10px; height: 10px; background: var(--ai-ink); border-radius: 1px; }
.pgrid .off::before { content: ""; width: 8px; height: 1px; background: var(--ai-ink-3); }
.ptext { display: none; }

/* App page */
.apphead { display: flex; gap: 24px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--ai-ink); }
.apphead .icon { width: 128px; height: 128px; }
.apphead__names { min-width: 0; }
.apphead__name { font: 800 64px/1 var(--ai-font-display); font-stretch: 80%; letter-spacing: -.01em; }
.apphead__maker { font: 500 15px/1.4 var(--ai-font-display); color: var(--ai-ink-3); margin-top: 6px; }
.apphead__tagline { font: italic 400 24px/1.35 var(--ai-font-text); margin-top: 8px; }
.disclosure { font: 400 17px/1.45 var(--ai-font-text); padding: 14px 16px; margin-top: 20px; background: var(--ai-wash); border-left: 3px solid var(--ai-ink); }
.disclosure .ai-label { font-size: 11px; margin-right: 6px; }
.appbody { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 48px; padding-top: 28px; }
.appbody__summary { font: 400 21px/1.55 var(--ai-font-text); max-width: 62ch; }
.appart { margin-top: 28px; background: var(--ai-wash); border-radius: var(--ai-radius); padding: 24px; }
.appart img { width: 100%; height: auto; }
.getit { display: grid; gap: 8px; margin-bottom: 24px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 0 16px; border-top: 5px solid var(--ai-ink); padding-top: 8px; }
.facts dt, .facts dd { padding: 10px 0; border-bottom: 1px solid var(--ai-rule); font: 500 15px/1.35 var(--ai-font-display); }
.facts dt { color: var(--ai-ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding-top: 12px; }
.facts a { text-decoration: none; }
.facts a:hover { text-decoration: underline; }
.related { margin-top: 48px; }

/* Story page */
.storymain { max-width: 760px; }
.storyhead { padding-bottom: 20px; border-bottom: 1px solid var(--ai-rule); margin-bottom: 24px; }
.storyhead__title { font: 800 64px/1.0 var(--ai-font-display); font-stretch: 78%; letter-spacing: -.01em; text-wrap: balance; margin-bottom: 16px; }
.storyhead__dek { font: italic 400 24px/1.4 var(--ai-font-text); margin-bottom: 12px; text-wrap: pretty; }
.samplenote { font: 400 16px/1.45 var(--ai-font-text); color: var(--ai-ink-2); background: var(--ai-wash); padding: 12px 14px; margin-bottom: 24px; }
.samplenote .sample { margin: 0 6px 0 0; }
.storyart { background: var(--ai-wash); border-radius: var(--ai-radius); padding: 24px; margin-bottom: 28px; }
.storyart img { width: 100%; height: auto; }
.prose { font: 400 20px/1.6 var(--ai-font-text); max-width: 68ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font: 800 28px/1.15 var(--ai-font-display); font-stretch: 88%; margin-top: 1.6em; }
.prose h3 { font: 700 22px/1.2 var(--ai-font-display); margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .35em; }
.prose blockquote { margin: 1.2em 0; padding-left: 18px; border-left: 3px solid var(--ai-ink); font-style: italic; }
.prose code { font: 500 .85em/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--ai-wash); padding: 2px 5px; border-radius: var(--ai-radius); }
.prose a { text-underline-offset: 3px; }

/* Forms */
.form { display: flex; flex-direction: column; max-width: 560px; }
.form label { font: 700 15px/1.3 var(--ai-font-display); margin-top: 20px; margin-bottom: 6px; }
.form label:first-child { margin-top: 0; }
.form .hint { font: 400 15px/1.4 var(--ai-font-text); color: var(--ai-ink-3); margin: -2px 0 8px; }
.form .optional { font-weight: 500; color: var(--ai-ink-3); }
.form input, .form textarea {
  min-height: 48px; padding: 10px 14px; font: 400 18px/1.4 var(--ai-font-text); color: var(--ai-ink); background: var(--ai-paper);
  border: 2px solid var(--ai-ink); border-radius: var(--ai-radius); width: 100%;
}
.form textarea { resize: vertical; }
.form .button { margin-top: 28px; align-self: flex-start; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formerror { font: 600 16px/1.4 var(--ai-font-display); color: var(--ai-red); border-left: 3px solid var(--ai-red); padding: 8px 12px; margin-bottom: 24px; max-width: 560px; }
.formok { font: 400 21px/1.45 var(--ai-font-text); padding: 16px 0; }
.signup__status:empty { display: none; }
.signup input[aria-invalid="true"] { border-color: var(--ai-red); }

@media (max-width: 1180px) {
  .frow { grid-template-columns: 28px 44px minmax(0, 1.6fr) minmax(0, 1fr) 270px 60px; grid-template-areas: "no icon app cat plat date"; }
  .c-maker, .fhead .c-maker { display: none; }
}
@media (max-width: 960px) {
  .appbody { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .page { padding-top: 24px; padding-bottom: 40px; }
  .pagehead__title, .apphead__name, .storyhead__title { font-size: 40px; line-height: 1.04; }
  .pagehead__dek, .storyhead__dek { font-size: 19px; }
  .apphead { flex-direction: column; align-items: flex-start; gap: 16px; }
  .apphead .icon { width: 96px; height: 96px; }
  .apphead__tagline { font-size: 20px; }
  .appbody__summary { font-size: 19px; }
  .prose { font-size: 18px; }
  .storyart, .appart { padding: 12px; }
  .frow {
    grid-template-columns: 22px 44px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px;
    grid-template-areas: "no icon app date" ". . meta meta" ". . plat plat";
    align-items: start; padding: 16px 0;
  }
  .fhead { display: none; }
  .c-no { padding-top: 3px; }
  .c-cat, .c-maker { display: none; }
  .c-meta { display: block; grid-area: meta; font-size: 13px; color: var(--ai-ink-2); line-height: 1.35; }
  .c-date { padding-top: 3px; }
  .c-app .name { font-size: 17px; }
  .pgrid { display: none; }
  .ptext { display: block; font-size: 12px; color: var(--ai-ink-3); line-height: 1.4; }
  .form .button { align-self: stretch; }
  .page p > .button { width: 100%; }
  .page p > .button + .button { margin: 8px 0 0; }
}

/* Apple's badges, unaltered: 48px tall (40px minimum) with at least a quarter of their height (12px) clear on every
   side: 16px between items in .getit, 24px below it, and the 48px column gap to the left.
   Black on light pages, white on dark, following the same theme rules as the logo. */
.badge { display: inline-block; line-height: 0; }
.badge img { height: 48px; width: auto; max-width: none; }
.badge-night { display: none; }
:root[data-theme="night"] .badge-day { display: none; }
:root[data-theme="night"] .badge-night { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .badge-day { display: none; }
  :root:not([data-theme]) .badge-night { display: block; }
}
.getit { justify-items: start; gap: 16px; }
.getit .button { justify-self: stretch; }