/* Dialed In, built to Dan Koe's real spec.
   Every value below was read off thedankoe.com's rendered page with a real
   browser (computed styles, not the CSS file, because the page overrides the
   Elementor preset). Measured 2026-09-16 at 390, 860 and 1440 wide.

   Koe has ONE heading style on the whole homepage. Hero and every section
   heading are identical: Poppins 900, 52px desktop / 39px mobile, line-height
   1.2, letter-spacing -1.1px, colour #EFEFEF.

   Body text is Poppins 400, 18px, line-height 1.4, no letter-spacing,
   #E8E8E8 at FULL opacity at every screen width. He never dims body copy.

   Two things that were wrong in the first build and made the page look soft:
   the headline was set at the Elementor preset's 65px instead of the 52px the
   page actually renders (at -1.1px tracking, Poppins 900 crowds badly at 65px),
   and body copy ran at 65% opacity. Both fixed here. */

:root {
  --bg:        #000000;  /* Koe's page background */
  --fg:        #E8E8E8;  /* Koe's body text, full opacity */
  --head:      #EFEFEF;  /* Koe's heading colour, brighter than body */
  --fg-dim:    rgba(232, 232, 232, 0.55);  /* chrome only: footer, hero count */
  --label-dim: rgba(232, 232, 232, 0.72);  /* section labels, see .label */
  /* Sabby's pick, 2026-09-17 evening: ORANGE, for this and everything else
     built here. It replaces the gold #FFC842 he chose that morning, which in
     turn had replaced Koe's champagne #E0C787.

     Anthropic's coral #D97757 is the reference, opened up in saturation and
     brightness so it still reads at 12px label size on black, which the flat
     brand value does not.

     Both of the colours it replaced are still reachable for comparison,
     ?theme=gold and ?theme=champagne. Nothing else in the site carries a
     colour: these five values are read by the headline span, the buttons, the
     rules, the form states, the cursor wash and the WebGL plates. */
  --accent:    #F07A47;
  --accent-deep: #A3502C; /* link hover: dark enough to read as a state change */
  /* Three more stops off the same accent, so a recolour is one file and not a
     hunt through gradients and shaders. --mid and --light are the warm ramp the
     cursor wash runs through. --accent-rgb is the same colour as three numbers,
     because rgba() needs the channels loose to take an alpha, and the form
     uses the accent at 6%, 20%, 26% and 38%. theme.css overrides all of them
     together. */
  --accent-mid:   #F79C6E;
  --accent-light: #FFE3D2;
  --accent-rgb:   240, 122, 71;
  --rule:      rgba(232, 232, 232, 0.14);
  --btn-bg:    #E8E8E8;
  --btn-fg:    #000000;

  --f: "Poppins", system-ui, -apple-system, Helvetica, Arial, sans-serif;

  /* Koe's one heading style */
  --head-size: 52px;
  --head-weight: 900;
  --head-lh: 1.2;
  --head-ls: -1.1px;

  /* Koe's one body style */
  --body-size: 18px;
  --body-lh: 1.4;

  --col: 780px;
  --gut: 24px;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-lh);
  letter-spacing: normal;
  /* Koe's own rendering settings. text-rendering stays at auto, because
     optimizeLegibility changed the shape of the type against his. */
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 22px; color: var(--fg); }
p:last-child { margin-bottom: 0; }

a { color: var(--head); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--accent-deep); }

.wrap {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* ---------- the one heading style ---------- */

h1, h2, .head {
  font-family: var(--f);
  font-size: var(--head-size);
  font-weight: var(--head-weight);
  line-height: var(--head-lh);
  letter-spacing: var(--head-ls);
  color: var(--head);
  margin: 0 0 28px;
}

h1 { max-width: 16ch; }

.accent { color: var(--accent); }

/* Keeps a short sentence from breaking across two heading lines. */
.nobreak { white-space: nowrap; }

/* ---------- hero ---------- */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 0 80px;
}

.hero .wrap { display: flex; flex-direction: column; align-items: center; }

/* The logo replaces the letter-spaced "DIALED IN" text that sat here. The
   wordmark is 5:1, so 230px wide renders 46px tall. */
.logo {
  display: block;
  width: 230px;
  height: auto;
  margin: 0 0 40px;
}

/* Kept for any other small letter-spaced label. */
.eyebrow {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 10px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 40px;
}

.hero h1 { margin-bottom: 24px; }

.hero-sub {
  max-width: 40ch;
  margin: 0;
}

