/* ==========================================================================
   mickeyhosel.com
   Colors come from the Polarmatic visor patch: dark brown, orange, mustard,
   teal and white. Mobile first; the desktop layout starts at 960px.
   After editing this file, bump the ?v= number where index.html and
   404.html link to it (the CSS is cached for a year).
   ========================================================================== */

/* Barlow and Barlow Condensed, served from /fonts (latin subset, from Google
   Fonts; SIL Open Font License, see /fonts/LICENSE.txt). Self-hosted so the
   first paint doesn't wait on a second connection. */
@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/barlow-condensed-800-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-condensed-700.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow-600.woff2") format("woff2");
}

:root {
  /* Straight from the patch. */
  --brown: #3b2314;
  --orange: #e0732c;
  --mustard: #e3a92c;
  --teal: #2a8c8c;
  --cream: #fbf6ea;

  /* Shades of those for backgrounds and readable text. Contrast is noted
     against the color each one sits on. */
  --bg: #25160c;            /* page background */
  --bg-deep: #170d07;       /* footer, hard shadows */
  --panel: var(--brown);    /* cards */
  --panel-edge: #54331e;
  --orange-btn: #c4501a;    /* button fill: white text 4.7:1 */
  --orange-btn-hover: #cf5a1f;
  --mustard-hover: #ecb945;
  --teal-btn: #1f7272;      /* button fill: white text 5.7:1 */
  --teal-btn-hover: #237f7f;
  --teal-text: #3fa9a9;     /* teal words on bg 5.8:1, on panels 4.9:1 */
  --cream-dim: #cdb99f;     /* fine print: 9:1 on bg */
  --ink: #25160c;           /* dark text on cream and mustard */

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --gutter: 16px;
  --max: 1080px;
  --radius: 6px;
  --shadow: 4px 4px 0 var(--bg-deep);

  /* Faint print grain on the page background. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .8 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

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

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg) var(--grain);
  color: var(--cream);
  font: 400 1.0625rem/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

p { margin: 0 0 1rem; }

a { color: var(--mustard); text-underline-offset: .15em; }
a:hover { color: var(--mustard-hover); }

:focus-visible {
  outline: 3px solid var(--mustard);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-height: 52px;
  padding: .65rem 1.35rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--orange-btn);
  color: #fff;
  box-shadow: var(--shadow);
  font: 700 1.375rem/1 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.btn:hover { background: var(--orange-btn-hover); color: #fff; }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--bg-deep); }

.btn__arrow {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.btn--hero, .btn--wide { display: flex; width: 100%; }
.btn--hero { min-height: 58px; font-size: 1.5rem; }

.btn--teal { background: var(--teal-btn); }
.btn--teal:hover { background: var(--teal-btn-hover); }

.btn--mustard { background: var(--mustard); color: var(--ink); }
.btn--mustard:hover { background: var(--mustard-hover); color: var(--ink); }

/* ---------- Shared pieces ---------- */

/* The video card: dark panel, orange bar on the left, mustard labels. */
.card {
  background: var(--panel);
  border-left: 6px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow);
  padding: 14px 16px;
}

.card__label {
  margin: 0 0 .3rem;
  color: var(--mustard);
  font: italic 800 1.5rem/1.05 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
}

