/* ==========================================================================
   Page & component styles (home, work, project, journey, contact)
   ========================================================================== */

/* ============ HERO ============ */
.hero { position: relative; padding-top: var(--space-5); padding-bottom: var(--space-6); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.hero-copy { max-width: 34rem; }
.hero-eyebrow { margin-bottom: 1.5rem; }
.hero-title {
  font-size: var(--fs-display);
  letter-spacing: -0.035em;
  margin-bottom: 1.75rem;
}
.hero-title .serif { font-style: italic; }
.hero-lead { margin-bottom: 2.5rem; max-width: 40ch; }

.hero-media { position: relative; }
.hero-portrait-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--soft-tan);
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4 / 5;
}
.hero-portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* Collage marks behind portrait */
.hero-mark {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.hero-mark--tan {
  width: 62%; height: 78%;
  top: -4%; left: -6%;
  background: var(--soft-tan);
  border-radius: var(--radius);
}
.hero-mark--rust {
  width: 20%; height: 34%;
  bottom: 6%; right: -4%;
  background: linear-gradient(160deg, var(--accent-rust), var(--accent-rust-dark));
  opacity: 0.9;
  border-radius: var(--radius);
}
.hero-script {
  position: absolute;
  top: 8%; left: 4%;
  width: 34%;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.8rem, 0.5rem + 0.7vw, 1.05rem);
  line-height: 1.5;
  color: var(--muted-ink);
  opacity: 0.55;
  transform: rotate(-4deg);
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-copy { max-width: none; order: 1; }
  .hero-media { order: 2; max-width: 26rem; }
  .hero-script { display: none; }
}

/* ============ COLLABORATE CTA (prominent rust band) ============ */
.collab-cta { background: var(--accent-rust); color: var(--paper); text-align: center; padding-block: var(--space-6); }
.collab-cta h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); color: var(--paper); margin-bottom: 1rem; }
.collab-cta p { color: rgba(251, 248, 242, 0.92); font-size: var(--fs-lead); max-width: 48ch; margin: 0 auto 2rem; }
.collab-btn { background: var(--night); color: var(--paper); border-color: transparent; }
.collab-btn:hover, .collab-btn:focus-visible { background: #000; color: var(--paper); }

/* ============ FEATURED WORK (dark) ============ */
.featured {
  background: var(--night);
  color: var(--night-text);
  padding-block: var(--space-6);
  position: relative;
}
.featured .eyebrow { color: var(--accent-rust); }
.featured-head { margin-bottom: var(--space-4); }
.featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
}
.feature { display: flex; flex-direction: column; gap: 1.5rem; }
.feature-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #16150F;
  border: 1px solid var(--night-line);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.feature-shot { aspect-ratio: 16 / 10; overflow: hidden; }
.feature-shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  filter: blur(1.4px) saturate(0.92) brightness(0.92);
  transform: scale(1.03);
  transition: filter var(--transition), transform var(--transition);
}
/* Sharpen + lift on hover/focus (pointer devices only) */
@media (hover: hover) {
  .feature-card:hover, .feature-card:focus-visible,
  .feature:focus-within .feature-card {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lift);
    border-color: var(--accent-rust);
  }
  .feature-card:hover .feature-shot img,
  .feature-card:focus-visible .feature-shot img,
  .feature:focus-within .feature-shot img {
    filter: none;
    transform: scale(1);
  }
}
/* Touch / no-hover: always sharp, no info hidden */
@media (hover: none) {
  .feature-shot img { filter: none; transform: none; }
}
.feature-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--night-text);
  background: rgba(198, 90, 46, 0.92);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
}
.feature-body h3 { font-size: var(--fs-h3); margin-bottom: 0.75rem; }
.feature-body h3 a { color: var(--night-text); transition: color var(--transition); }
.feature-body h3 a .title-arrow { display: inline-block; transition: transform var(--transition); color: var(--accent-rust); }
.feature-card:hover ~ .feature-body h3 a .title-arrow,
.feature:hover .feature-body h3 a .title-arrow,
.feature:focus-within .feature-body h3 a .title-arrow { transform: translateX(4px); }
.feature-desc { color: var(--night-muted); margin-bottom: 1.25rem; max-width: 40ch; }
.feature-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.try-live { color: var(--accent-rust); }
.featured-foot { margin-top: var(--space-4); text-align: center; }
.featured-foot .link-arrow { color: var(--accent-rust); }

