/* Parhelion: the balloon side-on over the launch paddock, then a page built from its gores. Georama
   for the headings and the instruments, Crimson Pro for the words. */

@font-face { font-family: "Georama"; font-style: normal; font-weight: 100 900; font-stretch: 62.5% 150%; font-display: swap; src: url("/assets/fonts/specimen/georama-var.woff2") format("woff2"); }
@font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/specimen/crimson-pro-var.woff2") format("woff2"); }
@font-face { font-family: "Crimson Pro"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/specimen/crimson-pro-var-italic.woff2") format("woff2"); }

body.spec-parhelion { margin: 0; background: #DCDCEA; }
.spec-parhelion {
  --ph-paper: #DCDCEA;
  --ph-paper-2: #C9C8DE;
  --ph-paper-3: #EDEDF5;
  --ph-ink: #1F1E38;
  --ph-burn: #E4642C;
  --ph-peach: #F0B79C;
  --ph-peach-2: #F6D3C1;
  --ph-ink-72: rgba(31, 30, 56, .72);
  --ph-line: rgba(31, 30, 56, .28);
  --ph-sans: "Georama", "Arial Narrow", system-ui, sans-serif;
  --ph-serif: "Crimson Pro", Georgia, "Times New Roman", serif;
  --ph-nav-h: 56px;
  --ph-side: clamp(16px, 4vw, 40px);
  --ph-ease: cubic-bezier(.3, 0, .2, 1);
  /* the gore, as percentages of its own box (crown at the top, mouth at the foot) */
  --ph-gore-tall: polygon(59% 0%,75.01% 6.25%,83.73% 12.5%,90.06% 18.75%,94.62% 25%,97.69% 31.25%,99.44% 37.5%,100% 43.75%,99.5% 50%,98.04% 56.25%,95.75% 62.5%,92.71% 68.75%,89.01% 75%,84.74% 81.25%,79.91% 87.5%,74.43% 93.75%,67% 100%,33% 100%,25.57% 93.75%,20.09% 87.5%,15.26% 81.25%,10.99% 75%,7.29% 68.75%,4.25% 62.5%,1.96% 56.25%,0.5% 50%,0% 43.75%,0.56% 37.5%,2.31% 31.25%,5.38% 25%,9.94% 18.75%,16.27% 12.5%,24.99% 6.25%,41% 0%);
  --ph-gore-phone: polygon(63% 0%,82.34% 6.25%,89.11% 12.5%,93.55% 18.75%,96.58% 25%,98.55% 31.25%,99.65% 37.5%,100% 43.75%,99.69% 50%,98.77% 56.25%,97.3% 62.5%,95.29% 68.75%,92.76% 75%,89.65% 81.25%,85.83% 87.5%,80.86% 93.75%,70% 100%,30% 100%,19.14% 93.75%,14.17% 87.5%,10.35% 81.25%,7.24% 75%,4.71% 68.75%,2.7% 62.5%,1.23% 56.25%,0.31% 50%,0% 43.75%,0.35% 37.5%,1.45% 31.25%,3.42% 25%,6.45% 18.75%,10.89% 12.5%,17.66% 6.25%,37% 0%);
  --ph-gore-side: polygon(0% 41%,6.25% 24.99%,12.5% 16.27%,18.75% 9.94%,25% 5.38%,31.25% 2.31%,37.5% 0.56%,43.75% 0%,50% 0.5%,56.25% 1.96%,62.5% 4.25%,68.75% 7.29%,75% 10.99%,81.25% 15.26%,87.5% 20.09%,93.75% 25.57%,100% 33%,100% 67%,93.75% 74.43%,87.5% 79.91%,81.25% 84.74%,75% 89.01%,68.75% 92.71%,62.5% 95.75%,56.25% 98.04%,50% 99.5%,43.75% 100%,37.5% 99.44%,31.25% 97.69%,25% 94.62%,18.75% 90.06%,12.5% 83.73%,6.25% 75.01%,0% 59%);
  --ph-seam-tall: polygon(53% 0%,53% 6.25%,53% 12.5%,53% 18.75%,53% 25%,53% 31.25%,53% 37.5%,53% 43.75%,53% 50%,53% 56.25%,53% 62.5%,53% 68.75%,53% 75%,53% 81.25%,53% 87.5%,53% 93.75%,53% 100%,47% 100%,47% 93.75%,47% 87.5%,47% 81.25%,47% 75%,47% 68.75%,47% 62.5%,47% 56.25%,47% 50%,47% 43.75%,47% 37.5%,47% 31.25%,47% 25%,47% 18.75%,47% 12.5%,47% 6.25%,47% 0%);
}
.ph-page {
  background: var(--ph-paper);
  color: var(--ph-ink);
  font: 400 clamp(17px, .95rem + .25vw, 19.5px)/1.55 var(--ph-serif);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.ph-page *, .ph-page *::before, .ph-page *::after { box-sizing: border-box; }
.ph-page :where(h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset) { margin: 0; }
.ph-page :where(ul, ol) { padding: 0; list-style: none; }
.ph-page img { display: block; max-width: 100%; height: auto; }
.ph-page a { color: inherit; }
.ph-page :focus-visible { outline: 2px solid var(--ph-burn); outline-offset: 2px; box-shadow: 0 0 0 4px var(--ph-paper); }
.ph-page abbr { text-decoration: none; }
.ph-page [hidden] { display: none !important; }

/* ── buttons: an orange fill rises from the bottom ─────────────────────────────── */
.ph-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px;
  border: 1.5px solid var(--ph-ink); border-radius: 999px; color: var(--ph-ink); text-decoration: none; cursor: pointer;
  font: 700 14.5px/1 var(--ph-sans); font-variation-settings: "wdth" 112, "wght" 700; letter-spacing: .03em;
  background: linear-gradient(var(--ph-burn), var(--ph-burn)) no-repeat 0 100% / 100% 0%, transparent;
  transition: background-size .24s var(--ph-ease), border-color .24s;
}
.ph-btn:hover { background-size: 100% 100%; border-color: var(--ph-burn); }

/* ── the nav ──────────────────────────────────────────────────────────────────── */
.ph-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 60; height: var(--ph-nav-h);
  display: flex; align-items: center; gap: 24px; padding: 0 var(--ph-side);
  background: color-mix(in srgb, var(--ph-paper) 92%, transparent);
  border-bottom: 1px solid var(--ph-line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ph-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.ph-mark { width: 40px; height: 28px; flex: none; }
.ph-mk-arc { stroke: var(--ph-ink); }
.ph-mk-sun { fill: var(--ph-burn); }
.ph-mk-dog, .ph-mk-line { fill: var(--ph-ink); }
.ph-brand-name {
  font: 700 17px/1 var(--ph-sans); font-variation-settings: "wdth" 62.5, "wght" 700;
  text-transform: uppercase; letter-spacing: .14em;
}
.ph-links { display: flex; gap: 26px; }
.ph-links a {
  text-decoration: none; font: 600 14.5px/1 var(--ph-sans); font-variation-settings: "wdth" 112, "wght" 600; letter-spacing: .03em;
  padding: 8px 0; background: linear-gradient(var(--ph-burn), var(--ph-burn)) no-repeat 0 100% / 0 1.5px; transition: background-size .24s var(--ph-ease);
}
.ph-links a:hover, .ph-links a[aria-current] { background-size: 100% 1.5px; }
.ph-menu { display: none; }
.ph-ask-short { display: none; }

/* ── the hero: the launch paddock at first light, the balloon side-on over it ─── */
.ph-head { position: relative; }
.ph-stage {
  /* where the balloon stands and how it climbs, as fractions of the stage (read by the script) */
  --ph-bx: .64; --ph-gy: .62; --ph-bh: .4; --ph-ty: .26; --ph-drift: .2; --ph-hz: .565;
  --ph-wd: 88; --ph-wg: 600;
  position: relative;
  height: clamp(540px, calc(100svh - var(--bar-h, 40px) - var(--ph-nav-h)), 1000px);
  overflow: hidden; background: #D6D1E4;
}
.ph-view { position: absolute; inset: 0; z-index: 1; }
.ph-launch, .ph-launch img, #ph-air { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ph-launch img { object-fit: cover; object-position: 50% 58%; }
#ph-air { display: block; opacity: 0; touch-action: pan-y; }
.ph-drawn #ph-air { opacity: 1; }
.ph-drawn .ph-poster, .ph-drawn .ph-wind { visibility: hidden; }
/* the words sit on the sky: a little of the dawn's lavender behind them */
.ph-view::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(220, 220, 234, .62) 0%, rgba(220, 220, 234, .34) 30%, rgba(220, 220, 234, 0) 50%);
}
.ph-poster { position: absolute; left: calc(var(--ph-bx) * 100%); top: calc(var(--ph-gy) * 100%); height: calc(var(--ph-bh) * 100%); transform: translate(-50%, -100%); }
.ph-pb { display: block; height: 100%; width: auto; overflow: visible; }

.ph-wind { position: absolute; z-index: 2; right: var(--ph-side); top: 8%; width: min(240px, 20vw); height: auto; }
.ph-wind path { fill: none; stroke: var(--ph-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ph-wind-lid { fill: rgba(240, 183, 156, .45); }
.ph-wind text { fill: var(--ph-ink); font: italic 400 17px var(--ph-serif); }
.ph-wind .ph-wind-mid { font: 650 11px var(--ph-sans); letter-spacing: .14em; text-transform: uppercase; }
.ph-page.ph-js .ph-wind { display: none; }

.ph-far, .ph-down {
  position: absolute; z-index: 3; left: calc(var(--ph-bx) * 100%); top: calc(var(--ph-gy) * 100% + 14px); transform: translateX(-50%);
  width: max-content; max-width: min(78vw, 380px); text-align: center; padding: 6px 14px; border-radius: 999px; margin: 0;
  font: italic 400 16px/1.3 var(--ph-serif); color: var(--ph-ink); background: rgba(237, 237, 245, .9);
  opacity: 0; transition: opacity .6s; pointer-events: none;
}
.ph-far.is-on, .ph-down.is-on { opacity: 1; }

/* the headline swells as the envelope heats, and at once with the burner's roar */
.ph-pitch { position: absolute; z-index: 5; left: var(--ph-side); top: 7%; width: 40vw; max-width: 640px; }
.ph-name {
  margin: 0; white-space: nowrap;
  font: 600 var(--ph-fs, clamp(34px, 1rem + 2.6vw, 60px))/1.02 var(--ph-sans);
  font-variation-settings: "wdth" var(--ph-wd), "wght" var(--ph-wg); letter-spacing: -.012em;
}
.ph-name span { display: block; }
.ph-page:not(.ph-js) .ph-name { font-variation-settings: "wdth" 100, "wght" 600; }
.ph-sub { margin-top: 24px; max-width: 26em; width: 30vw; font-size: clamp(16px, .8rem + .45vw, 20px); line-height: 1.45; }
.ph-sub-s { display: none; }
.ph-note {
  position: relative; margin-top: 18px; padding-top: 14px;
  font: italic 330 clamp(16px, .9rem + .3vw, 19px)/1.42 var(--ph-serif); color: var(--ph-ink-72);
}
.ph-note::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 1px; background: var(--ph-burn); }
/* the pilot's note opens the page below the hero */
.ph-intro { width: auto; max-width: 40em; margin: 0 auto; padding: 40px var(--ph-side) 0; }
.ph-intro .ph-note { margin: 0; font-size: clamp(17px, .9rem + .4vw, 20px); }

/* instruments, on the frosted grass */
.ph-inst { position: absolute; z-index: 5; left: var(--ph-side); bottom: 5%; width: min(30vw, 440px); }
.ph-dials { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1.5px solid var(--ph-ink); }
.ph-dial { grid-column: span 2; padding: 9px 0 10px; border-bottom: 1px solid var(--ph-line); }
.ph-dial-2, .ph-dial-h { grid-column: span 3; }
.ph-dial dt {
  font: 650 11.5px/1 var(--ph-sans); font-variation-settings: "wdth" 62.5, "wght" 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ph-ink);
}
.ph-dial dd {
  margin-top: 6px; white-space: nowrap;
  font: 500 13px/1 var(--ph-sans); font-variation-settings: "wdth" 75, "wght" 500; color: var(--ph-ink);
}
.ph-val {
  font: 560 clamp(19px, .9rem + .9vw, 30px)/1 var(--ph-sans); font-variation-settings: "wdth" 75, "wght" 560;
  font-variant-numeric: tabular-nums lining-nums; color: var(--ph-ink);
}
.ph-trend { display: inline-block; margin-left: 5px; vertical-align: -1px; fill: var(--ph-burn); transition: transform .2s; opacity: 0; }
.ph-up .ph-trend { opacity: 1; }
.ph-down-v .ph-trend { opacity: 1; transform: rotate(180deg); fill: var(--ph-ink); }
.ph-inst-cap { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ph-ink); font: italic 400 15px/1.35 var(--ph-serif); color: var(--ph-ink); }
.ph-small { margin-top: 8px; font: italic 400 14.5px/1.35 var(--ph-serif); color: var(--ph-ink); }
.ph-page:not(.ph-js) .ph-dials { display: none; }
.ph-js .ph-inst-cap { display: none; }

