/* Chrysanthemum Calendar. The type system, colors, and parts settled in design/look-and-feel.html
   and design/site.css, made responsive, with the motion that brings each page in. */

/* Castellum, 101 Editions’ own serif (Oct 24, 2026), in place of ITC Mendoza, as in the app */
@font-face { font-family: "Castellum"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Castellum-Book.woff2") format("woff2"); }
@font-face { font-family: "Castellum"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/Castellum-BookItalic.woff2") format("woff2"); }
/* the same italic for the site’s <i> (oblique 12deg, made for Commissioner), so a title set in Castellum is in Castellum’s own italic */
@font-face { font-family: "Castellum"; font-weight: 400; font-style: oblique 12deg; font-display: swap; src: url("../fonts/Castellum-BookItalic.woff2") format("woff2"); }
/* Chinese characters: Huninn 粉圓 by justfont, monoline with rounded ends (SIL Open Font
   License), trimmed to the characters the site uses by site-src/build.py */
@font-face { font-family: "Huninn"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Huninn-cjk.woff2") format("woff2");
             unicode-range: U+2E80-9FFF, U+F900-FAFF, U+FF00-FFEF; }
@font-face { font-family: "Commissioner"; font-weight: 100 900; font-style: oblique 0deg 12deg; font-display: swap; src: url("../fonts/Commissioner-latin.woff2") format("woff2"); }

:root {
  --orange: #c55c34;
  --ochre: #d5b440;
  --ochre-dark: #a07f17;
  --red: #9e0000;      /* hover */
  --ink: #2b211b;
  --ink-deep: #100c0a;   /* the phone menu: the text color looks brown over a whole screen, so a deeper, less yellow one */
  --tan: #e6d3ae;
  --tan-pale: #f3ead3;
  --seal: #d53c37;     /* the red of the seals (img/seal.svg, img/zodiac) */
  --paper: #fdfbf0;

  --serif: "Castellum", "Huninn", Georgia, serif;
  --sans: "Commissioner", "Huninn", "Helvetica Neue", Arial, sans-serif;
  --cjk: "Huninn", "Yuanti TC", "Hiragino Maru Gothic ProN", "PingFang TC", sans-serif;

  --title: 400 clamp(42px, 6.4vw, 72px)/1 var(--serif);
  --page: 400 clamp(42px, 4.6vw, 48px)/1 var(--serif);   /* the display sizes grow on wide screens and hold their size on phones */
  --date: 400 clamp(28px, 3.2vw, 32px)/1.25 var(--serif);
  --head: 400 clamp(22px, 2.4vw, 25px)/1.2 var(--serif);   /* 1.2, not solid: room between the lines when a heading wraps (Carolina, Oct 19, 2026) */
  --term: 400 18px/1.25 var(--serif);    /* glossary terms, line statements, the judgment, the phone menu */
  --note: italic 400 15px/1.5 var(--serif);   /* tracked .025em wherever it is used */
  --read: 400 14px/1.5 var(--sans);     /* all running text, and the page’s default */
  --pinyin: 400 13px/1.5 var(--sans);   /* tracked .025em */
  --small: 400 12px/1.5 var(--sans);
  --caps: 400 11px/1.5 var(--sans);     /* tracked .15em, all capitals */
  --micro: 400 9px/1.5 var(--sans);     /* the tiniest capitals, tracked .15em */
  --gray: color-mix(in srgb, var(--ink) 45%, var(--paper));   /* not yet built, or done */
  /* three amounts of tracking only: .15em on capitals, .025em on the italic and the pinyin, none
     elsewhere. Grayed means a tint of the usual color: --gray is ink at 45% on paper.
     Tints come in three amounts only: 20%, 45%, 55%.
     A line of capitals in 1.5 leading stands 2.75px taller above and below than it did
     in leading 1, so the pills, buttons, and heads around them give back 2.75px each side. */

  --ease: cubic-bezier(.16, .84, .3, 1);
  --gutter: 36px;
  --col-text: 700px;   /* the measure for text and lists, the left column of Consult the Yijing */
  --col-wide: 836px;   /* the left column of Today, kept by Today and The Hexagrams */
  --col: var(--col-text);
  --stick: 64px;       /* the height of the nav band once the page has scrolled (80px less the 16px that slide away) */
}

* { box-sizing: border-box; }
html { background: var(--tan-pale); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--tan-pale); color: var(--ink); font: var(--read); font-synthesis: none; text-rendering: optimizeLegibility; }
b, strong { font-weight: 400; }
i { font-style: oblique 12deg; }
.note i, .judge i { font-style: normal; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p + p { margin-top: 10px; }
img, svg { max-width: 100%; }
/* italic in the sans: Commissioner has a slant axis, not an italic face. Desktop Chrome slants it
   for italic by itself; Safari on the iPhone does not, so the slant is asked for directly. */
i, em { font-variation-settings: "slnt" -12; }
.caps { font: var(--caps); letter-spacing: .15em; text-transform: uppercase; }
.arw { width: 1.15em; height: 1.15em; fill: currentColor; vertical-align: -.22em; flex: none; transition: transform .35s var(--ease); }
a:hover .arw:has(> use[href="#arrow-right"]), button:hover .arw:has(> use[href="#arrow-right"]) { transform: translateX(3px); }
a:hover .arw:has(> use[href="#arrow-left"]) { transform: translateX(-3px); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
:focus-visible { outline: 1.5px solid var(--red); outline-offset: 2px; }

/* ---------------------------------------------------------------- the page */
.site { max-width: 1120px; margin: 0 auto; background: var(--paper); padding: 0 var(--gutter) 28px; min-height: 100vh; overflow-x: clip; }
.rule { border-top: 1.5px solid var(--orange); }

/* header */
/* the nav stays at the top of the window, on a band of paper the width of the page. Pointing at a
   bar slides a paper panel down behind its list, so the list never sits over the page's text. */
html { scroll-padding-top: var(--stick); }
.navwrap { position: sticky; top: 0; z-index: 20; background: var(--paper); margin: 0 calc(var(--gutter) * -1); padding: 28px var(--gutter) 14px;
           transition: transform .5s var(--ease); }
.navwrap.thin { transform: translateY(-16px); }   /* once scrolled: a thinner band, its top margin slid away */
.navwrap.away { transform: translateY(-100%); }   /* past the first third, while scrolling down: gone, back at any scroll up */
.navwrap .drop { position: absolute; left: 0; right: 0; top: 100%; height: 117px; background: var(--paper); pointer-events: none;
                 clip-path: inset(0 0 100% 0); transition: clip-path .45s var(--ease) .05s; }   /* the longest list and a line and a half more */
.navwrap:has(.nb:hover > ul, .nb:focus-within > ul) .drop { clip-path: inset(0); transition: clip-path .4s var(--ease); }
.nav { position: relative; display: flex; justify-content: flex-end; gap: 22px; }
.nav .nb { flex: 0 1 156px; position: relative; }
.nav .nb > a { display: block; border-top: 9px solid var(--tan); padding-top: 11px; text-decoration: none; transition: border-color .35s ease, color .35s ease; }
.nav .nb:hover > a, .nav .nb:focus-within > a { border-top-color: var(--red); }
.nav .nb.here > a { border-top-color: var(--orange); }
/* the pages under each bar, shown when it is pointed at: in the small text of the footer's lists */
.nav .nb ul { position: absolute; left: 0; right: 0; top: 100%; list-style: none; margin: 0; padding: 10px 0 0; font: var(--small); letter-spacing: 0; text-transform: none;
              opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .3s ease, transform .4s var(--ease), visibility 0s linear .4s; }
.nav .nb:hover ul, .nav .nb:focus-within ul { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .4s var(--ease), visibility 0s; }
.nav .nb li { margin-bottom: 7px; }
.nav .nb li a { text-decoration: none; transition: color .3s ease; }
.nav .nb li a:hover { color: var(--red); }
.nav .nb .soon { color: var(--gray); }   /* not yet built: grayed */
.masthead { display: flex; justify-content: space-between; align-items: end; gap: 16px 24px; margin: 124px 0 0; flex-wrap: wrap; }   /* room for the lists under the bars (with the band's 14px) */
.sitename { font: var(--head); color: var(--orange); text-decoration: none; transition: color .3s ease; }   /* the Head style: 25, 22 on phones */
.sitename:hover { color: var(--red); }
.badge { display: block; width: 120px; height: 40px; color: var(--ink); }   /* Apple’s badge, Carolina’s outlined drawing, in the page’s ink */
.badge svg { display: block; width: 100%; height: 100%; overflow: visible; }   /* the outline runs along the drawing’s edge: unclipped, so it is the same weight all round */

/* The three apps, above the footer on every page: the head at the left, a card for each app at the right */
.apps { margin-top: 64px; border-top: 1.5px solid var(--orange); padding-top: 36px; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px 40px; align-items: start; }
.apps h2 { font: var(--date); margin: -4px 0 0; }   /* one size down the scale from the Page size (Carolina, Nov 2) */
.apps .sub { font: var(--note); letter-spacing: .025em; margin: 6px 0 0; }
.apps .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.apps .card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--ochre); padding: 18px 18px 16px; color: var(--ink); text-decoration: none; }
.apps .card > * { transition: opacity .35s ease; }
.apps .card.later > * { opacity: .4; }   /* not out yet: tinted back */
.apps .ic { display: block; width: 72px; height: 72px; border-radius: 22.37%; margin-bottom: 18px; }
.apps .kick { display: block; font: var(--caps); letter-spacing: .15em; text-transform: uppercase; color: var(--ochre-dark); }
.apps .name { font: var(--head); margin: 2px 0 10px; }   /* the app's name, one size down from Date */
.apps .card p { font: var(--small); margin: 0 0 16px; flex: 1; }
/* pointing at a card: the outline stays, its contents tint back, and Apple's badge appears in its center */
.apps .card .badge { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(calc((100% - 36px) * .9), 160px); height: auto; aspect-ratio: 119.66 / 40; background: var(--paper); border-radius: 13%/39%; opacity: 0; pointer-events: none; }   /* 90% as wide as the card's text and never wider than 160px, so it sits small inside the card on a phone, on a solid ground so it reads over the tinted text */
.apps a.card:is(:hover, :focus-visible) > * { opacity: .15; }
.apps a.card:is(:hover, :focus-visible) > .badge { opacity: 1; }
.apps .soon { color: var(--orange); }   /* in full orange, then tinted back with the rest of the card; Available now in full */
.apps + .footrow { margin-top: 56px; }
@media (max-width: 900px) { .apps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 660px) {
  .apps .cards { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 12px; }   /* stacked, every card as tall as the tallest */
  .apps .card { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 0 16px; padding: 14px; }   /* on phones each icon at the left of its text, the room left over under the text */
  .apps .ic { width: 64px; height: 64px; margin: 0; grid-row: span 4; }
  .apps .name { font: var(--term); margin: 0 0 6px; }
  .apps .card p { margin-bottom: 8px; }
}
.pagehead { margin: 8px 0 0; padding-bottom: 22px; }   /* close under the site name */
.pagehead h1 { font: var(--page); }
.pagehead .zh { margin-top: 6px; }
.pagehead p.lede { margin-top: 14px; max-width: var(--col); font: var(--note); letter-spacing: .025em; }   /* in the italic of the note under Today’s title */
.pagehead p.lede i, .note i, .ht-judge i, .ht-line i, .judge i, .phrase i, .demo i { font-style: normal; }   /* inside italic text, a title in italic is set roman */

/* the Login link, at the right above the Chinese switch */
.loginrow { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.loginrow .dot { margin: 0 .3em; }
.login { color: var(--orange); text-decoration: none; transition: color .3s ease; }
.login:hover { color: var(--red); }
span.login { color: var(--ink); }   /* logged in: the name in ink, Log out the link */
span.login:hover { color: var(--ink); }
.login .arw, .menu-login .arw { margin-right: .5em; }
.login .who + a, .menu-login .who + a { margin-left: .6em; }
span.login a { color: var(--orange); text-decoration: none; transition: color .3s ease; }
span.login a:hover { color: var(--red); }
.login .who { font: var(--small); letter-spacing: 0; text-transform: none; }   /* in the small text of the pillar dates */
.menu-login .who { font: var(--small); color: var(--paper); }
span.login a.who { color: var(--ink); }   /* the name leads to the account; in ink until pointed at */
span.login a.who:hover { color: var(--orange); }
.menu-login a.who { font: var(--small); letter-spacing: 0; text-transform: none; color: var(--paper); }
.menu-login a.who:hover { color: var(--orange); }
.pagehead { padding-bottom: 12px; }

/* the bar under a page name: jump links and the Chinese switch */
.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; padding: 11px 0; border-top: 1.5px solid var(--orange); border-bottom: 1.5px solid var(--orange); flex-wrap: wrap; }
.bar nav { display: flex; gap: 10px 24px; flex-wrap: wrap; }
.bar nav a { text-decoration: none; color: var(--orange); transition: color .3s ease; }
.bar nav a:hover { color: var(--red); }
.moonbar { color: var(--orange); }   /* the lunar date and the year, as under Today’s title */
.moonbar .zh.inline { color: var(--ochre-dark); }
.moonline .zh.inline, .moonbar .zh.inline { white-space: nowrap; }   /* the year’s pinyin and characters move to the next line together */

/* the Chinese switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font: var(--caps); letter-spacing: .15em; text-transform: uppercase; color: var(--ink); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch i { width: 38px; height: 22px; border-radius: 11px; background: var(--tan); position: relative; transition: background .3s ease; font-style: normal; flex: none; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); transition: left .35s var(--ease); }
.switch input:checked + i { background: var(--orange); }
.switch input:checked + i::after { left: 19px; }
.switch input:focus-visible + i { outline: 1.5px solid var(--red); outline-offset: 2px; }
.zh { display: none; font: var(--pinyin); color: var(--ochre-dark); letter-spacing: .025em; text-transform: none; word-break: keep-all; }   /* a run of characters never splits */
body.show-zh .zh { display: block; }
body.show-zh span.zh.inline { display: inline; }

/* sections of a long page */
.section { padding: 34px 0 10px; scroll-margin-top: 16px; }
.section > h2, .section > .gridhead > h2 { font: var(--date); }
.section > p.intro { max-width: var(--col); margin-top: 10px; font: var(--read); }
.lab { display: block; font: var(--caps); letter-spacing: .15em; text-transform: uppercase; color: var(--orange); margin-bottom: 4.25px; }
.head { font: var(--head); }
.sub { display: block; margin-top: 4px; }
.runin { font: var(--caps); letter-spacing: .15em; text-transform: uppercase; margin-right: 4px; }
.lists .sub:has(.runin) { margin-top: 10px; }
.subhead { display: block; font: var(--caps); letter-spacing: .15em; text-transform: uppercase; color: var(--orange); margin: 23.25px 0 5.25px; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* an accordion row */
.acc { border-top: 1px solid var(--tan); margin-top: 16px; max-width: var(--col); }
.acc details { border-bottom: 1px solid var(--tan); scroll-margin-top: 16px; }
.acc summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 12px 2px 11px 4px; cursor: pointer; }   /* set in from the ends of the rules, as the charts: 4px at the left, 2px at the right */
.acc summary::-webkit-details-marker { display: none; }
.acc summary .head { transition: color .3s ease; }
.acc summary:hover .head { color: var(--red); }
.acc summary .sign { width: 22px; height: 22px; color: var(--orange); transition: transform .45s var(--ease); align-self: center; transform: rotate(180deg); }
.acc details[open] summary .sign { transform: none; }   /* caret down when closed, up when open */
.acc .row { display: flex; gap: 6px 14px; align-items: baseline; flex-wrap: wrap; }
.acc .row .when { margin-left: auto; }
.acc details[open] > summary { padding-bottom: 0; }
.acc .body { padding: 2px 2px 18px 4px; }   /* the pinyin sits right under the name, as on Today */
.today-tag { display: inline-block; font: var(--caps); letter-spacing: .15em; text-transform: uppercase; color: var(--paper); background: var(--orange); padding: 1.25px 10px .25px 11px; border-radius: 999px; white-space: nowrap; }

/* rating dots */
.dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--orange); font-style: normal; }
.dots i.on { background: var(--orange); }

