/* Phenome redesign, the wearables' explore pages (the Ring, the Band).

   The rules, screen by screen:
   - the page opens on black and turns white halfway, never grey;
   - a chapter opens with a coloured eyebrow, a headline of 48 to 80px and a
     semibold grey paragraph whose key phrase is set in the heading colour;
   - photographs are studio work on the section's own ground: products
     floating, macros of the sensors, hands lit like products;
   - numbers are big and coloured, with small grey captions;
   - the white half holds the products on white, an icon grid, and one black
     panel set into the white.
   Nothing moves with the scroll. Every claim is one the app's code or its
   database backs. */

.ap-product { background: #000; color: #f5f5f7; }

/* Buy pills the storefront reports as unavailable step aside. A Buy that
   leads to a store page (the Ring's, where finish and size are chosen) carries
   a hidden price probe; the storefront marks it unavailable the same way. */
.ap-product [data-ph-buy][aria-disabled='true'] { display: none; }
.pd-probe { display: none; }
.pd-buy:has(.ph-unavailable) { display: none; }

/* ---- local bar: dark over black, light over white ---------------------------
   It takes over from the site's bar: at the top of the page
   the site's bar is alone; once the reader scrolls down, motion.js sets
   body.is-past-hero, shared.css "the swap" slides the site's bar up and away,
   and this bar drops into its place at the top. Back at the top they change
   places again. Fixed, so it takes no room in the page while it waits. */
.pd-local {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: rgba(22, 22, 23, 0.8); color: #f5f5f7;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform var(--ph-dur-base, .4s) var(--ease-frosted-out, var(--ap-ease)),
              opacity var(--ph-dur-base, .4s) var(--ease-frosted-out, var(--ap-ease)),
              visibility 0s linear var(--ph-dur-base, .4s),
              background-color 0.3s var(--ap-ease), color 0.3s var(--ap-ease), border-color 0.3s var(--ap-ease);
}
body.is-past-hero .pd-local {
  transform: none; opacity: 1; visibility: visible;
  transition: transform var(--ph-dur-base, .4s) var(--ease-frosted-out, var(--ap-ease)),
              opacity var(--ph-dur-base, .4s) var(--ease-frosted-out, var(--ap-ease)),
              visibility 0s linear 0s,
              background-color 0.3s var(--ap-ease), color 0.3s var(--ap-ease), border-color 0.3s var(--ap-ease);
}
/* both bars travel on one clock, the nav curve, both ways: apple.css sets
   the site's bar to a colour only transition, which made it jump */
body.ap-page-product .ph-nav,
body.ap-page-product .pd-local {
  --pd-swap: 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
}
body.ap-page-product .ph-nav {
  transition: transform var(--pd-swap), opacity var(--pd-swap), visibility 0s linear 0s, background-color 0.3s var(--ap-ease);
}
body.ap-page-product.is-past-hero .ph-nav {
  transition: transform var(--pd-swap), opacity var(--pd-swap), visibility 0s linear 0.5s, background-color 0.3s var(--ap-ease);
}
body.ap-page-product .pd-local {
  transition: transform var(--pd-swap), opacity var(--pd-swap), visibility 0s linear 0.5s,
              background-color 0.3s var(--ap-ease), color 0.3s var(--ap-ease), border-color 0.3s var(--ap-ease);
}
body.ap-page-product.is-past-hero .pd-local {
  transition: transform var(--pd-swap), opacity var(--pd-swap), visibility 0s linear 0s,
              background-color 0.3s var(--ap-ease), color 0.3s var(--ap-ease), border-color 0.3s var(--ap-ease);
}
/* a menu or search opened from the site's bar brings it back over this one */
html.ph-menu-open body.is-past-hero .pd-local,
html.ph-search-open body.is-past-hero .pd-local { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .pd-local { transform: none; } }
/* links to a section land below the bar, not under it */
:root:has(.pd-local) { scroll-padding-top: 52px; }
body[data-ap-over='light'] .pd-local { background: rgba(251, 251, 253, 0.8); color: #1d1d1f; border-bottom-color: rgba(0, 0, 0, 0.12); }
.pd-local-inner { display: flex; align-items: center; gap: 24px; width: min(980px, calc(100% - 44px)); height: 52px; margin: 0 auto; }
.pd-local-name { margin-right: auto; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: inherit !important; text-decoration: none; }
.pd-local-links { display: flex; gap: 24px; }
.pd-local-links a { font-size: 12px; letter-spacing: -0.01em; color: inherit !important; opacity: 0.8; text-decoration: none; }
.pd-local-links a:hover { opacity: 1; }
.pd-local .ap-btn { min-height: 28px; padding: 4px 14px; font-size: 12px; }

/* ---- hero: the product in the hand, on black ---------------------------------- */
.pd-hero { position: relative; overflow: hidden; isolation: isolate; height: clamp(560px, 48vw, 800px); background: #000; color: #f5f5f7; text-align: center; }
.pd-hero-art { position: absolute; inset: 0; z-index: -1; }
/* A photograph that ends at the wrist would stop on a hard line where the
   section ends; its lowest part melts into the black instead, so the hand
   rises out of the dark. */
.pd-hero img { position: absolute; left: 50%; bottom: var(--pd-art-bottom, 0); width: auto; height: var(--pd-art-h, 100%); max-width: none; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to top, transparent 0, transparent var(--pd-art-cut, 0%), #000 var(--pd-art-fade, 0%));
  mask-image: linear-gradient(to top, transparent 0, transparent var(--pd-art-cut, 0%), #000 var(--pd-art-fade, 0%)); }
.pd-hero-copy { padding: clamp(56px, 5.6vw, 88px) 22px 0; }
.pd-hero-name { margin: 0; font-size: clamp(19px, 1.7vw, 24px); font-weight: 500; letter-spacing: -0.02em; color: #86868b; }
.pd-hero-h { margin: 6px 0 0; font-size: clamp(44px, 5.4vw, 80px); line-height: 1.04; font-weight: 600; letter-spacing: -0.045em; }
.pd-hero .ap-ctas { margin-top: 24px; }
/* the Ring's photograph holds the whole hand: fingertips at 19% of its height,
   the wrist at 78%, then the forearm. At 78% of the frame, dropped 4.7% so
   its lowest 6% sits below the hero, the fingertips keep 29px or more under
   the buttons at every desktop width; the hand and wrist stay whole and the
   forearm fades out from just under the wrist (82%) to the hero's edge */
.pd-hero-ring { --pd-art-h: 78%; --pd-art-bottom: -4.7%; --pd-art-cut: 6%; --pd-art-fade: 18%; --pd-art-w-phone: 200vw; --pd-art-bottom-phone: 2%; }
/* the Band fills 19% to 88% of its photograph: at 82%, dropped 4%, it clears
   the buttons and keeps a little black beneath */
.pd-hero-band { --pd-art-h: 82%; --pd-art-bottom: -4%; --pd-art-w-phone: 210vw; }
/* The Band's hero fills the screen under the site's bar, as the Ring's reads
   with the black section after it; the section after the Band's is white. */
@media (min-width: 734px) {
  .pd-hero.pd-hero-band { height: max(560px, calc(100svh - var(--ap-nav-h))); }
}

/* ---- sections: black or white, nothing between ---------------------------------- */
.pd-sec { position: relative; padding: clamp(100px, 11vw, 170px) 0; background: #000; color: #f5f5f7; }
.pd-sec.is-light { background: #fff; color: #1d1d1f; }
.pd-sec.pd-top { padding-bottom: 0; }
.pd-sec.pd-flush { padding-top: 0; }
.pd-wrap { width: min(980px, calc(100% - 44px)); margin: 0 auto; }
.pd-wrap-wide { width: min(1260px, calc(100% - 44px)); margin: 0 auto; }

/* the chapter opening: coloured eyebrow, big headline, semibold grey paragraph */
.pd-head { text-align: center; }
/* one colour per section: the eyebrow wears the heading's colour */
/* The small line over a headline is the hero's name line: grey, 500. */
.pd-eyebrow { margin: 0; font-size: clamp(19px, 1.7vw, 24px); font-weight: 500; letter-spacing: -0.02em; color: #86868b; }
.pd-h { margin: 14px 0 0; font-size: clamp(44px, 5.6vw, 80px); line-height: 1.05; font-weight: 600; letter-spacing: -0.045em; }
/* the paragraph is one grey, with nothing picked out in another colour */
.pd-p { margin: clamp(24px, 2.6vw, 36px) auto 0; max-width: 820px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; font-weight: 400; letter-spacing: -0.012em; color: #a1a1a6; }
.is-light .pd-p { color: #6e6e73; }
.pd-more { margin: 24px 0 0; font-size: 17px; font-weight: 600; }
.pd-sec:not(.is-light) .ap-link { color: var(--ap-link-dark); }

/* accents: green for sensing (the Ring's own sensor light), violet for sleep
   (the app's sleep colour), the Phenome blue on white */
.pd-green { --pd-accent: #30d158; }
.pd-violet { --pd-accent: #b44bd7; }

/* the headline left and the paragraph right */
.pd-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; text-align: left; }
.pd-split .pd-h { margin-top: 12px; font-size: clamp(44px, 5vw, 72px); }
.pd-split .pd-p { margin: 0; max-width: none; }

/* a photograph, edge to edge, cropped to where its subject is */
.pd-media { display: block; width: 100%; margin: clamp(40px, 5vw, 72px) 0 0; aspect-ratio: var(--pd-ratio, 2.4 / 1); overflow: hidden; }
.pd-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pd-focus, 50% 50%); }
.pd-media.pd-fade-top img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%); mask-image: linear-gradient(to bottom, transparent 0, #000 26%); }

/* ---- a macro that rises out of the black and fades back into it, never cut
   on a hard line; the empty black above it is trimmed ------------------------ */
.pd-macro { width: 100%; margin: clamp(16px, 2vw, 32px) 0 0; aspect-ratio: 2 / 1; overflow: hidden; }
.pd-macro img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); }

/* ---- big coloured numbers beside a paragraph ------------------------------------ */
.pd-stats { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.pd-stats .pd-p { margin: 0; max-width: none; }
.pd-nums { display: grid; gap: 36px; }
.pd-num b { display: block; font-size: clamp(48px, 4.4vw, 64px); line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--pd-accent); }
.pd-num span { display: block; margin-top: 8px; max-width: 240px; font-size: 14px; line-height: 1.4; font-weight: 600; color: #86868b; }

/* ---- the Ring at night, rising out of the black ---------------------------------- */
.pd-night { margin-top: clamp(32px, 4vw, 56px); aspect-ratio: 2.2 / 1; max-height: 880px; overflow: hidden; }
.pd-night img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 72%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%); }
/* the Band's sleeper: her face on the right, the Band on the arm in the middle */
.pd-night-band img { object-position: 55% 62%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%); }
@media (max-width: 733px) {
  .pd-night.pd-night-band img { object-position: 62% 60%; }
}

/* ---- a finish picker: one product large, the finishes
   as swatches under it, the name above them; clicking swaps the picture ------ */
.pd-picker { width: min(640px, calc(100% - 44px)); margin: clamp(32px, 4vw, 56px) auto 0; text-align: center; }
.pd-picker-img { display: block; width: min(460px, 100%); height: auto; margin: 0 auto; transition: opacity 0.25s var(--ap-ease); }
.pd-picker-img.is-swapping { opacity: 0; }
.pd-picker-name { margin: clamp(20px, 2.4vw, 32px) 0 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: #1d1d1f; }
.pd-picker-kind { margin-left: 8px; font-weight: 400; color: #6e6e73; }
.pd-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 18px; }
.pd-swatches button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 3px #fff, 0 0 0 4px transparent; transition: box-shadow 0.2s var(--ap-ease); }
.pd-swatches button[aria-checked='true'] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 3px #fff, 0 0 0 5px #1d1d1f; }
.pd-swatches button:focus-visible { outline: 2px solid var(--ap-blue); outline-offset: 6px; }

/* ---- every finish, in one row, named -------------------------------------------- */
.pd-row { list-style: none; display: grid; grid-template-columns: repeat(var(--pd-cols, 9), minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 24px); width: min(1260px, calc(100% - 44px)); margin: clamp(48px, 5vw, 72px) auto 0; padding: 0; text-align: center; }
.pd-row img { display: block; width: 100%; height: auto; }
.pd-row b { display: block; margin-top: 14px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.pd-row small { display: block; margin-top: 2px; font-size: 12px; color: #86868b; }
.pd-row .ap-btn { margin-top: 12px; min-height: 28px; padding: 4px 14px; font-size: 12px; }
/* the straps stand taller than the rings, six across */
.pd-straps { --pd-cols: 6; width: min(1100px, calc(100% - 44px)); }

/* ---- two products side by side in a black panel, each cropped to itself -------- */
.pd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: clamp(32px, 4vw, 56px) 0 0; }
.pd-pair figure { margin: 0; text-align: center; }
.pd-pair img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 55%; }
.pd-pair figcaption { margin-top: 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: #f5f5f7; }
.pd-panel .pd-more { margin-top: 28px; }

/* ---- an icon grid on white: blue line icons, a bold lead, grey text ------------ */
.pd-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(32px, 4vw, 64px); width: min(1040px, calc(100% - 44px)); margin: 0 auto; padding: 0; text-align: left; }
.pd-grid svg { display: block; width: 40px; height: 40px; margin-bottom: 20px; color: var(--ap-blue); }
.pd-grid p { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 600; letter-spacing: -0.01em; color: #6e6e73; }
.pd-grid p b { font-weight: 600; color: #1d1d1f; }

/* ---- a black panel set into the white ------------------------------------------- */
.pd-panel { width: min(1260px, calc(100% - 44px)); margin: 0 auto; padding: clamp(48px, 6vw, 96px) clamp(24px, 7vw, 104px); border-radius: clamp(28px, 3vw, 40px); background: #000; color: #f5f5f7; }
.pd-panel .pd-h { margin: 12px 0 0; font-size: clamp(40px, 4.4vw, 64px); }
.pd-panel .pd-p { margin: 20px 0 0; max-width: 560px; color: #86868b; }
.pd-panel .pd-p b { color: #f5f5f7; }
.pd-panel .pd-film { margin: clamp(32px, 4vw, 56px) 0 0; width: 100%; }

/* ---- a film in a rounded frame, never wider than its own pixels allow ---------- */
.pd-film { position: relative; width: min(960px, 100%); border-radius: 28px; overflow: hidden; background: #000; }
.pd-film video { display: block; width: 100%; height: auto; }
.pd-film .ap-vidctl { position: absolute; right: 16px; bottom: 16px; }

/* ---- specs, plain two columns ------------------------------------------------------ */
.pd-specs-head { padding-top: clamp(100px, 11vw, 170px); }
.pd-h-small { font-size: clamp(32px, 3.6vw, 48px); }
.pd-specs { width: min(980px, calc(100% - 44px)); margin: clamp(40px, 4vw, 56px) auto 0; padding: 0; text-align: left; }
.pd-specs div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; padding: 22px 0; border-top: 1px solid #d2d2d7; }
.pd-specs div:last-child { border-bottom: 1px solid #d2d2d7; }
.pd-specs dt { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.pd-specs dd { margin: 0; font-size: 17px; line-height: 1.45; color: #1d1d1f; }

/* ---- the closing ask -------------------------------------------------------------- */
.pd-close { text-align: center; }
.pd-close .ap-ctas { margin-top: 28px; }

/* ---- a colour world: one photograph edge to edge, its own glowing colour the section's ground, the
   small line and the headline set on the colour at the top. --pd-world-ink is
   the words' colour (dark on a light world, white on a deep one). ------------ */
/* --pd-world-lift adds the photograph's own top colour (--pd-world-bg) above
   it, so the words clear the figure; --pd-world-seam fades the photograph's
   top edge into that colour. */
/* The top colour stands only behind the lift and the seam; below it the
   section is black, so a photograph given --pd-world-foot fades out into
   black from that point down. */
.pd-world { position: relative; overflow: hidden; padding-top: var(--pd-world-lift, 0px); color: var(--pd-world-ink, #f5f5f7);
  background: var(--pd-world-bg, linear-gradient(#000, #000)) top / 100% calc(var(--pd-world-lift, 0px) + var(--pd-world-seam, 0px) + 2px) no-repeat, #000; }
.pd-world picture, .pd-world > img { display: block; }
.pd-world img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 900px; object-fit: cover; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pd-world-seam, 0px), #000 var(--pd-world-foot, 100%), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pd-world-seam, 0px), #000 var(--pd-world-foot, 100%), transparent 100%); }
.pd-world-copy { position: absolute; left: 0; right: 0; top: clamp(56px, 6.5vw, 104px); z-index: 1; text-align: center; padding: 0 22px; }
@media (max-width: 733px) {
  /* on a phone the words stand above the photograph, cropped taller */
  .pd-world { padding-top: 0; }
  .pd-world-copy { position: relative; top: auto; padding: 72px 22px 8px; }
  .pd-world img { aspect-ratio: 4 / 5; --pd-world-seam: 64px; }
}
.pd-world .pd-eyebrow { color: var(--pd-world-sub, #86868b); }
.pd-world .pd-h { margin-top: 12px; }
.pd-world .pd-p { color: var(--pd-world-sub, #86868b); max-width: 640px; }

/* ---- a highlight card: the title above on the left, the photograph filling a large card with rounded
   corners, one line on the photograph at the top left (--pd-card-ink) -------- */
/* 1260 at 1440, growing to 1440 on wider windows */
.pd-wide { width: min(1440px, calc(100% - 12.5vw)); margin: 0 auto; }
@media (max-width: 733px) {
  .pd-wide { width: calc(100% - 44px); }
}
.pd-h-left { text-align: left; }
.pd-wide > .pd-eyebrow { text-align: left; }
.pd-card { position: relative; margin: clamp(40px, 4.4vw, 64px) 0 0; border-radius: 28px; overflow: hidden; aspect-ratio: 1260 / 680; max-height: calc(100svh - 150px); width: 100%; background: #f5f5f7; isolation: isolate; }
.pd-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.pd-card-t { position: absolute; z-index: 1; left: clamp(24px, 3.4vw, 48px); top: clamp(24px, 3.4vw, 48px); max-width: min(520px, 70%); margin: 0;
  font-size: clamp(20px, 2vw, 28px); line-height: 1.14; font-weight: 600; letter-spacing: -0.015em; color: var(--pd-card-ink, #fff); }
/* a soft shade behind the white line, so it reads on the lightest photograph */
.pd-card::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 48%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .26), rgba(0, 0, 0, 0)); }
@media (max-width: 733px) {
  .pd-card { aspect-ratio: 4 / 5; border-radius: 22px; }
  .pd-card img { object-position: 60% 70%; }
}

/* ---- the highlight card (apple/gallery.js): one card, its photographs
   stacked in it and cross fading; the island (a play button and a pill of
   dots) is held at the foot of the window and rises while the card is on
   screen, sinking again after it, the chosen dot a bar that fills ------------ */
.pd-gallery { position: relative; margin-top: clamp(40px, 4.4vw, 64px); }
.pd-gallery-track { display: grid; }
.pd-gallery .pd-card { grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity 1.1s ease; }
.pd-gallery .pd-card.is-on { opacity: 1; }
/* the controls sit in the page, centred under the card */
.pd-island { position: relative; width: max-content; margin: clamp(16px, 2vw, 24px) auto 0; display: flex; align-items: center; gap: 10px; }
.pd-island-play, .pd-island-dots { background: rgba(232, 232, 237, .72); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); }
.pd-island-play { display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; color: #1d1d1f; cursor: pointer; }
.pd-island-play svg { width: 16px; height: 16px; fill: currentColor; }
.pd-island-play .i-play, .pd-island.is-paused .pd-island-play .i-pause { display: none; }
.pd-island.is-paused .pd-island-play .i-play { display: block; }
.pd-island-dots { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px; border-radius: 28px; }
.pd-island-dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; overflow: hidden; cursor: pointer;
  background: rgba(29, 29, 31, .42); transition: width .6s cubic-bezier(.16, 1, .3, 1), background .3s; }
.pd-island-dots button.on { width: 48px; background: rgba(29, 29, 31, .18); }
.pd-island-dots button i { position: absolute; inset: 0; border-radius: inherit; background: #1d1d1f; transform-origin: left center; transform: scaleX(0); }
.pd-island-dots button.on i { transform: scaleX(var(--p, 0)); }
@media (prefers-reduced-motion: reduce) {
  .pd-gallery .pd-card, .pd-island { transition: none; }
}

/* ---- a short paragraph on white: the first sentence in ink, the rest in
   grey, one size ------------------------------------------------------------ */
.pd-lede { margin: 0 auto; max-width: 680px; text-align: center; font-size: clamp(19px, 1.75vw, 24px); line-height: 1.35; font-weight: 600; letter-spacing: -0.015em; color: #86868b; }
.pd-lede b { font-weight: 600; color: #1d1d1f; }

/* ---- a photograph smaller than the page, on the section's black, each edge
   fading into it as far as --f-l, --f-r, --f-t and --f-b say --------------- */
.pd-shot { width: min(100%, var(--shot-w, 1200px)); margin: clamp(32px, 4vw, 56px) auto 0; }
.pd-shot img { display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--f-l, 0%), #000 calc(100% - var(--f-r, 0%)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--f-t, 0%), #000 calc(100% - var(--f-b, 0%)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 var(--f-l, 0%), #000 calc(100% - var(--f-r, 0%)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--f-t, 0%), #000 calc(100% - var(--f-b, 0%)), transparent 100%);
  mask-composite: intersect; }

@media (max-width: 1068px) {
  .pd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 733px) {
  .pd-local-links { display: none; }
  .pd-local-name { font-size: 17px; }
  .pd-hero { height: 560px; }
  /* taller heroes on a phone: the band stands well below the button, and the
     hand keeps its forearm and its fade into black on screen */
  .pd-hero.pd-hero-band { height: 660px; }
  .pd-hero.pd-hero-ring { height: 660px; }
  .pd-hero img { width: var(--pd-art-w-phone, 190vw); height: auto; bottom: var(--pd-art-bottom-phone, 0); }
  .pd-split, .pd-stats { grid-template-columns: 1fr; }
  .pd-macro { aspect-ratio: 4 / 3; }
  .pd-macro img { object-position: 45% 100%; }
  .pd-media { aspect-ratio: var(--pd-ratio-phone, 4 / 5); }
  .pd-media img { object-position: var(--pd-focus-phone, var(--pd-focus, 50% 50%)); }
  .pd-night { aspect-ratio: 4 / 5; }
  .pd-night img { object-position: 74% 70%; }
  .pd-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .pd-grid { grid-template-columns: 1fr; gap: 40px; }
  .pd-specs div { grid-template-columns: 1fr; gap: 6px; }
}