/* ===========================================================================
   Sva Foundation
   Direction: Vision Board, on the workbook's own paper.

   Revision 02. The client asked for the background to match the NAVIGATE
   workbook, so the ground, the palette and the card system are now lifted
   from the workbook and the coordinator guide rather than invented: the paper
   is their #F8F1E3, the headings their navy #173E67, and the four card fills
   are theirs. Every value below was sampled out of the PDFs.

   What is kept from the first build is the site's own idea: the collage of
   the children's boards, the masking tape, the slight rotations, the cut
   card edge. The workbook is the product; the boards are why it exists.

   Hard rules:
     ground is the workbook's paper, never white
     cards carry a 3px radius, the radius of a cut card
     nothing is centred and perfectly square
     rotation is small, odd, and never exactly zero
     only the marquee loops, and only when motion is allowed
   =========================================================================== */

/* ---- Fonts. Self hosted, latin. ------------------------------------------
   Kalam 700 is the primary display face: a brush marker from Indian Type
   Foundry, OFL, and it carries Devanagari as well as Latin, which matters for
   a Bengaluru foundation. Caveat Brush is for small scraps only. General Sans
   from Fontshare does all the reading.
   ------------------------------------------------------------------------ */
@font-face{font-family:'Kalam';font-weight:400;font-style:normal;font-display:swap;src:url('../assets/fonts/kalam-400.woff2') format('woff2')}
@font-face{font-family:'Kalam';font-weight:700;font-style:normal;font-display:swap;src:url('../assets/fonts/kalam-700.woff2') format('woff2')}
@font-face{font-family:'Caveat Brush';font-weight:400;font-style:normal;font-display:swap;src:url('../assets/fonts/caveatbrush-400.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-weight:400;font-style:normal;font-display:swap;src:url('../assets/fonts/generalsans-regular.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-weight:500;font-style:normal;font-display:swap;src:url('../assets/fonts/generalsans-medium.woff2') format('woff2')}
@font-face{font-family:'General Sans';font-weight:700;font-style:normal;font-display:swap;src:url('../assets/fonts/generalsans-bold.woff2') format('woff2')}

:root{
  /* Sampled from NAVIGATE_Wellbeing_Workbook.pdf and the Coordinator Guide.
     Ratios below are measured against every ground this site uses. */
  --ground:  #F8F1E3;   /* the workbook's paper */
  --ground2: #F1E7D4;   /* the band, a shade deeper */
  --card:    #FFFFFF;
  --ink:     #173E67;   /* the workbook's navy. 9.72 on paper, 8.49 worst */
  --night:   #173E67;

  /* The four card fills, straight out of the guide. Ink on any of them is
     above 8:1, so text is safe anywhere. */
  --f-blue:  #D7E5ED;
  --f-gold:  #F3E7BE;
  --f-sage:  #DFE6D6;
  --f-coral: #F5DEDB;

  /* Their borders, for the card edges. Non text. */
  --b-blue:  #7DA7CE;
  --b-gold:  #DFAE45;
  --b-sage:  #9FB48E;
  --b-coral: #E0908A;

  /* The label colours as printed are decorative weights and fail as text at
     body size: the guide's gold label is 1.9:1 on paper and its coral 3.1:1.
     These are the same four hues walked down in value until each clears
     4.5:1 on the paper, on white and on all four fills. */
  --blue:  #3D6A89;    /* 5.16 paper, 4.51 worst */
  --gold:  #816013;    /* 5.17 paper, 4.51 worst */
  --sage:  #516D3F;    /* 5.18 paper, 4.52 worst */
  --coral: #A24B3D;    /* 5.18 paper, 4.52 worst */
  --muted: #5C666E;    /* 5.22 paper, 4.56 worst. metadata only */

  /* Kept so the old rules resolve. Large display type only, never body. */
  --marigold:#DFAE45;
  --rose:    #E0908A;
  --sky:     #7DA7CE;
  --leaf:    #9FB48E;
  --grape:   #3D6A89;
  --grape-text: #3D6A89;
  --coral-text: #A24B3D;
  --sky-text:   #3D6A89;
  --coral-lg:   #A24B3D;
  --sky-lg:     #3D6A89;

  --tape: rgba(223,174,69,.5);
  --radius: 3px;
  --place: cubic-bezier(.2,.9,.25,1.08);

  --maxw: 1120px;
  --gutter: 30px;
}

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

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

body{
  background:var(--ground);
  color:var(--ink);
  font-family:'General Sans','Instrument Sans',system-ui,sans-serif;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  /* Paper grain rather than the bedsheet dot grid. The workbook's ground is
     a watercolour paper wash, so this is a fine generated speckle at 3.5
     percent: enough to stop the cream reading as flat screen colour, not
     enough to sit under text as texture. No image request. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)' opacity='0.035'/%3E%3C/svg%3E");
}

img,svg,video{display:block;max-width:100%}
img{height:auto}
ul,ol{list-style:none}
button,input,select{font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
a{color:inherit}

/* ---- Focus. 3px grape, 2px offset, everywhere, never suppressed. -------- */
:focus-visible{outline:3px solid var(--grape);outline-offset:2px}

.skip{
  position:absolute;left:16px;top:-80px;z-index:200;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--radius);
  font-family:'Kalam',cursive;font-weight:700;
  transition:top 140ms var(--place);
}
.skip:focus{top:16px}

/* ---- Type ---------------------------------------------------------------
   Kalam needs more leading than a grotesk, so headings run at 1.14.
   ------------------------------------------------------------------------ */
h1,h2,h3,.kalam{
  font-family:'Kalam',cursive;
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.005em;
}
h1{font-size:clamp(40px,7.5vw,92px)}
h2{font-size:clamp(28px,4.4vw,46px)}
h3{font-size:clamp(18px,2.2vw,24px)}
.hand{font-family:'Caveat Brush',cursive;font-weight:400}

p{max-width:64ch}
p + p{margin-top:14px}
.lede{font-size:clamp(17px,2vw,20px);max-width:52ch;color:var(--muted)}
.small{font-size:14px;color:var(--muted)}
b,strong{font-weight:700}

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

/* eyebrow label, set in Kalam so it reads as marker not as a UI chip */
.lbl{
  font-family:'Kalam',cursive;font-weight:700;font-size:15px;
  letter-spacing:.02em;color:var(--grape-text);
  display:inline-block;
}

/* ---- Tape ----------------------------------------------------------------
   A strip of masking tape, torn at both ends. The clip-path is what stops it
   reading as a rectangle of colour.
   ------------------------------------------------------------------------ */
.tape{
  position:absolute;width:104px;height:28px;
  background:var(--tape);
  top:-14px;left:50%;margin-left:-52px;
  transform:rotate(-2.5deg);
  clip-path:polygon(2% 8%,98% 0,100% 86%,3% 100%);
  pointer-events:none;
}
.tape.l{left:20px;margin:0;transform:rotate(-13deg)}
.tape.r{left:auto;right:20px;margin:0;transform:rotate(10deg)}
.tape.coral{background:rgba(224,144,138,.5)}
.tape.sky{background:rgba(125,167,206,.5)}
.tape.leaf{background:rgba(159,180,142,.55)}

/* ---- Card ----------------------------------------------------------------
   White card, 3px cut edge, a shadow that reads as paper lifting rather than
   as a UI elevation.
   ------------------------------------------------------------------------ */
.card{
  position:relative;
  background:var(--card);
  border-radius:var(--radius);
  padding:30px 26px 26px;
  box-shadow:0 2px 0 rgba(36,28,51,.07), 0 18px 34px -22px rgba(36,28,51,.6);
}

/* Rotation is small, odd, and never zero. */
.r1{transform:rotate(-1.1deg)}
.r2{transform:rotate(.8deg)}
.r3{transform:rotate(-.5deg)}
.r4{transform:rotate(1.3deg)}
.r5{transform:rotate(-1.7deg)}
.r6{transform:rotate(.4deg)}

/* ---- Torn dividers ------------------------------------------------------ */
.torn{display:block;width:100%;height:18px}

section{padding:66px 0}
.band{background:var(--ground2)}

.sechead{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:26px}
.sechead h2{flex:1;min-width:260px}

/* ===== Header ============================================================ */
.top{
  position:sticky;top:0;z-index:60;
  background:rgba(248,241,227,.94);
  border-bottom:1px solid rgba(36,28,51,.12);
}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.brand{font-family:'Kalam',cursive;font-weight:700;font-size:21px;text-decoration:none}
.brand span{color:var(--coral-text)}
.top nav ul{display:flex;gap:18px;flex-wrap:wrap}
.top nav a{font-size:14px;font-weight:500;text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.top nav a:hover{border-bottom-color:var(--marigold)}

/* ===== Hero ============================================================== */
.hero{padding:56px 0 40px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.22fr .78fr;gap:36px;align-items:center}
/* 12ch keeps "for navigating" together. At 13ch the word "for" fell
   onto a line of its own, which at this size is very visible. */
.hero h1{max-width:12ch;margin:12px 0 0}
.hero h1 .c1{color:var(--coral-lg)}
.hero h1 .c2{color:var(--sky-lg)}
.hero .lede{margin-top:20px}

.btn{
  display:inline-block;margin-top:26px;
  font-family:'Kalam',cursive;font-weight:700;font-size:19px;
  background:var(--ink);color:#fff;text-decoration:none;
  padding:13px 26px;border-radius:var(--radius);
  transform:rotate(-.8deg);
  box-shadow:0 3px 0 rgba(23,62,103,.22);
  cursor:pointer;
}
.btn:hover{background:#0F2B4A}
.btn[disabled],.btn.is-off{
  background:#D9CFBB;color:#3A3226;cursor:not-allowed;box-shadow:none;
}
.btn-note{display:block;margin-top:10px;font-size:13.5px;color:var(--muted);max-width:38ch}

/* the scatter of scraps behind the hero */
.scatter{position:relative;min-height:400px}
.scrap{
  position:absolute;background:var(--card);border-radius:var(--radius);
  padding:12px 14px;
  font-family:'Caveat Brush',cursive;font-size:17px;line-height:1.25;
  box-shadow:0 12px 26px -18px rgba(36,28,51,.75);
}
.scrap img{width:100%;height:auto}
.scrap.photo{padding:8px 8px 10px}
.s1{top:0;left:2%;width:46%;transform:rotate(-4deg)}
.s2{top:14%;right:0;width:44%;transform:rotate(3.2deg)}
.s3{top:46%;left:0;width:52%;transform:rotate(2deg)}
.s4{top:58%;right:4%;width:40%;transform:rotate(-3.4deg)}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .scatter{min-height:340px}
}

/* ===== Why =============================================================== */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:28px}
.fig{position:relative}
.fig .n{
  font-family:'Kalam',cursive;font-weight:700;
  font-size:clamp(40px,6vw,64px);line-height:1;display:block;margin-bottom:8px;
}
.fig:nth-child(1) .n{color:var(--coral-lg)}
.fig:nth-child(2) .n{color:var(--sky-lg)}
.fig:nth-child(3) .n{color:var(--grape-text)}
.fig p{font-size:15px;color:var(--muted)}
.src{margin-top:22px;font-size:13.5px;color:var(--muted)}
.src a{color:var(--grape-text)}

/* the circle stroked around the key figure */
.ring{position:absolute;inset:-14px -10px auto -10px;height:96px;pointer-events:none}
.ring path{
  fill:none;stroke:var(--marigold);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:640;stroke-dashoffset:640;
}

/* ===== What a circle is ================================================== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:26px;margin-top:34px}
.step{position:relative;background:var(--card);border-radius:var(--radius);padding:30px 22px 24px;
  box-shadow:0 2px 0 rgba(36,28,51,.07),0 18px 34px -22px rgba(36,28,51,.6)}
.step .num{
  position:absolute;top:-17px;left:20px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  /* ink, not white. White on marigold is 2.04:1 and on coral 3.24:1, both
     failing. Ink clears 5:1 on every one of the four fills. */
  color:var(--ink);
  font-family:'Kalam',cursive;font-weight:700;font-size:18px;
}
.step:nth-child(1) .num{background:var(--coral)}
.step:nth-child(2) .num{background:var(--marigold)}
.step:nth-child(3) .num{background:var(--sky)}
.step:nth-child(4) .num{background:var(--leaf)}
.step h3{margin-bottom:6px}
.step p{font-size:14.5px;color:var(--muted)}

