/* ============================================================================
   MTL STUDENTS · Direction B « Soleil » · Ressources
   ----------------------------------------------------------------------------
   Page-specific only. soleil.css is frozen: every rule below is additive, and
   the three places where it locally adjusts a shared component are marked
   OVERRIDE so the orchestrator can promote or reject them on purpose.

   ------------------------------------------------------------- the problem --
   This page of the live site has no photography at all. Its only images are the
   logo and three social icons, there is no stock we may invent, and there is
   nothing to harvest. So the page has to be carried on type, colour, rule
   weight, scale and space.

   Direction A answers that with restraint: a magazine contents page, dotted
   leaders, one oversized serif numeral per entry, figures set large in gold.

   Direction B answers it with the opposite move, and it is the move this
   direction was built for. soleil.css already says that the section rhythm IS
   the layout system, so here the five resources ARE the five sections: five
   full-bleed colour blocks, gold → oxblood → pink → sand → orange, each one a
   poster with its own ground. Colour becomes the image. The swatch rack in the
   masthead is then a contents page made of the exact five colours, so the
   reader learns the key before the first block and knows where they are for
   the rest of the page without a single label telling them.

   Nothing here is decorative: no gradient blobs, no icon set, no CSS drawings.
   Every filled shape on the page is either a section ground, a fact, or a
   control.

   ------------------------------------------------------------------ colour --
   Grounds and type colours obey soleil.css's contrast constraint without
   exception. --pink, --gold and --orange are fills only and always carry --ink
   type; --oxblood carries --paper type; --berry (7.5:1 on paper) is the only
   pink allowed to be type, and it appears once, as the numeral on the sand
   block. No small type is ever set in --pink.
   ========================================================================== */

/* ------------------------------------------------------------- masthead -- */
/* .rs-mast carries the .hero class as well, which is what gives it the motif
   placement, the overflow clip and the staggered load-in from soleil.js. Only
   the motif geometry is retuned here: this masthead is three lines of display
   type rather than two, so the sun sits higher and quieter. */

.rs-mast .sun   { right: -11%; top: -6%; width: min(40vw, 430px); opacity: .42; }
.rs-mast .spark { right: 4%; top: 7%; width: clamp(34px, 4.5vw, 60px); }

/* Sized against Gabarito's measured cap width (about .66em per character).
   The longest line here, "T'ORGANISER,", is roughly 7.2em, so the 2.3rem floor
   sets it at 265px inside the 280px a 320px viewport actually gives. Change
   the floor and re-measure that line. */
.rs-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.3rem, .8rem + 5.2vw, 5.6rem);
  /* French headlines need somewhere for the acute on É to sit. */
  line-height: .93;
  letter-spacing: -.025em;
  text-transform: uppercase;
  margin-top: 1.1rem;
}
.rs-title span { display: block; }
/* The wordmark is pink filled with a heavy black outline. One word on the page
   gets it, and it is the verb the whole page is about. em units so the offset
   scales with the type instead of drifting. */
.rs-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);
}

.rs-mast__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.rs-dek {
  font-size: clamp(1.05rem, .98rem + .55vw, 1.35rem);
  line-height: 1.45;
  max-width: 52ch;
}
.rs-dek--small { margin-top: 1rem; font-size: 1rem; color: var(--ink-72); }

/* Two counts, set as a small band rather than as three stat blocks: the stat
   blocks are the home page's device and this page has a rack of five colour
   swatches doing the counting five lines further down. */
.rs-ours {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: .2rem .7rem;
  padding: clamp(.8rem, 2vw, 1.1rem) clamp(.9rem, 2vw, 1.25rem);
  background: var(--paper-2);
  border: var(--rule) solid var(--ink);
  border-radius: 4px;
  box-shadow: 5px 5px 0 var(--ink);
}
.rs-ours b {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem);
  line-height: .9;
  letter-spacing: -.03em;
}
.rs-ours span {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.25;
}

/* ----------------------------------------------------------------- rack -- */
/* The contents page, as five colour swatches in the colours of the five blocks
   they jump to. This is the device that replaces the missing hero image, and it
   only works because the sections downstream are colour blocks. */

.rs-rack { display: block; margin-top: clamp(2.25rem, 5vw, 3.75rem); }
.rs-rack__list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.5rem, 1.2vw, .85rem);
  list-style: none;
  margin: clamp(.9rem, 2vw, 1.25rem) 0 0;
  padding: 0;
}
/* flex-basis rather than a fixed track count: five swatches sit in one row on a
   desktop, wrap to two and three on a tablet, and stack on a phone, with no
   horizontal scrolling anywhere and nothing to clip. */
