/* =========================================================
   林知远 · Lin Zhiyuan — Visual Design Portfolio
   Editorial Brutalism Refined · 2026
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --c-cream:        #F2EDE4;
  --c-paper:        #FAF6EE;
  --c-ink:          #0E0D0B;
  --c-ink-soft:     #1A1816;
  --c-vermillion:   #C8341A;
  --c-vermillion-d: #A02813;
  --c-muted:        #6B6760;
  --c-muted-2:      #9C968B;
  --c-line:         #D9D3C7;
  --c-line-strong:  #B6AE9D;

  --f-display: "Fraunces", "Noto Serif SC", "Songti SC", "STSong", serif;
  --f-body:    "Manrope", "Noto Sans SC", "PingFang SC", "Helvetica Neue", sans-serif;
  --f-mono:    "Fraunces", "Manrope", monospace;

  --container: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3.25rem);

  --ease: cubic-bezier(.2,.65,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. FONT-FACE ---------- */
@font-face{
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-400.woff2") format("woff2");
}
@font-face{
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-500.woff2") format("woff2");
}
@font-face{
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fraunces-700.woff2") format("woff2");
  font-feature-settings: "ss01" 1, "opsz" 144;
}
@font-face{
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-italic-400.woff2") format("woff2");
}
@font-face{
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-400.woff2") format("woff2");
}
@font-face{
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/manrope-500.woff2") format("woff2");
}
@font-face{
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-600.woff2") format("woff2");
}
@font-face{
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/manrope-700.woff2") format("woff2");
}
@font-face{
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-sans-sc-400.woff2") format("woff2");
}
@font-face{
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/noto-sans-sc-500.woff2") format("woff2");
}
@font-face{
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-sans-sc-700.woff2") format("woff2");
}
@font-face{
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-serif-sc-400.woff2") format("woff2");
}
@font-face{
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-serif-sc-700.woff2") format("woff2");
}

/* ---------- 3. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family: var(--f-body);
  background: var(--c-cream);
  color: var(--c-ink);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
::selection{background: var(--c-vermillion); color: var(--c-cream)}

/* paper grain overlay */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}

/* fine dot grid background (decorative) */
.dot-grid{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--c-line-strong) 0.6px, transparent 0.6px);
  background-size: 28px 28px;
  background-position: 0 0;
  opacity: .35;
  mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
}

