/* 922 Dragon Studios review directions: shared floor.
   Loaded after scrollcraft.css. Tokens, theme modes, the watching mark,
   buttons, form controls. Layout belongs to each direction's own page. */

@font-face { font-family: "Bai Jamjuree"; font-weight: 500; font-display: swap; src: url("assets/fonts/bai-jamjuree-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Bai Jamjuree"; font-weight: 600; font-display: swap; src: url("assets/fonts/bai-jamjuree-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Bai Jamjuree"; font-weight: 700; font-display: swap; src: url("assets/fonts/bai-jamjuree-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter-latin-variable.woff2") format("woff2"); }

/* ------------------------------------------------------------- tokens -- */
:root {
  color-scheme: light;
  --sc-canvas: #FCFBF9;
  --sc-surface: #F0EEE9;
  --sc-ink: #100F0E;
  --sc-ink-soft: #57524B;
  --sc-accent: #D64E3E;
  --sc-accent-ink: #100F0E;
  --sc-font-display: "Bai Jamjuree", "Arial Narrow", system-ui, sans-serif;
  --sc-font-text: "Inter", system-ui, sans-serif;
  --sc-leading-body: 1.6;
  --sc-r-sm: 2px; --sc-r-md: 2px; --sc-r-lg: 2px;
  --sc-shadow-color: 30 12% 8%;
  --keyline: 1px solid var(--sc-ink);
  /* Stepped, not fluid, so every rendered gap stays on the 4px scale. */
  --gut: 20px;
  --sec: 64px;
  --body: 1.0625rem;
  --small: 1rem;
}
@media (min-width: 700px)  { :root { --gut: 32px; --sec: 96px; } }
@media (min-width: 1100px) { :root { --gut: 64px; --sec: 128px; } }

/* Inherited properties live at :root only, so the dark set restates nothing
   on a subtree and no text keeps a stale ink. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sc-canvas: #11100F; --sc-surface: #1C1A18;
    --sc-ink: #F4F1EC; --sc-ink-soft: #B3ACA2;
    --sc-shadow-color: 30 20% 2%;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --sc-canvas: #11100F; --sc-surface: #1C1A18;
  --sc-ink: #F4F1EC; --sc-ink-soft: #B3ACA2;
  --sc-shadow-color: 30 20% 2%;
}

/* Never a sideways scrollbar. At phone width the page scrollbar is hidden, as
   it is on a phone; a desktop browser framing the page would otherwise paint a
   classic white bar down the side. Wider than that it is thin and themed. */
html { overflow-x: clip; scrollbar-width: thin; scrollbar-color: var(--sc-ink-soft) transparent; }
@media (max-width: 699px) {
  html, dialog { scrollbar-width: none; }
  html::-webkit-scrollbar, dialog::-webkit-scrollbar { display: none; }
}
body { font-size: var(--body); line-height: 1.6; letter-spacing: 0; }
/* Light type on a dark ground: a touch more weight and tracking. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { font-weight: 450; letter-spacing: 0.004em; } }
:root[data-theme="dark"] body { font-weight: 450; letter-spacing: 0.004em; }

h1, h2, h3 { font-family: var(--sc-font-display); font-weight: 700; text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
.caps { text-transform: uppercase; }
.soft { color: var(--sc-ink-soft); }
.measure { max-width: 60ch; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------- theme-swapped art -- */
.on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .on-dark { display: block; }
  :root:not([data-theme="light"]) .on-light { display: none; }
}
:root[data-theme="dark"] .on-dark { display: block; }
:root[data-theme="dark"] .on-light { display: none; }

/* ------------------------------------------------- the watching mark --
   The wordmark and the dragon emblem are separate layers cut from Brian's
   Sep 11 page, so the emblem can turn toward the visitor. Positions are the
   measured crop box as percentages of the 2168 x 958 lockup. */
.mark { position: relative; display: block; width: 100%; aspect-ratio: 2168 / 958; }
.mark__word { position: absolute; inset: 0; width: 100%; height: 100%; }
.mark__emblem {
  position: absolute; left: 64.576%; top: 43.841%; width: 20.849%; height: 47.182%;
  transform: rotate(var(--watch, 0deg)); transform-origin: 50% 50%;
  will-change: transform;
}
.mark__emblem img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The lid. A sliver of ground colour over the red eye, shown for a blink. */
.mark__lid {
  position: absolute; left: 44.6%; top: 24.6%; width: 5.6%; height: 4%;
  background: var(--sc-ink); opacity: 0; border-radius: 1px;
}
.mark.is-blinking .mark__lid { opacity: 1; }

/* ------------------------------------------------------------ buttons --
   Square. The fill slides in from the left on hover (transform only). */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  font-family: var(--sc-font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--sc-accent-ink); background: var(--sc-accent);
  border: 0; border-radius: 2px; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sc-ink);
  transform: scaleX(0.001); transform-origin: left center; opacity: 0;
  transition: transform 220ms var(--sc-ease-out), opacity 120ms var(--sc-ease-out);
}
.btn > span { transition: opacity 120ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: scaleX(1); opacity: 1; }
  .btn:hover { color: var(--sc-canvas); }
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--line { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-ink); }
.btn--line[aria-pressed="true"] { background: var(--sc-ink); color: var(--sc-canvas); }
.btn--line[aria-pressed="true"]::before { background: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .btn--line[aria-pressed="true"]:hover { color: var(--sc-accent-ink); } }
.btn--onred { background: var(--sc-accent-ink); color: #FCFBF9; }
.btn--onred::before { background: #FCFBF9; }
@media (hover: hover) and (pointer: fine) { .btn--onred:hover { color: #100F0E; } }

/* ------------------------------------------------------ theme control --
   One icon, no text. It sits left of the quote button and flips light and
   dark. Until it is pressed the page follows the system. */
.theme-icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 2px; background: transparent; color: inherit; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out);
}
.theme-icon svg { width: 20px; height: 20px; display: block; transition: transform 320ms var(--sc-ease-out); }
.theme-icon[aria-pressed="true"] svg { transform: rotate(180deg); }
.theme-icon:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .theme-icon:hover svg { transform: rotate(90deg); } .theme-icon[aria-pressed="true"]:hover svg { transform: rotate(270deg); } }

/* --------------------------------------------------------------- form -- */
.field { display: grid; gap: 8px; }
.field > label, .legend { font-family: var(--sc-font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 16px; font-size: 1rem;
  color: var(--sc-ink); background: var(--sc-canvas);
  border: 1px solid var(--sc-ink-soft); border-radius: 2px;
}
.field textarea { min-height: 144px; resize: vertical; line-height: 1.5; }
.field :is(input, select, textarea):hover { border-color: var(--sc-ink); }
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-color: var(--sc-ink); }
.field :is(input, select, textarea):disabled { opacity: 0.5; }
.field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--sc-accent); box-shadow: inset 0 -3px 0 var(--sc-accent); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.pick { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pick__box {
  display: grid; gap: 4px; min-height: 72px; padding: 16px; border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--sc-ink-soft);
}
.pick__box b { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.02em; }
.pick__box small { font-size: 1rem; color: var(--sc-ink-soft); }
.pick:hover .pick__box { box-shadow: inset 0 0 0 1px var(--sc-ink); }
.pick input:checked + .pick__box { box-shadow: inset 0 0 0 2px var(--sc-ink), inset 0 -6px 0 var(--sc-accent); }
.pick input:focus-visible + .pick__box { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.pick input:active + .pick__box { transform: translateY(1px); }

.form-error { font-weight: 600; color: var(--sc-ink); padding: 12px 16px; box-shadow: inset 4px 0 0 var(--sc-accent); background: var(--sc-surface); }
.form-error:empty { display: none; }
.form-note { font-size: 1rem; color: var(--sc-ink-soft); max-width: 64ch; }
.form-done { padding: 24px; background: var(--sc-surface); box-shadow: inset 0 4px 0 var(--sc-accent); }
.form-done[hidden] { display: none; }

/* ------------------------------------------------------- room detail --
   Figures come from the current 922dragon.com pages and are not yet
   confirmed by the studio. A value still owed reads as a placeholder. */
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.spec > div { display: grid; gap: 4px; padding-block: 12px; border-top: 1px solid var(--sc-hairline-strong); }
.spec dt { font-size: 1rem; color: var(--sc-ink-soft); }
.spec dd { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.spec dd.tbc { font-family: var(--sc-font-text); font-weight: 400; font-size: 1rem; color: var(--sc-ink-soft); font-style: italic; }
.spec--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 699px) { .spec--3 { gap: 0 12px; } .spec--3 dd { font-size: 1.0625rem; white-space: nowrap; } }
.included { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.included li { position: relative; padding-left: 20px; }
.included li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--sc-accent); }
.textlink { font-family: var(--sc-font-display); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-underline-offset: 6px; text-decoration-thickness: 2px; color: inherit; display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; font-size: 1rem; }
@media (hover: hover) and (pointer: fine) { .textlink:hover { text-decoration-color: var(--sc-accent); } }

