/* ==========================================================================
   queer-intro.css — Queer Constellations intro workshop landing page
   New file, scoped to /queer/intro-workshop/ only. Two rules apply here,
   per build-brief-intro-workshop-tonight.md and design-brief-for-code.md:
   1. Logical CSS properties only (no left/right) — a Hebrew sibling site
      is planned and this page should carry over without a rewrite.
   2. Token values only, pulled from tokens.css. The one addition is
      --qi-accent below — not in the shared token file, explicitly called
      for as a page-only exception in the design brief (§2, "Accent —
      hot magenta"), sampled from the supplied hero artwork itself
      (confirmed by pixel sample: rgb(221,0,95) = #dd005f).

   Reuses .container/.section/.eyebrow/.section-heading/.body-copy from
   the parent site's style.css rather than redefining them.

   The "queer layer" (design brief §3) is implemented in the last
   section of this file, as one system: print/halftone texture, warm
   sand/taupe bands, one off-axis element per band, serif/sans
   register, uneven whitespace.
   ========================================================================== */

:root {
  /* The one deliberate rupture in the palette. Design brief §2 permits
     it in the hero artwork plus AT MOST ONE other place on the page.
     That one place is the takeaway rule — see .qi-rule. Never body
     text, never links/buttons/focus/form borders. */
  --qi-accent: #dd005f;

  /* Rule 2 — the single, constant distance by which one element per
     band leaves the column. One value everywhere, so the break reads
     as a system rather than as drift. Desktop only; see the band
     section at the end of this file. */
  --qi-shift: var(--space-3);
}

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

.qi-narrow {
  max-width: 660px;
}

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

/* Top padding tightened from --space-8 so the turn line and the
   register link both clear the fold on a 768px-tall laptop, which is
   where they were being cut off. Still more air above the hero than
   the parent site's own hero carries. */
.qi-hero {
  padding-block: var(--space-4) var(--section-padding);
}

.qi-hero-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .qi-hero-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-8);
  }
}

/* Design brief Rule 3: artwork right / text left on desktop, artwork
   above text when stacked below 900px. */
.qi-hero-art {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.qi-hero-art img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 899px) {
  .qi-hero-art {
    order: -1;
  }
}

.qi-hero h1 {
  font-family: var(--font-serif);
  font-size: var(--headline-xl-size);
  font-weight: var(--headline-xl-weight);
  line-height: var(--headline-xl-leading);
  color: var(--on-surface);
}

.qi-hero h1 em {
  font-style: italic;
  color: var(--primary);
}

/* Rule 4: open questions stay in serif, each with a hairline rule —
   hook for Rule 0 (solid/confident rule weight) and Rule 2 (one
   off-axis line) in Stage 2. */
.qi-ask {
  margin-top: var(--space-6);
  max-width: 54ch;
}

/* Rule 0 — rules are solid and confident, not hairline-timid: 3px in
   --outline rather than 2px in the pale --outline-variant. */
.qi-ask p {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.5;
  padding-inline-start: var(--space-3);
  border-inline-start: 3px solid var(--outline);
  margin-bottom: var(--space-2);
}

.qi-ask p:last-child {
  border-inline-start-color: var(--primary);
  font-style: italic;
}

.qi-turn {
  margin-top: var(--space-5);
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.4;
  color: var(--primary);
  max-width: 30ch;
}

/* Register affordance in the first screen. A link in the same language
   as .qi-dates-link, not a button and not a filled pill — the round-2
   brief rejected extra buttons and sticky CTA bars, and the nav item
   alone was going unnoticed. Sits under the turn line so the reader
   meets it after the question lands, not before. */
.qi-hero-cta {
  margin-block-start: var(--space-2);
}

@media (max-width: 767px) {
  .qi-hero h1 { font-size: 32px; }
  .qi-ask p { font-size: 19px; }
  .qi-turn { font-size: 21px; }
}

/* --------------------------------------------------------------------------
   "This, too, belongs" — inset at the end of "Who is it for".
   An inset, not a card and not a filled box: no background, no radius,
   no shadow. A pale sage rule on the inline-start edge carries it,
   matching the .qi-ask rule weight (3px) so the page has one rule
   thickness rather than several.

   Deliberately NOT given .qi-off: Rule 2 allows exactly one off-axis
   element per band, and this band already spends it on the section
   heading. This block is indented inward, which is a different move.
   -------------------------------------------------------------------------- */

.qi-belongs {
  margin-block-start: var(--space-5);
  padding-inline-start: var(--space-3);
  border-inline-start: 3px solid var(--inverse-primary);
}

.qi-belongs h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: var(--headline-md-leading);
  color: var(--on-surface);
  margin-bottom: var(--space-2);
}

