/* /contact: the throat chakra's page. The details, the message form and the official pages are plain lines and fields on the temple black,
   a hairline between the beats, the ripples of the layer (assets/css/ds/chakra.css, assets/js/shell/chakra.js) travelling outward behind them.
   No boxes, no cards. The page wears Temple Dark in both themes (the wrapper carries .ds-theme-dark). Tokens only.
   The form is a plain POST that assets/js/shell/contact.js upgrades; its field names, honeypot and messages are unchanged. */
.ct-world { --ck: var(--ck-throat); --ct-pad: max(var(--ds-gutter, 1rem), calc((100% - 72rem) / 2)); font-family: var(--ds-font-ui); font-size: var(--ds-text-md); line-height: var(--ds-leading-normal); color: var(--ds-text); min-inline-size: 0; }
.ct-world :is(a, button, input, textarea):focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 3px; border-radius: var(--ds-radius-sm); }
.ct-world .ds-chakra-beat { box-sizing: border-box; padding-inline: var(--ct-pad); padding-block: clamp(3.5rem, 11vh, 7rem) 0; }
.ct-world .ds-chakra-beat > * { max-inline-size: none; margin-inline: 0; }
.ct-world .ds-chakra-beat--rule { border-block-start: 0; }
.ct-world .ct-open { display: flex; align-items: center; min-block-size: min(34rem, 70svh); padding-block: calc(var(--ds-header-h) + var(--ds-space-8)) var(--ds-space-6); }
.ct-world .ct-beat:last-of-type { padding-block-end: clamp(3rem, 9vh, 6rem); }
.ct-col { display: flex; flex-direction: column; gap: var(--ds-space-5); min-inline-size: 0; max-inline-size: 36rem; }
.ct-world .ct-beat > .ct-col { padding-block-start: var(--ds-space-6); border-block-start: 1px solid var(--ds-border); }

/* the voice: Cormorant Garamond, a soft halo of the centre's colour and of the black keeps it readable wherever a ripple passes */
.ct-title, .ct-h { margin: 0; font-family: var(--ds-font-display); font-weight: 500; text-wrap: balance; color: var(--ds-text);
  text-shadow: 0 0 2.2rem color-mix(in srgb, var(--ck) 38%, transparent), 0 0 .6rem color-mix(in srgb, var(--ds-surface-sunken) 80%, transparent); }
.ct-title { font-size: clamp(2.9rem, 1.9rem + 5vw, 6rem); line-height: .98; letter-spacing: -.012em; }
.ct-h { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem); line-height: 1.04; letter-spacing: -.01em; }
.ct-world :is(.ct-lede, .ct-note, .ct-next__note, .story-facts, .contact-form, .contact-links) { text-shadow: 0 0 .7rem color-mix(in srgb, var(--ds-surface-sunken) 90%, transparent), 0 0 .2rem color-mix(in srgb, var(--ds-surface-sunken) 80%, transparent); }
.ct-lede { margin: 0; max-inline-size: 34rem; font-size: var(--ds-text-lg); text-wrap: pretty; }
.ct-note { margin: 0; max-inline-size: 36rem; color: var(--ds-text-muted); }
.ct-world a { color: var(--ds-accent); text-underline-offset: .2em; }

/* the details: plain lines, the label small and quiet, the value in the voice (numbers in lining tabular figures) */
.ct-world .story-facts { display: grid; gap: var(--ds-space-5); margin: 0; }
.ct-world .story-facts__row { display: grid; gap: var(--ds-space-1); padding: 0; border: 0; }
.ct-world .story-facts dt { margin: 0; font-size: var(--ds-text-sm); letter-spacing: 0; text-transform: none; color: var(--ds-text-muted); }
.ct-world .story-facts dd { margin: 0; font-size: var(--ds-text-lg); overflow-wrap: anywhere; }
.contact-num { font-family: var(--ds-font-display); font-size: var(--ds-text-3xl); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.contact-ways { display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-6); margin-block-start: var(--ds-space-1); }
.contact-ways a, .contact-link { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--ds-accent); text-underline-offset: .2em; }
.contact-addr { font-style: normal; }
.contact-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-7); }

/* the message form: fields keep the shared field look, the messages are plain lines with a mark in front, nothing is boxed */
.contact-form { display: flex; flex-direction: column; gap: var(--ds-space-5); max-inline-size: 34rem; }
.contact-form .ds-input { background: var(--ds-surface); text-shadow: none; }
.contact-form__hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.contact-form__ok, .contact-form__error { margin: 0; padding: 0 0 0 var(--ds-space-4); border: 0; border-inline-start: 2px solid var(--ds-border); border-radius: 0; background: none; color: var(--ds-text); }
.contact-form__ok { border-inline-start-color: var(--ds-success); }
.contact-form__error { border-inline-start-color: var(--ds-danger); }
.contact-form__ok[hidden], .contact-form__error[hidden] { display: none; }
.contact-form__actions .ds-button { min-block-size: 2.75rem; text-shadow: none; }
.contact-form .ds-hint a { color: var(--ds-accent); }

/* what to do next: two plain choices, each with its line */
.ct-next { display: grid; gap: var(--ds-space-6); max-inline-size: 30rem; }
.ct-next__cell { display: grid; gap: var(--ds-space-2); justify-items: start; align-content: start; min-inline-size: 0; }
.ct-next__note { margin: 0; color: var(--ds-text-muted); }
.ct-world .ds-button { text-shadow: none; }
.ct-world .ds-chakra-why { margin-block-end: 0; }
@media (min-width: 48rem) {
  .ct-world .story-facts { gap: var(--ds-space-6); }
  .ct-world .story-facts__row { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--ds-space-6); align-items: baseline; }
  .ct-next { grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 44rem; }
}