/* ============================================================
   NSCM Life-Skills Posters — shared accessible design system
   Audience: 16–25, many with literacy / SEND / executive-function
   needs. Big icons, plain English, colour-coded, printable A4.
   ============================================================ */

:root{
  --bg:#fbf8f1;            /* warm off-white (kinder than #fff for dyslexia) */
  --ink:#1a2540;           /* deep navy, not pure black (lower contrast strain) */
  --ink-soft:#5d6478;
  --line:rgba(26,37,64,.12);
  --panel:#ffffff;
  --warn-bg:#fff4d6;       /* amber tip box */
  --warn-bd:#e6b432;
  --stop-bg:#ffe1e1;       /* red 'careful' box */
  --stop-bd:#d6433a;
  --ok:#2d8e5f;            /* green tick */
  --radius:18px;
  --maxw:1080px;
  --accent:#5a2d82;        /* per-poster override */
  --accent-soft:#ece1f6;
}

/* font: Lexend is shape-tuned for reading proficiency */
*{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100% }
body{
  font-family:"Lexend","Atkinson Hyperlegible",system-ui,sans-serif;
  font-weight:500;
  color:var(--ink);
  background:var(--bg);
  line-height:1.45;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.01em;
}
img,svg{display:block;max-width:100%}

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--ink)}

/* ---------- layout shell ---------- */
.sheet{
  max-width:var(--maxw);
  margin:24px auto;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px 40px 30px;
  box-shadow:0 24px 60px -28px rgba(26,37,64,.18);
}

/* ---------- header band ---------- */
.head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:22px;
  padding-bottom:18px;
  border-bottom:6px solid var(--accent);
  margin-bottom:24px;
}
.head .topic-icon{
  width:96px;height:96px;border-radius:24px;
  background:var(--accent);color:#fff;
  display:grid;place-items:center;
  font-size:54px;line-height:1;
}
.head h1{
  font-family:"Lexend";font-weight:700;font-size:clamp(1.7rem,3.5vw,2.4rem);
  letter-spacing:-.01em;line-height:1.1;color:var(--ink);
}
.head .sub{margin-top:6px;color:var(--ink-soft);font-weight:500;font-size:1.02rem}
.head .badge{
  font-family:"Lexend";font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.14em;
  background:var(--accent-soft);color:var(--accent);
  padding:.5rem .9rem;border-radius:999px;white-space:nowrap;
}

/* "you'll need" pill row */
.need{
  display:flex;flex-wrap:wrap;gap:.5rem;
  background:var(--accent-soft);
  border:1px solid var(--line);
  border-radius:14px;
  padding:.7rem .9rem;
  margin-bottom:22px;
  font-weight:500;
  font-size:.95rem;
  align-items:center;
}
.need strong{
  font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;
  margin-right:.35rem;
}
.need span{
  background:#fff;border:1px solid var(--line);
  padding:.25rem .65rem;border-radius:999px;
}

/* ---------- steps grid ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  position:relative;
}
.step{
  position:relative;
  background:#fff;
  border:2px solid var(--line);
  border-radius:var(--radius);
  padding:18px 16px 16px;
  display:flex;flex-direction:column;
  min-height:230px;
}
.step .n{
  width:46px;height:46px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:grid;place-items:center;
  font-family:"Lexend";font-weight:800;font-size:1.4rem;
  box-shadow:0 4px 12px -4px rgba(26,37,64,.25);
  margin-bottom:.6rem;
}
.step .pics{
  font-size:46px;line-height:1.1;
  display:flex;gap:.35rem;flex-wrap:wrap;
  margin-bottom:.5rem;
}
.step .text{
  font-weight:600;font-size:1.05rem;line-height:1.3;color:var(--ink);
}
.step .hint{
  margin-top:.35rem;font-weight:500;font-size:.92rem;color:var(--ink-soft);
}

/* arrows between cards (desktop / print only — hidden on small screens) */
.step::after{
  content:"";
  position:absolute;
  top:50%;
  right:-13px;
  width:24px;height:24px;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 5l7 7-7 7-1.4-1.4L17.2 12 11.6 6.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 5l7 7-7 7-1.4-1.4L17.2 12 11.6 6.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:translateY(-50%);
  opacity:.7;
}
/* no arrow on last card of row or last card overall */
.steps .step:nth-child(3n)::after,
.steps .step:last-child::after{display:none}
/* row-end → down arrow to next row's first card (cards 3 and 6) */
.steps .step:nth-child(3):not(:last-child)::after{
  display:block;
  top:auto;right:50%;bottom:-14px;left:auto;
  transform:translateX(50%) rotate(90deg);
}

