/* Self-hosted fonts, added 20 August 2026.
   Replaces the render-blocking Google Fonts stylesheet so the site makes no
   external request of any kind, which is what the Privacy page promises.
   Both files are the latin subset, variable weight, taken from the same
   Google Fonts release the site already used, so rendering is unchanged.
   The unicode-range is Google's own latin range, kept verbatim so that any
   character outside it falls back exactly as it does today. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('/fonts/playfair-display-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Orwyn site styles — brand tokens governed by the orwyn-brand skill's palette.md. Do not edit hex values. */
:root{
  --plum:#2B1B2E; --coral:#E5735B; --sage:#7A8F7D; --parchment:#F6F4EF; --stone:#D6D8DB;
  --ink:#2B1B2E; --muted:#6B6470; --line:#E5E1E6; --card:#FFFFFF;
  --coral-soft:#FDF3F0;
  --red:#B23B2E; --redbg:#FBECEA; --redline:#E5B7B0;
  --amber:#8A6D1F; --amberbg:#FBF3DD; --amberline:#E8D79C;
  --green:#3F6B57; --greenbg:#E9F1EC; --greenline:#BCD6C8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--parchment);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* Header */
header.top{background:var(--plum);color:#fff;padding:16px 0;position:sticky;top:0;z-index:10;
  box-shadow:0 1px 0 rgba(0,0,0,.18)}
header.top .wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.mark{font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-size:27px;letter-spacing:.02em;font-weight:600;color:#fff;text-decoration:none}
.mark .o{color:var(--coral)}
.mark .tm{font-family:'Inter',-apple-system,sans-serif;font-size:.38em;font-weight:500;vertical-align:super;letter-spacing:0;margin-left:2px;color:#E7DCE6}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logomark{width:34px;height:34px;border-radius:8px;display:block;flex:0 0 auto}
nav.main{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
nav.main a{color:#E7DCE6;text-decoration:none;font-size:14.5px;font-weight:500;padding:8px 12px;border-radius:999px}
nav.main a:hover{color:#fff;background:rgba(255,255,255,.07)}
nav.main a[aria-current="page"]{color:#fff;font-weight:600}
nav.main a.cta{background:#fff;color:var(--plum);font-weight:600;padding:9px 18px;margin-left:8px}
nav.main a.cta:hover{background:#F1EDE6}
@media(max-width:880px){header.top .wrap{gap:12px}nav.main{margin-left:0}}

/* Hero — plum ground, soft light, one idea */
.hero{background:var(--plum);color:#fff;position:relative;overflow:hidden;
  padding:110px 0 120px}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 22% 8%, rgba(229,115,91,.16), transparent 65%),
    radial-gradient(ellipse 55% 50% at 85% 95%, rgba(122,143,125,.18), transparent 65%)}
.hero .wrap{position:relative;z-index:1;text-align:center}
.hero .kicker{color:#CBB9CC}
.hero h1{font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:clamp(38px,6.2vw,68px);line-height:1.12;margin:14px auto 26px;max-width:17ch}
.hero .lede{font-size:19px;line-height:1.65;color:#E7DCE6;max-width:56ch;margin:0 auto 16px}
.hero .thesis{font-family:'Playfair Display',Georgia,serif;font-size:clamp(20px,2.6vw,26px);font-weight:600;color:#fff;max-width:44ch;margin:26px auto 40px;line-height:1.35}
.hero.small{padding:74px 0 78px}
.hero.small h1{font-size:clamp(32px,4.6vw,50px);max-width:22ch;margin-left:auto;margin-right:auto}
.hero .heromark{display:block;margin:0 auto 26px;width:clamp(150px,20vw,240px);height:auto}

/* Buttons */
.btn{display:inline-block;padding:12px 24px;border-radius:999px;border:1px solid var(--plum);
  background:var(--plum);color:#fff;font:inherit;font-size:15.5px;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:#3A2740}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);margin-right:10px}
.btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn.onlight{background:var(--plum);color:#fff}
.btn.onlight.ghost{background:transparent;color:var(--plum);border-color:var(--plum)}

/* Sections — generous air, one idea per screen */
section.idea{padding:96px 0 8px;text-align:center}
section.idea.first{padding-top:84px}
.kicker{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
h2.section{font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:clamp(28px,3.6vw,40px);line-height:1.2;margin:12px auto 22px;max-width:24ch}
.lead{font-size:17.5px;line-height:1.7;max-width:62ch;margin:0 auto 18px}
.lead:last-child{margin-bottom:0}
.center{text-align:center}
.center h2.section,.center .lead{margin-left:auto;margin-right:auto}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 26px;text-align:left}
.card h3{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:19px;margin:0 0 10px}
.card p{margin:0 0 12px;font-size:15.5px;line-height:1.65}
.card p:last-child{margin-bottom:0}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
@media(max-width:860px){.three{grid-template-columns:1fr}}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:38px}
@media(max-width:760px){.grid{grid-template-columns:1fr}}

/* Page teaser links on home */
.pagelinks{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:38px}
@media(max-width:760px){.pagelinks{grid-template-columns:1fr}}
a.pagelink{display:block;text-align:left;text-decoration:none;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:24px 26px;transition:border-color .2s ease}
a.pagelink:hover{border-color:var(--stone)}
a.pagelink h3{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:19px;margin:0 0 8px}
a.pagelink p{margin:0;font-size:15px;color:var(--muted);line-height:1.6}
a.pagelink .go{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;color:var(--plum)}

/* Bio */
.bio{display:flex;gap:26px;align-items:flex-start}
.portrait{width:140px;height:140px;border-radius:50%;flex:0 0 auto;object-fit:cover;border:3px solid var(--plum)}
@media(max-width:620px){.bio{flex-direction:column;gap:16px}.portrait{width:108px;height:108px}}

/* Closing band */
.band{background:var(--plum);color:#fff;border-radius:18px;padding:64px 48px;margin:96px 0 0;text-align:center;
  position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 70% at 80% 10%, rgba(229,115,91,.15), transparent 65%)}
.band>*{position:relative}
.band h2{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:clamp(26px,3.2vw,34px);margin:0 auto 14px;max-width:24ch}
.band p{color:#E7DCE6;max-width:56ch;font-size:16.5px;margin:0 auto 26px}
@media(max-width:620px){.band{padding:40px 26px}}

/* Footer */
.foot{font-size:12.5px;color:var(--muted);margin-top:88px;border-top:1px solid var(--line);padding-top:16px}
.disclaim{background:#fff;border:1px dashed var(--stone);border-radius:10px;padding:10px 14px;font-size:12.5px;color:var(--muted);margin-top:12px}
footer.site{background:var(--plum);color:#E7DCE6;padding:40px 0 50px;font-size:13.5px;margin-top:44px}
footer.site a{color:#fff}
footer.site .mark{font-size:22px;display:inline-block;margin-bottom:12px}
footer.site nav{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0 18px}
footer.site nav a{color:#E7DCE6;text-decoration:none;font-size:13.5px}
footer.site nav a:hover{color:#fff}
a{color:var(--plum)}
.pad{padding-bottom:96px}

/* Scroll pacing — content arrives quietly */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

.bio{text-align:left}
.hero .btn.ghost{margin:0 6px}

/* Mobile menu — hamburger below 880px */
.menubtn{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;padding:10px;
  position:absolute;right:16px;top:14px;border-radius:10px}
.menubtn span{display:block;height:2px;background:#fff;border-radius:2px;margin:5px 0;transition:transform .25s ease,opacity .25s ease}
@media(max-width:880px){
  header.top{position:sticky}
  header.top .wrap{position:relative;justify-content:center;gap:0}
  .menubtn{display:block}
  nav.main{display:none;width:100%;flex-direction:column;align-items:stretch;gap:2px;margin:14px 0 6px}
  nav.main a{padding:12px 14px;font-size:16px;border-radius:10px}
  nav.main a.cta{margin:10px 0 4px;text-align:center;padding:12px 14px}
  header.top.menu-open nav.main{display:flex}
  header.top.menu-open .menubtn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.top.menu-open .menubtn span:nth-child(2){opacity:0}
  header.top.menu-open .menubtn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* Coral accent system — large or bold text only (contrast rule) */
.accent{color:var(--coral)}
.lead b.hl,p b.hl{color:var(--coral);font-weight:600}
a.pagelink .go{color:var(--coral)}
a.pagelink:hover{border-color:var(--coral)}
nav.main a:hover{color:var(--coral);background:rgba(229,115,91,.08)}
footer.site nav a:hover{color:var(--coral)}
.band .btn.ghost:hover{border-color:var(--coral);color:var(--coral)}

.hero .kicker2{margin-top:7px}

/* Coral words in body leads carry weight for contrast compliance */
.lead .accent,.lede .accent{font-weight:600}

/* Dictionary entry — the name */
.dict{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:34px 38px;max-width:620px;margin:38px auto 0;text-align:left}
.dict .word{font-family:'Playfair Display',Georgia,serif;font-size:34px;font-weight:600;color:var(--ink)}
.dict .word .o{color:var(--coral)}
.dict .phon{font-size:15px;color:var(--muted);margin-left:10px}
.dict .pos{font-size:13px;font-style:italic;color:var(--muted);margin-left:8px}
.dict .ety{font-size:15px;color:var(--muted);margin:14px 0 10px;line-height:1.6}
.dict .def{font-size:17px;line-height:1.6;margin:0}

/* National statistics cards — problem validation */
.stat .n{font-family:'Playfair Display',Georgia,serif;font-size:40px;font-weight:700;color:var(--plum);line-height:1.1}
.stat .t{font-size:15px;line-height:1.55;margin-top:8px}
.stat .src{font-size:12.5px;color:var(--muted);margin-top:10px}
.stat .src a{color:var(--muted)}

/* Footer standing group: safety and standards, quiet and secondary */
footer.site .footgroup{margin:0 0 20px}
footer.site .footgroup .footgroup-h{display:block;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:#CBB9CC;margin-bottom:7px}
footer.site .footgroup a{color:#E7DCE6;text-decoration:none;font-size:12.5px;margin-right:16px}
footer.site .footgroup a:hover{color:var(--coral)}

/* ============================================================
   VISUAL RHYTHM (added on branch redesign-visual-rhythm)
   Alternating full-bleed grounds, a left-aligned reading measure,
   numbered step sequences, the two-directions diagram, and the
   product device frame. Existing brand tokens only — no new hex.
   These are opt-in classes; pages not using them are unchanged.
   ============================================================ */

/* A third, light ground: a soft tint mixed from existing tokens.
   Fallback to parchment where color-mix is unsupported. */
:root{--sage-tint:#F6F4EF;--sage-tint:color-mix(in srgb, var(--sage) 13%, #FFFFFF)}

/* Full-bleed section grounds; content stays inside an inner .wrap. */
section.idea.ground{padding:84px 0;text-align:center}
section.idea.ground.first{padding-top:84px}
section.idea.ground.slim{padding:60px 0}
.ground-parchment{background:var(--parchment)}
.ground-white{background:var(--card)}
.ground-sage{background:var(--sage-tint)}
.ground-plum{background:var(--plum);color:#fff}
.ground-plum .kicker{color:#CBB9CC}
.ground-plum h2.section{color:#fff}
.ground-plum .body,.ground-plum .lead{color:#E7DCE6}
.ground-plum .accent{color:var(--coral)}
.ground-plum .card{color:var(--ink)}            /* keep white cards dark-inked on plum */

/* Reading measure: headings stay centred, longer copy sits left
   in a ~68ch column that is itself centred under the heading. */
.body{max-width:68ch;margin:0 auto 18px;text-align:left;font-size:17.5px;line-height:1.7}
.body:last-child{margin-bottom:0}

/* Numbered vertical sequence with a connecting rule down the left. */
.sequence{list-style:none;margin:42px auto 0;padding:0;max-width:760px;text-align:left;position:relative}
.sequence::before{content:"";position:absolute;left:24px;top:14px;bottom:14px;width:2px;background:var(--line)}
.step{position:relative;padding:0 0 32px 74px}
.step:last-child{padding-bottom:0}
.step .num{position:absolute;left:0;top:-2px;width:50px;text-align:center;z-index:1;
  font-family:'Playfair Display',Georgia,serif;font-weight:700;color:var(--plum);
  font-size:30px;line-height:1.05;padding:3px 0}
.step h3{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:19px;margin:0 0 7px}
.step p{margin:0 0 10px;font-size:15.5px;line-height:1.65}
.step p:last-child{margin-bottom:0}
/* the first two steps carry more weight; the last two recede */
.step.lead .num{font-size:44px;top:-6px}
.step.lead h3{font-size:22px}
.step.lead p{font-size:16.5px}
.step.tail .num{font-size:26px;color:var(--muted)}
.step.tail h3{font-size:18px}
/* numerals mask the rule with a chip in the section's own ground colour */
.ground-parchment .sequence .num{background:var(--parchment)}
.ground-sage .sequence .num{background:var(--sage-tint)}
.ground-white .sequence .num{background:var(--card)}
@media(max-width:520px){
  .step{padding-left:60px}
  .sequence::before{left:19px}
  .step .num{width:40px;font-size:26px}
  .step.lead .num{font-size:36px}
}

/* Strong single onward link (replaces the home Explore grid) */
.nextlink{display:flex;align-items:center;gap:16px 20px;flex-wrap:wrap;max-width:760px;margin:6px auto 0;
  text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:24px 28px;transition:border-color .2s ease}
.nextlink:hover{border-color:var(--coral)}
.nextlink .nextlink-k{flex:0 0 100%;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.nextlink .nextlink-h{flex:1 1 auto;font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:22px;color:var(--plum)}
.nextlink .nextlink-go{font-size:15px;font-weight:600;color:var(--coral);white-space:nowrap}

/* The two-directions diagram (inline SVG) */
.diagram{max-width:820px;margin:34px auto 8px}
.diagram svg{width:100%;height:auto;display:block}
.dgm-box{fill:#fff;stroke:var(--sage);stroke-width:1.4}
.dgm-decision{fill:#FFFDFC;stroke:var(--coral);stroke-width:2.5}
.dgm-card-c{fill:var(--coral-soft);stroke:var(--coral);stroke-width:1.3}
.dgm-card-s{fill:#EDF3EE;stroke:var(--sage);stroke-width:1.3}
.dgm-cap{fill:var(--plum);font-size:12px;font-weight:700;letter-spacing:.05em}
.dgm-sub{fill:var(--muted);font-size:12px}
.dgm-t{fill:var(--plum);font-size:14px;font-weight:700;letter-spacing:.03em}
.dgm-dsub{fill:var(--muted);font-size:11.5px}
.dgm-cap2{fill:var(--plum);font-size:11px;font-weight:700;letter-spacing:.04em}
.dgm-sub2{fill:var(--plum);font-size:12.5px;font-weight:600}
.dgm-gl{fill:var(--muted);font-size:11.5px;font-style:italic}
.dgm-fl{fill:var(--plum);font-size:12px;font-weight:600}
.dgm-main-p{stroke:var(--plum);stroke-width:2.5;fill:none}
.dgm-main-c{stroke:var(--coral);stroke-width:2.5;fill:none}
.dgm-main-s{stroke:var(--sage);stroke-width:2.5;fill:none}
.dgm-ghost{stroke:#B9AEBA;stroke-width:1.4;fill:none;stroke-dasharray:2 5;opacity:.85}
.dgm-fb{stroke:var(--plum);stroke-width:1.4;fill:none;opacity:.5}
.dgm-alt{display:none}
@media(max-width:640px){
  .diagram svg{display:none}
  .dgm-alt{display:block;max-width:34rem;margin:26px auto 0;text-align:left}
  .dgm-alt ol{margin:0;padding-left:1.15rem}
  .dgm-alt li{margin:0 0 11px;font-size:15.5px;line-height:1.5;color:var(--ink)}
  .dgm-alt li b{color:var(--plum)}
  .dgm-alt p{margin:14px 0 0;font-size:14.5px;color:var(--muted);line-height:1.6}
}
.figcap{font-size:13px;color:var(--muted);text-align:center;margin:14px auto 0;max-width:64ch;line-height:1.55}
.figcap a{color:var(--plum);font-weight:600}

/* Product device frame */
.device-figure{max-width:820px;margin:36px auto 0;text-align:center}
.device{border:1px solid var(--stone);border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 2px 14px rgba(43,27,46,.07)}
.device-bar{display:flex;gap:7px;align-items:center;padding:12px 14px;background:var(--parchment);border-bottom:1px solid var(--line)}
.device-bar span{width:10px;height:10px;border-radius:50%;background:var(--stone)}
.device-shot{display:block;width:100%;height:auto}
.device-ph{aspect-ratio:1440/1080;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:repeating-linear-gradient(45deg,var(--parchment),var(--parchment) 16px,#fff 16px,#fff 32px);
  color:var(--muted);text-align:center;padding:28px}
.device-ph b{font-family:'Playfair Display',Georgia,serif;color:var(--plum);font-weight:600;font-size:19px}
.device-ph span{font-size:13px;max-width:44ch}

/* Closing band on restructured pages: no extra top margin */
.band.close{margin-top:0}

/* two-route CTA pair */
.cta-row{margin-top:22px}
.cta-row .btn{margin:6px}

/* Diagram wrapper for the inlined graphics pack — added 20 August 2026 */
.orwyn-visual { width:min(100%,1100px); margin:44px auto 0 }
.orwyn-visual svg { display:block; width:100%; height:auto }
.orwyn-visual figcaption { font-size:13.5px; color:var(--muted); text-align:center; margin-top:14px; line-height:1.55 }
@media (max-width:720px){
  .orwyn-visual { overflow-x:auto; -webkit-overflow-scrolling:touch }
  .orwyn-visual .wide-infographic { min-width:760px }
}