/* ============================================================================
   MTL STUDENTS · Direction B « Soleil »
   ----------------------------------------------------------------------------
   The counterpart to a/nuit.css, not a recolour of it. Same brand, opposite
   temperature: warm paper ground, large colour blocks used as structure, hard
   offset shadows instead of soft ones, chunky uppercase display type.

   Where Direction A separates sections with a hairline and a change of near
   black, Direction B separates them with a change of colour. The section
   rhythm IS the layout system: paper → pink → sand → oxblood → orange →
   paper → gold → ink. That is the single biggest structural difference
   between the two directions and everything else follows from it.

   ---------------------------------------------------------------- colour ----
   Nothing here is invented. Every value is either taken from something the
   client already owns or is arithmetic on one of those values, and the
   arithmetic is written down.

   | token           | value     | origin                                     |
   |-----------------|-----------|--------------------------------------------|
   | --pink          | #F860C0   | her logo, the wordmark                     |
   | --pink-deep     | #D8329C   | her logo pink, darkened (also in nuit.css) |
   | --orange        | #F89040   | her logo, globe wireframe + sparkles       |
   | --gold          | #F8D870   | her logo, the word ASSOCIATION             |
   | --oxblood       | #4A0810   | sampled from her studio portrait backdrop  |
   | --ink           | #240408   | --oxblood multiplied to 48% brightness     |
   | --paper         | #F7EEDE   | nuit.css --cream #F7F0E8 + 8% --gold       |
   | --paper-2       | #F7EBCE   | nuit.css --cream #F7F0E8 + 22% --gold      |
   | --berry         | #911D56   | midpoint of --oxblood and --pink-deep      |

   --paper exists because this direction needs a ground and Direction A only
   ever needed a type colour. It is that same cream warmed one step toward the
   gold rather than a new hue, so the two directions still share a family.

   --berry exists for one reason: contrast. Computed against --paper, --pink
   is 2.5:1 and --pink-deep is 3.8:1, so neither can carry small type on this
   ground. --berry is 7.2:1 and is therefore the only pink allowed on body
   text and inline links. Pink, orange and gold are fills here, never type.

   The pairings this direction actually uses, all computed the same way:
   ink on paper 16.6:1 · ink on pink 6.8:1 · ink on orange 8.3:1 ·
   ink on gold 13.7:1 · paper on oxblood 13.7:1 · gold on oxblood 11.3:1.

   ------------------------------------------------------------------ type ----
   Display: GABARITO 700/900 (Naipe). Body: KARLA. Two families, both real
   Google Fonts, neither is Archivo.

   Gabarito is a geometric sans with rounded, slightly inflated bowls and a
   warm, unserious 900 weight: the closest thing on Google Fonts to the
   logo's chunky bubble lettering that is still a working text face rather
   than a costume. It is also economical enough to set French at poster size,
   which matters more than it sounds. Syne was the first choice and was
   measured out: its caps run 0.98em per character against Gabarito's 0.66,
   so « COMMUNAUTÉ » alone could not be set above 28px at a 390px viewport.
   A display face that has to be set small is not a display face.

   Karla carries the reading voice. It is a grotesque with enough oddity in
   the details (the flat-sided bowls, the low-slung ear on the g) to sit next
   to Gabarito without either face pretending to be the other.

   ---------------------------------------------------------------- device ----
   The logo's signature is a pink wordmark with a heavy black outline: a
   sticker, not a logotype. Direction A transfers that to exactly one place
   (the primary button). Direction B is the loud direction, so it transfers
   it to the structure: 2-3px ink borders and hard, unblurred offset shadows.
   There is not a single blurred shadow in this file, on purpose.
   ========================================================================== */

@font-face { font-family: 'GabaritoFallback'; src: local('Futura'), local('Trebuchet MS'); size-adjust: 102%; }
@font-face { font-family: 'KarlaFallback'; src: local('Helvetica Neue'); size-adjust: 99%; }

