/* Radyssey: shared rules in Material 3. Colour tokens (--md-*) come from theme-light.scss / theme-dark.scss,
   which are generated from one seed colour. Type is Roboto Flex on the M3 type scale. Fonts are self-hosted.
   Motion uses M3's emphasized easing and respects prefers-reduced-motion. */
@import url(fonts/fonts.css);

:root {
  --md-font: "Roboto Flex", Roboto, "Segoe UI", system-ui, sans-serif;
  --rv-serif: "Newsreader", Georgia, serif; /* headings: the serif from the Explorable look */
  --md-emph: cubic-bezier(.2, 0, 0, 1);
  --md-emph-dec: cubic-bezier(.05, .7, .1, 1);
  --md-std: cubic-bezier(.2, 0, 0, 1);
}

body { font-family: var(--md-font); font-size: 16px; line-height: 24px; letter-spacing: .5px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .title { font-family: var(--rv-serif); font-weight: 560; letter-spacing: -.02em; }
::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }
:focus-visible { outline: 3px solid var(--md-secondary); outline-offset: 2px; border-radius: 8px; }
a { color: var(--md-primary); }

/* Colour-coded words: the same colours as the lines drawn on the lesson images */
.c-base { color: var(--md-base); font-weight: 600; }
.c-roof { color: var(--md-roof); font-weight: 600; }
.c-cart { color: var(--md-cart); font-weight: 600; }
.c-rim  { color: var(--md-rim);  font-weight: 600; }

