/* Maveriq starter site
   Layout follows the Figma frames (Website. Clean / Website About): the 1870px-wide
   panel fills the browser window. On wide screens every size is a multiple of --px
   (one Figma pixel, scaled to the window width). */

@font-face {
  font-family: "Craw Modern";
  src: url("../fonts/CrawModern-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Body type. "acumin-pro" is the Adobe Fonts family name: once the Adobe Fonts
     kit <link> is added to each page it takes over automatically, and Archivo
     (the free stand-in loaded from Google Fonts) stops being used. */
  --font-body: "acumin-pro", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Craw Modern", Georgia, serif;

  --stone: #d8d5ce;        /* panel background */
  --stone-deep: #b7b2a6;   /* stone multiplied by itself: lower band on the home page */
  --ember: #e57650;        /* multiplied over the home page top bar */
  --ink: #000;
  --paper: #fff;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

::selection { background: #e6d6b8; color: var(--ink); }   /* warm stone highlight */

a { color: inherit; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--paper);
  z-index: 10;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Panel (shared) ---------- */

.panel {
  container-type: inline-size;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;                        /* fill the browser window */
  display: flex;
  flex-direction: column;
  background: var(--stone);
  overflow: hidden;
  isolation: isolate;
}

.stage {
  --px: calc(100cqw / 1870);
  position: relative;
  flex: 1 0 auto;
  min-height: calc(982 * var(--px));
  display: flex;
  flex-direction: column;
}

.gold-strip { flex: none; }

.gold-strip {
  position: relative;
  overflow: hidden;
  height: calc(59 * 100cqw / 1870);
  background: #c9a032 url("../img/gold-strip.jpg") center top / cover no-repeat;
}

.topbar {
  position: relative;
  height: calc(57 * var(--px));
  flex: none;
  z-index: 2;
  mix-blend-mode: multiply;   /* the bar multiplies onto the stone panel, as in Figma */
}
.topbar::before,
.topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
}
.topbar::before { background: linear-gradient(90deg, #000, var(--stone)); }
.topbar--ember::after { background: var(--ember); }

.wordmark img { width: 100%; height: auto; }

/* ---------- Home ---------- */

.home .nav-about {
  position: absolute;
  top: calc(83 * var(--px));
  right: calc(57 * var(--px));
  font-weight: 500;
  font-size: max(calc(24 * var(--px)), 14px);
  line-height: 1.1;
  letter-spacing: -0.0075em;
  text-decoration: none;
  z-index: 3;
}
.home .nav-about {
  padding-bottom: 0.15em;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
}
.home .nav-about:hover,
.home .nav-about:focus-visible { background-size: 100% 1px; }

.home .intro {
  padding-left: calc(234 * var(--px));
  padding-right: calc(80 * var(--px));
  padding-bottom: calc(48 * var(--px));
}

.home .wordmark {
  display: block;
  width: calc(560 * var(--px));
  margin-top: calc(93 * var(--px));
}

.home h1 {
  margin: calc(62 * var(--px)) 0 0;
  max-width: calc(703 * var(--px));
  font-weight: 200;
  font-size: max(calc(60 * var(--px)), 28px);
  line-height: 0.95;
  letter-spacing: -0.0075em;
}
.home h1 span { display: block; }
.home h1 { text-wrap: balance; }

.home .lede {
  margin-top: calc(61 * var(--px));
  max-width: max(calc(496 * var(--px)), 300px);
  font-size: max(calc(28 * var(--px)), 15px);
  line-height: 1.2;
  letter-spacing: -0.0075em;
}
.home .lede p { margin: 0; text-wrap: pretty; }
.home .lede p + p { margin-top: 1.2em; }

.home .band {
  margin-top: auto;
  height: calc(317 * var(--px));
  flex: none;
  display: flex;
  padding-left: calc(234 * var(--px));
  background: var(--stone-deep);
}

.home .band figure {
  position: relative;
  margin: 0;
  height: 100%;
  overflow: hidden;
}
.home .band .photo-dome { width: calc(706 * var(--px)); }

/* Crop copied from the Figma frame */
.home .photo-dome img {
  position: absolute;
  width: 115.51%;
  height: 171.38%;
  left: -3.47%;
  top: -66.8%;
  max-width: none;
}

/* Inquiries block in the band, styled like the About heading and rule */
.home .inquiries {
  align-self: center;
  margin-left: calc(120 * var(--px));
  width: calc(420 * var(--px));
}
.home .inquiries h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: max(calc(30 * var(--px)), 20px);
  line-height: 0.95;
  letter-spacing: -0.0075em;
}
.home .inquiries hr {
  height: 0;
  margin: calc(30 * var(--px)) 0 calc(20 * var(--px));
  border: 0;
  border-top: 1px solid var(--ink);
}
.home .inquiries p {
  margin: 0 0 0.7em;
  font-size: max(calc(22 * var(--px)), 14px);
  line-height: 1.25;
}
.home .inquiries a {
  font-size: max(calc(22 * var(--px)), 14px);
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 0.12em;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
}
/* Regulatory disclosure link, set apart from the contact address */
.home .inquiries .crs { margin: max(calc(40 * var(--px)), 24px) 0 0; }

/* ---------- About ---------- */

.about .topbar { position: absolute; inset: 0 0 auto 0; z-index: 3; }

.about .columns {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: calc(936 * var(--px)) 1fr;
}

.about .hero {
  position: relative;
  overflow: hidden;
}
.about .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(216, 213, 206, 0.6));
  mix-blend-mode: multiply;
}

.about .hero .wordmark {
  position: absolute;
  left: calc(122 * var(--px));
  top: calc(446 * var(--px));
  width: calc(716 * var(--px));
  z-index: 1;
}

.about .copy {
  position: relative;
  padding: calc(429 * var(--px)) calc(80 * var(--px)) calc(80 * var(--px)) calc(121 * var(--px));
  z-index: 1;
}

.about h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: max(calc(30 * var(--px)), 22px);
  line-height: 0.95;
  letter-spacing: -0.0075em;
}

