:root {
    --background:        hsl(248 30% 97%);
    --foreground:        hsl(252 28% 13%);
    --card:              hsl(0 0% 100%);
    --primary:           hsl(258 52% 62%);
    --primary-foreground:hsl(0 0% 100%);
    --primary-soft:      hsl(258 52% 62% / 0.10);
    --primary-ring:      hsl(258 52% 62% / 0.20);
    --accent:            hsl(184 58% 44%);
    --accent-soft:       hsl(184 58% 44% / 0.10);
    --accent-ring:       hsl(184 58% 44% / 0.25);
    --muted:             hsl(248 22% 93%);
    --muted-foreground:  hsl(252 12% 40%);
    --border:            hsl(248 20% 88%);
    --warning:           hsl(38 92% 50%);
    --warning-soft:      hsl(38 92% 50% / 0.10);
    --warning-ring:      hsl(38 92% 50% / 0.30);
    --destructive:       hsl(2 70% 56%);

    --radius:            0.75rem;
    --radius-card:       1rem;

    --shadow-sm: 0 1px 3px 0 hsl(258 40% 30% / 0.08);
    --shadow-md: 0 4px 10px -2px hsl(258 40% 30% / 0.11);
    --shadow-lg: 0 8px 18px -4px hsl(258 40% 30% / 0.13);

    --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
    --font-serif: 'Fraunces', Georgia, serif;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--foreground);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  img, picture, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
  }

  p, li, h1, h2, h3, .module-lede, .key-takeaways, .callout, .where-it-lives {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
  }
  .table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
  }
  .table-wrap th, .table-wrap td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
  }
  .table-wrap th {
    background: var(--muted);
    font-weight: 600;
  }

  a {
    padding: 1px 0;
  }

  main {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 32px 96px;
    background: var(--card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-md);
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .brand { font-weight: 700; letter-spacing: -0.01em; }
  .brand .brand-i { color: var(--foreground); }
  .brand .brand-caria { color: var(--primary); }

  header.module-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 28px;
    margin-bottom: 36px;
  }
  .module-eyebrow {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 12px;
  }
  h1 {
    font-family: var(--font-serif);
    font-size: 38px;
    line-height: 1.1;
    margin: 0 0 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--foreground);
  }
  .module-lede {
    font-family: var(--font-serif);
    font-size: 20px;
    line-height: 1.45;
    color: var(--muted-foreground);
    margin: 0;
    font-weight: 400;
  }

  h2 {
    font-family: var(--font-serif);
    font-size: 26px;
    line-height: 1.25;
    margin: 48px 0 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--foreground);
    border-top: 1px solid var(--border);
    padding-top: 36px;
  }
  h3 {
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.35;
    margin: 28px 0 8px;
    font-weight: 600;
    color: var(--foreground);
  }

  p { margin: 0 0 16px; }
  ul, ol { margin: 0 0 18px; padding-left: 22px; }
  li { margin-bottom: 6px; }
  strong { font-weight: 600; color: var(--foreground); }
  a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

  .callout {
    background: var(--primary-soft);
    border-left: 3px solid var(--primary);
    padding: 18px 22px;
    margin: 28px 0;
    border-radius: 0 var(--radius) var(--radius) 0;
  }
  .callout p:last-child { margin-bottom: 0; }
  .callout.warn {
    background: var(--warning-soft);
    border-left-color: var(--warning);
  }
  .callout.accent {
    background: var(--accent-soft);
    border-left-color: var(--accent);
  }

  .image-slot {
    background: var(--muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin: 28px 0;
    font-family: var(--font-sans);
    color: var(--muted-foreground);
    line-height: 1.55;
  }
  .image-slot-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .image-slot-label::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
  }
  .image-slot-prompt {
    background: var(--card);
    border-left: 3px solid var(--primary);
    border-radius: 0 6px 6px 0;
    padding: 14px 18px;
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--foreground);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    user-select: text;
  }
  .image-slot-hint {
    margin-top: 10px;
    font-size: 12px;
    color: var(--muted-foreground);
    font-style: italic;
  }

  .key-takeaways {
    background: var(--muted);
    border-radius: var(--radius-card);
    padding: 28px 32px;
    margin: 48px 0 24px;
  }
  .key-takeaways h2 {
    font-family: var(--font-serif);
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 22px;
  }
  .key-takeaways ul { margin-bottom: 0; }

  .where-it-lives {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--muted-foreground);
    border-top: 1px solid var(--border);
    padding-top: 20px;
    margin-top: 40px;
  }
  .where-it-lives strong {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--primary);
    font-size: 11px;
    margin-bottom: 6px;
    font-weight: 700;
  }

  @media (max-width: 820px) {
    main {
      max-width: none;
      margin: 16px;
      padding: 44px 28px 72px;
      border-radius: var(--radius-card);
    }
    h1 { font-size: 34px; }
    .module-lede { font-size: 19px; }
  }

  @media (max-width: 560px) {
    body { font-size: 16px; line-height: 1.6; }
    main {
      margin: 0;
      padding: 28px 18px 64px;
      border-radius: 0;
      box-shadow: none;
    }
    header.module-header {
      padding-bottom: 22px;
      margin-bottom: 26px;
    }
    .module-eyebrow { font-size: 11px; letter-spacing: 0.14em; }
    h1 { font-size: 26px; line-height: 1.15; }
    h2 {
      font-size: 21px;
      margin: 36px 0 12px;
      padding-top: 26px;
    }
    h3 { font-size: 17px; margin: 22px 0 6px; }
    .module-lede { font-size: 17px; line-height: 1.45; }
    ul, ol { padding-left: 20px; }
    .callout { padding: 14px 16px; margin: 22px 0; }
    .image-slot { padding: 16px 14px; margin: 22px 0; }
    .image-slot-prompt { padding: 12px 14px; font-size: 13.5px; }
    .image-slot-label { font-size: 10px; letter-spacing: 0.14em; }
    .key-takeaways { padding: 22px 20px; margin: 36px 0 20px; border-radius: var(--radius); }
    .key-takeaways h2 { font-size: 19px; }
    .where-it-lives { font-size: 13.5px; padding-top: 16px; margin-top: 32px; }
    .table-wrap table { font-size: 14px; }
    .table-wrap th, .table-wrap td { padding: 8px 10px; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
/* ── Learn library chrome (build-learn-pages.mjs) ─────────────────────────────
   Design intent: these pages are the first thing a stranger reads about us, and
   they have to carry a watercolour art direction without competing with it. So:
   a warm paper ground rather than flat white, one violet accent, generous
   measure, and cards that lift on hover instead of shouting. No framework, no
   JS — everything below ships as static CSS. */
/* Brand tokens lifted verbatim from artifacts/icaria/src/index.css so the public
   library is the same iCaria as the app: logo violet 258 52% 62%, logo-stripe
   teal 184 58% 44%, barely-lavender page, pure-white cards floating on it. */
:root{
  --lv-primary:hsl(258 52% 62%); --lv-primary-strong:hsl(258 52% 52%);
  --lv-primary-soft:hsl(258 45% 96%); --lv-teal:hsl(184 58% 44%);
  --lv-ink:hsl(252 28% 13%); --lv-muted:hsl(252 12% 42%);
  --lv-paper:hsl(248 30% 97%); --lv-card:hsl(0 0% 100%); --lv-line:hsl(248 22% 90%);
  --lv-shadow:0 1px 2px hsl(252 28% 13% / .04),0 8px 24px -12px hsl(252 28% 13% / .16);
  --lv-shadow-lift:0 2px 6px hsl(252 28% 13% / .06),0 18px 40px -16px hsl(258 52% 45% / .3);
  --lv-radius:1rem;
}
body{background:var(--lv-paper);color:var(--lv-ink)}

/* Brand lockup — mirrors components/brand-name.tsx: black "i", violet "Caria". */
.brand-i{color:var(--lv-ink)}
.brand-caria{color:var(--lv-primary)}
.brand-together{color:var(--lv-ink)}

/* Article pages stay at a readable measure; index, catalogue and hub pages get a
   wide container so their card grids can actually use a desktop screen instead
   of being squeezed into a 74ch column. */
.learn-article{max-width:74ch;margin:0 auto;padding:0 1.25rem 1rem}
/* Card grids reflow to fewer columns inside the shared measure rather than
   widening the page — one column at 74ch is deliberate, not a bug. */
.learn-card-grid{grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))}
.learn-article>img{width:100%;height:auto;border-radius:var(--lv-radius);box-shadow:var(--lv-shadow);margin:0 0 2.25rem}
.module-header{margin:.5rem 0 1.75rem}
.module-header h1{font-size:clamp(1.9rem,1.3rem + 2.2vw,2.9rem);line-height:1.12;letter-spacing:-.02em;margin:0 0 .6rem}
.module-lede{font-size:1.12rem;line-height:1.6;color:var(--lv-muted);margin:0;max-width:60ch}

