/* ====================================================
     Alice — design tokens
     Color:
       --ochre        #E7D9B8  page ground
       --ochre-deep   #D9C49C  panel / sidebar ground
       --ink          #2A2520  primary text, near-black umber
       --ink-soft     #6b6155  secondary text
       --sienna       #A4582E  accent, etching-plate rust
       --line         #c7b48a  hairline rule
       --paper        #F4ECDA  lifted surface (poem card)
     Type:
       display — Cormorant Garamond italic, the magazine's voice
       body    — EB Garamond, for editor's note & poems
       label   — Work Sans, tracked caps, for UI scaffolding
  ==================================================== */

  :root{
    --ochre:#E7D9B8;
    --ochre-deep:#DCC79E;
    --ink:#2A2520;
    --ink-soft:#766b5b;
    --sienna:#A4582E;
    --line:#c6b186;
    --paper:#F4ECDA;
    /* landing page */
    --purple:#D4DF00;
    --alice-blue:#707090;
    --lp-dark:#18162A;
    --lp-accent:#18162A;
  }

  *{ box-sizing:border-box; }

  html,body{
    margin:0;
    padding:0;
    background:var(--ochre);
    color:var(--ink);
    font-family:'EB Garamond', serif;
    -webkit-font-smoothing:antialiased;
  }

  body.landing{
    background:var(--purple);
    font-family:'Space Mono', monospace;
    overflow:hidden;
    height:100vh;
  }

  ::selection{ background:var(--sienna); color:var(--paper); }

  a{ color:inherit; text-decoration:none; }

  button{ font-family:inherit; background:none; border:none; cursor:pointer; color:inherit; }

  .label{
    font-family:'Work Sans', sans-serif;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }

  /* ---------------- view switching ---------------- */
  .view{ display:none; }
  .view.active{ display:block; }

  /* ==================================================
     LANDING PAGE  (index.html)  —  yellow edition
     body.landing / .lp-* namespace
  ================================================== */

  .lp-page{
    position:relative;
    min-height:100vh;
    display:grid;
    grid-template-rows:auto 1fr;
    overflow:hidden;
  }

  /* Artwork fills the entire viewport.
     object-position: center bottom keeps the horse anchored
     to the bottom edge so it always occupies the same lower
     portion of the page as the browser is resized. */
  .lp-bg{
    position:absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events:none;
    z-index:0;
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
  }

  .lp-bg img{
    width:100%;
    height:100%;
    object-fit:fill;
    opacity:1;
  }

  @media (max-width: 768px) {
    .lp-bg img{
      width:auto;
      height:100%;
      object-fit:cover;
      opacity:.75;
    }
  }

  .lp-header,
  .lp-main{ position:relative; z-index:1; }

  /* ── Header ───────────────────────────────────── */
  .lp-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 40px;
    height:var(--hh);
  }

  .lp-logo{
    font-family:'Space Mono', monospace;
    font-size:22px;
    font-weight:400;
    letter-spacing:0.06em;
    color:var(--lp-dark);
  }

  .lp-pipe{ font-weight:400; }

  /* Logo image */
  .lp-circles img{
    display:block;
    width:88px;
    height:88px;
    object-fit:cover;
  }

  /* ── Main two-column layout ───────────────────── */
  .lp-main{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:start;
    gap:clamp(20px,3.5vw,56px);
    padding:clamp(80px,12vh,160px) 10% clamp(16px,3vh,40px) clamp(20px,4vw,56px);
  }

  /* ── Left nav ─────────────────────────────────── */
  .lp-left-nav{
    display:flex;
    flex-direction:column;
    gap:clamp(10px,1.4vh,18px);
    align-self:start;
  }

  .lp-left-nav a{
    font-family:'Space Mono', monospace;
    font-size:clamp(11px,1.05vw,14px);
    font-weight:400;
    letter-spacing:0.04em;
    color:var(--lp-accent);
    opacity:0.85;
  }

  .lp-left-nav a:hover{ opacity:1; text-decoration:underline; text-underline-offset:3px; }

  /* ── Issue panel ──────────────────────────────── */
  .lp-issue-panel{ padding-top:0; text-align:right; }

  .lp-issue-label{
    font-family:'Space Mono', monospace;
    font-size:clamp(10px,1vw,13px);
    font-weight:700;
    letter-spacing:0.22em;
    color:var(--lp-accent);
    margin-bottom:14px;
  }

  .lp-issue-rule{
    width:90px;
    border:none;
    border-top:1.5px solid var(--lp-accent);
    opacity:0.5;
    margin-left:auto;
    margin-bottom:22px;
  }

  .lp-poet-list{
    list-style:none;
    padding:0;
    margin:0 0 32px;
  }

  .lp-poet-list li{
    font-family:'Space Mono', monospace;
    font-size:clamp(10px,0.95vw,13px);
    letter-spacing:0.03em;
    color:var(--lp-dark);
    line-height:2.1;
  }

  .lp-loading{ opacity:0.4; }

  .lp-view-issue{
    display:inline-block;
    font-family:'Space Mono', monospace;
    font-size:clamp(10px,0.9vw,12px);
    font-weight:700;
    letter-spacing:0.2em;
    color:var(--lp-accent);
    text-transform:uppercase;
  }

  .lp-view-issue:hover{
    text-decoration:underline;
    text-underline-offset:3px;
  }

  /* ── Stack columns on narrow screens ─────────── */
  @media (max-width:900px){
  }

  /* ==================================================
     MAIN VIEW
  ================================================== */
  #view-main{
    min-height:100vh;
    display:grid;
    grid-template-columns:280px 1fr;
  }

  /* ---- sidebar ---- */
  .sidebar{
    background:var(--ochre-deep);
    border-right:1px solid var(--line);
    padding:36px 28px 28px;
    min-height:100vh;
  }

  .sidebar-brand{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-bottom:6px;
    cursor:pointer;
    width:fit-content;
  }

  .sidebar-brand .mark{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-weight:600;
    font-size:30px;
  }

  .sidebar-tag{
    font-family:'Work Sans', sans-serif;
    font-size:10.5px;
    letter-spacing:0.1em;
    color:var(--ink-soft);
    margin-bottom:34px;
  }

  .issues-label{
    margin-bottom:14px;
  }

  .issue-block{
    border-top:1px solid var(--line);
  }
  .issue-block:last-child{
    border-bottom:1px solid var(--line);
  }

  .issue-head{
    width:100%;
    text-align:left;
    padding:14px 2px;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    font-family:'EB Garamond', serif;
  }

  .issue-head .num{
    font-family:'Work Sans', sans-serif;
    font-size:10px;
    letter-spacing:0.08em;
    color:var(--ink-soft);
    margin-right:10px;
  }

  .issue-head .name{
    font-size:18px;
    flex:1;
  }

  .issue-head .chev{
    font-size:13px;
    color:var(--ink-soft);
    transition:transform .35s ease;
  }
  .issue-block.open .issue-head .chev{ transform:rotate(90deg); }

  .issue-head:hover .name{ color:var(--sienna); }

  .poet-list{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
  }
  .issue-block.open .poet-list{
    max-height:400px;
  }

  .poet-item{
    display:block;
    width:100%;
    text-align:left;
    padding:8px 2px 8px 18px;
    font-style:italic;
    font-size:15.5px;
    color:var(--ink-soft);
    border-left:1px solid transparent;
  }
  .poet-item:hover{
    color:var(--ink);
  }
  .poet-item.active{
    color:var(--sienna);
    border-left:1px solid var(--sienna);
  }

  /* ---- center content ---- */
  .content{
    padding:64px 72px;
    max-width:760px;
  }

  .content-eyebrow{
    margin-bottom:18px;
  }

  .content-title{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-weight:500;
    font-size:46px;
    line-height:1.1;
    margin:0 0 28px;
  }

  .content-meta{
    font-family:'Work Sans', sans-serif;
    font-size:11px;
    letter-spacing:0.08em;
    color:var(--ink-soft);
    margin-bottom:36px;
    text-transform:uppercase;
  }

  .prose{
    font-size:19px;
    line-height:1.75;
    color:var(--ink);
  }

  .prose p{ margin:0 0 22px; }

  .poem-text{
    font-size:19px;
    line-height:1.95;
    white-space:pre-wrap;
    color:var(--ink);
    font-family:'EB Garamond', serif;
  }

  .signature{
    margin-top:48px;
    font-style:italic;
    color:var(--ink-soft);
  }

  .fade{
    animation:fadeIn .5s ease;
  }
  @keyframes fadeIn{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* responsive */
  @media (max-width: 760px){
    #view-main{ grid-template-columns:1fr; }
    .sidebar{ min-height:auto; border-right:none; border-bottom:1px solid var(--line); }
    .content{ padding:40px 24px; }
    .content-title{ font-size:34px; }

    /* landing page columns stack at 900px — see block above */
  }

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--sienna);
    outline-offset:2px;
  }

