/**
 * Minimum viewport width 400px
 * Maximum viewport width 1280px
 */

@font-face {
  font-family: 'Mayenne';
  src: url('/fonts/Mayenne_Sans-Regular_web.woff2') format('woff2'),
       url('/fonts/Mayenne_Sans-Regular_web.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'SpaceGrotesk';
  src: url('/fonts/SpaceGrotesk-Variable.woff2') format('woff2 supports variations'),
       url('/fonts/SpaceGrotesk-Variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: block;
}

:root {
  /* Document dimentions */
  --document-margin: clamp(1rem, -0.25rem + 5vw, 3.75rem);
  --document-max-width: calc(82rem - (var(--document-margin)));
  
  /* Container */
  --container-large-width: var(--document-max-width);
  
  /* Typography */
  --type-font-family: 'SpaceGrotesk', sans-serif;
  --type-font-family-heading: 'Mayenne', sans-serif;
  --type-font-size: 16px;
  --type-line-height: 1.287;
  --type-font-weight: 435;

  --border-width: .125rem;

  /* Colors */
  --raisin: rgb(36 33 36);

  --wine-06: rgb(128 2 68);
  --wine-05: rgb(201 82 133);
  --wine-03: rgb(250 208 227);
  --wine-02: rgb(255 228 231);
  --wine-01: rgb(255 243 240);

  --cosmos-06: rgb(53 30 98);
  --cosmos-02: rgb(239 228 255);
  --cosmos-01: rgb(247 242 255);

  --ocean-06: rgb(37 29 127);
  --ocean-05: rgb(74 67 225);
  --ocean-04: rgb(128 140 255);
  --ocean-02: rgb(209 220 255);
  --ocean-01: rgb(238 245 255);

  --moss-06: rgb(26 78 46);
  --moss-05: rgb(1 138 56);
  --moss-01: rgb(241 248 216);

  --coral-06: rgb(209 52 36);
  --coral-05: rgb(247 85 37);
  --coral-02: rgb(255 204 131);
  --coral-01: rgb(255 242 228);

  --saffron-05: rgb(216 151 0);
  --saffron-04: rgb(237 180 23);
  --saffron-03: rgb(240 207 89);
  --saffron-02: rgb(241 232 155);
  --saffron-01: rgb(252 249 230);
  
  --border-radius-sm: .625rem;
  --border-radius-md: .75rem;
  --border-radius-lg: 1rem;
  --border-radius-xl: 2rem;
  --border-radius-full: 10rem;
}

:root {
  box-sizing: border-box;
  
  font-family: var(--type-font-family);
  font-size: var(--type-font-size);
  font-weight: var(--type-font-weight);
  line-height: var(--type-line-height);
  color: var(--raisin);
  
  background-color: #FAFAFA;

  font-feature-settings: "kern" 1, "liga" 1, "zero" 1;
  
  -webkit-tap-highlight-color: transparent;

  /* A fix for some font sizing in Safari .. */
  -webkit-text-size-adjust: none;

  /* Better looking font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;

  scroll-behavior: smooth;
}

::selection {
  background-color: var(--ocean-02);
}

::-moz-selection {
  background-color: var(--ocean-02);
}

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

/** 
 * Control and set custom colors for different pages .. 
 * TODO: organize ..
 */
html#Home, html#Home form { background-color: var(--coral-01) !important; }
html#Home body > header button svg .lines { fill: var(--coral-01); }
html#Home body > header button.active svg { color: var(--coral-01); }
html#Home body > header dialog a svg { color: var(--coral-01); }
html#Home body > header dialog nav a { color: var(--coral-01) !important; }
html#Home #illo { color: var(--coral-01); }

html#Values, html#Values form { background-color: var(--wine-02) !important; }
html#Values body > header button svg .lines { fill: var(--wine-02); }
html#Values body > header button.active svg { color: var(--wine-02); }
html#Values body > header dialog a svg { color: var(--wine-02); }
html#Values body > header dialog nav a { color: var(--wine-02) !important; }
html#Values #illo { color: var(--wine-02); }

html#Info, html#Info form { background-color: var(--moss-01) !important; }
html#Info body > header button svg .lines { fill: var(--moss-01); }
html#Info body > header button.active svg { color: var(--moss-01); }
html#Info body > header dialog a svg { color: var(--moss-01); }
html#Info body > header dialog nav a { color: var(--moss-01) !important; }
html#Info #illo { color: var(--moss-01); }

html#Press, html#Press form { background-color: var(--saffron-02) !important; }
html#Press body > header button svg .lines { fill: var(--saffron-02); }
html#Press body > header button.active svg { color: var(--saffron-02); }
html#Press body > header dialog a svg { color: var(--saffron-02); }
html#Press body > header dialog nav a { color: var(--saffron-02) !important; }
html#Press #illo { color: var(--saffron-02); }

html#Legal, html#Legal form { background-color: var(--coral-02) !important; }
html#Legal body > header button svg .lines { fill: var(--coral-02); }
html#Legal body > header button.active svg { color: var(--coral-02); }
html#Legal body > header dialog a svg { color: var(--coral-02); }
html#Legal body > header dialog nav a { color: var(--coral-02) !important; }
html#Legal #illo { color: var(--coral-02); }

html#Join, html#Join form { background-color: var(--saffron-02) !important; }
html#Join body > header button svg .lines { fill: var(--saffron-02); }
html#Join body > header button.active svg { color: var(--saffron-02); }
html#Join body > header dialog a svg { color: var(--saffron-02); }
html#Join body > header dialog nav a { color: var(--saffron-02) !important; }
html#Join #illo { color: var(--saffron-02); }

html#Paris, html#Paris form { background-color: var(--saffron-01) !important; }
html#Paris body > header button svg .lines { fill: var(--saffron-01); }
html#Paris body > header button.active svg { color: var(--saffron-01); }
html#Paris body > header dialog a svg { color: var(--saffron-01); }
html#Paris body > header dialog nav a { color: var(--saffron-01) !important; }
html#Paris #illo { color: var(--saffron-01); }

html#Rejoignez, html#Rejoignez form { background-color: var(--saffron-03) !important; }
html#Rejoignez body > header button svg .lines { fill: var(--saffron-03); }
html#Rejoignez body > header button.active svg { color: var(--saffron-03); }
html#Rejoignez body > header dialog a svg { color: var(--saffron-03); }
html#Rejoignez body > header dialog nav a { color: var(--saffron-03) !important; }
html#Rejoignez #illo { color: var(--saffron-03); }

html#Random { background-color: var(--moss-01); }

body {
  margin: 0;
  padding: 0;

  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
}

img {
  max-width: 100%;
  vertical-align: middle;
}

a {
  color: inherit;
}

@media (prefers-reduced-motion: no-preference) {
  a:focus-visible {
    outline-offset: .5rem;
    outline: .25rem dashed var(--coral-05);
    transition: outline-offset 200ms ease !important;
  }
}

ol, ul {
  font: inherit;
  margin: 0;
  border: 0;
  list-style: none;
  padding: 0
}

/* Control fake containers w/ padding */
body > header,
body > footer {
  padding-left: var(--document-margin);
  padding-right: var(--document-margin);
}

/* Dynamic spacing .. */
main {
  /* Same space as footer minus header padding */
  margin-top: clamp(2.5rem, 1.3636rem + 4.5455vw, 5rem);
  
  /* 40px < ... > 90px */
  /* Mostly relevant for the homepage sections .. */
  gap: clamp(2.5rem, 1.0795rem + 5.6818vw, 5.625rem);
}

footer {
  margin-top: clamp(3.75rem, 2.2727rem + 5.9091vw, 7rem);
}

article {
  /* 28px < ... > 60px */
  gap: clamp(1.75rem, 0.8409rem + 3.6364vw, 3.75rem);
}

main {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-grow: 1;
  align-self: center;
  
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--container-large-width) !important;
}

article {
  display: flex;
  flex-flow: column nowrap;
}

h1, .h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--type-font-family-heading);
  
  /* 36px < ... > 60px */
  font-size: clamp(2.25rem, 1.5682rem + 2.7273vw, 3.75rem);
  line-height: .98;
  
  font-weight: bold;
  letter-spacing: -.02em;
  text-indent: -.03em;
}

