/* ============================================================
   ENDLESSS — STYLESHEET (single-page site)
   Dark ground, rose-gold metal. Rebuilt 2026-08-25.

   THE RULE THAT KEEPS THIS LOOKING LIKE A STUDIO AND NOT A
   WEDDING INVITATION: the rose gold only ever touches
   INTERFACE forms — hairlines, numerals, buttons, table rules.
   Never scrollwork, never flourishes, never a drop-cap.
   ============================================================ */

:root {
  /* --- ground: warm near-black, so the rose sits in the same
         family as the background instead of floating on it --- */
  --ground:    #190314;   /* the plum sampled straight out of the sky plate
                            (Young as the Stars, 0.6s). Ainhoa 2026-08-25:
                            the page now sits inside her own night sky
                            rather than on a flat colour. */
  --ground-2:  #25091F;   /* raised surface: cards, players */
  --ground-3:  #2F0D27;   /* hover / active surface */

  --ink:       #ECE9EB;   /* body text */
  --dim:       #A4899E;   /* secondary text */
  --faint:     #6C4B65;   /* fine print */

  --line:      rgba(244, 232, 240, 0.10);
  --line-2:    rgba(244, 232, 240, 0.18);

  /* The rose, raised for a dark ground. The old #A9838A was
     mixed for cream and goes muddy on black. */
  --rose:        #E85A76;
  --rose-deep:   #C7284B;

  --radius: 14px;
}

/* Metallic rose gold. Brighter stops than the cream-era version
   so it reads as polished metal catching a light, not as ink. */
