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

:root{
  --paper:#f7f6f2;
  --paper-dim:#efeee8;
  --ink:#1b1b18;
  --ink-soft:#3a3a34;
  --moss:#37493b;
  --moss-deep:#26332a;
  --moss-light:#7c9179;
  --stone:#8a8578;
  --gold:#b9975b;
  --line:#dedad0;
  --max:1180px;
  --gutter:clamp(24px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans',sans-serif;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-weight:400;font-family:'Instrument Serif',serif;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--moss);outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

.site-header{
  position:sticky;top:0;z-index:50;
  background-color:var(--paper);
  border-bottom:1px solid var(--line);
}
.pass-banner{
  background:var(--moss-deep);color:var(--paper);text-align:center;
  padding:10px var(--gutter);font-size:.85rem;
}
.pass-banner a{color:var(--gold);text-decoration:underline;font-weight:500;margin-left:6px;}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--gutter);max-width:var(--max);margin:0 auto;
}
.logo{
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:1.5rem;letter-spacing:.02em;
}
.nav-links{display:flex;gap:36px;font-size:.85rem;letter-spacing:.04em;}
.nav-links a{position:relative;padding:4px 0;color:var(--ink-soft);transition:color .2s;}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--moss);}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--moss);
}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:22px;height:1px;background:var(--ink);margin:5px 0;transition:.25s;}

@media (max-width:820px){
  .nav-links{
    position:fixed;inset:69px 0 0 0;
    background-color:var(--paper);opacity:1;backdrop-filter:none;-webkit-backdrop-filter:none;
    z-index:60;
    flex-direction:column;gap:0;padding:12px var(--gutter) 40px;
    transform:translateY(-8px);visibility:hidden;pointer-events:none;transition:transform .25s ease, visibility .25s;
    border-top:1px solid var(--line);
  }
  .nav-links.open{transform:translateY(0);visibility:visible;pointer-events:auto;}
  .nav-links a{display:block;padding:16px 0;border-bottom:1px solid var(--line);font-size:1rem;}
  .nav-toggle{display:block;}
}

section{padding:96px 0;}
.section-head{max-width:640px;margin-bottom:56px;}
.eyebrow{
  font-size:.78rem;color:var(--moss);letter-spacing:.02em;margin-bottom:14px;display:block;
}
.section-head h2{font-size:clamp(2.1rem,4vw,3rem);line-height:1.1;}
.section-head p{margin-top:16px;color:var(--ink-soft);font-size:1.05rem;max-width:52ch;}
.section-foot{margin-top:48px;}
.text-link{
  border-bottom:1px solid currentColor;padding-bottom:2px;font-size:.95rem;color:var(--moss);
}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;border-radius:2px;font-size:.95rem;
  border:1px solid var(--ink);background:transparent;cursor:pointer;transition:.2s;
}
.btn-primary{background:var(--moss);border-color:var(--moss);color:var(--paper);}
.btn-primary:hover{background:var(--moss-deep);border-color:var(--moss-deep);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}

.hero{padding-top:64px;padding-bottom:80px;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero-copy .logo-mark{font-size:clamp(2.6rem,5.2vw,4.4rem);font-style:italic;line-height:1;margin-bottom:22px;font-family:'Instrument Serif',serif;}
.hero-copy p{font-size:1.15rem;color:var(--ink-soft);max-width:38ch;margin-bottom:32px;}
.hero-art{
  aspect-ratio:4/5;border-radius:2px;overflow:hidden;position:relative;background:var(--paper-dim);
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{order:-1;}
}

.art-tile{
  position:relative;overflow:hidden;border-radius:2px;background:var(--paper-dim);
  display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:0 1px 3px rgba(15,17,13,.08);
}
.art-visual{position:absolute;inset:0;z-index:0;}
/* A subtle diagonal wash across the whole image, independent of the
   stronger gradient behind the text below — this is what gives every
   piece a consistent, editorial "gallery photography" quality regardless
   of the source photo's own lighting, without touching text legibility,
   which the .art-info gradient still handles on its own. */
.art-tile::before{
  content:"";
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(135deg, rgba(10,11,9,.16) 0%, transparent 30%, transparent 60%, rgba(10,11,9,.22) 100%);
  pointer-events:none;
}
.art-tile .art-info{
  position:relative;z-index:2;padding:22px;color:#fff;
  /* Text-shadow alone (below) turned out not to be quite enough on lighter,
     pastel-toned artwork — confirmed by actually looking at the live
     gallery, not assumed. This gradient is deliberately much lighter than
     the original (peaks around half the darkness, and starts later, closer
     to the text) — enough to guarantee contrast on any background color,
     without meaningfully dimming the artwork itself the way the old one did. */
  background:linear-gradient(180deg,transparent 0%,rgba(10,11,9,.16) 55%,rgba(10,11,9,.46) 100%);
}
.art-tile .cat{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 10px rgba(0,0,0,.55);}
.art-tile h3{font-size:1.5rem;margin:4px 0 6px;font-style:italic;text-shadow:0 1px 3px rgba(0,0,0,.85),0 3px 14px rgba(0,0,0,.6);}
.art-tile .story{font-size:.88rem;opacity:.95;max-width:34ch;margin-bottom:10px;text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 10px rgba(0,0,0,.55);}
.art-tile .more{font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.7);padding-bottom:1px;display:inline-block;width:fit-content;}
.art-visual{transition:transform .7s cubic-bezier(.16,1,.3,1);}
.art-tile:hover .art-visual{transform:scale(1.05);}

