/* decades.css — timeline layout for The Same Years. Scoped under .tl */
html[lang="ko"] .tl { font-family: var(--kr); }
.tl [data-ko]{ display: none; }
html[lang="ko"] .tl [data-en]{ display: none; }
html[lang="ko"] .tl [data-ko]{ display: inline; }
html[lang="ko"] .tl [data-ko].block{ display: block; }
.tl .hero{ padding: 160px 80px 70px; background: var(--paper-2); border-bottom: 1px solid rgba(194,134,21,0.18); }
.tl .hero-inner{ max-width: 900px; }
.tl .eyebrow{ font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--persimmon); margin-bottom: 22px; display: flex; align-items: center; gap: 12px; }
.tl .eyebrow::before{ content: ''; display: block; width: 32px; height: 1px; background: var(--persimmon); }
.tl .hero-title{ font-family: 'Cormorant Garamond', serif; font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 600; line-height: 1.08; color: var(--navy); margin-bottom: 24px; }
html[lang="ko"] .tl .hero-title{ font-family: var(--kr); font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.3; }
.tl .hero-lede{ font-size: 1.05rem; font-weight: 300; color: var(--ink-soft); line-height: 1.85; max-width: 620px; border-left: 3px solid var(--persimmon-soft); padding-left: 22px; margin-bottom: 28px; }
.tl .hero-note{ font-size: 0.9rem; color: var(--ink-soft); line-height: 1.8; max-width: 620px; opacity: 0.85; }
.tl .decade-nav{ position: sticky; top:64px; z-index: 90; background: rgba(251,249,245,0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule-soft); padding: 14px 80px; display: flex; gap: 10px; flex-wrap: wrap; }
.tl .decade-nav a{ font-size: 0.76rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; border: 1px solid rgba(194,134,21,0.3); padding: 7px 15px; border-radius: 2px; transition: all 0.2s; white-space: nowrap; }
.tl .decade-nav a:hover{ background: var(--persimmon); color: var(--ink); border-color: var(--persimmon); }
.tl .decade{ padding: 72px 80px 20px; }
.tl .decade:nth-of-type(even){ background: var(--paper-2); }
.tl .decade-head{ max-width: 900px; margin-bottom: 44px; }
.tl .decade-age{ font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 600; color: var(--navy); line-height: 1; margin-bottom: 6px; }
html[lang="ko"] .tl .decade-age{ font-family: var(--kr); font-size: clamp(1.6rem, 3vw, 2.3rem); }
.tl .decade-years{ font-size: 0.8rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--persimmon); margin-bottom: 18px; }
.tl .decade-intro{ font-size: 0.97rem; color: var(--ink-soft); line-height: 1.85; max-width: 700px; }
.tl .spine{ max-width: 1080px; }
.tl .spine-head{ display: grid; grid-template-columns: 1fr 74px 1fr; padding-bottom: 12px; }
.tl .spine-head .lbl{ font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--persimmon); opacity: 0.8; }
.tl .spine-head .lbl.left{ text-align: right; padding-right: 20px; }
.tl .spine-head .lbl.right{ padding-left: 20px; }
.tl .row{ display: grid; grid-template-columns: 1fr 74px 1fr; border-top: 1px solid rgba(194,134,21,0.2); }
.tl .cell{ padding: 20px 0; }
.tl .cell.left{ text-align: right; padding-right: 20px; }
.tl .cell.right{ padding-left: 20px; }
.tl .cell h3{ font-family: 'Cormorant Garamond', serif; font-size: 1.08rem; font-weight: 600; color: var(--navy); line-height: 1.35; margin-bottom: 5px; }
html[lang="ko"] .tl .cell h3{ font-family: var(--kr); font-size: 0.95rem; }
.tl .cell p{ font-size: 0.87rem; color: var(--ink-soft); line-height: 1.7; }
.tl .cell.left h3{ color: var(--ink); }
.tl .vid{ margin-top: 12px; max-width: 250px; }
.tl .cell.right .vid{ margin-right: auto; }
.tl .cell.left .vid{ margin-left: auto; }
.tl .vid iframe{ display: block; width: 100%; height: 141px; border: 0; border-radius: 3px; }
.tl .vid-cap{ font-size: 0.74rem; color: var(--ink-soft); opacity: 0.7; margin-top: 6px; font-style: italic; line-height: 1.5; }
html[lang="ko"] .tl .vid-cap{ font-style: normal; }
.tl .year{ display: flex; align-items: flex-start; justify-content: center; padding-top: 20px; }
.tl .year span{ font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600; color: var(--persimmon); background: var(--paper); padding: 2px 0; letter-spacing: 0.02em; }
.tl .decade:nth-of-type(even) .year span{ background: var(--paper-2); }
.tl .row.converge .cell h3{ color: var(--navy); }
.tl .row.converge{ background: rgba(194,134,21,0.05); }
.tl .pull{ max-width: 1080px; margin: 34px 0 8px; padding: 26px 30px; background: var(--navy); border-radius: 3px; }
.tl .pull p{ font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-style: italic; color: var(--paper-2); line-height: 1.6; }
html[lang="ko"] .tl .pull p{ font-family: var(--kr); font-style: normal; font-size: 1rem; }
.tl .pull .attrib{ font-family: 'DM Sans', sans-serif; font-style: normal; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--persimmon-soft); margin-top: 12px; }
.tl .booklink{ max-width: 1080px; margin: 30px 0 10px; padding: 22px 28px; border: 1px solid rgba(194,134,21,0.35); border-radius: 3px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.tl .booklink p{ font-size: 0.9rem; color: var(--ink-soft); line-height: 1.7; max-width: 620px; }
.tl .btn-gold{ display: inline-block; background: var(--navy); color: var(--paper-2); padding: 13px 28px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: 2px; transition: all 0.25s; white-space: nowrap; }
.tl .btn-gold:hover{ background: var(--persimmon); color: var(--ink); }
.tl .closing{ padding: 90px 80px; background: var(--ink); color: var(--paper-2); }
.tl .closing-inner{ max-width: 780px; }
.tl .closing .eyebrow{ color: var(--persimmon-soft); }
.tl .closing .eyebrow::before{ background: var(--persimmon-soft); }
.tl .closing h2{ font-family: 'Cormorant Garamond', serif; font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 600; color: var(--paper-2); line-height: 1.2; margin-bottom: 22px; }
html[lang="ko"] .tl .closing h2{ font-family: var(--kr); font-size: clamp(1.4rem, 2.8vw, 2rem); }
.tl .closing p{ font-size: 0.98rem; color: rgba(245,241,234,0.72); line-height: 1.9; margin-bottom: 18px; }
@media (max-width: 900px) {.tl .hero{ padding: 120px 24px 50px; }
.tl .decade-nav{ padding: 12px 16px; top:64px; gap: 7px; }
.tl .decade-nav a{ padding: 6px 11px; font-size: 0.7rem; }
.tl .decade{ padding: 48px 24px 16px; }
.tl .spine-head{ display: none; }
.tl .row{ grid-template-columns: 1fr; border-top: none; padding: 18px 0; border-bottom: 1px solid rgba(194,134,21,0.2); }
.tl .cell.left, .tl .cell.right{ text-align: left; padding: 0; }
.tl .cell{ padding: 0; }
.tl .cell.left{ padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed rgba(194,134,21,0.3); }
.tl .cell.left::before{ content: 'KOREA'; display: block; font-size: 0.62rem; letter-spacing: 0.18em; color: var(--persimmon); margin-bottom: 6px; }
html[lang="ko"] .tl .cell.left::before{ content: '대한민국'; }
.tl .cell.right::before{ content: 'BILL'; display: block; font-size: 0.62rem; letter-spacing: 0.18em; color: var(--persimmon); margin-bottom: 6px; }
html[lang="ko"] .tl .cell.right::before{ content: '빌'; }
.tl .cell.left:empty, .tl .cell.right:empty{ display: none; }
.tl .year{ justify-content: flex-start; padding: 0 0 10px; }
.tl .vid{ max-width: 100%; }
.tl .vid iframe{ height: 190px; }
.tl .closing{ padding: 60px 24px; }
.tl .booklink{ flex-direction: column; align-items: flex-start; }}