/* Ipek Aytimur — site styles
   Design: "Modern Sanatsal Dokunuş" with burgundy in place of petrol.
   Layout: full-bleed photo hero → thin burgundy band → ivory biography
   → burgundy quote band → ivory events → beige media → burgundy contact → deep burgundy footer. */

:root {
  --ivory: #F3EEE5;      /* Warm Ivory */
  --ink: #2B211E;        /* Deep Charcoal Brown */
  --burgundy: #5A1723;   /* Burgundy */
  --deep: #351016;       /* Deep Burgundy (footer) */
  --beige: #D7BEA5;      /* Warm Beige */
  --gold: #B08A52;       /* Antique Gold */

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(64px, 9vw, 112px);

  color-scheme: light;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; text-wrap: balance; line-height: 1.1; }
p { margin: 0; }

:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Shared type pieces ---------- */

.section-title {
  font-size: clamp(36px, 4.4vw, 46px);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.005em;
}

.rule {
  display: block;
  width: 44px;
  height: 1px;
  background: var(--gold);
  border: 0;
  margin: 18px 0 0;
}

.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--burgundy);
  padding-block: 6px;
}
.link-cta .arrow { transition: transform .25s ease; }
.link-cta:hover .arrow { transform: translateX(4px); }

.arrow { width: 20px; height: 10px; flex: none; }

/* ---------- Header / navigation ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--ivory);
  transition: background-color .35s ease, box-shadow .35s ease;
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}
.brand {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1;
  opacity: 0;
  transition: opacity .35s ease;
}
.brand-name { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: 0.05em; }
.brand-role { font-family: var(--serif); font-style: italic; font-size: 16px; margin-top: 3px; }

.site-header.is-solid {
  background: rgba(53, 16, 22, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(176, 138, 82, 0.25);
}
.site-header.is-solid .brand { opacity: 1; }

.nav ul {
  list-style: none;
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
}
.nav a {
  position: relative;
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 8px;
  opacity: .92;
  transition: opacity .2s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.nav a:hover { opacity: 1; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: inherit;
  padding: 10px;
  margin-right: -10px;
  cursor: pointer;
}
.menu-toggle span { display: block; width: 24px; height: 1px; background: currentColor; transition: transform .3s ease, opacity .3s ease; }
.menu-toggle span + span { margin-top: 7px; }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Light header used on inner pages (per the biography mockup) */
.site-header.light {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  padding-top: 0;
  background: var(--ivory);
  color: var(--ink);
  border-bottom: 1px solid rgba(90, 23, 35, 0.22);
}
.site-header.light .bar { min-height: 96px; }
.site-header.light .brand { opacity: 1; color: var(--burgundy); }
.site-header.light .brand-name { font-size: clamp(24px, 2.6vw, 32px); }
.site-header.light .brand-role { font-size: clamp(17px, 1.6vw, 20px); }
.site-header.light .nav a { color: var(--ink); opacity: .85; }
.site-header.light .nav a[aria-current="page"] { color: var(--burgundy); opacity: 1; }
.site-header.light .nav a::after { background: var(--burgundy); }

@media (max-width: 820px) {
  .menu-toggle { display: block; }
  .site-header.menu-open .brand { opacity: 1; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--deep);
    color: var(--ivory);
    padding: 8px var(--gutter) 24px;
    border-top: 1px solid rgba(176, 138, 82, 0.3);
    display: none;
  }
  .menu-open .nav { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li + li { border-top: 1px solid rgba(215, 190, 165, 0.14); }
  .nav a { display: block; padding-block: 16px; }
  .nav a::after { right: auto; width: 28px; bottom: 10px; }
  .site-header.light .nav a { color: var(--ivory); }
  .site-header.light .nav a[aria-current="page"] { color: var(--beige); }
  .site-header.light .nav a::after { background: var(--gold); }
  .site-header.menu-open:not(.light) { background: rgba(53, 16, 22, 0.97); }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* full screen on every device, excluding phone browser bars */
  display: flex;
  flex-direction: column;
  color: var(--ivory);
  background-color: #1b100c;
  isolation: isolate;
  overflow: hidden;
}
.hero-photo {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: min(80%, 1240px);
  z-index: -2;
  background: url("../images/hero.jpg") 22% center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(27, 16, 12, 0.55) 0%, rgba(27, 16, 12, 0.15) 45%, rgba(27, 16, 12, 0) 70%),
    linear-gradient(180deg, rgba(20, 10, 8, 0.55) 0%, rgba(20, 10, 8, 0) 22%, rgba(20, 10, 8, 0) 70%, rgba(20, 10, 8, 0.45) 100%);
}
.hero-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 120px;
  padding-bottom: 150px;
}
.hero h1 {
  font-size: clamp(44px, 5.4vw, 64px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.02;
}
.hero .role {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 26px);
  margin-top: 10px;
}
.hero .rule { margin-top: 26px; }

.scroll-cue {
  position: absolute;
  left: var(--gutter);
  bottom: 88px;
  color: var(--ivory);
  opacity: .85;
  padding: 8px 4px;
}
@media (min-width: 1292px) {
  .scroll-cue { left: calc((100vw - var(--wrap)) / 2); }
}
.scroll-cue svg { width: 12px; height: 34px; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue svg { animation: cue 2.6s ease-in-out infinite; }
  @keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
}

