@font-face {
  font-family: 'Acid';
  src: url('fonts/acid.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Acid';
  src: url('fonts/acid_medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Acid';
  src: url('fonts/acid_bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* sampled directly from the reference artwork */
  --blue: #2250A5;          /* core field blue + giant type */
  --blue-brand: #0050A3;    /* PENA logo blue */
  --blue-step1: #2657AB;
  --blue-step2: #497CC3;
  --blue-step3: #7AA5D7;
  --blue-step4: #C9DDF0;
  --blue-low1: #2158AD;
  --blue-low2: #326EBC;
  --blue-low3: #4E86C8;
  --blue-low4: #6A9BD2;
  --blue-low5: #A9C8E6;
  --blue-low6: #E6EFF8;
  --white: #FFFFFF;
  --canvas: #E9EDF4;

  --font-display: 'Acid', 'Segoe UI', sans-serif;
  --font-script: 'Dancing Script', cursive;

  /* page geometry — a shade wider than A4 so the copy stays readable */
  --page-w: 1080px;
  --inset: 7.3%;
  /* white space either side of the sheet */
  --gutter: max(0px, calc((100vw - var(--page-w)) / 2));
  /* the sheet's rendered width — every type size is a fraction of this,
     so the comp's proportions hold at any viewport */
  --u: min(100vw, var(--page-w));
}

* { box-sizing: border-box; }
html { color-scheme: light; }

body {
  margin: 0;
  color: var(--blue);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* studio backdrop the sheet sits on: a cool wash, lit from behind the top
     of the page, echoing the bloom inside the artwork itself */
  background:
    radial-gradient(ellipse 90% 55% at 50% 6%,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.45) 42%,
      rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 70% 45% at 50% 100%,
      rgba(34, 80, 165, 0.16) 0%,
      rgba(34, 80, 165, 0) 65%),
    linear-gradient(180deg, #EEF2F9 0%, #E1E8F4 45%, #CFDAEC 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2 { margin: 0; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- A4 page frame ---------- */

.page {
  max-width: var(--page-w);
  margin: 0 auto;
  background: var(--white);
  box-shadow:
    0 0 0 1px rgba(34, 80, 165, 0.07),
    0 2px 6px rgba(20, 45, 100, 0.06),
    0 40px 90px -35px rgba(20, 45, 100, 0.38);
  overflow: hidden;
}

.wrap {
  padding-inline: var(--inset);
}

/* ---------- header, laid over the gradient ---------- */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 2.4%;
}

.brand { display: block; text-decoration: none; }
.brand-mark { width: calc(var(--u) * 0.049); height: calc(var(--u) * 0.049); min-width: 30px; min-height: 30px; }

.nav-toggle {
  background: none;
  border: none;
  color: var(--blue-brand);
  cursor: pointer;
  padding: 0.3rem;
  line-height: 0;
}

/* ---------- slide-in menu, from the right ---------- */

.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 28, 66, 0.42);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 50;
}
.nav-scrim.is-open { opacity: 1; }

.nav-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(400px, 84vw);
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 2rem 2rem;
  background: linear-gradient(180deg, #2A5CB4 0%, var(--blue) 46%, #1C4590 100%);
  box-shadow: -24px 0 60px -30px rgba(10, 28, 66, 0.65);
  overflow-y: auto;
  /* parked fully off the right edge of the viewport */
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.5s;
}
/* slides in and comes to rest flush with the right edge of the sheet */
.nav-drawer.is-open {
  transform: translateX(calc(-1 * var(--gutter)));
  visibility: visible;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

.nav-drawer-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2.6rem;
}
.nav-close {
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 0.35rem;
  line-height: 0;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.nav-close:hover { opacity: 1; }

/* on the blue drawer the focus ring has to be light, not blue-on-blue */
.nav-drawer :focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 4px;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.nav-list li {
  opacity: 0;
  transform: translateX(14px);
}
.nav-drawer.is-open .nav-list li {
  animation: nav-item-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.nav-drawer.is-open .nav-list li:nth-child(1) { animation-delay: 0.10s; }
.nav-drawer.is-open .nav-list li:nth-child(2) { animation-delay: 0.16s; }
.nav-drawer.is-open .nav-list li:nth-child(3) { animation-delay: 0.22s; }
.nav-drawer.is-open .nav-list li:nth-child(4) { animation-delay: 0.28s; }
.nav-drawer.is-open .nav-list li:nth-child(5) { animation-delay: 0.34s; }
.nav-drawer.is-open .nav-list li:nth-child(6) { animation-delay: 0.40s; }

@keyframes nav-item-in {
  to { opacity: 1; transform: translateX(0); }
}

.nav-list a {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: max(18px, calc(var(--u) * 0.029));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  padding-block: 0.7rem;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-list a:hover { transform: translateX(6px); opacity: 0.82; }

.nav-drawer-foot {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.nav-tagline {
  margin: 0 0 1.1rem;
  font-size: max(11px, calc(var(--u) * 0.0125));
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.nav-social { display: flex; gap: 0.55rem; }
.nav-social a {
  width: max(26px, calc(var(--u) * 0.030));
  height: max(26px, calc(var(--u) * 0.030));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  color: var(--white);
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-social a:hover { background: var(--white); color: var(--blue); }

/* ---------- the gradient field ---------- */

/* the sheet starts blank so the script can be written on it in blue ink;
   the gradient washes in afterwards (see the load sequence at the end) */
.field {
  position: relative;
  background: var(--white);
}
.field::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    /* soft white bloom in the upper right, as in the comp */
    radial-gradient(ellipse 68% 26% at 74% 1%,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.62) 34%,
      rgba(255,255,255,0.22) 56%,
      rgba(255,255,255,0) 74%),
    /* the vertical field, sampled down the left edge of the comp */
    linear-gradient(180deg,
      var(--white)      0%,
      var(--blue-step4) 3.5%,
      var(--blue-step3) 8%,
      var(--blue-step2) 13%,
      var(--blue-step1) 19%,
      var(--blue)       26%,
      var(--blue)       50%,
      var(--blue-low1)  57%,
      var(--blue-low2)  63%,
      var(--blue-low3)  67.5%,
      var(--blue-low4)  73%,
      var(--blue-low5)  81%,
      var(--blue-low6)  84%,
      var(--white)      93%,
      var(--white)      100%);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  z-index: 1;
  padding-top: 15%;
  overflow: hidden;
}

/* outlined script lettering */
.hero-script {
  position: relative;
  z-index: 0;
  pointer-events: none;
  margin-left: 8%;
  line-height: 0.78;
}
.hero-script span {
  display: block;
  font-family: var(--font-script);
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--blue);
  text-stroke: 1.4px var(--blue);
  white-space: nowrap;
}
.hero-script .s-between { font-size: calc(var(--u) * 0.150); }
.hero-script .s-lines {
  font-size: calc(var(--u) * 0.200);
  margin-left: 18%;
  margin-top: -0.36em;
}

.hero-tagline {
  position: relative;
  z-index: 1;
  margin-top: -1%;
  padding-left: 48%;
  padding-right: var(--inset);
}
.hero-tagline h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: max(19px, calc(var(--u) * 0.0315));
  line-height: 1.34;
  color: var(--white);
}

.hero-dots {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 5%;
}
.hero-dots span {
  width: max(7px, calc(var(--u) * 0.0088));
  height: max(7px, calc(var(--u) * 0.0088));
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
}
.hero-dots span:first-child { background: var(--white); }

/* ---------- QUESTION / DISCOVER ---------- */

.blocks {
  position: relative;
  z-index: 1;
  padding-top: 7%;
  padding-bottom: 6%;
}
.blocks-inner {
  padding-left: 10.5%;
  padding-right: 15.8%;
}
.blocks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 620px) {
  .blocks-grid {
    grid-template-columns: 40% 40%;
    gap: 20%;
  }
  .block--discover { margin-top: 18%; }
}

.block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.block-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: max(18px, calc(var(--u) * 0.029));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
.block-arrow {
  flex: none;
  width: max(24px, calc(var(--u) * 0.032));
  height: max(24px, calc(var(--u) * 0.032));
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-decoration: none;
  font-size: 0.7rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.block-arrow:hover { background: var(--white); color: var(--blue); }

.block-kicker {
  display: block;
  font-size: max(12px, calc(var(--u) * 0.0138));
  font-weight: 400;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.block-body {
  font-size: max(13px, calc(var(--u) * 0.0150));
  line-height: 1.62;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.92);
  text-align: justify;
  margin: 0;
}

/* ---------- pull quote ---------- */

.pullquote {
  position: relative;
  z-index: 1;
  padding-top: 6%;
  padding-bottom: 5%;
  padding-left: 10.5%;
  padding-right: 30%;
}
.pullquote .quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: max(19px, calc(var(--u) * 0.0305));
  line-height: 1.32;
  color: var(--white);
  margin: 0;
}
.pullquote .attribution {
  margin-top: 1rem;
  font-size: max(12px, calc(var(--u) * 0.0138));
  line-height: 1.5;
  color: var(--white);
}

/* ---------- giant type with the photo on top ---------- */

.showcase {
  position: relative;
  z-index: 1;
  padding-top: 4%;
  padding-bottom: 3%;
}

.showcase-stack { position: relative; }

.giant-line {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 0.26);
  line-height: 1.19;
  color: var(--blue);
  white-space: nowrap;
  text-align: center;
  letter-spacing: -0.005em;
}
.photo-frame {
  position: absolute;
  top: 49%;
  left: 51.5%;
  transform: translate(-50%, -50%);
  width: 36%;
  z-index: 2;
}
.photo-frame figure { margin: 0; }
.photo-frame img {
  width: 100%;
  height: auto;
  display: block;
  /* the comp crops the frame slightly taller than the source file */
  aspect-ratio: 392 / 599;
  object-fit: cover;
  object-position: 50% 30%;
}

.read-more {
  position: absolute;
  top: 4%;
  left: 107%;
  background: transparent;
  border: 1px solid var(--blue);
  color: var(--blue);
  font-family: var(--font-display);
  font-size: max(10px, calc(var(--u) * 0.0113));
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.read-more:hover { background: var(--blue); color: var(--white); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--white);
  padding-block: 1.4rem 1.8rem;
}
.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-social { display: flex; gap: 0.55rem; }
.footer-social a {
  width: max(26px, calc(var(--u) * 0.032));
  height: max(26px, calc(var(--u) * 0.032));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--blue);
  border-radius: 50%;
  color: var(--blue);
  transition: background 0.15s ease, color 0.15s ease;
}
.footer-social a:hover { background: var(--blue); color: var(--white); }
.footer-copy { font-size: max(13px, calc(var(--u) * 0.0150)); color: var(--blue); }

