/* ============================================================
   VERONIKA BOLOTINA — shared stylesheet
   Used by index.html and every page in /work/
   ============================================================ */

/* ---- AVALLON ----------------------------------------------
   Avallon ships ONE weight (400). If anything asks for bold,
   the browser fakes it by drawing each letter twice with a
   tiny offset — that was the "written twice" look in v2.0.
   font-synthesis:none forbids that. Never go above 400 here.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Avallon';
  src: url('avallon.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --paper:      #FAF8F4;
  --paper-warm: #F0EDE7;
  --blush:      #F7EBEF;
  --mist:       #EDF0EA;
  --note:       #FBEFA8;   /* the sticky note */

  --ink:        #2E2A2C;   /* warm dark brown — nothing here is #000 */
  --ink-soft:   #6A6560;

  --rose:       #D4527A;   /* pastel accent — fills, borders, big type */
  --rose-deep:  #B23A5F;   /* readable rose — links, small labels */
  --rose-soft:  rgba(212, 82, 122, 0.10);

  --sage:       #6B8F71;
  --sage-deep:  #4F7256;
  --sage-soft:  rgba(107, 143, 113, 0.12);

  --line:       rgba(46, 42, 44, 0.13);
  --line-soft:  rgba(46, 42, 44, 0.06);

  --font-mark:    'Avallon', cursive;
  --font-display: 'Archivo', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-quote:   'Instrument Serif', serif;

  --maxw: 1240px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  font-family: var(--font-body); background: var(--paper); color: var(--ink);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { max-width:100%; display:block; }
a { color: inherit; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

.hero-name, .nav-mark, .contact-h, .foot-mark, .page-title-mark {
  font-weight: 400; font-synthesis: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.skip { position:absolute; left:-9999px; background: var(--ink); color: var(--paper); padding:12px 20px; z-index:999; }
.skip:focus { left:12px; top:12px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--rose-deep); outline-offset: 3px; border-radius:2px;
}

/* ============================================================
   LIVE CURSOR — ring trails, dot leads. Desktop only.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  body.cursor-on, body.cursor-on a, body.cursor-on button,
  body.cursor-on summary, body.cursor-on .card { cursor: none; }
  .cur, .cur-dot {
    position: fixed; top:0; left:0; z-index:999; pointer-events:none;
    border-radius:50%; transform: translate(-50%,-50%); will-change: transform;
  }
  .cur {
    width:34px; height:34px; border:1.5px solid var(--rose);
    transition: width .28s cubic-bezier(.2,1,.3,1), height .28s cubic-bezier(.2,1,.3,1),
                background .28s ease, opacity .2s ease;
  }
  .cur.hot { width:62px; height:62px; background: var(--rose-soft); }
  .cur.tap { width:24px; height:24px; background: var(--rose-soft); }
  .cur-dot { width:6px; height:6px; background: var(--rose); }
  .cur.hide, .cur-dot.hide { opacity:0; }
}
@media (hover: none), (pointer: coarse) { .cur, .cur-dot { display:none; } }

/* ============================================================
   NAV  —  with dropdowns
   ============================================================ */
.nav {
  position: sticky; top:0; z-index:90;
  background: rgba(250,248,244,.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  max-width: var(--maxw); margin:0 auto;
  padding: 14px clamp(20px,4vw,48px);
  display:flex; align-items:center; gap:24px; justify-content:space-between;
}
.nav-mark {
  font-family: var(--font-mark); font-size:1.75rem; line-height:1;
  color: var(--rose); text-decoration:none; white-space:nowrap;
}
.nav-links { display:flex; gap:6px; align-items:center; }

.nav-item { position: relative; }
.nav-item > a, .nav-item > button {
  font-family: var(--font-body);
  font-size:.74rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  color: var(--ink-soft); text-decoration:none; background:none; border:none;
  padding: 8px 12px; display:inline-flex; align-items:center; gap:6px;
  cursor:pointer; transition: color .25s;
}
.nav-item > a:hover, .nav-item > button:hover,
.nav-item.open > button, .nav-item > a.active { color: var(--ink); }
.nav-item > button::after {
  content:''; width:5px; height:5px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform: rotate(45deg) translateY(-1px);
  transition: transform .25s;
}
.nav-item.open > button::after { transform: rotate(-135deg) translateY(-1px); }

.dropdown {
  position:absolute; top:100%; left:0; min-width: 210px;
  background: var(--paper); border:1px solid var(--line);
  border-radius:4px; box-shadow: 0 12px 34px rgba(46,42,44,.10);
  padding:8px; display:none; flex-direction:column; gap:2px;
}
.nav-item.open .dropdown { display:flex; }
.dropdown a {
  font-size:.78rem; font-weight:400; letter-spacing:.02em; text-transform:none;
  color: var(--ink); text-decoration:none; padding:9px 12px; border-radius:3px;
  transition: background .2s, color .2s;
}
.dropdown a:hover { background: var(--rose-soft); color: var(--rose-deep); }
.dropdown .dd-label {
  font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink-soft); padding:10px 12px 4px;
}

.nav-social { display:flex; gap:14px; align-items:center; }
.nav-social a { color: var(--ink-soft); display:flex; transition: color .25s; }
.nav-social a:hover { color: var(--rose-deep); }
.nav-social svg { width:17px; height:17px; }

.burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; width:40px; height:40px; align-items:center; justify-content:center; }
.burger span { display:block; width:22px; height:2px; background: var(--ink); transition: transform .3s, opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position:fixed; inset:0; z-index:95; background: var(--paper);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px;
  opacity:0; pointer-events:none; transition: opacity .3s; overflow-y:auto; padding:80px 20px;
}
.mobile-menu.open { opacity:1; pointer-events:auto; }
.mobile-menu a {
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(1.2rem,5vw,1.8rem); letter-spacing:-.02em; text-transform:uppercase;
  text-decoration:none; color: var(--ink); padding:9px 16px; min-height:46px; display:flex; align-items:center;
}
.mobile-menu a.sub { font-family: var(--font-body); font-weight:400; font-size:.95rem; text-transform:none; color: var(--ink-soft); min-height:40px; padding:6px 16px; }
.mobile-menu a:hover { color: var(--rose-deep); }