.rs-rack__list li { flex: 1 1 210px; display: flex; }
.rs-swatch {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  width: 100%;
  min-height: 96px;
  padding: clamp(.7rem, 1.6vw, 1rem);
  border: var(--rule) solid var(--ink);
  border-radius: 4px;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .25s var(--pop), box-shadow .25s var(--pop);
}
.rs-swatch:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }
.rs-swatch b {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -.02em;
}
.rs-swatch__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.15;
  margin-top: auto;
}
.rs-swatch__by {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
}
.rs-swatch--gold   { background: var(--gold); }
.rs-swatch--ox     { background: var(--oxblood); color: var(--paper); }
.rs-swatch--pink   { background: var(--pink); }
.rs-swatch--sand   { background: var(--paper-2); }
.rs-swatch--orange { background: var(--orange); }

/* --------------------------------------------------------------- poster -- */
/* One resource, one ground, full bleed. --line and --num let each block retint
   its rules and its numeral without a new rule per block. */

.poster {
  --line: var(--ink);
  --num: var(--ink);
  position: relative;
  /* clears the sticky bar when the rack's anchors jump without JS */
  scroll-margin-top: 84px;
}
.poster--gold   { background: var(--gold); }
.poster--pink   { background: var(--pink); }
.poster--orange { background: var(--orange); }
.poster--sand   { background: var(--paper-2); --num: var(--berry); }
.poster--ox {
  background: var(--oxblood);
  color: var(--paper);
  --line: var(--paper);
  --num: var(--gold);
  --focus: var(--gold);
}

/* The header band. Direction A hangs a sticky numeral in a side column; this
   is the other way of using a big number, as the left end of a masthead rule
   that runs the full width of the block. */
.poster__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem clamp(.7rem, 2vw, 1.3rem);
  padding-bottom: clamp(.6rem, 1.5vw, 1rem);
  border-bottom: var(--rule) solid var(--line);
}
.poster__num {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.6rem, 1.5rem + 3.6vw, 5.5rem);
  line-height: .8;
  letter-spacing: -.04em;
  color: var(--num);
}
.poster__kind {
  font-family: var(--display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--gold);
  padding: .45em .9em .4em;
  border-radius: 999px;
}
.poster--ox .poster__kind { background: var(--gold); color: var(--ink); }
/* Every article here is an excerpt of a longer piece and none of them has a URL
   anywhere in the harvest, so the page says so on the entry itself rather than
   linking to a post that does not exist. */
.poster__tag {
  font-family: var(--display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  padding: .38em .85em .33em;
  border-radius: 999px;
}
/* The signature. Three of the five entries are signed by a student, which is
   what makes this a publication rather than a list of links, so the byline is
   set at reading size and pushed to the far end of the rule. */
.poster__by {
  margin-left: auto;
  text-align: right;
  font-size: .9375rem;
}
.poster__by i {
  display: block;
  font-style: normal;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
}
.poster__by b {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, .95rem + .35vw, 1.25rem);
  letter-spacing: -.01em;
}

.poster__title {
  font-family: var(--display);
  font-weight: 900;
  /* "AUGMENTATION" is the longest single word on the page at about 7.9em of
     Gabarito caps: the 2rem floor sets it at 253px, inside the 280px a 320px
     viewport gives. */
  font-size: clamp(2rem, .95rem + 3.4vw, 3.6rem);
  line-height: .95;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
  margin-top: clamp(1.1rem, 3vw, 2rem);
  max-width: 20ch;
}
.poster__sub {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, .95rem + .7vw, 1.5rem);
  line-height: 1.2;
  margin-top: .7rem;
  max-width: 34ch;
}

.poster__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
}
.poster__body { max-width: 46ch; }
.poster__body + .poster__body { margin-top: 1.05rem; }
.poster .lede + .poster__body { margin-top: 1.1rem; }
/* 01 is the anchor of the page and its entry is one paragraph long, so the
   paragraph is what fills the block. Nothing is padded out to fake weight. */
.poster--gold .lede { font-size: clamp(1.15rem, 1rem + .95vw, 1.75rem); max-width: 30ch; }

