/* ==========================================================================
   PIXMAKERS FACTORY — site.css
   Look: film press kit / contact sheet.
   Monochrome chassis + one ink accent. The site is the frame, not the picture.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */

:root {
  --ink:        #0b0b0b;
  --ink-soft:   #16161a;
  --paper:      #f2f2f0;
  --paper-soft: #e4e4e0;
  /* The one accent. Change it here and it changes everywhere.
     --accent      large type, rules, fills
     --accent-ink  darker cut, for small text on the paper background
     --on-accent   text sitting on top of an accent fill */
  --accent:     #ff2e88;
  --accent-ink: #cf005f;
  --on-accent:  #ffffff;

  --on-dark:        #f2f2f0;
  --on-dark-muted:  #8d8d92;
  --on-light:       #0b0b0b;
  --on-light-muted: #6a6a68;

  --rule-dark:  rgba(242, 242, 240, .22);
  --rule-light: rgba(11, 11, 11, .20);

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale */
  --t-mega: clamp(3.2rem, 13vw, 12rem);
  --t-xl:   clamp(2.4rem, 7.5vw, 6rem);
  --t-lg:   clamp(1.7rem, 3.6vw, 3rem);
  --t-md:   clamp(1.15rem, 1.6vw, 1.45rem);
  --t-body: clamp(.95rem, 1.05vw, 1.05rem);
  --t-meta: .72rem;

  --gut:   clamp(1.1rem, 3.5vw, 3rem);
  --bar-h: 4.25rem;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-variation-settings: "wdth" 100, "wght" 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }

/* Framed media. The container carries a diagonal-rule fallback; the <img> sits
   on top of it. If the file is missing, site.js drops the <img> and the
   fallback shows through instead of a broken-image icon. */
.hero__bg > img,
.work__media > img,
.post__media > img,
.cast__thumb > img,
.profile__portrait > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: var(--t-meta);
  text-transform: uppercase;
}
.skip:focus { left: 0; }

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

/* --- Shared type helpers ------------------------------------------------- */

.meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.paper .meta { color: var(--on-light-muted); }

.display {
  font-family: var(--sans);
  font-variation-settings: "wdth" 125, "wght" 800;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -.015em;
  margin: 0;
}

.num {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: .1em;
  color: var(--accent);
}

/* --- Layout -------------------------------------------------------------- */

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

.section { padding-block: clamp(3.5rem, 9vw, 8rem); }

.paper {
  background: var(--paper);
  color: var(--on-light);
}

/* Section header: index numeral + rule + title, contact-sheet style */
.shead {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.5rem;
  align-items: baseline;
  padding-bottom: 1.1rem;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule-dark);
}
.paper .shead { border-bottom-color: var(--rule-light); }
.shead__title {
  font-variation-settings: "wdth" 118, "wght" 800;
  text-transform: uppercase;
  font-size: var(--t-lg);
  line-height: 1;
  letter-spacing: -.015em;
}
/* A page title carries far more weight than a section title. */
h1.shead__title {
  font-size: var(--t-xl);
  font-variation-settings: "wdth" 125, "wght" 900;
  letter-spacing: -.03em;
}
.shead__aside { grid-column: 2; }

/* --- Masthead ------------------------------------------------------------ */

.bar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: var(--gut);
  padding-inline: var(--gut);
  background: var(--ink);
  border-bottom: 1px solid var(--rule-dark);
}

.brand {
  font-family: var(--sans);
  font-variation-settings: "wdth" 125, "wght" 900;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
}
.brand span { color: var(--accent); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  margin-left: auto;
}
.nav a {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  padding-block: .4rem;
  transition: color .18s var(--ease);
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--on-dark); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }

/* Mobile menu */
.burger {
  display: none;
  margin-left: auto;
  width: 2.5rem; height: 2.5rem;
  align-items: center;
  justify-content: center;
}
.burger i {
  display: block;
  width: 20px; height: 1px;
  background: var(--on-dark);
  box-shadow: 0 -6px 0 var(--on-dark), 0 6px 0 var(--on-dark);
}
.bar.is-open .burger i {
  box-shadow: none;
  transform: rotate(45deg);
}
.bar.is-open .burger i::after {
  content: "";
  display: block;
  width: 20px; height: 1px;
  background: var(--on-dark);
  transform: rotate(-90deg);
}