.hero-count {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.5px;
  line-height: 1.4;
  text-transform: uppercase;
  /* Grey, not accent. Sabby, 2026-09-17: this line is a qualifier, not the
     pitch, and colouring it put two accents in the hero competing for the same
     glance. The headline is now the only colour above the fold. */
  color: var(--fg-dim);
  margin: 40px 0 0;
}

/* The terms line under an Apply button. Quiet and small on purpose: a fact the
   reader needs, not a thing being sold, and a price set loud next to a call to
   action reads as a discount.

   NOTHING USES THIS RIGHT NOW. It carried price and geography on the lander for
   about an hour on 2026-09-17 and both came off: the price moved to apply.html
   where the application already asks about it, and the geography line went
   because the hero was getting crowded, which was Sabby's call and the right
   one. Kept because it costs nothing and the geography question still has no
   answer anywhere on the site. Add <p class="terms">...</p> under a button. */
.terms {
  font-size: 14px;
  line-height: 1.45;
  color: var(--label-dim);
  /* 48ch, not 34. At 34 the line broke three ways and left "world." on its
     own, which looks like a mistake rather than a fact. */
  max-width: 48ch;
  margin: 18px 0 0;
}
.hero .terms { margin-left: auto; margin-right: auto; }

/* ---------- button ---------- */

.btn {
  display: inline-block;
  margin-top: 24px;
  padding: 16px 44px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.4px;
  border-radius: 2px;
  transition: opacity .18s ease;
}
.btn:hover { background: var(--btn-bg); color: var(--btn-fg); opacity: .78; }

/* small inline link, Koe's style: 16px, weight 400, #EFEFEF */
.textlink {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--head);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.textlink:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- sections ---------- */

section { padding: 110px 0; }
section + section { border-top: 1px solid var(--rule); }

.label {
  font-size: 12px;
  /* 500, not 400. Sabby, 2026-09-17: the label was the same colour as the hero
     line, rgba(232,232,232,.55), and still read dead beside the dithered art.
     Colour was never the problem. At 12px with 6px of tracking the strokes are
     thin and far apart, so next to a bust running at near-white it disappears.
     Half a weight and a little more alpha carry it without making a piece of
     chrome compete with the headline under it. --label-dim so this is tunable
     on its own and doesn't drag the footer up with it. */
  font-weight: 500;
  letter-spacing: 6px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--label-dim);
  margin: 0 0 22px;
}

/* ---------- measurement grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.tile {
  background: var(--bg);
  padding: 34px 18px;
  text-align: center;
  /* IMAGE SLOT: engraved plate sits above the label once the assets are shot. */
}

.tile span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.6px;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--fg);
}

.tile em {
  display: block;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 14px;
}

/* ---------- about ---------- */

/* Heading full width, then the portrait and the copy side by side.

   The award photo used to live here and is gone from this page. Sabby's call:
   face photo on the homepage, award photo on the Read my story page where it
   can be big enough for the plaque to be read. The treatment that worked for
   it, a 5:8 frame at 2.65x panned to x 498-1102 / y 85-1051 of the 1600x1066
   source, is written down in README.md so it can be rebuilt over there. */
.about {
  display: flex;
  gap: 34px;
  align-items: flex-start;
}

.about-text { flex: 1 1 auto; min-width: 0; }

/* The portrait. Koe's treatment, at 200px rather than his 340px because the
   photo should sit beside a paragraph, not lead the section.

   sabby-portrait.jpg is already a true greyscale file, so there's no
   grayscale() filter. sabby-portrait-colour.jpg is the same shot in colour.

   The crop is done here rather than in the file, so it stays tunable. The
   source is 1110x918 and the head sits left of centre, around x 25-55% and
   y 19-62%, so a plain object-fit: cover would put it off to one side. These
   three numbers show a 740x740 square, which puts the head at about 53% of the
   frame. Zoomed out from 608 on Sabby's note that it was too tight.

   The head sits low in the source: the hair starts at y 190 and the face skin
   at y 350, measured off the pixels. Centring the crop on the middle of the
   image left 189px of sky above the hair, a quarter of the frame, which is what
   Sabby saw. The crop now starts at y 67 instead of y 1, so the head centre
   lands at 46% of the frame rather than 55%: slightly above the middle, which
   is the normal portrait convention and reads better in a circle than dead
   centre does.
     width  = zoom          (150% -> about 1.5x, raise it to crop tighter)
     left   = pan sideways  (more negative moves the crop right)
     top    = pan up/down   (more negative moves the crop down)  */

.portrait {
  flex: 0 0 200px;
  width: 200px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  margin: 6px 0 0;
}

