/* ==========================================================================
   Poppycal theme — case study page only

   The case study wears the product's own design system: cream page, white cards
   floating on it, sage and orange accents, Nunito, and the 16px corner radius
   the system calls its shape language. Loaded after styles.css and only by
   /work/poppycal/, so the other four pages are untouched by construction.

   READ THIS BEFORE EDITING THE TOKENS.
   The base sheet names its tokens for a dark theme: --ink is the page and
   --bone is the type sitting on it. That relationship still holds here. The two
   just swap lightness, so --ink becomes cream and --bone becomes near-black.
   Read them as "page" and "type", never as "dark" and "light", and every rule
   in styles.css keeps working with no edits.

   CONTRAST IS THE REASON THIS IS NOT A STRAIGHT BRAND-COLOUR SWAP.
   Poppycal's palette is built for large rounded UI chrome on a tablet, not for
   small text on cream. Measured against #FAF7F2: orange-500 lands at 2.62:1 and
   sage-500 at 1.52:1, so neither can carry text. Orange-700 (4.85:1) does the
   work anywhere type is small, orange-600 (3.33:1) is reserved for display
   sizes where 3:1 is the bar, and sage appears as a surface and a border rather
   than as a colour of words. The neutral ramp is pulled one step darker than
   the system's own for the same reason: #9CA3AF is 2.38:1 on cream and fails.
   ========================================================================== */

.pc {
  /* page and surfaces */
  --ink:        #FAF7F2;   /* pastel-cream, the page */
  --ink-2:      #FFFFFF;   /* surface, the cards */
  --ink-3:      #F4FAF6;   /* sage-50, the tinted band */

  /* type, one step darker than the system ramp so small text clears AA */
  --bone:       #1F2937;   /* 13.74:1 on cream */
  --bone-dim:   #4B5563;   /*  7.07:1 */
  --bone-faint: #6B7280;   /*  4.52:1 */

  /* accent. --amber is the small-text safe orange, not the brand's 500. */
  --amber:      #C2410C;   /* orange-700, 4.85:1 */
  --amber-soft: #9A3412;   /* orange-800, the darker hover. On light, hover
                              goes down in lightness, not up. */

  --rule:       #EAE4D8;   /* hairline */

  --sans:  'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  /* display orange, for type big enough that 3:1 is the bar */
  --pc-orange-display: #EA580C;
  --pc-sage-line:      #A8D5BA;
  --pc-sage-deep:      #2D5942;   /* 7.50:1 on cream, the only sage that reads */
  --pc-sage-tint:      #F4FAF6;
  --pc-sage-edge:      #CCE5D7;
  --pc-hl:             rgba(249, 115, 22, .85);   /* orange-500, the highlighter stroke */

  /* the six fixed avatar hues, used here to number the decisions */
  --family-sky:      #7EC8E3;
  --family-rose:     #F4A7B9;
  --family-butter:   #F9D89C;
  --family-lavender: #C4B5E0;

  /* the system's shadow ramp and its one easing curve */
  --pc-shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --pc-shadow-md: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.06);
  --pc-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.08);
  --pc-ease: cubic-bezier(.25,.1,.25,1);

  /* xl, the default for cards and buttons across the product */
  --pc-r: 16px;
}

/* Nunito has none of Fraunces' axes. Clear them everywhere the base sheet set
   them, so the browser is never asked to resolve SOFT/WONK/opsz against a font
   that has no such thing. */
.pc h2, .pc h3, .pc .bignum, .pc .hero-line,
.pc blockquote, .pc .stats dd, .pc .topbar-mark {
  font-variation-settings: normal;
}

/* The grain is a dark-page device. Over cream it reads as dirt, and Poppycal is
   a clean flat system, so it goes. */
.pc .grain { display: none; }

.pc body, body.pc { background: var(--ink); }

/* --- type ---------------------------------------------------------------- */
/* Nunito is rounder and sits optically smaller than Fraunces at the same size,
   so the display weights go up and the tracking comes back toward normal. */
.pc h2 { font-weight: 800; letter-spacing: -.015em; }
.pc h3 { font-weight: 700; letter-spacing: -.01em; }

.pc .mono { letter-spacing: .1em; font-weight: 500; }

.pc .emph { color: var(--amber); font-weight: 600; }
.pc .sub  { color: var(--bone-dim); }

/* --- hero ---------------------------------------------------------------- */
/* The flower, so the theme reads as deliberate from the first screen rather
   than as an unexplained change of colour. */
.pc .pc-mark {
  display: block;
  width: 64px;
  margin-bottom: 1.6rem;
}
.pc .pc-mark img { display: block; width: 100%; height: auto; }

