/* ═══════════════════════════════════════════════════════
   Petya Stoyanov — shared stylesheet
   Linked by index.html and partners.html.
   Palette: laurel green, brass, parchment.
   ═══════════════════════════════════════════════════════ */

:root{
  --bone:#e8e3d8;
  --sheet:#f1ede4;
  --ink:#16211c;
  --mist:#1e362d;
  --sage:#c4a97b;
  --sage-deep:#a98a57;
  --slate:#6f7c72;
  --rule:rgba(22,33,28,.18);
  --rule-dark:rgba(241,237,228,.24);

  --display:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --text:"Archivo",Helvetica,Arial,sans-serif;

  --pad:clamp(1.5rem,6vw,6rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--text);font-weight:300;
  font-size:clamp(.95rem,.28vw + .89rem,1.04rem);
  line-height:1.8;letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1.2em;max-width:34rem}

.cap{
  font-family:var(--text);
  font-size:.61rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--sage-deep);margin:0;
}
.band{padding:clamp(4rem,9vw,7.5rem) var(--pad)}
.inner{max-width:74rem;margin:0 auto}

/* ── masthead ───────────────────────────────────── */
.mast{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1.5rem;padding:1.4rem var(--pad);
  border-bottom:1px solid var(--rule);
  background:var(--sheet);
  position:sticky;top:0;z-index:20;
}
.mast a{text-decoration:none}
.mast nav{display:flex;gap:1.6rem}
.mast nav a{color:var(--slate);transition:color .3s ease}
.mast nav a:hover,.mast nav a:focus-visible{color:var(--ink)}
.mast nav a[aria-current]{color:var(--ink)}

/* ── hero ───────────────────────────────────────── */
.hero{
  padding:clamp(3rem,7vw,5.5rem) var(--pad) clamp(2.5rem,5vw,4rem);
  background:var(--sheet);
}
.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.5rem,6.4vw,4.6rem);
  line-height:1.02;letter-spacing:-.02em;
  margin:1.5rem 0 0;max-width:16ch;
}
.hero h1 .it{font-style:italic;display:block}
.hero__foot{
  display:grid;grid-template-columns:1fr;gap:2rem clamp(2rem,5vw,4.5rem);
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:2rem;border-top:1px solid var(--rule);
}
@media(min-width:880px){.hero__foot{grid-template-columns:1fr 1fr}}
.hero__claim{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.22rem,2.2vw,1.62rem);
  line-height:1.42;letter-spacing:-.005em;
  margin:0;max-width:30ch;
}
.hero__note{margin:0 0 1.1em;color:var(--slate);max-width:34rem}
.hero__note:last-child{margin-bottom:0}

/* ── credentials bar ────────────────────────────── */
.creds{
  background:var(--sheet);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:0 var(--pad);
}
.creds ul{
  list-style:none;margin:0 auto;padding:0;max-width:74rem;
  display:grid;grid-template-columns:1fr;
}
@media(min-width:640px){.creds ul{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.creds ul{grid-template-columns:repeat(4,1fr)}}
.creds li{
  padding:1.6rem clamp(1rem,2vw,2rem) 1.7rem 0;
  border-bottom:1px solid var(--rule);
}
@media(min-width:640px){
  .creds li{border-bottom:0;border-right:1px solid var(--rule);padding-left:clamp(1rem,2vw,2rem)}
  .creds li:first-child{padding-left:0}
  .creds li:last-child{border-right:0}
}
@media(min-width:640px) and (max-width:999px){
  .creds li:nth-child(2n){border-right:0}
  .creds li:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}
.creds b{
  display:block;font-family:var(--display);font-weight:400;
  font-size:1.24rem;line-height:1.2;letter-spacing:-.01em;margin-bottom:.4rem;
}
.creds span{
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--slate);
}

/* ── photographic plates ────────────────────────── */
.plate{
  position:relative;overflow:hidden;
  background:rgba(22,33,28,.06);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.plate--tall{aspect-ratio:16/7}
@media(max-width:700px){.plate--tall{aspect-ratio:4/5}}
.plate img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.plate__empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--slate);
}

/* ── section heads ──────────────────────────────── */
.head{
  display:grid;grid-template-columns:1fr;gap:1.2rem clamp(2rem,5vw,5rem);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
@media(min-width:820px){.head{grid-template-columns:12rem 1fr;align-items:start}}
.head h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.8rem,3.6vw,2.9rem);
  line-height:1.1;letter-spacing:-.015em;margin:0;max-width:18ch;
}
.head p{margin:1.2rem 0 0;color:var(--slate);max-width:36rem}

