/* =========================================================
   liliia.co
   ---------------------------------------------------------
   Tokens first, then layout, then components, then
   breakpoints. Everything here is hand written, no build
   step, no dependencies.
   ========================================================= */

/* ---------- Fonts (self hosted, no third party requests) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-latin-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/atkinson-hyperlegible-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/atkinson-hyperlegible-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/atkinson-hyperlegible-mono-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg:        #FFFFFA;
  --ink:       #4F2E2A;   /* nav, headings, body, buttons  */
  --bronze:    #543B18;   /* essay type and dates           */
  --quote:     #563A1C;   /* pull quotes                    */
  --muted:     #7C6A5C;   /* mono labels                    */
  --rule:      #D9D4C8;   /* hairlines                      */
  --icon:      #363636;   /* menu marks, per the supplied assets */
  --on-dark:   #FFFFFA;

  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body:    "Atkinson Hyperlegible", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --font-mono:    "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --measure:   620px;   /* text column           */
  --measure-wide: 760px; /* headline column      */
  --media:     1032px;  /* the 16 column grid    */
  --col:       42px;    /* column width           */
  --gutter-col: 24px;   /* gutter between columns */
  --rule-gap:  48px;    /* clear space each side of the separator */
  --rule-h:    95px;    /* separator height       */

  /* The rail's vertical rhythm. The hero on the home page is derived from
     these three, so the wordmark there always lines up with the first nav
     item however they are adjusted. */
  --rail-top:  40px;    /* inset above the rail wordmark */
  --mark-h:    44px;    /* rail wordmark height at 104px wide */
  --rail-gap:  44px;    /* wordmark to first nav item */
  --rail-clear: 408px;  /* 2 x the rail's 204px, to keep the grid clear of it */
  --rail:      248px;   /* desktop nav rail      */
  --gutter:    clamp(20px, 7.7vw, 34px);

  --step:      clamp(72px, 8vw, 120px);  /* card to card inside a section */
  --gap-rule:  72px;   /* section to divider, above and below */
  --gap-head:  68px;   /* section headline to the content under it */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Page transitions ----------
   Same-origin navigations cross-fade and lift slightly. Browsers without
   the View Transitions API fall back to a plain fade in on load. */
@view-transition { navigation: auto; }

@keyframes page-fade-out {
  to { opacity: 0; }
}
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

::view-transition-old(root) {
  animation: page-fade-out 160ms cubic-bezier(.4, 0, .2, 1) both;
}
::view-transition-new(root) {
  animation: page-fade-in 300ms cubic-bezier(.4, 0, .2, 1) both;
}

/* The navigation is a fixed frame around the page, so it cross-fades in place
   rather than travelling with the content. Without this it lifts 8px on every
   navigation and the whole menu appears to jump. */
.rail { view-transition-name: rail; }

@keyframes hold-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

::view-transition-old(rail) {
  animation: page-fade-out 160ms cubic-bezier(.4, 0, .2, 1) both;
}
::view-transition-new(rail) {
  animation: hold-fade-in 300ms cubic-bezier(.4, 0, .2, 1) both;
}

