/* SestinaPRISM: the sestina, a Provençal form, set like an illuminated manuscript.
   Parchment, iron-gall ink, red rubrics, lapis blue, a gold rule. The hero is a drawn braid (braid.js). */
:root {
  --bg: #f4ecd8;
  --ink: #2b2118;
  --muted: #6e5f4c;
  --line: #d9c9a6;
  --rubric: #a4282c;
  --lapis: #23408e;
  --gold: #b08d3e;
  --serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --caps: "Cormorant SC", "Cormorant Garamond", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1b1610; --ink: #ecdfc4; --muted: #b3a185; --line: #3b3124; --rubric: #e0605a; --lapis: #8aa6f0; --gold: #d3b26a; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: 1.16rem; line-height: 1.5; }
a { color: inherit; text-decoration-color: var(--rubric); text-underline-offset: 3px; }

.top { position: absolute; inset: 0 0 auto 0; z-index: 3; display: flex; justify-content: space-between; align-items: center;
  padding: 18px clamp(16px, 4vw, 48px); }
.mark { display: flex; align-items: center; gap: 10px; font-family: var(--caps); font-size: 1.35rem; text-decoration: none; letter-spacing: .03em; }
.mark span { color: var(--rubric); }
.back { font-family: var(--caps); text-decoration: none; color: var(--muted); }
.back:hover { color: var(--rubric); }

/* gold double frame around the whole stage, like a manuscript border */
.stage { position: relative; height: 100svh; min-height: 540px; padding: 74px clamp(12px, 3vw, 36px) 24px; }
.stage::before { content: ""; position: absolute; inset: 64px clamp(8px, 2vw, 24px) 14px; border: 3px double var(--gold); pointer-events: none; }
#braid { width: 100%; height: 100%; display: block; overflow: visible; }
.title { position: absolute; left: 50%; bottom: clamp(30px, 6vh, 60px); transform: translateX(-50%); text-align: center;
  background: var(--bg); padding: 6px 26px 10px; pointer-events: none; white-space: nowrap; }
.title h1 { font-family: var(--caps); font-weight: 500; font-size: clamp(2.6rem, 8vw, 5.4rem); line-height: 1; letter-spacing: .04em; }
.title h1 span { color: var(--rubric); }
.title p { font-family: var(--caps); color: var(--muted); font-size: clamp(.8rem, 1.6vw, 1rem); letter-spacing: .1em; }

#braid .strand { fill: none; stroke-width: 3.2; stroke-linecap: round; transition: opacity .3s, stroke-width .3s; }
#braid .ray { stroke-width: 2.4; transition: opacity .3s; }
#braid .word { font-family: var(--caps); font-size: 17px; letter-spacing: .06em; transition: opacity .3s; }
#braid .numeral { font-family: var(--caps); fill: var(--muted); font-size: 15px; text-anchor: middle; }
#braid .lane { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; }
#braid .prism { fill: var(--bg); stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
#braid .beam { stroke: var(--ink); stroke-width: 3; }
#braid.tracing .strand:not(.lit), #braid.tracing .ray:not(.lit), #braid.tracing .word:not(.lit) { opacity: .15; }
#braid .strand.lit { stroke-width: 5; }
@media (prefers-reduced-motion: no-preference) {
  #braid .draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: ink 2.6s cubic-bezier(.5, 0, .3, 1) forwards; animation-delay: var(--d, 0s); }
  @keyframes ink { to { stroke-dashoffset: 0; } }
  #braid .word { opacity: 0; animation: fade 1s ease forwards; animation-delay: 2.6s; }
  @keyframes fade { to { opacity: 1; } }
}

main > section:not(.stage) { max-width: 1040px; margin: 0 auto; padding-left: clamp(16px, 4vw, 40px); padding-right: clamp(16px, 4vw, 40px); }
.folios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 22px; padding-top: 64px; padding-bottom: 40px; }
.folio { text-align: center; padding: 26px 18px 22px; border: 1px solid var(--line); border-top: 3px solid var(--rubric); }
.emblem { width: 128px; height: 128px; margin-bottom: 8px; transition: transform .8s; }
.folio:hover .emblem { transform: rotate(-6deg) scale(1.05); }
.f-ink { fill: var(--ink); } .l-bg { stroke: var(--bg); stroke-width: 2; fill: none; }
.d-gold, .c-gold { fill: var(--gold); } .c-rub { fill: none; stroke: var(--rubric); stroke-width: 1.8; }
.s-ink, .l-ink { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.l-gold { stroke: var(--gold); stroke-width: 2; } .l-lapis { fill: none; stroke: var(--lapis); stroke-width: 2.4; stroke-linecap: round; }
.l-rub { fill: none; stroke: var(--rubric); stroke-width: 2.4; }
.code { font-family: var(--caps); color: var(--rubric); letter-spacing: .1em; font-size: .9rem; }
.folio h2 { font-family: var(--caps); font-weight: 500; font-size: 2rem; line-height: 1.1; margin: 2px 0 10px; }
.folio ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; color: var(--muted); font-style: italic; }
.folio li + li::before { content: "·"; margin-right: 14px; color: var(--gold); font-style: normal; }

.path { padding-top: 24px; padding-bottom: 56px; }
.path ol { list-style: none; display: flex; justify-content: space-between; gap: 8px; position: relative; padding: 0 4px; }
.path ol::before { content: ""; position: absolute; left: 24px; right: 24px; top: 22px; border-top: 2px solid var(--gold); }
.path li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; text-align: center; }
.path b { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 2px solid var(--rubric);
  font-family: var(--caps); color: var(--rubric); font-weight: 600; }
.path li:last-child b { border-style: dashed; }
.path span { font-family: var(--caps); font-size: .95rem; color: var(--muted); }
.caveat { margin-top: 30px; text-align: center; font-size: .98rem; color: var(--muted); font-style: italic; }

.foot { padding: 24px clamp(16px, 4vw, 48px); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--caps); font-size: .95rem; color: var(--muted); border-top: 3px double var(--gold); }
.sibs { display: flex; gap: 16px; flex-wrap: wrap; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--rubric); }
@media (max-width: 600px) {
  .title { white-space: normal; width: calc(100% - 40px); padding: 6px 10px 10px; }
  .title p { letter-spacing: .04em; }
  .path span { font-size: .8rem; }
}