/* hxrtlxy.com — shared styles for index.html and press-kit.html */

:root {
  /* Ink. Every value below meets WCAG AA on --white at the sizes it is used.
     The old #888 / #999 / #aaa / #bbb greys ran from 1.8:1 to 3.4:1. */
  --black:     #0a0a0a;
  --ink:       #2e2e2e;   /* long-form body copy            12.1:1 */
  --ink-soft:  #4a4a4a;   /* secondary body copy             8.4:1 */
  --muted:     #666666;   /* uppercase micro-labels          5.5:1 */
  --faint:     #707070;   /* smallest supporting text        4.7:1 */
  --white:     #fafafa;

  /* Lines. Not text, so contrast rules do not apply. */
  --border:      #e2e2e2;
  --border-soft: #d4d4d4;

  /* Type scale. Was 19 discrete sizes, nine of them between 0.55 and 0.75rem. */
  --fs-xs:   0.6rem;
  --fs-sm:   0.68rem;
  --fs-md:   0.75rem;
  --fs-base: 0.85rem;
  --fs-lg:   0.9375rem;
  --fs-xl:   1.125rem;
  --fs-2xl:  1.35rem;
  --fs-3xl:  1.6rem;

  /* Tracking. Was 11 values doing the work of three. */
  --track-tight: 0.1em;
  --track:       0.16em;
  --track-wide:  0.2em;

  /* Feedback */
  --ok:   #1f5c1f;
  --fail: #7a2222;
}

html { scroll-behavior: smooth; }

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

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--white);
  color: var(--black);
  font-weight: 300;
  overflow-x: hidden;
}

/* ── NAV ─────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2.5rem;
  transition: background 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}

nav.scrolled {
  background: var(--white);
  border-color: var(--border);
}

.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-xl);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.03em;
  color: white;
  transition: color 0.3s;
}

nav.scrolled .nav-logo { color: var(--black); }

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  font-size: var(--fs-sm);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  transition: color 0.3s, opacity 0.2s;
  position: relative;
}

nav.scrolled .nav-links a { color: var(--black); }
.nav-links a:hover { opacity: 0.7; }

/* ── HAMBURGER ───────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 101;
  position: relative;
}

.nav-hamburger-line {
  display: block;
  width: 22px;
  height: 1px;
  background: white;
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s;
}

nav.scrolled .nav-hamburger-line,
nav.menu-open .nav-hamburger-line { background: var(--black); }

nav.menu-open .nav-hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
nav.menu-open .nav-hamburger-line:nth-child(2) { opacity: 0; }
nav.menu-open .nav-hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.25s ease;
}
.nav-links a:hover::after { width: 100%; }

/* ── HERO ─────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;   /* 100vh overflows under mobile browser chrome */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0a0a0a;
}

.hero-bg {
  position: absolute;
  inset: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The hero photo is 2.05:1 and the frame is full-viewport, so a centre crop
     lands on his shoulder. Bias right to hold the face; more so on phones,
     where the viewport is far taller than it is wide. */
  object-position: 68% 15%;
  display: block;
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.45) 0%,
    transparent 28%
  );
  z-index: 1;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.35) 45%,
    rgba(0,0,0,0.08) 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem 4.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.hero-social {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
  flex-shrink: 0;
  animation: heroEnter 0.8s ease-out 0.65s both;
}

.hero-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.4);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.hero-social-link:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.hero-social-arrow {
  font-size: var(--fs-sm);
  animation: nudge 1.4s ease-in-out infinite;
}

.hero-social-link:hover .hero-social-arrow { animation: none; }

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(4px); }
}

@keyframes heroEnter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow {
  font-size: var(--fs-sm);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1rem;
  animation: heroEnter 0.8s ease-out 0.3s both;
}

.hero-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 300;
  line-height: 0.92;
  color: white;
  margin-bottom: 2.5rem;
  animation: heroEnter 0.95s ease-out 0.55s both;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,0.75);
  width: fit-content;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  transition: color 0.2s, border-color 0.2s;
  animation: heroEnter 0.8s ease-out 0.8s both;
}

