/* ---------- Design-system unification (2026-09-03) — this file is now
   loaded AFTER css/styles.css on the pages that use it (the homepage and
   about.html), not standalone. It no longer redeclares anything
   styles.css already provides at the same values (base reset, --c-*
   colors, --paper, type scale) — only overrides what should genuinely
   differ (Redaction for headings, the uncapped .wrap), plus the
   components styles.css has no equivalent for (nav chrome for these two
   pages, gooey buttons, and every section-specific class). See
   Docs/2026-09-03-site-restructure-plan.md, Part 1, for the reasoning.
   styles.css itself is untouched, so every legacy page is unaffected. ---------- */

@font-face {
  font-family: 'Redaction';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Redaction-Regular.woff2') format('woff2');
}

:root {
  /* headings only — body text stays on styles.css's --font-body */
  --font-display: 'Redaction', ui-serif, Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* v7's navy ink, kept instead of styles.css's warm-black default */
  --ink: var(--c-navy);
  --ink-soft: var(--c-navy);
}

/* styles.css's own html/body rules already cover the reset (margin,
   --paper background, --ink color, --font-body, antialiasing) — the one
   thing they don't cover is this, needed because a couple of this file's
   sections (the mask-reveal transforms, the polaroid gallery's rotated
   cards) can transiently render wider than the viewport mid-interaction. */
html,
body {
  overflow-x: hidden;
}

.wrap {
  max-width: 88vw;
  margin: 0 auto;
}

/* about.html Milestone timeline — styles.css's .timeline-item has no
   image slot (the legacy about.html timeline was text-only); this adds
   one, styled as an explicit placeholder until real photos exist. */
.timeline-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 12px;
  background: var(--line-soft);
  border: 1px dashed var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  font-size: 12px;
  color: var(--ink-faint);
}

/* about.html Tentang — force-directed node graph sits beside the
   description, ported from a CodePen (d3.js force-directed graph with
   randomly-colored circles as nodes). Recolored to the site palette,
   text labels removed — see Docs/2026-09-03-site-restructure-plan.md. */
