/* ==========================================================================
   SECTIONS — one block per homepage section. Reads tokens + base only.
   01 Hero · 02 Range · 03 Hospitality · 04 How it works
   05 Calendar · 06 Clients · 07 Close · Footer
   ========================================================================== */

/* --- NAV ------------------------------------------------------------------ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  color: var(--on-dark);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Nav sits over both surfaces, so it reads the section beneath it and
   inverts. Over dark it stays transparent on a soft scrim; over light it
   becomes a plain bar. No blur, no translucency tricks. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
  opacity: 1;
  transition: opacity var(--dur) var(--ease);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1rem, 2.2vw, 1.75rem);
}
/* Sucre's wordmark, 27 Aug 2026. Two files rather than a CSS filter, so the
   mark keeps its own edges on both surfaces. Raster for now — ASK SUCRE FOR
   AN SVG before production; the .ai is PDF-compatible but there is no vector
   toolchain on this machine. */
.nav__mark {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.nav__logo {
  display: block;
  width: auto;
  height: clamp(1.75rem, 3vw, 2.75rem);
  /* The mark is white; over a light surface it swaps to the dark file. */
  content: url("../assets/img/logo-light.svg");
}
.nav--on-light .nav__logo { content: url("../assets/img/logo-dark.svg"); }

/* The bar is fixed for the whole visit, so it should do something rather than
   sit there. Two behaviours, both quiet:
     1. the wordmark condenses once the hero is behind you
     2. a hairline tracks how far down the page you are
   No new graphics, no invented brand marks. */
.nav__logo { transition: height var(--dur) var(--ease); }
.nav--scrolled .nav__logo { height: clamp(1.35rem, 2.1vw, 1.85rem); }

.nav__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--hairline);
  background: var(--rule-dark);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.nav--scrolled .nav__progress { opacity: 1; }
.nav__progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--on-dark);
  transform: scaleX(var(--nav-progress, 0));
  transform-origin: left center;
}
.nav--on-light .nav__progress { background: var(--rule-light); }
.nav--on-light .nav__progress::after { background: var(--ink); }
.nav__links {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  font-size: var(--t-small);
}
.nav__links a { opacity: 0.85; transition: opacity var(--dur-fast) var(--ease); }
.nav__links a:hover, .nav__links a:focus-visible { opacity: 1; }

.nav--on-light {
  background: var(--paper);
  color: var(--ink);
  border-bottom: var(--hairline) solid var(--rule-light);
}
.nav--on-light::before { opacity: 0; }

/* Nav links carry their own tap area: 13px type in an 18px box is not
   thumb-sized. Padding, not font-size, does the work. */
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.25rem;
}
.nav__inner { padding-block: clamp(0.5rem, 1.6vw, 1.25rem); }

@media (max-width: 480px) {
  .nav__links { gap: 1.1rem; font-size: 0.8125rem; }
}

/* --- 01 HERO --------------------------------------------------------------
   Locked: night city sequence, New York > Las Vegas > Miami, behind the
   headline. Cross dissolved, no labels, no eyebrow.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--on-dark);
  background: var(--dark);
  overflow: hidden;
}

/* ---- CITY SEQUENCE ------------------------------------------------------ */

.hero__sequence { position: absolute; inset: 0; }
.hero__clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  opacity: 0;
  transition: opacity 1000ms linear;
  /* No blanket grade. Exposure is matched at encode time, per city. */
}
.hero__clip.is-active { opacity: 1; }

/* Localized legibility scrim. Weighted to the lower left where the copy
   sits, so the bright half of each city keeps its character. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.52) 30%, rgba(0,0,0,0.20) 55%, rgba(0,0,0,0) 76%),
    linear-gradient(to right, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.10) 48%, rgba(0,0,0,0) 68%),
    linear-gradient(to bottom, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 22%);
}

/* ---- SHARED COPY -------------------------------------------------------- */

.hero__inner {
  position: relative;
  z-index: 2;
  /* Room under the stack so the block sits in the frame rather than on the
     floor of it. Read off the comp: the copy ends ~13% clear of the bottom. */
  padding-bottom: clamp(3rem, 13vh, 8rem);
  padding-top: 8rem;
}
.hero__headline { max-width: 18ch; }