.hero-cta:hover {
  color: white;
  border-color: white;
}

.work-figure {
  width: min(1100px, calc(100vw - 5rem));
  margin: 3rem 0;
}

.work-figure img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .work-figure { width: 100%; margin: 2rem 0; }
}

/* ── FOCUS ───────────────────────────── */
/* Visible keyboard focus everywhere, without showing a ring on mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
  border-radius: 2px;
}

/* On the dark bands and hero, the ring has to be light to be seen at all. */
.hero a:focus-visible,
.feature-band a:focus-visible,
.page-hero a:focus-visible,
nav:not(.scrolled) a:focus-visible,
nav:not(.scrolled) button:focus-visible {
  outline-color: var(--white);
}

/* ── SECTIONS ─────────────────────────── */
section {
  padding: 6rem 2.5rem;
  border-top: 1px solid var(--border);
}

/* Sections whose whole content is one full-width band: the band supplies its own
   visual edge, so the border is dropped and the label is pulled in close to the
   thing it names. Otherwise five bands in a row read as disconnected slabs. */
.section--band {
  border-top: none;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.section--band + .section--band { padding-top: 3.5rem; }

/* ── SUBPAGES ─────────────────────────── */
/* Full-bleed header image with the title reversed out over it, matching the
   feature bands on the home page. The nav sits on top of it, so it starts
   transparent and only turns solid once the image has scrolled away. */
.page-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--black);
}

.page-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.86) 0%,
    rgba(0,0,0,0.60) 40%,
    rgba(0,0,0,0.22) 72%,
    rgba(0,0,0,0.32) 100%
  );
}

/* Already near-black images need far less scrim, or the projected light in them
   goes grey. */
.page-hero--dark::after {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.62) 0%,
    rgba(0,0,0,0.28) 45%,
    rgba(0,0,0,0.10) 100%
  );
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem 4rem;
}

.subpage section:first-of-type { border-top: none; padding-top: 4.5rem; }

.page-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.6rem, 5.5vw, 4.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--white);
}

.page-title em { font-style: italic; }

@media (max-width: 768px) {
  .page-hero { min-height: 54vh; }
  .page-hero-inner { padding: 0 1.5rem 3rem; }
}

.section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.section-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3.5rem;
}

/* ── ABOUT ────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 5rem;
  align-items: start;
}

.about-photo {
  position: sticky;
  top: 5rem;
}

.about-photo-wrap {
  position: relative;
  overflow: hidden;
}

.about-photo img {
  width: 100%;
  height: auto;   /* without this the html height attribute stretches it */
  display: block;
  filter: grayscale(10%);
}

.about-photo-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2.5rem 1.25rem 1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
  color: white;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.about-photo-wrap:hover .about-photo-caption { opacity: 1; }

.about-photo-caption-text {
  font-size: var(--fs-xs);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}

.about-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 2rem;
}

.about-headline em {
  font-style: italic;
  font-weight: 300;
}

.about-bio p {
  font-size: var(--fs-lg);
  line-height: 1.85;
  color: var(--ink-soft);
}

.about-bio p + p { margin-top: 1.25rem; }

/* ── FEATURED IN ──────────────────────── */
.featured-in {
  padding: 4rem 2.5rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.featured-in-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.featured-in-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 2rem;
  display: block;
}

.featured-in-tier1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 2.5rem;
}

.featured-in-tier1-item {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 1.5vw, 1.65rem);
  font-weight: 400;
  color: var(--black);
  letter-spacing: 0.01em;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  transition: opacity 0.2s;
}

.featured-in-tier1-item:hover { opacity: 0.45; }

/* Rule broken by an ampersand: the two tiers of credits read as one list. */
.featured-in-rule {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border: none;
  margin: 0 0 2rem;
}

.featured-in-rule::before,
.featured-in-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.featured-in-amp {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-3xl);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--muted);
}

.featured-in-names {
  font-size: var(--fs-sm);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.9;
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
  user-select: none;
  -webkit-user-select: none;
}

.featured-in-item {
  transition: color 0.2s;
  cursor: default;
}

