/* Doughbry's website styles. Every page loads this file first.
   Built on Brand Guidelines v1.3 (October 2026). Colors and type match pages 14 and 17 of the guide (rule R130).
   The R numbers in the notes point at the numbered rules in the guide.
   The look stays calm when nothing is moving (the guide: "Bold color, calm layouts").
   The play is in the kit of parts and in the motion (the guide: "Warm, generous, a little playful"). */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/Archivo-latin.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;      /* the site is always light: phones in dark mode must not restyle the form or the scrollbars */
  /* Official colors (R62). Use these exact values, never a tint or a shade (R63). */
  --orange: #E4562A;   /* Screen only. Print is CMYK 0, 80, 95, 0. Leads everything. */
  --white: #FFFFFF;    /* The default background (R67). */
  --cream: #EFEFE6;    /* Warm panels. */
  --ink: #1E1916;      /* Words. Reads on orange at 4.7 to 1. */
  --yellow: #FFC413;   /* Accent, used small. */
  --amber: #F48220;
  --lime: #ADD03F;
  --forest: #145F48;   /* Accent for small details only. Never a background (R65). */
  --swirl: #CF4A22;    /* The flat stand-in for the swirl on orange (R86). */
  --ink-soft: rgba(30, 25, 22, 0.7);    /* lighter ink, for captions and fine print only */
  --line: rgba(30, 25, 22, 0.16);       /* a hairline where white meets white */

  /* One family (R75). Archivo is the official stand-in for Neue Haas Grotesk. */
  --font-brand: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Sizes. Body is 17 to 18 px, headlines are 3 to 5 times that (R79), nothing is under 12 px (R85). */
  --fine: 0.8125rem;
  --label: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --body: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --lede: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4rem);
  --h3: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --h2: clamp(2.1rem, 1.5rem + 2.7vw, 3.5rem);
  --h1: clamp(2.9rem, 1.6rem + 5.6vw, 5.6rem);

  /* Space and shape */
  --gutter: clamp(1.25rem, 0.7rem + 2.4vw, 2.5rem);
  --section-y: clamp(4rem, 2.6rem + 6.5vw, 8rem);
  --max: 1200px;
  --radius: 14px;      /* panels are softly rounded, all the same (R98). Pills are for buttons only. */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.2, 1.25, 0.35, 1);    /* lands a touch past the mark, then settles */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-brand);
  font-size: var(--body);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
