@layer base, layout, components, responsive;
@layer base {
  /* Local visual trial only. Replace with a licensed webfont before commercial use. */
  @font-face { font-family:'Halimun'; src:url('../fonts/halimun/Halimun.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }
  @font-face { font-family:'Roboto'; src:url('../fonts/roboto/Roboto-Latin.woff2') format('woff2'); font-style:normal; font-weight:400 700; font-display:swap; }
  @font-face { font-family:'Roboto'; src:url('../fonts/roboto/Roboto-Italic-Latin.woff2') format('woff2'); font-style:italic; font-weight:400; font-display:swap; }
  :root { --font-display:Georgia,'Times New Roman',serif; --font-signature:'Halimun',cursive; }
  :root { color-scheme: light; --bg:#fcfcfd; --surface:#f0f3f8; --ink:#102c52; --muted:#536378; --line:#d7dfea; --accent:#ac384b; --accent-soft:#fce8eb; --button:#073c80; --button-text:#fff; --navy:#092952; --radius:6px; }
  :root[data-theme="dark"] { color-scheme:dark; --bg:#0b1729; --surface:#13243a; --ink:#f0f3fa; --muted:#acb9cd; --line:#2c405a; --accent:#ffa4b1; --accent-soft:#372633; --button:#ffa4b1; --button-text:#172135; --navy:#081426; }
  * { box-sizing:border-box; }
  body { overflow-wrap:anywhere; }
  main,section,article,aside,figure,nav { min-width:0; }
  html { scroll-behavior:smooth; scroll-padding-top:2rem; }
  body { margin:0; font-family:'Roboto',Arial,Helvetica,sans-serif; font-size:1rem; line-height:1.65; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
  h1,h2,h3,p,figure { margin:0; }
  h1,h2,h3 { text-wrap:balance; }
  h1,h2 { font-family:var(--font-display); font-weight:400; line-height:1.12; letter-spacing:-.04em; }
  h1 { font-size:clamp(3rem,5.7vw,5.8rem); }
  h2 { font-size:clamp(1.9rem,3vw,2.6rem); }
  img { display:block; max-width:100%; height:auto; }
  a { color:inherit; text-underline-offset:.25em; }
  button { font:inherit; cursor:pointer; }
  a,button,summary { -webkit-tap-highlight-color:transparent; }
  :focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
  ::selection { background:var(--accent); color:var(--bg); }
  [id] { scroll-margin-top:2rem; }
}
@layer layout {
  .shell { width:min(1280px,calc(100% - 96px)); margin-inline:auto; }
  .preview-strip { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 18px; padding:9px 24px; background:var(--navy); color:#fff; font-size:.875rem; }
  .preview-strip>span { font-size:.75rem; letter-spacing:.12em; align-self:center; color:#ffb4c0; }
  .preview-strip a { font-weight:700; }
  .site-header { display:flex; align-items:center; justify-content:space-between; gap:28px; padding-block:22px; border-bottom:1px solid var(--line); }
  .brand { display:block; width:340px; max-width:100%; flex-shrink:0; text-decoration:none; }
  .brand img { display:block; width:100%; height:auto; border-radius:6px; }
  .site-header nav { display:flex; gap:32px; margin-left:auto; }
  .site-header nav a { text-decoration:none; font-size:.9375rem; padding:10px 0; border-bottom:2px solid transparent; }
  .site-header nav a[aria-current] { border-color:var(--accent); }
  .course-hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:48px; padding-block:52px 56px; }
  .hero-copy { padding-block:16px; }
  .hero-copy h1 { margin:25px 0; }
  .intro { font-size:1.1875rem; color:var(--muted); max-width:630px; line-height:1.7; }
  .hero-visual { margin:0; width:100%; align-self:center; }
  .hero-photo { width:100%; height:auto; border-radius:var(--radius); }
  .course-facts { border-block:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); padding-block:27px; }
  .course-facts>div { padding-inline:28px; border-left:1px solid var(--line); }
  .course-facts>div:first-child { border:0; padding-left:0; }
  .course-facts span { display:block; font-size:.75rem; letter-spacing:.1em; color:var(--muted); margin-bottom:6px; }
  .course-facts strong { font-size:1.0625rem; font-weight:500; }
  .course-content { display:block; padding-block:80px; }
  .content-block+.content-block { margin-top:34px; }
  .text-section h2 { margin-bottom:22px; }
  .rich-text p+p { margin-top:18px; }
  .rich-text ul,.rich-text ol { padding-left:22px; }
  .rich-text li { margin-block:8px; }
  .rich-text a { color:var(--accent); }
  .article-header { max-width:980px; padding-block:40px; text-align:center; }
  .article-header .eyebrow { margin-top:38px; }
  .article-header h1 { font-size:clamp(2.8rem,5.5vw,5.4rem); margin-block:20px; }
  .article-header .intro { margin-inline:auto; }
  .article-cover img { width:100%; object-fit:cover; border-radius:var(--radius); }
  .article-layout { display:grid; grid-template-columns:240px minmax(0,740px); justify-content:center; gap:64px; padding-block:64px 100px; }
  .article-index { position:sticky; top:30px; align-self:start; }
  .article-index nav { display:flex; flex-direction:column; margin-top:15px; }
  .article-index a { padding:12px 0; text-decoration:none; border-bottom:1px solid var(--line); font-size:.9375rem; }
  .blog-heading { padding-block:65px 45px; }
  .blog-heading h1 { margin-block:18px; }
  .blog-grid { display:grid; gap:32px; padding-bottom:90px; }
  .site-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:25px; padding-block:35px; border-top:1px solid var(--line); }
  .site-footer p { color:var(--muted); font-size:.9375rem; margin-top:7px; }
  .site-footer>div:nth-child(2) { display:flex; align-items:start; gap:25px; font-size:.9375rem; }
  .site-footer small { flex-basis:100%; color:var(--muted); font-size:.8125rem; }
}
@layer components {
  .site-header nav .header-account { padding:9px 18px; border:1px solid var(--line); border-radius:9px; }
  .editorial-subheading { font-family:var(--font-display); font-size:clamp(1.6rem,2.4vw,2rem); font-weight:400; line-height:1.25; }
  .article-index .index-h3 { padding-left:16px; }
  .article-layout .stream-content>div>figure:not(.editorial-video) { max-width:560px; margin-inline:auto; }
  .article-cover { max-width:1000px; }
  .editorial-video .video-stage { aspect-ratio:16/9; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
  .video-stage iframe { width:100%; height:100%; display:block; border:0; }
  .video-play { width:100%; height:100%; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--ink); background:transparent; border:0; }
  .video-play>span:not(.play-symbol) { font-size:1.125rem; font-weight:600; }
  .video-play small { font-size:.875rem; color:var(--muted); }
  .play-symbol { border-radius:50%; background:var(--button); color:var(--button-text); width:56px; height:56px; display:grid; place-items:center; }
  .course-promo .rich-text { margin-bottom:20px; }
  .eyebrow { font-size:.8125rem; text-transform:uppercase; letter-spacing:.14em; font-weight:600; color:var(--accent); }
  .small-line { display:inline-block; width:30px; height:1px; background:currentColor; vertical-align:middle; margin-right:10px; }
  .theme-toggle { display:flex; align-items:center; gap:8px; min-height:44px; border:1px solid var(--line); padding:9px 14px; border-radius:30px; background:transparent; color:var(--ink); font-size:.875rem; }
  .theme-toggle>span:first-child { font-size:1.25rem; line-height:1; }
  .teacher-line { display:flex; align-items:center; gap:12px; margin-top:24px; font-size:.9375rem; }
  .teacher-line img { width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:50% 22%; }
  .teacher-credit { display:flex; flex-direction:column; min-width:0; }
  .teacher-signature { display:block; font-size:clamp(1.25rem,2.3vw,1.75rem); font-weight:400; line-height:2; color:var(--accent); overflow-wrap:normal; }
  .teacher-line img { flex-shrink:0; }
  .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-block:30px; }
  .button { display:inline-flex; justify-content:center; align-items:center; gap:28px; padding:15px 22px; text-decoration:none; font-size:.9375rem; font-weight:600; border-radius:var(--radius); }
  .primary { background:var(--button); color:var(--button-text); }
  .button:hover { filter:brightness(1.13); }
  .format-label { font-size:.875rem; color:var(--muted); }
  .hero-meta { position:relative; margin:-32px 20px 0; padding:23px 22px; background:var(--bg); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); box-shadow:0 14px 32px rgb(0 0 0 / .10); color:var(--ink); }
  .hero-meta dl { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,.8fr) minmax(0,1.5fr); margin:0; }
  .hero-meta dl>div { display:flex; flex-direction:column; justify-content:center; min-width:0; gap:7px; padding-inline:16px; border-left:1px solid var(--line); }
  .hero-meta dl>div:first-child { padding-left:0; border-left:0; }
  .hero-meta dl>div:last-child { padding-right:0; }
  .hero-meta dt { font-size:.875rem; color:var(--muted); line-height:1.4; }
  .hero-meta dd { order:-1; margin:0; font-size:1.5rem; font-weight:600; line-height:1.2; letter-spacing:-.025em; }
  .hero-meta dl>div:last-child dd { font-size:1.125rem; letter-spacing:0; }
  .hero-visual--no-image .hero-meta { margin-top:0; }
  .price { font-family:var(--font-display); font-size:3.2rem; line-height:1; margin:27px 0 12px; }
  .price span { font-size:1.8rem; }
  .muted { color:var(--muted); font-size:.875rem; }
  .check-list { padding:0; list-style:none; margin-block:22px; }
  .check-list li { font-size:.9375rem; margin-top:9px; padding-left:23px; position:relative; }
  .check-list li::before { content:"✓"; position:absolute; left:0; color:var(--accent); }
  .preview-note { padding-top:20px; border-top:1px solid var(--line); font-size:.875rem; color:var(--muted); margin-bottom:18px; }
  .text-link { font-size:.9375rem; font-weight:600; text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:4px; display:inline-block; }
  .text-link span { margin-left:18px; }
  .faq { border-block-end:1px solid var(--line); }
  .faq summary { cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:22px; padding:20px 0; font-size:1.0625rem; font-weight:600; list-style:none; }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary span { font-size:1.5rem; font-weight:400; color:var(--accent); }
  .faq[open] summary span { transform:rotate(45deg); }
  .faq>div { padding:0 0 22px; color:var(--muted); }
  figure img { border-radius:var(--radius); width:100%; }
  figcaption { font-size:.875rem; color:var(--muted); margin-top:10px; }
  .picture-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .course-promo { display:grid; grid-template-columns:minmax(0,1fr); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
  .course-promo img { height:auto; width:100%; }
  .course-promo>div { padding:26px; }
  .course-promo h2 { font-size:1.8rem; margin:10px 0 16px; }
  .course-promo p { font-size:.9375rem; }
  .course-promo p.eyebrow { font-size:.75rem; }
  .promo-course { font-weight:600; margin:14px 0; }
  .article-meta { display:flex; gap:15px; justify-content:center; flex-wrap:wrap; color:var(--muted); font-size:.875rem; margin-top:25px; }
  .back-link { font-size:.875rem; text-decoration:none; }
  .article-card { display:grid; grid-template-columns:1.1fr 1fr; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; background:var(--surface); }
  .article-card>img { height:100%; object-fit:cover; }
  .article-card>div { padding:42px; }
  .article-card h2 { margin-block:15px; }
  .article-card .text-link { margin-top:23px; }
  .footer-brand { display:block; width:320px; max-width:100%; height:auto; border-radius:6px; }
  .skip-link { position:fixed; top:-100px; left:16px; z-index:999; padding:12px; background:var(--bg); }
  .skip-link:focus { top:16px; }
}
@layer responsive {
  /* Keep the account control padded even when mobile navigation resets links. */
  .site-header nav .header-account { padding:10px 18px; min-height:44px; line-height:1.35; }
  @media(max-width:1050px) {
    .shell { width:calc(100% - 48px); }
    .course-hero { gap:32px; }
    .article-layout { gap:35px; grid-template-columns:200px minmax(0,1fr); }
  }
  @media(max-width:960px) {
    .course-hero { grid-template-columns:minmax(0,1fr); gap:28px; }
    .article-layout { grid-template-columns:minmax(0,1fr); gap:35px; }
    .article-index { position:static; }
    .article-index nav { flex-direction:row; flex-wrap:wrap; gap:4px 18px; }
  }
  @media(max-width:760px) {
    .shell { width:calc(100% - 36px); }
    .preview-strip { font-size:.8125rem; padding:8px 18px; gap:2px 12px; }
    .site-header { gap:15px; flex-wrap:wrap; padding-block:16px; }
    .brand { width:300px; margin-inline:auto; }
    .site-header nav { order:3; margin:0; gap:28px; flex-basis:100%; }
    .site-header nav a { display:inline-flex; align-items:center; min-height:44px; padding:8px 0; }
    .theme-toggle { padding:8px 10px; }
    .course-hero { grid-template-columns:1fr; gap:25px; padding-block:28px 32px; }
    .hero-copy { padding:0; }
    .hero-copy h1 { margin-block:18px; }
    .hero-meta { margin:0; padding:20px 16px; border-radius:0 0 var(--radius) var(--radius); box-shadow:none; }
    .hero-photo { border-radius:var(--radius) var(--radius) 0 0; }
    .hero-meta dl>div { padding-inline:12px; }
    .hero-visual--no-image .hero-meta { border-radius:var(--radius); }
    .intro { font-size:1.0625rem; }
    .hero-actions { margin-block:24px; gap:12px; }
    .course-facts { grid-template-columns:1fr; gap:18px; padding-block:23px; }
    .course-facts>div { border:0; padding:0; }
    .course-content { padding-block:42px; }
    .article-layout { grid-template-columns:1fr; padding-block:42px; gap:35px; }
    .article-index { position:static; }
    .article-header { padding-block:25px 32px; }
    .article-header .eyebrow { margin-top:28px; }
    .article-header h1 { font-size:2.8rem; }
    .article-cover img { height:auto; }
    .article-index nav { display:flex; flex-direction:row; flex-wrap:wrap; gap:4px 18px; }
    .article-index a { padding:8px 0; font-size:.875rem; }
    .blog-heading { padding-block:35px; }
    .article-card { grid-template-columns:1fr; }
    .article-card>div { padding:25px; }
    .course-promo { grid-template-columns:1fr; }
    .picture-pair { grid-template-columns:1fr; }
    .site-footer>div:nth-child(2) { flex-wrap:wrap; gap:14px; }
    .site-footer { padding-block:25px; }
  }
  @media(max-width:400px) {
    .hero-copy h1 { font-size:2.5rem; }
    .theme-label { display:none; }
    .theme-toggle { min-width:44px; justify-content:center; }
    .hero-actions .button { width:100%; gap:14px; }
    .teacher-line { align-items:flex-start; }
    .teacher-line img { flex-shrink:0; }
    .hero-meta { padding-inline:12px; }
    .hero-meta dl>div { padding-inline:8px; }
    .hero-meta dd { font-size:1.3rem; }
    .hero-meta dl>div:last-child dd { font-size:1rem; }
  }
  @media(prefers-reduced-motion:no-preference) {
    .hero-meta { animation:meta-arrive .5s ease-out; }
    .button { transition:transform .18s ease-out,filter .18s ease-out; }
    @keyframes meta-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
  }
  @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
    .button:hover { transform:translateY(-2px); }
  }
  @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
}
@media(max-width:600px){.site-header nav{gap:12px;flex-wrap:wrap}.site-header nav a{white-space:nowrap}.site-header nav .header-account{padding-inline:12px}}
/* Shared account, basket and theme controls. */
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.header-actions .header-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);text-decoration:none;cursor:pointer;flex-shrink:0}.header-icon svg{display:block;pointer-events:none}.header-actions .header-icon:hover{background:var(--surface);border-color:var(--muted)}.header-actions .header-icon[aria-current=page]{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.header-icon:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.header-actions .theme-sun{display:none}:root[data-theme=dark] .header-actions .theme-moon{display:none}:root[data-theme=dark] .header-actions .theme-sun{display:block}
@media(max-width:760px){.header-actions{gap:4px}.site-header{column-gap:12px}.site-header nav{gap:24px}}
/* Keep the complete wordmark legible above navigation and the three controls. */
@media(max-width:760px){
  .site-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding-block:12px}
  .site-header .brand{grid-column:1 / -1;justify-self:center}
  .site-header nav{order:initial;margin:0;gap:10px 16px;flex-wrap:wrap}
}
@media(max-width:400px){
  .site-header{column-gap:6px}
  .site-header nav{gap:0 10px;font-size:.875rem}
  .header-actions{gap:0}
}