.featured-in-item:hover { color: var(--ink-soft); }

.featured-blur-wrap { position: relative; }

/* ── STATEMENT ────────────────────────── */
.statement {
  padding: 9rem 2.5rem;
  border-bottom: 1px solid var(--border);
}

.statement-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.statement-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.75rem, 5.5vw, 5rem);
  font-weight: 300;
  line-height: 1.12;
  color: var(--black);
}

.statement-text em { font-style: italic; }

.statement-aside {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

.statement-aside p {
  font-size: var(--fs-md);
  line-height: 1.8;
  color: var(--faint);
  max-width: 380px;
  text-align: right;
}

.tag-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
}

.tag-link {
  display: inline-block;
  font-size: var(--fs-sm);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  border: 1px solid var(--border-soft);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  transition: all 0.18s;
}

.tag-link:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

/* ── PRESS KIT ───────────────────────── */
.presskit-intro {
  font-size: var(--fs-lg);
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 620px;
  margin-bottom: 3.5rem;
}

.presskit-block {
  border-top: 1px solid var(--border);
  padding: 2rem 0;
}

.presskit-block:last-of-type { border-bottom: 1px solid var(--border); }

.presskit-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.presskit-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
}

.presskit-copy {
  font-size: var(--fs-xs);
  letter-spacing: var(--track);
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  color: var(--black);
  font-family: inherit;
  transition: all 0.18s;
  white-space: nowrap;
}

.presskit-copy:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.presskit-copy[data-copied="true"] {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.presskit-bio {
  font-size: var(--fs-lg);
  line-height: 1.85;
  color: var(--ink);
  max-width: 720px;
}

.presskit-facts {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0.6rem 2rem;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--ink);
  max-width: 720px;
}

.presskit-facts dt {
  font-size: var(--fs-xs);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.25rem;
}

.presskit-assets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.presskit-asset { text-decoration: none; color: var(--black); display: block; }

.presskit-asset img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  filter: grayscale(20%);
  transition: filter 0.3s;
}

.presskit-asset:hover img { filter: grayscale(0%); }

.presskit-asset-name {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.7rem;
  display: block;
}

@media (max-width: 700px) {
  .presskit-facts { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .presskit-facts dd { margin-bottom: 0.9rem; }
  .presskit-assets { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .presskit-head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ── LATEST BYLINES ──────────────────── */
/* Hidden until the feed returns something; never shows an empty shell. */
#latest[hidden] { display: none; }

.bylines-list {
  list-style: none;
  border-top: 1px solid var(--border);
}

.bylines-item { border-bottom: 1px solid var(--border); }

.bylines-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: baseline;
  padding: 1.4rem 0;
  text-decoration: none;
  color: var(--black);
  transition: opacity 0.2s;
}

.bylines-link:hover { opacity: 0.55; }

.bylines-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1.3;
}

.bylines-date {
  font-size: var(--fs-xs);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.bylines-more {
  display: inline-block;
  margin-top: 2rem;
  font-size: var(--fs-sm);
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  border-bottom: 1px solid var(--black);
  padding-bottom: 0.2rem;
  transition: opacity 0.2s;
}

.bylines-more:hover { opacity: 0.6; }

@media (max-width: 600px) {
  .bylines-link { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ── FREELANCE ────────────────────────── */
.freelance-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: center;
}

.freelance-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.75rem, 4.5vw, 4.25rem);
  font-weight: 300;
  line-height: 1.05;
}

.freelance-headline em { font-style: italic; }

.freelance-body {
  font-size: var(--fs-lg);
  line-height: 1.8;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}

.freelance-clients {
  margin-bottom: 2rem;
}

.freelance-clients-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.freelance-clients-list {
  font-size: var(--fs-base);
  color: var(--ink-soft);
  line-height: 1.8;
}

.services {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.service {
  font-size: var(--fs-sm);
  letter-spacing: var(--track);
  text-transform: uppercase;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--black);
}

.btn-primary {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  text-decoration: none;
  padding: 0.85rem 2.25rem;
  font-size: var(--fs-sm);
  letter-spacing: var(--track);
  text-transform: uppercase;
  border-radius: 2px;
  transition: opacity 0.2s;
}

.btn-primary:hover { opacity: 0.65; }

/* ── FEATURE BAND ────────────────────── */
/* Full-bleed image band with the copy reversed out in white. Used by the
   Audio & podcasting and In the media blocks. The image is a real <img>
   rather than a CSS background so it stays crawlable and indexable. */
.feature-band {
  position: relative;
  margin: 0 -2.5rem 5rem;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--black);
}