/* ── biography chapters ─────────────────────────── */
.chap{
  display:grid;grid-template-columns:1fr;
  gap:.6rem clamp(2rem,4vw,4rem);
  padding:clamp(2rem,4vw,3rem) 0;
  border-top:1px solid var(--rule);
}
.chap:last-of-type{border-bottom:1px solid var(--rule)}
@media(min-width:900px){.chap{grid-template-columns:4rem 14rem 1fr;align-items:start}}
.chap__n{
  font-family:var(--display);font-weight:400;
  font-size:1.5rem;line-height:1.1;color:var(--sage-deep);
  letter-spacing:.04em;margin:0;
}
.chap__t{
  font-family:var(--display);font-weight:400;
  font-size:1.3rem;line-height:1.18;letter-spacing:-.01em;margin:0 0 .5rem;
}
.chap__w{
  font-size:.59rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--slate);margin:0;
}
.chap__b p:last-child{margin-bottom:0}

/* ── inverted sections ──────────────────────────── */
.dark{background:var(--mist);color:var(--sheet)}
.dark .cap{color:var(--sage)}
.dark p{color:rgba(241,237,228,.78)}
.dark .head h2{color:var(--sheet)}
.dark .head p{color:rgba(241,237,228,.62)}
.pull{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.5rem);
  line-height:1.24;letter-spacing:-.015em;
  color:var(--sheet);margin:0 0 clamp(2.2rem,5vw,3.5rem);max-width:22ch;
}
.cols{columns:1;column-gap:clamp(2rem,5vw,4.5rem)}
@media(min-width:900px){.cols{columns:2}}
.cols p{max-width:none;break-inside:avoid}
.attrib{
  margin-top:clamp(2.2rem,4vw,3rem);padding-top:1.3rem;
  border-top:1px solid var(--rule-dark);
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--sage);
}
.said{
  margin:clamp(2.25rem,5vw,3.25rem) 0 0;padding-top:1.4rem;
  border-top:1px solid var(--rule-dark);max-width:38rem;
}
.said q{
  display:block;quotes:"\201C" "\201D";
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.1rem,2vw,1.48rem);
  line-height:1.46;letter-spacing:-.005em;color:inherit;margin-bottom:1.1rem;
}
.said cite{
  font-style:normal;font-family:var(--text);
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--sage);
}

/* ── ledger (the work) ──────────────────────────── */
.ledger{border-top:1px solid var(--rule)}
.entry{
  display:grid;grid-template-columns:1fr;gap:.5rem clamp(2rem,4vw,4rem);
  padding:2rem 0;border-bottom:1px solid var(--rule);
}
@media(min-width:820px){.entry{grid-template-columns:16rem 1fr 11rem;align-items:baseline}}
.entry h3{
  font-family:var(--display);font-weight:400;font-size:1.16rem;
  letter-spacing:-.005em;margin:0;
}
.entry p{margin:0;color:var(--slate);font-size:.95rem}
.entry .when{font-size:.59rem;letter-spacing:.24em;text-transform:uppercase;color:var(--slate)}
@media(min-width:820px){.entry .when{text-align:right}}

/* ── documents ──────────────────────────────────── */
.sheets{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem)}
@media(min-width:760px){.sheets{grid-template-columns:1fr 1fr}}
.sheet{margin:0}
.sheet a{text-decoration:none;display:block}
.sheet__img{border:1px solid var(--rule);background:var(--sheet);padding:.6rem;transition:border-color .4s ease}
.sheet a:hover .sheet__img,.sheet a:focus-visible .sheet__img{border-color:var(--sage-deep)}
.sheet figcaption{padding-top:1.1rem}
.sheet h3{font-family:var(--display);font-weight:400;font-size:1.1rem;margin:0 0 .35rem;letter-spacing:-.005em}
.sheet .when{font-size:.59rem;letter-spacing:.24em;text-transform:uppercase;color:var(--slate);display:block;margin-bottom:.85rem}
.sheet .go{font-size:.59rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sage-deep);border-bottom:1px solid var(--rule);padding-bottom:.3rem}

/* ── languages ──────────────────────────────────── */
.langs{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1.8rem 2.5rem;border-top:1px solid var(--rule);padding-top:2.2rem}
.lang b{display:block;font-family:var(--display);font-weight:400;font-size:1.34rem;letter-spacing:-.005em;margin-bottom:.35rem}
.lang span{font-size:.59rem;letter-spacing:.24em;text-transform:uppercase;color:var(--slate)}

