/* Studio Wen — rice paper + sumi ink.
   Texture URLs (--rough, --stroke, --grain, --fibers) are generated in js/site.js;
   ink motion is procedural (js/ink.js). */

:root {
  --paper: #f1e9d8;
  --paper-deep: #e7dcc4;
  --ink: #1c1a17;
  --ink-2: #4a453d;
  --ink-3: #8a8174;
  --seal: #cc4125;
  --nav-h: 68px;
  --serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --type: "Courier Prime", "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  color: var(--ink);
  font: 400 19px/1.6 var(--serif);
  background-color: var(--paper);
  background-image:
    var(--grain, none),
    var(--fibers, none),
    radial-gradient(ellipse at 12% 8%, rgba(150, 120, 80, .10), transparent 45%),
    radial-gradient(ellipse at 90% 85%, rgba(150, 120, 80, .12), transparent 50%),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(120, 95, 60, .16));
  background-attachment: fixed;
  padding-bottom: var(--nav-h);
  -webkit-font-smoothing: antialiased;
}
/* fixed backgrounds force a full repaint on every scroll frame on phones */
@media (hover: none) { body { background-attachment: scroll; } }
a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--paper); }

.sr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- ink overlay: page in / out, drops, UI wipes (WebGL, js/ink.js) ---------- */
.ink-overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 3000; pointer-events: none; }
/* Arriving from a tab switch: paint the screen inked from the very first frame (no paper flash). */
html.ink-nav body > * { visibility: hidden; }
html.ink-nav body::before { content: ""; position: fixed; inset: 0 0 var(--nav-h); z-index: 3002; background: #1c1a17; }
/* tab switches: ink stays above the bottom menu bar */
.ink-overlay.under-nav, .veil.under-nav { z-index: 995; }
.veil.under-nav { bottom: var(--nav-h); }
/* Covers the first paint until the overlay has drawn; then only the seal remains. */
.veil {
  position: fixed; inset: 0; z-index: 3001; pointer-events: none; background: var(--ink);
  display: grid; place-items: center; transition: opacity .7s;
}
.veil.glass { background: transparent; }
.veil.fade { opacity: 0; }
.veil.done { display: none; }
.veil .seal { width: 88px; transition: opacity .45s, transform .6s; }
.veil .seal.gone { opacity: 0; transform: scale(.94); }

/* cursor brush trail: sits on the paper, under the menu and the ink overlay */
.trail { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 900; pointer-events: none; mix-blend-mode: multiply; }

/* ---------- reveals: ink soaks content into the paper (procedural SVG filter) ---------- */
[data-ink] { opacity: 0; }

/* ---------- seal (chop) ---------- */
.seal { display: inline-block; width: 34px; line-height: 0; }
.seal img { width: 100%; height: auto; display: block; user-select: none; }
.stamp { animation: stamp .55s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes stamp { from { transform: scale(1.7) rotate(-14deg); opacity: 0; } to { transform: scale(1) rotate(-3deg); opacity: 1; } }

/* ---------- bottom nav ---------- */
nav#menu {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--nav-h); z-index: 1000;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 48px;
  background: var(--paper) var(--grain, none);
}
nav#menu::before { /* brushed top edge */
  content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 16px;
  background: var(--stroke) center / 100% 100% no-repeat; opacity: .9;
}
.wordmark { display: flex; align-items: center; gap: 12px; text-decoration: none; white-space: nowrap; }
.wordmark .seal { width: 32px; transform: rotate(-2deg); }
.wordmark .wm { font: 600 18px var(--serif); letter-spacing: .26em; text-transform: uppercase; }
.wordmark .wen .w { margin-right: -.26em; }
.wordmark .wen .zi { opacity: .3; }
#men { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; }
.brush-link {
  position: relative; text-decoration: none; padding: 4px 2px;
  font: 600 14px var(--serif); letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
  background: var(--stroke) left 0 bottom -1px / 0% 9px no-repeat;
  transition: background-size .55s cubic-bezier(.6, 0, .2, 1);
}
.brush-link:hover, .brush-link:focus-visible, .brush-link[aria-current="page"] { background-size: 100% 9px; }
#social { display: flex; gap: 10px; justify-content: flex-end; list-style: none; margin: 0; padding: 0; }
.blot-icon {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; color: var(--ink);
  transition: color .4s;
}
.blot-icon .blot { position: absolute; inset: -12px; background: var(--ink); opacity: 0; }
.blot-icon:hover, .blot-icon:focus-visible { color: var(--paper); }
.blot-icon svg { position: relative; width: 15px; height: 15px; fill: currentColor; }

