/* Field Notes Flight — page-specific theming + photo/video layers.
   Extracted verbatim from the approved reference homepage's inline <style>.
   MUST load AFTER fly-base.css so the brass :root palette overrides the
   engine's default dark-blue tokens. (okkarhotel home-flythrough) */
:root{
  --bg:#15130d;--ink:#ece6d8;--muted:#ffffff;--line:rgba(196,180,140,.16);
  --accent:#d8a441;--accent-ink:#1c1709;--panel:#1d190f;
  --ink-soft:#c9bfa8;--nav-bg:rgba(21,19,13,.72);
  --coast-fill:rgba(60,54,34,.22);--coast-stroke:#d8a441;--coast-glow:rgba(216,164,65,.18);
  --stage-bg:radial-gradient(120% 100% at 50% 20%,#211c10,#100e08 72%);
  --scrim:linear-gradient(0deg,rgba(8,7,4,.85) 6%,rgba(8,7,4,.2) 42%,transparent 70%);
}
.coast{stroke-dasharray:1.5 5;stroke-width:4.8}
.stage::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.dots{right:auto;left:32px;top:92px;transform:none;flex-direction:row;gap:22px;align-items:center}
.fly-dot{flex-direction:row-reverse;justify-content:flex-start;gap:9px}
.fly-dot .c{width:7px;height:7px;border-radius:0;transform:rotate(45deg);border-color:var(--muted)}
.fly-dot .t{opacity:.55;color:var(--muted)}
.fly-dot.on .t{opacity:1;color:var(--ink)}
.fly-dot.on .c{background:var(--accent);border-color:var(--accent)}
.stamps{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
/* fact-stamps sit in the hero copy over the dark video — always light, not palette-tinted */
.stamp{border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:9px 13px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#c9bfa8}
.stamp b{display:block;font-family:var(--disp);font-weight:700;font-size:18px;color:#fff;margin-top:4px;letter-spacing:0;text-transform:none}
.tc-eye{letter-spacing:.2em}
.tc-note{font-family:var(--mono);font-size:12px;color:var(--accent);margin-top:14px;letter-spacing:.04em}
.tc-title{font-size:clamp(34px,4.4vw,56px);line-height:.96;max-width:100%}
/* pin copy to a proportional left column so it always clears the photo frame */
.tcopy .inner{max-width:40vw;margin:0;padding:0 0 0 48px}
.tc-title{max-width:100%}
.stamps{max-width:100%}
/* framed field-photograph (one per hotel, crossfades with the flight) */
.photos{position:absolute;right:48px;top:120px;z-index:10;width:min(48vw,510px);aspect-ratio:4/3;pointer-events:none}
.photo{position:absolute;inset:0;opacity:0;will-change:opacity;transition:opacity .4s ease}
.photo .frame{position:absolute;inset:0;border:1px solid var(--accent);background:rgba(8,7,4,.55);backdrop-filter:blur(4px);box-shadow:0 24px 60px rgba(0,0,0,.5);padding:9px 9px 32px}
/* production: plain <img> instead of the prototype <image-slot> */
.photo .frame img{display:block;width:100%;height:100%;object-fit:cover;background:rgba(216,164,65,.06)}
.photo .tab{position:absolute;top:-1px;left:-1px;background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;font-weight:700;z-index:2}
.photo .frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(0deg,rgba(8,7,4,.72),transparent);pointer-events:none}
.photo .cap{position:absolute;left:9px;right:9px;bottom:8px;z-index:2;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#f3ecdc;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.photo .cap b{color:#fff;font-weight:400}
@media (max-width:900px){.photos{display:none}.tcopy .inner{max-width:100%}}
/* ---- video integration: ambient intro loop + per-hotel dissolve clips ---- */
.ambient{position:absolute;inset:0;z-index:1;opacity:0;will-change:opacity}
.videos{position:absolute;inset:0;z-index:3;pointer-events:none}
.videos video-slot{opacity:0;will-change:opacity}
.tscene{pointer-events:none}
.cam svg{pointer-events:none}
/* trust banner moved to the very top — pad it clear of the fixed ann + nav */
.fn-trustbar{padding-top:124px;padding-bottom:42px}
@media(max-width:820px){.fn-trustbar{padding-top:100px;padding-bottom:30px}}
/* FAQ accordion (bottom of the homepage) — palette-aware */
.fnfaq__list{display:flex;flex-direction:column;gap:12px;max-width:880px}
.fnfaq__item{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.fnfaq__item summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:var(--disp);font-weight:700;font-size:17px;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px}
.fnfaq__item summary::-webkit-details-marker{display:none}
.fnfaq__item summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--accent);line-height:1}
.fnfaq__item[open] summary::after{content:"\2212"}
.fnfaq__a{padding:0 22px 20px;color:var(--ink-soft);font-size:15px;line-height:1.65;max-width:70ch}