.qi-belongs p {
  font-family: var(--font-sans);
  font-size: var(--body-md-size);
  line-height: var(--body-md-leading);
  color: var(--on-surface-variant);
  max-width: 56ch;
  margin-bottom: var(--space-2);
}

.qi-belongs p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Takeaway — single line, near-empty band (Rule 5)
   -------------------------------------------------------------------------- */

.qi-takeaway p {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.45;
  max-width: 22ch;
}

/* The page's one accent moment, and the one place Rule 0's overprint
   and misregistration are spent. Two ink plates: magenta laid down
   first, near-black struck 3px off register on top, multiplying where
   they cross so the overlap goes almost black — the way two plates
   behave when the paper shifts. Deliberate, and confined to this one
   decorative element (never text).

   Accent audit for the whole page: hero artwork + this rule. Nothing
   else. Paired with near-black rather than sage, so it reads as an
   intrusion instead of a second brand colour. */
.qi-takeaway .qi-rule {
  position: relative;
  inline-size: 112px;
  block-size: 8px;
  background: var(--qi-accent);
  margin-bottom: var(--space-5);
}

.qi-takeaway .qi-rule::after {
  content: '';
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: 4px;
  inline-size: 112px;
  block-size: 8px;
  background: var(--on-surface);
  mix-blend-mode: multiply;
}

@media (max-width: 767px) {
  .qi-takeaway p { font-size: 23px; }
}

/* Registration anchor under the takeaway line. Styled unmistakably as
   a link — sage, underlined, thickening on hover and focus — rather
   than as a button or a bare coloured word.

   Measured on the band it actually sits on (--secondary-container
   #efe0cf, the cream band, NOT the warmest one): sage clears 5.15:1
   flat and 4.59:1 with the halftone behind it, so it passes the 4.5:1
   normal-text bar and does not depend on being large text. */
.qi-dates-link,
.qi-hero-cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--transition);
}

.qi-dates-link { margin-block-start: var(--space-6); }

.qi-dates-link:hover,
.qi-dates-link:focus-visible,
.qi-hero-cta:hover,
.qi-hero-cta:focus-visible {
  text-decoration-thickness: 3px;
}

/* --------------------------------------------------------------------------
   Objects photograph
   -------------------------------------------------------------------------- */

.qi-work-photo {
  margin-top: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.qi-work-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   Three dates
   -------------------------------------------------------------------------- */

.qi-date-grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 700px) {
  .qi-date-grid {
    grid-template-columns: repeat(3, 1fr);
    /* Cards keep their natural height rather than stretching to match —
       the brief is explicit that the three are not to be normalised to
       each other, and it lets the Rule 2 offset below read as an
       offset rather than as a squashed card. */
    align-items: start;
  }
}

.qi-date-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.qi-date-card:hover,
.qi-date-card:focus-within {
  box-shadow: var(--card-shadow-hover);
}

.qi-date-pill {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  border-radius: var(--radius-full);
  padding: 6px 14px;
}

.qi-zones {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--on-surface-variant);
}

/* Rule 0 — solid, not dotted. Kept at 1px: this is a dense data list,
   and "confident" here means unhesitant, not loud. */
.qi-zones li {
  padding-block: 5px;
  border-block-end: 1px solid var(--outline-variant);
}

.qi-zones li:last-child {
  border-block-end: 0;
  color: var(--on-surface);
}

.qi-zones .qi-z {
  display: inline-block;
  min-width: 5.5em;
  font-weight: 600;
  color: var(--on-surface);
}

.qi-zones .qi-roll {
  font-size: 13px;
  color: var(--outline);
}

/* --------------------------------------------------------------------------
   Register form
   -------------------------------------------------------------------------- */

.qi-reg {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-1);
  padding: var(--space-5);
  max-width: 640px;
}

@media (max-width: 767px) {
  .qi-reg { padding: var(--space-3); }
}

.qi-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-3);
}

.qi-field label {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--on-surface);
}

.qi-field input,
.qi-field select {
  font-family: var(--font-sans);
  font-size: var(--body-md-size);
  line-height: var(--control-leading);
  color: var(--on-surface);
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline);
  border-radius: var(--radius-base);
  padding: 14px 16px;
  transition: border-color var(--transition);
}

.qi-field input:focus-visible,
.qi-field select:focus-visible {
  border-color: var(--primary);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.qi-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-3);
}

.qi-fieldset legend {
  font-family: var(--font-sans);
  font-weight: 600;
  padding: 0;
  margin-bottom: var(--space-1);
}

.qi-legend-note {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-2);
}

.qi-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
}