:root {
  /* ground */
  --paper:     #F7EEDE;
  --paper-2:   #F7EBCE;
  --ink:       #240408;

  /* from her portrait series */
  --oxblood:   #4A0810;

  /* from her logo */
  --pink:      #F860C0;
  --pink-deep: #D8329C;
  --orange:    #F89040;
  --gold:      #F8D870;

  /* the only pink that passes on paper at body size */
  --berry:     #911D56;

  --ink-72:    rgba(36, 4, 8, .72);
  --ink-50:    rgba(36, 4, 8, .50);
  --ink-16:    rgba(36, 4, 8, .16);
  --paper-72:  rgba(247, 238, 222, .72);
  --paper-48:  rgba(247, 238, 222, .48);
  --paper-18:  rgba(247, 238, 222, .18);

  --display: 'Gabarito', 'GabaritoFallback', 'Trebuchet MS', sans-serif;
  --body:    'Karla', 'KarlaFallback', 'Helvetica Neue', Arial, sans-serif;

  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --max: 1440px;

  /* the sticker rule weight, used everywhere so it reads as one system */
  --rule: 3px;

  /* B overshoots where A glides. Two different personalities, one codebase. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --pop:  cubic-bezier(.34, 1.42, .48, 1);

  /* focus ring colour, re-pointed inside the dark sections further down */
  --focus: var(--ink);
}

/* ---------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .95rem + .2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }

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

/* Their live site ships 48 elements at rgb(0,0,238). Nothing here is left to
   the browser, focus included. --focus follows the ground it sits on. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------- layout -- */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }

/* Sections are colour blocks. The dome on the top edge of a block is the
   logo's arc borrowed as a layout device, and it is what makes the pink and
   the gold read as something rising rather than as a stripe. Rationed to two
   blocks on this page. */
.block { padding-block: clamp(3.25rem, 7vw, 6.5rem); }
/* A dome cuts its own top corners and what shows through is whatever is
   painted behind them, which is the body ground. Over a coloured section that
   is a paper crescent across the seam.

   The backfill has to come from the section ABOVE, not from the dome itself: a
   pseudo-element inside the dome with z-index:-1 falls behind the body's
   background (the dome is position:relative/z-index:auto, so it opens no
   stacking context), and without the negative z-index it would paint over the
   dome's own colour. Each affected page therefore paints a strip below its
   preceding section. Verified by sampling rendered pixels at the corner. */
.block--dome {
  position: relative;
  border-radius: 50% 50% 0 0 / clamp(1.5rem, 5vw, 5rem) clamp(1.5rem, 5vw, 5rem) 0 0;
  padding-top: calc(clamp(3.25rem, 7vw, 6.5rem) + clamp(1rem, 4vw, 3.5rem));
}

.kicker {
  font-family: var(--display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  /* A's kicker is a gold word after a hairline rule. B's is a filled chip:
     same information, a completely different amount of noise. */
  background: var(--ink);
  color: var(--gold);
  padding: .45em .9em .4em;
  border-radius: 999px;
}
.kicker--pink { background: var(--pink); color: var(--ink); }
.kicker--paper { background: var(--paper); color: var(--ink); }

/* Uppercase display is measured, not guessed. Gabarito's caps run about
   .66em per character, so the widest single word in this page's headings
   ("PLATEFORME.") is 7.3em: 380px at the 3.25rem cap, which clears the
   narrowest column it ever sits in. Change the cap and re-check that. */
.h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.7rem, .85rem + 3vw, 3.25rem);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* the one sentence-case voice in the direction, for deks and the pull quote */
.lede {
  font-size: clamp(1.05rem, .98rem + .5vw, 1.3rem);
  line-height: 1.45;
  max-width: 46ch;
}

/* Inline links inside prose. --berry, because it is the only pink that can
   legally sit at 16px on this ground. */
.prose a { color: var(--berry); text-underline-offset: .18em; }

/* ------------------------------------------------------------ motifs ----- */
/* Her globe wireframe, reused as the sun this direction is named after: same
   geometry as Direction A's, drawn hard instead of at 16% opacity because a
   ghost line does not survive on a cream ground. Once per page. */

