/* Do Feel Connect: The Loyalty Playbook.
   Replicates handover/reference/chapter-4.html (the approved design contract)
   exactly, on top of the vendored design tokens (design/tokens/*.css).
   Colours come from the --os-* custom properties only. */

:root{
  --serif:var(--os-font-display);
  --body:var(--os-font-body);
  --mono:var(--os-font-mono);
  /* Product-scoped contrast variable (criterion 1 amendment, 6 July 2026):
     stone for reading text, darkened to clear WCAG AA 4.5:1 on Paper.
     #6C695E measures 4.46:1 on Paper (just under); #6B685D measures 4.52:1.
     The vendored tokens in design/tokens/ are untouched. */
  --os-stone-text:#6B685D;
  /* Same treatment for the four small accent-coloured mono labels
     (eyebrow lead, aside labels, current nav number), Matt-approved:
     orange 4.57:1 on Paper / 4.81:1 on card; green 4.64:1 on card. */
  --os-orange-text:#AC4733;
  --os-green-text:#487263;
}
*{box-sizing:border-box;margin:0;padding:0;font-synthesis:none}
html{scroll-behavior:smooth}
body{background:var(--os-paper);color:var(--os-ink);font-family:var(--body);font-size:16px;line-height:1.6}

/* ---------- Layout ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:264px;flex:0 0 auto;border-right:1px solid var(--os-ink-12);
  padding:32px 24px;position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column}
main{flex:1;min-width:0}
.content{max-width:820px;margin:0 auto;padding:56px 48px 80px}

/* ---------- Sidebar ---------- */
.sb-brand{display:flex;align-items:center;gap:10px;margin-bottom:28px;text-decoration:none}
.sb-brand img{width:22px;height:22px}
.sb-brand span{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--os-ink)}
.sb-title{display:block;font-family:var(--serif);font-size:19px;line-height:1.15;margin-bottom:22px;
  color:var(--os-ink);text-decoration:none}
.sb-title b{font-weight:400;color:var(--os-coral)}
.sb-nav{display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.sb-nav a{display:flex;gap:9px;align-items:baseline;color:var(--os-stone);text-decoration:none;
  padding:5px 8px;border-radius:7px;line-height:1.3}
.sb-nav a i{font-family:var(--mono);font-size:9.5px;font-weight:600;font-style:normal;flex:0 0 18px}
.sb-nav a:hover{background:var(--os-paper-card);color:var(--os-ink)}
.sb-nav a.current{background:var(--os-paper-card);color:var(--os-ink);font-weight:600}
.sb-nav a.current i{color:var(--os-orange)}
.sb-nav .minor{margin-top:10px;padding-top:10px;border-top:1px solid var(--os-ink-12)}
.sb-foot{margin-top:auto;padding-top:24px;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--os-stone)}
.sb-foot img{width:14px;height:14px;opacity:.85}

/* ---------- Chapter header ---------- */
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--os-stone);margin-bottom:16px}
.eyebrow b{font-weight:600;color:var(--os-orange)}
h1{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1.04;
  letter-spacing:-0.01em;margin-bottom:14px;max-width:16em}
h1 .dot{color:var(--os-coral)}
.standfirst{font-size:17px;line-height:1.55;color:var(--os-stone);max-width:620px;margin-bottom:40px}
.standfirst b,.standfirst strong{color:var(--os-ink);font-weight:600}

/* ---------- Prose ---------- */
h2{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.15;margin:44px 0 12px}
h3{font-size:15px;font-weight:700;margin:28px 0 8px}
p{margin:0 0 14px;max-width:680px}
p b,li b,p strong,li strong{font-weight:600}
ul,ol{margin:0 0 16px 22px;max-width:660px}
li{margin-bottom:7px}
li::marker{color:var(--os-orange)}
ol li::marker{font-family:var(--mono);font-size:12px;color:var(--os-stone)}

/* ---------- Callout asides ---------- */
.aside{border-left:3px solid var(--os-orange);background:var(--os-paper-card);
  border-radius:0 12px 12px 0;padding:14px 18px 13px;margin:22px 0;max-width:680px}
.aside.tip{border-left-color:var(--os-green)}
.aside .lab{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--os-orange);margin-bottom:6px}
.aside.tip .lab{color:var(--os-green)}
.aside p{margin:0;font-size:14px;line-height:1.5}

/* ---------- Tables ---------- */
table{border-collapse:collapse;width:100%;margin:18px 0 26px;font-size:13.5px}
th{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  text-align:left;color:var(--os-paper);background:var(--os-ink);padding:9px 12px}
td{border:1px solid var(--os-ink-20);padding:8px 12px;background:var(--os-paper-card);vertical-align:top}
tr:nth-child(even) td{background:var(--os-paper)}
td b,td strong{font-weight:600}
.ws td{height:40px}

/* ---------- Checklist ---------- */
.check{list-style:none;margin-left:0;max-width:660px}
.check li{display:flex;gap:11px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--os-ink-12)}
.check li::before{content:"";flex:0 0 14px;width:14px;height:14px;border:2px solid var(--os-ink-20);
  border-radius:4px;position:relative;top:2px}

