/* pages.css · the pages that belong to the One: Places, Practice, Shelf.
   They wear the One's neutral grey; anything that belongs to a face (a place card, a lens, a shelf) wears that face. */
.pg { max-width: 1240px; margin: 0 auto; padding: calc(var(--bar-h) + 70px) clamp(18px, 4vw, 56px) 40px; }
.pg-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(30px, 5vw, 80px); align-items: end; padding-bottom: 46px; border-bottom: 1px solid var(--fg); margin-bottom: 40px; }
.pg-head h1 { font-family: var(--f-disp); font-weight: 300; font-size: clamp(48px, 6.4vw, 92px); line-height: .98; letter-spacing: -.025em; }
.pg-lede p { font-size: 18px; line-height: 1.62; max-width: 40rem; margin: 0 0 .8em; }
.pg-small { font-size: 14px; color: var(--dim); }
.pg h2 { font-family: var(--f-disp); font-weight: 300; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.015em; margin: 0 0 10px; }
@media (max-width: 820px) { .pg-head { grid-template-columns: 1fr; } }

/* segmented buttons */
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--rule); border-radius: 999px; padding: 3px; background: var(--card); }
.seg button { display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 14px 7px; border-radius: 999px; font-family: var(--f-ui); font-size: 14px; color: var(--dim); transition: background-color .25s, color .25s; }
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.seg .fm { font-size: 16px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px 10px; border-radius: 999px; background: var(--fg); color: var(--bg); font-family: var(--f-ui); font-size: 14.5px; transition: opacity .2s; }
.btn:hover { opacity: .86; }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--rule); }
.btn.ghost:hover { border-color: var(--fg); opacity: 1; }

/* ---------------------------------------------------------------- places */
.map-tools { display: flex; flex-wrap: wrap; gap: 12px 18px; justify-content: space-between; margin-bottom: 18px; }
.map-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0; border: 1px solid var(--rule); background: var(--card); min-height: 520px; }
.map { position: relative; overflow: hidden; }
.map svg { display: block; width: 100%; height: 100%; min-height: 520px; }
.map .grat path { fill: none; stroke: var(--rule); stroke-width: var(--sw, .4); opacity: .7; }
.map .land { fill: color-mix(in srgb, var(--fg) 9%, var(--card)); stroke: color-mix(in srgb, var(--fg) 22%, transparent); stroke-width: var(--sw, .4); }
.pd { cursor: pointer; outline: none; }
.pd .halo { fill: var(--k); opacity: 0; transition: opacity .25s; }
.pd .core { fill: var(--card); stroke: var(--k); }
.pd:hover .halo, .pd:focus-visible .halo { opacity: .18; }
.pd.on .core { fill: var(--k); }
.pd.on .halo { opacity: .24; }
.k-jp .core { stroke-dasharray: none; }
.place-card { border-left: 1px solid var(--rule); background: var(--bg); color: var(--fg); font-family: var(--f-body); overflow-y: auto; max-height: 640px; transition: background-color .4s; }
.pc-in { padding: 28px 28px 30px; }
.pc-meta { display: flex; gap: 10px; align-items: baseline; font-family: var(--f-ui); font-size: 13px; color: var(--dim); letter-spacing: .04em; margin-bottom: 14px; }
.pc-meta .fm { font-size: 22px; color: var(--fg); }
.place-card h3 { font-family: var(--f-disp); font-size: 28px; line-height: 1.15; margin-bottom: 6px; }
.place-card[data-face="west"] h3 { font-family: "Libre Caslon Text", "Noto Serif SC", serif; font-weight: 700; }
.place-card[data-face="film"] h3 { font-weight: 300; }
.pc-city { color: var(--dim); font-size: 15px; margin-bottom: 18px; }
.place-card p { font-size: 16px; line-height: 1.62; }
.pc-note { font-size: 14.5px !important; color: var(--dim); border-left: 2px solid var(--acc); padding-left: 12px; }
.pc-rel { margin: 18px 0; border-top: 1px solid var(--rule); }
.pc-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--f-ui); font-size: 14px; margin-top: 18px; }
.pc-links a { color: var(--acc); }
.plist-wrap { margin-top: 70px; }
.plist { columns: 3 280px; column-gap: 40px; margin-top: 20px; }
.pgroup { break-inside: avoid; margin-bottom: 26px; }
.pgroup h3 { font-size: 20px; letter-spacing: 0; color: var(--fg); padding-bottom: 6px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; font-weight: 500; }
.prow { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: baseline; width: 100%; padding: 7px 0; }
.prow .fm { font-size: 17px; }
.prow span { display: grid; }
.prow b:not(.fm) { font-weight: 500; font-size: 15px; line-height: 1.35; }
.prow small { font-size: 13px; color: var(--dim); }
.prow:hover b:not(.fm) { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 900px) { .map-wrap { grid-template-columns: 1fr; } .map svg { min-height: 340px; } .place-card { border-left: 0; border-top: 1px solid var(--rule); max-height: none; } }

