/* hipstamatic.app — design system v3 (style_v3.css)
   Cash App simplicity · Lomography camera art · Supreme index.
   House palette and system type only. 7-pt spacing. */

:root {
  --ink: #15151E;
  --paper: #F7F4F1;
  --yellow: #FFD400;
  --orange: #FF4F00;
  --gold: #93804C;
  --rule: rgb(21 21 30 / 0.14);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --gutter: 28px;
  --max: 1232px;

  /* Square photos on hover: the print lifts off the page, uncropped (.squares .frame, .challenge-thumb) */
  --lift: translateY(-6px) scale(1.02);
  --lift-shadow: 0 2px 3px rgb(21 21 30 / 0.10), 0 12px 20px rgb(21 21 30 / 0.14), 0 28px 48px rgb(21 21 30 / 0.18);
  --lift-ease: 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Type scale (creative review, 8 Oct 2026): every text size on the site is one of these.
     Display and headline sizes are their own clamps above. Kept off the scale on purpose: the /membership
     receipt, the print captions and award years (they're objects), pull quotes and the SVG stamps. */
  --label: 17px;      /* condensed caps: nav, buttons, small titles */
  --label-lg: 20px;   /* condensed caps: card and list titles, big buttons */
  --mono-xs: 11px;    /* real mono: breadcrumbs, the date line, eyebrows, tags */
  --mono-sm: 12px;    /* real mono: kickers */
  --small: 14px;      /* supporting text: captions, meta, handles, footer */
  --body: 17px;       /* running text */
  --lede: 20px;       /* intros, and long-form reading */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

/* Type */

.display {
  font-family: var(--sans);
  font-variation-settings: "wght" 500, "wdth" 130;
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(46px, 7.4vw, 118px);
  line-height: 0.92;
  letter-spacing: -0.005em;
  margin: 0;
}

.headline {
  font-family: var(--sans);
  font-variation-settings: "wght" 500, "wdth" 130;
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1;
  margin: 0;
}

.label {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.label.condensed {
  font-variation-settings: "wght" 600, "wdth" 52;
  text-transform: uppercase;
}

.mono {
  font-family: var(--mono);
  font-size: var(--mono-xs);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lede {
  font-size: var(--lede);
  line-height: 1.35;
  max-width: 30ch;
  margin: 0;
}

.muted { opacity: 0.62; }

/* Layout */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { position: relative; }

.pad { padding: 84px 0; }

.flood-yellow { background: var(--yellow); color: var(--ink); }
.flood-ink { background: var(--ink); color: var(--paper); }
.flood-paper { background: var(--paper); color: var(--ink); }

/* An app page set on its app's own surface ($v3_texture): IncrediBooth's speckled paper, TinType's
   cherry, Cinamatic's charcoal ABS and Classic's black leatherette as tiles; SwankoLab's lab room and
   Party!'s BrandBackground as a .backdrop, one picture at the top. It runs from the top of the page, so
   the header and the sections in the page's own flood go clear over it; the footer and the other floods
   stay solid. On a paper tile the locked header keeps it once it compacts; otherwise it compacts onto plain paper. */
.textured { background-image: var(--texture); background-size: var(--texture-size); background-repeat: var(--texture-repeat); background-position: center top; }
.textured .site-head:not(.scrolled),
.textured.flood-paper section.flood-paper, .textured.flood-paper:not(.backdrop) .qr,
.textured.flood-ink section.flood-ink { background: transparent; }
.textured.flood-paper:not(.backdrop) .site-head.scrolled { background: var(--paper) var(--texture) center top / var(--texture-size) repeat fixed; }

/* Bar */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 21px;
  padding: 21px 0;
}

.bar .logotype img { height: 30px; width: auto; }
.flood-yellow .bar .logotype img, .flood-paper .bar .logotype img { filter: brightness(0); }

.bar nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: var(--label);
}

.bar nav a { text-decoration: none; }
.bar nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Apps menu: a full-width ink bar that slides out from under the header (the header is its containing block),
   then each app drops in after the one before with a little bounce. .apps-open on .site-head comes from js/v3.js:
   on hover where there's a pointer that hovers, or when the keyboard reaches Apps. The menu clips the panel at the
   header's bottom edge, so it reads as coming from underneath; its padding leaves room for the panel's shadow. */
.apps-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  padding-bottom: 48px;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.3s; /* stays drawn while it slides away */
}
.apps-panel {
  display: block;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.28);
  transform: translateY(-100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
}
.apps-list { display: flex; justify-content: center; gap: 6px; padding: 24px var(--gutter) 22px; }
.apps-list a {
  display: grid; justify-items: center; gap: 9px;
  width: clamp(84px, 9vw, 112px);
  font-family: var(--sans); font-size: var(--small); font-variation-settings: normal; font-weight: 500; text-transform: none; line-height: 1;
  opacity: 0;
  transform: translateY(-64px);
  transition: transform 0.15s, opacity 0.15s;
}
.apps-list img { width: 64px; height: 64px; border-radius: 22.5%; box-shadow: 0 6px 14px rgb(0 0 0 / 0.35); transition: transform 0.2s; }
.apps-list span { padding-bottom: 4px; border-bottom: 2px solid transparent; opacity: 0.7; }
.bar nav .apps-list a:hover { text-decoration: none; }
.apps-list a:hover img { transform: translateY(-3px); }
.apps-list a:hover span, .apps-list a[aria-current] span { opacity: 1; }
.apps-list a[aria-current] span { border-bottom-color: currentColor; }

.site-head.apps-open .apps-menu { visibility: visible; transition: none; }
.site-head.apps-open .apps-panel { pointer-events: auto; transform: none; transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
.site-head.apps-open .apps-list a {
  opacity: 1;
  transform: none;
  /* bounce, bounce, bounce: each one 60 ms after the last, once the bar is most of the way down */
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.12s + var(--i) * 0.06s), opacity 0.2s linear calc(0.12s + var(--i) * 0.06s);
}
.site-head.apps-open .apps-item > a { text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .apps-panel, .site-head.apps-open .apps-panel, .apps-list a, .site-head.apps-open .apps-list a { transition: none; }
  .apps-list a { transform: none; }
}

.stamp span { white-space: nowrap; }

.stamp {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 0 0 14px 0;
  border-bottom: 1px solid currentColor;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 21px;
  border-radius: 2px;
  font-family: var(--sans);
  font-variation-settings: "wght" 700, "wdth" 52;
  font-weight: 700;
  font-size: var(--label-lg);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s, background 0.2s;
}

.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.btn-ink { background: var(--ink); color: var(--paper); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-orange { background: var(--orange); color: var(--ink); } /* ink on orange is 5.5:1; paper on orange is 3.0:1 */
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-small { padding: 10px 14px; font-size: var(--label); }

.btn .arrow { font-family: var(--sans); font-variation-settings: "wght" 700; }

.starburst { width: 20px; height: 20px; display: block; }

/* Hero (Cash: headline · phone · copy) */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); /* minmax: a long word can't squeeze the copy column */
  align-items: center;
  gap: 42px;
  min-height: calc(100vh - 140px);
  padding: 42px 0 63px 0;
}

.hero .copy { justify-self: end; max-width: 340px; display: grid; gap: 21px; }
.hero .copy .row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.qr {
  width: 84px; height: 84px;
  padding: 7px;
  background: var(--paper);
  border-radius: 2px;
}
section.flood-paper .qr { background: #fff; } /* on paper, paper-coloured would vanish: white stands off it (v3.js draws the code on the same colour) */

/* Phone */

/* The phone is a picture of one (/img/v3/iphone-frame.webp, an iPhone 15 Pro, from /img/iphone15.png at 1419 x 2796)
   laid over the screen. Its screen hole is 1179 x 2556 at 120, 120, the shape the app videos are recorded at,
   so none of their UI is cropped; its body is 61 px in from each edge, with a 229 px corner. */
.phone {
  width: clamp(223px, min(24.5vw, calc((100vh - 250px) * 0.5075)), 335px);
  aspect-ratio: 1419 / 2796;
  position: relative;
  isolation: isolate;
}

/* The shadow, under the body only (the picture is transparent around it) */
.phone::before {
  content: "";
  position: absolute;
  inset: 2.18% 4.3%;
  border-radius: 17.66% / 8.56%;
  box-shadow:
    0 28px 70px rgb(0 0 0 / 0.35),
    0 6px 14px rgb(0 0 0 / 0.25);
}

.phone::after {
  content: "";
  position: absolute; inset: 0;
  background: url(/img/v3/iphone-frame.webp) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* Rounded a little tighter than the picture's 170 px inner corner, so the video tucks under the bezel. The hole's
   own corners are see-through, so this clip is what keeps the video's square corners in; clip-path as well as
   overflow because Safari lets a playing (composited) video out past a border-radius. */
.phone .screen {
  position: absolute;
  inset: 4.2918% 8.4567%;
  border-radius: 12.7% / 5.87%;
  overflow: hidden;
  clip-path: inset(0 round 12.7% / 5.87%);
  background: #000;
}

.phone .screen > video, .phone .screen > img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
  transition: opacity 0.5s;
}

/* App phones whose UI video isn't in yet: the app's photographs, or its icon */
.phone .shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.9s; }
.phone .shots img.on { opacity: 1; }
.phone .splash { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 0 14%; text-align: center; background: var(--ink); color: var(--paper); }
.phone .splash img { width: 46%; height: auto; margin-bottom: 14px; border-radius: 22.5%; box-shadow: 0 10px 28px rgb(0 0 0 / 0.45); }
.phone .splash .label { font-size: var(--label-lg); line-height: 1; }
.phone .splash .mono { opacity: 0.6; }

/* Proof row (Cash) */

.proof {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 42px;
  padding: 21px 0;
  border-top: 1px solid currentColor;
}

.proof div { display: grid; gap: 2px; }
.proof .label { font-size: var(--label-lg); }

/* Beats with a sticky phone (Cash) */

/* "How to Hipstamatic" over the beats (home): the logotype in ink, sitting on the words' baseline */
.how-to { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.3em; margin-bottom: 136px; }
.how-to-logotype { display: inline-block; vertical-align: baseline; height: 1.25em; width: auto; filter: brightness(0); transform: translateY(0.2em); }
/* App pages: each app's logotype in ink, sized from its hero height (--logo-h, unitless; the Hipstamatic script's 46 is 1.25em) */

.beats {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 70px;
}

.beats .steps > div {
  min-height: 64vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  max-width: 520px;
}

/* Under "How to Hipstamatic", step 01 starts at the top of its block rather than halfway down it */
.how-to + .beats .steps > div:first-child { justify-content: flex-start; }

.beats .sticky {
  position: sticky;
  top: 12vh;
  height: 76vh;
  display: flex;
  align-items: center;
}

.beats .sticky .phone { width: clamp(212px, min(24.5vw, calc((76vh - 56px) * 0.5075)), 323px); }

/* Photograph wall (Lomography) */

.wall {
  columns: 3 260px;
  column-gap: 21px;
}

.wall figure {
  break-inside: avoid;
  margin: 0 0 28px 0;
}

