/* ============================================================
   Lawrence Yen — Portfolio V4
   All styling lives in this single file.
   Design system: minimal, sculptural, editorial, warm neutral.
   ============================================================ */

/* -------- DESIGN TOKENS -------- */
:root{
  /* palette — warm neutral, no pure white, no pure black */
  --bg:        #F8F6F2;   /* warm cream background */
  --ink:       #1B1B1A;   /* near-black */
  --ink-2:     #3C3A36;   /* body text */
  --mute:      #8F8A82;   /* meta, labels */
  --line:      #E4DFD6;   /* hairline */
  --accent:    #8A3F25;   /* deep terracotta, used sparingly */

  /* type */
  /* Chinese (思源黑體 / Source Han Sans TC — served as Noto Sans TC on Google Fonts) */
  --font-cn:   "Noto Sans TC", "PingFang TC", "Source Han Sans TC", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  --font-sans: "Jost", "Helvetica Neue", Arial, var(--font-cn);
  --font-serif:"Instrument Serif", Georgia, var(--font-cn);

  /* spacing scale */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 60px;
  --s-6: 96px;
  --s-7: 140px;

  --max-w: 1400px;
  --pad-x: 40px;
}

/* -------- RESET & BASE -------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-sans);
  font-weight:400;font-size:15px;line-height:1.65;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;padding:0}

/* -------- HEADER + OVERLAY NAV -------- */
header.site{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(248,246,242,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:26px var(--pad-x) 22px;
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid transparent;transition:border-color .3s;
}
header.site.is-scrolled{border-bottom-color:var(--line)}
.wordmark{
  font-weight:400;font-size:14px;text-transform:uppercase;letter-spacing:.22em;
}
.wordmark .cn{color:var(--mute);margin-left:8px;letter-spacing:.1em}
.menu-toggle{
  font-weight:400;font-size:14px;text-transform:uppercase;letter-spacing:.22em;
  transition:color .2s;
}
.menu-toggle:hover{color:var(--mute)}

.overlay{
  position:fixed;inset:0;z-index:45;background:rgba(248,246,242,.985);
  backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .35s ease;
  padding:110px var(--pad-x) 60px;overflow:auto;
}
.overlay.open{opacity:1;pointer-events:auto}
.overlay-inner{
  max-width:var(--max-w);margin:0 auto;
  display:grid;grid-template-columns:140px 1fr;gap:60px;
}
.overlay .label{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
}
.overlay ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.overlay ul li a{
  font-family:var(--font-serif);font-size:38px;line-height:1.2;letter-spacing:.01em;
  color:var(--ink);display:inline-block;padding:4px 0;
  transition:color .2s,transform .3s;
}
.overlay ul li a:hover{color:var(--accent);transform:translateX(6px)}
.overlay .spacer{height:20px}

/* -------- SECTION HEADERS (filter bar / page titles) -------- */
main{padding-top:80px}

.section-header{
  max-width:var(--max-w);margin:0 auto;padding:var(--s-5) var(--pad-x) var(--s-3);
  display:grid;grid-template-columns:160px 1fr;gap:48px;align-items:baseline;
  border-bottom:1px solid var(--line);
}
.section-header .label{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
}
.section-header .filters{display:flex;flex-wrap:wrap;gap:28px}
.section-header .filters button{
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
  transition:color .2s;
}
.section-header .filters button:hover{color:var(--ink)}
.section-header .filters button.active{color:var(--ink)}
.section-header .filters .count{font-size:9px;vertical-align:super;margin-left:3px;letter-spacing:0}

/* -------- OBJECT GRID -------- */
.grid{
  max-width:var(--max-w);margin:0 auto;
  padding:var(--s-4) var(--pad-x) var(--s-7);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5) var(--s-4);
  align-items:start;
}
.tile{display:block;position:relative}
.tile.hidden{display:none}
.tile .frame{
  aspect-ratio:3/2;overflow:hidden;background:#EDE8DF;
  display:flex;align-items:center;justify-content:center;
}
.tile .frame img{
  /* Large images fill and crop. Small/low-res images scale up only to frame width,
     then letterbox with cream instead of being blown up past their natural size. */
  max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform 1s cubic-bezier(.2,.6,.2,1);
}
.tile:hover .frame img{transform:scale(1.03)}
.tile .meta{
  margin-top:14px;display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;
}
.tile .meta .name{
  font-family:var(--font-serif);font-size:20px;line-height:1.2;color:var(--ink);
  letter-spacing:.005em;
}
.tile .meta .cat{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
  white-space:nowrap;
}

/* -------- PROJECT PAGE -------- */
.project{
  max-width:var(--max-w);margin:0 auto;
  padding:var(--s-6) 0 var(--s-5);
}
.project .back{
  padding:0 var(--pad-x);margin-bottom:var(--s-4);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
}
.project .back:hover{color:var(--ink)}

/* Main title sits in normal document flow — no sticky, no transform.
   A separate floating compact title bar (.project-titlebar) appears
   only after scrolling past the hero. */
.project h1{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(40px,5vw,72px);line-height:1.02;letter-spacing:-.01em;
  padding:0 var(--pad-x);margin:0 0 var(--s-3);max-width:none;
}