/* Thin info band that sits across the bottom of the hero */
.hero-band {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(90, 23, 35, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(176, 138, 82, 0.35);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.hero-band .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 50px;
}
.hero-band .item { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.hero-band .item svg { width: 15px; height: 15px; }
.hero-band .sep { width: 1px; height: 18px; background: var(--gold); opacity: .8; flex: none; }

@media (max-width: 820px) {
  .hero-photo { width: 100%; background-position: 28% center; -webkit-mask-image: none; mask-image: none; }
  .hero::before {
    background: linear-gradient(180deg, rgba(20, 10, 8, 0.6) 0%, rgba(20, 10, 8, 0.2) 35%, rgba(20, 10, 8, 0.55) 65%, rgba(20, 10, 8, 0.9) 100%);
  }
  .hero-inner { justify-content: flex-end; padding-bottom: 170px; }
  .hero-band .item.projects, .hero-band .sep.last { display: none; }
  .scroll-cue { bottom: 70px; left: auto; right: var(--gutter); }
}

/* ---------- Biography (home) ---------- */

.bio {
  position: relative;
  background: var(--ivory);
  padding-block: var(--section-y);
  overflow: hidden;
}
.bio .grid {
  display: grid;
  grid-template-columns: minmax(0, 4.2fr) minmax(0, 6fr) minmax(0, 2.6fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.bio-photo {
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  object-position: center 18%;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.bio-text { min-width: 0; display: grid; gap: 18px; max-width: 60ch; }
.bio-text .rule { margin: 4px 0 8px; }
.bio-text p { font-size: 16px; line-height: 1.65; }
.bio-text .link-cta { margin-top: 6px; justify-self: start; }
.bio-sketch { color: var(--beige); align-self: stretch; display: flex; align-items: center; justify-content: center; }
.bio-sketch svg { width: 100%; max-width: 220px; height: auto; }

@media (max-width: 960px) {
  .bio .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .bio-sketch { position: absolute; right: -40px; top: 20px; width: 200px; opacity: .6; pointer-events: none; }
}
@media (max-width: 640px) {
  .bio .grid { grid-template-columns: 1fr; }
  .bio-photo { max-width: 420px; aspect-ratio: 4 / 4.4; }
  .bio-sketch { top: auto; bottom: -30px; right: -60px; }
}

/* ---------- Quote band ---------- */

.quote-band {
  background: var(--burgundy);
  color: var(--ivory);
  padding-block: 26px;
}
.quote-band .wrap {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
}
.quote-band .line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(176,138,82,0), var(--gold)); min-width: 20px; }
.quote-band .line.r { background: linear-gradient(90deg, var(--gold), rgba(176,138,82,0)); }
.quote-band .ornament { width: 54px; height: 16px; color: var(--gold); flex: none; }
.quote-band .ornament.r { transform: scaleX(-1); }
.quote-band blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.1vw, 25px);
  line-height: 1.35;
  text-align: center;
  flex: 0 1 auto;
  min-width: 0;
}
@media (max-width: 640px) {
  .quote-band .ornament { display: none; }
}

/* ---------- Upcoming events ---------- */

.events { background: var(--ivory); padding-block: var(--section-y); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.section-head .rule { margin-top: 16px; }

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding: 6px clamp(18px, 2.4vw, 32px);
  border-left: 1px solid var(--beige);
}
.event:first-child { border-left: 0; padding-left: 0; }
.event:last-child { padding-right: 0; }
.event .date { display: grid; justify-items: start; line-height: 1; color: var(--burgundy); }
.event .day { font-family: var(--serif); font-weight: 400; font-size: 46px; font-variant-numeric: lining-nums tabular-nums; }
.event .mon, .event .yr {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.event .mon { font-weight: 500; margin-top: 10px; }
.event .yr { font-weight: 400; margin-top: 6px; }
.event .venue { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.15; color: var(--ink); }
.event .city {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(43, 33, 30, 0.6);
  margin-top: 8px;
}
.event .kind { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--burgundy); margin-top: 6px; }
.event .go { color: var(--burgundy); align-self: end; padding: 4px 0; text-decoration: none; }
.event .go .arrow { transition: transform .25s ease; }
.event .go:hover .arrow { transform: translateX(4px); }

@media (max-width: 960px) {
  .event-list { grid-template-columns: 1fr; }
  .event, .event:first-child, .event:last-child {
    border-left: 0;
    border-top: 1px solid var(--beige);
    padding: 24px 0;
  }
  .event:first-child { border-top: 0; padding-top: 0; }
}

/* ---------- Media ---------- */

.media { background: var(--beige); padding-block: var(--section-y); }
.media .section-title { color: var(--ink); }
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.media-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10.5;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--burgundy);
  background: var(--deep);
  color: var(--ivory);
  text-decoration: none;
}
.media-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.media-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 8, 10, 0) 40%, rgba(20, 8, 10, 0.78) 100%);
}
.media-card:hover img { transform: scale(1.04); }
.media-card .label {
  position: absolute;
  left: 22px; bottom: 18px;
  z-index: 1;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1;
}
.media-card .label::after {
  content: "";
  display: block;
  width: 34px; height: 1px;
  background: var(--gold);
  margin-top: 10px;
}
.media-card .play {
  position: absolute;
  left: 50%; top: 46%;
  z-index: 1;
  width: 58px; height: 58px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(243, 238, 229, 0.85);
  background: rgba(53, 16, 22, 0.35);
  display: grid; place-items: center;
  transition: background-color .3s ease;
}
.media-card:hover .play { background: rgba(90, 23, 35, 0.7); }
.media-card .play svg { width: 18px; height: 18px; margin-left: 3px; }

@media (max-width: 820px) {
  .media-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */

.contact {
  position: relative;
  background: var(--burgundy);
  color: var(--ivory);
  padding-block: var(--section-y);
  overflow: hidden;
  isolation: isolate;
}
.contact-sketch {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(280px, 34vw, 520px);
  color: var(--beige);
  opacity: .5;
  z-index: -1;
  pointer-events: none;
}
.contact-sketch svg { width: 100%; height: auto; }
.contact .grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 1px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
}
.contact .divider { background: rgba(215, 190, 165, 0.35); margin-top: 110px; }
.contact h2 {
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 500;
  color: var(--ivory);
  margin-bottom: 8px;
}
.contact .sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--beige);
  margin-bottom: 34px;
}

