:root{--bg:#f4f0e4;--ink:#183b32;--muted:#6f7c75;--line:#d7d0bd;--soft:#e9e5d7}
*{box-sizing:border-box}html,body{margin:0;max-width:100%;overflow-x:hidden}body{background:var(--bg);color:var(--ink);font-family:"Noto Serif TC","Songti TC","PMingLiU",serif}
.nav{height:72px;padding:0 clamp(24px,5vw,76px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:13px}.nav a{color:var(--ink);text-decoration:none}.brand{font-weight:700}.nav nav{display:flex;gap:28px}.nav nav a{white-space:nowrap}.active{font-weight:700}
main{width:min(1120px,calc(100% - 64px));margin:0 auto;padding:86px 0 130px}.intro{width:min(590px,100%);margin-bottom:80px}.eyebrow,.num{font-family:Arial,sans-serif;font-size:9px;letter-spacing:.19em;color:#628075;font-weight:700}.intro h1{font-size:46px;font-weight:500;margin:14px 0}.intro>p:last-child{font-size:13px;color:var(--muted);letter-spacing:.04em}
.pub-row{min-height:410px;display:grid;grid-template-columns:360px 330px;gap:90px;align-items:center;width:820px;margin:0 0 62px 25px;padding:28px 0}.pub-row.reverse{grid-template-columns:330px 360px;margin-left:auto;margin-right:30px}.reverse .cover-wrap{order:2}.reverse .pub-copy{order:1}
.cover-wrap{height:355px;display:flex;align-items:center;justify-content:center}.cover-wrap img{display:block;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 13px 30px rgba(50,55,48,.08)}
.pub-copy{align-self:center;width:245px}.num{margin:0 0 15px}.stair{font-weight:500;line-height:1.12;margin:0}.stair span{display:block}.stair span:first-child{font-size:27px}.stair span:last-child{font-size:32px;margin-left:55px;margin-top:8px}.rule{width:150px;border-top:1px solid var(--line);margin:25px 0 14px}.meta{font-size:11px;margin:0 0 10px}.read{font:10px Arial,sans-serif;letter-spacing:.08em;text-decoration:none;color:var(--ink)}.read b{margin-left:24px;font-weight:400}
.film{margin:105px auto 0;width:920px;max-width:100%;display:grid;grid-template-columns:220px 1fr;gap:70px;align-items:end}.film-copy>p:last-child{font-size:12px;line-height:1.8;color:var(--muted)}.video{aspect-ratio:16/9;background:linear-gradient(135deg,#9eafa5,#d8ddd3);position:relative;display:grid;place-items:center}.play{height:56px;width:56px;border:1px solid #fff;border-radius:50%;display:grid;place-items:center;color:white;padding-left:4px}.video small{position:absolute;left:20px;bottom:18px;color:white;font:8px Arial,sans-serif;letter-spacing:.18em}
.thanks{margin-top:130px;padding-top:55px;border-top:1px solid var(--line);display:grid;grid-template-columns:250px minmax(0,1fr);gap:70px;align-items:start}.thanks-title{margin:0}.thanks-title .stair span:first-child{font-size:36px}.thanks-title .stair span:last-child{font-size:42px;margin-left:72px;margin-top:8px}.credits{padding-top:1px;min-width:0}.credit-row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;margin:0 0 10px;color:#596861;font-size:11px;line-height:1.8;letter-spacing:.02em}.credit-label{color:var(--ink);font-weight:500;white-space:nowrap}.credit-row strong{color:var(--ink);font-weight:700}.thanks-note{margin:24px 0 0;color:var(--ink);font-size:11px;letter-spacing:.06em}
footer{border-top:1px solid var(--line);padding:50px clamp(24px,5vw,76px);display:grid;grid-template-columns:2fr 1fr 1.2fr 1.5fr;gap:45px;font-size:10px;line-height:1.8}footer small{font:8px Arial,sans-serif;letter-spacing:.15em}footer p{color:#6b7771}footer a{color:inherit;text-decoration:none}
@media(max-width:900px){.nav nav{gap:14px}main{width:min(100% - 40px,720px)}.pub-row,.pub-row.reverse{width:100%;margin:0 0 65px;grid-template-columns:minmax(220px,1fr) minmax(190px,.8fr);gap:40px}.reverse .cover-wrap{order:2}.thanks{grid-template-columns:190px minmax(0,1fr);gap:42px}.thanks-title .stair span:last-child{margin-left:42px}}
@media(max-width:650px){.nav nav{display:none}main{padding-top:58px}.intro{margin-bottom:50px}.pub-row,.pub-row.reverse{display:flex;flex-direction:column;width:100%;min-height:0;gap:25px;margin-bottom:70px}.reverse .cover-wrap{order:0}.reverse .pub-copy{order:1}.cover-wrap{height:310px}.pub-copy{width:240px;align-self:flex-start}.film{display:block}.film-copy{margin-bottom:28px}.thanks{display:block}.thanks-title{margin-bottom:40px}.credit-row{grid-template-columns:64px minmax(0,1fr);gap:10px}footer{grid-template-columns:1fr 1fr}}


/* v1.2 — interaction & polish */
.stair span:first-child,
.stair span:last-child{
  font-size:31px;
}
.stair span:last-child{
  margin-left:55px;
  margin-top:8px;
}

/* Publication covers: tactile but still editorial, not card-like */
.cover-link{
  position:relative;
  text-decoration:none;
  color:inherit;
  outline:none;
}
.cover-wrap img{
  box-shadow:0 12px 28px rgba(38,48,43,.11), 0 3px 8px rgba(38,48,43,.07);
  transition:transform .30s cubic-bezier(.2,.7,.2,1),
             box-shadow .30s ease,
             filter .30s ease;
  transform-origin:center;
}
.cover-action{
  position:absolute;
  right:22px;
  bottom:22px;
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#234c41;
  color:#f7f3e8;
  font:16px/1 Arial,sans-serif;
  opacity:0;
  transform:translateY(7px) scale(.92);
  transition:opacity .25s ease, transform .30s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 7px 16px rgba(35,76,65,.18);
}
.pub-row:hover .cover-wrap img,
.cover-link:hover img,
.cover-link:focus-visible img{
  transform:translateY(-6px) scale(1.015);
  box-shadow:0 20px 38px rgba(38,48,43,.16), 0 5px 12px rgba(38,48,43,.08);
}
.pub-row:hover .cover-action,
.cover-link:hover .cover-action,
.cover-link:focus-visible .cover-action{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Read link: stronger affordance, coordinated with the cover */
.read{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:24px;
  padding:4px 0 8px;
  overflow:hidden;
}
.read::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(.28);
  transform-origin:left;
  opacity:.55;
  transition:transform .28s ease, opacity .28s ease;
}
.read b{
  margin-left:0;
  transition:transform .28s ease;
}
.read:hover::after,
.read:focus-visible::after,
.pub-row:hover .read::after{
  transform:scaleX(1);
  opacity:1;
}
.read:hover b,
.read:focus-visible b,
.pub-row:hover .read b{
  transform:translateX(5px);
}

/* Film: a different affordance — play, not open-document */
.video{
  border:0;
  padding:0;
  width:100%;
  color:inherit;
  font:inherit;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(38,48,43,.10);
  transition:transform .30s cubic-bezier(.2,.7,.2,1),
             box-shadow .30s ease,
             filter .30s ease;
}
.video::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.07);
  opacity:0;
  transition:opacity .28s ease;
}
.video:hover,
.video:focus-visible{
  transform:translateY(-5px) scale(1.008);
  box-shadow:0 20px 40px rgba(38,48,43,.15);
  filter:brightness(1.035);
}
.video:hover::after,
.video:focus-visible::after{opacity:1}
.play{
  position:relative;
  z-index:2;
  transition:background .28s ease, border-color .28s ease,
             transform .28s ease, box-shadow .28s ease;
}
.video:hover .play,
.video:focus-visible .play{
  background:#234c41;
  border-color:#234c41;
  transform:scale(1.08);
  box-shadow:0 8px 20px rgba(35,76,65,.22);
}
.video small{z-index:2}

/* Keyboard accessibility without adding visual noise */
.cover-link:focus-visible,
.read:focus-visible,
.video:focus-visible{
  outline:1px solid #426b5e;
  outline-offset:5px;
}

@media (hover:none){
  .cover-action{opacity:.92;transform:none}
  .pub-row:hover .cover-wrap img{transform:none}
}

/* Native video controls retain the approved film layout. */
video.recap-player{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#111;cursor:auto;border-radius:4px}
video.recap-player::after{content:none}
video.recap-player:hover,video.recap-player:focus-visible{transform:none;filter:none;box-shadow:0 12px 28px rgba(38,48,43,.10)}

/* Approved readability sizes */
.nav{font-size:15px}.nav .brand{font-size:16px}.nav nav{gap:22px}
footer{font-size:14px}footer b{font-size:16px}footer small{font-size:11px}
@media(min-width:651px) and (max-width:1080px){.nav{font-size:13px;padding:0 3vw}.nav .brand{font-size:14px}.nav nav{gap:12px}}