/* Publication pages — same design language as the home page:
   ink ground, gilded rules, Cormorant Garamond, generous negative space. */

/* Anything hidden for the language switch has to stay hidden, whatever a later
   rule says about its display. The home page learned this the hard way: a grid
   declaration outranked the browser's own [hidden] rule and put two languages
   on the page at once. */
[hidden]{ display:none !important; }

:root{
  --ink:#0a0603;
  --gold:#c9a24b;
  --gold-hi:#f0dda6;
  --gold-deep:#6e5220;
  --ivory:#e9dfc9;
  --ivory-dim:#b3a586;
  --serif:'Cormorant Garamond','Palatino Linotype','Book Antiqua',Georgia,serif;
  --cjk:'Noto Serif SC','Source Han Serif SC','Songti SC','Microsoft YaHei',sans-serif;
  color-scheme: dark;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:
    radial-gradient(120vw 80vh at 50% -10%, rgba(201,162,75,.07), transparent 60%),
    var(--ink);
  font-family:var(--serif); color:var(--ivory); -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:1px solid var(--gold-hi); outline-offset:3px; }

/* CJK needs a face that actually carries the glyphs. */
[data-active-lang="zh"] .pubArticle,
.pubLang[data-lang="zh"]{ font-family:var(--cjk); }
.pubLang[data-lang="zh"] .pubProse p{ line-height:1.95; letter-spacing:.01em; }

/* ============ NAV ============ */
.pubNav{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px clamp(20px,5vw,72px);
  border-bottom:1px solid rgba(201,162,75,.16);
}
.brand{ display:flex; align-items:center; gap:16px; }
.monogram{
  font-weight:600; font-size:42px; line-height:1; letter-spacing:-.18em; padding-right:.2em;
  background:linear-gradient(160deg, var(--gold-hi) 10%, var(--gold) 45%, var(--gold-deep) 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.monogram i{ font-style:italic; }
.brandname{ border-left:1px solid rgba(201,162,75,.35); padding-left:16px; }
.brandname b{ display:block; font-weight:600; font-size:16.5px; letter-spacing:.26em; color:var(--ivory); }
.brandname span{ display:block; margin-top:3px; font-size:10px; letter-spacing:.14em; color:var(--gold); text-transform:uppercase; }
.brandname span + span{ margin-top:2.5px; opacity:.86; }
.pubNavRight{ display:flex; align-items:center; gap:clamp(14px,2.4vw,30px); }
.pubBack{
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ivory-dim); transition:color .3s;
}
.pubBack:hover{ color:var(--gold-hi); }
.lang{ display:flex; gap:10px; font-size:12px; letter-spacing:.2em; color:var(--ivory-dim); }
.lang b{ color:var(--gold); font-weight:600; }
.lang span{ opacity:.5; }

/* ============ LANGUAGE SWITCHER (this publication only) ============ */
.pubMain{ flex:1; width:100%; max-width:1180px; margin:0 auto; padding:clamp(28px,4vw,52px) clamp(20px,5vw,72px) 72px; }
.pubLangBar{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  padding-bottom:20px; margin-bottom:clamp(24px,3.4vw,44px);
  border-bottom:1px solid rgba(201,162,75,.16);
}
.pubLangLabel{
  margin-right:12px; font-size:10px; font-weight:600; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold);
}
.pubLangBtn{
  font-family:var(--serif); font-size:12px; font-weight:600; letter-spacing:.18em;
  padding:8px 15px; cursor:pointer;
  color:var(--ivory-dim); background:transparent;
  border:1px solid rgba(201,162,75,.28);
  transition:color .28s, border-color .28s, background .28s;
}
.pubLangBtn[lang="zh-Hans"]{ font-family:var(--cjk); letter-spacing:.08em; }
.pubLangBtn:hover{ color:var(--gold-hi); border-color:rgba(201,162,75,.6); }
.pubLangBtn[aria-pressed="true"]{
  color:#171004; border-color:#ecd390;
  background:linear-gradient(#ecd390,#b8933f);
}

/* ============ ARTICLE ============ */
.pubArticle{ max-width:760px; margin:0 auto; }
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:11px; font-weight:600; letter-spacing:.36em; color:var(--gold); text-transform:uppercase;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--gold); opacity:.6; }
.pubHead h1{
  margin-top:20px; font-weight:600; font-size:clamp(30px,4vw,52px); line-height:1.08;
  letter-spacing:.01em; color:var(--ivory); text-wrap:balance;
}
.pubSub{ margin-top:14px; font-size:20px; font-style:italic; color:var(--gold-hi); }
.pubLead{ margin-top:22px; font-size:19px; line-height:1.62; color:var(--ivory-dim); text-wrap:pretty; }
.pubMetaRow{
  display:flex; flex-wrap:wrap; gap:10px clamp(20px,3vw,40px);
  margin-top:28px; padding-top:20px; border-top:1px solid rgba(201,162,75,.16);
}
.pubMetaItem{ font-size:15px; color:var(--ivory); }
.pubMetaItem b{
  display:block; margin-bottom:3px;
  font-size:9.5px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
}
.pubByline{ margin-top:14px; font-size:14px; font-style:italic; color:var(--ivory-dim); }

