/* Magazine layout — card grid + sidebar. Completes data-layout=magazine. */

html[data-layout="magazine"] {
  --mag-bg: var(--ws-bg, #0E0F12);
  --mag-surface: var(--ws-surface, #16181D);
  --mag-text: var(--ws-text, #ECEDEF);
  --mag-mute: var(--ws-muted, #9CA0AB);
  --mag-line: var(--ws-line, #2A2D34);
  --mag-accent: var(--ws-accent, #C8302C);
}

html[data-layout="magazine"],
html[data-layout="magazine"] body {
  background: var(--mag-bg) !important;
  color: var(--mag-text) !important;
}

html[data-layout="magazine"] body {
  background-image: none !important;
  padding-bottom: 64px;
}

@media (min-width: 960px) {
  html[data-layout="magazine"] body {
    padding-left: 200px !important;
    padding-bottom: 0;
  }
}

html[data-layout="magazine"] #press-sections,
html[data-layout="magazine"] #press-dock,
html[data-layout="magazine"] #press-room,
html[data-layout="magazine"] #broadsheet,
html[data-layout="magazine"] .press-flag-folio,
html[data-layout="magazine"] .press-word-deck,
html[data-layout="magazine"] .press-folio {
  display: none !important;
}

html[data-layout="magazine"] header.press-mast,
html[data-layout="magazine"] header.ws-header,
html[data-layout="magazine"] .ws-header {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  z-index: 40;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  background: var(--mag-bg) !important;
  color: var(--mag-text) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mag-line) !important;
  box-shadow: none !important;
  background-image: none !important;
  height: auto !important;
  min-height: 52px !important;
  overflow: visible !important;
}

html[data-layout="magazine"] .press-flag,
html[data-layout="magazine"] header.press-mast > .press-flag,
html[data-layout="magazine"] .ws-header > div:first-child {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-areas: "mark search tools" !important;
  grid-template-rows: 52px !important;
  align-items: center !important;
  gap: 10px 14px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  min-height: 52px !important;
  max-height: 52px !important;
  overflow: hidden !important;
  background: none !important;
  background-image: none !important;
}

html[data-layout="magazine"] .press-mark { grid-area: mark; min-width: 0; }
html[data-layout="magazine"] #search-form.press-search,
html[data-layout="magazine"] .press-search { grid-area: search; min-width: 0; max-width: 420px; }
html[data-layout="magazine"] .press-tools {
  grid-area: tools;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 2px;
  width: auto !important;
  max-width: none !important;
}

html[data-layout="magazine"] #wall-btn,
html[data-layout="magazine"] #wall-btn-mobile,
html[data-layout="magazine"] #donate-btn,
html[data-layout="magazine"] #donate-btn-mobile,
html[data-layout="magazine"] #install-btn,
html[data-layout="magazine"] #ws-balance-pill,
html[data-layout="magazine"] .ws-globe {
  display: none !important;
}

html[data-layout="magazine"] .press-flag::after {
  display: none !important;
}

html[data-layout="magazine"] .press-mark img,
html[data-layout="magazine"] .ws-brand img {
  width: 32px !important;
  height: 32px !important;
  flex-basis: 32px !important;
  border-color: var(--mag-line) !important;
  background: var(--mag-surface) !important;
}

html[data-layout="magazine"] .press-word-we,
html[data-layout="magazine"] .ws-brand-name.press-word-we {
  display: block !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  color: var(--mag-text) !important;
}

html[data-layout="magazine"] .press-search,
html[data-layout="magazine"] #search-form.press-search,
html[data-layout="magazine"] #search-input,
html[data-layout="magazine"] .search-input {
  background: var(--mag-surface) !important;
  color: var(--mag-text) !important;
  border: 1px solid var(--mag-line) !important;
  border-radius: 6px !important;
}

html[data-layout="magazine"] #search-input::placeholder {
  color: var(--mag-mute) !important;
}

html[data-layout="magazine"] .press-tools #bell-btn,
html[data-layout="magazine"] .press-tools #refresh-btn,
html[data-layout="magazine"] .press-tools #settings-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  color: var(--mag-text) !important;
  background: transparent !important;
}

html[data-layout="magazine"] #side-nav {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  width: 200px !important;
  height: auto !important;
  top: 0 !important;
  padding-top: 56px;
  background: var(--mag-surface) !important;
  color: var(--mag-text) !important;
  border-right: 1px solid var(--mag-line) !important;
  z-index: 30;
}

html[data-layout="magazine"] .edition-nav {
  display: block !important;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 8px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--mag-line);
  background: var(--mag-bg);
}

html[data-layout="magazine"] .edition-nav-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  max-width: none !important;
  padding: 0 !important;
}

html[data-layout="magazine"] #side-nav .side-tab,
html[data-layout="magazine"] #side-nav .side-nav-label {
  color: var(--mag-text);
}

@media (max-width: 959px) {
  html[data-layout="magazine"] #side-nav {
    display: none !important;
  }
  html[data-layout="magazine"] .mobile-bottom-nav,
  html[data-layout="magazine"] nav.mobile-bottom-nav {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    background: var(--mag-surface) !important;
    color: var(--mag-text) !important;
    border-top: 1px solid var(--mag-line) !important;
  }
}

