/* =========================================================
   Srivaaram (శ్రీవారం) — Magazine site
   Original design, inspired by traditional Telugu monthly
   magazine mastheads (reference layout: logo bar + nav,
   3-column ad rails flanking a central page-flip reader,
   archive strip below).
   ========================================================= */

:root{
  --maroon: #7a1220;
  --maroon-dark: #55090f;
  --saffron: #e8a33d;
  --saffron-light: #f6d9a4;
  --gold: #c8963c;
  --cream: #fdf6ec;
  --cream-2: #fbefd8;
  --ink: #2b1a10;
  --ink-soft: #5c4632;
  --white: #ffffff;
  --shadow: 0 6px 18px rgba(90, 40, 10, 0.12);
  --shadow-lg: 0 14px 40px rgba(90, 40, 10, 0.18);
  --radius: 10px;
  --font-te: 'Noto Sans Telugu', 'Noto Sans', sans-serif;
  --font-en: 'Poppins', 'Noto Sans', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
/* The header is sticky, so an anchor jump would otherwise land with the
   section title hidden underneath it. */
[id]{scroll-margin-top:120px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}
body{
  font-family: var(--font-te);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.container{
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ================= HEADER ================= */
.site-header{
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow);
}
.header-top{
  background: linear-gradient(90deg, var(--maroon-dark), var(--maroon) 55%, var(--maroon-dark));
  color: var(--saffron-light);
  font-size: 0.8rem;
}
.header-top-inner{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 6px 20px;
  gap: 12px;
}
.header-tagline{
  font-weight:500;
  letter-spacing:.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-date{
  font-family: var(--font-en);
  font-weight:500;
  opacity:.9;
  white-space:nowrap;
}
.header-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 20px;
  gap: 20px;
  border-bottom: 3px solid var(--saffron);
}
.brand{display:flex; align-items:center;}
.brand-logo{
  height: 58px;
  width:auto;
  object-fit: contain;
}
.main-nav{
  display:flex;
  gap: 28px;
  font-weight:600;
  font-size: 1.02rem;
}
.main-nav a{
  color: var(--maroon-dark);
  position:relative;
  padding: 6px 2px;
  transition: color .2s ease;
}
.main-nav a:hover,
.main-nav a.active{ color: var(--gold); }
.main-nav a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:3px;
  background: var(--saffron);
  border-radius: 2px;
}
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding: 6px;
}
.nav-toggle span{
  width:26px; height:3px;
  background: var(--maroon-dark);
  border-radius:2px;
}