/* ---------------------------------------------------------------- practice */
.lens-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.lens-pick button { display: grid; gap: 4px; padding: 18px 18px 16px; background: var(--bg); color: var(--fg); font-family: var(--f-body); border: 1px solid var(--rule); transition: transform .4s var(--ease), border-color .25s; }
.lens-pick button:hover { transform: translateY(-3px); }
.lens-pick button[aria-pressed="true"] { border-color: var(--fg); box-shadow: inset 0 -3px 0 var(--acc); }
.lens-pick button:disabled { opacity: .45; cursor: default; transform: none; }
.lens-pick .fm { font-size: 34px; line-height: 1.1; }
.lens-pick .ln { font-size: 16px; line-height: 1.3; }
.lens-pick small { font-size: 12.5px; color: var(--dim); }
@media (max-width: 760px) { .lens-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.see { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; border: 1px solid var(--rule); background: var(--card); }
.view { display: grid; grid-template-rows: 1fr auto; min-width: 0; }
.frame { position: relative; aspect-ratio: 4 / 3; background: var(--bg); overflow: hidden; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.frame .fr-plate { position: absolute !important; inset: 0; }
.grid9 { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(255, 255, 255, .8) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px) calc(66.666% - .5px), rgba(255, 255, 255, .8) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
              linear-gradient(0deg, transparent calc(33.333% - .5px), rgba(255, 255, 255, .8) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px) calc(66.666% - .5px), rgba(255, 255, 255, .8) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px));
  mix-blend-mode: difference; }
