/* Pictorial layer — a straight port of apps/web/src/app/pictorial.css, which is
   the composition live on staging.calibrhq.com. It is plain CSS on the same
   custom properties, so the only adaptations here are asset paths (the static
   site serves photography from img/ rather than /images/redesign/) and the
   header, which the app renders from SiteHeader.tsx.

   Kept in its own file because styles.css sits close to its 30kb budget; both
   sheets are budgeted together in verify.mjs. */

/* ---- hero ---------------------------------------------------------------- */

.pictorial-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100svh;
  align-items: end;
  overflow: hidden;
  background: var(--night-deep);
  color: var(--paper);
}

.pictorial-hero-media,
.pictorial-hero-media::after {
  position: absolute;
  inset: 0;
}

.pictorial-hero-media {
  z-index: -1;
  background: url("img/dts-sweat-track.jpg") center / cover no-repeat;
}

.pictorial-hero-media video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 52% 54%;
}

/* Two scrims: a vertical one so the type sits on ink at the base, and a
   left-weighted one so the copy column keeps contrast over a busy frame. */
.pictorial-hero-media::after {
  content: "";
  background:
    linear-gradient(180deg, rgb(3 10 8 / 12%) 0%, rgb(3 10 8 / 5%) 40%, rgb(3 10 8 / 88%) 100%),
    linear-gradient(90deg, rgb(3 10 8 / 44%) 0%, transparent 62%);
}

.pictorial-hero-content {
  width: 100%;
  padding: 9rem clamp(1rem, 3vw, 3rem) clamp(2rem, 4vw, 3rem);
}

.pictorial-hero h1 {
  display: grid;
  grid-template-columns: 1.02fr 1.17fr 1fr;
  gap: 0.05em;
  max-width: none;
  margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(3.15rem, 9vw, 9.125rem);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.065em;
}

.pictorial-hero h1 span:nth-child(2) { text-align: center; }
.pictorial-hero h1 span:last-child { text-align: right; }

.pictorial-hero h1 span {
  animation: pictorial-hero-word 900ms var(--ease-out) both;
}

.pictorial-hero h1 span:nth-child(2) { animation-delay: 90ms; }
.pictorial-hero h1 span:nth-child(3) { animation-delay: 180ms; }

@keyframes pictorial-hero-word {
  from { opacity: 0; transform: translateY(34px); }
}

.pictorial-hero-lede {
  max-width: 34rem;
  margin: 1.5rem 0 0;
  color: rgb(255 255 255 / 84%);
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.5;
}

.pictorial-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.pictorial-hero-action {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: 4px;
  background: var(--action);
  color: var(--on-action);
  padding: 0 1.25rem;
  font-weight: 750;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.pictorial-hero-action:hover { background: var(--action-press); }

.pictorial-hero-action-secondary {
  border: 1px solid rgb(255 255 255 / 50%);
  background: transparent;
  color: var(--paper);
}

.pictorial-hero-action-secondary:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 10%);
}

/* ---- header over the hero ------------------------------------------------ */

/* On a pictorial page the header floats over the media on a translucent ink
   bar (SiteHeader.tsx: fixed border-white/20 bg-ink/75 backdrop-blur-md);
   everywhere else it stays the light sticky bar styles.css already defines. */
.pictorial-page .site-header {
  position: fixed;
  inset: 0 0 auto;
  border-bottom: 1px solid rgb(255 255 255 / 20%);
  background: rgb(16 35 28 / 75%);
  backdrop-filter: blur(12px);
  color: var(--paper);
}

.pictorial-page .site-header .brand,
.pictorial-page .site-header .nav-links { color: var(--paper); }
.pictorial-page .site-header .nav-links a { color: rgb(255 255 255 / 75%); }
.pictorial-page .site-header .nav-links a:hover { color: #fff; }

/* the scrolled state is already the ink bar, so don't re-tint it to white */
body.pictorial-page.is-scrolled .site-header {
  border-bottom-color: rgb(255 255 255 / 20%);
  background: rgb(16 35 28 / 88%);
  box-shadow: none;
}

/* ---- section eyebrow ----------------------------------------------------- */

.pictorial-section-index {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 0 1rem;
  color: var(--ink);
  font-family: var(--font-data);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pictorial-section-index::before {
  width: 2.125rem;
  height: 2px;
  margin-top: 0.55em;
  background: var(--action);
  content: "";
}

/* ---- motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pictorial-hero h1 span { animation: none; }
  .pictorial-hero-media video { display: none; }
}

/* ---- chapter bands ------------------------------------------------------- */

/* The app's alternating copy|media band (pictorial.css .pictorial-chapter).
   Interior pages use one band each, which is also the register's limit of one
   licensed image per live page. */
.pictorial-chapter {
  display: grid;
  grid-template-columns: 5fr 7fr;
  border-top: 1px solid var(--ink);
}

.pictorial-chapter-reverse { grid-template-columns: 7fr 5fr; }

.pictorial-chapter-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4.375rem);
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 3rem);
}

.pictorial-chapter-number {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--line-strong, var(--line));
  color: var(--ink);
  font-family: var(--font-data);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pictorial-chapter-copy h2 {
  margin: auto 0 1.375rem;
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  line-height: .82;
  letter-spacing: -.055em;
}

.pictorial-chapter-copy > div > p {
  max-width: 31.25rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  line-height: 1.45;
}

.pictorial-chapter-copy > div > p + p { margin-top: 1rem; }

.pictorial-chapter-media {
  position: relative;
  min-width: 0;
  min-height: 32rem;
  overflow: hidden;
  background: var(--night-deep);
}

.pictorial-chapter-media > img {
  position: absolute;
  inset: -3% 0;
  height: 106%;
  width: 100%;
  object-fit: cover;
}

.pictorial-chapter-reverse .pictorial-chapter-media { order: -1; }

.pictorial-media-credit {
  position: absolute;
  right: 1rem;
  bottom: .875rem;
  z-index: 4;
  color: #fff;
  font-family: var(--font-data);
  font-size: .625rem;
  letter-spacing: .04em;
  text-shadow: 0 1px 8px rgb(0 0 0 / 80%);
}

@media (max-width: 860px) {
  .pictorial-chapter,
  .pictorial-chapter-reverse { grid-template-columns: 1fr; }
  .pictorial-chapter-reverse .pictorial-chapter-media { order: 0; }
  .pictorial-chapter-media { min-height: 20rem; }
}

/* Below 640px the three-column h1 squeezes each word into a third of a phone
   screen, so it stacks — same breakpoint and treatment as the app
   (apps/web/src/app/pictorial.css). Ported in response to codex P2 on #527. */
@media (max-width: 640px) {
  .pictorial-hero-content { padding-bottom: 1.5rem; }

  .pictorial-hero h1 {
    display: block;
    font-size: clamp(3.1rem, 17vw, 5rem);
    line-height: .86;
  }

  .pictorial-hero h1 span {
    display: block;
    text-align: left !important;
  }
}