/* Craig Houchin — site styles
   One idea carries the design: each screenplay appears as its own title page,
   brass brads and all, on a grey desk. Everything else stays quiet. */

:root {
  --ground: #e2e3e5;     /* the desk */
  --paper: #ffffff;      /* script paper */
  --ink: #172131;        /* blue-black ink */
  --graphite: #535d6c;   /* secondary text */
  --rule: #c3c7ce;
  --hole: #c9ccd1;       /* empty middle punch hole */
  --brass: #8a6a1c;      /* text-safe brass for links and focus */
  --deck: #17202c;       /* treatment side: the director's deck */
  --deck-raised: #212c3a;
  --deck-ink: #e8ebef;
  --deck-dim: #a9b2bf;

  --sans: "Archivo", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --courier: "Courier Prime", "Courier New", Courier, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.625rem;
  --step-3: 2.25rem;
  --step-4: 3.25rem;

  --gutter: clamp(1rem, 4vw, 3rem);
  --wrap: 76rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--brass); }

:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

.skip {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--ink); color: var(--paper); padding: 0.5rem 1rem; z-index: 10;
}
.skip:focus { top: 1rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.nowrap { white-space: nowrap; }

/* ---------- Site header ---------- */

.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 2rem; padding-top: 1.5rem; padding-bottom: 1.5rem;
}
.logotype {
  font-weight: 700; font-stretch: 80%; font-size: var(--step-2); line-height: 1.1;
  letter-spacing: -0.005em; text-decoration: none;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; }
.site-nav a { text-decoration: none; font-size: var(--step-0); }
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- Home: intro ---------- */

.intro { padding: clamp(2rem, 7vw, 6rem) 0 clamp(0.5rem, 2vw, 1.5rem); }
.intro h1 {
  margin: 0;
  font-size: clamp(3.25rem, 10vw, 8.5rem);
  font-weight: 760; font-stretch: 66%;
  line-height: 0.88; letter-spacing: -0.015em;
  text-transform: uppercase;
}
.intro p {
  max-width: 38ch; margin: 1.5rem 0 0;
  font-size: clamp(var(--step-1), 2.2vw, var(--step-2)); line-height: 1.4;
}

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; }
.section-head h2,
h2.section-title {
  margin: 0; font-size: var(--step-3); font-weight: 700; font-stretch: 75%; line-height: 1.1;
}
.section-head p { margin: 0; color: var(--graphite); max-width: 52ch; }

/* ---------- The slate of title pages ---------- */

.slate-section { padding-bottom: clamp(3rem, 8vw, 6rem); }

.slate {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; gap: 3rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
}
@media (min-width: 40rem) {
  .slate { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem clamp(1.5rem, 3vw, 3rem); }
}
@media (min-width: 80rem) {
  .slate { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3rem clamp(1.25rem, 2vw, 2rem); }
}
@media (max-width: 34rem) {
  .slate { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1rem; }
}

.slate__item { display: flex; flex-direction: column; gap: 1rem; }
.slate__item .tp { rotate: var(--r, 0deg); transition: rotate 0.25s ease, translate 0.25s ease; }
.slate__item .tp:hover,
.slate__item .tp:focus-visible { rotate: 0deg; translate: 0 -4px; }
.slate__hook { margin: 0; font-size: var(--step--1); line-height: 1.5; color: var(--graphite); }
.slate__hook strong { display: block; color: var(--ink); font-weight: 600; font-size: var(--step-0); }

