/* The Dawn I AM */
:root{
  --ink:#111111;
  --gold:#9a7420;
  --line:#e6d7b0;
  --mute:#333333;
  --bg:#ffffff;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --text:"EB Garamond",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:var(--text);font-size:1.15rem;line-height:1.7;font-weight:500}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
.mast{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.bar{max-width:1120px;margin:0 auto;padding:.95rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{font-family:var(--display);font-size:1.2rem;color:var(--ink);text-decoration:none;letter-spacing:.02em;white-space:nowrap}
.brand:hover{color:var(--gold);text-decoration:none}
.mast nav{display:flex;flex-wrap:wrap;gap:.2rem 1.7rem;justify-content:flex-end}
.mast nav a{font-family:var(--display);font-size:1.02rem;color:var(--ink);letter-spacing:.04em;text-decoration:none}
.mast nav a:hover,.mast nav a.on{color:var(--gold)}
.hero{position:relative;height:min(78vh,740px);background:#1a1a1a;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero .veil{position:absolute;inset:auto 0 0 0;padding:7rem 0 2.2rem;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.88) 48%,#fff 100%)}
.hero .inner{max-width:1120px;margin:0 auto;padding:0 2rem}
.hero .sub{font-family:var(--display);font-style:italic;color:var(--gold);font-size:1.2rem;margin-bottom:.2rem}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,6.4vw,4.5rem);color:var(--ink);line-height:1.05;letter-spacing:-.01em}
.wrap{max-width:1120px;margin:0 auto;padding:0 2rem}
.block{padding:4.4rem 0 4.6rem;border-top:1px solid var(--line)}
.block:first-of-type{border-top:0}
.page-hero{padding:3.4rem 0 0}
.kicker{font-family:var(--display);font-style:italic;color:var(--gold);font-size:1.12rem}
h1.page{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,5vw,3.4rem);color:var(--ink);margin:.15rem 0 1.4rem;line-height:1.1}
h2{font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,3.2vw,2.35rem);color:var(--ink);margin:.12rem 0 1.3rem;line-height:1.15}
h3{font-family:var(--display);font-weight:600;font-size:1.35rem;color:var(--ink);margin:1.4rem 0 .5rem}
.lede{font-size:1.25rem;max-width:40rem}
.split{display:grid;grid-template-columns:1.12fr .88fr;gap:3.2rem;align-items:start}
.split.rev{grid-template-columns:.88fr 1.12fr}
.frame-img{border:1px solid var(--line);background:#fff}
.frame-img img{width:100%}
.caption{font-family:var(--display);font-style:italic;color:var(--gold);font-size:1rem;padding:.7rem .9rem 0}
.prose p{margin:0 0 1.05rem;color:var(--ink)}
.prose p:last-child{margin-bottom:0}
.dates{margin:1.3rem 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.dates li{display:grid;grid-template-columns:7.2rem 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid #f1ead4;font-size:1.08rem}
.dates b{font-family:var(--display);font-weight:600;color:var(--gold)}
.chart{width:100%;height:68vh;min-height:500px;border:1px solid var(--line);background:#fff;margin-top:2rem}
.feature{display:grid;grid-template-columns:.92fr 1.08fr;gap:3rem;align-items:center}
a.panel{display:block;border:1px solid var(--line);background:#fff;text-decoration:none;color:inherit;transition:border-color .2s ease}
a.panel:hover{border-color:var(--gold);text-decoration:none}
a.panel svg,a.panel img{width:100%;display:block;background:#fff}
.more{display:inline-block;margin-top:.9rem;font-family:var(--display);font-style:italic;color:var(--gold)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin:1.6rem 0 1.8rem}
.pair figure{margin:0}
.pair img{width:100%;height:420px;object-fit:contain;background:#fafafa;border:1px solid var(--line)}
.pair figcaption{font-family:var(--display);font-style:italic;color:var(--gold);font-size:1rem;padding:.65rem .1rem 0}
.cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.4rem}
.card{border:1px solid var(--line);padding:1.3rem 1.25rem 1.4rem;display:flex;flex-direction:column;gap:.45rem;text-decoration:none;color:var(--ink);background:#fff;transition:border-color .2s ease}
.card:hover{border-color:var(--gold);text-decoration:none}
.card .kicker{font-size:1rem}
.card h3{margin:0;font-size:1.28rem}
.card p{color:var(--mute);font-size:1.05rem}
.site-box{display:grid;grid-template-columns:1.35fr .65fr;border:1px solid var(--line)}
#mapel{height:480px;background:#fafafa}
.site-copy{padding:1.25rem 1.3rem;border-left:1px solid var(--line)}
.site-copy h3{margin:.2rem 0 .45rem}
.site-copy select{width:100%;margin:.55rem 0 .8rem;padding:.45rem .5rem;border:1px solid var(--line);font:inherit;background:#fff;color:var(--ink)}
#site-photo{width:100%;max-height:220px;object-fit:cover;margin:.2rem 0 .7rem;display:none;border:1px solid var(--line)}
.drop{margin-top:.5rem;font-size:1.05rem}
.drop input{display:block;margin-top:.35rem}
.gold-pin{background:#c4a35a;border:1px solid #8a6a1a;border-radius:50%}
.leaflet-container{font-family:var(--text);background:#fff}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#fff;color:#111;border:1px solid var(--line)}
label{display:block;font-family:var(--display);font-style:italic;color:var(--gold);margin-bottom:.4rem}
textarea{width:100%;min-height:6.4rem;border:1px solid var(--line);padding:.8rem;font:inherit;color:var(--ink);background:#fff}
.vals{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.7rem;margin-top:.9rem}
.val{border:1px solid var(--line);text-align:center;padding:.9rem .3rem}
.val b{display:block;font-family:var(--display);font-style:italic;font-weight:500;color:var(--gold)}
.val span{font-family:var(--display);font-size:1.7rem}
.he-row{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.6rem}
.he-row button{border:1px solid var(--line);background:#fff;color:var(--ink);padding:.15rem .4rem;cursor:pointer;font-size:1.05rem}
.foot{border-top:1px solid var(--line);padding:2.4rem 0 2.8rem;text-align:center}
.foot .mark{font-family:var(--display);font-style:italic;color:var(--gold);font-size:1.15rem}
.socials{display:flex;justify-content:center;align-items:center;gap:1.35rem;margin:1.05rem 0 .85rem}
.socials a{color:var(--ink);display:inline-flex;line-height:0}
.socials a:hover{color:var(--gold);text-decoration:none}
.socials svg{width:22px;height:22px;fill:currentColor}
.foot small{display:block;color:var(--mute);font-size:1rem}
@media(max-width:900px){
  .bar{padding:.85rem 1.2rem;flex-direction:column;align-items:flex-start;gap:.55rem}
  .wrap,.hero .inner{padding-left:1.2rem;padding-right:1.2rem}
  .split,.split.rev,.feature,.cards,.pair,.site-box,.vals{grid-template-columns:1fr}
  .pair img{height:auto}
  .site-copy{border-left:0;border-top:1px solid var(--line)}
  .hero{height:min(68vh,560px)}
  .chart{height:58vh;min-height:380px}
  #mapel{height:340px}
}

.nav-tools{display:flex;flex-wrap:wrap;gap:.2rem 1.7rem}
.chip-row{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.1rem}
.chip{border:1px solid var(--line);background:#fff;color:var(--ink);font-family:var(--display);font-size:1rem;padding:.28rem .8rem;cursor:pointer}
.chip.on,.chip:hover{border-color:var(--gold);color:var(--gold)}
.site-box{align-items:stretch}
.site-copy{overflow:auto;max-height:560px}
#mapel{height:560px}
.letters{display:flex;flex-wrap:wrap;gap:.35rem;margin:.85rem 0 1rem}
.letter{min-width:2.4rem;border:1px solid var(--line);text-align:center;padding:.35rem .25rem .4rem}
.letter i{display:block;font-style:normal;font-family:var(--display);font-size:1.15rem}
.letter small{display:block;color:var(--gold);font-size:.78rem}
.vals{grid-template-columns:1fr 1fr 1fr}
.trans-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.trans-grid textarea,.trans-out{min-height:14rem;width:100%;border:1px solid var(--line);padding:1rem;font:inherit;color:var(--ink);background:#fff}
.trans-out{white-space:pre-wrap}
.langbar{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.1rem}
.langbar button,.go{border:1px solid var(--line);background:#fff;color:var(--ink);font-family:var(--display);font-size:1.05rem;padding:.45rem 1rem;cursor:pointer}
.langbar button.on,.go{border-color:var(--gold);color:var(--gold)}
.go{margin-top:.8rem}
.note{font-size:1.02rem;color:var(--mute);margin-top:.8rem}
@media(max-width:900px){
  .trans-grid{grid-template-columns:1fr}
  .site-copy{max-height:none}
  #mapel{height:360px}
}

#site-related .more{display:inline-block;margin:.15rem 1rem .15rem 0}
.he-row{margin:.7rem 0 0}
.trans-grid label{margin-top:.2rem}
.roman{min-height:auto;border:1px solid var(--line);padding:.85rem 1rem;margin-top:.8rem;font-family:var(--display);font-style:italic;color:var(--gold)}

/* Dropdown: hover/focus Articles reveals the two subtitles */
.drop-nav{position:relative;padding-bottom:.45rem;margin-bottom:-.45rem}
.drop-nav > a{display:inline-block;padding:.2rem 0}
.drop-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:15.6rem;
  background:#fff;
  border:1px solid var(--line);
  padding:.4rem 0 .5rem;
  z-index:50;
  flex-direction:column;
  gap:0;
}
.drop-nav:hover .drop-menu,
.drop-nav:focus-within .drop-menu{display:flex}
.drop-menu a{
  display:block;
  padding:.42rem 1.1rem;
  white-space:nowrap;
  font-size:1rem;
  letter-spacing:.03em;
}
.drop-menu a:hover,.drop-menu a.on{color:var(--gold)}

/* Home run-in title cards */
.title-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.4rem;
}
.title-card{
  border:1px solid var(--line);
  background:#fff;
  text-decoration:none;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  min-height:100%;
  transition:border-color .2s ease;
}
.title-card:hover{border-color:var(--gold);text-decoration:none}
.title-card .media{
  aspect-ratio:4/3;
  overflow:hidden;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.title-card .media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
}
.title-card .media img.fit{
  object-fit:contain;
  object-position:center;
  background:#fff;
  padding:.6rem;
}
.title-card .pad{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.28rem;flex:1}
.title-card h3{margin:0;font-size:1.28rem;line-height:1.2}
.title-card p{color:var(--mute);font-size:1.04rem}

/* Journal cards with image + title */
.journal-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.4rem}
.journal-card{
  border:1px solid var(--line);
  background:#fff;
  text-decoration:none;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  transition:border-color .2s ease;
}
.journal-card:hover{border-color:var(--gold);text-decoration:none}
.journal-card .media{
  aspect-ratio:16/10;
  overflow:hidden;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.journal-card .media img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:.5rem;
}
.journal-card .media img.photo{
  object-fit:cover;
  object-position:center 35%;
  padding:0;
}
.journal-card .pad{padding:1.05rem 1.15rem 1.25rem}
.journal-card h3{margin:.15rem 0 .4rem;font-size:1.28rem;line-height:1.2}
.journal-card p{color:var(--mute);font-size:1.04rem}

.gold-panel{
  aspect-ratio:16/10;
  background:#fff;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  font-family:var(--display);
  font-style:italic;
  letter-spacing:.08em;
}
.coming{
  margin-top:1.2rem;
  padding:1.4rem 1.5rem;
  border:1px solid var(--line);
  background:#fff;
}
.coming p{margin:0}

@media(max-width:1100px){
  .title-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .title-cards,.journal-cards{grid-template-columns:1fr}
  .drop-menu{left:0}
}