.form { display: grid; gap: 22px; max-width: 560px; }
.field { display: grid; gap: 10px; }
.field label, .info-label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--beige);
}
.field input, .field textarea {
  width: 100%;
  font: 400 15px/1.5 var(--sans);
  color: var(--ivory);
  background: transparent;
  border: 1px solid rgba(215, 190, 165, 0.48);
  border-radius: 0;
  padding: 13px 16px;
  transition: border-color .2s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(243, 238, 229, 0.6); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--beige); }
.field input:-webkit-autofill {
  -webkit-text-fill-color: var(--ivory);
  -webkit-box-shadow: 0 0 0 40px var(--burgundy) inset;
}

.btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--ivory);
  color: var(--burgundy);
  border: 0;
  border-radius: 0;
  padding: 18px 40px;
  font: 500 12.5px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease;
}
.btn:hover { background: #fff; }
.btn:hover .arrow { transform: translateX(4px); }
.btn .arrow { transition: transform .25s ease; }
.btn[disabled] { opacity: .6; cursor: default; }

.form-status { font-size: 14px; color: var(--beige); min-height: 1.5em; }
.form-status a { color: var(--ivory); }

.info { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; align-content: start; padding-top: 118px; }
.info li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 22px; align-items: start; }
.info svg { width: 34px; height: 34px; color: var(--beige); }
.info-value { display: block; margin-top: 8px; font-size: 16px; color: var(--ivory); text-decoration: none; overflow-wrap: anywhere; }
a.info-value:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); }

@media (max-width: 900px) {
  .contact .grid { grid-template-columns: 1fr; }
  .contact .divider { display: none; }
  .info { padding-top: 12px; }
}

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

.site-footer {
  background: var(--deep);
  color: var(--ivory);
  border-top: 1px solid rgba(176, 138, 82, 0.45);
  padding-block: 44px;
}
.site-footer .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 28px 40px;
}
.foot-brand .brand-name { font-size: 30px; display: block; line-height: 1; }
.foot-brand .brand-role { font-size: 24px; color: var(--beige); display: block; margin-top: 4px; }
.foot-nav ul { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.foot-nav li + li { border-left: 1px solid rgba(243, 238, 229, 0.25); }
.foot-nav a {
  display: block;
  padding: 4px clamp(14px, 2vw, 30px);
  font: 500 12px/1.4 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(243, 238, 229, 0.82);
}
.foot-nav a:hover { color: var(--ivory); }
.foot-meta { justify-self: end; display: grid; justify-items: end; gap: 12px; }
.social { display: flex; gap: 18px; }
.social a { color: var(--beige); display: block; padding: 2px; }
.social a:hover { color: var(--ivory); }
.social svg { width: 22px; height: 22px; }
.copyright { white-space: nowrap; font-size: 13px; color: rgba(243, 238, 229, 0.58); }

@media (max-width: 960px) {
  .site-footer .wrap { grid-template-columns: 1fr; justify-items: start; }
  .foot-nav li:first-child a { padding-left: 0; }
  .foot-meta { justify-self: start; justify-items: start; }
}

/* ---------- Inner pages ---------- */

.page-intro {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px);
  overflow: hidden;
}
.eyebrow {
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--burgundy);
}
.eyebrow + .rule { margin: 22px 0 30px; }
.display {
  font-size: clamp(52px, 7vw, 88px);
  font-weight: 500;
  color: var(--burgundy);
  line-height: 1;
}
.display-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(26px, 2.8vw, 36px);
  color: var(--burgundy);
  margin-top: 14px;
}
.lede { font-size: 17px; line-height: 1.7; color: var(--ink); opacity: .9; max-width: 58ch; }

.bio-page .grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.bio-page .prose { display: grid; gap: 22px; margin-top: 40px; min-width: 0; }
.bio-page .portrait-wrap { position: relative; }
.bio-page .portrait { width: 100%; height: auto; aspect-ratio: 42 / 80; object-fit: cover; position: relative; z-index: 1; }
.bio-page .portrait-sketch {
  position: absolute;
  right: -110px; top: -40px;
  width: 260px;
  color: var(--burgundy);
  opacity: .5;
  pointer-events: none;
}
.bio-page .portrait-sketch svg { width: 100%; height: auto; }
@media (max-width: 820px) {
  .bio-page .grid { grid-template-columns: 1fr; }
  .bio-page .portrait { max-width: 420px; aspect-ratio: 4 / 5; object-position: center 20%; }
  .bio-page .portrait-sketch { display: none; }
}

.events-page .event-list { grid-template-columns: 1fr; }
.events-page .event, .events-page .event:first-child, .events-page .event:last-child {
  border-left: 0;
  border-top: 1px solid var(--beige);
  padding: 30px 0;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
}
.events-page .event:last-child { border-bottom: 1px solid var(--beige); }
.events-page .event .day { font-size: 58px; }
.events-page .event .venue { font-size: 28px; }
.events-page .event .kind { font-size: 21px; }
.note { font-size: 14px; color: rgba(43, 33, 30, 0.65); margin-top: 28px; }

.media-page section + section { margin-top: clamp(56px, 7vw, 88px); }
.media-page h2 { font-size: clamp(32px, 3.6vw, 42px); color: var(--ink); }
.media-page .rule { margin-bottom: 28px; }
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid rgba(90, 23, 35, 0.4); }
.gallery img.wide { grid-column: span 2; aspect-ratio: auto; height: 100%; }
@media (max-width: 720px) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery img.wide { grid-column: span 2; aspect-ratio: 16 / 9; height: auto; }
}

/* Biography flows straight into Highlights: a hairline keeps the two ivory sections apart */
.bio + .events { padding-top: 0; }
.bio + .events > .wrap { position: relative; padding-top: var(--section-y); }
.bio + .events > .wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter); right: var(--gutter);
  height: 1px;
  background: var(--beige);
}

