/* RT Mentoring, site update v2 (September 2026).
   Design and visual layer only: no wording changes.
   Loaded after each page's own styles, so these rules refine them.
   Every animation ends on exactly the design the page already had. */

/* ---------- 1. Fonts, served from this site (same families and weights as before) ---------- */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/hanken-grotesk-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/hanken-grotesk-latin-400-normal.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:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/hanken-grotesk-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/hanken-grotesk-latin-500-normal.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:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/hanken-grotesk-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/hanken-grotesk-latin-700-normal.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:"Hanken Grotesk";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/hanken-grotesk-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/hanken-grotesk-latin-800-normal.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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400-normal.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:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-500-normal.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:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-600-normal.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:"Caveat";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/caveat-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Caveat";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/caveat-latin-600-normal.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}

/* ---------- 2. Robustness ---------- */
/* Sections that fade in stay visible if JavaScript is switched off */
html:not(.js) .reveal{opacity:1!important;transform:none!important}
/* Links to a spot on the page land below the 73px sticky header, not under it.
   Sections already carry deep top padding, so on desktop they land exactly as before;
   on phones they get a small margin so the first line does not touch the header. */
[id]{scroll-margin-top:76px}
section[id],main[id]{scroll-margin-top:0}
@media(max-width:780px){section[id]{scroll-margin-top:24px}}
/* Full Cycle already offsets its own links (88px), so it keeps exactly today's behaviour */
html[data-rt-scroll="page"] [id]{scroll-margin-top:0}
/* Images keep their existing sizing inside the new picture wrappers */
.art-fig picture,.hero-img picture,.rel-card picture,.mcard picture,.acard picture,.mfile picture,.author picture{display:contents}
picture>source{display:none}

/* ---------- 3. Visual fixes ---------- */
/* 60-min Review headline: the same red-pen underline as Home and Full Cycle (identical to the rules those two pages already carry) */
h1 .pen{position:relative;white-space:nowrap}
h1 .pen::after{content:"";position:absolute;left:-1%;right:-1%;bottom:.04em;height:.14em;background:var(--pen);opacity:.85;border-radius:2px;transform:rotate(-.6deg)}