.sun {
  position: absolute;
  color: var(--orange);
  pointer-events: none;
}

/* The sparkles are the secondary motif and the brand spec caps them at two
   per page. There are exactly two on this page: here and on the newsletter.
   If you add a third, remove one. */
.spark { position: absolute; color: var(--orange); pointer-events: none; }

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: var(--rule) solid var(--ink);
}
.nav__in {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 74px;
}
/* The lockup was drawn for a dark ground: 22% of its opaque pixels are
   near-black and the globe's lower centre samples pure black. On --paper that
   reads as a hole punched through the client's own mark, top-left of every
   page. An ink sticker restores the ground it was drawn for, and an
   ink-bordered pill is already this direction's grammar. */
.nav__logo {
  flex: none;
  background: var(--ink);
  border: var(--rule) solid var(--ink);
  border-radius: 10px;
  padding: 5px 9px;
  line-height: 0;
}
.nav__logo img { width: clamp(88px, 11vw, 118px); }
.nav__links {
  display: flex;
  gap: clamp(.85rem, 2vw, 1.9rem);
  margin-left: auto;
  font-family: var(--display);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* A highlighter stroke rather than A's hairline underline: it is the same
   idea (mark the current page) said at B's volume. */
.nav__links a {
  text-decoration: none;
  color: var(--ink);
  padding: .3em .15em;
  background: linear-gradient(var(--pink), var(--pink)) no-repeat 0 82%;
  background-size: 0% .38em;
  transition: background-size .28s var(--ease);
  white-space: nowrap;
}
.nav__links a:hover { background-size: 100% .38em; }
.nav__links a[aria-current] { background-size: 100% .38em; }

/* ------------------------------------------------------------ burger ---- */
/* Lifted deliberately from a/nuit.css: the three bars are absolutely
   positioned from one shared origin rather than laid out in flow, so the
   open state is two rotations about a single point and cannot drift into a
   chevron when the button's rows resize. Colours and weights are B's. */
.nav__burger {
  display: none;
  position: relative;
  /* flex:none, or the nav CTA that replaced the A/B switcher squeezes it to
     16px at 320px. It is a flex child of .nav__in and was shrinking. */
  flex: none;
  width: 42px; height: 42px;
  margin-left: auto;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
}
.nav__burger span {
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 2px;
  margin-left: -8px;
  margin-top: -1px;
  background: var(--ink);
  transition: transform .3s var(--pop), opacity .2s var(--ease);
}
.nav__burger span:nth-child(1) { transform: translateY(-5.5px); }
.nav__burger span:nth-child(3) { transform: translateY(5.5px); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* --------------------------------------------------- direction switcher -- */

.switch {
  flex: none;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper-2);
}
.switch__label {
  font-family: var(--display);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-72);
  padding-left: .55rem;
}
.switch a {
  display: grid;
  place-items: center;
  /* 32px, not 30. Under the WCAG 2.5.8 target-size floor otherwise. */
  width: 32px; height: 32px;
  border-radius: 999px;
  font-family: var(--display);
  font-size: .75rem;
  font-weight: 900;
  text-decoration: none;
  color: var(--ink-72);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.switch a:hover { color: var(--ink); background: var(--gold); }
.switch a[aria-current] { background: var(--pink); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }

/* -------------------------------------------------------------- marquee -- */
/* Her own site runs this line as a marquee and both directions keep it, since
   it is the most human sentence she wrote. A sets it in italic serif on
   oxblood and lets it drift. B sets it in uppercase display on a gold band
   between two hard rules and runs it faster. Same component, same words,
   different temperature. */

.marquee {
  overflow: hidden;
  background: var(--gold);
  border-bottom: var(--rule) solid var(--ink);
  padding-block: .7rem;
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: slide 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.8rem, .75rem + .25vw, 1rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.marquee span::after { content: '✦'; color: var(--pink-deep); font-size: .85em; }
@keyframes slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- button -- */
/* Hard offset shadow, no blur, and it grows rather than lifts on hover. This
   is the sticker device and it is the component every other card copies. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .8em 1.4em;
  border-radius: 999px;
  font-family: var(--display);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: transform .25s var(--pop), box-shadow .25s var(--pop), background .25s var(--ease);
}
.btn--primary { background: var(--pink); box-shadow: 4px 4px 0 var(--ink); }
.btn--primary:hover { background: var(--gold); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn svg { transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* ----------------------------------------------------------------- hero -- */

.hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5.5rem); }
.hero .sun { right: -7%; top: -8%; width: min(42vw, 460px); opacity: .5; z-index: 0; }
.hero .spark { right: 3%; top: 4%; width: clamp(34px, 5vw, 66px); z-index: 0; }
/* The motifs sit behind the content. Without this the .wrap is unpositioned,
   which puts it in the flow layer and paints both SVGs over the headline. */
