@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --ink:#10100f;
  --paper:#f2efe8;
  --paper-2:#e8e4dc;
  --line:#c9c4bb;
  --muted:#6f6b63;
  --accent:#bbff34;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;line-height:1.55}
img{display:block;width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:99;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.site-header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(242,239,232,.9);backdrop-filter:blur(14px);z-index:50}
.brand{display:flex;align-items:center;gap:11px;font-weight:600}
.brand-mark{width:32px;height:32px;border:1px solid var(--ink);display:grid;place-items:center;border-radius:50%;font-family:"Instrument Serif";font-size:20px}
.nav{display:flex;gap:26px;font-size:14px}
.nav a{position:relative}
.nav a:after{content:"";height:1px;background:var(--ink);position:absolute;left:0;right:100%;bottom:-5px;transition:.25s}
.nav a:hover:after{right:0}
.menu-toggle{display:none;border:0;background:none;width:42px;height:42px;padding:10px}
.menu-toggle span{display:block;height:1px;background:var(--ink);margin:7px 0}
.hero{min-height:calc(100vh - 84px);display:grid;grid-template-columns:1.12fr .88fr;max-width:var(--max);margin:auto;padding:70px 24px 50px;gap:60px;align-items:center}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:600;margin:0 0 22px}
.hero h1,.section h2,.feature h2,.gallery-heading h2,.contact h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.035em}
.hero h1{font-size:clamp(58px,7.2vw,112px);line-height:.88;margin:0 0 30px;max-width:840px}
.hero h1 em{font-weight:400}
.hero-lead{font-size:20px;max-width:700px;color:#3f3d39}
.hero-actions{display:flex;gap:12px;margin:34px 0 54px}
.button{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border:1px solid var(--ink);font-size:14px;transition:.2s}
.button.primary{background:var(--ink);color:white}
.button.primary:hover{background:var(--accent);color:var(--ink)}
.button.ghost:hover{background:white}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);max-width:610px}
.hero-stats div{background:var(--paper);padding:18px}
.hero-stats strong{font-size:23px;display:block}
.hero-stats span{font-size:12px;color:var(--muted)}
.hero-portrait{margin:0;position:relative}
.hero-portrait img{aspect-ratio:3/4;object-fit:cover;filter:contrast(1.03)}
.hero-portrait:before{content:"";position:absolute;inset:-16px 16px 16px -16px;border:1px solid var(--ink);z-index:-1}
.hero-portrait figcaption{display:flex;justify-content:space-between;font-size:12px;margin-top:12px}
.hero-portrait figcaption span{color:var(--muted)}
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;font-size:12px;letter-spacing:.2em;white-space:nowrap}
.marquee div{display:inline-block;animation:marquee 26s linear infinite}
@keyframes marquee{to{transform:translateX(-45%)}}
.section{max-width:var(--max);margin:auto;padding:120px 24px}
.section-heading{margin-bottom:64px;max-width:850px}
.section-heading h2,.gallery-heading h2,.contact h2{font-size:clamp(45px,6vw,84px);line-height:.95;margin:0}
.section-heading.row{max-width:none;display:grid;grid-template-columns:1.25fr .75fr;gap:80px;align-items:end}
.section-heading.row>p{margin:0;color:var(--muted);font-size:16px}
.about-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:90px}
.big-copy{font-family:"Instrument Serif";font-size:34px;line-height:1.2;margin-top:0}
.about-main>p:last-child{max-width:720px;color:#4c4944}
.facts{border-top:1px solid var(--ink)}
.facts div{padding:18px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px}
.facts span{color:var(--muted);font-size:13px}
.facts strong{text-align:right;font-size:13px}
.philosophy{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:90px}
.philosophy article{padding:28px;background:var(--paper)}
.philosophy article>span{font-family:"Instrument Serif";font-size:22px}
.philosophy h3{font-size:18px;margin:55px 0 9px}
.philosophy p{font-size:13px;color:var(--muted);margin:0}
.feature{max-width:1400px;margin:auto;display:grid;grid-template-columns:1fr 1fr;min-height:720px}
.feature-dark{background:var(--ink);color:#f7f4ed}
.feature-image img{height:100%;object-fit:cover}
.feature-copy{padding:80px;display:flex;flex-direction:column;justify-content:center}
.feature-copy h2{font-size:clamp(50px,5vw,76px);line-height:.95;margin:0 0 32px}
.feature-copy p{max-width:610px;color:#c9c6bf}
.tag-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.tag-row span{border:1px solid #555;padding:8px 11px;border-radius:99px;font-size:12px}
.timeline{border-top:1px solid var(--ink)}
.timeline article{display:grid;grid-template-columns:220px 1fr;padding:30px 0;border-bottom:1px solid var(--line)}
.timeline .year{font-family:"Instrument Serif";font-size:25px}
.timeline h3{margin:0 0 6px;font-size:20px}
.timeline p{margin:0;color:var(--muted);max-width:760px}
.academic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.academic-card{border:1px solid var(--ink);padding:26px;min-height:400px;display:flex;flex-direction:column}
.card-index{font-family:"Instrument Serif";font-size:36px;color:var(--muted)}
.academic-card h3{font-family:"Instrument Serif";font-size:35px;font-weight:400;margin:20px 0 28px}
.academic-card ul{list-style:none;padding:0;margin:auto 0 0}
.academic-card li{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:12px 0;font-size:13px}
.academic-card b{font-size:18px}
.work-list{border-top:1px solid var(--ink)}
.work-list article{display:grid;grid-template-columns:70px 1fr 260px;gap:28px;padding:28px 0;border-bottom:1px solid var(--line)}
.work-no{font-family:"Instrument Serif";font-size:27px}
.work-list h3{margin:0 0 8px;font-size:20px}
.work-list p{margin:0;color:var(--muted);max-width:720px}
.work-meta{font-size:12px;text-align:right;color:var(--muted)}
.organization-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:60px}
.organization-grid a{border:1px solid var(--line);padding:22px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;transition:.2s}
.organization-grid a:hover{border-color:var(--ink);transform:translateY(-4px)}
.organization-grid span{font-family:"Instrument Serif";font-size:31px}
.organization-grid b{font-size:12px;max-width:190px}
.training-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.training-grid article{border:1px solid var(--line);padding:24px;min-height:210px}
.training-grid article span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.training-grid h3{font-family:"Instrument Serif";font-weight:400;font-size:30px;line-height:1.05}
.training-grid p{font-size:13px;color:var(--muted)}
.gallery-section{padding:40px 0 0}
.gallery-heading{max-width:var(--max);margin:0 auto;padding:80px 24px 55px}
.gallery{max-width:1400px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:280px;gap:8px;padding:8px}
.gallery-item{padding:0;border:0;background:#111;position:relative;overflow:hidden;cursor:zoom-in}
.gallery-item img{height:100%;object-fit:cover;filter:grayscale(1);transition:.5s}
.gallery-item:hover img{transform:scale(1.035);filter:grayscale(.15)}
.gallery-item span{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(242,239,232,.92);padding:8px 10px;font-size:11px;text-align:left}
.gallery-item.tall{grid-row:span 2}
.gallery-item.wide{grid-column:span 2}
.contact{padding-top:150px}
.contact-title{display:grid;grid-template-columns:.35fr .65fr;gap:50px;margin-bottom:70px}
.contact-grid{border-top:1px solid var(--ink)}
.contact-grid>a,.contact-grid>div{display:grid;grid-template-columns:180px 1fr 35px;align-items:center;border-bottom:1px solid var(--line);padding:22px 0}
.contact-grid span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.contact-grid b{font-size:18px}
.contact-grid i{font-style:normal;font-size:24px}
.social-row{display:flex;gap:25px;margin-top:28px;font-size:13px;text-decoration:underline}
footer{border-top:1px solid var(--line);max-width:var(--max);margin:auto;padding:30px 24px 55px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}
footer .brand{color:var(--ink)}
.lightbox{border:0;padding:0;background:transparent;max-width:min(92vw,1100px);max-height:92vh}
.lightbox::backdrop{background:rgba(0,0,0,.92)}
.lightbox img{max-height:82vh;object-fit:contain;background:#111}
.lightbox p{color:white;margin:10px 0 0;font-size:13px}
.lightbox-close{position:fixed;top:20px;right:24px;color:white;background:none;border:0;font-size:38px;cursor:pointer}
@media (max-width:900px){
  .site-header{height:70px}
  .menu-toggle{display:block}
  .nav{position:fixed;top:70px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:25px 4vw;display:none;flex-direction:column}
  .nav.open{display:flex}
  .hero{grid-template-columns:1fr;padding-top:45px}
  .hero-portrait{max-width:620px}
  .about-grid,.section-heading.row,.feature,.contact-title{grid-template-columns:1fr}
  .philosophy{grid-template-columns:1fr 1fr}
  .feature-copy{padding:50px 28px}
  .academic-grid{grid-template-columns:1fr}
  .organization-grid{grid-template-columns:1fr 1fr}
  .training-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .section{padding:85px 18px}
  .hero{padding:36px 18px}
  .hero h1{font-size:56px}
  .hero-stats{grid-template-columns:1fr}
  .philosophy{grid-template-columns:1fr}
  .timeline article{grid-template-columns:1fr;gap:10px}
  .work-list article{grid-template-columns:48px 1fr}
  .work-meta{grid-column:2;text-align:left}
  .organization-grid,.training-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr;grid-auto-rows:320px}
  .gallery-item.tall,.gallery-item.wide{grid-row:span 1;grid-column:span 1}
  .contact-grid>a,.contact-grid>div{grid-template-columns:1fr 30px;gap:8px}
  .contact-grid span{grid-column:1/-1}
  .contact-grid b{font-size:15px;word-break:break-word}
  footer{align-items:flex-start;gap:20px;flex-direction:column}
}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .75s ease,transform .75s ease}
.reveal.is-visible{opacity:1;transform:none}
.gallery-item.reveal:nth-child(2n){transition-delay:.06s}
.gallery-item.reveal:nth-child(3n){transition-delay:.12s}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.reveal{opacity:1;transform:none;transition:none}.marquee div{animation:none}}