/* =========================================================
   U001 FONT FAMILY
   ========================================================= */


/* ---------- normal width ---------- */

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

@font-face {
  font-family: "U001";
  src: url("./assets/fonts/U001-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: "U001";
  src: url("./assets/fonts/U001-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
}

@font-face {
  font-family: "U001";
  src: url("./assets/fonts/U001-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-stretch: normal;
  font-display: swap;
}


/* ---------- condensed ---------- */

@font-face {
  font-family: "U001";
  src: url("./assets/fonts/U001-Condensed.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}

@font-face {
  font-family: "U001";
  src: url("./assets/fonts/U001-CondensedItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-stretch: condensed;
  font-display: swap;
}

@font-face {
  font-family: "U001";
  src: url("./assets/fonts/U001-CondensedBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}

@font-face {
  font-family: "U001";
  src: url("./assets/fonts/U001-CondensedBoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-stretch: condensed;
  font-display: swap;
}



/* =========================================================
   SITE VARIABLES
   ========================================================= */

:root {

  /* Main page background */
  --page-bg: #F5F5F5;


  /* Link foreground colors */
  --red: #DA2428;
  --blue: #2C4297;


  /*
    MANUALLY CHOSEN BAND COLORS.

    Change these two whenever you like.
  */
  --red-bg: #F4DEDE;
  --blue-bg: #EAE1CE;


  /*
    Large-link typography.

    Roughly 32px minimum → 56px maximum.
  */
  --link-font-size:
    clamp(2rem, 1.25rem + 3vw, 3.5rem);


  /*
    Small SVG dimensions.

    Since height:auto is used below,
    non-square SVGs retain their own aspect ratios.
  */
  --link-art-size:
    clamp(5.5rem, 12vw, 9.5rem);


  /*
    Vertical whitespace within each colored band.
  */
  --band-padding-y:
    clamp(2.25rem, 5vw, 4.5rem);


  /* Horizontal protection on narrow devices */
  --band-padding-x:
    clamp(1rem, 4vw, 3rem);


  /* Distance between little SVG and link text */
  --art-label-gap:
    clamp(0.65rem, 1.5vw, 1.1rem);
}



/* =========================================================
   BASIC PAGE
   ========================================================= */

html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  min-height: 100%;

  background: var(--page-bg);

  font-family:
    "U001",
    Arial,
    sans-serif;

  font-weight: 400;
  font-style: normal;
}


body {
  overflow-x: hidden;
}


main {
  width: 100%;
  margin: 0;
  padding: 0;
}



/* =========================================================
   ACCESSIBILITY
   ========================================================= */


/*
  The gsl.mn <h1> exists structurally,
  but is invisible on screen.
*/

.visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);

  white-space: nowrap;

  border: 0;
}



/*
  Keyboard-accessible skip link.
  Invisible until focused.
*/

.skip-link {
  position: absolute;

  left: -9999px;
  top: auto;

  z-index: 1000;

  padding: 0.75rem 1rem;

  background: #000;
  color: #fff;
}


.skip-link:focus {
  left: 1rem;
  top: 1rem;
}



/* =========================================================
   LARGE HERO SVG
   ========================================================= */

.hero {
  position: relative;

  width: 100%;

  /*
    Height responds to viewport size.

    Change 72vh if you want the hero
    larger or smaller vertically.
  */
  height: clamp(30rem, 85vh, 65rem);

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;

  background: var(--page-bg);
}



.hero__art {
  display: block;
  width: 100%;
  height: 100%;

  max-height: 72vh;

  object-fit: contain;
  object-position: center;
}



/*
  Invisible clickable area at the center
  of the large SVG.

  Because the SVG is loaded through <img>,
  an HTML overlay is the robust way to
  create an independent hyperlink.
*/

.hero__center-link {
  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  /*
    Dimensions of clickable central region.
    Adjust these if desired.
  */
  width: min(30vw, 20rem);
  height: min(22vh, 12rem);

  z-index: 2;

  /*
    Deliberately invisible.
  */
  background: transparent;

  text-decoration: none;
}



/*
  Give keyboard users a visible indication
  of the otherwise invisible link.
*/

.hero__center-link:focus-visible {
  outline: 2px solid #111;
  outline-offset: 4px;
}



/* =========================================================
   PORTRAIT / MOBILE HERO BEHAVIOR
   ========================================================= */


/*
  On sufficiently portrait-shaped displays,
  fill the hero frame and crop excess edges
  rather than shrinking the SVG excessively.
*/

@media (max-aspect-ratio: 4/5) {

  .hero {
    height: min(70vh, 42rem);
  }


  .hero__art {
    object-fit: cover;
  }


  .hero__center-link {
    width: 45vw;
    height: 18vh;
  }

}



/* =========================================================
   LINK-BAND CONTAINER
   ========================================================= */

.links {
  width: 100%;

  margin: 0;
  padding: 0;
}



/* =========================================================
   FULL-WIDTH COLORED BANDS
   ========================================================= */

.link-band {
  /*
    Span the complete horizontal viewport.
  */
  width: 100%;

  box-sizing: border-box;


  /*
    No fixed height!

    Therefore band height automatically becomes:

       top padding
       +
       SVG height
       +
       image/text gap
       +
       text height
       +
       bottom padding
  */

  padding:
    var(--band-padding-y)
    var(--band-padding-x);


  display: flex;

  justify-content: center;
  align-items: center;
}



.link-band--red {
  background: var(--red-bg);
}



.link-band--blue {
  background: var(--blue-bg);
}



/* =========================================================
   SVG + LINK ASSEMBLY
   ========================================================= */

.illustrated-link {
  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: var(--art-label-gap);


  /*
    Lets it use the width it needs,
    but prevents pathological overflow.
  */
  width: min(100%, 60rem);


  text-align: center;


  /*
    We underline only the text itself,
    not the whole flex container.
  */
  text-decoration: none;


  font-size: var(--link-font-size);

  line-height: 1.05;
}



/* =========================================================
   SMALL SVG ARTWORK
   ========================================================= */

.illustrated-link__art {
  display: block;

  /*
    Responsive width.
  */
  width: var(--link-art-size);


  /*
    Preserve actual SVG aspect ratio.
  */
  height: auto;


  /*
    Never get ridiculously large relative
    to a narrow phone.
  */
  max-width: 60vw;
}



/* =========================================================
   LINK TEXT
   ========================================================= */

.illustrated-link__label {

  text-decoration-line: underline;

  text-decoration-color: currentColor;

  text-decoration-thickness: 0.04em;

  text-underline-offset: 0.11em;


  /*
    Makes underline gracefully break around
    descenders such as:

       g
       j
       p
       q
       y
  */
  text-decoration-skip-ink: auto;
}



/* =========================================================
   INDIVIDUAL LINK COLORS
   ========================================================= */

.illustrated-link--red {
  color: var(--red);
}



.illustrated-link--blue {
  color: var(--blue);
}



/* =========================================================
   HOVER + KEYBOARD FOCUS
   ========================================================= */

.illustrated-link:hover .illustrated-link__label,
.illustrated-link:focus-visible .illustrated-link__label {
  text-decoration-thickness: 0.075em;
}


.illustrated-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.75rem;
}



/* =========================================================
   PHONE-SIZED SCREENS
   ========================================================= */

@media (max-width: 600px) {

  :root {

    /*
      Slightly tighter bands on phones.
    */
    --band-padding-y:
      clamp(1.75rem, 8vw, 3rem);


    /*
      Let SVGs become a substantial percentage
      of the mobile viewport.
    */
    --link-art-size:
      clamp(5rem, 25vw, 7.5rem);
  }

}



/* =========================================================
   OPTIONAL CONDENSED FONT CLASS
   ========================================================= */

.condensed {
  font-stretch: condensed;
}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }

}