/* Site bar */
.learn-sitebar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1.25rem;border-bottom:1px solid var(--lv-line);flex-wrap:wrap;
  background:rgba(253,252,250,.88);backdrop-filter:saturate(1.4) blur(10px)}
.learn-brand{display:flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none;color:inherit;letter-spacing:-.01em}
.learn-nav{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.learn-nav a{text-decoration:none;color:var(--lv-muted);font-size:.93rem;transition:color .15s ease}
.learn-nav a:hover{color:var(--lv-ink)}
.learn-cta-link{font-weight:600;color:#fff !important;background:var(--lv-primary);padding:.45rem .95rem;border-radius:999px}
.learn-cta-link:hover{filter:brightness(1.08)}

/* Breadcrumb */
.learn-eyebrow{font-size:.82rem;letter-spacing:.02em;color:var(--lv-muted);margin:1.5rem 0 1.25rem}
.learn-eyebrow a{color:var(--lv-muted);text-decoration:none;border-bottom:1px solid transparent;transition:.15s ease}
.learn-eyebrow a:hover{color:var(--lv-primary);border-bottom-color:currentColor}

/* Cards */
.learn-index-list{list-style:none;padding:0;display:grid;gap:1.1rem;margin:0}
.learn-index-list li{background:var(--lv-card);border:1px solid var(--lv-line);border-radius:var(--lv-radius);
  box-shadow:var(--lv-shadow);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.learn-index-list li:hover{transform:translateY(-3px);box-shadow:var(--lv-shadow-lift);border-color:hsl(258 52% 62% / .35)}
.learn-index-list li a{display:block;padding:1.15rem;text-decoration:none;color:inherit;height:100%}
.learn-index-list h2,.learn-index-list h3{margin:0 0 .35rem;font-size:1.08rem;line-height:1.3;letter-spacing:-.01em}
.learn-index-list p{margin:0;font-size:.925rem;line-height:1.55;color:var(--lv-muted)}
.learn-card-grid{grid-template-columns:repeat(auto-fill,minmax(20rem,1fr))}
.learn-card-grid li a{display:flex;gap:1rem;align-items:flex-start}
.learn-thumb{width:76px;height:76px;flex:0 0 76px;border-radius:.7rem;object-fit:cover;box-shadow:var(--lv-shadow)}

/* Role doorways */
.learn-doors{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));margin:2.5rem 0 1rem}
.learn-doors li a{display:flex;flex-direction:column;gap:0;padding:0}
.learn-door-img{width:100%;height:170px;object-fit:cover;display:block}
.learn-doors li div{padding:1.15rem 1.2rem 1.35rem}
.learn-doors h2{font-size:1.2rem}
.learn-doors li a::after{content:"\2192";display:inline-block;margin:.65rem 1.2rem 0;color:var(--lv-primary);font-weight:700;
  transition:transform .18s ease}
.learn-doors li:hover a::after{transform:translateX(4px)}

/* Hub groups */
.learn-hub-group{margin:3rem 0}
.learn-hub-group>h2{margin:0 0 .3rem;font-size:1.45rem;letter-spacing:-.015em}
.learn-hub-group>h2 a{color:inherit;text-decoration:none;border-bottom:2px solid transparent;transition:.15s ease}
.learn-hub-group>h2 a:hover{border-bottom-color:var(--lv-primary)}
.learn-hub-intro{margin:0 0 1.25rem;color:var(--lv-muted);max-width:62ch}
.learn-count-private{margin:-1.7rem 0 2rem;font-size:.78rem;font-style:italic;color:var(--lv-muted);letter-spacing:.01em}
.learn-doors .learn-count{margin:0 0 .15rem}
.learn-doors .learn-count-private{margin:0}
.learn-count{margin:0 0 2rem;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--lv-primary)}