.about .rule {
  width: calc(685 * var(--px));
  max-width: 100%;
  height: 0;
  margin: calc(37 * var(--px)) 0 0 calc(2 * var(--px));
  border: 0;
  border-top: 1px solid var(--ink);
}

.about .copy-text {
  max-width: calc(685 * var(--px));
  margin-left: calc(2 * var(--px));
  margin-top: calc(22 * var(--px));
  font-weight: 400;
  font-size: max(calc(24 * var(--px)), 15px);
  line-height: 1.2;
  letter-spacing: -0.0075em;
}
.about .copy-text p { margin: 0; text-wrap: pretty; }
.about .copy-text p + p { margin-top: 1.2em; }

.home-link { display: block; text-decoration: none; }
.home-link:focus-visible { outline: 2px solid var(--paper); outline-offset: 6px; }

/* ---------- Small screens: stack the layout ---------- */

@media (max-width: 760px) {
  .stage { --px: 1px; min-height: 0; }
  .topbar { height: 28px; }
  .gold-strip { height: 28px; }

  .home .nav-about { top: 44px; right: 20px; font-size: 16px; }
  .home .intro { padding: 0 20px 40px; }
  .home .wordmark { width: min(260px, 70%); margin-top: 72px; }
  .home h1 { margin-top: 36px; font-size: 32px; max-width: none; }
  .home .lede { margin-top: 28px; font-size: 17px; max-width: 32em; }
  .home .band { height: auto; padding: 0; display: block; }
  .home .band .photo-dome { width: auto; aspect-ratio: 706 / 317; }
  .home .photo-dome img { width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; object-position: 50% 62%; }
  .home .inquiries { grid-column: 1 / -1; width: auto; margin: 0; padding: 32px 20px 36px; }
  .home .inquiries hr { margin: 18px 0 14px; }
  .home .inquiries h2 { font-size: 18px; letter-spacing: 0.06em; }
  .home .inquiries p, .home .inquiries a { font-size: 16px; }

  .about .columns { display: block; }
  .about .hero { height: min(52vh, 340px); }
  .about .hero .wordmark { left: 20px; right: 20px; top: auto; bottom: 32px; width: auto; max-width: 340px; }
  .about .copy { padding: 48px 20px 48px; }
  .about h1 { font-size: 24px; }
  .about .rule { width: 100%; margin: 20px 0 0; }
  .about .copy-text { max-width: none; margin: 18px 0 0; font-size: 17px; }
}

/* ---------- Motion ---------- */
/* Everything below only runs for visitors who haven't asked for reduced motion. */

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes draw-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

@media (prefers-reduced-motion: no-preference) {
  /* Cross-fade between pages (browsers without support just switch pages) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.6s; }

  /* Home: text rises in, a beat apart, then the photos fade up */
  .home .wordmark,
  .home h1,
  .home .lede,
  .home .nav-about { animation: rise-in 1s cubic-bezier(.2, .7, .2, 1) both; }
  .home .wordmark { animation-delay: 0.1s; }
  .home h1 { animation-delay: 0.3s; }
  .home .lede { animation-delay: 0.5s; }
  .home .nav-about { animation-name: fade-in; animation-delay: 0.7s; }
  .home .band figure { animation: fade-in 1.2s ease-out both; }
  .home .band .photo-dome { animation-delay: 0.8s; }
  .home .inquiries { animation: rise-in 1s cubic-bezier(.2, .7, .2, 1) 1.3s both; }
  .home .inquiries a { transition: opacity 0.3s ease; }
  .home .inquiries a:hover { opacity: 0.6; }

  /* About: the shaded panel fades up, heading and copy rise, the rule draws across */
  .about .hero::after { animation: fade-in 1.2s ease-out 0.3s both; }
  .about h1,
  .about .copy-text { animation: rise-in 1s cubic-bezier(.2, .7, .2, 1) both; }
  .about h1 { animation-delay: 0.4s; }
  .about .copy-text { animation-delay: 0.8s; }
  .about .rule { transform-origin: left; animation: draw-in 0.9s cubic-bezier(.6, 0, .2, 1) 0.6s both; }

  /* Quiet hovers */
  .home .band img { transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
  .home .band figure:hover img { transform: scale(1.03); }
  .home .nav-about { transition: background-size 0.45s cubic-bezier(.6, 0, .2, 1); }
  .home-link img { transition: opacity 0.3s ease; }
  .home-link:hover img { opacity: 0.85; }

  /* One soft pass of light across the gold strip */
  .gold-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 35%, rgba(255, 250, 230, 0.45) 50%, transparent 65%);
    mix-blend-mode: soft-light;
    transform: translateX(-100%);
    animation: shimmer 2.6s ease-in-out 1.6s both;
  }
}