/* stand.css - MultiverseSocial Newsstand "real newsstand" look (STAGED 2026-10-08, not live).
 * Pure overlay for the CURRENT live list markup of /cgi-bin/newsstand.cgi (no paper=N):
 *   .ns-hero (sign)  .ns-list > li.ns-item.paper.paper-N > span.ns-badge + a.ns-open > h2 + p  [+ form for members]
 *   optional: a.ns-open > ol.ns-heds > li   (front-page headlines; from C ns_front_heds() or stand.js)
 * Every selector starts with ".ns .ns-list" or ".ns .ns-hero" (paper=N pages have neither), and is
 * at least 0,2,0 so it wins over the CGI's inline <style> even when appended to /ms-pages.css.
 * Taps: whole paper is the link (existing .ns-open::after overlay); member button stays >= 44px. */

/* ---------- the sign + awning (replaces the starfield hero strip on the list page) ---------- */
.ns .ns-hero{position:relative;flex-wrap:wrap;justify-content:center;gap:8px 12px;min-height:0;margin:0 0 0;padding:34px 12px 12px;
  border:0;border-radius:10px 10px 0 0;text-align:center;
  background:linear-gradient(180deg,#3a2414,#24160c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.35)}
.ns .ns-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;border-radius:10px 10px 0 0;
  background:repeating-linear-gradient(90deg,#c0392b 0 22px,#f3ead7 22px 44px)}
.ns .ns-hero::after{content:"";position:absolute;left:0;right:0;top:22px;height:10px;
  background:radial-gradient(circle at 11px 0,#c0392b 10px,transparent 10.5px) 0 0/44px 10px repeat-x,
             radial-gradient(circle at 33px 0,#f3ead7 10px,transparent 10.5px) 0 0/44px 10px repeat-x}
.ns .ns-hero .ns-logo{width:36px;height:36px;box-shadow:0 0 0 2px #d4a94f}
.ns .ns-hero .tx{flex:0 1 auto;min-width:0}
.ns .ns-hero h1{display:inline-block;padding:4px 14px;border:2px solid #d4a94f;border-radius:4px;background:#14100a;
  font:700 clamp(1.05rem,5.2vw,1.6rem)/1.15 Georgia,'Times New Roman',serif;letter-spacing:.14em;text-transform:uppercase;color:#f6d77a;
  text-shadow:0 0 10px rgba(246,215,122,.35)}
.ns .ns-hero p{margin:6px 0 0;font:italic .82rem/1.35 Georgia,serif;color:#e9dcc3}

/* ---------- the rack: wooden frame, papers stand on shelves ---------- */
.ns .ns-list{position:relative;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px;margin:0 0 4px;padding:14px 10px 22px;
  overflow:hidden;border-radius:0 0 8px 8px;border:6px solid #4a2e18;border-top-width:0;
  background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 8%,transparent 92%,rgba(0,0,0,.25)),
             repeating-linear-gradient(90deg,#2b1a0e 0 3px,#2f1d10 3px 9px),#2b1a0e;
  box-shadow:inset 0 8px 14px rgba(0,0,0,.55),0 6px 0 #1c1009}

/* one paper, upright in the rack */
.ns .ns-list .ns-item{display:flex;flex-direction:column;gap:0;align-items:stretch;min-width:0;min-height:236px;
  padding:24px 8px 10px;border:0;border-top:4px solid var(--pc);border-radius:2px 2px 1px 1px;color:#1b1a17;
  background:
    linear-gradient(180deg,rgba(0,0,0,0) 46%,rgba(0,0,0,.07) 49.5%,rgba(255,255,255,.35) 50.5%,rgba(0,0,0,0) 54%), /* fold crease */
    radial-gradient(120% 80% at 50% 0,#fbf7ec,#efe7d2);
  box-shadow:0 1px 0 #d8ccb0,2px 3px 0 #d9ceb4,3px 5px 10px rgba(0,0,0,.55);
  transform:rotate(-.5deg);transform-origin:50% 100%;transition:transform .15s,box-shadow .15s}
.ns .ns-list .ns-item:nth-child(even){transform:rotate(.6deg)}
.ns .ns-list .ns-item:nth-child(3n){transform:rotate(-.2deg)}
/* the shelf lip under every paper (wider than the paper, overlaps the row gap) */
.ns .ns-list .ns-item::after{content:"";position:absolute;left:-8px;right:-8px;bottom:-14px;height:12px;border-radius:2px;
  background:linear-gradient(180deg,#8a5a32,#5e3a1d 60%,#3d2412);box-shadow:0 3px 4px rgba(0,0,0,.5);pointer-events:none;z-index:1}
/* wire rail across the bottom of the papers (like a real rack) */
.ns .ns-list .ns-item::before{content:"";position:absolute;left:-8px;right:-8px;bottom:26px;height:3px;border-radius:2px;
  background:linear-gradient(180deg,#e8e8e8,#8d8d8d);box-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none;z-index:3}

/* ear: the paper's emblem, top left corner */
.ns .ns-list .ns-badge{position:absolute;top:4px;left:6px;width:18px;height:18px;border:1px solid #1b1a17;border-radius:50%;
  background:transparent;color:#1b1a17;font-size:.7rem}

/* the link = the whole paper (existing .ns-open::after overlay keeps the full-paper tap target) */
.ns .ns-list .ns-open{display:flex;flex-direction:column;flex:1 1 auto;min-height:44px;padding:0 0 34px;color:#1b1a17;
  --gut:linear-gradient(90deg,transparent 32%,#f1e9d5 32% 35%,transparent 35% 65%,#f1e9d5 65% 68%,transparent 68%);
  --txt:repeating-linear-gradient(180deg,rgba(27,26,23,.22) 0 2px,transparent 2px 6px);
  background:var(--gut) 0 100%/100% 26px no-repeat,var(--txt) 0 100%/100% 26px no-repeat}
.ns .ns-list .ns-open::after{border-radius:2px}

/* masthead */
.ns .ns-list .ns-open h2{margin:0;padding:0 0 4px;border-bottom:3px double #1b1a17;text-align:center;
  font:700 clamp(.98rem,4.6vw,1.3rem)/1.08 var(--pfont,Georgia,serif);letter-spacing:-.01em;color:#111;overflow-wrap:anywhere;background:#f6f0e1}
.ns .ns-list .paper-3 .ns-open h2{font-weight:400;text-transform:uppercase;letter-spacing:.02em}
.ns .ns-list .paper-2 .ns-open h2,.ns .ns-list .paper-7 .ns-open h2{font-size:clamp(.9rem,4.1vw,1.15rem);letter-spacing:-.03em}
/* dateline: covers - count - state */
.ns .ns-list .ns-open p{order:0;margin:0 0 6px;padding:3px 0;border-bottom:1px solid #1b1a17;text-align:center;
  font:600 .62rem/1.3 Georgia,serif;letter-spacing:.03em;text-transform:uppercase;color:#3b372f;display:block;background:#f4eedd;overflow:visible;-webkit-line-clamp:unset}
.ns .ns-list .ns-cnt{color:#3b372f}
.ns .ns-list .ns-state{font:700 .6rem/1 Georgia,serif;letter-spacing:.06em;color:#6b6457}
.ns .ns-list .ns-state.on{color:#0d6a3c}

/* front-page headlines (readable, high contrast; lead larger) */
.ns .ns-list .ns-heds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;min-width:0}
.ns .ns-list .ns-heds li{margin:0;padding:0;
  font:700 .76rem/1.22 Georgia,'Times New Roman',serif;color:#141310;overflow-wrap:break-word;hyphens:auto;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.ns .ns-list .ns-heds li:first-child{font-size:.92rem;line-height:1.15;-webkit-line-clamp:4}
.ns .ns-list .ns-heds li+li{padding-top:5px;border-top:1px solid rgba(27,26,23,.35)}
.ns .ns-list .ns-heds li.ns-none{font:italic 400 .76rem/1.3 Georgia,serif;color:#4b463c;text-align:center;padding-top:14px}
.ns .ns-list .ns-heds li.ns-wait{height:.9rem;border:0;background:repeating-linear-gradient(90deg,rgba(27,26,23,.2) 0 70%,transparent 70%)}

/* The Web Notifier: red-flag masthead look */
.ns .ns-list .paper-6{background:radial-gradient(120% 80% at 50% 0,#fffef8,#f1efe6)}
.ns .ns-list .paper-6 .ns-open h2{margin:0 -8px;padding:6px 6px;border:0;background:#d1121b;color:#fff;font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em}
.ns .ns-list .paper-6 .ns-open p{border-bottom:2px solid #d1121b;color:#d1121b;background:#f8f7f0}
.ns .ns-list .paper-6 .ns-heds li{font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:.74rem;letter-spacing:0;text-transform:uppercase}
.ns .ns-list .paper-6 .ns-heds li:first-child{font-size:.86rem}
.ns .ns-list .paper-6 .ns-badge{border-color:#d1121b;color:#d1121b;background:#fff}

/* member Subscribe/Unsubscribe: a price-tag strip on the foot of the paper (stays above the overlay) */
.ns .ns-list .ns-item form{position:relative;z-index:4;margin:8px 0 0}
.ns .ns-list .ns-item form .ms-btn{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:44px;padding:0 6px;
  border:1px solid #1b1a17;border-radius:3px;background:#1b1a17;color:#f6efdc !important;font:700 .78rem/1.1 system-ui,sans-serif;box-shadow:none}
.ns .ns-list .ns-item form .ms-btn.ms-primary{border-color:#a5281f;background:#c0392b;color:#fff !important}
.ns .ns-list .ns-item .ms-btn:focus-visible{outline:3px solid #f6d77a;outline-offset:2px}

/* interaction: pull the paper up from the rack */
@media(hover:hover){.ns .ns-list .ns-item:hover{transform:translateY(-6px) rotate(0);border-color:var(--pc);
  box-shadow:0 1px 0 #d8ccb0,2px 3px 0 #d9ceb4,4px 12px 18px rgba(0,0,0,.6)}}
.ns .ns-list .ns-open:focus-visible{outline:3px solid #f6d77a;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.ns .ns-list .ns-item,.ns .ns-list .ns-item:nth-child(n){transform:none;transition:none}}

/* small phones (<=360): 2 papers per shelf, a little tighter */
@media(max-width:360px){
  .ns .ns-list{gap:22px 8px;padding:12px 8px 20px;border-width:0 4px 4px}
  .ns .ns-list .ns-item{min-height:220px;padding:22px 6px 8px}
  .ns .ns-list .ns-heds li{font-size:.72rem}
  .ns .ns-list .ns-heds li:first-child{font-size:.84rem}
  .ns .ns-list .ns-heds li:nth-child(3){display:none}
  .ns .ns-list .paper-6 .ns-heds li{font-size:.66rem}
  .ns .ns-list .paper-6 .ns-heds li:first-child{font-size:.76rem}
  .ns .ns-list .paper-6 .ns-open h2{margin:0 -6px}
}
/* tablet / desktop: 4 papers per shelf, 8 papers = 2 shelves */
@media(min-width:700px){
  .ns .ns-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 16px;padding:18px 18px 26px;border-width:0 10px 10px}
  .ns .ns-list .ns-item{min-height:300px;padding:26px 12px 12px}
  .ns .ns-list .ns-item::after{left:-16px;right:-16px;bottom:-18px;height:14px}
  .ns .ns-list .ns-item::before{left:-16px;right:-16px}
  .ns .ns-list .ns-open h2{font-size:clamp(1.05rem,1.9vw,1.45rem)}
  .ns .ns-list .paper-6 .ns-open h2{margin:0 -12px}
  .ns .ns-list .ns-heds li{font-size:.84rem}
  .ns .ns-list .ns-heds li:first-child{font-size:1.04rem}
  .ns .ns-hero{padding:38px 16px 14px}
}
@media(min-width:1000px){
  .ns .ns-list .ns-item{min-height:330px}
  .ns .ns-list .ns-heds li:first-child{font-size:1.14rem}
}
/* members: the Subscribe tag takes the foot of the paper, so no wire rail across it */
.ns .ns-list .ns-item:has(form)::before{display:none}
/* CSS-only stage (no headlines printed yet): more column text so the paper still reads as a front page */
.ns .ns-list .ns-open:not(:has(.ns-heds)){background-size:100% 50%,100% 50%}

/* hover-lift fix: keep the hit area under the cursor so hover does not flap */
@media(hover:hover){.ns .ns-list .ns-item:hover::before{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px}}