/* FOW hero · P6-C "the quiet instrument" (WO P6-C v0.1, accepted 2026-10-15: D-H1..D-H13, the header's handle
   'Where to? / 어디로?' and the sundial reading line).
   At rest the first screen keeps the globe, one sentence and one reading line; nothing is deleted -- it moves into
   the instrument (ring, lens, place marks) or opens when it is wanted (the index, '/').
   Gated: html[data-chrome="quiet"], set in the document head for C (the default globe) before the globe is built
   (D-H12); &p6c=0 shows the page as it was, ?globe=legacy the hero before C. Without the gate only the three hidden defaults below apply.
   Type (WO §4): T1 headline (unchanged) · T4 reading 13 (EN 11 caps) · T5 label 11 · figures EB Garamond 16.
   Tracking: -.028em · 0 · .04em · .12em (EN .24em). Ink: starlight · ink-2 · ink-3 · sea · lit brass. */
.loc__ask, .loc__ask-sub, .sundial, .crumb__at { display: none; }

html[data-chrome="quiet"] {
  --hq-i1: #EDE9DE; --hq-i2: #B6B4AC; --hq-i3: #8E8C84; --hq-lit: #E8C27A; --hq-ui: #C9A35C;
  --hq-t4: 600 13px/1.2 "SUIT", system-ui, sans-serif; --hq-t5: 600 11px/1 "SUIT", system-ui, sans-serif;
  --hq-fig: 400 16px/1.2 "EB Garamond", Georgia, serif;
  --hq-gx: 41px; --hq-by: 40px;
}
html[data-chrome="quiet"][lang="en"] { --hq-t4: 600 11px/1.2 "Instrument Sans", system-ui, sans-serif; --hq-t5: 600 11px/1 "Instrument Sans", system-ui, sans-serif; }

/* 1 · gone from the resting screen (D-H2, D-H3, D-H7): the spine, the gesture line, the locale (it is the reading
   line now), the header's menu (the way in is WHERE TO?), the rail's cards and dial face */
html[data-chrome="quiet"] .spine-rail, html[data-chrome="quiet"] .hero__hint, html[data-chrome="quiet"] #locus,
html[data-chrome="quiet"] .ih__nav, html[data-chrome="quiet"] #rail-row,
html[data-chrome="quiet"] .crumb__ap, html[data-chrome="quiet"] .crumb__rule, html[data-chrome="quiet"] .crumb__scale,
html[data-chrome="quiet"] #back, html[data-chrome="quiet"] #reset { display: none !important; }

/* 2 · the header: one way in. At the top of the page the locator is the question 'Where to?' with its key; past the
   hero it reads the active destination as before (D-H5) */
html[data-chrome="quiet"] #ih[data-cruise="0"] #loc .loc__body, html[data-chrome="quiet"] #ih[data-cruise="0"] #loc .loc__open { display: none !important; }
html[data-chrome="quiet"] #ih[data-cruise="0"] #loc .loc__ask { display: inline-flex; }
html[data-chrome="quiet"] #ih[data-cruise="0"] #loc { gap: 12px !important; padding-right: 14px !important; }
html[data-chrome="quiet"] .loc__ask { align-items: center; gap: 10px; font: var(--hq-t4); letter-spacing: .12em; color: var(--hq-i1); white-space: nowrap; transition: color .2s ease; }
html[data-chrome="quiet"][lang="en"] .loc__ask { letter-spacing: .24em; text-transform: uppercase; }
html[data-chrome="quiet"] .loc__ask kbd { font: var(--hq-t5); letter-spacing: 0; color: var(--hq-lit); border: 1px solid rgba(201, 163, 92, .55); border-radius: 4px;
  min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 5px; }
html[data-chrome="quiet"] #loc:hover .loc__ask, html[data-chrome="quiet"] #loc:focus-visible .loc__ask { color: var(--hq-lit); }
/* P7 round 2 (E-1a): the one way in is seen at once -- the same control, ringed in brass, its question larger and what
   it finds said beside it; when the opening lands on Seoul the ring answers once (not under reduced motion). No second
   button: the index it opens is the place the coming section uplift builds on */
