/* ===========================================================================
   Gideok Moon — EPK
   Paper base · one restrained accent · Fraunces + Space Mono + Inter
   Light and dark share every rule below — only the custom properties in
   :root / :root[data-theme="dark"] change between them.

   Reference point: colinvallon.com — a quiet serif carries every heading
   (no bold display type shouting), photography never runs edge-to-edge,
   buttons are thin-bordered text, section labels are small italic serif
   caps rather than technical-looking mono tags. charmainelee.com sets the
   whitespace/no-chrome baseline underneath it.
   =========================================================================== */

:root{
  --paper:    #f7f5ef;
  --paper-2:  #ece8dc;
  --paper-3:  #ffffff;

  --ink:      #16140f;
  --ink-2:    #514c40;
  --ink-3:    #8c8574;

  --line:     #e6e1d2;
  --line-2:   #d3ccb9;

  --accent:   #4f8a5e;
  --nav-veil: rgba(247,245,239,.92);
  --img-edge: transparent;

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono:  "Space Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --pad: 24px;
  --max: 1180px;
  --player-h: 0px;

  --ease: cubic-bezier(.2,.7,.3,1);

  color-scheme: light;
}

/* Dark mode: not an inverted palette, a deliberately softer one — near-black
   instead of pure black, off-white instead of pure white, so it's actually
   restful at night rather than just "light mode with the switch flipped". */
:root[data-theme="dark"]{
  --paper:    #16140f;
  --paper-2:  #211e17;
  --paper-3:  #2a251c;

  --ink:      #f2efe6;
  --ink-2:    #b6ad9c;
  --ink-3:    #8f8672;

  --line:     #2a2620;
  --line-2:   #3b352a;

  --accent:   #6fae7c;
  --nav-veil: rgba(22,20,15,.88);
  --img-edge: var(--line-2);

  color-scheme: dark;
}

@media (min-width:900px){ :root{ --pad:56px; } }

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--player-h);
  overflow-x:hidden;
  transition:background .25s var(--ease), color .25s var(--ease);
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

/* --- ambient background ---------------------------------------------------
   A fixed, low-opacity backdrop so it never competes with text — visible as
   texture in the empty space, not as decoration you consciously notice. */
.bg-lines{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}

.mono{ font-family:var(--mono); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:12px 18px; font-weight:500;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{ outline:1px solid var(--accent); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--pad); }

/* --- shared type ---------------------------------------------------------- */

/* section labels read as quiet italic serif caps, not technical mono tags */
.eyebrow{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 30px;
}

.sec__h{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(24px, 3.4vw, 34px);
  line-height:1.18; letter-spacing:-.005em;
  margin:0 0 56px;
}

.grp{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:13px; letter-spacing:.02em;
  color:var(--ink-3);
  margin:0 0 24px; padding-bottom:12px;
  border-bottom:1px solid var(--line-2);
}

.sec{ padding:100px 0; position:relative; }
.sec + .sec{ border-top:1px solid var(--line); }
@media (min-width:900px){ .sec{ padding:150px 0; } }

.link{
  color:var(--ink); text-decoration:none; font-weight:500;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid var(--line-2); padding-bottom:4px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.link:hover{ color:var(--accent); border-color:var(--accent); }

/* --- buttons — thin-bordered, quiet -------------------------------------- */

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:14px 24px; border-radius:0;
  text-decoration:none; cursor:pointer;
  border:1px solid var(--ink);
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn--play{ background:var(--ink); color:var(--paper); }
.btn--play:hover{ background:var(--accent); border-color:var(--accent); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }

.btn__ico{
  width:0; height:0;
  border-left:9px solid currentColor;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.btn--playing .btn__ico{
  width:9px; height:12px; border:0;
  background:linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px);
}

/* --- nav ------------------------------------------------------------------ */

.nav{
  position:sticky; top:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.nav.is-stuck{
  background:var(--nav-veil);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--line-2);
}
.nav__id{
  font-family:var(--serif); font-weight:500; font-size:17px; text-transform:uppercase;
  text-decoration:none; letter-spacing:.05em; white-space:nowrap;
}
.nav__right{ display:flex; align-items:center; gap:24px; }

.nav__links{ display:none; align-items:center; gap:32px; }
.nav__links a{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none;
  transition:color .2s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }

/* the little light/dark switch — same weight as any other nav link, no icon,
   just the word for the mode it will switch *to*. Lives outside .nav__links
   so it stays visible even where the anchor nav collapses on mobile. */
.theme-toggle{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); background:transparent; cursor:pointer;
  border:1px solid var(--line-2); border-radius:0; padding:6px 12px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--ink-3); }