.kicker {
  margin: 0;
  color: var(--teal-text);
  font: 700 1rem/1 var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.section__title {
  margin: .3rem 0 1.1rem;
  color: var(--cream);
  font: italic 800 clamp(2.6rem, 12vw, 4.25rem)/.9 var(--font-display);
  text-transform: uppercase;
  text-shadow: .05em .05em 0 var(--bg-deep);
}

.lede { font-size: 1.125rem; font-weight: 600; }

/* Mickey talking: his face and a speech bubble. Plain-voice text never uses this. */
.say {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 0 0 1.4rem;
}
.say__face {
  flex: none;
  width: 48px; height: 48px;
  border: 2px solid var(--mustard);
  border-radius: 50%;
  background: var(--panel);
  object-fit: cover;
}
.say__text {
  max-width: 36rem;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  background: var(--cream);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
}

/* Plain outside voice. */
.fineprint {
  max-width: 44rem;
  color: var(--cream-dim);
  font-size: .9375rem;
}

/* Three stripes from the patch, between the hero and everything else. */
.stripes {
  height: 22px;
  background: linear-gradient(
    var(--orange) 0 6px, transparent 6px 8px,
    var(--mustard) 8px 14px, transparent 14px 16px,
    var(--teal) 16px 22px);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 14px var(--gutter) 34px;
  --ray-x: 50%;
  --ray-y: 20%;
}

/* Sunburst rays, faded like an old patch. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-conic-gradient(from -2deg at var(--ray-x) var(--ray-y),
    var(--orange) 0deg 5deg, transparent 5.4deg 14.6deg,
    var(--mustard) 15deg 20deg, transparent 20.4deg 29.6deg,
    var(--teal) 30deg 35deg, transparent 35.4deg 45deg);
  opacity: .32;
  -webkit-mask-image: radial-gradient(circle at var(--ray-x) var(--ray-y), #000 0, #000 18%, transparent 68%);
  mask-image: radial-gradient(circle at var(--ray-x) var(--ray-y), #000 0, #000 18%, transparent 68%);
}

.hero__inner {
  display: grid;
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
}

/* On a phone the photo is the hair-to-badge crop (941 x 1165). It narrows on
   short screens so the button stays above the fold: 330px is roughly the
   name, title, pitch and button. */
.hero__media {
  justify-self: center;
  width: min(100%, 452px);
  width: min(100%, 452px, max(170px, calc((100vh - 330px) * .808)));
  width: min(100%, 452px, max(170px, calc((100svh - 330px) * .808)));
  aspect-ratio: 941 / 1165;
  margin: 0;
  overflow: hidden;
  border: 3px solid var(--cream);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 5px 5px 0 var(--bg-deep);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__copy { max-width: 452px; width: 100%; justify-self: center; }

.hero__name {
  margin: 0;
  color: var(--cream);
  font: italic 800 clamp(3rem, 15vw, 6.5rem)/.88 var(--font-display);
  letter-spacing: .005em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: .045em .045em 0 var(--orange-btn);
}

.hero__role {
  margin: .4rem 0 0;
  color: var(--mustard);
  font: italic 800 clamp(1.3rem, 6vw, 1.85rem)/1.05 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* His on-air pause: "...Interim." lands a beat after "Head Professional". */
.hero__interim {
  opacity: 0;
  animation: interim .7s ease-out 1.1s forwards;
}
@keyframes interim {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero__pitch {
  margin: .8rem 0 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

.hero__price {
  margin: .7rem 0 0;
  color: var(--cream-dim);
  font-size: .9375rem;
  text-align: center;
}

.stats {
  display: grid;
  gap: 2px;
  margin: 1.4rem 0 0;
}
.stats div {
  display: flex;
  flex-wrap: wrap;
  column-gap: .3em;
  font: italic 800 1.3rem/1.2 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.stats dt { color: var(--mustard); }
.stats dd { margin: 0; color: var(--cream); }

/* ---------- Sections ---------- */

.section { padding: 52px var(--gutter); }
.section--tight { padding-top: 8px; padding-bottom: 20px; }

.section__inner {
  max-width: var(--max);
  margin: 0 auto;
}

/* The process */

.steps {
  display: grid;
  gap: 14px;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}
.step p { margin: 0; }
.step__num { color: var(--orange); }

#process .btn--wide { margin-bottom: 1.6rem; }

/* The mailbag: an airmail envelope in patch colors. */
.mailbag {
  padding: 26px 18px 18px;
  border: 10px solid transparent;
  border-image: repeating-linear-gradient(-45deg,
    var(--orange) 0 10px, var(--cream) 10px 20px,
    var(--teal) 20px 30px, var(--cream) 30px 40px) 10;
  background: var(--panel) padding-box;
}
.mailbag .btn { width: 100%; }
.mailbag__copy {
  margin: .9rem 0 1rem;
  color: var(--cream-dim);
  font-size: .9375rem;
}
.mailbag__address {
  color: var(--cream);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.btn-copy {
  min-height: 44px;
  margin-left: .25rem;
  padding: 0 .9rem;
  border: 2px solid var(--cream-dim);
  border-radius: var(--radius);
  background: transparent;
  color: var(--cream);
  font: 700 1rem/1 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-copy:hover { border-color: var(--cream); }

/* Channels */

.channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.channel {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  border-left: 6px solid var(--teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--cream);
  font: 700 1.375rem/1 var(--font-display);
  letter-spacing: .03em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .15s ease;
}
.channel:hover { background: var(--panel-edge); color: #fff; }
.channel svg { flex: none; width: 26px; height: 26px; fill: currentColor; }

/* Books */

.books {
  display: grid;
  gap: 16px;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}
.book {
  display: grid;
  grid-template-columns: 104px 1fr;
  grid-template-rows: 1fr auto;
  gap: 14px 16px;
  align-items: start;
  padding: 16px;
}
.book__cover {
  width: 104px;
  border-radius: 3px;
  box-shadow: 3px 3px 0 var(--bg-deep);
}
.book__title {
  margin: 0 0 .35rem;
  font: italic 800 1.6rem/1 var(--font-display);
  text-transform: uppercase;
}
.book__blurb { margin: 0; }
.book__btn { grid-column: 1 / -1; }

.book--bundle { grid-template-columns: 136px 1fr; }
.book--bundle .book__cover {
  width: 136px;
  border-radius: 0;
  box-shadow: none;
}

.shop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
  margin: 0;
}
.shop__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 700 1.375rem/1 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.shop__credit { color: var(--cream-dim); font-size: .9375rem; }

/* Glossary */

.terms {
  display: grid;
  gap: 12px;
  margin: 0;
}
.term {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-left: 6px solid var(--mustard);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.term dt {
  order: 2;
  margin: 0 0 .35rem;
  font: italic 800 1.45rem/1.02 var(--font-display);
  text-transform: uppercase;
}
.term dd { order: 3; margin: 0; }
.term .term__ep {
  order: 1;
  margin: 0 0 .4rem;
  color: var(--teal-text);
  font: 700 .95rem/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- Footer ---------- */

.footer {
  padding: 40px var(--gutter) 56px;
  background: var(--bg-deep);
  color: var(--cream-dim);
  font-size: .9375rem;
}
.footer__inner { max-width: var(--max); margin: 0 auto; }
.footer__ai {
  max-width: 44rem;
  padding: 14px 16px;
  border: 2px solid var(--panel-edge);
  border-radius: var(--radius);
  color: var(--cream);
  font-size: 1rem;
}
.footer__sponsor {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer__sponsor img { flex: none; width: 96px; }

/* ---------- 404 ---------- */

.lost {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 40px var(--gutter);
  text-align: center;
}
.lost__inner { max-width: 30rem; }
.lost__art {
  width: min(240px, 60vw);
  margin: 0 auto 1.4rem;
  border: 3px solid var(--cream);
  border-radius: 10px;
  box-shadow: 5px 5px 0 var(--bg-deep);
}
.lost__code {
  margin: 0;
  color: var(--mustard);
  font: italic 800 6rem/.9 var(--font-display);
  text-shadow: .05em .05em 0 var(--orange-btn);
}
.lost__line {
  margin: .6rem 0 1.6rem;
  font: italic 800 2rem/1.05 var(--font-display);
  text-transform: uppercase;
}

/* ---------- Wider screens ---------- */

@media (min-width: 640px) {
  .section { padding-top: 64px; padding-bottom: 64px; }
  .section--tight { padding-top: 8px; padding-bottom: 24px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .btn--wide { display: inline-flex; width: auto; padding-left: 2rem; padding-right: 2rem; }
  .mailbag { padding: 34px 32px 24px; }
  .mailbag .btn { width: auto; }
  .channels { grid-template-columns: repeat(4, 1fr); }
  .books { grid-template-columns: repeat(2, 1fr); }
  .book--bundle {
    grid-column: 1 / -1;
    grid-template-columns: 200px 1fr minmax(220px, auto);
    grid-template-rows: auto;
    align-items: center;
  }
  .book--bundle .book__cover { width: 200px; }
  .book--bundle .book__btn { grid-column: auto; }
  .terms { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .hero {
    padding: 56px var(--gutter) 64px;
    --ray-x: 74%;
    --ray-y: 46%;
  }
  .hero__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 56px;
  }
  /* The whole 9:16 shot, sized to fit the window. */
  .hero__media {
    order: 2;
    width: auto;
    max-width: none;
    height: clamp(520px, calc(100vh - 120px), 760px);
    aspect-ratio: 9 / 16;
  }
  .hero__copy { max-width: 560px; justify-self: start; }
  .hero__pitch { font-size: 1.375rem; max-width: 30ch; }
  .btn--hero { display: inline-flex; width: auto; padding-left: 2.2rem; padding-right: 2.2rem; }
  .hero__price { text-align: left; }
  .stats { max-width: 440px; }
  .terms { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__interim { opacity: 1; animation: none; }
  .btn, .channel { transition: none; }
}