/* ============================================================
   $LINDY — Roman temple. Marble, travertine, oxidized bronze.
   ============================================================ */

:root{
  --marble:   #f2ece0;   /* aged marble white  */
  --marble-2: #e9e0cf;   /* travertine cream   */
  --marble-3: #ddd0b8;   /* deeper stone       */
  --ink:      #211d17;   /* obsidian text      */
  --ink-soft: #4a4136;
  --ink-faint:#7a6f5e;
  --bronze:   #8c6a3f;   /* weathered bronze   */
  --gold:     #a9863f;   /* aged gold          */
  --gold-lt:  #c6a862;
  --verdigris:#5f7a6e;   /* oxidized copper    */
  --line:     rgba(33,29,23,.14);
  --shadow:   rgba(33,29,23,.18);

  --serif:  "EB Garamond", Georgia, serif;
  --roman:  "Cinzel", "Times New Roman", serif;
  --script: "Cormorant Garamond", Georgia, serif;

  --maxw: 1160px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--serif);
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, #f7f2e8 0%, var(--marble) 45%, var(--marble-2) 100%);
  background-attachment:fixed;
  font-size:19px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* film grain / stone texture */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
body::after{ /* vignette */
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%, transparent 60%, rgba(33,29,23,.10) 100%);
}

/* ---------- carved / inscription text ---------- */
.carve{
  font-family:var(--roman);
  color:var(--ink);
  letter-spacing:.02em;
  text-shadow:
     0 1px 0 rgba(255,255,255,.55),
     0 -1px 0 rgba(33,29,23,.28);
}
.amp{ color:var(--bronze); font-weight:600; letter-spacing:.03em; }

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; gap:2rem;
  padding:1.05rem clamp(1.1rem,4vw,3rem);
  background:linear-gradient(var(--marble), rgba(242,236,224,.72));
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--ink); }
.brand-mark{ color:var(--bronze); font-size:1.25rem; transform:translateY(1px); }
.brand-word{ font-family:var(--roman); font-weight:800; letter-spacing:.28em; font-size:1.05rem; }
.nav-links{ display:flex; gap:1.6rem; margin-left:auto; }
.nav-links a{
  font-family:var(--roman); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; transition:color .25s;
}
.nav-links a:hover{ color:var(--bronze); }
.nav-ext{ display:flex; gap:.5rem; align-items:center; }
.pill{
  font-family:var(--roman); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft);
  padding:.5rem .85rem; border:1px solid var(--line); border-radius:2px;
  transition:.25s;
}
.pill:hover{ border-color:var(--bronze); color:var(--bronze); }
.pill-solid{ background:var(--ink); color:var(--marble); border-color:var(--ink); }
.pill-solid:hover{ background:var(--bronze); border-color:var(--bronze); color:#fff; }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:8rem 1.25rem 4rem; overflow:hidden;
}
.hero-arch{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:min(760px,92vw); opacity:.55; z-index:0; filter:drop-shadow(0 20px 40px var(--shadow));
}
.hero-arch svg{ width:100%; height:auto; display:block; }
.hero-inner{ position:relative; z-index:2; max-width:900px; }

/* bust medallion */
.bust-medallion{
  width:clamp(150px,22vw,210px); margin:0 auto 2rem; text-align:center;
}
.bust-medallion img{
  width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%;
  filter:sepia(.28) contrast(1.03) brightness(1.02);
  border:3px solid var(--gold);
  box-shadow:
    0 0 0 8px rgba(255,255,255,.35),
    0 0 0 9px rgba(140,106,63,.35),
    0 22px 45px -18px var(--shadow);
}
.bust-medallion figcaption{
  margin-top:1rem; font-family:var(--roman); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint);
}

.eyebrow{
  font-family:var(--roman); font-size:.72rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--bronze); margin-bottom:1.6rem;
}
.hero-title{
  font-size:clamp(2.6rem,7vw,5.4rem); font-weight:700; line-height:1.05;
}
.hero-title em{ font-style:italic; font-family:var(--script); font-weight:500; color:var(--bronze); }
.hero-sub{
  max-width:640px; margin:1.9rem auto 0; font-size:1.18rem; color:var(--ink-soft);
}