/* ================= MAGAZINE LAYOUT ================= */
.magazine-layout{
  display:grid;
  grid-template-columns: 170px minmax(0,1fr) 170px;
  gap: 22px;
  padding: 28px 20px 10px;
  align-items:start;
}
.ad-rail{
  display:flex;
  flex-direction:column;
  gap: 18px;
  position: sticky;
  top: 110px;
}
.ad-slot{
  display:block;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid #eadfc9;
  transition: transform .2s ease, box-shadow .2s ease;
  aspect-ratio: 3/4;
}
.ad-slot img{ width:100%; height:100%; object-fit: cover; }
/* Google AdSense slots — let the ad fill the rail width, no fixed aspect ratio */
.ad-slot-google{
  aspect-ratio: auto;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-slot-google ins{ width:100%; }
/* Only lift the slot when it is actually a link to somewhere. */
a.ad-slot:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.reader-column{ min-width:0; }
.reader-heading{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.reader-heading h1{
  font-size: 1.4rem;
  color: var(--maroon-dark);
  margin: 0;
}
.issue-subtitle{
  display:block;
  font-family: var(--font-en);
  font-weight:500;
  font-size:.7em;
  opacity:.75;
}
.reader-toolbar{
  display:flex;
  align-items:center;
  gap: 6px;
  background: var(--white);
  padding: 6px 10px;
  border-radius: 30px;
  box-shadow: var(--shadow);
}
.tool-btn{
  border:none;
  background: var(--cream-2);
  color: var(--maroon-dark);
  width: 34px; height:34px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size: 1rem;
  transition: background .2s ease, color .2s ease;
}
.tool-btn:hover{ background: var(--saffron); color: var(--white); }
.tool-btn-download{ background: var(--maroon); color: var(--white); }
.tool-btn-download:hover{ background: var(--gold); }
.page-indicator{
  font-family: var(--font-en);
  font-weight:600;
  color: var(--ink-soft);
  padding: 0 6px;
  font-size: .9rem;
  white-space:nowrap;
}
.toolbar-sep{
  width:1px; height:22px;
  background: #e4d6b8;
  margin: 0 4px;
}

.flipbook-stage{
  position:relative;
  background: linear-gradient(160deg, #fffaf0, #f4e6c8);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 22px;
  min-height: 480px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid #ecdcb6;
}
.flipbook{ width:100%; }
.flipbook canvas{ border-radius: 4px; }

.loader{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  color: var(--maroon-dark);
  font-weight:600;
  background: rgba(253,246,236,.92);
  border-radius: 14px;
}
.loader.hidden{ display:none; }
.loader-spinner{
  width:44px; height:44px;
  border: 4px solid var(--saffron-light);
  border-top-color: var(--maroon);
  border-radius:50%;
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.reader-hint{
  text-align:center;
  color: var(--ink-soft);
  font-size: .85rem;
  margin-top: 10px;
}

/* ---- StPageFlip, HTML mode -------------------------------------------
   These rules ship with the library (src/Style/stPageFlip.css) and are
   REQUIRED in HTML mode — without .stf__item{display:none;position:absolute}
   every page renders stacked in the document flow instead of as a book.
   They were previously omitted because the reader used canvas mode, which
   needs no stylesheet. */
.stf__parent{
  position: relative;
  display: block;
  box-sizing: border-box;
  transform: translateZ(0);
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.sft__wrapper{ position: relative; width: 100%; box-sizing: border-box; }
.stf__parent canvas{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.stf__block{
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  perspective: 2000px;
}
.stf__item{ display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow,
.stf__innerShadow,
.stf__hardShadow,
.stf__hardInnerShadow{ position: absolute; left: 0; top: 0; }

/* ---- Our page leaves -------------------------------------------------- */
.page{
  background: #fff;
  overflow: hidden;
}
.page img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
  user-select: none;
  -webkit-user-drag: none;
}
/* A leaf whose image has not been fetched yet (or was released to save
   memory) should read as blank paper, not as a broken image. */
.page img:not([src]){
  background: linear-gradient(160deg, #fffdf8, #f7efdd);
}

/* ================= ARCHIVE ================= */
.archive-section{ padding: 20px 20px 46px; margin-top: 0; }
.section-title{
  font-size: 1.5rem;
  color: var(--maroon-dark);
  border-left: 6px solid var(--saffron);
  padding-left: 14px;
  margin-bottom: 26px;
}
.section-title span{
  display:block;
  font-family: var(--font-en);
  font-size: .8rem;
  font-weight:500;
  color: var(--ink-soft);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}
/* Centred, and with the column width capped.
   auto-fill + 1fr stretched three cards across a 1320px container and left a
   large dead gap on the right, which read as an unfinished section. auto-fit
   with a max track width keeps the cards a sensible size and
   justify-content:center balances however many issues there happen to be. */
.archive-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  gap: 26px;
  justify-content: center;
}
.archive-card{
  background: var(--white);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  border: 1px solid #f0e3c6;
  cursor:pointer;
}
.archive-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* The cards are keyboard-operable (role="button" tabindex="0"), so they need
   a visible focus ring. */
.archive-card:focus-visible,
.tool-btn:focus-visible,
.main-nav a:focus-visible,
.brand:focus-visible{
  outline: 3px solid var(--maroon);
  outline-offset: 2px;
}
/* Real cover thumbnails, now that pages are pre-rendered. This replaced a book
   emoji that rendered as an empty box wherever no emoji font was installed.
   The cover is shown whole and centred inside padding rather than cropped to
   fill the tile, so no part of the masthead or artwork is cut off. */
.archive-thumb{
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, var(--saffron-light), var(--cream-2));
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
  overflow: hidden;
}
.archive-thumb img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 3px;
  box-shadow: 0 3px 12px rgba(90, 40, 10, .28);
  background: #fff;
}
/* Applied by JS if a cover image fails to load, so the tile shows the masthead
   instead of an empty frame. */
.archive-thumb-fallback img{
  max-width: 70%;
  box-shadow: none;
  background: transparent;
}
.archive-info{ padding: 12px 14px; }
.archive-info h4{ margin:0 0 4px; font-size: .98rem; color: var(--maroon-dark); }
.archive-info p{ margin:0; font-size: .8rem; color: var(--ink-soft); font-family: var(--font-en); }

/* ================= ABOUT ================= */
.about-section{ background: var(--cream-2); padding: 46px 20px; }
.about-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.about-card{
  background: var(--white);
  padding: 22px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 4px solid var(--saffron);
}
.about-card h3{ margin:0 0 8px; color: var(--maroon-dark); }
.about-card p{ margin:0; color: var(--ink-soft); font-size: .95rem; }

/* ================= CONTACT ================= */
.contact-section{ padding: 46px 20px 60px; }
.contact-box{
  background: linear-gradient(120deg, var(--maroon), var(--maroon-dark));
  color: var(--saffron-light);
  padding: 30px;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.contact-line{ font-size:1.05rem; margin-top:10px; }
.contact-line a{ color: var(--white); font-weight:600; }

/* ================= FOOTER ================= */
.site-footer{
  background: var(--maroon-dark);
  color: #e9d6bb;
  padding: 22px 20px;
}
.footer-inner{
  display:flex;
  align-items:center;
  gap: 14px;
  justify-content:center;
  flex-wrap:wrap;
  font-size: .88rem;
}
.footer-logo{ height:34px; filter: brightness(1.4); }

/* ================= FULLSCREEN OVERLAY ================= */
.fs-overlay{
  position:fixed; inset:0;
  background: rgba(20,10,5,.95);
  z-index: 1000;
  display:none;
  align-items:center;
  justify-content:center;
}
.fs-overlay.open{ display:flex; }
.fs-close{
  position:absolute; top:16px; right:20px;
  background:none; border:none;
  color:#fff; font-size:2rem;
  cursor:pointer;
  z-index: 1001;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  .magazine-layout{
    grid-template-columns: 1fr;
  }
  /* Put the magazine first on narrow screens.
     The ad rails used to stack above the reader, which pushed the issue itself
     below the fold AND — because they are in the initial viewport — made the
     browser fetch ~1.5 MB of advertisement artwork before it would start on the
     first page. On a slow connection that alone delayed the cover by tens of
     seconds. Below the reader they load only once scrolled to, so both the
     magazine and the ads arrive sooner. */
  .reader-column{ order: -1; }
  .ad-rail{
    position: static;
    flex-direction: row;
    overflow-x:auto;
    padding-bottom: 4px;
    margin-top: 18px;
  }
  .ad-slot{ min-width: 140px; flex: 0 0 140px; }
}
@media (max-width: 620px){
  /* One card per row on a phone, so let the cover use more of the width than
     the 240px desktop cap allows. */
  .archive-grid{ grid-template-columns: minmax(200px, 300px); }
}
@media (max-width: 760px){
  .main-nav{
    display:none;
    position:absolute;
    top: 100%; left:0; right:0;
    background: var(--white);
    flex-direction:column;
    padding: 14px 20px;
    gap: 14px;
    box-shadow: var(--shadow-lg);
  }
  .main-nav.open{ display:flex; }
  .nav-toggle{ display:flex; }
  .header-main{ position:relative; }
  .header-tagline{ font-size: .68rem; }
  .reader-heading h1{ font-size: 1.15rem; }
  .flipbook-stage{ padding: 12px; min-height: 340px; }
}