/* caratinternational.net, version 2.
   A graphite hallway with four windows, one for each app. Each window opens onto that app's own
   world: its photograph (moving, where motion is allowed), its colours and its typeface. Dark by
   design, so the page paints every colour itself and does not switch with the system theme. */

/* ---------- fonts (all SIL Open Font License, self-hosted) ---------- */
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2"); font-weight: 400 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin.woff2") format("woff2"); font-weight: 600 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin-ext.woff2") format("woff2"); font-weight: 600 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-semibold.woff") format("woff"); font-weight: 600; font-display: swap; }

:root {
  --hall: #141619;
  --hall-ink: #F2F2EF;
  --hall-dim: #B3B8BE;
  --light: #F4F3EF;
  --light-ink: #17191C;
  --light-dim: #4C5157;
  --rule-light: #D6D4CE;
  --tk-navy: #0B1424; --tk-ink: #F3F4F7; --tk-soft: #CBD5E4; --tk-label: #B3C7E8;
  --rp-ink: #FFFFFF; --rp-teal: #86E6F0; --rp-soft: #CBD5E2;
  --cu-ink: #FFF5E6; --cu-soft: #ECDFF0; --cu-yellow: #FFCB45;
  --bp-paper: #E4D8BE; --bp-ink: #332B21; --bp-ink-2: #554A3B; --bp-red: #843020; --bp-green: #2E4F32;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --rounded: "Nunito", "Arial Rounded MT Bold", "Helvetica Neue", sans-serif;
  --hand: "Caveat", "Bradley Hand", cursive;
  --book: "Lora", Georgia, serif;
  --gutter: 96px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--hall); -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--hall); color: var(--hall-ink); font: 400 20px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video { max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
.wrap { width: min(1728px, calc(100% - 2 * var(--gutter))); margin: 0 auto; }
.label { font: 600 18px/1.4 var(--sans); letter-spacing: 0.01em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid #FFCB45; outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 50; background: #FFCB45; color: #17191C; font-weight: 700; padding: 12px 18px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- nav ---------- */
.nav { background: var(--hall); border-bottom: 1px solid #2A2D32; position: sticky; top: 0; z-index: 20; }
.nav .wrap { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.word { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; text-decoration: none; color: var(--hall-ink); }
.word b { font: 700 23px/1 var(--sans); letter-spacing: -0.01em; }
.word .tiles { display: grid; grid-template-columns: 9px 9px; gap: 3px; }
.word .tiles i { width: 9px; height: 9px; border-radius: 2px; }
.word .tiles i:nth-child(1) { background: #90A9D6; }
.word .tiles i:nth-child(2) { background: #86E6F0; }
.word .tiles i:nth-child(3) { background: #FFCB45; }
.word .tiles i:nth-child(4) { background: #E4D8BE; }
.links { display: flex; gap: 34px; align-items: center; }
.links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; font-size: 17px; color: #E4E5E2; }
.links a:hover, .links a[aria-current="page"] { color: #FFFFFF; text-decoration: underline; }
.links a small { font: 500 15px/1 var(--sans); color: var(--hall-dim); margin-left: 8px; }
.links .sup { border: 1px solid #4A4E54; border-radius: 999px; padding: 0 20px; }
.menu { display: none; }

/* ---------- intro ---------- */
.intro { padding: 58px 0 48px; }
.intro .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: end; }
.intro .label { color: var(--hall-dim); margin-bottom: 18px; }
.intro h1 { font: 700 84px/0.98 var(--sans); letter-spacing: -0.035em; }
.intro p.lede { font-size: 23px; line-height: 1.5; color: #CDD0D4; max-width: 32em; padding-bottom: 8px; }

/* ---------- the four windows ---------- */
.windows { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 0.5fr; gap: 6px; padding: 0 6px 6px; height: 712px; }
.win { position: relative; overflow: hidden; border-radius: 4px; display: flex; flex-direction: column; justify-content: flex-end; background: #0E1013; }
.win .media { position: absolute; inset: 0; }
.win .media img, .win .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.win .media video { opacity: 0; transition: opacity 600ms ease; }
.win .media video.on { opacity: 1; }
.win::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.28) 54%, rgba(6, 8, 12, 0.9) 100%); }
.win .in { position: relative; z-index: 1; padding: 0 40px 40px; display: grid; gap: 14px; justify-items: start; }
.win .appicon { --size: 72px; }
.win h2 { font-size: 46px; line-height: 1.02; }
.win .in p { font-size: 19px; line-height: 1.45; color: #ECEDEF; max-width: 22em; }
.win.tk h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
.win.rp h2 { font-family: var(--sans); font-weight: 800; letter-spacing: -0.03em; }
.win.cu h2 { font-family: var(--rounded); font-weight: 900; letter-spacing: -0.01em; }
.win.bp::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(30, 22, 14, 0.55) 55%, rgba(24, 18, 12, 0.93) 100%); }
/* "Backporch" is one long handwritten word in the narrowest window, and at 50px it ran past the
   window's edge on a 1440 screen. Sized from the window's own width so it never clips. */
.win.bp { container-type: inline-size; }
.win.bp h2 { font-family: var(--hand); font-weight: 700; font-size: min(50px, 17cqi); line-height: 0.95; }
.win.bp .in { padding: 0 28px 40px; }
.win .soon { display: inline-flex; align-items: center; min-height: 44px; font: 600 17px/1.3 var(--sans); color: #F4E6C8; text-decoration: none; border: 1px solid rgba(244, 230, 200, 0.7); border-radius: 999px; padding: 0 18px; }
.win .soon:hover { background: rgba(244, 230, 200, 0.12); }
.win .badge { --bh: 52px; margin-top: 6px; }
.win.tk .media img, .win.tk .media video { object-position: 50% 50%; }
/* one button pauses all four films (it only shows when they can move) */
.motion { position: absolute; z-index: 3; top: 16px; right: 22px; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; background: rgba(12, 14, 18, 0.74); color: #F2F2EF; font: 600 16px/1 var(--sans); cursor: pointer; }
.motion:hover { background: rgba(12, 14, 18, 0.9); }
.motion[hidden] { display: none; }
.motion svg { width: 13px; height: 13px; }
.motion .i-play, .motion.held .i-pause { display: none; }
.motion.held .i-play { display: block; }

/* ---------- device frames around the real screenshots ---------- */
.iphone { --s: 340px; --metal: linear-gradient(160deg, #a3a6ab 0%, #55585d 14%, #2b2d30 48%, #3d4044 80%, #a9acb1 100%);
  --drop: 0 calc(var(--s) * 0.07) calc(var(--s) * 0.17) rgba(8, 10, 14, 0.32), 0 calc(var(--s) * 0.018) calc(var(--s) * 0.04) rgba(8, 10, 14, 0.26);
  position: relative; flex: none; width: calc(var(--s) * 1.088); height: calc(var(--s) * 2.2607); border-radius: calc(var(--s) * 0.178);
  background: var(--metal); box-shadow: var(--drop), inset 0 0 0 calc(var(--s) * 0.0025) rgba(255, 255, 255, 0.28); }
.iphone .glass { position: absolute; inset: calc(var(--s) * 0.012); border-radius: calc(var(--s) * 0.166); background: #020203; padding: calc(var(--s) * 0.032);
  box-shadow: inset 0 0 0 calc(var(--s) * 0.002) rgba(255, 255, 255, 0.07); }
.iphone .glass img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: calc(var(--s) * 0.132); }
.iphone .island { position: absolute; top: calc(var(--s) * 0.0605); left: 50%; width: calc(var(--s) * 0.285); height: calc(var(--s) * 0.084); transform: translateX(-50%); border-radius: 999px; background: #000; }
.iphone .hw { position: absolute; width: calc(var(--s) * 0.013); background: var(--metal); border-radius: calc(var(--s) * 0.006); }
.iphone .hw.l { left: calc(var(--s) * -0.009); } .iphone .hw.r { right: calc(var(--s) * -0.009); }
.iphone .hw.act { top: 17.6%; height: 3.4%; } .iphone .hw.up { top: 23.6%; height: 6.6%; } .iphone .hw.dn { top: 31.6%; height: 6.6%; }
.iphone .hw.pwr { top: 25.5%; height: 10.4%; } .iphone .hw.cam { top: 52%; height: 7.2%; }
.ipad { --s: 900px; --metal: linear-gradient(170deg, #b9bcc0 0%, #6b6e73 20%, #3a3c40 55%, #5b5e63 85%, #b3b6ba 100%);
  --drop: 0 calc(var(--s) * 0.03) calc(var(--s) * 0.07) rgba(8, 10, 14, 0.30), 0 calc(var(--s) * 0.008) calc(var(--s) * 0.016) rgba(8, 10, 14, 0.24);
  position: relative; flex: none; width: calc(var(--s) * 1.054); height: calc(var(--s) * 0.8043); border-radius: calc(var(--s) * 0.045);
  background: var(--metal); box-shadow: var(--drop), inset 0 0 0 calc(var(--s) * 0.0012) rgba(255, 255, 255, 0.3); }
.ipad .glass { position: absolute; inset: calc(var(--s) * 0.005); border-radius: calc(var(--s) * 0.04); background: #020203; padding: calc(var(--s) * 0.022); }
.ipad .glass img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--s) * 0.017); }
.ipad .cam { position: absolute; top: calc(var(--s) * 0.0155); left: 50%; width: calc(var(--s) * 0.0075); height: calc(var(--s) * 0.0075); transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3442, #07090c 70%); }
.la { --w: 520px; display: block; margin: 0; width: var(--w); max-width: min(100%, 544px); align-self: start; border-radius: calc(var(--w) * 0.075); overflow: hidden;
  box-shadow: 0 calc(var(--w) * 0.04) calc(var(--w) * 0.09) rgba(8, 10, 14, 0.30), 0 calc(var(--w) * 0.008) calc(var(--w) * 0.02) rgba(8, 10, 14, 0.22); }
.la img { display: block; width: 100%; height: auto; }
.detail { --w: 360px; display: block; margin: 0; width: var(--w); max-width: min(100%, 640px); align-self: start; border-radius: calc(var(--w) * 0.055); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 calc(var(--w) * 0.05) calc(var(--w) * 0.12) rgba(8, 10, 14, 0.30), 0 calc(var(--w) * 0.01) calc(var(--w) * 0.025) rgba(8, 10, 14, 0.22); }
.detail img { display: block; width: 100%; height: auto; }
.appicon { --size: 120px; display: inline-block; flex: none; width: var(--size); height: var(--size); filter: drop-shadow(0 calc(var(--size) * 0.04) calc(var(--size) * 0.07) rgba(8, 10, 14, 0.22)); }
.appicon img { display: block; width: 100%; height: 100%;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 0C79 0 89.6 0 94.8 5.2 100 10.4 100 21 100 50s0 39.6-5.2 44.8C89.6 100 79 100 50 100s-39.6 0-44.8-5.2C0 89.6 0 79 0 50S0 10.4 5.2 5.2C10.4 0 21 0 50 0Z'/></svg>") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 0C79 0 89.6 0 94.8 5.2 100 10.4 100 21 100 50s0 39.6-5.2 44.8C89.6 100 79 100 50 100s-39.6 0-44.8-5.2C0 89.6 0 79 0 50S0 10.4 5.2 5.2C10.4 0 21 0 50 0Z'/></svg>") center / 100% 100% no-repeat; }
.badge { display: inline-block; line-height: 0; border-radius: 9px; }
.badge img { display: block; height: var(--bh, 56px); width: auto; }

/* ---------- chapters ---------- */
.ch { position: relative; overflow: hidden; }
.ch .wrap { position: relative; z-index: 2; }
.ch .label { margin-bottom: 26px; }
.ch .body { font-size: 22px; line-height: 1.55; max-width: 31em; }
.ch .body + .body { margin-top: 16px; }
.facts { display: grid; gap: 6px; margin: 28px 0 0; padding: 0; list-style: none; }
.facts li { font: 600 19px/1.45 var(--sans); }
.act { display: flex; align-items: center; gap: 30px; margin-top: 40px; flex-wrap: wrap; }
.act .badge { --bh: 60px; }
.act .go { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 19px; }
.small { font-size: 18px; line-height: 1.5; }

.ch.tk { height: 1120px; color: var(--tk-ink); background: linear-gradient(180deg, #172B4D 0%, #0A1426 100%); }
.ch.tk .wrap { padding-top: 150px; }
.ch.tk .copy { width: 760px; }
.ch.tk h2 { font: 600 90px/1.0 var(--serif); letter-spacing: -0.015em; }
.ch.tk .label { color: var(--tk-label); }
.ch.tk .body { color: var(--tk-soft); margin-top: 30px; }
.ch.tk .facts li { color: #E8EDF5; }
.ch.tk .stage { position: absolute; z-index: 2; right: 140px; top: 120px; width: 760px; height: 960px; }
.ch.tk .stage .iphone { position: absolute; right: 0; top: 0; }
.ch.tk .stage .la { position: absolute; left: 0; bottom: 30px; }

.ch.rp { height: 1360px; color: var(--rp-ink); background: linear-gradient(180deg, #0C1527 0%, #02050B 75%); }
.ch.rp .wrap { padding-top: 130px; }
.ch.rp .top { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.ch.rp h2 { font: 800 92px/1.0 var(--sans); letter-spacing: -0.035em; }
.ch.rp .label { color: var(--rp-teal); }
.ch.rp .body { color: var(--rp-soft); padding-top: 52px; }
.ch.rp .small { color: #BAC5D2; margin-top: 20px; max-width: 34em; }
.ch.rp .stage { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: -40px; width: 1500px; height: 760px; }
.ch.rp .stage .ipad { position: absolute; right: 120px; bottom: 80px; }
.ch.rp .stage .iphone { position: absolute; left: 150px; bottom: 60px; }
.ch.rp .act { margin-top: 30px; }

.ch.cu { height: 1180px; color: var(--cu-ink); background: linear-gradient(180deg, #3C1847 0%, #1E0B25 100%); }
.ch.cu .wrap { padding-top: 150px; display: flex; justify-content: flex-end; }
.ch.cu .copy { width: 720px; }
.ch.cu h2 { font: 900 92px/1.0 var(--rounded); letter-spacing: -0.015em; }
.ch.cu .label { color: var(--cu-yellow); }
.ch.cu .body { color: var(--cu-soft); margin-top: 30px; }
.ch.cu .facts li { color: #FFE6A8; }
.ch.cu .stage { position: absolute; z-index: 2; left: 150px; bottom: 72px; display: flex; gap: 40px; align-items: flex-end; }
.ch.cu .stage .iphone:first-child { margin-bottom: 60px; }

.ch.bp { background: var(--bp-paper); color: var(--bp-ink); padding: 120px 0; }
.ch.bp .bpgrid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.ch.bp .paper { display: grid; align-content: start; }
.ch.bp .label { font: italic 400 21px/1.4 var(--book); color: var(--bp-red); }
.ch.bp h2 { font: 700 112px/0.92 var(--hand); color: var(--bp-ink); }
.ch.bp .body { font-family: var(--book); color: var(--bp-ink-2); margin-top: 28px; font-size: 22px; }
.ch.bp .go { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--book); font-weight: 600; color: var(--bp-red); }
.ch.bp .shots { display: flex; gap: 34px; justify-content: flex-end; align-items: flex-start; }
.ch.bp .shots .iphone { --drop: 0 30px 60px rgba(51, 43, 33, 0.35), 0 8px 16px rgba(51, 43, 33, 0.25); }
.ch.bp .shots .iphone:nth-child(2) { margin-top: 70px; }
.stamp { display: inline-flex; align-items: center; margin-bottom: 30px; font: 600 19px/1 var(--book); color: var(--bp-green); border: 2px solid var(--bp-green); border-radius: 999px; padding: 12px 20px; justify-self: start; }

/* ---------- support ---------- */
.studio { background: var(--light); color: var(--light-ink); padding: 120px 0 128px; }
.studio .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 96px; }
.studio h2 { font: 700 64px/1.02 var(--sans); letter-spacing: -0.03em; }
.studio .about p { font-size: 21px; color: var(--light-dim); margin-top: 24px; max-width: 30em; }
.studio .label { color: var(--light-dim); margin-bottom: 18px; }
.desk { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.desk .item { border-top: 1px solid var(--rule-light); padding: 26px 0 28px; display: grid; gap: 6px; align-content: start; }
.desk .item h3 { display: flex; align-items: center; gap: 14px; font: 700 22px/1.2 var(--sans); margin-bottom: 4px; }
.desk .item h3 .appicon { --size: 40px; filter: none; }
.desk .item a, .desk .item address { font-size: 19px; color: var(--light-ink); font-style: normal; line-height: 1.5; }
.desk .item a { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }
.desk .item .ls { display: flex; flex-wrap: wrap; gap: 0 22px; }
.desk .item .note { font-size: 18px; color: var(--light-dim); }
.desk .item.wide { grid-column: 1 / -1; }

/* ---------- footer ---------- */
.foot { background: var(--hall); color: var(--hall-dim); padding: 64px 0 72px; border-top: 1px solid #2A2D32; }
.foot .wrap { display: grid; gap: 30px; }
.foot .r1 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; }
.foot .badges { display: flex; gap: 22px 32px; flex-wrap: wrap; }
.foot .fb { display: grid; gap: 10px; justify-items: start; }
.foot .fn { display: flex; align-items: center; gap: 10px; font: 600 17px/1.2 var(--sans); color: #E4E5E2; }
.foot .fn .appicon { --size: 28px; filter: none; }
.foot .badges .badge { --bh: 48px; }
.foot .r2 { display: flex; flex-wrap: wrap; gap: 0 30px; font-size: 17px; }
.foot .r2 a { display: inline-flex; align-items: center; min-height: 44px; color: #E4E5E2; }
.foot small { font-size: 15px; line-height: 1.6; color: #A9AEB4; max-width: 72em; }

/* ---------- the TickKet page ---------- */
.apphero { position: relative; height: 1004px; overflow: hidden; color: var(--tk-ink); background: #09111F; }
.apphero > .photo { position: absolute; left: 0; top: 0; width: 100%; height: 1080px; object-fit: cover; object-position: 62% 50%; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.apphero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(9, 17, 31, 0.96) 0%, rgba(9, 17, 31, 0.9) 34%, rgba(9, 17, 31, 0.3) 56%, rgba(9, 17, 31, 0) 70%); }
.apphero .wrap { position: relative; z-index: 2; padding-top: 120px; }
.apphero .copy { width: 760px; display: grid; gap: 28px; justify-items: start; }
.apphero h1 { font: 600 150px/0.95 var(--serif); letter-spacing: -0.02em; display: flex; align-items: center; gap: 34px; }
.apphero .label { color: var(--tk-label); }
.apphero .lede { font-size: 25px; line-height: 1.5; color: var(--tk-soft); max-width: 29em; }
.apphero .act.first { margin-top: 6px; }
.apphero .act .small { color: #C4CEDD; }
.apphero .stage { position: absolute; z-index: 2; right: 150px; top: 90px; width: 720px; height: 880px; }
.apphero .stage .iphone { position: absolute; right: 0; top: 0; }
.apphero .stage .la { position: absolute; left: 0; bottom: 20px; }
.tkband { background: var(--tk-navy); color: var(--tk-ink); padding: 140px 0; }
.tkband + .tkband { border-top: 1px solid #1B2840; }
.tkband .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; align-items: center; }
.tkband.flip .copy { order: 2; }
.tkband h2 { font: 600 80px/1.02 var(--serif); letter-spacing: -0.015em; }
.tkband .label { color: var(--tk-label); margin-bottom: 24px; }
.tkband .body { font-size: 22px; color: var(--tk-soft); margin-top: 28px; max-width: 30em; }
.tkband .body + .body { margin-top: 16px; }
.tkband .note { font-size: 18px; color: #B4C1D6; margin-top: 22px; max-width: 34em; }
.tkband .stage { display: flex; justify-content: center; gap: 44px; }
.wingband { position: relative; height: 1180px; overflow: hidden; color: #fff; background: #0B1530; }
.wingband > .photo { position: absolute; left: 0; top: 0; width: 100%; height: 1080px; object-fit: cover; object-position: 50% 40%; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.wingband::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 16, 34, 0.95) 0%, rgba(8, 16, 34, 0.9) 34%, rgba(8, 16, 34, 0.45) 46%, rgba(8, 16, 34, 0) 56%, rgba(8, 16, 34, 0.2) 70%, rgba(8, 16, 34, 0.85) 100%); }
.wingband .wrap { position: relative; z-index: 2; padding-top: 96px; height: 100%; display: flex; flex-direction: column; }
.wingband h2 { font: 600 88px/1.0 var(--serif); letter-spacing: -0.015em; max-width: 13em; }
.wingband .label { color: #D3E2FF; margin-bottom: 24px; }
.wingband .body { font-size: 22px; color: #E1E8F4; max-width: 36em; margin-top: 26px; }
.wingband .cards { margin-top: auto; padding-bottom: 96px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.wingband figure { margin: 0; display: grid; gap: 16px; }
.wingband .la { --w: 100%; width: 100%; }
.wingband figcaption { font-size: 18px; color: #E9EEF7; }
.wingband figcaption b { display: block; font: 700 18px/1.4 var(--sans); color: #fff; margin-bottom: 2px; }
.plain { background: var(--light); color: var(--light-ink); padding: 120px 0; }
.plain .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: 96px; }
.plain h2 { font: 600 72px/1.02 var(--serif); letter-spacing: -0.015em; }
.plain p { font-size: 22px; color: var(--light-dim); max-width: 32em; }
.plain p + p { margin-top: 16px; }
.plain p.first { margin-top: 26px; }

/* ---------- Backporch goes live with one line: remove "backporch-soon" from <body> ---------- */
.backporch-soon .bp-live { display: none !important; }
body:not(.backporch-soon) .bp-soon { display: none !important; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .win .media video, .motion { display: none !important; }
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* ---------- laptops ---------- */
@media (max-width: 1600px) {
  :root { --gutter: 64px; }
  .ch.tk .stage { right: 40px; transform: scale(0.9); transform-origin: top right; }
  .ch.rp .stage { transform: translateX(-50%) scale(0.86); transform-origin: bottom center; }
  .ch.cu .stage { left: 60px; transform: scale(0.9); transform-origin: bottom left; }
  .apphero .stage { right: 40px; transform: scale(0.9); transform-origin: top right; }
}
@media (max-width: 1280px) {
  .intro h1 { font-size: 68px; }
  .ch.tk .copy, .ch.cu .copy, .apphero .copy { width: 560px; }
  .ch.tk h2, .ch.rp h2, .ch.cu h2 { font-size: 72px; }
  .ch.bp h2 { font-size: 80px; }
  .ch.tk .stage { transform: scale(0.74); }
  .ch.rp .stage { transform: translateX(-50%) scale(0.7); }
  .ch.cu .stage { transform: scale(0.74); }
  .apphero h1 { font-size: 110px; }
  .apphero .stage { transform: scale(0.74); }
  .win h2 { font-size: 38px; }
  .win .in { padding: 0 28px 32px; }
}

/* ---------- phones ---------- */
@media (max-width: 900px) {
  :root { --gutter: 20px; }
  body { font-size: 18px; }
  .nav .wrap { height: 64px; }
  .word b { font-size: 20px; }
  .links { display: none; position: absolute; left: 0; right: 0; top: 64px; background: var(--hall); border-bottom: 1px solid #2A2D32; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 20px; }
  .links a { min-height: 52px; font-size: 19px; border-bottom: 1px solid #24272B; }
  .links .sup { border: 1px solid #4A4E54; justify-content: center; margin-top: 14px; }
  .nav.open .links { display: flex; }
  .menu { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 16px; border: 1px solid #4A4E54; border-radius: 999px; background: none; color: var(--hall-ink); font: 600 17px/1 var(--sans); cursor: pointer; }
  .menu svg { flex: none; width: 18px; height: 18px; }
  .intro { padding: 40px 0 32px; }
  .intro .wrap { grid-template-columns: 1fr; gap: 20px; }
  .intro h1 { font-size: 46px; }
  .intro p.lede { font-size: 18px; }
  .label { font-size: 16px; }
  .windows { grid-template-columns: 1fr; height: auto; padding: 0 0 6px; }
  .win { height: 520px; border-radius: 0; }
  .win.bp { height: 460px; }
  .win .in, .win.bp .in { padding: 0 20px 28px; }
  .win h2, .win.bp h2 { font-size: 40px; }
  .win .in p { font-size: 18px; }
  .win .badge { --bh: 50px; }
  .motion { top: 12px; right: 14px; }
  .ch .body, .ch.bp .body { font-size: 18px; }
  .facts li { font-size: 18px; }
  .act { margin-top: 28px; gap: 18px; }
  .act .badge { --bh: 54px; }
  .act .go { font-size: 18px; }
  .small { font-size: 17px; }
  .ch.tk { height: auto; padding-bottom: 48px; }
  .ch.tk .wrap { padding-top: 56px; }
  .ch.tk .copy, .ch.cu .copy, .apphero .copy { width: auto; }
  .ch.tk h2, .ch.rp h2, .ch.cu h2 { font-size: 48px; }
  .ch.tk .stage { position: relative; right: auto; top: auto; width: 100%; height: 560px; margin-top: 40px; transform: none; }
  .ch.tk .stage .iphone { --s: 220px !important; right: 10px; }
  .ch.tk .stage .la { --w: 320px !important; left: 0; bottom: 0; }
  .ch.rp { height: auto; }
  .ch.rp .wrap { padding-top: 56px; }
  .ch.rp .top { grid-template-columns: 1fr; gap: 0; }
  .ch.rp .body { padding-top: 24px; }
  .ch.rp .stage { position: relative; left: auto; transform: none; bottom: auto; width: 100%; height: 400px; margin-top: 36px; }
  .ch.rp .stage .ipad { --s: 300px !important; right: 0; bottom: 70px; }
  .ch.rp .stage .iphone { --s: 120px !important; left: 6px; bottom: 20px; }
  .ch.cu { height: auto; }
  .ch.cu .wrap { padding-top: 56px; display: block; }
  .ch.cu .stage { position: relative; left: auto; bottom: auto; justify-content: center; gap: 14px; margin: 40px 0 0; padding-bottom: 48px; transform: none; }
  .ch.cu .stage .iphone { --s: 160px !important; }
  .ch.cu .stage .iphone:first-child { margin-bottom: 40px; }
  .ch.bp { padding: 56px 0; }
  .ch.bp .bpgrid { grid-template-columns: 1fr; gap: 36px; }
  .ch.bp h2 { font-size: 64px; }
  .ch.bp .label { font-size: 18px; }
  .stamp { font-size: 17px; margin-bottom: 20px; }
  .ch.bp .shots { gap: 12px; justify-content: center; }
  .ch.bp .shots .iphone { --s: 104px !important; }
  .ch.bp .shots .iphone:nth-child(2) { margin-top: 0; }
  .studio { padding: 64px 0 72px; }
  .studio .wrap { grid-template-columns: 1fr; gap: 40px; }
  .studio h2 { font-size: 42px; }
  .studio .about p { font-size: 18px; }
  .desk { grid-template-columns: 1fr; }
  .desk .item a, .desk .item address { font-size: 18px; }
  .foot { padding: 44px 0 52px; }
  .foot .r1 { display: grid; }
  .foot .badges .badge { --bh: 46px; }
  .apphero { height: auto; padding-bottom: 40px; }
  .apphero::before { background: linear-gradient(180deg, rgba(9, 17, 31, 0.95) 0%, rgba(9, 17, 31, 0.86) 55%, rgba(9, 17, 31, 0.5) 78%, rgba(9, 17, 31, 0.8) 100%); }
  .apphero > .photo, .wingband > .photo { height: 720px; }
  .apphero .wrap { padding-top: 48px; }
  .apphero .copy { gap: 20px; }
  /* The icon and the word stay on one line, so on a narrow phone the pair shrinks with the
     screen instead of running past it. Full size from about 424px up. */
  .apphero h1 { font-size: min(72px, 17vw); gap: min(18px, 4.5vw); }
  .apphero h1 .appicon { --size: min(76px, 18vw) !important; }
  .apphero .lede { font-size: 19px; }
  /* Now that the hero copy wraps at the real column width, keep these short lines from leaving
     one word on a line of its own ("For / iPhone", "or / later."). */
  .apphero .label, .apphero .small { text-wrap: balance; }
  .apphero .stage { position: relative; right: auto; top: auto; width: 100%; height: 560px; margin-top: 36px; transform: none; }
  .apphero .stage .iphone { --s: 220px !important; right: 10px; }
  .apphero .stage .la { --w: 320px !important; left: 0; bottom: 0; }
  .tkband { padding: 64px 0; }
  .tkband .wrap { grid-template-columns: 1fr; gap: 40px; }
  .tkband.flip .copy { order: 0; }
  .tkband h2 { font-size: 46px; }
  .tkband .body { font-size: 18px; }
  .tkband .note { font-size: 17px; }
  .tkband .stage { gap: 14px; }
  /* Two phones side by side must fit the column (screen less both gutters, less the 14px gap).
     2.176 is two frame widths, each 1.088 times --s. Full size from about 420px up. */
  .tkband .stage .iphone { --s: min(168px, calc((100vw - 2 * var(--gutter) - 14px) / 2.176)) !important; }
  .tkband .stage .iphone:only-child { --s: 230px !important; }
  .tkband .stage .detail { --w: min(340px, calc(100vw - 2 * var(--gutter))) !important; }
  .wingband { height: auto; }
  .wingband::before { background: linear-gradient(180deg, rgba(8, 16, 34, 0.94) 0%, rgba(8, 16, 34, 0.86) 40%, rgba(8, 16, 34, 0.55) 70%, rgba(8, 16, 34, 0.9) 100%); }
  .wingband .wrap { padding-top: 56px; height: auto; }
  .wingband h2 { font-size: 46px; }
  .wingband .body { font-size: 18px; }
  .wingband .cards { grid-template-columns: 1fr; gap: 26px; margin-top: 40px; padding-bottom: 48px; }
  .wingband figcaption { font-size: 17px; }
  .plain { padding: 64px 0; }
  .plain .wrap { grid-template-columns: 1fr; gap: 28px; }
  .plain h2 { font-size: 46px; }
  .plain p { font-size: 18px; }
  .la { max-width: min(100%, 362px); }
  .detail { max-width: min(100%, 426px); }
}

/* ---------- the narrowest phones: the header ---------- */
@media (max-width: 374.98px) {
  /* The wordmark and a labelled Menu button need about 332px side by side (375 has about 3px to
     spare), so below 375 the label is hidden from sight only. Screen readers still hear "Menu" or
     "Close", which site.js keeps current. The smaller minimum gap only matters on the tightest
     screens; the two still sit at opposite edges. With no visible "Close", an open menu shows an X. */
  .nav .wrap { gap: 12px; }
  .menu span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu[aria-expanded="true"] svg { display: none; }
  .menu[aria-expanded="true"]::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; forced-color-adjust: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 4l10 10M14 4 4 14' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 4l10 10M14 4 4 14' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat; }
}

/* ---------- tablets and small laptops: the two Receipts phones ---------- */
@media (min-width: 900.02px) and (max-width: 1280px) {
  /* At 310px the pair needs about 720px, and below about 1255px it pushed the page sideways (the
     second phone sat half off a 1024 screen). The phones shrink just enough for the copy beside
     them to keep 320px, a little more than its longest headline word needs. 110px is the
     .tkband .wrap column gap and 44px the .tkband .stage gap: change either and change this.
     Full size again from about 1277px. The .02 closes the gap after max-width: 900px. */
  .tkband .stage .iphone:not(:only-child) { --s: min(310px, calc((100vw - 2 * var(--gutter) - 110px - 320px - 44px) / 2.176)) !important; }
}

/* ---------- small tablets: the windows sit two by two ---------- */
@media (min-width: 600px) and (max-width: 900px) {
  .windows { grid-template-columns: 1fr 1fr; padding: 0 6px 6px; }
  .win, .win.bp { height: 600px; border-radius: 4px; }
}

/* ---------- Backporch on iPad (2026-11-02) ----------
   The chapter shows the iPad edition above the three iPhones. Where container units work (Safari 16 and
   later), the stage measures its own column and every device is sized from it, so nothing can push the
   column wider. Before this, the three 250px phones needed about 884px and were cut off on the right
   between about 900 and 1400px wide. 1.054 is the iPad frame's width over --s; three phones are
   3 x 1.088 x --s wide and take 92% of the row, leaving two 4% gaps. The plain-viewport sizes in front
   of the @supports block are for older browsers only: a custom property holding cqi would otherwise
   fail where it is used and collapse the frame. */
.ch.bp .shots.duo { container-type: inline-size; display: grid; gap: 44px; width: 100%; max-width: 760px; justify-self: end; }
.ch.bp .shots.duo .ipad { --drop: 0 30px 60px rgba(51, 43, 33, 0.35), 0 8px 16px rgba(51, 43, 33, 0.25); }
.ch.bp .shots.duo .ipad .glass img { border-radius: calc(var(--s) * 0.036); }
.ch.bp .shots.duo .row { display: flex; justify-content: space-between; align-items: flex-start; }
.ch.bp .shots.duo .ipad { --s: min(690px, calc((100vw - 2 * var(--gutter) - 64px) * 7 / 12 / 1.054)) !important; }
.ch.bp .shots.duo .row .iphone { --s: min(250px, calc((100vw - 2 * var(--gutter) - 64px) * 7 / 12 * 0.92 / 3.264)) !important; }
@media (max-width: 900px) {
  .ch.bp .shots.duo .ipad { --s: calc((100vw - 2 * var(--gutter)) / 1.054) !important; }
  .ch.bp .shots.duo .row .iphone { --s: calc((100vw - 2 * var(--gutter)) * 0.92 / 3.264) !important; }
}
@supports (width: 1cqi) {
  .ch.bp .shots.duo .ipad { --s: calc(100cqi / 1.054) !important; }
  .ch.bp .shots.duo .row .iphone { --s: calc(92cqi / 3.264) !important; }
  .ch.bp .shots.duo .row .iphone:nth-child(2) { margin-top: 8cqi; }
}
@media (max-width: 900px) {
  .ch.bp .shots.duo { gap: 24px; justify-self: stretch; max-width: none; }
  .ch.bp .shots.duo .row .iphone:nth-child(2) { margin-top: 0; }
}
/* The two Backporch editions wrap as one pair in the footer. */
.foot .fbpair { display: flex; flex-wrap: wrap; gap: 22px 32px; }
/* The chapter's two downloads: a caption over each App Store badge, the footer's pattern. */
.ch.bp .act.dl2 { gap: 18px 28px; align-items: flex-end; }
.ch.bp .dl { display: grid; gap: 10px; justify-items: start; }
.ch.bp .dl .cap { font: 600 17px/1.25 var(--book); color: var(--bp-ink); }
.ch.bp .dl .badge { --bh: 60px; }
@media (max-width: 1280px) { .ch.bp .dl .badge { --bh: 54px; } }

/* ---------- TickKet 1.0.6 pictures (2026-11-02) ----------
   The new Lock Screen cards are cut from the Lock Screen itself, so its wallpaper shows in their four
   corners. The cards' own corners reach about 94px along the edges of a 1236px card, so the clip is a
   circle 8% of the card's width (about 99px there), just inside the card's curve. It is written as a
   percentage of width over height (20.87% = 8% x 1088 / 417) so it stays a circle whether --w is a
   length or 100%, as it is in the wingband. */
.la.la106 { border-radius: 8% / 20.87%; }
.wingband .note { font-size: 18px; color: #C9D4E6; margin-top: 18px; max-width: 40em; }
.wingband figure { align-content: start; }
.tkband .note a { color: inherit; }
@media (max-width: 900px) { .wingband .note { font-size: 16px; } }