:root {
  --paper:#f5f4ed;
  --ink:#242620;
  --muted:#5e6257;
  --line:#d1d4c6;
  --accent:#d5ed80;
  --white:#fffef9}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:1rem/1.65 Arial,Helvetica,sans-serif}
a {
  color:inherit;
  text-underline-offset:.25em}
a:hover {
  text-decoration-thickness:2px}
button,input {
  font:inherit}
a:focus-visible,input:focus-visible {
  outline:3px solid #37632c;
  outline-offset:5px}
img {
  display:block;
  max-width:100%;
  height:auto}
h1,h2,h3,p,figure {
  margin-top:0}
h1,h2,h3 {
  line-height:1.08;
  letter-spacing:-.045em;
  text-wrap:balance}
h1 {
  font-size:clamp(2.6rem,6.2vw,5.7rem);
  font-weight:600;
  margin-bottom:1.8rem}
h2 {
  font-size:clamp(1.9rem,3.4vw,3.2rem);
  font-weight:600}
h3 {
  font-size:1.45rem}
p {
  margin-bottom:1.25rem}
.wrap {
  width:min(1280px,calc(100% - 40px));
  margin-inline:auto}
.skip {
  position:absolute;
  top:-100px;
  left:20px;
  background:var(--ink);
  color:white;
  padding:1rem;
  z-index:10}
.skip:focus {
  top:10px}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-block:22px;
  border-bottom:1px solid var(--line)}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.03em;
  text-decoration:none;
  white-space:nowrap}
.brand-sub {
  font-weight:400;
  letter-spacing:-.03em}
.site-header nav,.footer nav {
  display:flex;
  gap:8px 24px;
  flex-wrap:wrap}
.site-header nav a,.footer nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:.85rem}
.hero {
  display:grid;
  gap:2rem;
  padding-block:55px}
.eyebrow {
  font-size:.74rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:1.5rem}
.lead {
  font-size:1.15rem;
  max-width:43rem;
  color:var(--muted)}
.button {
  display:inline-flex;
  gap:28px;
  align-items:center;
  background:var(--ink);
  color:var(--white);
  padding:16px 22px;
  margin-top:1rem;
  text-decoration:none;
  font-weight:700}
.hero-art {
  margin:0;
  background:#e6e9db;
  border-radius:3px;
  align-self:center}
.hero-art img {
  width:100%}
figcaption {
  font-size:.77rem;
  color:var(--muted);
  padding:0 20px 20px}
.disclosure {
  border-block:1px solid var(--line);
  padding:20px 0;
  color:var(--muted);
  font-size:.84rem;
  max-width:100%}
.disclosure strong {
  color:var(--ink)}
.section {
  padding-block:64px}
.section-head {
  max-width:650px;
  margin-bottom:2.5rem}
.categories {
  display:grid;
  gap:0 28px}
.category {
  border-top:1px solid var(--line);
  padding:24px 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start}
.number {
  display:block;
  font-size:.76rem;
  letter-spacing:.1em;
  color:var(--muted);
  margin-bottom:1.8rem}
.category h3 {
  max-width:17ch}
.category p {
  color:var(--muted);
  font-size:.94rem}
.category .status {
  margin-top:auto;
  margin-bottom:0;
  font-size:.77rem}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:18px;
  font-weight:700;
  min-height:44px}
.category .text-link {
  margin-top:auto;
  font-size:.86rem}
.feature {
  background:var(--accent)}
.feature-grid {
  display:grid;
  gap:1rem}
.feature-grid h2 {
  max-width:16ch;
  margin-bottom:0}
.feature-grid>div:last-child {
  align-self:end}
.principles {
  display:grid;
  gap:1rem}
.principles p:last-child {
  max-width:45rem;
  color:var(--muted)}
.footer {
  background:var(--ink);
  color:var(--white);
  padding:40px 0}
.footer-inner {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:18px 40px}
.footer p {
  margin:0}
