@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root {
  --paper:#f7f6f0; --ink:#23382e; --muted:#69725f; --line:#dcded3;
  --accent:#c1d34c; --green:#416b45;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.6 'DM Sans',sans-serif; }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; color:inherit; background:none; border:0; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--green); outline-offset:5px; }
[hidden] { display:none!important; }
.skip { position:absolute; left:12px; top:-80px; background:var(--ink); color:white; padding:12px; z-index:10; }
.skip:focus { top:10px; }
header { max-width:1400px; margin:auto; padding:24px 5%; border-bottom:1px solid var(--line); }
.brand { display:inline-block; font:800 28px/1.2 'Manrope',sans-serif; letter-spacing:-1.5px; }
.hero { max-width:1400px; margin:auto; padding:64px 5%; display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:center; }
h1 { font:500 clamp(60px,6.2vw,91px)/1.03 'Manrope',sans-serif; letter-spacing:-5px; margin:0 0 24px; }
h1 em { font-style:normal; color:#718746; }
.intro { color:var(--muted); font-size:17px; line-height:1.8; max-width:360px; }
.explore { display:inline-flex; gap:38px; background:var(--ink); color:var(--paper); padding:14px 21px; border-radius:5px; margin-top:13px; font-size:14px; }
.explore span { color:var(--accent); }
.hero-photo { margin:0; }
.hero-photo img { display:block; width:100%; height:auto; border-radius:4px; }
.hero-photo figcaption { padding-top:10px; }
.photo-credit { color:var(--muted); font-size:12px; line-height:1.7; }
.photo-credit a { border-bottom:1px solid #bfc8b0; }
.dictionary { max-width:1400px; margin:auto; padding:38px 5% 64px; border-top:1px solid var(--line); }
h2 { font:500 30px/1.3 'Manrope',sans-serif; letter-spacing:-1px; margin:0 0 24px; }
.tools { display:flex; gap:20px; justify-content:space-between; }
.search { min-height:49px; border:1px solid #c4cbb9; border-radius:5px; display:flex; align-items:center; gap:12px; background:#fbfbf7; padding:0 16px; max-width:650px; flex:1; }
.search>span { font-size:28px; line-height:1; transform:rotate(-20deg); }
input { min-width:0; width:100%; background:none; border:0; outline:0!important; color:var(--ink); font-size:16px; }
input::placeholder { color:#707b65; }
.search:focus-within { outline:2px solid #718746; outline-offset:2px; }
.view-switch { display:flex; gap:3px; border:1px solid var(--line); border-radius:5px; padding:4px; align-items:center; }
.view-switch button { min-height:39px; padding:8px 13px; border-radius:3px; font-size:13px; color:var(--muted); white-space:nowrap; }
.view-switch .active { background:#e8ecdf; color:var(--ink); }
.categories { display:flex; gap:8px; flex-wrap:wrap; margin:21px 0 15px; }
.categories button { font-size:13px; border:1px solid #cdd3c3; padding:8px 14px; border-radius:30px; color:#58664e; }
.categories button.active { color:var(--paper); background:var(--ink); border-color:var(--ink); }
.categories button:hover { border-color:#7c8b67; }
#results { font-size:13px; color:var(--muted); margin:0 0 19px; }
.term-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.term-card { border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fcfcf8; display:flex; flex-direction:column; transition:transform .18s,border-color .18s; }
.term-card:hover { transform:translateY(-4px); border-color:#92a378; }
.drawing { background:var(--tile,#edf0e5); width:100%; aspect-ratio:1.43; padding:12px 15px 7px; overflow:hidden; }
.drawing>svg { width:100%; height:100%; display:block; }
.card-body { padding:18px; flex:1; }
.category-label { color:#66765a; font-size:12px; line-height:1.5; }
.card-body h3 { font:600 18px/1.4 'Manrope',sans-serif; letter-spacing:-.4px; margin:8px 0; }
.card-body p { color:var(--muted); font-size:14px; line-height:1.7; margin:0; }
#empty { text-align:center; padding:55px 15px; color:var(--muted); }
#empty h3 { color:var(--ink); font-weight:500; font-size:22px; }
#empty button { background:var(--ink); color:var(--paper); border-radius:4px; padding:11px 18px; margin-top:12px; }
#alphabet { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:20px; }
#alphabet button { font-size:13px; min-width:32px; height:34px; border-radius:3px; }
#alphabet button.active { background:var(--ink); color:var(--paper); }
#alphabet button:disabled { opacity:.35; cursor:default; }
.index-list { display:block; }
.index-row { display:flex; align-items:center; gap:22px; padding:19px 12px; border-top:1px solid var(--line); }
.index-row strong { font:500 18px 'Manrope',sans-serif; min-width:220px; }
.index-row .category-label { min-width:150px; }
.index-row p { font-size:14px; color:var(--muted); margin:0; line-height:1.6; }
.index-row:hover { background:#edf0e5; }
footer { max-width:1400px; margin:auto; padding:29px 5%; display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--line); }
footer .brand { font-size:24px; }
footer nav { display:flex; flex-wrap:wrap; gap:24px; font-size:14px; }
footer button { padding:8px 0; }
footer button:hover { text-decoration:underline; text-underline-offset:4px; }
dialog { border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); padding:0; width:min(720px,calc(100% - 30px)); max-height:90dvh; overflow:auto; box-shadow:0 20px 100px #17281d35; }
dialog::backdrop { background:#1e302b80; backdrop-filter:blur(5px); }
body:has(dialog[open]) { overflow:hidden; }
.close { position:absolute; right:15px; top:12px; width:40px; height:40px; border-radius:50%; background:var(--paper); font-size:28px; line-height:1; }
.modal-content { padding:42px; }
.modal-content h2 { padding-right:22px; }
.modal-content h2:focus { outline:none; }
.modal-content>p { line-height:1.8; color:#59684f; }
.modal-content a { text-decoration:underline; text-underline-offset:4px; }
.resource-list { list-style:none; padding:0; margin:27px 0 0; }
.resource-list li { padding:18px 0; border-top:1px solid var(--line); }
.resource-list li:last-child { padding-bottom:0; }
.resource-list a { font-weight:600; }
.resource-list p { font-size:14px; line-height:1.7; color:var(--muted); margin:7px 0 0; }
.term-article { max-width:1280px; margin:auto; padding:27px 5% 0; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:12px; font-size:13px; color:#637257; }
.breadcrumbs a:hover { text-decoration:underline; }
.breadcrumbs>[aria-current] { color:var(--ink); }
.article-heading { padding:34px 0 32px; max-width:950px; }
.article-heading h1 { font-size:clamp(42px,5.5vw,74px); line-height:1.12; letter-spacing:-3px; margin:0 0 18px; }
.article-summary { color:var(--muted); font-size:19px; line-height:1.7; margin:0; max-width:720px; }
.article-intro { display:grid; grid-template-columns:1fr 1fr; gap:58px; align-items:start; padding-bottom:40px; border-bottom:1px solid var(--line); }
.article-diagram { margin:0; border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.diagram-stage { background:var(--tile); padding:23px 32px 15px; aspect-ratio:1.48; }
.diagram-stage svg { width:100%; height:100%; display:block; }
.article-diagram figcaption { padding:17px 20px; background:#fcfcf8; }
.article-diagram figcaption p { font-size:13px; line-height:1.75; color:var(--muted); margin:0; }
.definition-text { font:400 21px/1.7 'Manrope',sans-serif; letter-spacing:-.3px; margin:0 0 27px; }
.example { background:#edf0e4; border-radius:4px; padding:18px 21px; border-left:3px solid #a7b873; }
.example h2 { font:600 15px 'DM Sans',sans-serif; letter-spacing:0; margin:0 0 9px; }
.example p { font-size:14px; line-height:1.8; margin:0; color:#596a4c; }
.article-reading { padding:36px 0 26px; }
.article-prose { max-width:740px; }
.article-prose h2 { font-size:25px; line-height:1.4; letter-spacing:-.8px; margin:0 0 17px; }
.article-prose p { font-size:16px; line-height:1.9; color:#59674f; margin:0 0 18px; }
.article-prose section+section { margin-top:30px; }
.in-the-field { border-top:1px solid var(--line); margin-top:12px; padding-top:30px; }
.in-the-field>h2 { margin-bottom:22px; }
.real-photo { margin:0 0 32px; }
.real-photo img { display:block; width:100%; height:auto; max-height:660px; object-fit:contain; background:#edf0e4; border-radius:4px; }
.real-photo figcaption { display:grid; grid-template-columns:minmax(0,680px) 1fr; gap:30px; align-items:start; padding:15px 0; }
.real-photo figcaption p { font-size:14px; line-height:1.8; color:#59694d; margin:0; }
.real-photo .photo-credit { text-align:right; overflow-wrap:anywhere; }
.article-sources { border-top:1px solid var(--line); padding:29px 0 32px; margin-top:18px; }
.article-sources h2 { font-size:22px; letter-spacing:-.6px; margin:0 0 20px; }
.article-sources>a { display:inline-block; font-size:14px; line-height:1.8; border-bottom:1px solid #bac5a7; padding-bottom:5px; }
.article-bottom { padding:24px 0; border-top:1px solid var(--line); }
.back-link { font-size:14px; }
.term-page footer { margin-top:18px; }
@media(max-width:1100px) {
  .term-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hero { gap:30px; }
  h1 { font-size:68px; }
  .article-intro { gap:32px; }
  .definition-text { font-size:19px; }
  .diagram-stage { padding:18px 15px; }
  .index-row strong { min-width:180px; }
}
@media(max-width:700px) {
  header { padding:21px 6%; }
  .brand { font-size:26px; }
  .hero { grid-template-columns:1fr; padding:38px 6%; gap:30px; }
  h1 { font-size:66px; letter-spacing:-4px; }
  .intro { max-width:350px; font-size:16px; }
  .hero-art { max-width:500px; width:100%; margin:auto; }
  .hero-photo .photo-credit { font-size:12px; }
  .dictionary { padding:30px 6% 42px; }
  h2 { font-size:27px; }
  .tools { flex-wrap:wrap; gap:12px; }
  .search { flex-basis:100%; }
  .view-switch { padding:3px; }
  .view-switch button { min-height:36px; padding:7px 12px; }
  .categories { gap:7px; margin-block:16px; }
  .categories button { font-size:12px; padding:8px 11px; }
  .term-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
  .card-body { padding:14px 12px; }
  .card-body h3 { font-size:16px; }
  .card-body p { font-size:13px; line-height:1.65; }
  .category-label { font-size:12px; }
  .drawing { padding:10px 5px 5px; aspect-ratio:1.25; }
  footer { padding:24px 6%; gap:18px; flex-wrap:wrap; }
  footer nav { width:100%; gap:20px; font-size:13px; }
  .modal-content { padding:34px 24px; }
  .modal-content h2 { font-size:25px; }
  .index-row { gap:8px; flex-wrap:wrap; padding:16px 8px; }
  .index-row strong { min-width:0; width:100%; }
  .index-row p { width:100%; font-size:14px; }
  .term-article { padding:22px 6% 0; }
  .breadcrumbs { gap:8px; font-size:12px; }
  .article-heading { padding:29px 0 26px; }
  .article-heading h1 { letter-spacing:-1.8px; font-size:42px; }
  .article-summary { font-size:17px; }
  .article-intro { grid-template-columns:1fr; gap:25px; padding-bottom:29px; }
  .definition-text { font-size:19px; margin-bottom:23px; }
  .diagram-stage { aspect-ratio:1.5; padding:15px 25px; }
  .article-diagram figcaption { padding:15px 17px; }
  .article-reading { padding-top:29px; }
  .article-prose h2 { font-size:24px; }
  .article-prose p { font-size:15px; }
  .real-photo figcaption { grid-template-columns:1fr; gap:12px; padding-top:13px; }
  .real-photo .photo-credit { text-align:left; }
  .real-photo { margin-bottom:22px; }
  .article-sources>a { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { transition:none!important; }
}
.hero h1 { font-size:clamp(44px,4.8vw,68px); line-height:1.12; letter-spacing:-2.5px; max-width:470px; }
.article-sources ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.article-sources li>a { display:inline-block; font-size:14px; line-height:1.8; border-bottom:1px solid #bac5a7; padding-bottom:3px; }
@media(max-width:700px) { .hero h1 { font-size:46px; letter-spacing:-2px; } }
header { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.header-search { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:6px 0 6px 12px; font-size:15px; }
.header-search:hover { color:var(--green); }
.search-modal-content { padding:38px 30px 24px; }
.search-modal-content h2 { padding-right:32px; font-size:27px; }
#search-dialog { width:min(600px,calc(100% - 30px)); }
#site-search-form .search { max-width:none; }
#site-search-status { margin:16px 0 8px; color:var(--muted); font-size:14px; }
#site-search-results { list-style:none; margin:0; padding:0; max-height:48dvh; overflow-y:auto; overscroll-behavior:contain; }
#site-search-results a { display:block; padding:13px 9px; border-bottom:1px solid var(--line); font-size:17px; border-radius:3px; }
#site-search-results a:hover,#site-search-results a:focus-visible { background:#e8ecdf; outline-offset:-2px; }
.related-terms { border-top:1px solid var(--line); padding:30px 0; }
.related-terms h2 { font-size:25px; }
.related-terms ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:740px; }
.related-terms a { display:flex; align-items:center; height:100%; min-height:54px; padding:12px 16px; border:1px solid #c4cbb9; border-radius:4px; font-size:16px; }
.related-terms a:hover { background:#e8ecdf; border-color:#7c8b67; }
@media(max-width:700px) {
 .search-modal-content { padding:34px 22px 20px; }
 .search-modal-content h2 { font-size:24px; }
 .related-terms ul { gap:10px; }
 .related-terms a { padding:12px; font-size:15px; }
}
.not-found-page { min-height:100dvh; display:flex; flex-direction:column; }
.not-found-page>header,.not-found-page>footer { width:100%; flex-shrink:0; }
.not-found-page>header { margin:0 auto; }
.not-found-page>footer { margin:auto auto 0; }
.not-found { width:100%; max-width:1400px; margin:0 auto; padding:85px 5% 100px; }
.not-found h1 { font-size:clamp(44px,6vw,72px); letter-spacing:-2px; line-height:1.12; }
.not-found>p { max-width:460px; font-size:17px; color:var(--muted); }
.not-found .error-code { margin:0 0 18px; font-size:16px; }
@media(max-width:700px) { .not-found { padding:60px 6% 75px; } }