:root {
  --site-signature: heyu;
  --paper: #f2eadc;
  --paper-deep: #e4d5bf;
  --ink: #142a43;
  --accent: #dc4938;
  --blue: #1447a6;
  --rule: rgba(20, 42, 67, .34);
  --sans: "Arial Narrow", "Avenir Next Condensed", "PingFang SC", sans-serif;
  --serif: Iowan Old Style, Baskerville, "Songti SC", "Noto Serif CJK SC", serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.65 var(--serif); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .11; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.skip-link { position: fixed; top: -5rem; left: 1rem; padding: .7rem 1rem; background: var(--ink); color: var(--paper); z-index: 99; }
.skip-link:focus { top: 1rem; }
.site-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 2rem; padding: 1.35rem 3vw 1.1rem; border-bottom: 1px solid var(--ink); font: 700 .76rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.site-head nav { display: flex; gap: 2rem; }
.site-head nav a { text-decoration: none; border-bottom: 1px solid transparent; }
.site-head nav a:hover, .site-head nav a[aria-current="page"] { border-color: currentColor; }
.wordmark { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.wordmark span { display: grid; place-items: center; width: 2rem; aspect-ratio: 1; color: var(--paper); background: var(--ink); }
.head-note { justify-self: end; margin: 0; text-align: right; }
main { overflow: hidden; }
.hero, .project-list, .practice, .timeline, .contact, .about-page > section, .case-page > section, .case-page > header, .case-page > figure, .case-next { width: min(1280px, 92vw); margin-inline: auto; }
.hero { min-height: 82svh; display: grid; align-content: space-between; padding: clamp(5rem, 10vw, 9rem) 0 3rem; }
.eyebrow, .section-head, .tags, .project-no, .folio, .chapter-no, figcaption, .case-meta, footer { font: 700 .73rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow { margin: 0; }
h1, h2, h3, p { text-wrap: pretty; }
.hero h1 { max-width: 11ch; margin: .7rem 0 5rem; font: 400 clamp(3.5rem, 8.6vw, 9.2rem)/.9 var(--serif); letter-spacing: -.065em; }
h1 em, h2 em { color: var(--accent); font-weight: 400; }
.hero-foot { display: grid; grid-template-columns: minmax(15rem, 34rem) auto; justify-content: space-between; align-items: end; gap: 3rem; border-top: 1px solid var(--ink); padding-top: 1rem; }
.hero-foot > p:first-child { margin: 0; font-size: clamp(1.1rem, 1.8vw, 1.55rem); }
.stamp { width: 5.5rem; height: 5.5rem; display: grid; place-content: center; margin: 0; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font: 700 .72rem/1.2 var(--sans); text-align: center; transform: rotate(8deg); }
.project-list { padding: 8rem 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--ink); }
.section-head h2, .section-head p { margin: 0 0 .8rem; font: inherit; }
.project { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(17rem, .75fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: end; padding: 3rem 0 8rem; }
.project--split { grid-template-columns: minmax(0, .92fr) minmax(17rem, .58fr); width: 82%; margin-left: auto; }
.project--reverse { grid-template-columns: minmax(17rem, .58fr) minmax(0, .92fr); width: 88%; }
.project--reverse .project-visual { grid-column: 2; }
.project--reverse .project-copy { grid-row: 1; grid-column: 1; }
.project-visual { --focus-x: 50%; --focus-y: 50%; position: relative; overflow: hidden; background: var(--paper-deep); text-decoration: none; }
.project-visual::before, .project-visual::after { content: ""; position: absolute; width: 1.6rem; height: 1.6rem; z-index: 2; border-color: var(--paper); pointer-events: none; }
.project-visual::before { left: .8rem; top: .8rem; border-left: 1px solid; border-top: 1px solid; }
.project-visual::after { right: .8rem; bottom: .8rem; border-right: 1px solid; border-bottom: 1px solid; }
.project-visual img { width: 100%; aspect-ratio: 3/2; object-fit: cover; object-position: var(--focus-x) var(--focus-y); transition: transform .7s cubic-bezier(.2,.8,.2,1), object-position .25s ease; }
.project--split .project-visual img { aspect-ratio: 4/5; }
.project--reverse .project-visual img { aspect-ratio: 16/10; }
.project-visual:hover img { transform: scale(1.025); }
.project-copy { border-top: 1px solid var(--ink); padding-top: .75rem; }
.project-no { margin: 0 0 4rem; color: var(--accent); }
.project h3 { margin: 0 0 1rem; font: 400 clamp(2.7rem, 5.5vw, 6.7rem)/.88 var(--serif); letter-spacing: -.055em; }
.project h3 span { font-size: .45em; letter-spacing: 0; }
.project h3 a { text-decoration: none; }
.project-copy > p:not(.project-no,.tags) { max-width: 30rem; font-size: 1.05rem; }
.tags { margin-top: 2rem; color: var(--blue); }
.practice { display: grid; grid-template-columns: .3fr 1.1fr .8fr; gap: clamp(2rem, 5vw, 7rem); padding: 8rem 0; border-top: 1px solid var(--ink); }
.folio { color: var(--accent); }
.practice h2, .timeline h2, .about-page h2, .case-chapter h2, .journey h2 { margin-top: 0; font: 700 .75rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.lead { font-size: clamp(1.45rem, 2.7vw, 2.65rem); line-height: 1.26; }
.practice ul, .deliverables ul { margin: 0; padding: 0; list-style: none; }
.practice li, .deliverables li { padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.timeline { padding: 8rem 0; }
.timeline ol { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: .6fr 1fr 1.4fr; gap: 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.timeline time, .timeline strong { font: 700 .8rem/1.5 var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.contact { margin-bottom: 8rem; padding: clamp(3rem, 7vw, 7rem); color: var(--paper); background: var(--ink); position: relative; }
.contact::after { content: "HY"; position: absolute; right: -.03em; bottom: -.28em; color: rgba(242,234,220,.07); font: 700 clamp(8rem, 25vw, 24rem)/1 var(--sans); }
.contact h2 { max-width: 12ch; margin: 2rem 0; font: 400 clamp(3rem, 7vw, 7rem)/.94 var(--serif); letter-spacing: -.05em; }
.contact-link { position: relative; z-index: 1; display: inline-flex; gap: 1.5rem; align-items: center; font-size: clamp(1.2rem, 2vw, 2rem); }
.contact-link span { color: var(--accent); }
footer { display: grid; grid-template-columns: 1fr 1fr auto; gap: 2rem; padding: 1.25rem 3vw; border-top: 1px solid var(--ink); }
footer p { margin: 0; }

.about-page { padding-top: clamp(5rem, 10vw, 10rem); }
.about-intro h1 { max-width: 13ch; margin: 1.5rem 0 7rem; font: 400 clamp(3.5rem, 7.8vw, 8rem)/.92 var(--serif); letter-spacing: -.06em; }
.about-grid { display: grid; grid-template-columns: 1.2fr .7fr; gap: clamp(3rem, 8vw, 10rem); align-items: start; border-top: 1px solid var(--ink); }
.about-grid p { margin-top: 1rem; }
.career { padding: 10rem 0; }
.career-row { display: grid; grid-template-columns: .45fr 1fr 1.3fr; gap: 2rem; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.career-row > * { margin: 0; }
.career-row h3 { font: 400 1.7rem/1.15 var(--serif); }
.career-row small { font: 700 .7rem/1 var(--sans); text-transform: uppercase; }
.process { display: grid; grid-template-columns: .25fr .7fr 1.5fr; gap: 3rem; padding: 8rem 0; border-top: 1px solid var(--ink); }
.process ol { list-style: none; margin: 0; padding: 0; }
.process li { display: grid; grid-template-columns: 2.5rem .45fr 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.process li span, .process li strong { font: 700 .75rem/1.5 var(--sans); color: var(--accent); text-transform: uppercase; }
.process li p { margin: 0; }
.deliverables { display: grid; grid-template-columns: .6fr 1fr; gap: 4rem; padding: 7rem 0; }

.case-page { padding-top: clamp(5rem, 10vw, 9rem); }
.case-hero h1 { max-width: 12ch; margin: 1rem 0 6rem; font: 400 clamp(4rem, 11vw, 11rem)/.82 var(--serif); letter-spacing: -.07em; }
.case-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; border-top: 1px solid var(--ink); }
.case-meta p { display: grid; gap: .35rem; margin: .8rem 0; }
.case-meta span { color: var(--accent); }
.case-cover { padding: 4rem 0 10rem; }
.case-cover img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.case-cover--tall { width: min(1080px, 86vw)!important; }
.case-cover--tall img { aspect-ratio: 4/3; }
figcaption { margin-top: .7rem; }
.case-chapter { display: grid; grid-template-columns: .55fr 1.45fr; gap: clamp(2rem, 6vw, 8rem); padding: 6rem 0; border-top: 1px solid var(--ink); }
.case-chapter > div { max-width: 50rem; }
.case-chapter h2 { font: 400 clamp(2.4rem, 5vw, 5.2rem)/1 var(--serif); letter-spacing: -.045em; text-transform: none; }
.chapter-no { color: var(--accent); }
.quote-card { margin: 4rem 0 0; padding: 2rem; border: 1px solid var(--ink); color: var(--blue); font-size: 1.5rem; transform: rotate(-1deg); }
.quote-card small { display: block; margin-top: 1rem; font: 700 .7rem/1.3 var(--sans); text-transform: uppercase; }
.system-board { display: grid; grid-template-columns: 1fr 1fr 1.3fr; min-height: 28rem; margin-block: 4rem 10rem!important; border: 1px solid var(--ink); }
.system-board > * { padding: 2rem; border-right: 1px solid var(--ink); }
.system-board > *:last-child { border: 0; }
.color-chip { display: flex; flex-direction: column; justify-content: space-between; color: #fff; font: 700 .7rem/1.3 var(--sans); text-transform: uppercase; }
.color-chip--blue { background: var(--blue); }.color-chip--red { background: var(--accent); }
.type-sample { display: grid; align-content: space-between; }.type-sample span { font: 700 clamp(5rem, 12vw, 12rem)/.75 var(--sans); letter-spacing: -.12em; }.type-sample p { max-width: 18rem; }
.system-board--coast { grid-template-columns: 1.5fr .75fr 1fr; color: var(--paper); background: var(--ink); }
.tide-line { display: flex; flex-direction: column; justify-content: space-between; font: 700 .7rem/1 var(--sans); }.tide-line i { display: block; height: 1px; background: var(--paper); transform: rotate(-8deg); }
.room-key { display: flex; flex-direction: column; justify-content: center; align-items: center; font: 400 7rem/1 var(--serif); border-radius: 50% 50% 48% 48%; }.room-key small { font: 700 .55rem/1 var(--sans); }
.wayfinding { display: flex; gap: 1rem; align-items: center; font-size: 5rem; }.wayfinding span { font: 700 .65rem/1 var(--sans); }
.journey { padding: 7rem 0 10rem; }.journey ol { display: grid; grid-template-columns: repeat(4,1fr); list-style: none; padding: 0; }.journey li { min-height: 18rem; padding: 1rem; border: 1px solid var(--ink); border-right: 0; display: flex; flex-direction: column; }.journey li:last-child { border-right: 1px solid; }.journey li span { color: var(--accent); font: 700 .7rem/1 var(--sans); }.journey li strong { margin-top: auto; font: 400 2rem/1 var(--serif); }.journey li p { min-height: 5rem; }
.case-outcome { display: grid; grid-template-columns: .55fr 1.45fr; gap: clamp(2rem, 6vw, 8rem); padding: 7rem 0; color: var(--paper); background: var(--ink); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.case-outcome h2 { font: 400 clamp(2.5rem, 5vw, 5rem)/1 var(--serif); }
.case-outcome ul { display: grid; grid-template-columns: repeat(3,1fr); list-style: none; margin: 4rem 0 0; padding: 0; }.case-outcome li { display: grid; gap: .4rem; padding-top: .7rem; border-top: 1px solid var(--paper); }.case-outcome strong { color: var(--accent); font: 400 2.2rem/1 var(--serif); }.case-outcome span { font: 700 .65rem/1.2 var(--sans); text-transform: uppercase; }
.case-next { display: flex; justify-content: space-between; align-items: end; padding: 7rem 0; font-size: 1.2rem; }.case-next a:last-child { display: grid; text-align: right; font: 400 clamp(2rem,4vw,4rem)/1 var(--serif); }.case-next a span { margin-bottom: .5rem; color: var(--accent); font: 700 .65rem/1 var(--sans); text-transform: uppercase; }

.js .reveal { opacity: 0; transform: translateY(2rem); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (max-width: 800px) {
  .site-head { grid-template-columns: 1fr auto; }.head-note { display: none; }.site-head nav { gap: 1rem; }
  .hero { min-height: 76svh; }.hero h1 { font-size: clamp(3.6rem, 16vw, 7rem); }.hero-foot { grid-template-columns: 1fr auto; }
  .project, .project--split, .project--reverse { width: 100%; grid-template-columns: 1fr; padding-bottom: 5rem; }.project--reverse .project-visual, .project--reverse .project-copy { grid-column: 1; grid-row: auto; }.project--reverse .project-copy { order: 2; }.project-no { margin-bottom: 2rem; }
  .practice, .process { grid-template-columns: 1fr; }.folio { margin-bottom: 0; }.timeline li, .career-row { grid-template-columns: 1fr; gap: .4rem; }
  .about-grid, .deliverables { grid-template-columns: 1fr; gap: 2rem; }.about-intro h1 { margin-bottom: 4rem; }
  .case-meta { grid-template-columns: 1fr 1fr; }.case-chapter, .case-outcome { grid-template-columns: 1fr; }.system-board { grid-template-columns: 1fr; }.system-board > * { min-height: 14rem; border-right: 0; border-bottom: 1px solid var(--ink); }.journey ol { grid-template-columns: 1fr 1fr; }.journey li:nth-child(2) { border-right: 1px solid; }.case-outcome ul { grid-template-columns: 1fr; gap: 2rem; }
  footer { grid-template-columns: 1fr auto; } footer p:nth-child(2) { display: none; }
}
@media (max-width: 500px) {
  .site-head { padding: 1rem 4vw; }.wordmark { font-size: 0; }.wordmark span { font-size: .72rem; }.hero, .project-list, .practice, .timeline, .contact, .about-page > section, .case-page > section, .case-page > header, .case-page > figure, .case-next { width: 90vw; }
  .hero h1 { font-size: 3.6rem; }.hero-foot { grid-template-columns: 1fr; }.stamp { display: none; }.project-list { padding-top: 4rem; }.section-head { align-items: end; }.section-head p { max-width: 12ch; text-align: right; }
  .practice, .timeline, .career, .process { padding-block: 5rem; }.contact { margin-bottom: 4rem; padding: 2rem; }.journey ol { grid-template-columns: 1fr; }.journey li, .journey li:nth-child(2) { border-right: 1px solid; border-bottom: 0; }.journey li:last-child { border-bottom: 1px solid; }.case-next { gap: 2rem; }.case-next a:last-child { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none!important; transition: none!important; } .js .reveal { opacity: 1; transform: none; } }