:root {
    --deep: #173032;
    --page: var(--page-padding);
    --content: var(--content-width);
}

html { scroll-padding-top: 38px; }

.lexicon-hero { background: var(--chocolate); color: var(--paper); min-height: 810px; padding-top: 108px; }
.lexicon-hero__inner { align-items: center; display: grid; gap: clamp(48px, 7vw, 108px); grid-template-columns: minmax(390px, .86fr) minmax(500px, 1.14fr); margin: 0 auto; max-width: 1540px; min-height: 702px; padding: 64px var(--page); }
.eyebrow { color: var(--terracotta); font-size: 10px; font-weight: 600; letter-spacing: .16em; margin: 0; text-transform: uppercase; }
.eyebrow--gold { color: var(--gold); }
.lexicon-hero h1 { font-size: clamp(76px, 7.4vw, 116px); letter-spacing: -.04em; line-height: .88; margin: 25px 0 35px; }
.lexicon-hero__lede { font-family: var(--serif); font-size: clamp(23px, 2vw, 31px); line-height: 1.3; margin: 0; max-width: 620px; }
.lexicon-hero blockquote { border-top: 1px solid var(--white-line); color: rgb(255 253 250 / 76%); font-size: 17px; line-height: 1.4; margin: 34px 0 0; max-width: 530px; padding-top: 21px; }
.lexicon-hero cite { color: var(--gold); display: block; font-family: var(--sans); font-size: 9px; font-style: normal; letter-spacing: .13em; margin-top: 8px; text-transform: uppercase; }

.hero-gallery { display: grid; gap: 12px; grid-template-columns: 1.25fr .75fr; position: relative; }
.hero-gallery figure { margin: 0; overflow: hidden; }
.hero-gallery__main { grid-row: span 2; }
.hero-gallery img { aspect-ratio: 1; height: 100%; object-fit: cover; transition: transform 500ms ease; width: 100%; }
.hero-gallery figure:hover img { transform: scale(1.025); }
.hero-gallery__mark { align-items: center; background: var(--gold); border-radius: 50%; bottom: -28px; color: var(--ink); display: flex; font-family: var(--serif); font-size: 25px; height: 86px; justify-content: center; position: absolute; right: -26px; width: 86px; }

.lexicon-tools { background: var(--paper); border-bottom: 1px solid var(--line); }
.lexicon-tools__inner { align-items: end; display: grid; gap: 35px; grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.2fr) auto; margin: 0 auto; max-width: var(--content); padding: 72px var(--page) 46px; }
.lexicon-tools h2 { font-size: clamp(40px, 4vw, 60px); letter-spacing: -.03em; line-height: .95; margin: 10px 0 0; }
.lexicon-search { border-bottom: 1px solid var(--ink); display: flex; }
.lexicon-search input { background: transparent; border: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); outline: 0; padding: 12px 0; width: 100%; }
.lexicon-search > span:last-child { align-self: center; color: var(--terracotta); font-size: 31px; }
.search-status { color: rgb(36 23 17 / 62%); font-size: 10px; letter-spacing: .09em; margin: 0; text-transform: uppercase; }
.category-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 auto; max-width: var(--content); padding: 0 var(--page) 55px; }
.category-nav a { border-left: 1px solid var(--line); display: grid; font-family: var(--serif); font-size: 19px; line-height: 1; min-height: 86px; padding: 13px 16px; text-decoration: none; transition: background 180ms ease, color 180ms ease; }
.category-nav a:last-child { border-right: 1px solid var(--line); }
.category-nav span { color: var(--terracotta); font-family: var(--sans); font-size: 9px; letter-spacing: .13em; }
.category-nav a:hover { background: var(--cocoa); color: var(--paper); }
.category-nav a:hover span { color: var(--gold); }

.lexicon-section { margin: 0 auto; max-width: 1540px; padding: 108px var(--page) 120px; }
.lexicon-section--paper { background: var(--paper); max-width: none; }
.lexicon-section--dark, .lexicon-section--notation { color: var(--paper); max-width: none; }
.lexicon-section--dark { background: var(--cocoa); }
.lexicon-section--notation { background: var(--deep); }
.section-heading { align-items: end; display: grid; gap: 34px; grid-template-columns: 72px minmax(350px, 1fr) minmax(280px, .6fr); margin: 0 auto 55px; max-width: var(--content); }
.section-number { color: var(--terracotta); font-family: var(--serif); font-size: 50px; line-height: 1; margin: 0; }
.lexicon-section--dark .section-number, .lexicon-section--notation .section-number { color: var(--gold); }
.section-heading h2 { font-size: clamp(48px, 5.4vw, 78px); letter-spacing: -.03em; line-height: 1; margin: 11px 0 0; }
.section-heading > p:last-child { color: rgb(36 23 17 / 82%); font-family: var(--serif); font-size: 22px; line-height: 1.55; margin: 0; }
.lexicon-section--dark .section-heading > p:last-child, .lexicon-section--notation .section-heading > p:last-child { color: rgb(255 253 250 / 84%); }

