@charset "utf-8";
/* ==========================================================================
   PROPIX  /  Graphic Design & Creative Studio, Jaipur
   Editorial grid system. Yellow, black, white. No framework.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand, sampled from the Propix logo */
  --yellow:      #FFC907;
  --yellow-deep: #E8B400;
  --ink:         #0B0B0B;
  --ink-soft:    #191919;
  --paper:       #FFFFFF;
  --bone:        #F4F1E9;
  --bone-deep:   #E8E3D6;

  --text:        #0B0B0B;
  --text-muted:  #5A5751;
  --text-inv:    #FFFFFF;
  --text-inv-muted: #9C9890;

  --line:        rgba(11, 11, 11, .16);
  --line-strong: rgba(11, 11, 11, .42);
  --line-inv:    rgba(255, 255, 255, .20);

  --focus:       #FFC907;

  /* Type */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif:   "Instrument Serif", "Times New Roman", Georgia, serif;

  --fs-mega:  clamp(3.4rem, 12.5vw, 8.5rem);
  --fs-h1:    clamp(2.5rem, 6.6vw, 5.25rem);
  --fs-h2:    clamp(1.9rem, 4.2vw, 3.25rem);
  --fs-h3:    clamp(1.25rem, 1.6vw, 1.55rem);
  --fs-lede:  clamp(1.125rem, 1.6vw, 1.5rem);
  --fs-body:  clamp(1rem, .35vw + .92rem, 1.125rem);
  --fs-sm:    .875rem;
  --fs-xs:    .8125rem;
  --fs-label: .6875rem;

  /* Space */
  --gut:     clamp(1.25rem, 4vw, 4rem);
  --s-1:     .5rem;
  --s-2:     1rem;
  --s-3:     1.5rem;
  --s-4:     2rem;
  --s-5:     3rem;
  --s-6:     4.5rem;
  --s-7:     6.5rem;
  --s-sec:   clamp(4rem, 9vw, 8.5rem);

  --maxw:    1500px;
  --measure: 62ch;

  --ease:    cubic-bezier(.22, .61, .36, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);
  --t-fast:  .18s;
  --t-mid:   .32s;
  --t-slow:  .6s;

  --nav-h:   72px;
}

@media (min-width: 900px) { :root { --nav-h: 86px; } }

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-dark :focus-visible, .sec--dark :focus-visible { outline-color: var(--yellow); }

::selection { background: var(--yellow); color: var(--ink); }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: 900px; }
.wrap--mid    { max-width: 1140px; }

.sec { padding-block: var(--s-sec); position: relative; }
.sec--tight  { padding-block: clamp(3rem, 6vw, 5rem); }
.sec--rule   { border-top: 1px solid var(--line); }
.sec--bone   { background: var(--bone); }
.sec--dark   { background: var(--ink); color: var(--text-inv); }
.sec--dark .sec-num,
.sec--dark .muted { color: var(--text-inv-muted); }
.sec--dark .rule,
.sec--dark .sec-head { border-color: var(--line-inv); }
.sec--yellow { background: var(--yellow); color: var(--ink); }

.grid { display: grid; gap: var(--gut); }
.g-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Section header: hairline + number in the margin + title */
.sec-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 2px solid currentColor;
  margin-bottom: var(--s-5);
}
@media (min-width: 860px) {
  .sec-head {
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--s-4);
  }
}
.sec-num {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted);
  letter-spacing: .02em;
}
.sec-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.028em;
  font-stretch: 95%;
  text-wrap: balance;
}
.sec-aside {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 34ch;
  line-height: 1.5;
}
.sec--dark .sec-aside { color: var(--text-inv-muted); }