/* ── closing / contact ──────────────────────────── */
.close h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.08;letter-spacing:-.02em;
  margin:0 0 2.2rem;max-width:16ch;
}
.close .cols{margin-bottom:clamp(2.2rem,4vw,3rem)}
.contacts{display:flex;flex-wrap:wrap;gap:1rem 2.75rem;padding-top:1.7rem;border-top:1px solid var(--rule-dark);font-size:.61rem;letter-spacing:.24em;text-transform:uppercase}
.contacts a{text-decoration:none;color:var(--sage);border-bottom:1px solid var(--rule-dark);padding-bottom:.3rem;transition:color .3s ease,border-color .3s ease}
.contacts a:hover,.contacts a:focus-visible{color:var(--sheet);border-color:var(--sheet)}

footer{background:var(--mist);color:rgba(241,237,228,.42);padding:0 var(--pad) 3.25rem;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase}
footer em{font-family:var(--display);font-style:italic;text-transform:none;letter-spacing:0;font-size:1.1rem;color:var(--sage);display:block;margin-bottom:1.3rem}

/* ── partnerships page ──────────────────────────── */
.grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:700px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:1050px){.grid{grid-template-columns:repeat(3,1fr)}}
.cell{background:var(--sheet);padding:clamp(1.6rem,2.6vw,2.25rem)}
.cell h3{font-family:var(--display);font-weight:400;font-size:1.14rem;letter-spacing:-.005em;margin:0 0 .7rem}
.cell p{margin:0;color:var(--slate);font-size:.94rem}
.cell .n{display:block;font-size:.59rem;letter-spacing:.26em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:1rem}

.causes{border-top:1px solid var(--rule)}
.cause{display:grid;grid-template-columns:1fr;gap:.5rem clamp(2rem,4vw,4rem);padding:1.9rem 0;border-bottom:1px solid var(--rule)}
@media(min-width:820px){.cause{grid-template-columns:19rem 1fr;align-items:baseline}}
.cause h3{font-family:var(--display);font-weight:400;font-size:1.14rem;letter-spacing:-.005em;margin:0}
.cause p{margin:0;color:var(--slate);max-width:38rem}

.enquiry{background:var(--mist)}
.formwrap{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4.5rem)}
@media(min-width:900px){.formwrap{grid-template-columns:1fr 1.25fr}}
.direct dl{margin:0}
.direct dt{font-size:.59rem;letter-spacing:.26em;text-transform:uppercase;color:var(--sage);margin-bottom:.4rem}
.direct dd{margin:0 0 1.6rem;font-size:1.02rem;color:var(--sheet)}
.direct dd a{text-decoration:none;border-bottom:1px solid var(--rule-dark);padding-bottom:.2rem;transition:border-color .3s ease}
.direct dd a:hover,.direct dd a:focus-visible{border-color:var(--sage)}
.direct .aside{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--rule-dark);color:rgba(241,237,228,.62);font-size:.92rem}

.row{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:620px){.row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.5rem;margin-bottom:1.5rem}
.field label{font-size:.59rem;letter-spacing:.26em;text-transform:uppercase;color:var(--sage)}
.field input,.field select,.field textarea{
  font-family:var(--text);font-size:1rem;font-weight:300;color:var(--sheet);
  background:transparent;border:0;border-bottom:1px solid var(--rule-dark);
  padding:.6rem 0;transition:border-color .3s ease;
}
.field select{appearance:none;background-image:none}
.field select option{color:var(--ink)}
.field textarea{resize:vertical;min-height:7rem;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sage)}
.field input::placeholder,.field textarea::placeholder{color:rgba(241,237,228,.4)}
.send{
  font-family:var(--text);font-size:.61rem;letter-spacing:.26em;text-transform:uppercase;
  background:transparent;color:var(--sage);border:1px solid var(--sage);
  padding:1rem 2.4rem;cursor:pointer;transition:background .3s ease,color .3s ease;
}
.send:hover,.send:focus-visible{background:var(--sage);color:var(--mist)}
.note{font-size:.86rem;color:rgba(241,237,228,.55);margin-top:1.2rem}
.status{font-size:.86rem;color:var(--sage);margin-top:1rem;min-height:1.4em}
.status[data-state="error"]{color:#d9a08c}

/* ── motion + focus ─────────────────────────────── */
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.r{opacity:0;transform:translateY(14px);transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1)}
.r.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.r{opacity:1;transform:none;transition:none}}