/* ---------- page-load sequence ---------- */

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes soft-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* the script is outlined lettering, so it reads best written on, left to right */
@keyframes write-on {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 -6% 0 0); }
}

/* the blue ink settles into the white outline once the field floods in */
@keyframes ink-to-outline {
  from { -webkit-text-stroke-color: var(--blue); }
  to   { -webkit-text-stroke-color: rgba(255, 255, 255, 0.55); }
}

/* --- the sequence, start to finish in 4.3s ---
   0.00  blank sheet fades up
   0.35  the script is written on, in blue, on white — nothing else on the page
   2.35  the blue field floods in and the ink turns to the white outline
   2.75  masthead, then the hero copy, then the rest of the page          */

.page      { animation: sheet-in 0.45s ease both; }
.field::before { animation: soft-in 1.00s ease 2.35s both; }

.hero-script      { animation: write-on 2.00s cubic-bezier(0.42, 0.36, 0.30, 1) 0.35s both; }
.hero-script span { animation: ink-to-outline 0.85s ease 2.45s both; }

.site-header .brand,
.site-header .nav-toggle { animation: soft-in 0.60s ease 2.75s both; }

.hero-tagline { animation: rise-in 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 2.95s both; }
.hero-dots    { animation: soft-in 0.60s ease 3.20s both; }

.blocks       { animation: rise-in 0.80s cubic-bezier(0.22, 0.61, 0.36, 1) 3.00s both; }
.pullquote    { animation: rise-in 0.80s cubic-bezier(0.22, 0.61, 0.36, 1) 3.20s both; }
.showcase     { animation: rise-in 0.80s cubic-bezier(0.22, 0.61, 0.36, 1) 3.40s both; }
.site-footer  { animation: soft-in 0.70s ease 3.60s both; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .nav-drawer { transition: none; }
  .nav-scrim { transition: none; }
  .nav-drawer.is-open .nav-list li { animation: none; opacity: 1; transform: none; }
  .page,
  .field::before,
  .hero-script,
  .hero-script span,
  .site-header .brand,
  .site-header .nav-toggle,
  .hero-tagline,
  .hero-dots,
  .blocks,
  .pullquote,
  .showcase,
  .site-footer { animation: none; }
  /* without the sequence the script has to start at its resting colour */
  .hero-script span {
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.55);
    text-stroke-color: rgba(255, 255, 255, 0.55);
  }
}