/* --------------------------------------------------------------------------
   4. TYPE UTILITIES
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.015em; }

.label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-muted);
}
.sec--dark .label, .label--inv { color: var(--yellow); }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.45;
  letter-spacing: -.012em;
  max-width: 46ch;
  font-weight: 400;
}
.muted { color: var(--text-muted); }
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0; }
.italic { font-style: italic; }
.hl { color: var(--yellow); }
.mark-yellow {
  background: var(--yellow);
  color: var(--ink);
  padding: 0 .14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.nowrap { white-space: nowrap; }

.prose { max-width: var(--measure); }
.prose p { margin-bottom: 1.15em; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: 2.2em 0 .6em;
  letter-spacing: -.022em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  margin: 1.9em 0 .5em;
  font-weight: 700;
}
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 0; }
.prose li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .55em;
  line-height: 1.6;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: .15rem; top: .68em;
  width: .42rem; height: .42rem;
  background: var(--yellow);
  outline: 1px solid var(--ink);
}
.prose ol { counter-reset: n; }
.prose ol > li { counter-increment: n; }
.prose ol > li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0; top: .12em;
  font-size: .78em;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.prose strong { font-weight: 700; }
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
  text-decoration-color: var(--yellow);
  transition: background var(--t-fast) var(--ease);
}
.prose a:hover { background: var(--yellow); text-decoration-color: transparent; }
.prose .lede {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.4;
  letter-spacing: -.015em;
  max-width: none;
  margin-bottom: 1.5em;
  padding-bottom: 1.1em;
  border-bottom: 1px solid var(--line);
}
.prose blockquote {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.24;
  margin: 1.6em 0;
  padding-left: 1.1rem;
  border-left: 4px solid var(--yellow);
}

/* --------------------------------------------------------------------------
   5. BUTTONS & LINKS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 52px;
  padding: .85rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--yellow);
  transform: translateY(101%);
  transition: transform var(--t-mid) var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--ink); }

.btn--yellow { --btn-bg: var(--yellow); --btn-fg: var(--ink); }
.btn--yellow::after { background: var(--ink); }
.btn--yellow:hover, .btn--yellow:focus-visible { color: var(--paper); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); }
.sec--dark .btn--ghost, .on-dark .btn--ghost {
  --btn-fg: var(--paper);
  border-color: var(--paper);
}
.sec--dark .btn--ghost:hover, .on-dark .btn--ghost:hover { color: var(--ink); }

.btn--lg { min-height: 64px; padding: 1.1rem 2rem; font-size: .9375rem; }
.ar { width: 1em; height: 1em; flex: none; }
.btn .ar { transition: transform var(--t-mid) var(--ease); }
.ln-arrow .ar, .svc__go .ar { width: .95em; height: .95em; }
.client__go svg, .svc__go svg { width: .85em; height: .85em; flex: none; }
.btn:hover .ar { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Animated underline link */
.ln {
  display: inline-block;
  position: relative;
  font-weight: 600;
  padding-bottom: 2px;
}
.ln::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-mid) var(--ease);
}
.ln:hover::after, .ln:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.ln-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--yellow);
  padding-bottom: .35rem;
  transition: gap var(--t-fast) var(--ease);
}
.ln-arrow:hover { gap: .85rem; }

/* --------------------------------------------------------------------------
   6. HEADER / NAV
   -------------------------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--yellow);
  color: var(--ink);
  padding: 1rem 1.5rem;
  font-weight: 700;
}
.skip:focus { left: 0; }

.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: transform var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
}
.hdr--hidden { transform: translateY(-101%); }
.hdr__in {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.brand { display: flex; align-items: center; gap: .7rem; flex: none; }
.brand__mark {
  width: auto;
  height: 30px;
}
@media (min-width: 900px) { .brand__mark { height: 36px; } }
.brand__txt {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--text-muted);
  border-left: 1px solid var(--line);
  padding-left: .7rem;
  max-width: 13ch;
  display: none;
}
@media (min-width: 1100px) { .brand__txt { display: block; } }

.nav { display: none; }
@media (min-width: 1000px) {
  .nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
}
.nav a {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  position: relative;
  padding: .4rem 0;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-mid) var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.hdr__cta { display: none; }
@media (min-width: 1000px) { .hdr__cta { display: inline-flex; min-height: 44px; padding: .7rem 1.25rem; } }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px; height: 48px;
  margin-right: -10px;
  align-items: center;
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--ink);
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile menu */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 1.5rem) var(--gut) 2rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  /* visibility flips instantly on open (so the first link is focusable right
     away) and is delayed on close until the fade has finished. */
  transition: opacity var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease),
              visibility 0s linear var(--t-mid);
}
.mnav[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease),
              visibility 0s linear 0s;
}
.mnav ul { border-top: 1px solid var(--line-inv); }
.mnav li { border-bottom: 1px solid var(--line-inv); }
.mnav a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .75rem 0;
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.mnav a span {
  font-family: var(--font-serif);
  font-size: .9rem;
  color: var(--yellow);
}
.mnav a[aria-current="page"] { color: var(--yellow); }
.mnav__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: 1rem; }
body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: 0; position: relative; }
.hero__grid { display: grid; gap: var(--s-4); align-items: end; }
@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-4);
    align-items: center;
  }
}
.hero__kick {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: var(--s-3);
}
.hero__kick .dot {
  width: 9px; height: 9px; background: var(--yellow);
  border: 1px solid var(--ink); flex: none;
  animation: blip 2.6s var(--ease) infinite;
}
@keyframes blip { 0%,70%,100% { opacity: 1 } 80% { opacity: .25 } }