/* Tiles 1 and 6 get 3 grid rows (the two large tiles in this masonry
   layout) — plenty of room for the full story line. Tiles 2-5 only get 2
   rows, sometimes at a narrow single-column width (like tile 3) — that's
   where category + title + story + link were crowding into too little
   space and colliding with a busy image underneath. */
.gallery-grid .art-tile:not(:nth-child(1)):not(:nth-child(6)) .art-info{padding:18px;}
.gallery-grid .art-tile:not(:nth-child(1)):not(:nth-child(6)) .story{display:none;}
.gallery-grid .art-tile:not(:nth-child(1)):not(:nth-child(6)) h3{font-size:1.25rem;margin-bottom:2px;}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:130px;
  gap:16px;
}
.gallery-grid .art-tile:nth-child(1){grid-column:1/4;grid-row:1/4;}
.gallery-grid .art-tile:nth-child(2){grid-column:4/6;grid-row:1/3;}
.gallery-grid .art-tile:nth-child(3){grid-column:6/7;grid-row:1/3;}
.gallery-grid .art-tile:nth-child(4){grid-column:1/3;grid-row:4/6;}
.gallery-grid .art-tile:nth-child(5){grid-column:3/5;grid-row:4/6;}
.gallery-grid .art-tile:nth-child(6){grid-column:5/7;grid-row:3/6;}
@media (max-width:900px){
  .gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:220px;}
  .gallery-grid .art-tile{grid-column:auto!important;grid-row:span 1!important;}
  .gallery-grid .art-tile:nth-child(1){grid-column:1/3!important;grid-row:span 2!important;}
}
@media (max-width:520px){
  .gallery-grid{grid-template-columns:1fr;}
  .gallery-grid .art-tile:nth-child(1){grid-column:1!important;}
}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.grid-3 .art-tile{aspect-ratio:4/5;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){.grid-3,.grid-2{grid-template-columns:1fr;}}

.collections{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.collection-card{
  aspect-ratio:3/4;position:relative;overflow:hidden;border-radius:2px;background:var(--paper-dim);
}
.collection-card .art-info{padding:26px;}
.collection-card h3{font-size:1.7rem;font-style:italic;}
.collection-card .count{font-size:.78rem;opacity:.85;margin-top:6px;display:block;}
@media (max-width:820px){.collections{grid-template-columns:1fr;}}

.journey-strip{
  display:flex;gap:14px;flex-wrap:wrap;padding-bottom:8px;
}
.journey-card{
  min-width:230px;aspect-ratio:3/4;position:relative;overflow:hidden;border-radius:2px;flex:0 0 auto;background:var(--paper-dim);
}
.journey-card .art-info{padding:18px;}
.journey-card.no-image{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-width:0;aspect-ratio:auto;flex:1 1 150px;border:1px solid var(--line);background:var(--paper);
  padding:20px 16px;transition:border-color .2s, background .2s;
}
.journey-card.no-image:hover{border-color:var(--moss);background:var(--paper-dim);}
.journey-card.no-image .art-info{position:static;background:none;color:var(--ink);padding:0;}
.journey-card.no-image h3{color:var(--ink);font-style:italic;}
.journey-chapter{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  padding:72px 0;border-top:1px solid var(--line);
}
.journey-chapter:first-of-type{border-top:none;}
.journey-chapter .num{font-family:'Instrument Serif',serif;font-style:italic;color:var(--gold);font-size:1.1rem;}
.journey-chapter h3{font-size:clamp(1.8rem,3vw,2.6rem);margin:10px 0 16px;}
.journey-chapter p{color:var(--ink-soft);max-width:44ch;}
.journey-chapter .jart{aspect-ratio:4/5;border-radius:2px;overflow:hidden;position:relative;background:var(--paper-dim);}
.journey-chapter:nth-child(even) .jart{order:-1;}
@media (max-width:820px){
  .journey-chapter{grid-template-columns:1fr;gap:26px;}
  .journey-chapter .jart{order:-1!important;}
}

.post-card{display:flex;flex-direction:column;gap:16px;}
.post-card .thumb{aspect-ratio:4/3;border-radius:2px;overflow:hidden;position:relative;background:var(--paper-dim);background-size:cover;background-position:center;}
.post-card .meta{font-size:.78rem;color:var(--stone);}
.post-card h3{font-size:1.4rem;margin-top:6px;}
.post-card p.excerpt{color:var(--ink-soft);margin-top:8px;font-size:.95rem;}

.testi-feature{max-width:760px;text-align:left;padding:8px 0;}
.testi-feature blockquote{
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.3;margin:0 0 24px;color:var(--ink);
}
.testi-feature cite{font-style:normal;font-size:.9rem;color:var(--stone);}
.testi-dots{display:flex;gap:10px;margin-top:34px;}
.testi-dots button{width:8px;height:8px;border-radius:50%;border:none;background:var(--line);cursor:pointer;padding:0;}
.testi-dots button[aria-current="true"]{background:var(--moss);}
.testi-list{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);border:1px solid var(--line);margin-top:88px;}
.testi-list .item{background:var(--paper);padding:36px;}
.testi-list blockquote{font-size:1.05rem;font-style:italic;font-family:'Instrument Serif',serif;margin-bottom:16px;line-height:1.4;}
.testi-list cite{font-style:normal;font-size:.82rem;color:var(--stone);}
@media (max-width:700px){.testi-list{grid-template-columns:1fr;}}