/* ---------- Concerts & highlights (rendered from js/concerts.js) ---------- */
.event .day.yr-only { font-size: 34px; }
.event .kind-note { font-style: normal; font-family: var(--sans); font-size: 12px; letter-spacing: .04em; color: rgba(43, 33, 30, 0.6); }
.concert-block { margin-top: clamp(56px, 7vw, 88px); }
.concert-block .rule { margin-bottom: 32px; }

.hl-years { display: grid; }
.hl-year {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px 32px;
  padding-block: 28px;
  border-top: 1px solid var(--beige);
}
.hl-year:last-child { border-bottom: 1px solid var(--beige); }
.hl-label {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  color: var(--burgundy);
  font-variant-numeric: lining-nums;
  line-height: 1;
}
.hl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.hl-item { display: grid; gap: 4px; min-width: 0; }
.hl-role {
  font: 500 11px/1.4 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy);
}
.hl-title { font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.2; color: var(--ink); }
.hl-meta { font-size: 14px; color: rgba(43, 33, 30, 0.65); }
@media (max-width: 640px) {
  .hl-year { grid-template-columns: 1fr; }
}

.training { padding-block: 0 var(--section-y); }
.training-list { margin-top: 32px; gap: 0; max-width: 900px; }
.training-list .hl-item {
  grid-template-columns: 180px minmax(0, 1fr);
  column-gap: 32px;
  padding-block: 18px;
  border-top: 1px solid var(--beige);
}
.training-list .hl-item:last-child { border-bottom: 1px solid var(--beige); }
.training-list .hl-role { grid-row: 1 / span 2; padding-top: 7px; }
.training-list .hl-title, .training-list .hl-meta { grid-column: 2; }
@media (max-width: 640px) {
  .training-list .hl-item { grid-template-columns: 1fr; }
  .training-list .hl-role { grid-row: auto; padding-top: 0; }
  .training-list .hl-title, .training-list .hl-meta { grid-column: 1; }
}
.bio-page .grid { align-items: start; }
@media (min-width: 821px) {
  .bio-page .portrait-wrap { position: sticky; top: 130px; margin-top: 150px; }
}
.langs { margin-top: 36px; font-size: 15px; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }

/* Line-drawing sketches (from the reference artwork) */
.bio-sketch img, .portrait-sketch img, .contact-sketch img { width: 100%; height: auto; display: block; }
.bio-sketch img { max-width: 230px; opacity: .85; }
.bio-page .portrait-sketch { opacity: .8; width: 240px; right: -120px; top: -90px; }
.contact-sketch { opacity: .7; width: clamp(240px, 26vw, 400px); right: 2%; bottom: 0; }

/* ---------- Articles ---------- */
.articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.article-card {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(90, 23, 35, 0.35);
  border-top: 2px solid var(--gold);
  min-width: 0;
}
.article-card blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 27px);
  line-height: 1.35;
  color: var(--burgundy);
}
.article-source { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(43, 33, 30, 0.65); }
.article-source span:first-child { color: var(--ink); font-weight: 500; }
.article-card .link-cta { justify-self: start; }

/* ---------- Hero with the studio portrait (taupe backdrop) ---------- */
.hero { background-color: #8F796C; }
.hero-photo {
  width: 100%;
  background-position: 62% 30%;
  -webkit-mask-image: none;
          mask-image: none;
}
.hero::before {
  background:
    linear-gradient(90deg, rgba(40, 24, 20, 0.62) 0%, rgba(40, 24, 20, 0.38) 32%, rgba(40, 24, 20, 0) 58%),
    linear-gradient(180deg, rgba(30, 18, 15, 0.45) 0%, rgba(30, 18, 15, 0) 22%, rgba(30, 18, 15, 0) 72%, rgba(30, 18, 15, 0.35) 100%);
}
.bio-photo { object-position: center 22%; }
.bio-page .portrait { object-position: center 25%; }
@media (max-width: 820px) {
  .hero-photo { background-position: 50% 25%; }
  .hero::before {
    background: linear-gradient(180deg, rgba(30, 18, 15, 0.5) 0%, rgba(30, 18, 15, 0) 30%, rgba(30, 18, 15, 0.25) 55%, rgba(30, 18, 15, 0.85) 100%);
  }
}
@media (min-width: 821px) {
  .hero-photo { left: auto; right: 0; width: 72%; background-position: 50% 30%; }
}
.bio-photo { object-position: center 42%; }

/* ---------- One-page layout ---------- */
section[id], .media-block { scroll-margin-top: 76px; }
.bio-full .grid { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7fr); align-items: start; }
.bio-full .bio-text { max-width: 64ch; }
.bio-full .bio-sketch { position: absolute; top: 40px; right: max(16px, calc((100vw - var(--wrap)) / 2 - 140px)); width: 190px; pointer-events: none; }
@media (min-width: 961px) {
  .bio-full .bio-photo-wrap { position: sticky; top: 110px; }
}
@media (max-width: 960px) {
  .bio-full .grid { grid-template-columns: 1fr; }
  .bio-full .bio-photo { max-width: 420px; }
  .bio-full .bio-sketch { top: auto; bottom: 20px; right: -40px; opacity: .5; }
}
.events .concert-block:first-child, .events .concert-block.first { margin-top: 0; }
.events .concert-block[hidden] + .concert-block { margin-top: 0; }
.media .section-title + .rule { margin-bottom: 8px; }
.media-block { margin-top: clamp(40px, 5vw, 64px); }
.media-sub { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 2.6vw, 32px); color: var(--ink); margin-bottom: 20px; }
.media .gallery img { border-color: rgba(90, 23, 35, 0.5); }
.media .article-card { background: var(--ivory); }
.media .gallery { grid-auto-rows: clamp(220px, 28vw, 400px); }
.media .gallery img, .media .gallery img.wide { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 28%; }
@media (max-width: 720px) {
  .media .gallery { grid-auto-rows: clamp(200px, 55vw, 320px); }
}

