* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body { color: hsl(30 20% 14%); font-family: 'Inter', sans-serif; background: hsl(40 35% 96%); font-size: 17px }
body { margin: 0; line-height: 1.63 }
img { display: block; height: auto; max-width: 100% }
a { color: hsl(67 25% 34%) }
a:hover { color: hsl(67 25% 24%) }
h1,h2,h3,h4 { line-height: 1.2; font-weight: 600; margin: 0 0 0.59em; letter-spacing: 0; font-family: 'Fraunces', 'Times New Roman', Times, serif }
h1 { font-size: 2.33rem }
h2 { margin-top: 1.84em; font-size: 1.45rem }
h3 { margin-top: 1.35em; font-size: 1.16rem }
h2[id],h3[id] { scroll-margin-top: 90px }
.text-body { max-width: 780px }
.text-body p { margin-bottom: 1.04em }
.text-body ul,.text-body ol { margin: 0 0 1.02em; padding-left: 1.27em }
.text-body li { margin: 0.35em 0 }
.text-body table { margin: 1.25em 0; border-collapse: collapse; width: 100%; overflow-x: auto; display: block; font-size: 0.86em }
.text-body th,.text-body td { padding: 9px 12px; vertical-align: top; text-align: left; border: 1px solid hsl(35 25% 84%) }
.text-body th { font-weight: 600; background: hsl(40 45% 91%) }
.text-body blockquote { margin-bottom: 1.26em; margin-top: 1.26em }
.text-body blockquote { background: hsl(40 40% 99%); border-radius: 0px; border-left: 4px solid hsl(257 35% 40%); padding: 11px 21px 11px 21px }
.text-body sup a { padding: 0 2px; font-size: 0.64em; text-decoration: none }
.text-body code { padding: 1px 5px; background: hsl(40 45% 91%); border-radius: 4px; font-size: 0.82em }
.text-body img { margin: 1.02em 0; border-radius: 0px }
.answer-box { border-left: 4px solid hsl(67 25% 34%); margin-bottom: 29px; font-size: 1.16em; background: hsl(40 45% 91%) }
.answer-box { padding: 20px 24px; border-radius: 0px }
.answer-box p:last-child { margin-bottom: 0 }
.plus-minus { margin-bottom: 21px; grid-template-columns: 1fr 1fr; margin-top: 21px; gap: 19px; display: grid }
.plus-minus>div { padding: 17px 20px 17px 20px; border-radius: 0px; border: 1px solid hsl(35 25% 84%); background: hsl(40 40% 99%) }
.plus-minus h3 { margin-top: 0 }
.plus-minus ul { padding-left: 1.11em; margin: 0 }
.footnotes { margin: 34px 0 0; color: hsl(30 10% 42%); padding-top: 18px }
.footnotes { font-size: 0.97em; border-top: 1px solid hsl(35 25% 84%) }
.footnotes ol { padding-left: 1.5em }
.footnotes li { word-break: break-word; margin: 0.27em 0 }
.footnotes a { color: hsl(30 10% 42%) }
.blockquote-box { border-radius: 0px; font-size: 1.24em }
.blockquote-box { margin-top: 23px; font-style: italic; background: hsl(40 40% 99%); margin-bottom: 23px; border-left: 4px solid hsl(257 35% 40%); padding: 21px 23px }
.cta { color: #fff; margin-top: 43px; border-radius: 0px; margin-bottom: 43px; background: hsl(67 25% 34%); padding: 30px; text-align: left }
.cta h2 { margin-top: 0; color: inherit }
.btn { padding: 11px 24px; display: inline-block; background: hsl(257 35% 40%) }
.btn { font-weight: 600; border-radius: 0px; text-decoration: none; margin-top: 11px; color: #fff }
.btn:hover { color: #fff }
.mosaic { gap: 24px; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); display: grid; margin: 26px 0 }
.tile { border-radius: 0px; background: hsl(40 40% 99%); gap: 8px; border: 1px solid hsl(35 25% 84%); display: flex; padding: 22px; flex-direction: column }
.tile h3 { font-size: 1.1em; margin: 0 }
.tile p { color: hsl(30 10% 42%); font-size: 0.85em; margin: 0 }
.tile a { font-weight: 600; text-decoration: none }
.menu-check { display: none }
.burger { gap: 6px; display: none; cursor: pointer; padding: 5px 0; width: 30px; flex-direction: column }
.burger span { display: block; height: 2px; background: currentColor }
.article-info { margin-bottom: 16px; color: hsl(30 10% 42%); gap: 9px 17px; font-size: 0.99em; display: flex; flex-wrap: wrap }
.breadcrumbs { color: hsl(30 10% 42%); margin-bottom: 15px; font-size: 0.87em }
.breadcrumbs a { text-decoration-line: none; color: hsl(30 10% 42%) }
.section-tag { text-transform: uppercase }
.section-tag { letter-spacing: 0.07em; color: hsl(257 35% 40%); margin-bottom: 10px; font-weight: 700; font-size: 0.79em; display: inline-block }
.hero-image figcaption { margin: 9px 0 0; font-size: 0.9em; color: hsl(30 10% 42%) }
.see-also { margin-top: 47px }
.accordion details { padding: 13px 19px; margin-bottom: 10px; background: hsl(40 40% 99%); margin-top: 10px; border-radius: 0px; border: 1px solid hsl(35 25% 84%) }
.accordion summary { font-weight: 600; cursor: pointer }
.accordion details>div { padding-top: 7px }
.steps { counter-reset: s; padding: 0 0 0 22px; border-left: 3px solid hsl(35 25% 84%); margin-bottom: 18px; margin-top: 18px; list-style: none }
.steps li { position: relative; margin: 0 0 24px; padding-left: 13px }
.steps li::before { margin-bottom: 4px; counter-increment: s; content: "Step " counter(s) }
.steps li::before { font-weight: 700; display: block; letter-spacing: 0.07em; font-size: 0.78em; text-transform: uppercase; color: hsl(257 35% 40%) }
.steps li::after { height: 11px; background: hsl(257 35% 40%); top: 4px; width: 11px }
.steps li::after { content: ""; left: -30px; border-radius: 50%; position: absolute }
.cw { padding: 0 21px; max-width: 960px; margin: 0 auto 0 auto }
.topbar { padding: 13px 0 0; text-align: center; border-bottom: 3px double hsl(30 20% 14%) }
.topbar .article-info { padding-bottom: 6px; text-transform: uppercase; justify-content: space-between; border-bottom: 1px solid hsl(35 25% 84%); font-size: 0.83em; letter-spacing: 0.06em }
.wordmark { letter-spacing: -.01em }
.wordmark { display: block; padding: 13px 0 9px; text-decoration: none; font-weight: 600; font-family: 'Fraunces', 'Times New Roman', Times, serif; font-size: 3.32rem; color: hsl(30 20% 14%) }
.primary-nav { gap: 0; flex-wrap: wrap; border-top: 1px solid hsl(35 25% 84%); display: flex; justify-content: center }
.primary-nav a { text-decoration: none; text-transform: uppercase; color: hsl(30 20% 14%); font-size: 0.92em; letter-spacing: 0.09em; padding: 10px 18px 10px 18px; border-right: 1px solid hsl(35 25% 84%) }
.primary-nav a:last-child { border-right: 0 }
.primary-nav a:hover { background: hsl(40 45% 91%) }
.stage { padding: 28px 0 54px }
.opening-block { border-bottom: 1px solid hsl(30 20% 14%); padding-bottom: 16px; margin-bottom: 20px }
.opening-block h1 { margin: 0 0 10px; line-height: 1.1; font-size: 2.39rem }
.opening-block p { color: hsl(30 10% 42%) }
.opening-block p { font-style: italic; margin-bottom: 12px; font-size: 1.2em }
.columns { grid-template-columns: 1.5fr 1fr; display: grid; margin-bottom: 33px; gap: 38px }
.columns .post img { margin-bottom: 12px; width: 100% }
.columns .post h2 { font-size: 1.8rem; margin: 0 0 8px }
.columns .post h2 a,.index-list h3 a { text-decoration: none; color: hsl(30 20% 14%) }
.index-list article { padding: 10px 0 14px; border-bottom: 1px solid hsl(35 25% 84%) }
.index-list h3 { margin: 2px 0 6px; font-size: 1.23rem }
.index-list p { margin: 0; color: hsl(30 10% 42%); font-size: 0.87em }
.index-list .article-info { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.83em; margin: 0px }
.post .hero-image { float: right; margin: 4px 0 17px 25px; width: 44% }
.post .hero-image img { width: 100%; border: 1px solid hsl(35 25% 84%) }
.index { margin: 0 0 19px; border-bottom: 1px solid hsl(35 25% 84%); color: hsl(30 10% 42%); border-top: 1px solid hsl(35 25% 84%) }
.index { font-size: 0.85em; padding: 7px 0 }
.index a { color: hsl(30 20% 14%); text-decoration-line: none }
.post .text-body { max-width: 100% }
.bottom { font-size: 0.96em }
.bottom { color: hsl(30 10% 42%); padding: 24px 0 29px; border-top: 3px double hsl(30 20% 14%) }
.bottom-inner { gap: 22px; display: grid; grid-template-columns: 1fr 1fr 1fr }
.bottom-inner strong { font-size: 1.2em; color: hsl(30 20% 14%); font-family: 'Fraunces', 'Times New Roman', Times, serif }
.bottom-inner a { text-decoration-line: none; color: hsl(30 10% 42%); margin: 3px 0 3px 0; display: block }
.bottom-links { margin-top: 15px; font-size: 0.84em }
.hds { align-items: center; justify-content: space-between }
.hds { display: flex; flex-wrap: wrap; gap: 25px }
.hds > div:first-child { flex: 1 1 320px }
.scene { flex-shrink: 0; margin: 0 0 0 auto; width: 258px; max-width: 100% }
.scene svg { height: auto; width: 100%; display: block }
@media (max-width:640px){.plus-minus { grid-template-columns: 1fr } .wordmark { font-size: 2.18rem } .opening-block h1 { font-size: 1.94rem } .burger { margin: 0 auto 8px; display: flex } .primary-nav { flex-direction: column; display: none } .primary-nav a { border-right: 0; border-top: 1px solid hsl(35 25% 84%) } .menu-check:checked~.primary-nav { display: flex }}
@media (max-width:800px){.columns,.bottom-inner { grid-template-columns: 1fr }}
@media (max-width:700px){.post .hero-image { margin: 0 0 20px; float: none; width: 100% }}
@media (max-width:720px){.scene { width: min(220px, 60vw); margin: 0 auto 12px }}