/* ==========================================================
   ISSUES PAGE — inline styles override everything in style.css
   Variables are re-declared here so this file is self-sufficient
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --yellow: #D4DF00;
  --tofu:   #E8E4DA;
  --ink:    #18162A;
  --muted:  #1e69cc;
  --hh:     68px;   /* header height */
  --fh:     50px;   /* footer height */
}

html {
  scroll-behavior: smooth;
}

body.issues-page {
  margin: 0;
  padding: 0;
  /* px-based stops so the gradient always completes within the top padding,
     regardless of how tall the section grows with poem content */
  background: linear-gradient(
    to bottom,
    #D4DF00   0px,
    #D4DF00  240px,
    #E8E4DAcc 1060px,
    #e8e4dacc 100%
  );
  font-family: 'Space Mono', 'Courier New', monospace;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  /* space for fixed header + footer */
  padding-top: var(--hh);
  padding-bottom: var(--fh);
}

a { color: inherit; text-decoration: none; }

/* ── Fixed header ──────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--hh);
  z-index: 500;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}

.site-logo {
  font-family: 'Space Mono', monospace;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
}

/* Logo image — constrained both in the container AND the img */
.site-logo-mark {
  display: block;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  overflow: hidden;
}
.site-logo-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Main scrollable content ───────────────────────────── */
.issues-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(48px, 7vh, 90px) clamp(24px, 5vw, 80px) 0;
}

