/* CETAF temporary information page. */

@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/roboto-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #003254;
  --navy-900: #00213a;
  --orange: #f96c31;
  --mist: #eef2f6;
  --line: #d5dde5;
  --ink: #16232e;
  --slate: #56636f;
  --wrap: 76rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--navy); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* Two-column grid used by the content sections: heading left, text right. */
.grid { display: grid; gap: 1.25rem 4rem; }
.grid > h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); font-weight: 700; color: var(--navy); }

/* Notice bar: this page is temporary. */
.topbar { background: var(--navy-900); color: rgba(255, 255, 255, .78); font-size: .875rem; line-height: 1.45; }
.topbar p { padding-block: .5rem; }
.topbar strong { color: #fff; font-weight: 500; }

/* Masthead */
.masthead { background: #fff; }
.masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .875rem; }
.logo img { width: 120px; }
.masthead nav { display: flex; gap: 1.75rem; }
.masthead nav a { font-size: 1rem; font-weight: 500; text-decoration: none; padding-block: .375rem; border-bottom: 2px solid transparent; }
.masthead nav a:hover { border-bottom-color: var(--orange); }

/* Hero: museum photo with a navy shade for the text. */
.hero {
  position: relative;
  display: grid;
  min-height: clamp(30rem, 78vh, 46rem);
  color: #fff;
  background: var(--navy-900);
  isolation: isolate;
}
.hero picture { position: absolute; inset: 0; z-index: -2; }
.hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 33, 58, .94) 0%, rgba(0, 33, 58, .82) 38%, rgba(0, 33, 58, .25) 78%, rgba(0, 33, 58, .1) 100%);
}
.hero-content { align-self: center; padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem); }
.hero h1 {
  max-width: 19ch;
  font-size: clamp(2.25rem, 1.3rem + 4vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
}
.hero h1::after { content: ""; display: block; width: 4rem; height: 4px; margin-top: 1.75rem; background: var(--orange); }
.lead { max-width: 36rem; margin-top: 1.5rem; font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); font-weight: 300; line-height: 1.5; color: rgba(255, 255, 255, .9); }

/* Key figures, written as one statement. */
.statement { padding-block: clamp(3.5rem, 8vw, 6.5rem); border-bottom: 1px solid var(--line); }
.statement p {
  max-width: 54rem;
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.625rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--navy);
}
.statement strong { font-weight: 700; }

/* About */
.about { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.about-text { max-width: 42rem; color: var(--ink); }
.about-text p:first-child { font-size: 1.1875rem; }

/* DEST */
.dest { background: var(--navy); color: rgba(255, 255, 255, .88); padding-block: clamp(3rem, 6vw, 4.5rem); }
.dest .grid > h2 { color: #fff; }
.dest p { max-width: 38rem; }
.button {
  display: inline-block;
  margin-top: .5rem;
  padding: .8rem 1.4rem;
  border-radius: 2px;
  background: #fff;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}
.button:hover { background: var(--orange); color: var(--navy-900); }

/* Contact */
.contact { background: var(--mist); padding-block: clamp(3.5rem, 7vw, 5rem); }
.contact h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); font-weight: 700; color: var(--navy); }
.contact-grid { display: grid; gap: 2rem; margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.contact h3 { margin-bottom: .5rem; font-size: 1rem; font-weight: 500; color: var(--slate); letter-spacing: 0; }
.contact address { font-style: normal; }
.mail { font-size: 1.25rem; font-weight: 500; }
.links { list-style: none; margin: 0; padding: 0; }
.links li + li { margin-top: .25rem; }

/* Footer */
.footer { background: var(--navy-900); color: rgba(255, 255, 255, .72); font-size: .9375rem; }
.footer-inner { display: grid; gap: .375rem; padding-block: 1.75rem; }
.footer p { margin: 0; }

@media (min-width: 52rem) {
  .grid { grid-template-columns: 4fr 8fr; }
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
  .logo img { width: 140px; }
}

/* Narrow screens: the photo shows at the top, the text sits on navy below it. */
@media (max-width: 51.99rem) {
  .hero { min-height: 0; }
  .hero picture { bottom: auto; height: clamp(14rem, 62vw, 22rem); }
  .hero-photo { object-position: 72% 50%; }
  .hero::before { background: linear-gradient(180deg, rgba(0, 33, 58, .1) 0, rgba(0, 33, 58, .35) clamp(8rem, 40vw, 14rem), var(--navy-900) clamp(14rem, 62vw, 22rem)); }
  .hero-content { padding-top: clamp(11rem, 52vw, 18rem); padding-bottom: 2.5rem; }
}