/* ============================================================
   NEWS TICKER  —  every item is a link
   ============================================================ */
.ticker { background: var(--blush); color: var(--ink); overflow:hidden; border-bottom:1px solid var(--line-soft); }
.ticker-track { display:flex; width:max-content; animation: slide 60s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-run { display:flex; align-items:center; flex:none; }
.tick { display:flex; align-items:center; gap:10px; padding:11px 24px; font-size:.76rem; white-space:nowrap; }
.tick a { color: var(--ink); text-decoration:none; border-bottom:1px solid var(--rose); padding-bottom:1px; transition: color .2s; }
.tick a:hover { color: var(--rose-deep); }
.tick .when { font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.64rem; color: var(--rose-deep); }
.tick .dot { width:5px; height:5px; border-radius:50%; background: var(--rose); flex:none; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   STICKY NOTE  —  Veronika edits this by hand
   ============================================================ */
.sticky {
  position: relative;
  background: var(--note);
  padding: 22px 24px 20px;
  max-width: 300px;
  transform: rotate(-1.6deg);
  box-shadow: 0 10px 26px rgba(46,42,44,.13);
  font-family: var(--font-body);
}
.sticky::before {
  content:''; position:absolute; top:-9px; left:50%; transform: translateX(-50%) rotate(2deg);
  width:82px; height:22px; background: rgba(250,248,244,.6); border:1px solid rgba(46,42,44,.07);
}
.sticky .desk-text em { font-style: italic; }
.sticky .when { margin-top:14px; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color: rgba(46,42,44,.4); }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: clamp(48px,8vw,88px) 0 clamp(36px,5vw,60px); }
.hero-top { display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px,5vw,60px); align-items:end; }
.hero-name {
  font-family: var(--font-mark);
  font-size: clamp(3.8rem,12.5vw,10rem); line-height:.82; letter-spacing:.005em;
  color: var(--rose); margin-bottom:.14em;
}
.hero-roles {
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(.88rem,2vw,1.3rem); letter-spacing:.02em; text-transform:uppercase;
  display:flex; flex-wrap:wrap; align-items:center; gap:0 12px;
}
.hero-roles .sep { color: var(--rose); }
.hero-tag {
  font-family: var(--font-quote); font-style:italic;
  font-size: clamp(1.1rem,2.3vw,1.55rem); line-height:1.35; color: var(--ink);
  margin-top:18px; max-width:34ch;
}
.hero-tag strong { color: var(--rose-deep); font-weight:400; }
.hero-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; align-items:center; }

/* portrait with the sticky note pinned over its bottom-left corner */
.hero-right { position:relative; }
.hero-portrait { aspect-ratio:4/5; border-radius:3px; overflow:hidden; background: var(--paper-warm); }
.hero-portrait img { width:100%; height:100%; object-fit:cover; }
/* The note used to be absolutely positioned beside the portrait, which meant
   it landed on top of the photo on any screen that was not wide enough.
   Sitting it under the photo in normal flow can never overlap, and the small
   offset and tilt keep it looking pinned on rather than boxed in. */
