/* ==========================================================================
   Pixintel design system
   Loaded after Blocksy. Tokens first, then the fixes the audit called out.
   Spacing is an 8pt system; type is a 1.250 major third, fluid.
   ========================================================================== */

:root {
  /* --- spacing: 8pt system. Every gap resolves to one of these. --- */
  --px-1:  4px;
  --px-2:  8px;
  --px-3:  16px;
  --px-4:  24px;
  --px-5:  32px;
  --px-6:  48px;
  --px-7:  64px;
  --px-8:  96px;
  --px-9:  128px;

  /* section rhythm */
  --px-section:      56px;   /* mobile */
  --px-section-lg:   96px;   /* desktop */

  /* --- type scale: 1.200 minor third, fluid between 375px and 1280px ---
     Deliberately restrained. The renders are the loud element on this page;
     the type should organise them, not compete with them. --- */
  --px-display: clamp(1.750rem, 1.36rem + 1.66vw, 2.750rem);
  --px-h2:      clamp(1.312rem, 1.15rem + 0.69vw, 1.750rem);
  --px-h3:      clamp(1.062rem, 1.01rem + 0.22vw, 1.200rem);
  --px-body:    clamp(0.938rem, 0.92rem + 0.10vw, 1.000rem);
  --px-caption: 0.812rem;

  --px-measure: 66ch;

  /* --- families --- */
  --px-display-font: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --px-body-font:    "Inter Tight", "Helvetica Neue", Arial, sans-serif;

  /* --- layout --- */
  --px-maxw:   1280px;
  --px-gutter: 16px;
  --px-margin: 20px;
}

@media (min-width: 768px) {
  :root {
    --px-gutter: 24px;
    --px-margin: 32px;
  }
}

/* --------------------------------------------------------------------------
   Overflow guards.
   German compounds ("Naturverbundene Architektur", "Ankleidezimmer Design")
   are a real overflow risk in card titles at 320px.
   -------------------------------------------------------------------------- */

img,
video,
iframe,
table,
pre {
  max-width: 100%;
}

img,
video {
  height: auto;
}

body {
  overflow-x: hidden;
}

.entry-content table,
.entry-content pre {
  display: block;
  overflow-x: auto;
}

h1, h2, h3, h4,
.entry-title,
.ct-media-container + * .entry-title {
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}

p, li, dd {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

body {
  font-size: var(--px-body);
  line-height: 1.62;
}

h1 {
  font-size: var(--px-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--px-h2);
  line-height: 1.12;
  letter-spacing: -0.018em;
}

h3 {
  font-size: var(--px-h3);
  line-height: 1.25;
  letter-spacing: -0.012em;
}

/* Running text stays readable. Cards and grids opt out below. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
  max-width: var(--px-measure);
}

/* --------------------------------------------------------------------------
   Vertical rhythm.
   The live page has no repeating interval at all; this establishes one.
   -------------------------------------------------------------------------- */

.pix-section {
  padding-block: var(--px-section);
}

@media (min-width: 900px) {
  .pix-section {
    padding-block: var(--px-section-lg);
  }
}

.pix-section > * + * {
  margin-block-start: var(--px-5);
}

.pix-section__head {
  margin-block-end: var(--px-5);
}

.pix-section__head > * + * {
  margin-block-start: var(--px-3);
}

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.pix-wrap {
  width: 100%;
  max-width: var(--px-maxw);
  margin-inline: auto;
  padding-inline: var(--px-margin);
}

.pix-grid {
  display: grid;
  gap: var(--px-4);
  grid-template-columns: 1fr;
}

/* Square-cropped galleries hold up 2-up on mobile; mixed content does not. */
.pix-grid--tiles {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--px-3);
}

