/* Nine Star Ki: what the day page and the chart page share, one source for both (site-src/pages/nine-star-ki.html and
 nine-star-ki-chart.html): the three stars as pillars, the square with its trigrams, and how the squares come in */
:root { --col: var(--col-wide); --figures: "Castellum Figures", var(--serif); --seal-red: #d53c37; }
/* Carolina’s own figures for the large numbers, a trial until they are drawn into Castellum (site-src/castellum-figures.py) */
@font-face { font-family: "Castellum Figures"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/CastellumFigures.woff2") format("woff2"); unicode-range: U+0030-0039; }
/* the squares come in a cell at a time, 1 to 9: the nine squares together, so they twinkle */
.square > i > *, .msq i > * { transition: opacity .45s ease var(--d, 0s); }
.square > i { transition: background-color .45s ease var(--d, 0s); }
.dim > i > *, .dim .msq > i > * { opacity: 0; }
.dim > i.c { background-color: var(--paper); }
/* each square one box, divided by two lines across and two down */
.square, .msq { border: 1px solid var(--tan); }
.square > i, .msq i { border: 0 solid var(--tan); border-width: 0 1px 1px 0; }
.square > i:nth-child(3n), .msq i:nth-child(3n) { border-right-width: 0; }
.square > i:nth-child(n+7), .msq i:nth-child(n+7) { border-bottom-width: 0; }
.stars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.pillar { border: 1px solid var(--ochre); padding: 16px 16px 18px; min-width: 0; display: flex; flex-direction: column; aspect-ratio: 5 / 8; }   /* tall and thin, the room inside empty */
.pillar small { display: block; font: var(--caps); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 2.25px; color: var(--orange); }
.pillar .head { display: block; }
/* the number in the seals’ red (the seal shapes behind it, tried Nov 2 and left out, can be drawn again with site-src/nine-star-seals.py) */
.pillar .head .n { display: block; margin: 14px 0 6px; font: 400 clamp(52px, 5.4vw, 60px)/1 var(--figures); color: var(--seal-red); }
.pillar p { font: var(--small); margin-top: auto; height: calc(6 * 1.5em); }   /* every note hung from one line, room for six lines */
/* the square: nine cells read like a page, the center marked, the numbers in ochre */
/* the day’s and a chart’s alike: no box, the square at the top, its title and the text under it */
.sqin { width: 264px; }
.sqside h3 { font: var(--caps); letter-spacing: .15em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }   /* over the square, as the nine squares’ names */
.sqside p { font: var(--read); margin-top: 4px; }
.sqside .square + p { margin-top: 14px; }
.sqside p + p { margin-top: 10px; }
.square { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.square > i { aspect-ratio: 1; background: var(--paper); display: grid; place-items: center; font: var(--date); font-family: var(--figures); line-height: 1; font-style: normal; position: relative; color: var(--ochre-dark); }
.square > i:has(.lbl) { padding-bottom: 14px; gap: 4px; }   /* the number and its trigram above its label */
/* the center in orange, its number in paper */
.square > i.c { background: var(--orange); color: var(--paper); }
.square > i.c .lbl { color: var(--paper); }
.square > i.y, .square > i.y .lbl { color: var(--orange); }   /* the year number and its label */
.square > i .v { display: block; }
/* each number with its own trigram under it, as in the List of the Nine Stars (the 5 with the taiji): they travel together */
.square > i { align-content: center; gap: 6px; }
.square i .tg { width: 24px; gap: 2px; }
.square i .tg i { height: 3px; background: currentColor; }
.square i .tg i.yin { background: linear-gradient(to right, currentColor 42%, transparent 42% 58%, currentColor 58%); }
.square i .tj { display: block; width: 17px; height: 17px; }
.square > i .lbl { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; font: var(--micro); line-height: 1; letter-spacing: .15em; text-transform: uppercase; color: var(--ochre-dark); white-space: nowrap; }
.section p.intro { max-width: var(--col-text); margin-top: 10px; font: var(--read); }
.section h2 .for { font: var(--term); color: var(--ochre-dark); margin-left: .45em; }
.nw { white-space: nowrap; }
@media (max-width: 900px) { .sqin { width: auto; max-width: var(--col-text); } .sqin .square { width: min(100%, 420px); }   /* the day’s square and a chart’s the width of the text above on a phone, no wider than 420px; their text the full width */
                            .square > i { font-size: 40px; gap: 9px; } .square i .tg { width: 34px; gap: 3px; } .square i .tg i { height: 4px; } .square i .tj { width: 24px; height: 24px; }   /* in the larger cells, larger numbers and trigrams */
                            .square > i:has(.lbl) { padding-bottom: 18px; gap: 6px; } .square > i .lbl { bottom: 8px; } }
@media (max-width: 760px) { .stars { gap: 0 8px; grid-template-rows: auto auto auto 1fr; }
                            .pillar { aspect-ratio: auto; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding: 12px 10px 14px; }
                            .pillar small { grid-row: 1; } .pillar .head { grid-row: 2; } .pillar .zh { grid-row: 3; } .pillar p { grid-row: 4; height: auto; margin-top: 0; padding-top: 20px; } }
@media (max-width: 600px) { .stars { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 10px; }
                            .pillar { display: flex; grid-row: auto; padding: 14px 16px 16px; } .pillar p { padding-top: 16px; } }