/* ================= Round 7 adjustments ================= */

/* Biography: photo | text | drawing, each in its own column */
.bio-full .grid {
  grid-template-columns: minmax(0, 4fr) minmax(0, 6.4fr) minmax(0, 2.2fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.bio-full .bio-photo { aspect-ratio: 4 / 5; object-position: center 30%; }
.bio-full .bio-sketch {
  position: static;
  width: auto;
  align-self: center;
  justify-self: end;
  opacity: 1;
}
.bio-full .bio-sketch img { max-width: 170px; opacity: .8; }
.bio-more { display: grid; gap: 18px; }
.bio-toggle {
  justify-self: start;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(90, 23, 35, 0.35);
  padding: 6px 0;
  cursor: pointer;
}
.bio-toggle[aria-expanded="true"] .arrow { transform: rotate(-90deg); }
.bio-toggle[aria-expanded="false"] .arrow { transform: rotate(90deg); }
@media (max-width: 1100px) {
  .bio-full .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .bio-full .bio-sketch { display: none; }
}
@media (max-width: 700px) {
  .bio-full .grid { grid-template-columns: 1fr; }
  .bio-full .bio-photo { max-width: 420px; }
}

/* Slimmer info band under the opening photo */
.hero-band { font-size: 11.5px; letter-spacing: .04em; background: rgba(90, 23, 35, 0.78); }
.hero-band .wrap { min-height: 34px; }
.hero-band .item svg { width: 12px; height: 12px; }
.hero-band .sep { height: 12px; }
.scroll-cue { bottom: 56px; }
.hero-inner { padding-bottom: 110px; }

/* Smaller screens: name sits above her head, photo starts lower */
@media (max-width: 1100px) {
  .hero-photo {
    left: 0; right: 0; width: 100%;
    top: clamp(150px, 26vh, 240px);
    background-size: cover;
    background-position: 50% 0%;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero::before {
    background: linear-gradient(180deg, rgba(30, 18, 15, 0.42) 0%, rgba(30, 18, 15, 0.12) 30%, rgba(30, 18, 15, 0) 60%, rgba(30, 18, 15, 0.25) 100%);
  }
  .hero-inner {
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding-top: 84px;
    padding-bottom: 0;
  }
  .hero h1 { font-size: clamp(34px, 8.5vw, 56px); }
  .hero .role { margin-top: 4px; }
  .hero .rule { margin-top: 14px; }
  .scroll-cue { left: auto; right: var(--gutter); bottom: 50px; }
}

/* Clickable photos + viewer */
.zoomable { cursor: zoom-in; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: max(56px, env(safe-area-inset-top, 0px)) 16px max(56px, env(safe-area-inset-bottom, 0px));
  background: #1e090d;
}
.lightbox img {
  max-width: min(92vw, 1400px);
  max-height: 84vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: var(--ivory);
  cursor: pointer;
  padding: 14px;
  opacity: .85;
}
.lightbox button:hover { opacity: 1; }
.lightbox .lb-close { top: max(10px, env(safe-area-inset-top, 0px)); right: 10px; }
.lightbox .lb-prev { left: 6px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 6px; top: 50%; transform: translateY(-50%); }
.lightbox svg { width: 26px; height: 26px; display: block; }
.lightbox .lb-count {
  position: absolute;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  left: 0; right: 0;
  text-align: center;
  font: 500 11px/1 var(--sans);
  letter-spacing: .2em;
  color: var(--beige);
}
@media (max-width: 1100px) {
  .hero h1 { font-size: clamp(30px, min(8.5vw, 8vh), 56px); }
}
/* Phones held sideways: name beside the photo */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-photo { top: 0; left: auto; right: 0; width: 58%; background-position: 50% 15%; }
  .hero::before { background: linear-gradient(90deg, rgba(30, 18, 15, 0.5) 0%, rgba(30, 18, 15, 0.15) 45%, rgba(30, 18, 15, 0) 60%); }
  .hero-inner { justify-content: center; align-items: flex-start; text-align: left; padding-top: 56px; padding-bottom: 40px; }
}

/* ================= Round 8 ================= */

/* Hero title: same style as the original, just lifted above her head on smaller screens */
@media (max-width: 1100px) {
  .hero-inner {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    padding-top: clamp(96px, 14vh, 140px);
    padding-bottom: 0;
  }
  .hero h1 { font-size: clamp(40px, 7vw, 60px); }
  .hero .role { margin-top: 10px; }
  .hero .rule { margin-top: 22px; }
  .hero-photo { top: clamp(170px, 30vh, 280px); background-position: 50% 0%; }
  .hero::before {
    background: linear-gradient(180deg, rgba(30, 18, 15, 0.38) 0%, rgba(30, 18, 15, 0.1) 35%, rgba(30, 18, 15, 0) 70%);
  }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hero-inner { justify-content: center; padding-top: 56px; padding-bottom: 40px; }
  .hero h1 { font-size: clamp(30px, 8vh, 44px); }
  .hero-photo { top: 0; }
}

/* Info strip stays at the bottom of the screen */
.hero-band {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body { padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)); }

/* Scroll cue: small label with a moving line, bottom right */
.scroll-cue {
  left: auto !important;
  right: var(--gutter);
  bottom: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ivory);
  opacity: .9;
  padding: 6px;
}
@media (min-width: 1292px) { .scroll-cue { right: calc((100vw - var(--wrap)) / 2); } }
.sc-label {
  writing-mode: vertical-rl;
  font: 500 10px/1 var(--sans);
  letter-spacing: .32em;
  text-transform: uppercase;
}
.sc-line {
  position: relative;
  width: 1px;
  height: 56px;
  background: rgba(243, 238, 229, 0.3);
  overflow: hidden;
}
.sc-line::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 18px;
  background: var(--gold);
}
@media (prefers-reduced-motion: no-preference) {
  .sc-line::after { animation: sc-drop 2.2s cubic-bezier(.6, 0, .3, 1) infinite; }
  @keyframes sc-drop { 0% { transform: translateY(-18px); } 100% { transform: translateY(56px); } }
}
.scroll-cue svg { display: none; }

