/* =========================================================
   LANTERN BRIDGE RESTORATION
   Scoped to .bridge-landmark-page so no other Valley page is affected.
   ========================================================= */

.bridge-landmark-page{
  --bridge-night:#07100d;
  --bridge-sky:#10221c;
  --bridge-water:#132d2d;
  --bridge-water-light:#9b8050;
  --bridge-wood:#4b3120;
  --bridge-wood-dark:#1d120c;
  --bridge-iron:#171815;
  --bridge-brass:#aa8952;
  --bridge-glow:#edc477;
}

.bridge-hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  isolation:isolate;
  background:
    radial-gradient(circle at 72% 17%,rgba(215,213,189,.12),transparent 17rem),
    linear-gradient(180deg,#0b1916 0%,#10251f 48%,#07100d 100%);
}

.bridge-sky{
  position:absolute;
  inset:0 0 36%;
  z-index:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 20%,rgba(225,221,198,.10),transparent 9rem),
    linear-gradient(180deg,#07100d,#153027);
}

.bridge-moon{
  position:absolute;
  right:14%;
  top:15%;
  color:#ded9bd;
  font-size:clamp(4.6rem,9vw,8.5rem);
  line-height:1;
  opacity:.82;
  filter:drop-shadow(0 0 22px rgba(218,213,184,.17));
}

.bridge-stars{
  position:absolute;
  left:17%;
  top:20%;
  color:#c9c3a7;
  letter-spacing:1.4rem;
  opacity:.48;
  font-size:1rem;
}