/* ---------- 4. LAYOUT ---------- */
.wrap{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap-wide{
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section{ padding: clamp(4rem, 10vw, 8rem) 0; position: relative; }
.section--tight{ padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--dark{
  background: var(--c-ink);
  color: var(--c-cream);
}
.section--dark .dot-grid{
  background-image: radial-gradient(rgba(242,237,228,.18) 0.6px, transparent 0.6px);
  opacity: .6;
}

/* ---------- 5. TYPOGRAPHY ---------- */
.h-display{
  font-family: var(--f-display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 0.94;
  letter-spacing: -0.02em;
  font-size: clamp(3.5rem, 11vw, 11rem);
}
.h-1{
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
}
.h-2{
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 4vw, 3.25rem);
}
.h-3{
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.005em;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.h-4{
  font-family: var(--f-body);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}
.lead{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--c-ink-soft);
}
.body{ font-size: 1rem; line-height: 1.65; color: var(--c-ink-soft); }
.body-lg{ font-size: clamp(1.05rem, 1.2vw, 1.2rem); line-height: 1.65; color: var(--c-ink-soft); }
.small{ font-size: .85rem; line-height: 1.5; }
.italic{ font-style: italic; }

.label{
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.label--ink{ color: var(--c-ink); }
.label--accent{ color: var(--c-vermillion); }

.rule{
  height: 1px;
  background: var(--c-line-strong);
  width: 100%;
  display: block;
}
.rule--ink{ background: var(--c-ink); }
.rule--cream{ background: var(--c-cream); opacity:.25; }

/* ---------- 6. HEADER / NAV ---------- */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.25rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
  mix-blend-mode: normal;
}
.site-header.is-scrolled{
  background: rgba(242,237,228,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: .85rem var(--gutter);
  border-bottom: 1px solid var(--c-line);
}
.site-header.is-dark{
  background: transparent;
  color: var(--c-cream);
  border-bottom: 1px solid rgba(242,237,228,0.15);
}
.site-header.is-dark.is-scrolled{
  background: rgba(14,13,11,0.85);
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.brand__mark{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  position: relative;
  top: -1px;
}
.brand__mark svg{ display: block; width: 100%; height: 100%; }
.brand__name{ display: inline-flex; gap: .5rem; align-items: baseline; }
.brand__name em{
  font-style: normal;
  font-family: var(--f-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-left: .35rem;
}

.nav{
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.5rem);
}
.nav__link{
  font-family: var(--f-body);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  position: relative;
  padding: .35rem 0;
  color: var(--c-ink);
  transition: color .25s var(--ease);
}
.site-header.is-dark .nav__link{ color: var(--c-cream); }
.nav__link::after{
  content:"";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--c-vermillion);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .4s var(--ease);
}
.nav__link:hover::after,
.nav__link.is-current::after{ transform: scaleX(1); transform-origin: left center; }
.nav__link.is-current{ color: var(--c-vermillion); }
.site-header.is-dark .nav__link.is-current{ color: var(--c-vermillion); }

.nav__num{
  display: inline-block;
  font-family: var(--f-display);
  font-size: .7rem;
  color: var(--c-muted-2);
  margin-right: .35rem;
  font-feature-settings: "tnum" 1;
}

/* mobile menu trigger */
.menu-toggle{
  display: none;
  width: 28px;
  height: 28px;
  position: relative;
}
.menu-toggle span{
  position: absolute;
  left: 4px;
  right: 4px;
  height: 1.5px;
  background: var(--c-ink);
  transition: transform .4s var(--ease), top .4s var(--ease), opacity .25s var(--ease);
}
.menu-toggle span:nth-child(1){ top: 9px; }
.menu-toggle span:nth-child(2){ top: 17px; }
.site-header.is-dark .menu-toggle span{ background: var(--c-cream); }
.menu-toggle.is-open span:nth-child(1){ top: 13px; transform: rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ top: 13px; transform: rotate(-45deg); }

/* ---------- 7. FOOTER ---------- */
.site-footer{
  background: var(--c-ink);
  color: var(--c-cream);
  padding: clamp(4rem, 8vw, 6rem) 0 2rem;
  position: relative;
  overflow: hidden;
}
.site-footer .dot-grid{
  background-image: radial-gradient(rgba(242,237,228,.16) 0.6px, transparent 0.6px);
  opacity: .55;
}
.footer-cta{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 9vw, 8rem);
  line-height: .92;
  letter-spacing: -0.025em;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer-cta a{
  border-bottom: 2px solid transparent;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.footer-cta a:hover{ color: var(--c-vermillion); border-color: var(--c-vermillion); }
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(242,237,228,.18);
}
.footer-col h4{
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted-2);
  margin-bottom: 1.25rem;
}
.footer-col li{ margin-bottom: .55rem; font-size: .9rem; }
.footer-col a{
  transition: color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.footer-col a:hover{ color: var(--c-vermillion); }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  margin-top: 3rem;
  border-top: 1px solid rgba(242,237,228,.12);
  font-size: .78rem;
  color: var(--c-muted-2);
  flex-wrap: wrap;
  gap: 1rem;
}

/* ---------- 8. BUTTONS ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--f-body);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1rem 1.75rem;
  border: 1px solid var(--c-ink);
  color: var(--c-ink);
  background: transparent;
  position: relative;
  overflow: hidden;
  transition: color .4s var(--ease);
  cursor: pointer;
}
.btn::before{
  content:"";
  position: absolute;
  inset: 0;
  background: var(--c-ink);
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
  z-index: -1;
}
.btn:hover{ color: var(--c-cream); }
.btn:hover::before{ transform: translateY(0); }
.btn--accent{ border-color: var(--c-vermillion); color: var(--c-vermillion); }
.btn--accent::before{ background: var(--c-vermillion); }
.btn--accent:hover{ color: var(--c-cream); }
.btn--solid{ background: var(--c-ink); color: var(--c-cream); }
.btn--solid::before{ background: var(--c-vermillion); }
.btn--solid:hover{ color: var(--c-cream); }

.btn .arrow{
  display: inline-block;
  transition: transform .4s var(--ease);
}
.btn:hover .arrow{ transform: translateX(4px); }

/* text-link with arrow */
.text-link{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-body);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  position: relative;
}
.text-link .arrow{
  transition: transform .35s var(--ease);
}
.text-link:hover{ color: var(--c-vermillion); }
.text-link:hover .arrow{ transform: translateX(5px); }

/* ---------- 9. HERO / HOMEPAGE ---------- */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 7rem var(--gutter) 3rem;
}
.hero__top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: clamp(3rem, 9vh, 7rem);
  gap: 2rem;
}
.hero__meta{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .82rem;
}
.hero__meta-row{
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.hero__meta-row .label{ min-width: 80px; }
.hero__meta-row .val{ color: var(--c-ink); font-weight: 500; }

.hero__title-wrap{
  position: relative;
  flex: 1;
}
.hero__title{
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.028em;
  font-size: clamp(4rem, 16vw, 16rem);
}
.hero__title .line{
  display: block;
  overflow: hidden;
}
.hero__title .line > span{
  display: inline-block;
  transform: translateY(110%);
  animation: rise .95s var(--ease-out) forwards;
}
.hero__title .line:nth-child(2) > span{ animation-delay: .12s; }
.hero__title .line:nth-child(3) > span{ animation-delay: .24s; }
.hero__title .accent{
  font-style: italic;
  color: var(--c-vermillion);
  font-weight: 400;
}
.hero__title .small-cn{
  font-size: .42em;
  vertical-align: super;
  letter-spacing: 0;
  color: var(--c-muted);
  font-style: normal;
  font-family: var(--f-display);
  font-weight: 400;
  margin-left: .25em;
}

.hero__bottom{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-top: clamp(2rem, 5vh, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--c-line-strong);
}
.hero__intro{
  max-width: 460px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
}
.hero__scroll{
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.hero__scroll .dot{
  width: 7px;
  height: 7px;
  background: var(--c-vermillion);
  border-radius: 50%;
  animation: pulse 2.5s infinite;
}

.hero__portrait{
  position: absolute;
  top: 6.5rem;
  right: var(--gutter);
  width: clamp(140px, 16vw, 240px);
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  display: none;
}
.hero__portrait img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.1) contrast(1.05);
}