/* ── Issue meta ────────────────────────────────────────── */
.issue-meta {
  margin-bottom: clamp(40px, 6vh, 72px);
}

.iss-num {
  font-family: 'Space Mono', monospace;
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--ink);
  margin-bottom: 6px;
}

.iss-date {
  font-family: 'Space Mono', monospace;
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--muted);
}

/* ── Contributors section ──────────────────────────────── */
.contributors-section {
  margin-bottom: clamp(40px, 6vh, 72px);
}

.contributors-label {
  font-family: 'Space Mono', monospace;
  font-size: clamp(9px, 0.82vw, 11px);
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--muted);
  margin-bottom: clamp(18px, 3vh, 30px);
}

/* Two-column grid; stacks to one column on mobile */
.contributors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1vw, 14px);
}

@media (max-width: 640px) {
  .contributors-grid { grid-template-columns: 1fr; }
}

/* Each poet box */
.contrib-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 2.4vh, 28px) clamp(18px, 1.8vw, 28px);
  border: 1.5px solid #18162A;
  background: transparent;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}

.contrib-box:hover {
  background: rgba(24, 22, 42, 0.05);
}

.contrib-info {
  flex: 1;
  min-width: 0;
}

.contrib-name {
  font-family: 'Space Mono', monospace;
  font-size: clamp(10px, 0.95vw, 13px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #18162A;
  margin-bottom: 10px;
}

.contrib-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contrib-circles {
  font-size: clamp(9px, 0.85vw, 12px);
  letter-spacing: 0.1em;
  color: #18162A;
}

.contrib-count {
  font-family: 'Space Mono', monospace;
  font-size: clamp(8px, 0.7vw, 10px);
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}

.contrib-arrow {
  font-size: clamp(14px, 1.2vw, 20px);
  color: #18162A;
  flex-shrink: 0;
  margin-left: 20px;
}

.iss-loading, .iss-error {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 20px 0;
}

/* ── Poems section — gradient yellow → tofu ────────────── */
.poems-section {
  width: 100%;
  padding: clamp(300px, 35vh, 480px) 0 clamp(100px, 14vh, 200px);
}

.poems-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 80px);
}

@media (max-width: 640px) {
  .poems-inner {
    padding-left: 40px;
    padding-right: 24px;
  }
}
/* ── Per-poet block ────────────────────────────────────── */
.poet-poems {
  padding-top: clamp(48px, 7vh, 96px);
  margin-bottom: clamp(72px, 11vh, 144px);
  border-top: 1px solid rgba(24, 22, 42, 0.18);
  scroll-margin-top: calc(var(--hh) + 36px);
}

.poet-poems:first-child {
  border-top: none;
  padding-top: 0;
}

.poet-byline {
  font-family: 'Space Mono', monospace;
  font-size: clamp(13px, 1.2vw, 17px);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #18162A;
  margin-bottom: clamp(40px, 6vh, 72px);
}

/* ── Individual poem ───────────────────────────────────── */
.poem-entry {
  margin-bottom: clamp(64px, 9vh, 112px);
}

.poem-num {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 24px;
}

.poem-body {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.95;
  color: #18162A;
}

/* ── Fixed footer ──────────────────────────────────────── */
.site-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--fh);
  z-index: 500;
  background: var(--yellow);
  border-top: 1px solid rgba(24, 22, 42, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 60px);
  /* Promotes the footer to its own GPU layer so Chrome on iOS
     keeps it locked to the bottom during scroll momentum,
     preventing the gap that appears when the browser UI collapses. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

/* Extends the footer background far below the screen edge so that
   any gap revealed when Chrome's bottom toolbar slides away is always
   filled — the extra height is invisible beyond the physical screen. */
.site-footer::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(env(safe-area-inset-bottom, 0px) + 200px);
  background: var(--yellow);
}

.footer-link {
  font-family: 'Space Mono', monospace;
  font-size: clamp(9px, 0.8vw, 11px);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ISSUE INDEX link: hidden until poems section is visible */
.footer-index-wrap {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.footer-index-wrap.visible {
  opacity: 1;
  pointer-events: auto;
}