@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root { --ink: #0e0c09; --ink-soft: #17130e; --gold: #e8c783; --gold-soft: #b29869; --muted: #b6ab96; --line: #bda16f36; --paper: #f2e4c6; --body: 'DM Sans', Arial, sans-serif; --display: Georgia, 'Times New Roman', serif; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; overflow-x: clip; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; z-index: -1; inset: 0; background: radial-gradient(ellipse at 85% 12%, #77532224, transparent 50%); pointer-events: none; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.shell { width: min(100% - 96px, 1240px); margin-inline: auto; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-fill { fill: currentColor; stroke: none; }
.skip-link { position: absolute; top: -80px; left: 20px; z-index: 50; padding: 14px 20px; background: var(--gold); color: var(--ink); }
.skip-link:focus { top: 14px; }
.site-header { position: sticky; top: 0; z-index: 20; background: #0e0c09ee; backdrop-filter: blur(14px); }
.header-inner { min-height: 96px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); transition: min-height .35s; }
.is-scrolled .header-inner { min-height: 76px; }
.wordmark { display: inline-flex; flex-direction: column; gap: 2px; width: max-content; }
.wordmark > span { font-family: var(--display); font-size: 28px; letter-spacing: -.06em; }
.wordmark i { color: var(--gold); }
.wordmark small { color: var(--gold-soft); font-size: 8px; font-weight: 600; letter-spacing: .38em; }
.header-inner nav { display: flex; align-items: center; gap: 42px; font-size: 12px; }
.header-inner nav a { color: var(--muted); transition: color .2s; }
.header-inner nav a:hover { color: var(--gold); }
.portal-link { padding: 12px 15px; border: 1px solid var(--line); }
.portal-link span { margin-left: 16px; color: var(--gold); }
.reading-progress { position: absolute; bottom: 0; height: 1px; width: 100%; background: var(--gold); transform: scaleX(var(--reading-progress, 0)); transform-origin: left; }
.hero { position: relative; min-height: 760px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; padding-block: 64px 110px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; color: var(--gold-soft); font-size: 9px; font-weight: 600; letter-spacing: .19em; }
.eyebrow > span { width: 28px; height: 1px; background: currentColor; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -.075em; }
h1 { font-size: clamp(70px, 7.5vw, 112px); line-height: .98; }
h1 em, h2 em { color: var(--gold); font-weight: 400; }
.hero-description { max-width: 350px; margin: 28px 0 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 38px; min-height: 56px; padding: 16px 22px; font-size: 12px; font-weight: 700; transition: background .25s, transform .25s; }
.button-gold { background: var(--gold); color: var(--ink); }
.button-gold:hover { background: #f6dca7; transform: translateY(-3px); }
.text-link { display: flex; align-items: center; gap: 15px; padding-block: 8px; color: var(--gold); font-size: 12px; }
.text-link:hover { text-decoration: underline; text-underline-offset: 6px; }
.hero-location { display: flex; align-items: center; gap: 10px; margin-top: 40px; color: var(--gold-soft); font-size: 9px; letter-spacing: .15em; }
.hero-location > span { font-size: 18px; }
.brand-scene { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1; justify-self: end; }
.brand-scene::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: #9d712819; filter: blur(60px); }
.hero-logo { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; mask-image: radial-gradient(ellipse at center, #000 62%, transparent 76%); transform: translateY(var(--logo-shift, 0px)); }
.scene-ring { position: absolute; inset: -5%; border: 1px solid #c29a533b; border-radius: 50%; transform: rotate(var(--ring-turn, -18deg)) scaleY(.8); pointer-events: none; }
.scene-ring::after { content: ''; position: absolute; top: 50%; left: -3px; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 16px #e8c78380; }
.ring-two { inset: -1%; border-color: #c29a5320; transform: rotate(var(--ring-two-turn, 35deg)) scaleX(.82); }
.ring-two::after { width: 4px; height: 4px; left: 50%; top: -2px; }
.scene-note { position: absolute; left: 0; right: 0; bottom: -20px; color: var(--gold-soft); font-size: 8px; letter-spacing: .22em; text-align: center; }
.scroll-cue { position: absolute; left: 0; bottom: 30px; display: flex; align-items: center; gap: 20px; color: var(--gold-soft); font-size: 8px; letter-spacing: .2em; }
.scroll-cue > span { font-size: 18px; }
.tape-interlude { position: relative; border-block: 1px solid var(--line); background: #20190f54; }
.tape-inner { display: grid; grid-template-columns: 280px 1fr auto; align-items: center; gap: 70px; padding-block: 54px; }
.cassette { position: relative; padding: 13px 18px 10px; color: var(--gold-soft); border: 1px solid #ad8c4e85; border-radius: 8px; background: linear-gradient(145deg, #2c2415, #110e0a); transform: rotate(var(--cassette-turn, -4deg)); }
.cassette::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: -5px; height: 16px; border: 1px solid #ad8c4e85; border-radius: 4px; background: #17130e; }
.cassette-label { display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .15em; }
.cassette-window { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-block: 14px 8px; padding: 1px 8px; border: 1px solid #ad8c4e55; border-radius: 40px; }
.tape-reel { position: relative; z-index: 2; width: 68px; height: 68px; flex-shrink: 0; fill: #17130e; stroke: var(--gold-soft); stroke-width: 2; transform: rotate(var(--reel-turn, 0deg)); }
.tape-reel path { fill: none; stroke-width: 5; }
.reel-two { transform: rotate(var(--reel-two-turn, 0deg)); }
.tape-bridge { position: absolute; left: 25%; right: 25%; height: 22px; border-block: 1px solid #ad8c4e55; }
.cassette-bottom { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 4px; font-size: 6px; letter-spacing: .07em; }
.cassette-bottom span:first-child { white-space: nowrap; }
.tape-copy .eyebrow { margin-bottom: 14px; }
.tape-copy > p:last-child { margin: 0; font-family: var(--display); font-size: clamp(30px, 3vw, 43px); line-height: 1.13; letter-spacing: -.05em; }
.tape-copy em { color: var(--gold); }
.tape-edition { color: var(--gold-soft); font-size: 9px; line-height: 2; letter-spacing: .22em; }
.connections { padding-block: 116px 126px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 48px; }
.section-heading h2 { font-size: clamp(48px, 5.5vw, 74px); line-height: 1.05; }
.section-heading > p { max-width: 245px; margin: 0 0 5px; color: var(--muted); font-size: 13px; line-height: 1.85; }
.link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.link-card { display: flex; flex-direction: column; min-height: 280px; padding: 26px 30px; border: 1px solid var(--line); background: #18140f; transition: background .3s, border-color .3s, transform .3s; }
.link-card:hover { background: #272015; border-color: #d4b16d8c; transform: translateY(-4px); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--gold-soft); }
.card-number { font-size: 8px; letter-spacing: .15em; }
.card-title { display: block; margin-block: 25px 27px; font-family: var(--display); font-size: 41px; line-height: 1.1; letter-spacing: -.055em; }
.card-title em { color: var(--gold); }
.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.card-bottom .arrow { width: 20px; height: 20px; color: var(--gold); transition: transform .3s; }
.link-card:hover .arrow { transform: translate(3px, -3px); }
.featured { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.featured:hover { background: #f6dca7; border-color: #f6dca7; }
.featured .card-top, .featured .card-title em, .featured .card-bottom, .featured .arrow { color: #44321a; }
.featured .card-bottom { border-color: #6e54224d; }
.social-card { min-height: 255px; }
.social-card .card-title { font-size: 35px; }
.closing { position: relative; overflow: hidden; background: var(--gold); color: var(--ink); }
.closing-inner { position: relative; z-index: 1; padding-block: 85px 90px; }
.closing .eyebrow { color: #6b522b; }
.closing h2 { font-size: clamp(44px, 5vw, 70px); line-height: 1.12; }
.closing h2 em { color: #76562b; }
.button-ink { margin-top: 30px; background: var(--ink); color: var(--paper); }
.button-ink:hover { background: #382918; transform: translateY(-3px); }
.closing-disc { position: absolute; width: 580px; height: 580px; right: -70px; top: -70px; border: 1px solid #8b683b50; border-radius: 50%; transform: translateX(var(--closing-shift, 0px)); }
.closing-disc::before, .closing-disc::after { content: ''; position: absolute; border: 1px solid #8b683b50; border-radius: 50%; }
.closing-disc::before { inset: 60px; }
.closing-disc::after { inset: 120px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 40px; }
.footer-portal { color: var(--muted); font-size: 11px; }
.footer-portal strong { color: var(--gold); font-weight: 500; }
.footer-portal > span { margin-left: 8px; }
.site-footer > span { color: #8f826c; font-size: 10px; }
.will-reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease var(--reveal-delay, 0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms); }
.will-reveal.is-visible { opacity: 1; transform: translateY(0); }
.link-card.will-reveal.is-visible:hover { transform: translateY(-4px); }
@media (max-width: 1020px) {
  .shell { width: min(100% - 60px, 860px); }
  .hero { min-height: 700px; gap: 35px; }
  h1 { font-size: clamp(72px, 9vw, 96px); }
  .hero-actions { gap: 20px; }
  .tape-inner { grid-template-columns: 250px 1fr; gap: 50px; }
  .tape-edition { display: none; }
  .cassette { padding-inline: 13px; }
  .cassette-window { gap: 10px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 85px; }
  .shell { width: calc(100% - 40px); max-width: 500px; }
  .header-inner { min-height: 80px; }
  .wordmark > span { font-size: 25px; }
  .header-inner nav { gap: 0; }
  .header-inner nav > a:first-child { display: none; }
  .portal-link { font-size: 10px; padding: 11px 12px; }
  .portal-link span { margin-left: 8px; }
  .hero { display: flex; flex-direction: column; gap: 0; padding-block: 30px 74px; min-height: auto; }
  .brand-scene { order: -1; width: min(74%, 255px); align-self: center; margin-bottom: 30px; }
  .scene-note { bottom: -10px; font-size: 6px; letter-spacing: .15em; }
  .hero-copy { width: 100%; }
  .hero-copy .eyebrow { margin-bottom: 18px; font-size: 8px; }
  h1 { font-size: clamp(60px, 15vw, 80px); }
  .hero-description { max-width: 340px; margin-top: 22px; font-size: 13px; }
  .hero-actions { margin-top: 25px; gap: 20px; }
  .button { padding: 15px 17px; min-height: 52px; gap: 24px; font-size: 11px; }
  .hero-location { margin-top: 24px; font-size: 8px; }
  .hero-logo { transform: none; }
  .scroll-cue { bottom: 19px; font-size: 7px; }
  .tape-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding-block: 42px; }
  .cassette { width: 255px; align-self: center; }
  .tape-copy { width: 100%; }
  .tape-copy > p:last-child { font-size: 37px; }
  .connections { padding-block: 70px 76px; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 21px; margin-bottom: 30px; }
  .section-heading .eyebrow { font-size: 8px; margin-bottom: 20px; }
  .section-heading h2 { font-size: clamp(44px, 11vw, 60px); }
  .section-heading > p { max-width: 300px; font-size: 12px; }
  .link-grid { grid-template-columns: 1fr; gap: 13px; }
  .link-card { padding: 23px 24px; min-height: 240px; }
  .card-title { font-size: 39px; margin-block: 21px 24px; }
  .social-card { min-height: 215px; }
  .social-card .card-title { font-size: 34px; }
  .closing-inner { padding-block: 65px 70px; }
  .closing h2 { font-size: clamp(39px, 10vw, 55px); }
  .closing-disc { right: -420px; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 24px; padding-block: 35px; }
}