/* ==========================================================================
   Layout primitives + shared type treatments
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: 74rem; }

.section {
  position: relative;
  padding-block: var(--section);
}

.section--tight { padding-block: var(--section-tight); }
.section--flush-top { padding-top: 0; }
.section--flush { padding-block: 0; }
.section--flush-bottom { padding-bottom: 0; }

.rule {
  height: 1px;
  background: var(--line-gold);
  border: 0;
}

/* ---- Display type --------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.display--sm {
  font-size: var(--text-display-sm);
  line-height: 1;
}

/* Lowercase italic fragments inside an otherwise uppercase display line. */
.display em,
.display .soft {
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  font-weight: 300;
}

.display .line { display: block; }

/* ---- Eyebrow / label ------------------------------------------------ */

.eyebrow {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.8rem + 1.1vw, 2rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.eyebrow em {
  font-style: italic;
  text-transform: lowercase;
}

.label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---- Body copy ------------------------------------------------------ */

.lead {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -0.005em;
  max-width: 34ch;
}

.prose p {
  font-size: var(--text-base);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.prose p + p { margin-top: 1.4em; }

.center { text-align: center; }
.center .lead,
.center .prose p { margin-inline: auto; }

/* ---- Buttons / links ------------------------------------------------ */

.cta {
  --cta-fg: var(--ink);
  --cta-bg: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  padding: 1.05em 2.2em;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--cta-fg);
  background: var(--cta-bg);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

/* Ink wipes up from the bottom edge on hover. */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease-out);
}

.cta:hover,
.cta:focus-visible { color: var(--veil); border-color: var(--ink); }
.cta:hover::before,
.cta:focus-visible::before { transform: translateY(0); }

.cta .arrow {
  transition: transform var(--dur) var(--ease-out);
}
.cta:hover .arrow { transform: translateX(0.35em); }

/* A rim of polished gold around a plain face, the way a plaque is mounted.
   One element does both: the face is clipped to the padding box and the
   metal to the border box, so the "border" is a gradient with no wrapper and
   no image. The radius follows, which is what keeps the rim an even ring. */
.cta--solid {
  /* Trimmed from 1.05em/2.2em, so the rim adds itself without the button
     growing: an inline-flex box is sized by content, and a border is outside
     that whatever box-sizing says. */
  padding: 0.78em 1.85em;
  border: 5px solid transparent;
  color: var(--veil);
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,
    var(--gold-metal) border-box;
  /* Two shadows, not one: a tight dark contact where the plaque meets the
     page, and a wide warm one carrying the rim's colour. A single grey drop
     under a gold object always reads as a sticker. */
  box-shadow:
    0 1px 2px rgba(24, 22, 21, 0.12),
    0 5px 14px rgba(122, 92, 40, 0.18);
  /* .cta transitions colour and border only, and this needs the shadow in
     there too or the lift below snaps on. */
  transition: color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}

/* The pale face, for a dark ground — the second button in the reference. */
.cta--solid.cta--pale {
  color: var(--ink);
  background:
    linear-gradient(var(--veil), var(--veil)) padding-box,
    var(--gold-metal) border-box;
  /* A dark drop on a dark card is invisible, so the warm half does the work
     and the dark half only seats the edge. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 6px 18px rgba(201, 162, 39, 0.16);
}

/* `inset: 0` resolves against the PADDING box, so the wipe stops at the
   inside of the rim and the metal is never painted over. Hover warms the
   face rather than replacing it. */
.cta--solid::before { background: #2b241c; }
.cta--solid.cta--pale::before { background: var(--paper-warm); }

/* Hover deepens the same two shadows and adds a hairline of the rim thrown
   onto the page — the plaque lifting, not a new effect arriving. */
.cta--solid:hover,
.cta--solid:focus-visible {
  color: var(--veil);
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, 0.4),
    0 2px 5px rgba(24, 22, 21, 0.16),
    0 10px 28px rgba(122, 92, 40, 0.3);
}

/* Every one of these buttons also carries data-reveal, and motion.css sets
   a transition SHORTHAND on it — which lands later in the cascade at equal
   specificity and silently drops the shadow transition above, so hover
   snapped instead of lifting. Restating all four properties here, at three
   classes, settles it by specificity rather than by file order.
   The delay list matters as much as the property list: the reveal's stagger
   must stay on opacity and transform, and must NOT reach the hover, or the
   shadow would arrive up to 320ms after the pointer. */
.js .cta.cta--solid {
  transition-property: opacity, transform, color, box-shadow;
  transition-duration: var(--dur-slow), var(--dur-slow), var(--dur-fast), var(--dur);
  transition-timing-function: var(--ease-out);
  transition-delay: var(--delay, 0ms), var(--delay, 0ms), 0ms, 0ms;
}

.cta--solid.cta--pale:hover,
.cta--solid.cta--pale:focus-visible {
  color: var(--ink);
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.45),
    0 12px 30px rgba(201, 162, 39, 0.26);
}

/* One band of light crosses the face per hover — gold leaf catching a lamp.
   Transform only, so it stays on the compositor. It is clipped to the face
   by `overflow: hidden`, which bounds to the padding box, not the border. */
.cta--solid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 241, 206, 0.45) 50%,
    transparent 62%
  );
  transform: translateX(-130%);
  transition: transform 1000ms var(--ease-out);
}

.cta--solid:hover::after,
.cta--solid:focus-visible::after { transform: translateX(130%); }

@media (prefers-reduced-motion: reduce) {
  .cta--solid::after { display: none; }
}

/* Quiet text link with a rule that draws in from the left. */
.link {
  position: relative;
  display: inline-block;
  padding-bottom: 0.15em;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}

.link:hover::after,
.link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---- Image plates ---------------------------------------------------- */

.plate {
  position: relative;
  overflow: hidden;
  background: var(--paper-warm);
}

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

.plate--portrait { aspect-ratio: 3 / 4; }
.plate--landscape { aspect-ratio: 16 / 10; }
.plate--square { aspect-ratio: 1 / 1; }
.plate--tall { aspect-ratio: 2 / 3; }

.plate figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.9rem 1.1rem;
  color: var(--veil);
  mix-blend-mode: difference;
}