@media (min-width:900px){
  .nav__links{ display:flex; }
}

/* --- hero — text on paper, photo inset and bounded -------------------------- */

.hero{ position:relative; overflow:hidden; padding:132px 0 96px; }

.hero__inner{
  position:relative; z-index:1;
  max-width:var(--max); margin:0 auto; padding:0 var(--pad);
  display:grid; gap:56px;
}

.hero__text{ max-width:38ch; }

.hero__kicker{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 24px; font-weight:600;
  font-family:var(--mono);
}
.hero__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px, 5vw, 48px);
  line-height:1.08; letter-spacing:-.01em;
  margin:0 0 28px;
  color:var(--ink);
}
.hero__title em{ display:block; font-style:italic; color:var(--accent); }

.hero__meta{
  display:grid; gap:4px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:34px;
  font-family:var(--mono);
}
.dot{ display:none; width:4px; height:4px; background:var(--accent); }
@media (min-width:560px){
  .hero__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
  .dot{ display:inline-block; }
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* the photo itself: bounded, never full-width — a plain hard-edged
   rectangle, same treatment as every other photo on the page. In dark
   mode a subtle edge keeps a near-black shot from bleeding into an
   equally-dark page. */
.hero__photo{
  position:relative;
  aspect-ratio:4/5;
  max-width:420px;
  width:100%;
  margin:0 auto;
  border:1px solid var(--img-edge);
}
.hero__still{
  position:absolute; inset:0;
  background:var(--paper-2) center/cover no-repeat;
}
.hero__still:not(.has-img)::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(150deg, #6f8154, #46525a);
}
.hero__video{ position:absolute; inset:-2px; opacity:0; transition:opacity 1.2s var(--ease); pointer-events:none; }
.hero__video.is-on{ opacity:.92; }
.hero__video iframe{
  position:absolute; top:50%; left:50%;
  width:100vw; height:56.25vw; min-height:100%; min-width:177.77vh;
  transform:translate(-50%,-50%); border:0;
}

@media (min-width:900px){
  .hero{ padding:150px 0 110px; }
  .hero__inner{
    grid-template-columns:1.05fr .95fr; align-items:center; gap:64px;
  }
  /* on desktop the photo sits beside the text rather than stacked below it,
     so it's cropped shorter and wider here to match the text block's height
     instead of the tall portrait crop mobile uses. */
  .hero__photo{
    aspect-ratio:4/3; max-width:500px; margin:0 0 0 auto;
  }
}

/* --- statement ------------------------------------------------------------ */

.lead{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(20px, 3vw, 27px);
  line-height:1.34; letter-spacing:0;
  margin:0 0 56px; max-width:24ch;
}
.cols{ display:grid; gap:48px; }
.cols__body{ max-width:62ch; }
.cols__body p{ margin:0 0 22px; color:var(--ink-2); font-size:16px; line-height:1.75; }
.cols__body p:last-child{ margin-bottom:0; }

.facts{ margin:0; display:grid; gap:0; align-content:start; }
.facts div{
  display:flex; justify-content:space-between; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.facts dt{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.facts dd{ margin:0; font-size:12px; text-align:right; color:var(--ink); }

@media (min-width:900px){
  .cols{ grid-template-columns:1.55fr 1fr; gap:80px; }
}

/* --- youtube box ---------------------------------------------------------- */

.ytbox{
  position:relative; aspect-ratio:16/9; cursor:pointer;
  overflow:hidden; background:var(--paper-2);
  border:1px solid var(--img-edge);
  transition:opacity .3s var(--ease);
}
.ytbox:hover{ opacity:.85; }
.ytbox__thumb{ position:absolute; inset:0; background:center/cover no-repeat; }
.ytbox__play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.28));
}
.ytbox__play i{
  width:60px; height:60px; border-radius:50%;
  background:var(--paper);
  display:grid; place-items:center;
}
.ytbox__play i::after{
  content:""; border-left:16px solid var(--ink);
  border-top:10px solid transparent; border-bottom:10px solid transparent;
  margin-left:4px;
}