.nots{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:30px}
.not{background:var(--card);border-radius:var(--radius);padding:24px 22px;border-left:5px solid var(--coral)}
.not h3{font-size:20px;margin-bottom:6px;color:var(--ink)}
.not p{font-size:14.5px;color:var(--muted)}

/* ===== The wall ========================================================== */
.wall{background:var(--night);color:#F3EEFF;padding:70px 0 64px;overflow:hidden}
.wall h2{color:#fff}
.wall .lbl{color:var(--marigold)}
.wall .lede{color:#C9BEE4}

/* the hero line, on its own card, because the marker is dark green and would
   vanish straight onto the dark band */
.hero-quote{
  background:var(--card);border-radius:var(--radius);
  padding:30px 30px 26px;max-width:520px;margin:26px auto 0;position:relative;
  transform:rotate(-1.2deg);
  box-shadow:0 20px 40px -24px #000;
}
.hero-quote img{width:100%;height:auto}
.hero-quote figcaption{margin-top:14px;font-size:13px;color:#5A4E72;font-family:'General Sans',sans-serif}
.wall-note{max-width:44ch;margin:26px auto 0;text-align:center;color:#C9BEE4;font-size:15px}
.wall-note b{color:#fff}

.mq-wrap{margin-top:40px;position:relative}
.mq{display:flex;gap:16px;width:max-content}
.mq-row{overflow:hidden}
.note{
  background:var(--card);color:var(--ink);border-radius:var(--radius);
  padding:16px 18px;width:238px;flex:0 0 238px;
  font-family:'Caveat Brush',cursive;font-size:18px;line-height:1.3;
  box-shadow:0 14px 26px -20px #000;
}
.note small{
  display:block;margin-top:10px;font-family:'General Sans',sans-serif;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#6B5F85;
}
.note:nth-child(3n){transform:rotate(-1.4deg)}
.note:nth-child(3n+1){transform:rotate(.9deg)}

/* ===== The mosaic ======================================================== */
.mosaic{columns:3;column-gap:20px;margin-top:32px}
.mosaic figure{
  break-inside:avoid;margin:0 0 20px;
  background:var(--card);border-radius:var(--radius);padding:10px 10px 12px;
  box-shadow:0 2px 0 rgba(36,28,51,.07),0 18px 32px -22px rgba(36,28,51,.6);
  position:relative;
}
.mosaic img{width:100%;height:auto;border-radius:1px}
.mosaic figcaption{font-size:12.5px;color:var(--muted);margin-top:8px;font-family:'Caveat Brush',cursive;font-size:15px}
@media (max-width:900px){.mosaic{columns:2}}
@media (max-width:560px){.mosaic{columns:1}}

/* ===== Impact ============================================================ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-top:28px}
.stat{background:var(--card);border-radius:var(--radius);padding:26px 20px;text-align:left}
.stat .v{
  font-family:'Kalam',cursive;font-weight:700;font-size:40px;line-height:1;
  color:#8C8397;display:block;margin-bottom:8px;
}
.stat span.k{font-size:14px;color:var(--muted)}
.holding{margin-top:24px;max-width:56ch;font-size:16px}

/* ===== Who =============================================================== */
.who{display:grid;grid-template-columns:380px 1fr;gap:44px;align-items:start;margin-top:26px}
.who .portrait{background:var(--card);border-radius:var(--radius);padding:10px 10px 12px;
  box-shadow:0 2px 0 rgba(36,28,51,.07),0 20px 36px -24px rgba(36,28,51,.6);
  transform:rotate(-1.6deg);position:relative}
.who .portrait img{width:100%;height:auto;border-radius:1px}
@media (max-width:820px){.who{grid-template-columns:1fr;gap:26px}.who .portrait{max-width:340px}}

/* ===== Toolkit form ====================================================== */
.slip{
  background:var(--card);border-radius:var(--radius);
  max-width:560px;margin-top:28px;position:relative;
  box-shadow:0 2px 0 rgba(36,28,51,.07),0 22px 40px -26px rgba(36,28,51,.65);
  transform:rotate(-.6deg);
}
.slip-top{padding:28px 28px 20px}
/* the dotted tear line */
.tear{
  border:0;border-top:2px dashed rgba(36,28,51,.28);
  margin:0;position:relative;
}
.slip-bot{padding:22px 28px 28px}
.field{display:block;margin-bottom:16px}
.field span{display:block;font-family:'Kalam',cursive;font-weight:700;font-size:15px;margin-bottom:5px}
.field input,.field select{
  width:100%;background:#F7F5FD;border:2px solid rgba(36,28,51,.16);
  border-radius:var(--radius);padding:11px 13px;font-size:15.5px;
}
.field input:focus,.field select:focus{border-color:var(--grape)}

/* ===== Footer ============================================================ */
/* Footer colours are measured against the composited ground, not the raw
   token. The .safe panel is 6 percent white over the navy, which paints as
   #254A70, so that is what these are checked on.
     body   #CBDAE7  7.5 on navy, 6.3 on the panel
     muted  #AFC4D6  6.1 on navy, 5.1 on the panel
     links  #FFFFFF 10.9 on navy, 9.2 on the panel, and underlined so the
            affordance does not rest on colour alone
   The previous values were lavender, left over from the periwinkle ground. */
footer{background:var(--night);color:#CBDAE7;padding:56px 0 48px;font-size:14.5px}
footer h3{color:#fff;font-size:20px;margin-bottom:10px}
footer a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* --muted is tuned for the cream ground and lands at 1.86 on the navy, which
   is what the audit caught. Inside the footer it is overridden. */
footer .small,footer p.small{color:#AFC4D6}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}
.safe{
  background:rgba(255,255,255,.06);border-left:4px solid var(--marigold);
  border-radius:var(--radius);padding:18px 20px;margin-top:26px;
}
.safe b{color:#fff}
.safe{color:#CBDAE7}
.foot-end{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);font-size:13px}

/* ---- Draft annotations --------------------------------------------------
   The Todo chips and their prose are build instrumentation, not content, and
   until this revision they rendered unconditionally: six of them were live on
   the review URL for anyone who opened it.

   They are hidden by default now and appear only when <html data-draft> is
   present. deploy.sh strips that attribute from the public build and sva.js
   puts it back when the URL carries ?draft=1, so the open items stay readable
   on the live URL without the client ever seeing one.

   !important is deliberate: this is the rule that keeps internal notes away
   from the client, so it must not be losable to a specificity accident. The
   .todo rule below sets its own display and would otherwise win.
   ------------------------------------------------------------------------ */
.todo,.dnote,[data-draft-only]{display:none !important}
[data-draft] .todo{display:inline-block !important}
[data-draft] .dnote{display:inline !important}
[data-draft] [data-draft-only]{display:revert !important}

.todo{
  font-family:'Kalam',cursive;font-weight:700;font-size:13px;
  color:#7A2E1F;background:#FFD9C7;border:2px solid var(--b-coral);
  border-radius:var(--radius);padding:1px 8px;
}
footer .todo{color:#3A1B12;background:#FFC9B0}

/* ===========================================================================
   Motion.

   Everything below is inside prefers-reduced-motion: no-preference. Under
   reduce there is no marquee, no fly in, no parallax, and every element is
   simply present. That is not a nice to have on a site about anxiety.
   =========================================================================== */
@media (prefers-reduced-motion: no-preference){

  /* pieces are placed, not faded. one easing, a small overshoot. */
  .place{opacity:0;transform:translateY(16px) rotate(var(--rot,0deg)) scale(.985)}
  .place.is-in{
    opacity:1;transform:translateY(0) rotate(var(--rot,0deg)) scale(1);
    transition:opacity 420ms var(--place), transform 560ms var(--place);
  }

  .mq{animation:slide 46s linear infinite}
  .mq.rev{animation-duration:60s;animation-direction:reverse}
  .mq-row:hover .mq{animation-play-state:paused}
  @keyframes slide{to{transform:translateX(-50%)}}

  .ring path{transition:stroke-dashoffset 700ms ease-out}
  .ring.is-in path{stroke-dashoffset:0}

  .step,.mosaic figure{transition:transform 260ms var(--place)}
  .step:hover{transform:translateY(-4px) rotate(0deg)}
  .mosaic figure:hover{transform:rotate(0deg) translateY(-3px)}

  .who .portrait{transition:transform 700ms var(--place)}
  .who .portrait.is-in{transform:rotate(0deg)}

  .slip{transition:transform 900ms var(--place), opacity 900ms ease}
  .slip.tearing{transform:rotate(-.6deg) translateY(26px) scaleY(.82);opacity:0}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .place{opacity:1 !important;transform:rotate(var(--rot,0deg)) !important}
  .ring path{stroke-dashoffset:0 !important}
  .mq{animation:none !important}
  /* the marquee cannot scroll, so it wraps and shows everything at once */
  .mq{flex-wrap:wrap;width:auto}
  .mq-row{overflow:visible}
  .mq .dup{display:none}
}

/* ===== The workbook, on the page ==========================================
   Revision 02. The client asked for the background to come from the workbook,
   so the workbook's own cover artwork is on the page rather than being
   described. Both images are crops of the supplied PDFs.
   ========================================================================= */

/* The desk scene from the cover, running under the hero. It is a background
   rather than an <img> because it is atmosphere: it carries nothing a screen
   reader needs and must not become the LCP element ahead of the headline. */
.hero-desk{
  height:clamp(180px,26vw,300px);
  margin-top:34px;
  background:url("../assets/wb-desk.webp?v=2a8b703e?v=2a8b703e") center bottom / cover no-repeat;
  border-radius:var(--radius);
}
@media (max-width:720px){
  .hero-desk{height:150px;margin-top:26px}
}

/* The two covers, shown beside the request form so the ask is a thing rather
   than an abstraction. */
.books{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  max-width:420px;
}
.books figure{
  background:var(--card);
  border-radius:var(--radius);
  padding:10px 10px 0;
  box-shadow:0 3px 0 rgba(23,62,103,.14);
  position:relative;
}
.books img{width:100%;height:auto;display:block;border-radius:2px}
.books figcaption{
  font-size:12.5px;
  color:var(--muted);
  padding:9px 2px 11px;
  line-height:1.4;
}
.toolkit-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:44px;
  align-items:start;
}
@media (max-width:860px){
  .toolkit-grid{grid-template-columns:1fr;gap:30px}
  .books{max-width:340px}
}

/* The four card colours from the guide, as a reusable block. */
.wbcard{
  border-radius:8px;
  padding:18px 20px;
  border:1.5px solid;
}
.wbcard h3{font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.wbcard p{font-size:15px}
.wbcard.blue {background:var(--f-blue); border-color:var(--b-blue)}
.wbcard.blue h3 {color:var(--blue)}
.wbcard.gold {background:var(--f-gold); border-color:var(--b-gold)}
.wbcard.gold h3 {color:var(--gold)}
.wbcard.sage {background:var(--f-sage); border-color:var(--b-sage)}
.wbcard.sage h3 {color:var(--sage)}
.wbcard.coral{background:var(--f-coral);border-color:var(--b-coral)}
.wbcard.coral h3{color:var(--coral)}

.wbgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-top:24px;
}

/* the crisis signpost in the footer, set as its own card so it cannot be
   mistaken for ordinary footer text */
.helplines{display:grid;gap:10px;margin-top:12px}
.helpline{
  background:var(--card);
  border-left:4px solid var(--b-blue);
  border-radius:2px;
  padding:10px 12px;
}
.helpline b{display:block;font-size:14px;color:var(--ink)}
.helpline span{font-size:13px;color:var(--muted);display:block;margin-top:2px}

/* the composed request, shown after submit */
.sent{
  background:var(--card);
  border:1.5px solid var(--b-sage);
  border-radius:8px;
  padding:20px 22px;
  max-width:560px;
}
.sent p{font-size:15.5px}
.sent pre{
  margin-top:14px;
  background:var(--ground2);
  border-radius:4px;
  padding:12px 14px;
  font-size:13px;
  line-height:1.6;
  white-space:pre-wrap;
  word-break:break-word;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  color:var(--ink);
}
.sent:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ===== The logo ===========================================================
   Supplied late, so the first build set the identity as type. The real mark
   replaces it: the heart alone in the masthead, where a stacked lockup four
   lines deep would not fit, and the full lockup in the footer where it has
   room to be itself.
   ========================================================================= */

.brand{display:inline-flex;align-items:center;gap:10px}
.brand img{width:30px;height:auto;display:block}

.foot-logo{
  width:190px;
  height:auto;
  display:block;
  margin-bottom:14px;
}
/* The footer uses a separate light artwork rather than a CSS filter. invert()
   cannot tell the type from the heart, so it turned the coral heart cyan.
   The light file recolours only the neutral pixels and leaves the heart
   alone; see the note in the build script. */
@media (max-width:720px){
  .foot-logo{width:160px}
}