/* literally: layout. Page frame, header and phone menu, hero, scribble bands, page header, footer. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--crayon-black);
  font-family: var(--body);
  font-size: var(--text-base);
  line-height: var(--leading);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}
body.nav-open { position: fixed; inset-inline: 0; overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--water-blue-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--crayon-black); }
:focus-visible { outline: 3px solid var(--water-blue-ink); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--hand); font-weight: 400; line-height: 1.1; margin: 0 0 var(--space-2); text-wrap: balance; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p { margin: 0 0 var(--space-2); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.site-main { flex: 1 0 auto; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--paper); color: var(--crayon-black); padding: 12px 16px; border: var(--line); border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Header */
.site-header { background: var(--paper); padding-top: env(safe-area-inset-top, 0px); position: relative; z-index: 20; }
.site-header__inner { display: flex; align-items: center; gap: var(--space-3); min-height: 84px; }
.wordmark { line-height: 0; }
.wordmark a { display: inline-block; text-decoration: none; color: var(--crayon-black); }
.wordmark img { width: auto; display: block; }
.wordmark__text { font-family: var(--hand); line-height: 1; letter-spacing: 0.01em; }
.site-header__mark { margin-right: auto; }
.site-header__mark img { height: 46px; }
.site-header__mark .wordmark__text { font-size: 2.6rem; }

.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-3); }
.site-nav__list a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px;
  font-family: var(--hand); font-size: 1.5rem; color: var(--crayon-black); text-decoration: none; position: relative;
}
.site-nav__list a::after,
.crayon-underline::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: 4px; height: 10px;
  background: var(--crayon); opacity: 0; transition: opacity 0.15s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7c16-4 30 3 48-1s34-4 50 0 12 1 16-1' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7c16-4 30 3 48-1s34-4 50 0 12 1 16-1' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.site-nav__list a:hover::after,
.site-nav__list .current-menu-item > a::after,
.site-nav__list .current_page_item > a::after { opacity: 1; }
.site-nav__list li:nth-child(4n+2) a { --crayon: var(--sea-green); }
.site-nav__list li:nth-child(4n+3) a { --crayon: var(--mane-orange); }
.site-nav__list li:nth-child(4n+4) a { --crayon: var(--sun-yellow); }