@media (min-width: 600px) {
  .pix-grid { grid-template-columns: repeat(2, 1fr); }
  .pix-grid--tiles { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
  .pix-grid { grid-template-columns: repeat(3, 1fr); }
  .pix-grid--tiles { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   Media: fixed ratio boxes.
   Mixed aspect ratios are the loudest "not premium" signal on the live page.
   -------------------------------------------------------------------------- */

.pix-media {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--paletteColor5, #eceeef);
  aspect-ratio: 3 / 2;
}

.pix-media--square { aspect-ratio: 1 / 1; }
.pix-media--tall   { aspect-ratio: 4 / 5; }
.pix-media--wide   { aspect-ratio: 16 / 9; }

.pix-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   Touch targets. 44x44 minimum, 12px clearance between neighbours.
   -------------------------------------------------------------------------- */

@media (max-width: 999px) {
  .ct-header-nav a,
  .menu-item > a,
  .ct-offcanvas-nav a,
  .ct-header-account,
  .ct-toggle-close,
  .ct-header-trigger {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .ct-offcanvas-nav .menu-item + .menu-item {
    margin-block-start: var(--px-1);
  }
}

/* Keyboard focus must always be visible. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Landing page components
   Near-monochrome chrome so all colour arrives from the photography.
   Accent is the signature orange of Salone del Mobile 2026, used once.
   ========================================================================== */

:root {
  --pix-ink:      #15181B;
  --pix-ink-soft: #4A5257;
  --pix-paper:    #FFFFFF;
  --pix-sunk:     #F1F2F3;
  --pix-rule:     #DEE2E4;
  --pix-accent:   #C9500F;
  --pix-on-dark:  #F6F7F7;
}

/* --------------------------------------------------------------------------
   Hero. Sized to its content, never 100vh — a viewport-tall opener pushes the
   page out of the first frame.
   -------------------------------------------------------------------------- */

.pix-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(420px, 62vh, 660px);
  margin-block-end: var(--px-section);
}

.pix-hero__media,
.pix-hero__body {
  grid-area: 1 / 1;
}

.pix-hero__media {
  overflow: hidden;
}

.pix-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scrim: enough contrast for the headline without dulling the render. */
.pix-hero__body {
  position: relative;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(
    to top,
    rgba(10, 12, 14, 0.82) 0%,
    rgba(10, 12, 14, 0.55) 38%,
    rgba(10, 12, 14, 0.12) 70%,
    rgba(10, 12, 14, 0) 100%
  );
}

.pix-hero__inner {
  width: 100%;
  max-width: var(--px-maxw);
  margin-inline: auto;
  padding: var(--px-6) var(--px-margin);
}

@media (min-width: 900px) {
  .pix-hero__inner { padding-block: var(--px-7); }
}

.pix-hero__title {
  color: var(--pix-on-dark);
  font-size: var(--px-display);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0 0 var(--px-3);
  max-width: 17ch;
  text-wrap: balance;
}

.pix-hero__sub {
  color: rgba(246, 247, 247, 0.92);
  font-size: clamp(1rem, 0.95rem + 0.45vw, 1.22rem);
  line-height: 1.5;
  margin: 0 0 var(--px-5);
  max-width: 54ch;
}

/* --------------------------------------------------------------------------
   Buttons. 44px minimum height, wrapping instead of overflowing on narrow
   screens.
   -------------------------------------------------------------------------- */

.pix-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--px-3);
}

.pix-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--px-4);
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.975rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.pix-btn--primary {
  background: var(--pix-accent);
  color: #FFF;
}

.pix-btn--primary:hover,
.pix-btn--primary:focus-visible {
  background: #A94210;
  color: #FFF;
}

.pix-btn--ghost {
  border: 1px solid rgba(246, 247, 247, 0.55);
  color: var(--pix-on-dark);
}

.pix-btn--ghost:hover,
.pix-btn--ghost:focus-visible {
  background: rgba(246, 247, 247, 0.14);
  color: var(--pix-on-dark);
}

/* --------------------------------------------------------------------------
   Tile grids
   -------------------------------------------------------------------------- */