/* Says what the company is, before any brand line does. Sits directly under
   the headline, quieter than it, plainer than everything else. */
.hero__descriptor {
  /* Dropped a step. At 28px, seven lines of it read as a wall rather than as
     support for the headline. The wider measure takes it to five. */
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--on-dark);
  max-width: 30rem;
  /* The gap is the treatment. In the comp the headline lands about a third
     down and the copy sits well clear of it, not tucked underneath. ~8%. */
  margin: clamp(2rem, 8vh, 5.5rem) 0 0;
}
/* Second paragraph: normal paragraph spacing, not the headline gap again.
   1.15em matches the site's body rhythm, scaled to this type size. */
.hero__descriptor + .hero__descriptor { margin-top: 1.15em; }

/* The two locked lines, below the headline, sentence case, no tracking and no
   uppercase. Deliberately the plainest type on the page. */
.hero__foot { margin-top: clamp(1.25rem, 3.5vh, 2.25rem); }
.hero__tagline {
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--on-dark);
  margin: 0 0 0.55em;
  max-width: 40ch;      /* holds the tagline on one line */
  text-wrap: balance;
}
/* The payoff, not a footnote. It was 21px at 72% opacity, sitting under a
   28px descriptor: smaller AND dimmer, so it read as a caption. Promoted to
   the same closing register ACCESS uses, which gives the hero the same ladder
   as the rest of the page. */
.hero__where {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: var(--t-sub);
  line-height: 1.2;
  color: var(--on-dark);
  margin: 0;
  max-width: 26ch;
}

@media (max-width: 719px) {
  .hero__foot { max-width: 26ch; }
}

/* Hero coda: the two locked hero paragraphs, held just below the first
   viewport so the opening frame stays uncluttered. */
.hero-coda { background: var(--dark); color: var(--on-dark); }
.hero-coda__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--stack-lg);
  padding-block: clamp(2.75rem, 6vh, 4.5rem);
  border-top: var(--hairline) solid var(--rule-dark);
}
/* Anchored left like every other block on the page. It sat right to balance
   the "01 — Well Connected" label, which came out in the subtraction pass. */
.hero-coda__body { grid-column: 1 / span 7; }
.hero-coda__body p:last-child { color: var(--on-dark); }

@media (max-width: 860px) {
  .hero-coda__body { grid-column: 1 / -1; }
}

/* --- WHAT WE DO ----------------------------------------------------------
   Names the three shapes of work. No icons, no rules, no devices — the same
   plain treatment as the rest of the page.
   -------------------------------------------------------------------------- */

.shapes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.shape { margin: 0; }
/* Swap the src and nothing moves. Client photography drops straight in. */
.shape__media { margin-bottom: var(--stack-md); }
.shape__name { margin: 0 0 0.5em; }
.shape__body { margin: 0; max-width: 30ch; color: var(--on-dark-muted); }

@media (max-width: 860px) {
  .shapes__grid { grid-template-columns: 1fr; gap: var(--stack-lg); }
  .shape__media { aspect-ratio: 3 / 2; }
}

/* --- 02 RANGE / MONTAGE --------------------------------------------------
   Motion logic: the typography holds still, the visual world moves past it.
   The track is translated on scroll (transform only, no layout thrash).
   -------------------------------------------------------------------------- */

.range { overflow: hidden; }
.range__head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--stack-lg);
  align-items: end;
  margin-bottom: var(--stack-lg);
}
.range__title { grid-column: 1 / span 6; }
.range__copy  { grid-column: 8 / span 5; }

.range__viewport {
  position: relative;
  width: 100%;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.range__track {
  display: flex;
  align-items: flex-end;   /* tiles sit on one baseline; captions align */
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  width: max-content;
  will-change: transform;
}
.range__tile {
  position: relative;
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 330px);
}
.range__tile--short { width: clamp(150px, 17vw, 250px); }
.range__tile .media, .range__tile .placeholder { height: 100%; }
/* Tile captions. Sentence case, no tracking, no uppercase — the plain
   treatment, not the tracked micro-type that came out in the subtraction pass. */
.range__label {
  margin-top: 0.625rem;
  font-size: var(--t-small);
  color: var(--on-dark-muted);
}
.range__foot {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: baseline;
  border-top: var(--hairline) solid var(--rule-dark);
  padding-top: var(--stack-md);
}