/* tables */
table.grid { border-collapse: collapse; width: 100%; margin-top: 14px; }
table.grid th { text-align: left; font: var(--caps); letter-spacing: .15em; text-transform: uppercase; color: var(--orange); padding: 0 12px 5.25px 0; border-bottom: 1.5px solid var(--orange); white-space: nowrap; }
table.grid td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--tan); vertical-align: baseline; }
table.grid :where(th, td):first-child { padding-left: 4px; } table.grid :where(th, td):last-child { padding-right: 2px; }   /* the text set in from the ends of the rules: 4px at the left, where it shows, 2px at the ragged right (Carolina, Nov 4, 2026); a page’s own padding still wins */
table.grid td .zh { display: inline; margin-left: 6px; white-space: nowrap; }   /* a name’s pinyin and characters stay together */
body:not(.show-zh) table.grid td .zh { display: none; }

/* hexagram drawings */
.hex { --u: 104px; display: grid; width: calc(var(--u) * .8); gap: calc(var(--u) * .05); flex: none; }
.hex i { height: calc(var(--u) * .073); background: var(--ochre); font-style: normal; }
.hex i.yin { background: linear-gradient(to right, var(--ochre) 44%, transparent 44% 56%, var(--ochre) 56%); }
.hex i.chg { background: var(--ochre-dark); }
.hex i.yin.chg { background: linear-gradient(to right, var(--ochre-dark) 44%, transparent 44% 56%, var(--ochre-dark) 56%); }
.hnum { display: block; font: var(--caps); letter-spacing: .15em; text-transform: uppercase; color: var(--orange); margin-bottom: 4px; }
.htitle { display: block; font: var(--head); }

