/* Nan Xiao — personal site · Editorial Warm */
:root{
  --bg:#f7f2e9; --text:#2a2419; --muted:#7a6f5d; --accent:#a4451f;
  --card:#fffdf8; --border:#e3d9c6;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Georgia,'Times New Roman',serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden}
.sans{font-family:'Segoe UI',system-ui,sans-serif}
.wrap{max-width:820px;margin:0 auto;padding:0 24px}

/* Masthead & nav */
header.masthead{text-align:center;padding:40px 96px 26px;border-bottom:3px double var(--border)}
header.masthead .site-title{font-size:40px;font-weight:700;letter-spacing:-.5px}
header.masthead .site-title a{color:var(--text);text-decoration:none}
header.masthead .sub{font-style:italic;color:var(--muted);margin-top:4px}
nav.main{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;padding:14px 0;border-bottom:1px solid var(--border)}
nav.main a{color:var(--text);text-decoration:none;margin:0 14px;font-size:13px;text-transform:uppercase;letter-spacing:2px;font-family:'Segoe UI',system-ui,sans-serif}
nav.main a:hover,nav.main a.active{color:var(--accent)}

/* Common */
.rule{border:0;border-top:1px solid var(--border);margin:44px 0}
.section-label{font-family:'Segoe UI',system-ui,sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:3px;color:var(--accent);margin-bottom:18px}
.page-title{font-size:32px;margin:48px 0 8px}
.page-intro{color:#4a4234;font-size:17px;max-width:640px;margin-bottom:8px}
a{color:var(--accent)}
.btn{display:inline-block;font-family:'Segoe UI',system-ui,sans-serif;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--card);background:var(--accent);padding:10px 20px;border-radius:4px;text-decoration:none;margin-top:14px}
.btn:hover{background:#87381a}

/* Home lede */
.lede{padding:52px 0 8px}
.lede h1{font-size:34px;line-height:1.25;font-weight:700}
.lede h1 em{color:var(--accent);font-style:italic}
.lede p{margin-top:18px;font-size:18px;color:#4a4234;max-width:640px}
.byline{margin-top:16px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;font-family:'Segoe UI',system-ui,sans-serif}
.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:36px}

/* Home studio (photo hotspots) */
.home .masthead{border-bottom:none;padding-bottom:12px}
.studio-block{
  width:100vw;margin:8px 0 8px;margin-left:calc(50% - 50vw);padding:0;
}
.studio-block .studio-inner{max-width:1180px;margin:0 auto;padding:0 8px}
.studio-photo{position:relative;margin:0;background:transparent}
.studio-photo img{width:100%;height:auto;display:block;border-radius:0}
.studio-photo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to right, var(--bg) 0%, rgba(247,242,233,0) 11%, rgba(247,242,233,0) 89%, var(--bg) 100%),
    linear-gradient(to bottom, var(--bg) 0%, rgba(247,242,233,0) 12%, rgba(247,242,233,0) 88%, var(--bg) 100%);
}
.hotspot{
  position:absolute;z-index:2;text-decoration:none;cursor:pointer;
  border-radius:50%;background:transparent;outline:none;
}
.hotspot::after{
  content:"";position:absolute;inset:-70%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,236,170,.9) 0%, rgba(255,186,70,.45) 34%, rgba(255,150,40,.12) 58%, transparent 72%);
  opacity:0;filter:blur(8px);transition:opacity .25s ease;
}
.hotspot:hover::after,.hotspot:focus-visible::after{opacity:1}
.hs-shelf{left:0;top:0;width:19%;height:82%;border-radius:18px}
.hs-shelf::after{inset:-8%;border-radius:22px;filter:blur(18px);
  background:radial-gradient(ellipse at 42% 48%, rgba(255,220,140,.5), transparent 68%)}
.hs-camera{left:31.5%;top:40.5%;width:12.5%;height:13%}
.hs-notebook{left:28.4%;top:50.4%;width:14%;height:8.4%;border-radius:40%}
.hs-laptop{left:43.5%;top:39.4%;width:19%;height:17%;border-radius:28%}
.hs-laptop::after{inset:-40%;filter:blur(12px)}
.hs-stone{left:63%;top:46.8%;width:6.4%;height:7%}
.hs-shell{left:68.6%;top:48.2%;width:5.8%;height:7%}

/* Essays / writing */
.essay h3{font-size:22px;margin-bottom:6px}
.essay h3 a{color:var(--text);text-decoration:none}
.essay h3 a:hover{color:var(--accent)}
.essay .date{font-size:13px;color:var(--muted);font-style:italic;margin-bottom:10px}
.essay p{font-size:16px;color:#4a4234}
.essay + .essay{margin-top:30px;padding-top:30px;border-top:1px solid var(--border)}
.tag-pill{font-family:'Segoe UI',system-ui,sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--accent);border:1px solid var(--border);border-radius:3px;padding:2px 8px;margin-left:8px;vertical-align:middle}

