/* ============================================================
   Flourishing@Work participant report — theme
   Display: neue-kabel (Adobe) — hero, section numerals, pull-quotes (24px+)
   Body + ALL small text incl. SVG labels: source-sans-pro (Adobe, humanist)
   Why: Kabel is a geometric display face; below ~16px its circular bowls
   and low x-height go soft — worst of all in SVG <text>, which skips the
   browser's font-smoothing path. Source Sans is screen-tuned for that band.
   ============================================================ */
:root{
  --font-display:"neue-kabel","Century Gothic",sans-serif;
  --font-body:"adelle-sans","Source Sans 3",system-ui,sans-serif;
  --font-diagram:"inter-18pt","Inter",system-ui,sans-serif; /* small SVG labels — smallest optical cut */

  --paper: oklch(0.965 0.012 75);
  --paper-2: oklch(0.945 0.016 72);
  --ink: oklch(0.21 0.013 60);
  --ink-soft: oklch(0.42 0.015 60);
  --clay: oklch(0.505 0.142 38);
  --clay-deep: oklch(0.40 0.12 35);
  --teal: oklch(0.42 0.072 215);
  --teal-deep: oklch(0.32 0.058 218);
  --amber: oklch(0.805 0.128 76);
  --line: oklch(0.86 0.012 72);
  --maxw: 720px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);
  font-size:19px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  print-color-adjust:exact;-webkit-print-color-adjust:exact;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.wide{max-width:1040px;margin:0 auto;padding:0 28px}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-0.01em;text-wrap:balance}