.hero-right { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hero-portrait { width: 100%; }
.hero-right .sticky {
  position: static; max-width: 210px;
  margin-left: -14px;
  transform: rotate(-1.6deg);
  padding: 15px 17px 14px;
}
.hero-right .sticky .desk-title,
.hero-right .sticky .desk-text { font-size: .86rem; line-height: 1.34; }
.hero-right .sticky .when { margin-top: 9px; font-size: .5rem; }
.hero-right .sticky::before { width: 62px; height: 17px; top: -7px; }
.hero-right .desk-tools { margin-top: 9px; gap: 6px; }
.hero-right .desk-tools button { font-size: .52rem; padding: 5px 9px; }

.chip {
  font-size:.66rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 15px; border:1px solid var(--line); border-radius:100px;
  color: var(--ink-soft); text-decoration:none; transition: all .25s;
  line-height:1.5;
}
.chip:hover { border-color: var(--rose); color: var(--rose-deep); }
.chip.hot { background: var(--rose); border-color: var(--rose); color:#fff; }
.chip.leaf { background: var(--sage-soft); border-color: var(--sage); color: var(--sage-deep); }

/* Featured film player — poster first, embed on click */
.feature {
  margin-top: clamp(28px,4vw,48px); position:relative; aspect-ratio:16/9;
  border-radius:4px; overflow:hidden; background: var(--paper-warm); cursor:pointer;
}
.feature img, .feature video { width:100%; height:100%; object-fit:cover; }
.feature-play {
  position:absolute; inset:0; margin:auto; width:88px; height:88px; border-radius:50%;
  background: var(--rose); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition: transform .3s;
}
.feature:hover .feature-play { transform: scale(1.08); }
.feature-play svg { width:27px; height:27px; fill:#fff; margin-left:4px; }
.feature-label {
  position:absolute; left:0; right:0; bottom:0; padding:44px 22px 16px;
  background: linear-gradient(transparent, rgba(46,42,44,.8)); color:#fff; pointer-events:none;
}
.feature-label .k { font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; opacity:.85; }
.feature-label .t { font-family: var(--font-display); font-weight:700; font-size: clamp(1.1rem,2.6vw,1.8rem); letter-spacing:-.02em; }

/* ============================================================
   SECTIONS
   ============================================================ */
.sec { padding: clamp(44px,6vw,80px) 0 0; }
.sec-head {
  display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap;
  padding-top:24px; border-top:2px solid var(--rose); margin-bottom: clamp(22px,3vw,36px);
}
.sec-head h2 {
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(1.8rem,5vw,3.4rem); letter-spacing:-.035em; line-height:.95; text-transform:uppercase;
}
.sec-head .kicker { font-size:.7rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-soft); }
.sec-note { font-family: var(--font-quote); font-style:italic; font-size:1.05rem; color: var(--ink-soft); max-width:64ch; margin:-12px 0 30px; }
.sub-head {
  font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color: var(--rose-deep); margin: clamp(28px,4vw,44px) 0 18px; padding-bottom:9px; border-bottom:1px solid var(--line);
}

/* ============================================================
   CARDS  —  poster still, video loop on hover
   ============================================================ */
.grid { display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(22px,3vw,38px); }
.grid-3 { grid-template-columns: repeat(3,1fr); }

.card { text-decoration:none; color:inherit; display:block; }
.card-media {
  position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:3px; margin-bottom:14px;
  background: linear-gradient(150deg, var(--paper-warm), #ddd3c0);
  display:flex; align-items:center; justify-content:center;
}
.card-media::before {
  content: attr(data-fallback);
  font-family: var(--font-display); font-weight:800; font-size: clamp(1rem,2vw,1.5rem);
  letter-spacing:-.02em; text-transform:uppercase; color: rgba(46,42,44,.18);
  padding:20px; text-align:center; line-height:1.1;
}
.card-media img, .card-media video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: opacity .45s ease, transform .6s cubic-bezier(.2,1,.3,1);
}
.card-media video { opacity:0; }
.card:hover .card-media video, .card:focus-within .card-media video { opacity:1; }
.card:hover .card-media img { transform: scale(1.03); }

.badges { position:absolute; left:10px; bottom:10px; display:flex; gap:6px; flex-wrap:wrap; z-index:2; }
.badge {
  font-size:.58rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  background: rgba(250,248,244,.93); color: var(--ink);
  backdrop-filter: blur(6px); padding:4px 9px; border-radius:2px;
}
.badge.hot { background: var(--rose); color:#fff; }

.card-title {
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(1.15rem,2vw,1.6rem); letter-spacing:-.025em; line-height:1.1; margin-bottom:6px;
}
.card:hover .card-title { color: var(--rose-deep); }
.card-log { font-size:.88rem; font-weight:300; line-height:1.6; color: var(--ink-soft); margin-bottom:9px; max-width:48ch; }
.card-meta { font-size:.72rem; letter-spacing:.05em; color: var(--ink-soft); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.card-meta .role { color: var(--rose-deep); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; }
.card.wide { grid-column: 1 / -1; }
.card.wide .card-media { aspect-ratio: 21/9; }
.card.wide .card-title { font-size: clamp(1.5rem,3.2vw,2.3rem); }

/* ============================================================
   WRITING LIST
   ============================================================ */
.writing-list { border-top:1px solid var(--line); }
.w-item { border-bottom:1px solid var(--line); padding:26px 0; }
.w-head { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:start; }
.w-title { font-family: var(--font-display); font-weight:700; font-size: clamp(1.2rem,2.5vw,1.85rem); letter-spacing:-.03em; text-transform:uppercase; line-height:1.05; margin-bottom:8px; }
.w-title a { text-decoration:none; }
.w-title a:hover { color: var(--rose-deep); }
.w-tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:11px; }
.w-tag { font-size:.62rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; padding:4px 10px; border-radius:100px; border:1px solid var(--sage); color: var(--sage-deep); }
.w-tag.status { border-color: var(--line); color: var(--ink-soft); font-weight:400; }
.w-tag.hot { border-color: var(--rose); color: var(--rose-deep); }
.w-desc { font-size:.92rem; font-weight:300; line-height:1.65; color: var(--ink-soft); max-width:64ch; }
.w-year { font-family: var(--font-display); font-weight:800; font-size:1.05rem; color: var(--line); letter-spacing:-.02em; }

.excerpt { margin-top:16px; }
.excerpt summary {
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:9px;
  font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color: var(--rose-deep); padding:8px 0;
}
.excerpt summary::-webkit-details-marker { display:none; }
.excerpt summary::after { content:'＋'; font-size:.95rem; line-height:1; }
.excerpt[open] summary::after { content:'－'; }
.excerpt summary:hover { color: var(--ink); }
.script {
  margin-top:14px; padding: clamp(20px,4vw,38px); background:#fffdf8; border:1px solid var(--line);
  border-radius:2px; font-family:'Courier New',Courier,monospace; font-size:.83rem; line-height:1.55;
  max-height:460px; overflow-y:auto; box-shadow: 0 1px 0 var(--line), 0 14px 34px rgba(46,42,44,.06);
}
.script .sl { text-transform:uppercase; margin:1.5em 0 .6em; letter-spacing:.04em; }
.script .ch { text-transform:uppercase; margin:1.2em 0 0 12%; }
.script .pa { margin:0 0 0 9%; font-style:italic; }
.script .di { margin:0 18% 0 6%; }
.script .ac { margin:.7em 0; }
.script .tc { text-transform:uppercase; margin:1.4em 0; letter-spacing:.06em; }
.script-foot { margin-top:14px; font-family: var(--font-body); font-size:.74rem; color: var(--ink-soft); font-style:italic; }

/* ============================================================
   PERFORMER
   ============================================================ */
.perform { display:grid; grid-template-columns:1fr 1fr; gap: clamp(28px,5vw,58px); align-items:center; }
.perform-text p { font-size:.95rem; font-weight:300; line-height:1.75; margin-bottom:14px; max-width:58ch; }
.perform-photo { aspect-ratio:3/4; border-radius:3px; overflow:hidden; background: var(--paper-warm); }
.perform-photo img { width:100%; height:100%; object-fit:cover; }
.skill-list { list-style:none; margin-top:22px; display:grid; gap:10px; }
.skill-list li { display:flex; gap:13px; align-items:flex-start; font-size:.88rem; color: var(--ink-soft); line-height:1.5; }
.skill-list li::before { content:''; flex:none; width:7px; height:7px; margin-top:7px; border-radius:50%; background: var(--rose); }
.skill-list strong { color: var(--ink); font-weight:600; }

/* ============================================================
   QUOTES + PRESS
   ============================================================ */
.quotes { display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(20px,3vw,34px); }
.quote { border-left:3px solid var(--rose); padding:4px 0 4px 22px; }
.quote blockquote { font-family: var(--font-quote); font-size: clamp(1.05rem,1.9vw,1.4rem); line-height:1.35; margin-bottom:12px; }
.quote cite { font-style:normal; font-size:.72rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); }
.quote cite a { color: var(--rose-deep); text-decoration:none; border-bottom:1px solid var(--rose-soft); }
.quote cite a:hover { border-color: var(--rose); }
.press-row { display:flex; flex-wrap:wrap; gap:10px; margin-top: clamp(26px,4vw,40px); }

/* ============================================================
   CREDENTIALS
   ============================================================ */
.creds { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,4vw,46px); }
.cred-col h3 { font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color: var(--rose-deep); padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.cred-col ul { list-style:none; display:grid; gap:13px; }
.cred-col li { font-size:.85rem; line-height:1.4; }
.cred-col li .for { display:block; font-size:.72rem; color: var(--ink-soft); margin-top:2px; }
.cred-col li .yr { float:right; color: var(--ink-soft); font-size:.74rem; margin-left:10px; }

/* ============================================================
   ABOUT
   ============================================================ */
.about { display:grid; grid-template-columns:.85fr 1.15fr; gap: clamp(30px,5vw,60px); align-items:start; }
.about-photo { aspect-ratio:3/4; border-radius:3px; overflow:hidden; background: var(--paper-warm); }
.about-photo img { width:100%; height:100%; object-fit:cover; }
.scene {
  background: var(--rose-soft); border-left:3px solid var(--rose); padding:22px 26px; margin-bottom:26px;
  font-family:'Courier New',Courier,monospace; font-size:.82rem; line-height:1.6;
}
.scene .ch { text-transform:uppercase; letter-spacing:.05em; font-weight:bold; display:block; margin-top:14px; }
.scene .ch:first-child { margin-top:0; }
.scene .pa { font-style:italic; color: var(--ink-soft); }
.about-text p { font-size:.96rem; font-weight:300; line-height:1.78; margin-bottom:15px; max-width:64ch; }
.about-text .lead { font-family: var(--font-quote); font-style:italic; font-size:1.3rem; line-height:1.4; color: var(--ink); font-weight:400; }
.about-text em { font-family: var(--font-quote); font-style:italic; font-size:1.05em; }

.btn {
  display:inline-flex; align-items:center; gap:9px; margin-top:16px; padding:13px 26px;
  border:2px solid var(--ink); border-radius:100px;
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; color: var(--ink); transition: all .25s;
}
.btn:hover { background: var(--rose); border-color: var(--rose); color:#fff; }
.btn.primary { background: var(--rose-deep); border-color: var(--rose-deep); color:#fff; }
.btn.primary:hover { background: var(--ink); border-color: var(--ink); }

/* ============================================================
   CONTACT + FOOTER
   ============================================================ */
.contact { padding: clamp(56px,8vw,100px) 0 clamp(36px,5vw,64px); text-align:center; }
.contact-h { font-family: var(--font-mark); font-size: clamp(3rem,10vw,7.5rem); line-height:.9; color: var(--rose); margin-bottom:26px; }
.contact-lines { display:grid; gap:8px; margin-bottom:28px; }
.contact-lines a { font-size:1.02rem; text-decoration:none; border-bottom:1px solid var(--line); }
.contact-lines a:hover { border-color: var(--rose); color: var(--rose-deep); }
.contact-lines .where { font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); margin-top:6px; }

footer { background: var(--mist); color: var(--ink); padding:42px 0 26px; margin-top: clamp(40px,6vw,80px); }
.foot-inner { display:flex; justify-content:space-between; align-items:center; gap:26px; flex-wrap:wrap; }
.foot-mark { font-family: var(--font-mark); font-size:1.7rem; color: var(--rose); }
.foot-links { display:flex; gap:20px; flex-wrap:wrap; }
.foot-links a { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); text-decoration:none; }
.foot-links a:hover { color: var(--rose-deep); }
.foot-copy { margin-top:30px; padding-top:18px; border-top:1px solid var(--line); font-size:.68rem; color: var(--ink-soft); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }

/* ============================================================
   PROJECT PAGE  (/work/*.html)
   ============================================================ */
.back {
  display:inline-flex; align-items:center; gap:8px; margin: 32px 0 0;
  font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color: var(--ink-soft); text-decoration:none;
}
.back:hover { color: var(--rose-deep); }

.page-head { padding: 28px 0 clamp(28px,4vw,48px); }
.page-kicker { font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color: var(--rose-deep); margin-bottom:12px; }
.page-title { font-family: var(--font-display); font-weight:800; font-size: clamp(2.2rem,7vw,4.8rem); letter-spacing:-.04em; line-height:.94; text-transform:uppercase; margin-bottom:16px; }
.page-log { font-family: var(--font-quote); font-size: clamp(1.1rem,2.2vw,1.5rem); line-height:1.4; max-width:60ch; color: var(--ink); }

.facts { display:flex; flex-wrap:wrap; gap:0; margin: clamp(26px,4vw,40px) 0; border-top:1px solid var(--line); }
.fact { flex:1 1 150px; padding:16px 20px 16px 0; border-bottom:1px solid var(--line); }
.fact dt { font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:5px; }
.fact dd { font-size:.9rem; line-height:1.4; }

.player { position:relative; aspect-ratio:16/9; border-radius:4px; overflow:hidden; background: var(--paper-warm); cursor:pointer; margin-top: 26px; }
.player img, .player video, .player iframe {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0;
  transition: opacity .45s ease;
}
/* the clip fades in over the still while the pointer is on it */
.player video { opacity:0; }
.player:hover video, .player:focus-within video { opacity:1; }
.player:has(iframe) { cursor:default; }

/* ---- project page body: credits column beside the text ---- */
.proj {
  display:grid; grid-template-columns: 260px 1fr;
  gap: clamp(28px,5vw,64px);
  padding: clamp(30px,4vw,52px) 0 clamp(20px,3vw,32px);
  align-items:start;
}
.proj-credits p {
  font-size:.78rem; line-height:1.55; color: var(--ink-soft); margin-bottom:6px;
}
.proj-credits p b { color: var(--ink); font-weight:600; }
.proj-title {
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(2rem,6vw,4.2rem); letter-spacing:-.04em; line-height:.95;
  text-transform:uppercase; margin:6px 0 18px;
}
.proj-log {
  font-family: var(--font-quote); font-size: clamp(1.1rem,2.1vw,1.5rem);
  line-height:1.42; max-width:60ch;
}
.proj-status {
  margin-top:20px; font-size:.76rem; font-weight:500; letter-spacing:.06em;
  color: var(--rose-deep); line-height:1.6; max-width:60ch;
}

.proj-nav {
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:26px; margin-top: clamp(34px,5vw,56px); border-top:1px solid var(--line);
}
.proj-nav a {
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink-soft); text-decoration:none; transition: color .25s;
}
.proj-nav a:hover { color: var(--rose-deep); }

.stills-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:14px; }
.stills-grid img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:3px; }