/* Certification gate */
.learn-gate{margin:0 0 2.25rem;padding:1.25rem 1.4rem;border:1px solid hsl(258 52% 62% / .22);
  border-radius:var(--lv-radius);background:linear-gradient(180deg,var(--lv-primary-soft),hsl(258 45% 98%))}
.learn-gate h2{margin:0 0 .4rem;font-size:1.02rem;letter-spacing:-.01em}
.learn-gate p{margin:0;font-size:.94rem;line-height:1.6;color:var(--lv-muted)}
.learn-gate-link{display:inline-block;margin-top:.8rem;font-weight:600;color:var(--lv-primary);text-decoration:none;
  border-bottom:1.5px solid currentColor}

/* Closing CTA */
.learn-cta{margin:3.5rem 0 1rem;padding:1.85rem;border:1px solid var(--lv-line);border-radius:1.15rem;
  background:linear-gradient(180deg,#fff,var(--lv-primary-soft));box-shadow:var(--lv-shadow);text-align:center}
.learn-cta h2{margin:0 0 .5rem;font-size:1.35rem;letter-spacing:-.015em}
.learn-cta p{margin:0 auto;max-width:52ch;color:var(--lv-muted);line-height:1.6}
.learn-cta-button{display:inline-block;margin-top:1.15rem;padding:.72rem 1.6rem;border-radius:999px;
  background:var(--lv-primary);color:#fff;text-decoration:none;font-weight:600;
  box-shadow:0 8px 20px -8px hsl(258 52% 52% / .55);transition:transform .15s ease,filter .15s ease}
.learn-cta-button:hover{transform:translateY(-1px);filter:brightness(1.07)}
.learn-cta-secondary{margin:.9rem 0 0 !important;font-size:.9rem}
.learn-cta-secondary a{color:var(--lv-primary);font-weight:600}

/* Article furniture */
.learn-meta{margin:3rem 0 0;padding:1.1rem 1.3rem;border-left:3px solid hsl(258 52% 62% / .4);
  border-radius:0 .6rem .6rem 0;background:hsl(258 45% 97%);font-size:.86rem;line-height:1.6;color:var(--lv-muted)}
.learn-boundary-inline{margin:0}
.learn-reviewed{margin:.6rem 0 0;font-weight:600;color:var(--lv-ink)}
.learn-siblings{margin:3rem 0 0;padding:1.35rem 1.5rem;border:1px solid var(--lv-line);border-radius:var(--lv-radius);background:var(--lv-card)}
.learn-siblings h2{font-size:1rem;margin:0 0 .6rem;letter-spacing:-.01em}
.learn-siblings ul{margin:0;padding-left:1.1rem}
.learn-siblings li{margin:.35rem 0}
.learn-siblings a{color:var(--lv-primary);text-decoration:none}
.learn-siblings a:hover{text-decoration:underline}
.learn-footer{margin-top:3rem;padding:2rem 1.25rem;border-top:1px solid var(--lv-line);font-size:.85rem;color:var(--lv-muted);text-align:center}
.learn-boundary{max-width:70ch;margin:0 auto 1rem}

/* ── Responsive ──────────────────────────────────────────────────────────────
   Content is a single column at every width, so the work is in the grids, the
   header, and anything with an intrinsic width (images, tables, code, long URLs)
   that could push the body wider than the viewport. */
img,svg,video{max-width:100%;height:auto}
table{display:block;width:100%;overflow-x:auto}
pre{overflow-x:auto}
.learn-article{overflow-wrap:anywhere}

@media (max-width:900px){
  .learn-card-grid{grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
  .learn-doors{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
}
@media (max-width:640px){
  .learn-sitebar{padding:.6rem .9rem;gap:.6rem}
  .learn-nav{gap:.6rem;width:100%;justify-content:space-between}
  .learn-nav a{font-size:.88rem}
  .learn-cta-link{padding:.4rem .8rem}
  .learn-article{padding:0 1rem 1rem}
  .learn-article>img{border-radius:.75rem;margin-bottom:1.5rem}
  .learn-card-grid,.learn-doors{grid-template-columns:1fr}
  .learn-cta{padding:1.4rem 1.1rem;margin-top:2.5rem}
  .learn-door-img{height:150px}
  .learn-hub-group{margin:2.25rem 0}
  .learn-hub-group>h2{font-size:1.25rem}
  .learn-meta,.learn-siblings{padding:1rem 1.1rem}
}
@media (max-width:400px){
  /* Thumbnail + text side by side stops working on the narrowest phones. */
  .learn-card-grid li a{flex-direction:column;gap:.85rem}
  .learn-thumb{width:100%;height:130px;flex:none}
}
@media (prefers-reduced-motion:reduce){
  .learn-index-list li,.learn-cta-button,.learn-doors li a::after{transition:none}
  .learn-index-list li:hover{transform:none}
}