/* ============================================================================
   Roadside Modern — components
   Source of truth: docs/brianprice-design-visual-spec.md § 6
   ========================================================================== */

/* ---------------------------------------------------------------- nav ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--box);
  color: var(--paper-warm);
  transition: box-shadow var(--dur-fast) var(--ease-slide);
}

.nav[data-scrolled="true"] { box-shadow: 0 4px 0 var(--ink); }

.nav__inner {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.nav__wordmark {
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-weight: 900;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--paper-warm);
  text-decoration: none;
  white-space: nowrap;
}

.nav__wordmark:hover { color: var(--gold); }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__link {
  color: var(--paper-warm);
  text-decoration: none;
  padding-block: var(--s1);
  border-bottom: 3px solid transparent;
}

.nav__link:hover,
.nav__link[aria-current] {
  color: var(--gold);
  border-bottom-color: var(--rust);
}

.nav__toggle {
  display: none;
  background: none;
  border: 2px solid var(--paper-warm);
  border-radius: var(--radius-pill);
  color: var(--paper-warm);
  padding: 6px var(--s2);
  cursor: pointer;
}

@media (max-width: 767px) {
  .nav__toggle { display: block; }

  .nav__links {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--box);
    padding: var(--s2) var(--gutter) var(--s4);
    box-shadow: 0 4px 0 var(--ink);
  }

  .nav__links[hidden] { display: none; }
  .nav__links li { padding-block: var(--s1); }
  .nav__links .btn { display: inline-flex; margin-top: var(--s2); }
}

/* ------------------------------------------------------------ buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px var(--s3);
  border-radius: var(--radius-pill);
  border: var(--ringer);
  background: var(--gold);
  color: var(--ink);
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-slide),
    box-shadow var(--dur-fast) var(--ease-slide);
}

.btn:hover {
  color: var(--ink);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}

.btn:active {
  transform: translate(0, 0);
  box-shadow: none;
}

.btn--secondary { background: var(--paper-warm); }

/* On box/dark surfaces: gold outline pill. */
.btn--outline {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}

.btn--outline:hover {
  color: var(--ink);
  background: var(--gold);
  box-shadow: 4px 4px 0 var(--paper-warm);
}

.btn--lg { padding: var(--s2) var(--s5); font-size: 0.9375rem; }

/* ------------------------------------------------- annotation motif ------
   Small-caps label + hairline leader + 4px terminal dot (spec § 4.3).
   Positioned by inline custom properties on the element. */
/* --ax / --ay locate the terminal DOT, not the box — the dot is what points at
   the subject, so that is what the author is placing. For the default variant
   the label runs out to the left, so the box is anchored by its right edge. */
.annotation {
  position: absolute;
  top: var(--ay, 50%);
  right: calc(100% - var(--ax, 50%));
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0;
  pointer-events: none;
  z-index: 3;
}

.annotation__label {
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--anno-color, var(--ink));
  white-space: nowrap;
  text-shadow: var(--anno-shadow, none);
}

.annotation__leader {
  height: 1px;
  width: var(--alen, 56px);
  background: var(--anno-color, var(--ink));
  flex: none;
  /* The leader and dot carry the same offset as the label, drawn as a box
     shadow — a white hairline over the scene needs it as much as the type. */
  box-shadow: var(--anno-shadow-box, none);
}

.annotation__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--anno-color, var(--ink));
  flex: none;
  margin-left: -1px;
  box-shadow: var(--anno-shadow-box, none);
}

/* Mirror: dot on the left, label running out to the right. The markup order is
   already dot, leader, label — so this variant just re-anchors the box. */
.annotation--left {
  right: auto;
  left: var(--ax, 50%);
}
.annotation--left .annotation__dot { margin: 0 -1px 0 0; }
.annotation--left .annotation__label { margin-left: var(--s1); }
.annotation:not(.annotation--left) .annotation__label { margin-right: var(--s1); }

/* Over photography the callout goes paper-white and picks up a HARD offset —
   screenprint misregistration, not a soft glow, so it stays inside the design
   grammar while still separating from a busy scene. The whole callout takes
   it: label, leader and dot. A white hairline on an unshadowed leader reads
   as broken. */
.annotation--light {
  --anno-color: var(--paper-warm);
  --anno-shadow: 2px 2px 0 var(--box);
  --anno-shadow-box: 2px 2px 0 var(--box);
}
.annotation--gold { --anno-color: var(--gold); }

@media (max-width: 767px) {
  .annotation--desktop { display: none; }
  .annotation__label { font-size: 0.6875rem; }
  .annotation__leader { width: calc(var(--alen, 56px) * 0.6); }
}

/* ----------------------------------------------------------- chips ------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.chip {
  background: var(--chip-bg, var(--sand));
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip--on-dark { background: rgba(255, 249, 238, 0.16); color: var(--paper-warm); }

/* A sand chip on a sand block is invisible: flip the fill on sand surfaces. */
.block--sand,
.about { --chip-bg: var(--paper-warm); }