.hero > .wrap { position: relative; z-index: 1; }

/* Sized against the measured cap width: "COMMUNAUTÉ" is 6.62em. The floor was
   2.9rem, checked against a 390px viewport's 350px of content. 320px was never
   checked, and it is a real width (iPhone SE 1st gen, and any browser at 200%
   zoom in a 640px window): there the content box is 280px, the word rendered at
   ~307px, and the acute on the É was severed by the viewport edge and left
   floating. body { overflow-x: hidden } is why no test caught it.
   280 / 6.62em = 42.3px ceiling, so the floor is now 2.6rem = 41.6px. */
.hero__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.6rem, .6rem + 6.6vw, 7rem);
  /* .88 collided the acute on É with the line above it. French headlines
     need the accent to have somewhere to sit. */
  line-height: .94;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-block: 1rem 0;
  position: relative;
}
/* Two deliberate lines on anything wider than a phone; below that the lines
   go inline and wrap on their own, because "LA COMMUNAUTÉ" held together on
   one forced line is 19px wider than a 390px screen has to give. */
.hero__title span { display: block; }
@media (max-width: 560px) { .hero__title span { display: inline; } }
/* The wordmark is pink filled with a heavy black outline. One word gets it.
   em units so the offset scales with the type instead of drifting. */
.hero__title em {
  font-style: normal;
  color: var(--pink);
  text-shadow:
     .035em .035em 0 var(--ink),
    -.012em -.012em 0 var(--ink),
     .035em -.012em 0 var(--ink),
    -.012em  .035em 0 var(--ink);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  /* start, not end: the photograph is roughly three times the height of the
     dek, and bottom-aligning them left the whole left half of the fold
     empty on a 900px-tall screen. */
  align-items: start;
  margin-top: clamp(1.75rem, 4vw, 3rem);
}
.hero__dek { font-family: var(--body); font-style: italic; font-size: clamp(1.1rem, 1rem + .55vw, 1.5rem); line-height: 1.35; max-width: 24ch; }

/* The photograph. Direction A gives it a full-width lane and quiet space; B
   pins it up like a sticker. What B does NOT do is crop it: three different
   photographers' watermarks live in the lower right of this library
   (© art_tonic here), so the frame is shown whole and the tilt does the work
   the crop would have done. */
.shot { position: relative; }
.shot__frame {
  border: var(--rule) solid var(--ink);
  background: var(--paper);
  padding: 7px;
  rotate: -1.6deg;
  box-shadow: 12px 12px 0 var(--pink);
  transition: rotate .5s var(--pop), box-shadow .5s var(--pop);
}
.shot:hover .shot__frame { rotate: 0deg; box-shadow: 16px 16px 0 var(--pink); }
.shot__frame img { width: 100%; }
.shot__cap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .1rem 1rem;
  margin-top: 1.1rem;
  padding: .5rem .85rem;
  background: var(--gold);
  border: 2px solid var(--ink);
  rotate: -.8deg;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.shot__cap b { font-weight: 800; }