/* buttons: plain on the website */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; color: var(--orange); background: none; font: var(--caps); letter-spacing: .15em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color .3s ease; }
.btn:hover, .btn:focus-visible { color: var(--red); }
.btn .arw { width: 13px; height: 13px; }
.btn.more { margin-left: 4px; vertical-align: baseline; }
.lock { font: var(--caps); letter-spacing: .15em; text-transform: uppercase; color: var(--ochre-dark); }

/* the hexagram text, as a sheet over the page */
dialog.hexdlg { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 0; border-top: 9px solid var(--orange); background: var(--paper); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
/* the welcome offer on a returning visitor's third day: the reading pop-up, with a button */
.offerdlg .hex { --u: 80px; margin: 14px 0 4px; }
.offerdlg .go { display: block; margin-top: 22px; border: 1px solid var(--orange); border-radius: 4px; background: var(--orange); color: var(--paper); padding: 13px 22px 12px; text-align: center; text-decoration: none;
                font: var(--caps); letter-spacing: .15em; text-transform: uppercase; transition: background-color .3s ease, border-color .3s ease; }
.offerdlg .go:hover { background: var(--red); border-color: var(--red); }
dialog.hexdlg::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.hexdlg .in { padding: 26px 30px 32px; outline: none; }
.ht-top { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.ht-close { background: none; border: 0; padding: 2px; margin: -2px -4px 0 0; cursor: pointer; color: var(--orange); line-height: 0; transition: color .3s ease, transform .45s var(--ease); }
.ht-close .arw { width: 26px; height: 26px; }
.ht-close:hover { color: var(--red); transform: rotate(90deg); }
.ht-title { font: var(--date); margin-top: 4px; }
.ht-judge { font: var(--note); letter-spacing: .025em; margin: 12px 0 0; }
.ht-sec { margin-top: 20px; }
.ht-sec p { font: var(--read); }
.ht-sec p.ht-line { font: var(--term); margin-bottom: 6px; }   /* as the line statements on The Hexagrams */
.ht-sec .lab { margin-bottom: 5px; }
.ht-sec p + p { margin-top: 8px; }
.ht-src { font: var(--small); color: var(--gray); margin-top: 24px; border-top: 1px solid var(--tan); padding-top: 10px; }
.ht-src a { color: var(--orange); text-decoration: none; white-space: nowrap; }
.ht-src a:hover { color: var(--red); }
.ht-src a.book, .src a.book { color: inherit; white-space: normal; }   /* the book’s title, as in the footer */
.ht-src a.book:hover, .src a.book:hover { color: var(--red); }
/* the credit under a hexagram’s text in gray, as in the app; its links keep their color */
.ht-draw { margin-top: 16px; }

/* the Hexagram Key: on The Hexagrams, and closed at the top of each hexagram’s own page */
/* the 64: today’s two tinted and labeled; the one being read outlined in orange */
.grid64 { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin-top: 18px; max-width: 640px; }
.grid64 a { aspect-ratio: 1.15; }   /* the rest as the key's boxes, below */
.grid64 a .lbl { display: block; font: var(--micro); letter-spacing: .15em; text-transform: uppercase; color: var(--orange); margin-top: 9px; line-height: 1.25; }
.grid64 a:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.grid64 a.today { background: var(--tan-pale); border-color: var(--tan-pale); }
.grid64 a.shown { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.grid64 a.locked { color: var(--tan); border-color: var(--tan-pale); }
.grid64 a.locked:hover { color: var(--ochre-dark); border-color: var(--tan); transform: none; }
/* the Hexagram Key: the upper trigram across the top,
   the lower trigram down the side. On a phone held upright it is too fine to read, so there
   the plain grid of 64, in order, six across, takes its place. */
:root { --lab: 76px; --kg: 6px; }   /* the Key’s column of trigram names, and the gap between its boxes */
.hkey { display: grid; grid-template-columns: var(--lab) repeat(8, minmax(0, 1fr)); gap: var(--kg); margin-top: 15px; max-width: 760px; }   /* as near its head as a section head to its text */
.hkey .lab-up { grid-column: 2 / -1; font: var(--micro); letter-spacing: .15em; text-transform: uppercase; color: var(--ochre-dark); }
.hkey .lab-low { font: var(--micro); letter-spacing: .15em; text-transform: uppercase; color: var(--ochre-dark); text-align: right; align-self: end; padding-bottom: 4px; padding-right: 8px; }
.hkey .colhead, .hkey .rowhead { display: flex; flex-direction: column; gap: 6px; }
.hkey .colhead { justify-content: flex-end; padding-bottom: 4px; }
.hkey .rowhead { justify-content: center; align-items: flex-end; text-align: right; padding-right: 8px; }
.tg { display: grid; gap: 3px; width: 34px; }
.tg i { display: block; height: 5px; background: var(--ochre); }
.tg i.yin { background: linear-gradient(to right, var(--ochre) 42%, transparent 42% 58%, var(--ochre) 58%); }
.tname { font: var(--small); line-height: 1.1; white-space: nowrap; }
.tname .tzh { margin-left: 4px; font-weight: 400; color: var(--ochre-dark); font-family: var(--cjk), var(--sans); }
body:not(.show-zh) .tname .tzh { display: none; }
.hkey a, .grid64 a { border: 1px solid var(--tan); background: none; font: 400 22px/1 var(--serif); color: var(--ink); cursor: pointer; border-radius: 3px; padding: 0; min-width: 0; box-sizing: border-box; text-decoration: none;
                 display: flex; flex-direction: column; align-items: center; justify-content: center;
                 transition: border-color .35s ease, box-shadow .35s ease, color .3s ease, background-color .3s ease, transform .4s var(--ease); }
.hkey a { aspect-ratio: 1.1; }
.hkey a .lbl { display: block; font: var(--micro); letter-spacing: .15em; text-transform: uppercase; color: var(--orange); margin-top: 6px; line-height: 1.25; text-align: center; }
.hkey a:hover, .hkey a.hot { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.hkey a.today { background: var(--tan-pale); border-color: var(--tan-pale); }
.hkey a.shown { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.hkey a.locked { color: var(--tan); border-color: var(--tan-pale); }
.hkey a.locked:hover, .hkey a.locked.hot { color: var(--ochre-dark); border-color: var(--tan); transform: none; }
/* 1–64 in order, small, for finding a number; it stays when the key is closed */
.nums { display: flex; flex-wrap: wrap; gap: 2px 1px; margin: 14px 0 0 calc(var(--lab) + var(--kg)); max-width: calc(760px - var(--lab) - var(--kg)); }   /* flush left with the boxes, no wider than they are */
.nums a { font: var(--small); line-height: 1; font-variant-numeric: tabular-nums; min-width: 22px; padding: 5px 2px 4px; border: 0; border-radius: 2px; background: none; cursor: pointer; text-align: center; text-decoration: none; box-sizing: border-box;
               color: color-mix(in srgb, var(--ochre-dark) 55%, var(--paper)); transition: color .25s ease, background-color .25s ease, box-shadow .25s ease; }
.nums a:hover, .nums a.hot { color: var(--red); background: var(--tan-pale); }
.nums a.shown { box-shadow: inset 0 0 0 1px var(--orange); }
.nums a.today { color: var(--orange); }   /* today’s two hexagrams, always, whether or not one is being read */
.nums a.today:hover, .nums a.today.hot { color: var(--red); }
.t-all { display: none; }
.grid64 { display: none; }
@media (max-width: 599px) {
  .hkey, .t-key { display: none; }
  .nums { margin-left: 0; }   /* the row of numbers stays on phones, above the grid of 64, which has no names column */
  .t-all { display: inline; }
  .grid64 { display: grid; }
}
@media (min-width: 600px) and (max-width: 860px) {
  :root { --lab: 58px; --kg: 5px; }
  .hkey a { font-size: 18px; aspect-ratio: 1; }
  .tg { width: 26px; gap: 2px; } .tg i { height: 4px; }
  .tname { font-size: 9px; } .tname .tzh { display: none; }
  .hkey .rowhead, .hkey .lab-low { padding-right: 6px; }
}
@media (min-width: 600px) and (max-width: 700px) { .hkey a .lbl { display: none; } }   /* only where the boxes are too small for Daily and Lunar */
/* the grid opens and closes like the accordions; the choice is remembered in this browser */
.gridhead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; max-width: 760px; }
@media (max-width: 599px) { .gridhead { max-width: 640px; } .gridnote { margin-left: 0; } }   /* phones: under the grid of 64, which has no names column */
.gridtoggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; transition: color .3s ease; }
.gridtoggle:hover, .gridtoggle:hover .sign { color: var(--red); }
.gridtoggle .sign { width: 18px; height: 18px; color: var(--orange); transition: transform .45s var(--ease), color .3s ease; }   /* the word in black, the caret in orange */
.gridtoggle[aria-expanded="false"] .sign { transform: rotate(180deg); }   /* caret up to close, down to open */
.gridbody { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--ease); }
.gridbody > div { min-height: 0; overflow: hidden; }
.gridbody.shut { grid-template-rows: 0fr; }
.gridbody.settled { display: block; }   /* open and at rest: as tall as the Key itself, so it follows the window as it resizes (Safari keeps a stale height otherwise) */
.gridnote { font: var(--small); margin: 12px 0 0 calc(var(--lab) + var(--kg)); min-height: 1.5em; }   /* flush left with the numbers above */
.gridnote a { color: var(--orange); text-decoration: none; }
.gridnote a:hover { color: var(--red); }

@media (max-width: 760px) {
  .grid64 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }   /* six across, like a calendar: the last row ends short */
  .grid64 a { font-size: 22px; aspect-ratio: 1; }
  .grid64 a .lbl { margin-top: 7px; }
}

/* the reading of a hexagram: under the grid on The Hexagrams, and on each hexagram’s own page */
.todaybar { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline; }
.todaybar .today a { color: inherit; text-decoration: none; transition: color .3s ease; }
.todaybar .today a, .bar .today a { white-space: nowrap; }   /* each of the day’s two hexagrams whole, its line number with it */
.todaybar .today a:hover { color: var(--red); }
.todaybar .today .plus { margin: 0 .35em; }
.todaybar .today .arw { width: 13px; height: 13px; color: var(--orange); vertical-align: -2px; margin: 0 1px; }
.todaybar .consult { color: var(--orange); text-decoration: none; transition: color .3s ease; }
.todaybar .consult:hover { color: var(--red); }
.reader { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; margin-top: 30px; padding-top: 30px; border-top: 1.5px solid var(--orange); scroll-margin-top: 12px; }
.reader .side { position: sticky; top: calc(var(--stick) + 24px); align-self: start; }
.reader .side .hex { --u: 150px; margin-bottom: 18px; }
.reader h2 { font: var(--date); }
.reader .nav2 { display: flex; gap: 22px; margin-top: 18px; }
.reader .nav2 a { text-decoration: none; color: var(--orange); display: inline-flex; gap: 8px; align-items: center; transition: color .3s ease; }
.reader .nav2 a:hover { color: var(--red); }
.reader .nav2 .arw { width: 22px; height: 22px; }
.reader .judge { font: var(--term); font-style: italic; letter-spacing: .025em; }
.reader .part { margin-top: 28px; }
.reader .part p { font: var(--read); }
.reader .line { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 16px; padding: 14px 10px; border-top: 1px solid var(--tan); }   /* every line’s text 10px in, so the tint of today’s or the cast line is exactly as wide as the rules above and below it */
.reader .line:last-child { border-bottom: 1px solid var(--tan); }
.reader .line .which { font: var(--caps); letter-spacing: .15em; text-transform: uppercase; padding-top: 5px; }
.reader .line .st { font: var(--term); margin-bottom: 6px; }   /* statements run to several lines: the Term size and leading */
.reader .line.today { background: var(--tan-pale); }
.reader .line.today .which { color: var(--orange); }
.reader .src { font: var(--small); color: var(--gray); margin-top: 30px; padding-top: 10px; border-top: 1px solid var(--tan); }
.reader .src a:not(.book) { color: var(--orange); text-decoration: none; }
.reader .src a:hover { color: var(--red); }
.reader .line.cast-line { background: var(--tan-pale); }
.reader .line.cast-line .which { color: var(--orange); }
@media (max-width: 760px) {
  .reader { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .reader .side { position: static; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 20px; align-items: start; }   /* the drawing and its label start at the same height, just under the line */
  .reader .side .hex { --u: 110px; grid-row: span 4; margin: 0; }
  .reader .line { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* footer */
/* Subscribe (Manage subscription, for a subscriber), at the right just above the footer’s line */
.footrow { display: flex; justify-content: flex-end; margin: 64px 0 10px; }
.foot { margin-top: 0; border-top: 1.5px solid var(--orange); display: flex; gap: 22px; flex-wrap: wrap; padding-bottom: 60px; }
.foot section { flex: 0 1 210px; border-top: 9px solid var(--orange); padding-top: 12px; }   /* wide enough for “Your Purple Star Chart (coming soon)” on one line */
.foot h4 { font: var(--caps); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 7.25px; }
.foot ul + h4 { margin-top: 21.25px; }   /* a second head in a column: more room above it than below */
.foot .soon { color: var(--gray); }   /* not yet built: grayed */
.foot .cs { white-space: nowrap; }
@media (max-width: 960px) { .foot .cs { display: none; } }   /* where the columns are too narrow for it on one line */
.foot ul { list-style: none; margin: 0; padding: 0; font: var(--small); }
.foot li { margin-bottom: 7px; }
.foot a { text-decoration: none; transition: color .3s ease; }
.foot a:hover { color: var(--red); }
/* the About box with the sun, on Today and in the footer */
.box { display: block; border: 1px solid var(--ochre); padding: 16px 14px; min-height: 120px; text-decoration: none; position: relative; transition: border-color .3s ease; }
.box span { display: block; margin-bottom: 1.5px; }
.box .sun { position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; color: var(--ochre); transition: transform 1.2s var(--ease); }
.box:hover .sun { transform: rotate(90deg); }   /* the sun turns a quarter on hover */
.motion .box .sun.u { opacity: 0; }
.motion .box .sun.u.in { animation: sun-in 1.6s var(--ease) calc(var(--d, 0ms) + 100ms) both; }   /* and turns into place as it arrives */
@keyframes sun-in { from { opacity: 0; transform: rotate(-135deg); } to { opacity: 1; transform: none; } }
.box:hover { border-color: var(--red); }
.copy { border-top: 1.5px solid var(--orange); padding-top: 12px; padding-bottom: 72px; font: var(--small); }   /* one run of text; a little more leading when it takes two lines */
.copy .egg { color: var(--orange); font-size: 11px; }   /* the wish, a size under the line it ends */
.copy .eggcap { font: 400 8px/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--orange); margin-left: .3em; white-space: nowrap; }   /* tiny capitals before the wish */   /* a wish at the very end, one of several, in the size of the line */
a.book { color: inherit; text-decoration: none; transition: color .3s ease; }
a.book:hover { color: var(--red); }

/* ---------------------------------------------------------------- the menu, on phones
   A panel slides in from the right with every page of the site, one to a line between thin
   rules; the three lines of the button turn into the X that closes it. */
.menu-btn { display: none; position: fixed; z-index: 40; top: calc(env(safe-area-inset-top, 0px) + 26px); right: 8px; width: 44px; height: 44px;
            border: 0; border-radius: 50%; padding: 0; cursor: pointer; background: var(--paper); transition: background-color .45s ease; }
.menu-btn i { position: absolute; left: 11px; width: 22px; height: 1.5px; background: var(--ink); border-radius: 1px;
              transition: transform .45s var(--ease), opacity .3s ease, background-color .45s ease, top .45s var(--ease); }
.menu-btn i:nth-child(1) { top: 15px; } .menu-btn i:nth-child(2) { top: 21.25px; } .menu-btn i:nth-child(3) { top: 27.5px; }
.menu-open .menu-btn { background: transparent; }
.menu-open .menu-btn i { background: var(--paper); }
.menu-open .menu-btn i:nth-child(1) { top: 21.25px; transform: rotate(45deg); }
.menu-open .menu-btn i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.menu-open .menu-btn i:nth-child(3) { top: 21.25px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 30; background: var(--ink-deep); color: var(--paper); overflow-y: auto; overscroll-behavior: contain;
        padding: calc(env(safe-area-inset-top, 0px) + 76px) calc(var(--gutter) * 2) 40px; transform: translateX(100%); visibility: hidden;   /* twice the page’s margin at the sides */
        transition: transform .55s var(--ease), visibility 0s linear .55s; }
.menu-open .menu { transform: none; visibility: visible; transition: transform .55s var(--ease), visibility 0s; }
/* each group under its head in orange, twice as much room above the head as below it */
.menu .mh { font: var(--caps); letter-spacing: .15em; text-transform: uppercase; color: var(--orange); margin: 25.25px 0 11.25px; }
.menu ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--paper) 20%, var(--ink-deep)); }
.menu li { border-bottom: 1px solid color-mix(in srgb, var(--paper) 20%, var(--ink-deep)); }
.menu li a, .menu li .soon { display: block; padding: 10px 0 9px; font: var(--term); color: var(--paper); text-decoration: none; transition: color .3s ease; }   /* the size of the glossary terms */
.menu li .soon { color: color-mix(in srgb, var(--paper) 45%, var(--ink-deep)); }   /* the menu’s gray: its paper at 45% */   /* not yet built: grayed */
.menu .cs { white-space: nowrap; }   /* on the narrowest phones it moves to the next line whole */
.menu li a.here { color: var(--orange); }
/* on the dark panel: white turns orange, orange turns a lighter orange, ochre turns orange */
.menu li a:hover, .menu-login a:hover { color: var(--orange); }
.menu li a.here:hover { color: color-mix(in srgb, var(--orange) 55%, var(--paper)); }
.menu-login { min-height: 14px; }   /* at the top, above the groups */
.menu-login a { font: var(--caps); letter-spacing: .15em; text-transform: uppercase; color: var(--ochre); text-decoration: none; }
.menu-login .dot { margin: 0 .3em; }
.motion .menu li, .motion .menu .mh, .motion .menu-login { opacity: 0; transform: translateX(24px); }
.motion.menu-open .menu li, .motion.menu-open .menu .mh, .motion.menu-open .menu-login { opacity: 1; transform: none; transition: opacity .6s ease calc(.12s + var(--k) * 45ms), transform .8s var(--ease) calc(.12s + var(--k) * 45ms); }
.menu-open, .menu-open body { overflow: hidden; }

