/* Arthouse Botanica. One stylesheet for the home garden and every page behind it. */
:root { --ink:#f4eedc; --soft:#d9e0cf; --dim:#9fb09b; --gold:#f0cf86; --deep:#07130c; --night:#081019; --line:#ffffff2e; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--deep); color:var(--ink); font: 20px/1.6 "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; }
a { color:var(--gold); }
img { max-width:100%; display:block; }
.mark { display:block; width:84px; height:41px; flex:0 0 auto; background:var(--gold); -webkit-mask:url(/img/logo.png) center/contain no-repeat; mask:url(/img/logo.png) center/contain no-repeat; }
.brand { display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink); }
.brand b { display:block; font-weight:400; letter-spacing:.26em; text-transform:uppercase; font-size:15px; line-height:1.3; }
.brand i { display:block; font-size:16px; color:var(--soft); line-height:1.3; }
.pill { display:inline-block; text-decoration:none; font: 15px/1 system-ui, sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#1b1405; background:var(--gold);
        border:0; border-radius:999px; padding:16px 26px; min-height:48px; cursor:pointer; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chips a { color:var(--soft); text-decoration:none; font-size:17px; line-height:1.3; padding:9px 15px; border:1px solid var(--line); border-radius:999px; min-height:42px; background:#07130c99; }
.chips a[aria-current="page"] { color:#1b1405; background:var(--gold); border-color:var(--gold); }
.chips a.lead { border-color:var(--gold); color:var(--gold); }
a:focus-visible, button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.draft { position:fixed; right:0; top:0; z-index:9; font: 12px/1 system-ui, sans-serif; letter-spacing:.14em; text-transform:uppercase; background:#b3502a; color:#fff; padding:7px 12px; border-bottom-left-radius:8px; }
.sr { position:absolute; left:-9999px; }

/* ---------- home: the illustrated garden above, the opening card below ---------- */
body.home { height:100vh; height:100svh; overflow:hidden; background:var(--night); display:grid; grid-template-rows: 1fr auto; }
.gardenwrap { position:relative; min-height:0; }
.scroll { position:absolute; inset:0; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.scroll::-webkit-scrollbar { display:none; }
svg.scene { display:block; height:100%; width:auto; min-width:100%; aspect-ratio:16/9; transition: transform .7s cubic-bezier(.5,0,.2,1), opacity .7s ease; }
svg.scene.walk { opacity:0; }
.hometop { position:absolute; left:0; right:0; top:0; padding: clamp(14px,3vw,28px); pointer-events:none; background:linear-gradient(180deg,#081019d9,#08101900); }
.hometop .brand { pointer-events:auto; display:inline-flex; }
.arttag { position:absolute; right:10px; bottom:8px; font: 12px/1.3 system-ui, sans-serif; color:#aab6c8; background:#081019b3; padding:4px 9px; border-radius:6px; pointer-events:none; }
.slidehint { position:absolute; left:10px; bottom:8px; font: 12px/1.3 system-ui, sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#cfd8e6; background:#081019b3; padding:4px 9px; border-radius:6px; pointer-events:none; }
@media (min-aspect-ratio: 16/9) { .slidehint { display:none; } }
.intro { background:#060d15; border-top:1px solid #f0cf8640; padding: 14px clamp(14px,3vw,30px) 14px; text-align:center; }
.intro h1 { font-weight:400; font-size: clamp(17px,2.2vw,22px); line-height:1.35; margin:0 auto 10px; max-width:36em; }
.intro .chips { justify-content:center; margin-top:10px; }
@media (max-width: 700px) {
  .intro .chips { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; margin-left:-14px; margin-right:-14px; padding:0 14px 2px; }
  .intro .chips a { flex:0 0 auto; }
}
.fly { animation: fly 7s ease-in-out infinite alternate; }
@keyframes fly { from { transform: translate(0,0); opacity:.2; } 50% { opacity:1; } to { transform: translate(26px,-34px); opacity:.35; } }
.sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 6s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
.twinkle { animation: tw 3.5s ease-in-out infinite alternate; }
@keyframes tw { from { opacity:.25; } to { opacity:1; } }
.glow { animation: gl 4s ease-in-out infinite alternate; }
@keyframes gl { from { opacity:.55; } to { opacity:1; } }
a.spot { cursor:pointer; }
a.spot .ring { fill:none; stroke:var(--gold); stroke-width:3; transform-box: fill-box; transform-origin:center; animation: ring 2.4s ease-out infinite; }
@keyframes ring { from { transform:scale(.6); opacity:.9; } to { transform:scale(2.1); opacity:0; } }
a.spot .dot { fill:var(--gold); stroke:#3a2a08; stroke-width:2; }
a.spot text { fill:#fff8e6; font: 600 25px "Palatino Linotype", Palatino, Georgia, serif; paint-order:stroke; stroke:#081019; stroke-width:6px; stroke-linejoin:round; }
a.spot:hover .dot, a.spot:focus-visible .dot { fill:#fff; }
a.spot.lead .ring { stroke-width:5; animation-duration:1.5s; }
a.spot.lead .dot { fill:#fff6d8; }
a.spot.lead text { fill:var(--gold); font-size:31px; }

/* ---------- a place: full-screen photograph, then the page ---------- */
.hero { position:relative; min-height:100vh; min-height:100svh; overflow:hidden; display:grid; grid-template-rows:auto 1fr auto; padding: clamp(18px,4vw,46px); animation: arrive .7s ease both; }
@keyframes arrive { from { opacity:0; } to { opacity:1; } }
.hero .bg { position:absolute; inset:0; background-size:cover; background-position:center; animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.04) translate3d(-1%,-1%,0); } to { transform: scale(1.16) translate3d(1.5%,1%,0); } }
.hero .veil { position:absolute; inset:0; background: linear-gradient(90deg,#07130cf2 0%,#07130cb8 40%,#07130c33 72%,#07130c00 100%), linear-gradient(0deg,#07130cf2 0%,#07130c00 40%); }
.hero > * { position:relative; }
.hero > .bg, .hero > .veil { position:absolute; }
.hero .bar { display:flex; align-items:center; gap:14px; }
.hero .bar .pill { margin-left:auto; padding:13px 20px; min-height:44px; font-size:13px; }
.hero .words { align-self:center; max-width:660px; }
.kicker { font: 13px/1.3 system-ui, sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.hero h1 { font-weight:400; font-size: clamp(40px,8vw,86px); line-height:1.04; margin:10px 0 14px; text-shadow:0 2px 30px #000a; }
.hero .lede { font-size: clamp(19px,2.3vw,23px); line-height:1.45; color:#e9eedf; max-width:28em; margin:0; }
.hero.article { min-height:78vh; min-height:78svh; }
.hero.article h1 { font-size: clamp(34px,6vw,64px); }
@media (max-width: 760px) {
  .hero .veil { background: linear-gradient(0deg,#07130cfa 0%,#07130cc7 58%,#07130c40 100%); }
  .hero .words { align-self:end; padding-bottom:16px; }
  .hero .bar .brand b, .hero .bar .brand i { display:none; }
  .hero .chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -18px; padding:0 18px 4px; }
  .hero .chips a { flex:0 0 auto; }
}
main.page { max-width: 46rem; margin:0 auto; padding: clamp(28px,5vw,60px) clamp(18px,4vw,30px) 40px; }
main.page h2 { font-weight:400; font-size: clamp(26px,3.6vw,34px); line-height:1.2; margin:1.8em 0 .5em; color:var(--gold); }
main.page p, main.page li { color:#e8eddf; }
main.page ul { padding-left:1.2em; }
.notice { border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:8px; padding:16px 20px; margin:1.4em 0; background:#0c1d13; }
.notice b { display:block; font: 13px/1.3 system-ui, sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
.meta { font: 14px/1.5 system-ui, sans-serif; color:var(--dim); }
figure { margin: 1.8em 0; }
figure img { width:100%; border-radius:8px; }
figcaption { font: 15px/1.45 system-ui, sans-serif; color:var(--dim); margin-top:8px; }
.gallery { display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width:72rem; margin:0 auto; padding: 0 clamp(18px,4vw,30px) 50px; }
.gallery figure { margin:0; }
.gallery img { aspect-ratio:4/3; object-fit:cover; }
.cards { list-style:none; padding:0; margin:1.2em 0; display:grid; gap:18px; }
.cards a { display:grid; grid-template-columns: 180px 1fr; gap:18px; align-items:center; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#0c1d13; }
.cards img { width:180px; height:100%; min-height:130px; object-fit:cover; }
.cards div { padding:14px 16px 14px 0; }
.cards b { display:block; font-weight:400; font-size:25px; line-height:1.2; color:var(--gold); }
.cards span { display:block; color:#dfe6d6; font-size:18px; line-height:1.4; margin-top:4px; }
@media (max-width: 560px) { .cards a { grid-template-columns:1fr; } .cards img { width:100%; height:180px; } .cards div { padding:0 16px 16px; } }
footer.site { border-top:1px solid var(--line); padding: 26px clamp(18px,4vw,30px) 40px; text-align:center; font: 15px/1.6 system-ui, sans-serif; color:var(--dim); }
footer.site nav { display:flex; gap:6px 18px; justify-content:center; flex-wrap:wrap; margin-bottom:10px; }
footer.site a { color:var(--soft); }
@media (prefers-reduced-motion: reduce) {
  .fly, .sway, .twinkle, .glow, a.spot .ring, .hero .bg, .hero { animation:none; }
  svg.scene { transition:none; }
}