@media (max-width: 860px) {
  .burger { display: flex; }
  .nav {
    position: fixed;
    inset: var(--bar-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--gut);
    background: var(--ink);
    border-bottom: 1px solid var(--rule-dark);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .3s var(--ease), visibility .3s;
  }
  .bar.is-open .nav { transform: none; visibility: visible; }
  .nav a {
    font-size: 1rem;
    padding-block: .9rem;
    border-bottom: 1px solid var(--rule-dark);
  }
  .nav a[aria-current="page"] { box-shadow: none; color: var(--accent); }
  .controls { margin-top: 1.25rem; }
  .swatch { width: 22px; height: 22px; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(86vh, 54rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--gut);
  padding-top: clamp(4rem, 12vw, 9rem);
  overflow: hidden;
  border-bottom: 1px solid var(--rule-dark);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background: var(--ink-soft);
  filter: grayscale(1) contrast(1.15);
  opacity: .55;
}
/* Fallback texture, visible when no hero image is present */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 22px,
      rgba(242, 242, 240, .035) 22px 44px
    );
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--ink) 2%, transparent 55%);
}
.hero__inner { position: relative; z-index: 1; }
.hero__title {
  font-size: var(--t-mega);
  font-variation-settings: "wdth" 125, "wght" 900;
  text-transform: uppercase;
  line-height: .82;
  letter-spacing: -.025em;
  max-width: 16ch;
}
.hero__title em {
  font-style: normal;
  color: var(--accent);
}
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: baseline;
  margin-top: clamp(1.25rem, 3vw, 2.25rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-dark);
}

/* --- Work grid (contact sheet) ------------------------------------------- */

.sheet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 1px;
}

.work {
  position: relative;
  display: block;
  background: var(--ink);
  padding: 0 0 1rem;
  /* Each tile draws its own hairline. Adjacent shadows meet in the 1px gap and
     read as one rule — and an incomplete last row shows nothing, instead of the
     container's background filling the empty cells with a grey block. */
  box-shadow: 0 0 0 1px var(--rule-dark);
}
.paper .work {
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--rule-light);
}