.hamburger { display: none; justify-self: end; background: none; border: 0; width: 34px; height: 26px; position: relative; cursor: pointer; }
.hamburger i {
  position: absolute; left: 0; right: 0; height: 5px; background: var(--stroke) center / 100% 100% no-repeat;
  transition: transform .35s, opacity .35s;
}
.hamburger i:nth-child(1) { top: 0; } .hamburger i:nth-child(2) { top: 10px; } .hamburger i:nth-child(3) { top: 20px; }
.menu-open .hamburger i:nth-child(1) { transform: translateY(10px) rotate(40deg); }
.menu-open .hamburger i:nth-child(2) { opacity: 0; }
.menu-open .hamburger i:nth-child(3) { transform: translateY(-10px) rotate(-40deg); }
.mobilenav {
  position: fixed; inset: 0 0 var(--nav-h); z-index: 999; background: var(--paper) var(--grain, none);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s;
}
.menu-open .mobilenav { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.mobilenav .brush-link { font-size: 22px; }
.mobilenav .row { display: flex; gap: 14px; margin-top: 10px; }
@media (max-width: 920px) {
  nav#menu { grid-template-columns: 1fr auto; padding: 0 20px; }
  #men, #social { display: none; }
  .hamburger { display: block; }
}

/* ---------- page frame ---------- */
.page-content { max-width: 1180px; margin: 0 auto; padding: 84px 24px 40px; text-align: center; }
.page-title { display: inline-block; position: relative; }
.page-title h1 {
  margin: 0; font: 500 clamp(40px, 6vw, 64px)/1 var(--serif); letter-spacing: .12em; padding-left: .12em;
  text-transform: uppercase; filter: url(#ink-text);
}
.brush-under { display: block; width: 115%; margin: 8px 0 0 -7.5%; height: 18px; overflow: visible; }
.brush-under path {
  fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s .5s cubic-bezier(.6, 0, .2, 1);
}
.in .brush-under path, .brush-under.in path { stroke-dashoffset: 0; }
.copy { text-align: center; font: italic 400 15px var(--serif); color: var(--ink-3); padding: 40px 0 50px; }
.copy .seal { width: 22px; vertical-align: -6px; margin-left: 10px; }

/* ---------- work (landing) ---------- */
.brand { display: flex; flex-direction: column; align-items: center; }
.brand .seal { width: clamp(64px, 7vw, 88px); margin-bottom: 18px; animation-delay: .9s; }
.brand h1 {
  margin: 0; font: 500 clamp(32px, 4.6vw, 54px)/1 var(--serif); letter-spacing: .16em; padding-left: .16em;
  text-transform: uppercase; filter: url(#ink-text);
}
.zi { font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif; font-style: normal; font-weight: 500; }
.name-entry { margin: 56px 0 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.name-entry .entry { display: flex; align-items: baseline; gap: 10px; }
.name-entry .entry .hw { font: 600 20px var(--serif); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.name-entry .entry .eq { font: 400 16px var(--serif); color: var(--ink-3); }
.name-entry .entry .zi { font-size: 56px; line-height: 1; color: var(--seal); }
.name-entry .entry .py { font: italic 400 26px var(--serif); color: var(--ink-2); }
.name-entry .gloss { margin-top: 14px; font: italic 400 21px var(--serif); color: var(--ink-2); }
.name-entry .origin { margin-top: 4px; font: 400 16px var(--serif); letter-spacing: .04em; color: var(--ink-3); }
.name-entry .origin .zi { font-size: 16px; color: var(--seal); }
/* 文 watermark behind "Wen" (title + menu wordmark). The trailing letter-spacing is cancelled
   so the word's box matches its ink and the character centres on it. */
.wen { position: relative; display: inline-block; isolation: isolate; }
.wen .w { position: relative; margin-right: -.16em; }
.wen .zi {
  position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -56.5%);   /* raised: 文's weight sits low, so true centre looks low */
  font-size: 1.55em; line-height: 1; letter-spacing: 0; color: var(--seal); opacity: .24; pointer-events: none;
}
.brand h1 { margin: .22em 0 !important; }
.brand { position: relative; z-index: 0; }
.brand .owner { margin: 12px 0 0; font: italic 400 clamp(16px, 1.6vw, 19px) var(--serif); color: var(--ink-2); }
body[data-page="portfolio"] .page-content { max-width: 1240px; padding: 40px 28px 0; }
body[data-page="portfolio"] .copy { padding-top: 28px; }
body[data-page="portfolio"] #filter { margin-top: 30px; }
body[data-page="portfolio"] .portfolio-content { margin-top: 34px; }

#filter {
  list-style: none; padding: 0; margin: 46px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px;
}
#filter button {
  font: 600 14px var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  border: 0; cursor: pointer; padding: 7px 18px 6px;
  background: var(--stroke-fill) left center / 0% 100% no-repeat;
  transition: background-size .5s cubic-bezier(.6, 0, .2, 1), color .3s .1s;
}
#filter button:hover, #filter button[aria-pressed="true"] { background-size: 100% 100%; color: var(--paper); }

.portfolio-content { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
@media (max-width: 760px) { .portfolio-content { grid-template-columns: 1fr; gap: 6px; } body[data-page="portfolio"] .page-content { padding-left: 12px; padding-right: 12px; } }
.work { cursor: pointer; outline: none; }
/* hover info: an ink wash darkens the footage and the title soaks in, centred */
.work .cap {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; padding: 0 8%;
  background: radial-gradient(ellipse at center, rgba(28, 26, 23, .9), rgba(28, 26, 23, .78) 75%);
  color: var(--paper); opacity: 0; transition: opacity .55s ease; pointer-events: none;
}
.work .cap.on { opacity: 1; }
.work .cap-in { opacity: 0; transition: opacity .4s; }
.work .cap.on .cap-in { opacity: 1; }
.work h2 { margin: 0; font: 500 clamp(22px, 2.4vw, 30px)/1.15 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.work .role { margin: 10px 0 0; font: italic 400 16px var(--serif); color: rgba(241, 233, 216, .82); }
.work .award {
  display: inline-block; margin-top: 14px; padding: 4px 12px 3px; color: #f0866d; border: 1px solid currentColor; border-radius: 2px;
  font: 700 12.5px/1.3 var(--serif); letter-spacing: .18em; text-transform: uppercase;
}
/* touch screens can't hover: keep the footage clean; details show in the player on tap */
@media (hover: none) {
  .work .cap { display: none; }
}
.work:focus-visible .inkimg { outline: 2px dashed var(--ink-2); outline-offset: 8px; }

/* footage tile: torn paper edge; the ink engine paints wash -> colour into the canvas */
.inkimg {
  position: relative; aspect-ratio: 16 / 9;
  -webkit-mask: var(--rough) center / 100% 100% no-repeat; mask: var(--rough) center / 100% 100% no-repeat;
}
.inkimg canvas, .inkimg > img, .inkimg .preview, .inkimg .preview > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.inkimg > img { object-fit: cover; }
.inkimg .preview { pointer-events: none; }
.inkimg .preview > * { object-fit: cover; border: 0; opacity: 0; transition: opacity .8s; }
.inkimg .preview iframe { transform: scale(1.35); }
.inkimg .preview .on { opacity: 1; }
.inkimg .preview video { transition: none; }   /* swaps in on the same frame the ink was painting */
.inkimg.plain .preview video { transition: opacity 1.1s ease; }   /* touch screens: the clip simply fades in */

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 3vw 24px; background: var(--paper) var(--grain, none);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s;
}
.modal.open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.modal .close {
  position: absolute; right: 40px; top: 22px; width: 48px; height: 48px; border: 0; cursor: pointer; background: none;
}
.modal .close::before, .modal .close::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 21px; height: 7px; background: var(--stroke) center / 100% 100% no-repeat;
  transform: rotate(45deg);
}
.modal .close::after { transform: rotate(-42deg); }
@media (max-width: 700px) { .modal .close { right: 14px; top: 10px; } }
.modal .frame {
  width: min(94vw, calc((100vh - 230px) * 16 / 9)); aspect-ratio: 16 / 9; background: var(--ink);
  box-shadow: 0 0 0 10px rgba(28, 26, 23, .06), 0 30px 60px -30px rgba(28, 26, 23, .6);
}
.modal iframe, .modal video { width: 100%; height: 100%; border: 0; display: block; }
.modal .caption { max-width: 900px; text-align: center; margin-top: 22px; }
.clip-tabs { display: inline-flex; gap: 0; margin: 0 0 16px; border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden; }
.clip-tabs button {
  font: 600 14px var(--serif); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); border: 0; cursor: pointer;
  padding: 10px 22px 9px; background: transparent; transition: background-color .3s, color .3s;
}
.clip-tabs button + button { border-left: 1.5px solid var(--ink); }
.clip-tabs button:hover { background: rgba(28, 26, 23, .08); }
.clip-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.clip-tabs button[aria-selected="true"]::before { content: "▶ "; font-size: 10px; vertical-align: 2px; color: var(--seal); }
.clip-tabs-label { display: block; margin-bottom: 8px; font: italic 400 15px var(--serif); color: var(--ink-3); }
.modal .caption h2 { margin: 0; font: 500 30px var(--serif); }
.modal .caption p { margin: 4px 0 0; font-size: 16px; color: var(--ink-2); }
.modal .caption .credits { font: italic 400 14px var(--serif); color: var(--ink-3); }

/* ---------- screenplay (about / experience) ---------- */
.script { max-width: 620px; margin: 64px auto 0; text-align: left; font: 400 15px/1.5 var(--type); letter-spacing: .02em; }
.script p { margin: 0 0 1.5em; }
.script .slug { text-transform: uppercase; font-weight: 700; }
.script .character { margin: 2.6em 0 .3em 37%; text-transform: uppercase; }
.script .dialogue { margin: 0 14% 1.5em 25%; }
.script .trans { text-align: right; text-transform: uppercase; margin-top: 2.4em; }
.script a { text-decoration: none; background: var(--stroke) left bottom / 100% 4px no-repeat; padding-bottom: 3px; transition: background-size .4s; }
.script a:hover { background-size: 100% 8px; }
@media (max-width: 760px) {
  .script .character { margin-left: 28%; } .script .dialogue { margin: 0 4% 1.5em 12%; }
}

/* ---------- contact ---------- */
.contact-seal { width: 120px; margin: 54px auto 0; display: block; }
.contact-lines { margin-top: 34px; font: 500 clamp(22px, 3vw, 32px) var(--serif); }
.contact-lines a { text-decoration: none; }
.contact-lines .small { display: block; margin-top: 10px; font: italic 400 18px var(--serif); color: var(--ink-2); }
.contact-social { display: flex; justify-content: center; gap: 18px; margin-top: 34px; }
.contact-social .blot-icon { width: 52px; height: 52px; }
.contact-social .blot-icon svg { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-ink] { opacity: 1; }
}

