/* The door: the site's signature. A filing-room door in the north colonnade, hinge-sagged,
   with a gap two inches wide at the top tapering to three-quarters of an inch. The courtyard
   is drawn behind it; holding brings the door to your eye and the gap becomes the frame. */

.js-only { display: none; }
.js .js-only { display: flex; }

.door-stage {
  --gap-x: 66%;            /* where the door meets its frame */
  --gap-top: 11px;         /* two inches, at this distance */
  --gap-bottom: 4px;       /* three-quarters of an inch */
  --zoom: 1;
  position: relative; height: calc(100svh - var(--masthead-h)); min-height: 34rem; max-height: 72rem;
  overflow: hidden; isolation: isolate; background: #060403;
  margin-top: 0;
}
.courtyard { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.door-assembly {
  position: absolute; inset: -2% -2% -2% -2%; z-index: 1;
  transform-origin: var(--gap-x) 42%;
  transition: transform .9s var(--ease-seal), filter .9s, opacity .6s;
}
.door-leaf {
  /* The leaf reaches further at the bottom than the top: the hinge sag that makes the gap taper. */
  position: absolute; left: 0; top: 0; bottom: 0; right: calc(100% - var(--gap-x) - (var(--gap-top) - var(--gap-bottom)));
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0) 12%, rgba(0,0,0,0) 86%, rgba(0,0,0,.6)),
    repeating-linear-gradient(90deg, #1d130b 0 118px, #22170d 118px 121px, #1a1109 121px 238px, #120b06 238px 241px),
    #1c120a;
  clip-path: polygon(0 0, calc(100% - (var(--gap-top) - var(--gap-bottom))) 0, 100% 100%, 0 100%);
  box-shadow: inset -30px 0 60px rgba(0,0,0,.6);
}
.door-grain { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: overlay; opacity: .9; }
.door-panel { position: absolute; left: 14%; right: 14%; border: 2px solid rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px rgba(255,210,150,.04), 0 1px 0 rgba(255,210,150,.05); }
.door-panel--a { top: 8%; height: 38%; }
.door-panel--b { top: 52%; height: 40%; }
.door-edge {
  position: absolute; top: 0; bottom: 0; right: 0; width: 60px;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,110,30,.08) 70%, rgba(255,160,70,.2));
  animation: edge-flicker 3.7s ease-in-out infinite;
}
.door-jamb {
  position: absolute; top: 0; bottom: 0; left: calc(var(--gap-x) + var(--gap-top)); width: 5.5%;
  background: linear-gradient(90deg, #2a170c, #1e1109 18%, #150c07 60%, #100905 100%);
  box-shadow: inset 6px 0 14px rgba(255,110,30,.16);
}
.jamb-light { position: absolute; inset: 0 auto 0 0; width: 14px; background: linear-gradient(90deg, rgba(255,150,60,.45), transparent); animation: edge-flicker 2.9s ease-in-out infinite reverse; }
.door-wall {
  position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--gap-x) + var(--gap-top) + 5.5%);
  background:
    linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.65)),
    repeating-linear-gradient(0deg, #17110c 0 64px, #120d09 64px 66px),
    #140e0a;
}
@keyframes edge-flicker { 0%, 100% { opacity: .7; } 18% { opacity: 1; } 22% { opacity: .55; } 60% { opacity: .9; } 72% { opacity: .62; } }

/* Light that leaks under and through, onto the floor of the colonnade. */
.door-spill {
  position: absolute; z-index: 2; pointer-events: none; left: calc(var(--gap-x) - 18%); width: 44%; bottom: 0; height: 36%;
  background: radial-gradient(60% 100% at 42% 100%, rgba(255,120,40,.16), rgba(255,90,30,.05) 50%, transparent 72%);
  mix-blend-mode: screen; transition: opacity 1s;
  animation: spill 4.3s ease-in-out infinite;
}
@keyframes spill { 50% { opacity: .78; } }
.motes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; transition: opacity .8s; }