.pubFigure{ margin:clamp(28px,4vw,48px) 0; }
.pubFigure img{ width:100%; height:auto; border:1px solid rgba(201,162,75,.2); }
.pubFigure figcaption{
  margin-top:12px; font-size:13.5px; line-height:1.55; font-style:italic; color:var(--ivory-dim);
}
.pubCredit{ font-style:normal; letter-spacing:.14em; text-transform:uppercase; font-size:10.5px; color:var(--gold); white-space:nowrap; }
.pubFigure.isLead img{ border-color:rgba(201,162,75,.3); }

.pubProse p{ margin-top:22px; font-size:17.5px; line-height:1.78; color:var(--ivory); text-wrap:pretty; }
.pubProse p:first-child{ margin-top:0; }
.pubQuote{
  margin:clamp(30px,4vw,44px) 0 6px; padding:24px clamp(20px,3vw,34px);
  border-left:2px solid var(--gold); background:rgba(201,162,75,.05);
}
.pubQuote p{ margin:0; font-size:22px; line-height:1.5; font-style:italic; color:var(--gold-hi); }
.pubQuote cite{
  display:block; margin-top:14px; font-style:normal;
  font-size:10.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--ivory-dim);
}

.pubSource{
  margin-top:clamp(36px,5vw,60px); padding:clamp(24px,3.4vw,36px);
  border:1px solid rgba(201,162,75,.24); background:rgba(13,8,5,.7);
}
.pubSourceLabel{ font-size:10px; font-weight:600; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
.pubSourceName{ margin-top:10px; font-size:24px; font-weight:600; color:var(--ivory); }
.pubSource .btn{ margin-top:20px; }
.pubSourceUrl{ margin-top:14px; font-size:12.5px; letter-spacing:.02em; color:var(--ivory-dim); word-break:break-all; }
.pubSourceNote{ margin-top:14px; font-size:13.5px; font-style:italic; line-height:1.6; color:var(--ivory-dim); }
.pubDisclaimer{
  margin-top:18px; padding-top:16px; border-top:1px solid rgba(201,162,75,.14);
  font-size:13px; line-height:1.65; color:rgba(179,165,134,.85);
}

.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:13px 20px; border:1px solid rgba(201,162,75,.55);
  font-family:var(--serif); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-hi); background:linear-gradient(rgba(201,162,75,.10), rgba(201,162,75,.03));
  cursor:pointer; transition:all .35s ease; text-wrap:balance;
}
.btn .dm{ width:6px; height:6px; border:1px solid currentColor; transform:rotate(45deg); flex:none; }
.btn:hover{
  background:linear-gradient(#ecd390,#b8933f); color:#171004; border-color:#ecd390;
  box-shadow:0 10px 36px -10px rgba(201,162,75,.55);
}

/* ============ ARCHIVE ============ */
.archMain{ flex:1; width:100%; max-width:1240px; margin:0 auto; padding:clamp(36px,5vw,72px) clamp(20px,5vw,72px) 80px; }
.archHead{ text-align:center; }
.archHead .eyebrow{ justify-content:center; }
.archHead h1{
  margin-top:16px; font-weight:600; font-size:clamp(30px,4vw,46px);
  letter-spacing:.03em; color:var(--ivory); text-wrap:balance;
}
.archGrid{
  margin-top:clamp(34px,4.4vw,58px);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2vw,28px);
}
.archCard{
  display:flex; flex-direction:column;
  border:1px solid rgba(201,162,75,.2); background:rgba(13,8,5,.66);
  transition:border-color .35s, transform .35s, box-shadow .35s;
}
.archCard:hover{
  border-color:rgba(201,162,75,.55); transform:translateY(-4px);
  box-shadow:0 22px 44px -20px rgba(0,0,0,.9);
}
.archThumb{ display:block; aspect-ratio:4/5; overflow:hidden; background:#080402; }
.archThumb img{ width:100%; height:100%; object-fit:cover; filter:brightness(.94) contrast(1.04); transition:filter .4s, transform .6s; }
.archCard:hover .archThumb img{ filter:brightness(1.05); transform:scale(1.03); }
.archBody{ display:flex; flex-direction:column; flex:1; gap:9px; padding:18px 18px 20px; }
.archMeta{ display:flex; flex-direction:column; gap:2px; }
.archMeta b{ font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }
.archMeta i{ font-size:12.5px; font-style:italic; color:var(--ivory-dim); }
.archTitle{ font-size:18px; font-weight:600; line-height:1.28; color:var(--ivory); }
.archLede{ font-size:14px; line-height:1.55; color:var(--ivory-dim); }
.pubMore{
  display:inline-flex; align-items:center; align-self:flex-start; gap:8px; margin-top:auto; padding-top:6px;
  font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-hi);
}
.pubMore svg{ width:15px; height:9px; transition:transform .35s; }
.archCard:hover .pubMore svg{ transform:translateX(4px); }

