/* ---------- Tokens ---------- */
/* Mobile first. Tablet ≥ 48rem (768px), desktop ≥ 64rem (1024px). */
/* Palette: blue, black, white. Tints are black with opacity. */
:root {
  --font: Helvetica, "Helvetica Neue", Arial, sans-serif;

  --color-blue: #00aff0;
  --color-blue-dark: #006990; /* the blue under 40% black */
  --color-black: #000;
  --color-white: #fff;
  --color-border: rgb(0 0 0 / 0.12);

  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  --fs-h3: 1.25rem;
  --fs-h2: 1.75rem;
  --fs-h1: 2.5rem;

  /* Grid: 2 columns on mobile, 12 from tablet up; content max 1040px */
  --gutter: 1.5rem;
  --content-max: 65rem;
  --grid-columns: 2;
  --grid-gap: 1.5rem;

  --section-space: 3.5rem;
  --radius: 0.75rem;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  /* Cloud strips shown 1000px wide on phones and 4000px from tablet up, repeating sideways
     (edges match). Heights follow each SVG's aspect ratio: clouds.svg is 5000x175,
     cloudsblue.svg is 5000x200. */
  --clouds-width: 1000px;
  --clouds-white-height: calc(var(--clouds-width) * 175 / 5000);
  --clouds-blue-height: calc(var(--clouds-width) * 200 / 5000);
}

/* Display P3 color space: the theme blues use the same P3 values as the SVG artwork,
   so logo, clouds and background match. Black and white are identical in both spaces. */
@supports (color: color(display-p3 0 0 0)) {
  :root {
    --color-blue: color(display-p3 0 0.6863 0.9412);
    --color-blue-dark: color(display-p3 0 0.4118 0.5647);
  }
}

@media (min-width: 48rem) {
  :root {
    --fs-body: 1.0625rem;
    --fs-lead: 1.375rem;
    --fs-h3: 1.5rem;
    --fs-h2: 2.25rem;
    --fs-h1: 3.5rem;

    --gutter: 3rem;
    --grid-columns: 12;
    --section-space: 5rem;
    --clouds-width: 4000px;
  }
}

@media (min-width: 64rem) {
  :root {
    --fs-body: 1.125rem;
    --fs-lead: 1.6rem;
    --fs-h3: 1.75rem;
    --fs-h2: 2.75rem;
    --fs-h1: 4.5rem;

    --section-space: 7rem;
  }
}

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

/* Helvetica tightened by 2% on every element. An em letter-spacing is inherited as a fixed
   length, so it's set on each element to follow that element's own font size. */
* { letter-spacing: -0.02em; }

/* Blue page background, so Safari tints its toolbar and overscroll blue. */
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-white);
  background: var(--color-blue);
}

h1, h2, h3 { margin: 0 0 0.5em; line-height: 1.1; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; }
a { color: inherit; }

/* Links in running text: a faint underline that strengthens on hover */
p a,
li a,
.about-title a {
  text-decoration-color: rgb(0 0 0 / 0.1);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
  transition: text-decoration-color 0.2s var(--ease-out-quart);
}
p a:hover,
li a:hover { text-decoration-color: rgb(0 0 0 / 0.2); }
/* White underline under the white About title; a closer underline for the small footer text */
.about-title a { text-decoration-color: rgb(255 255 255 / 0.1); }
.about-title a:hover { text-decoration-color: rgb(255 255 255 / 0.2); }
.site-footer a { text-underline-offset: 0.125rem; }

/* Balanced line lengths for body copy, same as Framer's text "Balance" setting */
p, li { text-wrap: balance; }

.container {
  width: 100%;
  max-width: calc(var(--content-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-space); }

/* The pill is drawn by ::before, so hover grows the button without scaling its text */
.button {
  --button-bg: var(--color-black);
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 0.875em 1.5em;
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-white);
  border-radius: 999px;
}
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--button-bg);
  box-shadow: var(--button-shadow, none);
  transition: transform 0.2s var(--ease-out-quart);
}
.button:hover::before { transform: scale(1.025); }

/* Body copy blocks: feature list, about */
.text-block { margin: 0; font-size: var(--fs-lead); line-height: 1.3; }
.text-block p { margin-bottom: 0; }
.text-block > * + * { margin-top: 0.5em; }
/* List items stack 16px apart on phones; from tablet up the list is a grid with its own gaps */
.text-block li + li { margin-top: 1rem; }