/* Target headings of regular article based pages + guides .. */
article > header:not(.headline) > h1 {
  /* 16px < ... > 22px */
  margin-bottom: clamp(1rem, 0.8295rem + 0.6818vw, 1.375rem);
}

h2, .h2 {
  margin-top: 0;

  /* 16px < ... > 22px */
  margin-bottom: clamp(1rem, 0.8295rem + 0.6818vw, 1.375rem);

  font-family: var(--type-font-family);
  
  /* 32px < ... > 48px */
  font-size: clamp(2rem, 1.5455rem + 1.8182vw, 3rem);
  line-height: 1;
  
  font-weight: bold;
  letter-spacing: -.035em;
}

h3, .h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--type-font-family-heading);
  
  /* 22px < ... > 30px */
  font-size: clamp(1.375rem, 1.1477rem + 0.9091vw, 1.875rem);
  line-height: 1.25;
  
  font-weight: bold;
  letter-spacing: -.006em;
  text-transform: uppercase;
}

h4, .h4 {
  /* Used on paris illos and for team names */
  margin-top: clamp(1.125rem, 0.7273rem + 1.5909vw, 2rem);
  margin-bottom: 0;
  
  font-family: var(--type-font-family);
  font-weight: 600;
  
  /* 22px < ... > 30px */
  font-size: clamp(1.375rem, 1.1477rem + 0.9091vw, 1.875rem);
  line-height: 1;
  
  text-transform: none;
  letter-spacing: -.015em;
}