@media (max-width: 480px) {
  .qi-tiers { grid-template-columns: repeat(2, 1fr); }
}

.qi-tier {
  position: relative;
}

.qi-tier input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.qi-tier span {
  display: block;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 600;
  padding: 14px 8px;
  border: 1px solid var(--outline);
  border-radius: var(--radius-base);
  transition: all var(--transition);
}

/* Selected state shown by fill + border + a check mark, not colour alone
   (design brief §6: radio tiles must show selection without relying on
   colour alone). */
.qi-tier span::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-inline-end: 6px;
  vertical-align: -2px;
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
}

.qi-tier input:checked + span {
  background: var(--primary-fixed);
  border-color: var(--primary);
  color: var(--on-primary-fixed-variant);
}

.qi-tier input:checked + span::before {
  background: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}

.qi-tier input:focus-visible + span {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.qi-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: var(--space-4);
  color: var(--on-surface-variant);
  font-family: var(--font-sans);
  font-size: 15px;
}

.qi-check input {
  margin-block-start: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.qi-paypal-slot {
  border: 1px dashed var(--outline);
  border-radius: var(--radius-base);
  padding: var(--space-3);
  text-align: center;
  color: var(--on-surface-variant);
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--surface-container-low);
}

.qi-cancel-note {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--on-surface-variant);
  max-width: 56ch;
}

/* Points to the (not-yet-built) training module — not a link. */
.qi-onward {
  max-width: 640px;
  margin-top: var(--space-5);
  background: var(--primary-fixed);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.qi-onward .qi-tag {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-1);
}

.qi-onward h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--on-primary-fixed-variant);
  margin-bottom: var(--space-1);
}

.qi-onward p {
  font-family: var(--font-sans);
  color: var(--on-primary-fixed-variant);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

/* Laid out like the hero: two columns, image one side, text the other,
   vertically centred against each other, across the full container
   rather than the narrow 660px measure. Before this the section sat in
   .qi-narrow with a 200px photo and a 356px text column, which read as
   cramped and adrift next to the hero's 1136px. The photo stays
   circular per the design brief; only the scale and the layout change. */
.qi-about-grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

@media (min-width: 700px) {
  .qi-about-grid {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: var(--space-5);
  }
}

/* Same breakpoint the hero switches on, so the two sections rhyme. */
@media (min-width: 900px) {
  .qi-about-grid {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: var(--space-8);
  }
}

.qi-about-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-full);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Stacked, the portrait would otherwise run the full column width and
   dominate the section. Capped, and left at the inline start rather
   than centred so it keeps the page's alignment. */
@media (max-width: 699px) {
  .qi-about-photo {
    max-inline-size: 240px;
  }
}

.qi-bio-name {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.qi-bio {
  font-family: var(--font-sans);
  color: var(--on-surface-variant);
  max-width: 56ch;
}

/* The bio runs as two paragraphs. Spaced with the same step the
   provenance line below already uses, so the whole column keeps one
   rhythm rather than gaining a second. */
.qi-bio + .qi-bio {
  margin-block-start: var(--space-3);
}

/* Inline link inside body copy. Lighter underline than .qi-dates-link
   and .qi-hero-cta (1.5px vs 2px) because this one sits inside a running
   sentence rather than standing alone as a call to action — but it still
   thickens on hover and focus, so it is unmistakably clickable.
   Measured on the band it sits on: sage on the sand band is 5.18:1, and
   4.61:1 with the halftone behind it, so it clears 4.5:1 as normal text. */
.qi-inline-link {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--transition);
}

.qi-inline-link:hover,
.qi-inline-link:focus-visible {
  text-decoration-thickness: 3px;
}

/* Provenance line under the bio. Muted by SCALE, not by colour:
   stepping the colour down to --outline would read as intended but
   measures 3.48:1 flat and 3.10:1 behind the halftone on this sand
   band — below the 4.5:1 the brief requires for body text. Keeping
   --on-surface-variant holds 6.50:1 worst case. */