html[data-chrome="quiet"] #ih[data-cruise="0"] #loc { width: auto !important; border: 1px solid rgba(201, 163, 92, .62) !important; border-radius: 999px !important;
  padding: 4px 14px 4px 5px !important; background: rgba(13, 14, 18, .5);
  box-shadow: 0 0 0 3px rgba(232, 194, 122, .06), 0 0 22px rgba(232, 194, 122, .12); transition: box-shadow .4s ease, border-color .4s ease, transform 420ms var(--ease-out-strong); }
html[data-chrome="quiet"] #ih[data-cruise="0"] #loc:hover, html[data-chrome="quiet"] #ih[data-cruise="0"] #loc:focus-visible { border-color: rgba(232, 194, 122, .95) !important; }
html[data-chrome="quiet"] #ih[data-cruise="0"] #loc .loc__ap { width: 2.6rem; height: 2.6rem; }
html[data-chrome="quiet"] #ih[data-cruise="0"] .loc__ask { font-size: 15px; color: #F0D9A6; letter-spacing: .08em; }
html[data-chrome="quiet"][lang="en"] #ih[data-cruise="0"] .loc__ask { font-size: 12px; letter-spacing: .2em; }
html[data-chrome="quiet"] #ih[data-cruise="0"] .loc__ask-sub { display: inline; font: 400 13px/1 "SUIT", system-ui, sans-serif; letter-spacing: .02em; text-transform: none; color: var(--hq-i2); }
html[data-chrome="quiet"][lang="en"] #ih[data-cruise="0"] .loc__ask-sub { font: italic 400 14px/1 "EB Garamond", Georgia, serif; letter-spacing: .02em; }
@keyframes hq-call { 0% { box-shadow: 0 0 0 3px rgba(232, 194, 122, .06), 0 0 22px rgba(232, 194, 122, .12); }
  35% { box-shadow: 0 0 0 7px rgba(232, 194, 122, .2), 0 0 40px rgba(232, 194, 122, .5); border-color: rgba(240, 217, 166, 1); }
  100% { box-shadow: 0 0 0 3px rgba(232, 194, 122, .06), 0 0 22px rgba(232, 194, 122, .12); } }
html[data-chrome="quiet"] #ih[data-cruise="0"] #loc.is-call { animation: hq-call 1.8s cubic-bezier(.2, .7, .2, 1) 1; }
html[data-chrome="quiet"] .lang { margin-left: auto !important; }
html[data-chrome="quiet"] .lang button { font: var(--hq-t5) !important; letter-spacing: .12em !important; min-height: 24px !important; min-width: 32px !important; }
html[data-chrome="quiet"][lang="en"] .lang button { letter-spacing: .24em !important; }
html[data-chrome="quiet"] .lang button[aria-pressed="true"] { color: var(--hq-lit) !important; }
html[data-chrome="quiet"] .lang button[aria-pressed="false"] { color: var(--hq-i3) !important; }
html[data-chrome="quiet"] .ih__brand { min-height: 24px !important; display: inline-flex !important; align-items: center !important; }

/* 3 · the reading line on the foot of the case (D-H6, WO §5 as decided): at the world, the instrument's sundial --
   Seoul's hour read from where the light stands on the globe (one turn = one day); deeper, the path and the place */
html[data-chrome="quiet"] #tree { position: absolute !important; z-index: 6; left: var(--hq-gx) !important; right: auto !important; bottom: var(--hq-by) !important; top: auto !important;
  width: auto !important; max-width: calc(100% - 2 * var(--hq-gx) - 120px); margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; grid-area: auto !important; }
html[data-chrome="quiet"] #tree .rail__head { border: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; }
html[data-chrome="quiet"] #crumb { display: flex !important; align-items: baseline !important; gap: 10px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; min-height: 0 !important; }
html[data-chrome="quiet"] .hero[data-level="world"] #crumb { display: none !important; }
html[data-chrome="quiet"] .crumb__path { display: flex !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; }
html[data-chrome="quiet"] .crumb__path button { font: var(--hq-t4) !important; letter-spacing: .12em !important; color: var(--hq-i2) !important; min-height: 24px; padding: 0 2px !important; background: none !important; border: 0 !important; }
html[data-chrome="quiet"][lang="en"] .crumb__path button { letter-spacing: .24em !important; text-transform: uppercase; }
html[data-chrome="quiet"] .crumb__path li + li::before { content: "›"; color: var(--hq-i3); margin: 0 8px; }
html[data-chrome="quiet"] .crumb__path [aria-current] { color: var(--hq-i1) !important; }
/* the deeper line is the same line as the sundial's: no glass pill, no rule, no stop dots or glyphs (the old crumb's
   dress), one small ring before the path, a point before the place */