.feature__cap h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(20px,3vw,26px); letter-spacing:-.005em;
  margin:24px 0 8px; line-height:1.15;
}
.feature__cap p{ margin:0; color:var(--ink-3); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-family:var(--mono); }

.feature--square .ytbox{ aspect-ratio:1; }
.feature--square .feature__frame{ max-width:420px; }
@media (min-width:900px){
  .feature--square{
    display:grid; grid-template-columns:minmax(0,400px) 1fr;
    gap:64px; align-items:center;
  }
  .feature--square .feature__cap h2{ margin-top:0; }
}

/* --- work ----------------------------------------------------------------- */

.works{ display:grid; gap:0; border-top:1px solid var(--line); }

.work{
  border-bottom:1px solid var(--line);
  display:grid; padding:0;
  transition:background .3s var(--ease);
}
.work:hover{ background:var(--paper-3); }

.work__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); border:1px solid var(--img-edge); }
.work__img{ position:absolute; inset:0; background:center/cover no-repeat; transition:transform .8s var(--ease); }
.work:hover .work__img{ transform:scale(1.03); }
.work__img:not(.has-img)::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(150deg, #6f8154, var(--paper-2));
}
.work__num{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.16em;
  color:#f7f5ef; text-shadow:0 1px 4px rgba(0,0,0,.55);
}

.work__body{ padding:32px 0 40px; }
.work__head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:14px; margin-bottom:18px; }
.work__name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(20px,2.6vw,25px); letter-spacing:-.005em; margin:0; line-height:1.1;
}
.work__sub{ color:var(--ink-3); font-weight:400; margin-left:8px; }
.work__kind{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; font-weight:700; color:var(--ink-3);
}

.work__lineup{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:5px; }
.work__lineup li{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.02em; }
.work__lineup li:first-child{ color:var(--ink); }

.work__text{
  margin:0 0 18px; color:var(--ink-2); max-width:58ch;
  font-size:15.5px; line-height:1.7;
}
.work__status{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin:0;
  display:flex; align-items:center; gap:9px;
}
.work__status::before{ content:""; width:6px; height:6px; background:var(--accent); }
.work__more{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); display:inline-block; margin:0; padding-bottom:2px;
  border-bottom:1px solid var(--line-2);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.work__more:hover{ color:var(--ink); border-color:var(--ink-3); }

@media (min-width:900px){
  .work{ grid-template-columns:minmax(0,44%) 1fr; align-items:stretch; gap:56px; }
  .work__media{ aspect-ratio:auto; min-height:100%; }
  .work__body{ padding:48px 0 56px; align-self:center; }
  .work:nth-child(even) .work__media{ order:2; }
}

/* --- releases ------------------------------------------------------------- */

.rel{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px 24px; margin:0 0 64px; }
.rel:last-child{ margin-bottom:0; }

.release{ text-decoration:none; display:block; }
.release__art{
  position:relative; aspect-ratio:1; overflow:hidden; background:var(--paper-2);
  border:1px solid var(--img-edge);
  transition:opacity .3s var(--ease);
}
.release:hover .release__art{ opacity:.85; }
.release__img{ position:absolute; inset:0; background:center/cover no-repeat; }
.release__go{
  position:absolute; inset:auto 0 0 0;
  background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; font-weight:700;
  padding:9px 12px;
  transform:translateY(100%); transition:transform .3s var(--ease);
}
.release:hover .release__go{ transform:none; }