/* ---------- footer tip / warning ---------- */
.tip{
  margin-top:22px;
  background:var(--warn-bg);
  border:2px solid var(--warn-bd);
  border-radius:16px;
  padding:14px 18px;
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
}
.tip .ico{font-size:30px;line-height:1}
.tip .body strong{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:#7a5400;display:block;margin-bottom:2px}
.tip .body p{font-weight:500;font-size:1rem;color:var(--ink)}

.stop{
  margin-top:14px;
  background:var(--stop-bg);
  border:2px solid var(--stop-bd);
  border-radius:16px;
  padding:14px 18px;
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
}
.stop .ico{font-size:30px;line-height:1}
.stop .body strong{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:#7a1b14;display:block;margin-bottom:2px}
.stop .body p{font-weight:500;font-size:1rem;color:var(--ink)}

/* ---------- foot brand strip ---------- */
.foot{
  margin-top:24px;padding-top:14px;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-size:.88rem;color:var(--ink-soft);
}
.foot .brand{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--ink)}
.foot .brand .pebbles{display:inline-flex;align-items:flex-end;gap:3px}
.foot .brand .pebbles i{display:block;border-radius:50%;background:var(--accent)}
.foot .brand .pebbles i:nth-child(1){width:14px;height:14px}
.foot .brand .pebbles i:nth-child(2){width:10px;height:10px;opacity:.7}
.foot .brand .pebbles i:nth-child(3){width:6px;height:6px;opacity:.5}
.foot a.back{color:var(--accent);text-decoration:none;font-weight:700}
.foot a.back:hover{text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .sheet{margin:14px 10px;padding:22px 18px}
  .head{grid-template-columns:auto 1fr;gap:14px}
  .head .badge{grid-column:1 / -1;justify-self:start}
  .head .topic-icon{width:72px;height:72px;font-size:40px;border-radius:18px}
  .steps{grid-template-columns:1fr 1fr;gap:12px}
  .step{min-height:0;padding:14px}
  .step .pics{font-size:38px}
  .step::after{display:none !important}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
}

/* ---------- print: A4 portrait, one page ---------- */
@page{ size: A4 portrait; margin: 10mm; }
@media print{
  html,body{background:#fff}
  .sheet{box-shadow:none;border:0;margin:0;padding:0;max-width:none}
  .step{break-inside:avoid}
  .steps{gap:10px}
  .step::after{display:none !important}
  .foot a.back{display:none}
  a{color:inherit;text-decoration:none}
}

/* honour reduced motion (kept minimal — no real animations) */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}

/* ============================================================
   INDEX PAGE (poster gallery) — uses same vars, extra rules
   ============================================================ */
.idx-head{
  max-width:var(--maxw);margin:36px auto 0;padding:0 24px;
}
.idx-head h1{font-family:"Lexend";font-weight:700;font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.01em;line-height:1.05}
.idx-head p{margin-top:.6rem;color:var(--ink-soft);font-size:1.1rem;max-width:62ch}
.gallery{
  max-width:var(--maxw);margin:24px auto 60px;padding:0 24px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;
}
.tile{
  display:flex;flex-direction:column;justify-content:space-between;
  background:#fff;border:2px solid var(--line);border-radius:var(--radius);
  padding:20px 20px 18px;text-decoration:none;color:var(--ink);
  min-height:200px;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.tile:hover{transform:translateY(-4px);box-shadow:0 16px 40px -16px rgba(26,37,64,.25);border-color:var(--tile)}
.tile .ico{
  width:72px;height:72px;border-radius:18px;background:var(--tile);color:#fff;
  display:grid;place-items:center;font-size:40px;line-height:1;margin-bottom:14px;
}
.tile h2{font-family:"Lexend";font-weight:700;font-size:1.25rem;line-height:1.15;letter-spacing:-.01em}
.tile p{margin-top:.3rem;color:var(--ink-soft);font-size:.96rem;font-weight:500}
.tile .open{
  margin-top:14px;font-weight:700;color:var(--tile);font-size:.94rem;
  display:inline-flex;align-items:center;gap:.35rem;
}