/* CA row */
.ca-row{
  margin:3rem auto 0; display:inline-flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  justify-content:center;
  padding:.55rem .55rem .55rem .9rem; border:1px solid var(--line); border-radius:3px;
  background:rgba(255,255,255,.35);
}
.ca-key{ font-family:var(--roman); font-size:.66rem; letter-spacing:.2em; color:var(--bronze); }
.ca-val{ font-family:"Courier New",monospace; font-size:.82rem; color:var(--ink-soft); word-break:break-all; }
.ca-copy{
  font-family:var(--roman); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.45rem .8rem; border:none; border-radius:2px; cursor:pointer;
  background:var(--ink); color:var(--marble); transition:.25s;
}
.ca-copy:hover{ background:var(--bronze); }
.ca-copy.done{ background:var(--verdigris); }

.scroll-cue{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  font-family:var(--roman); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint);
}
.scroll-cue i{ font-style:normal; animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* ============ SECTIONS ============ */
.section{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(4.5rem,11vw,9rem) clamp(1.25rem,5vw,3rem);
}
.sec-num{
  font-family:var(--roman); font-weight:700; font-size:.9rem; letter-spacing:.3em;
  color:var(--bronze); opacity:.7; margin-bottom:1.5rem;
}
.sec-title{ font-size:clamp(2rem,5vw,3.4rem); font-weight:600; line-height:1.1; }
.sec-title.center{ text-align:center; }
.sec-kicker{
  margin-top:1rem; font-family:var(--script); font-style:italic; font-size:1.3rem; color:var(--bronze);
}
.proof-head{ text-align:center; margin-bottom:3.5rem; }

/* divider between sections */
.section + .section::before{
  content:"❦"; position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  font-size:1.1rem; color:var(--bronze); opacity:.55;
  background:var(--marble); padding:0 1rem;
}
.section::after{
  content:""; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}
.hero + .section::after,.hero + .section::before{ display:none; }

/* ---------- Thesis ---------- */
.thesis-grid{ display:grid; grid-template-columns:1fr 1.6fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.thesis-body p{ margin-bottom:1.1rem; color:var(--ink-soft); }
.thesis-body .lead{ font-size:1.5rem; font-family:var(--script); font-style:italic; color:var(--ink); }
.thesis-body em{ color:var(--bronze); font-style:italic; }
.dual{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:2rem 0; }
.dual-col{ padding:1.4rem 1.3rem; border-radius:3px; border:1px solid var(--line); background:rgba(255,255,255,.28); }
.dual-col p{ margin:0; font-size:.98rem; }
.dual-tag{ display:block; font-family:var(--roman); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.6rem; }
.perish .dual-tag{ color:var(--ink-faint); }
.endure{ border-color:rgba(140,106,63,.35); background:rgba(169,134,63,.08); }
.endure .dual-tag{ color:var(--bronze); }
.closer strong{ color:var(--ink); }

/* ---------- The Lindy Curve ---------- */
.curve{
  max-width:820px; margin:4rem auto 0; padding:2.2rem clamp(1.2rem,4vw,2.6rem) 1.6rem;
  background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(233,224,207,.5));
  border:1px solid rgba(140,106,63,.28); border-radius:5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 20px 44px -24px var(--shadow);
}
.curve-cap{
  font-family:var(--roman); font-weight:600; font-size:.82rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--bronze); text-align:center; margin-bottom:1.2rem;
}
.curve svg{ width:100%; height:auto; display:block; overflow:visible; }
.curve .axis{ stroke:var(--ink-soft); stroke-width:1.5; }
.curve .grid line{ stroke:var(--line); stroke-width:1; stroke-dasharray:2 6; }
.curve .line-perish{ fill:none; stroke:var(--ink-faint); stroke-width:3; stroke-linecap:round; opacity:.75; }
.curve .line-lindy{ fill:none; stroke:var(--bronze); stroke-width:4; stroke-linecap:round;
  filter:drop-shadow(0 3px 5px rgba(140,106,63,.3)); }