.about-content-row {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.about-desc {
  flex: 1 1 560px;
  min-width: 0;
}

.about-graph {
  flex: 1 1 380px;
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  min-height: 320px;
}

.about-graph svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 860px) {
  .about-content-row {
    flex-direction: column;
  }

  .about-graph {
    width: 100%;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 22px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-solid {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn-solid:hover {
  background: var(--c-terracotta);
  border-color: var(--c-terracotta);
  color: var(--paper);
}

/* section 1 is now a dark (navy) section like 2/4/5 — its two buttons get
   the same light-on-dark treatment as those sections' CTAs. Primary
   ("Baca konteksnya") inverts .btn-solid's default navy fill to a paper
   fill so it doesn't blend into the section background; secondary
   ("Tentang Riset") is a plain outline that already inherits .s1's paper
   text/border color, it just needs a visible (paper-fill) hover to match. */
.s1 .btn-solid {
  background: var(--paper);
  color: var(--c-navy);
  border-color: var(--paper);
}

.s1 .btn-solid:hover {
  background: var(--c-terracotta);
  border-color: var(--c-terracotta);
  color: var(--paper);
}

.s1 .btn:not(.btn-solid):hover {
  background: var(--paper);
  color: var(--c-navy);
  border-color: var(--paper);
}

/* ---------- gooey CTA buttons — ported from "Gooey button hover effect
   with SVG filters & CSS" (https://css-tricks.com/gooey-effect/): two
   blob pseudo-elements scale in from 0 on hover, and the shared SVG
   filter (blur + contrast the alpha channel back up) melts their edges
   into the button's own shape instead of overlapping it as flat circles.
   Colored per button to match whatever its own hover-fill color already
   is, so the blobs read as the button growing new lobes, not a
   mismatched color arriving separately. ---------- */
/* filter only while hovered/focused: an outline (unfilled) button run
   through the goo filter at rest is invisible — its thin 1.5px border
   doesn't have enough opaque coverage to survive the filter's blur +
   alpha-boost math, only the solid blobs do. Solid buttons don't have
   this problem, but scoping to :hover keeps the effect exactly what it
   says on the tin — a hover effect — for either kind. */
.gooey-wrap {
  display: inline-block;
}

.gooey-wrap:hover,
.gooey-wrap:focus-within {
  filter: url('#goo');
}

.gooey-wrap .btn {
  position: relative;
  z-index: 1;
}

.gooey-wrap .btn::before,
.gooey-wrap .btn::after {
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  width: 2.5em;
  height: 1.9em;
  background: var(--gooey-color, currentColor);
  transform: scale(0);
  transition: transform 0.85s ease;
  z-index: -1;
}

.gooey-wrap .btn::before {
  top: -40%;
  left: 8%;
}

.gooey-wrap .btn::after {
  bottom: -40%;
  right: 8%;
}

.gooey-wrap:hover .btn::before,
.gooey-wrap:hover .btn::after {
  transform: scale(1);
}

.gooey-terracotta {
  --gooey-color: var(--c-terracotta);
}

.gooey-navy {
  --gooey-color: var(--c-navy);
}

.gooey-paper {
  --gooey-color: var(--paper);
}

/* Arsip (article.html) filter tabs — restyled to match the subnav pill
   buttons on Tentang (about.html, .subnav .btn.btn-secondary): same
   pill shape, border, hover-lift, and active-state invert. Kept as
   .tab/.tab.active rather than switching to .btn, since the tab-filter
   script already targets those classes directly. */
.tab {
  border-radius: 999px;
  padding: 13px 22px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.tab:hover {
  transform: translateY(-2px);
}

.tab.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ---------- nav ---------- */
/* Transparent floating header, absolutely positioned so it sits over the
   hero's particle background with no box behind it — only makes sense
   with a hero underneath, so it's scoped to the homepage. Every other
   page keeps styles.css's default sticky, in-flow, solid-background
   header (about.html included) so content isn't pushed under it.
   background/border-bottom explicitly cleared too: styles.css's .sitehead
   sets both, which blended invisibly back when the hero was the same
   cream as the header — now that the hero is navy, that opaque cream
   band would show as a visible strip above it otherwise. */
body.page-home .sitehead {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: transparent;
  border-bottom: none;
}

/* section 1 (the hero underneath) is now navy, so the floating header's
   default navy text/icons would disappear into it — flip to light just
   on the homepage. Every other page keeps the default dark-on-light
   header untouched. */
body.page-home .sitehead .wrap,
body.page-home .navtoggle {
  color: var(--paper);
}

body.page-home .navtoggle {
  border-color: rgba(237, 227, 200, 0.4);
}

.sitehead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 16px;
  color: var(--ink);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-decoration: none;
  color: inherit;
}

.navlinks {
  display: flex;
  gap: 26px;
  font-size: 14px;
}

.navlinks a {
  text-decoration: none;
  opacity: 0.8;
  color: inherit;
}

.navlinks a:hover {
  opacity: 1;
}

.navtoggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.navtoggle span,
.navtoggle span::before,
.navtoggle span::after {
  content: '';
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.navtoggle span::before {
  position: absolute;
  top: -5px;
}

.navtoggle span::after {
  position: absolute;
  top: 5px;
}

@media (max-width: 760px) {
  .navlinks {
    display: none;
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
  }

  .navlinks.open {
    display: flex;
  }

  .navlinks a {
    padding: 12px 6vw;
    /* the open dropdown panel is always a light (--paper) surface, on
       every page, regardless of the header's own text color when closed
       — so its links stay dark instead of inheriting a light color that
       would vanish against it (e.g. the homepage's light header text). */
    color: var(--ink);
  }

  .navtoggle {
    display: flex;
  }
}

/* ---------- section 1 — hero, tsParticles on a navy ground (matches
   section 2's dark treatment) ---------- */
.s1 {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  background: var(--c-navy);
  color: var(--paper);
  overflow: hidden;
}

#s1-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.s1 .wrap {
  position: relative;
  z-index: 1;
  padding: 120px 0 60px;
  text-align: center;
}

.s1 h1 {
  font-size: clamp(2.6rem, 6.4vw, 7.2rem);
  line-height: 1.05;
  max-width: 20ch;
  margin: 0 auto 22px;
}

.s1 p.lede {
  font-size: clamp(20px, 1.2vw, 3.5rem);
  color: rgba(237, 227, 200, 0.82);
  max-width: 80%;
  margin: 60px auto 70px;
}

.s1 .ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.s1 .scrolldown {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237, 227, 200, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.s1 .scrolldown .line {
  width: 1px;
  height: 26px;
  background: currentColor;
  animation: scrolldown-pulse 1.8s ease-in-out infinite;
}

@keyframes scrolldown-pulse {

  0%,
  100% {
    opacity: 0.25;
  }

  50% {
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s1 .scrolldown .line {
    animation: none;
  }
}

/* ---------- section 2 — GSAP mask-mouse-effect, ported straight from
   the original CodePen structure (content / hidden-content, two text
   rows, hover-to-enlarge on the paragraphs, hover-to-shrink-and-snap on
   the link) instead of the single-headline rebuild from before — only
   the colors are swapped for the palette, and the mask math is section-
   relative (not page-relative like the original single-page demo,
   since this is one section inside a much longer page) ---------- */
.s2 {
  position: relative;
  background: var(--c-navy);
  color: var(--paper);
  overflow: hidden;
  /* hairline seam between sections 1 and 2 — both are navy now, so
     there's no color break marking where one ends and the other starts */
  border-top: 1px solid rgba(237, 227, 200, 0.15);
}

.s2-content,
.s2-hidden {
  padding: 80px 6vw;
}

.s2-row {
  min-height: 30vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
}

.s2-line {
  font-family: var(--font-display);
  font-weight: 500;
  text-align: left;
  font-size: clamp(1.7rem, 4vw, 3.1rem);
  line-height: 1.35;
  max-width: 80%;
  margin: 0;
}

.s2-content .s2-line {
  color: var(--paper);
}

.s2-headline {
  font-size: clamp(2.6rem, 5vw, 5rem);
  line-height: 1.05;
  max-width: 30ch;
}

.s2-link-row {
  text-align: left;
  padding: 8px 0 42px;
}

.s2-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px;
  cursor: pointer;
}

.s2-link-icon {
  font-size: 20px;
  line-height: 1;
}

.s2-hidden {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  visibility: hidden;
  --x: 0px;
  --y: 0px;
  --size: 5px;
  background: linear-gradient(180deg, var(--c-mustard) 0%, var(--c-terracotta) 45%, var(--c-plum) 100%);
  color: var(--c-navy);
  -webkit-mask-image: radial-gradient(circle at var(--x) var(--y), black var(--size), transparent calc(var(--size) + 1px));
  mask-image: radial-gradient(circle at var(--x) var(--y), black var(--size), transparent calc(var(--size) + 1px));
}

.s2-hidden .s2-line {
  color: var(--c-navy);
}

.s2-hidden .s2-link {
  color: var(--c-navy);
}

/* ---------- section 3 — practice grid (no effect, content-height) ---------- */
.s3 {
  padding: clamp(80px, 10vw, 130px) 0;
  background: var(--paper);
  color: var(--ink);
}

.s3-layout {
  display: flex;
  align-items: center;
  gap: 48px;
}

.s3 .section-head {
  flex: 1 1 460px;
  margin: 0;
  text-align: left;
}

.s3 h2 {
  /* .s4-flytext (shared with section 4's headline) is centered now that
     section 4 is a single centered column — section 3's title keeps its
     own left alignment regardless. */
  text-align: left;
  font-size: clamp(2.6rem, 5vw, 5rem);
  line-height: 1.05;
  margin-bottom: 14px;
}

.s3 .section-head p {
  font-size: clamp(20px, 1.2vw, 3.5rem);
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .s3-layout {
    flex-direction: column;
    align-items: stretch;
  }
}

/* six practice cards as sticky notes, ported from a CodePen (Sticky
   Note — <aside> turned into a paper note with CSS). Each card sets
   --note-color/--note-text/--note-rotate inline in the HTML for its own
   color and scatter angle; shape/shadow/fold are shared here. */
.practice-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 30px 24px;
  padding: 34px 0;
  flex: 2 1 460px;
  max-width: 780px;
}

.practice-card {
  --note-rotate: 0deg;
  --note-offset: 0px;
  --note-color: var(--c-cream);
  --note-text: var(--c-navy);
  position: relative;
  flex: 0 1 220px;
  transform: perspective(1px) rotate(var(--note-rotate)) translateY(var(--note-offset));
  transition: transform 0.2s ease;
}

.practice-card:hover {
  transform: perspective(1px) rotate(var(--note-rotate)) translateY(var(--note-offset)) scale(1.05);
  z-index: 2;
}

.practice-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 14%);
  border-radius: 0 0 100px / 6px 0;
  filter: blur(3px);
}

.practice-card-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  padding: 22px 22px 26px;
  color: var(--note-text);
  background-color: var(--note-color);
  background-image:
    linear-gradient(165deg, transparent 82%, rgba(0, 0, 0, 0.2) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  border-radius: 0 0 75% / 10% 0;
  outline: solid 1px rgba(0, 0, 0, 0.16);
  outline-offset: -1px;
}

.practice-tag {
  font-family: 'Shantell Sans', var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
}

.practice-card p {
  margin: 0;
  font-family: 'Shantell Sans', var(--font-display);
  font-size: 15px;
  line-height: 1.5;
}

.practice-card.more .practice-card-inner {
  justify-content: center;
}

.practice-card.more a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.practice-card.more a:hover {
  text-decoration: underline;
}

/* zine promo — full-width box under the practice grid, cover on the
   left, description + CTA on the right. Plain card treatment (not a
   sticky note) to read as a distinct, calmer callout. */
.s3-zine {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 56px;
  padding: 36px;
  background: var(--c-cream);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.s3-zine-cover {
  flex: 0 0 190px;
}

.s3-zine-cover img {
  width: 100%;
  display: block;
  box-shadow: 0 14px 34px rgba(31, 51, 80, 0.22);
}

.s3-zine-body {
  flex: 1 1 420px;
}

.s3-zine-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: 8px 0 14px;
}

.s3-zine-body p {
  color: var(--ink-soft);
  font-size: clamp(20px, 1.2vw, 3.5rem);
  line-height: 1.65;
  max-width: 64ch;
  margin: 0 0 22px;
}

@media (max-width: 700px) {
  .s3-zine {
    flex-direction: column;
    align-items: flex-start;
  }

  .s3-zine-cover {
    flex: 0 0 auto;
    max-width: 180px;
  }
}

/* ---------- section 4 — pointer-driven "Alter Imaginaries" + proof ---------- */
.s4 {
  position: relative;
  background: var(--c-navy);
  color: var(--paper);
  padding: clamp(70px, 9vw, 110px) 0;
  overflow: hidden;
}

/* fluid dot-grid background, ported from a CodePen (Fluid Grid Network
   Mouse Interaction) — shared by sections 4 and 5, one canvas per
   section (see the script at the bottom of index.html). Sits behind the
   section's own content, which needs its own stacking context to stay
   on top. */
.s4-grid,
.s5-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.s4-layout,
.s5 .wrap {
  position: relative;
  z-index: 1;
}

/* required by the ported wind-blown-text engine: .fly-text is the
   positioning context for its per-character overlay, .visually-hidden
   keeps the real text in the accessibility tree while the visible
   characters are individually positioned spans. */
.fly-text {
  position: relative;
}

.fly-char {
  will-change: transform, opacity;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.s4-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.s4-text-col {
  max-width: 720px;
}

.s4-flytext {
  font-family: var(--font-display);
  font-weight: 400;
  text-align: center;
  font-size: clamp(2.6rem, 5vw, 6rem);
  line-height: 1.05;
  margin: 0 0 28px;
}

.s4 .body-copy {
  text-align: center;
  margin: 0;
}

.s4 .body-copy p {
  font-size: clamp(20px, 1.2vw, 3.5rem);
  color: rgba(237, 227, 200, 0.82);
  margin: 0 0 12px;
}

/* ---------- proof gallery — ported from the "Vintalight" lightbox
   hover-effect demo: scattered polaroid-style photos that straighten
   and lift on hover, click opens a full-screen lightbox. Recolored to
   the palette (paper frames on navy, terracotta close button) and cut
   down from the demo's 6 photos to our 3 real ones. ---------- */
.s4-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}

.s4-photo {
  position: relative;
  width: 230px;
  background: var(--paper);
  padding: 14px 14px 0;
  margin: 0 -10px 34px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), box-shadow 0.5s;
}