/* fallback line under a player — YouTube blocks embeds when the page is
   opened straight off the disk, so this always gives a way through */
.player-note { margin-top:10px; font-size:.76rem; color: var(--ink-soft); }
.player-note a { color: var(--rose-deep); }

/* illustrations keep their own proportions instead of being cropped */
.art-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:18px; align-items:start; }
.art-grid img { width:100%; height:auto; border-radius:3px; background: var(--paper-warm); }

/* posters are portrait — never crop them, just centre them */
.poster-wrap { display:flex; justify-content:center; }
.poster-wrap img { max-width:520px; width:100%; height:auto; border-radius:3px; box-shadow:0 14px 40px rgba(46,42,44,.12); }

.credits-list { columns: 2; column-gap: clamp(24px,4vw,48px); font-size:.87rem; line-height:1.75; }
.credits-list p { break-inside: avoid; color: var(--ink-soft); }
.credits-list strong { color: var(--ink); font-weight:600; }

.linkrow { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }

/* ============================================================
   REVEAL / RESPONSIVE / MOTION / PRINT
   ============================================================ */
.rv { opacity:0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity:1; transform:none; }

@media (max-width: 980px) {
  .nav-links, .nav-social { display:none; }
  .burger { display:flex; }
  .hero-top { grid-template-columns:1fr; }
  .hero-portrait { display:none; }
  .hero-right .sticky { position:static; max-width:100%; margin-top:8px; }
  .grid, .grid-3, .quotes, .perform, .about { grid-template-columns:1fr; }
  .creds { grid-template-columns:1fr; gap:30px; }
  .card.wide .card-media { aspect-ratio:16/10; }
  .credits-list { columns:1; }
  .sticky { max-width:100%; transform:none; }
  .proj { grid-template-columns:1fr; gap:24px; }
  .proj-credits { order:2; padding-top:18px; border-top:1px solid var(--line); }
  .proj-body { order:1; }
}
@media (max-width: 560px) {
  .w-head { grid-template-columns:1fr; }
  .w-year { display:none; }
  .script { font-size:.74rem; padding:18px; }
  .script .ch { margin-left:4%; }
  .script .di { margin:0 4% 0 2%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .rv { opacity:1; transform:none; transition:none; }
  /* iOS Reduce Motion and Low Power Mode both land here. A frozen ticker
     shows half a sentence and looks broken, so let it be swiped by hand
     instead of standing still. */
  .ticker { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ticker-track { animation: none; width: max-content; }
  .ticker-run + .ticker-run { display: none; }   /* the loop copy is pointless here */
  .card-media img, .card-media video, .feature-play { transition:none; }
  .card-media video { display:none; }
  .cur, .cur-dot { display:none !important; }
  body.cursor-on, body.cursor-on a, body.cursor-on button, body.cursor-on .card { cursor:auto; }
}
@media print {
  .nav, .ticker, .feature, .player, .burger, .mobile-menu, footer, .cur, .cur-dot { display:none; }
  body { background:#fff; }
  .rv { opacity:1; transform:none; }
}

/* "Latest work" pill on the hero player */
.latest-badge {
  display:inline-block; background: var(--rose); color:#fff;
  padding:3px 9px; border-radius:100px; margin-right:8px;
  font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}

/* sticky note: editable in place */
.desk-tools { display:flex; gap:8px; margin-top:12px; }
.desk-tools button {
  font-family: var(--font-body); font-size:.58rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  background: rgba(46,42,44,.07); border:none; border-radius:100px;
  padding:6px 11px; cursor:pointer; color: rgba(46,42,44,.65); transition: all .2s;
}
.desk-tools button:hover { background: var(--rose); color:#fff; }

/* ============================================================
   LIGHTBOX — click any still to see it full size
   ============================================================ */
.stills-grid img, .art-grid img { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(46,42,44,.94);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 3px; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; background: rgba(250,248,244,.14); border: none; cursor: pointer;
  color: var(--paper); width: 46px; height: 46px; border-radius: 50%;
  font-size: 1.2rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: var(--rose); }
.lightbox-close { top: 18px; right: 18px; }
.lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-count {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: rgba(250,248,244,.6); font-size: .72rem; letter-spacing: .1em;
}
@media (max-width: 560px) { .lightbox-prev { left: 6px; } .lightbox-next { right: 6px; } }

/* poster covers that link straight out instead of embedding */
.player-link { display: block; text-decoration: none; }


/* ============================================================
   STICKY NOTE FIELDS
   A real input and textarea. Both inherit exactly the same font,
   size and colour, so the heading and the body cannot end up
   looking like two different things.
   ============================================================ */
.sticky .desk-title,
.sticky .desk-text {
  display: block; width: 100%;
  font-family: var(--font-quote);
  font-size: 1.02rem; line-height: 1.35;
  color: var(--ink);
  background: transparent;
  border: none; border-bottom: 1px dashed rgba(46,42,44,.25);
  border-radius: 0; padding: 2px 0 4px; margin: 0 0 8px;
  outline: none; resize: none; overflow: hidden;
  -webkit-appearance: none; appearance: none;
}
.sticky .desk-title:hover, .sticky .desk-text:hover { border-bottom-color: rgba(46,42,44,.5); }
.sticky .desk-title:focus, .sticky .desk-text:focus {
  border-bottom-color: var(--rose-deep); background: rgba(255,255,255,.5);
}
.sticky .desk-title::placeholder, .sticky .desk-text::placeholder {
  color: rgba(46,42,44,.35); font-style: italic;
}

/* the heading reads as a heading without changing typeface or size */
.sticky .desk-title { color: rgba(46,42,44,.62); margin-bottom: 10px; }

/* tells you whether the note is a private draft or the published text */
.desk-state {
  margin-top: 10px; font-family: var(--font-body);
  font-size: .55rem; letter-spacing: .06em; line-height: 1.4;
  color: rgba(46,42,44,.45);
}
.desk-state.is-draft { color: var(--rose-deep); font-weight: 600; }

/* ============================================================
   MOBILE
   ------------------------------------------------------------
   The earlier breakpoints only rearranged the layout into one
   column. Everything kept desktop's tight padding and small type,
   which is what made it feel cramped on a phone. This block gives
   the phone its own spacing, type scale and tap targets.
   ============================================================ */
@media (max-width: 700px) {

  .wrap { padding: 0 22px; }
  body { font-size: 16px; }

  /* ---- hero: name was colliding with the ticker above it ---- */
  .hero { padding: 26px 0 34px; }
  .hero-top { gap: 26px; }
  .hero-name {
    font-size: clamp(2.4rem, 13vw, 4rem);
    line-height: 1.02;          /* .88 let the tall strokes hit the ticker */
    margin-bottom: .18em;
    word-break: break-word;      /* the long name must never run off screen */
  }
  .hero-roles { font-size: .8rem; gap: 0 8px; }
  .hero-tag { font-size: 1.12rem; margin-top: 14px; max-width: none; }
  .hero-meta { gap: 10px; margin-top: 20px; }

  /* the portrait belongs on a phone too, just wider and shorter */
  .hero-right { display: flex; flex-direction: column; gap: 18px; }
  .hero-portrait { display: block; aspect-ratio: 4/3; border-radius: 4px; }

  /* the note sits in the flow, with the same margins as everything else */
  .hero-right .sticky {
    max-width: 100%; margin: 0; transform: none;
    padding: 20px 22px 18px;
  }
  .hero-right { gap: 20px; }
  .hero-right .sticky .desk-title,
  .hero-right .sticky .desk-text { font-size: 1rem; }
  .desk-tools button { min-height: 36px; }

  /* ---- type and spacing ---- */
  .card-log, .w-desc, .about-text p, .perform-text p { font-size: .95rem; line-height: 1.7; }
  .card-meta, .cred-col li { font-size: .8rem; }
  .skill-list li { font-size: .92rem; }

  .sec { padding-top: 42px; }
  .sec-head { padding-top: 22px; margin-bottom: 22px; }
  .sec-head h2 { font-size: 1.9rem; }
  .sec-note { font-size: 1rem; margin: -6px 0 24px; }
  .sub-head { margin: 34px 0 16px; }

  .grid, .grid-3 { gap: 34px; }
  .card-media { margin-bottom: 12px; }
  .card-title { font-size: 1.3rem; }
  .card.wide .card-title { font-size: 1.45rem; }

  .w-item { padding: 22px 0; }
  .w-title { font-size: 1.25rem; }
  .w-tags { gap: 6px; }

  /* ---- finger-sized targets ---- */
  .chip, .w-tag, .press-row a, .foot-links a { min-height: 38px; display: inline-flex; align-items: center; }
  .chip { padding: 9px 15px; font-size: .7rem; }
  .btn { padding: 15px 26px; font-size: .74rem; }
  .excerpt summary { padding: 12px 0; font-size: .74rem; }

  .stills-grid, .art-grid { grid-template-columns: 1fr; gap: 12px; }

  /* ---- project pages ---- */
  .page-head { padding: 18px 0 26px; }
  .proj { padding: 24px 0 16px; gap: 22px; }
  .proj-title { font-size: 2rem; line-height: 1.02; }
  .proj-log { font-size: 1.1rem; }
  .facts { margin: 24px 0; }
  .fact { flex: 1 1 100%; padding: 14px 0; }
  .credits-list { font-size: .92rem; line-height: 1.8; }
  .proj-nav { flex-direction: column; gap: 12px; text-align: center; }
  .proj-nav a { min-height: 40px; display: flex; align-items: center; justify-content: center; }

  .tick { padding: 10px 16px; font-size: .72rem; }

  /* ---- contact: the script heading was landing on the CV button ---- */
  .about-text .btn { margin-bottom: 8px; }
  .contact { padding: 56px 0 30px; }
  .contact-h {
    font-size: clamp(2.4rem, 14vw, 3.6rem);
    line-height: 1.15;          /* .9 clipped the descenders into the button */
    margin-bottom: 20px;
  }
  .contact-lines a { font-size: 1rem; word-break: break-word; }

  .quotes { gap: 26px; }
  .quote blockquote { font-size: 1.15rem; }
  .creds { gap: 26px; }
  footer { padding: 32px 0 20px; }
  .foot-copy { flex-direction: column; gap: 8px; text-align: center; }
}

/* very narrow phones */
@media (max-width: 380px) {
  .wrap { padding: 0 16px; }
  .hero-name { font-size: 2.3rem; }
  .sec-head h2 { font-size: 1.6rem; }
  .proj-title { font-size: 1.7rem; }
}

/* the About credentials are long lines, not short tags: more padding,
   looser letter spacing and real space between them */
.about-text .hero-meta { gap: 12px; margin-top: 30px; }
.about-text .chip {
  padding: 11px 18px; letter-spacing: .06em; line-height: 1.6;
  border-radius: 22px;
}
.contact-lines { gap: 12px; margin-bottom: 34px; }
.contact-lines .where { margin-top: 12px; letter-spacing: .12em; line-height: 1.7; }

@media (max-width: 700px) {
  .about-text .hero-meta { gap: 10px; margin-top: 26px; }
  .about-text .chip { padding: 12px 16px; font-size: .68rem; letter-spacing: .05em; }
  .contact-lines { gap: 14px; }
  .contact-lines .where { line-height: 1.8; }
}

/* what visitors see: the note without any editing furniture */
.sticky .desk-title-static {
  font-family: var(--font-quote); font-size: 1.02rem; line-height: 1.35;
  font-weight: 400; color: rgba(46,42,44,.62); margin-bottom: 10px;
}
.sticky .desk-text-static {
  font-family: var(--font-quote); font-size: 1.02rem; line-height: 1.35;
  color: var(--ink);
}
.hero-right .sticky .desk-title-static,
.hero-right .sticky .desk-text-static { font-size: .86rem; line-height: 1.34; }
@media (max-width: 700px) {
  .hero-right .sticky .desk-title-static,
  .hero-right .sticky .desk-text-static { font-size: 1rem; }
}
/* line breaks typed in the note survive for visitors */
.sticky .desk-text-static { white-space: pre-line; }
/* the commissioned list is several entries, not one long sentence */
.w-desc + .w-desc { margin-top: 7px; }