.frame.g .grid9 { opacity: 1; }
.pics { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px; border-top: 1px solid var(--rule); }
.pics button, .pics .own { font-family: var(--f-ui); font-size: 13px; padding: 5px 12px 6px; border: 1px solid var(--rule); border-radius: 999px; color: var(--dim); cursor: pointer; }
.pics button:hover, .pics .own:hover { color: var(--fg); border-color: var(--fg); }
.pics button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.ask { background: var(--bg); color: var(--fg); font-family: var(--f-body); border-left: 1px solid var(--rule); padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; transition: background-color .4s, color .4s; min-width: 0; }
.timer { display: grid; gap: 6px; font-family: var(--f-ui); font-size: 12.5px; color: var(--dim); }
.tbar { height: 2px; background: var(--rule); overflow: hidden; }
.tbar i { display: block; height: 100%; background: var(--acc); transform-origin: 0 50%; transform: scaleX(0); transition: transform .2s linear; }
.lens-intro { font-size: 15.5px; line-height: 1.6; color: var(--dim); }
.steps { display: grid; gap: 2px; }
.step { border-top: 1px solid var(--rule); padding: 12px 0; cursor: pointer; }
.step .q { display: grid; grid-template-columns: 28px 1fr; font-size: 16px; line-height: 1.5; color: var(--dim); transition: color .25s; }
.step .sn { font-family: var(--f-ui); font-size: 13px; color: var(--faint); padding-top: 3px; }
.step .h, .step textarea { display: none; }
.step.on .q { color: var(--fg); font-weight: var(--w-bold); }
.step.on .h { display: block; margin: 8px 0 10px 28px; font-size: 14.5px; line-height: 1.6; color: var(--dim); }
.step.on textarea { display: block; width: calc(100% - 28px); margin-left: 28px; font: inherit; font-size: 15px; color: var(--fg); background: var(--card); border: 1px solid var(--rule); padding: 10px 12px; resize: vertical; border-radius: 2px; }
.step textarea:focus { outline: 2px solid var(--acc); outline-offset: 1px; }
.tchip { display: inline-flex; gap: 6px; align-items: baseline; padding: 2px 10px 3px; border: 1px solid var(--rule); border-radius: 999px; font-size: 13px; margin-left: 4px; }
.tchip b { font-family: var(--f-disp); }
.tchip:hover { border-color: var(--acc); }
.ask-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.saved { font-size: 13.5px; color: var(--dim); margin: 0; min-height: 1.2em; }
@media (max-width: 900px) { .see { grid-template-columns: 1fr; } .ask { border-left: 0; border-top: 1px solid var(--rule); } }
.journal-wrap, .quiz-wrap { margin-top: 90px; }
.journal { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 18px; }
.jentry { background: var(--bg); color: var(--fg); font-family: var(--f-body); padding: 18px 20px; border: 1px solid var(--rule); }
.jm { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--dim); }
.jm .fm { font-size: 20px; color: var(--fg); }
.jm button { margin-left: auto; font-size: 12.5px; color: var(--dim); }
.jm button:hover { color: var(--fg); text-decoration: underline; }
.jentry p { font-size: 15px; line-height: 1.55; }
.jq { display: block; font-size: 13px; color: var(--dim); }
.quiz { max-width: 820px; margin-top: 18px; border: 1px solid var(--rule); background: var(--card); padding: 28px clamp(18px, 3vw, 34px); }
.qz-q { font-size: 21px; line-height: 1.5; margin-bottom: 20px; }
.qz-opts { display: grid; gap: 8px; }
.qz-opts button { display: grid; grid-template-columns: 34px 1fr; align-items: baseline; padding: 11px 14px; border: 1px solid var(--rule); background: var(--bg); font-size: 16px; transition: border-color .2s; }
.qz-opts button:hover { border-color: var(--fg); }
.qz-opts .fm { font-size: 20px; }
.qz-opts button.right { border-color: #2E7D5B; box-shadow: inset 4px 0 0 #2E7D5B; }
.qz-opts button.right::after { content: "\2713"; grid-column: 3; color: #2E7D5B; font-weight: 700; }
.qz-opts button.wrong { border-color: #B23A2E; box-shadow: inset 4px 0 0 #B23A2E; }
.qz-opts button.wrong::after { content: "\2715"; grid-column: 3; color: #B23A2E; font-weight: 700; }
.qz-opts button.right, .qz-opts button.wrong { grid-template-columns: 34px 1fr auto; }
.qz-why { font-size: 15.5px; line-height: 1.6; color: var(--dim); margin-top: 16px; min-height: 1em; }
.qz-why .lnk { color: var(--acc2); text-decoration: underline; text-underline-offset: .2em; }
.qz-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; font-size: 14px; color: var(--dim); }

/* ---------------------------------------------------------------- shelf */
.shelf-face { background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: var(--fs); line-height: var(--lh); }
.sf-in { max-width: 1240px; margin: 0 auto; padding: 70px clamp(18px, 4vw, 56px) 60px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 clamp(30px, 5vw, 80px); }
.sf-in > header { grid-row: 1 / span 40; align-self: start; position: sticky; top: calc(var(--bar-h) + 30px); }
.sf-in > header .fm { display: block; font-size: clamp(70px, 8vw, 120px); line-height: 1; margin-bottom: 12px; }
.sf-in > header h2 { font-family: var(--f-disp); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; }
.shelf-face[data-face="west"] .sf-in > header h2 { font-family: "Cinzel", "Noto Serif SC", serif; }
.shelf-face[data-face="film"] .sf-in > header h2 { font-weight: 300; letter-spacing: .04em; }
.shelf-face[data-face="cn"] .sf-in > header .fm { font-family: "Zhi Mang Xing", "Ma Shan Zheng", serif; }
.sf-start { grid-column: 2; margin-bottom: 26px; padding: 22px 24px; background: var(--card); border: 1px solid var(--rule); }
.sf-start h3 { font-family: var(--f-ui); font-size: 18px; letter-spacing: 0; color: var(--acc); margin-bottom: 10px; }
.sf-in > .rpath { grid-column: 2; }
.shelf-face + .shelf-face { border-top: 1px solid var(--rule); }
@media (max-width: 820px) { .sf-in { grid-template-columns: 1fr; } .sf-in > header { position: static; grid-row: auto; margin-bottom: 26px; } .sf-start, .sf-in > .rpath { grid-column: 1; } }
.allsrc { margin-top: 30px; }
.biblio { columns: 2 380px; column-gap: 40px; padding-top: 14px; }
.biblio p { break-inside: avoid; font-size: 14.5px; line-height: 1.5; margin: 0 0 10px; padding-left: 1.2em; text-indent: -1.2em; }
.about { max-width: var(--measure); margin: 80px 0 40px; }
.about p { font-size: 15.5px; line-height: 1.66; color: var(--dim); }