/* ═══════════════════════════════════════════════════════════════════
   GLAMMBOX 2026 — WEBSITES (page-scoped, owned by this builder only)
   Loads LAST. Depends on tokens.css / system.css / media.css / contact.css.
   Never edit those files from here — override with .room-websites scope.
   ─────────────────────────────────────────────────────────────────── */

/* ══ 1 · HERO — real film, one CTA, no ghost layer ═══════════════════
   The old page kept a fixed, page-wide `[data-film="loop-channel"]`
   wash behind EVERYTHING (a screenshot-video of the SB7 site, at low
   opacity) — its own headline ("Vous avez le contrat. On a les
   poseurs.") bled through behind "Sites in service." on every screen
   of the page. That div is gone from the HTML; this hero replaces it
   with the montage of the site tiles below, built like welcome.html's
   section.v2-hero. */
.room-websites .ws-hero{
  position:relative;
  min-height:calc(100svh - var(--top-h));
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:1fr auto;
  align-items:end;
  padding:var(--s-6) var(--gutter) var(--s-7);
  isolation:isolate;
  overflow:clip;
}
.room-websites .ws-hero-film{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;display:block;object-fit:cover;
  filter:saturate(.78) contrast(1.05);
}
/* The scrim is what makes the montage a backdrop instead of a competitor.
   The first version went almost clear (.10) exactly where the copy block
   starts — the montage's own client pages, French body copy and all, read
   straight through "Sites in service." at 1280 and at 390. Measured behind
   the h1 on the live page: mean luminance 34/255 but p99 149 and peaks at
   204, i.e. under 2:1 against bone type. The film still breathes in the
   upper half; from the copy band down it is properly held back. */
.room-websites .ws-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,8,10,.74) 0%,rgba(7,8,10,.26) 24%,rgba(7,8,10,.30) 42%,rgba(7,8,10,.72) 60%,rgba(7,8,10,.90) 78%,rgba(7,8,10,.96) 100%),
    linear-gradient(90deg,rgba(7,8,10,.72) 0%,rgba(7,8,10,.34) 56%,transparent 88%);
}
.room-websites .ws-hero-copy{max-width:min(56rem,100%);min-width:0}
.room-websites .ws-hero-copy .gb-kicker{margin:0 0 var(--s-4)}
.room-websites .ws-hero-copy h1{
  font-family:var(--f-display);
  font-size:clamp(2.8rem,min(8vw,9.6svh),6.6rem);
  font-weight:600;line-height:.94;
  letter-spacing:var(--tr-mega);
  color:var(--gb-bone);
  margin:0 0 var(--s-5);
  text-wrap:balance;
}
.room-websites .ws-hero-copy .gb-lede{max-width:46ch;margin:0 0 var(--s-6);color:var(--gb-bone-soft)}
.room-websites .ws-hero-act{margin:0}
@media (max-width:768px){
  .room-websites .ws-hero{padding-bottom:var(--s-6)}
  .room-websites .ws-hero-copy h1{font-size:clamp(2.3rem,10.6vw,3.6rem)}
}

/* ══ 2 · SECTION RHYTHM — halve the dead-black slabs ═════════════════
   contact.css gives every .gb-section a bottom gap of --section-y AND
   every .gb-chapter inside it a top gap of --section-y again: two
   full-size gaps stack at each seam (up to ~350px), reading as a slab
   of nothing between the wall and the next chapter. Halved here, this
   page only. */
.room-websites .gb-section{padding-block:0 clamp(2.4rem,6vh,5.5rem)}
.room-websites .gb-section > .gb-chapter{padding-top:clamp(2.4rem,6vh,5.5rem)}

/* ══ 3 · THE WALL — vary scale, alternate plates, collapse captions ══ */

/* 3a. no two neighbours share a background value while media loads
   or if a source ever 404s — the fallback plate cycles through three
   raised tones instead of one flat one. */
.room-websites .gb-film-grid > .gb-film:nth-of-type(3n+1) .gb-film-frame{background:var(--gb-ink)}
.room-websites .gb-film-grid > .gb-film:nth-of-type(3n+2) .gb-film-frame{background:var(--gb-panel)}
.room-websites .gb-film-grid > .gb-film:nth-of-type(3n) .gb-film-frame{background:var(--gb-panel-2)}

/* 3b. real scale variation: `.gb-film--wide` used to compute to the
   same aspect ratio as a plain tile at desktop (no visible effect at
   all). It now actually runs the row, cinema-establishing-shot style,
   roughly every third tile. A ninth tile is added in #shipped so no
   run of plain tiles between two wide ones is odd-length — the exact
   defect that left the last desktop row with one tile and a hole
   beside it. */
@media (min-width:760px){
  .room-websites .gb-film-grid > .gb-film--wide{grid-column:1/-1;--film-ar:21/9}
}
@media (min-width:1180px){
  .room-websites .gb-film-grid > .gb-film--wide{--film-ar:24/9}
}
@media (min-width:760px){
  .room-websites #shipped .gb-film-grid > .gb-film:nth-of-type(9){grid-column:1/-1;--film-ar:21/9}
}
@media (min-width:1180px){
  .room-websites #shipped .gb-film-grid > .gb-film:nth-of-type(9){--film-ar:24/9}
}
/* #feed's last tile is a 9:16 portrait clip — stretching it to a
   cinema aspect would crop it badly, so instead of forcing a wide
   frame it is centred as its own deliberate close, not left half in
   an otherwise-empty row. */