@keyframes rise{
  to{ transform: translateY(0); }
}
@keyframes pulse{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .4; transform: scale(0.85); }
}

/* ---------- 10. INTRO STATEMENT ---------- */
.statement{
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.statement__lead{ }
.statement__body{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.85rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--c-ink);
}
.statement__body .em{
  font-style: italic;
  color: var(--c-vermillion);
}

/* ---------- 11. SELECTED WORKS ---------- */
.works-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section-index{
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.section-index .num{
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--c-vermillion);
  font-feature-settings: "tnum" 1;
}
.section-index .title{
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.works-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.5rem) clamp(1.25rem, 2vw, 2rem);
}
.work-card{
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.work-card--1{ grid-column: 1 / span 7; }
.work-card--2{ grid-column: 8 / span 5; margin-top: 4rem; }
.work-card--3{ grid-column: 1 / span 5; }
.work-card--4{ grid-column: 6 / span 7; margin-top: 5rem; }
.work-card--5{ grid-column: 1 / span 6; }
.work-card--6{ grid-column: 7 / span 6; margin-top: 3.5rem; }

.work-card__media{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
}
.work-card--tall .work-card__media{ aspect-ratio: 4/5; }
.work-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out), filter .6s var(--ease);
  filter: grayscale(0.05);
}
.work-card:hover .work-card__media img{
  transform: scale(1.04);
  filter: grayscale(0);
}
.work-card__media::after{
  content:"";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 70%, rgba(14,13,11,0.15));
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.work-card:hover .work-card__media::after{ opacity: 1; }

.work-card__meta{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 1.25rem;
  gap: 1rem;
}
.work-card__title{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.work-card__title .cn{ display: block; }
.work-card__title .en{
  display: block;
  font-style: italic;
  font-size: .8em;
  color: var(--c-muted);
  margin-top: .15em;
}
.work-card__num{
  font-family: var(--f-display);
  font-size: .9rem;
  color: var(--c-vermillion);
  font-feature-settings: "tnum" 1;
  letter-spacing: .05em;
}
.work-card__cat{
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: .35rem;
}

/* ---------- 12. ABOUT TEASER ---------- */
.about-teaser{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.about-teaser__media{
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid var(--c-line);
  position: relative;
}
.about-teaser__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.1);
}
.about-teaser__content{ }
.about-teaser__content .h-1{ margin-bottom: 1.5rem; }
.about-teaser__content .body-lg{ margin-bottom: 2rem; max-width: 480px; }

