/* The Glamour & Greed Gazette — edition pages (articles, letters, polls, examinations, desk) */

.edition { max-width: 760px; margin: 0 auto; padding: 0 var(--sp-5) var(--sp-8); position: relative; z-index: 1; }
.edition a { color: var(--burgundy); }
.page-h { font-size: clamp(var(--fs-xl), 5vw, 40px); text-align: center; margin: var(--sp-5) 0; letter-spacing: .02em; }

/* masthead additions */
.masthead-title a { color: inherit; text-decoration: none; }
.paper-nav { font-size: var(--fs-xs); letter-spacing: .14em; margin: var(--sp-3) 0 var(--sp-2); }
.paper-nav a { color: var(--ink); text-decoration: none; padding: 0 var(--sp-2); }
.paper-nav a:hover, .paper-nav a.on { color: var(--burgundy); border-bottom: 1px solid var(--gold); }
.navdot { color: var(--gold); }
.reader-strip { max-width: 760px; margin: 0 auto; padding: 0 var(--sp-5); text-align: right; font-size: var(--fs-xs); opacity: .8; position: relative; z-index: 1; display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.reader-strip img { border-radius: 50%; border: 1px solid var(--gold); }
.reader-strip a { color: var(--burgundy); }

/* edition front page */
.cover-story h2 a, .column-card h3 a { color: inherit; text-decoration: none; }
.cover-story h2 a:hover, .column-card h3 a:hover { color: var(--burgundy); }
.dek { font-style: italic; font-size: var(--fs-lg); color: var(--burgundy-deep); margin: var(--sp-2) 0 var(--sp-3); line-height: 1.4; }
.card-dek { font-size: var(--fs-sm); }
.continue { margin-top: var(--sp-3); }
.continue a { font-variant: small-caps; letter-spacing: .05em; text-decoration: none; border-bottom: 1px solid var(--gold); }
.engagement-note { display: block; font-size: var(--fs-xs); opacity: .6; margin-top: var(--sp-2); letter-spacing: .06em; }

/* article page */
.full-article { padding-top: var(--sp-5); }
.article-title { font-size: clamp(var(--fs-xl), 6vw, 46px); line-height: 1.12; margin: var(--sp-2) 0 var(--sp-2); }
.article-body { max-width: 68ch; }
.article-body p { margin: 0 0 var(--sp-4); }
.article-body code { background: var(--parchment-dark); border: 1px solid var(--gold-light); padding: 1px 5px; font-size: .9em; }
.crosshead { font-size: var(--fs-lg); text-align: center; font-variant: small-caps; letter-spacing: .08em; margin: var(--sp-6) 0 var(--sp-4); color: var(--burgundy-deep); }
.section-break { text-align: center; color: var(--gold); font-size: var(--fs-xl); margin: var(--sp-6) 0; }
.dropcap > p:first-of-type::first-letter {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 900;
  font-size: 3.4em; line-height: .82; float: left;
  padding: 6px 10px 0 0; color: var(--burgundy);
}

/* press clippings (link previews) */
.clipping { display: flex; border: 1px solid var(--gold-light); background: var(--parchment-dark); margin: 0 0 var(--sp-4); text-decoration: none; box-shadow: 3px 3px 0 rgba(0,0,0,.5); transform: rotate(-.35deg); transition: transform .18s var(--ease); }
.clipping:hover { transform: rotate(0deg) translateY(-1px); }
.clip-img { flex: 0 0 150px; min-height: 100px; background-size: cover; background-position: center; border-right: 1px solid var(--gold-light); filter: sepia(.2) brightness(.92); }
.clip-body { padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.clip-source { font-size: 10px; letter-spacing: .14em; color: var(--burgundy); }
.clip-title { color: var(--ink); font-weight: 600; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.clip-desc { font-size: var(--fs-xs); opacity: .7; font-style: italic; }
.embed-frame.yt { position: relative; padding-top: 56.25%; margin: 0 0 var(--sp-4); border: 1px solid var(--gold); box-shadow: 3px 3px 0 rgba(0,0,0,.5); }
.embed-frame.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The Gazette Asks (poll) */
.gazette-asks { border: 1px solid var(--gold); border-left: 4px solid var(--burgundy); background: var(--parchment-dark); padding: var(--sp-5); margin: var(--sp-6) 0; }
.ga-label { font-size: var(--fs-xs); letter-spacing: .16em; color: var(--burgundy); font-weight: 600; margin: 0 0 var(--sp-2); }
.ga-q { font-family: 'Playfair Display', Georgia, serif; font-size: var(--fs-lg); font-weight: 700; margin: 0 0 var(--sp-4); }
.poll-opt { position: relative; display: flex; justify-content: space-between; gap: var(--sp-3); width: 100%; text-align: left; font-family: inherit; font-size: var(--fs-sm); background: var(--parchment); color: var(--ink); border: 1px solid var(--gold-light); padding: 9px 12px; margin-bottom: var(--sp-2); cursor: pointer; overflow: hidden; }
.poll-opt:hover { border-color: var(--burgundy); }
.poll-opt.mine { border-color: var(--burgundy); box-shadow: inset 0 0 0 1px var(--burgundy); }
.po-bar { position: absolute; inset: 0 auto 0 0; background: rgba(184,147,63,.22); transition: width .5s var(--ease); }
.po-label, .po-pct { position: relative; z-index: 1; }
.po-pct { color: var(--burgundy); font-size: var(--fs-xs); white-space: nowrap; font-variant: small-caps; }
.ga-total { font-size: var(--fs-xs); opacity: .65; margin: var(--sp-2) 0 0; font-style: italic; }

/* the examination (quiz) */
.examination { border: 1px double var(--gold); padding: var(--sp-5); margin: var(--sp-6) 0; background: linear-gradient(rgba(184,147,63,.05), rgba(184,147,63,.02)); }
.exam-note { font-style: italic; font-size: var(--fs-sm); opacity: .75; margin: 0 0 var(--sp-4); }
.quiz-q { border: none; border-top: 1px solid var(--gold-light); padding: var(--sp-4) 0 var(--sp-2); margin: 0; }
.quiz-q legend { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: var(--fs-base); padding-right: var(--sp-3); }
.quiz-opt { display: block; padding: 6px 0 6px var(--sp-2); font-size: var(--fs-sm); cursor: pointer; }
.quiz-opt:hover { color: var(--burgundy); }
.quiz-opt input { accent-color: var(--burgundy); margin-right: var(--sp-2); }
.quiz-opt.correct { color: #2e5c2e; font-weight: 600; }
.quiz-opt.wrong { color: var(--burgundy); text-decoration: line-through; }
.exam-gate { font-style: italic; color: var(--burgundy); }
.quiz-result { border-top: 3px double var(--gold); margin-top: var(--sp-4); padding-top: var(--sp-4); }
.quiz-result h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.quiz-result .verdict { font-style: italic; font-size: var(--fs-lg); color: var(--burgundy-deep); }
.quiz-board { margin-top: var(--sp-5); }
.quiz-board ol { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); font-size: var(--fs-sm); }
.quiz-board li { padding: 2px 0; }
.quiz-board .board-score { color: var(--burgundy); font-variant: small-caps; }

/* society's verdict (reactions) */
.react-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: var(--sp-6) 0 var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--gold-light); }
.react-label { font-size: var(--fs-xs); letter-spacing: .14em; color: var(--burgundy); font-weight: 600; margin-right: var(--sp-2); }
.react { font-family: inherit; font-size: var(--fs-base); background: var(--parchment-dark); color: var(--ink); border: 1px solid var(--gold-light); border-radius: 999px; padding: 5px 13px; cursor: pointer; transition: transform .12s var(--ease); }
.react:hover { transform: translateY(-2px); border-color: var(--gold); }
.react.on { border-color: var(--burgundy); box-shadow: inset 0 0 0 1px var(--burgundy); background: var(--parchment); }
.react .rc { margin-left: 6px; font-size: var(--fs-xs); color: var(--burgundy); font-variant: small-caps; }
.react-hint { font-size: var(--fs-xs); font-style: italic; opacity: .6; }

/* correspondence (letters) */
.correspondence { margin-top: var(--sp-7); }
.corr-rule { text-align: center; color: var(--gold); font-size: var(--fs-xl); border-top: 1px solid var(--gold); line-height: 0; margin: var(--sp-6) 0; }
.corr-rule span { background: var(--parchment); padding: 0 var(--sp-4); position: relative; top: 1px; }
.corr-h { font-size: var(--fs-lg); letter-spacing: .06em; text-align: center; margin: 0 0 var(--sp-5); }
.corr-count { color: var(--burgundy); font-size: var(--fs-sm); font-variant: small-caps; }
.no-letters { font-style: italic; opacity: .7; text-align: center; padding: var(--sp-4) 0; }
.letter { border-bottom: 1px solid var(--gold-light); padding: var(--sp-4) 0; }
.letter.pinned { background: var(--parchment-dark); border: 1px solid var(--gold); padding: var(--sp-4); margin-bottom: var(--sp-3); box-shadow: 3px 3px 0 rgba(0,0,0,.45); }
.letter.from-the-editor { border-left: 4px solid var(--burgundy); padding-left: var(--sp-4); background: linear-gradient(90deg, rgba(107,18,41,.06), transparent 60%); }
.letter-flag { font-size: 10px; letter-spacing: .16em; color: var(--gold); font-weight: 700; margin: 0 0 var(--sp-2); }
.letter-flag.editor-flag { color: var(--burgundy); }
.letter-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.letter-av { border-radius: 50%; border: 1px solid var(--gold); }
.letter-user { font-weight: 600; font-variant: small-caps; letter-spacing: .03em; }
.letter-badge { font-size: 9px; color: var(--burgundy); border: 1px solid var(--burgundy); padding: 1px 5px; letter-spacing: .1em; border-radius: 2px; }
.letter-date { font-size: var(--fs-xs); opacity: .55; font-style: italic; }
.letter-body { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); line-height: 1.65; overflow-wrap: anywhere; }
.from-the-editor .letter-body { font-style: italic; color: var(--burgundy-deep); }
.letter-mod { font-size: var(--fs-xs); margin-top: var(--sp-2); }
.letter-mod button, .del-article { background: none; border: 1px solid var(--gold-light); color: var(--burgundy); font-family: inherit; font-size: var(--fs-xs); cursor: pointer; padding: 1px 8px; font-variant: small-caps; }
.letter-mod button:hover, .del-article:hover { border-color: var(--burgundy); }