html[data-layout="magazine"] #press-fountain,
html[data-layout="magazine"] .press-gutter,
html[data-layout="magazine"] #home-masthead,
html[data-layout="magazine"] .press-colophon,
html[data-layout="magazine"] #community-spotlight-home,
html[data-layout="magazine"] .signal-board,
html[data-layout="magazine"] #editors-note-wrap,
html[data-layout="magazine"] #perspective-tools {
  display: none !important;
}

html[data-layout="magazine"] .edition-nav,
html[data-layout="magazine"] .latest-section,
html[data-layout="magazine"] .feed-toolbar,
html[data-layout="magazine"] #feed-chips,
html[data-layout="magazine"] #feed-controls {
  display: block !important;
  visibility: visible !important;
}

html[data-layout="magazine"] #frontpage,
html[data-layout="magazine"] #frontpage.press-sheet-wrap {
  max-width: 80rem !important;
  margin: 0 auto !important;
  padding: 16px 20px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

html[data-layout="magazine"] #frontpage-grid,
html[data-layout="magazine"] #frontpage-grid.mag-issue,
html[data-layout="magazine"] #frontpage-grid.broadsheet-form,
html[data-layout="magazine"] #frontpage-grid.press-form {
  display: block !important;
  background: transparent !important;
}

html[data-layout="magazine"] .mag-issue {
  display: block;
  max-width: 1080px;
  margin: 0 auto;
}

html[data-layout="magazine"] .mag-folio {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 14px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--mag-accent);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mag-mute);
}

html[data-layout="magazine"] .mag-cover {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, .8fr);
  gap: 22px;
  align-items: end;
  margin: 18px 0 28px;
  text-decoration: none;
  color: inherit;
}

html[data-layout="magazine"] .mag-cover-typeonly {
  grid-template-columns: 1fr;
}

html[data-layout="magazine"] .mag-cover-img,
html[data-layout="magazine"] .mag-feat-img,
html[data-layout="magazine"] .mag-portrait-img,
html[data-layout="magazine"] .mag-shot-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--mag-surface);
}

html[data-layout="magazine"] .mag-cover-img {
  aspect-ratio: 4 / 5;
  max-height: 620px;
}

html[data-layout="magazine"] .mag-cover-type {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}

html[data-layout="magazine"] .mag-kicker {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mag-accent);
  font-weight: 700;
}

html[data-layout="magazine"] .mag-cover-hed {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--mag-text);
}

html[data-layout="magazine"] .mag-hed {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 26px;
  line-height: 1.12;
  font-weight: 700;
  color: var(--mag-text);
}

html[data-layout="magazine"] .mag-dek {
  font-size: 16px;
  line-height: 1.45;
  color: var(--mag-mute);
}

html[data-layout="magazine"] .mag-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  padding: 8px 0 24px;
  border-top: 1px solid var(--mag-line);
}

html[data-layout="magazine"] .mag-feat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

html[data-layout="magazine"] .mag-feat-img {
  aspect-ratio: 16 / 10;
}

html[data-layout="magazine"] .mag-well {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .72fr);
  gap: 28px;
  padding: 22px 0;
  border-top: 1px solid var(--mag-line);
}

html[data-layout="magazine"] .mag-typecol {
  display: flex;
  flex-direction: column;
}

html[data-layout="magazine"] .mag-type,
html[data-layout="magazine"] .mag-index {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--mag-line);
  text-decoration: none;
  color: inherit;
}

html[data-layout="magazine"] .mag-type .mag-hed {
  font-size: 22px;
}

html[data-layout="magazine"] .mag-type .mag-dek {
  margin-top: 6px;
}

html[data-layout="magazine"] .mag-portrait {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

html[data-layout="magazine"] .mag-portrait-img {
  aspect-ratio: 3 / 4;
}

html[data-layout="magazine"] .mag-photos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 8px 0 24px;
}

html[data-layout="magazine"] .mag-shot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}

html[data-layout="magazine"] .mag-shot-img {
  aspect-ratio: 1;
}

html[data-layout="magazine"] .mag-shot-hed {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
  line-height: 1.2;
  color: var(--mag-text);
}

html[data-layout="magazine"] .mag-contents {
  padding-top: 8px;
  border-top: 2px solid var(--mag-accent);
}

html[data-layout="magazine"] .mag-contents-flag {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mag-accent);
  font-weight: 700;
  margin: 10px 0 4px;
}

html[data-layout="magazine"] .mag-index .mag-hed {
  font-size: 18px;
}

html[data-layout="magazine"] #feed-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}

html[data-layout="magazine"] #feed-grid .ed-card .thumb,
html[data-layout="magazine"] #feed-grid .ed-card .thumb-wrap,
html[data-layout="magazine"] #feed-grid .ed-card .ws-plate {
  display: none !important;
}

html[data-layout="magazine"] #feed-grid .ed-card {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mag-line) !important;
  border-radius: 0 !important;
  padding: 12px 0;
}

@media (max-width: 959px) {
  html[data-layout="magazine"] .mag-cover,
  html[data-layout="magazine"] .mag-features,
  html[data-layout="magazine"] .mag-well,
  html[data-layout="magazine"] .mag-photos,
  html[data-layout="magazine"] #feed-grid {
    grid-template-columns: 1fr;
  }
  html[data-layout="magazine"] .mag-cover-img {
    aspect-ratio: 4 / 5;
    max-height: 420px;
  }
  html[data-layout="magazine"] .mag-photos {
    grid-template-columns: 1fr 1fr;
  }
}