.hero h1 {
  font-size: var(--fs-mega);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -.045em;
  font-stretch: 88%;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero h1 .kept {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  font-stretch: normal;
  letter-spacing: -.02em;
  padding-right: .06em;
}
.hero__sub {
  margin-top: var(--s-3);
  max-width: 44ch;
  font-size: var(--fs-lede);
  line-height: 1.42;
  letter-spacing: -.01em;
}
.hero__acts { margin-top: var(--s-4); }
.hero__meta {
  margin-top: var(--s-4);
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border-top: 1px solid var(--line);
  padding-top: var(--s-2);
}
.hero__meta b { color: var(--ink); font-weight: 700; }

/* Range strip: one image from each kind of work, used on the About page.
   Deliberately NOT .deck, whose figures are absolutely positioned. */
.strip {
  display: grid;
  gap: clamp(.6rem, 2vw, 1rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) {
  .strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.strip > figure { margin: 0; }

/* Marquee ticker */
.ticker {
  background: var(--yellow);
  border-block: 2px solid var(--ink);
  overflow: hidden;
  padding-block: .8rem;
  margin-top: var(--s-5);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: slide 42s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker span {
  font-size: clamp(.9rem, 1.5vw, 1.15rem);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding-inline: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  white-space: nowrap;
  color: var(--ink);
}
.ticker span::after {
  content: "";
  width: 8px; height: 8px;
  background: var(--ink);
  transform: rotate(45deg);
  flex: none;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* Short viewports.
   The headline is sized off vw, which knows nothing about how much vertical
   room is left. A 1366x768 laptop has roughly 600px of viewport once Chrome's
   tabs, address bar and bookmarks are accounted for, and at 12.5vw the headline
   alone ate all of it. These bands step the type down and tighten the furniture
   so the two calls to action stay above the fold. Screens taller than 860px are
   untouched and keep the full 176px headline. */
@media (min-width: 1000px) and (max-height: 860px) {
  :root { --fs-mega: min(9.5vw, 7.5rem); }
  .hero { padding-top: clamp(1rem, 2.5vh, 2rem); }
  .hero__kick { margin-bottom: .85rem; }
  .hero__sub {
    margin-top: .9rem;
    font-size: 1.05rem;
    line-height: 1.4;
    max-width: 46ch;
  }
  .hero__acts { margin-top: 1.3rem; }
  .hero__acts .btn--lg { min-height: 52px; padding: .85rem 1.4rem; font-size: var(--fs-sm); }
  .hero__meta { margin-top: 1.1rem; padding-top: .75rem; }
  .ticker { margin-top: 1.75rem; }
}
@media (min-width: 1000px) and (max-height: 780px) {
  :root { --fs-mega: min(8.5vw, 6.5rem); }
  .hero__meta { display: none; }
}
@media (min-width: 1000px) and (max-height: 680px) {
  :root { --fs-mega: min(7.5vw, 5.5rem); }
  .hero__sub { margin-top: .75rem; font-size: 1rem; }
  .hero__acts { margin-top: 1.1rem; }
}
/* Phone held sideways: single-column layout, but barely any height. */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --fs-mega: min(9vw, 4.5rem); }
  .hero { padding-top: 1rem; }
  .hero__sub { margin-top: .75rem; font-size: 1rem; }
  .hero__acts { margin-top: 1rem; }
  .hero__meta { display: none; }
}

/* Card deck of real work */
.deck {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}

@media (min-width: 1000px) {
  /* Fill the column in BOTH directions.
     The cards were sized off width alone (a % of the deck), so in a tall
     column - and the column is as tall as a 176px headline makes it - they
     could only ever cover the bottom strip and the top right stayed empty.
     Making the deck a size container lets each card take min(width, height),
     so it grows to whichever dimension is actually binding. */
  .deck {
    align-self: stretch;
    aspect-ratio: auto;
    max-width: none;
    min-height: 340px;
    container-type: size;
    /* bleed into the page gutter so nothing is stranded at the right edge */
    width: calc(100% + var(--gut));
    margin-right: calc(-1 * var(--gut));
  }
}

.deck figure {
  position: absolute;
  width: 62%;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 18px 40px -22px rgba(11,11,11,.55);
  transition: transform var(--t-slow) var(--ease);
  will-change: transform;
}
/* <picture> is inline by default, which added line-box height under the image
   and let the figure's white background show through. */
.deck figure picture { display: block; }
.deck figure img { display: block; width: 100%; height: auto; }

/* Horizontal placement, rotation and stacking. Vertical anchoring is set
   separately below, and only ONE of top/bottom may ever be active: an
   absolutely positioned box given both is stretched between them, which
   inflates the card past its image. */
.deck .d1 { left: 0;   transform: rotate(-8deg); z-index: 1; }
.deck .d2 { left: 19%; transform: rotate(2deg);  z-index: 3; }
.deck .d3 { right: 0;  transform: rotate(10deg); z-index: 2; }

/* Phone and tablet: one column, so the fan hangs off the bottom. */
.deck .d1 { top: auto; bottom: 6%; }
.deck .d2 { top: auto; bottom: 16%; }
.deck .d3 { top: auto; bottom: 3%; }

@media (min-width: 1000px) {
  /* cqw/cqh need the size container on .deck; the 62% above is the fallback. */
  .deck figure { width: min(64cqw, 78cqh); }
  /* Anchor from the top so the fan sits in the middle of the column. Anchoring
     from the bottom put every pixel of slack above the cards, which is the gap
     that showed as empty space on a tall screen. */
  .deck .d1 { top: 15%; bottom: auto; }
  .deck .d2 { top: 4%;  bottom: auto; }
  .deck .d3 { top: 11%; bottom: auto; }
}
.deck:hover .d1 { transform: rotate(-12deg) translate(-5%, -3%); }
.deck:hover .d2 { transform: rotate(0deg) translateY(-6%); }
.deck:hover .d3 { transform: rotate(14deg) translate(5%, -3%); }
.deck__tag {
  position: absolute;
  right: 0; top: 0;
  z-index: 5;
  background: var(--yellow);
  border: 2px solid var(--ink);
  padding: .5rem .75rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(4deg);
}

/* --------------------------------------------------------------------------
   8. WORK GRID
   -------------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.filters button {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .55rem .9rem;
  border: 1px solid var(--line-strong);
  min-height: 44px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.filters button:hover { background: var(--bone); }
.filters button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Portfolio images: two up on a phone (they are portrait thumbnails),
   then as many 240px+ columns as fit. */
.work-grid {
  display: grid;
  gap: clamp(.75rem, 3vw, var(--gut));
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .work-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
}
/* Video cards: one up on a phone so the 16:9 frame stays legible. */
.work-grid--2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
  .work-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
}
/* Client cards carry long names, so they need more room than a thumbnail. */
.card-grid {
  display: grid;
  gap: clamp(.75rem, 3vw, var(--gut));
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px)  { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card { display: block; position: relative; }
.card__media {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--bone);
  border: 1px solid rgba(11, 11, 11, .28);
  /* Each project sets --card-ar so invitations, social posts and logos keep
     their own proportions instead of being forced into one crop. */
  aspect-ratio: var(--card-ar, 5 / 7);
}
.sec--dark .card__media { border-color: var(--line-inv); }
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
/* Mixed-aspect work (photography, magazine covers) is letterboxed on the bone
   field rather than cropped. Nothing gets cut off. */
.card__media--contain img { object-fit: contain; }
.card__media--contain { background: var(--bone-deep); }
.card:hover .card__media--contain img { transform: scale(1.03); }
.card:hover .card__media img, .card:focus-visible .card__media img { transform: scale(1.045); }
.card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.card:hover .card__media::after { opacity: .10; }
.card__view {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.9);
  background: var(--yellow);
  border: 2px solid var(--ink);
  padding: .6rem 1rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
  z-index: 2;
  pointer-events: none;
}
.card:hover .card__view, .card:focus-visible .card__view {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
.card__body {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding-top: .7rem;
  margin-top: .7rem;
  border-top: 1px solid var(--line);
}
@media (max-width: 639px) {
  .card__t { font-size: .9rem; }
  .card__m { font-size: .75rem; }
  .card__idx { font-size: .85rem; }
}
.card__idx {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--text-muted);
  flex: none;
}
.card__t { display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.card__m { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: .2rem; }
.sec--dark .card__body { border-color: var(--line-inv); }
.sec--dark .card__m, .sec--dark .card__idx { color: var(--text-inv-muted); }

/* Featured editorial row: image + hanging caption */
.proj {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .proj { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-5); align-items: start; }
  .proj--flip { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .proj--flip > :first-child { order: 2; }
}
.proj + .proj { margin-top: var(--s-6); }
.proj__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: .75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .5rem;
  scrollbar-width: thin;
}
.proj__strip > * { scroll-snap-align: start; }
.proj__strip::-webkit-scrollbar { height: 6px; }
.proj__strip::-webkit-scrollbar-track { background: var(--bone); }
.proj__strip::-webkit-scrollbar-thumb { background: var(--ink); }
.proj__hint {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); margin-top: .6rem;
}
.proj__hint .ar { color: var(--yellow-deep); }
@media (min-width: 620px) {
  .proj__strip { grid-auto-columns: minmax(220px, 1fr); }
}
.proj__no {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: .8;
  color: var(--yellow);
  -webkit-text-stroke: 1px var(--ink);
  display: block;
  margin-bottom: .4rem;
}
.sec--dark .proj__no { -webkit-text-stroke: 1px var(--paper); }
.proj__t { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.03em; line-height: 1; }
.proj__kick { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-top: .5rem; }
.proj__blurb { margin-top: var(--s-2); max-width: 42ch; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }
.sec--dark .proj__blurb, .sec--dark .proj__kick { color: var(--text-inv-muted); }
.dl { margin-top: var(--s-3); border-top: 1px solid var(--line); }
.sec--dark .dl, .sec--dark .proj { border-color: var(--line-inv); }
.dl > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.sec--dark .dl > div { border-color: var(--line-inv); }
.dl dt { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-size: var(--fs-label); padding-top: .2rem; }
.sec--dark .dl dt { color: var(--text-inv-muted); }