/* Burn and Vent */
.ph-controls { position: absolute; z-index: 6; right: var(--ph-side); bottom: 5%; display: none; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: end; column-gap: 18px; }
.ph-js .ph-controls { display: grid; }
.ph-mode {
  grid-column: 1 / -1; justify-self: end; margin-bottom: 14px; pointer-events: none; padding: 5px 10px; border-radius: 999px; background: rgba(237, 237, 245, .82);
  font: 650 11.5px/1 var(--ph-sans); font-variation-settings: "wdth" 62.5, "wght" 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ph-ink);
}
.ph-mode::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: var(--ph-ink-72); vertical-align: 1px; }
.ph-you .ph-mode { color: var(--ph-burn); }
.ph-you .ph-mode::before { background: var(--ph-burn); }
.ph-burn, .ph-vent {
  position: relative; display: grid; place-content: center; justify-items: center; gap: 5px; cursor: pointer; padding: 0;
  font-family: var(--ph-sans); color: var(--ph-ink); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.ph-burn {
  width: 132px; height: 132px; border-radius: 50%; border: 0; touch-action: none;
  background: linear-gradient(#F07A43, #F07A43) no-repeat 0 100% / 100% 0%, var(--ph-burn);
  box-shadow: 0 10px 30px rgba(31, 30, 56, .22);
  transition: background-size .24s var(--ph-ease), transform .12s, box-shadow .2s;
}
.ph-burn:hover { background-size: 100% 100%; }
.ph-burn[aria-pressed="true"] { transform: scale(.97); background-size: 100% 100%; box-shadow: 0 0 0 6px rgba(240, 122, 67, .28), 0 0 44px rgba(240, 122, 67, .7); }
.ph-burn-l, .ph-vent-l { font: 800 19px/1 var(--ph-sans); font-variation-settings: "wdth" 125, "wght" 800; letter-spacing: .06em; text-transform: uppercase; }
.ph-key { font: 650 11px/1 var(--ph-sans); font-variation-settings: "wdth" 62.5, "wght" 650; letter-spacing: .12em; text-transform: uppercase; color: rgba(31, 30, 56, .8); }
.ph-ring { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); transform: rotate(-90deg); pointer-events: none; }
.ph-ring circle { fill: none; stroke-width: 2.2; }
.ph-ring-bg { stroke: rgba(237, 237, 245, .7); }
.ph-ring-duty { stroke: var(--ph-burn); stroke-dasharray: 0 100; stroke-linecap: round; }
.ph-vent {
  width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--ph-ink); margin-bottom: 30px;
  background: linear-gradient(var(--ph-ink), var(--ph-ink)) no-repeat 0 100% / 100% 0%, var(--ph-paper-3);
  transition: background-size .24s var(--ph-ease), color .24s;
}
.ph-vent-l { font-size: 14px; }
.ph-vent:hover, .ph-vent[aria-pressed="true"] { background-size: 100% 100%; color: var(--ph-paper); }
.ph-vent:hover .ph-key, .ph-vent[aria-pressed="true"] .ph-key { color: var(--ph-paper); }
.ph-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 720 to 1180: the balloon stands further right, the words take a wider column */
@media (max-width: 1180px) and (min-width: 720px) {
  .ph-stage { --ph-bx: .68; --ph-drift: .18; }
  .ph-pitch { width: 46vw; }
  .ph-sub { width: 40vw; }
  .ph-inst { width: 40vw; }
  .ph-burn { width: 112px; height: 112px; }
  .ph-vent { width: 64px; height: 64px; }
  .ph-val { font-size: 19px; }
}
/* tablets held upright: the balloon a little smaller, the words over the top of the sky */
@media (max-width: 1100px) and (min-width: 720px) and (max-aspect-ratio: 1/1) {
  .ph-stage { --ph-bx: .62; --ph-gy: .64; --ph-bh: .32; --ph-ty: .36; --ph-drift: .26; }
  .ph-pitch { width: auto; right: var(--ph-side); }
  .ph-sub { width: auto; max-width: 30em; }
  .ph-inst { width: 52vw; }
}
/* short desktop screens: the instruments in one row, a smaller Burn */
@media (min-width: 1101px) and (max-height: 820px) {
  .ph-sub { margin-top: 16px; font-size: 16.5px; }
  .ph-dials { grid-template-columns: repeat(5, auto); column-gap: 14px; }
  .ph-dial, .ph-dial-2, .ph-dial-h { grid-column: auto; }
  .ph-val { font-size: 21px; }
  .ph-burn { width: 104px; height: 104px; }
  .ph-vent { width: 62px; height: 62px; margin-bottom: 20px; }
  .ph-mode { margin-bottom: 10px; }
}

