/* ============================================================================
   Weazel News - the in-universe newspaper front page and article page.

   Layout and palette are from the approved weazel-news-home.html mockup.

   THIS STYLESHEET IS STANDALONE. The Weazel reading pages deliberately do NOT
   load style.css: nothing on them reuses the site's tables, chips or forms, and
   the mockup's class names (.wrap, .logo, .section, .sub, .skip, .footgrid,
   .t1/.t2/.t3) are all names style.css already owns. Loading both would let
   every property this file does not declare leak in from there, which is
   exactly what went wrong on the SASB skin. Isolation is cheaper than
   namespacing here because there is nothing to share.

   If you ever add partials/header.ejs to a Weazel reading page, that isolation
   is gone and the class names above will start fighting. Rename them first.

   The writing and review screens (/weazel/submit, /weazel/mine, /staff/weazel)
   keep the normal site chrome on purpose. They are tools, not the paper.
   ============================================================================ */

:root {
  --black: #000000;
  --red: #d9211c;
  --red-dark: #b21916;
  --ink: #111111;
  --body: #333333;
  --meta: #767676;
  --hair: #d5d5d5;
  --rule: #111111;
  --white: #ffffff;
  --font: 'Libre Franklin', Helvetica, Arial, sans-serif;

  /* Story art. There is no image column on weazel_articles yet, so every
     picture slot falls back to one of these tints, cycled by article id so the
     same story keeps the same colour between visits. */
  --art-1: linear-gradient(140deg, #3a4654, #8b98a6);
  --art-2: linear-gradient(140deg, #4a4038, #9a8674);
  --art-3: linear-gradient(140deg, #2f3a46, #697a8c);
  --art-4: linear-gradient(140deg, #3d4a3a, #7b8a6d);
  --art-5: linear-gradient(140deg, #4a3a3a, #8a6d6d);
  --art-6: linear-gradient(140deg, #3a3f4a, #6d768a);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--white); color: var(--body); font-family: var(--font);
  font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.17; letter-spacing: -.01em; }
p { margin: 0 0 14px; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1290px; margin: 0 auto; padding: 0 24px; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.skip { position: absolute; left: -9999px; background: var(--red); color: #fff; padding: 10px 18px; font-weight: 700; z-index: 999; }
.skip:focus { left: 0; top: 0; }

/* ---------- 1. Masthead ---------- */
.masthead { background: var(--black); color: #fff; position: sticky; top: 0; z-index: 80; }
.masthead .wrap { max-width: 100%; padding: 0 24px; }
.row1 { display: flex; align-items: center; gap: 18px; padding: 8px 0; }
/* The logo is Rockstar's Weazel News broadcast plate, self hosted. It carries
   its own dark background, so it sits on the black bar as a network bug
   rather than being knocked out of a white box. */
.logo { flex: none; display: block; line-height: 0; }
.logo:hover { text-decoration: none; }
.logo img { height: 46px; width: auto; }
.burger { background: none; border: 0; color: #fff; cursor: pointer; padding: 8px 6px; display: none; gap: 4px; }
.burger i { display: block; width: 22px; height: 2px; background: #fff; }

.nav { display: flex; list-style: none; margin: 0; padding: 0; gap: 20px; align-items: center; flex: 1; }
.nav > li { position: relative; }
.nav > li > a {
  display: block; color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .03em;
  text-transform: uppercase; padding: 10px 0;
}
.nav .caret { font-size: .5rem; margin-left: 5px; vertical-align: middle; font-weight: 400; }
.sub {
  position: absolute; top: 100%; left: -14px; min-width: 230px; background: var(--black);
  border-top: 3px solid var(--red); list-style: none; margin: 0; padding: 6px 0;
  opacity: 0; visibility: hidden; transition: .12s; box-shadow: 0 10px 24px rgba(0,0,0,.5);
}
.nav > li:hover .sub, .nav > li:focus-within .sub { opacity: 1; visibility: visible; }
.sub a {
  display: block; color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; padding: 10px 16px;
}
.sub a:hover { background: #222; text-decoration: none; }

.util { display: flex; align-items: center; gap: 16px; flex: none; }
.util .signin { font-size: .86rem; font-weight: 700; }
.util form { margin: 0; }
.util .linkbtn { background: none; border: 0; color: #fff; font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; padding: 0; }
.util .linkbtn:hover { text-decoration: underline; }
.donate {
  background: var(--red); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .04em;
  text-transform: uppercase; padding: 9px 18px; border-radius: 3px;
}
.donate:hover { background: var(--red-dark); text-decoration: none; color: #fff; }

/* Second masthead row: the mockup's trending strip, driven by real headlines. */
.row2 { display: flex; gap: 26px; padding: 0 0 12px; flex-wrap: wrap; }
.row2 a { color: #fff; font-weight: 700; font-size: .86rem; }
.row2 .lead { color: var(--red); text-transform: uppercase; letter-spacing: .07em; font-size: .74rem; align-self: center; }

/* ---------- 2. Page grid ---------- */
main { padding: 44px 0 60px; }
.pagegrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 46px; align-items: start; }

.section { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 44px; }
.section:first-child { margin-top: 0; }
.sechead { display: flex; gap: 26px; flex-wrap: wrap; align-items: baseline; margin-bottom: 26px; }
.sechead .label { font-weight: 700; font-size: .92rem; color: var(--ink); }
.sechead a { font-size: .92rem; color: var(--body); }

/* ---------- 3. Lead story ---------- */
.leadblock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 44px; align-items: start; }
.leadblock h2 { font-size: 1.72rem; font-weight: 700; }
.leadpic { aspect-ratio: 4/3; background-size: cover; background-position: center; }
.meta { display: flex; align-items: center; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.meta .read, .meta .stamp, .meta .by {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--meta);
}
.meta .stamp { color: var(--red); }

.morecov { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hair); }
.morecov .kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 16px;
}
.morecov .item { padding: 16px 0; border-top: 1px solid var(--hair); }
.morecov .item:first-of-type { border-top: 0; padding-top: 0; }
.morecov h3 { font-size: 1.05rem; font-weight: 700; }

/* ---------- 4. Right rail ---------- */
.rail { position: sticky; top: 120px; }
/* The mockup put a house ad here. There is nothing to advertise, so the slot
   carries the one thing the paper actually wants from a reader. */
.railpromo { display: block; background: var(--black); color: #fff; padding: 22px 24px 24px; margin-bottom: 26px; }
.railpromo:hover { text-decoration: none; }
.railpromo img { height: 34px; width: auto; margin-bottom: 14px; }
.railpromo .h { display: block; font-size: 1.24rem; font-weight: 700; line-height: 1.15; color: #fff; }
.railpromo .s { display: block; font-size: .88rem; color: #c9c9c9; margin-top: 8px; }
.railpromo .go {
  display: inline-block; margin-top: 16px; background: var(--red); color: #fff; font-weight: 700;
  font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; padding: 9px 16px; border-radius: 3px;
}

.railpic { aspect-ratio: 16/10; background-size: cover; background-position: center; margin-bottom: 16px; }
.rail h2 { font-size: 1.32rem; font-weight: 700; }
.raillist { margin-top: 26px; }
.railitem {
  display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 16px; padding: 18px 0;
  border-top: 1px solid var(--hair); align-items: start;
}
.railitem h3 { font-size: 1rem; font-weight: 700; }
.railthumb { aspect-ratio: 4/3; background-size: cover; background-position: center; }

/* ---------- 5. Empty newsroom ---------- */
/* Zero approved articles is the normal state of a brand new paper, so it gets a
   designed front page rather than an error. */
.newsroom { border-top: 1px solid var(--rule); padding: 54px 0 10px; text-align: center; }
.newsroom img { height: 84px; width: auto; margin: 0 auto 26px; }
.newsroom h2 { font-size: 1.9rem; margin-bottom: 14px; }
.newsroom p { max-width: 560px; margin: 0 auto 16px; color: var(--body); }
.newsroom .go {
  display: inline-block; margin-top: 12px; background: var(--red); color: #fff; font-weight: 700;
  font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; padding: 12px 24px; border-radius: 3px;
}
.newsroom .go:hover { background: var(--red-dark); text-decoration: none; }

/* ---------- 6. Article page ---------- */
.story { max-width: 760px; margin: 0 auto; }
.story .kicker {
  font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--red); margin-bottom: 14px;
}
.story h1 { font-size: 2.4rem; line-height: 1.1; margin-bottom: 18px; }
.story .standfirst { font-size: 1.18rem; color: var(--body); line-height: 1.5; margin-bottom: 22px; }
.story .byline {
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 14px 0;
  font-size: .82rem; color: var(--meta); display: flex; gap: 18px; flex-wrap: wrap;
}
.story .byline b { color: var(--ink); font-weight: 700; }
.storypic { aspect-ratio: 16/9; background-size: cover; background-position: center; margin: 26px 0; }
/* Member-authored plain text. pre-line supplies the paragraph breaks; this is
   never rendered unescaped. */
.storybody { white-space: pre-line; font-size: 1.09rem; line-height: 1.68; color: var(--ink); }
.storyfoot { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--hair); display: flex; gap: 20px; flex-wrap: wrap; font-size: .88rem; }
.preview { background: #fff4f4; border-left: 4px solid var(--red); padding: 14px 18px; margin-bottom: 26px; font-size: .92rem; }
.preview b { color: var(--ink); }

/* ---------- 7. Footer ---------- */
footer { background: var(--black); color: #fff; padding: 50px 0 34px; margin-top: 20px; }
.footgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; padding-bottom: 34px; }
footer h3 {
  color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  margin-bottom: 16px;
}
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 11px; font-size: .9rem; }
footer a { color: #d6d6d6; }
footer a:hover { color: #fff; }
.footlogo { display: inline-block; line-height: 0; margin-bottom: 18px; }
.footlogo img { height: 40px; width: auto; }
.footsocial { display: flex; gap: 16px; margin-top: 16px; }
.footsocial a { color: #fff; }
.footsocial svg { width: 19px; height: 19px; fill: currentColor; }
.footsocial img { width: 19px; height: 19px; object-fit: contain; }
.footlegal {
  border-top: 1px solid #2c2c2c; padding-top: 22px; font-size: .8rem; color: #9a9a9a;
  display: flex; gap: 20px; flex-wrap: wrap;
}
.footlegal a { color: #9a9a9a; text-decoration: underline; }

/* ---------- 8. Toast ---------- */
/* style.css is not loaded here, so the flash message brings its own styling. */
.toast-wrap { position: fixed; top: 18px; right: 18px; z-index: 200; }
.toast {
  background: var(--ink); color: #fff; padding: 13px 18px; display: flex; align-items: center; gap: 14px;
  font-size: .92rem; box-shadow: 0 8px 26px rgba(0,0,0,.3); max-width: 380px;
}
.toast-success { border-left: 4px solid #2e8b57; }
.toast-error { border-left: 4px solid var(--red); }
.toast-close { background: none; border: 0; color: #fff; font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 0; }

/* ---------- 9. Newsroom screens (file a story, my submissions) ----------
   style.css is not loaded here, so the forms bring their own controls. These
   are the paper's back office, so they stay in the paper's type and rules
   rather than the site's cards. Nothing here is a capsule: no pills anywhere,
   per standing instruction. */
.deskhead { border-top: 1px solid var(--rule); padding-top: 12px; margin-bottom: 30px; }
.deskhead .eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--red); margin-bottom: 10px;
}
.deskhead h1 { font-size: 2.1rem; margin-bottom: 10px; }
.deskhead p { color: var(--meta); margin: 0; max-width: 640px; }

.deskwrap { max-width: 860px; }

.formcard { border: 1px solid var(--hair); padding: 28px 30px 26px; }
.field { margin-bottom: 22px; }
.field label {
  display: block; font-size: .76rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 7px;
}
.field input[type="text"], .field input:not([type]), .field textarea, .field select {
  width: 100%; border: 1px solid #b9b9b9; background: #fff; font: inherit; font-size: 1rem;
  color: var(--ink); padding: 11px 13px; border-radius: 0;
}
/* select.js is not loaded here, so this is a native select. The chevron is
   drawn rather than left to the platform so it matches the inputs beside it. */
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field textarea { line-height: 1.6; resize: vertical; min-height: 320px; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--red); outline-offset: -1px; border-color: var(--red); }
.field .hint { margin: 6px 0 0; font-size: .84rem; color: var(--meta); }
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.btn {
  display: inline-block; border: 1px solid var(--ink); background: var(--ink); color: #fff;
  font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 11px 20px; border-radius: 3px; cursor: pointer;
}
.btn:hover { text-decoration: none; color: #fff; background: #000; }
.btn-primary { background: var(--red); border-color: var(--red); }
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-ghost { background: none; color: var(--ink); border-color: #b9b9b9; }
.btn-ghost:hover { background: #f2f2f2; color: var(--ink); }
.btn-danger { background: none; color: var(--red); border-color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-sm { font-size: .72rem; padding: 8px 14px; }
form.inline { display: inline; margin: 0; }

.formerror { border-left: 4px solid var(--red); background: #fff4f4; padding: 13px 18px; margin-bottom: 22px; }
.sendback { border-left: 4px solid var(--ink); background: #f4f4f4; padding: 16px 20px; margin-bottom: 22px; }
.sendback h3 { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.sendback p { margin: 0; }
.sendback .who { color: var(--meta); font-size: .85rem; margin-top: 6px; }

/* One filed story in the submissions list. <details> so it opens without JS. */
.filing { border-top: 1px solid var(--hair); padding: 0; }
.filing:last-of-type { border-bottom: 1px solid var(--hair); }
.filing > summary { list-style: none; cursor: pointer; padding: 18px 0; }
.filing > summary::-webkit-details-marker { display: none; }
.filing > summary:hover .t { text-decoration: underline; }
.filing .t { display: block; font-size: 1.12rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.filing .m {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 7px;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--meta);
}
/* Status reads as coloured type, not a badge. */
.st-live { color: #1b7a3e; }
.st-review { color: #a86a00; }
.st-back { color: var(--red); }
.st-draft { color: var(--meta); }
.filing .open { padding: 0 0 22px; }
.filing .excerpt { color: var(--body); white-space: pre-line; }
.filing .note { border-left: 3px solid var(--hair); padding-left: 14px; }

/* ---------- 10. Responsive ---------- */
@media (max-width: 1180px) {
  .nav { gap: 13px; }
  .nav > li > a { font-size: .72rem; }
  .util .signin { display: none; }
}
@media (max-width: 980px) {
  .pagegrid { grid-template-columns: 1fr; gap: 40px; }
  .rail { position: static; }
  .footgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .masthead { position: static; }
  .row1 { flex-wrap: wrap; }
  .burger { display: grid; }
  .nav {
    display: none; order: 5; width: 100%; flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid #2c2c2c; padding-bottom: 10px;
  }
  .nav.open { display: flex; }
  .nav > li > a { padding: 12px 0; border-bottom: 1px solid #1e1e1e; }
  .sub {
    position: static; opacity: 1; visibility: visible; box-shadow: none; border-top: 0;
    border-left: 3px solid var(--red); padding: 0 0 6px;
  }
  .leadblock { grid-template-columns: 1fr; gap: 24px; }
  .leadblock h2 { font-size: 1.42rem; }
  .story h1 { font-size: 1.8rem; }
  .row2 { gap: 16px; }
  .footgrid { grid-template-columns: 1fr; }
  .twocol { grid-template-columns: 1fr; gap: 0; }
  .formcard { padding: 22px 18px; }
  .deskhead h1 { font-size: 1.7rem; }
}