/* Video cards */
.vid { display: block; position: relative; }
.vid__media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line);
}
.sec--dark .vid__media { border-color: var(--line-inv); }
.vid__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease), opacity var(--t-mid) var(--ease); opacity: .82; }
.vid:hover .vid__media img { transform: scale(1.05); opacity: 1; }
.vid__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform var(--t-mid) var(--ease);
}
.vid:hover .vid__play { transform: translate(-50%, -50%) scale(1.12); }
.vid__play svg { width: 20px; height: 20px; fill: var(--ink); margin-left: 3px; }

/* Client cards: typographic, no invented artwork */
.client {
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: var(--s-3);
  border: 1px solid var(--line);
  background: var(--paper);
  position: relative;
  overflow: hidden;
  transition: color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.sec--dark .client { background: transparent; border-color: var(--line-inv); }
.client::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--yellow);
  transform: translateY(100%);
  transition: transform var(--t-mid) var(--ease);
}
.client:hover::before, .client:focus-visible::before { transform: translateY(0); }
.client > * { position: relative; z-index: 1; }
.client:hover, .client:focus-visible { color: var(--ink); border-color: var(--ink); }
.client__n { font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; }
.client__s { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-top: .5rem; }
.sec--dark .client__s { color: var(--text-inv-muted); }
.client:hover .client__s { color: var(--ink); }
.client__w { font-size: var(--fs-xs); line-height: 1.5; margin-top: auto; padding-top: var(--s-3); opacity: .82; }
.client__go {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  margin-top: .8rem;
}
.client__go svg { width: .8em; height: .8em; }

