/* The front page.

   Built to the pattern Apple actually uses on apple.com, measured off the page
   on 13 Sep 2026 rather than remembered: full-width panels, one idea each,
   alternating a black ground and a near-white one. Inside a panel the words
   come first and centred, then the product underneath with a great deal of
   room around it.

       name      56px / 600 / centred, line-height 60, tracking about none
       tagline   28px / 400
       third     19px / 400, the quiet line under it
       buttons   17px, 11 by 21 of padding, fully round; one filled #0071E3,
                 one contour only, its label #2997FF

   The cinema is not here. On apple.com the moving, scroll-driven work lives on
   the product pages, and the front page is still. Ours does the same: the film
   is at /film and the first button goes to it. */

:root {
  color-scheme: light dark;

  --blue:      #0071e3;
  --blue-lit:  #2997ff;
  --measure:   64rem;
  /* The sticky bar's height, so anything sticking under it can say so. */
  --bar:       48px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: #1d1d1f;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ── the bar ──────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  height: 48px;
  padding: 0 22px;
  /* The bar belongs to the page, not to the phone's settings.

     It used to follow `prefers-color-scheme`, and that was wrong the moment
     the panel grounds became artwork rather than theme. The hero is black on
     every device, by decision; on a phone in light mode the bar came out white
     and sat on top of it as a strip of the wrong colour, which is what David
     photographed. Apple's own bar does not change with the reader's system
     either: it belongs to the page it is sitting on.

     Dark, then, on both pages and in both appearances, because the first thing
     under it is always black. */
  background: rgb(22 22 23 / .82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgb(255 255 255 / .1);
}

.nav .mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #f5f5f7;
}

.nav .mark img { width: 20px; height: 20px; border-radius: 5px; }