@media (min-width: 48rem) {
  .text-block > * + *,
  .text-block li + li { margin-top: 0; }
}

@media (min-width: 64rem) {
  .text-block { line-height: 1.2; }
}

/* ---------- 1. Header ---------- */
/* Logo, title, emoji ticker and shirt picker on blue. The white clouds dock to the bottom,
   48px below the shirt picker on phones, centered and repeating sideways; their solid white
   bottom edge runs into the white features section. */
.intro {
  padding-block: 3rem calc(3rem + var(--clouds-white-height));
  background: url("img/clouds.svg") center bottom / var(--clouds-width) var(--clouds-white-height) repeat-x;
}

/* Logo 48px tall on phones, scaled down proportionally only if the screen is narrower */
.eyebrow { margin: 0 0 2.5rem; }
.eyebrow img { display: block; width: auto; height: 3rem; max-width: 100%; object-fit: contain; margin-inline: auto; }

.intro h1 { margin: 0; line-height: 1; text-align: center; }
.intro h1 span { display: block; }
.intro .h1-sub { color: var(--color-blue-dark); }

/* Tablet: 64px to the 56px tall logo, clouds right where the shirt picker ends */
@media (min-width: 48rem) {
  .intro { padding-block: 4rem var(--clouds-white-height); }
  .eyebrow { margin-bottom: 3rem; }
  .eyebrow img { height: 3.5rem; }
}

/* Desktop: 64px to the 64px tall logo, 96px from logo to title, 48px from the shirt picker to the clouds */
@media (min-width: 64rem) {
  .intro { padding-bottom: calc(3rem + var(--clouds-white-height)); }
  .eyebrow { margin-bottom: 6rem; }
  .eyebrow img { height: 4rem; }
}

/* Emoji ticker: full viewport width with a light edge fade, 80px below the title.
   The track's 12px padding keeps room for the focus ring. */
.ticker {
  --ticker-fade: linear-gradient(to right, rgb(0 0 0 / 0.8), #000 6rem, #000 calc(100% - 6rem), rgb(0 0 0 / 0.8));
  margin-top: calc(5rem - 0.75rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: var(--ticker-fade);
  mask-image: var(--ticker-fade);
}
.ticker::-webkit-scrollbar { display: none; }

.ticker-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  padding-block: 0.75rem;
}

/* 56px emoji with its name 16px below, centered. Names are white at 60%; the picked
   shirt's name turns fully white. */
.graphic-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  flex: none;
  padding: 0;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: rgb(255 255 255 / 0.6);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.2s var(--ease-out-quart);
}

.graphic-thumb[aria-pressed="true"] { color: var(--color-white); }

.graphic-thumb img {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  transition: transform 0.2s var(--ease-out-quart);
}

/* Hover, on devices with a pointer: the emoji grows slightly and its name turns white */
@media (hover: hover) {
  .graphic-thumb:hover { color: var(--color-white); }
  .graphic-thumb:hover img { transform: scale(1.05); }
}

.graphic-thumb:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 0.5rem;
  border-radius: var(--radius);
}

/* Shirt picker: 48px below the emoji names on phones, 80% of the viewport height (full width
   on narrower screens). On phones it's 130% of the screen width, so the sleeves run past the
   screen edges; the overflow is clipped so the page doesn't scroll sideways. The color picker
   and buy button sit on its bottom edge. */
.viewer {
  display: grid;
  justify-items: center;
  margin-top: calc(3rem - 0.75rem);
  padding-inline: 0;
  overflow-x: clip;
}

/* Negative side margins keep the oversized shirt centered in its column */
.viewer-image {
  --shirt-size: min(130vw, 80vh);
  position: relative;
  width: var(--shirt-size);
  margin-inline: calc((100% - var(--shirt-size)) / 2);
  aspect-ratio: 1;
}