/* ---------- Visual embed ---------- */
.visual{margin:34px 0;max-width:820px}
.visual .frame{position:relative;width:100%;aspect-ratio:1280/720;border:1px solid var(--os-ink-12);
  border-radius:14px;overflow:hidden;background:var(--os-paper)}
.visual iframe{position:absolute;top:0;left:0;width:1328px;height:768px;border:0;
  transform:scale(calc(100% / 1328 * 1px * 1));transform-origin:0 0}
.visual .cap{display:flex;align-items:baseline;gap:12px;margin-top:10px;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--os-stone)}
.visual .cap a{margin-left:auto;color:var(--os-blue);text-decoration:none;font-weight:600}
.visual .cap a:hover{text-decoration:underline}

/* ---------- Worksheet block ---------- */
.worksheet{margin-top:52px;border-top:2px solid var(--os-ink);padding-top:8px}
.worksheet .wk-eyebrow{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--os-stone);display:flex;align-items:center;margin:14px 0 6px}
.worksheet .wk-eyebrow a{margin-left:auto;color:var(--os-blue);text-decoration:none;font-weight:600;letter-spacing:.12em}
.worksheet h2{margin-top:6px}

/* ---------- Prev / next ---------- */
.pager{display:flex;gap:14px;margin-top:60px;padding-top:22px;border-top:1px solid var(--os-ink-20)}
.pager a{flex:1;text-decoration:none;color:var(--os-ink);background:var(--os-paper-card);
  border:1px solid var(--os-ink-12);border-radius:12px;padding:14px 16px}
.pager a:hover{border-color:var(--os-ink-20)}
.pager .dir{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--os-stone);margin-bottom:5px}
.pager .nm{font-family:var(--serif);font-size:18px}
.pager a.next{text-align:right}

/* ---------- Footer ---------- */
.pagefoot{display:flex;align-items:center;gap:10px;margin-top:44px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--os-stone)}
.pagefoot .right{margin-left:auto}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .shell{flex-direction:column}
  .sidebar{position:static;width:100%;height:auto;border-right:0;border-bottom:1px solid var(--os-ink-12);padding:20px 24px}
  .sb-nav{flex-direction:row;flex-wrap:wrap}
  .sb-foot{display:none}
  .content{padding:36px 22px 60px}
  h1{font-size:34px}
}

/* ---------- Print (browser print of a page, per the reference) ---------- */
@media print{
  .sidebar,.pager,.visual .cap a,.wk-eyebrow a{display:none !important}
  body{background:#fff}
  .content{max-width:none;padding:0}
  .aside,table,.check li{break-inside:avoid}
  h2{break-after:avoid}
  @page{size:A4;margin:18mm 16mm}

  /* Worksheet-only print view: triggered by the "Print this worksheet" link.
     Tightened so every worksheet fits one to two A4 sheets. */
  html.ws-print .content>*:not(.print-target){display:none !important}
  html.ws-print .worksheet.print-target{margin-top:0;border-top:0;padding-top:0}
  html.ws-print .worksheet h2{margin:0 0 8px}
  html.ws-print .worksheet h3{margin:14px 0 6px}
  html.ws-print .worksheet .aside{margin:10px 0;padding:10px 14px 9px}
  html.ws-print .worksheet table{font-size:11px;margin:10px 0 14px}
  html.ws-print .worksheet td{padding:6px 8px}
  html.ws-print .worksheet .ws td{height:30px}
  html.ws-print .worksheet li{margin-bottom:4px}
  html.ws-print .worksheet .check li{padding:6px 0}
}

/* ---------- Contrast override (criterion 1 amendment) ----------
   Stone-coloured reading text uses the product-scoped --os-stone-text.
   Decorative/label stone (sidebar foot, list markers) keeps the brand token. */
.sb-nav a{color:var(--os-stone-text)}
.eyebrow{color:var(--os-stone-text)}
.standfirst{color:var(--os-stone-text)}
.visual .cap{color:var(--os-stone-text)}
.worksheet .wk-eyebrow{color:var(--os-stone-text)}
.pager .dir{color:var(--os-stone-text)}
.pagefoot{color:var(--os-stone-text)}
.eyebrow b{color:var(--os-orange-text)}
.sb-nav a.current i{color:var(--os-orange-text)}
.aside .lab{color:var(--os-orange-text)}
.aside.tip .lab{color:var(--os-green-text)}

/* ---------- Site-only extensions (cover + contents), tokens only ---------- */
.cover-h1{font-size:54px;max-width:13em}
.contents{list-style:none;margin:16px 0 30px;max-width:680px;counter-reset:toc}
.contents li{margin:0;border-bottom:1px solid var(--os-ink-12)}
.contents li a{display:flex;gap:14px;align-items:baseline;padding:11px 8px;border-radius:9px;
  color:var(--os-ink);text-decoration:none;font-family:var(--serif);font-size:18px;line-height:1.25}
.contents li a::before{content:counter(toc,decimal-leading-zero);counter-increment:toc;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;
  color:var(--os-stone);flex:0 0 24px;position:relative;top:-2px}
.contents li a:hover{background:var(--os-paper-card)}
.compiled{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--os-stone-text);margin-top:8px}