.release__title{
  font-family:var(--serif); font-weight:500; font-size:16px;
  letter-spacing:-.005em; margin:18px 0 4px; line-height:1.2;
}
.release__by{ margin:0; font-size:13px; color:var(--ink-2); }
.release__meta{ margin:3px 0 0; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.08em; }
.release__note{ margin:7px 0 0; font-family:var(--mono); font-size:9.5px; color:var(--accent); letter-spacing:.12em; text-transform:uppercase; }

@media (min-width:760px){
  .rel--lead{ grid-template-columns:repeat(2,1fr); max-width:640px; }
  .rel--side{ grid-template-columns:repeat(4,1fr); }
}

/* --- live ----------------------------------------------------------------- */

.dates{
  list-style:none; margin:0 0 40px; padding:0;
  border-top:1px solid var(--line);
}
.date{ border-bottom:1px solid var(--line); }
.date__in{
  display:grid; gap:4px;
  padding:22px 0; text-decoration:none;
  transition:background .25s var(--ease), padding-left .25s var(--ease);
}
a.date__in:hover{ background:var(--paper-3); padding-left:16px; }

.date__when{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.date__what{ font-family:var(--serif); font-weight:500; font-size:17px; margin:0; letter-spacing:-.005em; line-height:1.3; }
.date__where{ font-size:13px; color:var(--ink-3); margin:0; }
.date__vid{
  font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--paper); background:var(--ink);
  padding:5px 9px; justify-self:start; margin-top:7px;
}

.live__foot{ display:grid; gap:22px; }
.venues{ margin:0; font-size:12.5px; color:var(--ink-3); line-height:1.9; max-width:70ch; }

@media (min-width:900px){
  .date__in{ grid-template-columns:190px 1fr auto; align-items:baseline; gap:28px; padding:24px 0; }
  .date__vid{ margin-top:0; }
  .live__foot{ grid-template-columns:auto 1fr; align-items:start; gap:44px; }
}

/* --- performances (archive) page ------------------------------------------ */

.page .sec--head{ border-top:0; padding-top:112px; padding-bottom:0; }
.page .sec--archive{ border-top:0; padding-top:44px; }

.back{
  display:inline-block; margin-bottom:26px;
  font-size:13px; color:var(--ink-2); text-decoration:none;
  transition:color .2s var(--ease);
}
.back:hover{ color:var(--accent); }

/* subordinate to the page title, unlike the statement lead on the front page */
.phead__lead{
  font-family:var(--sans); font-size:15.5px; line-height:1.7;
  color:var(--ink-2); letter-spacing:0;
  max-width:54ch; margin:-14px 0 36px;
}

.phead__bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  padding-bottom:22px;
}
.phead__count{
  margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}

.chip{
  font:inherit; font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-2); background:transparent; cursor:pointer;
  border:1px solid var(--line-2); border-radius:0; padding:7px 14px;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.chip:hover{ color:var(--ink); border-color:var(--ink-3); }
