:root { --wrap: 1100px; }
* { box-sizing: border-box; }
body { margin:0; font-family: ui-serif, Georgia, serif; line-height:1.5; color:#111; background:#faf8f4; }
a { color: inherit; }
.wrap { width:min(var(--wrap), calc(100% - 2rem)); margin:0 auto; }

.site-header { position:sticky; top:0; background:rgba(250,248,244,.92); backdrop-filter: blur(8px); border-bottom:1px solid rgba(0,0,0,.08); z-index:50; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding: .8rem 0; }
.site-title { font-family: ui-serif, Georgia, serif; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; font-weight:700; }
.nav-primary ul { display:flex; gap:1rem; list-style:none; margin:0; padding:0; }
.nav-primary a { text-decoration:none; opacity:.9; }
.nav-primary a:hover { opacity:1; text-decoration:underline; }

.hero { position:relative; overflow:hidden; border-bottom:1px solid rgba(0,0,0,.08); }
.hero-media { height: 58vh; min-height: 360px; background-size: cover; background-position:center; filter: contrast(1.05) saturate(0.95); }
.hero-content { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding: 2.2rem 0; }
.hero-content .hero-kicker { text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; opacity:.85; }
.hero-title { margin:.2rem 0 .2rem; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing:.02em; }
.hero-sub { max-width: 58ch; font-size:1.05rem; background: rgba(250,248,244,.84); padding:.6rem .8rem; display:inline-block; }
.button { display:inline-block; margin-top:.8rem; padding:.6rem .9rem; border:1px solid rgba(0,0,0,.25); border-radius:999px; text-decoration:none; background: rgba(250,248,244,.9); width: fit-content; }

.section { padding: 2.2rem 0; }
.section-alt { background: rgba(0,0,0,.03); border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06); }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom: 1rem; }
.section-head h1, .section-head h2 { margin:0; }
.section-head p { margin:.3rem 0 0; opacity:.9; }

.grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.card { grid-column: span 4; background: rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.08); border-radius: 14px; overflow:hidden; box-shadow: 0 6px 20px rgba(0,0,0,.04); }
.card-link { display:block; text-decoration:none; }
.card-thumb img { width:100%; height: 220px; object-fit: cover; display:block; }
.card-body { padding: .9rem; }
.card-title { margin: 0 0 .35rem; font-size: 1.15rem; }
.card-meta { font-size:.85rem; opacity:.7; margin-bottom:.4rem; }
.card-excerpt { margin:0; opacity:.9; }

.prose { max-width: 72ch; }
.prose img { max-width:100%; height:auto; }

.site-footer { padding: 1.6rem 0; opacity:.9; }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.nav-footer ul { display:flex; gap:1rem; list-style:none; margin:0; padding:0; }
.nav-footer a { text-decoration:none; }
.fineprint { font-size:.9rem; opacity:.8; }

.article-hero img { width:100%; height:auto; border-radius: 14px; }

@media (max-width: 900px) {
  .card { grid-column: span 6; }
  .hero-content { position:relative; background: linear-gradient(to top, rgba(250,248,244,.92), rgba(250,248,244,.55), transparent); }
  .hero-media { height: 46vh; }
}
@media (max-width: 620px) {
  .card { grid-column: span 12; }
  .section-head { flex-direction:column; align-items:flex-start; }
  .nav-primary ul { flex-wrap: wrap; }
}

/* Mid-century Pageant layout accents */
.feature-spread {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 1.2rem;
  align-items: start;
}

.feature-main {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.65);
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}

.feature-link { display:block; text-decoration:none; }
.feature-image img { width:100%; height: 420px; object-fit: cover; display:block; }
.feature-text { padding: 1rem 1.1rem 1.2rem; }
.feature-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; opacity: .8; }
.feature-title { margin: .25rem 0 .45rem; font-size: 1.8rem; line-height: 1.15; }
.feature-excerpt { margin: 0; font-size: 1.05rem; opacity: .92; }

.feature-secondary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.feature-secondary .card { grid-column: auto; }

