@import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@500;600;700&family=Cormorant:ital,wght@0,400;0,500;0,600;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

  :root{
    --ink:#0B0A08;
    --parchment:#E8DFC8;
    --bone:#F3EEE2;
    --verdigris:#5B7065;
    --gold:#B08D3E;
    --sulfur:#7A2E1D;
    --line: rgba(232,223,200,0.18);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--bone);
    font-family:'EB Garamond', serif;
    font-size:18px;
    line-height:1.6;
    overflow-x:hidden;
  }
  ::selection{ background:var(--gold); color:var(--ink); }

  img{
    -webkit-user-drag:none; user-drag:none;
    -webkit-touch-callout:none;
    pointer-events:auto;
  }
  img, .plate, .lightbox-img{ -webkit-user-select:none; user-select:none; }

  h1,h2,h3{
    font-family:'Cormorant SC', serif;
    font-weight:600;
    letter-spacing:0.04em;
    margin:0;
    color:var(--bone);
  }

  .eyebrow{
    font-family:'EB Garamond', serif;
    font-style:italic;
    font-size:14px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--gold);
  }

  a{color:var(--gold); text-decoration:none;}

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline:1.5px solid var(--gold);
    outline-offset:3px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }

  /* ---------- texture overlay ---------- */
  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:999;
    opacity:0.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; justify-content:space-between; align-items:center;
    padding:22px 5vw;
    background:linear-gradient(to bottom, rgba(11,10,8,0.9), transparent);
  }
  .nav-mark{font-family:'Cormorant SC'; font-size:20px; letter-spacing:0.12em;}
  .nav-links{display:flex; gap:28px; font-size:13px; letter-spacing:0.14em; text-transform:uppercase;}
  .nav-links a{color:var(--parchment); opacity:0.8; transition:opacity .3s, color .3s; padding:6px 2px;}

  .lang-switch{ display:flex; gap:6px; align-items:center; }
  .lang-btn{
    background:none; border:1px solid var(--line); color:var(--parchment);
    font-family:'Cormorant SC'; font-size:12px; letter-spacing:0.08em;
    padding:4px 9px; cursor:pointer; opacity:0.6; transition:opacity .25s, border-color .25s, color .25s;
  }
  .lang-btn:hover{ opacity:0.9; }
  .lang-btn.active{ opacity:1; color:var(--gold); border-color:var(--gold); }
  .nav-links a:hover{opacity:1; color:var(--gold);}

  /* ---------- MOBILE NAV ---------- */
  .nav-toggle{
    display:none; background:none; border:1px solid var(--line); color:var(--parchment);
    width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:""; display:block; width:20px; height:1px; background:var(--parchment);
    position:relative; transition:transform .25s, opacity .25s;
  }
  .nav-toggle span::before{ position:absolute; top:-6px; }
  .nav-toggle span::after{ position:absolute; top:6px; }
  .nav-toggle[aria-expanded="true"] span{ background:transparent; }
  .nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

  /* ---------- HERO ---------- */
  .hero{
    min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; position:relative; padding:120px 6vw 60px;
    background:
      radial-gradient(ellipse at 50% 20%, rgba(91,112,101,0.25), transparent 60%),
      radial-gradient(ellipse at 50% 100%, rgba(122,46,29,0.18), transparent 55%),
      var(--ink);
  }
  .seal-wrap{ width:min(46vw, 360px); margin-bottom:36px; position:relative;}
  .seal-wrap svg{ width:100%; height:auto; display:block; }
  .seal-outer{ animation: rotate 90s linear infinite; transform-origin:50% 50%; }
  .seal-inner{ animation: rotate-rev 60s linear infinite; transform-origin:50% 50%; }
  @keyframes rotate{ to{ transform:rotate(360deg);} }
  @keyframes rotate-rev{ to{ transform:rotate(-360deg);} }

  .hero h1{
    font-size:clamp(48px, 9vw, 110px);
    line-height:0.95;
    letter-spacing:0.05em;
  }
  .hero .tagline{
    margin-top:18px;
    font-style:italic;
    font-size:clamp(16px,2.4vw,22px);
    color:var(--parchment);
    max-width:560px;
  }
  .scroll-cue{
    position:absolute; bottom:34px; font-size:12px; letter-spacing:0.3em; text-transform:uppercase;
    color:var(--gold); opacity:0.7;
  }

  section{ padding:120px 6vw; position:relative; }
  .divider{
    width:100%; max-width:1100px; margin:0 auto;
    border-top:1px solid var(--line);
  }

  /* ---------- MANIFESTO ---------- */
  .manifesto{
    max-width:780px; margin:0 auto; text-align:center;
  }
  .manifesto p{
    font-size:clamp(20px,2.6vw,28px);
    font-style:italic;
    color:var(--parchment);
    line-height:1.5;
  }
  .manifesto .sig{ margin-top:30px; font-family:'Cormorant SC'; font-size:14px; letter-spacing:0.2em; color:var(--gold); }

  /* ---------- GALLERIES (4 elements) ---------- */
  .galleries-head{ text-align:center; max-width:680px; margin:0 auto 70px; }
  .galleries-head h2{ font-size:clamp(34px,5vw,52px); margin-top:10px;}
  .galleries-head p{ color:var(--parchment); opacity:0.85; margin-top:14px;}

  .elements{
    display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
    max-width:900px; margin:0 auto;
    background:var(--line);
    border:1px solid var(--line);
  }
  .element{
    background:var(--ink); padding:40px 26px; position:relative; cursor:pointer;
    transition: background .4s ease;
    min-height:320px; display:flex; flex-direction:column; justify-content:space-between;
  }
  .element:hover{ background:#121009; }
  .element .glyph{ width:38px; height:38px; opacity:0.85; }
  .element .glyph svg{ width:100%; height:100%; stroke:var(--gold); }
  .element h3{ font-size:24px; margin-top:18px; }
  .element .latin{ font-style:italic; font-size:13px; color:var(--verdigris); letter-spacing:0.08em; }
  .element .desc{ font-size:15px; color:var(--parchment); opacity:0.75; margin-top:14px; }
  .element .count{ margin-top:24px; font-size:12px; letter-spacing:0.2em; color:var(--gold); text-transform:uppercase; }

  .anima-mundi{
    max-width:900px; margin:1px auto 0;
    background:var(--ink); border:1px solid var(--line); border-top:none;
    padding:40px 26px; cursor:pointer;
    transition: background .4s ease;
    display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  }
  .anima-mundi:hover{ background:#121009; }
  .anima-mundi .glyph{ width:38px; height:38px; opacity:0.85; flex-shrink:0; }
  .anima-mundi .glyph svg{ width:100%; height:100%; stroke:var(--gold); }
  .anima-mundi h3{ font-size:24px; }
  .anima-mundi .latin{ font-style:italic; font-size:13px; color:var(--verdigris); letter-spacing:0.08em; margin-top:2px; }
  .anima-mundi .desc{ font-size:15px; color:var(--parchment); opacity:0.75; margin-top:10px; max-width:560px; }
  .anima-mundi .count{ margin-left:auto; font-size:12px; letter-spacing:0.2em; color:var(--gold); text-transform:uppercase; }
  @media (max-width:680px){ .anima-mundi .count{ margin-left:0; } }

  .plate-grid{
    display:none; /* plates are no longer shown on the page — they exist only as hidden sources for the lightbox */
  }
  .plate{
    aspect-ratio:4/5; position:relative; overflow:hidden;
    border:1px solid var(--line); cursor:pointer;
  }
  .plate .ph{
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Cormorant SC'; font-size:13px; letter-spacing:0.15em; text-transform:uppercase;
    color:rgba(232,223,200,0.35);
  }
  .plate img{
    display:none; /* hidden from grid view — only used as the source for the lightbox */
  }

  /* ---------- LIGHTBOX ---------- */
  .lightbox{
    position:fixed; inset:0; z-index:2000;
    background:rgba(5,4,3,0.94);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity .35s ease;
    padding:40px;
  }
  .lightbox.active{ opacity:1; visibility:visible; }
  .lightbox-img-wrap{
    position:relative; max-width:90vw; max-height:85vh;
    display:flex; align-items:center; justify-content:center;
  }
  .lightbox img{
    max-width:90vw; max-height:85vh; width:auto; height:auto;
    object-fit:contain; box-shadow:0 0 60px rgba(0,0,0,0.6);
    border:1px solid var(--line); display:block;
  }
  .lightbox-caption{
    position:absolute; bottom:28px; left:0; right:0; text-align:center;
    font-family:'Cormorant SC'; font-size:14px; letter-spacing:0.12em;
    color:var(--parchment); text-transform:uppercase;
  }
  .lightbox-edition{
    display:inline-block; margin-top:6px; color:var(--verdigris);
    font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  }
  .lightbox-inquire{
    display:inline-block; margin-top:10px; color:var(--gold);
    font-size:12px; letter-spacing:0.1em; text-decoration:underline;
    text-underline-offset:3px; cursor:pointer;
  }
  .lightbox-inquire:hover{ opacity:0.8; }
  .lightbox-close{
    position:absolute; top:26px; right:34px;
    font-family:'Cormorant SC'; font-size:28px; color:var(--gold);
    cursor:pointer; line-height:1; background:none; border:none;
  }
  .lightbox-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    font-family:'Cormorant SC'; font-size:34px; color:var(--gold);
    cursor:pointer; background:none; border:none; padding:10px 18px;
    opacity:0.7; transition:opacity .3s;
  }
  .lightbox-nav:hover{ opacity:1; }
  .lightbox-prev{ left:10px; }
  .lightbox-next{ right:10px; }
  .plate.fire .ph{ background:linear-gradient(160deg,#2a130c,#0B0A08 70%);}
  .plate.water .ph{ background:linear-gradient(160deg,#11201c,#0B0A08 70%);}
  .plate.earth .ph{ background:linear-gradient(160deg,#221b0d,#0B0A08 70%);}
  .plate.air .ph{ background:linear-gradient(160deg,#1c1c22,#0B0A08 70%);}
  .plate-caption{
    position:absolute; bottom:0; left:0; right:0; padding:12px 14px;
    font-size:12px; letter-spacing:0.08em; color:var(--parchment);
    background:linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    opacity:0; transition:opacity .4s;
  }
  .plate:hover .plate-caption{ opacity:1; }

  /* ---------- THEORY ---------- */
  .theory{
    display:grid; grid-template-columns:0.9fr 1.4fr; gap:70px;
    max-width:1200px; margin:0 auto; align-items:start;
  }
  .theory .label-col{ position:sticky; top:120px; }
  .theory .label-col .eyebrow{ display:block; margin-bottom:14px;}
  .bio-portrait{
    width:100%; max-width:300px; margin-bottom:28px;
    border:1px solid var(--line); padding:6px;
    background:var(--ink);
  }
  .bio-portrait img{
    width:100%; height:auto; display:block;
  }
  .bio-portrait .cap{
    margin-top:8px; font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--verdigris); text-align:center;
  }
  .theory h2{ font-size:clamp(30px,4vw,42px); }
  .theory-body p{ color:var(--parchment); margin:0 0 22px; }
  .theory-body .first-letter{
    font-family:'Cormorant SC'; font-size:64px; line-height:0.7; float:left;
    margin-right:10px; color:var(--gold); padding-top:6px;
  }
  .marginnote{
    margin-top:40px; padding-left:18px; border-left:1px solid var(--verdigris);
    font-style:italic; font-size:15px; color:var(--verdigris);
  }

  /* ---------- EXHIBITIONS ---------- */
  .exhib-table{ max-width:900px; margin:0 auto; }
  .exhib-row{
    display:grid; grid-template-columns:90px 1fr auto; gap:24px;
    padding:22px 0; border-bottom:1px solid var(--line);
    align-items:baseline;
  }
  .exhib-row:first-child{ border-top:1px solid var(--line); }
  .exhib-row .yr{ font-family:'Cormorant SC'; color:var(--gold); font-size:18px; }
  .exhib-row .info b{ color:var(--bone); font-weight:500; }
  .exhib-row .info span{ display:block; font-size:14px; color:var(--verdigris); margin-top:4px; font-style:italic; }
  .exhib-row .loc{ font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--parchment); opacity:0.6; text-align:right; }

  /* ---------- ACQUIRE ---------- */
  .acquire{ background:linear-gradient(180deg, var(--ink), #14110c); }
  .acquire-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:60px;
    max-width:1100px; margin:60px auto 0;
  }
  .acquire-grid h3{ font-size:20px; margin-bottom:14px; color:var(--gold); }
  .acquire-grid p{ color:var(--parchment); font-size:16px; }
  .acquire-steps{ list-style:none; margin:0; padding:0; }
  .acquire-steps li{
    display:grid; grid-template-columns:34px 1fr; gap:16px;
    margin-bottom:22px; align-items:start;
  }
  .acquire-steps .mark{
    font-family:'Cormorant SC'; color:var(--gold); font-size:20px; border:1px solid var(--gold);
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  }
  .acquire-steps b{ color:var(--bone); }
  .cta-row{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 28px; border:1px solid var(--gold); color:var(--gold);
    font-family:'Cormorant SC'; font-size:14px; letter-spacing:0.12em; text-transform:uppercase;
    transition: background .3s, color .3s;
  }
  .btn:hover{ background:var(--gold); color:var(--ink); }
  .btn.solid{ background:var(--gold); color:var(--ink); }
  .btn.solid:hover{ background:transparent; color:var(--gold); }

  footer{
    padding:60px 6vw 40px; text-align:center; border-top:1px solid var(--line);
  }
  footer .nav-mark{ display:block; margin-bottom:14px; }
  footer .foot-links{ display:flex; justify-content:center; gap:26px; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:18px; }
  footer .copy{ font-size:12px; color:var(--verdigris); letter-spacing:0.06em; max-width:640px; margin:0 auto; line-height:1.6; }

  @media (max-width: 900px){
    .element{ padding:26px 16px; min-height:auto; }
    .element h3{ font-size:19px; }
    .element .desc{ font-size:13px; }
    .theory{ grid-template-columns:1fr; }
    .theory .label-col{ position:static; }
    .acquire-grid{ grid-template-columns:1fr; gap:40px; }
    .plate-grid{ grid-template-columns:repeat(2,1fr); }
    .nav-toggle{ display:flex; }
    .nav-links{
      display:flex; flex-direction:column; align-items:flex-start; gap:0;
      position:fixed; top:0; right:0; height:100vh; width:78vw; max-width:320px;
      background:var(--ink); padding:90px 8vw 40px; z-index:99;
      transform:translateX(100%); transition:transform .35s ease;
      box-shadow:-10px 0 30px rgba(0,0,0,0.4);
    }
    .nav-links.open{ transform:translateX(0); }
    .nav-links a{ width:100%; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; }
    .nav-overlay{
      display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:98;
    }
    .nav-overlay.open{ display:block; }
    .exhib-row{ grid-template-columns:60px 1fr; }
    .exhib-row .loc{ grid-column:2; text-align:left; opacity:0.5; margin-top:4px; }
  }

  /* ---------- SMALL PHONES ---------- */
  @media (max-width: 480px){
    section{ padding:80px 6vw; }
    .lang-btn{ padding:3px 7px; font-size:11px; }
    .lang-switch{ gap:4px; }
    .hero{ padding:100px 6vw 50px; min-height:92vh; }
    .hero h1{ font-size:clamp(40px, 14vw, 64px); }
    .galleries-head h2{ font-size:clamp(28px,8vw,38px); }
    .elements{ grid-template-columns:1fr; }
    .plate-grid{ grid-template-columns:1fr; gap:14px; }
    .anima-mundi{ flex-direction:column; align-items:flex-start; gap:10px; padding:20px 18px; }
    .anima-mundi .count{ margin-left:0; }
    .exhib-row{ grid-template-columns:1fr; gap:6px; padding:18px 0; }
    .exhib-row .loc{ grid-column:1; }
    .btn{ width:100%; text-align:center; }
    .lightbox-close, .lightbox-nav{ width:48px; height:48px; }
  }

  /* Ensure comfortable tap targets everywhere on touch devices */
  @media (hover:none){
    a, button, .btn{ min-height:40px; }
  }

  /* ---------- SERIES PAGES (dedicated gallery layout) ---------- */
  .series-main{ padding-top:130px; max-width:1280px; margin:0 auto; padding-left:32px; padding-right:32px; }
  .series-head{ padding:0 0 56px; max-width:720px; }
  .series-head .eyebrow{
    font-family:'Cormorant SC'; font-size:12px; letter-spacing:0.28em; text-transform:uppercase;
    color:var(--gold); display:block; margin-bottom:20px;
  }
  .series-head h1{
    font-family:'Cormorant SC'; font-weight:600;
    font-size:clamp(2.2rem,5vw,3.4rem); letter-spacing:0.03em; line-height:1.05; color:var(--parchment);
  }
  .series-head .latin{
    font-family:'Cormorant'; font-style:italic; font-size:1.05rem;
    color:var(--verdigris); letter-spacing:0.05em; margin-top:14px;
  }
  .series-head .series-intro{
    font-family:'Cormorant'; font-size:1.18rem; line-height:1.7;
    color:var(--parchment); opacity:0.82; margin-top:26px;
  }
  .series-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding-bottom:80px;
  }
  .series-plate{ display:flex; flex-direction:column; }
  .series-plate .frame{
    position:relative; width:100%; aspect-ratio:4/5; overflow:hidden;
    border:1px solid var(--line); background:#000;
  }
  .series-plate img{
    display:block !important; width:100%; height:100%; object-fit:cover;
    transition:transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .6s;
  }
  .series-plate:hover img{ transform:scale(1.04); }
  .series-plate .cap{
    font-family:'Cormorant SC'; font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--parchment); opacity:0.6; margin-top:14px;
  }
  .series-back{
    display:inline-block; margin-top:10px; margin-bottom:60px;
    font-family:'Cormorant SC'; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold);
  }
  .series-body{
    font-family:'Cormorant'; font-size:1.18rem; line-height:1.75;
    color:var(--parchment); opacity:0.9; max-width:680px; padding-bottom:80px;
  }
  .series-body p{ margin-bottom:22px; }
  .series-body em{ color:var(--parchment); opacity:1; }
  @media (max-width:900px){
    .series-grid{ grid-template-columns:repeat(2,1fr); gap:18px; }
  }
  @media (max-width:560px){
    .series-main{ padding-left:20px; padding-right:20px; }
    .series-grid{ grid-template-columns:1fr; gap:16px; }
  }