.portrait img {
  position: absolute;
  display: block;
  width: 150%;
  height: auto;
  left: -11.76%;
  top: -9.07%;
  filter: contrast(1.03);
}

/* The award, named in words now that its photo has moved off this page.

   One line, never two. At 3px letter-spacing the string measured 745px against
   a 732px column, so it broke with only "MANAGED" on the second line. Tracking
   comes down to 2.6px, which measures 714px and fits with room to spare. The
   nowrap is a guarantee rather than a hope: if this line ever gets longer,
   it'll be obvious immediately instead of quietly wrapping again. Mobile
   releases it, because 78 characters cannot fit 342px at any tracking. */
.creds {
  margin: 40px 0 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2.6px;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}

/* ---------- close ---------- */

.close { text-align: center; }
.close h2 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.close .note {
  font-size: 12px;
  letter-spacing: 6px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 22px;
}
/* "Stay" set in type, then the wordmark doing the "Dialed In" half. Both
   white, per Sabby. The tight-viewBox logo file is used here because the
   supplied one carries 149px of empty padding either side, which would read as
   a gap between the two halves of the sign-off.

   The logo width is set so the wordmark's stroke height matches the cap height
   of the word beside it, measured rather than guessed: Poppins 600 at 26px has
   a cap height of 18.41px, and the tight file is 6.223:1, so
   18.41 x 6.223 = 114.5px. At 22px on mobile the cap height is 15.58px, so
   15.58 x 6.223 = 97px. */
.signoff {
  margin: 56px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.signoff span {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 4px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg);
}

.signoff img {
  display: block;
  width: 114.5px;
  height: auto;
}

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--rule);
  padding: 48px 0 72px;
  text-align: center;
}
/* v13 footer. The joke reads at body size so it lands, the compliance line
   sits under it small and quiet. Both are required. */
footer .footer-line {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg);
  max-width: 54ch;
  margin: 0 auto 18px;
}

/* One line, no max-width. The 58ch cap was what forced it onto two lines.
   It still wraps below about 620px, which is unavoidable at 390 wide. */
footer .fineprint {
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-dim);
  margin: 0 auto;
}

/* ---------- the pack at the bottom ---------- */

/* Sabby's call, 2026-09-18: three wolves under the copyright line, dark to
   light, because the idea is that you arrived on your own and what you
   actually need is a pack. An easter egg, so it sits at 22% and lifts to full
   when a cursor finds it. Anyone scrolling past sees almost nothing; anyone
   who stops gets the joke.

   Opacity, not a mask. The single wolf this replaced was a mask over a
   background colour, the way the ticks and the squiggle are drawn, and that
   keeps only the silhouette and paints it one flat tone. Here the three tones
   ARE the drawing, and flattening them would have made one overlapping blob
   of three wolves. So they have to survive, which means an <img> and an
   opacity ramp. The artwork is already greyscale, so dimming it reads as
   "further away" rather than "faded".

   The file is assets/Logo/wolf-pack.svg, 3KB, sharp at any size, with the
   background rect stripped and the viewBox cropped to the artwork. It is
   meant to be reused: the same file works at 180px here and at 600px on the
   Den's own page.

   20% rather than the 13% the single wolf used, because this drawing is
   mostly mid-grey rather than near-white: the same 13% put the two rear
   wolves under the point where they are visible at all.

   180px wide, not 130. At 130 each wolf was about 45px and the three tones
   that carry the depth collapsed into one grey mass, which threw away the
   only thing the drawing is saying.

   .is-lit is for touch. There is no hover on a phone, and Sabby asked for it
   to respond to a tap, so build3.js latches this class on click. */
footer .wolf-egg {
  display: block;
  width: 180px;
  height: auto;
  margin: 30px auto 0;
  opacity: .2;
  transition: opacity .55s ease;
  cursor: pointer;
}

footer .wolf-egg:hover,
footer .wolf-egg.is-lit { opacity: 1; }

/* ---------- responsive ----------
   Koe drops the heading to 39px on mobile and leaves body copy at 18px. */

@media (max-width: 767px) {
  :root { --head-size: 39px; }
  .hero { padding: 96px 0 64px; }
  section { padding: 76px 0; }
  .logo { width: 190px; margin-bottom: 32px; }
  .creds { white-space: normal; }
  .signoff span { font-size: 22px; }
  .signoff img { width: 97px; }
  .eyebrow { letter-spacing: 7px; margin-bottom: 32px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .about { flex-direction: column; gap: 26px; }
  .portrait { flex: 0 0 auto; margin-top: 0; }
  footer .footer-line { font-size: 15px; }
  h1 { max-width: 20ch; }
}

@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr; }
}