.icon { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: url(#crayon-wobble); }
.cart-link {
  position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px;
  color: var(--crayon-black); text-decoration: none;
}
.cart-count {
  position: absolute; top: 2px; right: 0; min-width: 22px; height: 22px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 11px 9px 12px 10px;
  background: var(--sun-yellow); color: var(--crayon-black); font-size: 0.8125rem; font-weight: 800; line-height: 1;
}
.cart-count.is-empty { display: none; }
.menu-toggle {
  display: none; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--crayon-black); cursor: pointer;
}

@media (max-width: 820px) {
  .site-header__inner { min-height: 72px; gap: var(--space-1); }
  .site-header__mark img { height: 38px; }
  .site-header__mark .wordmark__text { font-size: 2.2rem; }
  .menu-toggle { display: inline-grid; place-items: center; }
  .site-nav {
    position: fixed; inset: 0; top: calc(72px + env(safe-area-inset-top, 0px)); z-index: 30;
    background: var(--paper); padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    transform: translate3d(0, 0, 0); overflow-y: auto; display: none;
  }
  .nav-open .site-nav { display: block; }
  .site-nav__list { flex-direction: column; gap: var(--space-2); }
  .site-nav__list a { font-size: 2.25rem; }
}

/* Home: the shop first, then the story band (the kids photo beside the opening line), then the steps beside the reel */
.home-shop { padding-top: var(--space-4); }
.home-shop .prose > h2:first-child { margin-top: 0; }
.story { padding-block: var(--space-2) var(--space-5); }
.story__inner {
  display: grid; gap: var(--space-4) var(--space-5); align-items: center; padding-top: var(--space-3);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
.story__photo { position: relative; margin: 0 8px; }
.story__photo::before {
  content: ""; position: absolute; inset: -8px; border: var(--line); border-radius: var(--radius);
  filter: url(#crayon-wobble); pointer-events: none; z-index: 1;
}
.story__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.story__doodle { position: absolute; z-index: 2; pointer-events: none; height: auto; }
.story__doodle--sun { width: clamp(64px, 8vw, 104px); top: -44px; right: -24px; transform: rotate(8deg); }
.story__doodle--wave { width: clamp(80px, 9vw, 128px); bottom: -30px; left: -36px; }
.story__intro { font-size: clamp(1.375rem, 1.2vw + 1rem, 1.875rem); line-height: 1.4; margin: 0; max-width: 26ch; }
@media (max-width: 900px) { .story__inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) {
  .story__doodle--wave { display: none; }
  .story__doodle--sun { width: 60px; top: -30px; right: -6px; }
}

/* How a shirt is made: the steps on the left, the reel playing on the right */
.home-how .prose--wide {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); column-gap: var(--space-6); align-items: start;
}
.home-how .prose--wide > * { grid-column: 1; }
.home-how .prose--wide > .reel { grid-column: 2; grid-row: 1 / span 6; margin: 0; }
.home-how .prose ol.steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.home-how .prose ol.steps li { padding: 0 0 0 4rem; min-height: 3.4rem; max-width: 46ch; }
@media (max-width: 760px) {
  .home-how .prose--wide { grid-template-columns: minmax(0, 1fr); }
  .home-how .prose--wide > .reel { grid-column: 1; grid-row: auto; justify-self: center; width: min(300px, 80vw); margin-top: var(--space-3); }
}

/* A reel in a crayon phone frame */
.reel__frame { position: relative; border-radius: 28px 32px 26px 34px / 32px 26px 34px 28px; }
.reel__frame::before {
  content: ""; position: absolute; inset: -9px; border: 3px solid var(--crayon-black); border-radius: 34px 38px 32px 40px / 38px 32px 40px 34px;
  filter: url(#crayon-wobble); pointer-events: none; z-index: 1;
}
.reel__video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: inherit; background: var(--paper-shade); cursor: pointer; }
.reel__sound {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 48px; height: 48px; padding: 0; border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--crayon-black); background: var(--paper); border-radius: var(--radius-small);
}
.reel__sound .reel__waves { display: none; }
.reel__sound[aria-pressed="true"] .reel__waves { display: inline; }
.reel__sound[aria-pressed="true"] .reel__mute { display: none; }

/* Scribble bands: cut from the drawings, never redrawn in CSS */
.scribble { line-height: 0; overflow: hidden; pointer-events: none; }
/* the whole band at its own shape, never trimmed (a trim slices the strokes into a straight line); its edges fade */
.scribble img { display: block; width: 100%; max-width: 1400px; min-width: 760px; height: auto; position: relative; left: 50%; transform: translateX(-50%); opacity: 0.9; }

/* Page header (every page but home) */
.page-header { padding-block: var(--space-5) var(--space-3); }
.page-header__title { margin: 0; }
.page-header__intro { font-size: 1.25rem; color: var(--pencil); max-width: 52ch; margin: var(--space-1) 0 0; }
.page-body, .shop-body, .home-body { padding-bottom: var(--space-6); }
.home-body { padding-top: var(--space-4); }
.home-body .prose > h2:first-child { margin-top: 0; }
.not-found { padding-block: var(--space-6); }

/* Footer */
.site-footer { margin-top: var(--space-5); padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
.site-footer__inner {
  display: grid; gap: var(--space-3) var(--space-5); padding-top: var(--space-3);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start;
}
.site-footer__mark img { height: 40px; }
.site-footer__mark .wordmark__text { font-size: 2.25rem; }
.site-footer__line { color: var(--pencil); margin: var(--space-1) 0 0; max-width: 36ch; }
.site-footer__list, .site-footer__credit-list { list-style: none; margin: 0; padding: 0; }
.site-footer__list { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 4px var(--space-4); }
.site-footer__list a, .site-footer__credit-list a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--crayon-black); text-decoration: none;
}
.site-footer__list a:hover, .site-footer__credit-list a:hover { text-decoration: underline; }
.site-footer__credit { display: flex; align-items: center; gap: 10px; }
.site-footer__star { width: 26px; height: auto; transform: rotate(12deg); }
.site-footer__copy { color: var(--pencil); font-size: var(--text-small); margin: 0; align-self: center; }
@media (max-width: 720px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
}