/* ============================================================
   WordPress-specific additions.

   theme.css is the approved design, copied verbatim, and is never
   edited — if the design changes, that file is replaced wholesale.
   Anything WordPress needs that the static mock-up had no reason to
   include lives here instead: the admin bar offset, editor output,
   pagination, and the alignment classes core emits.
   ============================================================ */

/* The admin bar is position:fixed at the top, so the sticky header has to
   start below it or it sits underneath and the nav becomes unclickable. */
body.admin-bar .hdr { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .hdr { top: 46px; }
}
@media screen and (max-width: 600px) {
  /* Core stops the admin bar being fixed below 600px, so the offset goes. */
  body.admin-bar .hdr { top: 0; }
}
body.admin-bar .nav { inset-block-start: calc(78px + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .nav { inset-block-start: calc(78px + 46px); }
}

/* ---------- editor output on Pages and posts ---------- */
.sk-prose { font-size: 17px; line-height: 1.78; color: var(--fg-2); }
.sk-prose > * + * { margin-top: 1.15em; }
.sk-prose h2 { font-size: clamp(24px, 3vw, 34px); color: var(--fg); margin-top: 1.7em; }
.sk-prose h3 { font-size: clamp(19px, 2.2vw, 24px); color: var(--fg); margin-top: 1.5em; }
.sk-prose h4 { font-size: 18px; color: var(--fg); margin-top: 1.4em; }
.sk-prose a  { color: var(--ember); text-underline-offset: 3px; }
.sk-prose a:hover { color: var(--ember-2); }
.sk-prose strong { color: var(--fg); }
.sk-prose ul, .sk-prose ol { padding-left: 1.3em; }
.sk-prose li + li { margin-top: .5em; }
.sk-prose blockquote {
  margin: 1.6em 0; padding: 22px 26px; border-radius: 16px;
  background: var(--bg-3); border-left: 3px solid var(--ember);
  font: italic 400 clamp(17px, 1.9vw, 20px)/1.58 var(--serif); color: var(--fg);
}
.sk-prose blockquote p { margin: 0; }
.sk-prose img,
.sk-prose .wp-block-image img { border-radius: 14px; }
.sk-prose figure { margin: 1.6em 0; }
.sk-prose figcaption {
  margin-top: 10px; font-size: 13.5px; color: var(--fg-3); text-align: center;
}
.sk-prose hr {
  border: 0; height: 1px; background: var(--stroke); margin: 2.4em 0;
}
.sk-prose code {
  background: var(--bg-3); border: 1px solid var(--stroke); border-radius: 4px;
  padding: 2px 7px; font-size: .92em;
}
.sk-prose pre {
  background: var(--bg-3); border: 1px solid var(--stroke); border-radius: 14px;
  padding: 20px; overflow-x: auto;
}
.sk-prose table { width: 100%; border-collapse: collapse; }
.sk-prose th, .sk-prose td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--stroke);
}
.sk-prose th { color: var(--fg); }

/* ---------- core alignment classes ---------- */
.alignleft  { float: left;  margin: .4em 1.6em 1.2em 0; }
.alignright { float: right; margin: .4em 0 1.2em 1.6em; }
.aligncenter { margin-inline: auto; }
.alignwide, .alignfull { max-width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13.5px; color: var(--fg-3); text-align: center; }
.sk-prose .alignleft, .sk-prose .alignright { max-width: 45%; }
@media (max-width: 620px) {
  .alignleft, .alignright { float: none; margin-inline: 0; max-width: 100%; }
}

/* ---------- pagination ---------- */
.pagination .nav-links {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
}
.pagination .page-numbers {
  display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 14px;
  border: 1px solid var(--stroke); border-radius: 100px; background: var(--bg-3);
  color: var(--fg-2); text-decoration: none;
  font: 600 13px/1 var(--sans); transition: .28s;
}
.pagination .page-numbers:hover {
  border-color: var(--stroke-2); color: var(--fg); transform: translateY(-2px);
}
.pagination .page-numbers.current {
  background: var(--ember); border-color: var(--ember); color: #14100D;
}
.pagination .page-numbers.dots { border-color: transparent; background: none; }

/* ---------- footer menu, when one is assigned ---------- */
.ft .menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

/* ============================================================
   Heading outline

   theme.css styles some headings by tag (.ft h4, .step h3, .proj h3,
   h3.h3, .ok h4). The document outline needs different tags in a few
   places — the footer column titles are h2, and section sub-headings
   become h2 when a page masthead has already supplied the section's
   heading (sk_bare). These rules are those selectors verbatim, keyed
   on a class instead of the tag, so nothing changes visually.
   ============================================================ */
.ft .ft__h {
  font: 700 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ember); margin-bottom: 20px;
}
.ok .ok__h { font-size: 20px; margin-bottom: 8px; }
h2.h3.sk-bare { font-size: clamp(21px, 2.4vw, 30px); }
.step h2.sk-bare { font-size: 19px; margin-bottom: 12px; }
.proj h2.sk-bare { font-size: 19.5px; margin-bottom: 10px; }

/* ============================================================
   Inner pages

   The homepage keeps the full-bleed cinematic hero. Inner pages are
   read rather than landed on, so they open with a quieter masthead:
   the h1 leads, and any photograph sits beside the text instead of
   behind it.
   ============================================================ */
.phero { padding-block: clamp(56px, 8vw, 104px) clamp(30px, 4vw, 52px); }
.phero__in { display: block; }
.phero h1.h {
  font-size: clamp(34px, 6vw, 74px);
  text-wrap: balance;
}
/* theme.css scopes the muted second line to h2.h .dim; page mastheads lead
   with an h1, so it needs saying again here or the line renders full-strength */
.phero h1.h .dim { color: var(--fg-3); }
.phero__lede { margin-top: 22px; max-width: 62ch; }

/* With a photograph, the masthead becomes two columns. */
.phero--split .phero__in {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}
.phero__fig {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  position: relative;
}
/* Square, not 4:3. Most of these photographs are portrait format — a person
   holding a panel — and a landscape crop cuts the head off. */
.phero__fig img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 30%;
}
.phero__fig figcaption {
  padding: 14px 20px;
  font: 500 13px/1.5 var(--sans);
  color: var(--fg-3);
  background: var(--bg-3);
}
@media (max-width: 900px) {
  .phero--split .phero__in { grid-template-columns: 1fr; }
}

/* ---------- closing call to action ---------- */
.sk-cta__in {
  display: grid;
  grid-template-columns: 1.3fr auto;
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  background: var(--bg-3);
  position: relative;
  overflow: hidden;
}
.sk-cta__in::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 100% 0%, rgba(226,112,58,.12), transparent 62%);
  pointer-events: none;
}
.sk-cta__in > * { position: relative; }
.sk-cta__act { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 820px) {
  .sk-cta__in { grid-template-columns: 1fr; }
}

/* ---------- gallery archive ---------- */
.sk-archive__note {
  margin: 0 0 8px;
  font: 500 13px/1.6 var(--sans);
  color: var(--fg-3);
}

/* ---------- screen-reader helper core expects ---------- */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}