.wall img { width: 100%; height: auto; background: #ddd; }

figcaption {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-top: 7px;
}

figcaption .credit { opacity: 0.5; text-align: right; }

/* Season preview grid (Supreme) */

.preview {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}

.preview a, .preview div { display: block; aspect-ratio: 1; overflow: hidden; }
.preview img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.preview a:hover img { transform: scale(1.04); }
.preview .icon-cell { background: #0b0b10; display: grid; place-items: center; }
.preview .icon-cell img { width: 62%; height: auto; border-radius: 22.5%; }

/* Gear shelf (Lomography objects) */

.shelf {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: 21px;
  overflow-x: auto;
  padding: 14px 0 21px 0;
  scrollbar-width: thin;
}

.shelf a {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-decoration: none;
  padding: 21px 14px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: rgb(255 255 255 / 0.35);
  transition: transform 0.2s;
}

.shelf a:hover { transform: translateY(-3px); }
.shelf img { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 8px 10px rgb(0 0 0 / 0.25)); }

/* Lens pan (v3LensPan; home, full bleed, and /membership, inset): every row a third of a lens off the one above */

.lens-pan {
  --tile: 92px;
  --gap: 16px;
  --stride: calc(var(--tile) + var(--gap));
  display: grid;
  gap: var(--gap);
  margin-bottom: 21px;
  padding: 12px 0 24px 0; /* room for a lifted lens */
  overflow: hidden;
}

.lens-row {
  display: flex;
  gap: var(--gap);
  width: max-content;
  margin-left: calc(var(--stride) * (var(--shift) - 1));
  animation: lens-pan calc(var(--count) * 3.6s) linear infinite; /* /membership's pace, a lens every 3.6 s */
}

.lens-row a { flex: none; width: var(--tile); height: var(--tile); display: block; }
.lens-row img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.25));
  transition: transform var(--lift-ease);
}
.lens-row a:hover img { transform: scale(1.14); }

/* Each row holds its lenses twice: drifting one set left lands where it started */
@keyframes lens-pan {
  to { transform: translateX(calc(var(--stride) * var(--count) * -1)); }
}

@media (max-width: 700px) {
  .lens-pan { --tile: 64px; --gap: 10px; }
}

/* Three rows across the top of /membership's numbers band, full bleed, a little smaller than the home page's */
.lens-pan.lens-pan-band { --tile: clamp(60px, 6vw, 84px); --gap: 14px; margin: 0; padding: 49px 0 12px 0; } /* bottom: room for a lifted lens */
@media (prefers-reduced-motion: reduce) {
  .lens-row { animation: none; }
}

/* An app icon leading a headline at the height of the words: "Signature cameras in Hipstamatic" (/apps) */
.title-icon { display: inline-block; width: auto; height: 1.05em; margin-right: 0.32em; vertical-align: -0.2em; border-radius: 22.5%; }
.sig-sub { margin: 14px 0 0 0; max-width: 60ch; opacity: 0.75; }

/* App icons in a row, each overlapping the one before it a little (Winter 26/27's header) */
.icon-stack { display: flex; margin-bottom: 28px; }
.icon-stack a { flex: none; position: relative; transition: transform 0.2s; }
.icon-stack a + a { margin-left: -25px; }
.icon-stack a:hover { transform: translateY(-4px); z-index: 1; }
.icon-stack img { display: block; width: 100px; height: 100px; border-radius: 22.5%; box-shadow: 0 2px 4px rgb(0 0 0 / 0.12), 0 10px 24px rgb(0 0 0 / 0.28); }
.icon-stack a + a img { box-shadow: -5px 0 10px rgb(0 0 0 / 0.32), 0 2px 4px rgb(0 0 0 / 0.12), 0 10px 24px rgb(0 0 0 / 0.28); } /* a darker edge where each one sits on the last */
@media (max-width: 680px) { .icon-stack { margin-bottom: 21px; } .icon-stack img { width: 72px; height: 72px; } .icon-stack a + a { margin-left: -15px; } }

/* App grid (/apps), after Apple One's services page: as many columns as fit (four in the wrap), each app with its
   icon at full size, since this is the one place to see them big */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 63px 42px;
  padding: 49px 0 0 0;
  margin-bottom: 91px;
  border-top: 1px solid currentColor;
}
.app-card { display: grid; align-content: start; justify-items: start; text-decoration: none; color: inherit; scroll-margin-top: 96px; }
.app-card img {
  width: clamp(112px, 11vw, 148px); height: auto; aspect-ratio: 1;
  margin-bottom: 28px;
  border-radius: 22.5%;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.08), 0 16px 32px rgb(0 0 0 / 0.18);
  transition: transform var(--lift-ease), box-shadow var(--lift-ease);
}
.app-card:hover img { transform: translateY(-5px); box-shadow: 0 4px 8px rgb(0 0 0 / 0.1), 0 24px 44px rgb(0 0 0 / 0.22); }
.app-card .name { margin: 0 0 8px 0; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.05; }
.app-card .when { opacity: 0.6; margin-bottom: 14px; }
.app-card p { margin: 0 0 18px 0; max-width: 36ch; font-size: var(--body); line-height: 1.45; opacity: 0.85; }
.app-card .more { font-size: var(--small); text-decoration: underline; text-underline-offset: 3px; }
.app-card:hover .more { text-decoration-thickness: 2px; }
/* The compact version: More apps at the foot of the home page and each app page (v3MoreApps). Smaller icon,
   name and a line. Always six apps, so the columns step 6, 3, 2 and every row comes out even */
.app-grid.compact { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 42px 28px; padding-top: 35px; margin-bottom: 0; }
@media (max-width: 1100px) { .app-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .app-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px 21px; } }
.app-grid.compact .app-card img { width: clamp(72px, 7vw, 92px); margin-bottom: 18px; }
.app-grid.compact .name { font-size: var(--label-lg); margin-bottom: 6px; }
.app-grid.compact p { margin: 0; font-size: var(--small); line-height: 1.4; opacity: 0.7; }

/* Section heads */

.head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 14px 28px;
  padding-bottom: 21px;
}
.head > * { min-width: 0; }

.eyebrow { margin-bottom: 14px; }

/* Steps (use-case) */

.steps4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  border-top: 1px solid currentColor;
  padding-top: 28px;
}

.steps4 img { width: 100%; max-width: 150px; height: auto; margin-bottom: 14px; }
.steps4 h3 { margin: 7px 0 4px 0; font-size: var(--label-lg); line-height: 1.05; }
.steps4 p { margin: 0; }

/* FAQ */

.faq { border-top: 1px solid currentColor; }

.faq details { border-bottom: 1px solid var(--rule); }
.flood-ink .faq details { border-bottom-color: rgb(247 244 241 / 0.16); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  gap: 21px;
  font-size: var(--body);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 18px; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 18px 0; max-width: 62ch; opacity: 0.75; }

/* Footer index (Supreme) */

.index {
  padding-top: 70px;
  padding-bottom: 35px;
}

.index .cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
}

.index ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}

.index .group { opacity: 0.5; margin-bottom: 4px; }

.index li a { text-decoration: none; font-size: var(--small); }
.index li a:hover { text-decoration: underline; text-underline-offset: 3px; }

.endline {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 21px;
  margin-top: 70px;
  padding-top: 21px;
  border-top: 1px solid currentColor;
}

.endline .mark {
  font-variation-settings: "wght" 500, "wdth" 130;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.9;
  text-transform: none;
}

/* Breadcrumbs */

.crumbs { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 0 14px 0; } /* the home stamp's spacing: text under the header, 14px to the rule */
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Responsive */

@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 35px; min-height: 0; padding-top: 21px; }
  .hero .phone { justify-self: center; }
  .hero .copy { justify-self: start; max-width: none; }
  .beats { grid-template-columns: 1fr; }
  .beats .sticky { display: none; }
  .beats .steps > div { min-height: 0; padding: 28px 0; }
  .steps4 { grid-template-columns: repeat(2, 1fr); }
  .preview { grid-template-columns: repeat(4, 1fr); }
  .index .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px 28px; }
}

@media (max-width: 680px) {
  :root { --gutter: 20px; }
  body { font-size: var(--body); }
  .pad { padding: 63px 0; }
  .bar nav .hide-sm { display: none; }
  .bar nav { gap: 14px; }
  .qr { display: none; }
  .head { flex-direction: column; align-items: start; }
  .preview { grid-template-columns: repeat(3, 1fr); }
  .steps4 { grid-template-columns: 1fr; }
  .stamp .hide-sm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* Use-case page */

.display-md { font-size: clamp(40px, 5.4vw, 82px); line-height: 0.95; }

.endorse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 28px;
}

.endorse .product { height: var(--logo-h, 64px); width: auto; max-width: 100%; filter: invert(1) brightness(1.02) sepia(0.06); }
/* Cinamatic's wordmark is type, as the app sets it on the camcorder: SF Pro Bold, tight, a superscript TM */
.endorse .wordmark { height: auto; filter: none; font-family: var(--sans); font-weight: 700; font-size: 46px; line-height: 1; letter-spacing: -0.03em; }
.endorse .wordmark sup { font-size: 0.39em; font-weight: 600; vertical-align: top; position: relative; top: 0.08em; margin-left: 1px; }
.endorse .suffix { font-size: var(--label-lg); align-self: flex-end; margin-bottom: 6px; } /* on the script's baseline */
.flood-paper .endorse .product { filter: none; }

/* Party! product art: its own colours live here, never in the chrome. */
.party-splash {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #384173 0%, #7F5AC0 58%, #F19699 100%);
}
.party-splash img { width: 62%; filter: invert(1) sepia(0.08); }
.party-splash .tag { position: absolute; bottom: 9%; left: 0; right: 0; text-align: center; color: #F7F4F1; }

.points {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  border-top: 1px solid currentColor;
  padding-top: 28px;
}
.points h3 { margin: 0 0 7px 0; font-size: var(--label-lg); line-height: 1.05; }
.points p { margin: 0; }

.roll {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  padding: 14px;
  background: #0b0b10;
  border-radius: 2px;
}
.roll div {
  aspect-ratio: 2 / 3;
  border: 1px dashed rgb(247 244 241 / 0.28);
  display: grid; place-items: center;
  color: rgb(247 244 241 / 0.5);
  text-align: center;
  padding: 7px;
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips a {
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 2px;
  text-decoration: none;
}
.chips a:hover { background: var(--ink); color: var(--paper); }

.close-band { text-align: center; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 21px; }
/* App pages: the app's icon, big, over its badge */
.close-icon { width: clamp(200px, 24vw, 300px); height: auto; aspect-ratio: 1; margin-bottom: 14px; border-radius: 22.5%; box-shadow: 0 4px 10px rgb(0 0 0 / 0.12), 0 28px 60px rgb(0 0 0 / 0.22); }

@media (max-width: 980px) {
  .points { grid-template-columns: repeat(2, 1fr); }
  .roll { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .points { grid-template-columns: 1fr; }
  .endorse .product { height: calc(var(--logo-h, 64px) * 0.8); }
  .endorse .wordmark { height: auto; font-size: 37px; }
}

/* Gear page (Lomography product page) */

.gear-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 56px;
  padding: 42px 0 70px 0;
}

.stage {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0) 72%), #EDE8E2;
  border-radius: 2px;
  position: relative;
}

.stage img { width: min(64%, 320px); height: auto; filter: drop-shadow(0 24px 28px rgb(0 0 0 / 0.32)); }
.stage .corner { position: absolute; left: 14px; top: 14px; }
.stage .corner-r { position: absolute; right: 14px; bottom: 14px; }

.spec { width: 100%; border-collapse: collapse; margin: 21px 0; }
.spec th, .spec td { text-align: left; padding: 10px 0; border-top: 1px solid var(--rule); vertical-align: top; }
.spec th { width: 34%; font-weight: normal; opacity: 0.6; }

.combo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 56px;
  align-items: center;
}

.combo .objects { display: flex; align-items: center; gap: 14px; }
.combo .objects img { height: 150px; width: auto; filter: drop-shadow(0 14px 16px rgb(0 0 0 / 0.35)); }
.combo .objects .plus { font-family: var(--mono); font-size: 34px; opacity: 0.6; }

.triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.triptych img { width: 100%; height: auto; }

@media (max-width: 980px) {
  .gear-hero { grid-template-columns: 1fr; gap: 28px; }
  .combo { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 680px) {
  .combo .objects { gap: 10px; }
  .combo .objects img { height: auto; width: calc((100% - 44px) / 3); }
  .combo .objects img + .plus + img { width: calc((100% - 44px) * 2 / 3); }
  .triptych { grid-template-columns: 1fr 1fr; }
  .triptych img:last-child { display: none; }
}

/* Square photographs (1:1, always). Member work links to its photo and its photographer. */

.squares {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 21px;
}

.squares figure { margin: 0; }

.squares .frame {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #E4DED7;
  position: relative;
  transition: transform var(--lift-ease), box-shadow var(--lift-ease);
}

.flood-ink .squares .frame { background: #23232c; }

.squares .frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.squares .frame:hover { transform: var(--lift); box-shadow: var(--lift-shadow); z-index: 1; }
.flood-ink .squares .frame:hover { box-shadow: 0 12px 24px rgb(0 0 0 / 0.45), 0 28px 48px rgb(0 0 0 / 0.5); }

.squares figcaption { padding-top: 8px; }

.squares .handle {
  font-size: var(--small);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  color: inherit;
}

.squares .handle:hover { text-decoration: underline; text-underline-offset: 3px; }

.squares.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* The daily Top Nine: always 3 × 3, like the app. */
.squares.nine { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px 14px; }
.squares .handle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.triptych img { aspect-ratio: 1 / 1; object-fit: cover; }
.roll div { aspect-ratio: 1 / 1; }

@media (max-width: 980px) {
  .squares:not(.nine) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .squares, .squares.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px 14px; }
  .squares.nine { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 6px; }
  .squares.nine .handle { font-size: var(--small); }
  .squares .handle { font-size: var(--small); }
  .squares.three figure:nth-child(3) { display: none; }
}

.head a.mono { text-decoration: none; }
.head a.mono:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Camera Club: orange is the Club's colour. Every Join button is orange; other CTAs are ink or paper. */

.flood-orange { background: var(--orange); color: var(--ink); }

.club-link { display: inline-flex; align-items: center; gap: 6px; }
.club-link .starburst { width: 15px; height: 15px; color: var(--orange); }
.flood-orange .club-link .starburst { color: var(--ink); }
/* The Camera Club starburst, big, over "Camera Club" on the home page's orange band */
.club-mark { display: block; margin-bottom: 14px; color: var(--ink); }
.club-mark .starburst { width: 85px; height: 85px; }
@media (max-width: 680px) { .club-mark { margin-bottom: 21px; } .club-mark .starburst { width: 96px; height: 96px; } }

.btn .starburst { width: 18px; height: 18px; }

.perks {
  display: grid;
  grid-template-columns: repeat(var(--perks, 4), minmax(0, 1fr)); /* 3 when the app has no perk of its own */
  gap: 21px;
  border-top: 1px solid currentColor;
  padding-top: 21px;
}
.perks div { display: grid; gap: 4px; }
.perks .label { font-size: var(--label-lg); line-height: 1.05; }

.lineup {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 21px;
}
.lineup a { display: grid; gap: 3px; text-decoration: none; text-align: center; }
.lineup img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 22.5%; box-shadow: 0 6px 18px rgb(0 0 0 / 0.25); }
.lineup .label { font-size: var(--label); line-height: 1; margin-top: 10px; }

.club-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-bottom: 28px; }
.club-head .actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* App pages: the app's icon ahead of what Camera Club adds to it */
.club-title { display: flex; align-items: center; gap: 28px; }
.club-title .app-icon { flex: none; width: 140px; height: 140px; border-radius: 22.5%; box-shadow: 0 2px 4px rgb(0 0 0 / 0.12), 0 14px 32px rgb(0 0 0 / 0.22); }
@media (max-width: 640px) { .club-title { gap: 18px; } .club-title .app-icon { width: 84px; height: 84px; } }

.tag {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 2px;
  border: 1px solid currentColor;
}
.tag.free { color: inherit; }
.tag.club { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.tag.soon { background: var(--orange); border-color: var(--orange); color: var(--paper); font-weight: bold; } /* apps not on the App Store yet (app pages) */
.hero .tag.soon { margin: 0 0 21px 0; } /* above the app's logotype */

.club-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 21px;
  flex-wrap: wrap;
  padding-top: 28px;
  padding-bottom: 28px;
}
.club-strip .headline { font-size: clamp(24px, 3vw, 36px); }

@media (max-width: 980px) {
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .lineup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bar nav .club-link { display: none; }
}

.only-sm { display: none; }
@media (max-width: 680px) { .only-sm { display: inline; } }

/* Camera Club page */
.club-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; padding: 56px 0 70px 0; }
.club-hero .actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.receipt-wrap .actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* Try it free, the QR and its caption, beside the receipt */
.perk-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 14px 0; border-top: 1px solid currentColor; }
.perk-rows > div:last-child { border-bottom: 1px solid currentColor; }
.perk-rows .label { font-size: var(--label-lg); }
.club-link[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 980px) { .club-hero { grid-template-columns: 1fr; gap: 35px; } }

/* Members area (account.hipstamatic.com) */

.flood-gold { background: var(--gold); color: var(--ink); }

.signin {
  max-width: 420px;
  margin: 0 auto;
  padding: 84px 0 98px 0;
  display: grid;
  gap: 21px;
}
.signin h1 { margin-bottom: 7px; }

.apple-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 14px;
  border: 0; border-radius: 2px;
  background: #000; color: #fff;
  font-family: var(--sans); font-size: var(--body); font-weight: 600;
  cursor: pointer;
}
.apple-btn .apple { font-size: 19px; line-height: 1; }

.or { display: flex; align-items: center; gap: 14px; opacity: 0.55; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid currentColor; }

.field { display: grid; gap: 6px; }
.field input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgb(21 21 30 / 0.35);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  font: 17px var(--sans);
}
.field input:focus { outline: 3px solid var(--orange); outline-offset: 1px; border-color: var(--ink); }
.signin .btn { justify-content: center; width: 100%; }
.signin .fine { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.signin .fine a { text-decoration: none; }
.signin .fine a:hover { text-decoration: underline; }

/* Account */

.account-head { display: flex; justify-content: space-between; align-items: end; gap: 21px; flex-wrap: wrap; padding: 56px 0 35px 0; }
.account-head .who { display: grid; gap: 4px; }

.status { padding: 35px 0 42px 0; }
.status .row { display: flex; justify-content: space-between; align-items: end; gap: 28px; flex-wrap: wrap; }
.status .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px; border-top: 1px solid currentColor; margin-top: 28px; padding-top: 21px; }
.status .facts div { display: grid; gap: 4px; }
.status .facts .label { font-size: var(--label-lg); }

.settings { border-top: 1px solid currentColor; }
.settings > div {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: center;
  gap: 21px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.settings .value { font-size: var(--body); }
.settings a.mono { text-decoration: none; }
.settings a.mono:hover { text-decoration: underline; text-underline-offset: 3px; }
.settings .ok::before { content: "●"; color: var(--gold); margin-right: 8px; }

.switch { position: relative; width: 46px; height: 28px; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: rgb(21 21 30 / 0.2); border-radius: 28px; transition: background 0.2s; cursor: pointer; }
.switch span::before { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); }
.switch input:checked + span { background: var(--ink); }
.switch input:checked + span::before { transform: translateX(18px); }

.paks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.paks div { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 14px 7px; border: 1px solid var(--rule); border-radius: 2px; background: rgb(255 255 255 / 0.35); }
.paks img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 6px 8px rgb(0 0 0 / 0.25)); }

.redeem { display: flex; gap: 10px; max-width: 460px; }
.redeem input { flex: 1; padding: 12px 14px; border: 1px solid rgb(21 21 30 / 0.35); border-radius: 2px; font: 16px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }

@media (max-width: 680px) {
  .settings > div { grid-template-columns: 1fr auto; gap: 4px 14px; }
  .settings > div > .mono:first-child { grid-column: 1 / -1; }
  .status .facts { grid-template-columns: 1fr; }
  .paks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .signin { padding: 42px 0 70px 0; }
}

.bar nav a { white-space: nowrap; }
@media (max-width: 680px) {
  .status .row > div { justify-items: start !important; }
}

/* Site header: locks to the top. Blends with the page's top flood, then compacts onto paper once you scroll. */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.site-head .bar { transition: padding 0.2s; }
.site-head.scrolled {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--rule);
}
.site-head.scrolled .bar { padding: 10px 0; }

/* Logotype colour per ground */
.site-head .logotype img { transition: filter 0.15s; }
.site-head.flood-paper .logotype img,
.site-head.flood-yellow .logotype img,
.site-head.flood-orange .logotype img,
.site-head.flood-gold .logotype img,
.site-head.scrolled .logotype img { filter: brightness(0); }

/* The hover box behind the logotype, as on the current site */
.bar .logotype {
  display: inline-block;
  margin: -10px;
  padding: 10px;
  border-radius: 2px;
  line-height: 0;
  transition: background 0.15s;
}
.bar .logotype:hover { background: var(--yellow); }
.bar .logotype:hover img { filter: brightness(0) !important; }
/* On the yellow flood the box flips to ink so it still shows */
.site-head.flood-yellow:not(.scrolled) .logotype:hover { background: var(--ink); }
.site-head.flood-yellow:not(.scrolled) .logotype:hover img { filter: none !important; }

/* Anchor jumps clear the locked header */
[id] { scroll-margin-top: 72px; }

/* Apple's official "Download on the App Store" badge: unmodified artwork, at least 40px tall, clear space ≥ ¼ of its height. */
.appstore-badge { display: inline-block; line-height: 0; transition: transform 0.15s; }
.appstore-badge:hover { transform: translateY(-1px); }
.appstore-badge img { height: 52px; width: auto; }
/* Not on the App Store yet: a grey tile the size of the badge (our type, no Apple logo), linking to Winter 26/27 */
.appstore-soon { display: inline-flex; align-items: center; gap: 11px; box-sizing: border-box; min-width: 156px; height: 52px; padding: 0 18px 0 14px; border-radius: 9px; background: var(--gold); color: var(--ink); text-decoration: none; line-height: 1; } /* gold means member */
.appstore-soon .starburst { width: 28px; height: 28px; flex: none; }
.appstore-soon .soon-text { display: grid; gap: 3px; }
.appstore-soon .mono { font-size: var(--mono-xs); letter-spacing: 0.08em; opacity: 0.85; }
.appstore-soon .label { font-size: var(--label-lg); }
.appstore-soon:hover { background: #85744a; }
.hero .copy .row { gap: 16px; }

/* Keyword H1 that sits above a display line */
.kicker { font-family: var(--sans); font-variation-settings: "wght" 600, "wdth" 52; font-size: var(--label); font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 14px 0; } /* a label, not mono: the h1 above the display line */

/* Gear hub */
.gear-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 21px; padding: 14px 0 28px 0; border-top: 1px solid currentColor; }
.gear-tools .tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.gear-tools .tabs a { padding: 7px 12px; border: 1px solid currentColor; border-radius: 2px; text-decoration: none; }
.gear-tools .tabs a.on { background: var(--ink); color: var(--paper); }
.gear-tools input[type=search] { flex: 1; min-width: 180px; max-width: 320px; padding: 9px 12px; border: 1px solid rgb(21 21 30 / 0.35); border-radius: 2px; font: 15px var(--sans); background: #fff; }
.gear-tools label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.gear-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; margin-bottom: 56px; }
.gear-grid a { display: grid; justify-items: center; gap: 6px; padding: 14px 7px 12px; border: 1px solid var(--rule); border-radius: 2px; background: rgb(255 255 255 / 0.35); text-decoration: none; text-align: center; transition: transform 0.15s; }
.gear-grid a:hover { transform: translateY(-2px); }
.gear-grid img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 6px 8px rgb(0 0 0 / 0.22)); }
.gear-grid .name { font-size: var(--small); line-height: 1.25; }
.gear-grid a[hidden] { display: none; }
.gear-type-head { display: flex; justify-content: space-between; align-items: end; gap: 14px; padding-bottom: 14px; }