/* ---------- state layer + ripple, shared by every button ---------- */
.md-btn, .lesson-cta, .navbar .nav-link, .quarto-grid-item { position: relative; overflow: hidden; isolation: isolate; }
.md-btn::before, .lesson-cta::before, .navbar .nav-link::before {
  content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .2s var(--md-std); z-index: -1; border-radius: inherit;
}
.md-btn:hover::before, .lesson-cta:hover::before, .navbar .nav-link:hover::before { opacity: .08; }
.md-btn:focus-visible::before, .lesson-cta:focus-visible::before, .md-btn:active::before, .lesson-cta:active::before { opacity: .1; }
.md-ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .12; transform: scale(0); pointer-events: none; animation: md-ripple .55s var(--md-emph-dec) forwards; z-index: -1; }
@keyframes md-ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- buttons (M3: 40 px tall, fully rounded, label-large) ---------- */
.md-btn, .lesson-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 24px; margin: 4px 8px 12px 0;
  border-radius: 20px; border: 0; font: 500 14px/20px var(--md-font); letter-spacing: .1px; text-decoration: none; cursor: pointer;
  transition: box-shadow .2s var(--md-std);
}
.md-btn.filled, .lesson-cta { background: var(--md-primary); color: var(--md-on-primary) !important; }
.md-btn.filled:hover, .lesson-cta:hover { box-shadow: var(--md-elev-1); }
@media (prefers-reduced-motion: no-preference) {
  .md-btn, .lesson-cta { transition: box-shadow .2s var(--md-std), transform .18s cubic-bezier(.2, .8, .2, 1); }
  .md-btn:hover, .lesson-cta:hover { transform: translateY(-2px); }
  .md-btn:active, .lesson-cta:active { transform: translateY(0) scale(.98); transition-duration: 70ms; }
}
.md-btn.tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container) !important; }
.md-btn.outlined, .lesson-cta-alt { background: transparent; color: var(--md-primary) !important; box-shadow: inset 0 0 0 1px var(--md-outline); }
.md-btn.outlined:hover, .lesson-cta-alt:hover { box-shadow: inset 0 0 0 1px var(--md-outline); }
.md-btn svg, .lesson-cta svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.lesson-cta::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--md-icon-arrow) center / contain no-repeat; mask: var(--md-icon-arrow) center / contain no-repeat; transition: transform .3s var(--md-emph); }
.lesson-cta:hover::after { transform: translateX(3px); }
:root { --md-icon-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>'); }

/* ---------- top app bar ---------- */
.navbar { min-height: 64px; padding-top: 0; padding-bottom: 0; border: 0; box-shadow: none; background: var(--md-surface) !important; transition: background .25s var(--md-std); }
body.md-scrolled .navbar { background: var(--md-surface-container) !important; }
.navbar-brand { display: flex; align-items: center; gap: 12px; }
/* the logo follows radbase.co: a two-shape R (teal bowl + ink block) and an Outfit ExtraBold wordmark, traced to SVG.
   _m3.html swaps in an inline copy so the mark can tilt on hover; logo.svg is the no-script fallback. */
.navbar-brand .navbar-title { display: block; width: 132px; height: 28px; font-size: 0; color: transparent; background: url(logo.svg) left center / contain no-repeat; }
.navbar-brand .navbar-title.rv-inline { background: none; }
.rv-logo { height: 28px; width: auto; display: block; overflow: visible; }
.rv-logo .mk { transform-box: fill-box; transform-origin: center; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.navbar-brand:hover .rv-logo .mk { transform: rotate(-5deg); }
:root { --logo-brand: #415bea; --logo-ink: #191d20; }
body.quarto-dark { --logo-brand: #a9b4ff; --logo-ink: #f9f9f9; }
body.quarto-dark .navbar-brand .navbar-title { background-image: url(logo-dark.svg); }
.navbar .nav-link { font: 500 14px/20px var(--md-font); letter-spacing: .1px; padding: 10px 16px !important; border-radius: 20px; color: var(--md-on-surface-variant) !important; }
.navbar .nav-link.active { background: var(--md-secondary-container); color: var(--md-on-secondary-container) !important; }
.navbar .navbar-nav { gap: 4px; }

/* header icon buttons (search, theme, RSS) as 48 px M3 icon buttons */
.navbar .aa-DetachedSearchButton, .navbar .quarto-color-scheme-toggle, .navbar .nav-link .bi { min-width: 48px; min-height: 48px; }
.navbar .aa-DetachedSearchButton, .navbar .quarto-color-scheme-toggle { display: inline-flex; align-items: center; justify-content: center; border-radius: 24px; }
.navbar .aa-DetachedSearchButton:hover, .navbar .quarto-color-scheme-toggle:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
#quarto-search { display: flex; align-items: center; }

/* ---------- home ---------- */
.rv-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.rv-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; margin: 8px 0 48px; padding: 48px 40px; border-radius: 28px; background: var(--md-surface-container-low); }
.rv-hero .rv-h1 { font: 560 clamp(40px, 5.4vw, 66px) / 1.04 var(--rv-serif); letter-spacing: -.02em; margin: 0; color: var(--md-on-surface); }
.rv-hero .rv-h1 em { font-style: italic; color: var(--md-primary); }
.rv-hero .lede { font-size: 16px; line-height: 24px; color: var(--md-on-surface-variant); margin: 16px 0 24px; max-width: 30em; }
.rv-hero .small { font: 500 12px/16px var(--md-font); letter-spacing: .5px; color: var(--md-on-surface-variant); margin: 8px 0 0; }
.toy { background: var(--md-surface-container-lowest); border-radius: 16px; padding: 16px; box-shadow: var(--md-elev-1); }
.toy #toy { display: block; width: 100%; height: auto; touch-action: none; user-select: none; }
.toy .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px 0; flex-wrap: wrap; }
.toy .read { font: 400 14px/20px var(--md-font); color: var(--md-on-surface-variant); }
.toy .read b { font: 400 28px/36px var(--md-font); color: var(--md-roof); font-variant-numeric: tabular-nums; display: inline-block; min-width: 2.2em; }
/* the type badge is an M3 assist chip that changes colour */
.toy .badge { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; font: 500 14px/20px var(--md-font); background: var(--bg); color: var(--fg); transition: background .3s, color .3s; }
.toy .badge.pop { animation: md-pop .4s var(--md-emph-dec); }
@keyframes md-pop { from { transform: scale(.85); } }
.toy .reset { display: none; }
.toy .reset.show { display: inline-flex; margin: 0; }
.toy .handle { cursor: grab; } .toy .handle:active { cursor: grabbing; }
.toy .ring { animation: md-ring 1.8s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes md-ring { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.2); opacity: 0; } }
.toy .caption { margin: 8px 4px 0; font: 400 12px/16px var(--md-font); letter-spacing: .4px; color: var(--md-on-surface-variant); }

.rv-sec { font: 560 36px/42px var(--rv-serif); letter-spacing: -.02em; margin: 0 0 4px; border: 0; }
.rv-sec-sub { color: var(--md-on-surface-variant); margin: 0 0 20px; }

/* Lesson listing as M3 elevated cards */
#listing-lessons .list.grid { gap: 16px; }
#listing-lessons .quarto-grid-item.card { border: 0; border-radius: 12px; background: var(--md-surface-container-low); box-shadow: var(--md-elev-1); transition: box-shadow .25s var(--md-std), transform .35s var(--md-emph); }
#listing-lessons .quarto-grid-item.card:hover { box-shadow: var(--md-elev-2); transform: translateY(-2px); }
#listing-lessons .quarto-grid-item .card-img-top { border-radius: 12px 12px 0 0; }
#listing-lessons .quarto-grid-item .listing-item-img-placeholder { display: none; }
#listing-lessons .quarto-grid-item .card-body { padding: 16px; }
#listing-lessons .quarto-grid-item .card-title { font: 560 24px/30px var(--rv-serif); letter-spacing: -.01em; color: var(--md-on-surface); }
#listing-lessons .quarto-grid-item .card-text { color: var(--md-on-surface-variant); font-size: 14px; line-height: 20px; letter-spacing: .25px; }
#listing-lessons .quarto-grid-item .listing-date { font: 500 12px/16px var(--md-font); letter-spacing: .5px; color: var(--md-on-surface-variant); }
#listing-lessons .quarto-grid-item .card-footer { background: none; border: 0; padding: 0 16px 16px; }
#listing-lessons .quarto-grid-item a, main.content #listing-lessons a { color: inherit !important; text-decoration: none !important; }

/* progress chips on lesson cards (kept in this browser only) */
.rv-progress { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rv-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; font: 500 14px/20px var(--md-font); letter-spacing: .1px;
  box-shadow: inset 0 0 0 1px var(--md-outline-variant); color: var(--md-on-surface-variant); text-decoration: none !important; position: relative; z-index: 2; }
.rv-chip.on { background: var(--md-secondary-container); color: var(--md-on-secondary-container) !important; box-shadow: none; }

/* ---------- posts and pages ---------- */
main.content { font-size: 16px; line-height: 24px; }
#title-block-header .title { font: 560 clamp(34px, 5vw, 50px) / 1.08 var(--rv-serif); letter-spacing: -.02em; }
#title-block-header .description { color: var(--md-on-surface-variant); font-size: 16px; line-height: 24px; }
#title-block-header .quarto-title-meta-heading { font: 500 12px/16px var(--md-font); letter-spacing: .5px; color: var(--md-on-surface-variant); text-transform: uppercase; }
#title-block-header .quarto-title-meta-contents { font: 400 14px/20px var(--md-font); }
.quarto-category { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--md-outline-variant); background: none; color: var(--md-on-surface-variant); font: 500 14px/20px var(--md-font); letter-spacing: .1px; opacity: 1; }
main.content h2 { font: 560 28px/34px var(--rv-serif); letter-spacing: -.02em; border-bottom: 0; margin-top: 40px; }
main.content a:not(.lesson-cta):not(.md-btn):not(.quarto-xref) { color: var(--md-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lesson-shot img { border-radius: 16px; box-shadow: var(--md-elev-1); transition: box-shadow .25s var(--md-std); }
.lesson-shot img:hover { box-shadow: var(--md-elev-3); }
.credit { font-size: 14px; line-height: 20px; letter-spacing: .25px; color: var(--md-on-surface-variant); background: var(--md-surface-container-highest); border-radius: 12px; padding: 16px; }
.callout { border-radius: 12px; }

/* ---------- footer ---------- */
.nav-footer { background: var(--md-surface-container); border-top: 0; color: var(--md-on-surface-variant); font: 400 14px/20px var(--md-font); }

/* very small phones: keep the top app bar on one row */
@media (max-width: 400px) {
  .navbar .navbar-container { flex-wrap: nowrap; }
  .navbar-brand { gap: 8px; margin-right: 0; min-width: 0; }
  .navbar-brand .navbar-title, .rv-logo { width: 118px; height: 25px; }
  .navbar .quarto-navbar-tools { margin-left: auto; }
  .rv-hero { padding: 20px 12px; }
  .toy { padding: 10px; }
}
@media (max-width: 860px) {
  .rv-hero { grid-template-columns: 1fr; gap: 24px; padding: 28px 20px; border-radius: 24px; margin-bottom: 32px; }
  .rv-wrap { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}