/* Three facts as three colour blocks. Direction A runs them as text above a
   hairline; here they are physical objects, which is the whole difference. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.6rem, 1.5vw, 1rem);
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
}
.stat {
  padding: clamp(.9rem, 2vw, 1.4rem);
  border: var(--rule) solid var(--ink);
  border-radius: 4px;
  box-shadow: 5px 5px 0 var(--ink);
}
.stat:nth-child(1) { background: var(--pink); }
.stat:nth-child(2) { background: var(--orange); }
.stat:nth-child(3) { background: var(--gold); }
.stat b {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3.2rem);
  line-height: .95;
  letter-spacing: -.03em;
}
.stat span { display: block; margin-top: .3rem; font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; line-height: 1.3; }

/* ------------------------------------------------------------ manifesto -- */
/* Full-bleed pink with a domed top edge. This is the moment the direction
   declares itself: A's equivalent section is a slightly lighter near-black. */

.manifesto { background: var(--pink); color: var(--ink); }
.manifesto__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: start;
}
.manifesto p { max-width: 58ch; }
.manifesto p + p { margin-top: 1.2rem; }

/* Her best sentence, on a paper card so it stops the pink dead. */
.pull {
  margin-top: clamp(2rem, 4vw, 3.25rem);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  border-radius: 4px;
  box-shadow: 9px 9px 0 var(--ink);
  rotate: -.7deg;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, .95rem + 1.15vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* ----------------------------------------------------------- next event -- */

.event { background: var(--paper-2); }
.event__card {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
/* Her posters are Canva artwork with their own palettes. A frames them as
   artifacts on a dark card; B pins them, which suits a bright poster better
   than a drop shadow does. */
.event__poster {
  position: relative;
  border: var(--rule) solid var(--ink);
  background: var(--paper);
  padding: 6px;
  rotate: -2.2deg;
  box-shadow: 10px 10px 0 var(--orange);
  transition: rotate .5s var(--pop), box-shadow .5s var(--pop);
}
.event__card:hover .event__poster { rotate: 0deg; box-shadow: 14px 14px 0 var(--orange); }
.event__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.8rem, 1rem + 2.6vw, 3.4rem);
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-block: .7rem .8rem;
}
/* The facts as chips, not as a definition list with hairline rules. */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 1.4rem; padding: 0; }
.chip {
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: .5rem .95rem;
  background: var(--paper);
}
.chip dt { font-size: .5625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-72); }
.chip dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.15; }
.chip--gold { background: var(--gold); }
.chip--pink { background: var(--pink); }
.chip--orange { background: var(--orange); }

/* A badge, not an emoji. Her copy uses emoji freely and that is her voice in
   prose; it is not an interface element. */
.warn {
  display: inline-block;
  background: var(--ink);
  color: var(--gold);
  font-family: var(--display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .45em .85em;
  border-radius: 999px;
}

/* ----------------------------------------------------------- ressources -- */
/* The dark beat. This page has no photography on the live site, so the
   section is carried on colour, numerals and card weight. Direction A runs
   the same content as a list of rules; B runs it as four objects. */

.res { background: var(--oxblood); color: var(--paper); --focus: var(--gold); }
.res .h2 { color: var(--paper); }
/* The default ink-filled chip is nearly the same value as oxblood and goes
   muddy on this ground, so the chip inverts here. */
.res .kicker { background: var(--gold); color: var(--ink); }
.res__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 2vw, 1.25rem);
  margin-top: clamp(1.75rem, 4vw, 3rem);
}
.res__card {
  display: block;
  position: relative;
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
  border: 2px solid var(--paper-18);
  border-radius: 5px;
  text-decoration: none;
  color: var(--paper);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--pop);
}
.res__card:hover { background: var(--pink); color: var(--ink); border-color: var(--ink); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.res__num {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  line-height: 1;
  color: var(--gold);
  transition: color .3s var(--ease);
}
.res__card:hover .res__num { color: var(--ink); }
.res__t {
  display: block;
  margin-top: .7rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, .95rem + .7vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.res__d { display: block; margin-top: .55rem; font-size: .9375rem; color: var(--paper-72); transition: color .3s var(--ease); max-width: 46ch; }
.res__card:hover .res__d { color: var(--ink-72); }
.res__go { display: inline-block; margin-top: .9rem; font-weight: 700; transition: transform .3s var(--ease); }
.res__card:hover .res__go { transform: translateX(6px); }

/* -------------------------------------------------------------- podcast -- */

.pod {
  --focus: var(--gold); /* ring was ink-on-ink, 1.00:1, invisible */ background: var(--orange); color: var(--ink); }
.pod__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
}
.pod__art {
  position: relative;
  border: var(--rule) solid var(--ink);
  background: var(--ink);
  rotate: 1.5deg;
  box-shadow: 12px 12px 0 var(--ink);
  transition: rotate .5s var(--pop);
}
.pod:hover .pod__art { rotate: 0deg; }
.pod__art img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.pod__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-decoration: none;
}
.pod__play i {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  border-radius: 999px;
  background: var(--pink);
  border: var(--rule) solid var(--ink);
  color: var(--ink);
  font-style: normal;
  font-size: 1.2rem;
  padding-left: 4px;
  transition: transform .35s var(--pop), background .35s var(--ease);
}
.pod__art:hover .pod__play i { transform: scale(1.1); background: var(--gold); }