.work__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: repeating-linear-gradient(-45deg, #17171b 0 14px, #121215 14px 28px);
  filter: grayscale(1) contrast(1.08);
  transition: filter .35s var(--ease);
}
.paper .work__media {
  background: repeating-linear-gradient(-45deg, #dededa 0 14px, #e8e8e4 14px 28px);
}
.work:hover .work__media,
.work:focus-visible .work__media { filter: none; }

/* Play affordance for video items */
.work[data-video] .work__media::after {
  content: "▶";
  position: absolute;
  left: .85rem;
  bottom: .7rem;
  font-size: .7rem;
  line-height: 1;
  padding: .45rem .5rem;
  background: var(--accent);
  color: var(--on-accent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.work[data-video]:hover .work__media::after,
.work[data-video]:focus-visible .work__media::after {
  opacity: 1;
  transform: none;
}

.work__line {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .9rem 1rem 0;
}
.work__title {
  font-variation-settings: "wdth" 112, "wght" 700;
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: -.005em;
}
.work__client {
  padding: 0 1rem;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.paper .work__client { color: var(--on-light-muted); }
.work:hover .work__title { color: var(--accent); }

/* --- Director index (cast list) ------------------------------------------ */

.cast { border-top: 1px solid var(--rule-dark); }
.paper .cast { border-top-color: var(--rule-light); }

.cast__row {
  display: grid;
  /* numeral · name · role · go — the faces live up in the section header */
  /* max-content on the name means it never wraps, so every row is the same
     height; the role takes whatever is left and wraps instead. */
  grid-template-columns: 3rem max-content minmax(0, 1fr) auto;
  gap: clamp(1rem, 2vw, 2.5rem);
  align-items: center;
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
  /* The inset is permanent, cancelled by an equal negative margin. The hover
     fill still bleeds past the text, but the column widths never change — so
     the names can't reflow onto a second line mid-hover. */
  padding-inline: 1rem;
  margin-inline: -1rem;
  border-bottom: 1px solid var(--rule-dark);
  transition: background .25s var(--ease);
}
.paper .cast__row { border-bottom-color: var(--rule-light); }
.cast__row:hover {
  background: var(--accent);
  color: var(--on-accent);
}
.cast__row:hover .num,
.cast__row:hover .cast__role,
.cast__row:hover .cast__go { color: var(--on-accent); }

/* Section header for the roster: copy on the left, faces on the right, so the
   index rows stay pure type. */
/* Roster intro. The title runs the full measure like the hero does — a narrow
   left-aligned column here just left the right-hand half empty. */
.dintro {
  padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule-dark);
}
.paper .dintro { border-bottom-color: var(--rule-light); }

.dintro__title {
  margin-top: .35rem;
  font-size: var(--t-mega);
  font-variation-settings: "wdth" 125, "wght" 900;
  text-transform: uppercase;
  line-height: .82;
  letter-spacing: -.035em;
}

.dintro__cols {
  margin-top: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
}
.dintro__lead {
  font-size: var(--t-md);
  font-variation-settings: "wdth" 100, "wght" 600;
  line-height: 1.35;
}

.faces { display: flex; gap: .45rem; }
.face {
  position: relative;
  overflow: hidden;
  flex: none;
  width: clamp(78px, 11vw, 158px);
  aspect-ratio: 4 / 5;
  background: repeating-linear-gradient(-45deg, #17171b 0 10px, #121215 10px 20px);
  border: 1px solid var(--rule-dark);
  filter: grayscale(1) contrast(1.1);
  transition: filter .25s var(--ease);
}
.paper .face {
  background: repeating-linear-gradient(-45deg, #dededa 0 10px, #e8e8e4 10px 20px);
  border-color: var(--rule-light);
}
.face > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.face:hover { filter: none; }

/* The names are the point of this page — let them fill the row. */
.cast__name {
  font-variation-settings: "wdth" 125, "wght" 900;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.8vw, 5.25rem);
  line-height: .9;
  letter-spacing: -.04em;
  text-wrap: balance;
}
/* The role line carries the actual description — give it real presence
   rather than treating it as a caption. */
.cast__role {
  font-family: var(--mono);
  font-size: clamp(.74rem, .95vw, .88rem);
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  max-width: 44ch;
}
.paper .cast__role { color: var(--on-light-muted); }
.cast__go {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .cast__row {
    grid-template-columns: 3rem minmax(0, 1fr);
    row-gap: .5rem;
    align-items: start;
  }
  .cast__role { grid-column: 2; }
  .cast__go   { grid-column: 2; }
}

/* --- Director profile ---------------------------------------------------- */

.profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 860px) { .profile { grid-template-columns: 1fr; } }

.profile__portrait {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: repeating-linear-gradient(-45deg, #17171b 0 16px, #121215 16px 32px);
  filter: grayscale(1) contrast(1.1);
  border: 1px solid var(--rule-dark);
}

.profile__name {
  font-size: var(--t-xl);
  font-variation-settings: "wdth" 125, "wght" 900;
  text-transform: uppercase;
  line-height: .85;
  letter-spacing: -.025em;
}
.profile__bio {
  max-width: 46ch;
  margin-top: 1.5rem;
  font-size: var(--t-md);
  line-height: 1.6;
}
.profile__bio p + p { margin-top: 1em; }

.facts {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-dark);
  display: grid;
  gap: .65rem;
}
.facts div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.facts dt, .facts .k { color: var(--on-dark-muted); }

/* --- Backstage: post cards ------------------------------------------------ *
 * One card component, used on the Backstage index and in the home teaser, so
 * posts look the same wherever they appear.
 * -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
@media (min-width: 760px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

.card { display: flex; flex-direction: column; }

.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: repeating-linear-gradient(-45deg, #17171b 0 14px, #121215 14px 28px);
  border: 1px solid var(--rule-dark);
  filter: grayscale(1) contrast(1.08);
  transition: filter .35s var(--ease);
}
.paper .card__media {
  background: repeating-linear-gradient(-45deg, #dededa 0 14px, #e8e8e4 14px 28px);
  border-color: var(--rule-light);
}
.card__media > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.card:hover .card__media { filter: none; }

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  margin-top: .95rem;
}
/* Separator only between the parts that are actually present, so a post with
   no date yet doesn't render a stray middot. */
.card__meta > * + *::before {
  content: "·";
  margin-right: .75rem;
  color: var(--on-dark-muted);
}
.paper .card__meta > * + *::before { color: var(--on-light-muted); }

.card__title {
  margin-top: .5rem;
  font-variation-settings: "wdth" 115, "wght" 720;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.06;
  letter-spacing: -.01em;
}
.card:hover .card__title { color: var(--accent); }

.card__excerpt {
  margin-top: .6rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--on-dark-muted);
}
.paper .card__excerpt { color: var(--on-light-muted); }

.card__more {
  margin-top: .9rem;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- Contact ------------------------------------------------------------- */

.offices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1px;
  background: var(--rule-light);
  border: 1px solid var(--rule-light);
}
.office {
  background: var(--paper);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.office__city {
  font-size: var(--t-xl);
  font-variation-settings: "wdth" 125, "wght" 900;
  text-transform: uppercase;
  line-height: .85;
  letter-spacing: -.025em;
}
.office ul { margin-top: 1.75rem; display: grid; gap: 1.1rem; }
.office li { padding-top: 1.1rem; border-top: 1px solid var(--rule-light); }
.office .who {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-light-muted);
}
.office .tel {
  display: inline-block;
  margin-top: .2rem;
  font-variation-settings: "wdth" 112, "wght" 700;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.office .tel:hover { color: var(--accent-ink); }

/* --- Contact form --------------------------------------------------------- */

.cform { max-width: 44rem; }
.cf-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  margin-bottom: 1px;
}
.cform input,
.cform textarea {
  width: 100%;
  padding: 1rem 1.1rem;
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--on-dark);
  background: var(--ink-soft);
  border: 1px solid var(--rule-dark);
  border-radius: 0;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.cform textarea { resize: vertical; min-height: 9rem; }
.cform input::placeholder,
.cform textarea::placeholder {
  color: var(--on-dark-muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
}
.cform input:focus,
.cform textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #101014;
}

/* Honeypot: off-screen for people, irresistible to bots. Not display:none —
   some bots skip hidden fields. */
.cf-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
}

.cf-submit {
  margin-top: 1.25rem;
  padding: 1rem 2rem;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark);
  border: 1px solid var(--on-dark);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.cf-submit:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.cf-submit:disabled { opacity: .45; cursor: wait; }

.cf-status {
  margin-top: 1rem;
  min-height: 1.2em;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.cf-status.ok  { color: var(--accent); }
.cf-status.err { color: #ff6b6b; }

/* --- Article: editorial mosaic --------------------------------------------- *
 * A dense 12-column mosaic rather than a reading column: pictures at mixed
 * spans, staggered vertically, with small numbered notes threaded between
 * them. Nothing shares a baseline for long — that is what stops the page
 * settling into one repeating measure.
 * -------------------------------------------------------------------------- */

.mag {
  width: 100%;
  max-width: 108rem;
  margin-inline: auto;
  padding-inline: var(--gut);
}
.mag > .meta,
.mag > .card__meta,
.mag > p { max-width: 62ch; }
.mag p { margin: 0; }

.mosaic {
  margin-top: clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(.75rem, 1.5vw, 1.5rem);
  row-gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
}

/* Column spans. Every visual row is composed to total 12. */
.m3  { grid-column: span 3; }
.m4  { grid-column: span 4; }
.m5  { grid-column: span 5; }
.m6  { grid-column: span 6; }
.m7  { grid-column: span 7; }
.m8  { grid-column: span 8; }
.m12 { grid-column: 1 / -1; }

/* Vertical stagger — the thing that makes it read as a mosaic. */
.down-1 { margin-top: clamp(1.5rem, 4vw, 4rem); }
.down-2 { margin-top: clamp(3rem, 8vw, 8.5rem); }

/* Two notes stacked in one column. A single short paragraph beside a big
   photograph is what leaves the void: the row is as tall as the picture and
   the copy cannot fill it. Two notes have the mass to hold the column, and
   centring absorbs whatever is left over at both ends instead of dumping it
   all underneath. */
.notestack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-self: center;
}
.mosaic > .note,
.mosaic > .credits { align-self: center; }

.mosaic figure { margin: 0; display: grid; gap: .55rem; }
/* Rows mixing portrait formats: crop to one ratio so they share a baseline.
   Three uncropped portraits of different heights leave a 250px step. */
.mosaic figure.crop img { aspect-ratio: 3 / 4; object-fit: cover; }
.mosaic figure.crop-wide img { aspect-ratio: 3 / 2; object-fit: cover; }

.mosaic figcaption {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  line-height: 1.5;
}

/* Production credits. Facts, set as a plate — a magazine would run these. */
.credits {
  border-top: 1px solid var(--rule-dark);
  padding-top: 1.1rem;
  display: grid;
  gap: .55rem;
}
.credits div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.credits dt { color: var(--on-dark-muted); }
.mosaic figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule-dark);
  filter: grayscale(1) contrast(1.08);
  transition: filter .4s var(--ease);
}
.mosaic figure:hover img { filter: none; }