.bridge-landscape{
  position:absolute;
  inset:auto 0 29%;
  z-index:1;
  height:37%;
  overflow:hidden;
  color:#07100d;
  background:
    radial-gradient(ellipse at 55% 100%,#0b1712 0 45%,transparent 46%),
    linear-gradient(180deg,transparent,#09130f);
}

.bridge-landscape .pine{
  position:absolute;
  bottom:-1.3rem;
  color:#0a1711;
  line-height:1;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.7));
}
.bridge-landscape .p1{left:3%;font-size:17rem}
.bridge-landscape .p2{left:19%;font-size:12rem;color:#10251b}
.bridge-landscape .p3{right:13%;font-size:15rem}
.bridge-landscape .p4{right:-3%;font-size:19rem;color:#0b1812}

.distant-house{
  position:absolute;
  right:28%;
  bottom:15%;
  color:#dda04e;
  font-size:2.3rem;
  text-shadow:0 0 18px rgba(221,160,78,.7);
  opacity:.8;
}

.bridge-illustration{
  position:absolute;
  inset:auto 0 0;
  z-index:4;
  height:57%;
  perspective:900px;
  pointer-events:none;
}

/* Moonwater Creek */
.moonwater{
  position:absolute;
  inset:45% -8% 0;
  overflow:hidden;
  background:
    linear-gradient(90deg,transparent 0 20%,rgba(203,176,118,.10) 36%,rgba(237,196,119,.18) 51%,rgba(203,176,118,.08) 64%,transparent 82%),
    repeating-linear-gradient(176deg,#0c2222 0 11px,#143233 11px 19px,#0a1c1d 19px 29px);
  box-shadow:inset 0 16px 35px rgba(0,0,0,.55);
}
.moonwater:before{
  content:"";
  position:absolute;
  left:52%;
  top:0;
  width:12%;
  height:100%;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(237,196,119,.26),transparent 72%);
  filter:blur(7px);
  opacity:.62;
}
.moonwater i{
  position:absolute;
  left:50%;
  height:1px;
  border-radius:50%;
  background:rgba(230,202,145,.36);
  transform:translateX(-50%);
}
.moonwater i:nth-child(1){top:21%;width:22%}
.moonwater i:nth-child(2){top:47%;width:34%;opacity:.65}
.moonwater i:nth-child(3){top:72%;width:46%;opacity:.4}

/* Wooden bridge deck */
.bridge-deck{
  position:absolute;
  left:50%;
  bottom:18%;
  width:min(74rem,94vw);
  height:27%;
  transform:translateX(-50%) rotateX(57deg);
  transform-origin:center bottom;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:.38rem;
  padding:.65rem;
  background:#1d120c;
  border:3px solid #130c08;
  box-shadow:0 26px 35px rgba(0,0,0,.65);
}
.bridge-deck span{
  display:block;
  border:1px solid rgba(203,176,118,.14);
  background:
    repeating-linear-gradient(92deg,rgba(255,255,255,.025) 0 2px,transparent 2px 15px),
    linear-gradient(90deg,#392417,#5a3923 52%,#382216);
  box-shadow:inset 0 -8px 12px rgba(0,0,0,.22);
}

/* Railings */
.bridge-rail{
  position:absolute;
  bottom:23%;
  width:44%;
  height:28%;
  border-top:7px solid #382318;
  filter:drop-shadow(0 8px 7px rgba(0,0,0,.8));
}
.bridge-rail:before,
.bridge-rail:after{
  content:"";
  position:absolute;
  bottom:-1rem;
  width:7px;
  height:112%;
  background:linear-gradient(#50321e,#21140d);
}
.bridge-rail:before{left:8%}
.bridge-rail:after{right:8%}
.rail-left{left:3%;transform:skewY(9deg)}
.rail-right{right:3%;transform:skewY(-9deg)}

/* The approved Smoulderhouse signature lantern:
   blackened iron, aged brass, four panes, honey-amber light. */
.signature-lantern{
  position:absolute;
  z-index:8;
  left:50%;
  bottom:47%;
  width:4.8rem;
  height:8rem;
  transform:translateX(-50%);
  border:3px solid var(--bridge-iron);
  border-radius:.45rem .45rem .7rem .7rem;
  background:
    linear-gradient(90deg,transparent 46%,rgba(20,20,17,.88) 47% 53%,transparent 54%),
    linear-gradient(180deg,rgba(255,236,176,.84),rgba(224,161,70,.52) 58%,rgba(93,55,22,.35));
  box-shadow:
    0 0 22px rgba(237,196,119,.48),
    0 0 80px rgba(221,160,78,.25),
    inset 0 0 20px rgba(255,230,158,.35);
}
.signature-lantern:before{
  content:"";
  position:absolute;
  left:50%;
  top:-2.1rem;
  width:3.7rem;
  height:2rem;
  transform:translateX(-50%);
  border:4px solid var(--bridge-iron);
  border-bottom:0;
  border-radius:50% 50% 0 0;
}
.signature-lantern:after{
  content:"";
  position:absolute;
  left:50%;
  top:-.9rem;
  width:5.8rem;
  height:1.35rem;
  transform:translateX(-50%);
  clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);
  background:linear-gradient(#2c2b25,#11120f);
  border-bottom:2px solid var(--bridge-brass);
}
.signature-lantern i{
  position:absolute;
  inset:12% 12%;
  border:1px solid rgba(170,137,82,.8);
  box-shadow:inset 0 0 18px rgba(255,230,158,.48);
}
.signature-lantern b{
  position:absolute;
  left:50%;
  bottom:13%;
  width:1rem;
  height:2.1rem;
  transform:translateX(-50%);
  border-radius:55% 55% 45% 45%;
  background:linear-gradient(#fff0a7,#e89b3f 55%,#7b3e15);
  box-shadow:0 0 18px rgba(255,211,111,.92);
}

/* Atmosphere and copy */
.bridge-hero-shade{
  position:absolute;
  inset:0;
  z-index:6;
  background:
    linear-gradient(180deg,rgba(4,8,6,.10) 0 30%,rgba(4,8,6,.30) 61%,rgba(4,8,6,.97) 100%),
    linear-gradient(90deg,rgba(3,7,5,.72),transparent 68%);
}

.journey-hero-copy{
  position:relative;
  z-index:10;
  width:min(56rem,92vw);
  padding:10rem clamp(1.4rem,7vw,7rem) 6rem;
  text-shadow:0 2px 24px rgba(0,0,0,.9);
}
.journey-hero-copy h1{
  max-width:10ch;
  margin:.2rem 0 1rem;
  font-size:clamp(3.7rem,9vw,8rem);
  font-weight:500;
  line-height:.9;
}
.journey-hero-copy .lead{
  max-width:38rem;
  color:var(--paper);
  font-size:clamp(1.18rem,2.3vw,1.65rem);
}

.arrival-ribbon{
  padding-top:2.2rem;
  padding-bottom:2.2rem;
  background:#080d0a;
}
.journey-trail{
  width:min(920px,94vw);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
}
.journey-trail>a,
.journey-trail>div{
  min-width:0;
  padding:1.2rem;
  text-decoration:none;
  border-right:1px solid var(--line);
  background:rgba(16,26,19,.75);
}
.journey-trail>*:last-child{border-right:0}
.journey-trail [aria-current="step"]{
  background:linear-gradient(145deg,rgba(82,36,38,.5),rgba(16,26,19,.9));
}
.journey-trail span{
  display:block;
  color:var(--brass);
  font-size:.72rem;
  letter-spacing:.14em;
}
.journey-trail strong,
.journey-trail small{display:block}
.journey-trail small{color:var(--muted)}

.bridge-welcome{
  text-align:center;
  background:radial-gradient(circle at 50% 0,rgba(221,160,78,.08),transparent 30rem);
}
.bridge-plaque{
  width:min(34rem,90%);
  margin:2.7rem auto 0;
  padding:1.3rem;
  border:1px solid rgba(203,176,118,.35);
  border-left:3px solid var(--ember);
  background:linear-gradient(145deg,rgba(24,37,28,.94),rgba(9,12,9,.98));
}
.bridge-plaque span{color:var(--muted);font-size:1rem}

.bridge-detail-section{
  background:linear-gradient(180deg,rgba(43,23,39,.17),transparent);
}
.bridge-detail-grid{
  width:min(1120px,94vw);
  margin:2.4rem auto 0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}
.bridge-detail-grid article{
  padding:1.45rem;
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(24,37,28,.9),rgba(9,12,9,.98));
}
.bridge-detail-grid article>span{font-size:2rem}
.bridge-detail-grid h3{margin:.65rem 0 .4rem;font-weight:500}
.bridge-detail-grid p{margin:0;color:var(--paper)}

.keeper-section{
  background:radial-gradient(circle at 20% 30%,rgba(221,160,78,.08),transparent 24rem);
}
.keeper-section .split{
  width:min(1050px,94vw);
  margin:auto;
  display:grid;
  grid-template-columns:minmax(15rem,.7fr) minmax(0,1.3fr);
  align-items:center;
  gap:clamp(2rem,6vw,6rem);
}
.keeper-lantern{
  min-height:22rem;
  display:grid;
  place-items:center;
  border:1px solid rgba(203,176,118,.25);
  background:
    radial-gradient(circle,rgba(237,196,119,.18),transparent 38%),
    linear-gradient(145deg,#152219,#070b08);
}
.keeper-lantern span{
  filter:grayscale(1) sepia(.28) drop-shadow(0 0 20px rgba(221,160,78,.35));
  font-size:7rem;
  opacity:.78;
}

.crossing-section{text-align:center}
.nearby-places{background:rgba(16,26,19,.46)}

@media(max-width:850px){
  .bridge-hero{min-height:94svh}
  .bridge-illustration{height:50%}
  .bridge-landscape{bottom:31%}
  .bridge-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .keeper-section .split{grid-template-columns:1fr}
  .keeper-lantern{min-height:15rem}
}
@media(max-width:620px){
  .bridge-stars{display:none}
  .bridge-moon{right:7%;top:13%}
  .bridge-landscape .p1{font-size:11rem}
  .bridge-landscape .p2{font-size:8rem}
  .bridge-landscape .p3{font-size:10rem}
  .bridge-landscape .p4{font-size:12rem}
  .signature-lantern{bottom:46%;transform:translateX(-50%) scale(.82)}
  .bridge-deck{width:115vw;bottom:17%}
  .bridge-rail{width:48%;bottom:23%}
  .journey-hero-copy{padding-top:8rem;padding-bottom:4.5rem}
  .journey-trail{grid-template-columns:1fr}
  .journey-trail>a,.journey-trail>div{border-right:0;border-bottom:1px solid var(--line)}
  .journey-trail>*:last-child{border-bottom:0}
  .bridge-detail-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .signature-lantern{box-shadow:0 0 28px rgba(237,196,119,.34),inset 0 0 14px rgba(255,230,158,.28)}
}

/* Estate Polish 002 · Reveal the approved Lantern Bridge artwork. */
.bridge-hero-art{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.bridge-landmark-page .bridge-sky,
.bridge-landmark-page .bridge-landscape,
.bridge-landmark-page .bridge-illustration{
  display:none;
}
.bridge-landmark-page .bridge-hero-shade{
  background:
    linear-gradient(180deg,rgba(4,8,6,.08) 0 34%,rgba(4,8,6,.30) 64%,rgba(4,8,6,.94) 100%),
    linear-gradient(90deg,rgba(3,7,5,.80) 0%,rgba(3,7,5,.48) 42%,transparent 74%);
}
@media(max-width:700px){
  .bridge-hero-art{object-position:58% center}
}