/* An illustrated position map; the article remains readable without scripts. */
.spread-teaching { --map-forest: #142a20; --map-border: #61735b; --map-gold: #d7c58e; --map-text: #eeeadd; --map-muted: #bccbbe; padding-top: 24px; scroll-margin-top: 90px; }
.spread-teaching [hidden] { display: none !important; }
.spread-teaching h2, .spread-teaching h3, .spread-teaching h4 { text-transform: none; letter-spacing: 0; line-height: 1.35; }
.spread-teaching h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); margin-bottom: 17px; }
.spread-teaching p { font-weight: 400; line-height: 1.8; color: var(--map-muted); }
.spread-teaching-intro { max-width: 900px; margin-bottom: 29px; }
.spread-teaching-intro > p { font-size: .94rem; }
.spread-teaching-intro .spread-teaching-disclosure { font-size: .79rem; max-width: 84ch; margin-bottom: 0; }
.spread-teaching-workbench { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: 35px; align-items: start; }
.spread-teaching-map-area { min-width: 0; padding: 25px; border: 1px solid var(--map-border); border-radius: 12px; background: var(--map-forest); }
.spread-teaching-map-label { margin-bottom: 21px; color: var(--map-gold) !important; font-size: .87rem; }
.spread-teaching-map { list-style: none; margin: 0; padding: 0; scroll-margin-top: 90px; }
.spread-teaching-map--three-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: center; padding-block: 28px 38px; }
.spread-teaching-position { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 48px; aspect-ratio: 2 / 3; padding: 14px 8px; border: 1px solid #8b9a75; border-radius: 7px; box-shadow: inset 0 0 0 5px var(--map-forest), inset 0 0 0 6px #4c6350; background: #1c3929; color: var(--map-text); text-decoration: none; text-align: center; }
.spread-teaching-position:hover { background: #2a4733; color: white; border-color: var(--map-gold); }
.spread-teaching-position[aria-selected="true"], .spread-teaching-position:active { border: 2px solid var(--map-gold); background: #344630; color: #fff5d9; }
.spread-teaching-number { display: block; font-family: Cinzel, Georgia, serif; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1; color: var(--map-gold); }
.spread-teaching-name { font-size: .76rem; line-height: 1.5; font-weight: 500; overflow-wrap: normal; }
.spread-teaching-map--celtic-cross { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr) .1fr minmax(0, 1fr); grid-template-rows: repeat(4, 107px); column-gap: 12px; row-gap: 15px; padding-block: 5px 15px; }
.spread-teaching-map--celtic-cross .spread-teaching-slot { display: flex; justify-content: center; align-items: center; min-width: 0; }
.spread-teaching-map--celtic-cross .spread-teaching-position { aspect-ratio: auto; height: 107px; border-radius: 5px; gap: 8px; padding: 11px 6px; }
.spread-teaching-map--celtic-cross .spread-teaching-number { font-size: 1.35rem; }
.spread-teaching-map--celtic-cross .spread-teaching-name { font-size: .65rem; line-height: 1.4; }
.spread-teaching-map--celtic-cross .spread-teaching-slot--1 { grid-column: 2; grid-row: 2 / 4; }
.spread-teaching-map--celtic-cross .spread-teaching-slot--2 { grid-column: 2; grid-row: 2 / 4; z-index: 1; pointer-events: none; }
.spread-teaching-map--celtic-cross .spread-teaching-slot--1 .spread-teaching-position { width: 76%; height: 200px; justify-content: space-between; padding-block: 18px; }
.spread-teaching-map--celtic-cross .spread-teaching-slot--2 .spread-teaching-position { height: 65px; min-height: 65px; width: 100%; flex-direction: row; pointer-events: auto; padding-inline: 12px; border-color: #bca975; }
.spread-teaching-map--celtic-cross .spread-teaching-slot--2 .spread-teaching-name { max-width: 85px; text-align: left; }
.spread-teaching-map--celtic-cross .spread-teaching-slot--3 { grid-column: 2; grid-row: 1; }
.spread-teaching-map--celtic-cross .spread-teaching-slot--4 { grid-column: 2; grid-row: 4; }
.spread-teaching-map--celtic-cross :is(.spread-teaching-slot--3, .spread-teaching-slot--4) .spread-teaching-position { width: 76%; }
.spread-teaching-map--celtic-cross .spread-teaching-slot--5 { grid-column: 1; grid-row: 2 / 4; }
.spread-teaching-map--celtic-cross .spread-teaching-slot--6 { grid-column: 3; grid-row: 2 / 4; }
.spread-teaching-map--celtic-cross .spread-teaching-slot--7 { grid-column: 5; grid-row: 4; }
.spread-teaching-map--celtic-cross .spread-teaching-slot--8 { grid-column: 5; grid-row: 3; }
.spread-teaching-map--celtic-cross .spread-teaching-slot--9 { grid-column: 5; grid-row: 2; }
.spread-teaching-map--celtic-cross .spread-teaching-slot--10 { grid-column: 5; grid-row: 1; }
.spread-teaching-arrangement { margin-top: 20px; margin-bottom: 0; font-size: .77rem; }
.spread-teaching-keyboard { font-size: .69rem; margin-top: 13px; margin-bottom: 0; }
.spread-teaching-reading { min-width: 0; }
.spread-teaching-question { margin: 0 0 23px; padding-left: 17px; border-left: 2px solid var(--map-gold); font-size: .92rem; }
.spread-teaching-question strong { display: block; margin-bottom: 6px; color: var(--map-gold); font-size: .74rem; font-weight: 500; }
.spread-teaching-detail { padding: 23px; border: 1px solid #4e6454; border-radius: 8px; background: #131e18; margin-bottom: 20px; scroll-margin-top: 100px; }
.spread-teaching-detail h3 { font-size: 1.35rem; color: var(--map-text); margin-bottom: 15px; }
.spread-teaching-role { font-size: .86rem; }
.spread-teaching-role strong { color: #e1e8d8; font-weight: 500; }
.spread-teaching-example { display: grid; grid-template-columns: 85px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 22px; padding-top: 23px; border-top: 1px solid #3b5241; }
.spread-teaching-example img { display: block; width: 85px; height: auto; border-radius: 5px; }
.spread-teaching-example h4 { font-size: 1.08rem; color: var(--map-text); margin-bottom: 12px; }
.spread-teaching-example p { font-size: .82rem; }
.spread-teaching-example .spread-teaching-card-label { font-size: .67rem; margin-bottom: 7px; color: var(--map-gold); }
.spread-teaching-meaning, .spread-teaching-back, .spread-teaching-next > a:not(.btn) { color: #b7d7b2; text-decoration: underline; text-underline-offset: .25em; font-size: .79rem; line-height: 1.6; }
.spread-teaching-back { display: inline-block; margin-top: 20px; }
.spread-teaching[data-layout-enhanced] .spread-teaching-back { display: none; }
.spread-teaching-step-controls { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.spread-teaching-step-controls button { min-height: 44px; border: 1px solid #78906d; padding: 9px 13px; border-radius: 4px; color: #deead4; font-size: .78rem; }
.spread-teaching-step-controls button:hover:not(:disabled) { border-color: var(--map-gold); background: #23372a; }
.spread-teaching-step-controls button:disabled { opacity: .4; cursor: default; }
.spread-teaching-next { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; margin-top: 30px; }
.spread-teaching-next > .btn { font-size: .76rem; letter-spacing: .03em; text-transform: none; }
.spread-teaching :is(a, button):focus-visible, .spread-teaching-detail:focus-visible { outline: 3px solid #ead8a3; outline-offset: 4px; }
@media (max-width: 1120px) { .spread-teaching-workbench { grid-template-columns: minmax(0, 1.25fr) minmax(290px, 1fr); gap: 24px; } .spread-teaching-map-area { padding: 20px; } .spread-teaching-map--celtic-cross { column-gap: 8px; } .spread-teaching-example { grid-template-columns: 65px minmax(0,1fr); gap: 15px; } .spread-teaching-example img { width: 65px; } }
@media (max-width: 960px) { .spread-teaching-workbench { grid-template-columns: 1fr; gap: 28px; } .spread-teaching-map-area { max-width: 720px; width: 100%; margin-inline: auto; } .spread-teaching-map--celtic-cross { grid-template-rows: repeat(4,110px); column-gap: 22px; } .spread-teaching-map--celtic-cross .spread-teaching-position { height: 110px; } .spread-teaching-map--celtic-cross .spread-teaching-name { font-size: .75rem; } .spread-teaching-reading { max-width: 720px; width: 100%; margin-inline: auto; } .spread-teaching-example { grid-template-columns: 90px minmax(0,1fr); } .spread-teaching-example img { width: 90px; } .spread-teaching-map--three-card { max-width: 580px; margin-inline: auto; } }
@media (max-width: 600px) { .spread-teaching-intro > p { font-size: .86rem; } .spread-teaching-intro .spread-teaching-disclosure { font-size: .73rem; } .spread-teaching-map-area { padding: 18px 12px; } .spread-teaching-map--three-card { gap: 13px; padding-block: 16px 25px; } .spread-teaching-map--three-card .spread-teaching-position { min-height: 130px; aspect-ratio: auto; padding-inline: 7px; } .spread-teaching-map--three-card .spread-teaching-name { font-size: .76rem; } .spread-teaching-map--celtic-cross { grid-template-columns: minmax(0,1fr) minmax(0,1.55fr) minmax(0,1fr) .02fr minmax(0,1fr); grid-template-rows: repeat(4, 94px); column-gap: 6px; row-gap: 11px; } .spread-teaching-map--celtic-cross .spread-teaching-position { min-height: 94px; height: 94px; padding: 11px 4px; } .spread-teaching-map--celtic-cross .spread-teaching-number { font-size: 1.2rem; } .spread-teaching-map--celtic-cross .spread-teaching-name { font-size: .61rem; line-height: 1.4; } .spread-teaching-map--celtic-cross .spread-teaching-slot--1 .spread-teaching-position { height: 182px; padding-block: 17px; } .spread-teaching-map--celtic-cross .spread-teaching-slot--2 .spread-teaching-position { height: 58px; min-height: 58px; padding-inline: 8px; gap: 5px; } .spread-teaching-map--celtic-cross .spread-teaching-slot--2 .spread-teaching-name { font-size: .59rem; } .spread-teaching-detail { padding: 21px; } .spread-teaching-detail h3 { font-size: 1.25rem; } .spread-teaching-example { grid-template-columns: 75px minmax(0,1fr); gap: 17px; } .spread-teaching-example img { width: 75px; } .spread-teaching-next { align-items: flex-start; flex-direction: column; gap: 20px; } }
@media (max-width: 380px) { .spread-teaching-map--celtic-cross { column-gap: 4px; } .spread-teaching-map--celtic-cross .spread-teaching-name { font-size: .57rem; } .spread-teaching-map--celtic-cross .spread-teaching-slot--1 .spread-teaching-position { width: 82%; } .spread-teaching-example { grid-template-columns: 58px minmax(0,1fr); gap: 13px; } .spread-teaching-example img { width: 58px; } }
@media (prefers-reduced-motion: reduce) { .spread-teaching *, .spread-teaching *::before, .spread-teaching *::after { transition: none !important; } }
@media print { .spread-teaching .spread-teaching-detail[hidden] { display: block !important; } .spread-teaching-keyboard, .spread-teaching-step-controls { display: none !important; } .spread-teaching-workbench { display: block; } }

.spread-teaching-touch-help { display: none; font-size: .75rem; margin-top: 12px; margin-bottom: 0; }
@media (max-width: 960px) { .spread-teaching[data-layout-enhanced] .spread-teaching-back { display: inline-block; } }
@media (max-width: 600px) {
  .spread-teaching-touch-help { display: block; }
  .spread-teaching-map--celtic-cross .spread-teaching-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
  .spread-teaching-map--celtic-cross .spread-teaching-number { font-size: 1.55rem; }
  .spread-teaching-map--celtic-cross .spread-teaching-slot--1 .spread-teaching-position { justify-content: flex-start; padding-top: 20px; }
  .spread-teaching-map--celtic-cross .spread-teaching-slot--2 .spread-teaching-position { justify-content: center; }
}