@media (max-width: 780px) {
  .featured-grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* ============ GRAB YOUR Y GATEWAY (logo right, height tracks the text) ============ */
.gyy-gateway { position: relative; background: var(--paper); padding-block: var(--space-5); }
.gyy-gateway-inner { display: flex; align-items: stretch; gap: clamp(1.5rem, 4vw, 3.5rem); }
.gyy-gateway-copy { flex: 1 1 auto; min-width: 0; max-width: 62ch; display: flex; flex-direction: column; justify-content: center; }
.gyy-gateway-copy .eyebrow { display: block; margin-bottom: 0.75rem; }
.gyy-gateway-copy h2 { font-size: var(--fs-h3); margin-bottom: 1.1rem; }
/* Logo container stretches to the text block's height; the square logo scales
   to that height and stays proportional as the window resizes. */
.gyy-gateway-logo { flex: 0 0 auto; align-self: stretch; background: #0D0D0D; border-radius: 12px; padding: 12px; display: grid; place-items: center; box-shadow: var(--shadow-soft); }
.gyy-gateway-logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 640px) {
  .gyy-gateway-inner { flex-direction: column; align-items: flex-start; }
  .gyy-gateway-logo { align-self: flex-start; width: clamp(110px, 34vw, 150px); aspect-ratio: 1; }
  .gyy-gateway-logo img { height: auto; width: 100%; }
}

/* ============ GRAB YOUR Y GATEWAY ============ */
.gyy {
  position: relative;
  background: var(--paper);
  overflow: hidden;
}
.gyy-grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  align-items: stretch;
  gap: 0;
}
.gyy-copy { padding-block: var(--space-6); padding-right: clamp(1.5rem, 4vw, 4rem); }
.gyy-eyebrow { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.gyy-mark { width: 1.6rem; height: 1.6rem; color: var(--accent-rust); }
.gyy h2 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 400; margin-bottom: 1.5rem; max-width: 16ch; }
.gyy p { font-size: var(--fs-lead); color: var(--muted-ink); margin-bottom: 2rem; max-width: 40ch; }
.gyy-media { position: relative; min-height: 420px; }
.gyy-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
}
.gyy-media::after {
  content: "";
  position: absolute; left: -1px; top: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, var(--paper), transparent);
}
.gyy-brush {
  position: absolute;
  bottom: 8%; left: -10px;
  width: 45%; height: 14px;
  background: var(--accent-rust);
  opacity: 0.85;
  transform: rotate(-1.5deg);
  z-index: 2;
  border-radius: 2px;
}
@media (max-width: 820px) {
  .gyy-grid { grid-template-columns: 1fr; }
  .gyy-copy { padding-bottom: var(--space-4); padding-right: 0; }
  .gyy-media { min-height: 300px; }
  .gyy-media::after { display: none; }
}

/* ============ JOURNEY PREVIEW ============ */
.jprev { background: var(--canvas); }
.jprev-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.jprev h2 { font-size: var(--fs-h2); margin-bottom: 1.5rem; max-width: 14ch; }
.jprev p { color: var(--muted-ink); margin-bottom: 2rem; }
.jprev-path {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  font-family: var(--serif); font-size: 1.35rem; color: var(--ink);
  padding: 1.75rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
}
.jprev-path .sep { color: var(--accent-rust); font-family: var(--sans); }
@media (max-width: 820px) {
  .jprev-inner { grid-template-columns: 1fr; }
}

/* ============ CLOSING INVITATION ============ */
.closing {
  background: var(--night);
  color: var(--night-text);
  text-align: center;
  padding-block: var(--space-7);
  position: relative;
}
.closing h2 { font-family: var(--serif); font-size: clamp(2.25rem, 1.4rem + 4vw, 4rem); font-weight: 400; margin-bottom: 1.5rem; }
.closing p { color: var(--night-muted); font-size: var(--fs-lead); max-width: 46ch; margin: 0 auto 2.5rem; }

/* ============ PAGE HERO (interior pages) ============ */
.page-hero { padding-top: var(--space-5); padding-bottom: var(--space-4); }
.page-hero h1 { font-size: var(--fs-h1); margin-bottom: 1.25rem; }
.page-hero .lead { max-width: 52ch; }