a, button { -webkit-tap-highlight-color: rgba(30, 25, 22, 0.12); }      /* a soft ink flash on tap instead of the phone's default gray box */
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--white); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* Type roles. Headlines: Black, Title Case, tight leading (R27, R75). */
h1, h2, h3, .h1, .h2, .h3 { font-weight: 900; line-height: 1.02; letter-spacing: -0.015em; text-wrap: balance; }
h1, .h1 { font-size: var(--h1); line-height: 0.98; }
h2, .h2 { font-size: var(--h2); }
h3, .h3 { font-size: var(--h3); line-height: 1.08; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
.lede { font-size: var(--lede); line-height: 1.4; font-weight: 500; }
.kicker {             /* subheads and labels: spaced capitals, five words or fewer (R27, R82) */
  font-weight: 900; font-size: var(--label); line-height: 1.3;
  letter-spacing: 0.3em; text-transform: uppercase;
}
.fine { font-size: var(--fine); color: var(--ink-soft); }
strong, b { font-weight: 700; }

/* Layout */
.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.stack > * + * { margin-top: var(--stack, 1.1rem); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Bands. Every screen is led by orange or by white (R66). Cream is for warm panels (R67).
   On orange: big words are white, small words are ink (R71). Small text reads best on white. */
.band-orange { background: var(--orange); color: var(--ink); position: relative; isolation: isolate; overflow: hidden; overflow: clip; }   /* clip: the band crops its drawings and can never be scrolled sideways */
.band-orange h1, .band-orange h2, .band-orange h3 { color: var(--white); }
.band-white { background: var(--white); color: var(--ink); }
.band-cream { background: var(--cream); color: var(--ink); }
.band-white h2, .band-cream h2 { color: var(--orange); }     /* orange is for headlines on white, never sentences (R73) */

/* The swirl: one big soft curve, on orange only, one per screen (R86, R87) */
.swirl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.swirl path { fill: var(--swirl); }

/* Panels: flat, softly rounded, no borders and no shadows (R98, R99) */
.panel { background: var(--cream); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); }
.band-cream .panel { background: var(--white); }

/* Buttons: the only pill shapes on the site. Labels are short and Black.
   White words sit on the orange pill at 19 px or more so they stay readable (R71). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 52px; padding: 0.7em 1.6em; border-radius: 999px; border: 0;
  background: var(--orange); color: var(--white);
  font-weight: 900; font-size: 1.1875rem; line-height: 1.1; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.18s, color 0.18s, transform 0.3s var(--spring);
}
/* The tip and lift are for a mouse. On a touch screen a tapped button would stay tipped, so there it only presses in. */
@media (hover: hover) { .btn:hover { background: var(--ink); color: var(--white); transform: translateY(-3px) rotate(-1.5deg); } }
.btn:active { background: var(--ink); color: var(--white); transform: translateY(1px) scale(0.97); transition-duration: 0.18s, 0.18s, 0.08s; }
.btn--white { background: var(--white); color: var(--ink); }     /* on orange: a white pill with ink words */
.btn--sm { min-height: 46px; padding: 0.45em 1.15em; }     /* same 19 px words, tighter pill */
.textlink { font-weight: 900; font-size: 1.1875rem; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.22em; display: inline-flex; align-items: center; min-height: 44px; }
.band-orange .textlink { color: var(--white); }
.more { margin-top: clamp(1.1rem, 3vw, 1.7rem); }          /* a text link that leads on to the next page */
.textlink:hover { text-decoration-thickness: 5px; }

/* Header: always the white wordmark on orange (R47). It stays on screen, so it is the one logo on every screen (R37). */
.skip-link { position: absolute; left: 12px; top: 12px; transform: translateY(-400%); z-index: 100; background: var(--ink); color: var(--white); padding: 0.75em 1.1em; border-radius: 10px; font-weight: 700; }
.skip-link:focus { transform: none; }
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem max(var(--gutter), calc((100% - var(--max)) / 2));
  color: var(--white); background: var(--orange);
}
.site-header .brand { display: block; width: clamp(138px, 10vw + 86px, 188px); flex: none; padding: 9px 0; }   /* the wordmark never goes under 96 px (R42) */
.site-header .brand img { width: 100%; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.site-nav > a:not(.btn) { font-weight: 900; font-size: 1.1875rem; text-decoration: none; padding: 0.55em 0.1em; border-bottom: 3px solid transparent; }
.site-nav > a:not(.btn):hover, .site-nav > a[aria-current="page"] { border-bottom-color: var(--white); }
.nav-toggle { display: none; }
.nav-more { display: none; }       /* the extras in the phone menu: social buttons and the leaf */
/* The menu button turns into an X. Each line first slides to the middle, then turns, so the two cross dead center.
   (Written the other way round the lines turn first and end up crossing off to one side.) */
.nav-toggle__icon path { transition: transform 0.32s var(--spring), opacity 0.15s; transform-origin: 12px 12px; }
.nav-open .nav-toggle__icon .l1 { transform: rotate(45deg) translateY(5px); }
.nav-open .nav-toggle__icon .l2 { opacity: 0; }
.nav-open .nav-toggle__icon .l3 { transform: rotate(-45deg) translateY(-5px); }
@media (max-width: 900px) {
  html { scroll-padding-top: 68px; }
  /* The menu only folds away when scripts are running. With scripts off the links simply sit under the logo. */
  html:not(.js) .site-header { flex-wrap: wrap; row-gap: 0; }
  html:not(.js) .site-nav { width: 100%; flex-wrap: wrap; gap: 0 1.1rem; }
  .js .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border-radius: 50%; border: 0; background: var(--white); color: var(--ink); cursor: pointer;
  }
  .js .site-nav {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.2rem;
    background: var(--orange); padding: 5.5rem var(--gutter) 3rem;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }
  .js .site-nav { overflow: hidden auto; justify-content: safe center; }     /* on a very short screen the menu scrolls instead of cutting things off */
  .js .site-nav > a:not(.btn) { font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.015em; padding-block: 0.3em; }
  /* The open menu is dressed like the rest of the site: the leaf rises from the corner and the social buttons sit bottom left */
  .js .nav-more { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .js .nav-more .social { pointer-events: auto; }
  .site-nav .social { position: absolute; left: var(--gutter); bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); }
  .site-nav .social a { background: var(--white); color: var(--ink); }
  .nav-leaf { position: absolute; z-index: -1; right: -18%; bottom: -9%; width: 52%; height: auto; rotate: -12deg; translate: 0 62%; transition: translate 0.75s var(--spring) 0.1s; pointer-events: none; }
  .nav-open .nav-leaf { translate: 0 0; }
  .js .site-nav .btn--sm { font-size: 1.1875rem; min-height: 56px; padding: 0.8em 1.8em; margin-top: 1.2rem; }
  .nav-open .site-nav { opacity: 1; visibility: visible; transform: none; }
  .js .site-nav a { opacity: 0; translate: 0 18px; transition: opacity 0.2s ease, translate 0.5s var(--spring); }
  .nav-open .site-nav a { opacity: 1; translate: 0 0; }
  .nav-open .site-nav a:nth-child(2) { transition-delay: 0.05s; }
  .nav-open .site-nav a:nth-child(3) { transition-delay: 0.1s; }
  .nav-open .site-nav a:nth-child(4) { transition-delay: 0.15s; }
  .nav-open .site-nav a:nth-child(5) { transition-delay: 0.2s; }
  .nav-open { overflow: hidden; }
  /* With scripts off the menu sits open under the logo, so the header takes its own room instead of floating over the page */
  html:not(.js) .site-header { position: static; }
  html:not(.js) .hero, html:not(.js) .page-hero { padding-top: 2.5rem; }
  .lede { text-wrap: balance; }          /* short intro lines split evenly instead of leaving one word stranded */
}

