@font-face { font-family:'Leopardo'; src:url('fonts/local/Leopardo-ThinItalic.ttf') format('truetype'); font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:'Leopardo'; src:url('fonts/local/Leopardo-LightItalic.ttf') format('truetype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Leopardo'; src:url('fonts/local/Leopardo-LaserItalic.ttf') format('truetype'); font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:'Cocogoose Pro'; src:url('fonts/local/Cocogoose-Pro-Thin-Italic-trial.ttf') format('truetype'); font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:'Cocogoose Pro'; src:url('fonts/local/Cocogoose-Pro-Light-Italic-trial.ttf') format('truetype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Cocogoose Pro'; src:url('fonts/local/Cocogoose-Pro-Regular-trial.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'HarmonyOS Sans SC'; src:url('fonts/local/HarmonyOS_Sans_SC_Thin.ttf') format('truetype'); font-weight:250; font-style:normal; font-display:swap; }
@font-face { font-family:'HarmonyOS Sans SC'; src:url('fonts/local/HarmonyOS_Sans_SC_Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'HarmonyOS Sans SC'; src:url('fonts/local/HarmonyOS_Sans_SC_Medium.ttf') format('truetype'); font-weight:500 700; font-style:normal; font-display:swap; }
:root {
  --bg: #FFFFFF; --text: #0A0A0A;
  --text-dim: rgba(10,10,10,0.35); --text-mid: rgba(10,10,10,0.55);
  --font-display:'Leopardo','Times New Roman',serif;
  --font-title:'Cocogoose Pro','Helvetica Neue',sans-serif;
  --font-body:'HarmonyOS Sans SC','PingFang SC',sans-serif;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; }
body { background:var(--bg); color:var(--text); font-family:var(--font-body); font-weight:400; font-size:16px; line-height:1.5; overflow-x:hidden; cursor:none; }
a { color:inherit; text-decoration:none; }
a, button, [role="button"] { cursor:none; }
::selection { background:var(--text); color:var(--bg); }

.back-nav { position:fixed; top:1.6rem; left:2.5rem; z-index:100; font-family:var(--font-body); font-size:0.85rem; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; opacity:0.4; transition:opacity 0.3s; }
.back-nav:hover { opacity:1; }

.detail-hero { width:100vw; aspect-ratio:21/7; background:#F0F0F0; overflow:hidden; }
.detail-hero img, .detail-hero video { width:100%; height:100%; object-fit:cover; display:block; }
.detail-hero.hero-native { aspect-ratio:auto; }
.detail-hero.hero-native img { width:100%; height:auto; object-fit:contain; }

.detail-header-block { padding:2rem 2.5rem 6rem; }
.detail-title-lg { font-size:clamp(2rem,5vw,5rem); line-height:1; letter-spacing:-0.02em; }
.detail-title-cn { display:inline; font-family:var(--font-body); font-weight:250; font-style:normal; vertical-align:baseline; letter-spacing:0.08em; }
.detail-title-en { display:inline; font-family:var(--font-title); font-weight:100; font-style:italic; color:var(--text-mid); margin-left:0.5em; vertical-align:baseline; position:relative; top:0.09em; }

/* Three-column info row */
.detail-info-row { display:flex; padding:0 2.5rem 1.5rem; }
.detail-info-left { width:50%; position:relative; }
.detail-info-tags { font-family:var(--font-body); font-size:0.9rem; color:var(--text-mid); white-space:nowrap; line-height:1.6; }
.detail-info-date { position:absolute; top:0; left:50%; transform:translateX(-50%); font-family:var(--font-display); font-weight:300; font-style:italic; font-size:0.9rem; color:var(--text); letter-spacing:0.12em; line-height:1.6; }
.detail-info-right { width:50%; padding-left:1rem; }
.detail-info-cn { font-family:var(--font-body); font-size:1rem; line-height:1.6; color:var(--text); margin-bottom:0.8rem; }
.detail-info-en { font-family:var(--font-display); font-weight:100; font-style:italic; font-size:0.95rem; line-height:1.6; color:var(--text-mid); }

.grid-full { width:100vw; padding:0.45rem 0.6rem; }
.grid-full img, .grid-full video, .grid-full .img-placeholder { width:100%; display:block; height:auto; background:#F0F0F0; }
.grid-half { width:100vw; display:flex; padding:0.45rem 0.6rem; gap:0.9rem; }
.grid-half .img-cell { flex:1; }
.grid-half img, .grid-half video, .grid-half .img-placeholder { width:100%; display:block; height:auto; background:#F0F0F0; }

.img-caption { display:flex; justify-content:space-between; align-items:baseline; padding:0.2rem 1.2rem 0.6rem; font-family:var(--font-body); font-size:0.65rem; color:var(--text-dim); letter-spacing:0.1em; }
.img-caption .cap-num { font-family:var(--font-display); font-weight:100; font-style:italic; font-size:0.8rem; color:var(--text-mid); }

.detail-footer { padding:4rem 2.5rem 3rem; display:flex; justify-content:space-between; align-items:center; font-family:var(--font-body); font-size:0.7rem; letter-spacing:0.15em; color:var(--text-dim); }
.detail-footer a { opacity:0.45; transition:opacity 0.3s; }
.detail-footer a:hover { opacity:1; }
.detail-footer .next-link { font-family:var(--font-title); font-size:1.2rem; font-weight:300; font-style:italic; letter-spacing:-0.01em; color:var(--text); opacity:0.6; }
.detail-footer .next-link:hover { opacity:1; }

.section-divider { width:calc(100vw - 1.2rem); height:1px; background:rgba(0,0,0,0.1); margin:0 auto; }

/* 鈹€鈹€ Custom Cursor (shared) 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */
.custom-cursor {
  position:fixed; top:0; left:0; z-index:10000;
  width:0; height:0; pointer-events:none;
  mix-blend-mode:difference;
  --br-tl:50%; --br-tr:50%; --br-br:50%; --br-bl:50%;
}
.custom-cursor::after {
  content:'';
  position:absolute;
  width:30px; height:30px;
  transform:translate(-50%,-50%);
  border-radius:var(--br-tl) var(--br-tr) var(--br-br) var(--br-bl);
  background:#fff;
  transition:border-radius 0.3s ease;
}
.custom-cursor.hover::after {
  transform:translate(-50%,-50%) scale(1.4);
}
.custom-cursor.arrow::after {
  opacity:0; transform:translate(-50%,-50%) scale(0.3);
}
.cursor-arrow {
  position:absolute;
  opacity:0;
  width:30px; height:18px;
  transform:translate(-50%,-50%) scale(0.5);
}
.custom-cursor.arrow .cursor-arrow {
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.cursor-arrow svg {
  width:100%; height:100%;
}

@media (max-width:768px) {
  .back-nav { left:1.2rem; top:1rem; font-size:0.65rem; }
  .detail-header-block { padding:2rem 1.2rem 1.5rem; }
  .img-caption { padding:0.4rem 1.2rem; font-size:0.55rem; }
  .detail-footer { padding:2.5rem 1.2rem; flex-direction:column; gap:1rem; text-align:center; }
}