.guide-shell{max-width:1180px}.guide-intro{max-width:850px;margin:40px 0}.guide-intro h1{font-size:clamp(2rem,4vw,3.3rem);line-height:1.12;overflow-wrap:anywhere}.guide-intro p{font-size:1.1rem;line-height:1.65}
.guide-catalog{display:grid;grid-template-columns:minmax(0,850px);gap:20px;margin-top:24px}.guide-card{display:flex;flex-direction:column;align-items:start;gap:12px}.guide-card h2{margin:0;font-size:1.4rem;line-height:1.3}.guide-card p{margin:0}.guide-card dt{font-weight:650}.guide-card dd{margin:3px 0 12px}.guide-card .button{margin-top:auto}.guide-card small{line-height:1.6}
.guide-reading{display:grid;grid-template-columns:260px minmax(0,760px);gap:36px;align-items:start}.guide-toc{position:sticky;top:20px;max-height:80vh;overflow:auto}.guide-toc h2{font-size:1.1rem}.guide-toc ol{padding-left:20px}.guide-toc li{margin-bottom:10px}.guide-prose{font-size:1.08rem;line-height:1.75;min-width:0}.guide-prose h2{margin-top:2.2em;font-size:1.7rem;line-height:1.3;scroll-margin-top:24px}.guide-prose h3{line-height:1.4}.guide-prose img{max-width:100%;height:auto;border-radius:12px}.guide-prose pre{overflow:auto;max-width:100%;padding:20px;background:#211c2c;color:#f5f1fa;border-radius:12px;font-size:.92rem;line-height:1.55}.guide-prose pre code{white-space:pre}.guide-prose :not(pre)>code{overflow-wrap:anywhere}.guide-prose table{display:block;max-width:100%;overflow:auto;border-collapse:collapse;font-size:.97rem}.guide-prose th,.guide-prose td{border:1px solid #d8c8df;padding:12px;min-width:150px;text-align:left;vertical-align:top}.guide-prose blockquote{border-left:3px solid #a64a82;padding-left:20px;margin-left:0}.guide-prose a{overflow-wrap:anywhere}.guide-code-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:-8px 0 24px}.guide-copy{padding:8px 14px;border:1px solid #a64a82;background:white;color:#6c345f;border-radius:8px;cursor:pointer;font:inherit}.guide-next{margin:40px 0}.guide-dates{color:#66576f;font-size:.95rem!important}
.guide-shell a:focus-visible,.guide-shell button:focus-visible,.guide-shell input:focus-visible,.guide-shell select:focus-visible{outline:3px solid #7043ad;outline-offset:4px}.guide-skip{position:absolute;left:12px;top:-100px;padding:12px;background:white;z-index:20}.guide-skip:focus{top:12px}

.guide-intro h1 { margin: 0 0 20px; letter-spacing: -.035em; text-wrap: balance; }
.guide-intro > p:last-child { max-width: 64ch; margin-bottom: 0; color: var(--muted); }
.guide-card { padding: clamp(24px, 3vw, 36px); gap: 18px; }
.guide-card h2 { max-width: 32ch; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.02em; text-wrap: balance; }
.guide-card h2 a { text-decoration: none; }
.guide-card h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.guide-card p { max-width: 62ch; line-height: 1.65; color: var(--muted); }
.guide-card .button { margin-top: 6px; }
@media(max-width:760px) {
  .guide-reading,.guide-catalog { grid-template-columns: 1fr; }
  .guide-toc { position: static; max-height: none; }
  .guide-intro { margin: 28px 0; }
  .guide-prose { font-size: 1rem; }
  .guide-prose pre { padding: 14px; }
  .guide-prose th,.guide-prose td { min-width: 130px; }
}

/* Article: quiet reading surface inside the Academy's existing visual language. */
.article-back { display: inline-block; margin: 0 0 24px; font-size: .9rem; color: var(--muted); text-underline-offset: 4px; }
.article-hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 40px; margin-bottom: 48px; }
.article-heading .kicker { margin: 0 0 16px; }
.article-heading h1 { margin: 0; font-size: clamp(2rem, 3.6vw, 2.9rem); letter-spacing: -.045em; line-height: 1.1; text-wrap: balance; }
.article-deck { max-width: 54ch; margin: 24px 0; font-size: 1.08rem; line-height: 1.7; color: var(--muted); }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: .8rem; color: var(--muted); }
.article-meta span { padding: 6px 10px; background: var(--rose); border-radius: 6px; color: var(--ink); font-weight: 650; }
.article-cover { margin: 0; padding: 24px; background: #f0e4fc; border: 2px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow); }
.article-cover img { display: block; width: 100%; height: auto; border: 1px solid #d3c8d1; border-radius: 6px; box-shadow: 0 10px 24px #39263a18; }
.article-cover figcaption { margin-top: 18px; font-size: .8rem; line-height: 1.6; color: var(--muted); }
.article-cover figcaption a { text-underline-offset: 3px; }
.blog-article .guide-reading { grid-template-columns: 224px minmax(0, 1fr); gap: 32px; }
.blog-article .guide-toc { padding: 18px 0; border-top: 2px solid var(--ink); }
.guide-toc > .kicker { font-size: 9px; margin-top: 0; }
.blog-article .guide-toc h2 { font-size: 1.1rem; margin: 12px 0 20px; }
.blog-article .guide-toc ol { padding-left: 22px; }
.blog-article .guide-toc li { padding-left: 4px; margin-bottom: 15px; color: var(--muted); font-size: .87rem; line-height: 1.5; }
.blog-article .guide-toc li::marker { color: #ae477a; font-variant-numeric: tabular-nums; }
.blog-article .guide-toc a { text-decoration: none; }
.blog-article .guide-toc a:hover { color: #96245a; text-decoration: underline; text-underline-offset: 4px; }
.blog-article .guide-prose { padding: clamp(24px, 4vw, 48px); background: #fffdfd; border: 1px solid #e6d8e1; border-radius: 18px; box-shadow: 0 8px 32px #39263a08; font-size: 1.05rem; line-height: 1.85; }
.guide-prose > p:first-child { margin-top: 0; font-size: 1.18rem; line-height: 1.8; font-weight: 500; }
.guide-prose p { margin: 0 0 1.35em; }
.blog-article .guide-prose h2 { border-top: 1px solid #eadde5; padding-top: 1.4em; margin: 2.2em 0 1em; font-size: clamp(1.4rem, 2.3vw, 1.8rem); letter-spacing: -.025em; text-wrap: balance; }
.guide-prose h3 { margin: 1.8em 0 1em; font-size: 1.2rem; }
.guide-prose > ol { padding-left: 1.7em; }
.guide-prose > ol > li { padding-left: .5em; margin-bottom: .85em; }
.guide-prose > ol > li::marker { font-weight: 800; color: #a32e67; }
.blog-article .guide-prose blockquote { margin: 28px 0; padding: 20px 24px; border-left: 4px solid #d6538d; border-radius: 0 10px 10px 0; background: #fff0f6; font-size: .94rem; line-height: 1.75; color: #664757; }
.guide-prose blockquote p { margin: 0; }
.guide-prose blockquote strong { color: var(--ink); }
.blog-article .guide-prose table { margin: 24px 0 32px; font-size: .9rem; line-height: 1.65; border-radius: 8px; }
.blog-article .guide-prose th { background: #f2e8f4; font-weight: 750; }
.blog-article .guide-prose td { background: #fffdfd; }
.blog-article .guide-prose tr:nth-child(even) td { background: #fcf7fa; }
.blog-article .guide-prose th,.blog-article .guide-prose td { padding: 16px; border-color: #e5dbe3; }
.guide-prose a { color: #95285d; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.guide-prose :not(pre) > code { padding: 2px 5px; background: #f4edf4; border-radius: 4px; font-size: .88em; }
.guide-prose figure { margin: 32px 0 12px; padding: 24px; border: 1px solid #e6dae4; border-radius: 12px; background: #f6f0f8; }
.guide-prose figure img { display: block; width: auto; max-width: 100%; max-height: 450px; margin: auto; border-radius: 4px; box-shadow: 0 8px 20px #39263a12; }
.guide-prose figcaption { margin-top: 18px; font-size: .82rem; line-height: 1.6; color: var(--muted); }
.guide-prose figure + p { font-size: .8rem; line-height: 1.6; color: var(--muted); }
/* Keep copyable prompts readable without sideways swiping on a phone. */
.guide-prose pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
.article-heading,.article-cover,.guide-card { min-width: 0; }
.article-heading h1,.guide-card h2,.guide-prose { overflow-wrap: anywhere; }
.guide-copy { min-height: 44px; touch-action: manipulation; }
.article-service-cta { margin-top: 48px; padding: clamp(24px,4vw,40px); background: #eaddf6; border: 2px solid var(--ink); border-radius: 16px; }
.article-service-cta h2 { font-size: clamp(1.5rem,3vw,2rem); line-height: 1.2; }
.article-service-cta p { max-width: 65ch; line-height: 1.7; }
.article-service-cta .button { min-height: 44px; }
.article-back { min-height: 44px; display: inline-flex; align-items: center; }
@media(max-width:900px) {
  .article-hero { grid-template-columns: 1fr; gap: 28px; }
  .article-cover { max-width: 620px; }
  .blog-article .guide-reading { grid-template-columns: 1fr; }
  .blog-article .guide-toc { position: static; max-height: none; }
  .blog-article .guide-toc ol { columns: 2; column-gap: 32px; }
  .blog-article .guide-toc li { break-inside: avoid; }
}
@media(max-width:500px) {
  .article-heading h1 { font-size: 2rem; }
  .article-cover { padding: 16px; }
  .blog-article .guide-prose { padding: 24px 18px; font-size: 1rem; }
  .guide-prose > p:first-child { font-size: 1.08rem; }
  .blog-article .guide-prose blockquote { padding: 16px; }
  .guide-prose figure { padding: 12px; }
  .blog-article .guide-toc ol { columns: 1; }
  .blog-article .guide-toc li { font-size: 1rem; margin-bottom: 4px; }
  .blog-article .guide-toc a { display: flex; align-items: center; min-height: 44px; padding-block: 6px; }
  .guide-prose pre { font-size: .875rem; }
  .guide-prose > ul { padding-left: 1.25em; }
}
