:root{
  --ink: #14111f;
  --ink-deep: #0c0a14;
  --gold: #c9a24b;
  --gold-soft: #e0c584;
  --paper: #f3ecdd;
  --paper-dark: #e6dcc4;
  --rose: #a15c5c;
  --text-light: #ece6d8;
  --text-muted: #a89f8c;
  --text-dark: #2b2418;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Prevents a flash of Hindi content on load when English was the saved
   preference — i18n.js removes this class the instant translation is applied. */
html.zf-en-init body{visibility:hidden;}
body{
  background:var(--ink);
  color:var(--text-light);
  font-family:'Noto Serif Devanagari','Lora', serif;
  line-height:1.9;
  overflow-x:hidden;
  min-height:100vh;
}
h1,h2,h3{font-family:'Noto Serif Devanagari','Cormorant Garamond', serif;}
a{color:inherit;}

/* ENGLISH MODE — switch to the Latin-optimised faces already loaded on
   the page so transliterated/translated text sets cleanly. */
body.lang-en{font-family:'Lora','Cormorant Garamond', serif;}
body.lang-en h1, body.lang-en h2, body.lang-en h3{font-family:'Cormorant Garamond','Lora', serif;}
body.lang-en .hero .sher{font-family:'Cormorant Garamond','Lora', serif; font-style:italic;}
body.lang-en .collection-search input{font-family:'Lora', serif;}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(201,162,75,0.06) 1px, transparent 0);
  background-size:22px 22px;
  pointer-events:none;
  z-index:0;
}

/* NAV */
nav{
  position:sticky; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 5vw;
  background:linear-gradient(to bottom, rgba(20,17,31,0.97), rgba(20,17,31,0.9) 85%, rgba(20,17,31,0.85));
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(201,162,75,0.12);
}
.brand{font-size:1.35rem; letter-spacing:0.02em; color:var(--gold-soft); font-weight:700; text-decoration:none; display:block;}
.brand span{color:var(--text-muted); font-family:'Lora'; font-size:0.68rem; letter-spacing:0.2em; display:block; text-transform:uppercase; margin-top:2px; font-weight:400;}
.nav-right{display:flex; align-items:center; gap:1.8rem;}
.navlinks{display:flex; gap:1.8rem; font-size:1rem;}
.navlinks a{text-decoration:none; color:var(--text-muted); transition:color .25s; position:relative; padding-bottom:4px;}
.navlinks a:hover{color:var(--gold-soft);}
.navlinks a.active{color:var(--gold-soft);}
.navlinks a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--gold);
}
.nav-toggle{display:none; background:none; border:none; color:var(--gold-soft); width:34px; height:34px; cursor:pointer;}
.nav-toggle svg{width:22px; height:22px;}

/* LANGUAGE TOGGLE */
.lang-toggle{
  position:relative; flex:none; display:inline-flex; align-items:center;
  padding:3px; border-radius:999px; cursor:pointer;
  background:rgba(243,236,221,0.06); border:1px solid rgba(201,162,75,0.35);
  font-family:'Lora',serif; -webkit-tap-highlight-color:transparent;
}
.lang-toggle .lang-thumb{
  position:absolute; top:3px; bottom:3px; left:3px;
  width:calc(50% - 3px); border-radius:999px; background:var(--gold);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.lang-toggle.is-en .lang-thumb{transform:translateX(100%);}
.lang-toggle .lang-opt{
  position:relative; z-index:1; padding:0.42rem 0.85rem; font-size:0.72rem;
  letter-spacing:0.04em; color:var(--text-muted); transition:color .25s ease;
  min-width:32px; text-align:center; line-height:1;
}
.lang-toggle .lang-opt.active{color:var(--ink-deep); font-weight:600;}

@media (max-width:820px){
  .navlinks{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--ink-deep);
    border-bottom:1px solid rgba(201,162,75,0.15);
  }
  .navlinks.open{display:flex;}
  .navlinks a{padding:1rem 6vw; border-top:1px solid rgba(201,162,75,0.08);}
  .navlinks a.active::after{display:none;}
  .navlinks a.active{background:rgba(201,162,75,0.08);}
  .nav-toggle{display:flex; align-items:center; justify-content:center;}
  .nav-right{gap:0.9rem;}
  .lang-toggle .lang-opt{padding:0.4rem 0.65rem; font-size:0.68rem; min-width:28px;}
}