@supports not (view-transition-name: none) {
  body { animation: page-fade-in 300ms cubic-bezier(.4, 0, .2, 1) both; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  body { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 21.6px;
  line-height: 31px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a   { color: inherit; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }

/* Visible focus for keyboard users, invisible for mouse users. */
:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */

/* The text column is centred in the FULL viewport, not in the
   space left over by the rail. The rail is taken out of flow so
   the measure stays optically centred, matching the mocks. */
main { flex: 1 0 auto; width: 100%; }

.wrap {
  width: min(var(--measure), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.wrap--media {
  width: min(var(--media), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.section,
.section--tight { padding-block: 0; }

/* ---------- Desktop rail ---------- */
.rail {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 40;
  width: var(--rail);
  height: 100vh;
  height: 100dvh;
  padding: var(--rail-top) 0 40px 54px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rail-gap);
  pointer-events: none;              /* let clicks through the empty rail */
}
.rail > * { pointer-events: auto; }

.rail__mark { width: 104px; }
.rail__mark img { width: 100%; }

.rail__nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 17px;
  line-height: 1.28;
}

.rail__link {
  position: relative;
  text-decoration: none;
  color: var(--ink);
  max-width: 150px;
  padding-block: 6px;            /* keeps the 54px pitch, gives a 34px target */
  transition: color .18s ease;   /* not opacity: the rule below must stay independent */
}
.rail__link:hover { color: color-mix(in srgb, var(--ink) 62%, transparent); }

.rail__link[aria-current="page"],
.rail__link.is-active { font-weight: 700; }

/* The short rule marks the current section, and follows the cursor as it
   moves down the nav. On hover it is drawn at half strength so it reads as
   "you are pointing here" without competing with the section you are in. */
.rail__link::before {
  content: "";
  position: absolute;
  inset-inline-end: calc(100% + 14px);
  /* centred on the whole item, so it stays level with a label that wraps
     onto two lines instead of hanging off the first */
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 1px;
  background: var(--ink);
  opacity: 0;
  transition: opacity .18s ease;
}

.rail__link:hover::before { opacity: .5; }

/* listed after hover so the current section keeps full strength under the cursor */
.rail__link[aria-current="page"]::before,
.rail__link.is-active::before { opacity: 1; }

.rail__social { margin-block-start: 6px; }
.rail__social img { width: 30px; }

/* ---------- Mobile top bar ---------- */
.topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 40px var(--gutter) 30px;
  /* At rest the bar is invisible, so the top of the page reads as one
     unbroken sheet of cream and nothing appears to clip the wordmark.
     The ground and its shadow arrive only once content starts passing
     underneath, which is the moment the bar has a job to do. */
  background: transparent;
  box-shadow: none;
  transition: background-color .24s ease, box-shadow .24s ease;
}
.topbar.is-stuck {
  background: #FFFFFA;
  box-shadow: 0 4px 21px 0 rgba(189, 177, 165, 0.15);
}
@media (prefers-reduced-motion: reduce) {
  .topbar { transition: none; }
}

.burger {
  appearance: none;
  border: 0;
  background: none;
  padding: 6px;
  margin: -6px;
  cursor: pointer;
  display: grid;
  gap: 7px;
  width: 44px;
  min-height: 44px;
  align-content: center;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--icon);
  border-radius: 1px;
}
.burger span:nth-child(1) { width: 29px; }
.burger span:nth-child(2) { width: 23px; }
.burger span:nth-child(3) { width: 16px; }

/* ---------- Full screen mobile menu ---------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 40px var(--gutter) 40px;   /* the close button lands exactly where the burger was */
  overflow: hidden;                 /* no scroll, per the brief */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .24s ease, transform .24s ease, visibility .24s;
}
.sheet.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sheet__head {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* The close mark is the supplied asset, drawn as two filled diagonals on a
   32 grid rather than a multiplication glyph, which sits at the wrong weight
   and never quite centres. */
.sheet__close {
  appearance: none;
  border: 0;
  background: none;
  padding: 6px;
  margin: -6px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  align-self: flex-start;
}
.sheet__close svg {
  width: 32px;
  height: 32px;
  fill: var(--icon);
}

.sheet__nav {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 4.2vh, 34px);
  font-family: var(--font-display);
  font-size: clamp(30px, 8.5vw, 44px);
  line-height: 1.1;
  font-weight: 600;
}
.sheet__nav a { text-decoration: none; }

.sheet__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--rule);
}
.sheet__foot img { width: 26px; }
.sheet__foot span {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

body.is-locked { overflow: hidden; }

/* ---------- Type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.005em;
}

.page-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--bronze);
  font-size: clamp(48px, 17.4vw, 68px);   /* designed size held to 390px */
  line-height: 1.06;
  text-align: center;
  /* the headline runs wider than the measure, as in the mock,
     so it breaks out of whatever column it is nested in */
  width: min(var(--measure-wide), calc(100vw - var(--gutter) * 2));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-wrap: balance;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 12.3vw, 48px);   /* designed size held to 390px */
  line-height: 1.1;
  text-align: center;
  color: var(--ink);
  margin-block-end: var(--gap-head);
}