@media (max-width: 860px) {
  .range__title, .range__copy { grid-column: 1 / -1; }
  .range__tile { width: 62vw; }
  .range__tile--short { width: 48vw; }
}

/* --- 03 HOSPITALITY ------------------------------------------------------- */

/* Both candidate photographs are portrait natives, so the section is built
   around a tall image with the headline standing in the space beside it. One
   visual, no motion, plenty of room. */
.invitation { background: var(--dark); color: var(--on-dark); padding-block: var(--section-pad-y); }
.invitation__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--stack-lg);
  align-items: start;
}
/* One column, read top to bottom: headline, the two lead paragraphs, then
   the payoff. Previously the copy sat in two short columns under the image
   with a third of the row empty. */
.invitation__text   { grid-column: 1 / span 5; }
.invitation__lead   { margin-top: var(--stack-md); max-width: none; }
.invitation__close  {
  margin-top: var(--stack-lg);
  padding-top: var(--stack-md);
  border-top: var(--hairline) solid var(--rule-dark);
  max-width: 38ch;
  color: var(--on-dark-muted);
}
.invitation__figure {
  grid-column: 7 / span 6;
  margin: 0;
  position: relative;
}
.invitation__figure .media { aspect-ratio: 4 / 5; }

@media (max-width: 860px) {
  .invitation__text, .invitation__figure { grid-column: 1 / -1; }
  /* Photograph first on a phone: the headline lands better after it. */
  .invitation__figure { order: -1; margin-bottom: var(--stack-lg); }
  .invitation__figure .media { aspect-ratio: 4 / 3; }
  .invitation__close { max-width: none; }
}

/* --- 04 HOW IT WORKS / BEHIND THE CURTAIN --------------------------------- */

.curtain__head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--stack-lg);
  align-items: start;
}
.curtain__title { grid-column: 1 / span 7; }

/* Front of house / behind the curtain paired device. Used once, and
   deliberately lopsided: the photograph leads, the mechanic follows. */
.paired {
  display: grid;
  grid-template-columns: 1.95fr 1fr;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: start;
  /* Top margin only. The bottom one was stacking on the section's own padding
     and leaving a 64px void under the captions, which made this the widest
     seam on the page at 190px against a 126px rhythm everywhere else. */
  margin-block: var(--stack-xl) 0;
}
.paired__panel { position: relative; }
.paired__panel .media { aspect-ratio: 3 / 2; }
.paired__panel:last-child .media { aspect-ratio: 3 / 4; }
.paired__panel .placeholder { aspect-ratio: 4 / 5; }
.paired__stamp {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
  color: var(--ink-muted);
  font-size: var(--t-small);
}
.paired__where { font-size: var(--t-small); }
.paired__caption {
  margin-top: 0.625rem;
  color: var(--ink-muted);
  font-size: var(--t-small);
}

.steps {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--stack-lg) var(--stack-lg);
}
.step { grid-column: span 6; }
.step__lead { font-weight: 600; display: block; margin-bottom: 0.4em; }

@media (max-width: 860px) {
  .curtain__title { grid-column: 1 / -1; }
  .paired { grid-template-columns: 1fr; }
  .step { grid-column: 1 / -1; }
}

/* --- 05 CALENDAR ---------------------------------------------------------- */

.calendar { background: var(--dark); color: var(--on-dark); }
.calendar__title { max-width: 20ch; margin-bottom: var(--stack-xl); }


@media (max-width: 719px) {
  }

.calendar__list { list-style: none; margin: 0; padding: 0; }
.calendar__item {
  border-top: var(--hairline) solid var(--rule-dark);
  padding-block: clamp(0.6rem, 1.6vw, 1.1rem);
}
.calendar__item:last-child { border-bottom: var(--hairline) solid var(--rule-dark); }
.calendar__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5.6vw, 4.25rem);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  transition: color var(--dur) var(--ease);
}
.calendar__item.is-in .calendar__name { color: var(--on-dark); }

/* One interruption, not a slideshow: a city image at scale, and the one
   tentpole slot still open. */