@media (max-width:400px){
  .brand{font-size:1.12rem;}
}

section{position:relative; z-index:1;}
main{position:relative; z-index:1; min-height:60vh;}

/* PAGE HEADER (used on About / Ghazals / Nazms / Contact) */
.page-header{
  text-align:center; padding:11vh 6vw 5vh;
}
.page-header .tag{color:var(--rose); text-transform:uppercase; letter-spacing:0.32em; font-size:0.75rem; font-family:'Lora'; font-weight:600;}
.page-header h1{font-size:clamp(2.3rem,5.5vw,3.4rem); color:var(--gold-soft); font-weight:700; margin-top:0.7rem;}
.page-header p{max-width:620px; margin:1.2rem auto 0; color:var(--text-muted); font-size:1.05rem;}

/* HERO (home page) */
.hero{
  min-height:82vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; position:relative; padding:8vh 6vw 6vh;
}
.hero .eyebrow{
  color:var(--gold); text-transform:uppercase; letter-spacing:0.35em; font-size:0.75rem; font-family:'Lora';
  margin-bottom:2rem; opacity:0; animation:fadeUp 1s ease forwards 0.2s;
}
.hero h1{
  font-size:clamp(2.6rem, 7vw, 4.5rem); color:var(--gold-soft); font-weight:700; margin-bottom:1rem;
  opacity:0; animation:fadeUp 1s ease forwards 0.35s;
}
.hero .sher{
  max-width:780px; font-size:clamp(1.3rem, 3vw, 1.7rem);
  color:var(--text-light); opacity:0; animation:fadeUp 1.1s ease forwards 0.55s;
}
.hero .sher .line{display:block; margin-bottom:0.3em;}
.hero .attribution{
  margin-top:1.5rem; font-size:0.85rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted);
  opacity:0; animation:fadeUp 1s ease forwards 0.9s;
}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}}