/* Each note opens on a cue — a fragment lifted straight from the copy below
   it, set large. A cross-head rather than a number: the posts are prose, and
   numbering prose implies an order that isn't there. */
.note__cue {
  display: block;
  font-size: clamp(1.5rem, 2.7vw, 3.1rem);
  font-variation-settings: "wdth" 125, "wght" 900;
  text-transform: uppercase;
  color: var(--accent);
  line-height: .92;
  letter-spacing: -.03em;
  margin-bottom: .9rem;
  text-wrap: balance;
}
.note p {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--on-dark-muted);
}

/* --- Post language switch -------------------------------------------------- *
 * The posts are French originals with an English translation beside them.
 * English is the default, matching the rest of the site; without JS the
 * English shows and the French stays hidden.
 * -------------------------------------------------------------------------- */

.postlang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule-dark);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: .1em;
}
.postlang button {
  padding: .35rem .7rem;
  color: var(--on-dark-muted);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.postlang button + button { border-left: 1px solid var(--rule-dark); }
.postlang button:hover { color: var(--on-dark); }
.postlang button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

[data-l="fr"] { display: none; }
.mag[data-lang="fr"] [data-l="en"] { display: none; }
.mag[data-lang="fr"] [data-l="fr"] { display: block; }

@media (max-width: 900px) {
  .m3, .m4, .m5, .m6, .m7, .m8, .m12 { grid-column: 1 / -1; }
  .down-1, .down-2 { margin-top: 0; }
  .note p { font-size: 1rem; color: var(--on-dark); max-width: 62ch; }
}

/* Buttons — sharp, inverting */
.btn {
  display: inline-block;
  padding: .95rem 1.6rem;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* --- Footer -------------------------------------------------------------- */

.foot {
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gut) 2rem;
  border-top: 1px solid var(--rule-dark);
}
.foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 2rem;
  max-width: 108rem;
  margin-inline: auto;
}
.foot__grid h3 {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-bottom: .9rem;
}
.foot__grid li + li { margin-top: .45rem; }
.foot__grid a:hover { color: var(--accent); }