/* -------------------------------------------------------------- galerie -- */
/* Direction A gives the portrait series a padded rail of whole 2:3 frames and
   quiet space. Direction B packs it edge to edge in square crops with 4px of
   air, interleaved with colour blocks that carry the facts the captions used
   to. Tight and busy is the point.

   These portraits carry no watermark and are safe to crop; the crop origin
   sits at 26% from the top because every frame in the series puts the face in
   the upper third. Nothing in this grid is captioned with a role, because we
   harvested the names and the faces separately and cannot prove which is
   which. */

.gal { padding-block: clamp(3.25rem, 7vw, 6.5rem) 0; }
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  margin-top: clamp(1.75rem, 4vw, 3rem);
}
.mosaic img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 16%;
  transition: filter .4s var(--ease), transform .4s var(--pop);
}
.mosaic a:hover img, .mosaic figure:hover img { transform: scale(1.04); }
.mosaic__tile {
  display: grid;
  align-content: center;
  gap: .35rem;
  aspect-ratio: 1 / 1;
  padding: clamp(.7rem, 1.6vw, 1.1rem);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.7rem, .62rem + .38vw, .95rem);
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.mosaic__tile b { font-size: 1.9em; font-weight: 900; line-height: .9; letter-spacing: -.02em; }
.mosaic__tile--pink { background: var(--pink); color: var(--ink); }
.mosaic__tile--ox { background: var(--oxblood); color: var(--gold); }
.mosaic__tile--orange { background: var(--orange); color: var(--ink); }

/* ----------------------------------------------------------- newsletter -- */

.news { background: var(--gold); color: var(--ink); position: relative; overflow: hidden; }
.news .spark { right: 3%; top: 12%; width: clamp(40px, 7vw, 96px); color: var(--pink-deep); opacity: .9; }
.news__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: end;
}
.form { display: flex; gap: .6rem; flex-wrap: wrap; }
.form input {
  flex: 1 1 14rem;
  min-width: 0;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  padding: .8rem 1.1rem;
}
.form input::placeholder { color: var(--ink-50); }
.form input:focus { outline: 3px solid var(--ink); outline-offset: 2px; }
.form__note { margin-top: .9rem; font-size: .8125rem; color: var(--ink-72); }

/* --------------------------------------------------------------- footer -- */

.foot { background: var(--ink); color: var(--paper); --focus: var(--gold); padding-block: clamp(2.5rem, 5vw, 4rem) 1.75rem; }
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 5vw, 4rem);
  padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
  border-bottom: 2px solid var(--paper-18);
}
.foot__h { font-family: var(--display); font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
/* inline-block plus vertical padding, so the tap target clears 32px rather
   than the 18px the line box alone gives. Same fix as Direction A. */
.foot ul a { display: inline-block; padding-block: .45rem; }
.foot a { color: var(--paper-72); text-decoration: none; font-size: .9375rem; transition: color .25s var(--ease); }
.foot a:hover { color: var(--pink); }
.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  font-size: .75rem;
  color: var(--paper-48);
}

