/* ============================================================================
   MTL STUDENTS · Direction A « Nuit », page Ressources
   ----------------------------------------------------------------------------
   Loaded after nuit.css, which stays frozen. Everything here is additive and
   namespaced `rs-` so it can be promoted into the design system later without
   colliding with anything.

   The live Ressources page has zero photography: the only images on it are the
   logo and three social icons. So this page is carried on the things type can
   do on its own, a contents page with leaders, oversized serif numerals, a
   rule system, figures set as figures, and a lot of empty space. No stock, no
   gradient blobs, no CSS illustrations standing in for pictures.
   ========================================================================== */

/* ------------------------------------------------------------- masthead -- */

.rs-mast { padding-block: clamp(2.75rem, 6vw, 6rem) clamp(2.5rem, 5vw, 4.5rem); }
.rs-mast__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: end;
}
/* Smaller than .hero__title on purpose: this line is a full sentence, and the
   home page's 7rem ceiling would break it into five ragged lines on a laptop. */
.rs-mast__title {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112;
  font-weight: 800;
  font-size: clamp(2.4rem, 1.1rem + 5vw, 5.25rem);
  line-height: .92;
  letter-spacing: -.032em;
  margin-block: 1.1rem 0;
  text-wrap: balance;
}
.rs-mast__title em { font-style: normal; color: var(--pink); }
.rs-mast__dek { color: var(--cream-70); max-width: 46ch; }
.rs-mast__dek + .rs-mast__dek { margin-top: 1.1rem; }

/* The masthead reveals on load rather than on scroll: it is already on screen,
   so IntersectionObserver fires immediately and the stagger has to come from
   CSS. Pure decoration, and it is disabled with the rest under .js. */
.js .rs-mast [data-reveal]:nth-child(1) { transition-delay: .10s; }
.js .rs-mast [data-reveal]:nth-child(2) { transition-delay: .19s; }
.js .rs-mast [data-reveal]:nth-child(3) { transition-delay: .28s; }

/* -------------------------------------------------------------- sommaire -- */
/* A magazine contents page. Numeral, title, dotted leader, signature. The
   leader is what makes it read as an index rather than as a list of links. */

.rs-som { background: var(--ink-2); padding-block: clamp(2.75rem, 6vw, 5rem); }
.rs-som__list {
  list-style: none;
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--cream-14);
}
.rs-som__list a {
  display: grid;
  grid-template-columns: 3rem minmax(0, auto) minmax(1.5rem, 1fr) auto;
  align-items: baseline;
  gap: .75rem;
  padding-block: clamp(.85rem, 2vw, 1.15rem);
  border-bottom: 1px solid var(--cream-14);
  text-decoration: none;
  transition: padding-inline .35s var(--ease), background .35s var(--ease);
}
.rs-som__list a:hover { background: var(--ink-3); padding-inline: .9rem; }
.rs-som__n { font-family: var(--quote); font-size: 1.35rem; color: var(--orange); }
.rs-som__t {
  font-family: var(--display);
  font-variation-settings: 'wdth' 108;
  font-weight: 600;
  font-size: clamp(1rem, .95rem + .45vw, 1.35rem);
  letter-spacing: -.012em;
  transition: color .25s var(--ease);
}
.rs-som__list a:hover .rs-som__t { color: var(--pink); }
/* the leader dots */
.rs-som__lead {
  border-bottom: 1px dotted var(--cream-14);
  transform: translateY(-.35em);
}
.rs-som__by {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-45);
  white-space: nowrap;
}

/* --------------------------------------------------------------- entries -- */

.rs-entry {
  padding-block: clamp(3rem, 7vw, 6.5rem);
  border-top: 1px solid var(--cream-14);
  scroll-margin-top: 90px;
}
.rs-entry:nth-of-type(even) { background: var(--ink-2); }
/* The guide is the anchor of the page, so it gets the oxblood ground the
   design system reserves for its loudest surfaces. */
.rs-entry--feature {
  background: linear-gradient(168deg, var(--oxblood) 0%, var(--ink) 76%);
  border-top: 0;
}

.rs-entry__grid {
  display: grid;
  grid-template-columns: minmax(0, .3fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: start;
}
/* The numeral column tracks the reader down a long entry. Sticky only where
   there is room for it; below 900px the side block becomes a header row. */
.rs-entry__side { position: sticky; top: 96px; }
.rs-entry__num {
  display: block;
  font-family: var(--quote);
  font-size: clamp(3.25rem, 2rem + 5vw, 6.5rem);
  line-height: .78;
  letter-spacing: -.02em;
  color: var(--orange);
}
.rs-entry--feature .rs-entry__num { color: var(--gold); }
.rs-entry__kind {
  margin-top: 1.1rem;
  padding-top: .7rem;
  border-top: 1px solid var(--cream-14);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream-45);
}
.rs-entry__by {
  margin-top: .35rem;
  font-family: var(--display);
  font-variation-settings: 'wdth' 106;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--cream);
}

