@font-face {
  font-family: Inter;
  src: url('assets/Inter.ttf');
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: Montserrat;
  src: url('assets/Montserrat-SemiBold.ttf');
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #0f1113;
  color: #f6f5f3;
  font:
    16px Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
button:focus-visible,
summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
header {
  height: 100px;
  padding: 18px 3.5vw;
  display: flex;
  align-items: center;
  gap: 25px;
  border-bottom: 1px solid #ffffff1c;
  background: #101214;
}
header > img {
  width: 118px;
  height: 64px;
  object-fit: contain;
}
.identity {
  border-left: 1px solid #424245;
  padding-left: 23px;
  font-size: 12px;
  letter-spacing: 3px;
}
.identity span {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #abb0b3;
  letter-spacing: 0;
}
.camera {
  margin-left: auto;
  background: #8c1d1820;
  border: 1px solid #8c1d18;
  border-radius: 12px;
  min-height: 50px;
  padding: 12px 17px;
  font-size: 13px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.camera > span:first-child {
  color: #cf7971;
}
.clock {
  text-align: right;
  min-width: 115px;
}
.clock b {
  display: block;
  font-size: 22px;
  font-weight: 500;
}
.clock span {
  font-size: 11px;
  color: #abb0b3;
}
main {
  max-width: 1550px;
  margin: auto;
  padding: 28px 3.5vw 115px;
}
h1,
h2,
h3 {
  font-family: Montserrat, sans-serif;
}
h1 {
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.18;
  margin: 10px 0 14px;
  letter-spacing: -1.5px;
}
h2 {
  font-size: 27px;
}
h3 {
  font-size: 18px;
  margin: 0 0 10px;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 2.6px;
  color: #d09b95;
  margin: 0;
}
.lead {
  color: #c3c4c5;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}
.hero {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 20px;
  margin-bottom: 23px;
}
.welcome {
  position: relative;
  min-height: 300px;
  padding: 32px;
  border: 1px solid #ffffff24;
  border-radius: 23px;
  overflow: hidden;
  background:
    linear-gradient(90deg, #0f1113f2, #0f111388),
    url('assets/habitacle.webp') center 54% / cover;
}
.welcome > p,
.welcome > h1,
.welcome > button {
  position: relative;
  z-index: 1;
}
.welcome:after {
  content: '';
  position: absolute;
  width: 240px;
  height: 240px;
  border: 1px solid #8c1d18;
  border-radius: 50%;
  bottom: -160px;
  right: 45px;
}
.primary {
  background:
    repeating-linear-gradient(125deg, #ffffff05 0 1px, transparent 1px 4px),
    linear-gradient(120deg, #a12c25, #8c1d18 65%, #651812);
  border: 1px solid #ad4c43;
  border-radius: 11px;
  padding: 15px 20px;
  min-height: 50px;
  box-shadow: inset 0 1px #ffffff25;
}
.welcome .primary {
  margin-top: 24px;
}
.weather {
  border: 1px solid #ffffff24;
  border-radius: 23px;
  background: radial-gradient(at 90% 0, #8c1d1838, transparent 65%), #191c1f;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.weather .temp {
  font-size: 58px;
  font-weight: 300;
  letter-spacing: -3px;
}
.weather .symbol {
  font-size: 45px;
  color: #d7b8a0;
}
.weatherline {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hint {
  font-size: 11px;
  color: #a4aaad;
  line-height: 1.6;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 2px 16px;
}
.section-head h2 {
  font-size: 18px;
  margin: 0;
}
.section-head span {
  color: #a4aaad;
  font-size: 12px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.tile {
  position: relative;
  min-height: 150px;
  text-align: left;
  padding: 22px;
  border: 1px solid #383c40;
  border-radius: 18px;
  background: linear-gradient(125deg, #1d2023, #15181a);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.tile:hover {
  border-color: #b0655e;
  transform: translateY(-2px);
}
.tile .icon {
  width: 37px;
  height: 37px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #e0aaa3;
  border: 1px solid #8c1d1877;
  background: #8c1d1820;
  margin-bottom: 14px;
}
.icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tile b {
  font-family: Montserrat;
  font-size: 16px;
}
.tile small {
  color: #aeb2b5;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 7px;
}
.tile .arrow {
  position: absolute;
  right: 22px;
  top: 22px;
  color: #ad7470;
}
.tile.safety {
  background: radial-gradient(at 100% 0, #8c1d183d, transparent 80%), #191b1d;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 77px;
  padding: 12px 3.5vw;
  background: #101214f5;
  border-top: 1px solid #36393c;
  backdrop-filter: blur(15px);
  z-index: 4;
}
footer button {
  min-height: 47px;
  padding: 10px 18px;
  background: #24282b;
  border: 1px solid #45494c;
  border-radius: 10px;
  font-size: 15px;
}
footer .home {
  background: #8c1d18;
  border-color: #a85148;
}
footer p {
  font-size: 12px;
  color: #b0b4b6;
  margin-right: auto;
}
.preview {
  font-size: 9px;
  letter-spacing: 1.8px;
  color: #92989d;
}
.back {
  background: none;
  border: 0;
  padding: 6px 0 18px;
  color: #cfb1ae;
  min-height: 48px;
}
.page {
  max-width: 1050px;
  margin: auto;
}
.page .lead {
  margin-bottom: 26px;
}
.content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.panel {
  padding: 26px;
  border: 1px solid #393d40;
  background: #191c1f;
  border-radius: 18px;
}
.panel p,
.panel li {
  font-size: 15px;
  color: #b9bfc2;
  line-height: 1.8;
}
.photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 13px;
  margin-bottom: 18px;
}
.row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid #363a3d;
  font-size: 14px;
}
.row:last-child {
  border: 0;
}
.row span {
  color: #b9bfc2;
}
.row b {
  white-space: nowrap;
}
.notice {
  padding: 16px 20px;
  border-left: 3px solid #8c1d18;
  background: #8c1d1818;
  color: #ccb9b6;
  font-size: 13px;
  line-height: 1.7;
  margin: 20px 0;
}
.legal details {
  border: 1px solid #373c40;
  background: #191c1f;
  border-radius: 13px;
  padding: 18px 22px;
  margin: 12px 0;
}
.legal summary {
  font-family: Montserrat;
  cursor: pointer;
  line-height: 1.6;
}
.legal p {
  line-height: 1.85;
  font-size: 15px;
  color: #bec3c6;
}
.legal a {
  color: #e4bab4;
}
.pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.pills span {
  background: #252a2e;
  border: 1px solid #43494d;
  border-radius: 30px;
  padding: 11px 17px;
  font-size: 13px;
}
dialog {
  background: #1c2023;
  color: white;
  border: 1px solid #7b4843;
  border-radius: 22px;
  padding: 30px;
  max-width: 450px;
}
dialog::backdrop {
  background: #000b;
}
@media (max-width: 800px) {
  header {
    gap: 14px;
    height: auto;
    min-height: 90px;
    flex-wrap: wrap;
  }
  header > img {
    width: 90px;
  }
  .identity {
    font-size: 10px;
    padding-left: 14px;
  }
  .clock {
    display: none;
  }
  .camera {
    font-size: 11px;
    padding: 10px;
    min-height: 44px;
  }
  .hero {
    grid-template-columns: 1fr 0.55fr;
  }
  .welcome {
    padding: 25px;
    min-height: 280px;
  }
  h1 {
    font-size: 32px;
  }
  .weather {
    padding: 20px;
  }
  .weather .temp {
    font-size: 44px;
  }
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tile {
    min-height: 145px;
  }
  footer {
    gap: 10px;
  }
  .preview {
    display: none;
  }
}
@media (max-width: 550px) {
  .hero,
  .content-grid {
    grid-template-columns: 1fr;
  }
  .weather {
    display: none;
  }
  .camera {
    width: 100%;
    justify-content: center;
  }
  .grid {
    gap: 10px;
  }
  .tile {
    padding: 17px;
  }
  .tile b {
    font-size: 14px;
  }
  .tile small {
    font-size: 11px;
  }
  .section-head span,
  footer p {
    display: none;
  }
  footer #fullscreen {
    margin-left: auto;
  }
  main {
    padding-top: 20px;
  }
  .welcome {
    min-height: 275px;
  }
}

header {
  position: sticky;
  top: 0;
  z-index: 5;
}
main:focus {
  outline: none;
}
.camera svg {
  color: #d6a39c;
  flex-shrink: 0;
}
.home {
  background:
    repeating-linear-gradient(125deg, #ffffff05 0 1px, transparent 1px 4px),
    #8c1d18 !important;
}

/* Tablet cockpit: unified black header and full available canvas. */
:root {
  --space: 20px;
}
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
header {
  height: auto;
  min-height: 100px;
  background: #000;
  padding: 16px 24px;
  gap: 20px;
  flex-shrink: 0;
}
header > img {
  width: 110px;
}
.identity {
  padding-left: 20px;
  white-space: nowrap;
}
.header-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-left: auto;
}
.header-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid #45494c;
  border-radius: 11px;
  background: #202427;
  font-size: 13px;
  white-space: nowrap;
}
.header-controls .camera,
.header-controls #fullscreen {
  margin: 0;
  border-color: #8c1d18;
  background: #8c1d1820;
}
.clock {
  min-width: 142px;
  display: block;
}
.clock b {
  font-variant-numeric: tabular-nums;
  font-size: 24px;
}
.clock span {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.7px;
}
main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--space);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space);
}
.hero {
  flex: 1;
  gap: var(--space);
  margin: 0;
  min-height: 300px;
}
.section-head {
  margin: 0;
  min-height: 24px;
}
.grid {
  flex: 1.1;
  gap: var(--space);
  grid-auto-rows: minmax(150px, 1fr);
}
.tile {
  min-height: 150px;
  justify-content: center;
}
.page {
  width: 100%;
  max-width: none;
  margin: 0;
}
.content-grid {
  gap: var(--space);
}
.weather {
  display: flex;
}
.welcome {
  min-height: 0;
}
main:has(> .hero) {
  min-height: calc(100dvh - 100px);
}
@media (max-width: 1200px) {
  header {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 12px 20px;
  }
  .header-controls {
    grid-column: 1/-1;
    grid-row: 2;
    margin: 0;
    justify-content: center;
  }
  .identity {
    padding-left: 20px;
  }
  .clock {
    grid-column: 3;
    grid-row: 1;
  }
  .header-controls button {
    flex: 0 1 auto;
  }
  main:has(> .hero) {
    min-height: calc(100dvh - 156px);
  }
}
@media (max-width: 650px) {
  :root {
    --space: 14px;
  }
  header {
    padding: 12px 14px;
    grid-template-columns: 82px 1fr auto;
    gap: 12px;
  }
  header > img {
    width: 82px;
  }
  .identity {
    padding-left: 12px;
    font-size: 9px;
    letter-spacing: 1.5px;
  }
  .identity span {
    font-size: 10px;
  }
  .clock {
    min-width: 110px;
  }
  .clock b {
    font-size: 20px;
  }
  .clock span {
    font-size: 9px;
    letter-spacing: 0;
  }
  .header-controls {
    gap: 7px;
    justify-content: stretch;
  }
  .header-controls button {
    padding: 10px 9px;
    font-size: 11px;
    min-height: 48px;
  }
  .header-controls .camera {
    width: auto;
    flex: 1;
    white-space: normal;
    text-align: left;
  }
  .header-controls #fullscreen {
    margin: 0;
  }
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .welcome {
    padding: 24px;
    min-height: 280px;
  }
  .weather {
    min-height: 170px;
    display: flex;
  }
  .weatherline {
    max-width: 230px;
  }
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tile {
    padding: 17px;
  }
  .tile .arrow {
    right: 14px;
    top: 18px;
  }
  .tile b {
    font-size: 14px;
  }
  .tile small {
    font-size: 11px;
  }
  main:has(> .hero) {
    min-height: 0;
  }
}

/* Local vector weather: no external calls, subtle material lighting. */
.weather-art {
  width: 160px;
  height: 140px;
  flex-shrink: 0;
  filter: drop-shadow(0 9px 14px #0005);
  color: #d8ebf7;
}
.weather-art svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.wx-sun {
  transform-origin: 82px 65px;
}
.wx-partly .wx-sun {
  transform: translate(-14px, -10px);
}
.wx-clear .wx-rays {
  transform-origin: 82px 65px;
  animation: wx-turn 45s linear infinite;
}
.wx-halo {
  transform-origin: 82px 65px;
  animation: wx-glow 5s ease-in-out infinite;
}
.wx-cloud {
  animation: wx-drift 7s ease-in-out infinite;
  transform-origin: center;
}
.wx-partly .wx-cloud {
  transform: translate(9px, 5px);
}
.wx-storm .wx-cloud {
  filter: brightness(0.72);
}
.wx-drop {
  animation: wx-fall 1.5s linear infinite;
  animation-delay: var(--delay);
}
.wx-bolt {
  animation: wx-flash 6s ease-in-out infinite;
}
.wx-flake {
  animation: wx-snowfall 4s ease-in-out infinite;
  animation-delay: var(--delay);
}
.weather-demo {
  border: 0;
  padding: 18px 0 0;
  margin: 12px 0 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.weather-demo legend {
  font-size: 11px;
  color: #acb4b9;
  margin-bottom: 10px;
}
.weather-demo button {
  border: 1px solid #495056;
  background: #252a2e;
  border-radius: 10px;
  min-height: 44px;
  padding: 9px 13px;
  font-size: 12px;
}
.weather-demo button[aria-pressed='true'] {
  background:
    repeating-linear-gradient(125deg, #ffffff06 0 1px, transparent 1px 4px),
    #8c1d18;
  border-color: #b2645b;
}
.weatherline .temp {
  font-size: 58px;
  font-weight: 300;
  letter-spacing: -3px;
}
.weather .weatherline {
  flex: 1;
}
.wx-clear {
  transform: translateY(10px);
}
@keyframes wx-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes wx-glow {
  0%,
  100% {
    opacity: 0.08;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.19;
    transform: scale(1.08);
  }
}
@keyframes wx-drift {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 6px -3px;
  }
}
@keyframes wx-fall {
  0% {
    translate: 2px -2px;
    opacity: 0;
  }
  20% {
    opacity: 0.9;
  }
  85% {
    opacity: 0.6;
  }
  100% {
    translate: -4px 14px;
    opacity: 0;
  }
}
@keyframes wx-flash {
  0%,
  70%,
  100% {
    opacity: 0.25;
  }
  74%,
  80% {
    opacity: 1;
  }
  77% {
    opacity: 0.4;
  }
}
@keyframes wx-snowfall {
  0% {
    translate: 0 -8px;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0.7;
  }
  100% {
    translate: 8px 15px;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .weather-art * {
    animation: none !important;
  }
  .wx-drop,
  .wx-flake,
  .wx-bolt {
    opacity: 0.9;
  }
}
@media (max-width: 650px) {
  .weather-art {
    width: 135px;
    height: 115px;
  }
  .weatherline .temp {
    font-size: 48px;
  }
}

.page-label-space {
  height: 12px;
  line-height: normal;
}
.wx-cloud-small {
  animation: wx-small-drift 9s ease-in-out infinite;
}
.wx-teardrop {
  animation-duration: var(--duration);
  filter: drop-shadow(0 1px 1px #b2d7ef55);
}
.wx-snow .wx-flake {
  animation-duration: var(--duration);
}
.wx-bolt {
  filter: drop-shadow(0 0 3px #f0c46c77);
}
@keyframes wx-small-drift {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: -5px 2px;
  }
}

/* Lightning emerges from behind the cloud, progressing downward. */
.wx-bolt {
  clip-path: inset(0 0 100% 0);
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: wx-lightning-descend 4.6s ease-out infinite;
  filter: drop-shadow(0 2px 3px #f0c46c88);
}
@keyframes wx-lightning-descend {
  0%,
  12% {
    clip-path: inset(0 0 100% 0);
    translate: 0 -9px;
    opacity: 0;
  }
  16% {
    clip-path: inset(0 0 76% 0);
    translate: 0 -5px;
    opacity: 0.8;
  }
  22% {
    clip-path: inset(0 0 0 0);
    translate: 0 3px;
    opacity: 1;
  }
  30% {
    clip-path: inset(0 0 0 0);
    translate: 0 5px;
    opacity: 0.9;
  }
  40% {
    clip-path: inset(0 0 0 0);
    translate: 0 7px;
    opacity: 0;
  }
  100% {
    clip-path: inset(0 0 0 0);
    translate: 0 7px;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wx-bolt {
    animation: none !important;
    clip-path: none;
    translate: 0 3px;
    opacity: 1;
  }
}

.wx-bolt {
  filter: drop-shadow(0 0 1.5px #edce9477);
}

/* A main discharge, a smaller echo, then a quiet interval. */
.wx-bolt-primary {
  animation: wx-first-strike 5.8s linear infinite;
}
.wx-bolt-secondary {
  animation: wx-second-strike 5.8s linear infinite;
  filter: drop-shadow(0 0 1px #edce9466);
}
@keyframes wx-first-strike {
  0%,
  8% {
    clip-path: inset(0 0 100% 0);
    translate: 0 -7px;
    opacity: 0;
  }
  10% {
    clip-path: inset(0 0 60% 0);
    translate: 0 -2px;
    opacity: 0.85;
  }
  13% {
    clip-path: inset(0);
    translate: 0 3px;
    opacity: 1;
  }
  17% {
    clip-path: inset(0);
    translate: 0 4px;
    opacity: 0.8;
  }
  23%,
  100% {
    clip-path: inset(0);
    translate: 0 6px;
    opacity: 0;
  }
}
@keyframes wx-second-strike {
  0%,
  27% {
    clip-path: inset(0 0 100% 0);
    translate: 0 -6px;
    opacity: 0;
  }
  29% {
    clip-path: inset(0 0 55% 0);
    translate: 0 -1px;
    opacity: 0.7;
  }
  32% {
    clip-path: inset(0);
    translate: 0 3px;
    opacity: 0.95;
  }
  36% {
    clip-path: inset(0);
    translate: 0 4px;
    opacity: 0.6;
  }
  42%,
  100% {
    clip-path: inset(0);
    translate: 0 6px;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wx-bolt-primary {
    animation: none !important;
    clip-path: none;
    translate: 0 3px;
    opacity: 1;
  }
  .wx-bolt-secondary {
    display: none;
  }
}

/* Atmosphere is independent of the approved icon and stays behind content. */
.header-controls button > svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}
.weather {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  perspective: 650px;
}
.weather > p,
.weather > .weatherline,
.weather > div:not(.weather-atmosphere) {
  position: relative;
  z-index: 2;
}
.weather-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.weather-atmosphere:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #0f1113b8, transparent 40%, #0f111370 100%);
  z-index: 3;
}
.atmo-sunlight {
  position: absolute;
  inset: 0;
}
.atmo-ray {
  position: absolute;
  left: 82%;
  top: -10%;
  height: 155%;
  width: 34%;
  transform-origin: 50% 0;
  transform: rotate(var(--angle));
  background: linear-gradient(180deg, #f4d49c35, #e6b26e12 55%, transparent);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  filter: blur(4px);
  animation: atmo-ray-breathe 10s ease-in-out infinite;
  animation-delay: var(--phase);
  mix-blend-mode: screen;
}
.atmo-glow {
  position: absolute;
  right: -60px;
  top: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #edce9955,
    #dcb27414 40%,
    transparent 68%
  );
  filter: blur(15px);
}
.atmosphere-partly .atmo-sunlight {
  opacity: 0.65;
}
.atmo-drop {
  position: absolute;
  left: var(--left);
  top: -80px;
  width: var(--width);
  height: var(--length);
  opacity: var(--alpha);
  border-radius: 50% 50% 65% 65%;
  background: linear-gradient(
    180deg,
    #c3e0f200,
    #d3ebf4aa 50%,
    #ffffffd9 85%,
    #81b6d2aa
  );
  box-shadow:
    inset 1px 0 #ffffff66,
    0 2px 6px #b2dded16;
  animation: atmo-rainfall var(--speed) linear infinite;
  animation-delay: var(--phase);
}
.atmo-near {
  filter: blur(0.3px);
  transform: translateZ(60px);
  box-shadow:
    inset 1px 0 #ffffffbb,
    0 3px 5px #9bcce233;
}
.atmo-far {
  filter: blur(0.5px);
}
.atmo-mist {
  position: absolute;
  width: 140%;
  height: 65%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #bacad218, transparent 65%);
  filter: blur(24px);
  animation: atmo-cloud-drift 19s ease-in-out infinite alternate;
}
.atmo-mist-back {
  top: -18%;
  left: -30%;
}
.atmo-mist-front {
  top: 23%;
  right: -45%;
  opacity: 0.6;
  animation-delay: -9s;
}
.atmosphere-storm .atmo-mist {
  background: radial-gradient(ellipse, #a6afc51c, transparent 65%);
}
.atmo-snowflake {
  position: absolute;
  top: -15px;
  left: var(--left);
  height: var(--size);
  width: var(--size);
  border-radius: 50%;
  opacity: var(--alpha);
  background: radial-gradient(circle, #fff, #d7e8f177);
  box-shadow: 0 0 6px #eef9ff22;
  animation: atmo-snowfall var(--speed) linear infinite;
  animation-delay: var(--phase);
}
.atmo-storm-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 65% 15%, #dbe5f01d, transparent 65%);
  animation: atmo-distant-light 5.8s ease-out infinite;
}
.weather-depth-rain,
.weather-depth-snow {
  background: radial-gradient(at 100% 0, #556c8d26, transparent 65%), #171c22;
}
.weather-depth-clear {
  background: radial-gradient(at 95% 0, #8a603026, transparent 75%), #191b1e;
}
@keyframes atmo-ray-breathe {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.85;
  }
}
@keyframes atmo-rainfall {
  0% {
    translate: 15px -20px;
  }
  100% {
    translate: -40px 650px;
  }
}
@keyframes atmo-snowfall {
  0% {
    translate: 0 -15px;
  }
  50% {
    translate: 16px 300px;
  }
  100% {
    translate: -10px 650px;
  }
}
@keyframes atmo-cloud-drift {
  from {
    translate: -15px 0;
  }
  to {
    translate: 35px 12px;
  }
}
@keyframes atmo-distant-light {
  0%,
  8%,
  23%,
  100% {
    opacity: 0.1;
  }
  13% {
    opacity: 0.7;
  }
  17% {
    opacity: 0.2;
  }
  32% {
    opacity: 0.4;
  }
  42% {
    opacity: 0.1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .weather-atmosphere * {
    animation: none !important;
  }
  .atmo-rain,
  .atmo-snow {
    display: none;
  }
  .atmo-ray {
    opacity: 0.35;
  }
}

/* Distinct atmospheric sequences: depth clouds, clearing sky and distant lightning. */
.atmo-cloudbanks {
  position: absolute;
  inset: -10%;
  opacity: 0.9;
  filter: drop-shadow(0 15px 14px #0005);
}
.atmo-cloudbanks svg {
  width: 100%;
  height: 100%;
}
.atmo-cloudbank {
  transform-origin: center;
  animation: atmo-bank-drift 22s ease-in-out infinite alternate;
}
.cloudbank-1 {
  animation-duration: 29s;
  animation-delay: -10s;
  opacity: 0.8;
  filter: blur(1px);
}
.cloudbank-2 {
  animation-duration: 18s;
  animation-delay: -6s;
  opacity: 0.65;
  filter: blur(2px);
}
.atmosphere-cloudy {
  background: linear-gradient(160deg, #53617130, #1b273420);
}
.atmosphere-storm .atmo-cloudbanks {
  opacity: 0.5;
  filter: brightness(0.65);
}
.atmosphere-partly .atmo-cloudbanks {
  animation: atmo-cloud-clear 14s ease-in-out infinite;
  filter: drop-shadow(0 9px 10px #0004);
}
.atmosphere-partly .atmo-sunlight {
  animation: atmo-sun-reveal 14s ease-in-out infinite;
}
.atmosphere-partly .atmo-mist {
  animation: atmo-mist-clear 14s ease-in-out infinite;
}
.atmo-lightning {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0.8;
}
.atmo-strike {
  fill: none;
  stroke: #e3ecff;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px #b5d5ffb0);
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  animation: atmo-wide-strike 11s linear infinite;
}
.atmo-strike .branch {
  stroke-width: 0.65;
  opacity: 0.65;
}
.strike-b {
  animation-delay: 1.3s;
  stroke-width: 1.05;
  opacity: 0;
}
.strike-c {
  animation-delay: 5.5s;
  stroke-width: 1.15;
  opacity: 0;
}
.atmosphere-storm .atmo-storm-glow {
  animation: atmo-sky-light 11s ease-out infinite;
  background: radial-gradient(ellipse at 65% 10%, #dbe5f044, transparent 75%);
}
@keyframes atmo-bank-drift {
  from {
    translate: -20px 0;
  }
  to {
    translate: 27px 8px;
  }
}
@keyframes atmo-cloud-clear {
  0%,
  12% {
    opacity: 0.95;
    translate: -8px 0;
  }
  40% {
    opacity: 0.5;
  }
  60%,
  78% {
    opacity: 0.05;
    translate: 55px -18px;
  }
  100% {
    opacity: 0.95;
    translate: -8px 0;
  }
}
@keyframes atmo-sun-reveal {
  0%,
  12%,
  100% {
    opacity: 0.12;
  }
  50%,
  78% {
    opacity: 1;
  }
}
@keyframes atmo-mist-clear {
  0%,
  100% {
    opacity: 0.7;
  }
  60%,
  78% {
    opacity: 0.05;
  }
}
@keyframes atmo-wide-strike {
  0%,
  9% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  11% {
    opacity: 0.85;
    clip-path: inset(0 0 65% 0);
  }
  14% {
    opacity: 1;
    clip-path: inset(0);
  }
  18% {
    opacity: 0.4;
    clip-path: inset(0);
  }
  23%,
  100% {
    opacity: 0;
    clip-path: inset(0);
  }
}
@keyframes atmo-sky-light {
  0%,
  9%,
  24%,
  100% {
    opacity: 0;
  }
  14% {
    opacity: 0.6;
  }
  18% {
    opacity: 0.1;
  }
  21% {
    opacity: 0.3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .atmo-cloudbanks,
  .atmo-cloudbank,
  .atmo-strike,
  .atmosphere-partly .atmo-sunlight,
  .atmosphere-partly .atmo-mist {
    animation: none !important;
  }
  .atmo-strike {
    display: none;
  }
  .atmosphere-partly .atmo-cloudbanks {
    opacity: 0.35;
  }
  .atmosphere-partly .atmo-sunlight {
    opacity: 0.8;
  }
}

/* Sunny atmosphere: fuller warm light; other conditions unchanged. */
.atmosphere-clear .atmo-ray {
  width: 26%;
  background: linear-gradient(180deg, #f4d49c66, #e6b26e2b 60%, transparent);
  filter: blur(3px);
  animation-name: atmo-sunny-breathe;
}
.atmosphere-clear .atmo-glow {
  width: 330px;
  height: 330px;
  right: -90px;
  top: -130px;
  background: radial-gradient(
    circle,
    #f5d5a378,
    #eac18935 38%,
    transparent 70%
  );
}
.weather-depth-clear {
  background:
    radial-gradient(ellipse at 85% 0, #97704040, transparent 80%), #191b1e;
}
.atmosphere-clear:after {
  background: linear-gradient(0deg, #0f1113c9, transparent 55%, #0f111340);
}
@keyframes atmo-sunny-breathe {
  0%,
  100% {
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere-clear .atmo-ray {
    animation: none !important;
    opacity: 0.75;
  }
}

/* Sunny beams have separated silhouettes and independent movement/timing. */
.atmosphere-clear .atmo-ray {
  width: var(--ray-width);
  left: 78%;
  top: -8%;
  height: 160%;
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  filter: blur(1.4px);
  animation: atmo-individual-ray var(--ray-duration) ease-in-out infinite;
  animation-delay: var(--phase);
  background: linear-gradient(180deg, #f7d7a67a, #eec58a33 62%, transparent);
}
@keyframes atmo-individual-ray {
  0%,
  100% {
    opacity: 0.25;
    transform: rotate(calc(var(--angle) - var(--sway))) scaleY(0.94);
  }
  33% {
    opacity: 0.9;
    transform: rotate(var(--angle)) scaleY(1.04);
  }
  64% {
    opacity: 0.45;
    transform: rotate(calc(var(--angle) + var(--sway))) scaleY(0.98);
  }
  82% {
    opacity: 0.75;
    transform: rotate(var(--angle)) scaleY(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere-clear .atmo-ray {
    animation: none !important;
    opacity: 0.65;
  }
}

/* Safety notice: persistent left contents, existing copy on the right. */
.safety-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: start;
  gap: 32px;
}
.safety-toc {
  position: sticky;
  top: 124px;
  max-height: calc(100dvh - 148px);
  overflow: auto;
  background: #171b1e;
  border: 1px solid #383d41;
  border-radius: 18px;
  padding: 22px;
}
.safety-toc > .eyebrow {
  font-size: 9px;
  margin-bottom: 18px;
}
.safety-toc button {
  display: block;
  width: 100%;
  text-align: left;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid #ffffff0d;
  border-radius: 8px;
  background: transparent;
  color: #aeb5ba;
  padding: 13px 11px;
  font-size: 12px;
  line-height: 1.6;
}
.safety-toc button[aria-current='true'] {
  color: #fff;
  background:
    repeating-linear-gradient(125deg, #ffffff05 0 1px, transparent 1px 4px),
    #8c1d18;
}
.safety-content {
  min-width: 0;
}
.safety-article {
  padding: 24px 28px;
  margin-bottom: 20px;
  background: #171b1e;
  border: 1px solid #383d41;
  border-radius: 18px;
  scroll-margin-top: 124px;
}
.safety-article h2 {
  font-size: 22px;
  margin: 0 0 20px;
  line-height: 1.4;
}
.safety-article p {
  margin: 0 0 16px;
}
.safety-article p:last-child {
  margin-bottom: 0;
}
/* Clearing-sky rays retain the approved cloudscape and gain independent timing. */
.atmosphere-partly .atmo-ray {
  animation: atmo-partly-ray var(--ray-duration) ease-in-out infinite;
  animation-delay: var(--phase);
  width: 24%;
  filter: blur(3px);
}
@keyframes atmo-partly-ray {
  0%,
  100% {
    opacity: 0.18;
    transform: rotate(calc(var(--angle) - var(--sway))) scaleY(0.96);
  }
  28% {
    opacity: 0.8;
    transform: rotate(var(--angle)) scaleY(1.03);
  }
  63% {
    opacity: 0.32;
    transform: rotate(calc(var(--angle) + var(--sway))) scaleY(0.98);
  }
  82% {
    opacity: 0.65;
    transform: rotate(var(--angle)) scaleY(1.01);
  }
}
@media (max-width: 1200px) {
  .safety-toc {
    top: 182px;
    max-height: calc(100dvh - 204px);
  }
  .safety-article {
    scroll-margin-top: 182px;
  }
}
@media (max-width: 750px) {
  .safety-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 16px;
  }
  .safety-toc {
    padding: 14px;
  }
  .safety-toc button {
    font-size: 11px;
    padding: 11px 8px;
  }
  .safety-article {
    padding: 20px;
  }
  .safety-article h2 {
    font-size: 19px;
  }
}
@media (max-width: 550px) {
  .safety-layout {
    grid-template-columns: 1fr;
  }
  .safety-toc {
    position: static;
    max-height: none;
  }
  .safety-article {
    scroll-margin-top: 176px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere-partly .atmo-ray {
    animation: none !important;
    opacity: 0.5;
  }
}

.universe-story {
  padding: 30px;
}
.story-intro {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr);
  gap: 32px;
  align-items: center;
}
.story-intro .photo {
  height: 300px;
  margin: 0;
}
.story-intro h2 {
  font-size: 28px;
  line-height: 1.35;
  margin: 14px 0 20px;
}
.story-outline {
  border-top: 1px solid #383d41;
  margin-top: 28px;
  padding-top: 26px;
}
.story-outline ol {
  list-style: none;
  counter-reset: story;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 0;
  margin: 24px 0 0;
}
.story-outline li {
  counter-increment: story;
  font-size: 13px !important;
  line-height: 1.7 !important;
}
.story-outline li:before {
  content: '0' counter(story);
  display: block;
  color: #cf9b94;
  font-family: Montserrat;
  font-size: 12px;
  margin-bottom: 10px;
}
.story-outline strong {
  display: block;
  color: #f6f5f3;
  font-family: Montserrat;
  font-size: 14px;
  margin-bottom: 9px;
}
.story-outline span {
  display: block;
}
@media (max-width: 850px) {
  .story-intro {
    grid-template-columns: 1fr;
  }
  .story-intro .photo {
    height: 230px;
  }
  .story-outline ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 550px) {
  .universe-story {
    padding: 22px;
  }
  .story-outline ol {
    grid-template-columns: 1fr;
  }
}

.universe-story .story-signature {
  font-size: 12px;
  color: #d09b95;
  margin-top: 20px;
}
.universe-story .story-closing {
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid #383d41;
  color: #dbd6d4;
  font-size: 14px;
}
.story-outline li {
  line-height: 1.85 !important;
}

/* Comfortable tablet reading within the single story panel. */
.universe-story p,
.universe-story .story-outline li span {
  text-align: justify;
  text-align-last: start;
  hyphens: auto;
  overflow-wrap: break-word;
}
.universe-story .story-signature {
  text-align: left;
}
.story-outline ol {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 38px;
}
.story-outline li {
  font-size: 16px !important;
  line-height: 1.85 !important;
}
.story-outline strong {
  font-size: 17px;
  line-height: 1.5;
}
.story-outline li:before {
  font-size: 14px;
}
.universe-story .story-intro p {
  font-size: 16px;
  line-height: 1.85;
}
.universe-story .story-closing {
  font-size: 16px;
}
.clock {
  width: max-content;
  min-width: 0;
  justify-self: end;
  flex-shrink: 0;
}
.clock b {
  display: block;
  width: max-content;
}
.clock span {
  display: block;
  white-space: nowrap;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.4;
}
#idle {
  text-align: center;
  width: min(450px, calc(100vw - 36px));
}
#idle h2 {
  font-size: 25px;
  line-height: 1.4;
  margin: 0 0 18px;
}
#idle p {
  line-height: 1.7;
  color: #bdc3c7;
  margin: 0 0 24px;
}
#idle .primary {
  width: 100%;
  min-height: 54px;
}
@media (max-width: 650px) {
  .story-outline ol {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .story-outline li,
  .universe-story .story-intro p {
    font-size: 16px !important;
  }
  .clock {
    min-width: 0;
  }
}

/* Four consecutive narrative chapters, kept inside the single story panel. */
.universe-story .story-outline ol {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.story-outline li {
  position: relative;
  padding: 28px 0;
  border-bottom: 1px solid #383d41;
}
.story-outline li:first-child {
  padding-top: 6px;
}
.story-outline li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.story-outline li:before {
  margin-bottom: 12px;
  font-size: 14px;
}
.story-outline strong {
  font-size: 21px;
  margin-bottom: 18px;
}
.story-chapter p {
  font-size: 17px;
  line-height: 1.9;
  text-align: justify;
  text-align-last: start;
  hyphens: auto;
  margin: 0 0 16px;
  color: #bdc3c6;
}
.story-chapter p:last-child {
  margin-bottom: 0;
}
.story-chapter {
  max-width: 100%;
}
@media (max-width: 650px) {
  .story-chapter p {
    font-size: 16px;
    line-height: 1.85;
  }
  .story-outline strong {
    font-size: 19px;
  }
}

.story-intro > img.photo {
  height: auto;
  aspect-ratio: 16/9;
  object-fit: contain;
  background: #0f1113;
}

/* Passenger-facing services, with equal spacing and tablet-size type. */
.services-intro {
  max-width: 1000px;
  font-size: 17px;
}
.service-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.service-detail {
  padding: 30px;
  display: flex;
  flex-direction: column;
}
.service-number {
  color: #cf9b94;
  font-family: Montserrat;
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 18px;
}
.service-detail h2 {
  font-size: 25px;
  line-height: 1.4;
  margin: 0 0 20px;
}
.service-detail p {
  font-size: 16px;
  line-height: 1.85;
  text-align: justify;
  text-align-last: start;
  hyphens: auto;
  margin: 0 0 20px;
}
.service-examples {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 2px 0 24px;
}
.service-examples span {
  font-size: 12px;
  line-height: 1.5;
  color: #cfb5b0;
  padding: 7px 11px;
  border: 1px solid #8c1d1860;
  background: #8c1d1817;
  border-radius: 20px;
}
.service-tail {
  border-top: 1px solid #383d41;
  padding-top: 22px;
  margin-top: auto;
}
.service-tail h3 {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.service-tail p {
  margin-bottom: 0;
}
.service-contact {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 24px 0 16px;
}
.service-contact > div {
  flex: 1;
}
.service-contact h3 {
  font-size: 19px;
  line-height: 1.5;
}
.service-contact p {
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}
.service-contact button {
  flex-shrink: 0;
}
@media (max-width: 750px) {
  .service-showcase {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .service-detail {
    padding: 24px;
  }
  .service-detail h2 {
    font-size: 23px;
  }
  .service-contact {
    align-items: stretch;
    flex-direction: column;
    gap: 20px;
  }
  .service-contact button {
    align-self: flex-start;
  }
}

/* Tariff presentation follows the validated brand and existing local schedule. */
.pricing-lead {
  display: flex;
  gap: 34px;
  align-items: center;
  margin-bottom: 24px;
  padding: 30px;
}
.pricing-lead > div:first-child {
  flex: 1;
}
.pricing-lead h2,
.hire-pricing h2,
.pricing-bottom h2 {
  font-size: 26px;
  line-height: 1.4;
  margin: 14px 0 20px;
}
.pricing-lead p:not(.eyebrow) {
  font-size: 17px;
  line-height: 1.85;
  margin: 0;
  text-align: justify;
  hyphens: auto;
}
.pricing-label {
  min-width: 210px;
  text-align: center;
  padding: 24px;
  border: 1px solid #8c1d1866;
  background: radial-gradient(at 50% 0, #8c1d183d, transparent 90%);
  border-radius: 16px;
  font-size: 14px;
  color: #c7b3af;
  line-height: 1.8;
}
.pricing-label strong {
  display: block;
  font-family: Montserrat;
  color: white;
  font-size: 27px;
  margin: 7px 0;
}
.pricing-label span {
  font-size: 12px;
}
.hire-pricing {
  padding: 30px;
  margin-bottom: 24px;
}
.pricing-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.tax-label {
  border: 1px solid #57504f;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 12px;
  color: #d8b9b4;
}
.pricing-table-wrap {
  overflow-x: auto;
}
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 16px;
}
.pricing-table th,
.pricing-table td {
  padding: 20px 16px;
  border-bottom: 1px solid #383d41;
  line-height: 1.6;
}
.pricing-table thead th {
  font-size: 12px;
  font-weight: 500;
  color: #aab3b9;
}
.pricing-table tbody th {
  font-family: Montserrat;
  font-size: 15px;
  font-weight: 500;
}
.pricing-table tr > :last-child {
  text-align: right;
  font-family: Montserrat;
  white-space: nowrap;
}
.pricing-table tbody tr:hover {
  background: #8c1d180d;
}
.pricing-note {
  font-size: 14px !important;
  line-height: 1.85 !important;
  color: #adb6bd !important;
  margin: 20px 0 0;
}
.pricing-extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}
.pricing-extra > div {
  padding: 20px;
  border: 1px solid #8c1d1855;
  border-radius: 12px;
  background: #8c1d1812;
}
.pricing-extra span {
  display: block;
  font-size: 14px;
  color: #c2b6b3;
  line-height: 1.6;
}
.pricing-extra strong {
  display: block;
  margin-top: 10px;
  font-family: Montserrat;
  font-size: 23px;
}
.pricing-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.pricing-bottom > .panel {
  padding: 30px;
}
.pricing-bottom .row {
  font-size: 16px;
  line-height: 1.7;
}
.wait-rate {
  padding: 20px;
  margin-top: 22px;
  background: #8c1d181a;
  border: 1px solid #8c1d1866;
  border-radius: 13px;
}
.wait-rate span,
.wait-rate small {
  display: block;
  line-height: 1.7;
  color: #c2b6b3;
}
.wait-rate span {
  font-size: 13px;
}
.wait-rate strong {
  display: block;
  font-family: Montserrat;
  font-size: 25px;
  margin: 8px 0;
}
.wait-rate small {
  font-size: 12px;
}
.price-details {
  padding: 30px;
}
.price-details h2 {
  font-size: 25px;
  margin: 0 0 8px;
}
.price-details details {
  border-bottom: 1px solid #383d41;
  padding: 20px 0;
}
.price-details details:last-child {
  border-bottom: 0;
}
.price-details summary {
  cursor: pointer;
  font-family: Montserrat;
  font-size: 16px;
  line-height: 1.7;
  min-height: 32px;
}
.price-details p {
  font-size: 16px;
  line-height: 1.85;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 750px) {
  .pricing-lead {
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
  }
  .pricing-label {
    min-width: 0;
  }
  .pricing-bottom {
    grid-template-columns: 1fr;
  }
  .pricing-table th,
  .pricing-table td {
    padding: 16px 10px;
  }
  .pricing-table {
    font-size: 14px;
  }
  .pricing-extra {
    grid-template-columns: 1fr;
  }
  .hire-pricing,
  .pricing-bottom > .panel,
  .price-details {
    padding: 24px;
  }
  .pricing-table tbody th {
    font-size: 13px;
  }
}

.safety-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 10px 0 14px;
}
.safety-title-row h1 {
  margin: 0;
  flex-shrink: 0;
}
.safety-highlights {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.safety-highlight.pricing-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  max-width: 200px;
  padding: 18px 20px;
  min-height: 76px;
  color: #f6f5f3;
  font-family: Montserrat;
  font-size: 14px;
  line-height: 1.55;
}
.safety-title-row + .lead {
  margin-top: 20px;
}
@media (max-width: 750px) {
  .safety-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }
  .safety-highlights {
    width: 100%;
  }
  .safety-highlight.pricing-label {
    flex: 1;
    max-width: none;
    min-width: 0;
  }
}
@media (max-width: 550px) {
  .safety-highlights {
    gap: 8px;
  }
  .safety-highlight.pricing-label {
    font-size: 11px;
    padding: 14px 9px;
    min-height: 70px;
  }
}
/* Match the camera header control's 50px height. */
.safety-highlight.pricing-label {
  height: 50px;
  min-height: 50px;
  padding: 10px 16px;
  font-size: 13px;
  white-space: nowrap;
  max-width: none;
}
@media (max-width: 550px) {
  .safety-highlight.pricing-label {
    height: 48px;
    min-height: 48px;
    padding: 8px;
    font-size: 10px;
    white-space: normal;
  }
}
/* Tighten only the title/intro gap; preserve the notice layout's position. */
.safety-title-row {
  margin-bottom: 4px;
}
.safety-title-row + .lead {
  margin-top: 6px;
  margin-bottom: 50px;
}

/* Justification limited to the safety notice page. */
.page:has(.safety-title-row) > .lead,
.page:has(.safety-title-row) .safety-article p {
  text-align: justify;
  text-align-last: start;
  hyphens: auto;
  overflow-wrap: break-word;
}
/* Align the contents label with the navigation button text. */
.safety-toc > .eyebrow {
  padding-inline: 11px;
}
@media (max-width: 750px) {
  .safety-toc > .eyebrow {
    padding-inline: 8px;
  }
}

/* News stays inside the passenger space; two editorial categories. */
.news-toolbar {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 18px;
}
.news-toolbar .lead {
  font-size: 17px;
  margin: 0;
  max-width: 700px;
}
.news-filters {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.news-filters button {
  min-height: 50px;
  border: 1px solid #45494c;
  border-radius: 12px;
  background: #202427;
  padding: 12px 20px;
  font-size: 14px;
}
.news-filters button[aria-pressed='true'] {
  background:
    repeating-linear-gradient(125deg, #ffffff06 0 1px, transparent 1px 4px),
    #8c1d18;
  border-color: #ac554a;
}
.news-preview-note {
  font-size: 12px;
  color: #a5afb5;
  line-height: 1.7;
  margin: 0 0 24px;
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.news-card {
  text-align: left;
  background: #171b1e;
  border: 1px solid #393d41;
  border-radius: 20px;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s;
}
.news-card:hover {
  border-color: #a6645c;
}
.news-cover {
  height: 225px;
  position: relative;
  overflow: hidden;
}
.news-cover img,
.news-detail-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.news-category {
  position: absolute;
  left: 22px;
  bottom: 18px;
  background: #0f1113e6;
  border: 1px solid #a6645c88;
  border-radius: 20px;
  padding: 8px 14px;
  font-family: Montserrat;
  font-size: 11px;
  letter-spacing: 1px;
}
.news-card-copy {
  padding: 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.news-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #cc9c95;
  line-height: 1.8;
}
.news-meta span + span {
  color: #959fa6;
}
.news-card h2 {
  font-size: 24px;
  line-height: 1.4;
  margin: 15px 0;
}
.news-card p {
  font-size: 16px;
  line-height: 1.85;
  color: #b9c1c7;
  margin: 0 0 23px;
}
.news-read {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #383d41;
  font-size: 13px;
  color: #e0bab4;
}
.news-art {
  height: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(at 80% 20%, #8c1d1840, transparent 70%),
    linear-gradient(135deg, #282c31, #101416);
}
.news-art svg {
  width: 65%;
  height: 80%;
  fill: none;
  stroke: #cda39c;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.news-art-city {
  background:
    radial-gradient(at 20% 15%, #7a443434, transparent 70%),
    linear-gradient(130deg, #10161b, #292a32);
}
.news-art-city svg {
  stroke: #9fabb5;
}
.news-back {
  margin-top: 0;
}
.news-article {
  padding: 0;
  overflow: hidden;
}
.news-detail-image {
  height: 320px;
}
.news-detail-copy {
  padding: 32px;
  max-width: 1050px;
  margin: auto;
}
.news-detail-copy h2 {
  font-size: 30px;
  line-height: 1.4;
  margin: 20px 0 26px;
}
.news-detail-copy p {
  font-size: 17px;
  line-height: 1.9;
  text-align: justify;
  hyphens: auto;
}
.news-disclaimer {
  margin-top: 28px;
  border-top: 1px solid #383d41;
  padding-top: 20px;
  font-size: 12px;
  line-height: 1.7;
  color: #a5afb5;
}
@media (max-width: 950px) {
  .news-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
  .news-cover {
    height: 200px;
  }
}
@media (max-width: 650px) {
  .news-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .news-filters {
    width: 100%;
    gap: 8px;
  }
  .news-filters button {
    flex: 1;
    font-size: 12px;
    padding: 12px 10px;
  }
  .news-card-copy {
    padding: 23px;
  }
  .news-card h2 {
    font-size: 22px;
  }
  .news-detail-image {
    height: 230px;
  }
  .news-detail-copy {
    padding: 24px;
  }
  .news-detail-copy h2 {
    font-size: 25px;
  }
}

/* News heading matches the validated safety page; cards unchanged. */
.news-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 10px 0 4px;
}
.news-title-row h1 {
  margin: 0;
  flex-shrink: 0;
}
.page .news-title-row + .news-intro {
  margin-top: 6px;
  margin-bottom: 50px;
}
.news-title-row .news-filters {
  gap: 12px;
}
.news-title-row .news-filters button {
  height: 50px;
  min-height: 50px;
  padding: 10px 20px;
  border: 1px solid #8c1d1866;
  background: radial-gradient(at 50% 0, #8c1d183d, transparent 90%);
  font-family: Montserrat;
  font-size: 13px;
  border-radius: 16px;
}
.news-title-row .news-filters button[aria-pressed='true'] {
  background:
    repeating-linear-gradient(125deg, #ffffff06 0 1px, transparent 1px 4px),
    #8c1d18;
  border-color: #ac554a;
}
@media (max-width: 750px) {
  .news-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .news-title-row .news-filters {
    width: 100%;
  }
  .news-title-row .news-filters button {
    flex: 1;
    min-width: 0;
  }
}
@media (max-width: 550px) {
  .news-title-row .news-filters {
    gap: 8px;
  }
  .news-title-row .news-filters button {
    height: 48px;
    min-height: 48px;
    font-size: 11px;
    padding: 8px;
  }
}
/* Share the title's left edge; avoid stretching the short introductory line. */
.page .news-title-row + .news-intro {
  display: block;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  text-align: left;
  text-align-last: left;
}

/* Cultural selection: native tablet cards in the existing ÉLYX theme. */
.culture-intro {
  max-width: 1000px;
  margin: 12px 0 30px;
}
.culture-intro h2 {
  font-size: 32px;
  line-height: 1.35;
}
.culture-intro > p:not(.eyebrow) {
  font-size: 18px;
  line-height: 1.9;
  text-align: justify;
}
.culture-intro small,
.culture-note {
  color: #aab3ba;
  font-size: 13px;
  line-height: 1.8;
}
.culture-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.culture-art {
  height: 220px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 70% 20%, #8c1d185c, transparent 65%),
    linear-gradient(125deg, #262b30, #0f1113);
}
.culture-art svg {
  width: 65%;
  height: 80%;
  stroke: #e2b7ad;
  fill: none;
  stroke-width: 1.4;
  position: relative;
  z-index: 1;
}
.culture-orbit {
  width: 240px;
  height: 240px;
  border: 1px solid #e5b5aa25;
  border-radius: 50%;
  position: absolute;
  transform: rotate(-25deg) scaleY(0.7);
}
.culture-art-number {
  position: absolute;
  right: 22px;
  bottom: 8px;
  font: 600 70px Montserrat;
  color: #ffffff09;
}
.culture-art-1 {
  background: radial-gradient(at 20% 80%, #8c1d1860, transparent 65%), #191e24;
}
.culture-art-2 {
  background: linear-gradient(145deg, #362727, #101720);
}
.culture-art-3 {
  background: radial-gradient(at 80% 20%, #b88a6235, transparent 65%), #15191e;
}
.culture-art-4 {
  background:
    radial-gradient(at 50% 70%, #8c1d1848, transparent 60%),
    linear-gradient(20deg, #10121c, #262b3b);
}
.culture-art-5 {
  background: linear-gradient(145deg, #2b2424, #11191c);
}
.culture-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.culture-card-facts span {
  padding: 7px 11px;
  border: 1px solid #70504c;
  border-radius: 9px;
  font-size: 12px;
  color: #e4bdb6;
  background: #8c1d181c;
}
.culture-detail {
  overflow: hidden;
  padding: 0;
}
.culture-detail > div:last-child {
  padding: 32px;
}
.culture-detail h2 {
  font-size: 30px;
}
.culture-detail p {
  font-size: 17px;
  line-height: 1.9;
  text-align: justify;
}
.culture-practical {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0;
}
.culture-practical > div {
  padding: 20px;
  border: 1px solid #3b4045;
  border-radius: 14px;
  background: #111518;
}
.culture-practical dt {
  font: 600 12px Montserrat;
  color: #d9a69d;
  margin-bottom: 10px;
}
.culture-practical dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #e2e5e7;
}
.culture-source {
  display: inline-flex;
  text-decoration: none;
  padding: 15px 22px;
}
.culture-note {
  margin-top: 28px;
}
.culture-note a {
  color: #e0b5ad;
}
.culture-detail p.culture-note {
  font-size: 13px;
}
.culture-card .eyebrow {
  margin: 0;
}
.culture-card h2 {
  margin-top: 13px;
}
@media (max-width: 700px) {
  .culture-grid,
  .culture-practical {
    grid-template-columns: 1fr;
  }
  .culture-intro h2 {
    font-size: 26px;
  }
  .culture-detail > div:last-child {
    padding: 24px;
  }
}

/* Official source link matches inactive news filters. */
.culture-source.primary {
  min-height: 50px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border: 1px solid #45494c;
  border-radius: 12px;
  background: #202427;
  box-shadow: none;
  color: inherit;
  padding: 12px 20px;
  font: inherit;
  font-size: 14px;
  text-decoration: none;
}
.culture-source.primary:hover {
  border-color: #a6645c;
  background: #29282a;
}
.culture-source.primary {
  height: 50px;
  min-height: 50px;
  padding: 10px 20px;
  border: 1px solid #8c1d1866;
  background: radial-gradient(at 50% 0, #8c1d183d, transparent 90%);
  font-family: Montserrat;
  font-size: 13px;
  border-radius: 16px;
}

/* Shared style for news filters and official source links. */
.news-filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 50px;
  min-height: 50px;
  padding: 10px 20px;
  border: 1px solid #8c1d1866;
  background: radial-gradient(at 50% 0, #8c1d183d, transparent 90%);
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  border-radius: 16px;
  color: #f6f5f3;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}
.culture-source.news-filter-button:hover {
  background: radial-gradient(at 50% 0, #8c1d183d, transparent 90%);
  border-color: #8c1d1866;
}

.culture-intro {
  max-width: none;
}
.culture-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.culture-title-row h2 {
  margin: 20px 0;
  min-width: 0;
}
.culture-date {
  flex-shrink: 0;
  cursor: default;
}
.culture-intro > p:not(.eyebrow) {
  max-width: 1000px;
}
@media (max-width: 900px) {
  .culture-title-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .culture-title-row h2 {
    margin-bottom: 8px;
  }
  .culture-date {
    margin-bottom: 12px;
  }
}
/* Cultural introduction follows the safety subtitle typography and spacing. */
.culture-title-row {
  margin: 10px 0 4px;
}
.culture-title-row h2 {
  margin: 0;
  line-height: 1.18;
}
.culture-intro > p:not(.eyebrow) {
  font-size: 15px;
  line-height: 1.7;
  color: #c3c4c5;
  margin: 6px 0 50px;
  max-width: none;
  text-align: left;
  hyphens: none;
}
.culture-intro {
  margin-bottom: 0;
}

.comfort-intro {
  margin: 6px 0 40px;
  font-size: 15px;
  line-height: 1.7;
}
.comfort-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.comfort-card {
  padding: 30px;
  background: radial-gradient(at 100% 0, #8c1d1818, transparent 65%), #15191c;
  display: flex;
  flex-direction: column;
}
.comfort-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.comfort-card .icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid #8c1d1866;
  border-radius: 15px;
  color: #d9a69d;
  background: #8c1d1815;
}
.comfort-card .icon svg {
  width: 27px;
  height: 27px;
}
.comfort-number {
  font: 600 36px Montserrat;
  color: #ffffff12;
}
.comfort-card h2 {
  font-size: 25px;
  line-height: 1.4;
  margin: 14px 0 18px;
}
.comfort-card > p:not(.eyebrow) {
  font-size: 17px;
  line-height: 1.9;
  color: #c3c4c5;
  text-align: justify;
  margin: 0 0 24px;
}
.comfort-foot {
  margin-top: auto;
  border-top: 1px solid #ffffff16;
  padding-top: 18px;
  font-size: 12px;
  color: #d9aaa2;
  line-height: 1.7;
}
.comfort-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
}
.comfort-links p {
  font-size: 15px;
  line-height: 1.7;
  color: #b9c1c7;
}
.comfort-links > div:last-child {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
@media (max-width: 750px) {
  .comfort-grid {
    grid-template-columns: 1fr;
  }
  .comfort-links {
    align-items: flex-start;
    flex-direction: column;
  }
  .comfort-card {
    padding: 24px;
  }
  .comfort-links > div:last-child {
    flex-wrap: wrap;
  }
}

.tranquility-toggle {
  flex-shrink: 0;
  gap: 8px;
  white-space: nowrap;
}
.tranquility-toggle > span {
  font-size: 21px;
  line-height: 1;
}
.header-controls {
  flex-shrink: 0;
}
header {
  gap: 16px;
}
#tranquility-confirm {
  max-width: 590px;
  width: calc(100% - 40px);
  padding: 36px;
  text-align: center;
  color: #f6f5f3;
  background: radial-gradient(at 50% 0, #8c1d1833, transparent 75%), #15191c;
  border: 1px solid #70403c;
  border-radius: 22px;
}
#tranquility-confirm::backdrop {
  background: #000b;
  backdrop-filter: blur(5px);
}
#tranquility-confirm h2 {
  font-size: 26px;
  line-height: 1.4;
  margin: 0 0 20px;
}
#tranquility-confirm p {
  font-size: 17px;
  line-height: 1.8;
  color: #c3c4c5;
}
.tranquility-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
#tranquility-screen:not([hidden]) {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  z-index: 2147483647;
  background: #000;
  border: 0;
  border-radius: 0;
  padding: 0;
  cursor: default;
  outline: none;
  touch-action: manipulation;
}
.tranquility-active {
  overflow: hidden;
}
.tranquility-active * {
  animation-play-state: paused !important;
}
@media (max-width: 1150px) {
  header .identity {
    display: none;
  }
  header {
    gap: 12px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .tranquility-toggle {
    font-size: 12px;
    padding: 10px 12px;
  }
}
@media (max-width: 800px) {
  header {
    height: auto;
    flex-wrap: wrap;
  }
  .tranquility-toggle {
    margin-left: auto;
  }
  .tranquility-actions {
    flex-wrap: wrap;
  }
}

#tranquility-layer[open] {
  display: block;
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100dvh;
  background: #000;
  overflow: hidden;
}
#tranquility-layer::backdrop {
  background: #000;
}
#tranquility-layer #tranquility-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  border: 0;
  padding: 0;
  outline: 0;
}

/* Keep every header action in one layout group, including fullscreen. */
.header-controls {
  position: relative;
  isolation: isolate;
  min-width: 0;
}
.header-controls #tranquility {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  pointer-events: auto;
  border: 1px solid #8c1d1866;
  background: radial-gradient(at 50% 0, #8c1d183d, transparent 90%);
  border-radius: 16px;
  font-family: Montserrat, sans-serif;
}
.header-controls #tranquility > * {
  pointer-events: none;
}
.clock {
  position: relative;
  z-index: 0;
}
@media (max-width: 1200px) {
  .header-controls #tranquility {
    margin-left: 0;
  }
  .header-controls {
    flex-wrap: wrap;
  }
}

/* Avoid sticky/composited header hit areas while the application is fullscreen. */
body:fullscreen,
body:-webkit-full-screen {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #0f1113;
}
.cockpit-fullscreen > header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  z-index: 100;
  isolation: isolate;
  transform: none;
  filter: none;
  backdrop-filter: none;
  pointer-events: auto;
}
.cockpit-fullscreen > main {
  margin-top: var(--cockpit-header-height, 100px);
}
.cockpit-fullscreen .header-controls,
.cockpit-fullscreen header button {
  pointer-events: auto;
  transform: none;
}
.cockpit-fullscreen header button > * {
  pointer-events: none;
}

/* Tablet kiosk: no sideways pan or rubber-band, keep long content readable. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior: none;
  touch-action: pan-y;
}
header {
  touch-action: manipulation;
}
main,
.page {
  min-width: 0;
  max-width: 100%;
}
button,
a,
summary {
  touch-action: manipulation;
}

#tranquility-confirm:focus {
  outline: none;
}

.weather-credit {
  font-size: 10px;
  color: #bca39d;
  text-decoration: none;
  position: relative;
  z-index: 2;
}

.weather-attribution {
  font-size: 10px;
  color: #a4aaad;
}
/* Shared tablet dialogs retain the existing Élixir treatment. */
#external-source {
  width: min(540px, calc(100% - 40px));
  max-width: 540px;
  text-align: center;
  padding: 30px;
  background: radial-gradient(at 50% 0, #8c1d1833, transparent 75%), #15191c;
  overflow-wrap: anywhere;
}
#external-source:focus {
  outline: none;
}
#external-source h2 {
  font-size: 25px;
  line-height: 1.4;
}
#external-source p {
  font-size: 16px;
  line-height: 1.7;
  color: #bec3c6;
}
#external-source::backdrop {
  background: #000b;
  backdrop-filter: blur(5px);
}
#external-qr {
  width: 220px;
  max-width: 80%;
  margin: 24px auto;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}
#external-qr svg {
  width: 100%;
  display: block;
}
#external-host {
  font-size: 13px !important;
}
#offline-status:not([hidden]) {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;
  max-width: calc(100% - 30px);
  padding: 10px 18px;
  border: 1px solid #8c1d1866;
  border-radius: 12px;
  background: #101214f5;
  color: #d9bbb6;
  font-size: 12px;
  pointer-events: none;
}
.tranquility-active #offline-status {
  display: none;
}
/* Footer/source links: no browser-default blue or visited purple. */
.page a:link,
.page a:visited {
  color: #dfb7b0;
  text-decoration-color: #8c1d18;
  text-underline-offset: 3px;
}
.page a:hover,
.page a:focus-visible {
  color: #f6f5f3;
  text-decoration-color: #c78076;
}
.page a.news-filter-button:link,
.page a.news-filter-button:visited {
  color: #f6f5f3;
  text-decoration: none;
}

/* Category columns preserve the existing article cards. */
.news-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.news-column {
  min-width: 0;
}
.news-column-title {
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  margin: 0 0 18px;
  color: #f5f5f5;
}
.news-column-stack {
  display: grid;
  gap: 24px;
}
.news-column-stack .news-card {
  width: 100%;
}
.news-columns-filtered {
  grid-template-columns: minmax(0, 1fr);
}
.news-columns-filtered .news-column-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 650px) {
  .news-columns,
  .news-columns-filtered .news-column-stack {
    grid-template-columns: 1fr;
  }
}

/* Uniform news cards, independent of editorial summary length. */
.news-column-stack .news-card {
  height: 500px;
}
.news-column-stack .news-cover {
  height: 225px;
  flex: 0 0 225px;
}
.news-column-stack .news-card-copy {
  min-height: 0;
  overflow: hidden;
}
.news-column-stack .news-card h2 {
  height: 68px;
  flex: 0 0 68px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 12px 0;
}
.news-column-stack .news-card p {
  height: 60px;
  flex: 0 0 60px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0 0 12px;
}
.news-column-stack .news-read {
  flex-shrink: 0;
}
@media (max-width: 950px) {
  .news-column-stack .news-card {
    height: 475px;
  }
  .news-column-stack .news-cover {
    height: 200px;
    flex-basis: 200px;
  }
}
@media (max-width: 650px) {
  .news-column-stack .news-card {
    height: 475px;
  }
}

/* Justified editorial text within cultural and Paris discovery cards/details. */
.culture-grid .news-card-copy > p:not(.eyebrow),
.culture-detail > div > p:not(.eyebrow):not(.culture-note),
.culture-detail .culture-practical dd {
  text-align: justify;
  hyphens: auto;
  overflow-wrap: break-word;
}
.culture-intro > p:not(.eyebrow),
.culture-detail .culture-note,
.culture-grid + .culture-note {
  text-align: justify;
  hyphens: auto;
}

/* iPad landscape cockpit: fixed shell, scroll only inside long sections. */
html {
  height: 100%;
  overflow: hidden;
}
body {
  position: fixed;
  inset: 0;
  height: var(--cockpit-viewport-height, 100vh);
  min-height: 0;
  overflow: hidden;
}
body > header,
.cockpit-fullscreen > header {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
}
body > main,
.cockpit-fullscreen > main {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
main.home-view {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 24px minmax(0, 1.08fr);
}
main.home-view .hero {
  min-height: 0;
  min-width: 0;
}
main.home-view .welcome,
main.home-view .weather {
  min-height: 0;
}
main.home-view > .grid {
  min-height: 0;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
}
main.home-view .tile {
  min-height: 0;
}
.news-cover,
.news-art,
.culture-art {
  width: 100%;
  min-width: 0;
  align-self: stretch;
  justify-self: stretch;
  flex-shrink: 0;
}
.culture-card > .culture-art {
  flex: 0 0 220px;
}
.news-cover > .news-art {
  width: 100%;
  height: 100%;
}
.culture-art svg,
.news-art svg {
  display: block;
  justify-self: center;
}
@media (min-width: 960px) and (max-width: 1200px) and (orientation: landscape) {
  :root {
    --space: 12px;
  }
  body > header,
  .cockpit-fullscreen > header {
    display: grid;
    grid-template-columns: 64px 104px minmax(0, 1fr) 105px;
    grid-template-rows: 1fr;
    min-height: 76px;
    height: 76px;
    padding: 10px 12px;
    gap: 10px;
  }
  header > img {
    width: 64px;
    height: 44px;
  }
  header .identity {
    display: block;
    padding-left: 10px;
    font-size: 9px;
    letter-spacing: 1.5px;
    grid-column: 2;
    grid-row: 1;
  }
  header .identity span {
    font-size: 9px;
    letter-spacing: 0;
    margin-top: 5px;
  }
  .header-controls {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    margin: 0;
    min-width: 0;
    justify-content: center;
  }
  .header-controls button {
    font-size: 10px;
    min-height: 44px;
    padding: 9px 7px;
    gap: 5px;
    flex: 0 1 auto;
  }
  .header-controls button > svg {
    width: 17px;
    height: 17px;
  }
  .header-controls #tranquility {
    font-size: 10px;
    flex-shrink: 1;
  }
  .clock {
    grid-column: 4;
    grid-row: 1;
    min-width: 0;
  }
  .clock b {
    font-size: 20px;
  }
  .clock span {
    font-size: 9px;
    letter-spacing: 0;
  }
  main {
    padding: 12px;
    gap: 12px;
  }
  main.home-view .hero {
    gap: 12px;
  }
  main.home-view .welcome {
    padding: 20px;
  }
  main.home-view h1 {
    font-size: 32px;
    margin: 8px 0 10px;
  }
  .home-view .lead {
    font-size: 13px;
    line-height: 1.55;
  }
  .home-view .weather {
    padding: 18px;
  }
  .home-view .weatherline .temp {
    font-size: 46px;
  }
  .home-view .weather-art {
    width: 120px;
    height: 100px;
  }
  .home-view .grid {
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-view .tile {
    padding: 12px 16px;
  }
  .home-view .tile .icon {
    width: 28px;
    height: 28px;
    margin-bottom: 7px;
  }
  .home-view .tile .icon svg {
    width: 18px;
    height: 18px;
  }
  .home-view .tile b {
    font-size: 14px;
  }
  .home-view .tile small {
    font-size: 11px;
    line-height: 1.4;
    margin-top: 4px;
  }
  .home-view .section-head h2 {
    font-size: 16px;
  }
}
/* Preserve the original header action placement beside the clock. */
@media (min-width: 960px) and (max-width: 1200px) and (orientation: landscape) {
  .header-controls {
    justify-content: flex-end;
  }
}

@media (max-width: 959px) {
  main.home-view {
    display: flex;
    overflow-y: auto;
  }
  main.home-view .hero {
    flex: none;
    min-height: 300px;
  }
  main.home-view > .grid {
    flex: none;
    grid-auto-rows: minmax(145px, auto);
    grid-template-rows: none;
  }
  main.home-view .tile {
    min-height: 145px;
  }
}

/* Safety contents stick inside the scrolling main area, below the separate header. */
.safety-toc {
  top: 0;
  max-height: calc(
    var(--cockpit-viewport-height, 100vh) -
      var(--cockpit-header-height, 100px) - 24px
  );
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.safety-article {
  scroll-margin-top: 12px;
}
@media (max-width: 550px) {
  .safety-toc {
    position: static;
    max-height: none;
  }
}

/* Astronomical dusk/dawn and cold nocturnal variants. Daytime artwork is unchanged. */
.weather.weather-night,
.home-view .weather.weather-night {
  background:
    radial-gradient(ellipse at 85% 12%, #28476680, transparent 64%),
    linear-gradient(155deg, #101d32, #0c131f 76%);
}
.weather-night .weather-art {
  filter: drop-shadow(0 10px 12px #02081780);
}
.wx-moon {
  animation: wx-moon-float 11s ease-in-out infinite alternate;
  transform-origin: 85px 74px;
}
.weather-night .atmo-cloudbanks {
  opacity: 0.62;
  filter: drop-shadow(0 14px 16px #01081488) hue-rotate(8deg);
}
.weather-night .atmo-cloudbank {
  fill: #6283aa44;
}
.weather-night .atmo-mist {
  background: radial-gradient(ellipse, #7294bd20, transparent 68%);
}
.atmo-moon-glow {
  position: absolute;
  width: 290px;
  height: 290px;
  right: -90px;
  top: -100px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #b8d6f128,
    #6381ac0d 45%,
    transparent 68%
  );
}
.atmo-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #dcecff;
  box-shadow: 0 0 4px #b7d8f360;
  opacity: 0.55;
  animation: wx-star-twinkle var(--duration) ease-in-out infinite alternate;
  animation-delay: var(--delay);
}
.atmo-meteor {
  position: absolute;
  top: 16%;
  left: 75%;
  width: 65px;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #e3f1ff);
  transform: rotate(-32deg);
  animation: wx-meteor 23s linear infinite;
}
.meteor-two {
  top: 29%;
  left: 48%;
  width: 44px;
  animation-duration: 37s;
  animation-delay: -14s;
}
.weather-night .atmo-lightning path {
  stroke: #c1dfff;
}
.weather-night .atmo-storm-glow {
  background: radial-gradient(ellipse at 65% 15%, #90b9ed22, transparent 65%);
}
.weather.weather-cycle-sunrise,
.weather.weather-cycle-sunset,
.home-view .weather.weather-cycle-sunrise,
.home-view .weather.weather-cycle-sunset {
  background:
    linear-gradient(
      150deg,
      rgba(19, 31, 52, var(--solar-nightness)),
      transparent
    ),
    #1a1b21;
}
.atmo-solar-wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 82% 70%,
    rgba(218, 139, 94, var(--solar-glow)),
    transparent 72%
  );
}
.wx-horizon-art {
  filter: drop-shadow(0 7px 13px #cd966d14);
}
.weather .weather-solar-time {
  color: #c9b8aa;
  font-size: 11px;
  margin-top: 5px;
}
@keyframes wx-moon-float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-4px);
  }
}
@keyframes wx-star-twinkle {
  from {
    opacity: 0.23;
  }
  to {
    opacity: 0.78;
  }
}
@keyframes wx-meteor {
  0%,
  88% {
    opacity: 0;
    translate: 0 0;
  }
  89% {
    opacity: 0.7;
  }
  92% {
    opacity: 0;
    translate: -130px 85px;
  }
  100% {
    opacity: 0;
    translate: -130px 85px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .atmo-meteor {
    display: none;
  }
  .atmo-star,
  .wx-moon {
    animation: none !important;
  }
  .atmo-star {
    opacity: 0.55;
  }
}

/* Full-width solar horizon and an irregular, cool Milky Way. */
.atmo-star:nth-of-type(4n) {
  border-radius: 0;
  clip-path: polygon(
    45% 0,
    59% 38%,
    100% 49%,
    61% 60%,
    51% 100%,
    39% 63%,
    0 53%,
    37% 39%
  );
  width: calc(var(--size) * 2.3);
  height: calc(var(--size) * 3.1);
  rotate: var(--turn);
}
.atmo-milky-way {
  position: absolute;
  inset: -35% 17% -15% 18%;
  rotate: 32deg;
  opacity: 0.6;
  filter: blur(8px);
  background:
    radial-gradient(ellipse at 41% 30%, #b8d3f12b, transparent 26%),
    radial-gradient(ellipse at 55% 57%, #8b9fce39, transparent 34%),
    radial-gradient(ellipse at 44% 80%, #c2ddf32a, transparent 25%),
    linear-gradient(
      90deg,
      transparent 18%,
      #6685b11a 38%,
      #c4d5ed1f 49%,
      #29334b22 53%,
      #799bc625 61%,
      transparent 82%
    );
}
.meteor-one {
  animation-delay: -19s;
}
.weather > div.solar-panorama {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.solar-sky-clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 36% 0);
}
.solar-disc {
  position: absolute;
  left: 74%;
  top: 64%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff4c8, #f3c17c 55%, #d78c53);
  box-shadow:
    0 0 24px #efb36d66,
    0 0 65px #df98582e;
  animation: solar-rise-travel var(--solar-duration) linear both;
  animation-delay: var(--solar-delay);
}
.solar-set .solar-disc {
  background: radial-gradient(circle at 40% 35%, #ffe4ad, #ec9a65 58%, #bc655e);
  animation-name: solar-set-travel;
}
.solar-ground {
  position: absolute;
  inset: 64% 0 0;
  background: linear-gradient(#c38b5514, #101820bb 60%);
}
.solar-horizon-line {
  position: absolute;
  top: 64%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, #c7935933, #edbd8580 74%, #c7935933);
  box-shadow: 0 0 17px #e7a36644;
}
.home-view .weather.weather-cycle-sunset,
.weather.weather-cycle-sunset {
  background:
    radial-gradient(ellipse at 74% 64%, #b36e494d, transparent 65%),
    linear-gradient(165deg, #25243f, #50324d 48%, #262032);
}
.weather-cycle-sunset .atmo-solar-wash {
  background: radial-gradient(ellipse at 74% 64%, #df935148, transparent 65%);
}
.solar-set .solar-ground {
  background: linear-gradient(#a4677622, #181628bb 75%);
}
.solar-set .solar-horizon-line {
  background: linear-gradient(90deg, #a8779433, #e3a17e88 74%, #a8779433);
}
@keyframes solar-rise-travel {
  from {
    transform: translateY(var(--solar-radius, 26px));
  }
  to {
    transform: translateY(-65px);
  }
}
@keyframes solar-set-travel {
  from {
    transform: translateY(-65px);
  }
  to {
    transform: translateY(var(--solar-radius, 26px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .solar-disc {
    animation-play-state: paused;
  }
}

/* Actual sunrise starts a 15-minute rise; sunset ends a 30-minute descent. */
.home-view .weather.weather-cycle-sunrise,
.weather.weather-cycle-sunrise,
.home-view .weather.weather-cycle-sunset,
.weather.weather-cycle-sunset {
  background: linear-gradient(
    165deg,
    rgb(var(--solar-sky-top)),
    rgb(var(--solar-sky-bottom)) 75%
  );
}
.weather-cycle-sunrise .atmo-solar-wash {
  background: radial-gradient(ellipse at 74% 64%, #ffe6a34d, transparent 75%);
  opacity: calc(0.3 + var(--solar-progress) * 0.7);
}
.weather-cycle-sunset .atmo-solar-wash {
  opacity: calc(1 - var(--solar-progress));
}
.weather-cycle-sunrise .solar-ground {
  background: linear-gradient(#d9a65418, #66523855);
}
.weather-cycle-sunset .solar-horizon-line {
  opacity: calc(1 - var(--solar-progress) * 0.8);
}

/* Keep the previous animated sky alive while its successor gradually emerges. */
.weather > aside.weather-outgoing {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  z-index: 1;
  pointer-events: none;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
}
.weather-outgoing > .eyebrow,
.weather-outgoing .temp,
.weather-outgoing
  > div:last-child:not(.weatherline):not(.weather-atmosphere):not(
    .solar-panorama
  ) {
  visibility: hidden;
}
.weather-outgoing .weather-art {
  visibility: visible;
}

/* A shared icon frame and anchor: weather changes never shift the base shapes. */
.weather .weatherline > .weather-art {
  transform: none;
  width: 160px;
  height: 140px;
  flex: 0 0 160px;
}
.weather .wx-partly .wx-sun {
  transform: none;
}
.weather .wx-moon {
  transform-origin: 82px 65px;
  animation: none;
}
@media (max-width: 650px) {
  .weather .weatherline > .weather-art {
    width: 135px;
    height: 115px;
    flex-basis: 135px;
  }
}
/* The solar disc follows its horizon path; its material stays consistent. */
.solar-disc,
.solar-set .solar-disc {
  background: radial-gradient(circle at 40% 35%, #fff1d7, #e8c38e 65%, #ba8563);
}
.weather .wx-partly .wx-cloud {
  transform: none;
}

.solar-disc {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  --solar-radius: 26px;
}
@media (max-width: 650px) {
  .solar-disc {
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    --solar-radius: 22px;
  }
}
/* Shared celestial anchor above the cloud silhouette, visible in mixed skies. */
.weather-art svg {
  --celestial-offset: -30px;
}
.weather .wx-sun,
.weather .wx-partly .wx-sun,
.weather .wx-moon {
  transform: translate(-18px, var(--celestial-offset));
  transform-origin: 82px 65px;
}

/* Dawn begins as the same deep night sky, warming with the actual ascent. */
.weather-cycle-sunrise .atmo-solar-wash {
  opacity: var(--solar-progress);
}
.weather-cycle-sunrise .solar-ground {
  background:
    linear-gradient(
      rgba(12, 19, 31, calc(1 - var(--solar-progress))),
      rgba(12, 19, 31, calc(1 - var(--solar-progress)))
    ),
    linear-gradient(#d9a65418, #66523855);
}
.weather-cycle-sunrise .solar-horizon-line {
  opacity: calc(0.12 + var(--solar-progress) * 0.88);
}
/* One coordinate system for daytime icons and the moving solar disc. */
.weather {
  --wx-frame-width: 160px;
  --wx-frame-height: 140px;
  --wx-inset: 32px;
  --wx-sun-x: calc(100% - 134.75px);
  --wx-sun-y: calc(50% - 39.375px);
  --wx-sun-radius: 25.375px;
}
.weather > div.weatherline {
  position: static;
}
.weather .weatherline > .weather-art {
  position: absolute;
  right: var(--wx-inset);
  top: calc(50% - var(--wx-frame-height) / 2);
  width: var(--wx-frame-width);
  height: var(--wx-frame-height);
  transform: none;
}
.solar-disc,
.solar-set .solar-disc {
  left: var(--wx-sun-x);
  top: var(--wx-sun-y);
  width: calc(var(--wx-sun-radius) * 2);
  height: calc(var(--wx-sun-radius) * 2);
  margin: calc(var(--wx-sun-radius) * -1) 0 0 calc(var(--wx-sun-radius) * -1);
  transform: none;
  --solar-radius: var(--wx-sun-radius);
}
@keyframes solar-rise-travel {
  from {
    top: calc(64% + var(--wx-sun-radius));
    transform: none;
  }
  to {
    top: var(--wx-sun-y);
    transform: none;
  }
}
@keyframes solar-set-travel {
  from {
    top: var(--wx-sun-y);
    transform: none;
  }
  to {
    top: calc(64% + var(--wx-sun-radius));
    transform: none;
  }
}
@media (max-width: 650px) {
  .weather {
    --wx-frame-width: 135px;
    --wx-frame-height: 115px;
    --wx-inset: 18px;
    --wx-sun-x: calc(100% - 104.1875px);
    --wx-sun-y: calc(50% - 32.34375px);
    --wx-sun-radius: 20.84375px;
  }
}
/* Clear daytime sky only: preserve the material sun and atmospheric rays. */
.weather[data-sky='day:clear'],
.home-view .weather[data-sky='day:clear'] {
  background:
    radial-gradient(ellipse at 70% 30%, #a9d6ec, transparent 68%),
    linear-gradient(160deg, #689fc6, #467ca5 75%);
}
.weather[data-sky='day:clear'] > .eyebrow {
  color: #e7d8d2;
}
.weather[data-sky='day:clear'] > .weather-atmosphere:after {
  background: linear-gradient(0deg, #1225378c, transparent 45%, #254b6410);
}
.weather[data-sky='day:clear'] .temp,
.weather[data-sky='day:clear'] > div:last-child {
  text-shadow: 0 1px 4px #17354d88;
}

/* Daytime rain uses the covered sky's cloud geometry, gradients and motion. */
.weather[data-sky='day:rain'] .atmo-cloudbanks {
  opacity: 0.9;
  filter: brightness(0.65) drop-shadow(0 15px 14px #0005);
}
.weather[data-sky='day:snow'],
.home-view .weather[data-sky='day:snow'] {
  background:
    radial-gradient(ellipse at 75% 20%, #3b4658, transparent 75%),
    linear-gradient(155deg, #202b3a, #151c27);
}
.weather[data-sky='day:rain'] .atmo-mist {
  background: radial-gradient(ellipse, #8597af14, transparent 70%);
}
/* Nocturnal storm: deeper clouds with white lightning and a pale yellow halo. */
.weather[data-sky='night:storm'] .atmo-cloudbank {
  fill: #24324799;
}
.weather[data-sky='night:storm'] .atmo-cloudbanks {
  opacity: 0.7;
  filter: brightness(0.65) drop-shadow(0 14px 16px #010610aa);
}
.weather[data-sky='night:storm'] .wx-cloud {
  filter: brightness(0.56);
}
.weather[data-sky='night:storm'] .atmo-lightning {
  opacity: 1;
}
.weather[data-sky='night:storm'] .atmo-lightning path {
  stroke: #fff4be;
}
.weather[data-sky='night:storm'] .atmo-strike {
  filter: drop-shadow(0 0 2px #fffef5) drop-shadow(0 0 7px #ffe59d99);
}
.weather[data-sky='night:storm'] .atmo-strike .branch {
  stroke: #fffef1;
  opacity: 0.85;
}
.weather[data-sky='night:storm'] .wx-bolt {
  filter: drop-shadow(0 0 3px #fff9cf) drop-shadow(0 0 8px #f7d77b80);
}
.weather[data-sky='night:storm'] .wx-bolt path:nth-child(1) {
  stroke: #f3d77d;
}
.weather[data-sky='night:storm'] .wx-bolt path:nth-child(2) {
  stroke: #fff2b1;
}
.weather[data-sky='night:storm'] .wx-bolt path:nth-child(3) {
  stroke: #fffef4;
}
.weather[data-sky='night:storm'] .wx-bolt path:nth-child(4) {
  stroke: #ffe7a1;
}
.weather[data-sky='night:storm'] .atmo-storm-glow {
  background: radial-gradient(ellipse at 65% 15%, #fff0b62c, transparent 70%);
}

/* Daytime storm shares the white/yellow lightning treatment. */
.weather[data-sky='day:storm'] .atmo-lightning {
  opacity: 1;
}
.weather[data-sky='day:storm'] .atmo-lightning path {
  stroke: #fff4be;
}
.weather[data-sky='day:storm'] .atmo-strike {
  filter: drop-shadow(0 0 2px #fffef5) drop-shadow(0 0 7px #ffe59d99);
}
.weather[data-sky='day:storm'] .atmo-strike .branch {
  stroke: #fffef1;
  opacity: 0.85;
}
.weather[data-sky='day:storm'] .wx-bolt {
  filter: drop-shadow(0 0 3px #fff9cf) drop-shadow(0 0 8px #f7d77b80);
}
.weather[data-sky='day:storm'] .wx-bolt path:nth-child(1) {
  stroke: #f3d77d;
}
.weather[data-sky='day:storm'] .wx-bolt path:nth-child(2) {
  stroke: #fff2b1;
}
.weather[data-sky='day:storm'] .wx-bolt path:nth-child(3) {
  stroke: #fffef4;
}
.weather[data-sky='day:storm'] .wx-bolt path:nth-child(4) {
  stroke: #ffe7a1;
}
.weather[data-sky='day:storm'] .atmo-storm-glow {
  background: radial-gradient(ellipse at 65% 15%, #fff0b62c, transparent 70%);
}
/* Sunny intervals: muted blue openings, softer than the clear daytime sky. */
.weather[data-sky='day:partly'],
.home-view .weather[data-sky='day:partly'] {
  background:
    radial-gradient(ellipse at 72% 23%, #789eaf99, transparent 64%),
    linear-gradient(155deg, #3c5b73, #263d52 78%);
}
.weather[data-sky='day:partly'] > .weather-atmosphere {
  background: radial-gradient(ellipse at 74% 24%, #cbd8d51c, transparent 65%);
}
.weather[data-sky='day:partly'] > .weather-atmosphere:after {
  background: linear-gradient(0deg, #1323308c, transparent 48%, #30475716);
}
.weather[data-sky='day:partly'] .atmo-cloudbanks {
  opacity: 0.72;
  filter: drop-shadow(0 9px 10px #12233155);
}

/* Legal notice: Montserrat titles, Inter paragraphs, without coloured body runs. */
.page:has(.safety-title-row) h1,
.safety-article h2,
.safety-article h3 {
  font-family: Montserrat, sans-serif;
  color: #8c1d18;
}
.safety-article p,
.safety-article li,
.safety-article strong {
  font-family: Inter, sans-serif;
  color: #fff;
}

/* Shared heading typography; controls and paragraph content retain Inter. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Montserrat, sans-serif;
}