/* ── phones: the words over the sky, the balloon in the middle, a dock with Burn and Vent ── */
@media (max-width: 719px) {
  .spec-parhelion { --ph-nav-h: 48px; }
  .ph-nav { gap: 10px; }
  .ph-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px var(--ph-side) 16px; background: var(--ph-paper); border-bottom: 1px solid var(--ph-line); }
  .ph-nav.is-open .ph-links { display: flex; }
  .ph-links a { display: block; padding: 14px 0; font-size: 16px; }
  .ph-menu {
    display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 6px; border: 0; background: none; color: var(--ph-ink); cursor: pointer;
    font: 700 14px/1 var(--ph-sans); font-variation-settings: "wdth" 100, "wght" 700; letter-spacing: .03em;
  }
  .ph-menu[aria-expanded="true"] svg { transform: rotate(180deg); }
  .ph-ask { padding: 0 16px; }
  .ph-ask-long { display: none; }
  .ph-ask-short { display: inline; }
  .ph-brand-name { font-size: 15px; }
  .ph-mark { width: 34px; height: 24px; }

  .ph-stage {
    --ph-bx: .42; --ph-gy: .66; --ph-bh: .27; --ph-ty: .4; --ph-drift: .3;
    height: max(600px, calc(100svh - var(--bar-h, 40px) - var(--ph-nav-h)));
  }
  .ph-launch img { object-position: 50% 50%; }
  .ph-view::after { background: linear-gradient(180deg, rgba(220, 220, 234, .6) 0%, rgba(220, 220, 234, .3) 22%, rgba(220, 220, 234, 0) 36%, rgba(220, 220, 234, 0) 72%, rgba(220, 220, 234, .66) 90%); }
  .ph-wind { display: none; }
  .ph-far, .ph-down { font-size: 14.5px; top: calc(var(--ph-gy) * 100% + 10px); }
  .ph-pitch { left: 16px; right: 16px; top: 18px; width: auto; }
  .ph-name { font-size: var(--ph-fs, 30px); line-height: 1.04; }
  .ph-sub { display: none; }
  .ph-sub-s { display: block; margin: 10px 0 0; max-width: 23em; font-size: 16px; line-height: 1.32; }
  .ph-inst { display: contents; }
  .ph-dials {
    position: absolute; z-index: 5; left: 16px; right: 16px; bottom: 94px;
    grid-template-columns: repeat(4, auto); justify-content: space-between; border: 0; column-gap: 8px;
  }
  .ph-dial, .ph-dial-h { grid-column: auto; border: 0; padding: 0; }
  .ph-dial-2 { display: none; }
  .ph-dial dt { font-size: 10.5px; }
  .ph-dial dd { margin-top: 3px; font-size: 11px; }
  .ph-val { font-size: 19px; }
  .ph-pt { display: none; }
  .ph-inst-cap { position: absolute; z-index: 5; left: 16px; right: 16px; bottom: 100px; margin: 0; padding: 0; border: 0; text-align: center; }
  .ph-inst .ph-small { position: absolute; z-index: 5; left: 16px; right: 16px; bottom: 140px; margin: 0; text-align: center; font-size: 13px; line-height: 1.2; }
  .ph-controls {
    left: 12px; right: 12px; bottom: 12px; grid-template-columns: 1fr 64px; grid-template-rows: auto; column-gap: 8px; align-items: stretch;
  }
  .ph-mode { position: absolute; z-index: 1; left: 20px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; background: none; font-size: 10.5px; color: rgba(31, 30, 56, .82); }
  .ph-mode::before { background: var(--ph-ink); }
  .ph-you .ph-mode { color: var(--ph-ink); }
  .ph-you .ph-mode::before { background: var(--ph-paper-3); }
  .ph-burn { width: auto; height: 64px; border-radius: 999px; grid-auto-flow: column; gap: 12px; align-items: center; }
  .ph-ring { display: none; }
  .ph-burn::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--ph-duty, 0) * 100%); background: var(--ph-ink); border-radius: 2px; }
  .ph-vent { width: 64px; height: 64px; border-radius: 16px; margin: 0; background-color: var(--ph-ink); color: var(--ph-paper); }
  .ph-vent .ph-key { color: var(--ph-paper-2); }
  .ph-burn .ph-key { display: none; }
  .ph-intro { max-width: 34em; padding: 30px 20px 0; }
  .ph-intro .ph-note { font-size: 17px; }
}
/* the narrowest phones: the flying light keeps its dot, the words go */
@media (max-width: 359px) { .ph-mode { font-size: 0; left: 16px; } }
/* short phones: a thinner dock, no small print */
@media (max-width: 719px) and (max-height: 700px) {
  .ph-stage { --ph-gy: .68; --ph-bh: .24; height: max(480px, calc(100svh - var(--bar-h, 40px) - var(--ph-nav-h))); }
  .ph-sub-s { font-size: 14.5px; line-height: 1.25; margin-top: 6px; }
  .ph-inst .ph-small { display: none; }
  .ph-dials { bottom: 72px; }
  .ph-inst-cap { bottom: 76px; }
  .ph-val { font-size: 18px; }
  .ph-controls { bottom: 8px; grid-template-columns: 1fr 52px; }
  .ph-burn { height: 52px; }
  .ph-vent { width: 52px; height: 52px; }
}