.small {
  font-size:.78rem;
  width:100%;
  color:#c9cdbf}
.article-top {
  padding-top:24px;
  max-width:1000px}
.breadcrumbs {
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  font-size:.8rem;
  margin-bottom:3rem}
.breadcrumbs a {
  min-height:32px}
.article-top h1 {
  max-width:19ch;
  font-size:clamp(2.5rem,5.5vw,4.7rem)}
.byline {
  font-size:.8rem;
  color:var(--muted)}
.article-layout {
  display:grid;
  gap:35px;
  padding-block:40px 70px;
  max-width:1100px}
.toc {
  padding:22px;
  background:#e8ebdf;
  align-self:start}
.toc h2 {
  font-size:1.2rem;
  letter-spacing:-.02em}
.toc a {
  display:inline-block;
  padding-block:6px;
  font-size:.87rem}
.toc ol {
  padding-left:22px}
.toc li {
  padding-left:4px}
.article-body {
  min-width:0}
.article-body h2 {
  font-size:clamp(1.8rem,3vw,2.45rem)}
.article-body>section {
  padding-block:35px;
  border-bottom:1px solid var(--line)}
.article-art {
  margin:0;
  background:#e6e9db}
.article-art img {
  max-height:400px;
  width:100%;
  object-fit:contain}
.idea .number {
  margin-bottom:1rem}
.check-note {
  border-left:3px solid #798b47;
  padding:4px 0 4px 18px;
  margin:24px 0}
.check-note p {
  margin:8px 0 0;
  color:var(--muted)}
.try-it {
  padding:24px;
  background:var(--white);
  border:1px solid var(--line)}
.try-it h3 {
  font-size:1.2rem;
  letter-spacing:-.025em}
.try-it p {
  font-size:.9rem;
  color:var(--muted)}
.check-items {
  display:grid;
  gap:10px}
.check-items label {
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:12px;
  background:#e8ebdf;
  cursor:pointer}
.check-items input {
  width:22px;
  height:22px;
  flex:none;
  margin:2px 0;
  accent-color:#3c5425}
.progress {
  font-weight:700;
  margin:18px 0 0}
.closing {
  border-bottom:0!important}
@media(min-width:620px) {
  .categories {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.wrap {
  width:min(1280px,calc(100% - 64px))}
.feature-grid {
  grid-template-columns:1fr 1fr;
  gap:60px}
}
@media(min-width:960px) {
  .hero {
  grid-template-columns:1.2fr 1fr;
  gap:50px;
  padding-block:75px}
.categories {
  grid-template-columns:repeat(5,minmax(0,1fr))}
.category h3 {
  font-size:1.3rem}
.section {
  padding-block:85px}
.principles {
  grid-template-columns:1fr 1fr;
  column-gap:60px}
.principles>.eyebrow {
  grid-column:1/-1}
.article-layout {
  grid-template-columns:260px minmax(0,1fr);
  gap:70px}
.toc {
  position:sticky;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  top:24px}
.article-body>section {
  padding-block:45px}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
}
@media print {
  .site-header,.footer,.toc,.checklist,.skip {
  display:none}
.article-layout {
  display:block}
.wrap {
  width:100%}
.try-it,.check-note {
  break-inside:avoid}
body {
  background:white;
  color:black}
}

.try-it p { margin-bottom: 0; }

/* Editorial example images: preserve the whole composition. */
.hero-art img, .article-art img, .idea-image img { width: 100%; height: auto; max-height: none; }
.hero-art figcaption, .article-art figcaption, .idea-image figcaption { padding: 14px 18px; }
.idea-image { margin: 24px 0; background: #e6e9db; }
.idea-image figcaption span { display: block; margin-top: 4px; }

/* Match the studio homepage language control, including its colour tokens. */
.site-header .language-switcher { --ink:#171815; --white:#fafaf7; --line:#cbc9bf; border:1px solid var(--line); border-radius:999px; justify-self:end; gap:.1rem; padding:.2rem; display:flex; flex-wrap:nowrap; width:auto; background:#f0efe8; line-height:1.5; }
.site-header .language-switcher a { color:var(--ink); letter-spacing:.04em; border-radius:999px; place-items:center; min-width:2.75rem; min-height:2.75rem; font-size:.875rem; font-weight:700; display:grid; padding:0; border:0; text-decoration:none; line-height:1.5; }
.site-header .language-switcher a[aria-current=page] { background:var(--ink); color:var(--white); }
.site-header .language-switcher a:focus-visible { outline:3px solid var(--ink); outline-offset:4px; box-shadow:0 0 0 7px #f0efe8; }

/* Every category has an editorial example and a working guide link. */
.category-art { margin: 18px 0 22px; }
.category-art img { display: block; width: 100%; height: auto; }
.category-art figcaption { font-size: .75rem; line-height: 1.5; color: var(--muted); margin-top: 8px; }
.related-guides li { margin-block: 12px; }
.category > .text-link { display:block; margin-top:1rem; }
.category > .text-link + .text-link { border-top:1px solid var(--line); padding-top:1rem; }
.product-example { padding:clamp(1rem,3vw,2rem); border:1px solid var(--line); background:#eef0e7; border-radius:8px; }
.product-note { font-size:.875rem; color:var(--muted); }
.article-top h1, .article-body h2, .article-body h3 { overflow-wrap:anywhere; hyphens:auto; }
.related-guides a, .category a { overflow-wrap: anywhere; }
.source-note { font-size: .9rem; }

/* Practical guides: diagrams and comparison tables stay usable on narrow screens. */
.practical { scroll-margin-top:2rem; }
.practical h2 { font-size:clamp(1.6rem,3vw,2.6rem); }
.practical-steps { padding-left:1.5rem; }
.practical-steps li { padding-left:.3rem; margin-block:1rem; }
.instruction-diagram { margin:1.5rem 0; padding:1rem; background:#eef0e7; border:1px solid var(--line); border-radius:8px; }
.instruction-diagram svg { width:100%; max-width:600px; display:block; margin:auto; fill:none; stroke:#303f32; stroke-width:3; stroke-linejoin:round; }
.instruction-diagram svg text { fill:#303f32; stroke:none; font:700 20px Arial,sans-serif; }
.instruction-diagram .measure { stroke:#657741; stroke-width:2; stroke-dasharray:6 4; }
.diagram-caption { margin:.5rem 0 0; color:var(--muted); font-size:.875rem; }
.table-scroll { max-width:100%; overflow-x:auto; margin:1.5rem 0; }
.table-scroll:focus-visible { outline:3px solid #37632c; outline-offset:3px; }
.practical table { width:100%; border-collapse:collapse; font-size:.95rem; line-height:1.55; }
.practical caption { text-align:left; color:var(--muted); padding:0 0 .75rem; }
.practical th,.practical td { padding:.85rem; text-align:left; vertical-align:top; border:1px solid var(--line); overflow-wrap:anywhere; }
.practical thead { background:#e6e9db; }
.practical tbody th { font-weight:700; width:24%; }
.practical tbody tr:nth-child(even) { background:#f0f1e9; }
@media(max-width:600px){.practical th,.practical td{padding:.55rem;font-size:.875rem}.practical table{min-width:470px}.instruction-diagram{padding:.5rem}.toc{max-height:none;overflow:visible}}
@media print{.table-scroll{overflow:visible}.practical table{min-width:0}.instruction-diagram{break-inside:avoid}}