.issue-list {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(0,0,0,.10);
}
.issue-list-title {
  margin: 0 0 .6rem;
  letter-spacing:.04em;
}
.issue-list-items {
  columns: 2;
  column-gap: 2rem;
  margin: 0;
  padding-left: 1.1rem;
}
.issue-list-items li { margin: .35rem 0; }
.issue-list-items a { text-decoration: none; }
.issue-list-items a:hover { text-decoration: underline; }

/* TOC styling */
.toc { padding: 1.6rem 0; background: rgba(0,0,0,.03); border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06); }
.toc-title { margin: 0 0 .6rem; letter-spacing:.06em; }
.toc-list { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.toc-item { margin: .35rem 0; }
.toc-item a { text-decoration:none; }
.toc-item a:hover { text-decoration:underline; }

@media (max-width: 980px) {
  .feature-spread { grid-template-columns: 1fr; }
  .feature-image img { height: 340px; }
  .issue-list-items, .toc-list { columns: 1; }
}

/* From the Editor */
.editor-note {
  padding: 1.6rem 0;
  background: rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.editor-note-inner {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.04);
  background: rgba(250,248,244,.85);
}
.editor-note-label {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .75rem;
  opacity: .85;
  margin-bottom: .5rem;
}
.editor-note-body {
  font-size: 1.05rem;
  max-width: 70ch;
}
.editor-note-body p { margin: .55rem 0; }

/* Featured Gallery Strip */
.featured-strip {
  padding: 1.8rem 0 2.2rem;
  background: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.featured-strip-head {
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.featured-strip-title {
  margin:0;
  letter-spacing:.04em;
}
.featured-strip-sub {
  opacity:.85;
  font-size: .95rem;
}

.featured-strip-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}
.featured-strip-item {
  display:block;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.6);
  box-shadow: 0 10px 22px rgba(0,0,0,.04);
  scroll-snap-align: start;
  text-decoration:none;
}
.featured-strip-item img {
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
  filter: contrast(1.02) saturate(.98);
}
@media (max-width: 700px) {
  .featured-strip-head { flex-direction: column; align-items:flex-start; }
  .featured-strip-row { grid-auto-columns: minmax(150px, 1fr); }
  .featured-strip-item img { height: 180px; }
}

/* Cover lines overlay (desktop/tablet) */
.cover-lines {
  position: absolute;
  top: 16%;
  left: 6%;
  max-width: 420px;
  background: rgba(250,248,244,.82);
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 16px;
  padding: .85rem 1rem;
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}
.cover-lines-list {
  margin: 0;
  padding-left: 1.1rem;
  column-count: 1;
}
.cover-lines-list li {
  margin: .35rem 0;
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: .01em;
}

/* Mobile mini TOC: visible on small screens */
.mini-toc {
  display: none;
  padding: 1.2rem 0 1.3rem;
  background: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.mini-toc-inner {
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  background: rgba(250,248,244,.88);
  padding: .95rem 1.05rem;
}
.mini-toc-title {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .75rem;
  opacity: .85;
  margin-bottom: .55rem;
}
.mini-toc-coverlines {
  margin: 0 0 .7rem;
  padding-left: 1.1rem;
}
.mini-toc-coverlines li {
  margin: .25rem 0;
}
.mini-toc-posts {
  margin: 0;
  padding-left: 1.2rem;
}
.mini-toc-posts li { margin: .25rem 0; }
.mini-toc-posts a { text-decoration: none; }
.mini-toc-posts a:hover { text-decoration: underline; }

/* Responsive behavior:
   - Hide overlay on small screens
   - Show mini TOC on small screens
*/
@media (max-width: 860px) {
  .cover-lines { display: none; }
  .mini-toc { display: block; }
}


/* Force linked cover-lines overlay to show on desktop hero */
.hero { position: relative; }
.hero-media { position: relative; z-index: 1; }
.hero-content { z-index: 2; }

.cover-lines {
  display: block !important;
  position: absolute;
  top: 16%;
  left: 6%;
  max-width: 420px;
  z-index: 30 !important;
  pointer-events: auto;
}
.cover-lines a {
  color: inherit;
  text-decoration: none;
}
.cover-lines a:hover {
  text-decoration: underline;
}

/* On small screens, keep using the mini TOC instead of the hero overlay */
@media (max-width: 860px) {
  .cover-lines { display: none !important; }
}


/* Hero cover lines inside hero-content for reliable display */
.hero-content {
  justify-content: space-between;
}
.hero-coverlines-slot {
  padding-top: 1.2rem;
}
.hero-coverlines-slot .cover-lines {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: 5 !important;
  display: block !important;
  width: fit-content;
}
.hero-copy {
  margin-top: auto;
}
@media (max-width: 860px) {
  .hero-coverlines-slot .cover-lines {
    display: none !important;
  }
}


/* Magazine-style hero cover line layout */
.hero-coverlines-slot {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-coverlines-slot .cover-lines {
  position: absolute !important;
  inset: 0;
  width: 100%;
  max-width: none;
  background: none;
  border: none;
  box-shadow: none;
  pointer-events: none;
}

.cover-lines-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* First line near top */
.cover-lines-list li:first-child {
  position: absolute;
  top: 18%;
  left: 6%;
  max-width: 420px;
  font-size: 1.2rem;
  font-weight: 600;
  pointer-events: auto;
}

/* Remaining lines lower */
.cover-lines-list li:nth-child(2) { position:absolute; top:45%; left:6%; max-width:420px; }
.cover-lines-list li:nth-child(3) { position:absolute; top:52%; left:6%; max-width:420px; }
.cover-lines-list li:nth-child(4) { position:absolute; top:59%; left:6%; max-width:420px; }
.cover-lines-list li:nth-child(5) { position:absolute; top:66%; left:6%; max-width:420px; }
.cover-lines-list li:nth-child(6) { position:absolute; top:73%; left:6%; max-width:420px; }

.cover-lines a { text-decoration:none; color:inherit; }
.cover-lines a:hover { text-decoration:underline; }

@media (max-width: 860px) {
  .hero-coverlines-slot { display:none; }
}


/* Robust magazine cover-line system */
.hero-coverlines-slot {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.cover-lines.cover-lines-magazine {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100%;
  max-width: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none;
}

.cover-lines.cover-lines-magazine .cover-lines-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cover-lines.cover-lines-magazine .cover-line-item {
  position: absolute;
  max-width: 34ch;
  pointer-events: auto;
  line-height: 1.15;
  font-size: 1rem;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(255,255,255,.7), 0 0 12px rgba(255,255,255,.35);
}

.cover-lines.cover-lines-magazine .cover-line-item a {
  color: #111;
  text-decoration: none;
}

.cover-lines.cover-lines-magazine .cover-line-item a:hover {
  text-decoration: underline;
}

.cover-lines.cover-lines-magazine .cover-line-item.is-main {
  font-size: 1.35rem;
  font-weight: 700;
  max-width: 24ch;
}

/* left / right positioning */
.cover-lines.cover-lines-magazine .cover-line-item.side-left { left: 6%; text-align: left; }
.cover-lines.cover-lines-magazine .cover-line-item.side-right { right: 6%; text-align: right; }

/* vertical slots */
.cover-lines.cover-lines-magazine .cover-line-slot-1 { top: 18%; }
.cover-lines.cover-lines-magazine .cover-line-slot-2 { top: 38%; }
.cover-lines.cover-lines-magazine .cover-line-slot-3 { top: 48%; }
.cover-lines.cover-lines-magazine .cover-line-slot-4 { top: 58%; }
.cover-lines.cover-lines-magazine .cover-line-slot-5 { top: 68%; }
.cover-lines.cover-lines-magazine .cover-line-slot-6 { top: 78%; }
.cover-lines.cover-lines-magazine .cover-line-slot-7 { top: 28%; }
.cover-lines.cover-lines-magazine .cover-line-slot-8 { top: 86%; }

@media (max-width: 1100px) {
  .cover-lines.cover-lines-magazine .cover-line-item { max-width: 28ch; font-size: .95rem; }
  .cover-lines.cover-lines-magazine .cover-line-item.is-main { font-size: 1.2rem; }
}

@media (max-width: 860px) {
  .hero-coverlines-slot { display: none !important; }
}


/* Tuning pass: larger text + tighter vertical grouping */
.cover-lines.cover-lines-magazine .cover-line-item {
  font-size: 1.12rem;
  line-height: 1.08;
  max-width: 30ch;
}

.cover-lines.cover-lines-magazine .cover-line-item.is-main {
  font-size: 1.6rem;
  line-height: 1.02;
  max-width: 22ch;
}

/* tighter slot spacing */
.cover-lines.cover-lines-magazine .cover-line-slot-1 { top: 20%; }
.cover-lines.cover-lines-magazine .cover-line-slot-2 { top: 41%; }
.cover-lines.cover-lines-magazine .cover-line-slot-3 { top: 48%; }
.cover-lines.cover-lines-magazine .cover-line-slot-4 { top: 55%; }
.cover-lines.cover-lines-magazine .cover-line-slot-5 { top: 62%; }
.cover-lines.cover-lines-magazine .cover-line-slot-6 { top: 69%; }
.cover-lines.cover-lines-magazine .cover-line-slot-7 { top: 34%; }
.cover-lines.cover-lines-magazine .cover-line-slot-8 { top: 76%; }

@media (max-width: 1100px) {
  .cover-lines.cover-lines-magazine .cover-line-item { font-size: 1.02rem; max-width: 26ch; }
  .cover-lines.cover-lines-magazine .cover-line-item.is-main { font-size: 1.34rem; }
}


/* Refinement pass: fewer simultaneous blurbs + stronger hierarchy */
.cover-lines.cover-lines-magazine .cover-line-item {
  font-size: 1.06rem;
  line-height: 1.06;
  letter-spacing: 0.01em;
  max-width: 26ch;
  font-weight: 500;
}

.cover-lines.cover-lines-magazine .cover-line-item.is-main {
  font-size: 1.9rem;
  line-height: 0.98;
  letter-spacing: 0;
  max-width: 18ch;
  font-weight: 700;
}

/* tighter, more intentional placement */
.cover-lines.cover-lines-magazine .cover-line-slot-1 { top: 18%; }
.cover-lines.cover-lines-magazine .cover-line-slot-2 { top: 46%; }
.cover-lines.cover-lines-magazine .cover-line-slot-3 { top: 53%; }
.cover-lines.cover-lines-magazine .cover-line-slot-4 { top: 60%; }
.cover-lines.cover-lines-magazine .cover-line-slot-5 { top: 67%; }
.cover-lines.cover-lines-magazine .cover-line-slot-6 { top: 74%; }

/* hide extra blurbs on desktop to keep the cover cleaner */
@media (min-width: 861px) {
  .cover-lines.cover-lines-magazine .cover-line-slot-7,
  .cover-lines.cover-lines-magazine .cover-line-slot-8 {
    display: none;
  }
}

/* slightly stronger readability */
.cover-lines.cover-lines-magazine .cover-line-item {
  text-shadow: 0 1px 2px rgba(255,255,255,.78), 0 0 14px rgba(255,255,255,.42);
}

@media (max-width: 1100px) {
  .cover-lines.cover-lines-magazine .cover-line-item {
    font-size: 0.98rem;
    max-width: 24ch;
  }
  .cover-lines.cover-lines-magazine .cover-line-item.is-main {
    font-size: 1.5rem;
    max-width: 17ch;
  }
}


/* Grouped magazine cover-line layout: main + left stack + right stack */
.hero-coverlines-slot {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.cover-lines.cover-lines-grouped {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cover-lines.cover-lines-grouped a {
  color: #111;
  text-decoration: none;
}
.cover-lines.cover-lines-grouped a:hover {
  text-decoration: underline;
}

.cover-lines-main,
.cover-lines-left,
.cover-lines-right {
  pointer-events: none;
}

.cover-lines-main a,
.cover-lines-left .cover-line-item,
.cover-lines-right .cover-line-item {
  pointer-events: auto;
}

/* Main feature */
.cover-lines-main {
  position: absolute;
  top: 18%;
  left: 6%;
  max-width: 18ch;
  font-size: 1.95rem;
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(255,255,255,.82), 0 0 14px rgba(255,255,255,.42);
}

/* Secondary stacks */
.cover-lines-left,
.cover-lines-right {
  position: absolute;
  top: 47%;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  max-width: 26ch;
}

.cover-lines-left {
  left: 6%;
  text-align: left;
}

.cover-lines-right {
  right: 6%;
  text-align: right;
}

.cover-lines-left .cover-line-item,
.cover-lines-right .cover-line-item {
  font-size: 1.08rem;
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(255,255,255,.78), 0 0 14px rgba(255,255,255,.42);
}

/* Keep the cover clean: cap visible blurbs on desktop */
@media (min-width: 861px) {
  .cover-lines-left .cover-line-item:nth-child(n+4),
  .cover-lines-right .cover-line-item:nth-child(n+4) {
    display: none;
  }
}

@media (max-width: 1100px) {
  .cover-lines-main {
    font-size: 1.55rem;
    max-width: 17ch;
  }
  .cover-lines-left,
  .cover-lines-right {
    top: 49%;
    max-width: 23ch;
  }
  .cover-lines-left .cover-line-item,
  .cover-lines-right .cover-line-item {
    font-size: 0.98rem;
  }
}

@media (max-width: 860px) {
  .hero-coverlines-slot {
    display: none !important;
  }
}


/* Disable previous slot-based cover line positioning */
.cover-lines.cover-lines-magazine,
.cover-lines.cover-lines-magazine .cover-lines-list,
.cover-lines.cover-lines-magazine .cover-line-item {
  all: unset;
}


/* Fix coverline overlay anchoring: attach directly to hero, not hero-content flex flow */
.hero {
  position: relative;
}
.hero-coverlines-slot {
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  pointer-events: none !important;
}
.cover-lines.cover-lines-grouped {
  position: absolute !important;
  inset: 0 !important;
}
.hero-content {
  z-index: 6;
}


/* Robust cover deck below hero */
.hero-coverlines-slot {
  display: none !important;
}

.cover-deck {
  padding: 1.1rem 0 1.6rem;
  background: rgba(250,248,244,.92);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.cover-deck-inner {
  border-top: 2px solid rgba(0,0,0,.14);
  padding-top: .8rem;
}

.cover-deck-kicker {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  opacity: .78;
  margin-bottom: .7rem;
}

.cover-deck-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.2rem 1.6rem;
  align-items: start;
}

.cover-deck-main {
  padding-right: .5rem;
}

.cover-deck-label {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  opacity: .75;
  margin-bottom: .3rem;
}

.cover-deck-main-link {
  text-decoration: none;
  display: block;
}

.cover-deck-main-title {
  margin: 0;
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.cover-deck-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  align-content: start;
}

.cover-deck-item {
  display: block;
  text-decoration: none;
  padding: .4rem 0;
  border-top: 1px solid rgba(0,0,0,.10);
  font-size: 1.02rem;
  line-height: 1.12;
}

.cover-deck-item:last-child {
  border-bottom: 1px solid rgba(0,0,0,.10);
  padding-bottom: .55rem;
}

.cover-deck-item:hover,
.cover-deck-main-link:hover .cover-deck-main-title {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .cover-deck-grid {
    grid-template-columns: 1fr;
    gap: .8rem;
  }
  .cover-deck-main-title {
    font-size: 1.5rem;
  }
  .cover-deck-item {
    font-size: .98rem;
  }
}


/* Image-only hero */
.hero {
  position: relative;
}
.hero-media {
  height: 58vh;
  min-height: 420px;
}
.hero-content,
.hero-kicker,
.hero-title,
.hero-sub,
.hero .button {
  display: none !important;
}