.curve .dot-perish{ fill:var(--ink-faint); }
.curve .dot-lindy{ fill:var(--gold); stroke:#fff; stroke-width:1.5; }
.curve .ax-label{ font-family:var(--roman); font-size:12px; letter-spacing:.14em; fill:var(--ink-faint); }
.curve .lab-perish{ font-family:var(--serif); font-style:italic; font-size:15px; fill:var(--ink-faint); }
.curve .lab-lindy{ font-family:var(--serif); font-style:italic; font-size:16px; fill:var(--bronze); }
.curve .lab-lindy tspan{ font-family:var(--roman); font-style:normal; font-weight:600; fill:var(--ink); }
.curve-note{
  margin-top:1.2rem; text-align:center; font-family:var(--script); font-style:italic;
  font-size:1.12rem; color:var(--ink-soft); max-width:560px; margin-left:auto; margin-right:auto;
}

/* ---------- Proof colonnade ---------- */
.proof{ position:relative; }
.proof::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url("content/aqueduct.jpg") center/cover no-repeat;
  opacity:.07; mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.colonnade{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden;
}
.monument{
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(233,224,207,.5));
  padding:2.2rem 1.5rem; text-align:center; transition:transform .4s ease, background .4s;
}
.monument:hover{ background:linear-gradient(180deg,#fff,rgba(233,224,207,.7)); transform:translateY(-4px); }
.mon-glyph{ font-size:2rem; color:var(--bronze); display:block; margin-bottom:.9rem; }
.monument h3{ font-family:var(--roman); font-weight:600; font-size:1.02rem; letter-spacing:.02em; }
.mon-age{ display:block; font-family:var(--roman); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:.55rem 0 .8rem; }
.monument p{ font-size:.92rem; color:var(--ink-soft); }
.proof-punch{
  text-align:center; max-width:680px; margin:3.5rem auto 0; font-size:1.4rem;
  font-family:var(--script); font-style:italic; color:var(--ink);
}
.proof-punch em{ color:var(--bronze); font-style:italic; }
.strike{ text-decoration:line-through; text-decoration-color:var(--bronze); opacity:.6; }

/* ---------- Lineage / Origin ---------- */
.lineage{ list-style:none; max-width:760px; margin:0 auto; position:relative; }
.lineage::before{ content:""; position:absolute; left:calc(6rem + .5px); top:.5rem; bottom:.5rem; width:1px; background:var(--line); }
.lineage li{ display:grid; grid-template-columns:6rem 1fr; gap:2rem; padding:1.4rem 0; position:relative; }
.lin-year{ font-family:var(--roman); font-size:.78rem; letter-spacing:.1em; color:var(--bronze); text-align:right; padding-top:.2rem; }
.lineage li::after{ content:"◆"; position:absolute; left:calc(6rem - .35rem); top:1.5rem; font-size:.7rem; color:var(--bronze); background:var(--marble); }
.lineage h4{ font-family:var(--roman); font-weight:600; font-size:1.15rem; margin-bottom:.4rem; }
.lineage p{ color:var(--ink-soft); font-size:1rem; }

/* ---------- Atmosphere band (full bleed) ---------- */
.band{
  position:relative; z-index:2; min-height:62vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:6rem 1.5rem; overflow:hidden; margin:2rem 0;
}
.band-img{ position:absolute; inset:0; background-size:cover; background-position:center; filter:sepia(.25) contrast(1.02); }
.band-veil{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(242,236,224,.86), rgba(233,224,207,.7) 50%, rgba(242,236,224,.92)); }
.band-quote{ position:relative; z-index:2; max-width:760px; }
.band-quote p{ font-size:clamp(1.9rem,5.5vw,3.4rem); font-weight:600; line-height:1.12; }
.band-quote cite{
  display:block; margin-top:1.4rem; font-family:var(--roman); font-style:normal;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bronze);
}

/* ---------- Lindy Paper ---------- */
.paper-scroll{
  max-width:720px; margin:0 auto; text-align:center;
  padding:clamp(2.4rem,6vw,4rem) clamp(1.6rem,5vw,3.6rem);
  background:linear-gradient(180deg,#f6efe0,#eaddc4);
  border:1px solid rgba(140,106,63,.28); border-radius:5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 24px 50px -24px var(--shadow);
}
.paper-line{ font-family:var(--script); font-style:italic; font-size:1.7rem; color:var(--ink); }
.paper-scroll .rule{ border:none; height:1px; width:60%; margin:1.8rem auto; background:linear-gradient(90deg,transparent,var(--bronze),transparent); opacity:.5; }
.paper-scroll p{ color:var(--ink-soft); margin-bottom:1.1rem; }
.paper-sign{ font-family:var(--roman); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze); margin-top:1.6rem; }