.card-title {
  font-size: clamp(27px, 8.2vw, 32px);    /* designed size held to 390px */
  font-weight: 700;
  line-height: 41px;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--muted);
}

.meta {
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: .02em;
  color: var(--bronze);
  text-align: center;
}

.prose p + p { margin-block-start: 1.35em; }
.prose strong { font-weight: 700; }

.lede { font-size: 20px; }

/* ---------- Divider ---------- */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: min(306px, 100% - var(--gutter) * 2);
  margin: var(--gap-rule) auto;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.divider img { width: 42px; opacity: .85; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-dark);
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  transition: opacity .18s ease, transform .18s ease;
}
.btn:hover { opacity: .88; }
.btn:active { transform: translateY(1px); }

.btn-row { display: flex; justify-content: center; margin-block-start: 42px; }

/* ---------- Media blocks ---------- */
/* Images run at their natural proportion from tablet up. On phones each
   one is cropped to the ratio in the mock via --crop, with --focus moving
   the visible part of the frame where the design puts it. */
.media {
  width: 100%;
  margin-block-end: var(--gap-head);
}
.media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  aspect-ratio: var(--crop-wide, auto);
}

/* Full bleed on small screens, contained on large. */
@media (max-width: 767px) {
  .media {
    width: 100vw;
    margin-inline-start: 50%;
    transform: translateX(-50%);
  }
  .media img { aspect-ratio: var(--crop, auto); height: auto; }
}

/* ---------- Highlight cards ---------- */
.card + .card { margin-block-start: 87px; }
.card__body { margin-block-start: 30px; }
.card__logo { margin-block-start: 46px; }

/* Phones stack: title, copy, logo, chips. That is also the DOM order, so
   the desktop grid below only has to reposition, never reorder. */
.card__row { width: min(var(--measure), 100% - var(--gutter) * 2); margin-inline: auto; }
.card__logo img { width: 212px; }

.chips { margin-block-start: 56px; }
.chips__label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  padding-inline-start: 10px;
  margin-block-end: 18px;
}

/* one chip per line, as drawn */
.chips__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chip {
  font-family: var(--font-mono);
  font-style: italic;
  font-size: 12px;
  line-height: 15px;
  padding: 5px 14px;
  border-radius: 999px;
  background: #ECE7E2;
  color: #5A4A44;
  white-space: nowrap;
}
.chip--blue   { background: #E1E6F1; color: #4F506F; }
.chip--pink   { background: #F3E4E4; color: #6E4B4B; }
.chip--lilac  { background: #E9E0E4; color: #5E4A55; }
.chip--steel  { background: #DFE5EA; color: #4B5A64; }
.chip--peach  { background: #F0E4DC; color: #6B4E3E; }
.chip--sand   { background: #EDE6D6; color: #61553A; }
.chip--sage   { background: #E3E6DC; color: #4E5A48; }

/* ---------- Inventions list ----------
   Stacked on phones, three across on desktop inside the 1032px grid. */
.entry + .entry { margin-block-start: 54px; }

/* the section is a centred stack: headline, then the entries, 68px apart */
#inventions .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-head);
}
#inventions .section-title { margin-block-end: 0; }
.entry-row { width: 100%; }

@media (min-width: 1260px) {
  #inventions .wrap { width: min(var(--media), 100% - var(--rail-clear)); }

  /* three across, on the same 24px gutter as the rest of the grid */
  .entry-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gutter-col);
    align-items: start;
  }
  .entry + .entry { margin-block-start: 0; }
}
.entry__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--bronze);
}
.entry__meta {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--muted);
  margin-block: 10px 16px;
}
.entry__meta a { color: var(--muted); display: inline-block; padding-block: 3px; }
.entry__meta em { font-style: italic; }

/* ---------- Speaking ---------- */
.talks { margin-block-start: 68px; }
.talk + .talk { margin-block-start: 34px; }
.talk__title { font-weight: 700; }
.talk__links { margin-block-start: 4px; }
.talk__links a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color .18s ease;
}
.talk__links a:hover { text-decoration-color: currentColor; }