/* An app in hand ('hands', Classic): the words on the left, the landscape phone held big on the right, as the v2
   page had it; on a phone the words, then the badge, then the picture */
.hero.hero-hands { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); grid-template-areas: "title hands" "copy hands"; gap: 35px 28px; align-content: center; }
.hero-hands > div:first-child { grid-area: title; align-self: end; }
.hero-hands .copy { grid-area: copy; justify-self: start; align-self: start; }
.hero-hands .hands {
  grid-area: hands; width: 100%; height: auto;
  /* the wrists are cut off at the picture's sides and bottom: feather those edges into the backdrop */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, #000 62%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, #000 62%, transparent);
  mask-composite: intersect;
}
@media (max-width: 980px) {
  .hero.hero-hands { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "copy" "hands"; }
}

/* Phones: the download CTA comes before the phone mockup */
@media (max-width: 980px) {
  .hero .copy { order: 2; }
  .hero .phone { order: 3; }
}
@media (max-width: 680px) {
  .stage { aspect-ratio: 4 / 3; }
  .gear-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .gear-grid img { width: 56px; height: 56px; }
}

/* Use-case template */
.endorse-app { display: flex; align-items: center; gap: 10px; margin-bottom: 21px; }
.endorse-app img { width: 40px; height: 40px; border-radius: 22.5%; }
.endorse-app .label { font-size: var(--label-lg); }
.steps4.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps4.three h3 { font-size: var(--label-lg); }
.soon-screen { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; background: #15151E; color: var(--paper); text-align: center; }
.soon-screen img { width: 46%; border-radius: 22.5%; box-shadow: 0 10px 30px rgb(0 0 0 / 0.5); }
@media (max-width: 680px) { .steps4.three { grid-template-columns: 1fr; } }

/* News and press lists */
.news-list { border-top: 1px solid currentColor; }
.news-row { display: grid; grid-template-columns: 130px 1fr 120px; gap: 21px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.news-row:hover .news-title { text-decoration: underline; text-underline-offset: 4px; }
.news-title { display: block; font-size: var(--label-lg); line-height: 1.1; margin-bottom: 6px; }
.news-dek { display: block; opacity: 0.7; max-width: 62ch; }
.news-thumb img { width: 120px; height: 120px; object-fit: cover; }
.news-nine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: 120px; }
.news-nine img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* Long-form text: news stories, press releases, legal */
.lede-body p, .press-body p, .legal p { margin: 0 0 14px 0; max-width: 68ch; line-height: 1.55; }
.lede-body, .press-body, .legal { overflow-wrap: anywhere; } /* long URLs and emails in CloudKit and legal copy */
.press-body h2, .legal h2 { font-variation-settings: "wght" 600, "wdth" 52; font-weight: 600; text-transform: uppercase; font-size: var(--label-lg); margin: 35px 0 10px 0; }
.legal h3 { font-size: var(--body); margin: 28px 0 8px 0; }
.legal ul, .press-body ul { max-width: 68ch; padding-left: 21px; line-height: 1.55; }
.press-body a, .legal a, .lede-body a { text-decoration: underline; text-underline-offset: 3px; }
.press-body strong { font-weight: 600; }

@media (max-width: 680px) {
  .news-row { grid-template-columns: 1fr 88px; gap: 10px 14px; }
  .news-row > .mono:first-child { grid-column: 1 / -1; }
  .news-thumb img { width: 88px; height: 88px; }
  .news-nine { width: 88px; }
}

/* App pages: portrait samples (Party! rolls, IncrediBooth strips) */
.samples { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.samples img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; background: #ddd; }

/* ---------- Camera Club page (value at a glance) ---------- */

/* Hero: every app icon, then the shelf count */
.club-hero { align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.club-hero .display-md { font-size: clamp(34px, 4.7vw, 68px); } /* "MEMBERSHIP." has to fit half the width */
.club-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px 21px; } /* the six apps, 3 x 2 */
.club-apps a { display: grid; gap: 16px; justify-items: center; text-align: center; text-decoration: none; color: inherit; }
.club-apps img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 22.5%; box-shadow: 0 8px 22px rgb(0 0 0 / 0.28); transition: transform 0.2s; }
.club-apps a:hover img { transform: translateY(-3px); }
.club-apps .label { font-size: var(--small); line-height: 1; }

/* The numbers */
.big-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding: 56px var(--gutter); }
.big-numbers > div { display: grid; gap: 6px; align-content: start; border-top: 1px solid rgb(247 244 241 / 0.24); padding-top: 14px; }
.big-numbers .num { font-variation-settings: "wght" 500, "wdth" 130; font-weight: 500; font-size: clamp(54px, 8vw, 100px); line-height: 0.9; color: var(--orange); }
.big-numbers .label { font-size: var(--label-lg); line-height: 1.05; }

/* The receipt */
.receipt-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 56px; align-items: start; }
.receipt-shadow { filter: drop-shadow(0 18px 30px rgb(21 21 30 / 0.18)); }
.receipt {
  --zig: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 28px 28px calc(28px + var(--zig)) 28px;
  /* torn bottom edge */
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--zig)) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--zig)) 100%;
}
.r-head { display: grid; gap: 2px; text-align: center; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px dashed var(--ink); }
.r-head strong { font-size: 15px; letter-spacing: 0.06em; }
.r-row { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; }
.r-row span:first-child { min-width: 0; }
.r-row i { flex: 1; min-width: 14px; border-bottom: 1px dotted rgb(21 21 30 / 0.45); transform: translateY(-4px); }
.r-row span:last-child { white-space: nowrap; font-weight: 600; }
.r-group { margin: 14px 0 4px 0; font-weight: 700; letter-spacing: 0.06em; }
.r-rule { border-top: 1px dashed var(--ink); margin: 14px 0 8px 0; }
.r-total { font-size: 16px; font-weight: 700; padding-top: 6px; }
.r-total span:last-child { background: var(--orange); color: var(--ink); padding: 0 6px; }
.r-foot { display: grid; justify-items: center; gap: 6px; margin-top: 21px; }
.barcode {
  width: 70%; height: 44px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px, var(--ink) 12px 13px, transparent 13px 17px);
}

/* The whole shelf */
.gear-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
  max-height: 560px;
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 70%, #0000);
          mask: linear-gradient(#000 70%, #0000);
}
.gear-wall a { display: block; aspect-ratio: 1; border-radius: 6px; transition: transform var(--lift-ease); }
.gear-wall a:hover { transform: scale(1.14); }
.gear-wall img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.gear-wall-foot { display: flex; justify-content: center; margin-top: 14px; }

/* Signature cameras */
.camera-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.camera-row a { display: grid; justify-items: start; gap: 8px; padding: 14px; border: 1px solid var(--rule); border-radius: 6px; text-decoration: none; color: inherit; }
.camera-row a:hover { border-color: currentColor; }
.camera-row img { width: 96px; height: 96px; object-fit: contain; }
.camera-row .label { font-size: var(--label); line-height: 1.05; }

/* Free vs Camera Club */
.compare { border-top: 1px solid currentColor; }
.c-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.c-row .label { font-size: var(--label); line-height: 1.1; }
.c-row > span:nth-child(2) { opacity: 0.62; }
.c-row .c-club { font-weight: 600; }
.c-headrow { padding: 10px 0; }
.c-headrow .c-club { justify-self: start; background: var(--orange); color: var(--ink); padding: 2px 7px; border-radius: 2px; }

@media (max-width: 980px) {
  .club-hero { grid-template-columns: minmax(0, 1fr); }
  .club-hero .display-md { font-size: clamp(34px, 9.6vw, 68px); }
  .big-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receipt-wrap { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .receipt-shadow { max-width: 470px; }
}
@media (max-width: 640px) {
  .club-apps { gap: 14px 10px; }
  .club-apps .label { font-size: var(--mono-sm); }
  .receipt { padding: 21px 18px calc(21px + var(--zig)) 18px; font-size: 12px; }
  .gear-wall { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); max-height: 440px; }
  .c-row { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.9fr); gap: 10px; font-size: var(--small); }
  .c-row .label { font-size: var(--small); }
}


/* Stacked statement: a display line on its own row, the words under it */
.statement { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } /* minmax: a long word can't widen the column */
.statement p { margin: 0; }
/* /membership: the orange heart beside "Paid for by photographers"; on a phone it sits on the line above */
.statement-head { display: flex; align-items: center; gap: 35px; }
.statement-head .heart { flex: none; width: 130px; height: auto; color: var(--orange); }
@media (max-width: 680px) { .statement-head { flex-direction: column; align-items: start; gap: 21px; } .statement-head .heart { width: 70px; } }

/* Readable at any width: big type is never wider than its box (so the fit script in v3.js can
   shrink it), and the one-line mono rows wrap on small phones (320 px is iPhone Display Zoom) */
.display, .headline { max-width: 100%; min-width: 0; }
@media (max-width: 420px) {
  .stamp { flex-wrap: wrap; row-gap: 4px; }
  .stamp span { white-space: normal; }
}

/* Press release footer (About Hipstamatic, press contact), like Apple's */
.press-footer { margin-top: 42px; padding-top: 7px; border-top: 1px solid var(--rule); }

/* Meta: small supporting text in SF, sentence case. Mono stays an accent (Ryan, 8 Oct 2026:
   "we use it very seldom in apps themselves"); lists, labels and captions use this instead. */
.meta { font-family: var(--sans); font-size: var(--small); line-height: 1.4; letter-spacing: 0; text-transform: none; }
.meta a { color: inherit; }
.settings a.meta { text-decoration: none; }
.settings a.meta:hover { text-decoration: underline; text-underline-offset: 3px; }

/* About: two founders as an editorial spread */
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; padding-bottom: 84px; }
.founder { display: grid; gap: 21px; align-content: start; }
.founder-portrait { display: block; }
.founder-portrait img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: #ddd; }
.founder-name .meta { margin: 8px 0 0 0; opacity: 0.75; }
.founder-line { margin: 14px 0 0 0; }
.founder-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.founder-photos figcaption { display: none; } /* their own photographs: the name is right above */
.pull { margin: 0; max-width: 980px; }
.pull p { font-variation-settings: "wght" 500, "wdth" 110; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.12; margin: 0 0 21px 0; }
.pull footer { opacity: 0.75; }
.about-us { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 56px; align-items: start; border-top: 1px solid currentColor; padding-top: 28px; }
.about-us p { margin: 0; font-size: var(--lede); line-height: 1.45; max-width: 52ch; }
@media (max-width: 980px) {
  .founders { grid-template-columns: minmax(0, 1fr); gap: 70px; }
  .about-us { grid-template-columns: minmax(0, 1fr); gap: 21px; }
}