/* ============ WORK PAGE ============ */
.work-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
}
.work-row:nth-child(even) .work-shot { order: 2; }
.work-shot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--night);
  box-shadow: var(--shadow-soft);
  aspect-ratio: 16 / 10;
}
.work-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform var(--transition), filter var(--transition); }
@media (hover: hover) {
  .work-row a.work-shot:hover img { transform: scale(1.02); }
}
.work-meta .status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  color: var(--accent-rust); margin-bottom: 1rem;
}
.status .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent-rust); }
.status.dev { color: var(--muted-ink); }
.status.dev .dot { background: var(--muted-ink); }
.work-meta h2 { font-size: var(--fs-h3); margin-bottom: 1rem; }
.work-meta .problem { color: var(--muted-ink); margin-bottom: 0.5rem; }
.work-meta .summary { margin-bottom: 1.5rem; }
.work-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
@media (max-width: 780px) {
  .work-row { grid-template-columns: 1fr; gap: 1.75rem; }
  .work-row:nth-child(even) .work-shot { order: 0; }
}

/* Explorations */
.explorations { background: var(--paper); }
.explore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem 2.5rem; margin-top: 2rem; }
.explore-item { padding-top: 1.25rem; border-top: 2px solid var(--soft-tan); }
.explore-item h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.explore-item p { font-size: var(--fs-small); color: var(--muted-ink); }

/* Work-with-me bridge */
.bridge { text-align: center; }
.bridge h2 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 400; margin-bottom: 1.25rem; max-width: 20ch; margin-inline: auto; }
.bridge p { color: var(--muted-ink); margin: 0 auto 2rem; }

/* ============ PROJECT PAGE ============ */
.proj-back { padding-top: var(--space-4); }
.proj-hero { padding-top: 1.5rem; padding-bottom: var(--space-4); }
.proj-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.proj-status { margin-bottom: 1.25rem; }
.proj-hero h1 { font-size: var(--fs-h1); margin-bottom: 1.25rem; }
.proj-summary { font-size: var(--fs-lead); color: var(--muted-ink); margin-bottom: 2rem; }
.proj-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.proj-shot { border-radius: var(--radius-lg); overflow: hidden; background: var(--night); box-shadow: var(--shadow-soft); aspect-ratio: 16/10; }
.proj-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
@media (max-width: 820px) { .proj-hero-grid { grid-template-columns: 1fr; } }

.proj-body { display: grid; grid-template-columns: 1fr 300px; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.proj-body--solo { grid-template-columns: minmax(0, 760px); }
.proj-main { display: grid; gap: var(--space-4); }
.proj-block h2 {
  font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-rust); font-weight: 600; margin-bottom: 1rem;
}
.proj-block .noticed { font-family: var(--serif); font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); font-weight: 400; line-height: 1.3; color: var(--ink); max-width: 24ch; }
.proj-block p { color: var(--muted-ink); }
.proj-block p + p { margin-top: 1rem; }
.proj-block ol, .proj-block ul { color: var(--muted-ink); padding-left: 1.2rem; display: grid; gap: 0.6rem; }

.proj-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.5rem; }
.aside-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; }
.aside-card h3 { font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-ink); margin-bottom: 1rem; font-weight: 600; }
.aside-card ul { list-style: none; padding: 0; display: grid; gap: 0.65rem; }
.aside-card li { font-size: var(--fs-small); display: flex; gap: 0.6rem; align-items: baseline; }
.aside-card li::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent-rust); flex: none; transform: translateY(2px); }
@media (max-width: 820px) {
  .proj-body { grid-template-columns: 1fr; }
  .proj-aside { position: static; }
}
.proj-next { border-top: 1px solid var(--line); }
.proj-next a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; }
.proj-next .next-label { font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-ink); font-weight: 600; }
.proj-next .next-title { font-family: var(--serif); font-size: var(--fs-h3); transition: color var(--transition); }
.proj-next a:hover .next-title, .proj-next a:focus-visible .next-title { color: var(--accent-rust); }