@media(min-width:761px) and (max-width:960px){.site-header{gap:18px}.site-header .brand{width:280px}.site-header nav{gap:20px}}

/* Original course menu: migrate destinations one category at a time. */
.courses-menu{position:relative;display:flex;align-items:center;gap:2px}
.courses-menu details>summary{display:flex;align-items:center;justify-content:center;width:28px;height:44px;list-style:none;cursor:pointer;border-radius:6px}
.courses-menu details>summary::-webkit-details-marker{display:none}
.courses-menu details[open]>summary{background:var(--surface)}
.courses-menu .courses-submenu{position:absolute;right:0;top:100%;z-index:100;display:grid;width:300px;max-width:calc(100vw - 36px);padding:10px;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px #0002}
.site-header nav .courses-submenu a{display:block;padding:12px;border:0;border-radius:7px;font-size:.88rem;line-height:1.4}
.site-header nav .courses-submenu a:hover,.site-header nav .courses-submenu a[aria-current]{background:var(--surface);color:var(--accent)}
.courses-menu summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(max-width:600px){.site-header{position:relative}.courses-menu{position:static}.courses-menu .courses-submenu{right:auto;left:0}.site-header nav .courses-submenu a{white-space:normal}}

.classroom-menu details>summary{width:auto;gap:7px;font-size:.85rem;padding-inline:4px}.classroom-menu .courses-submenu{max-height:65vh;overflow-y:auto;overscroll-behavior:contain}

/* One typeface for Michela's signatures across public and account pages. */
.teacher-signature,.mentor-signature,.auth-signature,.michela-quote figcaption{font-family:var(--font-signature);font-style:normal;font-weight:400;letter-spacing:normal}

/* Original blog media retains its proportions, including portrait Shorts. */
.article-youtube { max-width:390px; margin-inline:auto; }
.article-youtube iframe { display:block; width:100%; aspect-ratio:9/16; border:0; border-radius:12px; }
.article-original-image img { display:block; width:100%; height:auto; }
.article-original-image figcaption { margin-top:12px; text-align:center; font-size:.875rem; color:var(--muted); }


@media(max-width:760px) { .blog-grid { gap:24px; } }

/* Article contents: one compact disclosure instead of wrapping navigation links. */
.article-layout { grid-template-columns:minmax(0,740px); gap:32px; }
.article-index { position:static; min-width:0; }
.article-index details { border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; }
.article-index summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; cursor:pointer; list-style:none; font-weight:600; font-size:1rem; }
.article-index summary::-webkit-details-marker { display:none; }
.article-index summary svg { flex:none; transition:transform .15s ease; }
.article-index details[open] summary svg { transform:rotate(180deg); }
.article-index details[open] summary { border-bottom:1px solid var(--line); }
.article-index nav { display:flex; flex-direction:column; flex-wrap:nowrap; gap:0; margin:0; padding:12px 24px 20px; max-height:none; overflow:visible; }
.article-index a { display:block; padding:10px 0; border:0; font-size:.9375rem; line-height:1.5; overflow-wrap:anywhere; }
.article-index .index-h3 { margin-left:8px; padding-left:16px; border-left:1px solid var(--line); color:var(--muted); font-size:.875rem; }
.article-index a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.article-index summary:focus-visible,.article-index a:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; border-radius:4px; }
@media(max-width:760px) {
  .article-layout { gap:24px; }
  .article-index summary { padding:17px 18px; }
  .article-index nav { padding:10px 18px 16px; }
}