.s4-photo:nth-child(1) {
  transform: rotate(-6deg) translateY(10px);
  z-index: 2;
}

.s4-photo:nth-child(2) {
  transform: rotate(4deg) translateY(-8px);
  z-index: 3;
}

.s4-photo:nth-child(3) {
  transform: rotate(-3deg) translateY(8px);
  z-index: 1;
}

.s4-photo:hover {
  transform: scale(1.08) rotate(0deg) translateY(0);
  z-index: 10;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.s4-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}

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

.s4-photo-frame::before {
  content: 'Lihat foto';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 51, 80, 0.55);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.25s;
}

.s4-photo:hover .s4-photo-frame::before {
  opacity: 1;
}

.s4-caption {
  padding: 12px 4px 16px;
  text-align: center;
}

.s4-caption .proof-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-mustard);
  display: block;
  margin-bottom: 6px;
}

.s4-caption h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--c-navy);
  margin: 0;
  line-height: 1.3;
}

@media (max-width: 700px) {
  .s4-photo {
    width: 76vw;
    max-width: 280px;
    margin: 0 0 36px;
  }

  .s4-photo:nth-child(1),
  .s4-photo:nth-child(2),
  .s4-photo:nth-child(3) {
    transform: none;
  }

  .s4-photo:hover {
    transform: scale(1.04);
  }
}