/* HOME: NAV CARDS */
.nav-cards{
  max-width:1080px; margin:0 auto; padding:2vh 6vw 12vh;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1.8rem;
}
.nav-card{
  background:linear-gradient(155deg, #fdfaf2 0%, #f6efdd 55%, #efe4c6 100%);
  color:var(--text-dark); border-radius:10px;
  padding:2.6rem 2.1rem; text-decoration:none; position:relative; overflow:hidden;
  border:1px solid rgba(201,162,75,0.35);
  box-shadow:0 4px 10px rgba(0,0,0,0.18), 0 22px 42px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.6);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease, border-color .35s ease;
  display:flex; flex-direction:column; gap:0.6rem;
}
.nav-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold-soft) 50%, var(--gold) 75%, transparent);
  opacity:0.85;
}
.nav-card::after{
  content:"❦"; position:absolute; right:1.3rem; bottom:1.1rem; font-size:1.6rem;
  color:var(--rose); opacity:0.16; pointer-events:none; font-family:'Cormorant Garamond', serif;
}
.nav-card:hover{
  transform:translateY(-7px); border-color:rgba(201,162,75,0.65);
  box-shadow:0 6px 14px rgba(0,0,0,0.22), 0 30px 58px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.7);
}
.nav-card .nav-card-tag{font-size:0.68rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--rose); font-family:'Lora'; font-weight:600;}
.nav-card h3{font-size:1.55rem; color:var(--text-dark); font-weight:700; font-family:'Cormorant Garamond','Noto Serif Devanagari',serif;}
.nav-card p{color:#5c5646; font-size:0.95rem; line-height:1.65; position:relative; z-index:1;}
.nav-card .nav-card-arrow{margin-top:auto; font-size:0.85rem; color:var(--rose); letter-spacing:0.05em; font-weight:600; transition:transform .25s ease; display:inline-block;}
.nav-card:hover .nav-card-arrow{transform:translateX(4px);}

/* HOME: RANDOM SHER WIDGET */
.sher-widget{max-width:640px; margin:0 auto; padding:0 6vw 9vh; text-align:center;}
.sher-widget-head .tag{color:var(--rose); text-transform:uppercase; letter-spacing:0.3em; font-size:0.75rem; font-family:'Lora'; font-weight:600;}
.sher-widget-head h2{font-size:clamp(1.6rem,4vw,2.2rem); color:var(--gold-soft); font-weight:700; margin-top:0.6rem;}

.sher-card{
  background:var(--paper); border-radius:2px; margin:2.2rem 0 1.8rem; padding:2.6rem 2.2rem;
  position:relative; border:1px solid var(--paper-dark); box-shadow:0 20px 40px rgba(0,0,0,0.3);
  min-height:120px; display:flex; align-items:center; justify-content:center;
}
.sher-card::before{
  content:""; position:absolute; top:10px; left:10px; right:10px; bottom:10px;
  border:1px solid rgba(161,92,92,0.22); pointer-events:none;
}
.sher-placeholder{color:#5c5646; font-size:1rem; font-style:italic; position:relative; z-index:1;}

.sher-content{width:100%; position:relative; z-index:1;}
.sher-content[hidden]{display:none;}
.sher-content.pop{animation:fadeUp .5s ease;}

.sher-lines{font-size:clamp(1.2rem,2.8vw,1.5rem); line-height:2; color:var(--text-dark); margin-bottom:1.5rem;}
.sher-lines .line{display:block;}
body.lang-en .sher-lines{font-family:'Cormorant Garamond','Lora', serif; font-style:italic;}

.sher-source{
  display:flex; flex-direction:column; align-items:center; gap:0.35rem; text-decoration:none;
  padding-top:1.3rem; border-top:1px solid rgba(161,92,92,0.2);
}
.sher-source-prefix{color:var(--rose); font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; font-family:'Lora'; font-weight:600;}
.sher-source-label{color:#5c5646; font-size:0.95rem; font-style:italic;}
.sher-source-arrow{color:var(--rose); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; font-family:'Lora'; margin-top:0.15rem; transition:transform .2s ease; display:inline-block;}
.sher-source:hover .sher-source-arrow{transform:translateX(3px);}

.sher-btn{
  display:inline-flex; align-items:center; gap:0.65rem; border:1px solid rgba(201,162,75,0.4);
  padding:0.9rem 2rem; border-radius:2px; background:transparent; cursor:pointer;
  font-size:0.95rem; letter-spacing:0.05em; color:var(--gold-soft); transition:background .25s ease, color .25s ease, border-color .25s ease;
  font-family:'Lora','Noto Serif Devanagari',serif;
}
.sher-btn:hover{background:var(--gold); color:var(--ink-deep); border-color:var(--gold);}
.sher-btn svg{width:16px; height:16px; flex:none; transition:transform .5s ease;}

@media (max-width:600px){
  .sher-card{padding:2.1rem 1.5rem;}
}

/* FEEDBACK PAGE */
.feedback-page{max-width:620px; margin:0 auto; padding:2vh 6vw 14vh;}
.hp-field{position:absolute; left:-9999px; top:-9999px;}
.feedback-form{display:flex; flex-direction:column; gap:1.4rem;}
.form-group{display:flex; flex-direction:column; gap:0.55rem;}
.form-group label{
  font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--rose);
  font-family:'Lora'; font-weight:600;
}
.form-group input, .form-group textarea{
  background:rgba(243,236,221,0.06); border:1px solid rgba(201,162,75,0.3);
  color:var(--text-light); padding:0.85rem 1.1rem; border-radius:2px; font-size:0.98rem;
  font-family:'Lora','Noto Serif Devanagari',serif; outline:none; transition:border-color .2s;
  width:100%; resize:vertical;
}
.form-group input:focus, .form-group textarea:focus{border-color:var(--gold);}
.form-group input::placeholder, .form-group textarea::placeholder{color:var(--text-muted);}
.feedback-submit{align-self:flex-start; margin-top:0.4rem; position:relative;}
.feedback-submit.loading{opacity:0.65; pointer-events:none;}
.form-note{color:var(--rose); font-size:0.9rem;}
.feedback-success{
  text-align:center; padding:4vh 2vw; color:var(--text-light);
  display:flex; flex-direction:column; align-items:center; gap:0.9rem;
  animation:fadeUp .5s ease;
}
.feedback-success svg{width:52px; height:52px; color:var(--gold);}
.feedback-success h3{font-size:1.6rem; color:var(--gold-soft); font-weight:700;}
.feedback-success p{color:var(--text-muted); max-width:420px; font-size:1rem;}

@media (max-width:600px){
  .feedback-submit{align-self:stretch; text-align:center; justify-content:center;}
}

/* PROFILES PAGE — narrower cap since it's only 2 cards, so they don't stretch too wide */
.profile-cards{max-width:760px; padding-top:2vh; padding-bottom:14vh;}
.profile-cards .nav-card{min-height:230px;}

/* SECTION HEADERS (legacy, reused inline) */
.section-head{text-align:center; padding:8vh 6vw 1vh;}
.section-head .tag{color:var(--rose); text-transform:uppercase; letter-spacing:0.3em; font-size:0.75rem; font-family:'Lora';}
.section-head h2{font-size:clamp(2.2rem,5vw,3rem); color:var(--paper); font-weight:600; margin-top:0.6rem;}

/* ABOUT PAGE */
.about-page{max-width:760px; margin:0 auto; padding:2vh 6vw 12vh;}
.about-photo{
  width:200px; height:200px; border-radius:50%; overflow:hidden; margin:0 auto 2.4rem;
  border:3px solid var(--gold); box-shadow:0 15px 35px rgba(0,0,0,0.4);
}
.about-photo img{width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(15%);}
.about-page p{color:var(--text-muted); font-size:1.08rem; margin-bottom:1.2rem;}

/* SEARCH BAR (collection pages) */
.collection-search{
  max-width:520px; margin:0 auto 3rem; padding:0 6vw;
  display:flex; align-items:center; gap:0.7rem;
}
.collection-search input{
  flex:1; background:rgba(243,236,221,0.06); border:1px solid rgba(201,162,75,0.3);
  color:var(--text-light); padding:0.8rem 1.1rem; border-radius:2px; font-size:0.95rem;
  font-family:'Lora','Noto Serif Devanagari',serif; outline:none; transition:border-color .2s;
}
.collection-search input:focus{border-color:var(--gold);}
.collection-search input::placeholder{color:var(--text-muted);}
.collection-search svg{width:18px; height:18px; color:var(--text-muted); flex:none;}

/* LIST VIEW (Rekhta-style preview cards) */
.poem-list{
  max-width:820px; margin:0 auto; padding:0 6vw 4vh;
  display:flex; flex-direction:column; gap:0.9rem;
}
.poem-item{
  background:rgba(243,236,221,0.045); border:1px solid rgba(201,162,75,0.18);
  border-left:3px solid rgba(201,162,75,0.3);
  border-radius:4px; padding:1.5rem 1.8rem; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
  text-decoration:none; color:inherit;
}
.poem-item:hover{background:rgba(201,162,75,0.09); border-color:rgba(201,162,75,0.45); border-left-color:var(--gold); transform:translateX(5px);}
.poem-item .poem-item-text{min-width:0;}
.poem-item .poem-item-num{
  font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--rose); font-family:'Lora'; font-weight:600; margin-bottom:0.4rem;
}
.poem-item .poem-item-line{
  font-size:1.2rem; color:var(--text-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.poem-item .poem-item-go{color:var(--gold); font-size:1.3rem; flex:none; transition:transform .2s ease;}
.poem-item:hover .poem-item-go{transform:translateX(4px);}
.no-results{display:none; text-align:center; color:var(--text-muted); font-size:0.95rem; padding:1.5rem 6vw 0.5rem; font-style:italic;}
.no-results.show{display:block;}

/* DETAIL VIEW — designed to feel like an open manuscript page, not a
   small floating box: wider column, generous inner room, soft parchment
   texture, ornamental corners instead of a plain inset rectangle. */
.poem-detail{
  max-width:880px; margin:0 auto; padding:1vh 5vw 14vh;
  display:none;
}
.poem-detail.open{display:block;}
.poem-list-wrap.hidden, .page-header.hidden, .collection-search.hidden{display:none;}
.back-link{
  display:inline-flex; align-items:center; gap:0.5rem; color:var(--gold-soft);
  text-decoration:none; font-size:0.9rem; letter-spacing:0.05em; margin-bottom:1.8rem;
  transition:gap .2s ease;
}
.back-link:hover{gap:0.8rem;}
.card{
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,0.55), transparent 40%),
    linear-gradient(165deg, #fdfaf2 0%, #f6efdd 45%, #efe3c4 100%);
  color:var(--text-dark);
  border-radius:6px;
  padding:3.4rem 3.2rem;
  position:relative;
  box-shadow:0 6px 16px rgba(0,0,0,0.2), 0 30px 60px rgba(0,0,0,0.38);
  border:1px solid rgba(201,162,75,0.3);
}
/* ornamental corner marks — a manuscript feel instead of a flat inset box */
.card::before, .card::after{
  content:""; position:absolute; width:34px; height:34px; pointer-events:none;
  border:1px solid rgba(161,92,92,0.4);
}
.card::before{ top:14px; left:14px; border-right:none; border-bottom:none; }
.card::after{ bottom:14px; right:14px; border-left:none; border-top:none; }
.card .kind{
  font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--rose); font-family:'Lora'; font-weight:600; margin-bottom:0.9rem;
}
.card h3{font-size:1.65rem; margin:0.3rem 0 1.3rem; color:var(--text-dark); font-weight:700; font-family:'Cormorant Garamond','Noto Serif Devanagari',serif;}
.card .verse{font-size:1.35rem; margin-bottom:1.9rem; line-height:2.1;}
.card .verse:last-child{margin-bottom:0;}
.card .verse .line{display:block;}
.card .nazm-line{font-size:1.25rem; margin-bottom:0.55rem;}
.card .nazm-line:last-child{margin-bottom:0;}

@media (max-width:640px){
  .card{padding:2.4rem 1.6rem;}
  .card .verse{font-size:1.15rem;}
}

.poem-nav-buttons{
  display:flex; justify-content:space-between; margin-top:1.6rem; gap:1rem;
}
.poem-nav-buttons a{
  flex:1; text-align:center; padding:0.9rem 1rem; border:1px solid rgba(201,162,75,0.3);
  color:var(--gold-soft); text-decoration:none; border-radius:2px; font-size:0.9rem;
  transition:all .2s ease;
}
.poem-nav-buttons a:hover{background:var(--gold); color:var(--ink-deep); border-color:var(--gold);}
.poem-nav-buttons a.disabled{opacity:0.3; pointer-events:none;}

/* SHARE + DOWNLOAD BUTTONS */
.share-btn, .download-btn{
  position:absolute; top:1.5rem; z-index:2;
  width:32px; height:32px; border-radius:50%; padding:0;
  border:1px solid rgba(161,92,92,0.28); background:transparent; color:var(--rose);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.share-btn{right:1.6rem;}
.download-btn{right:3.9rem;}
.share-btn:hover, .download-btn:hover{background:var(--rose); border-color:var(--rose); color:var(--paper); transform:scale(1.06);}
.share-btn svg, .download-btn svg{width:14px; height:14px;}
.download-btn.loading{pointer-events:none; opacity:0.6;}

/* EXPORT TEMPLATE (off-screen, used only for image generation) */
.export-stage{position:fixed; left:-9999px; top:0; z-index:-1; pointer-events:none;}
.export-card{
  width:760px;
  background:var(--paper);
  color:var(--text-dark);
  font-family:'Noto Serif Devanagari','Lora', serif;
  position:relative;
  padding:64px 66px 48px;
}
.export-card::before{
  content:"";
  position:absolute; top:18px; left:18px; right:18px; bottom:18px;
  border:1px solid rgba(161,92,92,0.25);
  pointer-events:none;
}
.export-kind{font-size:15px; letter-spacing:0.28em; text-transform:uppercase; color:var(--rose); font-family:'Lora'; font-weight:600; margin-bottom:16px;}
.export-title{font-size:32px; color:var(--text-dark); font-weight:700; margin-bottom:26px;}
.export-body .export-verse{font-size:25px; line-height:1.95; margin-bottom:32px;}
.export-body .export-verse .line{display:block;}
.export-body .export-verse:last-child{margin-bottom:0;}
.export-body .export-verse.nazm-line{font-size:22px; line-height:1.85; margin-bottom:14px;}
.export-footer{
  margin-top:48px; padding-top:26px; border-top:1px solid rgba(161,92,92,0.25);
  display:flex; justify-content:space-between; align-items:baseline;
}
.export-brand{font-size:19px; color:var(--text-dark); font-weight:700; letter-spacing:0.02em;}
.export-tag{font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--rose); font-family:'Lora'; font-weight:600;}

/* CONTACT PAGE */
.contact-page{max-width:600px; margin:0 auto; padding:2vh 6vw 14vh; text-align:center;}
.contact-page p{color:var(--text-muted); max-width:480px; margin:0 auto 2.4rem; font-size:1.05rem;}
.contact-links{display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap;}
.contact-links a{
  border:1px solid rgba(201,162,75,0.4); padding:0.9rem 2rem; border-radius:2px;
  text-decoration:none; font-size:0.95rem; letter-spacing:0.05em;
  color:var(--gold-soft); transition:all .25s; display:inline-flex; align-items:center; gap:0.6rem;
}
.contact-links a:hover{background:var(--gold); color:var(--ink-deep); border-color:var(--gold);}
.contact-links svg{width:16px; height:16px;}

/* FOOTER */
footer.site-footer{
  text-align:center; padding:6vh 6vw 5vh; background:var(--ink-deep); position:relative; z-index:1;
  border-top:1px solid rgba(201,162,75,0.1);
}
footer.site-footer .fineprint{font-size:0.75rem; color:#5c5646; letter-spacing:0.1em; margin-bottom:0.6rem;}
footer.site-footer .foot-links{display:flex; justify-content:center; gap:1.2rem; font-size:0.8rem;}
footer.site-footer .foot-links a{color:var(--text-muted); text-decoration:none;}
footer.site-footer .foot-links a:hover{color:var(--gold-soft);}

/* TOAST */
#site-toast{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(16px);
  background:var(--gold-soft); color:var(--ink-deep); padding:10px 22px; border-radius:3px;
  font-size:0.85rem; letter-spacing:0.02em; font-family:'Lora',serif; opacity:0; pointer-events:none;
  z-index:100; transition:opacity .3s ease, transform .3s ease;
}
#site-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

.icon-btn:focus-visible, .share-btn:focus-visible, .download-btn:focus-visible, .collection-search input:focus-visible, .nav-card:focus-visible, .poem-item:focus-visible, .sher-btn:focus-visible, .sher-source:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}

@media (max-width:720px){
  .poem-item{padding:1.2rem 1.3rem;}
  .poem-item .poem-item-line{font-size:1.05rem;}
  .download-btn{right:3.7rem;}
}