p, li, summary, small {
  margin-top: 0;
  margin-bottom: 0;
  
  /* 18px < ... > 26px */
  font-size: clamp(1.125rem, 0.8977rem + 0.9091vw, 1.625rem);
  font-weight: var(--type-font-weight);
  line-height: 1.35;
  
  /* Prevent widow symbols .. but not words :( .. could be dangerous
  white-space: break-spaces;
  */
}

p > small {
  /* Overwrite default small sizing */

  /* 16px < ... > 22px */
  font-size: clamp(1rem, 0.8295rem + 0.6818vw, 1.375rem);
}

/* Overwrite line height of a paragraph that has small inside .. has has has .. */
p:has( > small) {
  line-height: 1.25;
}

/* Dynamic spacing between paragraphs .. */
p + p,
ul + p,
p + ul {
  /* 16px < ... > 22px */
  margin-top: clamp(1rem, 0.8295rem + 0.6818vw, 1.375rem);
}

body > header {
  display: flex;
  align-items: center;
  flex-shrink: 0;

  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

body > header > a {
  display: block;
  color: var(--raisin);
}

body > header > a svg {
  display: block;
  
  /* 68px < ... > 80px */
  width: clamp(4.25rem, 3.9091rem + 1.3636vw, 5rem);
  height: auto;
  vertical-align: middle;
  fill: currentColor;
}

body > header > a svg .first-dot,
body > header > a svg .second-dot {
  transform-origin: center;
}

@media (hover: hover) {
  body > header > a:hover .first-dot,
  body > header > a:hover .second-dot {
    animation-duration: 350ms;
    animation-name: bounce;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
  }

  body > header > a:hover .second-dot {
    animation-delay: 80ms;
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  
  50% {
    transform: translateY(-25px);
  }
  
  100% {
    transform: translateY(0);
  }
}

body > header > nav {
  margin-left: auto;
  display: none;
  align-items: center;
}

body > header > nav a {
  position: relative;
  display: flex;
  justify-content: center;

  font-family: var(--type-font-family);
  font-size: 1.625rem;
  text-decoration: none;
  color: inherit;
}

body > header > nav a + a {
  margin-left: 2rem;
}

body > header > nav a::before {
  content: '';
  position: absolute;
  bottom: -.5rem;
  width: 100%;
  height: .125rem;
  background-color: var(--raisin);
  transform-origin: top;
  transform: translateY(-2px);
  opacity: 0;
  transition: all 150ms 20ms cubic-bezier(0, 0, .2, 1);
  pointer-events: none; /* fix for double trigger .. */
}

body > header > nav a:hover::before {
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion) {
  body > header > nav a::before {
    transform: translateY(0);
    opacity: 0;
  }

  body > header > nav a:hover::before {
    transform: translateY(0);
    opacity: 1;
  }
}

body > header > nav a.current::before {
  transform: translateY(0);
  opacity: 1;
}

body > header button {
  position: fixed;
  right: var(--document-margin);

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

  padding: 0;

  /* 60px < ... > 68px */
  width: clamp(3.75rem, 3.5227rem + 0.9091vw, 4.25rem);
  height: clamp(3.75rem, 3.5227rem + 0.9091vw, 4.25rem);

  background-color: transparent;
  border: 0;
  border-radius: var(--border-radius-full);
  z-index: 666;
  
  transform-origin: center;
  transition: all 175ms 20ms cubic-bezier(0, 0, .2, 1);
}

body > header button:active {
  transform: scale(.9);
}

@media (prefers-reduced-motion: no-preference) {
  body > header button:focus-visible {
    outline-offset: .5rem;
    outline: .25rem dashed var(--coral-05);
    transition: outline-offset 200ms ease !important;
  }
}

body > header button svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--raisin);
}