/* ---------- 13. ABOUT PAGE ---------- */
.about-hero{
  padding: 9rem 0 4rem;
  position: relative;
}
.about-hero__title{
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.025em;
  font-size: clamp(3.5rem, 10vw, 9rem);
  margin-bottom: 2rem;
}
.about-hero__title em{
  font-style: italic;
  color: var(--c-vermillion);
}
.about-hero__sub{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-line-strong);
}
.about-hero__sub .lead{ max-width: 480px; }
.about-hero__sub dl{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem 1.5rem;
  font-size: .9rem;
}
.about-hero__sub dt{
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-muted);
  padding-top: .15rem;
}
.about-hero__sub dd{ color: var(--c-ink); }

/* portrait + bio */
.about-bio{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.about-portrait{
  position: sticky;
  top: 6rem;
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 1px solid var(--c-line);
}
.about-portrait img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.05);
}
.about-bio__text p{
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--c-ink-soft);
}
.about-bio__text p.lead{ color: var(--c-ink); margin-bottom: 2rem; }
.about-bio__text .pullquote{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  padding: 2rem 0 2rem 2rem;
  margin: 2rem 0;
  border-left: 2px solid var(--c-vermillion);
}

/* services list */
.services-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-line-strong);
}
.service-item{
  padding: 2rem 0;
  border-bottom: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 2rem;
  align-items: start;
}
.service-item:nth-child(odd){ padding-right: 2rem; border-right: 1px solid var(--c-line); }
.service-item:nth-child(even){ padding-left: 2rem; }
.service-item__num{
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--c-vermillion);
  font-feature-settings: "tnum" 1;
}
.service-item__title{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: .75rem;
}
.service-item__title .en{
  font-style: italic;
  font-size: .8em;
  color: var(--c-muted);
  margin-left: .5rem;
}
.service-item__desc{
  font-size: .95rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
  max-width: 380px;
}

/* clients list */
.clients-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-line-strong);
}
.clients-list li{
  padding: 1.25rem 1rem 1.25rem 0;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--c-ink);
  display: flex;
  align-items: baseline;
  gap: .75rem;
}
.clients-list li::before{
  content: "—";
  color: var(--c-vermillion);
}

/* timeline */
.timeline{
  border-top: 1px solid var(--c-line-strong);
}
.timeline__row{
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--c-line);
  align-items: start;
}
.timeline__year{
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 500;
  color: var(--c-vermillion);
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" 1;
}
.timeline__body h3{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.2;
  margin-bottom: .35rem;
}
.timeline__body .meta{
  font-size: .82rem;
  color: var(--c-muted);
  margin-bottom: .65rem;
  letter-spacing: 0.02em;
}
.timeline__body p{
  font-size: .95rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
}

/* ---------- 14. WORKS ARCHIVE PAGE ---------- */
.archive-head{
  padding: 8rem 0 3rem;
}
.archive-head .label{ margin-bottom: 1.5rem; }
.archive-head .h-display{ line-height: 0.9; }
.archive-intro{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-line-strong);
}
.archive-intro p{
  max-width: 420px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-ink-soft);
}

.filter-bar{
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--c-line-strong);
  border-bottom: 1px solid var(--c-line-strong);
  margin-bottom: 3rem;
  flex-wrap: wrap;
}
.filter-bar .label{ margin-right: 1.5rem; }
.filter-btn{
  font-family: var(--f-body);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: .55rem 1.1rem;
  border: 1px solid var(--c-line);
  color: var(--c-ink-soft);
  transition: all .3s var(--ease);
  margin-right: .35rem;
}
.filter-btn:hover{ border-color: var(--c-ink); color: var(--c-ink); }
.filter-btn.is-active{
  background: var(--c-ink);
  color: var(--c-cream);
  border-color: var(--c-ink);
}

.archive-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 2.5vw, 2.5rem);
}
.archive-grid .work-card{
  grid-column: auto !important;
  margin-top: 0 !important;
}
.archive-grid .work-card:nth-child(even){ margin-top: 4rem !important; }