/* Media: all photos in an even grid */
.media-hint { font-size: 14px; color: rgba(43, 33, 30, 0.7); margin: 18px 0 28px; }
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 20px);
}
.photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
  border: 1px solid rgba(90, 23, 35, 0.45);
  transition: transform .5s ease, box-shadow .5s ease;
}
.photo-grid img:hover, .photo-grid img:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(53, 16, 22, 0.25); }
@media (max-width: 720px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Articles */
.press { background: var(--ivory); padding-block: var(--section-y); }
.press .rule { margin-bottom: 32px; }
.article-headline { font-family: var(--serif); font-weight: 500; font-size: 19px; color: var(--ink); line-height: 1.3; }

.article-source { gap: 6px 14px; }

/* Footer: name and copyright only */
.site-footer .wrap { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 960px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* Viewer: download button */
.lightbox .lb-download {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: 64px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  color: var(--ivory);
  text-decoration: none;
  font: 500 11px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
}
.lightbox .lb-download:hover { opacity: 1; }
.lightbox .lb-download svg { width: 18px; height: 18px; }
.lightbox { z-index: 120; }
.article-note { font-size: 12px; font-style: italic; color: rgba(43, 33, 30, 0.55); margin-top: -10px; }
.article-date { color: var(--burgundy); }

/* Name on two lines, as in the original design */
.hero h1 span { display: block; }
.hero h1 { font-size: clamp(54px, 6.6vw, 92px); line-height: 0.98; letter-spacing: 0.035em; }
.hero .role { font-size: clamp(22px, 2.1vw, 28px); margin-top: 14px; }
@media (max-width: 1100px) {
  .hero h1 { font-size: clamp(46px, 11vw, 76px); }
  .hero-photo { top: clamp(220px, 34vh, 330px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hero h1 { font-size: clamp(32px, 10vh, 50px); }
  .hero-photo { top: 0; }
}
/* Bigger photo on smaller screens: start it just below the name */
@media (max-width: 1100px) {
  .hero h1 { font-size: clamp(44px, 9.5vw, 68px); }
  .hero-inner { padding-top: clamp(84px, 11vh, 120px); }
  .hero-photo { top: clamp(130px, 19vh, 200px); background-size: cover; background-position: 50% 0%; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hero-photo { top: 0; }
}

/* ================= Round 10 ================= */

/* Section divider: gold ornament, clearly different from list lines */
.bio + .events > .wrap::before { display: none; }
.bio + .events { padding-top: clamp(48px, 6vw, 72px); }
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--ivory);
  padding-inline: var(--gutter);
}
.section-divider span { width: min(120px, 22vw); height: 1px; background: linear-gradient(90deg, rgba(176,138,82,0), var(--gold)); }
.section-divider span:last-child { background: linear-gradient(90deg, var(--gold), rgba(176,138,82,0)); }
.section-divider i { width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg); }
.bio { padding-bottom: clamp(48px, 6vw, 72px); }

/* Upcoming → Highlights inside the section: lighter spacing, no heavy rule */
.events .concert-block + .concert-block:not(:first-child) { margin-top: clamp(56px, 7vw, 80px); }

/* Media grid: 3 portraits on top, 2 wider below */
.photo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(240px, 30vw, 440px); }
.photo-grid img { grid-column: span 2; height: 100%; aspect-ratio: auto; }
.photo-grid img:nth-child(n+4) { grid-column: span 3; }
.media .rule { margin-bottom: 32px; }
@media (max-width: 720px) {
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 60vw, 320px); }
  .photo-grid img, .photo-grid img:nth-child(n+4) { grid-column: span 1; }
  .photo-grid img:last-child { grid-column: span 2; }
}

/* Contact: a little more compact */
.contact { padding-block: clamp(56px, 7vw, 84px); }
.contact h2 { font-size: clamp(38px, 4.4vw, 52px); }
.contact .sub { margin-bottom: 24px; }
.form { gap: 16px; }
.field { gap: 8px; }
.field textarea { min-height: 110px; }
.contact .divider { margin-top: 90px; }
.info { padding-top: 96px; gap: 26px; }
@media (max-width: 900px) { .info { padding-top: 8px; } }

/* ================= Round 11 ================= */

/* Solid info strip so nothing shows through it */
.hero-band { background: var(--burgundy); backdrop-filter: none; -webkit-backdrop-filter: none; }
html { background: var(--burgundy); }

/* Same gold divider between every section */
.section-divider { padding-top: clamp(44px, 5.5vw, 68px); }
.section-divider.on-dark { background: var(--ink); }
.section-divider.on-ivory { background: var(--ivory); }
.section-divider.on-burgundy { background: var(--burgundy); }
.section-divider + section { padding-top: clamp(40px, 5vw, 60px) !important; }
.events, .media, .press { padding-bottom: clamp(48px, 6vw, 72px); }

/* Media on a deep, warm dark ground so the photos stand out */
.media { background: var(--ink); color: var(--ivory); }
.media .section-title { color: var(--ivory); }
.media .photo-grid img { border: 1px solid rgba(176, 138, 82, 0.35); }
.media .photo-grid img:hover, .media .photo-grid img:focus-visible { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); }