.about-hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.about-hero .portrait{aspect-ratio:4/5;border-radius:2px;overflow:hidden;position:relative;background:var(--paper-dim);}
.about-hero blockquote{font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.3;}
.about-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.about-pillars .pillar{background:var(--paper);padding:32px 26px;}
.about-pillars h4{font-family:'Work Sans';font-weight:500;font-size:1rem;margin-bottom:10px;}
.about-pillars p{font-size:.9rem;color:var(--ink-soft);}
@media (max-width:900px){.about-hero{grid-template-columns:1fr;}.about-pillars{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.about-pillars{grid-template-columns:1fr;}}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
.field{margin-bottom:22px;}
.field label{display:block;font-size:.82rem;color:var(--stone);margin-bottom:8px;}
.field input,.field textarea{
  width:100%;border:none;border-bottom:1px solid var(--line);background:transparent;
  padding:10px 2px;transition:border-color .2s;
}
.field input:focus,.field textarea:focus{border-color:var(--moss);outline:none;}
.field textarea{resize:vertical;min-height:110px;}
.contact-side .row{padding:20px 0;border-top:1px solid var(--line);}
.contact-side .row:last-child{border-bottom:1px solid var(--line);}
.contact-side .label{font-size:.78rem;color:var(--stone);margin-bottom:6px;}
.contact-side .val{font-size:1.05rem;}
.social-row{display:flex;gap:22px;margin-top:6px;}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:40px;}}

.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px;}
.filter-bar button{
  padding:9px 18px;border:1px solid var(--line);background:transparent;border-radius:20px;
  font-size:.85rem;cursor:pointer;transition:.2s;color:var(--ink-soft);
}
.filter-bar button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.filter-bar button:hover{border-color:var(--ink);}

.site-footer{border-top:1px solid var(--line);padding:64px 0 40px;margin-top:40px;}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;}
.footer-top .logo{margin-bottom:10px;}
.footer-top p{color:var(--stone);font-size:.9rem;max-width:34ch;}
.footer-links{display:flex;gap:56px;flex-wrap:wrap;}
.footer-links h5{font-size:.78rem;color:var(--stone);margin-bottom:14px;font-weight:500;}
.footer-links ul li{margin-bottom:10px;font-size:.92rem;}
.footer-links a:hover{color:var(--moss);}
.footer-bottom{
  margin-top:56px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;color:var(--stone);font-size:.8rem;flex-wrap:wrap;gap:10px;
}

.page-hero{padding:60px 0 20px;}
.page-hero .eyebrow{margin-bottom:18px;}
.page-hero h1{font-size:clamp(2.4rem,5vw,4rem);max-width:16ch;line-height:1.08;}
.page-hero p{margin-top:20px;color:var(--ink-soft);font-size:1.05rem;max-width:56ch;}

.divider{height:1px;background:var(--line);margin:0;}

/* ---------- Language switcher (fixed-size dropdown — scales to any number of languages) ---------- */
.lang-switcher{position:relative;display:flex;align-items:center;margin-right:6px;flex:0 0 auto;}
.lang-switcher select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);
  font-size:.72rem;letter-spacing:.03em;padding:6px 26px 6px 12px;border-radius:20px;cursor:pointer;
  width:64px;max-width:64px;
}
.lang-switcher::after{
  content:"";position:absolute;right:10px;top:50%;width:6px;height:6px;
  border-right:1px solid var(--ink-soft);border-bottom:1px solid var(--ink-soft);
  transform:translateY(-65%) rotate(45deg);pointer-events:none;
}
.lang-switcher select:hover{border-color:var(--ink);color:var(--ink);}
.nav-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
@media (max-width:820px){
  .lang-switcher select{width:58px;max-width:58px;font-size:.7rem;padding:6px 22px 6px 10px;}
}