.door-copy {
  position: absolute; z-index: 4; left: var(--gutter); bottom: clamp(2rem, 8vh, 5rem); width: min(38rem, 52%);
  transition: opacity .6s var(--ease-ink), transform .8s var(--ease-ink);
}
.door-copy > * { transition: opacity .5s var(--ease-ink); }
.door-copy .label { color: #a3927a; margin-bottom: 1.2rem; max-width: 30rem; }
.door-title { margin: 0; }
.door-title .display { display: block; white-space: nowrap; font-size: clamp(3.4rem, 1.6rem + 6.3vw, 8.2rem); line-height: .95; color: #f1e6cc; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.door-formal { margin: .5rem 0 0; font-size: clamp(.95rem, .8rem + .55vw, 1.3rem); letter-spacing: .2em; text-transform: uppercase; color: #e0b04a; text-shadow: 0 1px 18px rgba(0,0,0,.7); }
.door-formal cite { font-style: normal; }
.door-sub { margin: .9rem 0 .3rem; font-size: var(--step-1); line-height: 1.35; color: #d8cbb0; font-style: italic; max-width: 30rem; text-wrap: balance; }
.door-by { margin: 0 0 1.8rem; color: #a3927a; font-size: 1.02rem; }
.door-actions { align-items: center; flex-wrap: wrap; gap: .8rem 1rem; }
.look-btn {
  position: relative; display: inline-flex; align-items: center; gap: .9rem; min-height: 3.4rem; padding: .5rem 1.3rem .5rem .6rem;
  border: 1px solid rgba(248,208,80,.45); border-radius: 3rem; background: rgba(20,10,4,.55); color: #f6e9cc;
  font-family: var(--f-body); font-size: 1.05rem; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: border-color .3s, background-color .3s, transform .3s var(--ease-ink);
}
.look-btn:hover { border-color: var(--gold-1); background: rgba(60,20,6,.6); }
/* Where the label needs two lines (phones), they are even and start by the ring. */
.look-text { text-align: left; text-wrap: balance; }
.look-btn.is-holding { transform: scale(.98); border-color: var(--red-1); }
.look-ring { position: relative; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid rgba(248,208,80,.5); overflow: hidden; flex: none; }
.look-ring::before { content: ""; position: absolute; left: 50%; top: 18%; bottom: 18%; width: 3px; transform: translateX(-50%); background: linear-gradient(var(--gold-1), var(--red-2)); clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%); }
.look-fill { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(224,48,16,.55) calc(var(--p, 0) * 1turn), transparent 0); }
/* The quiet controls' edges at 3:1 against the dark wood (they were 1.6:1). */
.look-toggle { color: #cdbd9e; border-color: rgba(205,189,158,.47); }
.look-toggle[aria-pressed="true"] { background: #f1e6cc; color: #1a1109; }
/* Sound, at the door: the site's own switch (the same state as the masthead's). Nothing plays
   until it is pressed; pressed again, everything stops. */
.look-sound { color: #cdbd9e; border-color: rgba(205,189,158,.47); gap: .55rem; }
.look-sound .sound-icon { flex: none; }
.look-sound[aria-pressed="true"] { background: rgba(20,10,4,.55); color: #f0c870; border-color: rgba(248,208,80,.45); }
.look-sound[aria-pressed="true"]:hover { background: rgba(60,20,6,.6); border-color: var(--gold-1); }
/* Hover brightens their edge (the shared quiet hover would have faded it). */
.look-toggle:hover, .look-sound:hover { border-color: rgba(205,189,158,.85); }
.door-help { margin: 1rem 0 0; font-size: .9rem; color: #8f806a; max-width: 30rem; }
/* Looking is the door's one action: it has its own line and the two quiet controls sit together
   under it (the sound switch used to wrap onto a line of its own). Narrower than 30rem the two
   cannot share a line, and each control simply takes its own. */
@media (min-width: 30rem) {
  .js .door-actions { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; }
  .door-actions .look-btn { grid-column: 1 / -1; justify-self: start; }
  .door-stage.is-looking .door-actions { display: flex; }
}

.peep-hud {
  position: absolute; z-index: 5; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: flex; gap: 1.4rem;
  opacity: 0; transition: opacity .6s; pointer-events: none; white-space: nowrap;
}
.peep-hud .label { color: rgba(255,226,190,.75); }
/* When he cannot be shown moving (reduced motion, or the clip will not load), the line says what passes. */
.peep-caption {
  position: absolute; z-index: 5; left: 50%; bottom: 8.6rem; transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100% - 2rem);
  padding: .5rem .95rem; background: rgba(10,5,2,.78); border-left: 2px solid var(--red-1); color: #f1e6cc; font-style: italic; font-size: 1.05rem; text-align: center;
}
.door-stage:not(.is-looking) .peep-caption { display: none; }
/* The lines from the file that answer a look, in one column down the right of the stage, clear
   of the door's copy: the ninety-second line at its top, Guanyin's at its foot. Both can be
   shown at once (after a first look of ninety seconds), and they stack instead of overlapping. */
.gap-slips {
  position: absolute; z-index: 6; right: var(--gutter); top: clamp(2rem, 8vh, 5rem); bottom: clamp(2rem, 8vh, 5rem);
  width: min(24rem, calc(48% - 3 * var(--gutter)));
  display: flex; flex-direction: column; gap: .75rem; pointer-events: none;
}
.gap-slip {
  margin-top: auto; pointer-events: auto;
  background: rgba(14,8,4,.82); border-left-color: var(--red-1); color: #f1e6cc; backdrop-filter: blur(6px);
  animation: slip-in 1s var(--ease-ink) both;
}
.gap-slip--long { order: -1; margin-top: 0; }
.gap-slip figcaption { color: #a3927a; }
@keyframes slip-in { from { opacity: 0; transform: translateY(14px); } }
/* A 44 px target; the words sit where they did. */
.door-down {
  position: absolute; z-index: 4; right: var(--gutter); bottom: .4rem; display: inline-flex; align-items: center; min-height: 2.75rem;
  color: #8f806a; text-decoration: none; transition: color .25s;
}
.door-down::after { content: "\00a0\2193"; content: "\00a0\2193" / ""; }
.door-down:hover { color: #cdbd9e; }

/* Looking: the door is brought to the eye. The canvas draws the out-of-focus wood around
   the aperture, so the door itself steps back and fades. */
.door-stage.is-looking .door-assembly { transform: scale(1.3); filter: blur(6px); opacity: 0; transition: transform 1.2s var(--ease-seal), filter 1.2s, opacity .5s .15s; }
.door-stage.is-looking .motes, .door-stage.is-looking .door-spill { opacity: 0; }
.door-stage.is-looking .peep-hud { opacity: 1; }
.door-stage.is-looking .door-down, .door-stage.is-looking .gap-slip { opacity: 0; }
.door-stage.is-looking .door-copy { transform: none; }
.door-stage.is-looking .door-copy > :not(.door-actions) { opacity: 0; pointer-events: none; }
.door-stage.is-looking .door-actions { position: fixed; left: 50%; bottom: 3.6rem; transform: translateX(-50%); z-index: 8; justify-content: center; width: max-content; max-width: calc(100vw - 2rem); }
.door-stage.is-looking .look-btn { background: rgba(10,5,2,.7); }
@media (max-width: 760px) {
  .door-stage { --gap-x: 88%; --gap-top: 8px; --gap-bottom: 3px; height: calc(100svh - var(--masthead-h)); }
  .door-copy { width: auto; right: 16%; bottom: 1.6rem; }
  .door-title .display { font-size: clamp(2.6rem, 14vw, 3.6rem); }
  .door-formal { font-size: .84rem; letter-spacing: .12em; }
  /* On a phone the lines stack from the top of the stage, in the order they came, and while one is
     shown the door's heading steps back (the title stays in the masthead): the line takes the
     room the heading had, where it used to lie over the title on all but the tallest phones. */
  .gap-slips { left: var(--gutter); right: var(--gutter); width: auto; top: calc(var(--masthead-h)); bottom: auto; }
  .gap-slip, .gap-slip--long { order: 0; margin-top: 0; }
  .gap-slip blockquote { font-size: 1.15rem; }
  .door-stage:has(.gap-slip:not([hidden])) .door-copy > :not(.door-actions) { opacity: 0; pointer-events: none; }
  .door-down { display: none; }
  .peep-hint { display: none; }
}
/* Short phones: the copy would climb under the masthead. The keyboard note stays the look
   button's description but is not shown, and sound keeps only its icon (its name is unchanged),
   so the two quiet controls share a row. */
@media (max-width: 760px) and (max-height: 620px) {
  #look-help, .look-sound [data-sound-inline-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .look-sound { min-width: 2.75rem; padding-inline: .8rem; justify-content: center; }
}

/* ------------------------------------------------------------------ commission */
.commission { background: var(--cloud); color: var(--ink); --fg: var(--ink); --fg-2: var(--ink-3); --muted: var(--ink-5); --accent: var(--gold-5); --rule: rgba(26,24,16,.14); --focus: var(--red-4);
  background-image: linear-gradient(to right, rgba(26,24,16,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(26,24,16,.045) 1px, transparent 1px);
  background-size: 42px 42px; }
.commission .slip { background: rgba(255,255,255,.55); margin: 1.4rem 0 0; border-left-color: var(--gold); }
.commission .slip--reply { border-left-color: var(--ink); margin-left: clamp(0rem, 3vw, 2.5rem); }
.commission-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 900px) { .commission-grid { grid-template-columns: 1fr; } }
.commission .section-title { margin: .8rem 0 1.2rem; max-width: 14ch; }
.hong-heard { margin: 1.6rem 0 0; font-size: var(--step-1); font-style: italic; }
.commission-cta { margin-top: 3rem; display: flex; gap: .8rem; flex-wrap: wrap; }

.ratio { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: end; padding: 2rem 0; }
.ratio-pages { position: relative; width: 5.5rem; height: 7rem; }
.ratio-page { position: absolute; inset: 0; background: #fbfaf6; border: 1px solid rgba(26,24,16,.2); box-shadow: 0 2px 8px rgba(0,0,0,.08);
  background-image: repeating-linear-gradient(180deg, transparent 0 9px, rgba(144,104,0,.35) 9px 10px); background-size: 70% 100%; background-position: 50% 12px; background-repeat: no-repeat; }
.ratio-page:nth-child(1) { transform: rotate(-4deg) translate(-4px, 2px); }
.ratio-page:nth-child(2) { transform: rotate(2deg) translate(3px, -1px); }
.ratio-pages .label { position: absolute; left: 0; right: 0; bottom: -1.8rem; text-align: center; }
.ratio-hours { position: relative; }
.ratio-track { position: relative; height: 7rem; border: 1px solid rgba(26,24,16,.22); background: rgba(255,255,255,.4); overflow: hidden; }
.ratio-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background:
  linear-gradient(90deg, rgba(200,32,0,.08), rgba(200,32,0,.28)), repeating-linear-gradient(90deg, transparent 0 calc(100% / 48 - 1px), rgba(160,24,0,.35) calc(100% / 48 - 1px) calc(100% / 48)); }
.ratio-ticks { display: flex; justify-content: space-between; margin-top: .4rem; font-family: var(--f-mono); font-size: .7rem; color: var(--ink-5); }
.ratio-hours-label { position: absolute; right: 0; bottom: -1.8rem; }
.ratio-note { grid-column: 1 / -1; margin-top: 2.2rem; font-size: .98rem; color: var(--ink-4); max-width: 30rem; }

/* ------------------------------------------------------------------ pitch */
.pitch-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
@media (max-width: 860px) { .pitch-grid { grid-template-columns: 1fr; } .pitch-cover { max-width: 20rem; } }
.pitch-cover { margin: 0; perspective: 900px; }
.pitch-cover img { width: 100%; height: auto; box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  transform: rotateY(var(--ry, -6deg)) rotateX(var(--rx, 2deg)); transition: transform .6s var(--ease-ink); }
.pitch .section-title { margin: .8rem 0 1.4rem; max-width: 18ch; }
.pitch-facts { list-style: none; padding: 0; margin: 1.6rem 0 2rem; display: grid; gap: .5rem; border-top: 1px solid var(--rule); }
.pitch-facts li { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); }

.rooms-title { margin: .8rem 0 1rem; }
.rooms-lede { margin-bottom: 2.4rem; }

/* ------------------------------------------------------------------ coda */
.coda { position: relative; isolation: isolate; min-height: 70vh; display: grid; align-items: center; overflow: hidden; }
.coda-inner { position: relative; padding: 6rem var(--gutter); }
.coda-line { font-size: var(--step-3); line-height: 1.12; max-width: 17ch; color: #f4e9d6; font-weight: 350; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
/* door.js gives each of the line's three sentences a line of its own (a column narrow enough
   to set it as a poem could not: "Five hundred years remain." is wider than "The mountain is
   still. Five"). A sentence too long for a phone breaks into even halves. */
.coda-line.is-lined { max-width: 12.2em; }
.coda-sentence { display: block; text-wrap: balance; }
.coda-btn { color: #f4e9d6; border-color: rgba(244,233,214,.5); }

@media (prefers-reduced-motion: reduce) {
  .door-stage.is-looking .door-assembly { transform: none; filter: none; }
}

.door-stage.is-looking.is-toggle .look-btn { display: none; }
.door-stage.is-looking:not(.is-toggle) .look-toggle { display: none; }