@media (min-width:760px){
  .room-websites #feed .gb-film-grid > .gb-film:last-child{
    grid-column:1/-1;justify-self:center;max-width:min(100%,24rem);
  }
}

/* 3c. captions: collapse three flat lines (name / two-line description
   / "open the site") to one strong line. The client name moves up to
   the display face with a touch of tracking; the description drops to
   a single muted line — still on the page, never removed, just no
   longer competing with the name for the same weight. */
.room-websites .gb-film-band b{
  font-family:var(--f-display);
  font-size:var(--t-md);
  font-weight:580;
  letter-spacing:.012em;
  color:var(--gb-bone);
}
.room-websites .gb-film-band em{
  -webkit-line-clamp:1;
  font-size:var(--t-label);
  letter-spacing:.01em;
  color:var(--gb-dim);
  margin-top:.3rem;
}

/* 3d. the un-neutralised V1 "wall-card": a solid cream card
   (site.css `.wall-card{background:#fffaf1;color:#140804}`) sitting
   under the four #feed films. media.css already strips this look off
   `.web-card` / `.card` / `.gb-surface`, but never learned about
   `.wall-card`, so those four captions rendered as near-illegible dark
   text on a cream plate — reading, at a glance, as a blank off-white
   rectangle. This is the "thumbnail 404" the bar calls out; the media
   itself all resolves, the caption card underneath it did not. */
.room-websites .gb-film-band .wall-card,
.room-websites .gb-film-band .wall-card:hover,
.room-websites .gb-film-band .wall-card:focus-visible{
  background:none!important;background-image:none!important;
  border:0!important;box-shadow:none!important;border-radius:0!important;
  padding:0!important;margin:0!important;color:inherit!important;
}
.room-websites .gb-film-band .wall-card > *{padding-left:0!important;margin-left:0!important;text-indent:0!important}
.room-websites .gb-film-band .wall-card b{
  font-family:var(--f-display)!important;
  font-size:var(--t-md)!important;
  font-weight:580!important;
  letter-spacing:.012em!important;
  padding:0!important;
  color:var(--gb-bone)!important;
}
.room-websites .gb-film-band .wall-card em{
  font-family:var(--f-text)!important;
  font-style:normal!important;
  font-size:var(--t-label)!important;
  letter-spacing:.01em!important;
  padding:0!important;
  color:var(--gb-dim)!important;
  -webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;
}

/* ══ 4 · ONE EDITORIAL ACCENT ═════════════════════════════════════════
   The system allows exactly one serif-italic emphasis per page — the
   <em class="gb-turn"> on the "own-sites" heading in the HTML is it.
   No CSS needed here: media.css already styles .gb-chapter em.gb-turn. */

/* ══ 5 · THE CLOSE — a full-bleed film frame, hero type scale ═══════ */
.room-websites .ws-close{position:relative;isolation:isolate;overflow:hidden}
.room-websites .ws-close-film{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.7) contrast(1.05) brightness(.82);
}
.room-websites .ws-close::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 0%,rgba(7,8,10,.2) 0%,rgba(7,8,10,.82) 68%),
    linear-gradient(180deg,rgba(7,8,10,.55) 0%,rgba(7,8,10,.35) 30%,rgba(7,8,10,.88) 100%);
}
.room-websites .gb-commission.ws-close h2{
  font-size:clamp(2.2rem,5.6vw,4.4rem);
  letter-spacing:var(--tr-mega);
  max-width:22ch;
}

/* ══ 6 · THE CTA — the system button, not the outline pill ═══════════ */
.room-websites .ws-hero-act .gb-btn{min-height:54px;padding:0 1.9rem!important}

/* ══ 7 · THE EMAIL — never break mid-word ═════════════════════════════
   "glammbox@gmai / l.com": overflow-wrap:anywhere alone is happy to
   split inside a word once nothing else fits. keep-all stops it from
   reaching for that first, and the size drops enough at 390px that it
   never needs to. */
.room-websites .gb-mail{
  /* the address is one word: never let it break mid-word (it read
     "glammbox@gmai / l.com" at 1440). It is sized to fit its column instead. */
  word-break:keep-all;
  overflow-wrap:normal;
  white-space:nowrap;
  display:inline-block;max-width:100%;
  font-size:clamp(1.5rem,3.1vw,2.6rem);
}
@media (max-width:460px){
  .room-websites .gb-mail{font-size:clamp(1.25rem,6.2vw,1.7rem)}
}

/* FINISH PASS · 2026-09-07 — tile captions were hard-clipped mid-word
   (line-clamp with text-overflow:clip): "Plain-language dossiers on the Qué"
   simply stopped. Two lines on desktop, and any truncation now ends on an
   ellipsis so a cut line reads as a cut line. */
.room-websites .gb-film-band em,
.room-websites .web-card em{
  text-overflow:ellipsis!important;
}
@media (min-width:901px){
  .room-websites .gb-film-band em{-webkit-line-clamp:2!important}
}