/* Dynasty Library — THE FOUR PUBLICATIONS portfolio.
   One parent object. Four permanent publication areas. Issues accumulate
   inside each lane. The founding covers are permanent brand doors; issue
   covers change behind the door.

   Scoped entirely under .portfolio / .parea so nothing here can reach the
   book shelves, the card gate, or the Return Desk. Tokens come from
   library.css (:root) — this file adds no new palette. */

/* ------------------------------------------------------------------ */
/* LEVEL 1 — the portfolio folder                                      */
/* ------------------------------------------------------------------ */

.portfolio{
  margin-top:56px;
  border:1px solid var(--edge);
  border-radius:6px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(245,158,11,.05) 0%, rgba(245,158,11,0) 60%),
    linear-gradient(180deg,#101010 0%,#0b0b0b 100%);
}

/* Folder tab — the visual cue that this is one object holding others. */
.portfolio-tab{
  display:flex;align-items:center;gap:10px;
  padding:12px 22px;
  border-bottom:1px solid var(--edge);
  font-family:'BarlowCondensed';font-weight:700;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);
}
.portfolio-tab .tab-mark{
  width:22px;height:14px;border-radius:2px 2px 0 0;
  border:1px solid var(--amber-soft);border-bottom:0;
  background:rgba(245,158,11,.12);
  flex:0 0 auto;
}
.portfolio-tab .tab-sep{color:var(--slate)}
.portfolio-tab span{white-space:nowrap}
/* Narrow phones: let the folder tab wrap between segments, never mid-phrase. */
@media (max-width:600px){
  .portfolio-tab{
    flex-wrap:wrap;row-gap:2px;gap:8px;
    padding:11px 16px;
    font-size:10px;letter-spacing:.14em;
  }
  .portfolio-tab .tab-sep{display:none}
}

.portfolio-head{padding:30px 22px 4px;text-align:center}
.portfolio-head h2{
  font-family:'ArchivoBlack';
  font-size:clamp(26px,3.6vw,40px);
  line-height:1.06;letter-spacing:-.01em;
  color:var(--off);
}
.portfolio-head h2 .amber{color:var(--amber)}
.portfolio-head .portfolio-sub{
  font-family:'Spectral';font-size:16px;line-height:1.55;
  color:var(--bone);
  max-width:52ch;margin:14px auto 0;
}
.portfolio-rule{
  width:80px;height:1px;background:var(--amber-soft);
  margin:22px auto 0;opacity:.7;
}

/* The unified four-cover face. Same frame, same scale, same visual world. */
.portfolio-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;padding:28px 22px 8px;
}
@media (max-width:900px){.portfolio-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (max-width:460px){.portfolio-row{grid-template-columns:1fr}}

.pub-door{
  display:flex;flex-direction:column;
  color:var(--bone);
  transition:transform .16s ease;
}
.pub-door:hover,.pub-door:focus-visible{color:var(--bone)}
.pub-door:hover .pub-cover,
.pub-door:focus-visible .pub-cover{
  border-color:var(--amber-soft);
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}
.pub-door:hover{transform:translateY(-3px)}
.pub-door:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:4px}

/* Identical frame on all four — this is the coordinated-system requirement. */
.pub-cover{
  position:relative;
  aspect-ratio:790/1162;
  border:1px solid var(--edge);
  border-radius:3px;
  background:#050505;
  overflow:hidden;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.pub-cover img{width:100%;height:100%;object-fit:cover;display:block}

.pub-flag{
  position:absolute;left:0;bottom:0;right:0;
  padding:7px 10px;
  background:linear-gradient(180deg,rgba(5,5,5,0) 0%,rgba(5,5,5,.92) 55%);
  font-family:'BarlowCondensed';font-weight:700;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ok);
  text-align:center;
}
.pub-flag.soon{color:var(--amber)}

.pub-label{padding:12px 2px 0}
.pub-label .pub-name{
  display:block;
  font-family:'ArchivoBlack';font-size:15px;line-height:1.2;
  color:var(--off);letter-spacing:-.01em;
}
.pub-label .pub-lens{
  display:block;
  font-family:'BarlowCondensed';font-weight:600;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin-top:5px;
}
.pub-label .pub-enter{
  font-family:'BarlowCondensed';font-weight:700;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);margin-top:8px;display:block;
}
.pub-door.soon .pub-label .pub-enter{color:var(--mute)}

.portfolio-foot{
  padding:18px 22px 22px;
  border-top:1px solid var(--edge);
  margin-top:20px;
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  font-family:'BarlowCondensed';font-weight:600;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);
}
.portfolio-foot .foot-right{color:var(--amber-soft)}