.logo-row {
  display: flex;
  flex-direction: column;
  align-items: center;      /* centred on phones, ranged left in the desktop column */
  gap: 42px;
  margin-block-start: 68px;
}
.logo-row img { width: 214px; }
.logo-row img + img { width: 194px; }

/* ---------- Pull quote ---------- */
.quote { text-align: center; }
.quote__label {
  font-size: 17px;
  font-weight: 700;
  margin-block-end: 28px;
}
.quote__text,
.essay__break,
.essay__climax {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  /* 48px on phones too: the mobile mock sets these at a 67px line pitch,
     which is 48 at 140%. The floor only guards phones under ~390px, where
     "entertainment." would otherwise run past the column. */
  font-size: clamp(38px, 12.3vw, 48px);
  line-height: 1.4;
  text-align: center;
  color: #563A1C;
  font-variant-numeric: oldstyle-nums proportional-nums;
}

/* ---------- Contact ---------- */
/* The footer already carries 56px of its own top padding. This adds to
   it so the address sits in open space rather than leaning on the rule
   of the copyright line. */
.contact { text-align: center; padding-block-end: 72px; }
.contact p { margin-block-start: 22px; }
/* Evens the two lines so the sentence never ends on a stranded word. */
.contact > .wrap > p:not(.contact__mail) { text-wrap: balance; }

/* The address is the one string on the page a stranger has to read
   character by character. It stays in Atkinson, which was drawn to keep
   l, I and i apart, and it gets its own line so nothing orphans it.
   Not a link by choice: it is meant to be read and copied, so a single
   click selects the whole string rather than opening a mail client. */
.contact p.contact__mail {
  margin-block-start: var(--gap-head);
  font-size: clamp(24px, 7.2vw, 28px);
  line-height: 1.3;
  letter-spacing: .01em;
  user-select: all;
  -webkit-user-select: all;
}

/* ---------- Footer ---------- */
.site-footer {
  flex-shrink: 0;
  padding: 56px var(--gutter) 40px;
  text-align: center;
  font-size: 15px;
  color: var(--muted);
}

/* ---------- Essay ---------- */
.essay { padding-block-start: clamp(56px, 7.5vw, 92px); padding-block-end: 0; }
.essay .meta { margin-block-start: 48px; }

.essay__body { margin-block-start: 44px; color: var(--bronze); }
.essay__body p + p { margin-block-start: 1.35em; }

/* Drop cap on the opening paragraph.
   An explicit span rather than ::first-letter, because Chromium pulls
   the following apostrophe into ::first-letter and enlarges "I’". */
.dropcap__letter {
  font-family: var(--font-display);
  font-weight: 600;
  float: left;
  font-size: 5.40em;
  line-height: 1.36;
  margin-top: -13px;
  padding-right: .46em;
  color: var(--bronze);
}

/* Pull quotes sit between hairlines, 68px clear of each, as drawn. The rules
   stretch across the text column; the quote itself runs wider, the same
   breakout the page title uses. A column flex container does not shrink its
   items on the cross axis, so the wider quote simply centres and overhangs. */
.essay__quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-head);
  align-self: stretch;
  margin-block: 48px;
}

.essay__quote::before,
.essay__quote::after {
  content: "";
  align-self: stretch;
  height: 1px;
  background: var(--rule);
}

.essay__break,
.essay__climax {
  width: min(var(--measure-wide), calc(100vw - var(--gutter) * 2));
  margin: 0;
}

.essay__signoff {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  text-align: center;
  color: var(--bronze);
  margin-block-start: var(--step);
}

/* ---------- Essay index card ---------- */
.essay-card { text-align: left; }
.essay-card__title { margin-block-end: 26px; }
.essay-card .prose { color: var(--bronze); }