/* ---------------------------------------------------------------- narrower windows */
@media (max-width: 760px) {
  :root { --gutter: 16px; --stick: 0px; }
  .navwrap { position: static; padding-top: 20px; padding-bottom: 0; }   /* on phones the menu button takes the nav's place */
  .nav { display: none !important; }
  .menu-btn { display: block; }
  .site { padding-bottom: 24px; }
  .nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
  .masthead { margin-top: 90px; }   /* on phones, the same space under the top line on every page */
  .foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 12px; }
  .acc .row .when { margin-left: 0; flex-basis: 100%; }
  .acc .row:has(.dots) .head { flex-basis: 100%; }   /* the dots on their own line under the name, the same in every row */
}
@media (max-width: 600px) {
  dialog.hexdlg { width: 100%; max-width: 100%; max-height: 88vh; margin: auto 0 0; }
  .hexdlg .in { padding: 20px 16px 32px; }
}

/* ---------------------------------------------------------------- motion
   Everything comes in once, softly, as it reaches the window: text rises into place,
   rules draw across, the lines of a hexagram are laid from the bottom up, and the boxes
   of a grid follow one another in reading order. The changing line keeps breathing.
   site.js adds .motion to <html> only when the visitor has not asked for less motion. */
.motion.pre .site { opacity: 0; }
.motion .u { opacity: 0; transform: translateY(14px); }
.motion .u.in { opacity: 1; transform: none;
  transition: opacity .9s var(--ease) var(--d, 0ms), transform 1.1s var(--ease) var(--d, 0ms); }