/* Floating compact title bar shown while scrolling through project images. */
.project-titlebar{
  position:fixed;left:0;right:0;top:64px;z-index:35;
  padding:10px var(--pad-x);
  background:rgba(248,246,242,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(16px,1.8vw,20px);line-height:1.2;letter-spacing:0;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.project-titlebar.is-visible{opacity:1;transform:translateY(0)}
@media (max-width:720px){
  .project-titlebar{top:64px;font-size:15px;padding:9px var(--pad-x)}
}
.project .meta-table{
  padding:0 var(--pad-x);margin-bottom:var(--s-5);
  display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-3) var(--s-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-top:var(--s-3);padding-bottom:var(--s-3);
  padding-left:var(--pad-x);padding-right:var(--pad-x);
}
.project .meta-table .k{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
  margin-bottom:6px;
}
.project .meta-table .v{font-size:14px;color:var(--ink-2)}

.project .desc{
  padding:0 var(--pad-x);margin:0 auto var(--s-5);max-width:720px;
}
.project .desc p{
  font-size:17px;line-height:1.7;color:var(--ink-2);margin-bottom:1em;
}
.project .desc p:last-child{margin-bottom:0}

/* content blocks — gallery variants */
.block{margin-bottom:var(--s-5)}
.block-hero img,
.block-hero video,
.block-full img,
.block-full video{width:100%;height:auto;display:block;max-width:100%}
.block-hero,
.block-full{padding:0}
.block-2up{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);
  padding:0 var(--pad-x);
}
.block-3up{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s-2);
  padding:0 var(--pad-x);
}
.block-2up figure,
.block-3up figure{margin:0}
.block-2up figure img,
.block-2up figure video,
.block-3up figure img,
.block-3up figure video{
  width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:#EDE8DF;
}
.block figcaption{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);margin-top:10px;padding:0 var(--pad-x);
}
.block-2up figcaption,
.block-3up figcaption{padding:0}

.credits{
  padding:0 var(--pad-x);margin-top:var(--s-5);
  max-width:720px;margin-left:auto;margin-right:auto;
  border-top:1px solid var(--line);padding-top:var(--s-3);
}
.credits .k{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
  margin-bottom:var(--s-1);
}
.credits ul{list-style:none;display:flex;flex-direction:column;gap:4px}
.credits ul li{font-size:14px;color:var(--ink-2)}
.credits ul li .role{color:var(--mute);margin-right:10px;display:inline-block;min-width:140px}

.next-project{
  max-width:var(--max-w);margin:var(--s-7) auto 0;padding:var(--s-5) var(--pad-x);
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
}
.next-project .k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.next-project a{
  font-family:var(--font-serif);font-size:28px;line-height:1.2;color:var(--ink);
  transition:color .2s;
}
.next-project a:hover{color:var(--accent)}

/* -------- ABOUT PAGE -------- */
.about{
  max-width:var(--max-w);margin:0 auto;padding:var(--s-6) var(--pad-x) var(--s-5);
}
.about-nav{
  display:grid;grid-template-columns:160px 1fr;gap:48px;margin-bottom:var(--s-6);
}
.about-nav .label{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
}
.about-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:18px 28px}
.about-nav ul li a{
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
  transition:color .2s;
}
.about-nav ul li a.active,
.about-nav ul li a:hover{color:var(--ink)}

.about-body{
  display:grid;grid-template-columns:160px minmax(0,640px) minmax(0,300px);
  gap:48px;align-items:start;
}
.about-body .col-label{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
  padding-top:8px;
}
.bio .pull{
  font-family:var(--font-serif);font-size:clamp(24px,2.2vw,30px);
  line-height:1.35;letter-spacing:.01em;color:var(--ink);margin-bottom:1.4em;
}
/* .bio .pull em styled in Chinese typography section at end of file */
.bio p{font-size:16px;line-height:1.75;color:var(--ink-2);margin-bottom:1.3em}

.sect{margin-top:var(--s-5)}
.sect h3{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  color:var(--ink);margin-bottom:var(--s-2);padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.xp-row{
  display:grid;grid-template-columns:120px 1fr;gap:20px;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.xp-row:last-child{border-bottom:none}
.xp-date{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding-top:2px}
.xp-title{font-size:15px;color:var(--ink)}
.xp-org{font-size:13px;color:var(--mute);margin-top:3px}

.simple-list{list-style:none}
.simple-list li{
  padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2);
}
.simple-list li:last-child{border-bottom:none}

.sidecontact{position:sticky;top:120px}
.sidecontact .k{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
  display:block;margin-bottom:4px;
}
.sidecontact .v{
  font-size:14px;color:var(--ink);display:block;margin-bottom:20px;
}
.sidecontact .v a{border-bottom:1px solid transparent;transition:border-color .2s}
.sidecontact .v a:hover{border-bottom-color:var(--ink)}

/* -------- CONTACT PAGE -------- */
.contact-page{
  max-width:var(--max-w);margin:0 auto;padding:var(--s-6) var(--pad-x) var(--s-5);
}
.contact-hero{
  display:grid;grid-template-columns:160px 1fr;gap:48px;
  margin-bottom:var(--s-6);
}
.contact-hero .label{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);padding-top:12px}
.contact-hero h1{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(38px,4.4vw,62px);line-height:1.05;letter-spacing:-.01em;
  color:var(--ink);max-width:16ch;
}
.contact-hero h1 em{font-style:normal;color:var(--accent)}
.contact-grid{
  display:grid;grid-template-columns:160px repeat(3,1fr);gap:48px;
}
.contact-col .k{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
  margin-bottom:10px;
}
.contact-col .v{font-size:15px;color:var(--ink);line-height:1.6}
.contact-col .v a{border-bottom:1px solid var(--line);transition:border-color .2s}
.contact-col .v a:hover{border-bottom-color:var(--ink)}