/* --------------------------------------------------------------------------
   9. SERVICES / PROCESS / LISTS
   -------------------------------------------------------------------------- */
.svc-list { border-top: 1px solid var(--line); }
.sec--dark .svc-list { border-color: var(--line-inv); }
.svc {
  display: grid;
  gap: .4rem var(--s-4);
  grid-template-columns: 1fr;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding-left var(--t-mid) var(--ease);
}
.sec--dark .svc { border-color: var(--line-inv); }
@media (min-width: 860px) {
  .svc {
    grid-template-columns: 4.5rem minmax(0, 8fr) minmax(0, 9fr) auto;
    align-items: baseline;
  }
  a.svc:hover { padding-left: 1rem; }
}
.svc__n { font-family: var(--font-serif); font-size: 1.15rem; color: var(--text-muted); }
.sec--dark .svc__n { color: var(--text-inv-muted); }
.svc__t {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.05;
  transition: color var(--t-fast) var(--ease);
}
.svc__d { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; max-width: 48ch; }
.sec--dark .svc__d { color: var(--text-inv-muted); }
.svc__go {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .4rem;
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
@media (max-width: 859px) { .svc__go { opacity: 1; transform: none; margin-top: .4rem; } }
a.svc:hover .svc__go, a.svc:focus-visible .svc__go { opacity: 1; transform: none; }
a.svc:hover .svc__t { color: var(--yellow-deep); }
.sec--dark a.svc:hover .svc__t { color: var(--yellow); }

/* Process: offset stair layout rather than a six-card grid */
.steps { display: grid; gap: 0; counter-reset: st; }
.step {
  display: grid;
  gap: .5rem var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line-inv);
  align-items: start;
}
@media (min-width: 800px) {
  .step { grid-template-columns: 8rem minmax(0, 10rem) minmax(0, 1fr); }
  .step:nth-child(2) { padding-left: 4%; }
  .step:nth-child(3) { padding-left: 8%; }
  .step:nth-child(4) { padding-left: 12%; }
  .step:nth-child(5) { padding-left: 16%; }
  .step:nth-child(6) { padding-left: 20%; }
}
.step__n {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: .8;
  color: var(--yellow);
}
.step__t { font-size: clamp(1.3rem, 2.2vw, 1.75rem); letter-spacing: -.025em; }
.step__d { font-size: var(--fs-sm); color: var(--text-inv-muted); line-height: 1.6; max-width: 52ch; }