/* ---------- about ---------- */
.about-body { max-width: 620px; margin: 56px auto 0; text-align: left; font-size: 20px; line-height: 1.7; }
.about-body p { margin: 0 0 1.1em; }
.about-body .clients { list-style: none; margin: 0; padding: 0; }
.about-body .clients > li { padding: 10px 0; border-top: 1px solid rgba(28, 26, 23, .14); }
.about-body .clients > li:last-child { border-bottom: 1px solid rgba(28, 26, 23, .14); }
.about-body .clients ul { list-style: none; margin: 4px 0 0; padding: 0 0 0 22px; font-style: italic; font-size: 18px; color: var(--ink-2); }
.about-body .clients ul li::before { content: "— "; color: var(--ink-3); }
.about-body .clients .note { display: block; margin-top: 2px; font-style: italic; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.about-body .clients b { font-weight: 500; }
.about-body .clients .role { font-style: italic; color: var(--ink-2); }

/* about: short intro + film-credits style block */
.about-body .lede { font-size: 26px; line-height: 1.4; }
.credits-block { max-width: 620px; margin: 56px auto 0; text-align: left; display: grid; gap: 34px; }
.credits-block > div { border-top: 1px solid rgba(28, 26, 23, .18); padding-top: 16px; }
.credits-block dt { font: 600 13px var(--serif); letter-spacing: .28em; text-transform: uppercase; color: var(--seal); margin-bottom: 10px; }
.credits-block dd { margin: 0 0 6px; font-size: 19px; line-height: 1.5; }
.credits-block dd b { font-weight: 500; }
.credits-block dd span { color: var(--ink-2); }
.credits-block dd.fine { font: 600 12px var(--serif); letter-spacing: .2em; color: var(--ink-3); margin-top: 8px; }

/* about: rough cut mentality */
.roughcut { max-width: 620px; margin: 64px auto 0; padding: 40px 0 0; text-align: center;
  border-top: 1px solid rgba(28, 26, 23, .18); }
.rc-label { margin: 0; font: 600 13px var(--serif); letter-spacing: .28em; text-transform: uppercase; color: var(--seal); }
.rc-motto { margin: 18px 0 0; font: 500 clamp(30px, 4.4vw, 42px)/1.2 var(--serif); filter: url(#ink-text); }
.rc-body { margin: 26px auto 0; max-width: 520px; font-size: 19px; line-height: 1.7; color: var(--ink-2); }
.rc-body p { margin: 0 0 1em; }
.rc-handle { display: inline-block; margin-top: 6px; font: 400 15px var(--type); letter-spacing: .04em; text-decoration: none;
  background: var(--stroke) left bottom / 100% 4px no-repeat; padding-bottom: 3px; transition: background-size .4s; }
.rc-handle:hover { background-size: 100% 8px; }
@media (max-width: 600px) {   /* phones: name on one line, roles on the next */
  .brand .owner .sep { display: none; }
  .brand .owner span { display: block; }
}