.st ::selection { background: var(--red); color: var(--bone); }
.st p { text-wrap: pretty; }
.cv-key { color: var(--red); }   


.st-top { padding-top: var(--s3); row-gap: var(--s3); overflow-x: clip; }   
.st-h1 { font-size: clamp(var(--h1), 4.4cqw, 64px); }
.st-door { position: relative; justify-self: center; width: min(100%, 1240px); line-height: 0; }

.st-door .st-in { position: absolute; left: 32.5%; right: 32.6%; top: 47%; bottom: 3%; display: grid; align-content: center; text-align: center;
  font-size: clamp(var(--p), 2.3cqw, 34px); line-height: 1.4; }
.st-wide { font-size: 20px; line-height: 1.55; text-wrap: pretty; }   
.st-intro { justify-self: center; width: min(100%, 640px); }
.st-intro p + p { margin-top: var(--s1); }
.st-lede { font-size: var(--h3); line-height: 1.45; }


.st-lore { position: relative; margin-top: var(--s5); padding-bottom: var(--s4); }
.st-tale { --d: 2 / span 5; padding-right: var(--s2); }
.st-tale .h2 { font-size: var(--d2); line-height: 1; margin-bottom: var(--s2); }
.st-tale p { max-width: 62ch; }
.st-tale p + p { margin-top: var(--s1); }
.st-word { --d: 8 / span 4; padding-top: calc(var(--d2) * 1.6); }
.st-bg { font: 700 var(--d2)/1 var(--f-head); margin-bottom: var(--s1); overflow-wrap: anywhere; }
.st-pull { margin-top: var(--s3); padding-top: var(--s1); border-top: 2px solid var(--red); font-size: var(--h2); line-height: 1.15; }


.st-plumb { position: absolute; left: calc(50% - 7px); top: 0; bottom: var(--s2); width: 14px; overflow: clip; pointer-events: none; }
.st-plumb::before { content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 2px; background: var(--red); }
.st-pl { position: absolute; inset: 0; }
.st-pl::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 7px; width: 2px; background: var(--red); }
.st-bob { position: absolute; left: 0; bottom: 0; width: 14px; height: 14px; background: var(--red); transform: rotate(45deg) scale(0.72); }


.st-key-head { row-gap: var(--s1); padding-bottom: var(--s3); }
.st-key-head .h2 { --d: 3 / span 8; }
.st-key-head > p.ash { --d: 4 / span 6; }
.st-course { display: grid; grid-template-columns: minmax(0, 112fr) minmax(0, 96fr) minmax(0, 104fr) minmax(0, 108fr) minmax(0, 92fr) minmax(0, 100fr); column-gap: 8px; padding-inline: var(--mx); }
.fd { position: relative; display: flex; flex-direction: column; }
.fd-stone { position: relative; height: clamp(150px, 13cqw, 190px); display: grid; place-items: center; }
.fd-st { position: absolute; inset: 0; width: 100%; height: 100%; }
.fd-st path { fill: var(--sf, var(--ink)); stroke: var(--bone); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.fd-rn { position: relative; width: 58%; height: auto; aspect-ratio: 1; max-width: 108px; color: var(--rg, var(--red)); }
.fd-txt { padding: var(--s1) 12px 0 4px; }
.fd .h3 { margin-bottom: 8px; }
.fd .h3 a { text-decoration: none; }
.fd .h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }   
.fd:has(a:focus-visible) { outline: 2px solid var(--bone); outline-offset: 6px; }
.fd a:focus-visible { outline: none; }
@supports not selector(:has(*)) { .fd a:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; } }   


.st-close { padding-block: var(--s5) var(--s4); }
.st-close p { margin-top: var(--s1); }
.st-btns { display: flex; flex-direction: column; align-items: center; row-gap: 8px; }
.st-btns .link { display: inline-flex; align-items: center; min-height: 44px; }


@container site (max-width: 1199px) {
  .st-tale { --d: 1 / span 7; }
  .st-word { --d: 9 / span 4; }
  .st-key-head .h2, .st-key-head > p.ash { --d: 1 / -1; }
  .st-course { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s3); }
}

@container site (max-width: 720px) {
  .st-top { row-gap: var(--s2); padding-top: var(--s2); }
  .st-door { width: max(100%, 540px); }   
  .st-lore { margin-top: var(--s4); }
  .st-tale { --d: 1 / -1; padding: 0 0 0 12px; }
  .st-word { --d: 1 / -1; padding: var(--s3) 0 0 12px; }
  .st-plumb { left: 1px; }
  .st-course { grid-template-columns: 1fr; row-gap: 8px; }
  .fd { flex-direction: row; align-items: center; gap: var(--s1); }
  .fd-stone { flex: none; width: 104px; height: 100px; }
  .fd-txt { padding: 0; }
  .fd .h3 { font-size: 19px; margin-bottom: 4px; }
  .st-close { padding-block: var(--s4) var(--s3); }
}


@keyframes st-drop { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .st-lore { view-timeline: --st-lore block; }
    html:not(.no-motion) .st-pl { animation: st-drop linear both; animation-timeline: --st-lore; animation-range: cover 10% cover 70%; }
  }
}