.calendar__media {
  margin-top: var(--stack-xl);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: end;
}
.calendar__city { grid-column: 1 / span 9; margin: 0; }
.calendar__city .media { aspect-ratio: 3 / 2; }
.calendar__open { grid-column: 10 / span 3; }
.calendar__open .placeholder { aspect-ratio: 3 / 4; }
.calendar__caption { margin-top: 0.625rem; color: var(--on-dark-muted); }

@media (max-width: 860px) {
  .calendar__city { grid-column: 1 / -1; }
  .calendar__open { grid-column: 1 / span 7; }
}

/* --- 06 CLIENTS ----------------------------------------------------------- */

.clients__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--stack-lg);
  align-items: center;
}
.clients__media { grid-column: 1 / span 5; }
.clients__media .placeholder, .clients__media .media { aspect-ratio: 5 / 4; }
.clients__text { grid-column: 7 / span 6; }
.clients__title { margin-bottom: var(--stack-md); }

@media (max-width: 860px) {
  .clients__media, .clients__text { grid-column: 1 / -1; }
}

/* --- 07 CLOSE ------------------------------------------------------------- */

.close {
  padding-block: clamp(4.5rem, 10vh, 8rem);
  text-align: left;
}
.close__title { max-width: 14ch; margin-bottom: var(--stack-lg); }
.close__copy { margin-bottom: var(--stack-lg); }

/* --- FOOTER --------------------------------------------------------------- */

.footer {
  border-top: var(--hairline) solid var(--rule-light);
  padding-block: clamp(2rem, 5vh, 3.5rem);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  align-items: baseline;
  justify-content: space-between;
  color: var(--ink-muted);
}
.footer__mark {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  line-height: 0;
  color: var(--ink);
}
/* The untagged mark. The tagged lockup sets its tagline too small to read at
   any size a footer should be, so the tagline is live text instead. */
.footer__logo { display: block; width: auto; height: clamp(1.6rem, 2.8vw, 2.25rem); }
.footer__tagline { font-size: var(--t-small); line-height: 1.3; color: var(--ink-muted); }

/* ==========================================================================
   REVIEW BUILD — hide unfilled asset slots
   --------------------------------------------------------------------------
   The labelled TODO cards are sourcing scaffolding. They read as broken to
   anyone not expecting them, so for stakeholder review the empty slots are
   collapsed rather than shown. Every TODO stays in index.html and in the
   README asset list, so nothing is lost.

   DELETE THIS BLOCK to see the placeholders again.
   ========================================================================== */

/* Montage: show only tiles that hold real imagery. */
.range__tile:has(.placeholder) { display: none; }

/* Calendar: the city image takes the full measure when the tentpole slot
   is empty. */
.calendar__open:has(.placeholder) { display: none; }
.calendar__media:has(.calendar__open .placeholder) .calendar__city { grid-column: 1 / -1; }

/* Clients: no image yet, so the section runs as type alone. */
.clients__media:has(.placeholder) { display: none; }
.clients__grid:has(.clients__media .placeholder) .clients__text { grid-column: 1 / span 7; }

@media (max-width: 860px) {
  .clients__grid:has(.clients__media .placeholder) .clients__text { grid-column: 1 / -1; }
}

/* ==========================================================================
   WHAT WE DO — page 2
   Reuses the homepage system. One new layout: a chapter, which is a headline
   in a column with its copy beside it. Nothing else is introduced.
   ========================================================================== */

.wwd-open { padding-top: calc(var(--section-pad-y) + 4rem); }
.wwd-open__title { max-width: 14ch; }
.wwd-open__body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--stack-lg);
  margin-top: var(--stack-lg);
}
.wwd-open__body > *:first-child { grid-column: 1 / span 5; }
.wwd-open__body > *:last-child  { grid-column: 7 / span 5; }

.chapter__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--stack-lg);
  align-items: start;
}
.chapter__title { grid-column: 1 / span 5; }
.chapter__body  { grid-column: 7 / span 6; max-width: none; }
.chapter__wide-title { max-width: 12ch; }

/* The flat line that lands after the argument. */
.chapter__coda { font-weight: 600; }

/* Own the week: the calendar named at scale. */
.wwd-weeks {
  font-size: var(--t-sub);
  line-height: 1.35;
  max-width: 30ch;
  margin: var(--stack-md) 0 var(--stack-lg);
}
.chapter__cols {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--stack-lg);
}
.chapter__cols > *:first-child { grid-column: 1 / span 5; }
.chapter__cols > *:last-child  { grid-column: 7 / span 5; }