/* Grey text on beige sections: slightly darker to meet contrast guidelines (4.4:1 to 4.6:1) */
.alt,.section.alt{--muted:#6A6D74}
/* "(optional)" hints in dark forms: brighter (2.9:1 to 5.4:1) */
.dark-form label span[style*="opacity"]{opacity:.8!important}
/* Full Cycle motto on navy: brighter (4.2:1 to 5.0:1) */
.arc-motto{color:#7E8DB3}

/* Keyboard focus ring: white on dark sections, where navy was invisible */
:is(.final,.band,.card.hot,.guide-card,.cred,.mentor-card,.glance,.pricebox,.ins-cta,.cta-box,.rtcap,footer[data-theme="dark"]) :focus-visible{outline-color:#fff}


/* 60-min Review, "Session focus": red-pen dashes instead of empty checkboxes that looked clickable */
.fc-row::before{width:16px;height:1.5px;border:0;border-radius:0;background:var(--pen)}

/* Headings corrected for screen readers: same look as before */
.sc-head .sc-h{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.glance .glance-h{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#9FB0D8;border-bottom:1px solid rgba(159,176,216,.3);padding-bottom:12px;margin-bottom:6px}

/* ---------- 4. Reading progress on articles: a thin red-pen line under the header ---------- */
.rt-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pen);transform-origin:left center;transform:scaleX(0);pointer-events:none}

/* ---------- 5. Motion. Plays once. Off for visitors who reduce motion in their settings. ---------- */
@media (prefers-reduced-motion: no-preference){

  /* Headline red-pen underline draws itself (home and Full Cycle) */
  .js h1 .pen::after{animation:rt-pen .9s cubic-bezier(.65,.05,.25,1) .35s both}
  @keyframes rt-pen{from{clip-path:inset(-4px 100% -4px -4px)}to{clip-path:inset(-4px -4px -4px -4px)}}

  /* Home scorecard: dots fill in, the stamp settles, the note writes itself */
  .scorecard.rt-armed .dot.f{background:transparent;transform:scale(.85)}
  .scorecard.rt-armed .stamp{opacity:0}
  .scorecard.rt-armed .note{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);-webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-position:100% 0;mask-position:100% 0}
  .scorecard.rt-play .dot.f{animation:rt-dot .34s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--rt-d,0s)}
  .scorecard.rt-play .stamp{animation:rt-stamp .55s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--rt-stamp,1.4s)}
  .scorecard.rt-play .note{animation:rt-write 1.15s cubic-bezier(.45,.05,.35,1) both;animation-delay:var(--rt-note,1.8s)}
  @keyframes rt-dot{from{background:transparent;transform:scale(.85)}to{background:var(--navy);transform:none}}
  @keyframes rt-stamp{from{opacity:0;transform:rotate(-12deg) scale(1.12)}to{opacity:.9;transform:rotate(-6deg) scale(1)}}
  @keyframes rt-write{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}

  /* Full Cycle: the 10-session arc draws itself, phase by phase */
  .arc-phase.rt-armed .rail::before{transform:translateY(-50%) scaleX(0);transform-origin:left center}
  .arc-phase.rt-armed .chip{opacity:0;transform:scale(.7)}
  .arc-phase.rt-armed .arc-note{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);-webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-position:100% 0;mask-position:100% 0}
  .arc-phase.rt-armed .arc-out{opacity:0;transform:translateY(6px)}
  .arc-phase.rt-play .rail::before{animation:rt-rail .7s cubic-bezier(.45,.05,.35,1) both}
  .arc-phase.rt-play .chip{animation:rt-chip .42s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--rt-d,0s)}
  .arc-phase.rt-play .arc-note{animation:rt-write 1s cubic-bezier(.45,.05,.35,1) .45s both}
  .arc-phase.rt-play .arc-out{animation:rt-rise .6s cubic-bezier(.22,.61,.36,1) .55s both}
  @keyframes rt-rail{from{transform:translateY(-50%) scaleX(0)}to{transform:translateY(-50%) scaleX(1)}}
  @keyframes rt-chip{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
  @keyframes rt-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  /* 60-min Review: the focus markers draw in sequence */
  .focus-card.rt-armed .fc-row::before{transform:scaleX(0);transform-origin:left center}
  .focus-card.rt-play .fc-row::before{animation:rt-dash .45s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--rt-d,0s)}
  @keyframes rt-dash{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  /* FAQ answers ease in when opened */
  details[open]>p{animation:rt-open .32s ease both}
  @keyframes rt-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

/* ---------- 6. Home, 60-min Review and Full Cycle only (build 4). Other pages are untouched. ---------- */
/* D22 Headings break into balanced lines; paragraphs avoid a lone last word (browsers without support keep today's breaks) */
html[data-rt-page] :is(h2,h3,h4,.hero-strap){text-wrap:balance}
html[data-rt-page] :is(p,li,blockquote){text-wrap:pretty}
/* ...except this two-sentence heading, which reads better with today's natural break */
html[data-rt-page="review"] #inside h2{text-wrap:wrap}
/* D26 FAQ: the plus turns a quarter into a cross */
html[data-rt-page] summary::after{display:inline-block}
html[data-rt-page] details[open] summary::after{content:"+";transform:rotate(45deg)}
/* D28 Header: a soft shadow once the page scrolls under it */
html[data-rt-page] header.rt-scrolled{box-shadow:0 12px 28px -24px rgba(21,23,28,.45)}
/* D29 Home scorecard: the handwritten note takes its own line when the card is narrow (phones) */
html[data-rt-page="home"] .sc-foot{flex-wrap:wrap;row-gap:12px}
html[data-rt-page="home"] .sc-foot .note{margin-left:auto}
/* D23 60-min Review: sections fade in as you scroll, like Home and Full Cycle */
html:not(.js) .rt-reveal{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion: no-preference){
  html[data-rt-page] summary::after{transition:transform .3s cubic-bezier(.22,.61,.36,1)}
  html[data-rt-page] header{transition:box-shadow .3s ease}
  .js .rt-reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
  .js .rt-reveal.rt-in{opacity:1;transform:none}
  /* D24 Full Cycle: the "at a glance" card fills in row by row */
  .glance.rt-armed .glance-row{opacity:0;transform:translateY(6px)}
  .glance.rt-armed.rt-play .glance-row{animation:rt-rise .55s cubic-bezier(.22,.61,.36,1) var(--rt-d,0s) both}
  /* D25 Ledger lines are ruled left to right as each row appears (Home scored rows, Full Cycle deliverables and fees) */
  .rt-ledger>.rt-row{position:relative;border-bottom-color:transparent}
  .rt-ledger>.rt-row.rt-first{border-top-color:transparent}
  .rt-ledger>.rt-row::after,.rt-ledger>.rt-row.rt-first::before{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left center;pointer-events:none}
  .rt-ledger>.rt-row::after{bottom:-1px}
  .rt-ledger>.rt-row.rt-first::before{top:-1px}
  .rt-ledger>.rt-row.rt-go::after,.rt-ledger>.rt-row.rt-go.rt-first::before{animation:rt-rule .9s cubic-bezier(.65,.05,.25,1) var(--rt-ld,.1s) both}
  @keyframes rt-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  /* D27 Home programme cards lift slightly under the pointer (mouse and trackpad only) */
  @media (hover:hover) and (pointer:fine){
    html[data-rt-page="home"] #programmes .card.in{transition:opacity .7s ease,transform .7s ease,translate .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease}
    html[data-rt-page="home"] #programmes .card.in:hover{translate:0 -4px;box-shadow:0 26px 46px -30px rgba(21,23,28,.38)}
  }
}