/* About hero: the two of us, and the booth strip */
.about-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 42px 0 84px 0; }
.founder-names { display: grid; gap: 21px; margin-top: 42px; border-top: 1px solid currentColor; padding-top: 21px; }
.founder-names .meta { margin: 6px 0 0 0; opacity: 0.75; }
.booth { margin: 0; justify-self: center; width: min(100%, 460px); }
.booth img { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 24px 60px rgb(21 21 30 / 0.18); }
.booth-portraits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.booth-portraits img { aspect-ratio: 1; object-fit: cover; }
@media (max-width: 980px) { .about-hero { grid-template-columns: minmax(0, 1fr); gap: 35px; } }

/* Community */
.squares.six { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.challenge-open { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.challenge-hero img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 4px; display: block; }
.challenge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 21px; }
.challenge-grid a { display: grid; gap: 8px; align-content: start; text-decoration: none; color: inherit; } /* titles line up whether or not a card has a picks row */
.challenge-thumb { display: block; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: #ddd; position: relative; transition: transform var(--lift-ease), box-shadow var(--lift-ease); }
.challenge-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.challenge-grid a:hover .challenge-thumb { transform: var(--lift); box-shadow: var(--lift-shadow); z-index: 1; }
.day-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 28px 21px; }
.day { display: grid; gap: 8px; text-decoration: none; color: inherit; }
.day .label { font-size: var(--label); }
.mini-nine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.mini-nine img, .mini-nine i { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: rgb(21 21 30 / 0.06); }
.day:hover .mini-nine { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 980px) {
  .challenge-open { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .squares.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Club: the suite of apps (six across) and the signature cameras as heroes */
.lineup.lineup-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.camera-heroes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 21px 14px; }
.camera-heroes a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; text-decoration: none; color: inherit; }
/* The case sets its own square; the camera (684 x 358) sits in the middle at its width, so the box never waits on the image */
.camera-heroes .case { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border-radius: 6px; background: rgb(255 255 255 / 0.05); padding: 10%; transition: background 0.15s; }
.camera-heroes a:hover .case { background: rgb(255 255 255 / 0.12); }
.camera-heroes img { width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.4)); }
.camera-heroes .name { font-size: var(--label); line-height: 1.1; }
.camera-heroes .tag { font-size: var(--mono-xs); padding: 1px 5px; vertical-align: 2px; }
@media (max-width: 980px) {
  .lineup.lineup-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .camera-heroes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .camera-heroes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .camera-heroes .name { font-size: var(--small); } }

/* Mono is an accent, not the voice (Ryan, 8 Oct 2026: "we use it very seldom in apps themselves").
   .mono now reads as SF supporting text by default. Real monospace stays only where it reads as
   data: breadcrumbs and the date line, kickers, eyebrows, step numbers, tags, news dates, the receipt. */
.mono { font-family: var(--sans); font-size: var(--small); line-height: 1.4; text-transform: none; letter-spacing: 0; }
.crumbs, .stamp, .eyebrow, .tag, .steps .mono, .steps4 .mono, .news-row > .mono:first-child, .receipt {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.crumbs, .stamp, .eyebrow, .tag, .steps .mono, .steps4 .mono, .news-row > .mono:first-child { font-size: var(--mono-xs); line-height: 1.5; }
.index .cols { font-size: var(--small); }
@media (min-width: 981px) { .index .cols { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* six groups since Community */
.index .group { font-family: var(--mono); font-size: var(--mono-xs); text-transform: uppercase; letter-spacing: 0.06em; }


/* Home: a fresh news story as a Cash-style pill in the hero */
.pill { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 0 0 28px 0; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgb(21 21 30 / 0.08); color: inherit; text-decoration: none; font-size: var(--small); line-height: 1.25; }
.pill > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-tag { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--ink); color: var(--yellow); font-size: var(--small); font-weight: 600; }
.pill:hover { background: rgb(21 21 30 / 0.14); }

/* A Cash section: headline · one visual on a solid panel (full height) · one line and one button */
.cash-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 56px; align-items: center; min-height: min(86vh, 860px); }
.cash-row > .copy { justify-self: end; max-width: 340px; display: grid; gap: 21px; }
@media (max-width: 980px) {
  .cash-row { grid-template-columns: minmax(0, 1fr); gap: 35px; min-height: 0; padding-top: 70px; padding-bottom: 70px; }
  .cash-row > .copy { justify-self: start; }
}
@media (max-width: 640px) { .pill { border-radius: 18px; } .pill > span:nth-child(2) { white-space: normal; } }

/* Camera Club deck: a hand of instant prints. Each print sits on the fan by --k (its slot),
   drops by --drop toward the edges and keeps its own small tilt --r. v3.js deals, sways and flips it. */
.deck { position: relative; display: block; width: clamp(300px, 30vw, 440px); height: 440px; perspective: 1100px; transition: transform 0.09s ease-out; }
.deck .hand { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform 0.35s ease-out; }
.print {
  --spread: var(--fan, 8deg);
  position: absolute; left: 50%; top: 50%; width: 150px; box-sizing: border-box;
  padding: 9px 9px 32px 9px; background: #fbfaf6; border-radius: 3px;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.18), 0 8px 14px rgb(0 0 0 / 0.16), 0 22px 40px rgb(60 20 0 / 0.22);
  transform-origin: 50% 155%;
  transform: translate(-50%, -50%) rotate(calc(var(--k) * var(--spread))) translateY(var(--drop)) rotate(var(--r));
  transition: transform 0.95s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s;
}
.print img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 1px; }
.print .caption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: var(--sans); font-variation-settings: "wght" 600, "wdth" 52; font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: 0.02em; color: rgb(21 21 30 / 0.78); }
.deck.spread .print { --spread: var(--fan-open, 11deg); }
/* Before the deal: one neat stack, each print at its own tilt */
.deck.js:not(.dealt) .print { transform: translate(-50%, -44%) rotate(var(--r)); }
.deck.dealing .print { transition-delay: calc(var(--n) * 75ms); }
.deck.no-anim .print { transition: none; }
/* Held in a hand: a slow sway */
.deck.dealt .hand { animation: hand-sway 7s ease-in-out infinite alternate; }
@keyframes hand-sway { from { rotate: -1.4deg; translate: 0 2px; } to { rotate: 1.4deg; translate: 0 -6px; } }
/* A flip: the print lifts as it sweeps over the top to the back */
.print.flip { animation: print-lift 0.95s cubic-bezier(0.3, 0, 0.2, 1); box-shadow: 0 1px 1px rgb(0 0 0 / 0.18), 0 18px 30px rgb(0 0 0 / 0.2), 0 44px 70px rgb(60 20 0 / 0.28); }
@keyframes print-lift { 0% { translate: 0 0; } 45% { translate: 0 -78px; } 100% { translate: 0 0; } }
/* The mechanism clicks as it lands */
.deck.click { transform: translateY(3px); }
@media (max-width: 980px) {
  .deck { width: 100%; max-width: 420px; height: 380px; justify-self: center; }
  .print { width: 124px; padding: 8px 8px 28px 8px; }
  .print .caption { font-size: 12px; bottom: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .print, .deck .hand, .deck { transition: none; }
  .deck.dealt .hand, .print.flip { animation: none; }
}

/* A page with its own colour (challenges): the header matches it until it compacts */
.site-head[style*="--head-bg"]:not(.scrolled) { background: var(--head-bg); color: var(--head-ink); }

/* Challenge page */
.challenge-flood { background: var(--c-bg); color: var(--c-ink); }
.challenge-flood .crumbs, .challenge-flood .proof { border-color: currentColor; }
.challenge-print { margin: 0; width: clamp(220px, 24vw, 340px); justify-self: center; }
.challenge-print img { display: block; box-sizing: content-box; width: calc(100% - 20px); height: auto; aspect-ratio: 1; object-fit: cover; border: 10px solid #fbfaf6; border-bottom-width: 34px; border-radius: 3px; box-shadow: 0 2px 2px rgb(0 0 0 / 0.15), 0 24px 50px rgb(0 0 0 / 0.28); rotate: -1.5deg; }
.challenge-state { margin: 21px 0 0 0; background: rgb(0 0 0 / 0.1); }
.challenge-flood .pill-tag { background: var(--c-ink); color: var(--c-bg); }
.winners figure .frame { box-shadow: 0 0 0 3px var(--orange); }
.winners figure .frame:hover { box-shadow: 0 0 0 3px var(--orange), var(--lift-shadow); }
figcaption .note { margin-left: 8px; font-family: var(--mono); font-size: var(--mono-xs); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; }
.winners figcaption .note { color: var(--ink); background: var(--orange); opacity: 1; padding: 1px 6px; border-radius: 2px; }
.gear-used { margin: 4px 0 0 0; font-size: var(--small); line-height: 1.35; opacity: 0.75; }
.gear-used a { color: inherit; }
.leaders .rank { position: relative; }
.leaders .rank::before { content: attr(data-rank); position: absolute; z-index: 2; top: 8px; left: 8px; min-width: 26px; height: 26px; padding: 0 6px; display: grid; place-items: center; border-radius: 13px; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: var(--mono-sm); font-weight: 600; }
.leaders .rank:first-child::before { background: var(--orange); }
.brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 56px; align-items: start; border-top: 1px solid currentColor; padding-top: 28px; }
.brief-text { max-width: 62ch; }
.brief-text h2, .brief-text h3, .brief-text strong:only-child { font-size: var(--lede); }
.gear-tally { display: grid; gap: 6px; }
.gear-tally a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-decoration: none; color: inherit; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.gear-tally img { width: 40px; height: 40px; object-fit: contain; }
.gear-tally .label { font-size: var(--label); }
.day-bars { display: flex; align-items: end; gap: 3px; height: 72px; max-width: 360px; }
.day-bars span { flex: 1; min-width: 3px; background: currentColor; opacity: 0.8; border-radius: 1px 1px 0 0; }
@media (max-width: 980px) {
  .brief { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .challenge-print { width: min(78vw, 320px); }
}

/* Top Nine day */
.day-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.featuring { margin: 21px 0 0 0; padding-bottom: 42px; max-width: 90ch; }
.featuring a { color: inherit; }
.big-nine { gap: 28px 21px; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 28px; border-top: 1px solid currentColor; }
.people a { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; }
.people img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #ddd; }
.people a > span:nth-child(2) { display: grid; min-width: 0; }
.people .label { font-size: var(--label); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gear-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 21px 14px; }
.gear-row a { display: grid; gap: 6px; justify-items: start; text-decoration: none; color: inherit; }
.gear-row img { width: 96px; height: 96px; object-fit: contain; }
.gear-row .label { font-size: var(--label); line-height: 1.1; }

/* Photograph */
.photo-view { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: start; padding: 42px 0 84px 0; }
.photo-print { margin: 0; }
.photo-print img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 2px 2px rgb(0 0 0 / 0.1), 0 24px 60px rgb(21 21 30 / 0.18); background: #ddd; } /* the photograph itself, no white mat (Lucas, 13 Oct 2026) */
.photo-info { display: grid; gap: 21px; align-content: start; position: sticky; top: 90px; }
.person-chip { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.person-chip img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #ddd; }
.person-chip > span { display: grid; }
.person-chip .label { font-size: var(--label); line-height: 1.1; }

/* Profile */
.person-hero .wrap { padding-bottom: 0; }
.person-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 35px; align-items: center; padding: 42px 0 56px 0; }
.person-avatar { width: clamp(96px, 12vw, 160px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: rgb(21 21 30 / 0.1); }
.person-meta { margin: 10px 0 0 0; }
.person-meta a { color: inherit; }
.person-meta .ig-link { display: inline-block; vertical-align: -0.22em; line-height: 0; } /* Instagram's glyph, one colour, in place of the word (Lucas, 13 Oct 2026) */
.ig-glyph { width: 1.2em; height: 1.2em; }
.ig-link:hover .ig-glyph { opacity: 0.7; }
.person-stamp { width: clamp(80px, 9vw, 120px); height: auto; rotate: 8deg; filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.15)); }
.person-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
/* Home: Apple's awards in laurels, and the press */
.proof-awards { align-items: center; }
.proof .award { display: flex; align-items: center; gap: 6px; } /* beats .proof div { display: grid } */
.award img { width: 20px; height: auto; flex: none; }
.award .label { display: grid; justify-items: center; text-align: center; font-size: var(--label); line-height: 1.02; }
.award .award-year { margin-top: 3px; font-size: 14px; letter-spacing: 0.14em; }
/* The press, scrolling like a ticker: two identical sets, slid left by one set's width, forever.
   Pauses on hover or focus; holds still, and scrolls by hand, for anyone who prefers less motion. */
.press-ticker { padding: 24px 0 35px 0; border-top: 1px solid currentColor; }
.ticker-window { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker 70s linear infinite; }
.press-ticker:hover .ticker-track, .press-ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-set { display: flex; gap: 56px; margin: 0; padding: 0 56px 0 0; list-style: none; }
.ticker-set li { display: grid; gap: 10px; align-content: start; width: 250px; }
.ticker-logo { display: flex; align-items: flex-end; height: 28px; }
.ticker-logo img { width: auto; max-width: none; }
.ticker-set .mono { font-size: var(--small); line-height: 1.35; }
.partner-ticker { margin-top: 70px; padding-bottom: 14px; }
.partner-ticker .kicker { margin: 0 0 24px 0; }
.partner-ticker .ticker-track { animation-duration: 45s; }
.partner-ticker .ticker-set { gap: 72px; padding-right: 72px; align-items: center; }
.partner-ticker .ticker-set li { width: auto; display: flex; align-items: center; height: 48px; }
.partner-ticker img { width: auto; max-width: none; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-window { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ticker-track { animation: none; }
  .ticker-set[aria-hidden] { display: none; }
}
/* Home: in good company */
.fans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 56px; margin: 42px 0 70px 0; align-items: start; }
.fans .pull p { font-size: clamp(22px, 2.6vw, 30px); }
.fans .pull .fan-more { font-size: var(--body); line-height: 1.4; opacity: 0.75; font-variation-settings: normal; }
.fans footer a { color: inherit; }
/* Each fan's face to the right of their words, in a circle like a profile picture (from /img/v3/fans; Melissa's
   source is only 150 px, so the size stays where it holds up) */
.fans .pull { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: start; }
.fans .pull > :not(.fan-face) { grid-column: 1; }
/* The face links to the same Instagram as the footer, so it's out of the tab order and hidden from screen readers */
.fan-face { grid-column: 2; grid-row: 1 / span 3; display: block; width: clamp(88px, 9vw, 128px); transition: transform 0.2s; }
.fan-face img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: rgb(247 244 241 / 0.1); }
.company { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 35px; }
.company a { display: grid; gap: 6px; align-content: start; text-decoration: none; color: inherit; }
.company img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; margin-bottom: 8px; transition: transform 0.2s; }
.company a:hover img { transform: translateY(-4px); }
.company .label { font-size: var(--label-lg); line-height: 1.1; }
.company-role { opacity: 0.6; }
.company-line { font-size: var(--small); line-height: 1.4; }
.company-gear { margin-top: 4px; text-decoration: underline; text-underline-offset: 3px; text-transform: none; }
.company-also { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px 28px; margin-top: 56px; padding-top: 21px; border-top: 1px solid currentColor; }
.company-also > div { display: grid; gap: 6px; align-content: start; }
.company-also .label { font-size: var(--label-lg); }
@media (max-width: 980px) { .company { grid-template-columns: repeat(3, minmax(0, 1fr)); } .company-also { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fans { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .company { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px 21px; } .company-also { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .company img { transition: none; } }

/* Editorial: photo stories (/editorial, /editorial/<slug>) */
.ed-hero { margin: 0; background: var(--ink); }
.ed-hero img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: cover; }
.ed-head { max-width: 760px; padding: 42px 0 35px 0; }
.ed-head .lede { margin: 21px 0 0 0; max-width: 40ch; }
.ed-byline { display: flex; align-items: center; gap: 12px; margin: 28px 0 0 0; }
.ed-byline img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: rgb(21 21 30 / 0.1); }
.ed-byline a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ed-body { max-width: 760px; padding-bottom: 56px; }
.ed-text p, .ed-text ul { font-size: var(--lede); line-height: 1.6; max-width: 62ch; }
.ed-text p { margin: 0 0 21px 0; }
.ed-quote { margin: 42px 0; }
.ed-quote p { font-size: clamp(24px, 3vw, 36px); max-width: 24ch; }
.ed-figure { margin: 35px 0; }
.ed-figure img { display: block; width: 100%; height: auto; background: rgb(21 21 30 / 0.06); }
.ed-figure figcaption, .ed-gallery figcaption { margin-top: 10px; opacity: 0.75; }
.ed-bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.ed-bleed figcaption { padding: 0 var(--gutter); max-width: 760px; margin-left: auto; margin-right: auto; }
.ed-gallery { margin: 35px 0; }
.ed-gallery > div { display: grid; gap: 7px; }
.ed-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; background: rgb(21 21 30 / 0.06); }
.ed-gallery[data-layout="fourUp"] > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-gallery[data-layout="fourUp"] img { aspect-ratio: 1; }
.ed-gallery[data-layout="diptychHorizontal"] > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-gallery[data-layout="diptychVertical"] > div { grid-template-columns: minmax(0, 1fr); }
.ed-gallery[data-layout="scrolling"] > div { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.ed-gallery[data-layout="scrolling"] img { width: min(80%, 560px); flex: none; scroll-snap-align: start; }
.ed-gear { display: inline-flex; align-items: center; gap: 16px; margin: 0 0 84px 0; padding: 14px 21px 14px 14px; border: 1px solid var(--rule); text-decoration: none; color: inherit; }
.ed-gear img { width: 72px; height: 72px; object-fit: contain; }
.ed-gear > span { display: grid; gap: 4px; }
.ed-gear .label { font-size: var(--label-lg); }
.ed-lead { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 42px; align-items: center; padding: 14px 0 70px 0; text-decoration: none; color: inherit; }
.ed-lead-copy { display: grid; gap: 14px; align-content: center; }
.ed-lead-copy .lede { max-width: 32ch; }
.ed-card-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgb(21 21 30 / 0.08); }
.ed-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.ed-lead:hover .ed-card-img img, .ed-card:hover .ed-card-img img { transform: scale(1.02); }
.ed-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 49px 28px; }
.ed-card { display: grid; gap: 8px; align-content: start; text-decoration: none; color: inherit; }
.ed-card .ed-card-img { margin-bottom: 8px; }
.ed-card .label { font-size: var(--label-lg); line-height: 1.1; }
.ed-card-gear { opacity: 0.6; }
@media (max-width: 980px) { .ed-lead { grid-template-columns: minmax(0, 1fr); gap: 21px; } .ed-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ed-cards { grid-template-columns: minmax(0, 1fr); } .ed-text p { font-size: var(--body); } }
@media (prefers-reduced-motion: reduce) { .ed-card-img img { transition: none; } }