.pix-grid--tiles {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pix-tile__link {
  display: flex;
  flex-direction: column;
  gap: var(--px-2);
  text-decoration: none;
  color: inherit;
}

.pix-tile .pix-media {
  border-radius: 2px;
  background: var(--pix-sunk);
}

.pix-tile img {
  transition: transform 0.4s ease;
}

.pix-tile__link:hover img,
.pix-tile__link:focus-visible img {
  transform: scale(1.03);
}

.pix-tile__label {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* --------------------------------------------------------------------------
   Stats. The figures carry the argument, so they get the typographic weight.
   -------------------------------------------------------------------------- */

.pix-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--px-4);
  grid-template-columns: 1fr;
  border-block-start: 1px solid var(--pix-rule);
}

@media (min-width: 600px) { .pix-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .pix-stats { grid-template-columns: repeat(4, 1fr); } }

.pix-stat {
  display: flex;
  flex-direction: column;
  gap: var(--px-1);
  padding-block-start: var(--px-4);
}

.pix-stat__fig {
  font-size: clamp(2rem, 1.6rem + 1.7vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--pix-accent);
  font-variant-numeric: tabular-nums;
}

.pix-stat__label {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--pix-ink-soft);
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   Section headings on the landing page
   -------------------------------------------------------------------------- */

.pix-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pix-accent);
  margin-block-end: var(--px-2);
}

/* ==========================================================================
   Landing page layout
   One full-bleed grid so every section shares the same left edge. Blocksy
   gives headings and paragraphs different content widths, which is what makes
   the live page read as unaligned.
   ========================================================================== */

.wp-singular .site-main .entry-content {
  display: grid;
  grid-template-columns:
    1fr
    min(var(--px-maxw), 100% - (var(--px-margin) * 2))
    1fr;
  row-gap: var(--px-5);
}

/* Everything sits in the centre column ... */
.wp-singular .site-main .entry-content > * {
  grid-column: 2;
  max-width: none;
  margin-inline: 0;
  margin-block: 0;
  width: auto;
}

/* ... except the pieces that are meant to run full width. */
.wp-singular .site-main .entry-content > .pix-hero {
  grid-column: 1 / -1;
  margin-block-end: var(--px-2);
}

/* Running text keeps its measure but stays on the same left edge. */
.wp-singular .site-main .entry-content > p {
  max-width: var(--px-measure);
}

/* Section spacing: headings open a section, so they carry the leading space. */
.wp-singular .site-main .entry-content > h2 {
  margin-block-start: var(--px-6);
}

.wp-singular .site-main .entry-content > .pix-hero + h2 {
  margin-block-start: 0;
}

@media (min-width: 900px) {
  .wp-singular .site-main .entry-content > h2 { margin-block-start: var(--px-7); }
  .wp-singular .site-main .entry-content > .pix-hero + h2 { margin-block-start: 0; }
}

/* Desktop: tiles were reading small because the grid inherited a narrow
   content width. In the centre column they now use the full 1280px. */
@media (min-width: 960px) {
  .site-main .pix-grid--tiles { grid-template-columns: repeat(4, 1fr); gap: var(--px-4); }
}

