/* magnison.dev
   Sizes come from design/phone.html for narrow screens and from
   design/desktop.html from 720px up. Hover and focus states come from
   design/pieces.png. */

/* Fonts: Latin subsets, self-hosted (fonts/OFL.txt) */

@font-face {
  font-family: "Big Shoulders";
  src: url("fonts/big-shoulders-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Big Shoulders Stencil";
  src: url("fonts/big-shoulders-stencil-latin-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Stand-ins while Big Shoulders loads: a bold system face shrunk to
   Big Shoulders' width, so text wraps the same way and nothing jumps when
   the real font arrives. Each role gets its own size, measured against
   Arial Bold (Windows, macOS, iOS; Liberation Sans on Linux has the same
   widths) and Roboto Bold (Android). If a local font is missing, the
   browser moves on to the next face in the stack. */

@font-face {
  font-family: "Name Fallback Arial";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
  font-weight: 100 900;
  size-adjust: 70%;
}

@font-face {
  font-family: "Name Fallback Roboto";
  src: local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 100 900;
  size-adjust: 78%;
}

@font-face {
  font-family: "Page Title Fallback Arial";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
  font-weight: 100 900;
  size-adjust: 73.5%;
}

@font-face {
  font-family: "Page Title Fallback Roboto";
  src: local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 100 900;
  size-adjust: 79.5%;
}

@font-face {
  font-family: "Title Fallback Arial";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
  font-weight: 100 900;
  size-adjust: 83%;
}

@font-face {
  font-family: "Title Fallback Roboto";
  src: local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 100 900;
  size-adjust: 88%;
}

/* Tokens */

:root {
  --marigold: #FFC233;
  --navy: #14213D;
  --quiet-navy: #2F3A57;
  --mist: #D7DCE8;

  --font-name: "Big Shoulders", "Name Fallback Arial", "Name Fallback Roboto", "Arial Narrow", sans-serif;
  --font-page-title: "Big Shoulders", "Page Title Fallback Arial", "Page Title Fallback Roboto", "Arial Narrow", sans-serif;
  --font-display: "Big Shoulders", "Title Fallback Arial", "Title Fallback Roboto", "Arial Narrow", sans-serif;
  --font-stencil: "Big Shoulders Stencil", "Big Shoulders", "Title Fallback Arial", "Title Fallback Roboto", sans-serif;
  --font-text: "Public Sans", system-ui, sans-serif;

  --gutter: 16px;
  --rule: 4px;
  --focus: var(--navy);
}

/* Base */

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

[hidden] {
  display: none !important;
}

html {
  background: var(--marigold);
  color: var(--navy);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 24px;
}

h1,
h2,
p,
figure,
fieldset,
ol,
ul {
  margin: 0;
}

ol,
ul {
  padding: 0;
}

img,
svg {
  display: block;
}

button,
input {
  font: inherit;
  color: inherit;
  margin: 0;
}

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

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Header and footer */

.site-header {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.1px;
}

a.site-name {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.site-footer {
  margin-top: auto;
  padding-top: 24px;
  padding-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 14px;
  line-height: 20px;
}

.footer-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The main button */

/* The 3px border shows only on hover; it's taken out of the padding so
   the button keeps the reference's size. */
.button {
  height: 56px;
  padding: 0 33px;
  border: 3px solid var(--navy);
  border-radius: 2px;
  background: var(--navy);
  color: var(--marigold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
}

.button:hover {
  background: var(--marigold);
  color: var(--navy);
}

/* The name, the line under it and the phone */

.hero {
  padding-top: 4px;
}

.name {
  font-family: var(--font-name);
  font-size: min(33.01vw, 160px);
  line-height: 0.82;
  font-weight: 900;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.tagline {
  margin-top: 18px;
  max-width: 20em;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  text-wrap: balance;
}

.cta {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cta-note {
  font-size: 14px;
  line-height: 20px;
  color: var(--quiet-navy);
  text-align: center;
}

/* Narrower than 230px only when the column is under 281px (screens
   under about 313px), so the tilted phone never sticks out past the edge. */
.phone {
  width: min(230px, 81.85%);
  margin: 32px 0 4px calc(50% - 101px);
  padding: 8px;
  border-radius: 36px;
  background: var(--navy);
  transform: rotate(-6deg);
  box-shadow: 0 24px 40px rgba(20, 33, 61, 0.28);
}

.phone picture {
  display: block;
}

.phone img {
  width: 100%;
  height: auto;
  border-radius: 28px;
}

/* The rules */

.rule {
  padding: 18px 0 24px;
  border-top: var(--rule) solid var(--navy);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0 12px;
}

.rule:nth-child(5) {
  padding-bottom: 28px;
}

.rule-number {
  font-family: var(--font-stencil);
  font-size: 64px;
  line-height: 52px;
  font-weight: 900;
}

.rule-body,
.rule-head {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rule-title {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 38px;
  font-weight: 800;
}

/* Keeps lines readable on small tablets; phones never reach it */
.rule-text {
  max-width: 34em;
}

/* Rule 6: the tip block */

.rule-tip {
  --focus: var(--marigold);
  margin-inline: calc(-1 * var(--gutter));
  padding: 18px var(--gutter) 30px;
  background: var(--navy);
  color: var(--marigold);
}

.rule-tip .rule-body {
  gap: 16px;
}

.rule-tip .rule-text {
  color: var(--mist);
}

.tip-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tip-group {
  min-width: 0;
  padding: 0;
  border: 0;
}

.chips,
.toggle {
  position: relative;
  display: grid;
}

.chips {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

/* The radio inputs stay in the page for keyboards and screen readers;
   their labels are what you see. */
.choice {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.chip {
  height: 52px;
  border: 2px solid var(--marigold);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}

.chip-other {
  font-size: 15px;
}

.chip:hover {
  box-shadow: inset 0 0 0 1px var(--marigold);
}

.choice:checked + .chip,
.choice:checked + .toggle-option {
  background: var(--marigold);
  color: var(--navy);
}

/* The rings use :focus, then :not(:focus-visible) takes them off after
   a click. Browsers without :focus-visible (Safari before 15.4) skip
   that second rule, so keyboard users there still get a ring. */
.choice:focus + .chip {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}


.other-field {
  height: 52px;
  margin-top: 8px;
  padding: 0 14px;
  border: 2px solid var(--marigold);
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.other-field:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.other-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.other-input:focus-visible {
  outline: none;
}

.tip-error {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.tip-error:not(:empty) {
  margin-top: 8px;
}

.toggle {
  height: 48px;
  border: 2px solid var(--marigold);
  border-radius: 2px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.toggle-option {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.toggle-option:hover {
  box-shadow: inset 0 0 0 1px var(--marigold);
}

/* Inside the toggle there's no room for an outside ring, so it's drawn
   inside the option, in the option's own text color. */
.choice:focus + .toggle-option {
  outline: 3px solid currentColor;
  outline-offset: -7px;
}

.choice:focus:not(:focus-visible) + .chip,
.choice:focus:not(:focus-visible) + .toggle-option {
  outline: none;
}

.tip-submit {
  height: 56px;
  padding: 0;
  border: 3px solid var(--marigold);
  border-radius: 2px;
  background: var(--marigold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.tip-submit:hover {
  background: var(--navy);
  color: var(--marigold);
}

.tip-note {
  font-size: 13px;
  line-height: 20px;
  color: var(--mist);
}

/* Follow along */

.follow {
  padding-top: 28px;
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
}

.follow-head {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.follow-title {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 38px;
  font-weight: 800;
}

.follow-text {
  color: var(--quiet-navy);
}

.link-row {
  min-height: 96px;
  padding: 12px 0;
  border-top: var(--rule) solid var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.link-row:last-child {
  border-bottom: var(--rule) solid var(--navy);
}

.link-label {
  display: flex;
  flex-direction: column;
}

.link-name {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 48px;
  font-weight: 800;
}

.link-handle {
  font-size: 15px;
  line-height: 22px;
  color: var(--quiet-navy);
}

.link-arrow {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--navy);
  color: var(--marigold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.link-arrow svg {
  width: 24px;
  height: 24px;
}

/* Hover or focus fills the row (pieces.png, "Links") */
.link-row:hover,
.link-row:focus-visible {
  padding-inline: 12px;
  background: var(--navy);
  color: var(--marigold);
}

.link-row:hover .link-handle,
.link-row:focus-visible .link-handle {
  color: var(--mist);
}

.link-row:hover .link-arrow,
.link-row:focus-visible .link-arrow {
  background: var(--marigold);
  color: var(--navy);
}

/* The privacy, thank-you and 404 pages */

.page {
  padding-top: 8px;
  padding-bottom: 24px;
}

.page-title,
.thanks-title {
  font-family: var(--font-page-title);
  font-size: min(18vw, 96px);
  line-height: 0.82;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.page-date {
  margin-top: 16px;
  color: var(--quiet-navy);
}

.page-button {
  margin-top: 28px;
}

.prose {
  max-width: 40em;
  margin-top: 32px;
}

.prose-intro {
  margin-bottom: 28px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

.prose section {
  padding: 18px 0 24px;
  border-top: var(--rule) solid var(--navy);
}

.prose h2 {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 38px;
  font-weight: 800;
}

.prose p + p {
  margin-top: 12px;
}

.prose ul {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 6px;
}

.prose a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A link on its own line, tall enough to tap */
.prose .block-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.thanks-card {
  --focus: var(--marigold);
  max-width: 720px;
  margin-top: 16px;
  padding: 24px 20px 28px;
  background: var(--navy);
  color: var(--marigold);
}

.thanks-text {
  margin-top: 16px;
  color: var(--mist);
  text-wrap: balance;
}

/* "THANK YOU." is about 4.5em wide: these sizes keep it on one line
   inside the card at every width. Its stand-in is the name's, which is
   never wider than the real font. */
.thanks-title {
  font-family: var(--font-name);
  font-size: min(16.5vw, 96px);
}

.thanks-text + .thanks-text {
  margin-top: 4px;
}

.thanks-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--marigold);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* From 720px: the desktop reference */

@media (min-width: 720px) {
  :root {
    --gutter: 48px;
    --rule: 6px;
  }

  body {
    font-size: 18px;
    line-height: 28px;
  }

  .site-header {
    min-height: 80px;
  }

  .site-name {
    font-size: 17px;
  }

  .site-footer {
    padding-top: 48px;
    padding-bottom: 32px;
    font-size: 15px;
    line-height: 22px;
  }

  .button {
    height: 60px;
    font-size: 18px;
  }

  .hero {
    padding-top: 8px;
  }

  .name {
    font-size: clamp(88px, 17vw, 260px);
    line-height: 0.8;
    letter-spacing: -0.01em;
  }

  .hero-body {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px 64px;
  }

  .hero-text {
    flex: 1 1 480px;
    min-width: 0;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .tagline {
    margin-top: 0;
    max-width: 17em;
    font-size: clamp(24px, 2.5vw, 36px);
    line-height: 1.2;
  }

  .cta {
    margin-top: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
  }

  .cta-note {
    font-size: 16px;
    line-height: 24px;
    text-align: left;
  }

  /* Pulled up over the end of the name on wide screens */
  .phone {
    flex: none;
    width: 350px;
    margin: clamp(-130px, calc(60px - 12vw), 0px) 16px 0 auto;
    padding: 10px;
    border-radius: 50px;
    box-shadow: 0 36px 60px rgba(20, 33, 61, 0.3);
  }

  .phone img {
    border-radius: 40px;
  }

  .rules-section {
    margin-top: 72px;
  }

  .rules,
  .follow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 40px;
  }

  .rule,
  .rule:nth-child(5) {
    padding: 22px 0 44px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .rule-number {
    font-size: 88px;
    line-height: 70px;
  }

  .rule-body,
  .rule-head,
  .rule-tip .rule-body {
    gap: 14px;
  }

  .rule-title {
    font-size: 52px;
    line-height: 52px;
  }

  .rule-text {
    max-width: 24em;
  }

  .rule-tip {
    margin-inline: 0;
    padding: 22px 28px 32px;
  }

  .rule-tip .rule-text {
    max-width: none;
  }

  .tip-form {
    margin-top: 4px;
  }

  .chip,
  .other-field {
    height: 56px;
    font-size: 18px;
  }

  .chip-other {
    font-size: 16px;
  }

  .toggle {
    height: 50px;
  }

  .toggle-option {
    font-size: 16px;
  }

  .tip-submit {
    height: 60px;
    font-size: 18px;
  }

  .tip-note {
    font-size: 14px;
  }

  .follow {
    margin-top: 40px;
    padding-top: 0;
    padding-bottom: 0;
    align-items: end;
  }

  .follow-head {
    margin-bottom: 0;
    padding-bottom: 28px;
  }

  .follow-title {
    font-size: 52px;
    line-height: 52px;
  }

  .link-row {
    min-height: 140px;
    padding: 18px 0 28px;
    align-items: flex-end;
  }

  .link-name {
    font-size: 72px;
    line-height: 70px;
  }

  .link-handle {
    font-size: 16px;
    line-height: 24px;
  }

  .link-arrow {
    width: 64px;
    height: 64px;
  }

  .link-arrow svg {
    width: 28px;
    height: 28px;
  }

  .page {
    padding-top: 8px;
    padding-bottom: 48px;
  }

  .page-title,
  .thanks-title {
    font-size: clamp(88px, 11vw, 160px);
    line-height: 0.8;
  }

  .thanks-title {
    font-size: clamp(88px, 11vw, 140px);
  }

  .page-button {
    display: inline-flex;
    margin-top: 40px;
  }

  .prose {
    margin-top: 48px;
  }

  .prose-intro {
    font-size: 24px;
    line-height: 32px;
  }

  .prose section {
    padding: 22px 0 32px;
  }

  .prose h2 {
    margin-bottom: 14px;
    font-size: 52px;
    line-height: 52px;
  }

  .thanks-card {
    margin-top: 24px;
    padding: 36px 40px 40px;
  }

  .thanks-text {
    margin-top: 20px;
  }
}

/* The rules and Follow along go to two columns, then three, at the
   widths where desktop.html's auto-fit grid does. */

@media (min-width: 856px) {
  .rules,
  .follow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .follow-head {
    grid-column: 1 / -1;
  }

  .link-row:last-child {
    border-bottom: 0;
  }
}

@media (min-width: 1256px) {
  .rules,
  .follow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .follow-head {
    grid-column: auto;
  }
}

/* Motion: only small color changes, and none at all if you ask for less */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .button,
  .chip,
  .toggle-option,
  .tip-submit,
  .link-row,
  .link-arrow {
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s, padding 0.15s;
  }
}

/* Windows high contrast drops backgrounds, so mark the picked options another way */

@media (forced-colors: active) {
  .choice:checked + .chip,
  .choice:checked + .toggle-option {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .choice:focus + .chip {
    outline-color: CanvasText;
  }
}

/* The narrowest phones: a little more room inside the Other chip */

@media (max-width: 339px) {
  .chips {
    gap: 6px;
  }

  .chip-other {
    font-size: 14px;
  }
}

@media (max-width: 299px) {
  .chips {
    gap: 4px;
  }

  .chip-other {
    font-size: 13px;
  }
}