body > header button svg .lines {
  fill: #FAFAFA;
}

body > header button svg path:nth-of-type(3),
body > header button svg path:nth-of-type(4) {
  display: none;
}

body > header button.active svg {
  /* Fallback .. */
  color: #fafafa;
}

body > header button.active svg .lines { 
  fill: var(--raisin) !important;
}

body > header button.active svg path:nth-of-type(3),
body > header button.active svg path:nth-of-type(4) {
  display: block;
}

body > header button.active svg path:nth-of-type(2) {
  display: none;
}

body > header dialog {
  position: fixed;
  display: grid;
  justify-items: start;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  overflow: hidden;

  margin-left: .25rem;
  margin-right: .25rem;

  /* Same padding as header .. */
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  
  padding-left: calc(var(--document-margin) - .25rem);
  padding-right: calc(var(--document-margin) - .25rem);

  border-bottom-left-radius: var(--border-radius-lg);
  border-bottom-right-radius: var(--border-radius-lg);
  background-color: var(--raisin);
  border: 0;
  transform: translate3d(0, -100%, 0);
  transform-origin: bottom center;
  transition: transform .25s cubic-bezier(.55, .08, 0, 1), -webkit-transform .25s cubic-bezier(.55, .08, 0, 1);
  z-index: 66;
}

body > header dialog.has-tongue {
  -webkit-transform: none;
  transform: none;
}

@media (prefers-reduced-motion) {
  body > header dialog {
    display: none;
    visibility: hidden;
  }

  body > header dialog.has-tongue {
    display: block;
    visibility: visible;
  }
}

body > header > dialog > a {
  display: block;
  color: #fafafa;
  
  -webkit-transform: translateY(6rem);
  transform: translateY(6rem);
  opacity: 0;
  
  transition: opacity .8s cubic-bezier(.55, .08, 0, 1), transform .5s cubic-bezier(.55, .08, 0, 1), -webkit-transform .5s cubic-bezier(.55, .08, 0, 1);
}

body > header > dialog.has-tongue > a {
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

body > header > dialog > a svg {
  display: block;
  
  /* 68px < ... > 80px */
  width: clamp(4.25rem, 3.9091rem + 1.3636vw, 5rem);
  height: auto;
  vertical-align: middle;
  fill: currentColor;
}

body > header > dialog nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  
  margin-top: 1.25rem;
}

body > header > dialog nav a {
  display: block;

  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-left: .5rem;
  padding-right: .5rem;

  font-family: var(--type-font-family);
  
  /* 26px < ... > 30px */
  font-size: clamp(1.625rem, 1.5114rem + 0.4545vw, 1.875rem);
  line-height: 1;
  
  text-decoration: none;
  text-align: right;
  color: #fafafa;

  background-color: transparent;
  border-radius: var(--border-radius-sm);
  
  -webkit-transform: translateY(8rem);
  transform: translateY(8rem);
  opacity: 0;
  transition: opacity .8s cubic-bezier(.55, .08, 0, 1), transform .5s cubic-bezier(.55, .08, 0, 1), -webkit-transform .5s cubic-bezier(.55, .08, 0, 1);
}

body > header > dialog.has-tongue nav a {
  -webkit-transform: none;
  transform: none;
  opacity: 1;
}

body > header > dialog.has-tongue nav a:first-child {
  -webkit-transition-delay: 25ms;
  transition-delay: 25ms;
}

body > header > dialog.has-tongue nav a:nth-child(2) {
  -webkit-transition-delay: .05s;
  transition-delay: .05s;
}

body > header > dialog.has-tongue nav a:nth-child(3) {
  -webkit-transition-delay: 75ms;
  transition-delay: 75ms;
}

body > header > dialog.has-tongue nav a:nth-child(4) {
  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}