/* Footer: cream, small words in ink (R72). No second logo here: the header wordmark is already on screen (R37). */
.site-footer { background: var(--cream); color: var(--ink); padding: clamp(3rem, 6vw, 4.5rem) 0 1.75rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.5fr 1fr 1fr; align-items: start; }
.footer-tagline { font-weight: 900; font-size: var(--h3); line-height: 1.1; letter-spacing: -0.01em; color: var(--orange); }
.footer-brand p + p { margin-top: 0.6rem; }
.footer-list li + li { margin-top: 0; }
.footer-list a { display: inline-block; padding-block: 0.65rem; font-weight: 500; }
.footer-social { margin-top: 1rem; }
.footer-bottom { margin-top: 2.4rem; padding-top: 1.3rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; justify-content: space-between; font-size: var(--fine); color: var(--ink-soft); }
.social { display: flex; gap: 0.7rem; }
.social a { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: var(--orange); color: var(--white); transition: background-color 0.18s, transform 0.3s var(--spring); }
@media (hover: hover) { .social a:hover { background: var(--ink); transform: translateY(-3px) rotate(-8deg) scale(1.06); } }
.social a:active { background: var(--ink); transform: scale(0.94); }
.social svg { width: 22px; height: 22px; }
.band-orange .social a { background: var(--white); color: var(--ink); }
@media (hover: hover) { .band-orange .social a:hover { background: var(--ink); color: var(--white); } }
.band-orange .social a:active { background: var(--ink); color: var(--white); }
@media (max-width: 760px) {
  /* On a phone the two lists of links sit side by side under the tagline, so the footer is half as tall */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem 1rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) and (max-height: 560px) { .js .nav-more { display: none; } }
@media (max-width: 900px) and (max-height: 620px) { .js .site-nav { gap: 0.7rem; padding-top: 5rem; padding-bottom: 1.5rem; } .js .site-nav > a:not(.btn) { font-size: 1.9rem; } .js .site-nav .btn--sm { margin-top: 0.6rem; } }     /* 5 things in the menu still fit a short phone */
@media (max-width: 900px) and (max-height: 700px) { .nav-leaf { width: 42%; right: -14%; bottom: -6%; } }      /* the leaf steps back so it never crowds the button */
@media (max-width: 350px) { .nav-leaf { width: 38%; right: -13%; } }     /* no room for extras on a very short screen */