@media (min-width: 1200px) {
  .site-main .pix-grid--tiles { grid-template-columns: repeat(5, 1fr); }
  .site-main .pix-grid--tiles.pix-grid--wide { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   Hero scrim.
   The first pass lost the sub-headline against bright windows, which is the
   most common bright area in these renders. Deeper, and anchored left where
   the text actually sits.
   -------------------------------------------------------------------------- */

.pix-hero__body {
  background:
    linear-gradient(
      to top,
      rgba(8, 10, 12, 0.90) 0%,
      rgba(8, 10, 12, 0.74) 30%,
      rgba(8, 10, 12, 0.40) 58%,
      rgba(8, 10, 12, 0.10) 82%,
      rgba(8, 10, 12, 0) 100%
    ),
    linear-gradient(
      to right,
      rgba(8, 10, 12, 0.55) 0%,
      rgba(8, 10, 12, 0.28) 42%,
      rgba(8, 10, 12, 0) 72%
    );
}

.pix-hero__title {
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

.pix-hero__sub {
  color: #EDEFF0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   Alignment override.
   WordPress emits .is-layout-constrained on some translations and
   .is-layout-flow on others, and both centre their children. The landing page
   needs one left edge shared by headings, text and grids, so the reset is
   stated explicitly rather than relying on cascade order.
   -------------------------------------------------------------------------- */

body.wp-singular .site-main .entry-content > h2,
body.wp-singular .site-main .entry-content > h3,
body.wp-singular .site-main .entry-content > p,
body.wp-singular .site-main .entry-content > ul,
body.wp-singular .site-main .entry-content > .pix-grid,
body.wp-singular .site-main .entry-content > .pix-stats {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left;
}

body.wp-singular .site-main .entry-content > p {
  max-width: var(--px-measure) !important;
}

body.wp-singular .site-main .entry-content > h2 {
  max-width: 34ch !important;
  text-wrap: balance;
}

/* The hero is the one element that must ignore the column. */
body.wp-singular .site-main .entry-content > .pix-hero {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

/* ==========================================================================
   Offcanvas menu ergonomics
   Blocksy already ships a collapsed accordion here, so the work is hit areas
   and hierarchy rather than restructuring. 65 links means the chevron is the
   most-used control on mobile and it must be comfortably tappable.
   ========================================================================== */

#offcanvas .ct-panel-content-inner {
  padding-block-end: var(--px-7);
}

/* Top-level rows read as the section headers they are. */
#offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > .ct-menu-link,
#offcanvas .mobile-menu > ul > li > .ct-menu-link {
  font-weight: 700;
  letter-spacing: -0.01em;
  padding-block: var(--px-3);
  min-height: 48px;
  display: flex;
  align-items: center;
}

/* The parent row is a link plus a toggle; keep them on one line with the
   toggle given a real 48px square rather than an icon-sized tap target. */
#offcanvas .ct-sub-menu-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--px-2);
}

#offcanvas .ct-toggle-dropdown-mobile {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: background-color 0.18s ease;
}

#offcanvas .ct-toggle-dropdown-mobile:hover,
#offcanvas .ct-toggle-dropdown-mobile:focus-visible {
  background: rgba(255, 255, 255, 0.10);
}

/* Expanded state gets a visible affordance, not just a rotated chevron. */
#offcanvas .ct-toggle-dropdown-mobile[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.14);
}

/* Children indent and lighten so the two levels are distinguishable at a
   glance while scrolling a 65-item list. */
#offcanvas .sub-menu .ct-menu-link {
  font-weight: 500;
  font-size: 0.98rem;
  opacity: 0.88;
  padding-block: var(--px-2);
  padding-inline-start: var(--px-4);
  min-height: 44px;
  display: flex;
  align-items: center;
}

#offcanvas .sub-menu {
  margin-block-end: var(--px-2);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
  margin-inline-start: var(--px-2);
}

/* The close control is the escape hatch; make it unmissable. */
#offcanvas .ct-toggle-close {
  min-width: 48px;
  min-height: 48px;
}

/* ==========================================================================
   Typography
   Instrument Serif for display, Inter Tight for everything else. Blocksy's
   own base is 19px with Open Sans, which is what made the page shout; these
   rules take it down and give the headings some actual character.
   ========================================================================== */

body,
.entry-content,
.ct-header,
#offcanvas {
  font-family: var(--px-body-font);
  font-size: var(--px-body);
  line-height: 1.6;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Blocksy publishes its sizes through custom properties; override at source
   so components inherit the new scale instead of being patched one by one. */
body {
  --theme-font-family: var(--px-body-font);
  --theme-font-size: var(--px-body);
  --theme-line-height: 1.6;
}