@media (max-width: 860px) {
  .wwd-open__body > *, .chapter__title, .chapter__body, .chapter__cols > * { grid-column: 1 / -1; }
  .wwd-open { padding-top: calc(var(--section-pad-y) + 3rem); }
}

/* ==========================================================================
   ABOUT — page 3
   The shortest page. One column, larger than body, ending on a flat line
   with room after it.
   ========================================================================== */

.about { padding-top: calc(var(--section-pad-y) + 4rem); }
.about__title { max-width: 15ch; }
.about__body {
  max-width: 44rem;
  margin-top: var(--stack-lg);
}
.about__open {
  font-size: var(--t-sub);
  line-height: 1.35;
  margin: 0 0 var(--stack-lg);
}
.about__copy {
  max-width: none;
  font-size: var(--t-lead);
  line-height: 1.5;
}
.about__close {
  font-size: var(--t-sub);
  font-weight: 600;
  margin: var(--stack-lg) 0 0;
}

@media (max-width: 860px) {
  .about { padding-top: calc(var(--section-pad-y) + 3rem); }
}


/* --- WORK / CASE STUDIES --------------------------------------------------
   Architecture only. Hidden until real material exists, via the review-build
   rule at the bottom of this file.
   -------------------------------------------------------------------------- */
.work__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--stack-lg); }
.work__grid > * { grid-column: 1 / span 6; }
.work__grid .placeholder { aspect-ratio: 3 / 2; }
@media (max-width: 860px) { .work__grid > * { grid-column: 1 / -1; } }

/* Hide the whole Work section while it holds only a placeholder. */
.work:has(.placeholder) { display: none; }

/* ==========================================================================
   FROZEN-COPY IMPLEMENTATION — 18 Aug
   Only what the new copy required. No new visual language.
   ========================================================================== */

/* ACCESS — new to the homepage. Headline weight, not body-copy weight. */
/* ACCESS — one room, one photograph, one column of type.
   Two panels sharing an image put that curved marble bar on screen twice and
   it read as a glitch, so this is a single tall panel and scroll does the
   pacing instead of a seam. */
.access-panel {
  position: relative;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
  background: var(--dark);
  color: var(--on-dark);
}
.access-panel__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 50%;
}
.access-panel__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* The nav is fixed and transparent, and it crosses the bright side of this
       room. Without weight here the wordmark lands on top of the copy passing
       underneath it. */
    linear-gradient(to bottom, rgba(5,7,11,0.88) 0%, rgba(5,7,11,0.55) 7%, rgba(5,7,11,0) 15%),
    linear-gradient(to right,  rgba(5,7,11,0.92) 0%, rgba(5,7,11,0.70) 40%, rgba(5,7,11,0.14) 78%),
    linear-gradient(to top,    rgba(5,7,11,0.70) 0%, rgba(5,7,11,0) 42%);
}
.access-panel__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  align-self: center;
  padding-block: clamp(5rem, 10.5vh, 7rem);
}

.access__claim {
  font-size: clamp(2.2rem, 5.5vw, 5.5rem);
  text-wrap: normal;
  max-width: 13ch;
}

/* The only sans in the section, and the only thing here that is explanation
   rather than statement. */
.access__context {
  margin: clamp(1.35rem, 3vh, 2rem) 0 0;
  max-width: 41rem;
  font-size: clamp(1rem, 1.18vw, 1.0625rem);
  line-height: 1.7;
  color: #c2c2c2;
}

/* Set in the display face, not the body face. In Century Gothic these three
   sat between two Bodoni statements looking like a different design; in
   Bodoni the section reads as one voice, and the sans paragraph above is
   clearly the aside. */
.access__evidence {
  list-style: none;
  margin: clamp(2.25rem, 5.5vh, 3.5rem) 0 0;
  padding: 0;
  max-width: 58rem;
  display: grid;
  gap: clamp(1.2rem, 3vh, 2rem);
}
.access__evidence li {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.3rem, 2.15vw, 1.9rem);
  line-height: 1.24;
  color: var(--on-dark);
}

/* Last element in the same column, on the same left edge. It was on its own
   panel and read as stranded; here it is the end of the paragraph. */