/* ============ JOURNEY TIMELINE ============ */
.journey-intro { padding-top: var(--space-5); padding-bottom: var(--space-3); }
.journey-intro h1 { font-size: var(--fs-h1); margin-bottom: 1.25rem; }
.scroll-cue { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); font-weight: 600; color: var(--accent-rust); margin-top: 1.5rem; }
.scroll-cue .arrow { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%,100%{transform:translateX(0);} 50%{transform:translateX(5px);} }
@media (prefers-reduced-motion: reduce) { .scroll-cue .arrow { animation: none; } }

.timeline-wrap { position: relative; padding-bottom: var(--space-5); }
.timeline-controls {
  display: flex; align-items: center; gap: 1.25rem;
  max-width: var(--container-wide); margin: 0 auto 1.5rem;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}
.tl-progress { flex: 1; height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; }
.tl-progress-bar { height: 100%; width: 15%; background: var(--accent-rust); border-radius: 999px; transition: width 120ms linear; }
.tl-arrows { display: flex; gap: 0.5rem; }
.tl-arrow {
  width: 44px; height: 44px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink);
  display: grid; place-items: center;
  transition: border-color var(--transition), background var(--transition), opacity var(--transition);
}
.tl-arrow:hover:not(:disabled) { border-color: var(--ink); }
.tl-arrow:disabled { opacity: 0.35; cursor: default; }

.timeline {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0.5rem clamp(1.25rem, 5vw, 3rem) 2rem;
  scrollbar-width: none;
  cursor: grab;
  scroll-behavior: smooth;
}
.timeline::-webkit-scrollbar { display: none; }
.timeline.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.timeline.is-dragging * { user-select: none; }
@media (prefers-reduced-motion: reduce) { .timeline { scroll-behavior: auto; } }

.milestone {
  position: relative;
  scroll-snap-align: start;
  flex: 0 0 clamp(300px, 34vw, 440px);
  background: var(--night);
  color: var(--night-text);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 1.6rem 1.75rem 1.75rem;
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 470px;
  isolation: isolate;
  border: 1.5px solid transparent;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
/* Full-bleed image backdrop (atmosphere) + scrim so text dominates.
   Uniform brightness across all cards at rest and on hover. */
.m-bg { position: absolute; inset: 0; z-index: 0; }
.m-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; transition: opacity var(--transition), transform 600ms ease; }
.m-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,13,13,0.9) 0%, rgba(13,13,13,0.68) 34%, rgba(13,13,13,0.5) 68%, rgba(13,13,13,0.4) 100%);
}
.m-content { position: relative; z-index: 2; }
/* Active (centered) card is signalled with a rust edge + lift, NOT a brightness
   change, so image lighting stays consistent across every card. */
.milestone.is-active { box-shadow: var(--shadow-lift); border-color: var(--accent-rust); }
@media (hover: hover) {
  .milestone:hover .m-bg img { opacity: 0.62; }
  .milestone:hover { transform: translateY(-4px); }
}

.milestone .year { font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--accent-rust); margin-bottom: 0.4rem; }
.milestone .m-title { font-size: var(--fs-h3); color: var(--night-text); margin-bottom: 0.35rem; }
.milestone .m-role { font-size: var(--fs-small); color: var(--night-muted); margin-bottom: 0.85rem; }
.m-accent { font-size: var(--fs-small); font-weight: 600; color: var(--accent-rust); margin: -0.35rem 0 0.9rem; }
.m-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.m-tag {
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--night-text); background: rgba(246,241,232,0.14);
  padding: 0.25rem 0.6rem; border-radius: 999px;
}
.milestone ul { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.milestone li { font-size: var(--fs-small); color: rgba(246,241,232,0.9); padding-left: 1rem; position: relative; }
.milestone li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 999px; background: var(--accent-rust); }
.m-detail { margin-top: 0.15rem; }
.m-detail-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-small); font-weight: 600; color: var(--accent-rust);
  background: none; border: none; padding: 0;
}
.m-detail-toggle .chev { transition: transform var(--transition); }
.m-detail[open] .m-detail-toggle .chev { transform: rotate(180deg); }
.m-detail summary { list-style: none; cursor: pointer; }
.m-detail summary::-webkit-details-marker { display: none; }
.m-detail-body { font-size: var(--fs-small); color: rgba(246,241,232,0.85); padding-top: 0.85rem; }
.m-detail-body .recognition { display: inline-block; margin-top: 0.5rem; font-weight: 600; color: var(--night-text); }
.m-detail-body .link-arrow { color: var(--accent-rust); }