/* The room dialog. Native <dialog>, so focus trapping and Esc come free. */
dialog.room-dialog {
  width: min(960px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: var(--keyline); border-radius: 2px;
  background: var(--sc-canvas); color: var(--sc-ink); overflow: hidden auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--sc-ink-soft) transparent;
}
dialog.room-dialog::backdrop { background: rgb(16 15 14 / 0.62); }
dialog.room-dialog[open] { animation: room-in 240ms var(--sc-ease-out); }
@keyframes room-in { from { opacity: 0; transform: translateY(16px); } }
.room-dialog__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 8px 24px; background: var(--sc-canvas); border-bottom: var(--keyline); }
.room-dialog__head h2 { font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0; }
.room-dialog__close { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 2px; }
.room-dialog__close svg { width: 20px; height: 20px; }
.room-dialog__close:active { transform: translateY(1px); }
.room-dialog__body { display: grid; gap: 24px; padding: 24px; }
.room-dialog__body .still { aspect-ratio: 16 / 9; }
.room-dialog__cols { display: grid; gap: 32px; }
.room-dialog__foot { display: grid; gap: 12px; justify-items: start; }
/* A long label wraps inside a dialog instead of pushing it sideways. */
dialog .btn { white-space: normal; text-align: center; max-width: 100%; }