/* Both of these components are paper or gold cards that inherit their type
   colour from the section they sit in. On every other page in this direction
   that section is light, so it never came up; inside .poster--ox the inherited
   colour is --paper and the text disappears into its own card. Pinned to --ink
   here rather than in the frozen system, where it would need to be a rule about
   the card and not about the section. */
.poster .pull, .poster .chip { color: var(--ink); }

/* Her line, at poster size. On a page with no photography the largest thing on
   the screen has to be something she said. */
.rs-say {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.45rem, .9rem + 2.1vw, 3rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  max-width: 22ch;
}
.rs-say i { font-style: normal; font-weight: 700; font-size: .62em; }

/* ------------------------------------------------------ 01 · the control -- */
/* Inactive on purpose, and drawn as an unstuck sticker: the fill drops to paper
   and the offset shadow that every live control in this direction carries is
   removed, so it reads as a control waiting to be wired rather than as one that
   is broken. aria-disabled rather than disabled, so it stays focusable and a
   screen reader announces the state instead of skipping the whole thing. */
.rs-btn[aria-disabled="true"] {
  background: var(--paper);
  box-shadow: none;
  cursor: default;
}
.rs-btn[aria-disabled="true"]:hover {
  background: var(--paper);
  transform: none;
  box-shadow: none;
}
.rs-btn[aria-disabled="true"]:hover svg { transform: none; }
.rs-note {
  display: inline-block;
  margin-top: 1rem;
  padding: .55rem .9rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px;
  font-size: .8125rem;
  line-height: 1.35;
  max-width: 34ch;
}

/* -------------------------------------------------------- 02 · le loyer -- */
/* Two price tags and the difference between them. Direction A sets the same
   three numbers as figures in a row; this sets them as objects, because the
   thing that matters is not that there are three numbers, it is that one of
   them is the gap between the other two. */