/* -------- FOOTER -------- */
footer{
  border-top:1px solid var(--line);
  padding:30px var(--pad-x);
  display:flex;flex-wrap:wrap;gap:22px 36px;justify-content:center;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
}
footer a:hover{color:var(--ink)}
footer .copyright{color:var(--mute);width:100%;text-align:center;margin-top:8px}

/* -------- RESPONSIVE -------- */
@media (max-width:1000px){
  .grid{grid-template-columns:repeat(2,1fr);gap:var(--s-4) var(--s-3)}
  .project .meta-table{grid-template-columns:repeat(3,1fr)}
  .about-body{grid-template-columns:1fr;gap:20px}
  .sidecontact{position:static;margin-top:var(--s-4)}
  .contact-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:700px){
  :root{--pad-x:22px}
  .grid{grid-template-columns:1fr;gap:var(--s-4);padding-bottom:var(--s-5)}
  .section-header{grid-template-columns:1fr;gap:14px;padding-top:var(--s-4)}
  .about-nav{grid-template-columns:1fr;gap:14px;margin-bottom:var(--s-4)}
  .project .meta-table{grid-template-columns:1fr 1fr;gap:var(--s-3) var(--s-2)}
  .contact-hero{grid-template-columns:1fr;gap:14px;margin-bottom:var(--s-4)}
  .contact-grid{grid-template-columns:1fr;gap:24px}
  .overlay{padding:90px var(--pad-x) 60px}
  .overlay-inner{grid-template-columns:1fr;gap:16px}
  .overlay ul li a{font-size:28px}
  .block-2up,.block-3up{grid-template-columns:1fr;gap:var(--s-2)}
}

/* -------- LIGHTBOX (click image to view original) -------- */
.block img.zoomable{cursor:zoom-in;transition:opacity .2s ease}
.block img.zoomable:hover{opacity:.92}
.lightbox{
  position:fixed;inset:0;
  background:rgba(15,15,14,.94);
  display:none;align-items:center;justify-content:center;
  z-index:9999;padding:40px;
  -webkit-tap-highlight-color:transparent;
}
.lightbox.is-open{display:flex}
.lightbox-img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  cursor:zoom-out;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.lightbox-close{
  position:absolute;top:20px;right:24px;
  width:44px;height:44px;border:0;background:transparent;
  color:#F8F6F2;font-size:36px;line-height:1;
  cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.lightbox-close:hover{background:rgba(255,255,255,.1)}
@media (max-width:640px){
  .lightbox{padding:16px}
  .lightbox-close{top:10px;right:10px}
}

/* -------- CHINESE TYPOGRAPHY (CMYK 70/40/20/12 = #4387B4) -------- */
/* Universal Chinese-text utility class. Apply via .cn-text or auto-applied in app.js for the footer copyright. */
.cn-text{
  font-family:var(--font-cn);
  color:#4387B4;
  /* Visually match Latin cap-height — Noto Sans TC tends to render larger at the same em, so trim slightly */
  font-size:0.92em;
  letter-spacing:.05em;
  font-style:normal;
}

/* Header wordmark Chinese (顏邑丞) */
.wordmark .cn{
  color:#4387B4;
  font-family:var(--font-cn);
  font-size:0.92em;
  margin-left:8px;
  letter-spacing:.1em;
  font-style:normal;
}

/* Bio pull-quote Chinese (顏邑丞) */
.bio .pull em{
  font-family:var(--font-cn);
  color:#4387B4;
  font-style:normal;
  font-size:0.92em;
  letter-spacing:.05em;
}

/* -------- ABOUT PORTRAIT -------- */
.bio .portrait{
  margin:0 0 var(--s-4);
  max-width:420px;
}
.bio .portrait img{
  width:100%;
  height:auto;
  display:block;
  border-radius:2px;
}
@media (max-width:768px){
  .bio .portrait{max-width:100%}
}

/* -------- PROJECT BLOCKS — only hero is full-width; gallery-full is constrained -------- */
.block-full{
  padding:0 var(--pad-x);
}
.block-full img,
.block-full video{
  width:100%;
  max-width:960px;
  margin:0 auto;
  height:auto;
  display:block;
}
.block-full figcaption{
  max-width:960px;
  margin:10px auto 0;
  padding:0;
}