/* ---------- 15. PROJECT DETAIL ---------- */
.project-hero{
  padding: 7rem 0 3rem;
}
.project-hero__head{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-line-strong);
}
.project-hero__num{
  font-family: var(--f-display);
  font-size: 1.2rem;
  color: var(--c-vermillion);
  margin-bottom: 1rem;
  letter-spacing: 0.04em;
  font-feature-settings: "tnum" 1;
}
.project-hero__title{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
}
.project-hero__title em{
  font-style: italic;
  color: var(--c-vermillion);
}
.project-hero__title .en{
  display: block;
  font-style: italic;
  font-size: .4em;
  color: var(--c-muted);
  margin-top: .5rem;
  letter-spacing: 0.01em;
}
.project-hero__meta{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem 1.5rem;
  font-size: .9rem;
}
.project-hero__meta dt{
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-muted);
  padding-top: .15rem;
}
.project-hero__meta dd{ color: var(--c-ink); }

.project-hero__media{
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  margin-bottom: clamp(3rem, 5vw, 5rem);
}
.project-hero__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-body{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: 4rem;
}
.project-body__sidebar{ position: sticky; top: 6rem; align-self: start; }
.project-body__sidebar h4{
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 1rem;
}
.project-body__sidebar p{
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--c-ink);
}
.project-body__text p{
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--c-ink-soft);
  margin-bottom: 1.5rem;
}
.project-body__text p:first-of-type::first-letter{
  font-family: var(--f-display);
  font-size: 4.5rem;
  float: left;
  line-height: 0.85;
  margin: .35rem .65rem 0 0;
  color: var(--c-vermillion);
  font-weight: 500;
}
.project-body__text h3{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.5rem;
  margin: 2.5rem 0 1rem;
  letter-spacing: -0.005em;
}

/* project gallery */
.project-gallery{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 4rem 0;
}
.project-gallery .media{
  overflow: hidden;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
}
.project-gallery .media--tall{ aspect-ratio: 4/5; }
.project-gallery .media--wide{ aspect-ratio: 16/9; grid-column: 1 / -1; }
.project-gallery .media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.project-gallery .media:hover img{ transform: scale(1.03); }

/* deliverables list */
.deliverables{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem 2rem;
  border-top: 1px solid var(--c-line-strong);
  padding: 2rem 0;
}
.deliverables li{
  font-size: .9rem;
  padding: .5rem 0;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.deliverables li::before{
  content: "";
  width: 6px; height: 6px;
  background: var(--c-vermillion);
  display: inline-block;
  flex-shrink: 0;
  transform: translateY(-1px);
}

/* next project nav */
.next-project{
  background: var(--c-ink);
  color: var(--c-cream);
  padding: clamp(4rem, 8vw, 7rem) 0;
  position: relative;
  overflow: hidden;
}
.next-project .dot-grid{
  background-image: radial-gradient(rgba(242,237,228,.15) 0.6px, transparent 0.6px);
  opacity: .55;
}
.next-project__inner{
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  flex-wrap: wrap;
}
.next-project__label{
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-muted-2);
  margin-bottom: 1rem;
}
.next-project__title{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  transition: color .4s var(--ease);
}
.next-project a:hover .next-project__title{ color: var(--c-vermillion); }
.next-project__title em{ font-style: italic; }
.next-project__arrow{
  font-family: var(--f-display);
  font-size: clamp(3rem, 6vw, 5rem);
  color: var(--c-vermillion);
  transition: transform .4s var(--ease);
}
.next-project a:hover .next-project__arrow{ transform: translateX(15px); }

/* ---------- 16. CONTACT PAGE ---------- */
.contact-hero{
  padding: 9rem 0 4rem;
}
.contact-hero .label{ margin-bottom: 2rem; }
.contact-hero__title{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 11vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.025em;
  margin-bottom: 2rem;
}
.contact-hero__title em{
  font-style: italic;
  color: var(--c-vermillion);
}
.contact-hero__sub{
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  line-height: 1.35;
  max-width: 720px;
  color: var(--c-ink-soft);
  margin-bottom: 3rem;
}
.contact-methods{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--c-line-strong);
  margin-top: 2rem;
}
.contact-method{
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 2rem;
  align-items: start;
}
.contact-method:nth-child(odd){
  padding-right: 2rem;
  border-right: 1px solid var(--c-line);
}
.contact-method:nth-child(even){ padding-left: 2rem; }
.contact-method .label{ padding-top: .35rem; }
.contact-method .val{
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--c-ink);
  transition: color .3s var(--ease);
}
.contact-method a:hover .val{ color: var(--c-vermillion); }