.rs-rent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(.6rem, 1.6vw, 1rem);
}
.rs-rent__tag {
  padding: clamp(.85rem, 2vw, 1.2rem);
  background: var(--paper);
  color: var(--ink);
  border: var(--rule) solid var(--ink);
  border-radius: 4px;
  box-shadow: 6px 6px 0 var(--ink);
  rotate: -1.2deg;
}
.rs-rent__tag--gold { background: var(--gold); rotate: 1.2deg; }
.rs-rent__tag span {
  display: block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-72);
}
.rs-rent__tag b {
  display: block;
  margin-top: .25rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem);
  line-height: .95;
  letter-spacing: -.03em;
}
.rs-rent__delta {
  display: grid;
  place-content: center;
  text-align: center;
  width: clamp(96px, 11vw, 124px);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: var(--pink);
  color: var(--ink);
  border: var(--rule) solid var(--ink);
}
.rs-rent__delta b {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.15rem, .95rem + .8vw, 1.6rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.rs-rent__delta span {
  display: block;
  margin-top: .2rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* OVERRIDE (soleil.css .chip): the chip is a pill built for two or three words
   and this one carries "Tribunal administratif du logement", which wraps to two
   lines below about 420px of column. Softening the radius on this page only,
   rather than shortening a real institution's name. */
.poster .chips { margin-bottom: 0; }
.poster .chip { border-radius: 10px; }

/* --------------------------------------------------- 03 · les bons plans -- */
/* Three categories, three fills. Not icons, not a tag list: blocks, because
   blocks are what this direction has instead of pictures. */

.rs-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.5rem, 1.4vw, .85rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.rs-tile {
  display: grid;
  align-content: end;
  min-height: clamp(104px, 15vw, 168px);
  padding: clamp(.7rem, 1.6vw, 1rem);
  border: var(--rule) solid var(--ink);
  border-radius: 4px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(.9rem, .8rem + .5vw, 1.35rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  box-shadow: 5px 5px 0 var(--ink);
}
.rs-tile--gold  { background: var(--gold); color: var(--ink); }
.rs-tile--paper { background: var(--paper); color: var(--ink); }
.rs-tile--ink   { background: var(--ink); color: var(--gold); }

/* ---------------------------------------------------- 04 · les épiceries -- */

.rs-addr {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding: clamp(1rem, 2.4vw, 1.5rem);
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  border-radius: 4px;
  box-shadow: 8px 8px 0 var(--berry);
  rotate: -.9deg;
}
.rs-addr__k {
  display: block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-72);
}
.rs-addr b {
  display: block;
  margin-top: .35rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.rs-addr__v { display: block; margin-top: .35rem; font-size: .9375rem; }

.rs-shelfk {
  font-family: var(--display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 .9rem;
}
/* A shelf of labels. The list is hers, verbatim, and the alternating fills are
   the only thing standing in for a photograph of a shop. */
.rs-pills { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.rs-pills li {
  padding: .55rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
  font-size: .875rem;
  line-height: 1.2;
}
.rs-pills li:nth-child(3n + 1) { background: var(--pink); }
.rs-pills li:nth-child(3n + 2) { background: var(--gold); }
.rs-pills li:nth-child(3n + 3) { background: var(--paper); }

/* --------------------------------------------------- 05 · les transports -- */

.rs-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.5rem, 1.4vw, .85rem);
  list-style: none;
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  padding: 0;
}
.rs-mode {
  padding: clamp(.7rem, 1.8vw, 1.1rem);
  border: var(--rule) solid var(--ink);
  border-radius: 4px;
  box-shadow: 5px 5px 0 var(--ink);
  overflow-wrap: break-word;
}
.rs-mode b {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(.95rem, .85rem + .55vw, 1.5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.rs-mode span {
  display: block;
  margin-top: .2rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rs-mode--ink   { background: var(--ink); color: var(--gold); }
.rs-mode--pink  { background: var(--pink); color: var(--ink); }
.rs-mode--gold  { background: var(--gold); color: var(--ink); }
.rs-mode--paper { background: var(--paper); color: var(--ink); }

/* The only two outbound links on the page, and both of them are hers. */
.rs-apps { display: grid; gap: clamp(.5rem, 1.4vw, .85rem); list-style: none; margin: 0; padding: 0; }
.rs-apps a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .3rem .9rem;
  padding: clamp(.85rem, 2vw, 1.15rem);
  background: var(--paper);
  color: var(--ink);
  border: var(--rule) solid var(--ink);
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .25s var(--pop), box-shadow .25s var(--pop), background .25s var(--ease);
}
.rs-apps a:hover { background: var(--gold); transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }
.rs-apps b {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.05rem, .95rem + .6vw, 1.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.rs-apps span { grid-column: 1 / -1; font-size: .875rem; line-height: 1.35; }
.rs-apps svg { transition: transform .25s var(--ease); }
.rs-apps a:hover svg { transform: translateX(3px); }

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

@media (max-width: 900px) {
  .rs-mast__grid, .poster__grid { grid-template-columns: minmax(0, 1fr); }
  .rs-ours { justify-self: start; }
  .poster__title { max-width: none; }
  /* The byline stops being a right-hand column once the band wraps; left is
     where the eye already is. */
  .poster__by { margin-left: 0; text-align: left; width: 100%; }
}

/* Every rotation in this direction is switched off below 700px, for the reason
   soleil.css gives: a tilted card inside a 350px column pushes its own bounding
   box past the gutter and the budget for horizontal overflow here is zero. */
@media (max-width: 700px) {
  .rs-rent { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .rs-rent__tag, .rs-rent__tag--gold, .rs-addr { rotate: 0deg; }
  .rs-rent__tag { box-shadow: 5px 5px 0 var(--ink); }
  .rs-addr { box-shadow: 6px 6px 0 var(--berry); }
  /* The disc becomes a band: a 120px circle centred in a stacked column reads
     as a stray dot rather than as the difference between the two tags. */
  .rs-rent__delta {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    aspect-ratio: auto;
    padding: .7rem 1rem;
    border-radius: 999px;
  }
  .rs-rent__delta span { margin-top: 0; }
  .rs-apps a { grid-template-columns: minmax(0, 1fr); }
  .rs-apps svg { display: none; }
}

@media (max-width: 560px) {
  .rs-tiles { grid-template-columns: minmax(0, 1fr); }
  .rs-tile { min-height: 0; padding: .9rem 1rem; }
  .rs-rack__list li { flex-basis: 100%; }
}

.news.block--dome { --dome-from: var(--orange); }

/* Backfill for the dome below: the section above paints a strip exactly one
   dome-radius tall, which the dome covers everywhere except its cut-away
   corners. Verified by pixel-sampling the corner. */
.poster:last-of-type { position: relative; }
.poster:last-of-type::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: calc(-1 * clamp(1.5rem, 5vw, 5rem));
  height: clamp(1.5rem, 5vw, 5rem);
  background: var(--orange);
}