/* ------------------------------------------------------ gallery card ----- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--paper-warm);
  border: var(--ringer);
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: var(--ink);
  transition:
    transform var(--dur-base) var(--ease-peel),
    box-shadow var(--dur-base) var(--ease-peel);
}

.card:hover,
.card:focus-within {
  color: var(--ink);
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-hard-hover);
}

.card__media {
  background: var(--card-tint, var(--tint));
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: var(--ringer);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-peel);
}

.card:hover .card__media img,
.card:focus-within .card__media img { transform: scale(1.02); }

.card__body {
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  flex: 1;
}

.card__client { color: var(--card-tint-deep, var(--tint-deep)); }

.card__title { margin: 0; }

.card__desc {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: 0;
}

.card__cta {
  margin-top: auto;
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust-deep);
}

.card__cta::after {
  content: " \2192";
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-slide);
}

.card:hover .card__cta::after { transform: translateX(4px); }

/* Whole card clickable: the title's anchor is stretched over the card. */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card__link {
  color: inherit;
  text-decoration: none;
}

.card--compact .card__media { aspect-ratio: 16 / 9; }
.card--compact .card__body { padding: var(--s3) var(--s3) var(--s3); gap: var(--s1); }

.card-grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .card-grid--2,
  .card-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------- carousel ------- */
.carousel {
  position: relative;
}

.carousel__viewport {
  overflow: hidden;
  border-radius: var(--radius-card);
}

.carousel__track {
  display: flex;
  transition: transform var(--dur-slide) var(--ease-slide);
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 2px;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s3);
}

.carousel__dots {
  display: flex;
  gap: var(--s1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--ink);
  opacity: 0.35;
  cursor: pointer;
  transition: width var(--dur-fast) var(--ease-slide), opacity var(--dur-fast);
}

.carousel__dot[aria-current="true"] {
  width: 24px;
  opacity: 1;
  background: var(--gold);
  outline: 1px solid var(--ink);
}

.carousel__arrow {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: var(--ringer);
  border-radius: var(--radius-pill);
  background: var(--paper-warm);
  cursor: pointer;
  line-height: 1;
}

.carousel__arrow:hover { background: var(--gold); }

/* --------------------------------------------------- artifact frame ------ */
.artifact {
  margin-block: var(--s6);
}

.artifact__frame {
  position: relative;
  background: var(--paper-warm);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-hard);
}

.artifact__frame img { width: 100%; height: auto; }

/* 2% rotation permitted on alternating frames (spec § 8). */
.artifact--tilt .artifact__frame { transform: rotate(-1.2deg); }
.artifact--tilt-alt .artifact__frame { transform: rotate(1.2deg); }

.artifact__caption {
  margin-top: var(--s3);
  font-size: var(--type-fine);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 62ch;
}

.artifact__tag {
  display: inline-block;
  margin-right: var(--s1);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tint-deep);
}

/* Artifacts break out of the 720px reading column to 1000px. */
.artifact--break {
  width: min(var(--col-break), calc(100vw - var(--gutter) * 2));
  margin-inline: calc(50% - min(var(--col-break), 100vw - var(--gutter) * 2) / 2);
}

@media (max-width: 767px) {
  .artifact--tilt .artifact__frame,
  .artifact--tilt-alt .artifact__frame { transform: none; }
}

/* -------------------------------------------------------- pull stat ------ */
.pullstat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
}

.pullstat__number {
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-weight: 900;
  font-size: var(--type-stat);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--tint-deep);
}

.pullstat__copy { max-width: 34ch; }

.pullstat sup a {
  font-size: 0.35em;
  vertical-align: super;
  color: var(--ink-soft);
  text-decoration: none;
}

/* --------------------------------------------------- standing note ------- */
.standing-note {
  background: var(--paper-warm);
  border-left: 4px solid var(--tint);
  padding: var(--s3) var(--s4);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 68ch;
}

.standing-note strong { color: var(--ink); }

/* ---------------------------------------------------- snapshot bar ------- */
.snapshot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.snapshot dt,
.snapshot__label {
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s1);
}

.snapshot dd,
.snapshot__value {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

@media (max-width: 767px) {
  .snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
}

/* -------------------------------------------------- next-case card ------- */
.next-case {
  display: block;
  background: var(--next-tint, var(--tint));
  color: var(--paper-warm);
  text-decoration: none;
  padding-block: var(--s7);
}

.next-case:hover { color: var(--paper-warm); }

.next-case__eyebrow { opacity: 0.85; margin-bottom: var(--s2); }

.next-case__title {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.next-case__arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-slide);
}

.next-case:hover .next-case__arrow { transform: translateX(8px); }

/* ------------------------------------------------------ truth strip ------ */
.strip {
  background: var(--paper-warm);
  border-top: var(--ringer);
  padding-block: var(--s5);
}

.strip__row1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-bottom: var(--s4);
}

.strip__signoff {
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-weight: 900;
  font-size: 1.375rem;
  line-height: 1.1;
  max-width: 22ch;
}

.strip__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.strip__links a {
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid transparent;
}

.strip__links a:hover { color: var(--rust-deep); border-bottom-color: var(--rust); }

