:root {
  color-scheme: dark;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #0c0d09;
  color: var(--omega-stone);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

body::before {
  position: fixed;
  z-index: 1000;
  inset: 0;
  border: 1px solid var(--omega-hair);
  content: "";
  pointer-events: none;
}

body.omega-menu-open {
  overflow: hidden;
}

@keyframes omega-rise-in {
  from {
    opacity: 0;
    transform: translateY(var(--omega-rise));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
select {
  cursor: pointer;
}

/* The reference draws clean input wells, so no number field anywhere gets the
   browser's native spinner. Every one of these is a measurement or a quantity
   that is typed, not nudged. */
input[type="number"] {
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

:focus-visible {
  outline: 2px solid var(--omega-ember);
  outline-offset: 4px;
}

.screen-reader-text {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Core block normalisation.
 *
 * The marketing pages are composed in the block editor, so their sections
 * arrive wrapped in `wp-block-*` elements that carry WordPress's own spacing
 * and, for images, an extra `<figure>` between the section and the `<img>`.
 * The design's spacing lives on the OMEGA classes, so the block defaults are
 * flattened here rather than fought section by section.
 *
 * This is deliberately narrow: layout is neutralised, appearance is not, so a
 * block the theme has no opinion about still looks like itself.
 * ------------------------------------------------------------------------ */
.wp-block-group,
.wp-block-buttons,
.wp-block-image,
.wp-block-list,
.wp-block-heading,
.wp-block-image figcaption {
  margin: 0;
}

/* An image block is a figure wrapping the image, and sometimes a link too.
   Nothing in this design wants that figure to have a size of its own. */
.wp-block-image,
.wp-block-image > a {
  display: block;
  max-width: 100%;
}

.wp-block-list {
  padding: 0;
}

/* Core buttons carry the theme's button. The category strip on the home hero
   is the one place buttons are laid out as flat grid cells instead, and it
   opts out below. */
.wp-block-button__link {
  border-radius: 0;
}

.omega-display,
h1,
h2,
h3 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  line-height: 0.94;
}

.omega-kicker,
.omega-mono,
.omega-site-header,
.omega-site-footer {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.omega-site-frame {
  position: relative;
  min-height: 100vh;
  background: var(--omega-grain), var(--omega-plaster), var(--omega-bark);
  background-blend-mode: overlay, normal, normal;
}

.omega-site-header {
  /* Sticky on every route except the front page, whose header is an overlay on
     the hero until the scroll transform lands. */
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 86px;
  padding: 24px var(--omega-gutter);
  border-bottom: 1px solid var(--omega-hair);
  background: var(--omega-bark);
}

.omega-site-header--overlay {
  position: absolute;
  inset: 28px 0 auto;
  height: 52px;
  border: 0;
  background: transparent;
}

.omega-site-header__origin {
  color: var(--omega-sand);
}

.omega-site-header__brand {
  display: block;
  width: 150px;
}

.omega-site-header__brand img,
.omega-site-footer__brand img {
  filter: invert(1);
}

.omega-site-header__nav,
.omega-site-header__actions {
  display: flex;
  align-items: center;
  gap: 28px;
}

.omega-site-header__nav {
  justify-content: center;
}

.omega-site-header__actions {
  justify-content: flex-end;
}

.omega-site-header__nav a,
.omega-site-header__actions a,
.omega-site-header__actions span {
  transition: color 180ms ease;
}

.omega-site-header__nav a:hover,
.omega-site-header__actions a:hover {
  color: var(--omega-bronze);
}

.omega-site-header__nav a[aria-current="page"] {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--omega-ember);
  color: var(--omega-paper);
}

.omega-category-menu,
.omega-header-search {
  position: relative;
}

.omega-category-menu summary,
.omega-header-search summary {
  cursor: pointer;
  list-style: none;
  transition: color 180ms ease;
}

.omega-category-menu summary::-webkit-details-marker,
.omega-header-search summary::-webkit-details-marker {
  display: none;
}

.omega-category-menu summary::after {
  margin-inline-start: 7px;
  content: "↓";
  color: var(--omega-bronze);
}

.omega-category-menu[open] summary,
.omega-header-search[open] summary,
.omega-category-menu summary:hover,
.omega-header-search summary:hover {
  color: var(--omega-bronze);
}

.omega-category-menu__panel,
.omega-header-search__panel {
  position: absolute;
  inset-block-start: calc(100% + 18px);
  z-index: 40;
  min-width: 230px;
  padding: 18px;
  border: 1px solid var(--omega-hair);
  background: var(--omega-bark);
  box-shadow: 0 18px 45px rgb(0 0 0 / 32%);
}

.omega-category-menu__panel {
  inset-inline-start: -18px;
}

.omega-category-menu__panel a {
  display: block;
  padding: 8px 0;
  white-space: nowrap;
}

.omega-header-search__panel {
  inset-inline-end: 0;
  width: min(430px, 80vw);
}

.omega-product-search {
  display: flex;
  border-bottom: 1px solid var(--omega-bronze);
}

.omega-product-search input[type="search"] {
  min-width: 0;
  flex: 1;
  padding: 12px 4px;
  border: 0;
  background: transparent;
  outline: 0;
}

.omega-product-search button {
  padding: 12px 4px 12px 18px;
  border: 0;
  background: transparent;
  font-family: var(--omega-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.omega-site-footer__social {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--omega-hair);
}

.omega-site-footer__social > span {
  color: var(--omega-sand);
}

.omega-site-footer__social a:hover,
.omega-site-footer__social a:focus-visible {
  color: var(--omega-bronze);
}

.omega-cart-link {
  display: inline-flex;
  gap: 8px;
}

.omega-cart-link__count {
  color: var(--omega-bronze);
}

.omega-site-header__menu-button,
.omega-mobile-menu {
  display: none;
}

.omega-site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  padding: 48px var(--omega-gutter);
  border-top: 1px solid var(--omega-hair);
  background: var(--omega-bark);
}

.omega-site-footer__brand {
  width: 220px;
}

.omega-site-footer__links,
.omega-site-footer__links nav,
.omega-site-footer__links address {
  display: flex;
}

.omega-site-footer__links {
  grid-column: 2 / 4;
  justify-content: flex-end;
  gap: 56px;
}

.omega-site-footer__links nav,
.omega-site-footer__links address {
  flex-direction: column;
  gap: 10px;
}

.omega-site-footer__links address {
  color: var(--omega-stone);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

/* Customer policies. A single quiet row, wrapping on narrow screens, sitting
   between the navigation and the seller identity because that is the order a
   reader and a payment reviewer both look in. */
.omega-site-footer__policies {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--omega-hair);
}

.omega-site-footer__policies a {
  color: var(--omega-stone);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.omega-site-footer__policies a:hover,
.omega-site-footer__policies a:focus-visible {
  color: var(--omega-paper);
}

/* When the policies row is present it already draws the dividing rule, so the
   seller identity below it must not draw a second one. */
.omega-site-footer__policies + .omega-site-footer__legal {
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}

/* Legal seller identity. Sits below the columns on its own rule, quieter than
   the navigation — it is required, not promotional. */
.omega-site-footer__legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--omega-hair);
  color: var(--omega-sand);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.omega-site-footer__legal p {
  margin: 0;
}

.omega-generic {
  min-height: calc(100vh - 252px);
  padding: 88px var(--omega-gutter);
}

.omega-generic__content {
  max-width: 760px;
}

.omega-generic h1 {
  margin-bottom: 32px;
  font-size: clamp(54px, 7vw, 104px);
}

.omega-generic__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 40px;
}

.omega-generic__link {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--omega-ember);
  color: var(--omega-paper);
  font-size: 15px;
  font-weight: 500;
}

/* Long-form body copy. The legal and policy pages required by L4-04 arrive as
   editor content, so they need typography here rather than a template each. */
.omega-prose {
  max-width: var(--omega-measure);
  font-size: 17px;
  line-height: 1.62;
}

.omega-prose > * + * {
  margin-top: 1.1em;
}

.omega-prose h2 {
  margin-top: 1.8em;
  font-size: 34px;
}

.omega-prose h3 {
  margin-top: 1.6em;
  font-size: 24px;
}

.omega-prose ul,
.omega-prose ol {
  padding-inline-start: 1.4em;
}

.omega-prose li + li {
  margin-top: 0.5em;
}

.omega-prose a {
  border-bottom: 1px solid var(--omega-ember);
  color: var(--omega-paper);
}

.omega-prose strong {
  color: var(--omega-paper);
  font-weight: 500;
}

.omega-prose table {
  width: 100%;
  border-collapse: collapse;
}

.omega-prose th,
.omega-prose td {
  padding: 12px 0;
  border-bottom: 1px solid var(--omega-hair);
  text-align: start;
}

[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
  font-family: "IBM Plex Sans Arabic", sans-serif;
}

[dir="rtl"] .omega-display,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
  font-family: "Amiri", serif;
}

[dir="rtl"] .omega-kicker,
[dir="rtl"] .omega-mono,
[dir="rtl"] .omega-site-header,
[dir="rtl"] .omega-site-footer {
  font-family: "IBM Plex Sans Arabic", sans-serif;
}

/* The expanded discovery navigation no longer fits honestly at tablet widths.
   Use the same accessible menu there instead of squeezing or overflowing it. */
@media (min-width: 701px) and (max-width: 1050px) {
  .omega-site-header,
  .omega-site-header--overlay {
    position: sticky;
    inset: 0 auto auto;
    display: flex;
    justify-content: space-between;
    height: 72px;
    min-height: 72px;
    padding: 0 var(--omega-gutter);
    border-bottom: 1px solid var(--omega-hair);
    background: var(--omega-bark);
  }

  .omega-site-header--overlay {
    position: absolute;
    inset: 18px 0 auto;
    border: 0;
    background: transparent;
  }

  .omega-site-header__nav,
  .omega-site-header__actions {
    display: none;
  }

  .omega-site-header__menu-button {
    display: block;
    min-width: var(--omega-hit);
    min-height: var(--omega-hit);
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--omega-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .omega-mobile-menu {
    position: fixed;
    z-index: 25;
    inset: 0;
    display: flex;
    visibility: hidden;
    overflow-y: auto;
    flex-direction: column;
    justify-content: flex-start;
    gap: 22px;
    padding: 100px var(--omega-gutter) 44px;
    background: var(--omega-bark);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .omega-mobile-menu[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .omega-mobile-menu > a,
  .omega-category-menu--mobile summary {
    font-family: var(--omega-display);
    font-size: 46px;
    line-height: .95;
  }

  .omega-product-search--mobile {
    margin-bottom: 12px;
  }

  .omega-category-menu--mobile .omega-category-menu__panel {
    position: static;
    min-width: 0;
    padding: 10px 0 0 18px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .omega-category-menu--mobile .omega-category-menu__panel a {
    display: block;
    font-family: var(--omega-sans);
    font-size: 16px;
    line-height: 1.4;
  }
}

@media (max-width: 700px) {
  .omega-site-header,
  .omega-site-header--overlay {
    position: sticky;
    inset: 0 auto auto;
    display: flex;
    justify-content: space-between;
    height: 61px;
    padding: 0 20px;
    border-bottom: 1px solid var(--omega-hair);
    background: var(--omega-bark);
  }

  .omega-site-header--overlay {
    position: absolute;
    inset: 18px 0 auto;
    height: 32px;
    border: 0;
    background: transparent;
  }

  .omega-site-header__nav,
  .omega-site-header__actions {
    display: none;
  }

  .omega-site-header__brand {
    width: 112px;
  }

  .omega-site-header--overlay .omega-site-header__brand {
    width: 84px;
  }

  .omega-site-header__menu-button {
    display: block;
    min-width: var(--omega-hit);
    min-height: var(--omega-hit);
    padding: 0;
    border: 0;
    background: transparent;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .omega-mobile-menu {
    position: fixed;
    z-index: 25;
    inset: 0;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 80px 28px 32px;
    background: var(--omega-bark);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .omega-mobile-menu[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .omega-mobile-menu a {
    font-family: var(--omega-display);
    font-size: 46px;
    line-height: 0.95;
  }

  .omega-mobile-menu {
    overflow-y: auto;
    justify-content: flex-start;
  }

  .omega-product-search--mobile {
    margin-top: 24px;
  }

  .omega-product-search--mobile input,
  .omega-product-search--mobile button,
  .omega-mobile-menu .omega-category-menu__panel a {
    font-family: var(--omega-sans);
    font-size: 16px;
    line-height: 1.4;
  }

  .omega-category-menu--mobile summary {
    font-family: var(--omega-display);
    font-size: 46px;
    line-height: .95;
  }

  .omega-category-menu--mobile .omega-category-menu__panel {
    position: static;
    min-width: 0;
    padding: 10px 0 0 18px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .omega-site-footer__social {
    grid-column: auto;
    flex-wrap: wrap;
    margin-top: 0;
  }

  .omega-site-footer {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 20px;
  }

  .omega-site-footer__links {
    grid-column: auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 28px;
  }

  .omega-site-footer__brand {
    width: 160px;
  }

  .omega-generic {
    padding: 56px 20px;
  }

  .omega-generic__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    text-align: center;
  }

  .omega-prose {
    font-size: 16px;
  }

  .omega-prose h2 {
    font-size: 26px;
  }

  .omega-prose h3 {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .omega-workshop [class*="omega-motion"],
  .omega-home-hero__mark,
  .omega-home-collection > h2,
  .omega-home-tile,
  .omega-home-process__step,
  .omega-home-timber__specs,
  .omega-home-commission,
  .omega-shop__intro > *,
  .omega-product-card,
  .omega-product-gallery img,
  .omega-product-summary > *,
  .omega-product-specification,
  .omega-consultation__hero h1,
  .omega-consultation-form,
  .omega-consultation__next {
    animation: none !important;
  }
}

/* The skip link's target.
 *
 * `<main>` is not focusable on its own, so activating "Skip to content" moved
 * the viewport but left keyboard focus in the header — the user pressed the
 * link, then tabbed straight back into the navigation they had just skipped.
 * `tabindex="-1"` in the templates makes it focusable programmatically; this
 * stops the browser drawing a focus ring around the entire page when it lands
 * there, which is not a state anyone needs to see outlined. */
#main-content:focus {
  outline: none;
}
