@import 'tailwindcss';

:root { --ink:#192019; --paper:#f2efe7; --acid:#d8ff47; --line:#a8aea1; }
* { box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
button, a { font:inherit; }
button { color:inherit; }
.site-shell { min-height:100vh; display:flex; flex-direction:column; padding:0 4.5vw; overflow:hidden; }
.masthead { height:90px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.wordmark { width:max-content; color:var(--ink); text-decoration:none; font-size:17px; line-height:.76; font-weight:900; letter-spacing:-.07em; transform:scaleX(.88); transform-origin:left; }
.wordmark span { display:block; }
.masthead p, .about, footer, .eyebrow, .timeline-meta { font-size:10px; font-weight:800; letter-spacing:.17em; }
.masthead p { margin:0; text-align:center; }
.about { justify-self:end; border:0; outline:0; box-shadow:none; background:transparent; display:flex; align-items:center; gap:8px; cursor:pointer; }
.timeline { padding:10px 0 156px; }
.timeline-meta { display:flex; justify-content:space-between; margin-bottom:18px; }
.track { height:2px; background:var(--line); position:relative; }
.track-fill { position:absolute; inset:0 auto 0 0; background:var(--ink); transition:width .55s cubic-bezier(.2,.8,.2,1); }
.tick { position:absolute; top:-5px; width:1px; height:12px; background:#646b61; }
.marker { position:absolute; top:50%; width:15px; height:15px; border:4px solid var(--paper); background:var(--acid); outline:1px solid var(--ink); border-radius:50%; transform:translate(-50%,-50%); transition:left .55s cubic-bezier(.2,.8,.2,1); z-index:2; }
.marker span { position:absolute; top:20px; left:50%; transform:translateX(-50%); width:max-content; max-width:150px; padding:5px 7px; background:var(--ink); color:white; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.period-track { position:absolute; left:0; right:0; height:24px; border:1px solid #9da398; background:transparent; }
.geological-track { top:60px; }
.archaeological-track { top:108px; }
.period-kind { position:absolute; right:8px; top:50%; padding:0; transform:translateY(-50%); background:transparent; color:var(--ink); font-size:7px; font-weight:900; letter-spacing:.12em; z-index:4; }
.era-segment { position:absolute; top:-1px; height:24px; min-width:6px; border:1px solid rgba(25,32,25,.5); opacity:.62; transition:opacity .25s, transform .25s, height .25s; overflow:visible; }
.era-segment > span { --label-lane:8px; display:none; position:absolute; left:50%; bottom:calc(100% + var(--label-lane)); width:max-content; max-width:165px; padding:2px 4px 2px 0; overflow:hidden; text-overflow:ellipsis; background:var(--paper); color:#666e64; font-size:8px; line-height:1; font-weight:900; letter-spacing:.075em; text-transform:uppercase; white-space:nowrap; z-index:2; }
.era-segment > span::before { content:''; display:inline-block; width:26px; margin-right:6px; border-top:1px solid currentColor; vertical-align:middle; }
.era-segment > span::after { content:''; position:absolute; left:0; top:100%; height:var(--label-lane); border-left:1px solid currentColor; }
.era-segment.active { height:24px; opacity:1; border-color:rgba(25,32,25,.38); box-shadow:0 0 0 4px var(--period-color), 0 0 14px 5px color-mix(in srgb, var(--period-color) 48%, transparent); z-index:3; }
.era-segment.active > span { display:block; color:var(--ink); }
.feature { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(350px,.92fr); min-height:560px; flex:1; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.feature-visual { position:relative; min-height:520px; background-size:cover; background-position:center; filter:saturate(.65) contrast(1.05); }
.feature-visual::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(25,32,25,.15); pointer-events:none; }
.counter { position:absolute; top:22px; left:24px; background:var(--acid); padding:8px 10px; font-size:11px; font-weight:900; letter-spacing:.12em; z-index:1; }
.counter span { opacity:.45; margin:0 3px; }
.media-credit { position:absolute; left:16px; bottom:14px; z-index:1; max-width:calc(100% - 32px); margin:0; padding:5px 7px; background:rgba(25,32,25,.78); color:rgba(255,255,255,.82); font-size:8px; line-height:1.3; font-weight:700; letter-spacing:.06em; }
.feature-copy { background:#e5e2d8; padding:clamp(38px,5vw,76px); display:flex; flex-direction:column; justify-content:flex-start; }
.eyebrow { width:max-content; max-width:100%; margin:0 0 30px; padding:9px 12px 8px; background:color-mix(in srgb, var(--acid) 62%, var(--paper)); border-left:4px solid var(--ink); color:var(--ink); font-size:clamp(13px,1.05vw,17px); line-height:1.15; font-weight:900; letter-spacing:.09em; }
h1 { font-family:Georgia, 'Times New Roman', serif; font-size:clamp(50px,6.4vw,104px); font-weight:400; line-height:.88; letter-spacing:-.06em; margin:0; max-width:9ch; text-wrap:balance; }
.article-subtitle { max-width:28ch; margin:28px 0 0; font-size:clamp(19px,1.7vw,27px); line-height:1.15; font-weight:800; letter-spacing:-.025em; text-wrap:balance; }
.body-copy { max-width:58ch; margin:34px 0 0; font-family:Georgia, 'Times New Roman', serif; font-size:clamp(16px,1.25vw,20px); line-height:1.58; }
.article-subtitle + .body-copy { margin-top:20px; }
.article-nav { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; margin:0 0 42px; }
.article-nav button { border:0; padding:8px 0; background:transparent; display:flex; align-items:center; gap:8px; font-size:30px; line-height:1; font-weight:900; letter-spacing:.14em; cursor:pointer; transition:gap .2s; }
.article-nav button span { font-size:10px; line-height:1; letter-spacing:.05em; }
.article-nav button:hover { gap:13px; }
.article-nav button:disabled { opacity:.25; cursor:not-allowed; }
.article-nav button:disabled:hover { gap:8px; }
.progress { height:3px; background:#a9ada4; }
.progress span { display:block; height:100%; background:var(--ink); transition:width .35s; }
.feature-era .feature-visual { background:#20281f; color:var(--acid); display:grid; place-items:center; overflow:hidden; }
.feature-era .feature-visual::before { content:''; position:absolute; width:80%; aspect-ratio:1; border:1px solid #75826f; border-radius:50%; box-shadow:0 0 0 80px #20281f, 0 0 0 81px #75826f, 0 0 0 160px #20281f, 0 0 0 161px #75826f; }
.era-number { position:relative; font-family:Georgia, serif; font-size:clamp(130px,20vw,300px); line-height:1; letter-spacing:-.08em; }
footer { color:#5d655b; }
.footer-meta { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.visitor-count { text-align:center; }
.copyright { padding:0 0 18px; text-align:center; opacity:.72; }
.copyright a { color:inherit; text-decoration:none; border-bottom:1px solid currentColor; }
.copyright a:hover { opacity:.7; }
@media (max-width:850px) {
  .site-shell { padding:0 20px; }
  .masthead { height:72px; }
  .masthead p { display:none; }
  .masthead { grid-template-columns:1fr auto; }
  .about span:not(.help-icon) { display:none; }
  .timeline { padding:10px 0 172px; }
  .geological-track { top:72px; }
  .archaeological-track { top:120px; }
  .period-kind { font-size:7px; }
  .era-segment > span { display:none; }
  .feature { grid-template-columns:1fr; }
  .feature-visual { min-height:42vh; }
  .feature-copy { min-height:440px; padding:38px 26px 28px; }
  h1 { font-size:clamp(48px,14vw,76px); }
  .body-copy { font-size:16px; }
  .article-nav { grid-template-columns:72px 1fr 72px; gap:10px; margin:0 0 32px; }
  .article-nav button { width:72px; min-width:72px; height:64px; min-height:64px; padding:6px; justify-content:center; font-size:40px; line-height:1; }
  .article-nav button span { display:none; }
  .progress { height:4px; }
  footer { font-size:8px; padding:18px 0; }
  .footer-meta { min-height:0; flex-wrap:wrap; gap:8px 18px; }
  .visitor-count { order:3; width:100%; text-align:left; }
  .copyright { padding:18px 0 0; text-align:left; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; } }