:root {
  --metal:   linear-gradient(115deg,#821F34 0%, #E17088 22%, #C7284B 45%, #F0C4CC 60%, #C7284B 75%, #E17088 90%, #821F34 100%);
  --metal-h: linear-gradient(90deg,#821F34 0%, #E17088 28%, #C7284B 52%, #F0C4CC 76%, #821F34 100%);
  --metal-num: linear-gradient(115deg,#821F34 0%, #C7284B 34%, #F0C4CC 52%, #C7284B 70%, #821F34 100%);
}

/* ---- Fantastica: the logo's typeface, headings only ----
   Three weights under one family name. Bold and Black were made
   2026-08-04 by real outline expansion (not faux-bold).
   NB: Fantastica has LETTERS ONLY — no digits, no & - ' — which
   is why every number on this page is set in IBM Plex Mono.
   That's a deliberate pairing now, not a fallback. */
@font-face {
  font-family: "Fantastica";
  src: url("../fonts/Fantastica.otf") format("opentype"),
       url("../fonts/Fantastica.ttf") format("truetype");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fantastica";
  src: url("../fonts/Fantastica-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fantastica";
  src: url("../fonts/Fantastica-Black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--ground);
  -webkit-font-smoothing: antialiased;
}

/* ---- The sky plate ----
   A real frame from Young as the Stars (0.6s in). It is FIXED and does
   not move, which is the point: things infinitely far away don't shift
   when you walk. The generated stars on the canvas above it DO move,
   and the disagreement between the two is what makes the page feel
   deep rather than papered. */
#sky {
  position: fixed;
  left: 0; right: 0;
  top: -14vh; height: 128vh;
  will-change: transform;
  z-index: 0;
  pointer-events: none;
  /* start already inside the star field — the band sits low in the
     source frame, so anchoring at the top would open the page on its
     emptiest corner */
  background: url("../images/sky.jpg") center 58% / cover no-repeat;
  opacity: 0.9;
}
/* a wash of the ground colour over the plate, so the sky never
   competes with the type sitting on it */
#sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232,90,118,0.09) 0%, transparent 60%),
    linear-gradient(180deg, rgba(25,3,20,0.10) 0%, rgba(25,3,20,0.28) 100%);
}

/* ---- The night sky ----
   Fixed behind the whole page. It has to sit ABOVE the body's flat
   background colour and BELOW every band, which is why the bands and
   the hero already carry position:relative and z-index:1. */
#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* ---- Film grain over the whole page ----
   Same artwork as before, DEsaturated. Tinted rose on cream it
   read as aged paper; neutral on black it reads as emulsion. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  background: url("../images/dust-c.jpg") center / cover no-repeat;
  mix-blend-mode: screen;
  /* Pulled right down now the starfield is doing the work. Grain and
     stars at equal strength read as noise, not as a sky — the eye
     cannot tell which specks are meant. */
  opacity: 0.05;
  filter: grayscale(1) contrast(1.2) brightness(0.85);
}

/* Headings: Fantastica, lowercase, wide-tracked, SMALL.
   No drop-caps anywhere — that was the ceremonial tell. */
h1, h2 {
  font-family: "Fantastica", "Inter", sans-serif;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.04em;
  margin: 0 0 0.5em;
  text-transform: lowercase;
}
h3 {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
}

/* Mono carries every number, label and micro-caption on the page.
   This is what makes the gold read technical rather than gilded. */
.mono, .sec-num, .price, .meta, .tag {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

p { margin: 0 0 1em; }
a { color: inherit; }
img, iframe, video { max-width: 100%; display: block; }

/* ---- Fade-in on scroll ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   THE DRAWN RULE — replaces the gilded dividers.
   A 1px rose hairline that opens outward from the centre as you
   scroll. Same beat as the old unfurling divider; the form is
   now a rule instead of Victorian scrollwork.
   ============================================================ */
.rule {
  width: min(1100px, 88vw);
  margin: clamp(3rem, 8vh, 5.5rem) auto;
  height: 1px;
  overflow: hidden;
}
.rule i {
  display: block;
  height: 1px;
  background: var(--metal-h);
  background-size: 200% 100%;
  transform: scaleX(var(--draw, 0));
  transform-origin: center;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .rule i { transform: none; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-accent, .btn-ghost, .nav-cta {
  display: inline-block;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.btn-accent {
  background-image: var(--metal);
  background-size: 240% 100%;
  /* --sweep is driven by scroll in main.js: the metal catches the
     light as the page moves. Printed foil doesn't do this. */
  background-position: var(--sweep, 0%) 0;
  color: #160611;
  transition: filter 0.3s ease;
}
.btn-accent:hover { filter: brightness(1.12); }
.btn-ghost {
  border: 1px solid var(--line-2);
  color: var(--ink);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.btn-ghost:hover { border-color: var(--rose); background-color: rgba(232,90,118,0.08); }
.btn-big { padding: 1.05rem 2.6rem; font-size: 0.78rem; }

/* ============================================================
   TOP BAR
   ============================================================ */
.site-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 3.5rem);
  /* No background and NO bottom edge at the top of the page, so
     there is never a visible seam between the menu and the hero
     (Ainhoa 2026-08-25). A background fades in once you scroll,
     and it is the page's own ground colour — not black. */
  background: rgba(25, 3, 20, 0);
  transition: background-color 0.45s ease, backdrop-filter 0.45s ease;
}
body.is-scrolled .site-bar {
  background: rgba(25, 3, 20, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* the hairline strokes of the wordmark need thickening to hold
   their own next to the menu */
.bar-logo .logo-img {
  height: clamp(2.9rem, 3.6vw, 3.6rem); width: auto;
  filter: drop-shadow(0.5px 0 0 rgba(232,236,244,0.9))
          drop-shadow(-0.5px 0 0 rgba(232,236,244,0.9));
}

.site-bar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.6rem; }
.site-bar nav a:not(.nav-cta) {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.site-bar nav a:not(.nav-cta):hover { border-bottom-color: var(--rose); }
.nav-cta {
  background-image: var(--metal);
  background-size: 240% 100%;
  background-position: var(--sweep, 0%) 0;
  color: #160611;
  padding: 0.55rem 1.3rem;
  transition: filter 0.3s ease;
}
.nav-cta:hover { filter: brightness(1.12); }

/* ============================================================
   HERO — the film is the hero, so it gets the room.
   ============================================================ */
.hero {
  min-height: 100svh;
  scroll-margin-top: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 8rem 1.5rem 4rem;
  position: relative;
  /* NO solid colour here — the hero must let the sky plate behind it
     show through. Painting var(--ground) covered the stars completely
     and made the top of the page the only flat part of it. */
  background: radial-gradient(120% 80% at 50% 0%, rgba(232,90,118,0.10) 0%, transparent 55%);
}
.hero-kicker {
  font-size: 0.65rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 1.75rem;
}
.hero-video { width: min(1000px, 100%); margin-bottom: 2.25rem; }
.hero-sub {
  color: var(--dim);
  max-width: 36em;
  margin-bottom: 2.25rem;
  font-size: 1.05rem;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ============================================================
   THE PLAYER — poster + metal play button. Clicking plays the
   film in place, in this same frame.
   ============================================================ */
.player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ground-2);
  border: 1px solid var(--line);
  cursor: pointer;
  display: block;
  padding: 0;
}
.player img, .player video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(.2,.7,.2,1), opacity 0.5s ease;
}
.player:hover img { transform: scale(1.03); }

/* ---- A film plays where it sits (Ainhoa 2026-08-25) ----
   The video lives in the same frame as its poster and only appears
   once someone presses play. No overlay, no second window. The
   browser's own controls come with it, so the viewer still gets a
   scrub bar and a fullscreen button. */
.film .player video { position: absolute; inset: 0; display: none; }
.film .player.is-playing video { display: block; }
.film .player.is-playing img,
.film .player.is-playing .play-dot,
.film .player.is-playing .meta { display: none; }
.film .player.is-playing { cursor: default; }
.film .player.is-playing::after { display: none; }
.player::after {
  /* a soft floor so the play button and title always read */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(25,3,20,0.1) 0%, transparent 40%, rgba(25,3,20,0.75) 100%);
  pointer-events: none;
}
.play-dot {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  opacity: 0.82;
  border-radius: 999px;
  display: grid; place-items: center;
  background-image: var(--metal);
  background-size: 240% 100%;
  background-position: var(--sweep, 0%) 0;
  z-index: 2;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), filter 0.3s ease;
}
.player:hover .play-dot { transform: translate(-50%, -50%) scale(1.1); filter: brightness(1.12); opacity: 1; }
.play-dot::before {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 13px solid #160611;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
/* the hero's film gets the larger button */
.hero-video .play-dot { width: 78px; height: 78px; opacity: 1; }
.hero-video .play-dot::before {
  margin-left: 5px;
  border-left: 18px solid #160611;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.hero-video .player { box-shadow: 0 30px 90px rgba(0,0,0,0.6); }

/* ---- The showreel ----
   The video is the surface itself, so it fills the frame. The
   play button fades away while a film is running and comes back
   on hover, to say "click me and you get this with sound". */
.player-hero { cursor: pointer; }
.player-hero video {
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--ground-2);
}
.player-hero video.swapping { opacity: 0; }
/* the reel runs on its own, so it never shows a play button */
.player-hero .play-dot { display: none; }
.player-hero .meta { transition: opacity 0.4s ease; }
.player-hero { cursor: default; }

/* ---- Sound, bottom-right ----
   The reel is already playing, so a play button would be a lie. The
   only thing a viewer can usefully ask for is to hear it. Sits
   opposite the film title, which is bottom-left. */
.sound-btn {
  position: absolute;
  right: 1rem; bottom: 0.85rem;
  z-index: 3;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(244,232,240,0.22);
  background: rgba(25,3,20,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease,
              border-color 0.25s ease, background-color 0.25s ease;
}
/* visible on hover, and pinned on while sound is actually playing so
   nobody loses the control that is currently making noise */
.player-hero:hover .sound-btn,
.sound-btn:focus-visible,
.player-hero.sound-on .sound-btn { opacity: 1; transform: none; }
.sound-btn:hover { border-color: var(--rose); background: rgba(25,3,20,0.8); }
.player-hero.sound-on .sound-btn { border-color: var(--rose); color: var(--rose); }

.sound-btn svg { width: 20px; height: 20px; }
.sound-btn svg .spk { fill: currentColor; }
.sound-btn svg .on,
.sound-btn svg .off {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}
/* muted by default: show the cross, hide the waves */
.sound-btn svg .on { display: none; }
.player-hero.sound-on .sound-btn svg .on  { display: block; }
.player-hero.sound-on .sound-btn svg .off { display: none; }
/* the showreel is the point of the hero — don't dim it. Just
   enough scrim at the bottom to keep the film title legible. */
.player-hero::after {
  background: linear-gradient(180deg, transparent 0%, transparent 72%, rgba(25,3,20,0.62) 100%);
}

/* the running-time chip, bottom-left of every player */
.player .meta {
  position: absolute;
  left: 1rem; bottom: 0.9rem;
  z-index: 2;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--ink);
  opacity: 0.75;
}

/* ============================================================
   BANDS — every band is the same dark ground now. Section
   separation comes from the drawn rule and the numbering,
   not from a change of paper colour.
   ============================================================ */
.band { padding: clamp(2.5rem, 6vh, 4rem) 0; position: relative; scroll-margin-top: 5.5rem; }
.band-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.band > *, .hero > * { position: relative; z-index: 1; }

.sec-head {
  display: flex; align-items: baseline;
  gap: 1.1rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.sec-num {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  background: var(--metal-num);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Big and hairline. Fantastica has no heavy cut — so the way to
   give a heading presence is SIZE, not weight, which also makes
   it echo the wordmark instead of fighting it. */
.sec-head h2 { font-size: clamp(2.6rem, 5.4vw, 4.2rem); margin: 0; letter-spacing: 0.02em; }
.sec-head .sec-note {
  margin: 0 0 0 auto;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
}

.lede { max-width: 42em; color: var(--dim); margin-bottom: 2.5rem; font-size: 1.02rem; }

/* ============================================================
   WORK — all the films, one grid. New work joins the grid.
   ============================================================ */
.films {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.6vw, 2rem);
}
.film-info { padding: 1rem 0.15rem 0; }
.film-info h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.film-info p { color: var(--dim); font-size: 0.92rem; margin: 0; }
.tag {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.55rem;
}

/* the reserved slot at the end of the grid */
.film-tease .slot {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border: 1px dashed var(--line-2);
  display: grid; place-items: center;
  text-align: center;
  padding: 1.5rem;
}
.film-tease .slot p {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ============================================================
   SERVICES — film first, then the retainer, then photography.
   ============================================================ */
.svc-block { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.svc-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1rem;
  margin-bottom: 0.6rem;
}
.svc-head h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 0; }
.svc-head .price {
  font-size: 0.95rem;
  background: var(--metal-num);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.svc-block > p { color: var(--dim); max-width: 44em; }

/* ---- the three retainer cards ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 2vw, 1.5rem);
  margin-top: 1.75rem;
}
.card {
  background: var(--ground-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), border-color 0.35s ease, background-color 0.35s ease;
}
.card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--metal-h);
  background-size: 200% 100%;
  background-position: var(--sweep, 0%) 0;
}
.card:hover { transform: translateY(-4px); border-color: var(--line-2); background-color: var(--ground-3); }
/* All three cards read the same (Ainhoa 2026-08-25). The middle one
   used to carry a rose border and a lighter panel to push Signature —
   a standard pricing-table nudge, but it made the row look uneven
   rather than deliberate. Let the numbers do the arguing. */
.card-name {
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.7rem;
}
.card .price {
  display: block;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.card .per {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.4rem;
}
.card ul { list-style: none; margin: 0; padding: 0; }
.card li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.card li span:last-child { color: var(--rose); }
.card li.plain { justify-content: flex-start; color: var(--dim); }

.card-note {
  margin: 1.6rem 0 0;
  font-size: 0.85rem;
  color: var(--dim);
}
.terms {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem 2rem;
}
.terms div { font-size: 0.85rem; color: var(--dim); }
.terms strong {
  display: block;
  color: var(--ink);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

/* ---- the priced list (photography) ---- */
.rate-list { margin-top: 1.4rem; border-top: 1px solid var(--line); }
.rate-list div {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.rate-list dt, .rate-list .what { flex: 1 1 20em; margin: 0; }
.rate-list .what small { display: block; color: var(--faint); font-size: 0.82rem; }
.rate-list .price { color: var(--rose); font-size: 0.95rem; white-space: nowrap; }

/* ============================================================
   PROCESS
   ============================================================ */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 4rem);
}
.step { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.step h3 { font-size: clamp(1rem, 1.7vw, 1.2rem); display: flex; align-items: baseline; gap: 0.85rem; }
.step-n {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  background: var(--metal-num);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step p { color: var(--dim); margin: 0; font-size: 0.94rem; }

/* ============================================================
   JOURNAL
   ============================================================ */
.posts { display: grid; gap: 0; }
.post {
  display: grid;
  grid-template-columns: 15rem 1fr auto;
  gap: 1rem 2rem;
  align-items: center;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.posts .post:last-child { border-bottom: 1px solid var(--line); }
.post:hover { background-color: rgba(244,232,240,0.03); }
.post img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.post:hover img { transform: scale(1.02); }
.post time {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.68rem; letter-spacing: 0.18em;
  color: var(--faint); text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.post h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.post p { margin: 0; color: var(--dim); font-size: 0.9rem; }
.post .go { color: var(--rose); font-size: 0.78rem; letter-spacing: 0.18em; white-space: nowrap; }

/* ============================================================
   ABOUT — a rose bloom, where the oval mirror used to be.
   ============================================================ */
.about { overflow: hidden; }
.about::after {
  content: "";
  position: absolute;
  right: -6%; top: 50%;
  transform: translateY(-50%);
  width: min(720px, 82vw);
  aspect-ratio: 1 / 1;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(232,90,118,0.15), rgba(232,90,118,0.05) 45%, transparent 72%);
}
.about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); }
.about p { color: var(--dim); }
.about a { color: var(--rose); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { text-align: center; padding: clamp(4rem, 10vh, 7rem) 0; }
.contact-line { font-size: clamp(2.4rem, 5.6vw, 4.2rem); color: var(--ink); }
.contact-sub { color: var(--dim); margin-bottom: 2.25rem; }
.contact-alt { margin: 1.75rem 0 0; font-size: 0.85rem; color: var(--faint); }
.contact-alt a { color: var(--dim); }

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--line);
  color: var(--faint);
  text-align: center;
  padding: 2.5rem 1.5rem;
}
/* the S is the wordmark's own mark — brand, not ornament, so it
   stays. Small and quiet. */
.footer-s { height: 2.2rem; width: auto; margin: 0 auto 1rem; filter: invert(1); opacity: 0.22; }
.site-footer .fine { font-size: 0.74rem; margin: 0; letter-spacing: 0.06em; }

/* ============================================================
   PHONES & SMALL SCREENS
   ============================================================ */
@media (max-width: 860px) {
  .films { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .about-cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .site-bar nav a:not(.nav-cta) { display: none; }
  .hero { padding-top: 6.5rem; }
  .post { grid-template-columns: 1fr; gap: 0.9rem; }
  .post .go { display: none; }
  .about::after { opacity: 0.7; right: -30%; }
}