.viewer-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Cross-fade: a copy of the previous photo fades out on top of the new one (script.js) */
.viewer-photo--leaving {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Color picker 32px above the buy button (48px on desktop) */
.viewer-actions {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Color picker: 24px dots, 16px apart. The ring is an outline, so it never shifts the dots;
   it turns white while the black shirt is shown. */
.color-list { display: flex; justify-content: center; gap: 1rem; }

.color-option { position: relative; cursor: pointer; }
.color-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }

.color-swatch {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border: 0.5px solid var(--color-border);
  border-radius: 50%;
}

.color-option input:checked + .color-swatch,
.color-option input:focus-visible + .color-swatch {
  outline: 1.5px solid rgb(0 0 0 / 0.5);
  outline-offset: 0.125rem;
}

.color-list:has(input[value="black"]:checked) .color-swatch { outline-color: rgb(255 255 255 / 0.5); }

/* Theme-blue buy button: 20px type on phones, 16px padding top and bottom, 32px at the sides.
   The shadow is built like Framer's "realistic" shadows: each layer drops further with a
   matching blur, tucks in with a more negative spread and fades out. */
.viewer-buy {
  --button-bg: var(--color-blue);
  --button-shadow:
    0 0.602px 0.602px -1.25px rgb(0 0 0 / 0.26),
    0 2.289px 2.289px -2.5px rgb(0 0 0 / 0.24),
    0 10px 10px -3.75px rgb(0 0 0 / 0.09);
  padding: 1rem 2rem;
  font-size: 1.25rem;
  white-space: nowrap;
}

/* Tablet: 72px emoji 36px apart, shirt picker 64px below the names and inside the page
   padding, 24px color dots 16px apart, button type 1.5x the body size */
@media (min-width: 48rem) {
  .ticker-track { gap: 2.25rem; }
  .graphic-thumb img { width: 4.5rem; height: 4.5rem; }
  .viewer { margin-top: calc(4rem - 0.75rem); padding-inline: var(--gutter); }
  .viewer-image { --shirt-size: min(100%, 80vh); }
  .viewer-actions { bottom: 0.25rem; }
  .color-list { gap: 1rem; }
  .color-swatch { width: 1.5rem; height: 1.5rem; }
  .viewer-buy { padding: 1rem 2rem; font-size: calc(var(--fs-body) * 1.5); }
}

/* Desktop: 120px from title to emoji, 80px emoji 40px apart, 20px color dots 10px apart */
@media (min-width: 64rem) {
  .ticker { margin-top: calc(7.5rem - 0.75rem); }
  .ticker-track { gap: 2.5rem; }
  .graphic-thumb { font-size: 0.8rem; }
  .graphic-thumb img { width: 5rem; height: 5rem; }
  .viewer-actions { bottom: 0.75rem; gap: 3rem; }
  .color-list { gap: 0.625rem; }
  .color-swatch { width: 1.25rem; height: 1.25rem; }
  .viewer-buy { padding: calc(var(--fs-body) * 0.9625) 2.5rem; font-size: 1.8rem; }
}

/* ---------- 2. Features ---------- */
/* White section under the header clouds, ending in blue clouds that run into About. On
   phones the list starts 80px below the clouds and the blue clouds start 80px below the
   note. The white stops 2px short of the bottom so rounding can't leave a white hairline
   above About. */
.features {
  padding-block: 5rem calc(5rem + var(--clouds-blue-height));
  color: var(--color-black);
  background:
    url("img/cloudsblue.svg") center bottom / var(--clouds-width) var(--clouds-blue-height) repeat-x,
    linear-gradient(var(--color-white), var(--color-white)) top / 100% calc(100% - 2px) no-repeat;
  /* Paint 2px up over the header clouds so rounding can't leave a blue hairline between the sections */
  box-shadow: 0 -2px 0 var(--color-white);
}

.feature-list { padding: 0; list-style: none; }

/* Glyph 16px in front of the text; bold lead sentence in #121212 at 90%, the rest at 40%.
   "pretty" instead of "balance": lines run the full column width, only lone last words are avoided. */
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  color: rgb(18 18 18 / 0.4);
  text-wrap: pretty;
}
.feature-list strong { color: rgb(18 18 18 / 0.9); }
/* Let the text shrink with its column instead of growing to fit unbreakable words */
.feature-list li > span { min-width: 0; }

/* 24px glyphs in the theme blue (28px from tablet up), centered on the first text line */
.feature-icon {
  --icon-size: 1.5rem;
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  margin-top: calc((1lh - var(--icon-size)) / 2);
  color: var(--color-blue);
}