.qi-provenance {
  margin-block-start: var(--space-3);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: var(--body-md-leading);
  color: var(--on-surface-variant);
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   Footer addition — this page's own attribution line, ahead of the
   reused site disclaimer/license block (PROJECT.md hard rule 4: the
   CC BY-ND badges and medical disclaimer must appear on every page).
   -------------------------------------------------------------------------- */

.qi-footer-attribution {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   Thank-you page
   -------------------------------------------------------------------------- */

.qi-thanks {
  min-height: 40vh;
}

.qi-thanks h1 {
  font-family: var(--font-serif);
  font-size: var(--headline-lg-size);
  font-weight: var(--headline-lg-weight);
  line-height: var(--headline-lg-leading);
  color: var(--on-surface);
  margin-bottom: var(--space-4);
}

.qi-pay-links {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.qi-pay-links a {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 16px 32px;
  background: var(--primary);
  color: var(--on-primary);
  transition: filter var(--transition);
}

.qi-pay-links a:hover,
.qi-pay-links a:focus-visible {
  filter: brightness(1.12);
}

.qi-thanks-note {
  font-family: var(--font-sans);
  color: var(--on-surface-variant);
  max-width: 56ch;
  margin-bottom: var(--space-3);
}

/* ==========================================================================
   The queer layer — design brief §3
   Five rules applied as one system. Rules 3 (hero layout) and 4
   (serif/sans register) are carried by the structure above; Rules 0, 1,
   2 and 5 are here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Rule 1 — run warmer than the parent site.
   The parent alternates white and cool grey (--surface-container-low /
   --surface-container). This page alternates the sand and taupe families
   instead: same system, warmer temperature, felt before it is noticed.

   CONTRAST CONSTRAINT, measured, do not undo:
   --primary (sage #416359) fails WCAG AA on --qi-band-warmest
   (3.91:1 flat, 3.54:1 once the halftone sits behind a glyph). No sage
   text is placed on that band, and none should be added — that rules
   out .eyebrow there. Body text is safe on all three:
   --on-surface-variant clears 5.00:1 even in the worst case, and
   --on-surface clears 9.13:1.
   -------------------------------------------------------------------------- */

.qi-band-sand    { background: var(--tertiary-fixed); }      /* #e8e2da */
.qi-band-cream   { background: var(--secondary-container); } /* #efe0cf */
.qi-band-warmest { background: var(--secondary-fixed-dim); } /* #d3c4b4 */

/* --------------------------------------------------------------------------
   Rule 0 — print technique, not screen gloss.
   A halftone dot laid over the band rather than a flat fill.

   This uses radial-gradient with HARD stops (0 1.1px, transparent
   1.1px) — every dot has a crisp edge and there is no soft falloff
   anywhere. That is deliberate: the brief forbids soft gradients and
   gradients-as-decoration, and requires that "colour changes happen at
   an edge." This is a screen-printed dot, not a gradient wash.

   Warm ink only: --shadow-tint is rgb(103,93,80), the same warm taupe
   the elevation tokens are tinted with, never a neutral grey.
   -------------------------------------------------------------------------- */

.qi-textured {
  position: relative;
  isolation: isolate;
}

.qi-textured::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(var(--shadow-tint), 0.09) 0 1.1px,
    transparent 1.1px
  );
  background-size: 7px 7px;
}

/* The warmest band is already dark enough that a full-strength dot eats
   contrast headroom. Lighter ink there, same dot. */
.qi-band-warmest.qi-textured::before {
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(var(--shadow-tint), 0.06) 0 1.1px,
    transparent 1.1px
  );
}

/* --------------------------------------------------------------------------
   Rule 5 — empty space is content.
   Not the even rhythm of a corporate page: some bands breathe far more
   than others. Multipliers of the site's own --section-padding, so the
   page still scales correctly at every breakpoint.
   -------------------------------------------------------------------------- */

.qi-band-tight { padding-block: calc(var(--section-padding) * 0.7); }
.qi-band-open  { padding-block: calc(var(--section-padding) * 1.35); }

/* Was 2x. At 2x the takeaway's 186px of text sat in ~794px of empty
   band (360 above, 434 below) — over four times the content, which
   read as a broken page rather than as a pause. 1.4x still gives the
   line a field of its own without the reader wondering if something
   failed to load. */
.qi-band-vast  { padding-block: calc(var(--section-padding) * 1.4); }

/* --------------------------------------------------------------------------
   Rule 2 — one element per band leaves the column.
   Exactly one element in each band sits off the page's centred axis, by
   exactly --qi-shift, always toward the inline start. One per band,
   never two — audit it by counting .qi-off in the markup: there should
   be one per <section>.

   Desktop only. Below 900px the columns collapse to a single narrow
   measure where the gutter is 20-24px, and pulling anything out of it
   would either clip or wreck the reflow — so the shift is simply not
   applied, per the brief's accessibility requirement that the off-axis
   elements never break reading order or reflow badly on mobile. The
   shift is decorative and carries no meaning, so losing it on small
   screens costs the reader nothing.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .qi-off {
    margin-inline-start: calc(-1 * var(--qi-shift));
  }

  /* The one that leaves the row rather than the column: the middle date
     card drops out of alignment with its siblings. Same distance, other
     axis — the brief names "a card offset from its row" as one of the
     permitted forms. */
  .qi-off-down {
    margin-block-start: var(--qi-shift);
  }
}