/* Stories (/autograph-stories/): the Collector's wall hub and the Magazine
   story page. Fonts (Fraunces, Inter) are loaded by _section_base.html.
   Mobile first; every motion respects prefers-reduced-motion. */

.st {
  --slate: #111723; --bg: #0f1520; --panel: #171f2e; --ink: #eef0f4; --mut: #8e97aa;
  --paper: #f3efe7; --paper2: #e9e2d3; --pink: #141a26; --pmut: #5b6371; --line: #d8d0be;
  --orange: #ff7a1a; --blue: #2f6bff;
  --serif: Fraunces, Georgia, 'Times New Roman', serif;
  --sans: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink);
  -webkit-text-size-adjust: 100%;
}
.st *, .st *::before, .st *::after { box-sizing: border-box; }
.st a { color: inherit; text-decoration: none; }
.st button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.st img { max-width: 100%; }
.st-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.st .av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; display: inline-block; vertical-align: middle; background: #2f3a52; }
.st-wallpage { background: var(--bg); min-height: 70vh; }
.st-magpage { background: var(--paper); color: var(--pink); }
.st-paperpage { background: var(--paper); color: var(--pink); min-height: 70vh; }

/* ---------- top bar ---------- */
.st-bar { position: relative; z-index: 5; min-height: 54px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 16px; background: var(--slate); border-bottom: 1px solid rgba(255,255,255,.07); color: #fff; }
.st-bar .t { font: 700 22px/1 var(--serif); letter-spacing: -.01em; flex: 1; color: #fff; }
.st-bar .ib { width: 44px; height: 44px; display: grid; place-items: center; color: #cfd4df; border-radius: 6px; }
.st-bar .ib:hover, .st-bar .ib:focus-visible { background: rgba(255,255,255,.08); outline: 0; }
.st-write { white-space: nowrap; font: 600 13px/1 var(--sans); color: #fff !important; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; padding: 11px 14px; }
.st-write:hover { border-color: var(--orange); }
.st-write--line { border: 0; border-bottom: 2px solid var(--orange); border-radius: 0; padding: 5px 0 4px; }
.st-bar form.search { display: none; flex: 1; }
.st-bar.is-search .t { display: none; }
.st-bar.is-search form.search { display: flex; }
.st-bar form.search input { width: 100%; height: 40px; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; background: rgba(255,255,255,.06); color: #fff; padding: 0 12px; font: 400 16px var(--sans); -webkit-appearance: none; appearance: none; }
.st-bar form.search input::placeholder { color: #8e97aa; }
.st-bar form.search input:focus { outline: 0; border-color: var(--orange); }
.st-bar .back { display: flex; align-items: center; gap: 6px; font: 600 13px var(--sans); color: #fff; min-height: 44px; }
.st-bar .spacer { flex: 1; }
.st-wm { display: flex; flex-direction: column; line-height: 1; flex: 1; }
.st-wm i { font: 600 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); font-style: normal; margin-bottom: 4px; }
.st-wm b { font: 700 23px/1 var(--serif); letter-spacing: -.01em; color: #fff; }

/* ---------- the wall ---------- */
.st-wall { columns: 2; column-gap: 6px; padding: 6px; max-width: var(--racc-page-max, 1600px); margin: 0 auto; }
.st-tile { position: relative; display: block; width: 100%; margin: 0 0 6px; break-inside: avoid; overflow: hidden; border-radius: 2px; background: #1a2231; text-align: left; }
.st-tile img { display: block; width: 100%; height: auto; transition: opacity .6s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.st-tile::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); pointer-events: none; border-radius: 2px; }
.st-tile:hover img { transform: scale(1.025); }
.st-tile:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.st-tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 9px; background: linear-gradient(180deg, rgba(8,12,19,0), rgba(8,12,19,.88)); pointer-events: none; }
.st-tile .cap b { display: block; font: 600 10.5px/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.st-tile .cap span { display: block; font: 400 11.5px/1.3 var(--sans); color: rgba(255,255,255,.7); margin-top: 2px; overflow-wrap: anywhere; }
.st-tile--text { padding: 18px 14px 56px; background: var(--panel); min-height: 150px; }
.st-tile--text h3 { font: 700 19px/1.18 var(--serif); letter-spacing: -.005em; margin: 0 0 8px; color: #fff; }
.st-tile--text p { margin: 0; font-size: 13px; line-height: 1.45; color: #aeb6c6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.st-tile.rv { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.st-tile[hidden] { display: none; }
@media (min-width: 640px) { .st-wall { columns: 3; column-gap: 8px; padding: 8px; } .st-tile { margin-bottom: 8px; } }
@media (min-width: 1000px) {
  .st-wall { columns: 4; padding: 10px 14px 14px; }
  .st-bar { min-height: 62px; padding: 0 24px; }
  .st-bar .t { font-size: 25px; }
}
@media (min-width: 1000px) {
  .st-tile .cap { padding: 28px 14px 12px; }
  .st-tile .cap b { font-size: 13px; }
  .st-tile .cap span { font-size: 14.5px; }
  .st-tile--text h3 { font-size: 22px; }
  .st-tile--text p { font-size: 15px; }
}
@media (hover: hover) and (min-width: 900px) {
  .st-tile .cap { opacity: 0; transform: translateY(5px); transition: opacity .25s ease, transform .25s ease; }
  .st-tile:hover .cap, .st-tile:focus-visible .cap { opacity: 1; transform: none; }
}
.st-end { padding: 18px 16px 34px; color: var(--mut); font-size: 13px; text-align: center; }
.st-end a.more { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 22px; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; color: #fff; font-weight: 600; }
.st-end a.more:hover { border-color: var(--orange); }
.st-empty { padding: 56px 20px; text-align: center; color: var(--mut); max-width: 520px; margin: 0 auto; }
.st-empty h2 { font: 700 24px/1.2 var(--serif); color: #fff; margin: 0 0 8px; }

/* Fades only when the script ran (html.st-js), so nothing stays invisible without it. */
.st-js .st-tile img, .st-js .st-mag .figure img.lead, .st-js .st-strip img, .st-js .st-row .th img { opacity: 0; }
.st-js .st-tile img.ok, .st-js .st-mag .figure img.lead.ok, .st-js .st-strip img.ok, .st-js .st-row .th img.ok { opacity: 1; }
.st-js .st-tile.rv { opacity: 0; transform: translateY(14px); }
.st-js .st-tile.rv.in { opacity: 1; transform: none; }

/* member wall card on the dark wall */
.st-wallpage .mw { margin: 14px auto 28px; max-width: 760px; padding: 0 12px; }
.st-wallpage .mw.dark { max-width: none; padding: 0; margin: 0 auto 40px; }
/* Signed out: eight tiles on the 4-column desktop wall; the last two go below
   1000px so 2 and 3 columns end on whole rows. */
@media (max-width: 999.98px) { .st-wall--teaser .st-tile:nth-child(n+7) { display: none; } }

/* ---------- Magazine story page ---------- */
.st-mag .figure { position: relative; margin: 0; background: var(--slate); overflow: hidden; display: block; width: 100%; }
.st-mag .figure .bd { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); max-width: none; object-fit: cover; filter: blur(26px) saturate(1.1); opacity: .5; transform: scale(1.05); }
.st-mag .figure a { position: relative; display: block; cursor: zoom-in; }
.st-mag .figure img.lead { position: relative; display: block; width: auto; max-width: 100%; height: auto; max-height: 620px; margin: 0 auto; object-fit: contain; transition: opacity .6s ease; }
.st-mag .figure.noimg { min-height: 0; }
.st-mag .wrapc { max-width: 680px; margin: 0 auto; }
.st-mag .head { padding: 24px 20px 0; }
.st-kick { font: 600 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pmut); }
.st-kick a:hover { color: var(--orange); }
.st-mag h1 { font: 700 38px/1.06 var(--serif); letter-spacing: -.018em; margin: 10px 0 14px; text-wrap: balance; color: var(--pink); overflow-wrap: anywhere; }
.st-mag .dek { font: italic 400 19px/1.4 var(--serif); color: #3b4352; margin: 0 0 16px; }
.st-by { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--pmut); flex-wrap: wrap; }
.st-by b { font-weight: 600; color: var(--pink); }
.st-mag .head .st-by { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.st-mag .body { padding: 22px 20px 0; font-family: var(--serif); font-size: 18px; line-height: 1.68; font-variation-settings: "opsz" 14; color: var(--pink); }
.st-mag .body p { margin: 0 0 1.1em; overflow-wrap: anywhere; }
.st-mag .body > p:first-of-type::first-letter { float: left; font: 700 4.3em/.78 var(--serif); padding: .09em .1em 0 0; color: var(--pink); }
.st-mag .body h2 { font: 700 24px/1.2 var(--serif); margin: 1.6em 0 .5em; }
.st-mag .body figure { margin: 1.4em -20px; }
.st-mag .body figure img { display: block; width: 100%; height: auto; }
.st-mag .body figcaption { font: italic 400 14px/1.4 var(--serif); color: var(--pmut); padding: 8px 20px 0; }
.st-mag .as-pull, .st-mag blockquote.as-pull { margin: 6px 0 1.4em; padding: 2px 0 2px 18px; border-left: 3px solid var(--orange); font: italic 400 24px/1.3 var(--serif); letter-spacing: -.005em; color: var(--pink); text-wrap: balance; }
.st-mag .more-link { display: inline-block; margin: 4px 20px 0; font: 600 14px var(--sans); color: var(--blue); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.st-chip { margin: 24px 20px 0; display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 6px; padding: 11px 14px 11px 11px; background: #faf7f0; }
.st-chip .mono { width: 38px; height: 38px; border-radius: 4px; background: var(--slate); color: #fff; display: grid; place-items: center; font: 700 14px var(--serif); flex: none; overflow: hidden; }
.st-chip .mono img { width: 100%; height: 100%; object-fit: cover; }
.st-chip small { display: block; font: 600 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pmut); margin-bottom: 4px; }
.st-chip b { font: 700 17px/1.1 var(--serif); }
.st-chip .go { margin-left: auto; color: var(--blue); }
a.st-chip:hover { border-color: var(--pink); }
.st-sec2 { padding: 34px 20px 14px; }
.st-sec2 h3 { font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--pmut); margin: 0; }
.st-strip { display: flex; gap: 12px; overflow-x: auto; padding: 0 20px 6px; scroll-snap-type: x proximity; scrollbar-width: none; touch-action: pan-x pan-y; }
.st-strip::-webkit-scrollbar { display: none; }
.st-strip a { flex: 0 0 138px; scroll-snap-align: start; cursor: zoom-in; }
.st-strip .th { display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--paper2); border-radius: 2px; }
.st-strip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .6s ease; }

/* sticker reactions */
.st .st-stamps { display: flex; flex-wrap: wrap; gap: 10px; padding: 26px 20px 0; }
.st .st-stamp { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--pink); border-radius: 7px; background: #fffdf8; font: 600 13px var(--sans); color: var(--pink); box-shadow: 0 2px 0 var(--pink); transform: rotate(var(--r, 0deg)); transition: transform .2s ease, box-shadow .2s ease, background .2s, color .2s; }
.st .st-stamp:nth-child(1) { --r: -1.2deg; } .st-stamp:nth-child(2) { --r: .9deg; } .st-stamp:nth-child(3) { --r: -.6deg; } .st-stamp:nth-child(4) { --r: 1.1deg; }
.st .st-stamp:hover { transform: rotate(0) translateY(-1px); }
.st .st-stamp[aria-pressed=true] { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 2px 0 #1b43a8; }
.st .st-stamp .n { font-variant-numeric: tabular-nums; opacity: .8; }
.st .st-stamp .n:empty { display: none; }
.st .st-stamps-note { padding: 8px 20px 0; font-size: 13px; color: var(--pmut); min-height: 22px; }

/* comments */
.st-cm { padding: 34px 20px 0; }
.st-cm h3 { font: 700 22px/1.2 var(--serif); margin: 0 0 4px; }
.st-cm ul { list-style: none; margin: 8px 0 0; padding: 0; }
.st-cm li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.st-cm li .av { width: 34px; height: 34px; background: var(--paper2); }
.st-cm li b { font-size: 13.5px; }
.st-cm li time { font-size: 12px; color: var(--pmut); margin-left: 6px; }
.st-cm li .t { margin: 2px 0 0; font-size: 15px; line-height: 1.5; color: #2c3340; overflow-wrap: anywhere; }
.st-cm form { margin-top: 6px; border-top: 1px solid var(--pink); padding-top: 14px; }
.st-cm textarea { width: 100%; min-height: 96px; border: 1px solid var(--line); border-radius: 4px; background: #fffdf8; padding: 12px; font: 400 16px/1.5 var(--sans); color: var(--pink); resize: vertical; -webkit-appearance: none; appearance: none; }
.st-cm textarea:focus { outline: 0; border-color: var(--pink); }
.st-cm .post { margin-top: 10px; min-height: 44px; padding: 0 20px; border-radius: 4px; background: var(--slate); color: #fff; font: 600 14px var(--sans); }
.st-cm .post:hover { background: #1c2740; }
.st-cm .signin { padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--pink); color: var(--pmut); }
.st-cm .signin a { color: var(--blue); font-weight: 600; }
.st-cm .none { color: var(--pmut); font-size: 14px; margin: 6px 0 14px; }

/* More stories: magazine rows */
.st-rows { padding: 0 20px; }
.st-row { display: grid; grid-template-columns: 100px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: start; }
.st-row:last-child { border-bottom: 0; }
.st-row .th { display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--paper2); border-radius: 2px; }
.st-row .th img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .6s ease; }
.st-row .hl { font: 700 19px/1.18 var(--serif); margin: 6px 0; color: var(--pink); letter-spacing: -.005em; overflow-wrap: anywhere; }
.st-row .dek { margin: 0 0 7px; font-size: 14px; line-height: 1.45; color: #3b4352; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-row .st-by { font-size: 12px; }
.st-row .st-by .av { width: 18px; height: 18px; }
.st-row:hover .hl { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.st-mag .st-foot { margin: 30px 0 0; padding: 22px 20px 36px; background: var(--slate); color: rgba(255,255,255,.65); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; }
.st-mag .st-foot a.st-write { }
.st-draftbar { background: #fef3c7; border-bottom: 1px solid #fde68a; color: #92400e; padding: 10px 20px; font-size: 13px; text-align: center; }
.st-draftbar a { font-weight: 600; margin-left: 12px; text-decoration: underline; }

/* the member wall on paper */
.st-magpage .mw { margin: 26px auto 8px; padding: 0 16px; max-width: 680px; }

/* ---------- full-screen photo viewer ---------- */
.st-viewer { position: fixed; inset: 0; z-index: 2000; background: rgba(5,8,13,.94); display: none; align-items: center; justify-content: center; touch-action: none; }
.st-viewer.open { display: flex; animation: stfade .25s ease; }
@keyframes stfade { from { opacity: 0; } to { opacity: 1; } }
.st-viewer img { max-width: 100vw; max-height: 86vh; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.st-viewer .vb { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: rgba(10,14,22,.6); }
.st-viewer .vb:hover { background: rgba(255,255,255,.18); }
.st-viewer .x { top: 12px; right: 12px; }
.st-viewer .pv { left: 10px; top: 50%; margin-top: -24px; }
.st-viewer .nx { right: 10px; top: 50%; margin-top: -24px; }
.st-viewer .cp { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 70px 18px; text-align: center; color: #cfd4df; font: italic 14px var(--serif); }
.st-viewer .ct { position: absolute; top: 22px; left: 18px; color: #8e97aa; font: 600 12px var(--sans); letter-spacing: .1em; }

/* ---------- write form ---------- */
.st-form { max-width: 680px; margin: 0 auto; padding: 26px 20px 80px; color: var(--pink); }
.st-form h1 { font: 700 30px/1.1 var(--serif); letter-spacing: -.015em; margin: 0 0 6px; }
.st-form .lede { margin: 0 0 22px; color: var(--pmut); font-size: 15px; }
.st-form .status { margin: 0 0 16px; font-size: 13px; color: var(--pmut); }
.st-form label.l { display: block; font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pmut); margin: 26px 0 9px; }
.st-form .err { color: #9c2c20; font-size: 13px; margin-top: 6px; }
.st-form .help { color: var(--pmut); font-size: 13px; margin-top: 6px; }
.st-form .help code { background: var(--paper2); padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.st-drop { position: relative; display: grid; place-items: center; text-align: center; min-height: 150px; border: 1.5px dashed #b9b09b; border-radius: 4px; background: #faf7f0; padding: 22px; transition: border-color .2s, background .2s; }
.st-drop:hover, .st-drop:focus-within { border-color: var(--pink); background: #fffdf8; }
.st-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.st-drop b { display: block; font: 700 18px var(--serif); margin-bottom: 4px; }
.st-drop span { font-size: 13px; color: var(--pmut); }
.st-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 12px; }
.st-preview:empty { display: none; }
.st-preview img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; background: var(--paper2); }
.st-form input.f, .st-form textarea.f, .st-form select.f { width: 100%; border: 0; border-bottom: 1px solid var(--pink); border-radius: 0; background: transparent; padding: 10px 0; color: var(--pink); font: 400 17px/1.4 var(--sans); -webkit-appearance: none; appearance: none; }
.st-form input.f:focus, .st-form textarea.f:focus, .st-form select.f:focus { outline: 0; border-bottom-width: 2px; padding-bottom: 9px; }
.st-form input.f--title { font: 700 28px/1.15 var(--serif); letter-spacing: -.012em; }
.st-form textarea.f { font: 400 18px/1.6 var(--serif); min-height: 260px; resize: vertical; border: 1px solid var(--line); background: #fffdf8; padding: 14px; }
.st-form textarea.f:focus { border: 1px solid var(--pink); padding: 14px; }
.st-form select.f { border: 1px solid var(--line); background: #fffdf8; padding: 12px; font-size: 16px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.st-chips:empty { display: none; }
.st-chips .asf-chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 4px 3px 4px; background: var(--slate); color: #fff; border-radius: 4px; font-size: 14px; font-weight: 600; }
.st-chips .asf-chip img, .st-chips .asf-chip .ph { width: 26px; height: 26px; border-radius: 2px; object-fit: cover; background: rgba(255,255,255,.25); flex: none; }
.st-chips .asf-chip button { width: 36px; height: 36px; color: #fff; font-size: 20px; line-height: 1; }
.st-search { position: relative; }
.st-search input[type=search] { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: #fffdf8; font: 400 16px var(--sans); color: var(--pink); -webkit-appearance: none; appearance: none; }
.st-search input[type=search]:focus { outline: 0; border-color: var(--pink); }
.st-results { position: absolute; left: 0; right: 0; top: 52px; z-index: 30; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 12px 32px rgba(15,30,50,.18); max-height: 320px; overflow: auto; }
.st-results[hidden] { display: none; }
.st-results button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 10px; text-align: left; border-radius: 3px; font-size: 15px; color: var(--pink); }
.st-results button:hover, .st-results button:focus { background: var(--paper); outline: 0; }
.st-results img, .st-results .ph { width: 34px; height: 34px; border-radius: 2px; object-fit: cover; background: var(--paper2); flex: none; }
.st-results .msg { padding: 12px; color: var(--pmut); font-size: 14px; }
.st-more { margin-top: 26px; border-top: 1px solid var(--line); }
.st-more > summary { cursor: pointer; padding: 14px 0; font: 600 13px var(--sans); color: var(--pmut); min-height: 48px; }
.st-actions { display: flex; align-items: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.st .st-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 4px; font: 600 15px var(--sans); border: 1px solid var(--pink); cursor: pointer; }
.st .st-btn--primary { background: var(--slate); color: #fff !important; }
.st .st-btn--primary:hover { background: #1c2740; }
.st .st-btn--ghost { background: transparent; color: var(--pink) !important; }
.st .st-btn--ghost:hover { background: rgba(20,26,38,.06); }
.st .st-btn--danger { color: #9c2c20 !important; border-color: #d9b5b0; }
.st-note { margin: 26px 0 0; font-size: 13px; color: var(--pmut); }
.st-note a { color: var(--blue); border-bottom: 1px solid currentColor; }
.st-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 14px; }
.st-photo { position: relative; aspect-ratio: 1; background: var(--paper2); overflow: hidden; border-radius: 2px; touch-action: none; cursor: grab; user-select: none; }
.st-photo.is-dragging { opacity: .5; box-shadow: 0 0 0 2px var(--orange); z-index: 2; }
.st-photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.st-photo .tok { position: absolute; top: 4px; left: 4px; background: rgba(17,23,35,.85); color: #fff; font-size: 10px; padding: 3px 6px; border-radius: 3px; }
.st-photo .star { position: absolute; bottom: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.92); color: #aaa; font-size: 15px; display: grid; place-items: center; touch-action: manipulation; }
.st-photo .star.is-hero { background: var(--orange); color: #fff; }
.st-photo .del { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--pink); display: grid; place-items: center; font-size: 15px; }
.st-danger { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.st-danger form { margin: 0; }

/* my stories */
.st-mine { max-width: 760px; margin: 0 auto; padding: 26px 20px 70px; color: var(--pink); }
.st-mine h1 { font: 700 30px/1.1 var(--serif); margin: 0 0 18px; }
.st-mine .r { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 14px 0; border-top: 1px solid var(--line); align-items: center; }
.st-mine .r h3 { font: 700 18px/1.2 var(--serif); margin: 0; overflow-wrap: anywhere; }
.st-mine .r .m { font-size: 13px; color: var(--pmut); }
.st-mine .r .a { display: flex; gap: 14px; font-size: 14px; font-weight: 600; grid-column: 1 / -1; }
.st-mine .r .a a { color: var(--blue); min-height: 32px; display: inline-flex; align-items: center; }
.st-badge { font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--pmut); }
.st-badge--published { color: #1d6b3a; border-color: #b6d9c2; }
.st-badge--pending { color: #8a5a00; border-color: #e6cf99; }
.st-badge--rejected { color: #9c2c20; border-color: #e3b6b0; }

/* page header on category / author lists (dark) */
.st-head { padding: 22px 16px 6px; max-width: 1500px; margin: 0 auto; }
.st-head .k { font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.st-head h1 { font: 700 30px/1.1 var(--serif); margin: 8px 0 4px; color: #fff; }
.st-head p { margin: 0; color: var(--mut); }
.st-head .av { width: 64px; height: 64px; margin-bottom: 10px; }

/* ---------- wider screens ---------- */
@media (min-width: 760px) {
  .st-mast { height: 66px; padding: 0 44px; }
  .st-mag .figure img.lead { max-height: 560px; }
  .st-mag .figure a { padding: 28px 0; }
  .st-mag .head, .st-mag .body, .st-stamps, .st-cm, .st-rows, .st-sec2, .st-strip { padding-left: 0; padding-right: 0; }
  .st-mag .st-strip { padding-left: 0; }
  .st-mag .more-link, .st-chip { margin-left: 0; margin-right: 0; }
  .st-mag .body figure { margin-left: 0; margin-right: 0; }
  .st-mag .body figcaption { padding-left: 0; }
  .st-mag h1 { font-size: 46px; }
  .st-stamps-note { padding-left: 0; }
  .st-mag .st-foot { padding-left: 44px; padding-right: 44px; }
  .st-bar.st-mast { padding: 0 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-tile img, .st-tile.rv, .st-mag .figure img.lead, .st-strip img, .st-row .th img { transition: none; }
  .st-js .st-tile.rv { opacity: 1; transform: none; }
  .st-viewer.open { animation: none; }
  .st-stamp { transition: none; }
}

/* The site forces its own face on every tag with !important (base.html), so the two
   Stories faces are set the same way: Inter for text, Fraunces for the display lines. */
html body .st, html body .st p, html body .st li, html body .st a, html body .st button, html body .st input,
html body .st select, html body .st textarea, html body .st label, html body .st span, html body .st small,
html body .st b, html body .st strong, html body .st em, html body .st time, html body .st dt, html body .st dd,
html body .st summary, html body .st blockquote, html body .st figcaption { font-family: var(--sans) !important; }
html body .st h1, html body .st h2, html body .st h3, html body .st .t, html body .st .st-wm b,
html body .st .st-chip b, html body .st .st-chip .mono, html body .st .st-drop b,
html body .st.st-mag .body p, html body .st.st-mag .body blockquote, html body .st.st-mag .body h2,
html body .st.st-mag .body figcaption, html body .st.st-mag .dek, html body .st .st-cm h3,
html body .st .st-form textarea.f, html body .st .st-form input.f--title,
html body .st .st-tile--text h3, html body .st .st-tile--text h3 span,
html body .st .st-viewer .cp, html body .st .st-bar .t { font-family: var(--serif) !important; }
html body .st .st-form .f--title { font-family: var(--serif) !important; }
html body .st .st-kick, html body .st .st-by, html body .st .st-by b, html body .st .st-tile .cap b, html body .st .st-tile .cap span { font-family: var(--sans) !important; }