/* ── the sections: open pages, with the gore kept for three moments ───────────── */
.ph-sec {
  --ph-gap: clamp(20px, 2.2vw, 36px);
  max-width: 1360px; margin: 0 auto; padding: clamp(72px, 12vh, 150px) var(--ph-side) 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ph-gap); align-items: center;
  scroll-margin-top: calc(var(--bar-h, 40px) + var(--ph-nav-h));
}
.ph-h2 {
  display: grid; margin: 0 0 .55em;
  font: 640 clamp(34px, 1.2rem + 2.9vw, 70px)/.98 var(--ph-sans); letter-spacing: -.012em; text-wrap: balance;
}
.ph-h2 > span, .ph-h2::after { grid-area: 1 / 1; font-variation-settings: "wdth" 112, "wght" 640; }
.ph-h2::after { content: attr(data-t); visibility: hidden; }
.ph-sec p { max-width: 34em; }
.ph-sec p + p { margin-top: .9em; }
.ph-sec .ph-note { margin-top: 1.4em; }
.ph-label { font: 650 11.5px/1.25 var(--ph-sans); font-variation-settings: "wdth" 62.5, "wght" 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ph-ink-72); }
.ph-caption, .ph-page figcaption { font: italic 380 14.5px/1.35 var(--ph-serif); color: var(--ph-ink-72); }

/* the gore: a balloon panel, stitched along its seam */
.ph-gore { --ph-clip: var(--ph-gore-tall); position: relative; margin: 0; clip-path: var(--ph-clip); background: var(--ph-paper-2); }
.ph-photo picture, .ph-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ph-seam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.ph-seam path { fill: none; }
.ph-seam .ph-s1 { stroke: rgba(31, 30, 56, .36); stroke-width: 2; }
.ph-seam .ph-s2 { stroke: rgba(237, 237, 245, .6); stroke-width: 1; stroke-dasharray: 2 7; }

