/* Shared across index.html and every project detail page. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root{
  --board:#DCD3BE;
  --bg:#F7F7F4;
  --ink:#141414;
  --ink-soft:#5B5B54;
  --stamp:#B23A2E;
  --confirmed:#3D6B52;
  --card:#FBFAF5;
  --rule-board:#C7BCA1;
  --rule:#D8D8D2;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:14.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink);}
a:focus-visible, button:focus-visible{outline:2px solid var(--stamp);outline-offset:3px;}

[data-lang="en"] .zh{display:none;}
[data-lang="zh"] .en{display:none;}

#lang-toggle{
  position:fixed;top:16px;right:16px;z-index:50;
  border:1px solid var(--ink);background:var(--card);color:var(--ink);
  font-family:inherit;font-size:12px;font-weight:700;letter-spacing:0.02em;
  padding:6px 12px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
#lang-toggle:hover{background:var(--ink);color:var(--card);}

.title-row{display:flex;align-items:center;gap:9px;}
.glyph{flex-shrink:0;width:20px;height:20px;}
.pin h3 a, .pin h3 a:visited{color:inherit;text-decoration:none;}
.pin h3 a:hover{text-decoration:underline;text-decoration-color:var(--rule-board);text-underline-offset:3px;}
.pin.card-link{cursor:pointer;}

.tagline{display:inline-block;border:1.5px solid var(--ink-soft);color:var(--ink-soft);font-size:10px;font-weight:700;padding:2px 7px;margin-bottom:10px;transform:rotate(-2deg);}
.tagline.verified{border-color:var(--confirmed);color:var(--confirmed);}
.tagline.pending{border-style:dashed;}

.media-frame{width:100%;aspect-ratio:2.6/1;border:1px solid var(--rule-board);background:var(--board);margin:0 0 10px;overflow:hidden;position:relative;}
.media-frame img,.media-frame video{width:100%;height:100%;object-fit:cover;display:block;}
.media-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:6px;}
.media-placeholder svg{width:11px;height:11px;opacity:0.5;flex-shrink:0;}
.media-placeholder span{font-size:10.5px;color:var(--ink-soft);opacity:0.85;}

/* ---------- Project detail pages ---------- */
.detail-wrap{max-width:760px;margin:0 auto;padding:80px 32px 96px;}
.back-link{display:inline-block;margin-bottom:36px;font-size:13px;color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px;}
.back-link:hover{text-decoration-color:var(--ink);}
.detail-hero{margin-bottom:28px;}
.detail-hero .title-row{margin:10px 0 16px;}
.detail-hero .title-row h1{font-size:30px;font-weight:700;margin:0;}
.detail-hero .title-row .glyph{width:28px;height:28px;}
.detail-lede{font-size:15.5px;color:var(--ink-soft);max-width:62ch;margin:0;}
.detail-hero-image{aspect-ratio:2.6/1;margin-bottom:36px;}
.detail-body{font-size:15px;color:var(--ink-soft);max-width:64ch;}
.detail-body p{margin:0 0 18px;}
.detail-body p:last-child{margin-bottom:0;}
.detail-xref{margin-top:20px;font-size:13.5px;color:var(--ink-soft);max-width:62ch;padding-left:14px;border-left:2px solid var(--rule);}
.detail-gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px;}
.detail-gallery .media-frame{margin:0;}
@media (max-width:600px){.detail-gallery{grid-template-columns:1fr;}}
.detail-links{margin-top:36px;padding-top:24px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:8px 20px;}
.detail-links a{font-size:13px;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px;}
.detail-links a:hover{text-decoration-color:var(--ink);}
.detail-footer{margin-top:64px;padding-top:24px;border-top:1px solid var(--rule);}