/* Paks and cases (from the old gear.hipstamatic.com) */
[hidden] { display: none !important; }
.pak-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px 28px; }
.pak-card { display: grid; gap: 6px; align-content: start; text-decoration: none; color: inherit; }
.pak-banner { display: block; aspect-ratio: 2 / 1; overflow: hidden; background: rgb(21 21 30 / 0.05); margin-bottom: 8px; }
.pak-banner img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 0.25s; }
.pak-card:hover .pak-banner img { transform: scale(1.03); }
.pak-card .label { font-size: var(--label-lg); line-height: 1.1; }
.pak-mini { display: flex; height: 100%; align-items: center; justify-content: center; gap: 10px; padding: 14px; }
.pak-mini img { width: 30%; height: auto; max-height: 100%; object-fit: contain; }
.pak-stage img { width: 100%; height: auto; object-fit: contain; }
.pak-stage .pak-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0; }
.pak-stage .pak-mini img { width: 100%; }
.gear-package { display: flex; align-items: center; gap: 14px; margin: 21px 0 0 0; }
.gear-package img { width: 96px; height: auto; }
.squares.gear-samples figcaption { margin-top: 8px; opacity: 0.7; }
.squares.gear-samples.by-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* nine samples as 3 x 3, not 4 + 4 + 1 */
@media (max-width: 680px) { .squares.gear-samples.by-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .pak-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pak-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .pak-banner img { transition: none; } }