/* Value grid */
.vals {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px)  { .vals { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .vals { grid-template-columns: repeat(3, 1fr); } }
.val {
  padding: var(--s-4) var(--s-3) var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .val { border-right: 1px solid var(--line); padding-inline: var(--s-3); }
  .val:nth-child(2n) { border-right: 0; }
}
@media (min-width: 1080px) {
  .val:nth-child(2n) { border-right: 1px solid var(--line); }
  .val:nth-child(3n) { border-right: 0; }
}
.val h3 { font-size: 1.2rem; margin-bottom: .55rem; }
.val h3::before {
  content: "";
  display: block;
  width: 26px; height: 5px;
  background: var(--yellow);
  margin-bottom: .9rem;
}
.val p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }

/* Tag pills */
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  padding: .45rem .8rem;
  border: 1px solid var(--line-strong);
  white-space: nowrap;
}
.sec--dark .tag { border-color: var(--line-inv); }
.tag--fill { background: var(--yellow); border-color: var(--ink); font-weight: 700; }

/* Checklist */
.checks { display: grid; gap: .1rem; }
@media (min-width: 760px) { .checks { grid-template-columns: repeat(2, 1fr); gap: .1rem var(--s-4); } }
.checks li {
  display: flex; gap: .8rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.sec--dark .checks li { border-color: var(--line-inv); }
.checks li::before {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  margin-top: .45rem;
  background: var(--yellow);
  outline: 1px solid currentColor;
}

/* --------------------------------------------------------------------------
   10. PIXIE (mascot)
   -------------------------------------------------------------------------- */
.pixie-block {
  display: grid;
  gap: var(--s-4);
  align-items: center;
}
@media (min-width: 840px) {
  .pixie-block { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--s-5); }
}
.pixie-img {
  width: 100%;
  max-width: 280px;
  margin-inline: auto;
  filter: drop-shadow(0 22px 28px rgba(11,11,11,.28));
  animation: bob 5s ease-in-out infinite;
  cursor: pointer;
}
@keyframes bob { 0%,100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-10px) rotate(-1.2deg) } }
.pixie-img.is-wiggle { animation: wiggle .6s var(--ease); }
@keyframes wiggle {
  0%,100% { transform: rotate(0) scale(1) }
  20% { transform: rotate(-7deg) scale(1.05) }
  45% { transform: rotate(6deg) scale(1.05) }
  70% { transform: rotate(-4deg) scale(1.02) }
}
.speech {
  position: relative;
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: var(--s-3);
  max-width: 46ch;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.speech::before, .speech::after {
  content: "";
  position: absolute;
  width: 0; height: 0;
  border-style: solid;
}
.speech::before {
  left: 2rem; bottom: -16px;
  border-width: 16px 14px 0 0;
  border-color: var(--ink) transparent transparent transparent;
}
.speech::after {
  left: 2.2rem; bottom: -12px;
  border-width: 12px 10px 0 0;
  border-color: var(--yellow) transparent transparent transparent;
}
@media (min-width: 840px) {
  .speech::before { left: -16px; bottom: auto; top: 2rem; border-width: 0 16px 14px 0; border-color: transparent var(--ink) transparent transparent; }
  .speech::after  { left: -12px; bottom: auto; top: 2.2rem; border-width: 0 12px 10px 0; border-color: transparent var(--yellow) transparent transparent; }
}
.speech b { font-weight: 800; }

/* Floating scroll-top Pixie */
.pixie-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--yellow);
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.9);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid);
  box-shadow: 0 10px 24px -10px rgba(11,11,11,.6);
}
.pixie-top[data-show="true"] { opacity: 1; visibility: visible; transform: none; }
.pixie-top img { width: 46px; height: auto; transform: translateY(5px); transition: transform var(--t-mid) var(--ease); }
.pixie-top:hover img { transform: translateY(0) scale(1.08); }
.pixie-top::after {
  content: "TOP";
  position: absolute;
  inset-inline: 0; bottom: 2px;
  font-size: 8px; font-weight: 800; letter-spacing: .14em;
  text-align: center;
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.pixie-top:hover::after { opacity: 1; }

/* Pixie peeking over a section edge */
.peek {
  position: absolute;
  right: clamp(-10px, 2vw, 40px);
  bottom: 0;
  width: clamp(110px, 16vw, 190px);
  pointer-events: none;
  z-index: 2;
  transform: translateY(14%);
}
@media (max-width: 720px) { .peek { display: none; } }

/* --------------------------------------------------------------------------
   11. CTA / FOOTER
   -------------------------------------------------------------------------- */
.cta-big { position: relative; overflow: hidden; }
.cta-big h2 {
  font-size: clamp(2.4rem, 8vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.04em;
  font-weight: 900;
  font-stretch: 92%;
  max-width: 18ch;
}
.cta-big .serif { font-stretch: normal; }

.ftr { background: var(--ink); color: var(--text-inv); padding-top: var(--s-6); }
.ftr__top {
  display: grid;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line-inv);
}
@media (min-width: 900px) { .ftr__top { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
.ftr h3 {
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: var(--s-2);
  font-weight: 700;
}
.ftr li { margin-bottom: .55rem; }
.ftr li a { font-size: var(--fs-sm); color: var(--text-inv-muted); transition: color var(--t-fast) var(--ease); }
.ftr li a:hover { color: var(--yellow); }
.ftr__brand { display: flex; align-items: center; gap: .8rem; margin-bottom: var(--s-2); }
.ftr__brand img { height: 40px; width: auto; }
.ftr__desc { font-size: var(--fs-sm); color: var(--text-inv-muted); max-width: 34ch; line-height: 1.6; }
.ftr__bot {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  justify-content: space-between; align-items: center;
  padding-block: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--text-inv-muted);
}
.ftr__bot nav { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.ftr__bot a:hover { color: var(--yellow); }
.soc { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--fs-sm); font-weight: 600; }
.soc svg { width: 1.15em; height: 1.15em; fill: currentColor; }
.soc:hover { color: var(--yellow); }

/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-3); }
.fgrid { display: grid; gap: var(--s-3); }
@media (min-width: 680px) { .fgrid--2 { grid-template-columns: repeat(2, 1fr); } }
.field { display: grid; gap: .45rem; }
.field label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field .req { color: #B3261E; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: .85rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font-size: 1rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230B0B0B' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.5rem;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--yellow);
}
.field .help { font-size: var(--fs-xs); color: var(--text-muted); }
.field .err {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #B3261E;
  display: none;
}
.field[data-invalid="true"] .err { display: block; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: #B3261E; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

.form-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 52ch;
}
.form-status {
  display: none;
  padding: var(--s-3);
  border: 2px solid var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.form-status[data-state="ok"]   { display: block; background: var(--yellow); }
.form-status[data-state="err"]  { display: block; background: #FDECEA; border-color: #B3261E; }

/* --------------------------------------------------------------------------
   13. FAQ / ACCORDION
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 1.15rem 0;
  text-align: left;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.35;
  min-height: 56px;
  transition: color var(--t-fast) var(--ease);
}
.acc__q:hover { color: var(--yellow-deep); }
.acc__ic {
  flex: none;
  width: 24px; height: 24px;
  position: relative;
  margin-top: .2rem;
}
.acc__ic::before, .acc__ic::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--ink);
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
}
.acc__ic::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.acc__ic::after  { width: 2px; height: 16px; transform: translate(-50%, -50%); }
.acc__q[aria-expanded="true"] .acc__ic::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.acc__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-mid) var(--ease-io);
}
/* The button sits inside its heading, so the open state is carried by the item.
   JS mirrors aria-expanded onto .is-open; no-JS falls back to everything open. */
.acc__item.is-open > .acc__a { grid-template-rows: 1fr; }
html.no-js .acc__a { grid-template-rows: 1fr; }
html.no-js .acc__ic { display: none; }
.acc__a > div { overflow: hidden; }
.acc__a p {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 68ch;
  padding-bottom: 1.3rem;
}
.acc__a a { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: .15em; color: var(--ink); }
.acc__a a:hover { background: var(--yellow); }

/* --------------------------------------------------------------------------
   14. BLOG
   -------------------------------------------------------------------------- */
.post-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.post-row {
  display: grid;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: padding-left var(--t-mid) var(--ease);
}
@media (min-width: 900px) {
  .post-row { grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto; }
  .post-row:hover { padding-left: .9rem; }
}
.post-row__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bone);
}
.post-row__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.post-row:hover .post-row__img img { transform: scale(1.05); }
.post-row h3 { font-size: clamp(1.3rem, 2.3vw, 1.85rem); letter-spacing: -.028em; line-height: 1.08; margin-bottom: .5rem; }
.post-row:hover h3 { color: var(--yellow-deep); }
.post-row p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; max-width: 58ch; }
.post-meta {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .7rem;
  font-weight: 600;
}
.post-meta .dotsep { color: var(--yellow-deep); }