/* ------------------------------------------------------------------ */
/* LEVEL 2 — a publication area page                                   */
/* ------------------------------------------------------------------ */

.parea-crumb{
  padding:26px 0 0;
  font-family:'BarlowCondensed';font-weight:600;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);
}
.parea-crumb a{color:var(--mute)}
.parea-crumb a:hover{color:var(--amber)}
.parea-crumb .sep{color:var(--slate);padding:0 8px}

.parea-head{
  display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:40px;align-items:start;
  padding:30px 0 44px;
  border-bottom:1px solid var(--edge);
}
@media (max-width:820px){
  .parea-head{grid-template-columns:1fr;gap:28px}
  .parea-door{max-width:280px}
}

.parea-door{
  border:1px solid var(--edge);border-radius:3px;
  background:#050505;overflow:hidden;
}
.parea-door img{width:100%;height:auto;aspect-ratio:790/1162;object-fit:cover;display:block}
.parea-door figcaption{
  padding:9px 10px;
  border-top:1px solid var(--edge);
  font-family:'BarlowCondensed';font-weight:700;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);text-align:center;
}

.parea-meta .eyebrow{margin-bottom:14px}
.parea-meta h1{
  font-family:'ArchivoBlack';
  font-size:clamp(30px,4.6vw,52px);
  line-height:1.04;letter-spacing:-.015em;
  color:var(--off);
}
.parea-meta .parea-lede{
  font-family:'Spectral';font-size:clamp(16px,1.8vw,19px);
  line-height:1.6;color:var(--bone);
  margin-top:18px;max-width:58ch;
}
.parea-facts{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:22px;
  font-family:'BarlowCondensed';font-weight:600;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);
}
.parea-facts .dot{color:var(--slate)}

/* Section scaffolding inside an area */
.parea-section{padding:44px 0 0}
.parea-section > h2{
  font-family:'ArchivoBlack';font-size:22px;color:var(--off);
  letter-spacing:-.01em;
}
.parea-section > .section-meta{
  font-family:'BarlowCondensed';font-weight:600;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin-top:7px;
}

/* Current issue — always first inside the lane. */
.issue-lead{
  display:grid;grid-template-columns:220px minmax(0,1fr);
  gap:28px;align-items:start;
  margin-top:22px;padding:22px;
  border:1px solid var(--edge);border-radius:5px;
  background:var(--near);
}
@media (max-width:700px){
  .issue-lead{grid-template-columns:1fr;gap:20px}
  .issue-lead .issue-cover{max-width:220px}
}
.issue-cover{
  border:1px solid var(--edge);border-radius:3px;
  overflow:hidden;background:#050505;
}
.issue-cover img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}
.issue-body h3{
  font-family:'ArchivoBlack';font-size:21px;color:var(--off);
  letter-spacing:-.01em;line-height:1.18;
}
.issue-body .issue-kicker{
  font-family:'BarlowCondensed';font-weight:700;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--amber);
  margin-bottom:8px;
}
.issue-body p{
  font-family:'Spectral';font-size:15px;line-height:1.6;
  color:var(--bone);margin-top:10px;
}
.issue-body .issue-meta{
  font-family:'BarlowCondensed';font-weight:600;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;
}
.issue-body .issue-meta .dot{color:var(--slate)}
.issue-open{
  display:inline-block;margin-top:16px;
  border:1px solid var(--amber);border-radius:2px;
  padding:9px 16px;
  font-family:'BarlowCondensed';font-weight:700;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);
}
.issue-open:hover{background:rgba(245,158,11,.1);color:var(--off)}

/* Issue ledger — what is published, what is next, what is held. */
.issue-ledger{
  margin-top:22px;border:1px solid var(--edge);border-radius:5px;
  overflow:hidden;
}
.issue-ledger .lrow{
  display:grid;grid-template-columns:110px minmax(0,1fr) 130px;
  gap:16px;align-items:baseline;
  padding:14px 18px;
  border-bottom:1px solid var(--edge);
}
.issue-ledger .lrow:last-child{border-bottom:0}
.issue-ledger .lrow.head{
  background:#101010;
  font-family:'BarlowCondensed';font-weight:700;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);
}
.issue-ledger .lno{
  font-family:'BarlowCondensed';font-weight:700;
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone);
}
.issue-ledger .ltitle{
  font-family:'Spectral';font-size:15px;line-height:1.45;color:var(--bone);
}
.issue-ledger .ltitle a{color:var(--amber)}
.issue-ledger .lstate{
  font-family:'BarlowCondensed';font-weight:700;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);
}
.issue-ledger .lstate.live{color:var(--ok)}
.issue-ledger .lstate.soon{color:var(--amber)}
@media (max-width:640px){
  .issue-ledger .lrow{grid-template-columns:1fr;gap:6px}
  .issue-ledger .lrow.head{display:none}
}