/* Reading timeline */
.reading-year{position:relative;padding-left:26px;border-left:2px solid var(--border);margin:8px 0 52px}
.reading-year::before{content:"";position:absolute;left:-5px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.reading-year .year-mark{font-family:'Segoe UI',system-ui,sans-serif;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.year-shelf{list-style:none}
.year-shelf li{padding:11px 0;border-bottom:1px solid var(--border);font-size:17px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.year-shelf em{font-style:italic}
.year-shelf .who{color:var(--muted);font-size:14px;font-style:italic}
.book{margin:0 0 8px;padding:0 0 26px;border-bottom:1px solid var(--border)}
.book + .book{margin-top:26px}
.book h3{font-size:22px;margin-bottom:4px}
.book .who{font-size:13px;color:var(--muted);font-style:italic;margin-bottom:12px}
.book p{font-size:16px;color:#4a4234}
.zh-original{margin-top:22px;padding-top:8px}
.zh-original summary{cursor:pointer;font-family:'Segoe UI',system-ui,sans-serif;font-size:13px;letter-spacing:.5px;color:var(--accent);list-style:none}
.zh-original summary::-webkit-details-marker{display:none}
.zh-original summary::before{content:"▸ ";font-size:11px}
.zh-original[open] summary::before{content:"▾ "}
.zh-original[open] summary{margin-bottom:20px}
.zh-note{margin-bottom:24px}
.zh-note h4{font-size:17px;margin-bottom:8px}
.zh-note p{font-size:15.5px;line-height:1.9;color:#3a3226}

/* Article body */
article.post-body{max-width:660px;margin:0 auto;padding:48px 0}
article.post-body h1{font-size:32px;line-height:1.25;margin-bottom:8px}
article.post-body .meta{font-size:13px;color:var(--muted);font-style:italic;margin-bottom:28px}
article.post-body p{font-size:17px;margin-bottom:20px;color:#3a3226}
article.post-body ul,article.post-body ol{margin:0 0 20px 22px}
article.post-body li{font-size:17px;margin-bottom:8px;color:#3a3226}
article.post-body h2{font-size:22px;margin:36px 0 16px}
article.post-body h3{font-size:18px;margin:28px 0 12px;font-weight:600}
article.post-body .note{font-size:15px;color:var(--muted);margin-top:8px}
article.post-body blockquote{margin:6px 0 20px;padding:2px 0 2px 18px;border-left:2px solid var(--border);color:#3a3226;font-size:17px;font-style:normal;line-height:1.7}
article.post-body img{max-width:100%;border-radius:4px;margin:10px 0}

/* Photos */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.gallery figure{margin:0}
.gallery .ph{aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:linear-gradient(150deg,#c9a06b,#7d5230);cursor:pointer}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s}
.gallery .ph:hover img{opacity:.85}
.gallery figcaption{font-size:13px;font-style:italic;color:var(--muted);margin-top:6px}

/* Lightbox */
.lightbox{display:none;position:fixed;inset:0;background:rgba(20,16,10,.92);z-index:1000;align-items:center;justify-content:center;padding:56px 24px;cursor:zoom-out}
.lightbox.active{display:flex}
.lightbox img{max-width:100%;max-height:100%;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.5);cursor:default}
.lightbox .lb-cap{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#f0e9dc;font-family:Georgia,serif;font-style:italic;font-size:14px}
.lightbox .lb-close{position:absolute;top:18px;right:26px;color:#f0e9dc;font-size:34px;font-family:'Segoe UI',system-ui,sans-serif;cursor:pointer;line-height:1;font-weight:300}
.lightbox .lb-close:hover{color:var(--accent)}
.ph-a{background:linear-gradient(150deg,#7fa8c9,#33618a)}
.ph-b{background:linear-gradient(150deg,#c9a06b,#7d5230)}
.ph-c{background:linear-gradient(150deg,#8fb08c,#3c5e46)}
.ph-d{background:linear-gradient(150deg,#b697c9,#553a6e)}
.ph-e{background:linear-gradient(150deg,#c99797,#6e3a3a)}
.ph-f{background:linear-gradient(150deg,#97b5c9,#3a5a6e)}

/* Side card */
.side .ph{aspect-ratio:4/5;border-radius:4px;background:linear-gradient(150deg,#c9a06b,#7d5230);margin-bottom:8px}
.side .cap{font-size:13px;font-style:italic;color:var(--muted)}

/* Work / projects */
.work-list{list-style:none}
.work-list li{padding:20px 0;border-bottom:1px solid var(--border)}
.work-list .row{display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.work-list h4{font-size:19px}
.work-list p{font-size:15px;color:#4a4234;margin-top:6px}
.work-list .where{font-size:13px;color:var(--muted);font-style:italic}
.work-list .tag{font-family:'Segoe UI',system-ui,sans-serif;font-size:12px;color:var(--accent);white-space:nowrap;text-align:right}

/* Resume */
.resume h2{font-size:15px;text-transform:uppercase;letter-spacing:3px;color:var(--accent);font-family:'Segoe UI',system-ui,sans-serif;margin:36px 0 14px;border-bottom:1px solid var(--border);padding-bottom:6px}
.resume .entry{margin-bottom:22px}
.resume .entry .head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px}
.resume .entry h3{font-size:18px}
.resume .entry .when{color:var(--muted);font-size:14px;font-style:italic}
.resume .entry .role{font-style:italic;color:#4a4234}
.resume ul{margin:8px 0 0 20px}
.resume li{font-size:15px;color:#3a3226;margin-bottom:6px}
.resume .skills p{font-size:15px;margin-bottom:6px}

/* Footer */
footer.site-footer{margin:56px 0 40px;padding-top:22px;border-top:3px double var(--border);text-align:center;color:var(--muted);font-size:14px}
html[data-lang="zh"] .t-en{display:none!important}
html[data-lang="en"] .t-zh,html:not([data-lang]) .t-zh{display:none!important}
html[data-lang="zh"] .reading-year .book > p{display:none}
html[data-lang="zh"] details.zh-original > summary{display:none}
footer.site-footer a{color:var(--accent)}

@media(max-width:640px){
  .two-col{grid-template-columns:1fr}
  .lede h1{font-size:27px}
  header.masthead .site-title{font-size:30px}
  header.masthead{padding:40px 24px 26px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  nav.main a{margin:0 8px}
  .work-list .row{flex-direction:column;gap:4px}
  .work-list .tag{text-align:left;white-space:normal}
  .year-shelf li{flex-direction:column;gap:2px}
}

/* ===================== The Exhibition ===================== */

/* --- Museum hall (photos.html) --- */
.hall{position:relative;min-height:72vh;display:flex;flex-direction:column;overflow-x:hidden;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  background:linear-gradient(#f6efdf 0%, #efe4cd 46%, #e6d8ba 62%)}
.hall::before{content:"";position:absolute;top:-18vh;left:50%;transform:translateX(-50%);
  width:110vw;height:52vh;background:radial-gradient(ellipse at center,
  rgba(255,250,235,.95) 0%, rgba(255,248,228,.35) 45%, transparent 70%);pointer-events:none}
.hall .beams{position:absolute;top:0;left:0;right:0;height:9vh;
  background:repeating-linear-gradient(90deg, transparent 0 11.8vw, rgba(120,95,55,.14) 11.8vw 12.5vw),
  linear-gradient(#d9c8a6, #e8dcc2);border-bottom:2px solid rgba(120,95,55,.22)}
.hall .floor{position:absolute;left:-30vw;right:-30vw;bottom:0;height:32vh;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 7.4vw, rgba(96,74,40,.18) 7.4vw 7.7vw),
  repeating-linear-gradient(0deg, rgba(255,255,255,0) 0 5.2vh, rgba(96,74,40,.14) 5.2vh 5.35vh),
  linear-gradient(#dccba8, #cdb888);background-color:#d8c6a0;
  transform:perspective(520px) rotateX(48deg);transform-origin:50% 100%;
  box-shadow:0 -14px 40px rgba(90,70,40,.18) inset}
.arches{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-end;gap:4.5vw;
  padding:calc(9vh + 110px) 4vw 16vh;flex-wrap:wrap}
.doorway{position:relative;text-decoration:none;color:inherit;display:block}
.doorway .arch{position:relative;width:min(210px,23vw);aspect-ratio:11/16;border-radius:999px 999px 0 0;overflow:hidden;
  border:10px solid #e7dcc4;border-bottom:none;
  box-shadow:0 0 0 2px rgba(120,95,55,.25), 0 18px 40px rgba(90,70,40,.25);background:#1c150c}
.doorway .arch img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.62) saturate(.9);transform:scale(1.04);transition:filter .45s, transform .45s}
.doorway .arch::after{content:"";position:absolute;inset:0;border-radius:999px 999px 0 0;
  background:linear-gradient(rgba(0,0,0,.28), transparent 40%, rgba(0,0,0,.18));transition:opacity .45s}
.doorway:hover .arch img{filter:brightness(.95) saturate(1);transform:scale(1)}
.doorway:hover .arch::after{opacity:.35}
.doorway .teaser{position:absolute;left:50%;bottom:26%;transform:translateX(-50%) translateY(8px);width:82%;text-align:center;
  color:#f7efdd;font-style:italic;font-size:14px;line-height:1.5;text-shadow:0 2px 10px rgba(0,0,0,.75);
  opacity:0;transition:opacity .45s, transform .45s;pointer-events:none;z-index:2}
.doorway:hover .teaser{opacity:1;transform:translateX(-50%) translateY(0)}
.doorway .plaque{margin:14px auto 0;width:max-content;max-width:100%;background:#fffdf8;border:1px solid #d9cdb6;
  padding:6px 15px;text-align:center;box-shadow:0 3px 10px rgba(90,70,40,.12)}
.doorway .plaque .rm{font-family:'Segoe UI',system-ui,sans-serif;font-size:10px;letter-spacing:2.5px;color:var(--accent);text-transform:uppercase}
.doorway .plaque .nm{font-size:15.5px;font-weight:700;line-height:1.35}
.doorway .plaque .yr{font-size:11.5px;font-style:italic;color:var(--muted)}
.doorway.closed .arch{background:linear-gradient(#141009,#241b0f)}
.doorway.closed .arch .dark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#7a6a50;font-style:italic;font-size:13px}
.arch.ys-arch{background:
  radial-gradient(ellipse at 50% 78%, rgba(244,217,154,.55), transparent 42%),
  linear-gradient(180deg, #f4b15a 0%, #c45a28 38%, #3a2214 72%, #1a120c 100%)}
.doorway.closed .teaser{bottom:38%}
.doorway .rope{position:absolute;left:-14%;right:-14%;bottom:-6px;height:60px;z-index:3;pointer-events:none}
.doorway .rope svg{width:100%;height:100%}
.hall .hint{position:absolute;bottom:2.6vh;left:0;right:0;text-align:center;z-index:3;
  font-family:'Segoe UI',system-ui,sans-serif;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(90,75,50,.75)}

/* --- Room pages --- */
.room-wrap{max-width:960px;margin:0 auto;padding:0 24px}
.room-top{display:flex;justify-content:space-between;align-items:center;padding:22px 0;gap:10px;flex-wrap:wrap;
  font-family:'Segoe UI',system-ui,sans-serif;font-size:11.5px;letter-spacing:2px;text-transform:uppercase}
.room-top a{color:var(--accent);text-decoration:none}
.room-top .mid{color:var(--muted)}
.room-wall-text{max-width:580px;margin:48px auto 66px;text-align:center}
.room-wall-text .roman{font-family:'Segoe UI',system-ui,sans-serif;font-size:12px;color:var(--accent);letter-spacing:4px;text-transform:uppercase}
.room-wall-text h1{font-size:38px;margin:6px 0 2px}
.room-wall-text .years{font-size:15px;font-style:italic;color:var(--muted);margin-bottom:18px}
.room-wall-text p{font-size:16.5px;color:#4a4234;text-align:left}
.hang{display:grid;grid-template-columns:1fr 240px;gap:0;margin-bottom:96px;align-items:end}
.hang.flip{grid-template-columns:240px 1fr}
.hang .photo img{width:100%;display:block;box-shadow:0 22px 50px -18px rgba(60,45,20,.35);cursor:pointer}
.exhibit-label{margin:0 0 4px 28px;background:#fffdf8;border:1px solid var(--border);padding:14px 16px;max-width:230px}
.hang.flip .exhibit-label{order:-1;margin:0 28px 4px 0;justify-self:end}
.exhibit-label .t{font-size:16px;font-weight:700;line-height:1.4}
.exhibit-label .m{font-size:12.5px;font-style:italic;color:var(--muted);margin-top:2px}
.exhibit-label .d{font-family:'Segoe UI',system-ui,sans-serif;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin-top:8px}
.exhibit-label .note{font-size:13px;color:#4a4234;margin-top:8px;font-style:italic}
.room-nav{display:flex;justify-content:space-between;border-top:3px double var(--border);padding:26px 0 60px;gap:10px;flex-wrap:wrap;
  font-family:'Segoe UI',system-ui,sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.room-nav a{color:var(--accent);text-decoration:none}
.room-nav .dim{color:var(--muted)}

@media(max-width:760px){
  .arches{gap:8vw;padding:calc(9vh + 56px) 4vw 14vh}
  .doorway .arch{width:min(190px,37vw)}
  .hang,.hang.flip{grid-template-columns:1fr}
  .exhibit-label,.hang.flip .exhibit-label{order:2;margin:14px 0 0;max-width:100%;justify-self:start}
  .room-wall-text h1{font-size:30px}
}