/* =========================================================================
   SITE CORE
   Structure shared by every edition. No colour decisions, no type choices,
   no personality — those live in edition-*.css and are the only files a new
   art direction needs to touch.

   Everything is scoped under .site so that three complete websites and the
   Mavie interface can share one document without leaking into each other,
   and every breakpoint is a *container* query so a site rendered at 390px
   inside a phone frame lays itself out exactly as it would on a phone.
   ========================================================================= */

.site {
  container-type: inline-size;
  container-name: site;

  /* ---- tokens: every one of these is overridden per edition ---- */
  --paper: #ffffff;
  --paper-2: #f4f4f4;
  --ink: #111111;
  --ink-soft: #555555;
  --ink-faint: #8a8a8a;
  --accent: #333333;
  --accent-ink: #ffffff;
  --rule: #dddddd;
  --rule-heavy: #111111;

  --font-display: Georgia, serif;
  --font-text: Georgia, serif;
  --font-label: system-ui, sans-serif;

  --display-weight: 400;
  --display-tracking: 0;
  --display-leading: 1.04;
  --title-leading: 1.1;
  --body-leading: 1.62;

  --label-size: 0.72rem;
  --label-tracking: 0.16em;
  --label-weight: 500;
  --label-transform: uppercase;

  --measure: 62ch;
  --gutter: 24px;
  --container: 1180px;
  --sec-pad: 68px;
  --radius: 0px;
  --radius-lg: 0px;

  --motion-dur: 240ms;
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-travel: 8px;

  --btn-radius: 0px;
  --btn-pad: 0.9em 1.5em;
  --btn-weight: 600;

  position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.site *,
.site *::before,
.site *::after { box-sizing: border-box; }

.site h1, .site h2, .site h3, .site h4,
.site p, .site ul, .site ol, .site dl, .site dd, .site figure,
.site blockquote, .site fieldset { margin: 0; padding: 0; }

.site ul, .site ol { list-style: none; }
.site img { display: block; max-width: 100%; height: auto; }
.site a { color: inherit; }
.site button { font: inherit; color: inherit; }

/* ------------------------------------------------------------------ layout */

.sec { padding-block: var(--sec-pad); position: relative; }
.sec__inner {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.sec__head { margin-bottom: 2.4rem; }
.sec__title { font-family: var(--font-display); line-height: var(--title-leading); }
.sec__lede { color: var(--ink-soft); max-width: var(--measure); margin-top: 0.8rem; }
.sec__note { color: var(--ink-faint); font-size: 0.88rem; margin-top: 1.6rem; max-width: var(--measure); }
.sec__more { margin-top: 2.2rem; }
.sec__mark {
  display: block;
  font-family: var(--font-label);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  color: var(--ink-faint);
  margin-bottom: 0.8rem;
}

.eyebrow {
  font-family: var(--font-label);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
  font-weight: var(--label-weight);
  color: var(--ink-soft);
}

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule--heavy { border-top-color: var(--rule-heavy); }
.rule--short { width: 44px; }

.mono {
  font-family: 'Fragment Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 40;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7em 1.1em;
  transition: top 120ms;
}
.skip-link:focus { top: 8px; }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--btn-pad);
  border-radius: var(--btn-radius);
  font-family: var(--font-label);
  font-weight: var(--btn-weight);
  font-size: 0.94rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--motion-dur) var(--motion-ease),
              color var(--motion-dur) var(--motion-ease),
              transform var(--motion-dur) var(--motion-ease),
              border-color var(--motion-dur) var(--motion-ease);
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-heavy); }
.btn__arrow { transition: transform var(--motion-dur) var(--motion-ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* A real interface specimen for app, form and portal templates. It occupies
   the same structural slot as a hero photograph while each edition supplies
   its own typography, colour and geometry. */
.site .product-ui {
  overflow: hidden;
  border: 1px solid var(--rule-heavy);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  color: var(--ink);
  text-align: left;
}
.site .product-ui__bar {
  display: flex;
  min-height: 38px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  gap: 5px;
}
.site .product-ui__bar > i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.site .product-ui__bar > span { overflow: hidden; margin-left: auto; color: var(--ink-faint); font: 500 .62rem/1 var(--font-label); letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.site .product-ui__body { padding: clamp(22px, 4cqw, 52px); }
.site .product-ui__body > p { color: var(--ink-faint); font: var(--label-weight) var(--label-size)/1.2 var(--font-label); letter-spacing: var(--label-tracking); text-transform: var(--label-transform); }
.site .product-ui__body > h2 { max-width: 12ch; margin-top: .65rem; font: var(--display-weight) clamp(2rem, 5cqw, 4.6rem)/1 var(--font-display); letter-spacing: var(--display-tracking); }
.site .product-ui__rows { display: grid; margin-top: clamp(24px, 4cqw, 46px); border-top: 1px solid var(--rule); }
.site .product-ui__row { display: grid; min-height: 58px; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--rule); grid-template-columns: minmax(90px, .55fr) minmax(0, 1fr) auto; gap: 1rem; }
.site .product-ui__row span { color: var(--ink-faint); font: 600 .68rem/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.site .product-ui__row strong { overflow: hidden; font: 600 .92rem/1.25 var(--font-text); text-overflow: ellipsis; white-space: nowrap; }
.site .product-ui__row i { color: var(--accent); font: 500 .65rem/1 var(--font-label); font-style: normal; }
.site .product-ui__body > button { display: inline-flex; margin-top: 24px; padding: var(--btn-pad); border: 1px solid transparent; border-radius: var(--btn-radius); background: var(--accent); color: var(--accent-ink); font-weight: var(--btn-weight); gap: .7rem; }

/* -------------------------------------------------------------- the slots */
/* A placeholder is not an error state. It is a piece of the design that has
   been drawn and left open, and it has to look like a decision. */

.ph {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-family: var(--font-label);
  font-size: 0.82em;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 500;
  color: var(--ink-faint);
  border-bottom: 1px dashed color-mix(in srgb, var(--ink-faint) 55%, transparent);
  padding-bottom: 0.15em;
  line-height: 1.4;
  text-align: left;
}
.ph__mark {
  font-size: 0.9em;
  opacity: 0.65;
  transform: translateY(-0.05em);
}
.ph--block {
  display: flex;
  align-items: flex-start;
  min-height: 3.4em;
  padding: 0.7em 0.9em;
  border: 1px dashed color-mix(in srgb, var(--ink-faint) 45%, transparent);
  border-radius: var(--radius);
  width: 100%;
  max-width: var(--measure);
}
.ph--quote {
  display: flex;
  align-items: flex-start;
  min-height: 4.2em;
  padding: 1em 1.2em;
  border: 1px dashed color-mix(in srgb, var(--ink-faint) 45%, transparent);
  border-radius: var(--radius);
  font-size: 0.7em;
  width: 100%;
}

/* A sector default reads as ordinary prose until review mode asks about it. */
.sd { display: inline; }

/* Review mode: one data attribute, no re-render. */
.site[data-review='on'] .ph {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.site[data-review='on'] .ph--block,
.site[data-review='on'] .ph--quote { border-color: var(--accent); }
.site[data-review='on'] .sd {
  background: color-mix(in srgb, #d8a02a 26%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, #a97a12 60%, transparent);
}
.site[data-review='on'] .sd::after {
  content: '?';
  display: inline-block;
  margin-left: 0.35em;
  font-family: var(--font-label);
  font-size: 0.7em;
  font-weight: 700;
  vertical-align: super;
  color: #8a6410;
}

/* ------------------------------------------------------------------ images */

.fig { display: block; position: relative; }
.fig__frame { display: block; position: relative; overflow: hidden; }
.fig img { width: 100%; height: 100%; object-fit: cover; }
.fig__caption {
  margin-top: 0.7rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* -------------------------------------------------------------------- meta */

.hero__meta, .detail { display: grid; gap: 0; }
.meta__row, .detail__row, .hours__row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 32%) 1fr;
  gap: 1rem;
  padding-block: 0.7rem;
  align-items: baseline;
}
.meta__row dt, .detail__row dt, .hours__row dt {
  font-family: var(--font-label);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------- forms */

.form__fields { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field__label {
  font-family: var(--font-label);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
  color: var(--ink-soft);
}
.field__control {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.72em 0.8em;
  width: 100%;
  transition: border-color 140ms;
}
.field__control:focus { outline: none; border-color: var(--accent); }
.form .btn { margin-top: 1.4rem; }
.form__note { margin-top: 1rem; font-size: 0.88rem; color: var(--ink-soft); }
.form__preview-note:empty { display: none; }
.form__preview-note {
  margin-top: 0.9rem;
  font-size: 0.86rem;
  padding: 0.7em 0.9em;
  border: 1px dashed var(--rule-heavy);
  border-radius: var(--radius);
  color: var(--ink-soft);
}

@container site (min-width: 640px) {
  .form__fields { grid-template-columns: 1fr 1fr; }
  .field--textarea, .field--file { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------- faq */

.faq__item { border-top: 1px solid var(--rule); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1.05rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.08rem;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__sign {
  flex: none;
  width: 13px; height: 13px;
  position: relative;
}
.faq__sign::before, .faq__sign::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform var(--motion-dur) var(--motion-ease);
}
.faq__sign::before { inset: 6px 0 6px 0; height: 1px; }
.faq__sign::after { inset: 0 6px 0 6px; width: 1px; }
.faq__item[open] .faq__sign::after { transform: scaleY(0); }
.faq__a { padding-bottom: 1.2rem; color: var(--ink-soft); max-width: var(--measure); }

/* ------------------------------------------------------------------ reveal */

.site[data-reveal-ready] .sec[data-reveal] {
  opacity: 0;
  transform: translateY(var(--motion-travel));
  transition: opacity var(--motion-dur) var(--motion-ease),
              transform var(--motion-dur) var(--motion-ease);
}
.site[data-reveal-ready] .sec[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .site[data-reveal-ready] .sec[data-reveal] { opacity: 1; transform: none; }
}

/* A page head with no image must not hold open the column where one would
   have gone. Specificity here deliberately beats the per-edition rules. */
.site .pagehead:not(:has(.pagehead__figure)) { grid-template-columns: 1fr; }

/* --------------------------------------------------------------- site body */

.site__main { display: block; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}
.wordmark__name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: -0.005em;
}
.wordmark__logo { height: 34px; width: auto; }

.nav__list { display: flex; flex-wrap: wrap; gap: 1.35rem; }
.nav__link {
  text-decoration: none;
  font-family: var(--font-label);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
}

/* Focus is designed, not defaulted. Editions restyle it; nothing removes it. */
.site :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}