@media (min-width: 768px) {

  body > header {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  body > header > dialog {
    /* Same padding as header .. */
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  body > header > dialog nav {
    margin-top: 2rem;
  }
}

@media (min-width: 1280px) {
  
  body > header > nav {
    display: flex;
  }
  
  body > header button {
    display: none;
  }

  body > header dialog {
    display: none;
    visibility: hidden;
  }
}

footer {
  /* Frame the love .. */
  margin-left: .25rem;
  margin-right: .25rem;
  
  position: relative;
  flex-shrink: 0;
  color: #FAFAFA;
  background-color: var(--raisin);
  
  border-top-left-radius: var(--border-radius-lg);
  border-top-right-radius: var(--border-radius-lg);
}

footer a {
  text-decoration: none;
  color: inherit;
}

footer > section:nth-of-type(1) {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* ... */
footer > section:nth-of-type(1) #illo {
  display: none;
  
  width: 100%;
  max-width: 9.25rem;
}

footer > section:nth-of-type(1) #illo svg {
  display: inline-block;
  will-change: transform;
  transform-origin: center;
  
  animation: rotate 1s linear infinite;
  animation-play-state: paused;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-delay: calc(var(--scroll) * -1s);
}

@keyframes rotate {
  to {
    transform: rotate(-360deg) translateZ(1px);
  }
}

footer > section:nth-of-type(1) > div > div {
  margin-top: 1.75rem;
}

footer > section:nth-of-type(2) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

footer > section:nth-of-type(2) > nav {
  display: none;
  gap: 1.75rem;
  margin-right: auto;
}

footer > section:nth-of-type(2) > nav a {
  position: relative;
  display: flex;
  justify-content: center;

  font-family: var(--type-font-family);
  font-size: 1.625rem;
}

footer > section:nth-of-type(2) > nav a::before {
  content: '';
  position: absolute;
  bottom: -.5rem;
  width: 100%;
  height: .125rem;
  background-color: #fafafa;
  transform-origin: top;
  transform: translateY(-2px);
  opacity: 0;
  transition: all 150ms 20ms cubic-bezier(0, 0, .2, 1);
  pointer-events: none; /* fix for double trigger .. */
}

footer > section:nth-of-type(2) > nav a:hover::before {
  transform: none;
  opacity: 1;
}

footer > section:nth-of-type(2) > nav a.current::before {
  transform: translateY(0);
  opacity: 1;
}

footer > section:nth-of-type(2) a {
  display: block;
}

footer > section:nth-of-type(2) > a:nth-of-type(2) {
  border-radius: 10px;
}

footer > section:nth-of-type(2) > a:nth-of-type(2):hover svg path {
  stroke: var(--wine-05);
}

footer > section:nth-of-type(2) > a:nth-of-type(2):hover svg path:last-child { /* @Cleanup: revisit hovers */
  fill: var(--wine-05);
}

footer > section:nth-of-type(2) > a:nth-of-type(2):focus {
  transform: translateY(2px); /* might not be necessary */
  background-color: rgb(250 208 227 / 15%);
  box-shadow: 0 0 0 5px rgb(250 208 227 / 15%);
}

footer > section:nth-of-type(2) svg {
  width: 2.625rem;
  height: 2.625rem;
  vertical-align: middle;
}

footer > section:nth-of-type(3) {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;

  border-top: var(--border-width) solid rgb(255 255 255 / 25%);
}

footer > section:nth-of-type(3) > p {
  display: block;
  white-space: normal;
}

footer > section:nth-of-type(3) span {
  font-size: inherit;
  color: rgb(255 255 255 / 40%);
}

footer > section:nth-of-type(3) span a {
  position: relative;
}

footer > section:nth-of-type(3) span a::before {
  content: '';
  position: absolute;
  bottom: -.375rem;
  width: 100%;
  height: .125rem;
  background-color: rgb(255 255 255 / 40%);
  transform-origin: top;
  transform: translateY(-2px);
  opacity: 0;
  transition: all 150ms 20ms cubic-bezier(0, 0, .2, 1);
  pointer-events: none; /* fix for double trigger .. */
}

@media (hover: hover) {
  footer > section:nth-of-type(3) span > a:hover::before {
    transform: none;
    opacity: 1;
  }
}

@media (min-width: 768px) {
  
  footer {
    /* Frame the love .. */
    margin-left: .75rem;
    margin-right: .75rem;
    
    border-top-left-radius: var(--border-radius-xl);
    border-top-right-radius: var(--border-radius-xl);
  }

  footer > section:nth-of-type(1) {
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
    
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  
  footer > section:nth-of-type(1) #illo {
    display: block;
  }

  footer > section:nth-of-type(2) {
    gap: 1.75rem;
  }

  footer > section:nth-of-type(2) svg {
    width: 3.25rem;
    height: 3.25rem;
  }

  footer > section:nth-of-type(3) {
    margin-top: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    
    display: flex;
    align-items: baseline;
    gap: 2.5rem;
  }

  footer > section:nth-of-type(3) > p:nth-child(2) {
    margin-top: 0;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
  }
}

@media (min-width: 1280px) {
  
  footer > section:nth-of-type(2) > nav {
    display: flex;
  }
}

.button {
  background-color: var(--ocean-05);
  border-radius: var(--border-radius-full);
  color: #fafafa;
  
  display: inline-block; /* fixes content overflow and does not go full width.. */
  
  padding-top: .875rem;
  padding-bottom: .875rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  
  font-family: var(--type-font-family);
  font-weight: var(--type-font-weight);
  
  /* 18px < ... > 26px */
  font-size: clamp(1.125rem, 0.8977rem + 0.9091vw, 1.625rem);
  line-height: 1;
  
  text-decoration: none;
  white-space: nowrap;
}

.button:hover {
  background-color: var(--ocean-06);
}

.button:focus {
  transform: translateY(2px);
  box-shadow: 0 0 0 5px rgb(74 67 225 / 30%);
}

.button--saffron {
  color: var(--raisin);
  background-color: var(--saffron-04);
}

.button--saffron:hover {
  background-color: var(--saffron-05);
}

.button--saffron:focus {
  transform: translateY(2px);
  box-shadow: 0 0 0 5px rgb(237 180 23 / 30%);
}

@media (min-width: 768px) {
  
  .button {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;  
  }
}

.headline {
  padding-left: var(--document-margin);
  padding-right: var(--document-margin);
}

.headline.outta-space > h1 {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.spots {
  display: grid;
  grid-template-columns: 1fr;
  gap: .625rem;
  row-gap: 1rem;
  
  padding-left: var(--document-margin);
  padding-right: var(--document-margin);
}

.spots > div {
  display: flex;
}

.spots > div > a {
  width: 42%;
  flex-shrink: 0;
  
  position: relative;
  display: block;
  border-radius: var(--border-radius-md);
}

.spots > div > a { background-color: var(--cosmos-02); }
.spots > div:nth-of-type(2n+1) > a { background-color: var(--wine-02); }

@media (hover: hover) {
  .spots > div > a:hover img {
    transform: translateY(-6px);
  }
}

.spots > div > a:focus img {
  box-shadow: 0 0 0 5px rgb(247 85 37 / 30%);
}

.spots > div > a::before {
  content: '';
  display: block;
  padding-top: 130%;
  height: 0;
}

.spots img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-md);
  transition: transform 150ms 20ms cubic-bezier(0, 0, .2, 1);
}