/* Note on the other garments: smaller, centered, 90% of the column wide on phones */
.features-note {
  width: 90%;
  margin: 2rem auto 0;
  font-size: var(--fs-body);
  line-height: 1.4;
  text-align: center;
  color: rgb(18 18 18 / 0.25);
}

/* Tablet: 28px glyphs 24px from the text, note 70% wide and 48px below the list, 64px from
   the note to the blue clouds. Two list columns filled top to bottom, 24px between items;
   24px side padding on each column makes the gap between them 48px. */
@media (min-width: 48rem) {
  .features { padding-block: 6rem calc(4rem + var(--clouds-blue-height)); }
  .feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    row-gap: 1.5rem;
  }
  .feature-list li { gap: 1.5rem; padding-inline: 1.5rem; }
  .feature-icon { --icon-size: 1.75rem; }
  .features-note { width: 70%; margin-top: 3rem; }
}

/* Desktop: 32px between list items, glyph 16px from the text */
@media (min-width: 64rem) {
  .feature-list { row-gap: 2rem; }
  .feature-list li { gap: 1rem; padding-inline: 1.5rem; }
  .features-note { width: 60%; margin-top: 4rem; }
  .features { padding-bottom: calc(4rem + var(--clouds-blue-height)); }
}

/* ---------- 3. About ---------- */
/* Centered text column in the list's type size: white title, subtitle in the page
   subtitle's dark blue, white body. */
.about { width: 90%; margin-inline: auto; color: var(--color-white); }
/* No bottom padding: the footer's own padding sets the space below the About text */
.about-section { padding-bottom: 0; }

/* Portrait: above the title on phones; from tablet up it hangs in the left margin, 24px from
   the text, so the text itself stays centered */
.about-photo {
  display: block;
  width: 5rem;
  height: 5rem;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.about-title {
  margin: 0 0 1em;
  font-size: inherit;
  line-height: inherit;
}
.about-title span { display: block; }
.about-title .about-sub { color: var(--color-blue-dark); }
.about-text p + p { margin-top: 1em; }
/* Long paragraphs: fill the column width, only avoid a lone last word */
.about-text p { text-wrap: pretty; }

/* Tablet: 64px from the blue clouds to the title, 24px from title to text and between
   paragraphs, column 60% wide. The footer's own padding sets the space below the text. */
@media (min-width: 48rem) {
  .about-section { padding-block: 4rem 0; }
  .about { width: 60%; margin-inline: auto; }
  .about-title { margin-bottom: 1.5rem; }
  .about-text p + p { margin-top: 1.5rem; }
  /* Portrait vertically centered on the title */
  .about-heading { position: relative; }
  .about-photo { position: absolute; top: 50%; right: calc(100% + 1.5rem); margin: 0; transform: translateY(-50%); }
}

/* Desktop: 120px from the blue clouds to the title, 32px from title to text, 24px between
   paragraphs, column 60% wide */
@media (min-width: 64rem) {
  .about-section { padding-block: 7.5rem 0; }
  .about { width: 60%; }
  .about-title { margin-bottom: 2rem; }
  .about-text p + p { margin-top: 1.5rem; }
}

/* ---------- 4. Footer ---------- */
/* Three centered lines of small print, 40% black on the blue, 96px above and below on phones */
.site-footer {
  padding-block: 6rem;
  font-size: 0.8125rem; /* ~13px */
  line-height: 1.5;
  text-align: center;
  color: rgb(0 0 0 / 0.4);
}
.site-footer p { margin: 0; }

/* 128px above and below on tablet, 160px on desktop */
@media (min-width: 48rem) {
  .site-footer { padding-block: 8rem; }
}

@media (min-width: 64rem) {
  .site-footer { padding-block: 10rem; font-size: 0.8rem; }
}

/* ---------- Grid overlay (design tool, Ctrl+G) ---------- */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.grid-overlay-columns {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gap);
  height: 100%;
}

.grid-overlay-columns span {
  background: rgb(255 0 0 / 0.05);
  box-shadow: inset 1px 0 rgb(255 0 0 / 0.14), inset -1px 0 rgb(255 0 0 / 0.14);
}

/* Show only as many columns as the breakpoint uses */
.grid-overlay-columns span:nth-child(n + 3) { display: none; }

@media (min-width: 48rem) {
  .grid-overlay-columns span:nth-child(n + 3) { display: block; }
}