/* v0.12.0-dev.15 — Hamburg–Klondike story, SEO backs and postcard sharing */

.story-intro {
  display: grid;
  gap: 10px;
  width: min(1120px, 100%);
  margin: 0 auto 24px;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(198,151,54,.42);
  border-left: 6px solid var(--gold);
  background: linear-gradient(135deg, rgba(198,151,54,.1), rgba(0,0,0,.18));
}
.story-intro span,
.seo-story-heading > span,
.postcard-share > div:first-child > span {
  color: var(--gold);
  font: 800 11px/1.3 "Courier New", monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.story-intro h2,
.seo-story-heading h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1;
}
.story-intro p,
.seo-story-heading p {
  max-width: 78ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.postcard-back {
  grid-template-columns: minmax(0, 1.58fr) minmax(230px, .82fr);
}
.postcard-message {
  overflow-y: auto;
  scrollbar-color: #8d6a2f transparent;
}
.scene-description {
  font-weight: 700;
}
.historical-context,
.gold-buying-bridge {
  margin-top: 17px;
  padding: 14px 15px;
  border-left: 4px solid #7f6a47;
  background: rgba(62,47,26,.06);
}
.historical-context h3 {
  margin: 0 0 7px;
  font-size: 1rem;
  letter-spacing: .03em;
}
.historical-context p,
.gold-buying-bridge p {
  margin: 0;
  color: #453e33;
  font-size: clamp(13px, 1.35vw, 17px);
  line-height: 1.52;
}
.gold-buying-bridge {
  border-left-color: #a67422;
  background: rgba(176,127,35,.11);
}
.gold-buying-bridge > span {
  display: block;
  margin-bottom: 7px;
  color: #72521c;
  font: 900 10px/1.3 "Courier New", monospace;
  letter-spacing: .09em;
}
.gold-buying-bridge a {
  display: inline-flex;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(54,37,12,.45);
  border-radius: 3px;
  color: #2a1a08;
  background: rgba(198,151,54,.2);
  font-weight: 800;
  text-decoration: none;
}
.gold-buying-bridge a:hover,
.gold-buying-bridge a:focus-visible {
  background: rgba(198,151,54,.35);
}
.seo-keywords {
  margin: 13px 0 0;
  color: #786e5b;
  font: 700 9px/1.5 "Courier New", monospace;
  letter-spacing: .04em;
}

.postcard-share {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(0, 1.8fr) auto;
  align-items: center;
  gap: 18px;
  width: min(1120px, calc(100% - 72px));
  margin: 0 auto 28px;
  padding: 16px 18px;
  border: 1px solid rgba(245,239,224,.18);
  background: rgba(0,0,0,.23);
}
.postcard-share > div:first-child {
  display: grid;
  gap: 5px;
}
.postcard-share > div:first-child strong {
  font-size: 1.08rem;
}
.postcard-share-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(82px, 1fr));
  gap: 7px;
}
.postcard-share-actions button {
  min-height: 42px;
  padding: 8px 9px;
  border: 1px solid rgba(245,239,224,.24);
  border-radius: 999px;
  color: var(--cream);
  background: rgba(198,151,54,.08);
  font-size: .76rem;
  cursor: pointer;
}
.postcard-share-actions button:hover,
.postcard-share-actions button:focus-visible {
  border-color: var(--gold);
  background: rgba(198,151,54,.18);
}
#shareStatus {
  min-width: 80px;
  color: #d7bf86;
  font: 800 11px/1.2 "Courier New", monospace;
  text-align: right;
}

.scene-card small {
  position: absolute;
  inset: 9px 10px auto;
  z-index: 2;
  color: #e1c477;
  font: 800 8px/1.2 "Courier New", monospace;
  letter-spacing: .08em;
  text-shadow: 0 2px 7px #000;
}
.scene-card span {
  padding-top: 25px;
}

.seo-story-section {
  width: min(1120px, 100%);
  margin: 38px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.seo-story-heading {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}
.seo-story-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.seo-story-index article {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 290px;
  padding: 18px;
  border: 1px solid rgba(245,239,224,.14);
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(0,0,0,.17));
}
.seo-story-index article > span {
  color: var(--gold);
  font: 800 9px/1.35 "Courier New", monospace;
  letter-spacing: .08em;
}
.seo-story-index h3 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.28;
}
.seo-story-index p {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.5;
}
.seo-story-index a {
  align-self: end;
  margin-top: auto;
  color: #d2ad58;
  font-weight: 700;
}

.postcard[data-layout="wanted"] .photo-window {
  padding: clamp(56px, 7vw, 82px) clamp(24px, 6vw, 74px) clamp(24px, 4vw, 46px);
  background:
    radial-gradient(circle at 50% 38%, rgba(255,239,187,.25), transparent 50%),
    repeating-linear-gradient(6deg, rgba(65,38,13,.035) 0 1px, transparent 1px 5px),
    #c6aa72;
}
.postcard[data-layout="wanted"] .archive-photo {
  object-fit: contain;
  object-position: center;
  transform: none !important;
  filter: grayscale(1) sepia(.78) contrast(1.17) brightness(.84);
  border: 8px double rgba(49,29,15,.9);
  box-shadow: 0 16px 38px rgba(34,20,10,.42);
}
.postcard[data-layout="wanted"] .photo-window::before {
  content: "WANTED · CALDER ‘THE NUGGET’";
  position: absolute;
  left: 50%;
  top: 15px;
  z-index: 8;
  width: 90%;
  transform: translateX(-50%);
  color: #2f1a0c;
  font: 900 clamp(20px, 3.6vw, 46px)/1 Georgia, serif;
  letter-spacing: .055em;
  text-align: center;
  pointer-events: none;
}

@media (max-width: 1040px) {
  .postcard-share { grid-template-columns: 1fr; }
  .postcard-share-actions { grid-template-columns: repeat(3, 1fr); }
  #shareStatus { text-align: left; }
  .seo-story-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .story-intro { margin-bottom: 14px; }
  .postcard-back { grid-template-columns: 1fr; }
  .postcard-share { width: calc(100% - 48px); }
  .postcard-share-actions { grid-template-columns: repeat(2, 1fr); }
  .seo-story-index { grid-template-columns: 1fr; }
  .seo-story-index article { min-height: 0; }
  .postcard[data-layout="wanted"] .photo-window { padding: 58px 16px 18px; }
}

@media (max-width: 420px) {
  .postcard-share-actions { grid-template-columns: 1fr; }
}