:root {
  --black: #070706;
  --black-soft: #11100e;
  --ivory: #eee5d3;
  --ivory-muted: #bcb19e;
  --paper-ink: #2e241b;
  --line: rgba(238, 229, 211, 0.16);
  --gold-line: rgba(194, 159, 108, 0.46);
  --red: #7f1f1d;
  --red-bright: #a8372f;
  --header-height: 92px;
  --page-width: 1600px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ivory);
  background:
    radial-gradient(circle at 80% 15%, rgba(105, 70, 35, 0.08), transparent 30%),
    #090806;
  font-family: Arial, Helvetica, sans-serif;
}
a { color: inherit; text-decoration: none; }
button, a { font: inherit; }
button { color: inherit; }

/* HEADER — intentionally mirrors the homepage language */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 100;
  min-height: var(--header-height);
  border-bottom: 1px solid rgba(238, 229, 211, 0.13);
  background: linear-gradient(180deg, rgba(5,5,4,.96) 0%, rgba(5,5,4,.8) 72%, rgba(5,5,4,.28) 100%);
  backdrop-filter: blur(8px);
}
.header-inner {
  width: min(calc(100% - 48px), var(--page-width));
  min-height: var(--header-height);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, auto) 1fr auto;
  align-items: center;
  gap: 22px;
}
.brand { display: inline-flex; align-items: center; width: fit-content; }
.brand-logo { display: block; width: 190px; height: 72px; object-fit: contain; object-position: left center; filter: drop-shadow(0 5px 12px rgba(0,0,0,.7)); }
.desktop-nav { display: flex; justify-content: center; align-items: stretch; gap: 2px; }
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--header-height);
  padding: 0 9px;
  color: var(--ivory-muted);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 180ms ease;
}
.nav-link::after { content:""; position:absolute; right:9px; bottom:8px; left:9px; height:2px; background:var(--red-bright); transform:scaleX(0); transition:transform 180ms ease; }
.nav-link:hover, .nav-link:focus-visible, .nav-link.is-active { color: var(--ivory); outline:none; }
.nav-link:hover::after, .nav-link:focus-visible::after, .nav-link.is-active::after { transform:scaleX(1); }
.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.language-switch { display:inline-flex; align-items:center; padding:4px; border:1px solid var(--line); background:rgba(0,0,0,.24); }
.language-button { width:38px; height:32px; padding:0; border:0; background:transparent; color:#928879; cursor:pointer; font-size:.7rem; font-weight:800; letter-spacing:.12em; }
.language-button:hover, .language-button:focus-visible { color:var(--ivory); outline:none; }
.language-button.is-active { color:var(--ivory); background:rgba(127,31,29,.84); }
.header-utility-link { display:inline-flex; min-height:42px; align-items:center; justify-content:center; gap:8px; padding:0 11px; border:1px solid rgba(238,229,211,.2); background:rgba(0,0,0,.26); color:var(--ivory-muted); font-size:.67rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; transition:color 160ms ease,border-color 160ms ease,background 160ms ease; }
.header-utility-link:hover, .header-utility-link:focus-visible { color:var(--ivory); border-color:rgba(168,55,47,.62); background:rgba(127,31,29,.16); outline:none; }
.header-utility-link svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.65; }
.header-basket-link strong { min-width:1.1rem; color:#d1b88f; font-family:"Courier New",Courier,monospace; font-size:.67rem; text-align:center; }
.menu-button { display:none; width:44px; height:42px; padding:0; align-items:center; justify-content:center; border:1px solid var(--line); background:rgba(0,0,0,.25); cursor:pointer; }
.menu-icon { position:relative; display:block; width:20px; height:14px; }
.menu-icon span { position:absolute; left:0; width:100%; height:1px; background:var(--ivory); transition:top 180ms ease,transform 180ms ease,opacity 180ms ease; }
.menu-icon span:nth-child(1){top:0}.menu-icon span:nth-child(2){top:6px}.menu-icon span:nth-child(3){top:12px}
.menu-button.is-open .menu-icon span:nth-child(1){top:6px;transform:rotate(45deg)}.menu-button.is-open .menu-icon span:nth-child(2){opacity:0}.menu-button.is-open .menu-icon span:nth-child(3){top:6px;transform:rotate(-45deg)}
.mobile-panel { display:none; border-top:1px solid var(--line); background:rgba(7,7,6,.985); box-shadow:0 20px 36px rgba(0,0,0,.45); }
.mobile-panel.is-open { display:block; }
.mobile-panel-inner { width:min(calc(100% - 32px),var(--page-width)); margin:0 auto; padding:16px 0 22px; }
.mobile-nav { display:grid; }
.mobile-nav .nav-link { min-height:52px; justify-content:flex-start; padding:0 12px; border-bottom:1px solid rgba(238,229,211,.08); }
.mobile-actions { display:flex; align-items:center; gap:10px; padding-top:18px; }

.coming-soon-toast { position:fixed; z-index:500; right:24px; bottom:24px; max-width:min(360px,calc(100% - 48px)); padding:13px 16px; border:1px solid rgba(194,159,108,.42); background:rgba(10,9,7,.97); box-shadow:0 16px 40px rgba(0,0,0,.55); color:#d8cab3; font-family:"Courier New",Courier,monospace; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity 160ms ease,transform 160ms ease; }
.coming-soon-toast.is-visible { opacity:1; transform:translateY(0); }

.page-shell { width:min(calc(100% - 48px),var(--page-width)); margin:0 auto; }
.eyebrow, .panel-kicker { margin:0 0 10px; color:#b89b73; font-family:Georgia,"Times New Roman",serif; font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }

.stories-hero { position:relative; min-height:520px; overflow:hidden; padding-top:var(--header-height); background:url("../backgrounds/mythical-mind-archive-office-hero.png") center 32%/cover no-repeat; }
.stories-hero::after { content:""; position:absolute; inset:0; box-shadow:inset 0 -180px 150px rgba(5,5,4,.92), inset 0 0 180px rgba(0,0,0,.68); pointer-events:none; }
.stories-hero__shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,4,3,.96) 0%,rgba(4,4,3,.78) 37%,rgba(4,4,3,.38) 67%,rgba(4,4,3,.72) 100%); }
.stories-hero__inner { position:relative; z-index:2; width:min(calc(100% - 48px),var(--page-width)); min-height:420px; margin:0 auto; display:grid; grid-template-columns:minmax(0,760px) 1fr; align-items:center; gap:40px; padding:72px 0 52px; }
.stories-hero__copy h1 { margin:0; color:#f0e3cf; font-family:Georgia,"Times New Roman",serif; font-size:clamp(4rem,7vw,7rem); font-weight:500; line-height:.9; letter-spacing:.015em; }
.stories-hero__lead { max-width:720px; margin:26px 0 0; color:#c5b8a4; font-family:Georgia,"Times New Roman",serif; font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.75; }
.stories-hero__seal { justify-self:end; width:min(25vw,310px); opacity:.2; filter:sepia(.35) drop-shadow(0 16px 30px rgba(0,0,0,.6)); }
.archive-index-line { display:flex; align-items:center; gap:14px; margin-top:30px; padding-top:15px; border-top:1px solid rgba(194,159,108,.3); color:#8f816d; font-family:"Courier New",Courier,monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; }
.archive-index-line strong { color:#c1ae90; font-weight:700; }

.story-featured-section, .story-index-section, .story-format-section { position:relative; padding:34px 0 52px; background:linear-gradient(180deg,#090806,#0d0b08); }
.story-index-section { padding-top:18px; }
.story-format-section { padding-top:0; padding-bottom:84px; }
.archive-panel { position:relative; border:1px solid var(--gold-line); border-radius:7px; background:radial-gradient(circle at 50% 8%,rgba(135,91,48,.1),transparent 42%),repeating-linear-gradient(0deg,rgba(255,255,255,.011) 0,rgba(255,255,255,.011) 1px,transparent 1px,transparent 4px),linear-gradient(145deg,#14110d 0%,#0b0a08 55%,#060605 100%); box-shadow:inset 0 0 0 2px rgba(0,0,0,.74),inset 0 0 0 3px rgba(194,159,108,.14),0 22px 40px rgba(0,0,0,.34); }
.panel-corner { position:absolute; width:48px; height:48px; pointer-events:none; background:url("../ui/mythical-mind-panel-corner.png") center/145% 145% no-repeat; opacity:.92; z-index:4; }
.panel-corner-tl{top:-3px;left:-3px}.panel-corner-tr{top:-3px;right:-3px;transform:rotate(90deg)}.panel-corner-br{right:-3px;bottom:-3px;transform:rotate(180deg)}.panel-corner-bl{bottom:-3px;left:-3px;transform:rotate(270deg)}
.featured-story-panel { min-height:560px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr); overflow:hidden; }
.featured-story-copy { position:relative; z-index:2; padding:54px 54px 48px; }
.featured-story-copy h2 { margin:0; color:#ead9bc; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.6rem,4vw,4.6rem); font-weight:500; line-height:.95; letter-spacing:.025em; text-transform:uppercase; }
.case-number { margin:14px 0 0; color:#9f332d; font-family:"Courier New",Courier,monospace; font-size:.66rem; font-weight:700; letter-spacing:.09em; }
.featured-story-summary { max-width:650px; margin:28px 0; color:#bfb09a; font-family:Georgia,"Times New Roman",serif; font-size:1.02rem; line-height:1.72; }
.story-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 28px; }
.story-meta div { padding:12px 13px; border:1px solid rgba(194,159,108,.24); background:rgba(0,0,0,.24); }
.story-meta dt { color:#8f7c61; font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.story-meta dd { margin:6px 0 0; color:#d8c5a5; font-family:Georgia,"Times New Roman",serif; font-size:.78rem; }
.story-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.story-action { min-height:67px; display:grid; align-content:center; gap:3px; padding:10px 12px; border:1px solid rgba(194,159,108,.26); background:rgba(0,0,0,.28); color:#b9aa95; text-transform:uppercase; transition:border-color 160ms ease,background 160ms ease,color 160ms ease; }
.story-action span { font-family:Georgia,"Times New Roman",serif; font-size:.73rem; font-weight:700; letter-spacing:.12em; }
.story-action small { color:#756a5b; font-family:"Courier New",Courier,monospace; font-size:.53rem; letter-spacing:.03em; text-transform:none; }
.story-action:hover { color:#ead9bc; border-color:rgba(168,55,47,.6); background:rgba(127,31,29,.12); }
.story-action--active { border-color:rgba(168,55,47,.52); color:#e2cfb0; }
.featured-story-visual { position:relative; min-height:100%; overflow:hidden; }
.featured-story-scene { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:67% center; filter:brightness(.76) saturate(.7); }
.featured-story-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0a0907 0%,rgba(10,9,7,.38) 26%,rgba(0,0,0,.18) 65%,rgba(0,0,0,.58) 100%); }
.featured-story-book { position:absolute; z-index:2; right:8%; bottom:-4%; width:min(29%,250px); transform:rotate(2deg); filter:drop-shadow(0 24px 32px rgba(0,0,0,.75)); }
.featured-story-stamp { position:absolute; z-index:3; right:36%; top:15%; padding:10px 15px 8px; border:2px solid rgba(145,44,39,.68); color:rgba(164,53,46,.82); font-family:"Courier New",Courier,monospace; font-size:.68rem; font-weight:800; letter-spacing:.12em; transform:rotate(-5deg); }

.section-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin:0 0 20px; padding:0 4px 14px; border-bottom:1px solid rgba(194,159,108,.22); }
.section-heading h2, .format-panel h2 { margin:0; color:#ddcdb2; font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.7rem,2.6vw,2.8rem); font-weight:500; letter-spacing:.025em; }
.section-heading > p { max-width:490px; margin:0; color:#8f816e; font-family:"Courier New",Courier,monospace; font-size:.66rem; line-height:1.55; }
.story-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.story-card { min-width:0; overflow:hidden; border:1px solid rgba(194,159,108,.31); border-radius:6px; background:linear-gradient(145deg,#12100d,#080706); box-shadow:0 15px 28px rgba(0,0,0,.25); }
.story-card__image { position:relative; height:260px; overflow:hidden; display:grid; place-items:center; background:radial-gradient(circle at 50% 45%,rgba(117,80,42,.15),transparent 55%),#080706; }
.story-card__image::after { content:""; position:absolute; inset:0; box-shadow:inset 0 -50px 60px rgba(0,0,0,.72); }
.story-card__image img { width:92%; height:92%; object-fit:contain; filter:sepia(.22) brightness(.72); transition:transform 220ms ease,filter 220ms ease; }
.story-card__image span { position:absolute; z-index:2; left:16px; bottom:13px; color:#b9a078; font-family:"Courier New",Courier,monospace; font-size:.58rem; letter-spacing:.08em; }
.story-card:hover .story-card__image img { transform:translateY(-3px) rotate(-.4deg); filter:sepia(.16) brightness(.82); }
.story-card__body { min-height:220px; padding:20px; border-top:1px solid rgba(194,159,108,.18); }
.story-card__status { color:#9a332d; font-family:"Courier New",Courier,monospace; font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.story-card--sealed .story-card__status { color:#7e7364; }
.story-card__body h3 { margin:9px 0 10px; color:#dbc9aa; font-family:Georgia,"Times New Roman",serif; font-size:1.2rem; font-weight:500; text-transform:uppercase; }
.story-card__body p { margin:0; color:#958774; font-family:Georgia,"Times New Roman",serif; font-size:.82rem; line-height:1.6; }
.story-card__body a { display:inline-block; margin-top:18px; color:#a93d35; font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.story-card--sealed { opacity:.78; }

.format-panel { display:grid; grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr); align-items:center; gap:38px; padding:38px 42px; }
.format-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.format-grid div { min-height:112px; display:grid; align-content:center; gap:8px; padding:16px; border-left:1px solid rgba(194,159,108,.25); }
.format-grid strong { color:#cdb994; font-family:Georgia,"Times New Roman",serif; font-size:.92rem; letter-spacing:.1em; text-transform:uppercase; }
.format-grid span { color:#807462; font-family:"Courier New",Courier,monospace; font-size:.6rem; line-height:1.5; }

.site-footer { border-top:1px solid rgba(194,159,108,.24); background:#050504; }
.footer-inner { min-height:138px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer-brand { display:flex; align-items:center; gap:18px; }
.footer-brand img { width:170px; height:70px; object-fit:contain; }
.footer-brand p, .footer-status { color:#796e5e; font-family:"Courier New",Courier,monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; }
.footer-status { display:grid; gap:6px; text-align:right; }
.footer-status strong { color:#a99779; font-weight:700; }

@media (max-width: 1380px) {
  .header-inner { grid-template-columns:auto 1fr auto; gap:14px; }
  .brand-logo { width:150px; }
  .nav-link { padding:0 6px; font-size:.59rem; letter-spacing:.08em; }
  .header-utility-link { padding:0 8px; font-size:.61rem; }
  .featured-story-panel { grid-template-columns:minmax(0,.95fr) minmax(430px,1.05fr); }
}
@media (max-width: 1080px) {
  .site-header,.header-inner { min-height:78px; }
  .header-inner { width:min(calc(100% - 32px),var(--page-width)); grid-template-columns:1fr auto; }
  .brand-logo { width:158px; height:62px; }
  .desktop-nav,.header-actions { display:none; }
  .menu-button { display:inline-flex; }
  .stories-hero { padding-top:78px; }
  .stories-hero__inner { grid-template-columns:1fr; min-height:390px; padding-top:74px; }
  .stories-hero__seal { display:none; }
  .featured-story-panel { grid-template-columns:1fr; }
  .featured-story-visual { min-height:430px; }
  .story-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .format-panel { grid-template-columns:1fr; }
}
@media (min-width:1081px){.mobile-panel{display:none!important}}
@media (max-width:680px) {
  .page-shell,.stories-hero__inner,.mobile-panel-inner,.header-inner { width:min(calc(100% - 24px),var(--page-width)); }
  .stories-hero { min-height:430px; }
  .stories-hero__copy h1 { font-size:clamp(3.4rem,18vw,5.4rem); }
  .archive-index-line { align-items:flex-start; flex-direction:column; }
  .featured-story-copy { padding:38px 24px 30px; }
  .featured-story-visual { min-height:340px; }
  .featured-story-book { width:32%; right:5%; }
  .story-meta,.story-actions,.story-grid,.format-grid { grid-template-columns:1fr; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .story-card__image { height:220px; }
  .format-panel { padding:30px 24px; }
  .format-grid div { min-height:88px; border-left:0; border-top:1px solid rgba(194,159,108,.22); }
  .mobile-actions { align-items:stretch; flex-direction:column; }
  .mobile-actions .language-switch,.mobile-actions .header-utility-link { width:100%; }
  .mobile-actions .language-switch { justify-content:center; }
  .footer-inner { padding:28px 0; align-items:flex-start; flex-direction:column; }
  .footer-status { text-align:left; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; }
}