/* ============================================================
   RELIEVER — V1 site, "The Takeover"
   Layered on base.css. Chosen 2026-08-15; promoted from c/.

   Same face, same rules, same zero radius, same absence of
   shadow as the base system. What changes is where the ink sits
   and how loud the type is allowed to be.

   The brand's own guidelines open on black: the mark arriving in
   light on a dark field, with everything else waiting underneath.
   This gives the site that opening, then hands the reading over
   to paper, which is where reading belongs. Ink returns once at
   the end of each page to close it.

   Bold is spent on two things only: the size of the display line
   and the value of the surface. No colour is added, no ornament,
   nothing new is invented.
   ============================================================ */

/* ---------- The arrival ----------
   The art is sized so the first screen carries the whole
   proposition, not half of it: at 1440x900 the prism, the
   headline and the purpose line all land above the fold, and at
   390x844 the button does too. The crop stays centred, so the
   wordmark band sits in the middle of the frame at every height.

   The section is flat black rather than the lifted r-ink
   gradient, so there is no visible seam where the artwork ends
   and the surface begins. The closing CTA keeps the lift. */

.hero-arrival{ padding:0; overflow:hidden; background-color:#000; background-image:none; }
.hero-arrival .container{ padding-block:40px 72px; }
@media (max-width:520px){ .hero-arrival .container{ padding-block:32px 72px; } }
@media (min-width:768px){ .hero-arrival .container{ padding-block:56px 96px; } }
@media (min-width:1280px){ .hero-arrival .container{ padding-block:48px 120px; } }

.hero-art{ background:#000; }
.hero-art img{
  width:100%; height:auto; display:block;
  max-height:min(42svh, 380px); object-fit:cover; object-position:center;
}
@media (max-width:520px){ .hero-art img{ max-height:32svh; } }

.hero-arrival h1{
  color:var(--paper);
  font-size:clamp(2.75rem, 1rem + 7.4vw, 6rem);   /* 44 → 96 */
  line-height:.92; letter-spacing:-.038em;
  max-width:13ch; margin-bottom:28px;
}
.hero-arrival .purpose{ color:var(--line); max-width:48ch; }
.hero-arrival .actions{ margin-top:44px; }

/* the one authored moment: the prism settles as the page lands.
   It starts fully visible and only stops moving, so nothing is
   ever hidden behind an animation that failed to run. */
@media (prefers-reduced-motion: no-preference){
  .hero-art img{
    animation:prism-settle 1100ms cubic-bezier(.16,1,.3,1) both;
    transform-origin:center 45%;
  }
  @keyframes prism-settle{
    from{ transform:scale(1.05); }
    to{ transform:scale(1); }
  }
}

/* ---------- Nav ----------
   The mark is the [R] alone. The wordmark is the hero's arrival,
   so the bar does not repeat it. Both files are trimmed to the
   ink, which is why the height below is the height you see and
   the mark sits flush on the container's left edge, in line with
   the display type underneath it. */

.nav-home img{ height:28px; }
@media (max-width:400px){ .nav-home img{ height:22px; } }

/* one of the three links is the thing to do, so it is boxed in
   the button's voice while keeping the bar's 13px. It carries
   the value swap with everything else, and on its own page it
   fills instead of underlining. */
.nav-links a.nav-cta{
  border:1px solid var(--ink);
  padding:0 14px;
  font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  transition:background .16s ease, color .16s ease;
}
/* A mark, two links and a boxed third do not fit one row at 320
   unless the bar is tightened, and a sticky nav that wraps to two
   rows costs more than the box is worth. Below 400 the box keeps
   its rule and loses the button's spacing: sentence case, no
   tracking, and the row closes up around it. */
@media (max-width:400px){
  .site-nav .container{ gap:12px; }
  .nav-links{ gap:10px; }
  .nav-links a{ padding:0; }
  .nav-links a.nav-cta{ padding:0 9px; text-transform:none; letter-spacing:normal; }
}
.nav-links a.nav-cta:hover{
  background:var(--ink); color:var(--paper); text-decoration:none;
}
.nav-links a.nav-cta[aria-current="page"]{
  background:var(--ink); color:var(--paper); text-decoration:none;
}

/* while the bar is standing on the ink */
.site-nav.nav-ink{
  background:#000; border-bottom-color:var(--hairline-on-ink);
}
@supports (backdrop-filter: blur(10px)){
  .site-nav.nav-ink{ background:rgba(0,0,0,.86); }
}
.site-nav.nav-ink .nav-links a{ color:var(--paper); }
.site-nav.nav-ink .nav-links a.nav-cta{ border-color:var(--paper); }
.site-nav.nav-ink .nav-links a.nav-cta:hover,
.site-nav.nav-ink .nav-links a.nav-cta[aria-current="page"]{
  background:var(--paper); color:var(--ink);
}
.site-nav.nav-ink .nav-home .mark-ink{ display:none; }
.site-nav.nav-ink .nav-home .mark-paper{ display:block; }
.site-nav.nav-ink :focus-visible{ outline-color:var(--paper); }

/* ---------- Sections, louder ---------- */

.section{ padding-block:96px 104px; }
@media (min-width:1280px){ .section{ padding-block:144px 152px; } }

.sec-head{
  border-top:2px solid var(--ink);
  padding-top:24px;
  margin-bottom:56px;
}
.sec-eyebrow{ margin:0 0 16px; color:var(--ink); }
.sec-title{
  font-size:clamp(1.875rem, 1.2rem + 3.1vw, 3.25rem);   /* 30 → 52 */
  font-weight:700; line-height:1.02; letter-spacing:-.028em;
  max-width:16ch; margin:0 0 18px;
}
.sec-sub{ max-width:50ch; }

/* ---------- The opening argument ----------
   The statement about the money is the section's case, not a
   caption, so it sits between the title and the guide line and
   the sizes descend the whole way down: 52 / 26 / 19. Ink, not
   muted, which is what separates it from the line under it.
   Its measure widens as the type gets smaller: 16ch / 38ch / 50ch.
   Margins here collapse against the title's own, so 24px is the
   gap on both sides of it. */

.sec-statement{
  font-size:clamp(1.25rem, .95rem + 1.05vw, 1.625rem);   /* 20 → 26 */
  line-height:1.42; letter-spacing:-.015em;
  font-weight:400; color:var(--ink);
  max-width:32ch; margin-block:24px;
}
@media (min-width:640px){ .sec-statement{ max-width:38ch; } }

/* four parts held tight, then a wider gap before the tiles */
.sec-head-open{ margin-bottom:64px; }

.cluster{ margin-top:88px; }
.cluster:first-child{ margin-top:0; }
.cluster-head{ border-bottom-width:2px; padding-bottom:16px; margin-bottom:24px; flex-wrap:wrap; }
.cluster-name{ font-size:16px; }

/* the affordance rides the first cluster's rule, where the tiles
   actually start, instead of interrupting the argument above */
.cluster-cue{
  display:none; margin-left:auto;
  font-size:12px; color:var(--muted); letter-spacing:.02em;
}

.tile{ min-height:204px; padding:28px 24px 24px; }
.tile-title{ font-size:19px; margin:0 0 12px; }
.tile-teaser{ max-width:34ch; }
.tile-cue{ display:none; padding-top:20px; }

/* Both cues promise a panel that only exists once tiles.js has
   attached, so neither is shown until it has. Without scripting
   the tiles stay a readable grid of titles and teasers that does
   not advertise something it cannot do. */
.tiles-ready .tile-cue{ display:inline-flex; }
.tiles-ready .cluster-cue{ display:block; }

/* The hairline grid has to close on itself. Cluster sizes are
   3/3/2/3/2, so at three columns the pairs leave the last cell
   open and at two columns the triples do. One filler per grid,
   shown only at the width where that grid is short, carries the
   two closing hairlines. */
.tile-filler{
  display:none;
  background:var(--paper);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
@media (min-width:821px){ .grid-2 > .tile-filler{ display:block; } }
@media (min-width:521px) and (max-width:820px){ .grid-3 > .tile-filler{ display:block; } }

/* ---------- Inked page heads ---------- */

.page-head.r-ink{ padding-block:72px 80px; }
@media (min-width:768px){ .page-head.r-ink{ padding-block:112px 120px; } }
@media (min-width:1280px){ .page-head.r-ink{ padding-block:144px 152px; } }
.page-head.r-ink .sec-eyebrow{
  color:var(--line);
  border-top:1px solid var(--hairline-on-ink);
  padding-top:22px; display:block;
}
.page-head.r-ink h1{
  color:var(--paper);
  font-size:clamp(2.25rem, 1.2rem + 4.4vw, 4rem);
  line-height:.98; letter-spacing:-.032em;
  max-width:15ch; margin-bottom:22px;
}
.page-head.r-ink h1.sec-title{
  font-size:clamp(1.75rem, 1.15rem + 2.7vw, 3rem);
  text-transform:none; font-weight:600; max-width:22ch;
}
.page-head.r-ink .lede{ color:var(--line); }
.page-head + .section{ padding-top:80px; }
@media (min-width:1280px){ .page-head + .section{ padding-top:112px; } }

/* ---------- Body copy ----------
   The numbered rule belongs to the column it opens, so it is
   held to the same measure as the prose underneath it. */

.article-block{ margin-top:88px; }
.article-block .cluster-head{ max-width:56ch; }

/* ---------- Form ----------
   One column. The form is the whole page, so it is held to a
   reading width rather than run to the container edge, and the
   width matches the point at which the paired row splits in two. */

.form-block{ max-width:560px; margin-top:44px; }
.field{ margin-bottom:28px; }
.form-note{ margin-top:16px; max-width:46ch; }

/* ---------- The close ---------- */

.cta{ padding-block:112px 120px; }
@media (min-width:1280px){ .cta{ padding-block:168px 176px; } }
.cta .container{ border-top:1px solid var(--hairline-on-ink); padding-top:48px; }
.cta h2{
  font-size:clamp(2.25rem, 1.2rem + 4.6vw, 4.25rem);   /* 36 → 68 */
  line-height:.96; letter-spacing:-.034em;
  max-width:12ch; margin-bottom:24px;
}