:root {
  --paper: #FBF6EF;
  --grid: #F6E4D4;
  --ink: #111418;
  --orange: #F2701C;
  --peach: #FF9A52;
  --orange-ink: #B4500F;
  --max: 1240px;
  --gutter: max(16px, env(safe-area-inset-left));
  --rhythm: clamp(44px, 4.2vw, 64px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.ph-root {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
}
img, svg { max-width: 100%; }
a { color: var(--orange-ink); }
.ph-skip {
  position: absolute; left: 12px; top: -40px; background: var(--ink); color: var(--paper); padding: 8px 12px;
}
.ph-skip:focus { top: 8px; z-index: 20; }
.ph-display, .ph-lockup, .ph-stat-num, .ph-time, .ph-slot-time, .ph-hook {
  font-family: Anton, Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 0.92;
}
.ph-display { line-height: 1.08; }
.ph-q, .ph-org, .ph-chip, .ph-points, .ph-stamp, .ph-tag, .ph-demo-flag {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ph-sec .ph-q {
  font-size: clamp(16px, 1.5vw, 21px);
  letter-spacing: 0.05em;
  color: var(--orange-ink);
  margin: 0 0 10px;
}
.ph-inkband .ph-sec .ph-q, .ph-close .ph-q { color: var(--orange); }
.ph-wrap { width: min(var(--max), calc(100% - (var(--gutter) * 2))); margin: 0 auto; }
.ph-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  padding: 10px var(--gutter);
  background: var(--paper);
  border-bottom: 1.5px solid var(--ink);
}
.ph-logos { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; }
.ph-logos img { height: 32px; width: auto; }
@media (max-width: 760px) { .ph-logos img { height: 22px; } }
.ph-nav { display: none; gap: 14px; align-items: center; }
.ph-nav a { color: var(--ink); text-decoration: none; font-size: 14px; }
.ph-nav.is-open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1.5px solid var(--ink); padding: 16px; }
.ph-menu { background: transparent; border: 1.5px solid var(--ink); padding: 8px 12px; font: inherit; }
.ph-dot {
  display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%;
  background: var(--orange); vertical-align: middle;
  animation: ph-pulse 1.4s ease-in-out infinite;
}
.ph-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 16px; border: 1.5px solid var(--ink);
  text-decoration: none; font: inherit; font-weight: 600; cursor: pointer; color: var(--ink); background: transparent;
}
.ph-btn-ink { background: var(--ink); color: var(--paper); }
.ph-btn-orange { background: var(--orange); color: var(--ink); border-color: var(--ink); }
.ph-btn-paper { background: var(--paper); color: var(--ink); }
.ph-btn-line { background: transparent; }
.ph-mark {
  background: var(--peach);
  color: var(--ink);
  padding: 0.02em 0.14em 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* One gap between sections, not two. A plain block only pads its top, so the space between two of
   them is a single rhythm; a band with its own background pads both sides so its content is not
   pressed against the colour. */
.ph-block { padding: var(--rhythm) 0 0; scroll-margin-top: 76px; }
/* The schedule ends on a dark calendar box. Without this the box butts straight into the ink
   band below it and the two read as a single slab, so the paper is given room to show. */
#schedule { padding-bottom: calc(var(--rhythm) * 0.7); }
/* A stray trailing margin on the last thing in a section adds itself to the rhythm and makes
   that one gap read as a mistake, so every section ends on the rhythm and nothing else. */
.ph-wrap > :last-child { margin-bottom: 0; }
.ph-inkband { padding: var(--rhythm) 0; scroll-margin-top: 76px; }
.ph-sec { margin-bottom: 28px; }
.ph-sec h2 {
  font-size: clamp(36px, 5.2vw, 68px);
  margin: 0;
  line-height: 1.12;
  text-wrap: balance;
  max-width: 18em;
}
.ph-sec h2 .ph-mark {
  display: block;
  width: fit-content;
  max-width: 100%;
  line-height: 1.02;
  margin: 12px 0 0;
  padding: 0.08em 0.16em 0.06em;
}
.ph-dek { font-size: clamp(18px, 1.75vw, 23px); max-width: 46ch; margin: 14px 0 0; }
.ph-cover { padding: 28px 0 12px; }
.ph-cover-grid { display: grid; gap: 28px; }
.ph-lockup { font-size: clamp(28px, 4vw, 42px); margin: 0 0 12px; line-height: 1.05; }
.ph-lockup em { font-style: normal; color: var(--peach); }
.ph-hero {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  font-size: clamp(52px, 8vw, 104px); margin: 0 0 18px; line-height: 0.96;
}
.ph-hero > span { display: inline-block; padding: 0.02em 0; }
.ph-hero .ph-mark { padding: 0.04em 0.08em 0.06em; }
.ph-facts { display: grid; gap: 12px; margin: 0 0 18px; }
.ph-facts div { border-top: 1.5px solid var(--ink); padding-top: 8px; }
.ph-facts dt { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.ph-facts dd { margin: 4px 0 0; font-weight: 600; }
.ph-sub { color: var(--ink); font-weight: 400; font-size: 15px; }
.ph-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.ph-next { margin-top: 16px; }
.ph-finder {
  position: relative; border: 2px solid var(--ink); min-height: 420px;
  padding: 18px; background: rgba(251, 246, 239, 0.8);
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
}
.ph-corner { position: absolute; width: 18px; height: 18px; border: 2px solid var(--ink); }
.ph-corner.a { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.ph-corner.b { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.ph-corner.c { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.ph-corner.d { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.ph-finder .ph-drone { width: min(280px, 70%); margin: 0 auto 12px; animation: ph-bob 3.2s ease-in-out infinite; }
.ph-drone .blades { transform-origin: 0 0; animation: ph-spin 0.7s linear infinite; }
.ph-count-nums { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.ph-count-nums b { font-family: Anton, sans-serif; font-size: clamp(36px, 5vw, 64px); line-height: 0.9; }
.ph-count-nums i { font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: 11px; margin-right: 8px; }
.ph-stats { padding: 12px 0 8px; }
.ph-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; }
.ph-stat { position: relative; padding-bottom: 12px; }
.ph-stat-num { font-size: clamp(42px, 7.6vw, 112px); margin: 6px 0; }
.ph-stat-num b { color: var(--orange); }
.ph-inkbit { color: var(--ink); font-size: 0.46em; }
.ph-statbar { display: block; height: 6px; background: var(--ink); }
.ph-prize-grid, .ph-prep, .ph-picker { display: grid; gap: 18px; }
.ph-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; align-items: end; grid-template-rows: clamp(200px, 20vw, 260px); }
.ph-podium article {
  background: var(--paper); border: 1.5px solid var(--ink); padding: 12px;
  height: var(--h); transform: scaleY(0.2); transform-origin: bottom;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
}
.ph-podium .ph-q { margin: 0; }
.ph-podium article.is-first { background: var(--orange); }
.ph-podium article.is-in { transform: none; }
.ph-podium b { font-family: Anton, sans-serif; font-size: clamp(32px, 4vw, 56px); }
.ph-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.ph-chips li, .ph-chip, .ph-points, .ph-stamp, .ph-tag {
  border: 1.5px solid var(--ink); padding: 4px 8px; background: var(--paper);
}
.ph-chips li.is-ink, .ph-chip.is-room { background: var(--ink); color: var(--paper); }
.ph-chip.is-hybrid, .ph-stamp { background: var(--peach); }
.ph-chip.is-online { background: transparent; border-style: dashed; }
.ph-points { background: var(--orange); border-color: var(--ink); }
.ph-path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 22px; }
.ph-path span { background: var(--ink); color: var(--paper); padding: 12px; font-family: Anton, sans-serif; text-transform: uppercase; }
.ph-tabs { display: flex; gap: 8px; overflow-x: auto; }
.ph-tabs button {
  flex: 0 0 auto; min-height: 48px; padding: 8px 12px; border: 1.5px solid var(--ink);
  background: transparent; font: inherit; cursor: pointer;
}
.ph-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.ph-track { display: grid; gap: 16px; border: 1.5px solid var(--ink); padding: 16px; background: rgba(251,246,239,0.86); }
.ph-track[hidden] { display: none; }
.ph-partner-mark { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 8px; }
.ph-partner-mark img {
  /* Logos fill the space they are given and are never cropped: contain, never cover.
     Wordmarks are much wider than they are tall, so the width cap has to be generous. */
  display: block; height: 76px; width: auto; max-width: min(360px, 100%);
  object-fit: contain; object-position: left center;
  background: #fff; border: 1.5px solid var(--ink); padding: 8px 12px;
}
.ph-secret { background: var(--ink); color: var(--paper); padding: 28px; min-height: 220px; }
.ph-secret h3 { font-size: clamp(48px, 8vw, 88px); margin: 0; }
.ph-win { border-left: 6px solid var(--orange); padding-left: 12px; }
.ph-ibm { margin-top: 18px; display: grid; gap: 12px; align-items: center; border: 1.5px solid var(--ink); padding: 16px; background: var(--paper); }
.ph-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ph-moments { display: grid; gap: 12px; margin: 18px 0; }
.ph-hero-card {
  background: var(--ink); color: var(--paper); padding: 20px;
  box-shadow: 10px 10px 0 var(--orange);
}
.ph-hero-card h3 { font-size: clamp(40px, 6vw, 72px); margin: 8px 0; }
.ph-subtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ph-subtiles span { border: 1px solid var(--paper); padding: 10px; font-family: Anton, sans-serif; text-transform: uppercase; }
.ph-moment { border: 1.5px solid var(--ink); padding: 14px; background: rgba(251,246,239,0.9); }
.ph-time { color: var(--orange); font-size: clamp(32px, 4vw, 48px); margin: 0; }
.ph-rooms, .ph-days { display: grid; gap: 12px; }
.ph-rooms article, .ph-day { border: 1.5px solid var(--ink); background: rgba(251,246,239,0.88); }
.ph-rooms article { padding: 12px; }
.ph-daybar {
  position: sticky; top: 58px; z-index: 2;
  display: flex; justify-content: space-between; gap: 8px;
  background: var(--ink); color: var(--paper); padding: 10px 12px;
  font-family: Anton, sans-serif; text-transform: uppercase;
}
.ph-slot { display: grid; grid-template-columns: 92px 1fr; gap: 8px; padding: 12px; border-top: 1px solid var(--ink); }
.ph-slot.is-signature { background: var(--paper); }
.ph-slot.is-signature h3::before { content: "◆ "; color: var(--orange); }
.ph-slot.is-now { background: var(--peach); }
.ph-slot.is-past { opacity: 0.55; }
.ph-slot-time { margin: 0; font-size: 22px; }
.ph-slot h3 { margin: 0 0 4px; font-size: 18px; font-family: Inter, sans-serif; text-transform: none; letter-spacing: 0; }
.ph-slot-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ph-room { font-size: 14px; }
.ph-now { background: var(--ink); color: var(--peach); padding: 2px 6px; font-family: "IBM Plex Mono", monospace; font-size: 11px; }
.ph-cal {
  margin-top: 22px; background: var(--ink); color: var(--paper); padding: 20px;
  box-shadow: 10px 10px 0 var(--orange); display: grid; gap: 12px 24px; align-items: center;
}
.ph-cal a { color: var(--paper); }
.ph-cal-actions { display: flex; flex-wrap: wrap; gap: 8px; align-content: center; margin: 0; }
.ph-talks { display: grid; gap: 16px; }
.ph-talk { background: rgba(251,246,239,0.92); border: 1.5px solid var(--ink); }
.ph-talk.is-key { box-shadow: 10px 10px 0 var(--peach); }
.ph-talk-photo { aspect-ratio: 4/5; overflow: hidden; background: var(--ink); }
.ph-talk-photo img, .ph-card-photo img, .ph-dialog-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-talk h3 { font-size: clamp(32px, 4vw, 48px); margin: 8px 16px; }
.ph-talk .ph-who, .ph-talk .ph-deck, .ph-talk .ph-btn, .ph-talk-meta { margin-left: 16px; margin-right: 16px; }
.ph-talk .ph-btn { margin-bottom: 16px; }
.ph-deck { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ph-kicker { font-family: Anton, sans-serif; text-transform: uppercase; font-size: 28px; margin: 28px 0 12px; }
.ph-grid { display: grid; gap: 12px; align-items: stretch; }
.ph-judges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ph-mentors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ph-card, .ph-fill {
  border: 1.5px solid var(--ink); background: var(--paper); min-height: 100%;
  display: flex; flex-direction: column; cursor: pointer;
}
.ph-card-photo { aspect-ratio: 1; overflow: hidden; background: var(--ink); }
.ph-gray { filter: grayscale(1); transition: filter 0.2s linear; }
.ph-card:hover .ph-gray, .ph-card:focus .ph-gray, .ph-card:focus-within .ph-gray { filter: none; }
.ph-color { filter: none; }
.ph-card-copy { padding: 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ph-card h3 {
  margin: 0; height: 2.5em; line-height: 1.25em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: 16px;
}
.ph-hook {
  margin: 0; color: var(--orange-ink); font-size: 18px;
  height: 3.15em; line-height: 1.05em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.ph-org { margin: 0; }
.ph-both { margin: 0; background: var(--orange); display: inline-block; padding: 2px 6px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.ph-fill { background: var(--ink); color: var(--paper); padding: 16px; justify-content: flex-end; }
.ph-fill h3 { font-family: Anton, sans-serif; text-transform: uppercase; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.08; margin: 0 0 8px; }
.ph-mono {
  width: 100%; height: 100%; min-height: 160px; display: grid; place-items: center;
  background: var(--ink); color: var(--orange); font-family: Anton, sans-serif; font-size: 64px;
}
.ph-marquee { margin-top: 28px; }
.ph-marquee-frame { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ph-marquee-track { display: flex; gap: 28px; width: max-content; animation: ph-marquee 48s linear infinite; }
.ph-worked {
  width: 136px; min-height: 78px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.ph-worked img, .ph-logo {
  height: 46px; width: auto; max-width: 124px; object-fit: contain; display: block;
}
.ph-worked span { display: block; font-size: 11px; line-height: 1.25; margin-top: 6px; }
.ph-word { display: block; font-size: 14px; }
.ph-inkband { background: var(--ink); color: var(--paper); padding: var(--rhythm) 0; }
.ph-inkband .ph-mark { color: var(--ink); }
.ph-inkband .ph-dek, .ph-on-ink { color: var(--paper); }
.ph-board { display: grid; gap: 16px; border: 1.5px solid var(--paper); padding: 16px; position: relative; }
.ph-demo-flag { position: absolute; top: 12px; right: 12px; background: var(--orange); color: var(--ink); padding: 4px 8px; }
.ph-ranks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ph-ranks li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; }
.ph-ranks i { display: block; height: 8px; background: var(--orange); width: var(--w); grid-column: 2; }
.ph-feed { margin: 0; padding-left: 18px; }
.ph-ranks li.ph-board-empty { display: block; max-width: 36ch; margin: 0; }
.ph-score { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ph-score button {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--paper); border: 1.5px solid var(--paper); padding: 8px 10px; font: inherit; cursor: pointer;
}
.ph-score button[aria-pressed="true"] { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.ph-criteria { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ph-criteria article { border: 1.5px solid var(--ink); padding: 12px; min-height: 120px; background: rgba(251,246,239,0.9); }
.ph-criteria .is-tie { background: var(--peach); }
.ph-rounds { display: grid; gap: 8px; padding-left: 18px; }
.ph-progress { height: 8px; background: var(--grid); border: 1px solid var(--ink); }
.ph-progress i { display: block; height: 100%; width: 0; background: var(--orange); }
.ph-checks { list-style: none; padding: 0; margin: 12px 0 0; }
.ph-checks label {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid var(--ink); cursor: pointer;
}
.ph-checks input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--orange); }
.ph-prep-card, .ph-bring-card, .ph-first-card {
  border: 1.5px solid var(--ink); background: rgba(251,246,239,0.92); padding: 18px;
}
.ph-prep-card h3, .ph-bring-card h3, .ph-first-card h3 {
  font-family: Anton, sans-serif; text-transform: uppercase; font-size: 32px; line-height: 1.05; margin: 0 0 8px;
}
.ph-bring { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ph-bring li {
  display: grid; grid-template-columns: 36px 1fr; gap: 8px; align-items: center;
  border: 1.5px solid var(--ink); padding: 10px 12px; background: var(--paper); min-height: 56px;
}
.ph-bring span { font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.ph-bring b { font-size: 16px; }
.ph-first { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ph-first li { padding-left: 14px; border-left: 6px solid var(--orange); }
.ph-faq { display: grid; gap: 12px; }
.ph-faq details {
  border: 1.5px solid var(--ink); background: var(--paper); padding: 0;
}
.ph-faq summary {
  cursor: pointer; font-family: Anton, sans-serif; text-transform: uppercase;
  font-size: clamp(20px, 2vw, 26px); line-height: 1.1; letter-spacing: 0.01em;
  padding: 16px 18px; list-style: none;
}
.ph-faq summary::-webkit-details-marker { display: none; }
.ph-faq summary::after { content: "+"; float: right; font-family: "IBM Plex Mono", monospace; font-size: 18px; }
.ph-faq details[open] summary::after { content: "–"; }
.ph-faq details p { margin: 0; padding: 0 18px 16px; max-width: 52ch; }
.ph-mystery {
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 18px; margin: 0 0 18px;
}
.ph-mystery h3 { font-size: clamp(36px, 5vw, 64px); line-height: 1.08; margin: 0 0 8px; color: var(--paper); max-width: 14em; }
.ph-mystery .ph-q { color: var(--orange); }
.ph-close { background: var(--ink); color: var(--paper); padding: var(--rhythm) 0; text-align: center; }
.ph-close .ph-ctas { justify-content: center; }
.ph-close .ph-social { justify-content: center; margin-top: 1.6rem; }
.ph-close h2 { font-size: clamp(48px, 8vw, 96px); margin: 0 0 16px; }
.ph-partners {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  list-style: none;
  padding: 18px 0 2px;
  align-items: center;
  /* Centring a row that overflows makes its first item unreachable, so the row is centred by its
     own width instead and simply starts at the left once it is wider than the screen. */
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.ph-partners::-webkit-scrollbar { display: none; }
.ph-partners li { flex: 0 0 auto; }
.ph-partners img { height: clamp(40px, 4.2vw, 56px); width: auto; max-width: 200px; object-fit: contain; background: #fff; padding: 8px 10px; border: 1.5px solid var(--paper); }
.ph-auth { width: min(640px, calc(100% - 32px)); margin: 48px auto 80px; }
.ph-auth h1 { font-size: clamp(48px, 8vw, 84px); }
.ph-auth form { display: grid; gap: 8px; }
.ph-auth input[type="email"], .ph-auth input[type="text"], .ph-boxes input {
  min-height: 52px; border: 1.5px solid var(--ink); background: #fff; font: inherit; padding: 8px 12px; width: 100%;
}
.ph-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ph-boxes input { text-align: center; font-family: Anton, sans-serif; font-size: 28px; }
.ph-note { max-width: 42ch; }
.ph-code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 28px; letter-spacing: 0.16em;
  display: inline-block; border: 1.5px solid var(--ink);
  background: var(--paper); padding: 4px 10px;
}
.ph-alert { background: var(--peach); padding: 10px; }
.ph-pilot, .ph-rail { position: fixed; z-index: 35; pointer-events: none; }
.ph-pilot {
  left: 0; top: 0; width: 72px; height: 72px; opacity: 0;
  will-change: transform;
}
.ph-pilot.is-on { opacity: 1; }
.ph-pilot .ph-drone { width: 72px; height: 72px; display: block; margin: 0; animation: none; }
.ph-finder.is-flying .ph-drone { animation: none; }
.ph-rail {
  top: 88px; right: 14px; bottom: 20px; width: 0;
  border-right: 2px dashed var(--ink); opacity: 0;
}
.ph-rail.is-on { opacity: 0.45; }
.ph-dialog { width: min(920px, calc(100% - 24px)); border: 1.5px solid var(--ink); background: var(--paper); padding: 16px; }
.ph-dialog::backdrop { background: rgba(17, 20, 24, 0.55); }
.ph-dialog-grid { display: grid; gap: 16px; }
.ph-dialog-photo { background: var(--ink); }
.ph-ticks { padding-left: 18px; }
.ph-fact { border-left: 6px solid var(--orange); padding-left: 10px; }
@media (min-width: 800px) {
  .ph-cover-grid, .ph-prep, .ph-track, .ph-ibm, .ph-cal, .ph-dialog-grid { grid-template-columns: 1.1fr 0.9fr; }
  .ph-prep, .ph-faq { align-items: start; }
  .ph-facts { grid-template-columns: repeat(3, 1fr); }
  .ph-sec-row { display: grid; gap: 4px; }
  .ph-prep-side { display: grid; gap: 12px; align-content: start; }
  .ph-moments { grid-template-columns: 1fr 1fr; }
  .ph-hero-card { grid-column: span 2; grid-row: span 2; }
  .ph-rooms { grid-template-columns: repeat(3, 1fr); }
  .ph-talks { grid-template-columns: repeat(3, 1fr); }
  .ph-faq { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ph-judges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ph-mentors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ph-criteria { grid-template-columns: repeat(5, 1fr); }
  .ph-board { grid-template-columns: 1.2fr 0.8fr; }
  .ph-board-foot, .ph-demo-flag { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .ph-judges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ph-mentors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .ph-menu { display: none; }
  .ph-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; }
  .ph-days { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .ph-day { display: flex; flex-direction: column; }
  .ph-day > :last-child { flex: 1 1 auto; }
  .ph-judges { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ph-mentors { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  .ph-days { grid-template-columns: 1fr; }
}
@media (max-width: 699px) {
  .ph-bar > .ph-btn { padding: 8px 10px; }
  .ph-pilot, .ph-pilot .ph-drone { width: 56px; height: 56px; }
  .ph-rail {
    top: auto; right: 16px; left: 16px; bottom: 14px; height: 0; width: auto;
    border-right: 0; border-bottom: 2px dashed var(--ink);
  }
}
@keyframes ph-bob { 50% { transform: translateY(-8px); } }
@keyframes ph-spin { to { transform: rotate(360deg); } }
@keyframes ph-pulse { 50% { opacity: 0.35; } }
@keyframes ph-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
  .ph-podium article { transform: none; }
  .ph-marquee-track { flex-wrap: wrap; width: auto; }
  .ph-pilot, .ph-rail { display: none !important; }
}

/* ---------------------------------------------------------------- what dual-use means */
.ph-twouse { display: grid; gap: 16px; margin-top: 18px; }
.ph-twouse article { border: 1.5px solid var(--ink); padding: 20px; background: rgba(251,246,239,0.88); }
.ph-twouse article.is-ink { background: var(--ink); color: var(--paper); }
.ph-twouse article.is-ink .ph-q { color: var(--orange); }
.ph-twouse h3 { font-size: clamp(26px, 3.2vw, 38px); margin: 6px 0 8px; }
/* The brief on the left, the example that proves it on the right. */
.ph-meaning-top { display: grid; gap: 20px; align-items: stretch; }
.ph-meaning-top .ph-sec { margin-bottom: 0; }
.ph-meaning-copy { display: grid; align-content: start; gap: 20px; }
.ph-meaning-copy .ph-twouse { margin-top: 0; }
.ph-meaning-copy .ph-twouse-foot { margin: 0; }
/* The pilot drone flies over the page at z-index 35; it is not part of this card, so it passes
   behind rather than landing on the artwork. */
.ph-example { background: rgba(251, 246, 239, 0.9); position: relative; z-index: 36;
  display: flex; flex-direction: column; }
/* The scene fills the card edge to edge, the same as a track card's does. */
.ph-example .ph-tcard-art { height: auto; aspect-ratio: 480 / 300; padding: 0; background: #F89850; }
@media (min-width: 860px) {
  /* All the slack goes to the sky above the satellite; the copy keeps its own height. */
  .ph-example .ph-tcard-art { flex: 1 1 auto; aspect-ratio: auto; min-height: 300px; }
  .ph-example .ph-tcard-body { flex: 0 0 auto; }
}
.ph-example .ph-tcard-art svg { width: 100%; height: 100%; max-width: none; display: block; }
.ph-example .ph-tcard-body { display: grid; gap: 6px; align-content: start; }
.ph-example .ph-display { font-size: clamp(30px, 3.4vw, 44px); margin: 0; }
.ph-example p { margin: 0; }
@media (min-width: 860px) {
  .ph-meaning-top { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr); gap: 28px; }
}

/* What you build runs the width of the page rather than hugging the left edge. */
.ph-build {
  margin-top: 20px;
  border: 1.5px solid var(--ink);
  border-left: 6px solid var(--orange);
  padding: 20px 22px;
  display: grid;
  gap: 10px 28px;
}
.ph-build .ph-kicker { margin: 0; grid-column: 1 / -1; }
@media (min-width: 860px) {
  .ph-build { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
}
.ph-build p { max-width: none; margin: 0; }
.ph-build strong { font-weight: 700; }

/* ---------------------------------------------------------------- partner prizes, sheet style */
.ph-partner-prizes { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 0; border-top: 1.5px solid var(--ink); }
.ph-pp { display: grid; gap: 12px; padding: 14px 0; border-bottom: 1.5px solid var(--ink); align-items: center; }
.ph-pp-mark { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ph-pp-mark img { display: block; height: 56px; width: auto; max-width: min(240px, 100%); object-fit: contain; object-position: left center; background: #fff; border: 1.5px solid var(--ink); padding: 8px 12px; }
.ph-pp-lens { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; border: 1.5px solid var(--ink); padding: 3px 8px; }
.ph-pp-head h4 { font-size: clamp(24px, 2.6vw, 34px); margin: 2px 0 4px; line-height: 1; }
.ph-pp-new { background: var(--orange); color: var(--ink); font-weight: 700; padding: 1px 6px; margin-left: 6px; }
.ph-pp-perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.ph-pp-perks li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.4; }
.ph-pp-perks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; background: var(--orange); }
.ph-pp-perks strong { font-weight: 700; }
.ph-pp-foot { margin-top: 16px; font-size: clamp(18px, 2.2vw, 24px); }
.ph-pp-foot strong { background: var(--orange); padding: 2px 8px; font-weight: 700; }

@media (min-width: 760px) {
  .ph-twouse { grid-template-columns: 1fr 1fr; }
  .ph-pp { grid-template-columns: minmax(180px, 240px) minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; }
}

/* ---------------------------------------------------------------- four tracks as four plates */
.ph-trackgrid { display: grid; gap: 12px; margin-top: 16px; align-items: stretch; }
.ph-tcard {
  border: 1.5px solid var(--ink); background: rgba(251,246,239,0.92);
  display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.ph-tcard-art {
  height: 132px; display: flex; align-items: center; justify-content: center;
  background: var(--ink); border-bottom: 1.5px solid var(--ink); padding: 10px;
}
.ph-tcard-art svg { height: 100%; width: auto; max-width: 100%; }
.ph-tcard-body { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.ph-tcard-no { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0; color: var(--orange); }
.ph-tcard h3 { font-size: clamp(24px, 2.5vw, 34px); margin: 0; line-height: 0.98; }
.ph-tcard-mark { margin: auto 0 0; }
.ph-tmark { display: inline-block; }
.ph-tmark img, .ph-ibm-mark img {
  display: block; height: 38px; width: auto; max-width: 100%; object-fit: contain;
  object-position: left center; background: #fff; border: 1.5px solid var(--ink); padding: 5px 9px;
}
.ph-tmark:hover img, .ph-tmark:focus-visible img { box-shadow: 4px 4px 0 var(--orange); }
.ph-win { border: 0; border-top: 1.5px solid var(--ink); padding: 0; margin: 0; }
.ph-win summary {
  list-style: none; cursor: pointer; padding: 11px 16px; display: grid; gap: 1px;
  background: rgba(240,232,220,0.6);
}
.ph-win summary::-webkit-details-marker { display: none; }
.ph-win summary span { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.ph-win summary b { font-size: 19px; font-weight: 700; }
.ph-win summary::after { content: "+"; position: absolute; right: 14px; font-family: Anton, sans-serif; font-size: 22px; line-height: 1; }
.ph-win summary { position: relative; }
.ph-win[open] summary::after { content: "\2212"; }
.ph-win[open] summary { background: var(--orange); }
.ph-win ul { margin: 0; padding: 10px 16px 14px 32px; font-size: 14.5px; display: grid; gap: 5px; }

.ph-secret {
  margin-top: 12px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper);
  display: grid; gap: 14px; align-items: center; padding: 16px 18px;
}
.ph-secret-q { font-family: Impact, "Archivo", sans-serif; font-size: 68px; line-height: 0.7; color: var(--orange); margin: 0; }
.ph-secret .ph-q { color: var(--orange); }
.ph-secret h3 { font-size: clamp(28px, 3.4vw, 42px); margin: 4px 0 6px; }
.ph-secret p { margin: 0; }
@media (min-width: 720px) { .ph-secret { grid-template-columns: 76px 1fr; } }

.ph-ibm { margin-top: 12px; }
.ph-ibm-mark img { height: 52px; }
.ph-trackrule { margin-top: 14px; max-width: 76ch; }

/* ---------------------------------------------------------------- the path, with the story */
.ph-pathnote { margin: 10px 0 0; max-width: 72ch; }
.ph-pathnote strong { font-weight: 700; }

@media (min-width: 620px) { .ph-trackgrid { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------- three faces, full height */
.ph-talks { display: grid; gap: 12px; align-items: stretch; }
.ph-talk { display: flex; flex-direction: column; }
.ph-talk-photo { aspect-ratio: 4/5; max-height: none; border-bottom: 1.5px solid var(--ink); }
.ph-talk-copy { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; }
.ph-talk h3 { margin: 0; font-size: clamp(27px, 2.7vw, 36px); line-height: 0.98; }
.ph-talk .ph-who, .ph-talk .ph-deck, .ph-talk .ph-talk-meta, .ph-talk .ph-talk-mark { margin: 0; }
.ph-talk .ph-deck { font-size: 15.5px; }
.ph-talk-mark img { display: block; height: 26px; width: auto; max-width: 160px; object-fit: contain; object-position: left center; }
.ph-talk-cta { margin: auto 0 0; padding-top: 6px; }
.ph-talk .ph-btn { margin: 0; }

.ph-session {
  margin-top: 12px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper);
  display: grid; gap: 16px; align-items: center; padding: 14px 16px;
}
.ph-session .ph-q, .ph-session .ph-stamp { color: var(--orange); }
.ph-session h3 { margin: 4px 0 2px; font-size: clamp(26px, 3vw, 38px); }
.ph-session p { margin: 0; }
.ph-session .ph-deck { font-size: 15.5px; margin-top: 6px; max-width: 70ch; }
.ph-session-photo { width: 104px; height: 104px; overflow: hidden; border: 1.5px solid var(--paper); }
.ph-session-photo img, .ph-session-photo .ph-mono { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-session-side { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
@media (min-width: 860px) { .ph-session { grid-template-columns: 104px minmax(0, 1fr) auto; } }

/* The podium is the picture of this section, so it runs the full width and the two cards sit
   under it, side by side. Stacked in a column beside it they only ever left paper under the bars. */
.ph-prize-grid { align-items: stretch; }
.ph-prize-side { display: grid; gap: 14px; }
@media (min-width: 720px) { .ph-prize-side { grid-template-columns: 1fr 1fr; } }
/* The money stays the loudest thing on the page. */
.ph-podium b { font-size: clamp(38px, 5vw, 68px); }
.ph-prize-side .ph-display { font-size: clamp(40px, 5.5vw, 72px); }

/* ---------------------------------------------------------------- prizes, read from across a room */
.ph-twouse-foot { margin: 12px 0 0; font-size: clamp(18px, 2.1vw, 23px); }
.ph-twouse-foot strong { background: var(--orange); padding: 2px 8px; font-weight: 700; }
.ph-prize-side article.is-ink { background: var(--ink); color: var(--paper); padding: 16px; }
.ph-prize-side article.is-ink .ph-q { color: var(--orange); }
.ph-prize-side article.is-ink a { color: var(--paper); }
.ph-open-lead { margin: 2px 0 12px; }
.ph-opens { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ph-opens li { border: 1.5px solid var(--ink); background: rgba(251,246,239,0.9); padding: 13px 15px; display: grid; gap: 5px; }
.ph-opens li.is-ink { background: var(--ink); color: var(--paper); }
.ph-opens b { font-family: Anton, sans-serif; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(20px, 2.1vw, 26px); font-weight: 400; line-height: 1; }
.ph-opens span { font-size: 15px; }
@media (min-width: 680px) { .ph-opens { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ph-opens { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------- the food sponsor closes the page */
.ph-pmark { display: block; }

/* ---------------------------------------------------------------- track art fills its plate */
.ph-tcard-art { padding: 0; height: 150px; }
.ph-tcard-art svg { width: 100%; height: 100%; max-width: none; display: block; }
/* the IBM strip: mark, words, button, each taking only what it needs */
.ph-ibm { grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; }
@media (max-width: 719px) { .ph-ibm { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- the podium stops growing */
.ph-podium { min-height: 0; height: 300px; }
.ph-podium article { padding: 12px; }
.ph-prize-side article { padding: 16px; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.ph-prize-side .ph-display { margin: 2px 0 4px; line-height: 0.95; }

/* ---------------------------------------------------------------- talk decks run to their own length */
.ph-talk .ph-deck { -webkit-line-clamp: 6; }
.ph-session .ph-deck { display: block; overflow: visible; }
.ph-talk-mark img { height: 30px; }

/* ---------------------------------------------------------------- the track scene, whole, on paper */
.ph-tcard-art { height: 128px; background: #f3ece2; padding: 8px 0; }
.ph-tcard-art svg { height: 100%; width: 100%; }
.ph-ibm-mark img { height: 64px; }
.ph-tcard-art { height: 160px; }

/* ---------------------------------------------------------------- buttons keep their own colours on dark */
.ph-cal a { color: inherit; }
.ph-cal p a:not(.ph-btn), .ph-cal div a:not(.ph-btn) { color: var(--paper); }
.ph-cal .ph-btn-paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.ph-cal .ph-btn-orange { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.ph-cal .ph-btn-line { background: transparent; color: var(--paper); border-color: var(--paper); }
.ph-cal .ph-btn-line:hover { background: var(--paper); color: var(--ink); }
.ph-close .ph-btn-paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.ph-inkband .ph-btn-paper, .ph-session .ph-btn-paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------------------------------------------------------------- the podium fits its own numbers */
/* A fixed height meant the third step was shorter than the "$200" standing on it. The steps keep
   their relative heights as a floor and grow if the money needs the room. */
.ph-podium article {
  height: auto;
  min-height: var(--h);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}
.ph-podium b { line-height: 1; display: block; }
/* On a phone the three steps are narrow, so the money is set to the step, not to the page. */
@media (max-width: 560px) {
  .ph-podium b { font-size: clamp(20px, 6.2vw, 34px); }
  .ph-podium article { padding: 10px 8px; }
  .ph-podium { height: 240px; }
}
/* Four steps in a row do not fit a phone; "LA Coliseum" was pushing the whole page sideways. */
@media (max-width: 620px) {
  .ph-path { grid-template-columns: repeat(2, 1fr); }
  .ph-path span { padding: 10px; font-size: 15px; }
}

/* Who to ask, in the closing block. */
.ph-contacts {
  list-style: none;
  margin: 1.6rem 0 1.2rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  text-align: left;
}
.ph-contacts li {
  display: grid;
  align-content: start;
  gap: 0.15rem;
  border-top: 1.5px solid currentColor;
  padding-top: 0.6rem;
}
.ph-contacts strong { font-size: 1.05rem; }
.ph-contacts span { font-size: 0.9rem; opacity: 0.75; }
.ph-contacts a { font-size: 0.9rem; word-break: break-word; }

/* A radar sweeping behind the drone. Decoration only: it is centred on the craft, sits under it,
   never catches a click, and holds still for anyone who has asked for less motion. */
.ph-scope { position: relative; display: block; width: min(280px, 70%); margin: 0 auto 12px; }
.ph-finder .ph-scope .ph-drone { width: 100%; margin: 0; }
.ph-radar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  /* Range rings, then the faint crosshair through the middle. */
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(242, 112, 28, 0.22) 0 1px, transparent 1px 16%),
    linear-gradient(to right, transparent calc(50% - 0.5px), rgba(242, 112, 28, 0.16) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(242, 112, 28, 0.16) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 74%);
}
.ph-radar i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(242, 112, 28, 0.34), rgba(242, 112, 28, 0.09) 34deg, transparent 76deg);
  animation: ph-sweep 4.5s linear infinite;
}
.ph-finder .ph-drone { position: relative; z-index: 1; }
/* The craft lifts out of the panel on scroll, so the radar goes with it rather than sweeping an
   empty box. */
.ph-radar { transition: opacity 0.35s ease; }
.ph-finder.is-flying .ph-radar { opacity: 0; }
@keyframes ph-sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ph-radar i { animation: none; }
}

/* Where to follow the weekend, at the foot of the page. Big enough to hit with a thumb. */
.ph-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 2.5rem 0 0;
}
.ph-social-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  min-height: 64px;
  border: 1.5px solid currentColor;
  text-decoration: none;
  color: inherit;
  text-align: left;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.ph-social-btn svg { flex: 0 0 auto; fill: currentColor; }
.ph-social-btn span { display: grid; line-height: 1.25; }
.ph-social-btn b { font-size: 1.05rem; }
.ph-social-btn span { font-size: 0.85rem; opacity: 0.8; }
.ph-social-btn b { opacity: 1; }
.ph-social-btn:hover, .ph-social-btn:focus-visible { transform: translateY(-2px); }
.ph-social-wa:hover, .ph-social-wa:focus-visible { background: #25D366; color: #0b1f12; border-color: #0b1f12; }
.ph-social-ig:hover, .ph-social-ig:focus-visible { background: #FF0069; color: #fff; border-color: #fff; }
@media (max-width: 520px) {
  .ph-social-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-social-btn:hover, .ph-social-btn:focus-visible { transform: none; }
}

/* The mentor promise, across the page rather than filling a hole in the grid. */
.ph-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 20px 32px;
  margin-top: 20px;
  padding: 28px 32px;
  background: var(--ink);
  color: var(--paper);
}
.ph-banner h3 {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.02;
  margin: 0;
}
.ph-banner p {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
  opacity: 0.88;
}
@media (max-width: 760px) {
  .ph-banner { grid-template-columns: 1fr; padding: 22px; gap: 12px; }
}

/* The checklist is shorter than the two cards beside it, so the gap under it carries the way into
   the Builder's Kit rather than sitting empty. */
.ph-kitbox {
  display: block;
  margin-top: 18px;
  padding: 20px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: transform 0.15s ease;
}
.ph-kitbox .ph-q { color: var(--orange); margin: 0 0 6px; }
.ph-kitbox h3 {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.05;
  margin: 0 0 8px;
  color: var(--paper);
}
.ph-kitbox p { margin: 0; font-size: 0.95rem; line-height: 1.45; opacity: 0.85; }
.ph-kitbox-go {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 16px;
  background: var(--orange);
  color: #111418;
  font-weight: 600;
  font-size: 0.9rem;
}
.ph-kitbox:hover, .ph-kitbox:focus-visible { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .ph-kitbox:hover, .ph-kitbox:focus-visible { transform: none; }
}

/* The closing moment runs the width of the row rather than leaving a hole beside it. */
.ph-moment-wide { grid-column: 1 / -1; display: grid; gap: 6px 20px; align-items: center; }
.ph-moment-wide h3 { margin: 0; }
.ph-moment-wide p { margin: 0; }
.ph-moment-wide .ph-time { font-size: clamp(22px, 2.4vw, 30px); }
.ph-moment-wide .ph-moment-note { color: #5c5348; }
@media (min-width: 760px) {
  .ph-moment-wide { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr) auto; }
}

/* ---------------------------------------------------------------- the Builder's Kit
   The kit is part of the weekend, not a separate website, so it uses the same paper, the same
   borders and the same orange as everything else. */
.ph-kitstats { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; }
.ph-kitstats li { border: 1.5px solid var(--ink); padding: 10px 16px; display: flex; align-items: baseline; gap: 8px; }
.ph-kitstats b { font-family: Anton, sans-serif; font-size: 28px; line-height: 1; }
.ph-kitstats span { font-size: 0.85rem; color: #5c5348; }

.ph-first-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.ph-first-list a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 18px;
  padding: 16px 18px; border: 1.5px solid var(--ink); text-decoration: none; color: inherit;
  background: rgba(251, 246, 239, 0.9); transition: background-color 0.15s ease, color 0.15s ease;
}
.ph-first-n { font-family: "IBM Plex Mono", monospace; font-size: 0.78rem; color: var(--orange-ink); }
.ph-first-body { display: grid; gap: 2px; min-width: 0; }
.ph-first-body strong { font-size: 1.05rem; line-height: 1.25; }
.ph-first-body em { font-style: normal; color: #5c5348; font-size: 0.92rem; }
.ph-first-time { font-family: "IBM Plex Mono", monospace; font-size: 0.74rem; color: #8a8178; white-space: nowrap; }
.ph-first-list a:hover, .ph-first-list a:focus-visible { background: var(--ink); color: var(--paper); }
.ph-first-list a:hover .ph-first-body em, .ph-first-list a:focus-visible .ph-first-body em,
.ph-first-list a:hover .ph-first-time, .ph-first-list a:focus-visible .ph-first-time { color: inherit; }

.ph-docs { display: grid; gap: 8px; margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ph-docs a {
  display: grid; gap: 2px; padding: 12px 14px; border: 1.5px solid #d8c3a5;
  text-decoration: none; color: inherit; transition: border-color 0.15s ease;
}
.ph-docs a:hover, .ph-docs a:focus-visible { border-color: var(--ink); }
.ph-docs strong { font-size: 0.98rem; }
.ph-docs span { font-size: 0.86rem; color: #5c5348; }

.ph-kitgrid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-top: 18px; }
.ph-kitgrid .ph-tcard { display: grid; align-content: start; gap: 4px; padding: 16px; text-decoration: none; color: inherit; }
.ph-kitgrid .ph-tcard h3 { margin: 2px 0; font-size: 1.05rem; line-height: 1.25; }
.ph-kitgrid .ph-tcard p { margin: 0; font-size: 0.9rem; }
.ph-kitgrid .ph-tcard:hover, .ph-kitgrid .ph-tcard:focus-visible { border-color: var(--orange-ink); }
.ph-kitsub { margin-top: 24px; }
.ph-kitsub h3 { font-family: Anton, sans-serif; text-transform: uppercase; font-size: 22px; margin: 0; }
.ph-folio { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1.5px solid var(--ink); padding-bottom: 6px; }
.ph-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.ph-badge { border: 1.5px solid var(--ink); padding: 1px 6px; font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; text-transform: uppercase; }
.ph-badge.is-free { background: var(--orange); }
.ph-perk-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.ph-claim { color: var(--orange-ink); white-space: nowrap; }
.ph-applylist { display: grid; gap: 8px; margin-top: 16px; }
.ph-apply { display: grid; gap: 2px; padding: 12px 14px; border: 1.5px solid #d8c3a5; text-decoration: none; color: inherit; }
.ph-apply:hover, .ph-apply:focus-visible { border-color: var(--ink); }
.ph-deadline .ph-time { font-family: Anton, sans-serif; font-size: 24px; color: var(--orange-ink); }

.ph-kitbar { position: sticky; top: 56px; z-index: 30; background: var(--paper); border-bottom: 1.5px solid var(--ink); padding: 10px 0; }
.ph-kitbar .ph-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ph-kitsearch { flex: 1 1 220px; }
.ph-kitsearch input { width: 100%; border: 1.5px solid var(--ink); background: #fff; padding: 9px 12px; font: inherit; }
.ph-kitchips { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-kitchips button { border: 1.5px solid var(--ink); background: #fff; padding: 7px 12px; font: inherit; font-size: 0.86rem; cursor: pointer; }
.ph-kitchips button.is-on { background: var(--ink); color: var(--paper); }
.ph-kitjumps { display: flex; flex-wrap: wrap; gap: 10px; }
.ph-kitjumps a { color: var(--orange-ink); }
.ph-kit-empty { padding: 20px 0; color: #5c5348; }
.ph-skiplabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ph-flash { border: 1.5px solid var(--ink); padding: 16px; margin-top: 20px; }
.ph-flashgrid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 10px; }
.ph-flashgrid p { margin: 0; display: grid; gap: 1px; font-size: 0.9rem; }
.ph-know { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ph-know h2 { grid-column: 1 / -1; }
.ph-know ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 0.92rem; }
@media (max-width: 620px) {
  .ph-first-list a { grid-template-columns: auto minmax(0, 1fr); }
  .ph-first-time { grid-column: 2; }
  .ph-kitbar { position: static; }
}