.strip__fine {
  border-top: 1px solid var(--sand);
  padding-top: var(--s3);
  max-width: 88ch;
}

.strip__colophon {
  margin-top: var(--s2);
  font-size: var(--type-fine);
  color: var(--ink-soft);
}

/* Hero-register variant: the comedic strip, all-caps, centered, no leading. */
.strip--comedy .strip__fine {
  text-align: center;
  max-width: 92ch;
  margin-inline: auto;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ------------------------------------------------------- bench strip ----- */
.bench {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.bench li {
  font-size: 0.9375rem;
  border-left: 3px solid var(--rust);
  padding-left: var(--s2);
}

/* -------------------------------------------------------- logo strip ----- */
.logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.logos li {
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-weight: 900;
  font-size: 1.0625rem;
  color: var(--ink);
  opacity: 0.78;
}

/* ---------------------------------------------------------- masthead ----- */
/* Gallery L1: a 240px sliver of the aft plates, gently parallaxing. */
.masthead {
  position: relative;
  height: 260px;
  overflow: hidden;
  background: var(--sky);
  border-bottom: var(--ringer);
  display: flex;
  align-items: flex-end;
}

.masthead__plate {
  position: absolute;
  top: -10%;
  left: -8%;
  width: 116%;
  height: 120%;
  max-width: none;          /* the global img cap would clamp this back to 100% */
  object-fit: cover;
  object-position: 50% 46%; /* crop onto the ridge line, not the empty ground */
  will-change: transform;
}

.masthead__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: var(--s5);
}

.masthead h1 {
  color: var(--paper-warm);
  text-shadow: 4px 4px 0 var(--box);
}

.masthead p {
  color: var(--paper-warm);
  max-width: 46ch;
  text-shadow: 0 1px 6px rgba(23, 20, 15, 0.55);
}

@media (max-width: 767px) {
  .masthead { height: 220px; }
}

/* ------------------------------------------------- case study hero ------- */
/* Tint block left 40% butted against signature artifact right 60%. */
.case-hero {
  display: grid;
  grid-template-columns: 40fr 60fr;
  align-items: stretch;
  border-bottom: var(--ringer);
}

.case-hero__panel {
  background: var(--tint);
  color: var(--paper-warm);
  padding: var(--s7) var(--s5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s3);
}

.case-hero__panel h1 { color: var(--paper-warm); }

.case-hero__outcome {
  font-size: 1.1875rem;
  line-height: 1.5;
  max-width: 34ch;
}

.case-hero__media {
  position: relative;
  background: var(--sand);
  min-height: 380px;
}

.case-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 899px) {
  .case-hero { grid-template-columns: minmax(0, 1fr); }
  .case-hero__panel { padding: var(--s6) var(--gutter); }
  .case-hero__media { min-height: 240px; aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------- interstitial -------- */
/* 21:9 full-bleed band, ~420px desktop. */
.interstitial {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: var(--sand);
  border-block: var(--ringer);
}

.interstitial img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .interstitial { height: 240px; }
}

/* --------------------------------------------------------- portrait ------ */
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--sand);
  border: var(--ringer);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-hard-lg);
}

.portrait img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------ peel grammar ----- */
/* deeper = peel + rise from below; shallower = un-peel; sideways = slide;
   in-page = fade-up. Nothing moves outside these four (spec § 2).
   Direction classes are stamped on <html> — leaving-* by the click handler,
   enter-* by the head script reading what the previous page recorded. */
.page { animation: rise var(--dur-peel) var(--ease-peel) both; }

.enter-shallow .page { animation-name: unpeel-in; }

.enter-slide .page {
  animation-name: slide-in;
  animation-duration: var(--dur-slide);
  animation-timing-function: var(--ease-slide);
}

.leave-deeper .page { animation: peel var(--dur-peel) var(--ease-peel) both; }
.leave-shallow .page { animation: sink var(--dur-peel) var(--ease-peel) both; }

.leave-slide .page {
  animation: slide-out var(--dur-slide) var(--ease-slide) both;
}

/* Arriving from shallower water: the destination rises from below. */
@keyframes rise {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* Coming back up: the plane that was peeled off settles back onto the stack. */
@keyframes unpeel-in {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: none; }
}

@keyframes slide-in {
  from { opacity: 0; transform: translateX(6%); }
  to { opacity: 1; transform: none; }
}

/* Going deeper: the nearest plane scales up and exits toward the viewer. */
@keyframes peel {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(1.06); }
}

@keyframes sink {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(18px) scale(0.98); }
}

@keyframes slide-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(-6%); }
}

/* Sections fade-up 12px on scroll-into-view, 60ms stagger. */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-base) var(--ease-peel),
    transform var(--dur-base) var(--ease-peel);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Never leave content invisible: no JS, printing, or a stalled observer. */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Peel / slide all collapse to a 200ms crossfade. */
  .page { animation: fade-in 200ms linear both !important; }

  .leave-deeper .page,
  .leave-shallow .page,
  .leave-slide .page { animation: fade-out 200ms linear both !important; }

  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

  [data-reveal] { opacity: 1; transform: none; }
}