/* Forms: a plain white field, softly rounded like every other panel */
.field { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.field input[type="email"] {
  flex: 1 1 240px; min-width: 0; min-height: 52px; padding: 0.7em 1.1em; border-radius: var(--radius); border: 2px solid transparent;
  background: var(--white); color: var(--ink); font-weight: 500;
}
.field input[type="email"]:focus-visible { outline-offset: 2px; }
.field input::placeholder { color: var(--ink-soft); opacity: 1; }
.form-note { margin-top: 0.9rem; font-weight: 700; min-height: 1.5em; }
html:not(.js) .signup .field { display: none; }      /* the form needs scripts to send; without them only the note shows, so nobody loses what they typed */

/* ---------- The kit of parts (guide page 19) ---------- */

/* Drawings: the brand's own six illustrations, used huge and cropped off an edge, one to a screen (R90, R91).
   They sit behind the words and never take a tap. The wrapper places them; the picture inside does the moving. */
.art { position: absolute; z-index: -1; pointer-events: none; -webkit-user-select: none; user-select: none; }
.art img { width: 100%; height: auto; }
.float { animation: float-y 7s ease-in-out infinite; will-change: transform; }
.turn { animation: turn 120s linear infinite; will-change: transform; }
@keyframes float-y { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -11px, 0) rotate(1.6deg); } }
@keyframes turn { to { transform: rotate(360deg); } }

/* Triangle confetti: small orange triangles scattered on white or cream, never on a screen with the swirl (R88, R89).
   Each <i> sets its own spot with --x and --y, its size with --s, its turn with --r, and its place in line with --n. */
.confetti { position: absolute; z-index: -1; pointer-events: none; }
.confetti i {
  position: absolute; left: var(--x, 0%); top: var(--y, 0%); width: var(--s, 18px); height: var(--s, 18px);
  background: var(--orange); rotate: var(--r, 0deg);
  clip-path: polygon(8% 14%, 96% 36%, 32% 94%);
  animation: bob 7s ease-in-out calc(var(--n, 0) * -0.9s) infinite;
}
.confetti i:nth-child(3n) { clip-path: polygon(50% 4%, 98% 90%, 8% 72%); animation-duration: 8.5s; }
.confetti i:nth-child(3n + 1) { clip-path: polygon(4% 44%, 90% 6%, 72% 96%); animation-duration: 6.2s; }
@keyframes bob { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -9px, 0) rotate(14deg); } }

/* ---------- Motion: everything is visible without scripts. site.js adds .reveal-ready to <html> before hiding anything. ---------- */
.reveal-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal-ready .reveal--pop { transform: translateY(26px) rotate(-1.8deg) scale(0.95); transition: opacity 0.4s var(--ease), transform 0.75s var(--spring); }
.reveal-ready .reveal--pop:nth-child(even) { transform: translateY(26px) rotate(1.8deg) scale(0.95); }
.reveal-ready .reveal.is-in { opacity: 1; transform: none; }
/* A drawing at the bottom edge comes up from below it, like a sunrise. The holder stays put so it can be watched for;
   the picture inside does the rising. */
.reveal-ready .reveal--up { opacity: 1; transform: none; }
.reveal-ready .reveal--up img { translate: 0 85%; transition: translate 1.15s var(--spring) 0.15s; }
.reveal-ready .reveal--up.is-in img { translate: 0 0; }
/* Confetti does not fade in as a block: each triangle pops in on its own, one after another */
.reveal-ready .confetti.reveal { opacity: 1; transform: none; }
.reveal-ready .confetti.reveal i { scale: 0; transition: scale 0.55s var(--spring) calc(var(--n, 0) * 70ms + 150ms); }
.reveal-ready .confetti.reveal.is-in i { scale: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .reveal-ready .reveal { opacity: 1; transform: none; }
  .float, .turn, .confetti i { animation: none !important; }
}