.s4-lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 38, 0.85);
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  transition: opacity 0.35s;
}

.s4-lightbox.open {
  opacity: 1;
  visibility: visible;
}

.s4-lightbox-figure {
  position: relative;
  max-width: min(640px, 90vw);
  width: 100%;
  background: var(--paper);
  padding: 18px 18px 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.92);
  transition: transform 0.35s;
}

.s4-lightbox.open .s4-lightbox-figure {
  transform: scale(1);
}

.s4-lightbox-frame {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}

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

.s4-lightbox-caption {
  padding: 16px 4px 22px;
  text-align: center;
}

.s4-lightbox-caption .proof-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-terracotta);
  display: block;
  margin-bottom: 6px;
}

.s4-lightbox-caption h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--c-navy);
  margin: 0;
}

.s4-lightbox-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-terracotta);
  border: 3px solid var(--paper);
  color: var(--paper);
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* ---------- section 5 — text-scramble as the statement itself, plain
   CTA button below with no effect, freed from the wireframe layout ---------- */
.s5 {
  position: relative;
  background: var(--c-navy);
  color: var(--paper);
  padding: clamp(90px, 13vw, 150px) 0;
  text-align: center;
  overflow: hidden;
}

.s5-scramble {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 6vw, 2.2rem);
  line-height: 1.3;
  max-width: 100%;
  margin: 0 auto 48px;
  min-height: 1.3em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* one line per phrase — only once the viewport is wide enough that the
   longest phrase (~54 characters) actually fits at a readable size */
@media (min-width: 720px) {
  .s5-scramble {
    font-size: clamp(1.1rem, 3vw, 3rem);
    white-space: nowrap;
  }
}

.s5-scramble .dud {
  opacity: 0.5;
}

.s5-subscribe {
  margin: 52px auto 0;
  max-width: 440px;
}

.s5-subscribe h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  margin: 0 0 18px;
}

.s5-subscribe .subform {
  justify-content: center;
}

.s5-subscribe .subform input {
  flex: 1 1 auto;
  border-radius: 999px;
  padding-left: 20px;
}

.s5-subscribe .toast {
  text-align: center;
}

.s5 .btn {
  background: transparent;
  border-color: var(--paper);
  color: var(--paper);
  font-size: 16px;
  padding: 16px 30px;
}

.s5 .btn:hover {
  background: var(--paper);
  color: var(--c-navy);
}

/* ---------- footer ---------- */
.sitefoot {
  padding: 34px 0;
  background: var(--c-navy);
  color: rgba(237, 227, 200, 0.6);
}

.sitefoot .wrap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
}