/* Apple's scale (the default since 2026-10-19; was the separate mission-s-apple/ version): the base styles (css/style.css), re-set on the type and spacing scale of Apple's iPhone 18 Pro
   page (www.apple.com/br/iphone-18-pro, measured at 1440 wide, 2026-10-19), and on its grid.

   Adapted (2026-10-19) to keep the main site's look: its weights and colours (regular black paragraphs), its sizes moved to
   Apple's nearest steps, and its placement on the grid. Apple's scale, as measured: fixed px, the same at 1440 and 2560; stepping down at 1068 and 734 wide.
     type     28/32 card title, 21/29 large body, 19/23, 17/25 body, 14/18 small (semibold for nearly all but the smallest)
     spacing  144 between sections; 80, 76, 64, 48 large; 40, 32, 28, 24 medium; 20, 12, 8 small
     grid     a calc(1260 * var(--p)) container, 12 columns, calc(24 * var(--p)) gutters (calc(692 * var(--p)) from 1068 down, 87.5% from 734 down) */

:root {
  /* (Apple's px, grown on large screens: 1px up to a 1440 wide window — as Apple, and as on a laptop — then at the text's own
     rate (--u, css/style.css: half the window's), so a 2560 screen shows the page as 1440 does, a little larger, not smaller) */
  --p: max(1px, calc(1px + (var(--u) / 14.4 - 1px) * 0.65)); /* (0.65 of that growth: a 2560 screen at 1.25, not 1.39 — the text looked a little large) */
  --a-container: min(calc(1260 * var(--p)), calc(100vw - 2 * calc(90 * var(--p)))); /* (1260 at 1440: Apple's own) */
  --a-gutter: calc(24 * var(--p));
  --a-section: calc(104 * var(--p)); /* (the text after the hero, above and below: as the gap between its two columns, 104px, on the 8px grid) */
  --a-large: calc(64 * var(--p));    /* (the panels' inner margin and the gaps between the full-screen pieces: 62px on the main site) */
  --a-medium: calc(24 * var(--p));
  /* type: size / line height / tracking */
  --a-title: calc(21 * var(--p));   --a-title-lh: calc(25 * var(--p));  --a-title-ls: 0.011em; /* (titles and captions: 22px on the main site) */
  --a-body: calc(17 * var(--p));    --a-body-lh: calc(25 * var(--p));   --a-body-ls: -0.022em; /* (paragraphs: 17px on the main site) */
  --a-credit: calc(19 * var(--p));
  --a-small: calc(14 * var(--p));   --a-small-lh: calc(18 * var(--p));
}
@media (max-width: 1068px) {
  :root { --a-container: calc(692 * var(--p)); --a-section: calc(76 * var(--p)); --a-large: calc(48 * var(--p)); --a-title: calc(19 * var(--p)); --a-title-lh: calc(23 * var(--p)); --a-credit: calc(17 * var(--p)); }
}
@media (max-width: 734px) {
  :root { --a-container: 87.5vw; --a-section: calc(52 * var(--p)); --a-large: calc(40 * var(--p)); --a-title: calc(19 * var(--p)); --a-title-lh: calc(23 * var(--p)); --a-credit: calc(17 * var(--p)); }
}

/* ---------- The text after the hero: on the 12-column grid as on the main site, title on 2–5, paragraphs on 6–11 (in from the carousel's edges) ---------- */
html.grid-test .about {
  --gw: var(--a-container); --gut: var(--a-gutter);
  /* (the same gap above the title and below the paragraphs: Apple's gap between sections, to the letters themselves) */
  padding-top: calc(var(--a-section) - (var(--a-title-lh) - var(--a-title)) / 2 - 0.1145 * var(--a-title)); /* (Porsche Next: the letters' top 0.1145em under a line-height-1 line's top, the baseline 0.875em) */
  padding-bottom: calc(var(--a-section) - (var(--a-body-lh) - var(--a-body)) / 2 - 0.125 * var(--a-body) - calc(40 * var(--p)));
}
html.grid-test .about h2 { grid-column: 2 / 6; font-size: var(--a-title); line-height: var(--a-title-lh); letter-spacing: var(--a-title-ls); }
html.grid-test .about > div { grid-column: 6 / 12; }
.about p { font-size: var(--a-body); line-height: var(--a-body-lh); letter-spacing: var(--a-body-ls); } /* (regular and black, as on the main site) */
.about p + p { margin-top: calc(24 * var(--p)); } /* (Apple's 24) */
@media (max-width: 1068px) {
  /* (Apple stacks its two-column text from here down) */
  html.grid-test .about h2, html.grid-test .about > div { grid-column: 2 / 12; }
  html.grid-test .about h2 { margin-bottom: var(--a-medium); }
  .about h2 br { display: none; }
}
@media (max-width: 700px) {
  .about, html.grid-test .about { padding-left: 6.25vw; padding-right: 6.25vw; }
  .about h2 { font-size: var(--a-title); }
  .about p { font-size: var(--a-body); line-height: var(--a-body-lh); }
}

/* ---------- The carousel: its cards the container's width, Apple's gallery gap ---------- */
.highlights { --card-w: min(var(--a-container), calc(75vh * 1260 / 612)); --pad: calc((100vw - var(--card-w)) / 2); --gap: calc(20 * var(--p)); }
.card { border-radius: calc(28 * var(--p)); }
.card-text {
  max-width: 75%; padding-top: calc(40 * var(--p));
  font-size: var(--a-title); line-height: var(--a-title-lh); letter-spacing: var(--a-title-ls);
}
@media (max-width: 700px) { .card-text { max-width: 87.5%; padding-top: 32px; font-size: var(--a-title); } .card { border-radius: 18px; } }