.feature-layout { display: grid; gap: 38px; grid-template-columns: minmax(300px, .72fr) minmax(560px, 1.28fr); margin: 0 auto; max-width: var(--content); }
.feature-image { align-items: center; background: #e9dfd1; display: flex; height: clamp(410px, 38vw, 540px); justify-content: center; margin: 0; min-height: 0; overflow: hidden; padding: clamp(12px, 2vw, 28px); }
.feature-image img { height: 100%; object-fit: contain; width: 100%; }
.definition-grid { display: grid; gap: 1px; }
.definition-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.definition-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.term-card { background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 260px; padding: 30px; }
.term-card > span { color: var(--terracotta); font-size: 9px; letter-spacing: .13em; }
.term-card h3 { font-size: clamp(30px, 3vw, 45px); letter-spacing: -.02em; line-height: 1.06; margin: auto 0 18px; }
.term-card p { color: rgb(36 23 17 / 84%); font-size: 15px; line-height: 1.72; margin: 0; }
.term-card small { border-top: 1px solid var(--line); color: var(--terracotta); font-size: 10px; letter-spacing: .09em; margin-top: 18px; padding-top: 12px; text-transform: uppercase; }
.term-card--accent { background: var(--terracotta); color: var(--paper); }
.term-card--accent > span, .term-card--accent small { color: var(--gold); }
.term-card--accent p { color: rgb(255 253 250 / 83%); }
.term-card--accent small { border-color: var(--white-line); }

.illustrated-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 auto; max-width: var(--content); }
.image-term { background: var(--cream); min-width: 0; }
.image-term figure { align-items: center; background: #e9dfd1; display: flex; height: clamp(250px, 22vw, 315px); justify-content: center; margin: 0; overflow: hidden; padding: 14px; }
.image-term img { height: 100%; object-fit: contain; transition: transform 480ms ease; width: 100%; }
.image-term:hover img { transform: scale(1.025); }
.image-term > div { min-height: 230px; padding: 26px 28px 29px; }
.image-term span { color: var(--terracotta); font-size: 10px; font-weight: 600; }
.image-term h3 { font-size: 38px; line-height: 1.08; margin: 13px 0 16px; }
.image-term h3 small { display: block; font-family: var(--sans); font-size: 9px; letter-spacing: .12em; margin-top: 8px; text-transform: uppercase; }
.image-term p { color: rgb(36 23 17 / 82%); font-size: 14px; line-height: 1.72; margin: 0; }

.movement-grid { display: grid; gap: 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; max-width: var(--content); }
.movement-card { background: rgb(255 253 250 / 8%); border: 1px solid var(--white-line); min-width: 0; }
.movement-card figure { align-items: center; background: #eadcc9; display: flex; height: clamp(230px, 19vw, 285px); justify-content: center; margin: 0; overflow: hidden; padding: 13px; }
.movement-card img { height: 100%; object-fit: contain; transition: transform 480ms ease; width: 100%; }
.movement-card:hover img { transform: scale(1.025); }
.movement-card > div { min-height: 260px; padding: 28px; }
.movement-card span { color: var(--gold); font-size: 10px; letter-spacing: .13em; }
.movement-card h3 { font-size: 36px; line-height: 1.06; margin: 13px 0 17px; }
.movement-card p { color: rgb(255 253 250 / 84%); font-size: 14px; line-height: 1.72; margin: 0; }

.strategy-feature { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 auto 42px; max-width: var(--content); }
.strategy-image-card { background: var(--paper); min-width: 0; }
.strategy-image-card { overflow: hidden; }
.strategy-image-card > img { background: #e9dfd1; height: clamp(250px, 22vw, 315px); object-fit: contain; padding: 14px; width: 100%; }
.strategy-image-card > div { min-height: 220px; padding: 27px 29px 31px; }
.strategy-image-card h3 { font-size: 42px; line-height: 1.06; margin: 11px 0 15px; }
.strategy-image-card > div > p:last-child { color: rgb(36 23 17 / 82%); font-size: 14px; line-height: 1.72; margin: 0; }
.strategy-list { margin: 0 auto; max-width: var(--content); }
.strategy-list .term-card { min-height: 230px; }

.notation-layout { margin: 0 auto; max-width: var(--content); }
.term-card--light { background: rgb(255 253 250 / 8%); border-color: var(--white-line); color: var(--paper); min-height: 220px; }
.term-card--light > span, .term-card--light small { color: var(--gold); }
.term-card--light p { color: rgb(255 253 250 / 75%); }
.term-card--light small { border-color: var(--white-line); }
.notation-cards { gap: 18px; }
.notation-cards .term-card { min-height: 250px; padding: 27px 29px; }
.notation-cards .term-card h3 { margin: 26px 0 14px; }
.compact-cards { gap: 18px; margin: 0 auto; max-width: var(--content); }
.compact-cards .term-card { display: grid; gap: 8px 24px; grid-template-columns: 56px 1fr; min-height: 0; padding: 25px 28px; }
.compact-cards .term-card > span { grid-row: 1 / span 2; }
.compact-cards .term-card h3 { margin: 0; }
.compact-cards .term-card p { grid-column: 2; }
.term-card--number > span { font-family: var(--serif); font-size: 38px; }

.no-results { padding: 110px var(--page); text-align: center; }
.no-results h2 { font-size: clamp(43px, 5vw, 72px); margin: 12px auto 20px; max-width: 850px; }
.no-results p { margin-inline: auto; max-width: 620px; }
.no-results button { background: var(--terracotta); border: 0; color: var(--paper); cursor: pointer; margin-top: 24px; padding: 15px 20px; }
.editorial-note { align-items: center; background: var(--sage); color: var(--paper); display: flex; gap: 32px; justify-content: space-between; padding: 55px var(--page); }
.editorial-note p { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px); margin: 0; }
.editorial-note a { border-bottom: 1px solid var(--gold); color: var(--gold); font-size: 10px; letter-spacing: .13em; padding-bottom: 7px; text-decoration: none; text-transform: uppercase; }
.site-footer .ai-note { border-top: 1px solid var(--white-line); grid-column: 1 / -1; margin: 10px 0 0; padding-top: 20px; }

[data-term][hidden], [data-category][hidden] { display: none !important; }

@media (max-width: 1080px) {
    .lexicon-hero__inner { grid-template-columns: 1fr; padding-block: 70px 90px; }
    .hero-gallery { margin-left: auto; max-width: 760px; width: 100%; }
    .lexicon-tools__inner, .section-heading { grid-template-columns: 64px 1fr; }
    .lexicon-tools__inner > div { grid-column: 1 / -1; }
    .search-status, .section-heading > p:last-child { grid-column: 2; }
    .category-nav { grid-template-columns: repeat(3, 1fr); }
    .feature-layout { grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); }
    .illustrated-grid, .strategy-feature, .definition-grid--three { grid-template-columns: repeat(2, 1fr); }
    .movement-grid { grid-template-columns: repeat(2, 1fr); }
    .notation-cards > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    .lexicon-hero { padding-top: 82px; }
    .lexicon-hero__inner { gap: 50px; min-height: auto; padding-block: 58px 72px; }
    .lexicon-hero h1 { font-size: 64px; line-height: .94; }
    .hero-gallery { gap: 7px; }
    .hero-gallery__mark { bottom: -18px; height: 64px; right: -11px; width: 64px; }
    .lexicon-tools__inner { grid-template-columns: 1fr; padding-block: 58px 35px; }
    .lexicon-tools__inner > *, .search-status { grid-column: auto; }
    .category-nav { display: flex; overflow-x: auto; padding-bottom: 38px; scroll-snap-type: x mandatory; }
    .category-nav a { flex: 0 0 155px; scroll-snap-align: start; }
    .lexicon-section { padding-block: 76px 86px; }
    .section-heading { grid-template-columns: 1fr; gap: 14px; margin-bottom: 38px; }
    .section-heading > p:last-child { grid-column: auto; }
    .section-number { font-size: 34px; }
    .section-heading h2 { font-size: 48px; }
    .feature-layout { grid-template-columns: 1fr; }
    .feature-image { height: 310px; min-height: 0; }
    .definition-grid--two, .definition-grid--three, .illustrated-grid, .movement-grid, .strategy-feature { grid-template-columns: 1fr; }
    .term-card { min-height: 230px; }
    .image-term figure, .movement-card figure, .strategy-image-card > img { height: 285px; }
    .notation-cards > :first-child { grid-column: auto; }
    .compact-cards .term-card { grid-template-columns: 44px 1fr; }
    .editorial-note { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-gallery img, .image-term img, .movement-card img { transition: none; }
}