/* 2 · why dawn: the words, the air, and the envelope filling */
.ph-dawn-text { grid-column: 1 / span 5; }
.ph-diagram { grid-column: 6 / span 3; }
.ph-inflate { grid-column: 9 / span 4; height: min(86svh, 820px); }
.ph-lapse { margin: 14px auto 0; max-width: 300px; }
.ph-lp { display: block; width: 100%; height: auto; overflow: visible; }
.ph-lp-lid { fill: rgba(240, 183, 156, .7); }
.ph-lp-grid { stroke: rgba(31, 30, 56, .22); stroke-width: 1; }
.ph-lp-z, .ph-lp-t, .ph-lp-cap, .ph-lp-you text { font: 650 12px var(--ph-sans); font-variation-settings: "wdth" 62.5, "wght" 650; letter-spacing: .08em; fill: var(--ph-ink); }
.ph-lp-cap { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.ph-lp-curve { fill: none; stroke: var(--ph-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ph-lp-wind { fill: none; stroke: var(--ph-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ph-lp-you line { stroke: var(--ph-burn); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ph-lp-you circle { fill: var(--ph-burn); stroke: var(--ph-paper); stroke-width: 2; }
.ph-lp-you text { font-weight: 750; font-variation-settings: "wdth" 62.5, "wght" 750; text-transform: uppercase; letter-spacing: .12em; }
.ph-diagram figcaption { margin-top: 10px; }

/* 3 · how we decide: a peach band, the briefing board and the call */
.ph-s-decide {
  max-width: none; margin-top: clamp(72px, 12vh, 150px); padding: clamp(64px, 10vh, 120px) max(var(--ph-side), calc((100% - 1280px) / 2));
  background: var(--ph-peach-2); align-items: start;
}
.ph-decide-text { grid-column: 1 / span 5; }
.ph-board { grid-column: 7 / span 6; container-type: inline-size; }
.ph-conds { display: flex; flex-wrap: wrap; gap: 10px 8px; margin-top: 16px; }
.ph-cond {
  min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--ph-ink); color: var(--ph-ink); cursor: pointer; text-align: left;
  font: 600 15px/1.15 var(--ph-sans); font-variation-settings: "wdth" 100, "wght" 600;
  background: linear-gradient(var(--ph-ink), var(--ph-ink)) no-repeat 0 100% / 100% 0%, transparent;
  transition: background-size .24s var(--ph-ease), color .24s;
}
.ph-cond:hover { background-size: 100% 12%; }
.ph-cond[aria-pressed="true"] { background-size: 100% 100%; color: var(--ph-paper-3); }
.ph-cond[aria-pressed="true"]::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--ph-burn); vertical-align: 1px; }
.ph-call { margin-top: clamp(28px, 5vh, 56px); padding-top: 18px; border-top: 1.5px solid var(--ph-ink); }
.ph-verdict {
  margin-top: 10px; min-height: 1.9em; display: flex; align-items: center;
  font: 800 min(clamp(56px, 1.6rem + 6vw, 150px), 17cqi)/.92 var(--ph-sans); font-variation-settings: "wdth" 150, "wght" 800; letter-spacing: -.01em;
  transition: font-variation-settings 1.2s var(--ph-ease), color .6s;
}
.ph-verdict.is-down { font-variation-settings: "wdth" 62.5, "wght" 240; color: var(--ph-ink-72); }
.ph-why { margin-top: 6px; font: italic 400 clamp(18px, 1rem + .4vw, 23px)/1.35 var(--ph-serif); min-height: 2.7em; }

/* 4 · the morning: minutes from sunrise along one horizon, and the fold in its own gore */
.ph-hour-head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ph-gap); align-items: end; margin-bottom: clamp(32px, 6vh, 64px); }
.ph-hour-head .ph-h2 { grid-column: 1 / span 6; margin: 0; }
.ph-hour-head p { grid-column: 8 / span 4; font: italic 380 clamp(17px, .95rem + .3vw, 20px)/1.45 var(--ph-serif); color: var(--ph-ink-72); }
.ph-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ph-gap); align-items: stretch; }
.ph-t { --hz: 118px; position: relative; grid-column: span 2; align-self: start; padding-top: calc(var(--hz) + 22px); }
/* the horizon meets the fold's gore at its widest, where its caption sits */
.ph-t:not(.ph-fold) { margin-top: max(0px, calc(min(66svh, 600px) * .44 - var(--hz))); }
.ph-t:not(.ph-fold)::before {
  content: ""; position: absolute; left: 0; top: var(--hz); width: calc(100% + var(--ph-gap)); height: 1.5px; background: var(--ph-ink);
  transform-origin: 0 50%;
}
.ph-t .ph-num {
  position: absolute; left: 0; top: 0; height: var(--hz); display: flex; align-items: flex-end;
  font: 200 clamp(56px, 2.2rem + 3vw, 104px)/.74 var(--ph-sans); font-variation-settings: "wdth" 62.5, "wght" 200;
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em;
}
/* the sun at each minute: a glow under the horizon, then the rim, then the disc well up */
.ph-sun { position: absolute; right: 8%; bottom: calc(100% - var(--hz)); width: 30px; height: 30px; border-radius: 50%; pointer-events: none; }
.ph-t:nth-child(1) .ph-sun, .ph-t:nth-child(2) .ph-sun { height: 22px; width: 64px; border-radius: 64px 64px 0 0; background: radial-gradient(ellipse at 50% 100%, rgba(228, 100, 44, .5), rgba(240, 183, 156, .35) 45%, transparent 72%); }
.ph-t:nth-child(1) .ph-sun { opacity: .55; width: 48px; height: 14px; }
.ph-t0 .ph-sun { height: 15px; border-radius: 30px 30px 0 0; background: var(--ph-burn); box-shadow: 0 0 22px 6px rgba(240, 183, 156, .9); }
.ph-t:nth-child(4) .ph-sun { bottom: calc(100% - var(--hz) + 52px); background: var(--ph-burn); box-shadow: 0 0 26px 8px rgba(240, 183, 156, .75); }
.ph-t h3 { margin: 0 0 .45em; font: 700 clamp(17px, .8rem + .5vw, 21px)/1.12 var(--ph-sans); font-variation-settings: "wdth" 100, "wght" 700; }
.ph-t p { font-size: clamp(16px, .9rem + .15vw, 18px); line-height: 1.45; }
.ph-fold { grid-column: span 4; align-self: stretch; padding: 0; }
.ph-fold .ph-gore { height: 100%; min-height: min(66svh, 600px); background: var(--ph-ink); }
.ph-fold .ph-gore::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(31, 30, 56, 0) 26%, rgba(31, 30, 56, .66) 40%, rgba(31, 30, 56, .66) 64%, rgba(31, 30, 56, 0) 78%); }
.ph-fold-cap { position: absolute; z-index: 3; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 70%; text-align: center; color: var(--ph-paper-3); }
.ph-fold-cap .ph-num { position: static; height: auto; display: block; font-size: min(96px, 24cqi); line-height: .85; }
.ph-fold .ph-gore { container-type: inline-size; }
.ph-fold-cap h3 { margin: .35em 0 .3em; }
.ph-fold-cap p { font-size: 16.5px; line-height: 1.35; margin: 0 auto; }
.ph-s-hour > .ph-caption { grid-column: 1 / -1; margin-top: 18px; }