/* Recognition strip */
.recognition-strip { background: var(--paper); }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem 2.5rem; margin-top: 2rem; }
.rec-item { padding-top: 1rem; border-top: 2px solid var(--soft-tan); }
.rec-item .rec-tag { font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-rust); font-weight: 600; }
.rec-item p { margin-top: 0.4rem; font-size: var(--fs-small); color: var(--ink); }
.rec-item a { color: var(--ink); border-bottom: 1px solid var(--line); transition: color var(--transition), border-color var(--transition); }
.rec-item a:hover, .rec-item a:focus-visible { color: var(--accent-rust); border-color: var(--accent-rust); }

/* ============ Grab Your Y ============ */
.btn--gyy { background: var(--accent-rust); color: var(--paper); border-color: transparent; }
.btn--gyy:hover, .btn--gyy:focus-visible { background: #0D0D0D; color: #F2C230; border-color: #F2C230; }
.gyy-logo-frame { background: #0D0D0D; border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; place-items: center; box-shadow: var(--shadow-soft); }
.gyy-logo-frame img { width: 100%; max-width: 420px; height: auto; }
/* Homepage gateway: show the logo contained on black instead of a cover photo */
.gyy-media--logo { background: #0D0D0D; display: grid; place-items: center; }
.gyy-media--logo img { position: static; width: auto; height: auto; max-width: 78%; max-height: 78%; object-fit: contain; filter: none; }
.gyy-media--logo::after { display: none; }

/* ============ YouTube embed ============ */
.yt-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--night); box-shadow: var(--shadow-soft); }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============ MUSIC, brand hover ============ */
.btn--music { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--music .brand-ico { width: 18px; height: 18px; transition: fill var(--transition); }
.btn--spotify:hover, .btn--spotify:focus-visible { background: #1DB954; border-color: #1DB954; color: #fff; }
.btn--apple:hover, .btn--apple:focus-visible { background: #FA243C; border-color: #FA243C; color: #fff; }

/* ============ CONTACT ============ */
.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact-intro h1 { font-size: var(--fs-h1); margin-bottom: 1.25rem; max-width: 16ch; }
.contact-intro .lead { margin-bottom: 2.5rem; }
.form-field { margin-bottom: 1.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-field label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: 0.5rem; }
.form-field .req { color: var(--accent-rust); }
.form-field input, .form-field textarea {
  width: 100%;
  font: inherit; font-size: var(--fs-body);
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus {
  outline: none; border-color: var(--accent-rust);
  box-shadow: 0 0 0 3px rgba(198, 90, 46, 0.15);
}
.form-field input[aria-invalid="true"], .form-field textarea[aria-invalid="true"] { border-color: #B23B2E; }
.field-error { display: none; color: #B23B2E; font-size: var(--fs-small); margin-top: 0.4rem; }
.field-error.is-shown { display: block; }
.form-prompts { font-size: var(--fs-small); color: var(--muted-ink); margin: 0.6rem 0 0; padding-left: 1.1rem; }
.form-prompts li { margin-bottom: 0.2rem; }
.form-status { margin-top: 1.25rem; font-size: var(--fs-small); font-weight: 600; }
.form-status.ok { color: var(--accent-rust-dark); }
.form-status.err { color: #B23B2E; }

.contact-aside { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; position: relative; overflow: hidden; }
.contact-aside .aside-group { margin-bottom: 1.75rem; }
.contact-aside h3 { font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-ink); margin-bottom: 0.5rem; font-weight: 600; }
.contact-aside a { color: var(--ink); border-bottom: 1.5px solid transparent; transition: border-color var(--transition); }
.contact-aside a:hover { border-color: var(--accent-rust); }
.social-row { display: flex; gap: 0.75rem; margin-top: 0.75rem; }
.social-row a {
  width: 42px; height: 42px; border-radius: 999px; border: 1.5px solid var(--line);
  display: grid; place-items: center; color: var(--ink);
  transition: border-color var(--transition), color var(--transition);
}
.social-row a:hover { border-color: var(--accent-rust); color: var(--accent-rust); }
.aside-sign { font-family: var(--serif); font-style: italic; font-size: 2rem; color: var(--soft-tan); text-align: right; margin-top: 1rem; }
@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}