.nav a { font-size: 12px; color: #f5f5f7; opacity: .88; }
.nav a:hover { opacity: 1; text-decoration: none; }

@media (prefers-color-scheme: dark) {
  body { background: #000; color: #f5f5f7; }
  a { color: var(--blue-lit); }
}

/* ── a panel ──────────────────────────────────────────────────────────────── */

/* One idea, one screen. The ground alternates so that scrolling is a sequence
   of rooms rather than one long wall. */
.unit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 640px;
  padding: 56px 22px 0;
  overflow: hidden;
}

.unit.dark { background: #000; color: #f5f5f7; }
.unit.dark a:not(.pill) { color: var(--blue-lit); }
.unit.lit { background: #fbfbfd; color: #1d1d1f; }

.unit + .unit { margin-top: 12px; }

.head {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.head h1,
.head h2 {
  margin: 0;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.07;
  font-weight: 600;
  letter-spacing: -.005em;
  text-wrap: balance;
}

.tag {
  margin: 6px 0 0;
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.14;
  font-weight: 400;
  letter-spacing: .007em;
  text-wrap: balance;
}

.note {
  margin: 10px 0 0;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.21;
  opacity: .72;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 22px;
  margin: 26px 0 0;
}

/* Apple's own measurements: seventeen points, eleven by twenty-one, and a
   radius large enough that it is simply an end. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 21px;
  border-radius: 980px;
  background: var(--blue);
  color: #fff;
  font-size: 17px;
  line-height: 1.24;
  letter-spacing: -.01em;
}

.pill:hover { background: #0077ed; text-decoration: none; }

.pill.plain {
  background: transparent;
  color: var(--blue);
  padding: 11px 0;
}

.pill.plain:hover { background: transparent; text-decoration: underline; }

/* A button that is not there yet. Same size as the others so the row does not
   change shape the day it is switched on; greyed, with no hover, so it never
   looks pressable. */
.pill.soon,
.pill.soon:hover {
  background: rgba(0, 0, 0, .06);
  color: rgba(29, 29, 31, .42);
  cursor: default;
  text-decoration: none;
}

.pill.soon { gap: 6px; padding-right: 12px; }

.pill.soon .soon-tag {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  padding: 2px 7px;
  border-radius: 980px;
  background: rgba(0, 0, 0, .07);
  color: rgba(29, 29, 31, .6);
}

.unit.dark .pill.soon,
.unit.dark .pill.soon:hover { background: rgba(255, 255, 255, .1); color: rgba(245, 245, 247, .45); }
.unit.dark .pill.soon .soon-tag { background: rgba(255, 255, 255, .12); color: rgba(245, 245, 247, .7); }

.unit.dark .pill.plain { color: var(--blue-lit); }
.unit.lit .pill.plain,
.corner.lit a,
.read.lit a { color: var(--blue); }

/* ── the product inside a panel ───────────────────────────────────────────── */

/* The screen is a photograph of the running app. It is given the room Apple
   gives a product: the words stop, and then there is nothing for a while. */
/* Bigger, because at 268 points on a 1440 display you recognise the screen
   without being able to read it, and the whole argument of this page is that
   you can read it. */
.shot {
  margin: 46px auto 0;
  width: min(372px, 66vw);
}

/* The opening one is bigger, and flat.

   It was turned a few degrees, to carry a little of the film's perspective
   into the front page. On a desktop that read as a camera angle. On a phone,
   where the device fills most of the width, it read as a crooked screenshot,
   which is the opposite of what a product shot is for. David asked whether it
   was deliberate, which is the question you get when something looks like a
   mistake. Size alone does the job the tilt was there for. */
.unit.opening .shot {
  width: min(430px, 72vw);
}

.shot.wide { width: min(760px, 88vw); }

/* Apple's own product bezel, from Apple Design Resources, under the App Store
   Marketing Artwork licence. It is a photograph of the hardware with the glass
   cut out, so the screenshot sits behind it and the metal is real rather than
   drawn. What was here before was three CSS gradients pretending to be
   titanium, and it looked like three CSS gradients.

   The picture is 1350 by 2760 and its hole is 1206 by 2622 at 72, 69, which is
   exactly the size of a screenshot off an iPhone 16 Pro. Those four numbers are
   the whole of the arithmetic below. */
.device {
  position: relative;
  width: 100%;
  aspect-ratio: 1350 / 2760;
}

.device .glass {
  position: absolute;
  left: 5.3333%;
  top: 2.5%;
  width: 89.3333%;
  height: 95%;
  object-fit: cover;
  border-radius: 8.4%/3.9%;
}

.device .bezel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(30px, 5vw, 58px);
  justify-items: center;
  margin: 42px auto 0;
  max-width: 52rem;
}

.pair .shot { margin: 0; width: min(248px, 70vw); }

.pair figcaption {
  margin: 18px 4px 0;
  font-size: 15px;
  line-height: 1.45;
  opacity: .72;
  text-align: center;
  max-width: 22rem;
}

figure { margin: 0; }

/* ── the reading matter ───────────────────────────────────────────────────── */

/* One rail for everything.

   The eyebrow, the heading and the lede were direct children of a full-width
   box with 22 points of padding, so they began at 22. The columns underneath
   were a centred `--measure`, so they began at 201. A hundred and seventy nine
   points of disagreement between a heading and the paragraphs it introduces,
   which is exactly what David saw and could not name.

   A real element, not a grid trick. The first attempt made `.read` a three
   column grid with the rail in the middle, and that put a grid inside a grid:
   the columns of `.grid` count how many of themselves fit by measuring the
   track's *maximum*, which is 64rem, so on a 390 point phone they still laid
   out three tracks of 240 and the document came out 830 wide and could be
   dragged sideways. A plain centred box has a width that is simply known, and
   everything inside it measures against that. */
.read {
  padding: clamp(72px, 9vw, 118px) 22px;
  scroll-margin-top: 48px;
}

.rail {
  max-width: var(--measure);
  margin: 0 auto;
}

/* The ground alternates through the reading matter too. It used to stop after
   the three panels at the top, so the second half of the page was one long
   wall of the same colour and the rhythm David liked went with it. */
.read.dark { background: #000; color: #f5f5f7; }
.read.dark a { color: var(--blue-lit); }
.read.lit { background: #fbfbfd; color: #1d1d1f; }

.read > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }

.read h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .56;
}

.lede {
  margin: 0 0 40px;
  max-width: 44ch;
  font-size: clamp(19px, 1.8vw, 21px);
  line-height: 1.42;
  opacity: .78;
  text-wrap: pretty;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 38px 44px;
}

.grid h3 {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.26;
  font-weight: 600;
  letter-spacing: -.012em;
}

.grid p { margin: 0; opacity: .74; }

.notes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; opacity: .78; }
.notes li { padding-left: 22px; position: relative; }

.notes li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .66em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: .5;
  background: currentColor;
}

p { margin: 0 0 15px; }
p:last-child { margin-bottom: 0; }

hr.rule { height: 1px; border: 0; margin: 0; background: rgb(0 0 0 / .1); }

/* ── the foot ─────────────────────────────────────────────────────────────── */

footer {
  background: #f5f5f7;
  padding: 40px 22px 56px;
  font-size: 12px;
  line-height: 1.66;
  color: #6e6e73;
}

@media (prefers-color-scheme: dark) {
  footer { background: #0a0a0b; color: #86868b; }
}

.foot-inner {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 44px;
  justify-content: space-between;
  align-items: flex-start;
}

.foot-inner p { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot-links a { color: inherit; }
.foot-links a:hover { color: var(--blue); }

/* ── entrances, one step ──────────────────────────────────────────────────── */

.js .rise { opacity: 0; transform: translateY(12px); }

.js .rise.seen {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rise, .js .rise.seen { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 40rem) {
  .unit { min-height: 0; padding-top: 44px; padding-bottom: 8px; }
  .shot { margin-top: 34px; }
}

/* ── a screen held in the corner ──────────────────────────────────────────── */

/* The device beside the words, whole and upright.

   It used to be pushed into the corner and cut by the floor. Apple's marketing
   rules for its product images say they are used as they are: no cropping, no
   tilting, nothing over them. So the bezel is shown complete, straight, with
   room under it, and only the recording inside the screen moves. */
.corner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 32px;
  min-height: 620px;
  padding: clamp(56px, 8vw, 104px) 22px clamp(56px, 8vw, 104px);
}

.corner.dark { background: #000; color: #f5f5f7; }
.corner.lit { background: #fbfbfd; color: #1d1d1f; }

.corner .say {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}

.corner .say h2 {
  margin: 0 0 12px;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.014em;
  text-wrap: balance;
}

.corner .say p {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.32;
  opacity: .74;
  text-wrap: pretty;
}

.corner .held {
  position: relative;
  width: min(300px, 74vw);
  aspect-ratio: 1350 / 2760;
  margin: 0 auto;
  justify-self: center;
}

.corner .held .glass {
  position: absolute;
  left: 5.3333%;
  top: 2.5%;
  width: 89.3333%;
  height: 95%;
  object-fit: cover;
  border-radius: 8.4%/3.9%;
  background: #000;
}

.corner .held .bezel { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (min-width: 60rem) {
  /* Wide enough for the two side by side: the sentence on one half, the whole
     device on the other. */
  .corner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .corner .say { text-align: left; margin: 0; max-width: 30rem; }

  .corner .held {
    width: min(340px, 30vw);
    margin: 0;
    justify-self: center;
  }

  .corner.flip .say { order: 2; }
  .corner.flip .held { order: 1; justify-self: center; }
}

/* The bar stops blurring on a phone.

   A sticky bar with `backdrop-filter: blur(20px)` across the full width has to
   re-blur whatever is behind it on every frame of a scroll, and what is behind
   it here is a playing video and screenshots the height of the screen. On a
   desktop that is free. On a phone it is the most expensive thing on the page,
   and it stutters exactly where the content behind it is heaviest, which is
   what "se frisa en algunos lugares" describes. The bar is forty-eight points
   tall: made opaque it looks the same and costs nothing.

   Keyed on a coarse pointer rather than on width, because the cost belongs to
   the device and not to how wide the window happens to be. */
@media (hover: none) and (pointer: coarse) {
  .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(22 22 23 / .96);
  }
}

/* Apple's credit line. Its marketing guidelines ask for one in every
   communication that names its trademarks, and this site names several. */
.marks {
  max-width: var(--measure, 980px);
  margin: 18px auto 0;
  font-size: 11px;
  line-height: 1.5;
  opacity: .8;
}

/* The last words of a couple of headlines wear the blue accent, the way
   Home's statement colours its final words. One colour only: it is Nornas's
   voice. The other accents belong to the colour scene at the end of the film. */
.hl-blue { color: #007aff; }
.dark .hl-blue { color: #0a84ff; }

/* The open beta, before it exists: a quiet line under the buttons, not a
   button. As a greyed pill it was the widest thing in the row and, on a
   phone, sat beside the real button looking broken (David, 15 Sep 2026). */
.soon-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 14px;
  opacity: .62;
}
/* Open since 15 Sep 2026: the line is the link, still quiet, in the blue. */
.soon-note.open { opacity: 1; }
.soon-note a { color: #007aff; text-decoration: none; }
.dark .soon-note a { color: #0a84ff; }
.soon-note a:hover { text-decoration: underline; }
.soon-note.open .soon-tag { opacity: .62; }
.soon-note .soon-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 2px 8px;
  border-radius: 980px;
  background: rgba(127, 127, 127, .22);
}