/* Town pages: nine looks on top of simple.css. body.look-* sets the layout, body.fx-* the scroll effect.
   Every effect reads --p (0..1, set per [data-fx] element by area-fx.js) and only runs under html.fx,
   which the script adds unless the visitor asks for reduced motion. Without it, each page shows its
   finished layout. */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative}
.ghost,.rail,.num{display:none}
.nearby .w{transition:color .35s ease,opacity .35s ease}

/* ---------- New Orleans: grand. Centred headline; the film starts full width and settles into a card. ---------- */
.look-grand .hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
.look-grand .hero h1{max-width:none}
.look-grand .hero .btns{justify-content:center}
.fx .fx-zoom .film{transform:scale(calc(1.08 - var(--p,0) * .16));transform-origin:50% 0;transition:transform .1s linear}
.fx .fx-zoom .film video{border-radius:calc(var(--p,0) * 28px)}

/* ---------- Metairie: split. Text beside the film; photos slide in from alternate sides. ---------- */
@media (min-width:900px){
  .look-split .hero .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
  .look-split .hero h1{font-size:clamp(40px,4.6vw,66px)}
  .look-split .film{margin:0}
}
.fx .fx-slide .grid li{transform:translateX(calc((1 - min(1, var(--p,0) * 2.2)) * 90px));opacity:calc(var(--p,0) * 3)}
.fx .fx-slide .grid li:nth-child(even){transform:translateX(calc((1 - min(1, var(--p,0) * 2.2)) * -90px))}

/* ---------- Kenner: strip. The photos run as one long strip that pans as you scroll. ---------- */
.look-strip .hero-copy{max-width:900px}
.look-strip .grid-box{overflow:hidden;margin:0 -20px}
.look-strip .grid{display:flex;gap:18px;width:max-content;padding:0 20px}
.look-strip .grid li{width:min(420px,72vw);flex:none}
.fx .fx-pan .grid{transform:translateX(calc(var(--p,0) * -45%))}

/* ---------- Belle Chasse: ghost. A huge outlined town name drifts behind the headline. ---------- */
.look-ghost .ghost{display:block;position:absolute;top:110px;left:0;white-space:nowrap;pointer-events:none;
  font:900 clamp(110px,19vw,300px)/1 var(--display);color:transparent;-webkit-text-stroke:2px rgba(226,178,88,.4);letter-spacing:-.03em}
.fx .fx-drift .ghost{transform:translateX(calc(8% - var(--p,0) * 50%))}
.look-ghost .hero-copy{position:relative}

/* ---------- Slidell: film first. The film leads; the local paragraph lights up word by word. ---------- */
.look-filmfirst .hero .wrap{display:flex;flex-direction:column}
.look-filmfirst .film{order:-1;margin:0 0 56px}
.look-filmfirst .hero{padding-top:40px}
.fx .fx-words [data-fx="words"] .w{color:rgba(242,239,233,.22)}
.fx .fx-words [data-fx="words"] .w.on{color:var(--text)}
.look-filmfirst .nearby .lede{font:600 clamp(22px,2.6vw,34px)/1.4 var(--display);max-width:960px}

/* ---------- Covington: editorial. Numbered sections, photos wipe open. ---------- */
.look-editorial .num{display:block;font:900 clamp(64px,9vw,120px)/.9 var(--display);letter-spacing:-.04em;color:inherit;opacity:.12;margin-bottom:12px}
.look-editorial .hero h1{text-transform:none;font-weight:800;letter-spacing:-.03em}
.look-editorial .grid{grid-template-columns:2fr 1fr 1fr}
.look-editorial .grid li:first-child{grid-row:span 2}
.look-editorial .grid li:first-child img{height:100%;aspect-ratio:auto}
.look-editorial .grid li:last-child{grid-column:1/-1}
.look-editorial .grid li:last-child img{aspect-ratio:3/1}
.fx .fx-wipe .grid img{clip-path:inset(0 calc((1 - min(1, var(--p,0) * 2.4 - var(--i) * .12)) * 100%) 0 0)}
@media (max-width:820px){.look-editorial .grid{grid-template-columns:1fr 1fr}.look-editorial .grid li:first-child{grid-column:span 2;grid-row:auto}}

/* ---------- Chalmette: deck. Photos are dealt like cards and straighten as they land. ---------- */
.look-deck .light{background:#ece7dd}
.look-deck .grid li{background:#fff;padding:10px 10px 34px;border-radius:6px;box-shadow:0 18px 40px -20px rgba(0,0,0,.45)}
.look-deck .grid img{border-radius:3px}
.fx .fx-deal .grid li{transform:rotate(calc((1 - min(1, var(--p,0) * 2.2)) * (var(--i) - 2.5) * 5deg)) translateY(calc((1 - min(1, var(--p,0) * 2.2)) * 60px))}

/* ---------- Westbank: bold. A left-hard headline with a gold rule; photo columns rise at different speeds. ---------- */
.look-bold .hero h1{font-size:clamp(30px,8.6vw,118px);max-width:none;border-left:6px solid var(--gold);padding-left:24px}
.look-bold .hero h1 em{display:block}
.fx .fx-rise .grid li:nth-child(3n+1){transform:translateY(calc((1 - var(--p,0)) * 40px))}
.fx .fx-rise .grid li:nth-child(3n+2){transform:translateY(calc((1 - var(--p,0)) * 120px))}
.fx .fx-rise .grid li:nth-child(3n){transform:translateY(calc((1 - var(--p,0)) * 80px))}

/* ---------- Mandeville: calm. A paper hero, softer type, and a gold line that fills down the page. ---------- */
.look-calm .hero{background:var(--paper);color:#151515}
.look-calm .hero .label{color:var(--gold-ink)}
.look-calm .hero h1{text-transform:none;font-weight:700;letter-spacing:-.03em}
.look-calm .hero h1 em{color:var(--gold-ink)}
.look-calm .hero .hero-text{color:#3a3a3a}
.look-calm .hero .btn--line{border-color:rgba(0,0,0,.3);color:#151515}
.look-calm .film figcaption{color:#6b665d}
.look-calm .rail{display:block;position:fixed;left:0;top:0;bottom:0;width:4px;z-index:30;background:rgba(226,178,88,.15)}
.fx .fx-rail .rail::after{content:"";position:absolute;left:0;top:0;width:100%;height:calc(var(--page,0) * 100%);background:var(--gold)}