.spots .details {
  margin-left: 1rem;
}

.spots > div .hood {
  margin-top: 0;
  margin-bottom: .625rem;
}

/* TODO: Consider mini button class .. */
.spots > div .hood a {
  padding-top: .25rem;
  padding-bottom: .25rem;
  padding-left: .625rem;
  padding-right: .625rem;
  
  display: inline-block;

  font-family: var(--type-font-family);
  font-weight: var(--type-font-weight);
  
  /* 18px < ... > 26px */
  font-size: clamp(1.125rem, 0.8977rem + 0.9091vw, 1.625rem);
  line-height: 1;
  
  color: white;
  text-decoration: none;
  background-color: var(--coral-05);
  border-radius: var(--border-radius-full);
}

.spots > div .hood a:hover {
  background-color: var(--coral-06);
}

.spots > div .hood a:focus {
  transform: translateY(2px);
  box-shadow: 0 0 0 5px rgb(247 85 37 / 30%);
}

.spots h3 > a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  transition: transform 150ms 20ms cubic-bezier(0, 0, .2, 1);
}

@media (hover: hover) {
  .spots h3 > a:hover {
    color: var(--coral-05);
    transform: translateX(2px);
  }
}

@media (min-width: 640px) {
  
  .spots {
    grid-template-columns: repeat(2, 1fr);
    gap: .625rem;
    row-gap: 1.25rem;
  }
  
  .spots > div {
    flex-direction: column;  
  }
  
  .spots > div .hood {
    margin-top: 1.25rem;
    margin-bottom: .875rem;
  }
  
  .spots > div h3 {
    padding-right: 1rem;
  }
  
  .spots > div > a {
    width: auto;
  }
  
  .spots > div > a::before {
    padding-top: 100%; /* 1 : 1 */
  }
  
  .spots .details {
    margin-left: 0;
  }
}

@media (min-width: 768px) {

  .spots {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    row-gap: 3.75rem;
  }
  
  .spots > div .hood {
    margin-top: 1.5rem;
    margin-bottom: .875rem;
  }
  
  .spots > div .hood a {
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .875rem;
    padding-right: .875rem;
  }
}