/* Four petals, so it wants to spin. It takes one push on arrival and another on
   hover, then rests. A mark that turns forever pulls the eye off three thousand
   words of case study, which is the opposite of what this page is for. To make
   it continuous instead, drop the `both` fill and add `infinite linear`.

   No transform-origin needed: the orange centre of the artwork sits at 49.6% by
   49.8%, so the default 50% 50% is already the real axis and it does not wobble. */
.pc .pc-mark img.spin {
  animation: pc-pinwheel 2.4s cubic-bezier(.16,.72,.24,1) both;
}
@keyframes pc-pinwheel {
  from { transform: rotate(0turn); }
  to   { transform: rotate(3turn); }
}

.pc .tag { color: var(--bone); font-weight: 600; }
.pc .crumb { color: var(--amber); }

.pc .bignum {
  font-weight: 900;
  letter-spacing: -.045em;
  color: var(--pc-orange-display);
  margin-left: -.035em;   /* Nunito's 1 sits differently to Fraunces' */
}

.pc .hero-line { font-weight: 700; letter-spacing: -.018em; }
.pc .hero-line em {
  font-style: normal;             /* Nunito's italic is a slant, not a cut */
  font-weight: 800;
  color: var(--pc-sage-deep);
}

.pc .lede { color: var(--bone-dim); }

/* --- buttons and links --------------------------------------------------- */
/* orange-700 rather than the brand 500, because white on 500 is 2.80:1 and the
   button label is small uppercase mono. On 700 it is 5.18:1. */
.pc .btn {
  color: #FFFFFF;
  background: var(--amber);
  border-radius: var(--pc-r);
  font-weight: 600;
  box-shadow: var(--pc-shadow-sm);
  transition: background .18s var(--pc-ease), transform .18s var(--pc-ease),
              box-shadow .18s var(--pc-ease);
}
.pc .btn:hover {
  background: var(--amber-soft);
  box-shadow: var(--pc-shadow-md);
}

.pc .link-plain { color: var(--bone); border-bottom-color: var(--pc-sage-edge); }
.pc .link-plain:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* --- section rhythm ------------------------------------------------------ */
/* Cream page, content floating on it. That is the product's own composition,
   so sections keep the page colour and the blocks inside them carry the white. */
.pc .sec { border-top: 1px solid var(--rule); }

.pc .daymark { color: var(--amber); font-weight: 600; }
.pc .daymark::after {
  background: linear-gradient(90deg, var(--pc-sage-edge), transparent);
}

/* --- images -------------------------------------------------------------- */
.pc .shot-frame {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--pc-r);
  box-shadow: var(--pc-shadow-md);
}
.pc .shots figcaption {
  border-top: 1px solid var(--rule);
  color: var(--bone-faint);
  font-weight: 500;
}
.pc .hero-shot figcaption { color: var(--bone-dim); }

/* --- the Kid Mode embed -------------------------------------------------- */
/* The widget draws its own white card and 24px radius, so this only gives it
   room and a shadow to sit on the cream the way the other cards do. */
.pc .kidmode-embed {
  margin-top: 2.4rem;
  border-radius: 24px;
  box-shadow: var(--pc-shadow-md);
}
/* The Kid Mode research paragraph, promoted out of the method section so a
   hiring manager meets it in the first screenful instead of three thousand words
   down. Deliberately not a card: the widget directly above it is already a big
   white card, and stacking a second one would flatten both. A rule and a size
   jump carry it instead. */
.pc .pullquote {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-left: clamp(1.1rem, 2.5vw, 1.8rem);
  border-left: 4px solid var(--pc-sage-line);
  max-width: 58ch;
  font-size: clamp(1.12rem, 1rem + .62vw, 1.45rem);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--bone);
}

/* Marker sweep on the sentence that carries the argument. It is a background
   gradient rather than an underline so it survives wrapping, and
   box-decoration-break: clone is what makes every wrapped line take the stroke
   instead of the browser painting one box around the whole inline run.

   The stroke sits low and covers about 42% of the line, the way a real
   highlighter rides under the letters rather than blocking them out.

   Orange-500 at .85 composites to #F98737 on the cream. That holds the ink at
   5.97:1, comfortably clear, and separates from the page by 2.30:1 against the
   1.46:1 the sage version managed, so it is a good deal louder. Full-strength
   #F97316 also passes at 5.24:1 if this ever wants to be hotter still; the alpha
   is only there to keep it reading as ink rather than a solid bar.

   <mark> is the honest element here, so its UA yellow gets reset. */
.pc .pullquote .hl {
  background-color: transparent;
  color: inherit;
  background-image: linear-gradient(var(--pc-hl), var(--pc-hl));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 42%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .95s cubic-bezier(.25,.1,.25,1) .15s;
}
.pc .pullquote .hl.in { background-size: 100% 42%; }

@media (prefers-reduced-motion: reduce) {
  .pc .pullquote .hl { background-size: 100% 42%; }
}