.motion .cell.u { transform: translateY(10px) scale(.985); }
.motion .cell.u.in { transform: none; transition: opacity .7s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }

.motion .rule.u, .motion .bar.u { opacity: 1; transform: none; }
.motion .rule.u { transform: scaleX(0); transform-origin: 0 50%; }
.motion .rule.u.in { transform: none; transition: transform 1.5s cubic-bezier(.7, 0, .2, 1) var(--d, 0ms); }
.motion .bar.u > * { opacity: 0; transform: translateY(8px); }
.motion .bar.u.in > * { opacity: 1; transform: none; transition: opacity .8s var(--ease) calc(var(--d, 0ms) + 250ms), transform 1s var(--ease) calc(var(--d, 0ms) + 250ms); }
.motion .bar.u { border-color: transparent; transition: border-color 1.2s ease var(--d, 0ms); }
.motion .bar.u.in { border-color: var(--orange); }

.motion .split.u { opacity: 1; transform: none; }
.motion .split .w { display: inline-block; }
.motion .split.u .w { opacity: 0; transform: translateY(.28em); }
.motion .split.u.in .w { opacity: 1; transform: none;
  transition: opacity 1s var(--ease) calc(var(--d, 0ms) + var(--i) * 120ms), transform 1.3s var(--ease) calc(var(--d, 0ms) + var(--i) * 120ms); }