/* Contact: more compact */
.contact { padding-bottom: clamp(44px, 5vw, 64px); }
.contact h2 { font-size: clamp(34px, 3.8vw, 46px); margin-bottom: 4px; }
.contact .sub { font-size: 17px; margin-bottom: 18px; }
.form { gap: 12px; max-width: 520px; }
.field { gap: 6px; }
.field input, .field textarea { padding: 11px 14px; }
.field textarea { min-height: 92px; }
.btn { padding: 15px 34px; }
.contact .divider { margin-top: 70px; }
.info { padding-top: 76px; gap: 22px; }
.info svg { width: 30px; height: 30px; }
.info-value { margin-top: 5px; }
.contact-sketch { width: clamp(200px, 22vw, 330px); }
@media (max-width: 900px) { .info { padding-top: 8px; } .contact .divider { display: none; } }
@media (max-width: 520px) {
  .hero-band .sep, .hero-band a.item { display: none; }
  .hero-band .wrap { justify-content: center; }
}
@media (max-width: 900px) {
  .contact .grid { gap: 20px; }
  .form-status:empty { display: none; }
  .contact-sketch { opacity: .3; }
}

/* ================= Round 12 ================= */

/* Hero strip back in the photo, see-through as before */
.hero-band {
  position: absolute;
  bottom: 0;
  z-index: 2;
  padding-bottom: 0;
  background: rgba(90, 23, 35, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body { padding-bottom: 0; }
html { background: var(--ivory); }

/* Same strip slides in at the bottom only while Contact is on screen */
.contact-band {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  color: var(--ivory);
  background: rgba(90, 23, 35, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(176, 138, 82, 0.35);
  font-size: 11.5px;
  letter-spacing: .04em;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease;
  pointer-events: none;
}
.contact-band.is-visible { transform: none; opacity: 1; }
.contact-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; }
.contact-band .item { white-space: nowrap; }
.contact-band .sep { width: 1px; height: 12px; background: var(--gold); opacity: .8; }
@media (max-width: 820px) { .contact-band .item.projects, .contact-band .sep.last { display: none; } }
@media (max-width: 520px) { .contact-band .sep, .contact-band .item:nth-child(3) { display: none; } .contact-band .wrap { justify-content: center; } }
.contact { padding-bottom: calc(clamp(44px, 5vw, 64px) + 34px); }
.contact-sketch { bottom: 34px; }

/* Media on a light warm tone */
.media { background: #EAE0D7; color: var(--ink); }
.media .section-title { color: var(--ink); }
.media .photo-grid img { border: 1px solid rgba(90, 23, 35, 0.3); }
.media .photo-grid img:hover, .media .photo-grid img:focus-visible { box-shadow: 0 12px 28px rgba(53, 16, 22, 0.22); }

/* Sections that change colour don't need the ornament */
.media, .press { padding-top: var(--section-y) !important; }
.contact { padding-top: clamp(56px, 7vw, 84px); }

/* Ornament between Upcoming Concerts and Highlights */
.section-divider.inner { background: none; padding: clamp(48px, 6vw, 72px) 0 0; }
.events .concert-block + .concert-block:not(:first-child) { margin-top: clamp(40px, 5vw, 60px); }

/* Hero strip fades away as soon as you start scrolling */
.hero-band { transition: opacity .35s ease, transform .35s ease; }
.is-scrolled .hero-band { opacity: 0; transform: translateY(100%); pointer-events: none; }
/* Slower, smoother fade for both strips */
.hero-band { transition: opacity .9s cubic-bezier(.4, 0, .2, 1), transform 1.1s cubic-bezier(.4, 0, .2, 1); }
.is-scrolled .hero-band { transform: translateY(40%); }
.contact-band { transition: opacity .9s cubic-bezier(.4, 0, .2, 1), transform 1.1s cubic-bezier(.4, 0, .2, 1); }

/* Scroll cue: quiet thin line on the left, aligned with the name */
.scroll-cue {
  left: var(--gutter) !important;
  right: auto !important;
  bottom: 58px;
  gap: 0;
  padding: 8px 6px;
  opacity: .55;
  transition: opacity .3s ease;
}
.scroll-cue:hover { opacity: .9; }
@media (min-width: 1292px) { .scroll-cue { left: calc((100vw - var(--wrap)) / 2) !important; right: auto !important; } }
.sc-label { display: none; }
.sc-line { height: 44px; background: linear-gradient(180deg, rgba(243, 238, 229, 0), rgba(243, 238, 229, 0.45)); }
.sc-line::after { height: 12px; background: rgba(243, 238, 229, 0.9); }
@media (prefers-reduced-motion: no-preference) {
  .sc-line::after { animation: sc-soft 3.2s ease-in-out infinite; }
  @keyframes sc-soft { 0% { transform: translateY(-12px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(44px); opacity: 0; } }
}
.is-scrolled .scroll-cue { opacity: 0; pointer-events: none; transition: opacity .9s ease; }
.bio-intro { display: grid; gap: 18px; }

/* ================= Language switch (EN | TR) ================= */
.site-header .bar { justify-content: flex-start; }
.site-header .brand { margin-right: auto; }
.site-header .nav { order: 2; }
.lang-switch { order: 3; }
.menu-toggle { order: 4; }
.lang-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: clamp(14px, 1.6vw, 24px);
  padding-left: clamp(14px, 1.6vw, 24px);
  border-left: 1px solid rgba(243, 238, 229, 0.28);
}
.lang-switch button {
  position: relative;
  background: none;
  border: 0;
  color: inherit;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.16em;
  padding: 8px 0;
  cursor: pointer;
  opacity: .55;
  transition: opacity .2s ease;
}
.lang-switch button:hover { opacity: .9; }
.lang-switch button[aria-pressed="true"] { opacity: 1; }
.lang-switch button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--gold);
}
.lang-sep { width: 1px; height: 10px; background: currentColor; opacity: .35; }
@media (max-width: 820px) {
  .lang-switch { margin-left: 0; padding-left: 0; border-left: 0; margin-right: 18px; }
}

/* ================= Round 14: biography photo and flourish ================= */
.bio-full .grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.bio-full .bio-photo { object-position: 55% 50%; }
.bio-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.bio-flourish { width: clamp(64px, 6vw, 92px); height: auto; opacity: .55; margin-bottom: -6px; transform: rotate(-6deg); pointer-events: none; }
.bio-full .bio-text { max-width: 62ch; }
@media (max-width: 1100px) { .bio-full .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }
@media (max-width: 700px) {
  .bio-full .grid { grid-template-columns: 1fr; }
  .bio-flourish { width: 60px; }
}

/* ================= Round 15: biography photo and line drawing ================= */
.bio-full { position: relative; isolation: isolate; }
.bio-full .bio-photo { object-position: 50% 50%; }
.bio-flourish { display: none; }
/* single-line violin drawn softly into the empty space beside the text */
.bio-drawing {
  position: absolute;
  z-index: -1;
  right: max(-40px, calc((100vw - var(--wrap)) / 2 - 220px));
  top: 50%;
  width: clamp(300px, 34vw, 520px);
  height: auto;
  transform: translateY(-46%) rotate(-8deg);
  opacity: .22;
  pointer-events: none;
}
@media (max-width: 1100px) { .bio-drawing { width: 340px; right: -90px; top: auto; bottom: 30px; transform: rotate(-8deg); opacity: .14; } }
@media (max-width: 700px) { .bio-drawing { width: 260px; right: -70px; bottom: 10px; opacity: .12; } }
/* Drawing sits in its own free space to the right of the text, never behind it */
@media (min-width: 1101px) {
  .bio-full .grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6.2fr) minmax(0, 2.6fr); }
  .bio-full .bio-text { max-width: none; }
  .bio-drawing {
    right: max(-70px, calc((100vw - var(--wrap)) / 2 - 150px));
    width: clamp(320px, 27vw, 440px);
    opacity: .38;
    transform: translateY(-50%) rotate(-12deg);
  }
}
/* Articles: two per row, the newest piece across the full width */
.articles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
@media (min-width: 900px) {
  .articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-card:first-child { grid-column: 1 / -1; }
  .article-card:first-child blockquote { max-width: 60ch; }
}
@media (max-width: 1100px) { .bio-drawing { display: none; } }