.feature-band:last-child { margin-bottom: 0; }

/* The first band in the run gets more height as an entry point. Alternating the
   copy left/right was the other option, but every one of these photographs
   places the subject centre-right, so the text would collide with the face. */
#writing .feature-band { min-height: 680px; }

.feature-band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* Scrim: without it, white type sits on pale wood and mid-greys. */
.feature-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.65) 38%,
    rgba(0,0,0,0.25) 70%,
    rgba(0,0,0,0.15) 100%
  );
}

.feature-band-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 3.5rem 2.5rem;
}

.feature-band h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.75rem, 4.5vw, 4.25rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 1.75rem;
}

.feature-band h2 em { font-style: italic; }

.feature-band-body {
  font-size: var(--fs-lg);
  line-height: 1.8;
  color: rgba(255,255,255,0.82);
  max-width: 640px;
}

.feature-band-body em { font-style: italic; }

@media (max-width: 768px) {
  .feature-band { margin: 0 -1.5rem 3.5rem; min-height: 520px; }
  .feature-band-inner { padding: 2.5rem 1.5rem; }
}

.work-body {
  max-width: 720px;
}

.work-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: 1.2;
  margin: 3rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.work-body > .work-sub:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.work-body p {
  font-size: var(--fs-lg);
  line-height: 1.85;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.work-body p:last-of-type { margin-bottom: 0; }

.podcast-embed {
  margin: 3rem 0 0;
  max-width: 660px;
}

.podcast-embed iframe {
  width: 100%;
  border: none;
  border-radius: 12px;
  background: #f0f0f0;
}

.work-back {
  display: inline-block;
  margin-top: 4rem;
  font-size: var(--fs-sm);
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  border-bottom: 1px solid var(--black);
  padding-bottom: 0.2rem;
  transition: opacity 0.2s;
}

.work-back:hover { opacity: 0.6; }

/* Links out of a feature band, styled for a dark background. */
.feature-band-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}

.feature-band-links a {
  font-size: var(--fs-sm);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.4);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.feature-band-links a:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.feature-band-body p + p { margin-top: 1.25rem; }

/* ── CONTACT AVATAR ──────────────────── */
.contact-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  margin-bottom: 1.5rem;
}

/* ── CONNECT ─────────────────────────── */
.connect-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}

.connect-group-heading {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.connect-accounts { list-style: none; }

.connect-account {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  color: var(--black);
  transition: opacity 0.2s;
}

.connect-account:hover { opacity: 0.45; }

.connect-account-name {
  font-size: var(--fs-base);
  font-weight: 400;
  white-space: nowrap;
}

.connect-account-handle {
  font-size: var(--fs-xs);
  color: var(--faint);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connect-account-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.connect-account-badge svg {
  width: 13px;
  height: 13px;
  display: block;
}

.connect-account-badge-tooltip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--black);
  color: white;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  white-space: nowrap;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  z-index: 10;
}

.connect-account-badge-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--black);
}

.connect-account-badge:hover .connect-account-badge-tooltip { opacity: 1; }

.connect-account-badge svg {
  width: 18px;
  height: 18px;
}
.arrow { font-size: var(--fs-sm); color: var(--muted); }