.chip.is-on{ color:#ffffff; background:var(--accent); border-color:var(--accent); }

.yr{ margin:0 0 52px; }
.yr__h{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(24px, 5vw, 34px); line-height:1;
  letter-spacing:0; color:var(--ink-3);
  margin:0 0 10px;
}
.dates--all{ margin-bottom:0; }

.date__with{
  margin:5px 0 0; font-size:12.5px; line-height:1.6;
  color:var(--ink-3); max-width:62ch;
}
.date__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.date__tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none;
  border:1px solid var(--line-2); border-radius:0; padding:3px 8px;
  white-space:nowrap;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.date__tag:hover{ color:var(--accent); border-color:var(--accent); }
.date__tag--vid{ color:var(--accent); }

.empty{ color:var(--ink-3); font-size:14px; margin:0 0 40px; }

.archive__foot{
  display:grid; gap:24px; justify-items:start;
  border-top:1px solid var(--line); padding-top:32px;
}

@media (min-width:900px){
  .page .sec--head{ padding-top:132px; }
  .yr{ margin-bottom:64px; }
  .yr__h{ margin-bottom:14px; }
  .date__tags{ margin-top:0; justify-content:flex-end; }
  .dates--all .date__in{ align-items:start; }
  .dates--all .date__when{ padding-top:5px; }
  .archive__foot{ grid-template-columns:1fr auto; align-items:center; gap:40px; }
}

/* --- press ---------------------------------------------------------------- */

.quotes{ display:grid; gap:0; border-top:1px solid var(--line); }
.quote{
  margin:0; padding:40px 0;
  border-bottom:1px solid var(--line);
}
.quote__t{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(18px,2.6vw,23px); line-height:1.4;
  margin:0 0 18px; letter-spacing:-.005em;
}
.quote__by{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin:0; }
.quote__by span{ color:var(--ink-3); }

@media (min-width:900px){
  .quotes{ grid-template-columns:1fr 1fr; gap:0 64px; }
  .quote:nth-child(1){ border-right:1px solid var(--line); padding-right:64px; }
}

/* --- press materials ------------------------------------------------------ */

.kit{ display:grid; gap:64px; }

.bios{ display:grid; gap:20px; }
.bio{ border:1px solid var(--line-2); background:var(--paper-3); }
.bio__top{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px; border-bottom:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
}
.bio__lab{ display:flex; align-items:baseline; gap:10px; }
.bio__lab strong{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.bio__lab span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:#a9a294; }

.copy{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700;
  background:transparent; color:var(--paper); cursor:pointer;
  border:1px solid #6a6459; padding:7px 13px;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.copy:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.copy.is-done{ background:#6f8154; border-color:#6f8154; color:var(--paper); }

.bio__text{ padding:22px; margin:0; color:var(--ink-2); font-size:14.5px; }
.bio__text p{ margin:0 0 12px; }
.bio__text p:last-child{ margin:0; }

.kit__note{ font-size:13px; color:var(--ink-3); margin:0 0 22px; max-width:46ch; }
.photos{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.photo{
  display:flex; align-items:center; gap:15px; text-decoration:none;
  background:var(--paper-3);
  padding:14px;
  transition:background .2s var(--ease);
}
.photo:hover{ background:var(--paper-2); }
.photo__thumb{ width:76px; height:58px; flex:none; background:var(--paper-2) center/cover no-repeat; }
.photo__b{ display:grid; gap:3px; flex:1; min-width:0; }
.photo__b strong{ font-size:14px; font-weight:500; }
.photo__b span{ font-family:var(--mono); font-size:10px; color:var(--ink-3); letter-spacing:.06em; }
.photo__dl{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; color:var(--accent); white-space:nowrap;
}

@media (min-width:900px){ .kit{ grid-template-columns:1.3fr 1fr; gap:72px; } }

/* --- booking -------------------------------------------------------------- */

.booking__h{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,5vw,46px); line-height:1.12;
  letter-spacing:-.01em; margin:0 0 24px;
}
.booking__line{ margin:0 0 44px; color:var(--ink-2); max-width:44ch; }

.booking__grid{ display:grid; gap:40px; }

.bigmail{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(19px,3.6vw,28px); letter-spacing:0;
  color:var(--accent); text-decoration:none;
  border-bottom:2px solid var(--accent); padding-bottom:8px;
  display:inline-block; word-break:break-all;
  transition:opacity .2s var(--ease);
}
.bigmail:hover{ opacity:.6; }

.booking__side{ display:grid; gap:24px; justify-items:start; align-content:start; }
.social{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:20px; }
.social a{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--ink-2); text-decoration:none;
  border-bottom:1px solid var(--line-2); padding-bottom:3px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.social a:hover{ color:var(--accent); border-color:var(--accent); }

@media (min-width:900px){
  .booking__grid{ grid-template-columns:1fr auto; align-items:end; gap:56px; }
  .booking__side{ justify-items:end; }
}

/* --- footer --------------------------------------------------------------- */

.foot{ border-top:1px solid var(--line); padding:32px 0 48px; background:var(--paper); color:var(--ink); }
.foot__in{ display:grid; gap:6px; }
.foot p{ margin:0; font-size:10.5px; letter-spacing:.1em; color:var(--ink-3); }
.foot strong{ color:var(--ink); font-weight:700; }

@media (min-width:900px){
  .foot__in{ display:flex; align-items:center; justify-content:space-between; }
}

/* --- reveal --------------------------------------------------------------- */

.rv{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* --- fixed player ----------------------------------------------------------
   Follows the theme like everything else — a light bar in light mode, dark
   in dark mode — but sits on --paper-3 (the "elevated surface" tone) rather
   than the page's own --paper, so it still reads as a raised bar and not
   just a colour-matched stripe with a border. */

.player{
  position:fixed; inset:auto 0 0 0; z-index:100;
  background:var(--paper-3); color:var(--ink);
  border-top:1px solid var(--line-2);
  box-shadow:0 -8px 24px rgba(0,0,0,.1);
  transform:translateY(100%);
  transition:transform .45s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.player.is-open{ transform:none; }

.player__bar{
  display:flex; align-items:center; gap:15px;
  max-width:var(--max); margin:0 auto; padding:11px var(--pad);
}

.pbtn{
  flex:none; display:grid; place-items:center;
  width:36px; height:36px; border-radius:50%;
  background:transparent; border:1px solid transparent;
  color:var(--ink-3); cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.pbtn:hover{ color:var(--ink); border-color:var(--line-2); }
.pbtn--main{
  width:42px; height:42px;
  background:var(--accent); color:#16140f; border-color:var(--accent);
}
.pbtn--main:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.pbtn--eye[aria-pressed="true"]{ color:var(--accent); border-color:var(--accent); }

.pico{ display:block; }
.pico--play{
  width:0; height:0; margin-left:2px;
  border-left:11px solid currentColor;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.pico--pause{
  width:11px; height:14px;
  background:linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px, currentColor 7px 11px);
}
.pico--prev,.pico--next{
  width:0; height:0;
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.pico--prev{ border-right:9px solid currentColor; }
.pico--next{ border-left:9px solid currentColor; }
.pico--eye{ width:15px; height:11px; border:1.6px solid currentColor; }
.pico--x{ width:13px; height:13px; position:relative; }
.pico--x::before,.pico--x::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1.6px; background:currentColor;
}
.pico--x::before{ transform:rotate(45deg); }
.pico--x::after{ transform:rotate(-45deg); }

.player__now{ min-width:0; flex:1; }
.player__title{
  margin:0; font-family:var(--serif); font-size:16px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.player__proj{
  margin:0; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:var(--mono);
}

.player__seek{ display:none; align-items:center; gap:12px; flex:1.4; }
.seek{ position:relative; flex:1; height:3px; background:#3a352d; cursor:pointer; }
.seek__fill{ position:absolute; inset:0 auto 0 0; width:0; background:var(--accent); }
.player__time{ font-size:10px; color:#a9a294; font-variant-numeric:tabular-nums; font-family:var(--mono); }

.player__nav{ display:flex; align-items:center; gap:3px; flex:none; }

.player__stage{
  max-width:var(--max); margin:0 auto; padding:0 var(--pad);
  height:0; overflow:hidden; transition:height .4s var(--ease);
}
.player.show-video .player__stage{ height:min(46vh, 320px); padding-bottom:14px; }
.player__stage > div{ width:100%; height:100%; overflow:hidden; background:#000; }
.player__stage iframe{ width:100%; height:100%; border:0; }

@media (min-width:760px){ .player__seek{ display:flex; } }