/* Reading rhythm applies to the actual paragraphs emitted by Wagtail. */
.article-layout { grid-template-columns:minmax(0,700px); }
.article-layout .stream-content { font-size:1.125rem; line-height:1.8; }
.article-layout .stream-content p + p { margin-top:1.2em; }
.article-layout .stream-content ul,.article-layout .stream-content ol { margin-block:1.2em; padding-left:1.4em; }
.article-layout .stream-content li + li { margin-top:.65em; }
.article-layout .stream-content li::marker { color:var(--accent); }
.article-layout .stream-content > .content-block + .content-block:has(> h2) { margin-top:52px; }
.article-layout .stream-content > .content-block:has(> h2,> h3) + .content-block { margin-top:22px; }
@media(max-width:760px) {
  .article-layout .stream-content { font-size:1.0625rem; line-height:1.75; }
  .article-layout .stream-content > .content-block + .content-block:has(> h2) { margin-top:40px; }
}

/* Explicit, session-only administrator course preview. */
.admin-course-notice{padding:1rem 1.25rem;margin:1rem 0;border:1px solid #b5c8e1;border-left:4px solid #124582;border-radius:12px;background:#edf3fb;color:#123158;font-size:1rem;line-height:1.5}.admin-course-notice p{margin:.35rem 0 .6rem}.admin-course-notice a{color:inherit;text-decoration:underline;text-underline-offset:3px}