/* 5 · where we fly: one gore laid on its side, as wide as the page */
.ph-where-head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ph-gap); align-items: end; }
.ph-where-head .ph-h2 { grid-column: 1 / span 6; margin: 0; }
.ph-where-text { grid-column: 8 / span 5; }
.ph-mapfig { grid-column: 1 / -1; width: 100vw; margin: clamp(32px, 6vh, 64px) 0 0 calc(50% - 50vw); min-width: 0; }
.ph-map { position: relative; height: clamp(420px, 44vw, 700px); clip-path: var(--ph-gore-side); background: #A9967F; touch-action: pan-y; }
.ph-map picture, .ph-map img, .ph-map-c { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.ph-map-c { opacity: 0; cursor: grab; outline: none; }
.ph-map-c:active { cursor: grabbing; }
.ph-map.is-drawn .ph-map-c { opacity: 1; }
.ph-map.is-drawn picture { visibility: hidden; }
.ph-map:has(.ph-map-c:focus-visible) { outline: 2px solid var(--ph-burn); outline-offset: 4px; }
.ph-map-e {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); padding-top: 10px;
  font: 700 11px/1 var(--ph-sans); font-variation-settings: "wdth" 62.5, "wght" 700; letter-spacing: .14em; color: var(--ph-paper-3);
  background: linear-gradient(var(--ph-paper-3), var(--ph-paper-3)) no-repeat 50% 0 / 1px 7px;
}
.ph-map-bar, .ph-mapfig figcaption { max-width: 1280px; margin-inline: auto; padding-inline: var(--ph-side); }
.ph-map-bar { display: none; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; margin-top: 22px; }
.ph-js .ph-map-bar { display: flex; }
.ph-reseed { min-height: 44px; }
.ph-pan { display: inline-flex; gap: 6px; }
.ph-pan-b {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ph-ink); background: none; color: var(--ph-ink); cursor: pointer;
  font: 600 17px/1 var(--ph-sans);
}
.ph-pan-b:hover { background: var(--ph-paper-3); }
.ph-legend { display: inline-flex; gap: 16px; }
.ph-lg, .ph-scale { font: 650 11.5px/1 var(--ph-sans); font-variation-settings: "wdth" 62.5, "wght" 650; letter-spacing: .14em; text-transform: uppercase; }
.ph-lg::before { content: ""; display: inline-block; width: 22px; height: 0; margin-right: 8px; vertical-align: 3px; border-top: 2px dashed var(--ph-burn); }
.ph-lg-pilot::before { border-top: 1.5px dashed var(--ph-ink); }
.ph-scale { display: inline-flex; flex-direction: column; gap: 5px; }
.ph-scale-b { display: block; width: var(--ph-sc, 160px); height: 6px; border: 1.5px solid var(--ph-ink); border-top: 0; }
.ph-mini { display: inline-block; height: 40px; }
.ph-mini svg { display: block; height: 40px; width: auto; overflow: visible; }
.ph-mini path { fill: none; stroke: var(--ph-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ph-mini text { font: 650 10px var(--ph-sans); font-variation-settings: "wdth" 62.5, "wght" 650; letter-spacing: .1em; fill: var(--ph-ink-72); }
.ph-mapfig figcaption { margin-top: 14px; text-align: center; }

/* 6 · in the basket */
.ph-rim { grid-column: 1 / span 4; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; }
.ph-rim img { width: 100%; height: 100%; object-fit: cover; }
.ph-rim::after { content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(237, 237, 245, .7); border-radius: 2px; pointer-events: none; }
.ph-basket-text { grid-column: 5 / span 5; padding-left: clamp(0px, 2vw, 32px); }
.ph-notes { grid-column: 10 / span 3; }
.ph-notes ul { margin: 10px 0 26px; font: italic 380 clamp(17px, .95rem + .2vw, 19px)/1.4 var(--ph-serif); }
.ph-notes li + li { margin-top: 6px; }
.ph-notes li::before { content: ""; display: inline-block; width: 14px; height: 1px; margin-right: 10px; vertical-align: 5px; background: var(--ph-burn); }

/* 7 · breakfast: the table, the width of the screen */
.ph-s-breakfast { margin-top: clamp(72px, 12vh, 150px); scroll-margin-top: calc(var(--bar-h, 40px) + var(--ph-nav-h)); }
.ph-bleed { position: relative; height: min(58vw, 88svh); min-height: 380px; overflow: hidden; }
.ph-bleed img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 60%; }
.ph-bf-text { padding-top: clamp(40px, 7vh, 72px); align-items: start; }
.ph-bf-a { grid-column: 1 / span 5; }
.ph-bf-b { grid-column: 7 / span 5; }
.ph-landed { font: 700 clamp(19px, 1rem + .5vw, 24px)/1.25 var(--ph-sans); font-variation-settings: "wdth" 100, "wght" 700; }

/* 8 · on the name: the night band and the halo */
.ph-s-name { margin-top: clamp(72px, 12vh, 150px); background: var(--ph-ink); color: var(--ph-paper-3); scroll-margin-top: calc(var(--bar-h, 40px) + var(--ph-nav-h)); }
.ph-name-in { padding-block: clamp(72px, 12vh, 140px); }
.ph-name-text { grid-column: 1 / span 6; }
.ph-big-mark { display: block; width: min(200px, 44%); height: auto; margin: 0 0 1.4em; overflow: visible; }
.ph-bm-arc { fill: none; stroke: var(--ph-peach); stroke-width: 1.6; }
.ph-bm-sun { fill: var(--ph-burn); }
.ph-bm-dog { fill: var(--ph-peach-2); }
.ph-bm-line { fill: var(--ph-paper); }
.ph-s-name .ph-h2 { color: var(--ph-paper-3); }
.ph-halo { grid-column: 8 / span 5; position: relative; aspect-ratio: 1; margin: 7%; }
.ph-halo picture { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.ph-halo img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 58%; }
.ph-halo::before, .ph-halo::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.ph-halo::before { inset: -7%; border: 1.5px solid rgba(240, 183, 156, .55); }
.ph-halo::after { inset: -14%; border: 1px dashed rgba(240, 183, 156, .3); }

/* 9 · ask for a morning */
.ph-s-ask { align-items: start; padding-bottom: clamp(72px, 12vh, 150px); }
.ph-ask-head { grid-column: 1 / span 4; position: sticky; top: calc(var(--bar-h, 40px) + var(--ph-nav-h) + 32px); }
.ph-ask-p { font-size: clamp(18px, 1rem + .4vw, 21px); }
.ph-ask-head .ph-small { margin-top: 18px; }
.ph-form { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; padding: clamp(24px, 3vw, 44px); background: var(--ph-paper-3); border-radius: 4px; }
.ph-wide, .ph-weeks, .ph-days { grid-column: 1 / -1; }
.ph-field { margin: 0; min-width: 0; border: 0; padding: 0; }
.ph-field label, .ph-field legend, .ph-dates label {
  display: block; padding: 0; margin-bottom: 8px;
  font: 650 11.5px/1.2 var(--ph-sans); font-variation-settings: "wdth" 62.5, "wght" 650; letter-spacing: .14em; text-transform: uppercase;
}
.ph-field input:not([type="radio"]), .ph-field textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid rgba(31, 30, 56, .45); border-radius: 2px;
  background: #F9F9FC; color: var(--ph-ink); font: 400 18px/1.3 var(--ph-serif); color-scheme: light;
}
.ph-field textarea { resize: vertical; min-height: 110px; }
.ph-field input:focus-visible, .ph-field textarea:focus-visible { outline: 2px solid var(--ph-burn); outline-offset: 1px; }
.ph-page ::placeholder { color: rgba(31, 30, 56, .6); font-style: italic; }
.ph-stepper { display: flex; gap: 8px; align-items: center; }
.ph-field .ph-stepper input { width: 72px; text-align: center; font-family: var(--ph-sans); font-variation-settings: "wdth" 75, "wght" 560; }
.ph-step-b { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ph-ink); background: none; cursor: pointer; font: 500 20px/1 var(--ph-sans); color: var(--ph-ink); }
.ph-step-b:hover { background: var(--ph-peach-2); }
.ph-hint { display: block; margin-top: 6px; font: italic 380 15px/1.3 var(--ph-serif); color: var(--ph-ink-72); }
.ph-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-field .ph-chip { position: relative; margin: 0; }
.ph-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ph-chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ph-ink);
  font: 600 14.5px/1 var(--ph-sans); font-variation-settings: "wdth" 100, "wght" 600; letter-spacing: 0; text-transform: none;
}
.ph-chip input:checked + span { background: var(--ph-ink); color: var(--ph-paper-3); }
.ph-chip input:focus-visible + span { outline: 2px solid var(--ph-burn); outline-offset: 2px; }
.ph-dates { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 10px 12px; align-items: center; }
.ph-dates label { margin: 0; }
.ph-field .ph-date { font-family: var(--ph-sans); font-variation-settings: "wdth" 75, "wght" 500; font-variant-numeric: tabular-nums lining-nums; letter-spacing: .02em; }
.ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ph-send { min-height: 48px; padding: 0 26px; background-color: var(--ph-ink); color: var(--ph-paper-3); border-color: var(--ph-ink); }
.ph-send:hover { color: var(--ph-ink); }
.ph-status { font: italic 420 17px/1.3 var(--ph-serif); }