.pc .embed-note {
  margin-top: 1.1rem;
  text-transform: none;
  letter-spacing: .02em;
  font-size: .74rem;
  line-height: 1.6;
  max-width: 70ch;
}

/* --- decisions ----------------------------------------------------------- */
/* Each decision becomes a card. Long-form prose on cream needs the structure,
   and a white card with an xl radius is the most recognisably Poppycal object
   in the system. */
.pc .decision {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--pc-r);
  box-shadow: var(--pc-shadow-md);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.pc .decision:first-child {
  margin-top: 0;
  padding-top: clamp(1.5rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--rule);
}

/* "Family as a first-class palette" is one of the system's three principles.
   The six avatar hues never reorder, so using four of them to number the four
   decisions is the palette doing the job it was designed for. Every one of them
   carries #1F2937 at better than 7.7:1. */
.pc .decision .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
  color: var(--bone);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;   /* .13em from .mono pushes a 2-digit chip off centre */
}
.pc .decision:nth-of-type(1) .num { background: var(--family-sky); }
.pc .decision:nth-of-type(2) .num { background: var(--family-rose); }
.pc .decision:nth-of-type(3) .num { background: var(--family-butter); }
.pc .decision:nth-of-type(4) .num { background: var(--family-lavender); }

/* The outcome is the payoff, so it gets the brand tint rather than a rule. */
.pc .decision .outcome {
  margin-top: 1.4rem;
  padding: 1.1rem 1.3rem;
  background: var(--pc-sage-tint);
  border-left: 3px solid var(--pc-sage-line);
  border-radius: 0 var(--pc-r) var(--pc-r) 0;
  color: var(--bone);
}
.pc .decision .outcome em { color: var(--pc-sage-deep); font-style: normal; font-weight: 700; }

/* --- method -------------------------------------------------------------- */
.pc .method { background: var(--ink-3); }

.pc blockquote {
  background: var(--ink-2);
  border-left: 4px solid var(--pc-sage-line);
  border-radius: 0 var(--pc-r) var(--pc-r) 0;
  box-shadow: var(--pc-shadow-md);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.005em;
}

/* --- numbers ------------------------------------------------------------- */
/* The container keeps the page colour on purpose. The grid's last row is short,
   and filling the gaps with the hairline instead would paint that empty cell as
   a block of colour. The base sheet already solved this by ringing each cell,
   so the ring is what draws the lines here too. */
.pc .stats {
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--pc-r);
  box-shadow: var(--pc-shadow-md);
}
.pc .stats > div {
  background: var(--ink-2);
  box-shadow: 0 0 0 1px var(--rule);
}
.pc .stats dt { color: var(--bone-faint); font-weight: 500; }
.pc .stats dd {
  color: var(--pc-orange-display);
  font-weight: 800;
  letter-spacing: -.02em;
}
.pc .stats dd span { color: var(--bone-faint); font-weight: 600; }

/* The count-up injects two spans into each cell: .count for the moving digits
   and .vh for the number a screen reader gets. Both would otherwise be caught by
   the rule above, which exists to shrink and grey the trailing unit like "days",
   and the figures would count at .85rem in the body font. Hand them their font
   back. Measured before this: "126" was laying out 24px wide instead of 80px. */
.pc .stats dd .count,
.pc .stats dd .vh {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin-left: 0;
}

/* --- footer -------------------------------------------------------------- */
.pc .foot { background: var(--ink-2); border-top: 1px solid var(--rule); }
.pc .foot-links a { color: var(--bone-dim); font-weight: 500; }
.pc .foot-links a:hover { color: var(--amber); }

/* --- utility bar --------------------------------------------------------- */
.pc .topbar.in {
  background: rgba(250, 247, 242, .92);
  border-bottom-color: var(--rule);
}
.pc .topbar-mark { color: var(--amber); font-weight: 900; }
.pc .topbar-mark:hover { color: var(--amber-soft); }
.pc .topbar-links a { color: var(--bone-dim); font-weight: 600; }
.pc .topbar-links a:hover { color: var(--bone); }
.pc .topbar-links .topbar-cta { color: var(--amber); }

/* --- focus --------------------------------------------------------------- */
.pc a:focus-visible { outline-color: var(--amber); }

/* --- motion -------------------------------------------------------------- */
/* EASE_SMOOTH, the system-wide curve. */
.pc .reveal { animation-timing-function: var(--pc-ease); }
.pc .sec, .pc .decision, .pc .shots figure {
  transition: opacity .7s var(--pc-ease), transform .7s var(--pc-ease);
}

/* --- print --------------------------------------------------------------- */
@media print {
  .pc .decision, .pc .stats, .pc .shot-frame, .pc blockquote { box-shadow: none; }
}