/* upkeepmag.com. Softriver's palette (UI Branding Assets swatches) and Suisse BP Int'l, as on the shop
   (CMO/GTM/shop/theme/snippets/upkeep-base.liquid). The layout is a hospitality site's: one moving image,
   then long quiet bands of type with room around them. build.mjs fills the {{...}} paths. */

@font-face { font-family: "Upkeep Sans"; font-weight: 300; font-display: swap; src: url("/fonts/suisse-light.f11298877d.otf") format("opentype"); }
@font-face { font-family: "Upkeep Sans"; font-weight: 400; font-display: swap; src: url("/fonts/suisse-regular.e0d1393c65.otf") format("opentype"); }
@font-face { font-family: "Upkeep Sans"; font-weight: 500; font-display: swap; src: url("/fonts/suisse-medium.f1583b0ad6.otf") format("opentype"); }

:root {
  --thunder: #3B212D;
  --ink-2: #5C3548;
  --label: #825E70;
  --blush: #EDDEE5;
  --mist: #F3F0F1;
  --desert: #F9F8F7;
  --rule: rgba(59, 33, 45, .14);
  --gutter: clamp(20px, 5vw, 72px);
  /* the space above and below each band: cut by 20% on desktop twice (Max, 24 Oct 2026: a lot of scrolling),
     from 216 px to 138 px at 1440 wide; a phone keeps 112 px */
  --band: clamp(112px, 9.6vw, 143px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  background: var(--desert);
  color: var(--thunder);
  font-family: "Upkeep Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
p { margin: 0; }

/* Type. Statements are Suisse Light, large and loose; labels are small, tracked capitals. */
.eyebrow { font-size: 11.5px; line-height: 1.4; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.statement { font-weight: 300; font-size: clamp(27px, 3.3vw, 46px); line-height: 1.22; letter-spacing: -.012em; text-wrap: balance; }
.body { font-weight: 300; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.75; color: var(--ink-2); text-wrap: pretty; }
.eyebrow + .statement { margin-top: 28px; }
.statement + .body, .statement + p, .body + p { margin-top: 32px; }
.more {
  display: inline-block; font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  padding-bottom: 6px; border-bottom: 1px solid currentColor;
}
.more::after { content: "\2192"; margin-left: 12px; letter-spacing: 0; }
.more:hover { opacity: .7; }

/* The header: a thin line of type over the first screen. */
.top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: max(28px, env(safe-area-inset-top)) var(--gutter) 0;
  font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}
.top-sub { justify-self: start; padding-bottom: 4px; border-bottom: 1px solid currentColor; transition: opacity .3s ease; }
.top-sub:hover { opacity: .7; }
.top-mark { justify-self: center; display: block; width: 148px; line-height: 0; }
.top-mark svg { width: 100%; height: auto; display: block; }
.top-nav { justify-self: end; display: flex; gap: 36px; }
.top-nav a { padding-bottom: 4px; border-bottom: 1px solid transparent; transition: border-color .3s ease; }
.top-nav a:hover { border-bottom-color: currentColor; }

/* The first screen: the footage and the masthead, nothing else. */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; color: var(--desert); overflow: hidden; background: var(--thunder); }
.stage { position: absolute; inset: 0; background: var(--thunder) url("/media/1-loop.653567fb4e.jpg") center / cover no-repeat; }
/* a phone held upright shows the tall cut's own first frame until the footage fades in, as the Pearl reel does */
.hero .stage { background-image: url("/media/1-loop-portrait.506c2468cd.jpg"); }
@media (min-aspect-ratio: 33/50) { .hero .stage { background-image: url("/media/1-loop.653567fb4e.jpg"); } }
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.stage video.on { opacity: 1; }
.stage::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 46% 34% at 50% 50%, rgba(59, 33, 45, .34), rgba(59, 33, 45, 0) 100%),
    linear-gradient(180deg, rgba(59, 33, 45, .52) 0%, rgba(59, 33, 45, .2) 30%, rgba(59, 33, 45, .24) 62%, rgba(59, 33, 45, .62) 100%);
}
.hero-mast {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  margin: 0; line-height: 0; font-size: 1rem; width: min(78vw, 680px);
}
.hero-mast svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-mast text, .top-mark text { font-family: "Upkeep Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 500; }
.hero-cue {
  position: absolute; z-index: 2; left: 50%; bottom: max(32px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  font-size: 10.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.hero-cue::after { content: ""; width: 1px; height: 44px; background: currentColor; opacity: .7; }
.motion {
  position: absolute; z-index: 2; right: var(--gutter); bottom: max(32px, env(safe-area-inset-bottom));
  font: inherit; font-size: 10.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--desert); background: none; border: 0; padding: 4px 0; border-bottom: 1px solid rgba(249, 248, 247, .5); cursor: pointer;
}

/* The Pearl reel on the landing page, under the masthead: the Pearl page's own first screen, with a smaller
   title so the line and the link under it stay below the plaque. */
/* At 1440 x 900 the block's top sits 25% up, clear of the plaque's bottom edge at 29% (the shade note below). */
.p-band .p-hero-in { bottom: max(56px, calc(env(safe-area-inset-bottom) + 40px)); max-width: 600px; }
.p-band .title { font-size: clamp(36px, 3.9vw, 56px); }
.p-band .lead { margin-top: 18px; font-size: clamp(17px, 1.25vw, 18px); }
.p-band .more { margin-top: 22px; }
/* "How the Pearls work" opens the Pearl page's sections in place, so its arrow points down, and they grow
   from nothing to their full height rather than appearing at once. */
.more[data-unfold]::after { content: "\2193"; }
.how { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 1.2s ease; }
.how > div { min-height: 0; overflow: hidden; }
.how.open { grid-template-rows: 1fr; }

/* The sign-up pop-up, as a shop's is (Max, 23 Oct 2026). Light, over a plum veil, with the landing page's
   form inside. */
.pop {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 0;
  background: var(--desert); color: var(--thunder); box-shadow: 0 30px 80px rgba(59, 33, 45, .35);
}
.pop::backdrop { background: rgba(59, 33, 45, .55); }
.pop[open] { animation: pop-in .6s ease; }
@keyframes pop-in { from { opacity: 0; transform: translateY(16px); } }
.pop-in { position: relative; padding: 60px clamp(24px, 6vw, 48px) 36px; text-align: center; }
.pop-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: none; color: var(--thunder); font: inherit; font-size: 26px; font-weight: 300; line-height: 1; cursor: pointer; }
.pop-title { margin: 18px 0 0; font-weight: 300; font-size: clamp(30px, 3vw, 38px); line-height: 1.12; letter-spacing: -.014em; }
.pop-title:focus { outline: none; }
.after .pop-title { margin-top: 0; font-size: 30px; }
.pop-body { margin-top: 16px; font-weight: 300; font-size: 16px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.pop .signup { margin-top: 28px; }
.pop .fine { margin-top: 14px; }
.pop .fine.ok { margin-top: 24px; }
.pop-no { margin-top: 18px; padding: 6px; border: 0; background: none; color: var(--label); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.after .more { margin-top: 28px; }
.text-step .fine.err { margin-top: 14px; margin-bottom: -4px; }

/* The privacy policy and the text terms (23 Oct 2026): a plum band with the title under the header, then
   plain reading. */
.doc-hero { position: relative; padding: clamp(150px, 18vw, 240px) var(--gutter) clamp(56px, 7vw, 96px); background: var(--thunder); color: var(--desert); }
.doc-hero .title { max-width: 680px; margin: 0 auto; font-size: clamp(40px, 5vw, 72px); }
.doc-hero .lead { max-width: 680px; margin: 18px auto 0; font-size: 14px; }
.doc { max-width: calc(680px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--gutter) clamp(88px, 10vw, 144px); }
.doc p, .doc li { font-weight: 300; font-size: 17px; line-height: 1.75; color: var(--ink-2); text-wrap: pretty; }
.doc p + p, .doc ul + p { margin-top: 18px; }
.doc h2 { margin: 48px 0 0; font-size: 19px; font-weight: 500; line-height: 1.4; color: var(--thunder); }
.doc h2 + ul, .doc h2 + p { margin-top: 14px; }
.doc ul { margin: 0; padding-left: 1.2em; }
.doc li + li { margin-top: 8px; }
.doc strong { font-weight: 500; color: var(--thunder); }
.doc a { border-bottom: 1px solid var(--rule); }

/* What the magazine is, between the masthead and the Pearl reel (Max, 23 Oct 2026): the copy at the left and
   the magazine at the right, stacked below desktop width. */
.about { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px clamp(48px, 7vw, 112px); align-items: center; }
.about .statement { margin-bottom: 0; }
.about .body { margin-top: 28px; }
/* The section opens on its numbers (Max, 24 Oct 2026): Suisse Light figures over a short line each, spread
   across the text column, each line on one line. */
.figures { list-style: none; margin: 0 0 48px; padding: 0 0 36px; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--rule); }
.figures li { display: flex; flex-direction: column; gap: 10px; }
.fig { font-weight: 300; font-size: clamp(40px, 3.5vw, 50px); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.fig-what { font-size: 14px; line-height: 1.5; color: var(--ink-2); white-space: nowrap; }
.about .body a { border-bottom: 1px solid var(--rule); }
.about-pic { margin: 0; }
.about-pic img { display: block; width: 100%; height: auto; box-shadow: 0 24px 60px rgba(59, 33, 45, .16); }

/* The bands. */
.band { padding: var(--band) var(--gutter); }
.band-light { background: var(--desert); }
.band-mist { background: var(--mist); }
.band-plum { background: var(--thunder); color: var(--desert); }
.band-plum .eyebrow { color: var(--blush); }
.band-plum .body { color: rgba(249, 248, 247, .78); }
.col { max-width: 760px; margin: 0 auto; text-align: center; }
.col .body { max-width: 34em; margin-left: auto; margin-right: auto; }
.split { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(160px, 1fr) 2.4fr; gap: 40px 72px; align-items: start; }
.split > .eyebrow { padding-top: .9em; }
/* The Pearl sections carry no label and start at the left edge, the line the Pearls' pictures start on (Max,
   24 Oct 2026), with their copy kept to a readable width. */
.split > div { grid-column: 1 / -1; max-width: 860px; }

.latest { max-width: 760px; margin: 72px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; font-size: 15px; }
.latest a { border-bottom: 1px solid var(--rule); padding-bottom: 4px; }

/* A still between bands: the second clip's first frame. */
.still { height: clamp(360px, 72vh, 820px); background: var(--thunder) url("/media/1-loop.653567fb4e.jpg") center / cover no-repeat; }

/* The Pearl, Softriver's plaque device: a plain filled circle, set once, twice or three times. */
.pearls { display: inline-flex; gap: 14px; }
.pearls i { width: 12px; height: 12px; border-radius: 50%; background: currentColor; display: block; }
.band-plum .pearls { color: var(--desert); margin-bottom: 40px; }
.pearls-lg { gap: 22px; }
.pearls-lg i { width: 18px; height: 18px; }

/* The sign-up. UI Branding Assets: pill fields, buttons with 32 px corners. */
.signup { display: flex; gap: 10px; max-width: 480px; margin: 48px auto 0; }
.signup input[type="email"], .signup input[type="tel"] {
  flex: 1; min-width: 0; padding: 16px 24px; border-radius: 999px;
  border: 1px solid rgba(59, 33, 45, .28); background: var(--desert); color: var(--thunder);
  font: inherit; font-size: 16px; line-height: 1.2; transition: border-color .3s ease;
}
.signup input::placeholder { color: var(--label); }
.signup input:focus { outline: none; border-color: var(--thunder); }
.signup button {
  padding: 16px 28px; border-radius: 32px; border: 1px solid var(--thunder);
  background: var(--thunder); color: var(--desert); font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background .3s ease, border-color .3s ease;
}
.signup button:hover { background: var(--ink-2); border-color: var(--ink-2); }
.signup button:disabled { opacity: .55; cursor: default; }
.signup.done { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fine { max-width: 30em; margin: 20px auto 0; font-size: 12.5px; line-height: 1.6; color: var(--label); }
.fine.ok { margin-top: 48px; font-size: 17px; color: var(--thunder); }
.fine.err { color: #B4442B; }
.fine a { text-decoration: underline; text-underline-offset: 2px; }
.aside { margin-top: 56px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.aside a { border-bottom: 1px solid var(--rule); }

/* The footer, after Outway's (Max, 24 Oct 2026): "Stay in the know" at the left with the legal line under it,
   three columns of links in small capitals, and the upkeep. wordmark across the full width at the bottom, its
   descenders cut off by the page's edge. */
.foot { background: var(--thunder); color: var(--desert); padding: clamp(44px, 5vw, 72px) var(--gutter) 0; overflow: hidden; }
.foot-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.foot-lead { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.foot-know { font-weight: 300; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.05; letter-spacing: -.015em; align-self: start; }
.foot-know:hover { opacity: .75; }
.foot-col summary { list-style: none; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; cursor: default; margin-bottom: 22px; }
.foot-col summary::-webkit-details-marker { display: none; }
.foot-col p { font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; margin-top: 14px; }
.foot-col summary + p { margin-top: 0; }
.foot-col .foot-mail { text-transform: none; letter-spacing: .02em; font-size: 13px; }
.foot-col a, .foot-legal a { border-bottom: 1px solid transparent; transition: border-color .3s ease; }
.foot-col a:hover, .foot-legal a:hover { border-bottom-color: currentColor; }
.foot-legal { display: flex; gap: 24px; }
.foot-base { display: flex; gap: 12px 32px; flex-wrap: wrap; font-size: 12px; font-weight: 300; color: rgba(249, 248, 247, .7); }
.foot-giant { display: block; line-height: 0; margin-top: clamp(48px, 7vw, 112px); }
/* the wordmark's descenders are 21% of its height, 6.3% of its width: they fall below the page's edge */
.foot-giant svg { display: block; width: 100%; height: auto; margin-bottom: -6.3%; }

/* The Pearl System page. The first screen is the plaque reel: the same plaque, cut fast from studio to
   studio. The plaque sits mid-frame in every shot, so the title keeps to the bottom left, clear of it. */
.p-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; background: var(--thunder); color: var(--desert); overflow: hidden; }
.stage-pearls { background-image: url("/media/pearl-reel-portrait.77157917ac.jpg"); }
/* the same shape test as site.js's tall cut: a screen narrower than 0.66 of its height */
@media (min-aspect-ratio: 33/50) { .stage-pearls { background-image: url("/media/pearl-reel.99c7804139.jpg"); } }
/* the shade behind the title rises from the bottom and is gone 28% up, short of the plaque, whose colors are
   Softriver's render 1:1 (Max, 23 Oct): in the studio shots the plaque's bottom edge sits 29% up the screen at
   1440 x 900 and 43% up on a phone, and the title's top 24% up on both */
.stage-pearls::after {
  background:
    linear-gradient(0deg, rgba(59, 33, 45, .78) 0%, rgba(59, 33, 45, .55) 12%, rgba(59, 33, 45, .25) 22%, rgba(59, 33, 45, 0) 28%),
    linear-gradient(180deg, rgba(59, 33, 45, .45) 0%, rgba(59, 33, 45, 0) 22%);
}
.p-hero-in { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: max(72px, calc(env(safe-area-inset-bottom) + 56px)); max-width: 680px; }
.title { margin: 0; font-weight: 300; font-size: clamp(44px, 6.4vw, 92px); line-height: 1.02; letter-spacing: -.02em; }
.lead { margin-top: 22px; font-weight: 300; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: rgba(249, 248, 247, .86); }

.criteria { list-style: none; margin: 56px 0 40px; padding: 0; border-top: 1px solid var(--rule); }
.criteria li { display: grid; grid-template-columns: 56px minmax(140px, 1fr) 2fr; gap: 8px 24px; padding: 26px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.criteria .num { font-size: 13px; color: var(--label); font-variant-numeric: tabular-nums; }
.criteria .crit { font-size: 18px; font-weight: 400; }
.criteria .what { font-size: 15.5px; font-weight: 300; line-height: 1.65; color: var(--ink-2); }

.levels { list-style: none; margin: 88px auto 0; padding: 0; max-width: 1120px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* One, two and three Pearls, each the plaque on a different studio's wall, as in the Pearl reel. Listed is
   off the page (Max, 24 Oct 2026). */
.lvl { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.lvl-pic { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; margin-bottom: 16px; background: var(--mist); }
.lvl-name { font-size: 17px; font-weight: 400; }
.lvl-line { font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--ink-2); }

.nevers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.statement + .nevers { margin-top: 56px; }
.nevers li { padding: 26px 0; border-bottom: 1px solid var(--rule); font-size: clamp(16px, 1.2vw, 18px); font-weight: 300; line-height: 1.7; color: var(--ink-2); }
.nevers strong { font-weight: 400; color: var(--thunder); }

/* On light pages the header is plum on light; over the plum Pearl hero it is light. */
.pearl-page .top { color: var(--desert); }

/* A slow reveal for what scrolls into view. Things already on screen never hide. */
.rv.pre { opacity: 0; transform: translateY(18px); }
.rv { transition: opacity 1.1s ease, transform 1.1s ease; }

.top-nav { white-space: nowrap; }

/* The header keeps Subscribe, the mark and the Pearl link in three columns at every width. With one link a
   side it no longer collides at tablet widths, as the place line and two links did (22 Oct). On a phone the
   Pearl page drops its link to itself. */
@media (max-width: 900px) {
  .top-mark { width: 128px; }
  .top-nav { gap: 26px; }
  .split { grid-template-columns: 1fr; gap: 0; }
  .split > .eyebrow { padding-top: 0; margin-bottom: 28px; }
  .about { grid-template-columns: 1fr; }
  .about-pic { max-width: 420px; }
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-lead { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  /* On a phone every section keeps its text 47 px from its edges, the gap under the masthead, and every block
     inside a section sits 32 px from the next (Max, 24 Oct 2026: consistent, and 40% less under the masthead) */
  :root { --band: 47px; }
  .about { gap: 32px; }
  .figures { margin-bottom: 32px; padding-bottom: 24px; }
  .criteria { margin: 32px 0; }
  .statement + .nevers { margin-top: 32px; }
  .levels { margin-top: 32px; }
  .signup { margin-top: 32px; }
  .aside { margin-top: 32px; }
  .top { padding-top: max(22px, env(safe-area-inset-top)); }
  .top-mark { width: 112px; }
  .top-nav { gap: 22px; }
  .pearl-page .top-nav a[href="/pearls"], .doc-page .top-nav a[href="/pearls"] { display: none; }
  .hero-mast { width: 84vw; }
  /* on a phone the figures stack, each number beside its line */
  .figures { grid-template-columns: 1fr; gap: 18px; }
  .figures li { flex-direction: row; align-items: baseline; gap: 16px; }
  .fig { flex: none; width: 2.85em; }
  .signup { flex-direction: column; }
  .signup button { width: 100%; }
  .wide-only { display: none; }
  .criteria li { grid-template-columns: 40px 1fr; }
  .criteria .what { grid-column: 2; }
  .levels { grid-template-columns: 1fr; gap: 32px; }
  /* on a phone the columns fold into rows with a plus, as Outway's do, and the legal line goes last */
  .foot-grid { grid-template-columns: 1fr; gap: 0; }
  .foot-lead { display: contents; }
  .foot-know { margin-bottom: 40px; }
  .foot-base { order: 4; justify-content: center; margin-top: 32px; }
  .foot-col { border-bottom: 1px solid rgba(249, 248, 247, .3); }
  .foot-col summary { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 22px 0; font-size: 15px; cursor: pointer; }
  .foot-col summary::after { content: "+"; font-size: 22px; font-weight: 300; letter-spacing: 0; }
  .foot-col[open] summary::after { content: "\2212"; }
  .foot-col[open] { padding-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage video, .rv, .how { transition: none; }
  .rv.pre { opacity: 1; transform: none; }
}