/* §12 · looksmax definitions + field guide */

/* encyclopedia pages */
.wk-page { left: 150px; top: 150px; width: 1320px; }
.wk-crumb { letter-spacing: .14em; }
.wk-title { font: 400 128px/1.05 var(--f-serif); color: #111111; letter-spacing: -.01em; margin-top: 14px !important; }
.wk-blue { color: #000; }
.wk-pos { margin-top: 18px !important; color: var(--fg2); display: flex; align-items: center; gap: 10px; }
.wk-pos i { font-style: italic; }
.wk-def { font: 400 54px/1.38 var(--f-serif); color: #111111; }
.wk-link { color: #000; text-decoration: underline; text-decoration-color: #000; text-decoration-thickness: 7px; text-underline-offset: 8px; cursor: pointer; padding: 0 4px; margin: 0 -4px; border-radius: 3px; }
.wk-link.hot { background: #000; color: #fff; }
#looksmax .wk-cursor { left: 1500px; top: 760px; z-index: 6; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
#looksmax .wk-page .sm { width: 1180px; }
.wk-body { left: 150px; top: 372px; width: 1440px; }
.wk-body .g2 { gap: 0 120px; }
.ic-take { border-left: 8px solid var(--acc); padding-left: 32px; }
.ic-take .h2 { font-size: 80px; }

/* soft vs hard */
#soft-hard .sh-cols { left: 96px; top: 210px; width: 1728px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 96px; }
#soft-hard .sh-word { font: 400 330px/.8 var(--f-display); text-transform: uppercase; color: var(--fg); margin-bottom: 26px !important; }
#soft-hard .sh-word.mut { color: var(--muted); }
#soft-hard .sh-take { left: 96px; top: 860px; width: 1640px; }

/* field guide stage: a fixed clip window; the stage inside moves between slides (auto-animate camera) */
.fg-clip { left: 980px; top: 120px; width: 880px; height: 900px; overflow: hidden; }
.fg-stage { position: absolute; left: 140px; top: 50px; width: 600px; height: 800px; }
.fg-stage.pan { left: 40px; }
.fg-stage.zoom-eye { left: -153.6px; top: -476.8px; width: 1680px; height: 2240px; }
.fg-stage.zoom-mid { left: 5px; top: -159px; width: 870px; height: 1160px; }
.fg-stage.fg-profile { left: 90px; top: 50px; width: 700px; height: 800px; }
.fg-stage > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.fg-stage .ann { font-size: 17px; }
.fg-ov { position: absolute; inset: 0; }
.fb { position: absolute; border: 2px dashed var(--acc); box-sizing: border-box; }
.fb span { position: absolute; left: -2px; top: -30px; font: 400 16px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-acc); background: var(--acc); padding: 4px 6px; white-space: nowrap; }
.fb-nose span { left: auto; right: -132px; top: 40%; }
.fb-whole { position: absolute; left: 13%; top: 7%; right: 13%; bottom: 17%; border: 2px solid var(--fg); border-radius: 46% 46% 44% 44% / 40% 40% 52% 52%; }
.fb-whole span { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); font: 400 16px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); white-space: nowrap; }
.fg-text { left: 96px; top: 196px; width: 820px; }
.fg-text .body { color: var(--fg2); }
.fg-text .cite { font-size: 19px; }

/* dimorphism + bridge into skin */
#fg-dimorph .dm-text { left: 96px; top: 196px; width: 1060px; }
#fg-dimorph .dm-text .body { color: var(--fg2); }
#fg-dimorph .dm-end { left: 96px; top: 720px; width: 1100px; }
#fg-dimorph .dm-skin { left: 1200px; top: 560px; font: 400 400px/.8 var(--f-display); text-transform: uppercase; color: var(--fg); }
#fg-dimorph .dm-skin span { display: inline-block; }
#fg-dimorph .dm-skin span { position: relative; color: var(--on-acc); }
#fg-dimorph .dm-skin span::before { content: ''; position: absolute; left: -.05em; right: -.07em; top: -.07em; bottom: -.07em; z-index: -1; background: var(--mkc, var(--acc)); transform: scaleX(var(--hk, 1)) rotate(-1deg); transform-origin: 0 50%; -webkit-mask: var(--marker) 0 0 / 100% 100% no-repeat; mask: var(--marker) 0 0 / 100% 100% no-repeat; }