:root {
  color-scheme: light; --ink:#213626; --muted:#4d6151; --green:#266038;
  --paper:#fbfaf4; --line:#d6dfd1; --white:#fff; --gold:#f2ce47;
  font-family: system-ui, sans-serif; color:var(--ink); background:var(--paper);
}
* { box-sizing:border-box }
body { margin:0; line-height:1.55 }
[hidden] { display:none!important }
button,input { font:inherit; color:inherit }
a { color:inherit }
button { cursor:pointer }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid #82551e; outline-offset:4px }
.shell { width:min(1120px, calc(100% - 64px)); margin-inline:auto }
.top,.top nav,.brand,.languages,.eyebrow,.foot,.meta { display:flex; align-items:center }
.top { justify-content:space-between; min-height:84px; border-bottom:1px solid var(--line); gap:16px }
.top nav { gap:26px; font-weight:650; font-size:.93rem }
.top a,.foot a { text-decoration:none }
.top nav a:hover,.foot a:hover { text-decoration:underline }
.brand { gap:10px; font-size:1.23rem; font-weight:850; letter-spacing:.09em }
.brand img { width:32px; height:39px; object-fit:contain }
.languages { padding:3px; border:1px solid var(--line); border-radius:100px; background:#f1f4e9 }
.languages button { border:0; border-radius:100px; min-width:41px; min-height:36px; font-size:.8rem; font-weight:800; background:transparent }
.languages [aria-pressed=true],.filters [aria-pressed=true] { background:var(--green); color:white; border-color:var(--green) }
.intro { padding:53px 0 32px }
.eyebrow { gap:9px; color:var(--green); font-weight:800; font-size:.74rem; letter-spacing:.13em }
.eyebrow i { border-radius:50%; width:9px; height:9px; background:#e0973d; flex:none }
h1,h2,h3,p { margin:0 }
h1,h2,h3 { line-height:1.12; letter-spacing:-.035em }
h1 { font-size:clamp(2.8rem,8vw,5.6rem); margin:10px 0 12px; font-weight:850 }
.intro p { max-width:60ch; font-size:clamp(1rem,2vw,1.22rem); color:var(--muted) }
.featured { background:#eaf1dc; border:1px solid #d4e1c6; border-radius:26px; overflow:hidden; display:grid; grid-template-columns:1.6fr 1fr; min-height:315px }
.featured-copy { padding:clamp(24px,5vw,54px); align-self:center }
.featured h2 { font-size:clamp(1.9rem,4.3vw,3.45rem); margin:12px 0 }
.featured p { color:var(--muted); max-width:52ch }
.featured .read { margin-top:23px; padding:9px 16px; background:var(--green); color:white; border-radius:100px; min-height:44px }
.featured .read:hover { background:#194d2b; text-decoration:none }
.hero-art { display:grid; place-items:center; background:#fdfdfd }
.hero-art img { display:block; width:auto; height:300px; max-width:100%; object-fit:contain }
.archive { padding:55px 0 64px }
.archive-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:23px }
.archive h2 { margin-top:8px; font-size:clamp(1.95rem,4vw,3.05rem) }
.search { display:flex; align-items:center; gap:10px; width:min(100%,290px); background:white; border:1px solid var(--line); border-radius:12px; padding:0 13px }
.search svg { width:19px; flex:none; fill:none; stroke:var(--green); stroke-width:2 }
.search input { width:100%; min-width:0; height:44px; border:0; background:transparent }
.filters { display:flex; flex-wrap:wrap; gap:8px }
.filters button { min-height:44px; border:1px solid var(--line); background:white; border-radius:100px; padding:7px 15px; font-size:.91rem; font-weight:700 }
.filters button:hover:not([aria-pressed=true]) { background:#edf3e5 }
.results { color:var(--muted); font-size:.9rem; margin:14px 0; min-height:1.5em }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px }
.card { display:flex; flex-direction:column; background:white; border:1px solid var(--line); border-radius:17px; padding:23px; border-top:4px solid var(--accent); gap:12px }
.card h3 { font-size:1.35rem }
.card p,.detail-inner p { color:var(--muted) }
.meta { gap:8px 10px; flex-wrap:wrap; font-size:.8rem; color:var(--muted) }
.tag { background:var(--tint); color:#263628; padding:4px 9px; border-radius:30px; font-weight:750 }
.articles { --accent:#37873b; --tint:#e3f0df }
.congresses { --accent:#e0973d; --tint:#f8ead6 }
.talks { --accent:#8674ac; --tint:#eee8f7 }
.updates { --accent:#d2a923; --tint:#f9edbc }
.read { align-self:flex-start; display:inline-flex; gap:8px; align-items:center; border:0; background:transparent; padding:3px 0; min-height:44px; color:var(--green); font-weight:750; text-align:left }
.card .read { margin-top:auto }
.read:hover { text-decoration:underline }
.empty { grid-column:1/-1; border:1px dashed var(--line); border-radius:15px; padding:25px }
footer { background:#eaf1e4; border-top:1px solid var(--line) }
.foot { min-height:115px; justify-content:space-between; gap:15px; font-size:.91rem }
.foot p { color:var(--muted) }
dialog { padding:0; border:1px solid var(--line); border-radius:20px; width:min(630px,calc(100% - 32px)); max-height:calc(100% - 32px); color:var(--ink); background:var(--paper) }
dialog::backdrop { background:#172a1dc2 }
.detail-inner { padding:clamp(22px,6vw,44px); position:relative }
.detail-inner h2 { font-size:clamp(1.65rem,5vw,2.65rem); margin:14px 0 }
.detail-inner p+p { margin-top:12px }
.detail-inner .meta { padding-right:45px }
.close { position:absolute; top:12px; right:12px; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:white; font-size:1.4rem; line-height:1 }
.source { display:inline-block; margin-top:20px; font-weight:750; color:var(--green); overflow-wrap:anywhere }
.skip { position:absolute; top:6px; left:6px; padding:10px; background:white; z-index:5; transform:translateY(-150%) }
.skip:focus { transform:none }
.sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
@media(max-width:850px) { .cards { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:620px) {
  .shell { width:calc(100% - 32px) }
  .top { min-height:68px }
  .top nav { gap:12px }
  .nav-archive { display:none }
  .brand { font-size:1rem; gap:5px }
  .brand img { width:25px; height:32px }
  .top nav .official { font-size:.8rem }
  .intro { padding:32px 0 24px }
  .featured { grid-template-columns:1fr }
  .hero-art img { height:180px }
  .archive { padding:36px 0 44px }
  .archive-head { align-items:stretch; flex-direction:column; gap:15px }
  .search { width:100% }
  .cards { grid-template-columns:1fr }
}
@media(max-width:350px) { .top nav .official { display:none } }