:root{
    --ink:#111;
    --muted:#6b6b6b;
    --line:#e3e3e3;
    --bg:#fff;
    --soft:#f4f3f1;
    --pad:clamp(16px,4vw,56px);
    --max:1440px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  img{display:block;width:100%;height:100%;object-fit:cover}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

  /* Header */
  header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid transparent;transition:border-color .2s}
  header.scrolled{border-color:var(--line)}
  .bar{display:flex;align-items:center;justify-content:space-between;height:76px}
  .logo{font-size:22px;font-weight:500;letter-spacing:-.01em}
  nav ul{display:flex;gap:34px;list-style:none}
  nav a{font-size:15px;color:var(--ink);position:relative;padding:4px 0}
  nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--ink);transition:width .25s}
  nav a:hover::after,nav a.active::after{width:100%}
  .menu-btn{display:none;background:none;border:0;font:inherit;font-size:15px;cursor:pointer;color:var(--ink)}

  /* Media slot: a photo sits on top of a tonal fallback */
  .media{position:relative;overflow:hidden;background:var(--soft)}
  .media img{position:absolute;inset:0}

  /* Hero */
  .hero .media{height:min(78vh,820px);width:100%}
  .hero-text{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-top:28px;padding-bottom:96px}
  .eyebrow{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
  .hero h1{font-size:clamp(34px,4.6vw,64px);font-weight:400;line-height:1.04;letter-spacing:-.025em}
  .hero .meta{font-size:18px;margin-top:16px}
  .hero .meta span{display:block;color:var(--muted)}
  .hero p.lede{font-size:18px;line-height:1.6;max-width:560px;align-self:end}
  .link{display:inline-block;margin-top:22px;font-size:15px;border-bottom:1px solid var(--ink);padding-bottom:2px}

  /* Section heads */
  section{scroll-margin-top:80px}
  .sec{padding-top:88px;padding-bottom:88px;border-top:1px solid var(--line)}
  .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:40px;flex-wrap:wrap}
  .sec-head h2{font-size:clamp(28px,3vw,40px);font-weight:400;letter-spacing:-.02em}
  .tabs{display:flex;gap:24px}
  .tabs button{background:none;border:0;font:inherit;font-size:15px;color:var(--muted);cursor:pointer;padding:2px 0;border-bottom:1px solid transparent}
  .tabs button.on{color:var(--ink);border-color:var(--ink)}

  /* Exhibitions grid */
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 32px}
  .card .media{aspect-ratio:4/3;margin-bottom:16px}
  .card .media img{transition:transform .6s ease}
  .card:hover .media img,.card:hover .fill{transform:scale(1.03)}
  .fill{position:absolute;inset:0;transition:transform .6s ease}
  .card h3{font-size:19px;font-weight:500;line-height:1.3;letter-spacing:-.01em}
  .card .where{color:var(--muted);font-size:15px;margin-top:4px}
  .card .tag{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
  .card.hide{display:none}

  /* Publications */
  .book-feature{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;margin-bottom:72px}
  .cover{aspect-ratio:2/3;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:9% 10%;color:#fff;box-shadow:0 18px 40px rgba(0,0,0,.14)}
  .cover .ct{font-size:clamp(18px,2vw,28px);line-height:1.15;font-weight:500;letter-spacing:-.01em}
  .cover .ca{font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
  .cover img{position:absolute;inset:0}
  .book-feature .cover{max-width:380px;justify-self:center;width:100%}
  .book-feature h3{font-size:clamp(26px,2.6vw,36px);font-weight:400;line-height:1.15;letter-spacing:-.02em}
  .book-feature .pub{color:var(--muted);margin-top:10px}
  .book-feature p{margin-top:20px;font-size:17px;line-height:1.65;max-width:560px}
  .rows{list-style:none;border-top:1px solid var(--ink)}
  .rows li{display:grid;grid-template-columns:1.6fr 1.2fr 90px;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);font-size:16px}
  .rows li .t{font-weight:500}
  .rows li .p{color:var(--muted)}
  .rows li .y{text-align:right;color:var(--muted)}
  .rows-label{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}

  /* Events */
  .events{list-style:none;border-top:1px solid var(--ink)}
  .events li{display:grid;grid-template-columns:220px 1fr auto;gap:32px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
  .events .d{font-size:15px}
  .events .e{font-size:20px;letter-spacing:-.01em}
  .events .e span{display:block;font-size:15px;color:var(--muted);margin-top:4px}
  .events .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

  /* About */
  .about{display:grid;grid-template-columns:5fr 7fr;gap:72px}
  .about .media{aspect-ratio:4/5}
  .about .title{font-size:clamp(22px,2.2vw,30px);line-height:1.3;letter-spacing:-.015em;font-weight:400;margin-bottom:28px}
  .about p{font-size:17px;line-height:1.7;margin-bottom:18px;max-width:640px}
  .facts{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line);max-width:640px}
  .facts h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:8px}
  .facts p{font-size:15px;line-height:1.6;margin:0}

  /* Footer */
  footer{background:#111;color:#fff;padding:72px 0 40px}
  .foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
  .foot .big{font-size:clamp(26px,3vw,40px);font-weight:400;letter-spacing:-.02em;line-height:1.1}
  .foot h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#9a9a9a;font-weight:500;margin-bottom:12px}
  .foot a{display:block;font-size:15px;margin-bottom:6px;color:#eee}
  .foot a:hover{color:#fff;text-decoration:underline}
  .fine{margin-top:64px;padding-top:20px;border-top:1px solid #333;font-size:13px;color:#8a8a8a;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

  /* Tonal fallbacks (shown until real photographs are added to /images) */
  .t-hero{background:
      radial-gradient(60% 40% at 72% 22%,rgba(255,250,232,.95),transparent 70%),
      radial-gradient(45% 30% at 18% 30%,rgba(210,226,236,.9),transparent 70%),
      linear-gradient(180deg,#c9dbe6 0%,#e3e6dc 38%,#b8c48f 52%,#8fa36a 66%,#6f8a52 80%,#a5ab6d 100%)}
  .t-1{background:linear-gradient(160deg,#e8e2d6,#c9c1b2 45%,#8c8577)}
  .t-2{background:linear-gradient(200deg,#2f3a44,#5b6a73 50%,#b9a98c)}
  .t-3{background:radial-gradient(70% 60% at 30% 30%,#9cc6d8,transparent),linear-gradient(180deg,#5d9bbb,#1f5d82 70%,#f1e3c4)}
  .t-4{background:linear-gradient(135deg,#e9c46a,#8fb07a 40%,#3e6d8e 75%,#2a3d55)}
  .t-5{background:linear-gradient(180deg,#d9cba8,#b8a26d 45%,#6f6038 80%,#3c3424)}
  .t-6{background:linear-gradient(150deg,#e9d7cf,#c99a8f 40%,#6c4e4a 85%)}
  .c-1{background:#3f4a3a}
  .c-2{background:#7d6b55}
  .c-3{background:#2d3f52}
  .c-4{background:#8a3b2e}
  .t-portrait{background:linear-gradient(180deg,#efeeec,#dcdad6)}

  /* Responsive */
  @media (max-width:1024px){
    .grid{grid-template-columns:repeat(2,1fr)}
    .hero-text{grid-template-columns:1fr;gap:20px}
    .book-feature,.about{grid-template-columns:1fr;gap:40px}
    .about .media{max-width:460px}
    .foot{grid-template-columns:1fr 1fr}
    .foot>div:first-child{grid-column:1/-1}
  }
  @media (max-width:720px){
    nav ul{display:none}
    .menu-btn{display:block}
    nav.open ul{display:flex;flex-direction:column;gap:22px;position:fixed;inset:76px 0 0 0;background:#fff;padding:32px var(--pad)}
    nav.open a{font-size:26px}
    .bar{height:64px}
    nav.open ul{inset:64px 0 0 0}
    .hero .media{height:56vh}
    .hero-text{padding-bottom:64px}
    .sec{padding-top:64px;padding-bottom:64px}
    .grid{grid-template-columns:1fr;gap:44px}
    .rows li{grid-template-columns:1fr auto;gap:4px 16px}
    .rows li .p{grid-column:1;grid-row:2}
    .rows li .y{grid-row:1/3;grid-column:2}
    .events li{grid-template-columns:1fr;gap:6px}
    .facts{grid-template-columns:1fr}
    .foot{grid-template-columns:1fr}
  }