.crumbs {
  display: flex; flex-wrap: wrap; gap: .4rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding-block: var(--s-3);
}
.crumbs li { display: flex; gap: .4rem; align-items: center; }
.crumbs li + li::before { content: "/"; color: var(--line-strong); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.article-hero { border-top: 2px solid var(--ink); padding-top: var(--s-3); }
.article-hero h1 { font-size: clamp(2rem, 5.4vw, 4rem); letter-spacing: -.035em; line-height: .98; max-width: 20ch; }
.article-fig { margin-block: var(--s-4); border: 1px solid var(--line); overflow: hidden; }
.article-fig img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 26%;
}
@media (max-width: 620px) { .article-fig img { aspect-ratio: 4 / 3; } }
.article-body { display: grid; gap: var(--s-5); }
@media (min-width: 1000px) {
  .article-body { grid-template-columns: minmax(0, 1fr) minmax(0, 270px); gap: var(--s-6); align-items: start; }
}
.aside-card {
  border: 1px solid var(--line);
  padding: var(--s-3);
  position: sticky;
  top: calc(var(--nav-h) + 20px);
}
.aside-card h3 { font-size: 1.05rem; margin-bottom: .7rem; }
.aside-card p { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6; margin-bottom: var(--s-2); }
.toc li { border-top: 1px solid var(--line); }
.toc a { display: block; padding: .6rem 0; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-muted); }
.toc a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   15. LIGHTBOX
   -------------------------------------------------------------------------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 8, 8, .96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(.75rem, 3vw, 2.5rem);
}
.lb[data-open="true"] { display: flex; }
.lb__stage {
  position: relative;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  align-items: center;
}
.lb__stage img {
  max-height: calc(100vh - 11rem);
  max-width: 100%;
  width: auto;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,.18);
  animation: lbin .34s var(--ease);
}
@keyframes lbin { from { opacity: 0; transform: scale(.985) } to { opacity: 1; transform: none } }
.lb__frame { width: min(1100px, 100%); aspect-ratio: 16/9; border: 0; }
.lb__cap {
  color: #EDEAE4;
  font-size: var(--fs-xs);
  text-align: center;
  max-width: 62ch;
  line-height: 1.5;
}
.lb__cap b { color: var(--yellow); font-weight: 700; }
.lb__btn {
  position: absolute;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  z-index: 2;
}
.lb__btn:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.lb__btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.lb__close { top: clamp(.75rem, 3vw, 2rem); right: clamp(.75rem, 3vw, 2rem); position: fixed; }
.lb__prev { left: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); position: fixed; }
.lb__next { right: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); position: fixed; }
@media (max-width: 620px) {
  .lb__prev { left: .5rem; }
  .lb__next { right: .5rem; }
  .lb__btn { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   16. MOTION / REVEAL
   -------------------------------------------------------------------------- */
[data-rv] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .68s var(--ease), transform .68s var(--ease);
  transition-delay: var(--rv-d, 0ms);
}
[data-rv].is-in { opacity: 1; transform: none; }
[data-rv="fade"] { transform: none; }
[data-rv="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .85s var(--ease);
}
[data-rv="clip"].is-in { clip-path: inset(0 0 0 0); }

html.no-js [data-rv] { opacity: 1; transform: none; clip-path: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-rv] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .ticker__track { animation: none; }
}