/* ---------- The text panels over the films ---------- */
.film-panel, .feature-panel { padding: 0 var(--a-large); }
.film-panel h2, .feature-panel h2 { margin: 0 0 calc(40 * var(--p)); font-size: var(--a-title); line-height: var(--a-title-lh); letter-spacing: var(--a-title-ls); }
.film-panel p, .feature-panel p { font-size: var(--a-body); line-height: var(--a-body-lh); letter-spacing: var(--a-body-ls); }
.film-panel p + p, .feature-panel p + p { margin-top: var(--a-medium); }
@media (min-width: 1441px) {
  /* Keep the laptop's 64px insets; let the text, rather than the viewport, size wider-screen panels. */
  .film-panel, .feature-panel {
    width: calc(352 * var(--p) + 128px);
    padding-inline: 64px;
  }
  .film-panel p, .feature-panel p { max-width: none; }
}
@media (max-width: 700px) {
  .film-panel, .feature-panel { padding: calc(40 * var(--p)) 6.25vw calc(48 * var(--p)); }
  .film-panel h2, .feature-panel h2 { font-size: var(--a-title); margin-bottom: calc(16 * var(--p)); }
  .film-panel p, .feature-panel p { font-size: var(--a-body); line-height: var(--a-body-lh); }
}
/* (the white gap between the full-screen pieces: the panels' inner margin, as on the main site) */
.feature, .outro { margin-top: var(--a-large); }

/* ---------- The end, and the loading screen ---------- */
.outro-credit { font-size: var(--a-credit); }
.loader-enter { font-size: var(--a-small); letter-spacing: 0; }

/* ---------- The footer (after porsche.com's, much shorter): black, on the 12-column grid ----------
   One rhythm: calc(80 * var(--p)) above and below, calc(64 * var(--p)) between its blocks, calc(16 * var(--p)) under a label, calc(12 * var(--p)) between links. */
.site-footer {
  --gw: var(--a-container); --gut: var(--a-gutter);
  padding: calc(80 * var(--p)) calc((100vw - var(--gw)) / 2);
  background: #000; color: #fff;
  font-family: "Porsche Next", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased;
}
.site-footer a { color: inherit; text-decoration: none; transition: color 0.2s; }
.site-footer a:hover { color: #b0b0b5; }
.site-footer a:focus-visible { outline: 1px solid #fff; outline-offset: calc(4 * var(--p)); }
/* (four columns of three grid columns each) */
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); }
.footer-col { display: flex; flex-direction: column; gap: calc(12 * var(--p)); }
.footer-label { margin: 0 0 calc(4 * var(--p)); font-size: calc(12 * var(--p)); line-height: calc(16 * var(--p)); color: #86868b; } /* (16px to the first link: its 4 and the column's 12) */
.footer-col a { font-size: calc(14 * var(--p)); line-height: calc(18 * var(--p)); }
/* (under a rule: the small print on the left, the icons on the right, both on the same line) */
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--gut); margin-top: calc(64 * var(--p)); padding-top: calc(24 * var(--p)); border-top: 1px solid rgba(255, 255, 255, 0.16); }
.footer-legal { margin: 0; font-size: calc(12 * var(--p)); line-height: calc(16 * var(--p)); color: #86868b; }
.footer-legal a { text-decoration: underline; text-underline-offset: calc(2 * var(--p)); }
.footer-social { display: flex; gap: calc(24 * var(--p)); flex: none; }
.footer-social svg { display: block; width: calc(20 * var(--p)); height: calc(20 * var(--p)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.footer-social .dot { fill: currentColor; stroke: none; }
.footer-logo { display: block; width: calc(120 * var(--p)); margin: calc(64 * var(--p)) auto 0; }
.footer-logo svg { display: block; width: 100%; height: auto; fill: #fff; }
@media (max-width: 734px) {
  .site-footer { padding: calc(64 * var(--p)) 6.25vw; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(40 * var(--p)); }
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: calc(24 * var(--p)); margin-top: calc(48 * var(--p)); }
  .footer-logo { margin-top: calc(48 * var(--p)); }
}

/* ---------- The end on a portrait window (a phone upright): covering it cropped the car's sides off. The picture as wide as
   shows the car whole (it spans 0.635 of it), at the window's bottom as on a wide screen, the studio's grey above it ---------- */
@media (max-aspect-ratio: 1/1) {
  /* (and the section only as tall as the picture and a band of grey for the credit, not pinned: the footer comes right after it) */
  .outro { height: auto; margin-top: 0; } /* (and no white band above it on a phone: the picture follows the last section directly) */
  .outro-pin { position: relative; height: calc(135vw * 1080 / 1920 + calc(88 * var(--p))); }
  .outro-credit { top: calc(32 * var(--p)); opacity: 1 !important; filter: none !important; pointer-events: auto; }
  .outro-pin { background: rgb(188, 187, 194); } /* (the picture's top rows) */
  .outro-img { inset: auto auto 0 50%; width: 135vw; height: auto; transform: translateX(-50%); object-fit: fill; }
  .outro-img { -webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%); } /* (its top fading into the grey: no line where it ends) */
}

/* ---------- The loading screen on Apple's scale, fixed on every screen: the wordmark's letters the capitals of their 12px step
   (calc(8.4 * var(--p)) tall, calc(122 * var(--p)) wide), the bar 180 × 2, calc(32 * var(--p)) between the three, "Click to enter" at their calc(14 * var(--p)) ---------- */
.loader { gap: calc(32 * var(--p)); }
.loader-logo { width: calc(122 * var(--p)); }
.loader-bar { width: calc(180 * var(--p)); }
.loader-enter { font-size: calc(14 * var(--p)); }

/* (the hero-as-a-picture test, ?hero=photo: the page scrolls through the hero by touch too — nothing to play) */
html.hero-photo .hero { touch-action: auto; }