
:root {
 --ink: #102238;
 --ink-soft: #293b50;
 --paper: #f5f3ee;
 --white: #ffffff;
 --line: #d7dde2;
 --teal: #14796f;
 --red: #a8322b;
 --gold: #d39a32;
 --muted: #687587;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Arial, sans-serif; }
a { color: inherit; }
.topbar {
 min-height: 86px; padding: 18px clamp(20px,5vw,74px); display: flex; align-items: center;
 justify-content: space-between; gap: 24px; color: var(--ink); background: rgba(255,255,255,.97);
 border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 13px; color: var(--ink); font-size: 18px; font-weight: 900; text-decoration: none; }
.brand::before { content:""; width: 48px; height: 48px; background: url("sa-logo-transparent.png") center/contain no-repeat; }
.brand span { padding-left: 8px; border-left: 1px solid var(--line); color: var(--teal); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
nav { display: flex; gap: 4px; }
nav a { padding: 12px 15px; color: var(--ink-soft); font-size: 14px; font-weight: 800; text-decoration: none; }
nav a:hover { color: var(--red); }
.modern-hero {
 min-height: 570px; padding: 70px clamp(20px,6vw,92px) 42px; display: grid;
 grid-template-columns: 190px minmax(0,1fr); gap: clamp(25px,5vw,80px);
 align-items: center; color: #fff; background: var(--ink); position: relative; overflow: hidden;
}
.modern-hero::before {
 content:""; position:absolute; inset:0; pointer-events:none;
 background: repeating-linear-gradient(90deg, transparent 0 89px, rgba(255,255,255,.045) 89px 90px);
}
.modern-hero::after {
 content:"ARCHIVE"; position:absolute; right:-25px; bottom:-36px; color:rgba(255,255,255,.035);
 font-size:clamp(90px,18vw,280px); font-weight:900; line-height:.8; letter-spacing:-.06em;
}
.hero-mark { position: relative; z-index: 1; align-self: start; }
.hero-mark img {
 width: 190px;
 height: 190px;
 object-fit: contain;
 opacity: .22;
 filter: grayscale(.35) drop-shadow(0 12px 20px rgba(0,0,0,.12));
}
.hero-copy { position: relative; z-index: 1; }
.kicker { margin: 0 0 14px; color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.modern-hero h1 { margin: 0; font-size: clamp(68px,11vw,150px); line-height: .77; letter-spacing: -.055em; }
.intro { max-width: 610px; margin: 32px 0 0; color: rgba(255,255,255,.74); font-size: 21px; line-height: 1.55; }
.search-section { padding: 76px clamp(20px,6vw,92px) 100px; background: #f5f3ee; }
.search-heading { max-width: 690px; }
.search-heading h2, .page-intro h1, .wrap > h1 { margin:0; font-size:clamp(48px,7vw,86px); line-height:.9; letter-spacing:-.04em; }
.collection-links { margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; }
.collection-links a { padding:12px 15px; color:#fff; background:var(--ink); border-radius:3px; font-size:12px; font-weight:900; letter-spacing:.06em; text-decoration:none; text-transform:uppercase; }
.collection-links a.active-year { background:var(--teal); }
.search-workspace { margin-top:32px; }
.toolbar { padding:12px; display:grid; grid-template-columns:1fr 230px; gap:10px; background:#fff; border:1px solid var(--line); box-shadow:0 16px 45px rgba(16,34,56,.08); }
input,select { width:100%; min-height:52px; padding:12px 15px; border:1px solid #cbd3da; border-radius:3px; background:#fff; color:var(--ink); font:15px Arial,sans-serif; }
input:focus,select:focus { outline:3px solid rgba(20,121,111,.15); border-color:var(--teal); }
.grid { margin-top:22px; display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:15px; }
.card { min-height:210px; padding:22px; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:5px; box-shadow:0 9px 25px rgba(16,34,56,.055); }
.card::before { content:""; width:42px; height:5px; margin-bottom:14px; background:var(--teal); }
.card:nth-child(3n+2)::before { background:var(--red); }
.card:nth-child(3n)::before { background:var(--gold); }
.card h2 { margin:12px 0; font-size:24px; line-height:1.12; }
.card h2 a { text-decoration-thickness:1px; text-underline-offset:4px; }
.card p { margin:0; color:var(--muted); line-height:1.48; }
.meta,.eyebrow { color:var(--teal)!important; font-size:10px!important; font-weight:900!important; letter-spacing:.1em!important; text-transform:uppercase; }
.wrap { max-width:1240px; margin:0 auto; padding:70px 20px 95px; }
.page-intro { margin-bottom:35px; }
.issue-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.issue-card { min-height:285px; border:1px solid var(--line); border-radius:5px; background:#fff; box-shadow:0 12px 32px rgba(16,34,56,.07); }
.issue-card-body { height:100%; padding:25px; display:flex; flex-direction:column; }
.issue-card-body h2 { margin:12px 0; font-size:40px; }
.issue-card-body p { color:var(--muted); line-height:1.5; }
.button-link { align-self:flex-start; margin-top:auto; padding:12px 16px; color:#fff; background:var(--red); border-radius:3px; font-size:12px; font-weight:900; text-decoration:none; text-transform:uppercase; letter-spacing:.06em; }
.article { max-width:930px; margin:0 auto; padding:75px 28px 105px; }
.article::before { content:"JOURNAL"; display:block; margin-bottom:30px; color:rgba(16,34,56,.07); font-size:clamp(72px,14vw,160px); font-weight:900; line-height:.65; letter-spacing:-.055em; }
.backlink { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.article h1 { margin:14px 0 26px; font-size:clamp(52px,8vw,98px); line-height:.9; letter-spacing:-.045em; }
.lede { padding:22px 0 22px 24px; border-left:5px solid var(--red); color:var(--ink-soft); font-size:22px; line-height:1.5; }
.article-body { max-width:760px; font-size:19px; line-height:1.76; }
.attachments { margin-top:40px; padding:24px; border:1px solid var(--line); border-radius:4px; background:#fff; }
.attachments h2 { margin-top:0; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.attachments a { display:inline-block; padding:12px 16px; color:#fff; background:var(--teal); border-radius:3px; font-weight:800; text-decoration:none; }
.pdf-viewer { min-height:calc(100vh - 72px); display:flex; flex-direction:column; background:#f5f3ee; }
.pdf-viewer-bar { padding:18px clamp(20px,5vw,70px); display:flex; align-items:center; justify-content:space-between; gap:18px; background:#fff; border-bottom:1px solid var(--line); }
.pdf-viewer-bar h1 { margin:4px 0 0; font-size:clamp(24px,4vw,42px); line-height:1; letter-spacing:-.03em; }
.pdf-viewer iframe { width:100%; flex:1; min-height:calc(100vh - 190px); border:0; background:#fff; }
.issue-detail { max-width:1180px; margin:0 auto; padding:60px 20px 95px; }
.issue-detail-hero { padding:34px; display:grid; grid-template-columns:350px 1fr; gap:40px; align-items:center; color:#fff; background:var(--ink); }
.issue-detail-hero img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.issue-detail-hero h1 { margin:8px 0; font-size:clamp(58px,9vw,108px); line-height:.88; }
.issue-detail-hero p:last-child { color:rgba(255,255,255,.68); font-size:18px; }
.issue-detail-grid { margin-top:22px; display:grid; gap:17px; }
.issue-detail-section { padding:25px; background:#fff; border:1px solid var(--line); border-radius:5px; }
.issue-detail-section h2 { margin-top:0; color:var(--red); font-size:13px; text-transform:uppercase; letter-spacing:.1em; }
.article-list { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.article-list li { padding:13px 14px; border-bottom:1px solid var(--line); }
.article-list a { font-weight:800; }
.muted { color:var(--muted); }
@media(max-width:850px) {
 .topbar { align-items:flex-start; flex-direction:column; }
 .modern-hero { min-height:auto; padding-top:55px; grid-template-columns:1fr; }
 .hero-mark img { width:120px; height:120px; opacity:.22; }
 .toolbar,.issue-detail-hero { grid-template-columns:1fr; }
 nav { flex-wrap:wrap; }
}
.issue-card-date {
 margin:0 0 24px;
 font-size:clamp(34px,4.6vw,56px);
 line-height:.9;
 letter-spacing:-.04em;
}
.issue-card-date a {
 color:var(--ink);
 text-decoration:none;
}
.issue-card-date a:hover {
 color:var(--teal);
}
.issue-card-body > p:not(.meta) {
 margin-top:auto;
}

.issue-detail-date {
  margin:0 0 18px;
  font-size:clamp(54px,8vw,112px);
  line-height:.82;
  letter-spacing:-.055em;
}

/* Open issue pages: use the association badge as a soft watermark instead of a cover card. */
.issue-detail-hero {
  position:relative;
  overflow:hidden;
  min-height:260px;
  grid-template-columns:1fr;
  background:linear-gradient(135deg, #10263c 0%, #197f75 100%);
}
.issue-detail-hero::after {
  content:"";
  position:absolute;
  right:34px;
  top:50%;
  width:min(260px, 42vw);
  aspect-ratio:1;
  transform:translateY(-50%);
  background:url("sa-logo-transparent.png") center/contain no-repeat;
  opacity:.12;
  pointer-events:none;
}
.issue-detail-hero > div {
  position:relative;
  z-index:1;
  max-width:760px;
}
.issue-detail-hero > img {
  display:none;
}

.issue-watermark-logo {
  display:block !important;
  position:absolute;
  right:34px;
  top:50%;
  width:min(260px, 42vw);
  transform:translateY(-50%);
  opacity:.18;
  pointer-events:none;
  z-index:0;
}