.challenge-note { margin: 0; padding: 21px 0; border-top: 1px solid currentColor; max-width: 60ch; } /* how a challenge is judged, in place of the numbers */
@media (max-width: 980px) {
  .photo-view { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .photo-info { position: static; }
  .person-head { grid-template-columns: auto minmax(0, 1fr); }
  .person-stamp { display: none; }
  .person-facts { grid-template-columns: minmax(0, 1fr); gap: 42px; }
}
@media (max-width: 640px) { .person-head { grid-template-columns: minmax(0, 1fr); gap: 21px; } .people { grid-template-columns: minmax(0, 1fr); } }

.gear-used, .gear-used a { overflow-wrap: anywhere; }
.club-head > * { min-width: 0; max-width: 100%; } /* long dates and titles can shrink to fit */

/* Challenge archive */
.open-now { display: block; background: var(--c-bg); color: var(--c-ink); text-decoration: none; }
.open-now .wrap { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 14px 28px; align-items: center; padding-top: 28px; padding-bottom: 28px; }
.open-now .pill { margin: 0; background: rgb(0 0 0 / 0.1); }
.open-now .pill-tag { background: var(--c-ink); color: var(--c-bg); }
.open-now .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.open-now .arrow { font-size: 28px; }
.open-now:hover .headline { text-decoration: underline; text-underline-offset: 6px; }
.challenge-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 42px; }
.challenge-tabs button { font: inherit; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: var(--small); padding: 8px 14px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.challenge-tabs button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.year-group + .year-group { margin-top: 70px; }
.picked { display: flex; align-items: center; gap: 10px; }
.picked .avatars { display: flex; }
.picked .avatars img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 2px solid var(--paper); background: #ddd; margin-left: -6px; }
.picked .avatars img:first-child { margin-left: 0; }
@media (max-width: 980px) {
  .open-now .wrap { grid-template-columns: minmax(0, 1fr) auto; }
  .open-now .meta { grid-column: 1 / -1; white-space: normal; }
}

/* Profile: the seal on the avatar and the passport stamps, as the app draws them (inc/v3/stamps.php) */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.flood-paper { --seal-gap: var(--paper); }
.flood-yellow { --seal-gap: var(--yellow); }
.flood-gold { --seal-gap: var(--gold); }
.flood-ink { --seal-gap: var(--ink); }
.flood-accent { background: var(--accent); color: var(--ink); --seal-gap: var(--accent); } /* a member's profile colour */
.gear-shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 21px; }
.gear-shelf a { display: grid; gap: 10px; align-content: start; text-decoration: none; color: inherit; }
.gear-shelf img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; transition: transform 0.2s; }
.gear-shelf a:hover img { transform: translateY(-4px); }
.gear-shelf .label { font-size: var(--label); line-height: 1.15; overflow-wrap: anywhere; }
@media (max-width: 980px) { .gear-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gear-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 21px 14px; } .gear-shelf .label { font-size: var(--small); } }
@media (prefers-reduced-motion: reduce) { .gear-shelf img { transition: none; } }
.avatar { position: relative; display: inline-block; flex: none; justify-self: start; width: max-content; line-height: 0; }
.person-chip > .avatar { display: inline-block; }
.avatar-blank { display: grid; place-items: center; line-height: 1; font-weight: 700; color: rgb(21 21 30 / 0.5); background: rgb(21 21 30 / 0.1); border-radius: 50%; }
.person-avatar.avatar-blank { font-size: clamp(40px, 5vw, 64px); }
.chip-avatar.avatar-blank { width: 44px; height: 44px; font-size: 18px; }
.flood-ink .avatar-blank { color: rgb(247 244 241 / 0.6); background: rgb(247 244 241 / 0.12); }
.seal { position: absolute; right: -7%; bottom: -7%; width: 37%; height: auto; overflow: visible; }
.seal-gap { fill: var(--seal-gap); }
.seal-club .seal-disc { fill: var(--seal, var(--gold)); } /* their profile colour */
.seal-club .seal-mark { fill: var(--ink); }
.flood-accent .seal-club .seal-disc { fill: var(--ink); } /* their colour on their colour would vanish */
.flood-accent .seal-club .seal-mark { fill: var(--accent); }
.seal-pro .seal-disc { fill: var(--yellow); }
.seal-pro .seal-mark { fill: var(--ink); }
.flood-yellow .seal-pro .seal-disc { fill: var(--ink); }
.flood-yellow .seal-pro .seal-mark { fill: var(--yellow); }
.person-stamps { --pt: clamp(1.05px, 0.1vw, 1.4px); display: flex; align-items: center; }
.person-stamps .person-stamp { width: calc(100 * var(--pt)); rotate: 8deg; margin-right: calc(-6 * var(--pt)); }
.visa-stack { display: flex; flex-direction: column; align-items: center; margin: 0 calc(-14 * var(--pt)); }
.visa-stack .visa-streak { margin-top: calc(-6 * var(--pt)); }
.visa { width: calc(var(--w) * var(--pt)); height: auto; flex: none; overflow: visible; opacity: var(--o); rotate: var(--r); translate: var(--x) var(--y); mix-blend-mode: multiply; }
.visa text { fill: currentColor; }
.visa .st-demi { font-family: "Avenir Next Condensed", "Avenir Next", var(--sans); font-stretch: condensed; font-weight: 600; }
.visa .st-medium { font-family: "Avenir Next Condensed", "Avenir Next", var(--sans); font-stretch: condensed; font-weight: 500; }
.visa .st-bold { font-family: "Avenir Next Condensed", "Avenir Next", var(--sans); font-stretch: condensed; font-weight: 700; }
.visa .st-sf { font-family: system-ui, -apple-system, "Avenir Next Condensed", sans-serif; font-stretch: condensed; font-weight: 500; }
.visa .st-sf-bold { font-weight: 700; }
.visa .st-fill { fill: currentColor; }
.visa .st-frame, .visa .st-ring { fill: none; stroke: currentColor; stroke-width: 3; }
.visa .st-dot { fill: var(--yellow); }
.visa-classic { color: #333333; }
.visa-streak { color: #D35959; }
.visa-member { color: var(--ink); } /* ink, not the app's gold: it has to read on every profile colour (Lucas, 13 Oct 2026) */
.flood-yellow .visa-classic .st-dot { fill: var(--gold); } /* a yellow dot can't show on yellow; gold is the app's other dot */
.flood-ink .visa { mix-blend-mode: screen; }
.flood-accent .visa { mix-blend-mode: normal; } /* multiply muddies the inks on a coloured ground */
.flood-ink .visa-classic, .flood-ink .visa-member { color: #FFFFFF; }
.flood-ink .visa-classic .st-dot { fill: var(--gold); }
@media (max-width: 980px) { .person-stamps { display: none; } }

/* The old blog (/news/archive) */
.archive-years { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 42px; }
.archive-years a { font-family: var(--sans); font-size: var(--small); text-transform: none; letter-spacing: 0; padding: 8px 14px; border-radius: 999px; border: 1px solid currentColor; text-decoration: none; }
.archive-years a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.year-group[id] { scroll-margin-top: 96px; }
.blog-post { max-width: 760px; }
.blog-post .ed-head { padding-bottom: 21px; }
.blog-post .headline { margin: 14px 0 0 0; }
.blog-photo img { max-height: 86vh; width: auto; max-width: 100%; }
.blog-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; margin: 14px 0 35px 0; }
.blog-set figure { margin: 0; }
.blog-set img { display: block; width: 100%; height: auto; background: rgb(21 21 30 / 0.06); }
.blog-set figcaption { margin-top: 6px; opacity: 0.75; }
.blog-body img { display: block; max-width: 100%; height: auto; margin: 21px 0; }
.blog-body h2, .blog-body h3, .blog-body h4 { font-family: var(--sans); font-size: var(--lede); line-height: 1.25; text-transform: none; letter-spacing: 0; margin: 35px 0 14px 0; }
.blog-body ul, .blog-body ol { padding-left: 1.2em; margin: 0 0 21px 0; }
.blog-body li { margin-bottom: 7px; line-height: 1.55; }
.blog-body blockquote { margin: 0 0 21px 0; padding-left: 18px; border-left: 2px solid var(--rule); }
.blog-body figure { margin: 21px 0; }
.news-archive .arrow { justify-self: end; font-size: 28px; line-height: 1; }
.blog-note { margin: 35px 0 0 0; padding-top: 14px; border-top: 1px solid var(--rule); opacity: 0.7; max-width: 62ch; }
.blog-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 56px 0 28px 0; padding-top: 21px; border-top: 1px solid currentColor; }
.blog-pager a { display: grid; gap: 6px; text-decoration: none; color: inherit; }
.blog-pager a.newer { text-align: right; grid-column: 2; }
.blog-pager .label { font-size: var(--label-lg); line-height: 1.15; }
.blog-pager a:hover .label { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 680px) {
  .blog-set { grid-template-columns: minmax(0, 1fr); }
  .blog-pager { grid-template-columns: minmax(0, 1fr); }
  .blog-pager a.newer { grid-column: 1; text-align: left; }
}

/* The magazines (/magazine): Snap and Scene */
.mag-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 28px; }
.mag-card { display: grid; gap: 6px; align-content: start; text-decoration: none; color: inherit; }
.mag-cover { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: rgb(21 21 30 / 0.06); margin-bottom: 8px; box-shadow: 0 10px 24px rgb(0 0 0 / 0.14); }
.mag-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
.mag-card:hover .mag-cover img { transform: scale(1.03); }
.mag-card .label { font-size: var(--label-lg); line-height: 1.1; }
.mag-hero { align-items: start; }
.mag-stage img { display: block; width: 100%; height: auto; box-shadow: 0 16px 36px rgb(0 0 0 / 0.18); background: rgb(21 21 30 / 0.06); }
.mag-contents { columns: 2; column-gap: 56px; }
.mag-section { break-inside: avoid; margin-bottom: 35px; }
.mag-section h3 { font-size: var(--small); margin: 0 0 10px 0; padding-bottom: 8px; border-bottom: 1px solid currentColor; }
.mag-section ul { list-style: none; margin: 0; padding: 0; }
.mag-section li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.mag-section li a { display: grid; gap: 3px; text-decoration: none; color: inherit; }
.mag-section li a:hover .label { text-decoration: underline; text-underline-offset: 4px; }
.mag-section .label { font-size: var(--label-lg); line-height: 1.15; }
.mag-section .meta { opacity: 0.7; }
.mag-section li > .mono { flex: none; white-space: nowrap; }
.mag-moments { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; }
.mag-moments a { display: grid; gap: 6px; text-decoration: none; color: inherit; }
.mag-moments img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: rgb(21 21 30 / 0.06); }
.mag-reader { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); padding-bottom: 14px; outline: none; }
.mag-reader figure { flex: none; margin: 0; scroll-snap-align: start; width: min(46vh, 60vw); }
.mag-reader img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; background: #23232c; }
.mag-reader figcaption { padding-top: 6px; opacity: 0.6; font-size: var(--small); }
.mag-reader-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.mag-story { max-width: 820px; }
.mag-spread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 42px 0; }
.mag-spread img { display: block; width: 100%; height: auto; background: rgb(21 21 30 / 0.06); box-shadow: 0 10px 24px rgb(0 0 0 / 0.12); }
.mag-body { max-width: 680px; }
.mag-body .mag-h { font-family: var(--sans); font-size: var(--lede); line-height: 1.2; text-transform: none; letter-spacing: 0; margin: 35px 0 14px 0; }
.mag-body .mag-lede { font-size: var(--lede); line-height: 1.45; }
.mag-body .mag-q { font-weight: 600; margin-top: 28px; }
.mag-body .mag-small { font-size: var(--small); opacity: 0.7; }
.mag-gear, .mag-pages { margin-top: 49px; }
.mag-gear h2, .mag-pages h2 { font-size: var(--small); margin: 0 0 14px 0; }
.mag-pages > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.mag-pages a { display: grid; gap: 4px; text-decoration: none; color: inherit; font-size: var(--small); }
.mag-pages img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: rgb(21 21 30 / 0.06); }
@media (max-width: 980px) { .mag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .mag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .mag-contents { columns: 1; }
  .mag-reader figure { width: 78vw; }
  .mag-spread { grid-template-columns: minmax(0, 1fr); }
  .mag-spread a + a { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mag-cover img { transition: none; } }
/* Camera Club: proof. Apple's awards and the rating under the hero button; Top Nine photographs shot
   with Club gear, then the press ticker, after the receipt. */
.club-proof { margin-top: 35px; }
.club-press { margin-top: 56px; }
@media (max-width: 520px) { .club-proof { gap: 14px 16px; } } /* awards and rating on one line on phones */
/* Search pages: how Hipstamatic compares, in each app's own words. One column per app under its
   icon, ours in yellow; even padding in every cell, hairline rows, an ink rule under the header. */
.vs-wrap { overflow-x: auto; }
.vs { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.vs .vs-label-col { width: 17%; }
.vs th, .vs td { text-align: left; vertical-align: top; padding: 18px; border-bottom: 1px solid var(--rule); line-height: 1.35; }
.vs thead th { vertical-align: bottom; padding-top: 21px; border-bottom: 1px solid currentColor; font-weight: normal; }
.vs thead th:first-child, .vs tbody th { padding-left: 0; }
.vs tbody th { font-size: var(--label); line-height: 1.15; }
.vs .vs-app { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.vs .vs-app img { width: 48px; height: 48px; border-radius: 22.5%; box-shadow: 0 1px 2px rgb(0 0 0 / 0.14), 0 4px 12px rgb(0 0 0 / 0.1); }
.vs .vs-app .label { font-size: var(--label); line-height: 1; }
.vs .vs-us { background: var(--yellow); }
.vs .vs-us a { font-weight: 600; text-underline-offset: 3px; }
.vs tbody tr:last-child th, .vs tbody tr:last-child td { border-bottom: 0; }
/* On a phone the table scrolls sideways and the row labels stay put */
@media (max-width: 680px) {
  .vs { min-width: 820px; }
  .vs .vs-label-col { width: 120px; }
  .vs th, .vs td { padding: 16px 14px; }
  .vs tbody th, .vs thead th:first-child { position: sticky; left: 0; z-index: 1; padding-right: 12px; background: var(--paper); box-shadow: 1px 0 0 var(--rule); border-bottom-color: color-mix(in srgb, var(--ink) 14%, var(--paper)); } /* solid, so nothing scrolling under shows through */
}

/* Ryan's remaining surfaces, redesigned: cameras, combos, invites, hello, partners, app-only links */
.camera-stage img { width: min(86%, 460px); }
.camera-qr { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.camera-qr .qr { width: 92px; height: 92px; flex: none; }
.camera-qr .meta { max-width: 26ch; opacity: 0.75; }
.camera-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.camera-grid a { background: rgb(255 255 255 / 0.04); border-color: rgb(247 244 241 / 0.16); }
.camera-grid img { width: 112px; height: 112px; }
.camera-grid .label { font-size: var(--label); }
.camera-grid .name { opacity: 0.6; }
.squares.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mode-stage img { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 16px 36px rgb(0 0 0 / 0.18); }
.invite { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 42px; align-items: start; padding: 56px 0 84px 0; }
.invite-person img, .invite-letter { display: grid; place-items: center; width: 200px; height: 200px; border-radius: 50%; object-fit: cover; background: var(--ink); color: var(--paper); font-family: var(--display); font-size: 88px; box-shadow: 0 16px 36px rgb(0 0 0 / 0.18); }
.invite .display { margin: 0 0 21px 0; }
.invite-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 28px 0 14px 0; }
.invite-follow { margin: 21px 0 0 0; font-size: var(--body); }
.invite-follow a { text-decoration: underline; text-underline-offset: 3px; }
.invite-hint { margin: 0; padding: 14px 0 0 0; }
.invite-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; }
.invite-points > div { display: grid; gap: 8px; align-content: start; padding-top: 14px; border-top: 1px solid currentColor; }
.invite-points .label { font-size: var(--label-lg); margin: 0; }
.invite-points p { margin: 0; line-height: 1.5; max-width: 34ch; }
.hello { padding-bottom: 56px; }
.hello-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 56px 0 28px 0; }
.hello-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hello-wall img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #23232c; }
.hello-caption { opacity: 0.6; margin: 0; }
.hello-caption a { color: inherit; }
.partner-logos { list-style: none; margin: 56px 0 0 0; padding: 28px 0 70px 0; border-top: 1px solid rgb(247 244 241 / 0.2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 35px 42px; }
.partner-logos img { display: block; width: auto; opacity: 0.85; }
.app-only { display: grid; justify-items: center; text-align: center; padding: 84px 0 112px 0; }
.app-only > img { border-radius: 26px; margin-bottom: 28px; }
.app-only .display { margin: 8px 0 14px 0; }
@media (max-width: 980px) { .hello-grid { grid-template-columns: minmax(0, 1fr); } .invite-points { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) {
  .camera-qr { display: none; }
  .squares.three-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invite { grid-template-columns: minmax(0, 1fr); gap: 21px; padding-top: 35px; }
  .invite-person img, .invite-letter { width: 120px; height: 120px; font-size: 52px; }
  .partner-logos { justify-content: center; }
}

/* "Open in Hipstamatic": a QR of the page's in-app address (desktop only) */
.app-qr { display: flex; align-items: center; gap: 14px; margin-top: 28px; text-align: left; }
.app-qr .qr { width: 92px; height: 92px; flex: none; }
.app-qr .meta, .qr-help { max-width: 26ch; line-height: 1.45; }
.app-qr .meta strong, .qr-help strong { font-weight: 600; }
.qr-help { flex: 1 1 150px; } /* beside the QR in a row of actions: narrows (more lines) before it drops below */
.close-band .app-qr { margin-top: 7px; }
@media (max-width: 680px) { .app-qr, .qr-help { display: none; } } /* the QR beside .qr-help (/membership) hides here too */
/* Email addresses keep their own case, even on a button */
.btn[href^="mailto:"] { text-transform: none; }

/* Winter 26/27 (/winter-26-27, and the band on each app page): casting digitals, four to a look */
.s1-hero { margin: 0 0 28px 0; }
.s1-hero img { width: 100%; height: auto; display: block; }
.s1-look + .s1-look { padding-top: 0; }
.s1-number { display: block; margin-bottom: 8px; font-size: var(--mono-xs); }
.s1-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 21px; flex-wrap: wrap; margin: 0 0 21px 0; }
.s1-intro .lede { margin: 0; max-width: 36ch; }
.s1-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.s1-shots figure { margin: 0; }
.s1-shots img { width: 100%; height: auto; display: block; } /* each shot keeps its own Abbot K30 frame: 2:3, or square for hands */
.s1-shots figcaption { margin-top: 8px; opacity: 0.6; }
@media (max-width: 680px) {
  .s1-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Stories (/stories): one line under each section head */
.stories-dek { margin: 0 0 21px 0; max-width: 60ch; opacity: 0.75; }

/* Phone header: Stories stays in the bar, so the bar tightens instead of shrinking the logotype */
@media (max-width: 680px) {
  .bar { gap: 12px; }
  .bar nav { gap: 12px; }
  .bar nav .btn-small { gap: 7px; padding: 9px 10px; }
  .bar nav .btn-small .starburst { width: 15px; height: 15px; }
  .bar .logotype { flex-shrink: 0; }
  .bar .logotype img { height: 24px; }
}
@media (max-width: 399px) {
  .bar nav a[href="https://account.hipstamatic.com"] { display: none; } /* Sign in is in the footer */
}
@media (max-width: 359px) {
  .bar .logotype img { height: 20px; }
}
@media (min-width: 681px) and (max-width: 860px) {
  .bar nav { gap: 20px; } /* the full nav fits a portrait tablet */
}

/* Gear hub: the HipstaPaks tab leaves the filters for /gear/paks */
.gear-tools .tabs a.tab-out { background: var(--yellow); border-color: var(--ink); color: var(--ink); }

/* After the top line (the home page's dateline, and every breadcrumb): one gap on every page, the home
   page's, 42px, or 21px on narrower screens. Whatever comes first takes it. */
:root { --after-line: 42px; }
@media (max-width: 980px) { :root { --after-line: 21px; } }
.wrap > .stamp + * { padding-top: var(--after-line); }
.mag-story > .ed-head:first-child, .blog-post > .ed-head:first-child { padding-top: 0; } /* the article takes the gap */

/* History (/history) */
.history-older { margin: 0; padding: 56px 0 0 0; color: var(--orange); }
.history-older + .big-numbers .num { font-size: clamp(40px, 5.6vw, 84px); } /* four-digit years, four across */
.history-list .value strong { font-weight: 600; }

/* The home deck with prints that carry their own instant frame (Abbot K30): no paper border of our own,
   and the caption sits on the frame's deep bottom edge */
.deck.framed { width: clamp(340px, 38vw, 580px); height: 560px; }
.deck.framed .print { width: 224px; padding: 0; background: none; }
.deck.framed .print img { border-radius: 2px; }
@media (max-width: 980px) {
  .deck.framed { width: 100%; max-width: 460px; height: 460px; }
  .deck.framed .print { width: 176px; }
}

/* The collection lockup: the Camera Club starburst between Hipstamatic Camera Club and Winter 26/27 */
.lockup-sep { display: inline-block; margin: 0 0.35em; color: var(--orange); }
.lockup-sep .starburst { display: inline-block; width: 0.9em; height: 0.9em; vertical-align: -0.1em; }
.flood-orange .lockup-sep { color: inherit; }

/* Winter 26/27: the lookbook film (12 Oct 2026). Muted on its own behind its poster, which lifts once the film is
   moving; "Watch with sound" starts it from the top with the controls. Upright phones get the 9:16 cut. */
.film { position: relative; margin: 0 0 14px 0; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.film video, .film picture, .film picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film picture { transition: opacity 0.4s; }
.film.playing picture { opacity: 0; pointer-events: none; }
.film-sound { position: absolute; left: 21px; bottom: 21px; z-index: 1; border: 0; cursor: pointer; box-shadow: 0 6px 18px rgb(0 0 0 / 0.28); }
.film.with-sound .film-sound { display: none; }
.film-meta { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 42px 0; font-size: var(--mono-xs); }
@media (max-width: 700px) and (orientation: portrait) {
  .film { aspect-ratio: 9 / 16; width: min(100%, calc(78svh * 9 / 16)); margin-left: auto; margin-right: auto; }
  .film-sound { left: 14px; bottom: 14px; }
}
.once .display { font-size: clamp(64px, 14vw, 200px); text-transform: none; } /* the mark is "1 of 1", as the film stamps it */
.once .lede { margin: 14px 0 28px 0; }
.once-body { margin: 0; max-width: 46ch; opacity: 0.8; }
.film-downloads { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 56px; }
.film-downloads img { width: auto; height: 112px; max-width: 100%; object-fit: contain; border-radius: 2px; }
/* Press kit logos and media: eight files, four across (two on phones) so no row is left with stragglers */
.kit-media { grid-template-columns: repeat(4, 1fr); margin-bottom: 42px; }
@media (max-width: 720px) { .kit-media { grid-template-columns: repeat(2, 1fr); } }
/* Each app on /winter-26-27: its demo on a phone beside its casting; stacked on narrow screens */
.winter-app { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 42px; align-items: center; }
.winter-app .phone { width: clamp(223px, 22.3vw, 290px); }
@media (max-width: 980px) {
  .winter-app { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .winter-app .phone { width: min(69vw, 290px); justify-self: center; }
}
/* Press page, In the press: the outlet's logo sits where a news row keeps its thumbnail */
.coverage .news-row { grid-template-columns: 130px 1fr 150px; }
.coverage-outlet { display: flex; justify-content: flex-end; padding-top: 3px; font-size: var(--label); line-height: 1.1; text-align: right; }
.coverage-outlet img { max-width: 100%; height: auto; }
@media (max-width: 680px) {
  .coverage .news-row { grid-template-columns: 1fr 88px; }
  .coverage-outlet { font-size: var(--small); }
}
/* Winter 26/27 under its press release: each camera's demo, its line and its downloads */
.press-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.press-app { display: grid; align-content: start; gap: 10px; }
.press-app .phone { width: min(100%, 245px); margin: 0 0 14px 0; }
.press-app-name { display: flex; align-items: center; gap: 12px; }
.press-app-name img { width: 44px; height: 44px; border-radius: 22.5%; }
.press-app-name .label { margin: 0; font-size: var(--label-lg); }
.press-app-line { margin: 0; }
.press-app-status { margin: 0; font-size: var(--mono-xs); }
.press-app-status a { text-decoration: none; }
.press-app-files { list-style: none; margin: 4px 0 0 0; padding: 10px 0 0 0; border-top: 1px solid rgb(247 244 241 / 0.16); font-size: var(--mono-sm); display: grid; gap: 6px; }
.press-app-files a { text-underline-offset: 3px; }
@media (max-width: 980px) { .press-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .press-apps { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .press-app .phone { width: min(69vw, 268px); justify-self: center; }
}
/* App pages: the Camera Club apps in a row, so you can go from one to the next. Scrolls sideways on phones. */
.app-switch { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 28px; padding: 0 16px; }
.app-switch::-webkit-scrollbar { display: none; }
.app-switch a { flex: none; display: grid; justify-items: center; gap: 7px; width: 86px; padding: 6px 0 8px; text-decoration: none; }
.app-switch img { width: 44px; height: 44px; border-radius: 22.5%; transition: transform 0.15s; }
.app-switch a:hover img { transform: translateY(-2px); }
.app-switch .label { font-size: var(--small); line-height: 1; padding-bottom: 5px; border-bottom: 2px solid transparent; opacity: 0.65; }
.app-switch a:hover .label, .app-switch a[aria-current] .label { opacity: 1; }
.app-switch a[aria-current] .label { border-bottom-color: currentColor; }
@media (hover: hover) and (min-width: 681px) { .app-switch { display: none; } } /* the header's Apps menu does this there */