/* ---------- Forge ---------- */
.forge-tool{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; max-width:900px; margin:0 auto; }
.forge-canvas-wrap{
  position:relative; aspect-ratio:1; border:1px solid var(--line); border-radius:4px; overflow:hidden;
  background:repeating-conic-gradient(rgba(0,0,0,.03) 0% 25%, transparent 0% 50%) 50% / 28px 28px, var(--marble-2);
  display:flex; align-items:center; justify-content:center;
}
#pfpCanvas{ width:100%; height:100%; display:block; }
.forge-empty{ position:absolute; font-family:var(--roman); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.forge-controls{ display:flex; flex-direction:column; gap:1.1rem; align-items:flex-start; }
.btn-stone,.btn-solid{
  font-family:var(--roman); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  padding:.85rem 1.6rem; border-radius:3px; text-decoration:none; text-align:center; transition:.25s; border:1px solid transparent;
}
.btn-stone{ background:linear-gradient(180deg,#efe6d3,#e0d3b8); color:var(--ink); border-color:rgba(140,106,63,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); }
.btn-stone:hover{ transform:translateY(-2px); }
.btn-solid{ background:var(--ink); color:var(--marble); }
.btn-solid:hover:not(:disabled){ background:var(--bronze); }
.btn-solid:disabled{ opacity:.4; cursor:not-allowed; }
.btn-solid.lg{ padding:1.05rem 3rem; font-size:.82rem; }
.forge-opts{ display:flex; gap:.5rem; }
.chip{
  font-family:var(--roman); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  padding:.5rem .9rem; border:1px solid var(--line); background:transparent; border-radius:2px; color:var(--ink-soft); transition:.2s;
}
.chip.is-on{ background:var(--bronze); color:#fff; border-color:var(--bronze); }
.forge-hint{ font-size:.85rem; color:var(--ink-faint); }
.forge-hint code{ font-family:"Courier New",monospace; color:var(--bronze); }

/* ---------- Buy ---------- */
.steps{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; max-width:900px; margin:0 auto; }
.steps li{ padding:2rem 1.6rem; border:1px solid var(--line); border-radius:4px; background:rgba(255,255,255,.28); text-align:center; }
.step-n{ font-family:var(--roman); font-size:1.4rem; color:var(--bronze); display:block; margin-bottom:.8rem; }
.steps h4{ font-family:var(--roman); font-weight:600; margin-bottom:.5rem; }
.steps p{ font-size:.95rem; color:var(--ink-soft); }
.buy-cta{ text-align:center; margin-top:3rem; }

/* ---------- Footer ---------- */
.footer{ position:relative; z-index:2; text-align:center; padding:5rem 1.5rem 3rem; border-top:1px solid var(--line); margin-top:3rem; }
.foot-laurel{ font-size:1.6rem; color:var(--bronze); margin-bottom:1rem; }
.foot-quote{ font-size:clamp(1.3rem,3.5vw,2rem); font-weight:500; margin-bottom:1.8rem; }
.foot-links{ display:flex; gap:1.8rem; justify-content:center; flex-wrap:wrap; margin-bottom:2rem; }
.foot-links a{ font-family:var(--roman); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; transition:.25s; }
.foot-links a:hover{ color:var(--bronze); }
.foot-fine{ font-size:.78rem; color:var(--ink-faint); max-width:560px; margin:0 auto; }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .nav-links{ display:none; }
  .thesis-grid{ grid-template-columns:1fr; }
  .colonnade{ grid-template-columns:repeat(2,1fr); }
  .forge-tool{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .dual{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  body{ font-size:17px; }
  .colonnade{ grid-template-columns:1fr; }
  .age-clock .unit{ min-width:2.7rem; }
  .lineage li{ grid-template-columns:4rem 1fr; gap:1.2rem; }
  .lineage::before{ left:calc(4rem + .5px); }
  .lineage li::after{ left:calc(4rem - .35rem); }
  .ca-val{ font-size:.7rem; }
}

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-cue i{ animation:none; }
}