/* The map dialog: Google's embed inside, "Open in tab" top right. */
dialog.map-dialog { width: min(1100px, calc(100vw - 24px)); height: min(760px, calc(100dvh - 24px)); padding: 0; border: var(--keyline); border-radius: 2px; background: var(--sc-canvas); color: var(--sc-ink); overflow: hidden; }
dialog.map-dialog[open] { display: grid; grid-template-rows: auto 1fr; animation: room-in 240ms var(--sc-ease-out); }
dialog.map-dialog::backdrop { background: rgb(16 15 14 / 0.62); }
.map-dialog__head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 24px; border-bottom: var(--keyline); }
.map-dialog__head h2 { font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.02em; margin-right: auto; }
.map-dialog__head .btn { min-height: 44px; padding: 8px 16px; font-size: 1rem; }
.map-dialog iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--sc-surface); }
@media (max-width: 699px) { .map-dialog__head { padding-left: 16px; } .map-dialog__head h2 { font-size: 1rem; } }
@media (min-width: 800px) {
  .room-dialog__body { padding: 32px; gap: 32px; }
  .room-dialog__cols { grid-template-columns: 7fr 5fr; gap: 48px; }
}

/* ------------------------------------------------------- stepped form --
   One question at a time. Without JS every step shows and the form still
   works as one long form. */
.steps__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.steps__count { font-size: 1rem; color: var(--sc-ink-soft); }
.steps__meter { height: 4px; background: var(--sc-surface); position: relative; overflow: hidden; }
.steps__meter i { position: absolute; inset: 0; background: var(--sc-accent); transform-origin: left; transform: scaleX(var(--done, 0)); transition: transform 320ms var(--sc-ease-out); }
.steps__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
[data-steps].is-stepped [data-step][hidden] { display: none; }
[data-steps].is-stepped [data-step]:not([hidden]) { animation: step-in 280ms var(--sc-ease-out); }
@keyframes step-in { from { opacity: 0; transform: translateX(24px); } }

/* keylined photograph, as Brian drew them: square corners, thin black line */
.still { margin: 0; border: var(--keyline); background: var(--sc-surface); overflow: hidden; }
.still img { width: 100%; height: 100%; object-fit: cover; }
.placeholder-tag { font-size: 1rem; color: var(--sc-ink-soft); margin-top: 8px; }

/* review ribbon: says on its face that this is a local design review */
.review { font-size: 1rem; color: var(--sc-ink-soft); max-width: 64ch; }
hgroup { display: grid; gap: 12px; margin: 0; }
.review a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn > span, .theme-icon svg, .steps__meter i { transition-duration: 1ms; }
  dialog.room-dialog[open], dialog.map-dialog[open], [data-steps].is-stepped [data-step]:not([hidden]) { animation: none; }
  .mark__emblem { transform: none; }
  .mark.is-blinking .mark__lid { opacity: 0; }
}


/* One-screen openers: the small arrow that says there is more below. It sits
   just above whatever bottom nav the page has (--opener-dock, set in shared.js). */
.opener-more {
  position: absolute; left: 50%; bottom: calc(var(--opener-dock, 0px) + 8px); margin-left: -24px; z-index: 3;
  display: grid; place-items: center; width: 48px; height: 48px; color: var(--sc-ink);
  animation: opener-more-bob 2.4s ease-in-out infinite;
}
.opener-more svg { width: 22px; height: 22px; }
@keyframes opener-more-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .opener-more { animation: none; } }