html[data-chrome="quiet"] #crumb { box-shadow: none !important; border-radius: 0 !important; height: auto !important; }
html[data-chrome="quiet"] #crumb::before, html[data-chrome="quiet"] #crumb::after,
html[data-chrome="quiet"] .crumb__path button::before, html[data-chrome="quiet"] .crumb__path button::after { display: none !important; }
html[data-chrome="quiet"] .crumb__path li { box-shadow: none !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: baseline; }
html[data-chrome="quiet"] .crumb__path li[hidden] { display: none !important; }
html[data-chrome="quiet"] .crumb__path { align-items: baseline !important; }
html[data-chrome="quiet"] .crumb__path::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--hq-ui); border-radius: 50%; align-self: center; margin-right: 10px; flex: none; }
html[data-chrome="quiet"] .crumb__at::before { content: "·"; color: var(--hq-i3); margin-right: 10px; font: var(--hq-t4); }
html[data-chrome="quiet"] .crumb__at { display: inline; font: var(--hq-fig); letter-spacing: .04em; color: var(--hq-i3); font-variant-numeric: oldstyle-nums tabular-nums; white-space: nowrap; }
html[data-chrome="quiet"] .crumb__at:empty { display: none; }
html[data-chrome="quiet"] .hero[data-level="world"] .sundial { display: flex; }
html[data-chrome="quiet"] .sundial { align-items: baseline; gap: 10px; margin: 0; white-space: nowrap; font: var(--hq-t4); letter-spacing: .12em; color: var(--hq-i2); transition: opacity .4s ease; }
html[data-chrome="quiet"][lang="en"] .sundial { letter-spacing: .24em; text-transform: uppercase; }
html[data-chrome="quiet"] .sundial.is-away { opacity: .4; }                 /* the ages are being turned: the ring's cartouche says when */
html[data-chrome="quiet"] .sundial__mk { width: 9px; height: 9px; border-radius: 50%; align-self: center; flex: none; box-shadow: 0 0 0 1px var(--hq-ui);
  background: conic-gradient(from calc(var(--sd, .5) * 1turn - .75turn), var(--hq-lit) 0 .5turn, #23252C .5turn 1turn); }
html[data-chrome="quiet"] .sundial__place { color: var(--hq-i1); }
html[data-chrome="quiet"] .sundial__time { font: var(--hq-fig); letter-spacing: .04em; color: var(--hq-i1); font-variant-numeric: oldstyle-nums tabular-nums; text-transform: none; }
html[data-chrome="quiet"] .sundial__sep { color: var(--hq-i3); }
html[data-chrome="quiet"] .sundial__ap { color: var(--hq-i1); margin: 0 -4px; }      /* 오전/오후 · AM/PM in the reading face, the figures in the old style */
html[data-chrome="quiet"] .sundial__ap:empty { display: none; }
/* G-6 (P7 round 4, 2026-10-17): the mark is the instrument's own sundial, an angbu-ilgu (globe_spike.js draws the bowl
   and its shadow); the words keep only the hour in figures -- the place, the date and the term go to a screen reader */
html[data-chrome="quiet"] .sundial.is-art { align-items: center; gap: 12px; cursor: pointer; }
html[data-chrome="quiet"] .sundial__mk.is-art { width: 66px; height: 62px; border-radius: 0; box-shadow: none; background: none; }
html[data-chrome="quiet"] .sundial__mk.is-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
html[data-chrome="quiet"] .sundial.is-art .sundial__place, html[data-chrome="quiet"] .sundial.is-art .sundial__sep, html[data-chrome="quiet"] .sundial.is-art .sundial__date {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-chrome="quiet"] .sundial.is-art .sundial__time { font-size: 18px; }

/* 4 · stop and sound: two icon buttons on the same foot line, 32 px targets, their names kept for screen readers
   (placed by globe_spike.js rotPlace); the deep-time slider is reached by Tab and shows only while it has the focus
   (D-H4: the ring is the dial) */
html[data-chrome="quiet"] .gp-bar { width: auto !important; }
html[data-chrome="quiet"] .gp-bar .gp-bar__row { gap: 8px !important; }
html[data-chrome="quiet"] .gp-pause__t, html[data-chrome="quiet"] .gp-sound:not(.gp-timebtn) .gp-sound__t { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
html[data-chrome="quiet"] .gp-pause, html[data-chrome="quiet"] .gp-sound:not(.gp-timebtn) { width: 32px !important; height: 32px !important; min-width: 32px !important; padding: 0 !important; justify-content: center !important; gap: 0 !important; }
@media (min-width: 760px) {
  html[data-chrome="quiet"] .gp-bar:not(:focus-within) #gp-time { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; margin: 0 !important; }
  html[data-chrome="quiet"] .gp-bar:focus-within #gp-time { position: absolute !important; right: 0; left: auto !important; bottom: calc(100% + 14px); top: auto !important; width: 300px !important; }
}

/* 5 · the right column keeps its grid cell (hero3d.js reads its box for the readable band) but shows nothing; the
   headline stands at the column's middle */
@media (min-width: 760px) {
  html[data-chrome="quiet"] #finder { visibility: hidden !important; }
  html[data-chrome="quiet"] .hero__head { align-self: center !important; }
}

/* 6 · the composition K2 (D-H9): the stage box sets the globe's x (660 px, centred); its size and height are the
   ring's share and cy in globe_spike.js (0.415, 0.535 under this gate; the ring kept 24 px under the header's rule) */
@media (min-width: 1025px) {
  html[data-chrome="quiet"] .hero__in { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr) minmax(0, 9rem) !important; }
  html[data-chrome="quiet"] .hero__stage { width: 660px !important; justify-self: center !important; }
}

/* 8 · the phone (D-H11): stage 47svh, the hero a full screen, the three buttons under the globe (placed by rotPlace),
   'DEEP TIME' keeps its words, the reading line on the floor */
@media (max-width: 759px) {
  html[data-chrome="quiet"] { --hq-gx: 18px; --hq-by: 34px; }
  html[data-chrome="quiet"] #finder { display: none !important; }
  html[data-chrome="quiet"] #ih[data-cruise="0"] #loc { padding-right: 12px !important; gap: 8px !important; }
  html[data-chrome="quiet"] #ih[data-cruise="0"] .loc__ask-sub { display: none; }        /* the phone: the question alone (the language switch beside it) */
  html[data-chrome="quiet"] #ih[data-cruise="0"] #loc { flex: 0 0 auto !important; }   /* the pill holds its words, not the row */
  html[data-chrome="quiet"] #ih[data-cruise="0"] #loc .loc__ap { width: 2.2rem; height: 2.2rem; }
  html[data-chrome="quiet"] .hero { min-height: 100svh !important; }
  html[data-chrome="quiet"] .hero__stage { height: clamp(330px, 47svh, 450px) !important; }
  html[data-chrome="quiet"] #tree { max-width: calc(100% - 2 * var(--hq-gx)); }
  html[data-chrome="quiet"] .sundial__mk.is-art { width: 44px; height: 41px; }          /* G-7: the phone's bowl */
  html[data-chrome="quiet"] .sundial.is-art { gap: 9px; }
  html[data-chrome="quiet"] .gp-bar .gp-timebtn { height: 32px !important; }
  html[data-chrome="quiet"] .gp-timebtn .gp-sound__t { font: var(--hq-t4) !important; letter-spacing: .12em !important; color: var(--hq-i2) !important; }
  html[data-chrome="quiet"][lang="en"] .gp-timebtn .gp-sound__t { letter-spacing: .24em !important; }
}
@media (prefers-reduced-motion: reduce) { html[data-chrome="quiet"] .sundial, html[data-chrome="quiet"] .loc__ask { transition: none; }
  html[data-chrome="quiet"] #ih[data-cruise="0"] #loc.is-call { animation: none; } }