/* Contextual photographic studies: restrained ink, clear line hierarchy. */
.annotation-page { padding-top:44px; }
.annotation-intro { display:grid; grid-template-columns:1fr .88fr; gap:9%; align-items:center; padding:16px 0 76px; }
.annotation-intro h1 { font-size:clamp(44px,5.3vw,76px); line-height:1.28; margin-bottom:26px; }
.annotation-intro .lead { font-size:16px; max-width:450px; }
.annotation-intro-note { color:#78816e; font-size:12px; margin:27px 0 0; }
.annotation-meta { display:flex; gap:25px; border-top:1px solid var(--line); padding-top:24px; margin-top:30px; }
.annotation-meta>span { font-size:10px; color:var(--muted); }
.annotation-meta strong { display:block; font:30px/1.3 var(--serif); color:var(--ink); margin-bottom:7px; }
.annotation-hero-art { position:relative; }
.annotation-hero-art:before { content:""; position:absolute; inset:-14px 16px 25px -14px; border:1px solid #c6cdbd; z-index:-1; }
.annotation-hero-art figcaption { display:flex; justify-content:space-between; gap:10px; padding:13px 0; font-size:10px; color:var(--muted); }
.study-plate { position:relative; aspect-ratio:1122/1402; background:#eeede4; overflow:hidden; }
.study-plate .study-photo { width:100%; height:100%; object-fit:contain; }
.study-overlay { display:block; position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.annotation-lines { filter:drop-shadow(0 1px 1px #fff9eaaa); }
.study-plate[data-mode=photo] .study-overlay { visibility:hidden; }
.study-plate[data-mode=lines] .study-photo { visibility:hidden; }
.plate-badge { position:absolute; left:15px; bottom:13px; color:#365c53; background:#faf8eddd; padding:4px 8px; font-size:9px; letter-spacing:.04em; }
.annotation-method { display:grid; grid-template-columns:repeat(3,1fr); gap:35px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0 30px; }
.annotation-method>div { position:relative; padding-left:38px; }
.annotation-method>div>span { position:absolute; left:0; top:3px; font:19px/1.3 var(--serif); color:var(--accent); }
.annotation-method h3 { font-size:15px; margin-bottom:8px; }
.annotation-method p { font-size:12px; color:var(--muted); margin:0; }
.measure-workbench { margin:86px 0 95px; padding:37px; background:#edeedF; border:1px solid #d6dccb; }
.workbench-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:30px; }
.workbench-heading h2 { font-size:31px; margin:0; }
.workbench-heading>p { color:var(--muted); font-size:13px; max-width:340px; margin:0; }
.workbench-grid { display:grid; grid-template-columns:1fr .96fr; gap:36px; align-items:start; }
.workbench-art { min-width:0; }
.measure-media { position:relative; aspect-ratio:1122/1402; background:#dedfd4; }
.measure-media>img { width:100%; height:100%; object-fit:contain; }
#measure-svg { width:100%; height:100%; position:absolute; inset:0; touch-action:none; user-select:none; }
#measure-svg .landmark { cursor:grab; outline:none; }
#measure-svg .landmark:focus circle { stroke:#123a37; stroke-width:6; }
#measure-svg .landmark:focus text { fill:#123a37; }
#measure-svg .landmark circle { r:11; }
.measure-photo-caption { font-size:10px; color:var(--muted); margin:12px 0 0; }
.workbench-panel { min-width:0; background:var(--paper); padding:25px; }
.workbench-panel .field { margin-bottom:22px; }
.workbench-panel .field label { font-size:12px; }
.workbench-panel .field select { width:100%; margin-top:7px; font-size:13px; }
.workbench-panel h3 { font-family:var(--serif); font-size:25px; }
.workbench-panel p { font-size:12px; line-height:1.85; }
.measure-condition { border-left:2px solid #b7c2a7; padding-left:12px; color:var(--muted); }
.measure-readings { margin:18px 0; width:100%; }
.measure-readings table { border-collapse:collapse; width:100%; font-size:11px; background:transparent; }
.measure-readings th { font-weight:500; text-align:left; font-size:10px; color:var(--muted); background:transparent; padding:9px 3px; border-bottom:1px solid #c3cbb7; }
.measure-readings td { padding:8px 3px; border-bottom:1px solid #dde1d4; line-height:1.6; }
.measure-readings td:last-child { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; color:#28564f; font-weight:600; }
.measure-readings th:last-child { text-align:right; }
.measure-formula { color:var(--muted); padding:12px 0; border-top:1px solid var(--line); }
.coordinate-detail summary { font-size:12px; padding:10px 0; }
.coordinate-row { display:grid; grid-template-columns:1fr 68px 68px; align-items:center; gap:10px; border-top:1px solid var(--line); padding:10px 0; }
.coordinate-row>span { font-size:11px; line-height:1.6; }
.coordinate-row>span b { display:inline-block; min-width:30px; color:#28564f; }
.coordinate-row label { display:flex; flex-direction:column; gap:3px; font-size:10px; }
.coordinate-row input { width:100%; font-size:11px; padding:6px 4px; border-radius:0; }
.measure-state { min-height:1.8em; color:#805a36; }
.measure-note { color:var(--muted); margin:0; border-top:1px solid var(--line); padding-top:15px; }
.workbench-panel .actions { gap:18px; margin-bottom:10px; }
.workbench-panel .text-link { font-size:11px; }
.annotation-collection>.section-head>p,.annotation-sources .section-head>p { max-width:380px; font-size:13px; color:var(--muted); }
.annotation-index { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin:37px 0 20px; }
.annotation-index a { display:block; border-top:1px solid #b8c2ac; padding:15px 0; text-decoration:none; font-size:12px; line-height:1.9; }
.annotation-index a>span { display:block; font-size:10px; letter-spacing:.06em; color:var(--accent); margin-bottom:7px; }
.annotation-group { padding-top:55px; }
.annotation-group-head { display:flex; align-items:baseline; gap:30px; border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:28px; }
.annotation-group-head h2 { font-size:25px; margin:0; }
.annotation-group-head .eyebrow { margin:0; white-space:nowrap; }
.annotation-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px 35px; }
.annotation-card { min-width:0; border:1px solid var(--line); background:#fffdf7; scroll-margin-top:120px; }
.annotation-art { position:relative; padding:18px 18px 0; }
.annotation-art .study-plate { max-width:430px; margin:auto; }
.plate-modes { display:flex; gap:0; margin:13px 0 9px; border-bottom:1px solid var(--line); }
.plate-modes button { font-size:10px; padding:9px 14px; border-bottom:2px solid transparent; margin-bottom:-1px; }
.plate-modes button[aria-pressed=true] { color:#28564f; border-bottom-color:#28564f; font-weight:600; }
.plate-foot { display:flex; justify-content:space-between; font-size:9px; color:var(--muted); padding:7px 0 12px; }
.plate-foot>a { text-decoration:none; display:flex; gap:5px; align-items:center; }
.plate-foot .icon { width:15px; height:15px; }
.annotation-copy { padding:21px 28px 26px; border-top:1px solid var(--line); }
.annotation-copy .eyebrow { font-size:9px; margin-bottom:12px; }
.annotation-copy h3 { font:24px/1.5 var(--serif); margin-bottom:17px; }
.annotation-copy p,.annotation-copy ol { font-size:12px; }
.annotation-reading { list-style:none; padding:0; margin:21px 0; border-left:2px solid #c4cdb8; }
.annotation-reading li { padding-left:13px; color:#53664e; }
.annotation-reading li+li { margin-top:12px; }
.annotation-detail { border-top:1px solid var(--line); margin-top:17px; padding:11px 0 0; }
.annotation-detail summary { font-size:11px; }
.annotation-detail[open] summary { margin-bottom:15px; }
.annotation-detail p { margin-bottom:12px; }
.annotation-copy>.text-link { font-size:11px; margin:10px 0 4px; }
.annotation-exercise { margin:22px 0 19px; padding:16px 17px; background:#eeeee3; border-left:2px solid #aab79b; }
.annotation-exercise>span { font-size:10px; color:var(--accent); display:block; margin-bottom:7px; letter-spacing:.07em; }
.annotation-exercise>p { margin:0; }
.annotation-boundary { font-size:10px!important; line-height:1.9; color:#77806f; }
.annotation-lessons { display:flex; flex-direction:column; gap:10px; margin:15px 0 18px; font-size:11px; }
.annotation-sources { margin:85px 0 70px; border-top:1px solid var(--line); padding-top:44px; }
.source-list { display:grid; grid-template-columns:1fr 1fr; column-gap:40px; padding-left:20px; }
.source-list li { padding:13px 0 17px; border-bottom:1px solid var(--line); font-size:11px; }
.source-list a { text-decoration:none; line-height:1.8; font-weight:500; }
.source-list .icon { width:14px; height:14px; }
.source-list p { color:var(--muted); font-size:11px; margin:10px 0 0; }
.color-context { border:1px solid var(--line); padding:12px; margin:20px 0; }
.color-context-head { display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; font-size:9px; margin-bottom:10px; }
.color-context-head button { font-size:9px; text-decoration:underline; text-underline-offset:3px; }
.color-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.color-field { display:grid; place-items:center; min-height:115px; background:#deded2; }
.color-field.dark { background:#3d4341; }
.color-field>span { display:block; width:44px; height:44px; background:#b88874; }
.color-context.is-swapped .color-field.light { background:#3d4341; }
.color-context.is-swapped .color-field.dark { background:#deded2; }
.color-context>p { font-size:9px!important; margin:10px 0 0; color:var(--muted); }
.home-annotation { background:#eef0e6; padding:70px 0; border-top:1px solid #dde2d0; border-bottom:1px solid #dde2d0; }
.home-annotation-layout { display:grid; grid-template-columns:.82fr 1fr; gap:10%; align-items:center; }
.home-annotation-art { position:relative; margin:7px 10px; }
.home-annotation-art:before { content:""; position:absolute; border:1px solid #bbc8ad; inset:-12px 15px 15px -12px; }
.home-annotation-art .study-plate { max-width:440px; }
.annotation-art-label { position:absolute; background:#faf8ee; padding:10px 16px; font-size:10px; right:-10px; bottom:32px; border:1px solid #c7cfba; }
.home-annotation-copy h2 { font-size:clamp(30px,3.5vw,45px); }
.home-annotation-copy>p { max-width:430px; font-size:14px; color:#66755e; }
.home-annotation-tags { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; }
.home-annotation-tags span { font-size:10px; padding:4px 10px; border:1px solid #c5ceb7; }
.annotation-teasers { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:56px; padding-top:32px; border-top:1px solid #d3dbc6; }
.annotation-teasers>a { display:block; text-decoration:none; }
.annotation-teasers>a>div { max-width:100%; }
.annotation-teasers .study-plate { aspect-ratio:1122/1402; }
.annotation-teasers>a>span { display:block; margin:16px 0 7px; font-size:9px; color:var(--accent); }
.annotation-teasers h3 { font-family:var(--serif); font-size:18px; }
.annotation-teasers h3 .icon { width:16px; height:16px; }
.annotation-entry { padding:24px 28px; margin:0 0 38px; display:flex; justify-content:space-between; gap:25px; align-items:center; border:1px solid #c7d1b8; background:#eef0e5; }
.annotation-entry>div { display:flex; align-items:center; gap:20px; }
.annotation-entry>div>.icon { width:30px; height:30px; }
.annotation-entry strong { font-size:17px; font-family:var(--serif); font-weight:500; }
.annotation-entry p { font-size:11px; color:var(--muted); margin:6px 0 0; }
.lesson-annotation { padding:27px; background:#f0f0e5; border:1px solid #d4ddc7; margin:35px 0; }
.article .lesson-annotation h2 { font-size:25px; margin:0 0 15px; border:0; padding:0; }
.article .lesson-annotation p { font-size:12px; }
.article .lesson-annotation .eyebrow { font-size:10px; }
.lesson-annotation-layout { display:grid; grid-template-columns:1fr 1fr; gap:25px; align-items:start; }
.article .lesson-annotation li { font-size:11px; line-height:1.85; }
.lesson-annotation-layout ol { padding-left:17px; }
.lesson-annotation .measure-readings { margin-top:17px; }
.lesson-annotation .measure-readings td { font-size:10px; }
.lesson-annotation .measure-readings th { font-size:9px; }
.lesson-annotation .study-plate { margin-bottom:10px; }
.lesson-annotation-match { color:var(--muted); margin-bottom:23px; }
.annotation-svg-link { display:inline-flex; gap:7px; align-items:center; font-size:10px; text-decoration:none; }
.annotation-svg-link .icon { width:15px; height:15px; }
.lesson-annotation .annotation-boundary { margin:19px 0 13px; }
.lesson-annotation>.small { font-size:10px!important; }
.annotation-related { display:flex; flex-wrap:wrap; gap:7px 14px; border-top:1px solid var(--line); padding-top:13px; font-size:10px; }
.lesson-annotation .text-link { font-size:10px; }
@media(min-width:1400px){.annotation-card .study-plate { max-width:440px; }}
@media(max-width:1000px){
 .annotation-intro { gap:6%; grid-template-columns:1fr .9fr; }
 .annotation-intro h1 { font-size:54px; }
 .annotation-intro .lead { font-size:14px; }
 .measure-workbench { padding:25px; }
 .workbench-grid { gap:23px; }
 .workbench-panel { padding:18px; }
 .annotation-grid { gap:26px; }
 .annotation-copy { padding:20px; }
 .annotation-copy h3 { font-size:21px; }
 .lesson-annotation-layout { grid-template-columns:1fr; }
 .lesson-annotation-layout>div:first-child { max-width:410px; width:100%; margin:auto; }
 .home-annotation-layout { gap:7%; }
}
@media(max-width:760px){
 .annotation-page { padding-top:23px; }
 .annotation-intro { gap:28px; padding-bottom:38px; }
 .annotation-intro h1 { font-size:43px; }
 .annotation-intro .lead { font-size:12px; }
 .annotation-meta { gap:16px; padding-top:17px; margin-top:20px; }
 .annotation-meta strong { font-size:25px; }
 .annotation-meta>span { font-size:9px; }
 .annotation-intro-note { font-size:10px; }
 .annotation-hero-art figcaption { font-size:8px; flex-direction:column; gap:3px; }
 .annotation-method { gap:22px; }
 .annotation-method>div { padding-left:0; }
 .annotation-method>div>span { position:static; display:block; margin-bottom:9px; }
 .annotation-method h3 { font-size:13px; }
 .annotation-method p { font-size:10px; }
 .measure-workbench { margin:46px 0 58px; padding:21px; }
 .workbench-heading { display:block; }
 .workbench-heading h2 { font-size:27px; }
 .workbench-heading>p { margin-top:17px; max-width:none; font-size:12px; }
 .workbench-grid { grid-template-columns:1fr; }
 .workbench-art { max-width:480px; width:100%; margin:auto; }
 .workbench-panel { padding:22px; }
 .annotation-index { grid-template-columns:1fr 1fr; gap:15px; }
 .annotation-group-head { display:block; }
 .annotation-group-head h2 { font-size:22px; margin-top:12px; }
 .annotation-grid { gap:25px 18px; }
 .annotation-art { padding:10px 10px 0; }
 .annotation-copy { padding:18px 15px; }
 .annotation-copy h3 { font-size:20px; }
 .annotation-copy p,.annotation-copy ol { font-size:11px; }
 .plate-modes button { padding:8px 10px; font-size:9px; }
 .plate-badge { font-size:7px; left:9px; bottom:9px; }
 .annotation-exercise { padding:12px; }
 .annotation-boundary { font-size:9px!important; }
 .source-list { grid-template-columns:1fr; }
 .home-annotation { padding:42px 0; }
 .home-annotation-layout { gap:30px; }
 .home-annotation-copy>p { font-size:12px; }
 .home-annotation-copy h2 { font-size:30px; }
 .home-annotation-tags { gap:6px; }
 .home-annotation-tags span { font-size:9px; }
 .annotation-teasers { gap:20px; margin-top:35px; }
 .annotation-teasers h3 { font-size:15px; }
 .annotation-entry { padding:19px; flex-direction:column; align-items:start; }
}
@media(max-width:540px){
 .annotation-intro { grid-template-columns:1fr; gap:35px; }
 .annotation-intro h1 { font-size:47px; }
 .annotation-intro .lead { font-size:14px; }
 .annotation-intro-note { font-size:11px; }
 .annotation-hero-art { margin:0 8px; }
 .annotation-hero-art figcaption { flex-direction:row; font-size:9px; }
 .annotation-method { gap:16px; padding:22px 0; }
 .annotation-method h3 { font-size:12px; }
 .annotation-method p { font-size:10px; }
 .annotation-grid { grid-template-columns:1fr; }
 .annotation-art { padding:16px 16px 0; }
 .annotation-copy { padding:21px; }
 .annotation-copy h3 { font-size:24px; }
 .annotation-copy p,.annotation-copy ol { font-size:13px; }
 .annotation-boundary { font-size:10px!important; }
 .plate-modes button { font-size:11px; padding:10px 16px; }
 .plate-badge { font-size:9px; }
 .annotation-group { padding-top:38px; }
 .annotation-group-head h2 { font-size:24px; }
 .annotation-exercise { padding:16px; }
 .measure-workbench { padding:17px; margin-left:-2px; margin-right:-2px; }
 .workbench-panel { padding:18px; }
 .coordinate-row { grid-template-columns:1fr 62px 62px; gap:8px; }
 .home-annotation-layout { grid-template-columns:1fr; }
 .home-annotation-art { max-width:380px; margin:5px 12px 0; }
 .home-annotation-copy h2 { font-size:34px; }
 .home-annotation-copy>p { font-size:14px; }
 .annotation-teasers { grid-template-columns:1fr; gap:25px; }
 .annotation-teasers>a { display:grid; grid-template-columns:135px 1fr; gap:0 20px; align-items:center; }
 .annotation-teasers>a>div { grid-row:1/3; }
 .annotation-teasers>a>span { margin:0; align-self:end; padding-bottom:9px; }
 .annotation-teasers h3 { align-self:start; font-size:19px; margin:0; }
 .annotation-teasers .plate-badge { font-size:6px; padding:2px 4px; left:5px; bottom:6px; }
 .lesson-annotation { padding:19px; margin:28px 0; }
 .article .lesson-annotation h2 { font-size:24px; }
 .article .lesson-annotation p { font-size:13px; }
 .article .lesson-annotation li { font-size:12px; }
 .lesson-annotation .measure-readings td { font-size:11px; }
}
@media(prefers-reduced-motion:reduce){.study-plate * { transition:none!important; }}