/* ============ FOOTER ============ */
.pubFoot{
  margin-top:auto; border-top:1px solid rgba(201,162,75,.14);
  padding:24px clamp(20px,5vw,72px);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(179,165,134,.75);
}
.pubFoot a:hover{ color:var(--gold-hi); }

/* ============ EIGHT SISTERS ============ */
.sisMain{ max-width:1080px; }
.sisMain .archHead h1{ max-width:26ch; margin-inline:auto; line-height:1.14; }
.sisFilm{ margin:clamp(34px,4.4vw,56px) auto 0; max-width:860px; }
.sisFilmFrame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid rgba(201,162,75,.28); background:#080402;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.95);
}
.sisFilmFrame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; }
.sisFilm figcaption{
  margin-top:14px; text-align:center;
  font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
}
.sisFilmCaption{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.sisFilmLink{
  display:inline-flex; align-items:center; gap:8px;
  font-size:10px; letter-spacing:.2em; color:var(--ivory-dim); transition:color .3s;
}
.sisFilmLink:hover{ color:var(--gold-hi); }
.sisFilmLink svg{ width:15px; height:9px; transition:transform .3s; }
.sisFilmLink:hover svg{ transform:translateX(4px); }
.sisProse{ max-width:760px; margin:clamp(34px,4.4vw,58px) auto 0; }
.sisSection + .sisSection{ margin-top:clamp(30px,3.6vw,46px); }
.sisSection h2{
  font-weight:600; font-size:clamp(20px,2.1vw,26px); letter-spacing:.02em;
  color:var(--gold-hi); text-wrap:balance;
}
.sisSection h2::after{
  content:''; display:block; width:38px; height:1px; margin-top:14px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.sisSection p{ margin-top:20px; font-size:17px; line-height:1.78; color:var(--ivory); text-wrap:pretty; }

/* ============ BIOGRAPHY ============ */
.bioMain{ max-width:1120px; }
.bioArticle{ max-width:820px; }
.bioHead{ max-width:760px; }
.bioPortrait{ max-width:520px; margin-inline:auto; }
.bioPortrait img{
  aspect-ratio:4/5; object-fit:cover; object-position:center 24%;
  filter:sepia(.08) saturate(.86) contrast(1.04) brightness(.92);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95);
}
.bioPortrait figcaption{ text-align:center; }
.bioSection + .bioSection{ margin-top:clamp(38px,5vw,62px); }
.bioSection h2{
  font-weight:600; font-size:clamp(22px,2.5vw,30px); line-height:1.22;
  letter-spacing:.02em; color:var(--gold-hi); text-wrap:balance;
}
.bioSection h2::after{
  content:''; display:block; width:44px; height:1px; margin-top:15px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.bioSection p{ margin-top:20px; }

/* ============ RECORDINGS ============ */
.recGrid{
  margin-top:clamp(30px,4vw,52px);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,3vw,40px);
}
.recFull{
  display:flex; flex-direction:column; gap:18px;
  padding:clamp(20px,2.6vw,30px);
  border:1px solid rgba(201,162,75,.2); background:rgba(13,8,5,.66);
}
.recHead{ flex:1 1 auto; }
.recHead h3{
  margin-top:8px; font-weight:600; font-size:clamp(20px,2vw,25px); line-height:1.24;
  color:var(--ivory); text-wrap:balance;
}
.recMeta{ font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }
.recCredits{ margin-top:9px; font-size:14px; font-style:italic; line-height:1.5; color:var(--ivory-dim); }
.recNote{ margin-top:12px; font-size:15px; line-height:1.62; color:var(--ivory); text-wrap:pretty; }
.recPlayer{ display:block; width:100%; border:0; border-radius:12px; background:#080402; }
.recPlayerVideo{ aspect-ratio:16/9; height:auto; }
.recLink{
  display:inline-flex; align-items:center; align-self:flex-start; gap:8px; margin-top:auto;
  font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-hi);
}
.recLink svg{ width:15px; height:9px; transition:transform .35s; }
.recLink:hover svg{ transform:translateX(4px); }
.recFoot{
  margin-top:clamp(28px,3.4vw,44px); padding-top:20px;
  border-top:1px solid rgba(201,162,75,.14);
  font-size:13.5px; font-style:italic; color:rgba(179,165,134,.8);
}

/* An empty berth, drawn in the same hand as the cards, so the section reads as
   a catalogue that has room rather than a page that stops. */
.recNext{
  grid-column:1 / -1; position:relative;
  margin-top:clamp(6px,1vw,14px); padding:clamp(26px,3vw,38px);
  border:1px dashed rgba(201,162,75,.3); background:rgba(13,8,5,.4);
  text-align:center;
}
.recNextMark{
  display:block; width:9px; height:9px; margin:0 auto 16px;
  transform:rotate(45deg); border:1px solid rgba(201,162,75,.6);
}
.recNextTitle{
  font-size:10.5px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}
.recNextText{
  margin:12px auto 0; max-width:56ch;
  font-size:14.5px; line-height:1.66; font-style:italic; color:var(--ivory-dim); text-wrap:pretty;
}

@media (max-width:860px){
  .recGrid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .recLink svg{ transition:none!important; }
}

@media (max-width:980px){
  .archGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .brandname{ display:none; }
  .pubNav{ flex-wrap:wrap; }
  .archGrid{ grid-template-columns:1fr; }
  .pubMetaRow{ gap:14px; }
  .pubFigure figcaption{ font-size:12.5px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .archCard,.archThumb img,.pubMore svg,.btn{ transition:none!important; }
}