/* Drew's brand face, TAY Dreamboat (all caps), for headings, labels, nav and buttons; Figtree for reading text */
@font-face { font-family: "TAY Dreamboat"; src: url("fonts/tay-dreamboat.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "TAY Dreamboat"; src: url("fonts/tay-dreamboat-thin.woff2") format("woff2"); font-weight: 200; font-display: swap; }

/* Layout: a film-slate portfolio. All-caps brand titles, frames captioned with timecodes, one burnt-orange highlight. */
:root {
  --bg: #f5eee2;
  --surface: #ebe3d4;
  --fg: #313131;
  --muted: #6b6459;
  --line: #d8cebc;
  --accent: #9b3e23;
  --accent-ink: #9b3e23;
  --on-accent: #f5eee2;
  --display: "TAY Dreamboat", "Helvetica Neue", Arial, sans-serif;
  --body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --mono: "TAY Dreamboat", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.wrap {
  width: 100%; max-width: 1440px; margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--accent); color: var(--on-accent); padding: 8px 12px; }

h1, h2, h3 {
  font-family: var(--display); font-weight: 400;
  line-height: 0.92; letter-spacing: -0.01em; margin: 0; text-wrap: balance;
}
h1 { font-size: clamp(3rem, 9vw, 8.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.75rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
p { margin: 0; }
.lede { font-size: clamp(1.125rem, 1.6vw, 1.375rem); max-width: 38ch; color: var(--fg); }
.prose { display: grid; gap: 1em; max-width: 62ch; }
.eyebrow { color: var(--muted); margin: 0; }

/* header */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--bg); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.mark {
  font-family: var(--display); font-weight: 400; font-size: 1.6rem;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px; line-height: 1;
}
.site-head nav { display: flex; gap: clamp(12px, 3vw, 32px); flex-wrap: wrap; justify-content: flex-end; }
.site-head nav a { text-decoration: none; font-weight: 500; color: var(--muted); }
.site-head nav a:hover, .site-head nav a[aria-current="page"] { color: var(--fg); }
.site-head nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent-ink); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px;
  background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none;
  border: 1px solid var(--accent); border-radius: 999px; font: 600 1rem/1 var(--body); cursor: pointer;
  transition: transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--fg); }
.cta-row, .proj-links { display: flex; flex-wrap: wrap; gap: 12px; }

/* frames with timecode captions */
.frame { position: relative; margin: 0; overflow: hidden; background: var(--surface); aspect-ratio: 16 / 9; max-width: 100%; }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.frame-sq { aspect-ratio: 1; }
.tc {
  position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; font-size: 0.6875rem;
  background: rgb(0 0 0 / .62); color: #f2f0ea; border-radius: 2px;
}
.tc::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; }

/* hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; padding-block: clamp(40px, 7vw, 96px) clamp(32px, 5vw, 64px); }
.hero-copy { display: grid; gap: 24px; min-width: 0; }
.hero h1 .amp { color: var(--accent-ink); }
.hero-img { aspect-ratio: 4 / 5; }
.status { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #3ccf7a; box-shadow: 0 0 0 4px color-mix(in srgb, #3ccf7a 25%, transparent); }

.disciplines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-block: 1px solid var(--line); padding-block: 0; }
.disciplines > div { padding: 24px 24px 28px 0; display: grid; gap: 8px; align-content: start; }
.disciplines > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.disciplines .eyebrow { color: var(--accent-ink); }

.block { padding-block: clamp(48px, 7vw, 96px) 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
.more { color: var(--muted); }

/* cards */
.card { display: grid; gap: 14px; text-decoration: none; align-content: start; min-width: 0; }
.card:hover img { transform: scale(1.035); }
.card:hover h3 { color: var(--accent-ink); }
.card-text { display: grid; gap: 6px; }
.card-sum { color: var(--muted); font-size: 0.975rem; max-width: 46ch; }
.featured { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(20px, 3vw, 40px); }
.featured .card { grid-column: span 2; }
.featured .card-big { grid-column: span 4; grid-row: span 2; }
.featured .card-big h3 { font-size: clamp(2rem, 4vw, 3.25rem); }
.featured .card:nth-child(4) { grid-column: span 6; }
.featured .card:nth-child(4) .frame { aspect-ratio: 21 / 9; }
.featured .card .frame-sq { aspect-ratio: 16 / 9; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 500 0.9375rem/1 var(--body); min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.chip .n { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip[aria-pressed="true"] .n { color: var(--bg); opacity: .7; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 44px) clamp(20px, 2.5vw, 32px); }
.grid .frame-sq { aspect-ratio: 16 / 9; }
.grid .frame-sq img, .featured .frame-sq img { object-fit: contain; padding: 6%; }

.clients ul { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px 0; }
.clients li { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.1; }
.clients li:not(:last-child)::after { content: "/"; color: var(--accent-ink); margin-inline: 0.4em; font-weight: 400; }

/* project page */
.proj-head { display: grid; gap: 24px; padding-block: clamp(32px, 5vw, 64px) 32px; }
.back { color: var(--muted); text-decoration: none; }
.back:hover { color: var(--fg); }
.meta, .facts { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 8px 48px; margin: 0; }
.meta dt, .facts dt { color: var(--muted); }
.meta dd, .facts dd { margin: 0; font-weight: 500; }
.proj-cover { margin-block: 0; }
.proj-cover .frame { aspect-ratio: auto; max-height: 82vh; }
.proj-cover .frame img { max-height: 82vh; object-fit: contain; background: var(--surface); }
.frame-narrow { max-width: 640px; }
.proj-body { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; padding-block: 40px 0; }
.proj-body .prose { font-size: 1.1875rem; }
.gallery { columns: 2; column-gap: 16px; }
.g-item { display: block; position: relative; margin-bottom: 16px; break-inside: avoid; background: var(--surface); overflow: hidden; }
.g-item img { width: 100%; height: auto; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.g-item:hover img { transform: scale(1.02); }
.g-n { position: absolute; top: 10px; left: 10px; background: rgb(0 0 0 / .6); color: #f2f0ea; padding: 3px 7px; font-size: 0.6875rem; }
.gallery-sq { columns: 4; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-block: clamp(48px, 7vw, 96px) 0; }
.pager a { display: grid; gap: 8px; text-decoration: none; padding-block: 24px; border-top: 1px solid var(--line); font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1; min-width: 0; }
.pager a span { color: var(--muted); font-weight: 400; }
.pager a:hover { color: var(--accent-ink); }
.pager .next { text-align: right; }

.lightbox { position: fixed; inset: 0; z-index: 60; background: rgb(8 9 10 / .96); display: grid; place-items: center; padding: max(56px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(56px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.lightbox img { max-height: 86vh; max-width: min(92vw, 1600px); object-fit: contain; }
.lightbox button { position: absolute; background: none; border: 0; color: #f2f0ea; font-size: 2rem; width: 56px; height: 56px; cursor: pointer; }
.lb-close { top: max(8px, env(safe-area-inset-top, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); }
.lb-prev { left: max(8px, env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.lb-next { right: max(8px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: max(16px, env(safe-area-inset-bottom, 0px)); color: #b9bcbc; }

/* inner pages */
.page-head { display: grid; gap: 24px; padding-block: clamp(40px, 7vw, 96px) 0; justify-items: start; }
.shows { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.show { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 24px; align-items: start; }
.show > div { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.show p { color: var(--muted); }
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.process li { padding: 20px 20px 0 0; display: grid; gap: 10px; align-content: start; }
.process li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.process .mono { color: var(--accent-ink); }
.process p { color: var(--muted); }

.about { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 80px); padding-block: clamp(40px, 7vw, 96px) 0; }
.about-copy { display: grid; gap: 28px; align-content: start; justify-items: start; min-width: 0; }
.about-imgs { display: grid; gap: 16px; align-content: start; }
.about-imgs .frame { aspect-ratio: 4 / 5; }
.about-imgs .frame + .frame { aspect-ratio: 16 / 10; }
.facts { grid-template-columns: max-content 1fr; gap: 10px 28px; }
.facts > div { display: contents; }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); padding-block: clamp(40px, 7vw, 96px) 0; }
.contact > div { display: grid; gap: 28px; align-content: start; min-width: 0; }
.copy { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 4px; padding: 3px 8px; margin-left: 8px; cursor: pointer; }
.form { display: grid; gap: 8px; align-content: start; background: var(--surface); padding: clamp(20px, 3vw, 36px); border-radius: 4px; }
.form label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: .06em; color: var(--muted); margin-top: 10px; }
.form input, .form select, .form textarea {
  font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; padding: 12px 14px; width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent-ink); }
.form .btn { margin-top: 16px; justify-self: start; }
.form-note { color: var(--muted); min-height: 1em; }

/* footer */
.site-foot { margin-top: clamp(72px, 10vw, 144px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.foot-grid { display: grid; grid-template-columns: 1fr auto; gap: 32px; padding-block: 48px 32px; }
.foot-big { font-family: var(--display); font-weight: 400; font-size: clamp(2.5rem, 6vw, 5rem); line-height: .92; }
.foot-contact { margin-top: 20px; font-size: 1.125rem; }
.foot-contact a { text-decoration-color: var(--accent-ink); text-underline-offset: 4px; }
.foot-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-self: end; }
.foot-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--muted); border: 1px solid var(--line); }
.foot-social a:hover { border-color: var(--fg); }
.foot-social a:hover { color: var(--fg); }
.foot-meta { grid-column: 1 / -1; color: var(--muted); padding-top: 24px; border-top: 1px solid var(--line); }

@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .disciplines { grid-template-columns: 1fr 1fr; }
  .disciplines > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .disciplines > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .process { grid-template-columns: 1fr 1fr; }
  .process li:nth-child(3) { padding-left: 0; border-left: 0; }
  .shows { grid-template-columns: 1fr; }
  .gallery-sq { columns: 3; }
}
@media (max-width: 760px) {
  .hero, .about, .contact, .proj-body { grid-template-columns: 1fr; }
  .hero-img { aspect-ratio: 1; }
  .featured { grid-template-columns: 1fr; }
  .featured .card, .featured .card-big, .featured .card:nth-child(4) { grid-column: auto; grid-row: auto; }
  .featured .card:nth-child(4) .frame { aspect-ratio: 16 / 9; }
  .grid { grid-template-columns: 1fr; }
  .disciplines, .process { grid-template-columns: 1fr; }
  .disciplines > div, .disciplines > div + div, .process li, .process li + li { padding-left: 0; border-left: 0; }
  .disciplines > div + div, .process li + li { border-top: 1px solid var(--line); }
  .meta { grid-template-columns: 1fr 1fr; }
  .gallery { columns: 1; }
  .gallery-sq { columns: 2; }
  .show { grid-template-columns: 96px 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .mark { font-size: 1.35rem; }
  .site-head nav { gap: 14px; }
  .site-head nav a { font-size: 0.9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* awards and festival section */
.award { color: var(--accent-ink); }
.fest { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.poster { display: block; background: var(--surface); }
.poster img { width: 100%; height: auto; }
.fest-info { display: grid; gap: 24px; align-content: start; min-width: 0; }
.fest-info h2 + * { margin-top: -8px; }
.laurels { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--line); }
.laurels li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "a y" "f y"; gap: 2px 16px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.laurels li .mono:first-child { grid-area: a; color: var(--accent-ink); }
.laurels li strong { grid-area: f; font-weight: 600; font-size: 1.125rem; }
.laurels li .yr { grid-area: y; align-self: center; color: var(--muted); }
.credits { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; }
.credits > div { display: contents; }
.credits dt { color: var(--muted); padding-top: 3px; }
.credits dd { margin: 0; }
@media (max-width: 760px) {
  .fest { grid-template-columns: 1fr; }
  .credits { grid-template-columns: 1fr; gap: 2px; }
  .credits dd { margin-bottom: 10px; }
}

/* video player */
.video { aspect-ratio: 16 / 9; }
.proj-cover .frame.video { aspect-ratio: 16 / 9; max-height: none; }
.proj-cover .video img { max-height: none; object-fit: cover; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px;
  color: #f2f0ea; text-decoration: none; font: 600 1rem/1 var(--body);
  background: linear-gradient(transparent, rgb(0 0 0 / .35));
}
.play span { width: 84px; height: 84px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; transition: transform .2s ease; }
.play span::before { content: ""; border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent #fff; margin-left: 6px; }
.play:hover span { transform: scale(1.06); }
.video video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form .btn:disabled { opacity: .7; cursor: default; transform: none; }
.about-imgs .frame.frame-about { aspect-ratio: 3 / 2; }

/* photography mosaic */
#photo-filters { margin-bottom: 24px; }
.mosaic { columns: 4 240px; column-gap: 12px; }
.m-item { display: block; position: relative; margin-bottom: 12px; break-inside: avoid; overflow: hidden; background: var(--surface); min-height: 120px; }
.m-item img { width: 100%; height: auto; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .3s ease; }
.m-item:hover img { transform: scale(1.03); }
.m-label { position: absolute; left: 8px; bottom: 8px; padding: 3px 7px; font-size: 0.6875rem; background: rgb(0 0 0 / .6); color: #f2f0ea; opacity: 0; transition: opacity .2s ease; }
.m-item:hover .m-label, .m-item:focus-visible .m-label { opacity: 1; }
@media (max-width: 600px) { .mosaic { columns: 2; column-gap: 8px; } .m-item { margin-bottom: 8px; } }
.podcast-embed { display: block; width: 100%; max-width: 760px; height: 175px; border: 0; border-radius: 10px; overflow: hidden; background: var(--surface); }

/* header badge: panther with "Drew Koch" over the top and "Panther City Creative" around the bottom */
.mark { font-size: 1.25rem; letter-spacing: 0.02em; white-space: nowrap; }
.mark-badge { width: 96px; height: 96px; flex: none; margin-left: -6px; }
.badge-text { font-family: var(--display); font-size: 10.5px; letter-spacing: 0.06em; fill: var(--fg); text-transform: uppercase; }

/* type sizing for the wide all-caps brand face */
h1, h2, h3 { line-height: 1.02; letter-spacing: 0.01em; }
h1 { font-size: clamp(1.8rem, 3.8vw, 4.25rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.75rem); }
h3 { font-size: clamp(1.1rem, 1.7vw, 1.45rem); }
.site-head nav a, .btn, .chip { font-family: var(--display); font-weight: 400; letter-spacing: 0.04em; }
.mono { font-size: 0.8125rem; letter-spacing: 0.08em; }
.clients li { font-size: clamp(1.05rem, 2vw, 1.7rem); }
.pager a { font-size: clamp(1.15rem, 2.2vw, 1.9rem); }
.foot-big { font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1; }

/* Spacing system: every gap comes from one 8px-based scale, so related things sit close and sections breathe evenly.
   s1 8 · s2 16 · s3 24 · s4 32 · s5 48 · s6 64–96 (page tops) · s7 80–144 (between sections) */
:root {
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px;
  --s6: clamp(48px, 6.5vw, 96px);
  --s7: clamp(80px, 10vw, 144px);
}
.head-row { padding-block: var(--s1); }

/* home */
.hero { padding-block: var(--s6) 0; gap: var(--s5); align-items: center; }
.hero-copy { gap: var(--s3); }
.hero .cta-row { margin-top: var(--s1); }
.block { padding-block: var(--s7) 0; }
.sec-head { margin-bottom: var(--s4); gap: var(--s2) var(--s3); }
.featured { gap: var(--s5) var(--s4); }
.grid { gap: var(--s5) var(--s4); }
.card { gap: var(--s2); }
.card-text { gap: var(--s1); }
.card-text h3 { margin-block: 2px; }
.card-sum { font-size: 0.9375rem; line-height: 1.55; }
.clients ul { margin-top: var(--s3); gap: var(--s2) 0; }

/* project pages */
.proj-head { gap: var(--s2); padding-block: var(--s6) var(--s5); }
.proj-head .meta { margin-top: var(--s1); }
.meta { gap: var(--s1) var(--s5); }
.meta dt { margin-bottom: 2px; }
.proj-body { padding-block: var(--s5) 0; gap: var(--s4); }
.fest { gap: var(--s5); }
.fest-info { gap: var(--s3); }
.laurels { margin-bottom: var(--s4); }
.laurels li { padding-block: var(--s2); gap: 4px var(--s2); }
.credits { gap: var(--s2) var(--s4); }
.pager { padding-block: var(--s7) 0; gap: var(--s4); }

/* about and contact */
.about, .contact { padding-block: var(--s6) 0; gap: var(--s5) clamp(32px, 6vw, 96px); }
.about-copy, .contact > div { gap: var(--s3); }
.about-copy .btn { margin-top: var(--s1); }
.facts { gap: var(--s2) var(--s4); align-items: baseline; }
.form { gap: var(--s1); padding: var(--s4); }
.form label { font-size: 0.8125rem; margin-top: var(--s2); }
.form label:first-of-type { margin-top: 0; }
.form .btn { margin-top: var(--s3); }

/* footer */
.site-foot { margin-top: var(--s7); }
.foot-grid { padding-block: var(--s6) var(--s4); gap: var(--s4); }
.foot-contact { margin-top: var(--s3); line-height: 1.8; }
.foot-meta { padding-top: var(--s3); }
/* the contact page already is the call to action, so its footer skips the big "let's make something" */
.page-contact .foot-grid > div:first-child { display: none; }
.page-contact .foot-social { justify-self: start; }

@media (max-width: 760px) {
  .head-row { flex-wrap: nowrap; padding-block: 6px; }
  .mark-badge { width: 72px; height: 72px; }
  .site-head nav { gap: 14px; flex-wrap: nowrap; }
  .site-head nav a { font-size: 0.72rem; white-space: nowrap; }
  .hero { gap: var(--s4); }
  .featured, .grid { gap: var(--s5); }
  .meta { gap: var(--s2) var(--s4); }
  .form { padding: var(--s3); }
}

/* hero sits over Drew's Big Bend landscape, darkened on the text side so the copy stays readable */
.hero-band { position: relative; isolation: isolate; overflow: hidden; color: #f5eee2; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; z-index: -2; }
.hero-band::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(28 24 20 / .74) 0%, rgb(28 24 20 / .5) 42%, rgb(28 24 20 / .1) 100%); }
.hero-band .hero { padding-block: var(--s6); }
.hero-band .lede { color: #f5eee2; }
.hero-band h1 .amp { color: #e8794f; }
.hero-band .btn-ghost { color: #f5eee2; border-color: rgb(245 238 226 / .55); }
.hero-band .btn-ghost:hover { border-color: #f5eee2; }
.hero-band .hero-img { box-shadow: 0 24px 60px rgb(0 0 0 / .35); }
@media (max-width: 760px) {
  .hero-band::before { background: linear-gradient(180deg, rgb(28 24 20 / .8) 0%, rgb(28 24 20 / .6) 55%, rgb(28 24 20 / .3) 100%); }
}

/* hero without the portrait: one column of copy over the landscape */
.hero-band .hero { grid-template-columns: 1fr; min-height: min(78vh, 760px); align-content: center; }
.hero-band .hero-copy { max-width: 780px; }
.hero-band h1 { font-size: clamp(1.9rem, 4.6vw, 4.5rem); }
.hero-band .lede { max-width: 44ch; }
.hero-band::before { background: linear-gradient(90deg, rgb(28 24 20 / .76) 0%, rgb(28 24 20 / .55) 45%, rgb(28 24 20 / .08) 80%); }
@media (max-width: 760px) {
  .hero-band .hero { min-height: 72vh; }
  .hero-band::before { background: linear-gradient(180deg, rgb(28 24 20 / .7) 0%, rgb(28 24 20 / .55) 60%, rgb(28 24 20 / .35) 100%); }
  .hero-bg { object-position: 62% 60%; }
}
.about-imgs .frame.frame-portrait { aspect-ratio: 4 / 5; }
/* tighter rhythm (Drew asked for less space): smaller section gaps, and the first section hugs the hero */
:root { --s7: clamp(64px, 7.5vw, 104px); }
.hero-band + .block { padding-top: clamp(40px, 5vw, 64px); }
.sec-head { margin-bottom: var(--s3); }
/* My work: Love You Well full width on top, the rest in an even three-up grid */
.featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.featured .card, .featured .card:nth-child(4) { grid-column: auto; grid-row: auto; }
.featured .card-big { grid-column: 1 / -1; grid-row: auto; }
.featured .card-big .frame { aspect-ratio: 21 / 9; }
.featured .card:nth-child(4) .frame { aspect-ratio: 16 / 9; }
.featured .card-big .card-sum { max-width: 60ch; }
@media (max-width: 1000px) { .featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .featured { grid-template-columns: 1fr; }
  .featured .card-big .frame { aspect-ratio: 16 / 9; }
}

/* square-art projects (Exposed): art beside the story, buttons and player */
.proj-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5); align-items: start; }
.proj-art { margin: 0; }
.split-copy { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.split-copy .prose { font-size: 1.1875rem; }
.listen { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line); }
.listen h2 { font-size: clamp(1.1rem, 1.7vw, 1.45rem); }
.listen .podcast-embed { max-width: none; }
.btn { white-space: nowrap; }
@media (max-width: 760px) {
  .proj-split { grid-template-columns: 1fr; gap: var(--s4); }
  .btn { font-size: 0.875rem; padding: 0 18px; }
}
@media (max-width: 420px) { .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; } }
@media (max-width: 360px) { .mark-badge { width: 60px; height: 60px; } .site-head nav { gap: 10px; } .site-head nav a { font-size: 0.64rem; } }
@media (max-width: 380px) { h1, .hero-band h1 { font-size: 1.5rem; } }
@media (max-width: 420px) { .pager { grid-template-columns: 1fr; } .pager .next { text-align: left; } }

/* circular portrait of Drew on the right of the hero */
.hero-band .hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
.hero-circle { margin: 0; justify-self: end; width: min(100%, 420px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 5px solid #f5eee2; box-shadow: 0 24px 60px rgb(0 0 0 / .35); }
.hero-circle img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .hero-band .hero { grid-template-columns: 1fr; }
  .hero-circle { order: -1; justify-self: start; width: 180px; border-width: 4px; }
}

/* badge v2: framed seal, name leads, tagline smaller in rust, stars mark the breaks */
.badge-ring { fill: none; stroke: var(--fg); stroke-width: 1.2; }
.badge-name { font-family: var(--display); font-weight: 400; font-size: 12px; letter-spacing: 0.1em; fill: var(--fg); text-transform: uppercase; }
.badge-tag { font-family: var(--display); font-weight: 400; font-size: 8.6px; letter-spacing: 0.12em; fill: var(--accent); text-transform: uppercase; }
.badge-stars { fill: var(--accent); }
/* ring matches the stem of the 12px Dreamboat name (stems are ~0.195em) */
.badge-ring { stroke-width: 2.34; }

/* masthead wordmark: Drew's name in Dreamboat (badge retired from the header) */
.mark { font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 2.2vw, 1.75rem); letter-spacing: 0.06em; color: var(--fg); margin: 0; }
.head-row { padding-block: var(--s3); }
@media (max-width: 760px) { .mark { font-size: 1rem; letter-spacing: 0.04em; } }
@media (max-width: 360px) { .mark { font-size: 0.85rem; } }
/* phones: the name and the nav are too wide for one row in Dreamboat, so the nav drops below */
@media (max-width: 600px) {
  .head-row { flex-wrap: wrap; row-gap: var(--s1); padding-block: var(--s2); }
  .head-row .mark { flex-basis: 100%; font-size: 1.25rem; }
  .site-head nav { justify-content: flex-start; gap: var(--s3); }
}

/* phone polish: headline fits the screen, bigger tap targets, contact lines on their own rows */
.hero-copy { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) {
  h1, .hero-band h1 { font-size: min(7vw, 2.6rem); }
  .hero-band .hero { min-height: 0; padding-block: var(--s5) var(--s6); }
  .site-head nav a { display: inline-flex; align-items: center; min-height: 40px; font-size: 0.8rem; }
  .head-row { padding-block: var(--s2) 0; row-gap: 0; }
  .foot-contact a { display: inline-block; padding-block: 6px; }
  .foot-social a { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  .back { display: inline-block; padding-block: 8px; }
  .cta-row .btn { min-height: 48px; }
}
@media (max-width: 420px) { .hero-band .cta-row { display: grid; } .hero-band .cta-row .btn { justify-content: center; } }
@media (max-width: 760px) { dd a, .copy { display: inline-block; padding-block: 8px; } .copy { padding-inline: 12px; } }

/* masthead lockup: panther head, name, and the tagline tracked out to the name's width */
.mark { display: inline-flex; align-items: center; gap: 0.5em; }
.mark-panther { height: 2.1em; width: auto; flex: none; }
.mark-text { display: inline-grid; justify-items: start; row-gap: 0.28em; }
.mark-name { line-height: 1; }
.mark-tag { font-size: 0.42em; line-height: 1; color: var(--accent); letter-spacing: var(--tag-ls, 0.2em); margin-right: calc(-1 * var(--tag-ls, 0.2em)); white-space: nowrap; }
/* 0.1733em on the 0.42em tag spans the 0.06em-tracked name exactly (measured in Dreamboat) */
.mark, .head-row .mark { letter-spacing: 0.06em; }
.mark-tag { --tag-ls: 0.1733em; }

/* optical alignment: Dreamboat letters carry ~0.19em of built-in space on the left,
   so pull every block of Dreamboat text back by that much. Headlines, labels and
   paragraphs then all start on the same edge as the photos above them. */
h1, h2, h3, p.mono, dt.mono, .foot-big { margin-left: -0.19em; }
.clients ul { margin-left: calc(-0.19 * clamp(1.05rem, 2vw, 1.7rem)); }
/* lockup: tagline starts on the D's ink and ends on the H's ink (from the font's side bearings) */
.mark-tag { --tag-ls: 0.1444em; margin-left: 0.2738em; }
/* tighter lockup: panther exactly as tall as the two lines of type (cap top of the name to
   baseline of the tagline, from the font's 0.7em cap height), small even gaps between the parts */
.mark { gap: 0.2em; align-items: flex-start; }
.mark-text { row-gap: 0.05em; }
.mark-panther { height: 1.32em; margin-top: 0.05em; }
/* crown of the head (6/192 down the drawing) sits on the name's cap height, so the ear tips rise above it;
   chin still lands on the tagline baseline */
.mark-panther { height: 1.357em; margin-top: 0.0076em; }
/* phones: bigger, centered portrait above the headline */
@media (max-width: 760px) { .hero-circle { justify-self: center; width: min(72vw, 300px); } }
/* phones: logo and tabs scaled to span the screen, centered.
   The lockup's ink is 10.634em wide (panther to the H's ink); the nav text totals ~19.5em. */
@media (max-width: 600px) {
  .head-row { flex-direction: column; align-items: center; row-gap: var(--s2); padding-block: var(--s3) 0; }
  .head-row .mark { flex-basis: auto; font-size: min(calc((100vw - 2 * var(--gutter)) / 10.634), 2.75rem); margin-right: -0.256em; }
  .site-head nav { width: 100%; justify-content: space-between; gap: 0; font-size: min(calc((100vw - 2 * var(--gutter)) / 24), 1.1rem); margin-inline: -0.151em -0.18em; width: calc(100% + 0.331em); }
  .site-head nav a { font-size: inherit; }
}

/* footer: Drew's Delicate Arch photo behind "Let's make something", darkened on the left for the cream type */
.site-foot { position: relative; isolation: isolate; overflow: hidden; border-top: 0; color: #f5eee2; }
.foot-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; z-index: -2; }
.site-foot::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(28 24 20 / .78) 0%, rgb(28 24 20 / .5) 50%, rgb(28 24 20 / .2) 100%); }
.site-foot .foot-grid { padding-block: clamp(80px, 11vw, 160px) var(--s4); }
.site-foot .foot-big, .site-foot .foot-contact a { color: #f5eee2; }
.site-foot .foot-contact a { text-decoration-color: #e8794f; }
.site-foot .foot-social a { color: #f5eee2; border-color: rgb(245 238 226 / .45); }
.site-foot .foot-social a:hover { border-color: #f5eee2; }
.site-foot .foot-meta { color: rgb(245 238 226 / .75); border-top-color: rgb(245 238 226 / .25); }
@media (max-width: 760px) {
  .foot-bg { object-position: 58% 50%; }
  .site-foot::before { background: linear-gradient(180deg, rgb(28 24 20 / .75) 0%, rgb(28 24 20 / .55) 60%, rgb(28 24 20 / .7) 100%); }
}
.foot-bg { object-position: 62% 32%; }
.site-foot .foot-grid { padding-block: clamp(120px, 16vw, 240px) var(--s4); }
.site-foot::before { background: linear-gradient(90deg, rgb(28 24 20 / .78) 0%, rgb(28 24 20 / .45) 45%, rgb(28 24 20 / .1) 100%); }
@media (max-width: 760px) { .foot-bg { object-position: 50% 40%; } .site-foot::before { background: linear-gradient(180deg, rgb(28 24 20 / .7) 0%, rgb(28 24 20 / .45) 55%, rgb(28 24 20 / .7) 100%); } }