/* ============================================================
   THE DREAM STATE — About (Burslem / Stoke-on-Trent)
   A sky that breaks into dawn and reveals a Potteries skyline of
   bottle kilns as you scroll. Authentic, warm, hand-made feel.
   ============================================================ */

/* ---------- Fixed sky system ---------- */
.sky{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, #0a0712 0%, #140a1f 42%, #20102b 72%, #2a1430 100%); }
.sky-dawn{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.15;
  background:
    radial-gradient(120vw 70vh at 50% 118%, rgba(212,175,55,.55), rgba(212,175,55,.12) 38%, transparent 62%),
    radial-gradient(90vw 50vh at 50% 122%, rgba(243,222,155,.5), transparent 60%); }
.stars{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20% 18%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 70% 12%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 44% 26%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 85% 30%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 12% 40%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 60% 38%, rgba(255,255,255,.3), transparent);
  opacity:.7; transition:opacity 1s; }
#stoke-embers{ position:fixed; inset:0; z-index:0; pointer-events:none; }

/* ---------- Potteries motif crossfade (faint big icons) ---------- */
.pot-motifs{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.pot-motif{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 1.2s ease; }
.pot-motif.on{ opacity:.16; }
.pot-motif svg{ width:min(80vh,80vw); height:auto; }

/* ---------- Fixed skyline (bottle kilns) ---------- */
.skyline{ position:fixed; left:0; right:0; bottom:0; z-index:0; pointer-events:none;
  height:46vh; opacity:.25; transform:translateY(40px); transition:opacity .6s; will-change:transform,opacity; }
.skyline svg{ width:100%; height:100%; display:block; }
.skyline .smoke{ transform-origin:center bottom; }
.skyline .smoke circle{ animation:smokeRise 7s ease-in infinite; }
.skyline .smoke.s2 circle{ animation-duration:9s; animation-delay:1.5s; }
.skyline .smoke.s3 circle{ animation-duration:8s; animation-delay:3s; }
@keyframes smokeRise{
  0%{ transform:translateY(0) scale(.6); opacity:0; }
  20%{ opacity:.5; }
  100%{ transform:translateY(-120px) scale(1.8); opacity:0; }
}
.bg-grain{ z-index:0; }

/* ---------- Content tone for this page ---------- */
.ab-hero{ position:relative; min-height:92svh; display:flex; align-items:flex-end; padding:8rem 0 5rem; }
.ab-hero .eyebrow{ color:var(--gold-2); }
.ab-hero h1{ font-size:clamp(2.8rem,7.4vw,6rem); }
.ab-hero .place{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2); border:1px solid var(--line);
  border-radius:100px; padding:.5em 1em; background:rgba(20,10,30,.5); backdrop-filter:blur(6px); }
.ab-hero .lead{ max-width:56ch; }

/* glass content cards so text reads over the sky */
.glass{ background:rgba(14,9,20,.62); backdrop-filter:blur(10px) saturate(130%);
  border:1px solid var(--line-2); border-radius:var(--radius); }

/* ---------- Steve's letter ---------- */
.letter{ position:relative; border:1px solid var(--line); border-radius:24px; overflow:hidden;
  background:linear-gradient(165deg, rgba(39,0,48,.62), rgba(10,7,16,.82)); backdrop-filter:blur(8px);
  padding:clamp(2rem,5vw,4rem); }
.letter::before{ content:"“"; position:absolute; top:-10px; left:24px; font-family:var(--display);
  font-size:8rem; color:var(--gold); opacity:.14; line-height:1; }
.letter .from{ display:flex; align-items:center; gap:14px; margin-bottom:1.6rem; }
.letter .from .pic{ width:56px; height:56px; border-radius:50%; object-fit:cover; border:1px solid var(--line);
  background:var(--purple-2); display:flex; align-items:center; justify-content:center; font-family:var(--display); color:var(--gold-2); font-size:1.4rem; flex:0 0 auto; }
.letter .from b{ color:#fff; font-size:1rem; display:block; font-family:var(--sans); }
.letter .from span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2); }
.letter p{ font-size:clamp(1.08rem,1.7vw,1.32rem); line-height:1.72; color:var(--cream); margin-bottom:1.3rem; max-width:62ch; }
.letter p.first::first-letter{ font-family:var(--display); font-size:3.4rem; float:left; line-height:.8; padding:.08em .14em 0 0; color:var(--gold-2); }
.letter .sign{ font-family:var(--display); font-style:italic; font-size:1.8rem; color:var(--gold-3); margin-top:.5rem; }
.letter .sign small{ display:block; font-family:var(--mono); font-style:normal; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist-2); margin-top:.4rem; }

/* ---------- Heritage values (kiln cards) ---------- */
.heritage{ display:grid; gap:18px; grid-template-columns:1fr; }
@media(min-width:760px){ .heritage{ grid-template-columns:repeat(2,1fr); } }
.kiln-card{ display:flex; gap:18px; padding:var(--s-4); border:1px solid var(--line-2); border-radius:18px;
  background:rgba(14,9,20,.6); backdrop-filter:blur(8px); transition:transform .4s var(--ease),border-color .4s; }
.kiln-card:hover{ transform:translateY(-5px); border-color:var(--line); }
.kiln-card .ic{ flex:0 0 auto; width:54px; height:54px; }
.kiln-card h4{ margin:0 0 .4rem; }
.kiln-card p{ font-size:.92rem; color:var(--mist); }

/* ---------- Facts panel ---------- */
.facts{ display:grid; gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:18px; overflow:hidden; }
@media(min-width:680px){ .facts{ grid-template-columns:repeat(3,1fr); } }
.fact{ background:rgba(12,8,18,.8); padding:var(--s-4); }
.fact .k{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2); }
.fact .v{ font-family:var(--display); font-size:1.5rem; color:#fff; margin:.4rem 0 .2rem; line-height:1.1; }
.fact .d{ font-size:.84rem; color:var(--mist-2); }

/* ---------- timeline ---------- */
.tl{ position:relative; padding-left:30px; }
.tl::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,var(--gold),rgba(212,175,55,.1)); }
.tl-item{ position:relative; padding:0 0 1.6rem; }
.tl-item::before{ content:""; position:absolute; left:-30px; top:4px; width:16px; height:16px; border-radius:50%;
  background:#0c0810; border:2px solid var(--gold); box-shadow:0 0 12px rgba(212,175,55,.5); }
.tl-item .yr{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2); }
.tl-item h4{ margin:.3rem 0 .4rem; }
.tl-item p{ color:var(--mist); font-size:.95rem; }

.media .cap{ } /* keep existing */

@media (prefers-reduced-motion: reduce){
  .skyline .smoke circle{ animation:none; opacity:0; }
  .skyline{ transform:none; }
}