/* Theme tokens adapted from the supplied theme.json for plain HTML. */
:root {
  --base: #F5F4F4;
  --contrast: #23001E;
  --primary: #20A39E;
  --secondary: #FFBA49;
  --sunny-yellow: #CCCC66;
  --coral: #EF5B5B;
  --plum: #23001E;
  --neutral: #D9D9D9;
  --space-xs: 20px;
  --space-sm: clamp(30px, 4vw, 40px);
  --space-md: clamp(40px, 6vw, 60px);
  --space-lg: clamp(50px, 8vw, 80px);
  --space-xl: clamp(60px, 10vw, 100px);
  --gap: 30px;
  --content-size: 720px;
  --wide-size: 1360px;
  --shadow-light: 0 0 50px rgb(10 10 10 / 10%);
  --shadow-solid: 5px 5px 0 rgb(10 10 10);
  --body-line-height: 1.75;
  --heading-line-height: 1.1;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--base); color: var(--contrast); font-family: 'Inter', Arial, sans-serif; line-height: var(--body-line-height); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
header, main, footer { width: min(100%, var(--wide-size)); margin-inline: auto; }
header { padding: var(--space-xs) var(--space-sm); display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); border-bottom: 1px solid var(--neutral); }
.logo { width: clamp(85px, 10vw, 120px); }
.header-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 600; text-decoration: none; }
.header-link span { font-size: 22px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-sm); }
.hero > *, .detail { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.8px; }
.dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--primary); }
h1 { font-family: 'Fjalla One', Arial, sans-serif; font-size: clamp(3rem, 6.4vw, 6.25rem); line-height: var(--heading-line-height); letter-spacing: -.02em; font-weight: 400; margin: var(--space-xs) 0; }
h1 em { color: var(--primary); font-family: 'Luckiest Guy', 'Fjalla One', sans-serif; font-style: normal; font-weight: 400; }
p { font-size: 17px; margin: 0 0 15px; }
.intro { max-width: min(100%, var(--content-size)); }
.notice { max-width: 510px; border-left: 4px solid var(--secondary); padding: 10px 0 10px 16px; margin: var(--space-xs) 0 var(--gap); font-size: 14px; line-height: 1.5; }
.actions { display: flex; flex-wrap: wrap; gap: 15px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 20px; min-height: 48px; padding: 15px 20px; border: 2px solid var(--primary); border-radius: 8px; font-size: 14px; line-height: 1.5; font-weight: 600; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.button.primary { background: var(--primary); color: var(--contrast); }
.button:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--secondary); }
a:focus-visible { outline: 3px solid var(--contrast); outline-offset: 5px; }
.art { position: relative; aspect-ratio: 1; width: 100%; max-width: 550px; justify-self: center; display: flex; align-items: center; overflow: hidden; border-radius: 48% 48% 42% 42%; background: color-mix(in srgb, var(--primary) 15%, var(--base)); }
.art::before { content: ''; position: absolute; width: 42%; aspect-ratio: 1; top: 27%; left: 30%; border-radius: 50%; background: var(--secondary); opacity: .4; }
.art img { position: relative; z-index: 1; width: 100%; }
.art-tag { position: absolute; z-index: 2; bottom: 5%; left: 50%; transform: translateX(-50%) rotate(-5deg); padding: 10px 20px; border: 1px solid var(--neutral); border-radius: 6px; background: var(--base); white-space: nowrap; font: 600 clamp(20px, 2.2vw, 28px)/1.5 'Caveat', cursive; box-shadow: var(--shadow-light); }
.details { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: 0 var(--space-sm) var(--space-sm); padding: var(--gap) 0; border-block: 1px solid var(--neutral); }
.detail + .detail { padding-left: var(--gap); border-left: 1px solid var(--neutral); }
.detail-label { margin-bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; }
.detail h2 { margin: 0 0 8px; font-size: 17px; line-height: var(--heading-line-height); }
.detail h2 a { text-decoration: none; }
.detail p { font-size: 14px; margin-bottom: 9px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600; text-underline-offset: 4px; }
.partner-link { display: inline-flex; align-items: center; min-height: 48px; }
.partner-link img { width: 160px; height: 48px; object-fit: cover; object-position: center; }
.partner-copy { margin-top: 8px; }
footer { display: flex; justify-content: space-between; gap: var(--space-xs); padding: 0 var(--space-sm) var(--space-xs); font-size: 12px; }
footer > span:last-child { font: 500 22px/1.5 'Caveat', cursive; }
.skip-link { position: absolute; top: 10px; left: 20px; transform: translateY(-200%); z-index: 10; padding: 10px 20px; background: var(--secondary); }
.skip-link:focus { transform: translateY(0); }
/* Tablet: keep the hero balanced, move visitor details into two columns. */
@media (max-width: 1000px) {
  .hero { gap: var(--gap); }
  .details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail:last-child { grid-column: 1 / -1; padding: var(--space-xs) 0 0; border-left: 0; border-top: 1px solid var(--neutral); }
}
/* Phone: stack sections and let typography scale down to narrow screens. */
@media (max-width: 700px) {
  header { padding-inline: var(--space-xs); }
  .hero { grid-template-columns: minmax(0, 1fr); padding: var(--space-md) var(--space-xs); }
  h1 { font-size: clamp(3rem, 12vw, 4.75rem); }
  .art { max-width: 400px; }
  .art-tag { font-size: clamp(20px, 5vw, 26px); }
  .details { grid-template-columns: minmax(0, 1fr); margin-inline: var(--space-xs); gap: var(--space-xs); }
  .detail + .detail { grid-column: auto; border-left: 0; border-top: 1px solid var(--neutral); padding: var(--space-xs) 0 0; }
  footer { flex-direction: column; padding-inline: var(--space-xs); }
}
@media (max-width: 400px) {
  .header-link { font-size: 12px; gap: 5px; }
  .actions { flex-direction: column; }
  .button { width: 100%; }
  .eyebrow { font-size: 10px; letter-spacing: 1.2px; }
}
@media (prefers-reduced-motion: reduce) { .button { transition: none; } .button:hover { transform: none; } }


.button { font-family: 'Quicksand', 'Inter', sans-serif; font-weight: 500; }
.detail h2 { font-family: 'Fjalla One', sans-serif; font-weight: 400; font-size: 21px; }