.access__close {
  margin: clamp(3rem, 7.5vh, 4.5rem) 0 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-size: clamp(1.7rem, 3.6vw, 3.25rem);
  line-height: 1.1;
  max-width: none;
  color: var(--on-dark);
}

@media (max-width: 860px) {
  .access-panel__grade {
    background:
      linear-gradient(to bottom, rgba(5,7,11,0.88) 0%, rgba(5,7,11,0.5) 9%, rgba(5,7,11,0.25) 18%),
      linear-gradient(to top, rgba(5,7,11,0.94) 0%, rgba(5,7,11,0.72) 45%, rgba(5,7,11,0.4) 100%);
  }
  .access-panel { min-height: auto; }
  .access-panel__inner { padding-block: clamp(6rem, 15vh, 8rem); }
  .access__claim, .access__context, .access__evidence, .access__close { max-width: none; }
}

/* Laptops open at roughly 1000x530 of usable viewport. Everything steps down
   so the composition keeps its air at that height. */
@media (min-width: 861px) and (max-height: 720px) {
  .access__claim      { font-size: clamp(1.9rem, 4.3vw, 3.6rem); }
  .access__context    { margin-top: clamp(1rem, 2.4vh, 1.5rem); font-size: 1rem; line-height: 1.65; }
  .access__evidence   { margin-top: clamp(1.6rem, 4.6vh, 2.6rem); gap: clamp(0.9rem, 2.4vh, 1.4rem); }
  .access__evidence li{ font-size: clamp(1.15rem, 1.75vw, 1.55rem); }
  .access__close      { margin-top: clamp(2.25rem, 6vh, 3.5rem); font-size: clamp(1.5rem, 3.1vw, 2.6rem); }
  .access-panel__inner{ padding-block: clamp(4.5rem, 10vh, 6rem); }
}

/* THE CREDIT IS YOURS */
.credit__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--stack-lg);
  align-items: start;
}
.credit__title { grid-column: 1 / span 5; }
.credit__body  { grid-column: 7 / span 6; max-width: none; }
.credit__coda  { font-weight: 600; }

/* CALENDAR — event and place. Months removed; none were approved. */
.calendar__note {
  margin-top: var(--stack-lg);
  font-size: var(--t-lead);
  color: var(--on-dark-muted);
}

/* CLOSE — headline and copy returned to this section. */
.close__title { max-width: 14ch; margin-bottom: var(--stack-lg); }
.close__copy  { margin-bottom: var(--stack-lg); }

/* The paired captions now carry real sentences rather than three words. */
.paired__caption { max-width: 42ch; line-height: 1.45; }

@media (max-width: 860px) {
  .access__body > *, .credit__title, .credit__body { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
    }


/* ==========================================================================
   CALENDAR — the year in motion
   Names carry the section. Locations stay secondary and are examples, not
   boundaries. Rows are already anchors so event pages attach later.
   ========================================================================== */

.calendar__year { list-style: none; margin: 0; padding: 0; }

.calendar__row { border-top: var(--hairline) solid var(--rule-dark); }
.calendar__row:last-child { border-bottom: var(--hairline) solid var(--rule-dark); }

.calendar__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem clamp(0.75rem, 1.6vw, 1.5rem);
  padding-block: clamp(0.85rem, 2.4vw, 1.6rem);
  transition: padding-left var(--dur) var(--ease);
}

.calendar__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5.6vw, 4.5rem);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  transition: color var(--dur) var(--ease);
}
/* Sits with the name, not across the page from it. These are examples of
   where the calendar goes, not a list of territories. */
.calendar__place {
  font-size: var(--t-small);
  color: var(--on-dark-muted);
  opacity: 0.7;
  transform: translateY(-0.15em);
  transition: opacity var(--dur) var(--ease);
}

/* Arrives as the row enters the viewport. */
.calendar__row.is-in .calendar__name { color: var(--on-dark); }

/* Hover moves the whole row a little, the way a name being picked out would. */
.calendar__link:hover,
.calendar__link:focus-visible { padding-left: clamp(0.5rem, 1.2vw, 1.25rem); }
.calendar__link:hover .calendar__place,
.calendar__link:focus-visible .calendar__place { opacity: 1; }

.calendar__note {
  margin-top: var(--stack-lg);
  font-size: var(--t-lead);
  color: var(--on-dark-muted);
  max-width: 40ch;
}