/* the one orchestrated moment: scripts dealt onto the desk */
@media (prefers-reduced-motion: no-preference) {
  .slate__item { animation: deal 0.6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
  @keyframes deal { from { opacity: 0; transform: translateY(18px); } }
}

/* ---------- Title page object ---------- */

.tp {
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-rows: 36fr auto auto auto 40fr auto;
  justify-items: center;
  aspect-ratio: 8.5 / 11;
  padding: 0 9% 8% 13%;
  background:
    radial-gradient(circle closest-side at 5.4% 50%, var(--hole) 0 36%, transparent 40%),
    var(--paper);
  color: var(--ink);
  font-family: var(--courier);
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(23, 33, 49, 0.08), 0 14px 30px -18px rgba(23, 33, 49, 0.55);
}
/* two brass brads, top and bottom holes; middle hole left empty, the way scripts are bound */
.tp::before,
.tp::after {
  content: ""; position: absolute; left: 5.4%;
  width: 4.6cqi; height: 4.6cqi; border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle at 35% 32%, #f6e3a4 0 12%, #c9a13f 45%, #8a6a1c 85%);
  box-shadow: 0.3cqi 0.5cqi 0.6cqi rgba(23, 33, 49, 0.35);
}
.tp::before { top: 13.6%; }
.tp::after { top: 86.4%; }

.tp__title {
  grid-row: 2; font-size: 8.5cqi; font-weight: 700; text-transform: uppercase;
  text-align: center; line-height: 1.15; text-decoration: underline;
  text-decoration-thickness: 0.35cqi; text-underline-offset: 1cqi;
}
.tp__by { grid-row: 3; margin-top: 4.5cqi; font-size: 5cqi; }
.tp__name { grid-row: 4; margin-top: 1.5cqi; font-size: 5cqi; }
.tp__corners {
  grid-row: 6; justify-self: stretch;
  display: flex; justify-content: space-between; align-items: end; gap: 4cqi;
  font-size: 4.2cqi; line-height: 1.35;
}
.tp__corners span:last-child { text-align: right; }

/* ---------- Treatments band (home) ---------- */

.deck-band { background: var(--deck); color: var(--deck-ink); padding: clamp(3rem, 8vw, 6rem) 0; }
.deck-band .wrap { display: grid; gap: 2.5rem 5rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 52rem) { .deck-band .wrap { grid-template-columns: 1fr; } }
.deck-band h2 {
  margin: 0; font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 760; font-stretch: 66%;
  line-height: 0.92; text-transform: uppercase;
}
.deck-band p { max-width: 46ch; margin: 1.25rem 0 0; font-size: var(--step-1); line-height: 1.5; }
.deck-band .clients { margin: 0; font-size: var(--step-0); color: var(--deck-dim); max-width: 40ch; }
.deck-band .clients strong { color: var(--deck-ink); font-weight: 500; }
.deck-band a:hover { text-decoration-color: currentColor; }

.button {
  display: inline-block; margin-top: 1.75rem; padding: 0.8rem 1.4rem;
  font-weight: 600; text-decoration: none; border: 2px solid currentColor;
}
.button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.deck-band .button:hover,
.deck-page .button:hover { background: var(--deck-ink); color: var(--deck); border-color: var(--deck-ink); }

/* ---------- Short about (home) ---------- */

.about-short { padding: clamp(3rem, 8vw, 6rem) 0; }
.about-short .wrap { display: grid; gap: 2rem 5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
@media (max-width: 52rem) { .about-short .wrap { grid-template-columns: 1fr; } }
.about-short p { margin: 0 0 1rem; max-width: 62ch; }

/* ---------- Project pages ---------- */

.band { background: var(--band, var(--ink)); color: var(--band-ink, var(--paper)); padding: 2rem 0 clamp(2.5rem, 6vw, 4rem); }
.back { display: inline-block; font-size: var(--step--1); text-decoration: none; opacity: 0.85; }
.back:hover { text-decoration: underline; opacity: 1; }
.band h1 {
  margin: clamp(1.5rem, 5vw, 3.5rem) 0 0;
  color: var(--band-title, inherit);
  font-size: clamp(3.75rem, 15vw, 11.5rem); font-weight: 800; font-stretch: 62%;
  line-height: 0.84; letter-spacing: -0.01em; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.facts { display: flex; flex-wrap: wrap; gap: 0.75rem 2.75rem; margin: 2rem 0 0; }
.facts div { min-width: 0; }
.facts dt { font-size: var(--step--1); opacity: 0.75; }
.facts dd { margin: 0; font-weight: 600; }

.logline { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.logline p {
  margin: 0; max-width: 46ch;
  font-size: clamp(var(--step-1), 2.4vw, var(--step-2)); line-height: 1.4;
}

.project {
  display: grid; gap: 3rem clamp(3rem, 7vw, 6rem);
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
@media (max-width: 56rem) { .project { grid-template-columns: 1fr; } }

.prose h2 { margin: 3rem 0 0.75rem; font-size: var(--step-2); font-weight: 700; font-stretch: 80%; line-height: 1.15; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1rem; max-width: 66ch; }
.prose blockquote { margin: 1.5rem 0; padding: 0 0 0 1.25rem; border-left: 3px solid var(--band, var(--ink)); max-width: 56ch; }
.prose blockquote p { font-size: var(--step-1); line-height: 1.45; }
.honors { list-style: none; margin: 0; padding: 0; max-width: 60ch; }
.honors li { padding: 0.6rem 0; border-top: 1px solid var(--rule); }
.honors li:last-child { border-bottom: 1px solid var(--rule); }
.honors span { color: var(--graphite); }

/* pitch kit */
.kit h2 { margin: 0 0 1.25rem; font-size: var(--step-2); font-weight: 700; font-stretch: 80%; line-height: 1.15; }
.kit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.kit__item { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: center; text-decoration: none; }
.kit__item:hover .kit__name { text-decoration: underline; text-decoration-color: var(--brass); }
.kit__item .tp { width: 100%; }
.kit__thumb { width: 100%; box-shadow: 0 1px 1px rgba(23, 33, 49, 0.08), 0 10px 22px -14px rgba(23, 33, 49, 0.6); background: var(--paper); }
.kit__name { display: block; font-weight: 650; font-size: var(--step-1); line-height: 1.25; }
.kit__meta { display: block; color: var(--graphite); font-size: var(--step--1); margin-top: 0.2rem; }
@media (min-width: 56rem) { .kit { position: sticky; top: 2rem; align-self: start; } }

.next-up .wrap { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-top: 2rem; padding-bottom: 2rem; }
.next-up a { text-decoration: none; }
.next-up a:hover strong { text-decoration: underline; }
.next-up span { display: block; font-size: var(--step--1); color: var(--graphite); }
.next-up strong { font-size: var(--step-2); font-stretch: 75%; font-weight: 700; }
.next-up .next { text-align: right; margin-left: auto; }

/* ---------- Treatments page (dark deck side) ---------- */

.deck-page { background: var(--deck); color: var(--deck-ink); }
.deck-page .site-nav a:hover,
.deck-page a:hover { text-decoration-color: currentColor; }
.deck-page :focus-visible { outline-color: #d9b65a; }
.deck-hero { padding: clamp(2rem, 7vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem); }
.deck-hero h1 {
  margin: 0; font-size: clamp(3.25rem, 11vw, 9rem); font-weight: 780; font-stretch: 62%;
  line-height: 0.86; text-transform: uppercase;
}
.deck-hero p { max-width: 44ch; margin: 1.75rem 0 0; font-size: clamp(var(--step-1), 2.2vw, var(--step-2)); line-height: 1.4; }

/* genres: set in the hero's condensed caps, one size down, so they read as a headline list */
.deck-genres { padding: clamp(2rem, 5vw, 3.5rem) 0; border-top: 1px solid #344052; }
.deck-genres h2 { margin: 0 0 1.25rem; font-size: var(--step-2); font-weight: 700; font-stretch: 80%; line-height: 1.15; }
.genre-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.55rem clamp(1.25rem, 2.6vw, 2.25rem);
}
/* on wider screens the list sets as three full lines; spread each to the same width so it reads as a squared block */
@media (min-width: 48rem) { .genre-list { justify-content: space-between; } }
.genre-list li {
  font-size: clamp(1.625rem, 3.4vw, 2.625rem); font-weight: 720; font-stretch: 64%;
  line-height: 1; text-transform: uppercase; letter-spacing: 0.005em;
  color: var(--deck-ink); white-space: nowrap;
}

/* samples: each card is a crop out of a treatment deck page: a full-bleed photo with the
   text set over its darker side, the way the decks are laid out. Photos are set inline as background-image
   (anchored by --pos); the scrim darkens the text side so it always reads. */
.deck-samples { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem); border-top: 1px solid #344052; }
.deck-samples > h2 { margin: 0 0 1.5rem; font-size: var(--step-2); font-weight: 700; font-stretch: 80%; line-height: 1.15; }
.deck-samples .deck-note { margin-top: 1.75rem; }

/* the grid is a size container so each card can be at least square (or 2.1:1 when wide)
   and still grow taller when its excerpt needs the room */
.sample-grid { container-type: inline-size; --gap: clamp(0.75rem, 1.4vw, 1.25rem); display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 72rem) {
  .sample-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sample--wide { grid-column: 1 / -1; }
}

.sample {
  container-type: inline-size;
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 26rem;
  padding: clamp(1.5rem, 6cqi, 3rem);
  color: #f4f2ee;
  background-color: #0b0e13;
  background-position: var(--pos, center);
  background-size: var(--size, cover);
  background-repeat: no-repeat;
}
@media (min-width: 72rem) {
  .sample { min-height: calc((100cqi - var(--gap)) / 2); }
  .sample--wide { min-height: calc(100cqi / 2.1); justify-content: center; }
}

/* scrim, then a touch of grain so the photos sit together like one deck */
.sample::before,
.sample::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.sample::before {
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 10, 14, 0.05) 0%, rgba(8, 10, 14, 0.35) 30%, rgba(8, 10, 14, 0.86) 62%, rgba(8, 10, 14, 0.92) 100%);
}
.sample--wide::before {
  background: linear-gradient(90deg, rgba(8, 10, 14, 0.9) 0%, rgba(8, 10, 14, 0.78) 40%, rgba(8, 10, 14, 0.15) 70%, rgba(8, 10, 14, 0) 100%);
}
/* text on the right, picture's subject on the left (two-column view only) */
@media (min-width: 72rem) {
  .sample--wide.sample--right { align-items: flex-end; justify-content: flex-end; }
  .sample--wide.sample--right .sample__text, .sample--wide.sample--right h3 { width: min(44ch, 48%); max-width: none; }
  .sample--wide.sample--right::before {
    background: linear-gradient(270deg, rgba(8, 10, 14, 0.9) 0%, rgba(8, 10, 14, 0.78) 42%, rgba(8, 10, 14, 0.15) 70%, rgba(8, 10, 14, 0) 100%);
  }
}
.sample::after {
  z-index: 2; opacity: 0.14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.sample h3 {
  position: relative; z-index: 1;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 8.5cqi, 3.5rem); font-weight: 800; font-stretch: 70%;
  line-height: 0.9; text-transform: uppercase; letter-spacing: 0.005em;
  text-wrap: balance;
}
.sample h3 span { color: #f2a641; }
.sample--wide h3 { font-size: clamp(2rem, 5.5cqi, 4rem); }
.sample__text { position: relative; z-index: 1; max-width: 46ch; }
.sample--wide .sample__text { max-width: 52ch; }
.sample__text p {
  margin: 0 0 0.7em;
  font-size: clamp(0.875rem, 2.65cqi, 1.0625rem); line-height: 1.5;
  text-wrap: pretty;
}
.sample--wide .sample__text p { font-size: clamp(0.875rem, 1.45cqi, 1.0625rem); }
.sample__text p:last-child { margin-bottom: 0; }
.sample__kicker { font-weight: 650; font-stretch: 85%; font-size: clamp(1.0625rem, 3.6cqi, 1.375rem) !important; line-height: 1.3 !important; }

/* one column (phones and tablets): the text would cover the whole photo, so the photo becomes
   a band across the top, scaled to the card's width, that fades into the text */
@media (max-width: 71.99rem) {
  .sample { min-height: 0; justify-content: flex-start; padding-top: max(10rem, 44cqi); background-size: 100% auto; background-position: var(--pos-sm, center top); }
  .sample::before, .sample--wide::before { background: linear-gradient(180deg, rgba(11, 14, 19, 0) 0, rgba(11, 14, 19, 0.2) 30cqi, #0b0e13 max(12rem, 60cqi)); }
  .sample h3 { font-size: clamp(2rem, 7cqi, 3.25rem); }
  .sample__text, .sample--wide .sample__text { max-width: 60ch; }
  .sample__text p, .sample--wide .sample__text p { font-size: clamp(0.9375rem, 2.2cqi, 1.0625rem); }
}

.deck-grid {
  display: grid; gap: 3rem clamp(3rem, 7vw, 6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  border-top: 1px solid #344052;
}
.deck-grid h2 { margin: 0 0 1rem; font-size: var(--step-2); font-weight: 700; font-stretch: 80%; line-height: 1.15; }
.deck-grid p,
.deck-grid li { color: var(--deck-dim); max-width: 56ch; }
.deck-grid p { margin: 0 0 1rem; }
.deck-grid strong { color: var(--deck-ink); font-weight: 600; }
.plain-list { margin: 0; padding: 0 0 0 1.1rem; }
.plain-list li { margin-bottom: 0.6rem; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2rem 1fr; gap: 0.25rem 0.5rem; margin-bottom: 1rem; }
.steps li::before { content: counter(step); font-weight: 700; font-stretch: 75%; color: var(--deck-ink); font-size: var(--step-1); line-height: 1.3; }
.steps strong { display: block; }

.deck-quote {
  margin: 0 0 1.25rem; max-width: 30ch;
  font-size: var(--step-2); font-stretch: 88%; line-height: 1.35; color: var(--deck-ink);
}
.deck-grid a { color: var(--deck-ink); }

.deck-brands { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem); border-top: 1px solid #344052; }
.deck-brands h2 { margin: 0 0 1.5rem; font-size: var(--step-2); font-weight: 700; font-stretch: 80%; line-height: 1.15; }
.brand-list {
  list-style: none; margin: 0; padding: 0;
  columns: 4 12rem; column-gap: 2.5rem;
}
.brand-list li { break-inside: avoid; padding: 0.5rem 0; border-top: 1px solid #2b3646; font-size: var(--step-0); }
.deck-note { margin: 2rem 0 0; color: var(--deck-dim); max-width: 60ch; }
.deck-note a { color: var(--deck-ink); font-weight: 600; white-space: nowrap; }

.deck-cta { padding: clamp(2rem, 6vw, 4rem) 0 clamp(3rem, 8vw, 6rem); border-top: 1px solid #344052; }
.deck-cta .button { margin-top: 0; }

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

.about-page { padding: clamp(2rem, 7vw, 6rem) 0 clamp(3rem, 8vw, 6rem); }
.about-page h1 {
  margin: 0 0 2.5rem; font-size: clamp(3.25rem, 10vw, 8rem); font-weight: 760; font-stretch: 66%;
  line-height: 0.88; text-transform: uppercase;
}
.about-grid { display: grid; gap: 3rem clamp(3rem, 7vw, 6rem); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 52rem) { .about-grid { grid-template-columns: 1fr; } }
.about-grid .lede { font-size: var(--step-1); line-height: 1.5; }
.about-grid p { margin: 0 0 1rem; max-width: 64ch; }
.contact-block h2 { margin: 0 0 0.75rem; font-size: var(--step-2); font-weight: 700; font-stretch: 80%; }
.contact-block p { margin: 0 0 0.5rem; }
.contact-block a { font-weight: 600; }

/* ---------- Footer ---------- */

.site-footer { font-size: var(--step--1); color: var(--graphite); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-top: 2rem; padding-bottom: 2.5rem; position: relative; }
/* the rules above Previous/Next and the footer stop where the text does, not at the padding edge */
.next-up .wrap::before,
.site-footer .wrap::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--rule); }
.site-footer p { margin: 0; }
.deck-page .site-footer { color: var(--deck-dim); }
.deck-page .site-footer .wrap::before { border-top-color: #344052; }