/* ── CONTACT ──────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem;
  align-items: start;
}

.contact-info h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.25rem, 3.5vw, 3rem);
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 1.75rem;
}

.contact-info h3 em { font-style: italic; }

.contact-info p {
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}

.contact-info a {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-group { margin-bottom: 1.25rem; }

.form-group label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 0;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  font-size: var(--fs-base);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  color: var(--black);
  outline: none;
  border-radius: 0;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}

.form-group input:focus,
.form-group textarea:focus { border-color: var(--black); }

.form-group textarea { height: 140px; resize: none; }

.btn-submit {
  margin-top: 1.75rem;
  background: var(--black);
  color: var(--white);
  border: none;
  padding: 0.875rem 2.5rem;
  font-size: var(--fs-sm);
  letter-spacing: var(--track);
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  border-radius: 2px;
  transition: opacity 0.2s;
}

.btn-submit:hover { opacity: 0.65; }

.form-success, .form-error {
  display: none;
  padding: 1rem 0;
  font-size: var(--fs-base);
  line-height: 1.7;
}
.form-success { color: var(--ok); }
.form-error   { color: var(--fail); }

/* ── FOOTER ───────────────────────────── */
footer {
  padding: 2rem 2.5rem;
  border-top: 1px solid var(--border);
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.footer-copy { font-size: var(--fs-sm); color: var(--muted); }

.footer-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.footer-links a {
  font-size: var(--fs-xs);
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  opacity: 0.6;
  transition: opacity 0.2s;
}

.footer-links a:hover { opacity: 1; }

.footer-legal {
  font-size: var(--fs-sm);
  color: var(--faint);
  line-height: 1.6;
}

/* ── SCROLL FADE-UP ──────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Only hide content when JS is available to reveal it again.
   Without the .js class (no JS, or script blocked) everything stays visible. */
.js .fade-up { opacity: 0; }
.js .fade-up.visible { animation: fadeUp 0.75s ease-out forwards; }

/* ── TOUCH DEVICES ───────────────────── */
/* Hover-only captions are unreachable on touch, so show them permanently. */
@media (hover: none) {
  .about-photo-caption,
  .about-photo-caption { opacity: 1; }
}

/* ── REDUCED MOTION ──────────────────── */
@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;
    scroll-behavior: auto !important;
  }

  .js .fade-up { opacity: 1; }
  .hero-eyebrow, .hero-name, .hero-cta, .hero-social { animation: none; }
}

/* ── RESPONSIVE ───────────────────────── */

@media (max-width: 1200px) {
  .nav-links { gap: 1.75rem; }
  .nav-links a { font-size: var(--fs-sm); }
}

@media (max-width: 1024px) {
  .nav-links { gap: 1.25rem; }
  .nav-links a { font-size: var(--fs-xs); letter-spacing: var(--track-tight); }
  .about-grid { grid-template-columns: 280px 1fr; gap: 3rem; }
}

@media (max-width: 900px) {
  .freelance-grid { grid-template-columns: 1fr; gap: 2rem; }
  .statement { padding: 6rem 2.5rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-photo { position: static; }
}

@media (max-width: 768px) {
  nav { padding: 1rem 1.5rem; }
  .nav-hamburger { display: flex; }

  .nav-links {
    display: flex !important;
    position: fixed;
    inset: 0;
    background: var(--white);
    z-index: 100;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    list-style: none;
  }

  .nav-links.open {
    opacity: 1;
    pointer-events: all;
  }

  .nav-links a {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 2rem !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    color: var(--black) !important;
    opacity: 1 !important;
  }

  .nav-links a::after { display: none; }

  .hero-content { flex-direction: column; gap: 2rem; padding: 0 1.5rem 3.5rem; }
  .hero-social { align-items: flex-start; }
  .hero-name { font-size: clamp(3.5rem, 15vw, 6rem); }
  .hero-bg img { object-position: 80% 15%; }

  section { padding: 4rem 1.5rem; }

  .statement { padding: 5rem 1.5rem; }

  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-photo { position: static; }

  .featured-in { padding: 3rem 1.5rem; }
  .featured-in-tier1 { flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.25rem; }
  .featured-in-tier1-item { font-size: var(--fs-xl); }

  .connect-grid { grid-template-columns: 1fr; gap: 2rem; }

  .footer-top { flex-direction: column; gap: 1rem; align-items: flex-start; }
}