/* the end: looking up from the basket into the crown, the vent open to the dawn */
.ph-crown { background: var(--ph-ink); color: var(--ph-paper-3); }
.ph-crown-view { position: relative; height: clamp(560px, 90svh, 880px); overflow: hidden; display: grid; place-items: center; }
.ph-crown-ring { position: absolute; left: 50%; top: 50%; width: max(130vw, 150svh); height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); }
.ph-crown-view::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(31, 30, 56, 0) 28%, rgba(31, 30, 56, .5) 68%, rgba(31, 30, 56, .9)); }
.ph-cr-p2 { fill: var(--ph-paper-2); } .ph-cr-pe { fill: var(--ph-peach); } .ph-cr-p3 { fill: var(--ph-paper-3); } .ph-cr-p4 { fill: var(--ph-peach-2); } .ph-cr-bu { fill: var(--ph-burn); }
.ph-cr-seam { fill: none; stroke: rgba(31, 30, 56, .5); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ph-cr-stitch, .ph-cr-tape { fill: none; stroke: rgba(31, 30, 56, .32); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.ph-cr-tape { stroke: rgba(31, 30, 56, .4); stroke-width: 2.5; stroke-dasharray: none; }
.ph-crown-eye {
  --eye: min(460px, 88vw);
  position: relative; z-index: 2; width: var(--eye); height: var(--eye); border-radius: 50%; container-type: inline-size;
  display: grid; place-content: center; justify-items: center; gap: calc(var(--eye) * .032); padding: calc(var(--eye) * .12); text-align: center; color: var(--ph-ink);
  background: radial-gradient(circle at 50% 22%, #FBE3D6, var(--ph-peach-2) 38%, var(--ph-paper) 78%);
  box-shadow: 0 0 0 10px rgba(31, 30, 56, .55), 0 18px 60px rgba(31, 30, 56, .5);
}
.ph-crown-eye::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; border: 1px dashed rgba(31, 30, 56, .35); pointer-events: none; }
.ph-crown-mark { width: 16cqi; height: auto; }
.ph-cr-arc { fill: none; stroke: var(--ph-ink); stroke-width: 2.2; }
.ph-cr-sun { fill: var(--ph-burn); } .ph-cr-dog, .ph-cr-line { fill: var(--ph-ink); }
.ph-crown-name {
  font: 800 10.4cqi/.9 var(--ph-sans); font-variation-settings: "wdth" 150, "wght" 800; letter-spacing: -.01em; text-transform: uppercase;
}
.ph-crown-line { font: italic 400 max(15px, 4.4cqi)/1.3 var(--ph-serif); }
.ph-crown-ask { margin-top: 1.4cqi; min-height: 48px; padding: 0 24px; background-color: var(--ph-burn); border-color: var(--ph-burn); }
.ph-crown-ask:hover { background-image: linear-gradient(var(--ph-ink), var(--ph-ink)); border-color: var(--ph-ink); color: var(--ph-paper-3); }
.ph-foot { display: grid; justify-items: center; gap: 12px; padding: 26px var(--ph-side) 44px; text-align: center; border-top: 1px solid rgba(237, 237, 245, .16); }
.ph-colophon { font: 650 12px/1.5 var(--ph-sans); font-variation-settings: "wdth" 62.5, "wght" 650; letter-spacing: .14em; text-transform: uppercase; max-width: 40em; color: var(--ph-paper-2); }
.ph-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; }
.ph-foot-links a {
  display: inline-block; padding: 10px 0; text-decoration: none; font: 600 14.5px/1 var(--ph-sans); font-variation-settings: "wdth" 112, "wght" 600; letter-spacing: .03em;
  background: linear-gradient(var(--ph-burn), var(--ph-burn)) no-repeat 0 85% / 0 1.5px; transition: background-size .24s var(--ph-ease);
}
.ph-foot-links a:hover { background-size: 100% 1.5px; }

/* 720 to 1180: fewer columns to a row */
@media (max-width: 1180px) and (min-width: 720px) {
  .ph-dawn-text { grid-column: 1 / span 7; }
  .ph-diagram { grid-column: 1 / span 7; margin-top: 40px; }
  .ph-inflate { grid-column: 8 / span 5; grid-row: 1 / span 2; }
  .ph-decide-text { grid-column: 1 / -1; }
  .ph-board { grid-column: 1 / -1; margin-top: 36px; }
  .ph-hour-head .ph-h2 { grid-column: 1 / span 7; }
  .ph-hour-head p { grid-column: 8 / span 5; }
  .ph-t { grid-column: span 3; }
  .ph-t:not(.ph-fold) { margin-top: 0; }
  .ph-fold { grid-column: 3 / span 8; margin-top: 48px; }
  .ph-fold .ph-gore { min-height: 78vw; }
  .ph-where-head .ph-h2 { grid-column: 1 / -1; }
  .ph-where-text { grid-column: 1 / span 9; margin-top: 20px; }
  .ph-rim { grid-column: 1 / span 5; }
  .ph-basket-text { grid-column: 6 / span 7; }
  .ph-notes { grid-column: 6 / span 7; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
  .ph-bf-a { grid-column: 1 / span 6; }
  .ph-bf-b { grid-column: 7 / span 6; }
  .ph-name-text { grid-column: 1 / span 7; }
  .ph-halo { grid-column: 8 / span 5; }
  .ph-ask-head { grid-column: 1 / -1; position: static; margin-bottom: 32px; }
  .ph-form { grid-column: 1 / -1; }
}
@media (max-width: 900px) and (min-width: 720px) {
  .ph-dates { grid-template-columns: auto 1fr; }
}

/* phones: open text, a single line of minutes, gores only where there is a picture in them */
@media (max-width: 719px) {
  .ph-sec { grid-template-columns: minmax(0, 1fr); padding: 64px 20px 0; }
  .ph-sec > *, .ph-hour-head > *, .ph-where-head > * { grid-column: 1 / -1 !important; }
  .ph-h2 { font-size: min(38px, 10vw); }
  .ph-gore { --ph-clip: var(--ph-gore-phone); }
  .ph-diagram { margin-top: 32px; }
  .ph-inflate { height: 128vw; max-height: 620px; margin: 36px 4vw 0; }
  .ph-s-decide { padding: 56px 20px; margin-top: 64px; }
  .ph-board { margin-top: 28px; }
  .ph-verdict { font-size: min(64px, 16cqi); }
  .ph-hour-head { display: block; margin-bottom: 28px; }
  .ph-hour-head p { margin-top: 12px; }
  .ph-steps { display: block; }
  .ph-t { --hz: 0px; padding: 0 0 26px 56px; }
  .ph-t:not(.ph-fold) { margin-top: 0; }
  .ph-t:not(.ph-fold)::before { left: 17px; top: 8px; width: 1.5px; height: 100%; }
  .ph-t .ph-num { position: static; height: auto; display: block; font-size: 52px; margin-bottom: 6px; }
  .ph-sun, .ph-t:nth-child(n) .ph-sun { left: 6px; right: auto; top: 0; bottom: auto; width: 24px; height: 24px; border-radius: 50%; }
  .ph-t:nth-child(1) .ph-sun, .ph-t:nth-child(2) .ph-sun { background: var(--ph-paper); border: 1.5px dashed var(--ph-burn); opacity: 1; }
  .ph-t0 .ph-sun { height: 24px; border-radius: 50%; }
  .ph-fold { padding: 0; margin-top: 10px; }
  .ph-fold .ph-gore { height: 132vw; max-height: 640px; min-height: 0; }
  .ph-fold-cap { width: 72%; }
  .ph-mapfig { margin-top: 28px; }
  .ph-map { height: min(120vw, 560px); margin-inline: 3vw; clip-path: var(--ph-gore-phone); }
  .ph-map-bar { gap: 12px 18px; }
  .ph-rim { aspect-ratio: 4 / 3; margin-bottom: 28px; order: 3; margin-top: 28px; }
  .ph-basket-text { padding: 0; }
  .ph-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
  .ph-notes ul { font-size: 16px; }
  .ph-s-breakfast { margin-top: 64px; }
  .ph-bleed { height: 112vw; max-height: 600px; min-height: 0; }
  .ph-bleed img { object-position: 50% 60%; }
  .ph-bf-text { padding-top: 32px; }
  .ph-bf-b { margin-top: 18px; }
  .ph-s-name { margin-top: 64px; }
  .ph-name-in { padding-block: 56px; }
  .ph-halo { margin: 44px 12% 16px; }
  .ph-s-ask { padding-bottom: 64px; }
  .ph-ask-head { position: static; margin-bottom: 26px; }
  .ph-form { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; margin-inline: -4px; }
  .ph-dates { grid-template-columns: auto minmax(0, 1fr); }
  .ph-crown-view { height: min(128vw, 560px); min-height: 440px; }
  .ph-crown-ask { padding: 0 18px; }
}

/* scroll: the first envelope fills as it rises into view, the horizon draws, headings and the closing name widen */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ph-inflate { animation: ph-fill linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .ph-inflate img { animation: ph-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
    .ph-t:not(.ph-fold)::before { animation: ph-draw linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .ph-t .ph-sun { animation: ph-sun linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
    .ph-h2 > span { animation: ph-widen linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .ph-crown-name { animation: ph-swell linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
    .ph-crown-ring { animation: ph-turn linear both; animation-timeline: view(); animation-range: entry 0% exit 30%; }
  }
}
@keyframes ph-fill { from { clip-path: var(--ph-seam-tall); } to { clip-path: var(--ph-clip); } }
@keyframes ph-rise { from { transform: scale(1.18) translateY(4%); } to { transform: none; } }
@keyframes ph-draw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ph-sun { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes ph-widen { from { font-variation-settings: "wdth" 62.5, "wght" 640; } to { font-variation-settings: "wdth" 112, "wght" 640; } }
@keyframes ph-swell { from { font-variation-settings: "wdth" 62.5, "wght" 300; } to { font-variation-settings: "wdth" 150, "wght" 800; } }
@keyframes ph-turn { from { transform: translate(-50%, -50%) rotate(-12deg); } to { transform: translate(-50%, -50%) rotate(0deg); } }
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ph-h2 > span { transition: font-variation-settings .9s var(--ph-ease); }
    .ph-js .ph-h2:not(.ph-seen) > span { font-variation-settings: "wdth" 62.5, "wght" 640; }
  }
}
@supports not (font-variation-settings: "wdth" 100) {
  .ph-name, .ph-h2 > span, .ph-verdict, .ph-crown-name { font-stretch: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-page *, .ph-page *::before, .ph-page *::after { transition-duration: 0s !important; animation: none !important; }
}