/* 7Luar — luar-moonpool-terrace-b10l  |  Italiana + Poiret One + Red Hat Text */
@font-face{font-family:"Tenor Sans";src:url("/fonts/tenor.woff2?v=0714c") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Italiana;src:url("/fonts/italiana.woff2?v=0714c") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poiret One";src:url("/fonts/poiret.woff2?v=0714c") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Red Hat Text";src:url("/fonts/rht-400.woff2?v=0714c") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Red Hat Text";src:url("/fonts/rht-500.woff2?v=0714c") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Red Hat Text";src:url("/fonts/rht-600.woff2?v=0714c") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Red Hat Text";src:url("/fonts/rht-700.woff2?v=0714c") format("woff2");font-weight:700;font-display:swap}

:root{
  --ink:#050818;
  --ink-2:#0a1022;
  --ink-3:#121a33;
  --silver:#cfd8e6;
  --silver-dim:#9aa6bb;
  --teal:#5eead4;
  --teal-deep:#14b8a6;
  --amethyst:#8b7cff;
  --pearl:#f4f1ea;
  --gold:#e8d9a0;
  --stone:#2a3348;
  --line:rgba(207,216,230,.28);
  --cta:#5eead4;
  --cta-ink:#04221c;
  --rec:#c4b4ff;
  --rec-ink:#160b33;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--ink);color:var(--pearl);font-family:"Red Hat Text",system-ui,sans-serif;font-size:16px;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--gold)}
h1,h2,h3,.brand-name,.tile-name,.plaque-k{font-family:"Tenor Sans","Red Hat Text",sans-serif;font-weight:400;letter-spacing:.03em}
.seven{font-family:"Red Hat Text",system-ui,sans-serif;font-weight:700;letter-spacing:0;font-style:normal}
.poiret{font-family:"Poiret One",sans-serif}
button,input,select{font-family:inherit}

/* star field */
body{
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(244,241,234,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 72%, rgba(94,234,212,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 11%, rgba(244,241,234,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 81% 44%, rgba(232,217,160,.45) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 93% 82%, rgba(207,216,230,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 47% 91%, rgba(139,124,255,.45) 50%, transparent 51%),
    radial-gradient(900px 500px at 70% 0%, rgba(20,40,90,.55), transparent 60%),
    var(--ink);
}

.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:12px;top:12px;background:var(--teal);color:var(--cta-ink);padding:.5rem 1rem;z-index:80}

/* ===== silver balustrade header ===== */
.mast{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(#161d30 0%, #0c1224 70%, #090e1c 100%);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.mast::before{
  content:"";display:block;height:12px;
  background:
    repeating-linear-gradient(90deg,
      #1c2438 0 11px,
      #cfd8e6 11px 13px,
      #1c2438 13px 18px,
      rgba(232,217,160,.45) 18px 19px,
      #1c2438 19px 24px),
    linear-gradient(#3a445c,#12182b);
  border-bottom:1px solid rgba(232,217,160,.4);
  box-shadow:0 1px 0 rgba(94,234,212,.15);
}
.mast-row{
  max-width:var(--max);margin:0 auto;padding:.28rem 1rem .32rem;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;
}
.nav-left,.nav-right{display:flex;gap:.45rem;flex-wrap:wrap}
.nav-left{justify-content:flex-start}
.nav-right{justify-content:flex-end}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid rgba(94,234,212,.7);
  background:linear-gradient(180deg,rgba(20,40,55,.95),rgba(8,16,32,.92));
  color:#f4fffb;
  border-radius:999px;
  padding:.4rem .95rem;
  font-size:.9rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:700;
  box-shadow:0 0 14px rgba(94,234,212,.28), inset 0 1px 0 rgba(255,255,255,.12);
}
.chip svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9}
.chip:hover,.chip.is-here{border-color:#bffff4;color:#bffff4;background:linear-gradient(180deg,rgba(40,90,90,.95),rgba(10,30,40,.95));box-shadow:0 0 20px rgba(94,234,212,.5)}
.brand{display:flex;align-items:center;gap:.45rem;color:#fff;justify-content:center}
.brand-mark{width:32px;height:32px;display:block}
.brand-name{font-size:2.05rem;letter-spacing:.1em;line-height:1;color:#fff;text-shadow:0 0 16px rgba(94,234,212,.35)}
.brand-name .seven{font-size:1.08em;color:var(--teal);margin-right:.02em;text-shadow:0 0 12px rgba(94,234,212,.6)}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--silver);border-radius:8px;padding:.35rem .55rem}

/* ticker */
.tide{
  overflow:hidden;white-space:nowrap;
  background:#070b16;
  border-top:1px solid rgba(94,234,212,.2);
  border-bottom:1px solid rgba(94,234,212,.15);
  font-size:.7rem;color:var(--silver);
  letter-spacing:.04em;
}
.tide-track{display:inline-flex;gap:3rem;padding:.18rem 0;animation:tide 42s linear infinite}
.tide-track span{display:inline-flex;align-items:center;gap:.4rem}
@keyframes tide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== stage: illustrated hero + tiles, lunar dial on the right ===== */
.stage{
  max-width:var(--max);margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 248px;
  gap:.55rem;
  align-items:stretch;
  padding:.18rem 1rem 0;
}
.stage-main{min-width:0;display:flex;flex-direction:column}
.hero{
  position:relative;
  height:312px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(207,216,230,.32);
  box-shadow:0 16px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(232,217,160,.12);
  background:#071018;
}
.hero > img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 58%;
  display:block;
}
.hero-copy{
  position:absolute;z-index:2;
  inset:0 auto 0 0;
  width:min(48%, 430px);
  padding:1.15rem 1.25rem 1.15rem 1.4rem;
  background:linear-gradient(90deg, rgba(5,8,24,.82) 0%, rgba(5,8,24,.52) 62%, rgba(5,8,24,0) 100%);
  display:flex;flex-direction:column;justify-content:center;
}
.hero-copy h1{
  font-size:clamp(2.15rem, 3.7vw, 3.15rem);
  line-height:1.05;
  color:#fff;
  margin:0 0 .4rem;
  letter-spacing:.02em;
  text-shadow:
    0 0 18px rgba(180,230,255,.45),
    0 0 36px rgba(94,234,212,.3),
    0 4px 16px rgba(0,0,0,.8);
}
.hero-copy p{color:#eef3fb;max-width:34ch;margin:0 0 .7rem;font-size:.9rem;line-height:1.4;text-shadow:0 2px 10px rgba(0,0,0,.7)}

/* RTP lunar dial */
.dial{
  background:linear-gradient(180deg, rgba(18,26,51,.96), rgba(8,12,24,.97));
  border:1px solid rgba(207,216,230,.3);
  border-radius:14px;
  padding:.55rem .65rem .5rem;
  box-shadow:0 12px 28px rgba(0,0,0,.4), inset 0 0 0 1px rgba(232,217,160,.08);
  z-index:2;
  display:flex;flex-direction:column;
}
.dial h2{
  margin:0 0 .45rem;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);text-align:center;
  font-family:"Tenor Sans",sans-serif;
}
.phase{
  display:grid;grid-template-columns:26px 1fr auto;gap:.35rem;align-items:center;
  padding:.28rem 0;border-bottom:1px solid rgba(207,216,230,.12);
  flex:1 1 auto;
}
.phase:last-of-type{border-bottom:0}
.moon{width:22px;height:22px;display:block}
.phase b{color:var(--pearl);font-size:.75rem;letter-spacing:.04em;font-weight:600}
.phase small{display:block;color:var(--silver-dim);font-weight:400;letter-spacing:0;font-size:.65rem}
.phase .fig{font-family:"Red Hat Text",sans-serif;font-weight:700;color:var(--teal);font-size:.95rem;text-align:right}
.phase .fig em{display:block;font-style:normal;font-size:.62rem;color:var(--gold);font-family:"Red Hat Text",sans-serif;font-weight:500}
.dial-note{margin:.55rem 0 0;font-size:.62rem;line-height:1.35;color:var(--silver-dim)}

/* CTA buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  border-radius:999px;padding:.88rem 1.65rem;font-weight:700;letter-spacing:.08em;
  border:0;cursor:pointer;text-transform:uppercase;font-size:1.08rem;
}
.btn-cta{
  background:linear-gradient(180deg,#e8fffb,#7ff6e4 28%,#5eead4 62%,#2fe0c6);
  color:#03201a;
  box-shadow:0 0 0 1px #fff, 0 0 28px rgba(94,234,212,.65), 0 8px 20px rgba(94,234,212,.4);
}
.btn-cta:hover{filter:brightness(1.06);color:var(--cta-ink)}
.btn-rec{
  background:linear-gradient(180deg,#d5cbff,var(--rec));
  color:var(--rec-ink);
  box-shadow:0 8px 22px rgba(139,124,255,.28);
}
.btn-rec:hover{color:var(--rec-ink);filter:brightness(1.05)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--silver)}
.disclose{display:block;margin-top:.45rem;font-size:.72rem;color:var(--silver-dim)}

/* colonnade tiles */
.wrap{max-width:var(--max);margin:0 auto;padding:0 1rem 2.2rem}
#colunata{padding:0;margin:.38rem 0 0;position:relative;z-index:3}
.colonnade{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.38rem .45rem;
  margin:0;
}
.tile{display:flex;flex-direction:column;align-items:stretch}
.tile a{color:inherit}
.arch{
  position:relative;
  border-radius:50% 50% 10px 10px / 26% 26% 10px 10px;
  overflow:hidden;
  border:2px solid rgba(186,196,214,.55);
  box-shadow:
    0 0 0 3px #12182b,
    0 0 0 5px rgba(232,217,160,.28),
    0 14px 28px rgba(0,0,0,.45);
  background:#0b1020;
  aspect-ratio:2/1;
}
.arch img{width:100%;height:100%;object-fit:cover}
.badge{
  position:absolute;top:16px;right:14px;z-index:2;
  font-size:.58rem;font-weight:700;letter-spacing:.1em;
  background:rgba(8,12,24,.78);color:var(--gold);
  border:1px solid rgba(232,217,160,.55);
  border-radius:999px;padding:.18rem .45rem;
}
.badge.hot{color:#ffd6a8;border-color:#e8b07a}
.moon-seal{
  position:absolute;top:10px;left:12px;width:22px;height:22px;opacity:.9;
}
.tile-name{
  margin:.18rem 0 0;text-align:center;font-size:.7rem;
  color:var(--gold);letter-spacing:.08em;text-transform:uppercase;
}
.tile:hover .arch{box-shadow:0 0 0 3px #12182b,0 0 0 5px var(--teal),0 16px 32px rgba(94,234,212,.18)}

/* shooting-star bar + slim badge chips */
.shooting{padding-top:.4rem;padding-bottom:.85rem}
.star-bar{
  margin:0 0 .4rem;
  text-align:center;
  background:linear-gradient(180deg,#10182c,#070b16);
  border:1px solid rgba(207,216,230,.28);
  border-radius:10px;
  padding:.32rem .8rem;
  color:#fff;
  font-size:.78rem;
  letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(232,217,160,.12);
}
.star-bar strong{
  font-family:"Tenor Sans",sans-serif;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-right:.35rem;
  color:#fff;
  text-shadow:0 0 12px rgba(94,234,212,.35);
}
.plaques{
  display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem;
  margin:0;
}
.plaque{
  border:1px solid rgba(207,216,230,.3);
  background:linear-gradient(180deg,#1a2238,#0e1426);
  border-radius:12px;padding:.38rem .3rem .4rem;text-align:center;
  box-shadow:inset 0 1px 0 rgba(232,217,160,.15);
}
.plaque svg,.plaque .ico{width:18px;height:18px;margin:0 auto .15rem;display:block;stroke:var(--gold);fill:none;stroke-width:1.5}
.plaque-k{display:block;font-size:.62rem;color:var(--gold);letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.plaque-v{display:block;font-size:.6rem;color:var(--silver-dim);margin-top:.08rem;line-height:1.25}

/* teaser reviews + sections on inner pages */
.section-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin:1.6rem 0 .8rem}
.section-head h2{margin:0;font-size:1.8rem;color:#fff}
.prose{max-width:70ch}
.prose h1{font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.1;margin:.2rem 0 .8rem;color:#fff}
.prose h2{font-size:1.45rem;margin:1.5rem 0 .5rem;color:var(--gold)}
.prose h3{font-size:1.15rem;margin:1.2rem 0 .4rem;color:var(--silver)}
.prose p,.prose li{color:var(--silver)}
.prose ul{padding-left:1.1rem}
.lede{font-size:1.08rem;color:var(--pearl)}
.hero-page{
  display:grid;grid-template-columns:1.1fr .9fr;gap:1.4rem;align-items:center;
  margin:1.2rem 0 1.4rem;
}
.hero-page img{
  width:100%;border-radius:18px;border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.crumb{font-size:.8rem;color:var(--silver-dim);margin:1rem 0 0}
.crumb a{color:var(--silver)}
.note{border-left:3px solid var(--teal);padding:.2rem 0 .2rem .8rem;color:var(--silver)}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:1.2rem 0}

/* facts / tables */
.sheet{width:100%;border-collapse:collapse;font-size:.92rem;margin:1rem 0}
.sheet th,.sheet td{border-bottom:1px solid var(--line);padding:.55rem .4rem;text-align:left}
.sheet th{color:var(--gold);font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:.05rem .5rem;font-size:.72rem;color:var(--teal)}

/* almanaque reviews */
.almanac-tools{
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1rem 0;
}
.phase-tabs{display:flex;flex-wrap:wrap;gap:.35rem}
.phase-tabs button{
  background:#0c1224;border:1px solid var(--line);color:var(--silver);
  border-radius:999px;padding:.35rem .75rem;cursor:pointer;font-size:.8rem;letter-spacing:.04em;
}
.phase-tabs button.on{border-color:var(--teal);color:var(--teal)}
#lente{
  flex:1;min-width:200px;background:#0c1224;border:1px solid var(--line);
  color:var(--pearl);border-radius:999px;padding:.5rem .9rem;
}
.almanac-list{display:flex;flex-direction:column;gap:.45rem}
.folha{
  display:grid;grid-template-columns:52px 1fr auto;gap:.7rem;align-items:center;
  border:1px solid rgba(207,216,230,.18);
  background:linear-gradient(90deg,rgba(18,26,51,.8),rgba(8,12,24,.7));
  border-radius:12px;padding:.45rem .7rem;
}
.folha .mono{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;background:#0b1020;overflow:hidden}
.folha .mono img{width:100%;height:100%;object-fit:cover}
.folha .name{color:#fff;font-weight:600}
.folha .host{display:block;color:var(--silver-dim);font-size:.78rem}
.folha .visit,.folha .full{font-size:.78rem;margin-left:.4rem}
.folha.is-off{display:none}
#mais-folhas{margin:1rem auto;display:block}

/* full review leaf */
.folha-hero img{width:100%;border-radius:16px;border:1px solid var(--line)}
figcaption{font-size:.8rem;color:var(--silver-dim);margin-top:.4rem}
.ephemeris{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin:1rem 0}
.eph{
  border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;background:#0c1224;
}
.eph b{display:block;color:var(--gold);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.25rem}

/* footer */
.foot{
  border-top:1px solid var(--line);
  background:linear-gradient(#0a1020,#050818);
  padding:1.6rem 1.1rem 2.2rem;
  color:var(--silver-dim);font-size:.85rem;
}
.foot-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:1.2rem}
.foot a{color:var(--silver)}
.foot h2{font-size:.95rem;color:var(--gold);margin:0 0 .4rem}
.age{display:inline-block;border:1px solid var(--gold);color:var(--gold);border-radius:6px;padding:.05rem .35rem;font-weight:700;margin-right:.3rem}

@media (max-width:980px){
  .stage{grid-template-columns:1fr;padding:.3rem .9rem 0}
  .hero{height:240px}
  .hero-copy{width:min(58%, 420px)}
  .hero-copy h1{font-size:clamp(1.8rem,5vw,2.5rem)}
  .plaques{grid-template-columns:repeat(3,1fr)}
  .hero-page{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:740px){
  .mast-row{grid-template-columns:1fr auto;padding:.45rem .8rem .55rem}
  .nav-left,.nav-right{display:none}
  .brand{justify-self:start}
  .burger{display:inline-flex;align-items:center;justify-content:center;justify-self:end;width:40px;height:36px}
  .mast.is-open .nav-left,.mast.is-open .nav-right{
    display:flex;grid-column:1/-1;justify-content:flex-start;padding:.2rem 0 .4rem;
  }
  .stage{grid-template-columns:1fr;padding:.5rem .8rem 0}
  .hero{height:210px}
  .hero-copy{width:78%;padding:.8rem}
  .hero-copy h1{font-size:1.7rem}
  .colonnade{grid-template-columns:1fr 1fr;gap:.55rem}
  .arch{aspect-ratio:5/4}
  .tile-name{font-size:.78rem}
  .plaques{grid-template-columns:1fr 1fr}
  .ephemeris{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .folha{grid-template-columns:40px 1fr; }
  .folha .acts{grid-column:1/-1;justify-self:start}
}