/* site.css — Mara Osei. Builds on tokens.css; only the things tokens.css does not carry. */

/* LIGHT L1: the base takes the product's temperature. Warm umber for a photographer whose register is warm.
   (tokens.css says "do not re-declare its variables"; L1 and the tokens.css comment both say to set the warm base here. See notes.) */
:root { --ln-bg: #0d0b09; }

html { scroll-behavior: auto; }
img { color: var(--ln-text-3); font: 400 12px/16px var(--ln-font); } /* alt text, if a stand-in fails to load */

/* ── WORK composition: tokens.css now carries .work / .work-ground / .work-main / .work-strip / .work-caption. Only the anchors are ours. ── */
.work-ground { display: block; }                       /* the ground is a link to the Work page (L3: one focusable thing) */
.work-strip a { display: block; border-radius: 8px; }

/* ledger straight on the page: the chapter's scene (L3) */
.ledger.on-page { margin: 96px 76px 0; }               /* the 880px measure is the package's now */
.ledger-row .fig-value { white-space: nowrap; }

/* footer */
.mk-footer-line { margin: 8px 0 0; font: 400 13px/19.5px var(--ln-font); color: var(--ln-text-3); }
.mk-footer > div:first-child { min-width: 260px; }

/* ── WORK page: the package's .work-grid; every row is a span of 12 or a two-up of 6 ── */
.work-head { padding: 96px 76px 0; }
.work-head .mk-support { margin-top: 24px; }
.work-grid { row-gap: 40px; margin-top: 64px; }
.work-grid .s12 { grid-column: span 12; } .work-grid .s6 { grid-column: span 6; }
.work-grid .p img { aspect-ratio: 1067 / 1600; } .work-grid figure:not(.p) img { aspect-ratio: 1600 / 1067; }
.work-foot { padding: 96px 76px 0; }
.work-foot + .mk-footer { margin-top: 96px; }

/* ── ENQUIRE: task / consumer shell (CORE §2, §5) ── */
.task-header { position: fixed; inset: 0 0 auto 0; height: 44px; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px 24px;
  border-bottom: 1px solid var(--ln-line); background: color-mix(in srgb, var(--ln-bg) 90%, transparent); backdrop-filter: blur(12px); }
.task-header-spacer { height: 44px; }
.task-brand { display: inline-flex; align-items: center; min-height: 44px; font: 510 13px/19.5px var(--ln-font); color: var(--ln-text); text-decoration: none; }
.task-utils { display: flex; align-items: center; gap: 8px; }
.task-utils a { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 9999px; font: 510 12px/14px var(--ln-font); color: var(--ln-text-3); text-decoration: none; background: var(--ln-tab); }
.task-utils a:hover { color: var(--ln-text); }
.task-utils [data-nav-open] { display: none; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ln-text-2); cursor: pointer; }
.task-canvas { max-width: 560px; padding: 40px 76px 96px; box-sizing: content-box; }
.task-view { view-transition-name: view; }
.task-view .description { margin-top: 8px; }
#enquire-form { margin-top: 32px; display: flex; flex-direction: column; gap: 24px; }
.f { display: flex; flex-direction: column; gap: 8px; }
.f label { font: 510 13px/19.5px var(--ln-font); color: var(--ln-text-2); }
.f label .opt { font-weight: 400; color: var(--ln-text-3); margin-left: 6px; }
.f .field { width: 100%; font-size: 14px; color-scheme: dark; }
.f .textarea { height: auto; min-height: 120px; padding: 10px; line-height: 1.5; resize: vertical; font-family: var(--ln-font); }
.f .field::placeholder { color: var(--ln-text-3); }
.f .field[aria-invalid="true"] { border-color: var(--ln-red); }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 36px; text-overflow: ellipsis; }
.select-wrap::after { content: ""; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border: solid var(--ln-text-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.f-err { margin: 0; font: 400 12px/16px var(--ln-font); color: var(--ln-red); }
.f-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.f-rule { margin: 0; font: 400 13px/19.5px var(--ln-font); color: var(--ln-text-3); }
.glyph.ok { color: var(--ln-green); vertical-align: -1px; margin-right: 6px; }
.props-list { margin: 24px 0 0; display: grid; grid-template-columns: 96px 1fr; column-gap: 8px; row-gap: 12px; font: 400 13px/19.5px var(--ln-font); }
.props-list dt { color: var(--ln-text-3); } .props-list dd { margin: 0; color: var(--ln-text-2); overflow-wrap: anywhere; }
#done-summary + .f-actions { margin-top: 32px; }

/* ── motion: CORE §7 site page-to-page is a hard swap (no crossfade); the shell never moves. ── */
@media (prefers-reduced-motion: no-preference) {
  html[data-transition="site"]::view-transition-old(root), html[data-transition="site"]::view-transition-new(root) { animation-duration: 0s; }
  ::view-transition-group(site-header) { animation-duration: 0s; }
}
.mk-header, .task-header { view-transition-name: site-header; }

/* ── phone ── */
@media (max-width: 767px) {
  .ledger.on-page { margin: 48px 23px 0; }
  .mk-footer { padding: 40px 23px 64px; } .mk-footer > div { padding: 0; min-width: 0; } .mk-footer > div:first-child { grid-column: 1 / -1; margin-bottom: 24px; }
  .work-head { padding: 48px 23px 0; }
  .work-grid { margin-top: 40px; row-gap: 24px; }
  .work-grid .s12, .work-grid .s6 { grid-column: 1 / -1; } .work-grid .s6.p { grid-column: span 3; } /* portrait pairs stay two-up; landscapes go full width */
  .work-foot { padding: 48px 23px 0; }
  .task-header { height: 60px; padding: 8px 8px 8px 23px; } .task-header-spacer { height: 60px; }
  .task-utils a:not(.mk-cta) { display: none; } .task-utils [data-nav-open] { display: inline-grid; }
  .task-canvas { padding: 24px 23px 64px; max-width: none; box-sizing: border-box; }
  .f .field { height: 44px; } .f .textarea { height: auto; }
  .f-actions .task-primary-action { width: 100%; justify-content: center; }
  .props-list { grid-template-columns: 80px 1fr; }
}