.contact-status{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 1.1rem;
  border: 1px solid var(--c-vermillion);
  color: var(--c-vermillion);
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}
.contact-status .dot{
  width: 7px;
  height: 7px;
  background: var(--c-vermillion);
  border-radius: 50%;
  animation: pulse 2.5s infinite;
}

/* ---------- 17. MARQUEE ---------- */
.marquee{
  background: var(--c-ink);
  color: var(--c-cream);
  padding: 1.5rem 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(242,237,228,.1);
  border-bottom: 1px solid rgba(242,237,228,.1);
}
.marquee__track{
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
  gap: 3rem;
  padding-right: 3rem;
}
.marquee__item{
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}
.marquee__item::after{
  content:"";
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--c-vermillion);
  border-radius: 50%;
  flex-shrink: 0;
}
@keyframes marquee{
  to{ transform: translateX(-50%); }
}

/* ---------- 18. REVEAL ANIMATIONS ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].is-in{ opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"]{ transition-delay: .1s; }
[data-reveal-delay="2"]{ transition-delay: .2s; }
[data-reveal-delay="3"]{ transition-delay: .3s; }
[data-reveal-delay="4"]{ transition-delay: .4s; }
[data-reveal-delay="5"]{ transition-delay: .5s; }

/* ---------- 19. CURSOR ---------- */
.cursor{
  position: fixed;
  top: 0; left: 0;
  width: 12px;
  height: 12px;
  background: var(--c-vermillion);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .3s var(--ease), height .3s var(--ease), opacity .3s var(--ease);
  mix-blend-mode: difference;
  opacity: 0;
}
@media (hover: hover) and (pointer: fine){
  .cursor{ opacity: 1; }
  body{ cursor: none; }
  a, button, .work-card, .filter-btn{ cursor: none; }
  .cursor.is-hover{ width: 48px; height: 48px; opacity: .85; }
}

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width: 1024px){
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
  .archive-grid{ grid-template-columns: 1fr; gap: 3rem; }
  .archive-grid .work-card:nth-child(even){ margin-top: 0 !important; }
  .project-body{ grid-template-columns: 1fr; }
  .project-body__sidebar{ position: static; }
  .deliverables{ grid-template-columns: repeat(2, 1fr); }
  .hero__portrait{ display: block; width: clamp(120px, 20vw, 180px); top: 5.5rem; }
  .about-bio{ grid-template-columns: 1fr; }
  .about-portrait{ position: static; max-width: 480px; aspect-ratio: 4/3; margin-bottom: 2rem; }
}

@media (max-width: 768px){
  :root{ --gutter: 1.25rem; }
  .nav{ display: none; }
  .menu-toggle{ display: block; }
  .nav.is-open{
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: var(--c-cream);
    padding: 5rem 1.5rem 2rem;
    z-index: 99;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .nav.is-open .nav__link{
    font-family: var(--f-display);
    font-size: 2rem;
  }
  .hero{ padding: 6rem var(--gutter) 2.5rem; }
  .hero__top{ flex-direction: column; }
  .hero__bottom{ grid-template-columns: 1fr; }
  .hero__portrait{ position: relative; top: auto; right: auto; margin-top: 2rem; width: 60%; }
  .statement{ grid-template-columns: 1fr; }
  .works-grid{ grid-template-columns: 1fr; gap: 3rem; }
  .work-card--1, .work-card--2, .work-card--3, .work-card--4, .work-card--5, .work-card--6{
    grid-column: 1 / -1; margin-top: 0;
  }
  .about-teaser{ grid-template-columns: 1fr; }
  .about-hero__sub{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: 1fr; }
  .service-item:nth-child(odd), .service-item:nth-child(even){
    padding: 1.5rem 0; border-right: none;
  }
  .clients-list{ grid-template-columns: 1fr 1fr; }
  .timeline__row{ grid-template-columns: 1fr; }
  .project-hero__head{ grid-template-columns: 1fr; }
  .project-gallery{ grid-template-columns: 1fr; }
  .deliverables{ grid-template-columns: 1fr; }
  .contact-methods{ grid-template-columns: 1fr; }
  .contact-method:nth-child(odd), .contact-method:nth-child(even){
    padding: 1.5rem 0; border-right: none;
    grid-template-columns: 1fr; gap: .5rem;
  }
  .archive-intro{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .marquee__track{ animation: none; }
  [data-reveal]{ opacity: 1; transform: none; }
  .hero__title .line > span{ transform: none; animation: none; }
}