/* ---------- Home hero ---------- */
.hero { text-align: center; padding-block-start: 0; }
.hero__mark { width: 200px; margin: 0 auto; font-size: 0; line-height: 0; }
.hero__tagline {
  font-size: 16px;
  margin-block-start: 20px;
}
.hero__portrait { margin-block-start: 51px; }

/* the introduction reads as body copy, ranged left inside the
   centred column, so it is not affected by the hero centring */
.intro { margin-block-start: 40px; text-align: left; }
.intro .card__aside p { margin: 0; }
.intro .card__main p + p { margin-block-start: 1.35em; }

@media (max-width: 1259px) {
  .intro .card__main { margin-block-start: 1.35em; }
}
.intro p + p { margin-block-start: 1.35em; }

/* =========================================================
   Breakpoints
   ========================================================= */

/* Below the rail breakpoint: top bar + full screen sheet */
@media (max-width: 1259px) {
  .rail { display: none; }
  .topbar { display: block; }
}

@media (min-width: 1260px) {
  .sheet { display: none; }
}

/* Small phones: keep the measure comfortable */
@media (max-width: 767px) {
  /* a five-line drop cap eats a phone column alive; keep it to three */
  .dropcap__letter {
    font-size: 3.9em;
    line-height: 1.28;
    padding-right: .30em;
    margin-top: -6px;
  }
}

/* ---------- Desktop card: the 16 column grid ----------
   16 columns of 42px with 24px gutters, 1032px overall. The logo and the
   chips sit in columns 1 to 5, the copy in columns 6 to 14, and a hairline
   runs down the gutter between them. */
@media (min-width: 1260px) {
  .card__row {
    width: min(var(--media), 100% - var(--rail-clear));
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    column-gap: var(--gutter-col);
    align-items: start;
  }

  /* The aside sits in columns 1 to 5, but its content stops short so the
     separator keeps 48px of clear space on the logo and chips side. */
  .card__aside {
    grid-column: 1 / span 5;
    grid-row: 1;
    padding-inline-end: 72px;
  }

  /* The home page already shows the wordmark above the portrait, so the rail
     drops its copy. The space is kept rather than collapsed, so the nav sits
     at the same height here as it does on every other page. */
  .rail--quiet .rail__mark { visibility: hidden; }

  /* The wordmark sits at the same height on every page: in the rail on the
     inner pages, in the centre column here. Aligning it to the nav instead
     left far too much dead space above the fold. */
  .hero { padding-block-start: var(--rail-top); }

  /* The rail owns the left 204px. Below 1440 a centred 1032px grid would slide
     underneath it, so the grid is capped to clear it instead. At 1440 this
     works out to exactly 1032 and stops having any effect above that. */
  .wrap--media { width: min(var(--media), 100% - var(--rail-clear)); }

  /* Speaking runs wider than a release block: the copy fills columns 6 to
     15 so the two talks can sit under it in columns 6 to 10 and 11 to 15. */
  #speaking .card__main { grid-column: 6 / span 10; }

  #speaking .talks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter-col);
    align-items: start;
  }
  #speaking .talk + .talk { margin-block-start: 0; }

  /* the logos hang in the left column, their tops level with the copy */
  #speaking .logo-row { margin-block-start: 0; align-items: flex-start; }

  /* The introduction's left block is narrower, three columns, which is what
     breaks "Hello. It's good to / meet you." across two lines as drawn. */
  .intro .card__aside {
    grid-column: 1 / span 3;
    padding-inline-end: 0;
  }

  .card__main {
    grid-column: 6 / span 9;
    grid-row: 1;
    position: relative;
  }

  .card__main::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--rule-gap) * -1);
    inset-block-start: 0;
    width: 1px;
    height: var(--rule-h);
    background: var(--rule);
  }

  /* in the grid the logo leads its own column, so it loses the stacked offset */
  .card__logo { margin-block-start: 0; }
  .card__body { margin-block-start: 34px; }
  .card__aside .chips { margin-block-start: 44px; }
}

/* Very wide screens: hold the measure, let the background breathe */
@media (min-width: 768px) {
  .divider { width: 283px; }
  .divider img { width: 33px; }
}