/* Honest empty state — no invented archive. */
.lane-note{
  margin-top:20px;padding:18px 20px;
  border:1px dashed var(--edge);border-radius:5px;
  font-family:'Spectral';font-size:15px;line-height:1.6;
  color:var(--mute);
}

/* Sibling areas — keeps the portfolio reachable from inside any lane. */
.parea-siblings{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;margin-top:22px;
}
@media (max-width:820px){.parea-siblings{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.parea-siblings{grid-template-columns:1fr}}
.sib{
  display:flex;gap:12px;align-items:center;
  padding:10px;border:1px solid var(--edge);border-radius:4px;
  background:var(--near);
  transition:border-color .15s ease;
}
.sib:hover{border-color:var(--amber-soft)}
.sib img{width:44px;height:auto;border-radius:2px;display:block;flex:0 0 auto}
.sib > span{display:flex;flex-direction:column;min-width:0}
.sib .sib-name{
  display:block;
  font-family:'BarlowCondensed';font-weight:700;
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--off);line-height:1.25;
}
.sib .sib-state{
  display:block;
  font-family:'BarlowCondensed';font-weight:600;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin-top:3px;
}
.sib.here{border-color:var(--amber-soft);background:#121110}
.sib.here .sib-state{color:var(--amber)}

.parea-tail{padding:44px 0 70px}

/* ============================================================
   PHASE 2 — the operating layer inside a publication area.
   Additive only: nothing above is redefined. Scoped to the
   publication-area shell so the Library front door, the card,
   and the Return Desk are untouched.
   ============================================================ */

/* "What this publication watches" — the micro-description. Four plain
   statements of beat, not marketing copy. */
.watch-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px;
}
.watch-item{
  border:1px solid var(--edge);background:#0e0e0d;padding:20px 20px 22px;
}
.watch-item .wno{
  display:block;font:700 10px/1 'BarlowCondensed',sans-serif;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber-soft);margin-bottom:10px;
}
.watch-item .wtext{
  display:block;font:400 15px/1.55 'Spectral',Georgia,serif;color:var(--bone);
}
@media (max-width:900px){.watch-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.watch-grid{grid-template-columns:1fr}}

/* Circulation strip — the shelves stay open; a card is only for saved
   progress, downloads, and Return Desk tracking. State is read from the
   one existing ledger, never written here. */
.circ{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;
  border:1px solid var(--edge);border-left:3px solid var(--amber-soft);
  background:#0d0d0c;padding:20px 24px;margin-top:26px;
}
.circ-state{display:flex;align-items:center;gap:12px;min-width:210px}
.circ-dot{
  width:9px;height:9px;border-radius:50%;background:var(--mute);flex:0 0 auto;
}
.circ-dot.open{background:var(--ok)}
.circ-dot.full{background:var(--amber)}
.circ-label{
  display:block;font:700 11px/1.3 'BarlowCondensed',sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone);
}
.circ-sub{
  display:block;font:400 12px/1.4 'BarlowCondensed',sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);margin-top:3px;
}
.circ-rule{
  flex:1 1 320px;font:400 14px/1.6 'Spectral',Georgia,serif;color:var(--mute);margin:0;
}
.circ-links{display:flex;gap:16px;flex-wrap:wrap}
.circ-links a{
  font:700 11px/1 'BarlowCondensed',sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;
}
.circ-links a:hover{border-bottom-color:var(--amber)}
@media (max-width:560px){.circ{padding:18px 18px}.circ-rule{flex-basis:100%}}

/* Back to the portfolio — the return door, repeated at the foot of every
   area so a reader never has to use the browser's back button. */
.parea-back{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;border-top:1px solid var(--edge);margin-top:10px;padding:26px 0 0;
}
.back-btn{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--amber-soft);background:transparent;color:var(--amber);
  font:700 12px/1 'BarlowCondensed',sans-serif;letter-spacing:.2em;text-transform:uppercase;
  padding:14px 22px;text-decoration:none;
}
.back-btn:hover{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.back-note{
  font:400 13px/1.5 'BarlowCondensed',sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);margin:0;
}