/* letter form + auth */
.letter-form { margin-top: var(--sp-5); }
.letter-form textarea, .desk-form input, .desk-form textarea, .desk-form select {
  width: 100%; box-sizing: border-box; background: var(--parchment); color: var(--ink);
  border: 1px solid var(--gold-light); font-family: 'Source Serif 4', Georgia, serif; font-size: var(--fs-sm); padding: var(--sp-3);
}
.letter-form textarea:focus, .desk-form input:focus, .desk-form textarea:focus { outline: none; border-color: var(--burgundy); }
.letter-form-row { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); flex-wrap: wrap; }
.letter-as { font-size: var(--fs-xs); font-style: italic; opacity: .75; display: inline-flex; align-items: center; gap: 6px; }
.quill-btn { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; letter-spacing: .08em; background: var(--burgundy); color: var(--parchment); border: 1px solid var(--burgundy-deep); padding: 9px 20px; cursor: pointer; font-size: var(--fs-sm); }
.quill-btn:hover { background: var(--burgundy-deep); box-shadow: 2px 2px 0 var(--gold); }
.discord-login { display: inline-flex; align-items: center; gap: 8px; background: #5865F2; color: #fff; text-decoration: none; font-weight: 600; font-size: var(--fs-sm); padding: 10px 18px; margin-top: var(--sp-4); border-radius: 3px; }
.discord-login:hover { box-shadow: 2px 2px 0 var(--gold); }
.auth-note { font-size: var(--fs-xs); font-style: italic; opacity: .65; margin-top: var(--sp-2); max-width: 60ch; }

/* archive */
.archive-note { text-align: center; font-style: italic; opacity: .7; max-width: 56ch; margin: 0 auto var(--sp-6); }
.archive-issue { padding: var(--sp-5) 0; border-top: 1px solid var(--gold-light); }
.archive-issue-h { font-size: var(--fs-lg); font-variant: small-caps; letter-spacing: .06em; margin-bottom: var(--sp-3); color: var(--burgundy-deep); }
.archive-line { margin: var(--sp-2) 0; font-size: var(--fs-sm); }
.archive-section { font-size: 10px; letter-spacing: .12em; color: var(--burgundy); font-weight: 600; margin-right: var(--sp-2); }
.archive-date { opacity: .55; font-style: italic; }

/* the Editor's Desk */
.desk-form { border: 1px solid var(--gold); background: var(--parchment-dark); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-6); box-shadow: 4px 4px 0 rgba(0,0,0,.5); }
.desk-form label { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-xs); letter-spacing: .1em; color: var(--burgundy); font-weight: 600; }
.desk-form .hint { font-weight: 400; letter-spacing: 0; opacity: .65; font-style: italic; }
.desk-form details { border: 1px dashed var(--gold-light); padding: var(--sp-3); }
.desk-form summary { font-size: var(--fs-xs); letter-spacing: .1em; color: var(--burgundy); font-weight: 600; cursor: pointer; }
.desk-form details[open] summary { margin-bottom: var(--sp-3); }
.desk-row { display: flex; align-items: end; gap: var(--sp-4); flex-wrap: wrap; }
.desk-row label { flex: 1 1 140px; }
#saveMsg { font-size: var(--fs-xs); color: var(--burgundy); font-style: italic; }
.desk-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.desk-table th, .desk-table td { border-bottom: 1px solid var(--gold-light); text-align: left; padding: var(--sp-2) var(--sp-3); }
.desk-table th { font-size: 10px; letter-spacing: .12em; color: var(--burgundy); }

@media (max-width: 560px) {
  .clip-img { flex-basis: 100px; }
}
@media print {
  .react-row, .letter-form, .discord-login, .paper-nav, .reader-strip { display: none; }
}

/* circulate this story (share row) */
.circulate { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: var(--sp-6) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--gold-light); }
.circ-label { font-size: var(--fs-xs); letter-spacing: .14em; color: var(--burgundy); font-weight: 600; margin-right: var(--sp-2); }
.circ-btn { font-family: 'Source Serif 4', Georgia, serif; font-variant: small-caps; letter-spacing: .04em; font-size: var(--fs-sm); background: var(--parchment-dark); color: var(--ink); border: 1px solid var(--gold-light); padding: 6px 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: transform .12s var(--ease); }
.circ-btn:hover { transform: translateY(-2px); border-color: var(--burgundy); color: var(--burgundy); }
.circ-btn.copied { border-color: var(--burgundy); color: var(--burgundy); box-shadow: inset 0 0 0 1px var(--burgundy); }
.circ-hint { font-size: 10px; font-style: italic; opacity: .55; font-variant: normal; letter-spacing: 0; }
@media print { .circulate { display: none; } }