.rs-entry__title {
  font-family: var(--display);
  font-variation-settings: 'wdth' 114;
  font-weight: 700;
  font-size: clamp(1.6rem, 1.05rem + 2.5vw, 3.4rem);
  line-height: .99;
  letter-spacing: -.022em;
  text-wrap: balance;
  max-width: 20ch;
}
.rs-entry__dek {
  margin-top: 1.1rem;
  font-family: var(--quote);
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + .75vw, 1.85rem);
  line-height: 1.3;
  color: var(--cream);
  max-width: 34ch;
  text-wrap: pretty;
}
/* The guide has one paragraph and no article behind it, so that paragraph is
   the lead itself and needs a longer measure than a one-line dek. */
.rs-entry__dek--wide { max-width: 44ch; font-size: clamp(1.1rem, .95rem + .65vw, 1.6rem); }
.rs-entry__body { margin-top: 1.35rem; color: var(--cream-70); max-width: 62ch; }
.rs-entry__body + .rs-entry__body { margin-top: 1.1rem; }
/* Every article on the live site is longer than what we hold. This says so,
   quietly, instead of pretending the excerpt is the whole piece. */
.rs-entry__note {
  margin-top: 1.5rem;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-45);
  display: flex;
  align-items: center;
  gap: .75em;
}
.rs-entry__note::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: var(--cream-14);
  flex: none;
}

/* ---------------------------------------------------------------- figures -- */
/* Numerals doing the work photography would normally do. All three values are
   hers: 1015 $, 1075 $, 60 $ per month. */

.rs-figs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--cream-14);
}
.rs-figs div { border-left: 1px solid var(--cream-14); padding-left: 1rem; }
.rs-figs b {
  display: block;
  font-family: var(--display);
  font-variation-settings: 'wdth' 120;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem);
  line-height: 1;
  color: var(--gold);
}
.rs-figs span {
  display: block;
  margin-top: .35rem;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-45);
}

/* ------------------------------------------------------------------ tags -- */

.rs-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.75rem 0 0;
  padding: 0;
}
.rs-tags li {
  padding: .45em 1em;
  border: 1px solid var(--cream-14);
  border-radius: 999px;
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--cream-70);
}

/* --------------------------------------------------------------- adresse -- */

.rs-addr {
  margin-top: 1.75rem;
  padding: 1.1rem 0 1.1rem 1.25rem;
  border-left: 2px solid var(--pink);
}
.rs-addr b {
  display: block;
  font-family: var(--display);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem);
  letter-spacing: -.015em;
}
.rs-addr span {
  display: block;
  margin-top: .3rem;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-45);
}

/* ----------------------------------------------------------------- apps --- */
/* Two real applications she names, with the two links she gives. */

.rs-apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 0;
  list-style: none;
}
.rs-apps a {
  display: block;
  height: 100%;
  padding: 1.15rem 1.25rem;
  background: var(--ink-3);
  border: 1px solid var(--cream-14);
  border-radius: 5px;
  text-decoration: none;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.rs-apps a:hover { border-color: var(--pink); transform: translateY(-2px); }
.rs-apps b {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: 1.125rem;
}
.rs-apps b::after { content: ' ↗'; color: var(--pink); font-size: .8em; }
.rs-apps span { display: block; margin-top: .35rem; font-size: .875rem; color: var(--cream-70); }

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

@media (max-width: 900px) {
  .rs-mast__grid { grid-template-columns: minmax(0, 1fr); }

  /* The numeral, the label and the signature run as one header line above the
     article instead of a column beside it. Sticky is dropped: a sticky block
     inside a single-column flow just floats over the text it belongs to. */
  .rs-entry__grid { grid-template-columns: minmax(0, 1fr); }
  .rs-entry__side {
    position: static;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cream-14);
  }
  .rs-entry__num { font-size: clamp(2.5rem, 8vw, 3.5rem); }
  .rs-entry__kind { margin: 0; padding: 0; border: 0; }
  .rs-entry__by { margin: 0; }
  .rs-entry__title { max-width: none; }
}

@media (max-width: 560px) {
  /* Leaders and signatures are the first things to go: at 390px the title
     needs the whole row, and a two-character gap of dots is not an index. */
  .rs-som__list a { grid-template-columns: 2.25rem minmax(0, 1fr); gap: .5rem; }
  .rs-som__lead, .rs-som__by { display: none; }
  .rs-figs { gap: 1rem; }
  .rs-figs div { padding-left: .8rem; }
}