.motion .hex.u { opacity: 1; transform: none; }
.motion .hex.u i { opacity: 0; transform: scaleX(.2); }
.motion .hex.u.in i { opacity: 1; transform: none;
  transition: opacity .5s ease calc(var(--d, 0ms) + var(--k) * 110ms), transform .8s var(--ease) calc(var(--d, 0ms) + var(--k) * 110ms); }

.motion .dots.u { opacity: 1; transform: none; }
.motion .dots.u i { opacity: 0; transform: scale(.2); }
.motion .dots.u.in i { opacity: 1; transform: none;
  transition: opacity .4s ease calc(var(--d, 0ms) + var(--k) * 90ms), transform .6s cubic-bezier(.3, 1.5, .5, 1) calc(var(--d, 0ms) + var(--k) * 90ms); }

.motion .moon.u { transform: rotate(-24deg) scale(.9); }
.motion .moon.u.in { transform: none; transition: opacity 1.4s ease var(--d, 0ms), transform 2s var(--ease) var(--d, 0ms); }

/* the changing line, alive */
.motion .hex:not(.u) i.chg { animation: breathe 4.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* a section opening in place */
.motion details[open] > .body { animation: open-in .7s var(--ease); }
@keyframes open-in { from { opacity: 0; transform: translateY(-6px); } }

/* a new day, swapped in place */
.motion .leaving { opacity: 0; transform: translateY(-6px); transition: opacity .28s ease, transform .28s ease; }

/* the sheet */
.motion dialog.hexdlg[open] { animation: sheet-in .6s var(--ease); }
.motion dialog.hexdlg[open]::backdrop { animation: fade-in .6s ease; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(28px); } }
@keyframes fade-in { from { opacity: 0; } }
@media (max-width: 600px) { @keyframes sheet-in { from { transform: translateY(100%); } } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- questions and answers
   FAQs + Support and Privacy: each part between thin rules, none under the last */
.faq { max-width: var(--col); margin-top: -16px; }
.faq .qa { padding: 16px 0 18px; border-bottom: 1px solid var(--tan); }
.faq .qa:last-child { border-bottom: 0; }
.faq h2 { font: var(--head); text-wrap: pretty; }   /* a question runs the full line before it wraps, not balanced like a heading, and never leaves one word alone */
.faq .qa h2 + p { margin-top: 6px; }   /* a second paragraph keeps the site’s 10px */