/* --------------------------------------------------------------------------
   17. MISC
   -------------------------------------------------------------------------- */
.page-head { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.page-head h1 {
  font-size: clamp(2.6rem, 9vw, 7rem);
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.045em;
  font-stretch: 90%;
  text-transform: uppercase;
}
.page-head .serif { font-stretch: normal; text-transform: none; }
.page-head__grid { display: grid; gap: var(--s-3); }
@media (min-width: 960px) {
  .page-head__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-5); align-items: end; }
}

.stat-row {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
.stat { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) {
  .stat { border-bottom: 0; border-right: 1px solid var(--line); padding-inline: var(--s-3); }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { border-right: 0; }
}
.stat dt { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .4rem; }
.stat dd { font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }

.split { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); } }
@media (min-width: 900px) { .split--sidebar { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); } }

.sticky-note { position: sticky; top: calc(var(--nav-h) + 24px); }

.bigquote {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 4.4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  max-width: 22ch;
}
.bigquote em { font-style: italic; }

.err-code {
  font-family: var(--font-serif);
  font-size: clamp(6rem, 26vw, 20rem);
  line-height: .78;
  color: var(--yellow);
  -webkit-text-stroke: 2px var(--ink);
}

@media print {
  .hdr, .ftr, .pixie-top, .ticker, .lb, .mnav, .filters { display: none !important; }
  body { color: #000; background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}