/* Office clocks. Analog SVG, built and driven by site.js. Hands are
   butt-capped rather than rounded, to sit with the rest of the type. */
.clocks {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.clk-face {
  display: block;
  width: clamp(84px, 8vw, 112px);
  height: clamp(84px, 8vw, 112px);
  overflow: visible;
}
.clk-ring { fill: none; stroke: var(--rule-dark); stroke-width: 1.5; }
.clk-tick { stroke: var(--on-dark-muted); stroke-width: 1; }
.clk-tick.maj { stroke: var(--on-dark); stroke-width: 1.75; }
.clk-h { stroke: var(--on-dark); stroke-linecap: butt; }
.clk-h.hour { stroke-width: 3.4; }
.clk-h.min  { stroke-width: 2.2; }
/* The second hand is the one accent-coloured moving part on the page. */
.clk-h.sec  { stroke: var(--accent); stroke-width: 1.1; }
.clk-cap    { fill: var(--accent); }
.clk-city {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  white-space: nowrap;
}

/* A ticking hand is motion. Park it and let site.js drop to a slow update. */
@media (prefers-reduced-motion: reduce) {
  .clk-h.sec { display: none; }
}
.foot__base {
  max-width: 108rem;
  margin: 2.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-dark);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  justify-content: space-between;
}

/* --- Lightbox ------------------------------------------------------------ */

/* Clips play here, on black, rather than sending anyone off to YouTube. */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: clamp(1rem, 5vw, 4rem);
  background: #000;
}
.lb.is-on { display: grid; }

.lb__frame {
  width: min(100%, 82rem);
  aspect-ratio: 16 / 9;
  background: #000;
}
.lb__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Close cross, drawn from two rules so it stays sharp at any size. */
.lb__close {
  position: absolute;
  top: clamp(.75rem, 2.5vw, 1.75rem);
  right: clamp(.75rem, 2.5vw, 1.75rem);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-dark);
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.lb__close::before,
.lb__close::after {
  content: "";
  position: absolute;
  width: 1.1rem;
  height: 1.5px;
  background: var(--on-dark);
}
.lb__close::before { transform: rotate(45deg); }
.lb__close::after  { transform: rotate(-45deg); }
.lb__close:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.lb__close:hover::before,
.lb__close:hover::after { background: var(--on-accent); }

/* --- Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  .bar, .foot, .lb, .skip { display: none; }
  body { background: #fff; color: #000; }
}