p{margin:0 0 1.15em}
blockquote{text-wrap:balance}
strong{font-weight:700}
em{font-style:italic}
a{color:var(--clay-deep)}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;color:var(--paper);padding:104px 0 84px;
  background:
    radial-gradient(125% 90% at 82% -15%, oklch(0.34 0.062 220 / 0.55), transparent 58%),
    linear-gradient(176deg, oklch(0.195 0.015 250), oklch(0.165 0.012 60));}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(oklch(1 0 0 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.035) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 30%, #000 35%, transparent 92%);
          mask-image:radial-gradient(120% 100% at 50% 30%, #000 35%, transparent 92%);}
/* Abstract texture, masked to the right so the headline (left) stays on clean
   dark. The sourced image is bright, so it reads as a luminous fluted accent on
   the right, fading to nothing by ~58% across. Knobs to tune: opacity, and the
   mask's transparent stop (push it right to give text more clearance). */
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("hero-texture.jpg") right center/cover no-repeat;
  opacity:0.13;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 58%, #000 96%);
          mask-image:linear-gradient(90deg, transparent 0%, transparent 58%, #000 96%);}
.hero .wrap{position:relative;z-index:2}
.hero .logo{height:42px;width:auto;display:block;margin-bottom:36px}
.kicker{font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--amber);margin-bottom:30px;display:flex;align-items:center;gap:14px}
.kicker::before{content:"";width:34px;height:2px;background:var(--amber);display:inline-block}
.hero .summit-date{font-family:var(--font-body);font-size:12px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:oklch(0.72 0.03 72);
  margin:-16px 0 28px;padding-left:48px}
.hero h1{font-size:clamp(36px,8vw,92px);font-weight:400;color:var(--paper);
  margin:0 0 20px;max-width:14ch;letter-spacing:-0.01em;line-height:1;text-shadow:0 2px 14px oklch(0 0 0 / 0.15)}
.hero .sub{font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(20px,2.6vw,28px);color:oklch(0.84 0.022 72);max-width:34ch;line-height:1.28}
.hero .for{margin-top:34px;font-family:var(--font-body);font-size:13px;font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;color:oklch(0.78 0.03 72);
  display:flex;align-items:center;gap:13px}
.hero .for::before{content:"";width:24px;height:1px;background:var(--amber);display:inline-block;flex:none}
.hero .for span{color:var(--amber);letter-spacing:0.1em}
.timeline{margin-top:48px;max-width:780px;width:100%}

/* ---------- Framing note ---------- */
.frame{padding:72px 28px 20px}
.frame p{font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:21px;line-height:1.48;color:var(--ink-soft);max-width:60ch}
.frame p:first-of-type::first-letter{font-family:var(--font-display);font-style:normal;font-weight:800;
  float:left;font-size:4.6em;line-height:0.72;padding:8px 14px 0 0;color:var(--clay)}

/* ---------- Section scaffolding ---------- */
section{padding:52px 0}
section.major{padding-top:80px}
.sec-label{font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--clay);margin-bottom:16px;display:flex;align-items:baseline;gap:12px}
.sec-label .n{font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:0;color:var(--ink);opacity:.55}
h2{font-size:clamp(31px,4.6vw,46px);font-weight:400;margin:0 0 28px;max-width:20ch}
h3{font-size:23px;font-weight:700;margin:34px 0 10px;letter-spacing:-0.005em}

/* ---------- Pull quote ---------- */
.quote{padding:88px 0;margin:42px 0;color:var(--paper);position:relative;overflow:hidden}
.quote.clay{background:var(--clay)}
.quote.teal{background:var(--teal)}
.quote .mark{position:absolute;font-family:var(--font-display);font-weight:900;
  font-size:300px;line-height:1;color:oklch(1 0 0 / 0.07);top:-30px;left:8px;z-index:0}
.quote .wrap{position:relative;z-index:1}
.quote blockquote{margin:0;font-family:var(--font-display);font-weight:400;font-style:normal;
  font-size:clamp(31px,4.8vw,52px);line-height:1.08;letter-spacing:-0.01em;max-width:18ch}
.quote .attr{margin-top:26px;font-family:var(--font-body);font-size:15px;letter-spacing:0.02em;
  color:oklch(0.94 0.02 72);max-width:46ch;line-height:1.5}

/* ---------- Claim blocks ---------- */
.claim{border-top:3px solid var(--ink);padding-top:24px;margin:36px 0}
.claim.clay-top{border-top-color:var(--clay)}
.claim .tag{font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:0.06em;color:var(--ink);text-transform:uppercase}
.claim.clay-top .tag{color:var(--clay)}

/* ---------- Figures ---------- */
figure{margin:46px 0}
figcaption{font-family:var(--font-body);font-size:14px;color:var(--ink-soft);margin-top:16px;line-height:1.5;max-width:62ch}
.diagram{background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:36px 32px;overflow-x:auto;-webkit-overflow-scrolling:touch}
svg{display:block;width:100%;min-width:560px;height:auto}
svg text{font-family:var(--font-diagram)}

/* ---------- Prompts ---------- */
.prompt{display:grid;grid-template-columns:72px 1fr;gap:26px;padding:34px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.prompt:last-child{border-bottom:none}
.prompt .num{font-family:var(--font-display);font-size:54px;font-weight:400;color:var(--clay);line-height:.85;margin-top:4px}
.prompt h3{margin:0 0 8px}

/* ---------- Diagnostic ---------- */
.diag{background:var(--teal-deep);color:var(--paper);padding:84px 0;margin-top:42px}
.diag h2{color:var(--paper)}
.diag .sec-label{color:var(--amber)}
.diag .sec-label .n{color:oklch(0.9 0.02 215);opacity:.65}
.diag .q{padding:24px 0;border-top:1px solid oklch(0.52 0.05 215)}
.diag .q:first-of-type{border-top:none;padding-top:8px}
.diag .q em{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:23px;color:var(--amber);display:block;margin-bottom:8px}
.diag p{color:oklch(0.91 0.02 215)}

/* ---------- Commitments ---------- */
.slate{margin:32px 0;counter-reset:c}
.slate .item{display:flex;gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line)}
.slate .item:last-child{border-bottom:none}
.slate .item:before{font-family:var(--font-display);font-size:30px;color:var(--clay);font-weight:400;min-width:36px;
  content:counter(c, decimal-leading-zero);counter-increment:c}

/* ---------- CTA ---------- */
.cta{background:var(--amber);color:var(--ink);padding:84px 0}
.cta .sec-label{color:var(--clay-deep)}
.cta h2{color:var(--ink)}
.cta .opt{display:flex;gap:20px;align-items:baseline;padding:18px 0;border-top:1px solid oklch(0.68 0.10 76)}
.cta .opt:last-child{border-bottom:1px solid oklch(0.68 0.10 76)}
.cta .opt b{font-family:var(--font-display);font-size:30px;font-weight:700;min-width:36px;color:var(--clay-deep)}

/* ---------- Closing ---------- */
.closing{padding:80px 0 40px}
.closing .endmark{width:18px;height:18px;background:var(--clay);display:inline-block;margin-bottom:28px}
.closing p{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:21px;color:var(--ink-soft);max-width:58ch;line-height:1.46}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:34px 0 48px;
  font-family:var(--font-body);font-size:13px;letter-spacing:0.02em;color:var(--ink-soft)}

@media(max-width:620px){
  body{font-size:17px}
  .wrap,.wide{padding:0 20px}
  .hero{padding:72px 0 56px}
  .hero::after{display:none}
  .prompt{grid-template-columns:1fr;gap:8px}
  .prompt .num{font-size:42px}
  .quote{padding:60px 0;margin:28px 0}
  .quote .mark{font-size:180px}
  .diag,.cta{padding:60px 0}
  .frame{padding:52px 20px 16px}
  .frame p{font-size:19px}
  .diagram{padding:22px 16px}
  figure{margin:34px 0}
  section{padding:42px 0}
  section.major{padding-top:60px}
}

/* ---------- Print / PDF ---------- */
@media print{
  @page{margin:18mm 16mm}
  body{font-size:11.5pt;background:var(--paper)}
  .reveal{opacity:1;transform:none}
  .hero{padding:30mm 0 18mm}
  .quote,.diag,.cta,figure,.prompt,.slate .item,.claim{break-inside:avoid}
  h2,h3{break-after:avoid}
  .hero::before{display:none}
}