/* ================= Concert photos under the gallery ================= */
.concert-photos { margin-top: clamp(40px, 5vw, 64px); }
.concert-photos .media-sub { margin-bottom: 20px; }
.photo-grid.concert-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(260px, 26vw, 400px); }
.photo-grid.concert-grid img,
.photo-grid.concert-grid img:nth-child(n+4),
.photo-grid.concert-grid img:last-child { grid-column: span 1; }
@media (max-width: 720px) {
  .photo-grid.concert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 60vw, 320px); }
}

/* ================= Round 17 ================= */
/* Drawing: only a gentle tilt */
@media (min-width: 1101px) {
  .bio-drawing { transform: translateY(-50%) rotate(-4deg); }
}
.bio-full .bio-photo { object-position: 50% 22%; }

/* Articles: compact cards, three per row */
.articles { gap: 16px; }
@media (min-width: 900px) {
  .articles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-card:first-child { grid-column: auto; }
  .article-card:first-child blockquote { max-width: none; }
}
@media (min-width: 640px) and (max-width: 899px) { .articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.article-card { padding: 22px 22px 20px; gap: 12px; }
.article-card blockquote { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.4; }
.article-headline { font-size: 15px; line-height: 1.35; }
.article-source { font-size: 10.5px; }
.article-note { font-size: 11px; margin-top: -6px; }
.article-card .link-cta { font-size: 10.5px; }
@media (min-width: 1101px) { .bio-drawing { transform: translateY(-50%) rotate(-2deg); } }

/* ================= Menu never wraps: switch to the compact (mobile) menu instead ================= */
.nav a { white-space: nowrap; }
.nav ul { flex-wrap: nowrap; }
.site-header.nav-compact .menu-toggle { display: block; }
.site-header.nav-compact.menu-open .brand { opacity: 1; }
.site-header.nav-compact .nav {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--deep);
  color: var(--ivory);
  padding: 8px var(--gutter) 24px;
  border-top: 1px solid rgba(176, 138, 82, 0.3);
  display: none;
}
.site-header.nav-compact.menu-open .nav { display: block; }
.site-header.nav-compact .nav ul { flex-direction: column; gap: 0; }
.site-header.nav-compact .nav li + li { border-top: 1px solid rgba(215, 190, 165, 0.14); }
.site-header.nav-compact .nav a { display: block; padding-block: 16px; }
.site-header.nav-compact .nav a::after { right: auto; width: 28px; bottom: 10px; }
.site-header.nav-compact.menu-open { background: rgba(53, 16, 22, 0.97); }
.site-header.nav-compact .lang-switch { margin-left: 0; padding-left: 0; border-left: 0; margin-right: 18px; }
.brand-name, .brand-role { white-space: nowrap; }
.site-header .brand { flex-shrink: 0; }

/* "More press" button under the article cards */
.articles-more {
  display: flex;
  margin: 28px auto 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(90, 23, 35, 0.35);
  padding: 6px 0;
  cursor: pointer;
}
.articles-more .arrow { transform: rotate(90deg); }
.articles-more[aria-expanded="true"] .arrow { transform: rotate(-90deg); }
/* Four articles at first: two rows of two */
@media (min-width: 640px) {
  .articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Concert photos: two large photos first, the rest behind "More photos" */
.photo-grid.concert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(260px, 34vw, 520px); }
.concert-photos { scroll-margin-top: 90px; }
.concert-more {
  display: flex;
  margin: 26px auto 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(90, 23, 35, 0.35);
  padding: 6px 0;
  cursor: pointer;
}
.concert-more .arrow { transform: rotate(90deg); }
.concert-more[aria-expanded="true"] .arrow { transform: rotate(-90deg); }
/* Concert photos same size as the top row of Media: three per row */
.photo-grid.concert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(240px, 30vw, 440px); }
@media (max-width: 720px) { .photo-grid.concert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 60vw, 320px); } }