/* ---------------------------------------------------------------- reveal -- */
/* Same contract as Direction A, different motion.

   Content is visible by default. It is hidden only once the inline head
   script has confirmed that JS and IntersectionObserver both exist, by
   putting .js on <html>. If the enhancement module fails to load, which is
   exactly what a client's meeting-room wifi is for, the page still reads. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition: opacity .6s var(--ease), transform .7s var(--pop);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1000px) {
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero__grid, .manifesto__grid, .event__card, .pod__grid, .news__grid { grid-template-columns: minmax(0, 1fr); }
  .res__grid { grid-template-columns: minmax(0, 1fr); }
  .shot { order: -1; }
  .pod__grid > div:first-child { order: 2; }
  .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero .sun, .hero .spark { display: none; }

  /* The links become a panel rather than vanishing. Same fix as Direction A,
     for the same reason: a demo whose argument is "your site does not work on
     a phone" cannot ship a phone with no navigation. */
  .nav__burger { display: block; }
  /* Anchored to the bar rather than to a hard-coded 77px offset. The bar's
     height is driven by the logo, which is clamped, so a fixed number is
     wrong at some viewport by definition. .nav is sticky, which is a
     positioned element, so it is already the containing block for this. */
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: .5rem var(--gut) 1.5rem;
    background: var(--paper);
    border-bottom: var(--rule) solid var(--ink);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav__links[data-open] { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a {
    padding: .95rem 0;
    font-size: 1.0625rem;
    border-bottom: 2px solid var(--ink-16);
    background-position: 0 76%;
  }
  .switch { margin-left: 0; }
}

/* Every rotation in this direction is switched off below 700px. A tilted card
   inside a 350px column pushes its own bounding box past the gutter, and the
   budget for horizontal overflow on this project is zero. */
@media (max-width: 700px) {
  .shot__frame, .shot__cap, .event__poster, .pull, .pod__art { rotate: 0deg; }
  .shot__frame { box-shadow: 8px 8px 0 var(--pink); }
  .event__poster { box-shadow: 8px 8px 0 var(--orange); }
  .pod__art { box-shadow: 8px 8px 0 var(--ink); }
  .pull { box-shadow: 6px 6px 0 var(--ink); }
}

@media (max-width: 640px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .switch__label { display: none; }
  .chips { gap: .5rem; }
}


/* ------------------------------------------------------- nav CTA + IP ----- */
/* The slot the A/B switcher used to occupy. The comparison moved to the root
   chooser, so the nav carries the site's real primary action instead. */
.nav__cta { flex: none; padding: .7em 1.2em; font-size: .8125rem; }
@media (max-width: 900px) { .nav__cta { margin-left: auto; } .nav__cta svg { display: none; } }
@media (max-width: 420px) { .nav__cta { padding: .6em .9em; font-size: .75rem; } }

/* standards/demo-protection.md: sits alongside her own copyright, not instead
   of it. The two say different things and both are correct. */
.foot__ip { flex: 1 1 100%; max-width: 78ch; color: var(--ink-50); font-size: .6875rem; line-height: 1.5; }

/* At 320px the nav row is logo + burger + CTA, and the CTA is new: it took the
   slot the A/B switcher used to hold, but it is wider than the switcher was.
   Shrink the logo and tighten the CTA rather than dropping either, because the
   phone is where a nav CTA earns its place. Measured at 320: 280px of content
   against roughly 226px of nav. */
@media (max-width: 420px) {
  .nav__logo img { width: 64px; }
  /* min-height, because shrinking the padding to fit 320px took the button
     under the 32px target floor. */
  .nav__cta { padding: .5em .7em; font-size: .6875rem; gap: .35em; min-height: 34px; }
  .nav__in { gap: .6rem; }
}