h1, h2, h3,
.entry-title,
.pix-hero__title,
.wp-block-heading {
  font-family: var(--px-display-font);
  font-weight: 400;          /* Instrument Serif has one weight; it carries */
  font-style: normal;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1,
.pix-hero__title,
.hero-section .entry-title,
.single .entry-title {
  font-size: var(--px-display);
  line-height: 1.08;
}

h2, .wp-block-heading {
  font-size: var(--px-h2);
  line-height: 1.18;
}

h3 {
  font-size: var(--px-h3);
  line-height: 1.3;
}

/* Anything that is a label rather than a headline stays in the sans:
   tile captions, buttons, nav, meta. A serif here would read as decoration. */
.pix-tile__label,
.pix-btn,
.pix-stat__label,
.pix-eyebrow,
.ct-menu-link,
.ct-header,
#offcanvas .ct-menu-link,
figcaption,
.entry-meta,
time {
  font-family: var(--px-body-font);
  letter-spacing: 0;
}

.pix-tile__label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
}

.pix-btn {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* The stat figures are data, not prose — tabular sans reads as measurement. */
.pix-stat__fig {
  font-family: var(--px-body-font);
  font-weight: 600;
  font-size: clamp(1.65rem, 1.4rem + 1.05vw, 2.25rem);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.pix-stat__label {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Hero: the serif wants a little more air at display size, and the sub
   should sit clearly below it rather than competing. */
.pix-hero__title {
  letter-spacing: -0.012em;
  max-width: 19ch;
}

.pix-hero__sub {
  font-family: var(--px-body-font);
  font-size: clamp(0.95rem, 0.92rem + 0.20vw, 1.075rem);
  line-height: 1.55;
  max-width: 50ch;
}

figcaption {
  font-size: var(--px-caption);
  line-height: 1.5;
  color: #5A6167;   /* ~6.4:1 on white; opacity dimming failed contrast */
  opacity: 1;
}

/* Headings on the landing page: the smaller scale needs its measure retuned,
   otherwise a 34ch cap breaks lines that now fit comfortably. */
body.wp-singular .site-main .entry-content > h2 {
  max-width: 30ch !important;
}

/* --------------------------------------------------------------------------
   Hero height.
   The media element was setting the row height, so a 1384x923 source made the
   opener ~890px tall on desktop and pushed the first section out of view.
   Mobile stays content-driven, because the headline, sub and two stacked
   buttons need the room.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .pix-hero {
    height: clamp(440px, 58vh, 580px);
    min-height: 0;
  }

  .pix-hero__media,
  .pix-hero__media img {
    height: 100%;
  }
}

/* --------------------------------------------------------------------------
   Header tagline
   "AI Based Design" was breaking onto three lines in a narrow header column.
   -------------------------------------------------------------------------- */

.ct-header [data-id="text"] {
  white-space: nowrap;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding-inline-end: var(--px-3);
  overflow: visible;
}

/* Below the desktop breakpoint the header column is genuinely narrow, so let
   it wrap rather than overflow the viewport. */
@media (max-width: 999px) {
  .ct-header [data-id="text"] {
    white-space: normal;
    padding-inline-end: 0;
  }
}


/* --------------------------------------------------------------------------
   Post card titles.
   These are h2.entry-title inside the posts grid. `.entry-title[class]` beat
   the plain `h2` selector on specificity, so cards were rendering at display
   size (~44px) instead of card size. Scoped explicitly here.
   -------------------------------------------------------------------------- */

.entries .entry-title,
.ct-posts-shortcode .entry-title,
.ct-listing-card .entry-title,
[data-cards] .entry-title {
  font-size: 1.05rem;
  line-height: 1.32;
  letter-spacing: -0.002em;
  margin-block: 0 var(--px-2);
}

@media (min-width: 960px) {
  .entries .entry-title,
  .ct-posts-shortcode .entry-title,
  .ct-listing-card .entry-title,
  [data-cards] .entry-title {
    font-size: 1.125rem;
  }
}

/* Card meta (author, date, category) is supporting information, not a
   headline; keep it quiet and in the sans. */
.entries .entry-meta,
.ct-posts-shortcode .entry-meta {
  font-family: var(--px-body-font);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  /* An explicit colour rather than opacity: 0.72 dimmed this below the 4.5:1
     minimum for small text. #5A6167 on white is ~6.4:1. */
  color: #5A6167;
  opacity: 1;
}

.entries .entry-meta a,
.ct-posts-shortcode .entry-meta a {
  color: inherit;
}

.entries .entry-excerpt,
.ct-posts-shortcode .entry-excerpt {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Category label on post cards.
   Every post sits in "Unkategorisiert", so Blocksy printed that word above
   each card headline. Hidden until the taxonomy is actually built out.
   Single posts never render it, so this is scoped to the listings.
   -------------------------------------------------------------------------- */

.entries .entry-meta li.meta-categories,
.ct-posts-shortcode .entry-meta li.meta-categories,
[data-cards] .entry-meta li.meta-categories {
  display: none;
}

/* The category is the only item in that meta list, so drop the now-empty
   <ul> as well — otherwise it leaves its margin behind above the headline. */
.entries .entry-meta:has(> li.meta-categories:only-child),
.ct-posts-shortcode .entry-meta:has(> li.meta-categories:only-child),
[data-cards] .entry-meta:has(> li.meta-categories:only-child) {
  display: none;
}

/* Fallback for engines without :has() — the shortcode emits the
   categories-only list as meta_1. */
.entries ul.entry-meta[data-id="meta_1"],
.ct-posts-shortcode ul.entry-meta[data-id="meta_1"] {
  display: none;
}

/* ==========================================================================
   Inner pages
   The landing page got a single left edge; the style, room and project pages
   never did. Same underlying cause: the H1 lives in .hero-section with its own
   width, the paragraphs get WordPress's constrained centring, and embedded
   sliders carry an inline width:100%. Three edges on one page.

   The heading block gets the identical grid as the content below it, so both
   resolve to the same column.
   ========================================================================== */

.wp-singular .site-main .hero-section {
  display: grid;
  grid-template-columns:
    1fr
    min(var(--px-maxw), 100% - (var(--px-margin) * 2))
    1fr;
}

.wp-singular .site-main .hero-section > * {
  grid-column: 2;
  max-width: none;
  margin-inline: 0;
}

.wp-singular .site-main .entry-header {
  padding-inline: 0;
}

/* Sliders and galleries carry inline widths from their plugins; inside the
   content column that now resolves to the column, not the container. */
.wp-singular .site-main .entry-content > .metaslider,
.wp-singular .site-main .entry-content > [id^="metaslider-id-"],
.wp-singular .site-main .entry-content > .modula-gallery,
.wp-singular .site-main .entry-content > .wp-block-image,
.wp-singular .site-main .entry-content > figure {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

/* Inner-page headings sit tighter to their text than landing-page section
   openers, which carry a full section's worth of leading space. */
.wp-singular:not(.home) .site-main .entry-content > h2 {
  margin-block-start: var(--px-6);
  max-width: 34ch !important;
}

.wp-singular:not(.home) .site-main .entry-content > h3 {
  margin-block-start: var(--px-5);
}

.wp-singular:not(.home) .site-main .entry-content > *:first-child {
  margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   Reading-page measure.
   The landing page earns a 1280px grid because it carries full-width tile
   rows. A style or room page is text plus one gallery, so the same width
   leaves the right half of the screen empty and the content hugging the left
   edge. Narrowing the column keeps the single left edge and lets the page sit
   centred and balanced instead.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .wp-singular:not(.home) .site-main .entry-content,
  .wp-singular:not(.home) .site-main .hero-section {
    --px-maxw: 920px;
  }
}

/* MetaSlider sizes its own carousel: flexslider writes explicit pixel widths
   onto .slides and each <li> and depends on them for positioning. Forcing
   widths on those internals blanks the slider entirely — leave them alone and
   only centre the outer container within the reading column. */
.wp-singular:not(.home) .site-main .entry-content > .metaslider,
.wp-singular:not(.home) .site-main .entry-content > [id^="metaslider-id-"] {
  margin-inline: auto;
}