@media (max-width: 719px) {
  .calendar__link { gap: 0.15rem 0.75rem; }
  .calendar__place { transform: none; }
}

/* ==========================================================================
   INQUIRE — form
   Fields are underlines, not boxes. No rounded rectangles, no fill, nothing
   that reads as a SaaS form. Same restraint as the rest of the site.
   ========================================================================== */

.inquire { padding-top: calc(var(--section-pad-y) + 4rem); }
.inquire__title { max-width: 16ch; }
.inquire__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--stack-lg) var(--stack-xl);
  margin-top: var(--stack-lg);
}
.inquire__intro { grid-column: 1 / span 5; }
.inquire__form  { grid-column: 7 / span 6; }
.inquire__after { grid-column: 1 / span 5; margin-top: var(--stack-xl); color: var(--on-dark-muted); }
.inquire--thanks { min-height: 60svh; }

/* honeypot — present for bots, gone for people */
.inquire__hp { position: absolute; left: -9999px; }

.field { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }
.field__label {
  display: block;
  font-size: var(--t-small);
  color: var(--on-dark-muted);
  margin-bottom: 0.4rem;
}
.field__input {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: var(--hairline) solid var(--rule-dark);
  border-radius: 0;
  color: var(--on-dark);
  font-family: var(--font-text);
  font-size: var(--t-lead);
  line-height: 1.4;
  padding: 0.5rem 0;
  transition: border-color var(--dur) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field__input:focus {
  outline: none;
  border-bottom-color: var(--on-dark);
}
.field__input--area { resize: vertical; min-height: 6rem; }
.field__help {
  margin: 0.5rem 0 0;
  font-size: var(--t-small);
  color: var(--on-dark-muted);
}

.cta--submit {
  background: none;
  border: 0;
  border-bottom: 2px solid currentColor;
  color: inherit;
  cursor: pointer;
  margin-top: var(--stack-md);
}

@media (max-width: 860px) {
  .inquire__intro, .inquire__form, .inquire__after { grid-column: 1 / -1; }
  .inquire__after { margin-top: var(--stack-lg); }
}

/* ==========================================================================
   EVENT TICKER — the year, over the city
   Type runs across a full-bleed street image. Scroll-linked rather than
   timed, so it stops when the reader stops and every name stays clickable.
   ========================================================================== */

.ticker-band {
  position: relative;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
  background: var(--dark);
  /* Breaks out of .wrap so the street runs edge to edge. */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.ticker-band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
/* Legibility only. Weighted so the street still reads underneath. */
.ticker-band__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.30), rgba(0,0,0,0.62) 55%, rgba(0,0,0,0.35));
}

.ticker {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(4rem, 12vw, 9rem);
  overflow: hidden;
}
.ticker__track {
  display: flex;
  align-items: baseline;
  gap: clamp(2rem, 5vw, 4.5rem);
  width: max-content;
  padding-inline: var(--gutter);
  will-change: transform;
}
.ticker__item {
  display: flex;
  align-items: baseline;
  gap: clamp(0.6rem, 1.2vw, 1rem);
  white-space: nowrap;
}
/* Month leads, quietly. */
.ticker__when {
  font-size: var(--t-small);
  color: var(--on-dark);
  opacity: 0.6;
  transition: opacity var(--dur) var(--ease);
}
.ticker__name {
  /* Century Gothic, per direction — not the display face. */
  font-family: var(--font-text);
  font-size: clamp(1.5rem, 3.2vw, 2.75rem);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.05;
  color: var(--on-dark);
  transition: opacity var(--dur) var(--ease);
  opacity: 0.72;
}
.ticker__place {
  font-size: var(--t-small);
  color: var(--on-dark);
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease);
}
.ticker__item.is-in .ticker__name { opacity: 1; }
.ticker__item:hover .ticker__name,
.ticker__item:focus-visible .ticker__name { opacity: 1; }
.ticker__item:hover .ticker__when,
.ticker__item:hover .ticker__place,
.ticker__item:focus-visible .ticker__when,
.ticker__item:focus-visible .ticker__place { opacity: 1; }

.calendar__note { margin-top: var(--stack-lg); }

@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
  .ticker__track { transform: none !important; }
}