:root {
  --bp-lg: 1100px;
  --bp-md: 800px;
  --bp-sm: 500px;
  --bp-xl: 1480px;
  --color-accent: #33d493;
  --color-accent-pressed: #28b37b;
  --color-bg: #0a0a0a;
  --color-bg-elevated: #141414;
  --color-gradient-light: #aab0c4;
  --color-gradient-mid: #ffffff;
  --color-primary: #000000;
  --color-rg-banner: #dc2626;
  --color-text: #ffffff;
  --color-text-muted: #bfbfbf;
  --container-narrow: 720px;
  --container-padding-desktop: 56px;
  --container-padding-mobile: 16px;
  --container-padding-tablet: 32px;
  --container-site: 1420px;
  --dur-base: 200ms;
  --dur-fast: 150ms;
  --dur-slow: 300ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.5, 1.4, 0.5, 1);
  --font-body: 'Kanit', system-ui, sans-serif;
  --font-display: 'Kanit', system-ui, sans-serif;
  --fs-body: 16px;
  --fs-h1: 44px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-h5: 18px;
  --fs-micro: 12px;
  --fs-small: 14px;
  --fw-bold: 700;
  --fw-medium: 500;
  --fw-regular: 400;
  --header-h: 96px;
  --lh-loose: 1.7;
  --lh-normal: 1.55;
  --lh-tight: 1.2;
  --ls-tight: -0.01em;
  --ls-wide: 0.06em;
  --radius-circle: 50%;
  --radius-md: 0;
  --radius-pill: 0;
  --radius-xs: 0;
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.08);
  --space-2xl: 48px;
  --space-2xs: 2px;
  --space-3xl: 60px;
  --space-lg: 40px;
  --space-md: 16px;
  --space-sm: 10px;
  --space-xl: 48px;
  --space-xs: 6px;
}

@media (max-width: 800px) {
  :root {
    --fs-body: 15px;
    --fs-h1: 30px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-h4: 18px;
    --header-h: 64px;
    --space-2xl: 40px;
    --space-3xl: 48px;
    --space-lg: 32px;
    --space-xl: 40px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--fw-regular) var(--fs-body) / var(--lh-normal) var(--font-body);
  margin: 0;
  min-height: 100vh;
}
body.cookie-visible { padding-bottom: 140px; }
figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-pressed); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.skip-link {
  background: var(--color-accent);
  color: var(--color-bg);
  left: 8px;
  padding: 8px 16px;
  position: absolute;
  top: -100px;
  transition: top var(--dur-base) var(--ease-out);
  z-index: 1000;
}
.skip-link:focus { top: 8px; }
.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

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

.alcove {
  background: var(--color-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}
.alcove-inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  min-height: var(--header-h);
  padding-block: var(--space-sm);
  padding-inline: var(--container-padding-desktop);
}
.alcove-nav {
  align-items: center;
  display: flex;
  gap: var(--space-md);
}
.alcove-nav--left { justify-content: flex-start; flex: 1; }
.alcove-nav--right { justify-content: flex-end; flex: 1; gap: var(--space-md); }
.alcove-link {
  color: var(--color-text);
  font: var(--fw-medium) var(--fs-small) var(--font-body);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.alcove-link:hover { color: var(--color-accent); }
.alcove-link[aria-current='page'] { color: var(--color-accent); }
.alcove-logo {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  margin-inline: var(--space-md);
}
.alcove-logo img { height: 90px; width: auto; }
.alcove-auth { display: flex; gap: var(--space-sm); margin-inline-start: var(--space-md); }
.alcove-auth-btn {
  border: 1px solid var(--color-text);
  color: var(--color-text);
  font: var(--fw-bold) var(--fs-small) var(--font-display);
  letter-spacing: var(--ls-wide);
  padding: 8px 16px;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.alcove-auth-btn--login { background: transparent; color: var(--color-text); }
.alcove-auth-btn--login:hover { background: var(--color-text); color: var(--color-bg); }
.alcove-auth-btn--register {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.alcove-auth-btn--register:hover { background: var(--color-accent-pressed); border-color: var(--color-accent-pressed); color: var(--color-bg); }
.alcove-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-text);
  display: none;
  flex-direction: column;
  gap: 4px;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.alcove-toggle span {
  background: var(--color-text);
  display: block;
  height: 2px;
  width: 20px;
}
.alcove-mobile {
  background: var(--color-bg);
  display: none;
  flex-direction: column;
  gap: var(--space-md);
  height: calc(100dvh - var(--header-h));
  left: 0;
  padding: var(--space-lg) var(--container-padding-mobile);
  position: fixed;
  top: var(--header-h);
  width: 100vw;
  z-index: 90;
}
.alcove-mobile.is-open { display: flex; }
.alcove-mobile-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text);
  font: var(--fw-medium) var(--fs-h5) var(--font-display);
  padding-block: var(--space-md);
  text-transform: uppercase;
}
.alcove-mobile-link:hover { color: var(--color-accent); }
.alcove-mobile-auth {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
}
.alcove-mobile-auth .alcove-auth-btn {
  text-align: center;
  white-space: nowrap;
  width: auto;
}

@media (max-width: 1100px) {
  .alcove-nav, .alcove-auth { display: none; }
  .alcove-toggle { display: flex; }
  .alcove-inner { padding-inline: var(--container-padding-mobile); }
  .alcove-logo img { height: 72px; }
}

.mosaic {
  background: var(--color-bg-elevated);
  width: 100%;
}
.mosaic-inner {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-sm);
  padding-inline: var(--container-padding-desktop);
}
.mosaic-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-small);
  gap: var(--space-xs);
}
.mosaic-item { color: var(--color-text-muted); }
.mosaic-item--current { color: var(--color-text); }
.mosaic-item a { color: var(--color-text-muted); }
.mosaic-item a:hover { color: var(--color-accent); }
.mosaic-sep { color: var(--color-text-muted); padding-inline: var(--space-2xs); }

@media (max-width: 800px) {
  .mosaic-inner { padding-inline: var(--container-padding-mobile); }
}

.bay {
  background: var(--color-bg);
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}
.bay-letterform {
  color: var(--color-text);
  font: var(--fw-bold) 60vh var(--font-display);
  height: 100%;
  inset-inline-start: max(var(--container-padding-desktop), calc((100vw - var(--container-site)) / 2));
  letter-spacing: -0.05em;
  line-height: 0.8;
  max-width: calc(var(--container-site) * 0.3);
  opacity: 0.05;
  pointer-events: none;
  position: absolute;
  top: 0;
  user-select: none;
}
.bay-inner {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-3xl);
  padding-inline: var(--container-padding-desktop);
  position: relative;
  width: 100%;
}
.bay-content {
  padding-left: 35%;
  position: relative;
  width: 70%;
}
.bay-eyebrow {
  color: var(--color-accent);
  font: var(--fw-medium) var(--fs-small) var(--font-body);
  letter-spacing: var(--ls-wide);
  margin-block-end: var(--space-md);
  text-transform: uppercase;
}
.bay h1 {
  color: var(--color-text);
  font-size: var(--fs-h1);
  margin-block-end: var(--space-md);
}
.bay-subtitle {
  color: var(--color-text-muted);
  font-size: var(--fs-h5);
  line-height: var(--lh-normal);
  margin-block-end: var(--space-lg);
  max-width: 480px;
}
.bay-cta {
  background: var(--color-accent);
  color: var(--color-bg);
  display: inline-block;
  font: var(--fw-bold) var(--fs-small) var(--font-display);
  letter-spacing: var(--ls-wide);
  padding: 18px 40px;
  text-transform: uppercase;
  transition: background var(--dur-base) var(--ease-spring), color var(--dur-base) var(--ease-out);
}
.bay-cta:hover { background: var(--color-accent-pressed); color: var(--color-bg); }

@media (max-width: 1100px) {
  .bay { min-height: auto; }
  .bay-content { padding-left: 0; width: 100%; }
  .bay-letterform {
    font-size: 40vh;
    inset-inline-start: var(--container-padding-mobile);
    opacity: 0.04;
  }
}
@media (max-width: 800px) {
  .bay-inner { padding-block: var(--space-2xl); padding-inline: var(--container-padding-mobile); }
  .bay-letterform { font-size: 30vh; }
}

.turret {
  background: var(--color-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.turret-inner {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-2xl);
  padding-inline: var(--container-padding-desktop);
}
.turret h1 {
  color: var(--color-text);
  font-size: var(--fs-h1);
  margin-block-end: var(--space-md);
}
.turret-subtitle {
  color: var(--color-text-muted);
  font-size: var(--fs-h5);
  line-height: var(--lh-normal);
}
.turret-meta { color: var(--color-text-muted); font-size: var(--fs-small); margin-block-start: var(--space-md); }
.turret-meta time { color: var(--color-text-muted); }

@media (max-width: 800px) {
  .turret-inner { padding-block: var(--space-xl); padding-inline: var(--container-padding-mobile); }
}

.balcony {
  background: var(--color-bg);
}
.balcony-inner {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-2xl);
  padding-inline: var(--container-padding-desktop);
}
.balcony h2 {
  color: var(--color-text);
  font-size: var(--fs-h2);
  margin-block-end: var(--space-lg);
}
.balcony-list {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(3, 1fr);
}
.balcony-item {
  background: var(--color-bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-lg);
}
.balcony-icon {
  align-items: center;
  background: var(--color-accent);
  border-radius: var(--radius-circle);
  color: var(--color-bg);
  display: flex;
  font: var(--fw-bold) var(--fs-h5) var(--font-display);
  height: 56px;
  justify-content: center;
  margin-block-end: var(--space-md);
  width: 56px;
}
.balcony-title {
  color: var(--color-text);
  font-size: var(--fs-h4);
  margin-block-end: var(--space-sm);
}
.balcony-text { color: var(--color-text-muted); font-size: var(--fs-body); line-height: var(--lh-normal); }

@media (max-width: 1100px) {
  .balcony-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .balcony-inner { padding-block: var(--space-xl); padding-inline: var(--container-padding-mobile); }
  .balcony-list { grid-template-columns: 1fr; gap: var(--space-md); }
}

.cresset { background: var(--color-bg); }
.cresset-inner {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-xl);
  padding-inline: var(--container-padding-desktop);
}
.cresset h2 {
  color: var(--color-text);
  font-size: var(--fs-h2);
  margin-block: var(--space-lg) var(--space-md);
}
.cresset h2:first-child { margin-block-start: 0; }
.cresset h3 {
  color: var(--color-text);
  font-size: var(--fs-h3);
  margin-block: var(--space-md) var(--space-sm);
}
.cresset p {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  margin-block-end: var(--space-md);
  padding-inline-start: var(--space-2xl);
}
.cresset ul, .cresset ol {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  list-style: revert;
  margin-block-end: var(--space-md);
  padding-inline-start: calc(var(--space-2xl) + 24px);
}
.cresset li { margin-block-end: var(--space-xs); }
.cresset strong { color: var(--color-text); font-weight: var(--fw-bold); }
.cresset em { color: var(--color-text); font-style: italic; }
.cresset a { color: var(--color-accent); text-decoration: underline; }
.cresset a:hover { color: var(--color-accent-pressed); }
.cresset-img {
  border-radius: 0;
  display: block;
  height: auto;
  margin: var(--space-md) auto;
  max-height: 55vh;
  max-width: 440px;
  object-fit: contain;
  width: 100%;
}

@media (max-width: 800px) {
  .cresset-inner { padding-block: var(--space-lg); padding-inline: var(--container-padding-mobile); }
  .cresset p, .cresset ul, .cresset ol { padding-inline-start: 0; }
  .cresset-img { max-height: 50vh; max-width: 100%; }
}

.hearth { background: var(--color-bg); }
.hearth-inner {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-xl);
  padding-inline: var(--container-padding-desktop);
}
.hearth h2 {
  color: var(--color-text);
  font-size: var(--fs-h2);
  margin-block-end: var(--space-lg);
}
.hearth-scroll { overflow-x: auto; }
.hearth-table {
  border-collapse: collapse;
  font-size: var(--fs-body);
  width: 100%;
}
.hearth-table thead { background: var(--color-primary); }
.hearth-table th {
  color: var(--color-text);
  font-weight: var(--fw-bold);
  padding: var(--space-md);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-small);
}
.hearth-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
  padding: var(--space-md);
}
.hearth-table td:first-child {
  background: var(--color-primary);
  border-right: 4px solid var(--color-accent);
  color: var(--color-text);
  font-weight: var(--fw-bold);
}
.hearth-table tbody tr:hover td { background: rgba(255, 255, 255, 0.04); }

@media (max-width: 800px) {
  .hearth-inner { padding-block: var(--space-lg); padding-inline: var(--container-padding-mobile); }
  .hearth-table { min-width: 520px; }
}

.ledge { background: var(--color-bg); }
.ledge-inner {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-2xl);
  padding-inline: var(--container-padding-desktop);
}
.ledge h2 {
  color: var(--color-text);
  font-size: var(--fs-h2);
  margin-block-end: var(--space-lg);
}
.ledge-list { display: block; }
.ledge-q { display: block; margin-block-end: var(--space-md); }
.ledge-question {
  color: var(--color-text);
  font: var(--fw-bold) var(--fs-h4) var(--font-display);
  margin-block-end: var(--space-sm);
}
.ledge-answer {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  margin-block-end: var(--space-xl);
}

@media (max-width: 800px) {
  .ledge-inner { padding-block: var(--space-xl); padding-inline: var(--container-padding-mobile); }
  .ledge-answer { margin-block-end: var(--space-lg); }
}

.pergola {
  background: var(--color-primary);
  width: 100%;
}
.pergola-inner {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-3xl);
  padding-inline: var(--container-padding-desktop);
}
.pergola-title {
  color: var(--color-text);
  font: var(--fw-bold) var(--fs-h1) var(--font-display);
  letter-spacing: var(--ls-tight);
  margin-block-end: var(--space-md);
  text-transform: uppercase;
}
.pergola-text {
  color: var(--color-text-muted);
  font-size: var(--fs-h5);
  line-height: var(--lh-normal);
  margin-block-end: var(--space-lg);
  max-width: 580px;
}
.pergola-button {
  background: var(--color-accent);
  color: var(--color-bg);
  display: inline-block;
  font: var(--fw-bold) var(--fs-small) var(--font-display);
  letter-spacing: var(--ls-wide);
  padding: 18px 40px;
  text-transform: uppercase;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.pergola-button:hover { background: var(--color-accent-pressed); color: var(--color-bg); }

@media (max-width: 800px) {
  .pergola-inner { padding-block: var(--space-2xl); padding-inline: var(--container-padding-mobile); }
}

.frame {
  background: var(--color-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.frame-inner {
  align-items: center;
  display: flex;
  gap: var(--space-sm);
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-md);
  padding-inline: var(--container-padding-desktop);
}
.frame-portrait {
  border-radius: var(--radius-circle);
  flex-shrink: 0;
  height: 48px;
  overflow: hidden;
  width: 48px;
}
.frame-portrait img {
  height: 100%;
  object-fit: cover;
  object-position: center top;
  width: 100%;
}
.frame-text { display: flex; flex-direction: column; gap: 2px; }
.frame-attribution { color: var(--color-text-muted); font-size: var(--fs-body); }
.frame-name { color: var(--color-accent); text-decoration: underline; }
.frame-name:hover { color: var(--color-accent-pressed); }
.frame-role { color: var(--color-text-muted); font-size: var(--fs-small); font-style: italic; }
.frame-dates { color: var(--color-text-muted); font-size: var(--fs-small); margin-block-start: 2px; }
.frame-dates time { color: var(--color-text-muted); }

@media (max-width: 800px) {
  .frame-inner { padding-inline: var(--container-padding-mobile); }
}

.parapet {
  background: var(--color-primary);
  width: 100%;
}
.parapet-inner {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-2xl);
  padding-inline: var(--container-padding-desktop);
}
.parapet-col h6 {
  color: var(--color-text);
  font: var(--fw-bold) var(--fs-small) var(--font-display);
  letter-spacing: var(--ls-wide);
  margin-block-end: var(--space-md);
  text-transform: uppercase;
}
.parapet-logo { display: block; margin-block-end: var(--space-md); }
.parapet-logo img { height: 90px; width: auto; }
.parapet-tagline { color: var(--color-text-muted); font-size: var(--fs-small); line-height: var(--lh-normal); }
.parapet-col ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.parapet-col a { color: var(--color-text-muted); font-size: var(--fs-small); }
.parapet-col a:hover { color: var(--color-accent); }
.parapet-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-lg);
  padding-inline: var(--container-padding-desktop);
  text-align: center;
}
.parapet-bottom small { color: var(--color-text-muted); font-size: var(--fs-small); }

@media (max-width: 1100px) {
  .parapet-inner { grid-template-columns: 2fr 1fr 1fr; }
}
@media (max-width: 800px) {
  .parapet-inner { grid-template-columns: 1fr; padding-block: var(--space-xl); padding-inline: var(--container-padding-mobile); }
  .parapet-bottom { padding-inline: var(--container-padding-mobile); }
}

.vault {
  background: var(--color-bg-elevated);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  bottom: 0;
  display: none;
  left: 0;
  padding: var(--space-md);
  position: fixed;
  right: 0;
  z-index: 80;
}
.vault.is-visible { display: block; }
.vault-inner {
  align-items: center;
  display: flex;
  gap: var(--space-md);
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-inline: var(--container-padding-desktop);
}
.vault-text { color: var(--color-text-muted); flex: 1; font-size: var(--fs-small); line-height: var(--lh-normal); }
.vault-actions { display: flex; gap: var(--space-sm); }
.vault-btn {
  border: 1px solid var(--color-text);
  color: var(--color-text);
  font: var(--fw-bold) var(--fs-small) var(--font-display);
  letter-spacing: var(--ls-wide);
  padding: 10px 18px;
  text-transform: uppercase;
  white-space: nowrap;
}
.vault-btn--accept { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.vault-btn--accept:hover { background: var(--color-accent-pressed); border-color: var(--color-accent-pressed); color: var(--color-bg); }
.vault-btn--decline { background: transparent; }
.vault-btn--decline:hover { background: var(--color-text); color: var(--color-bg); }

@media (max-width: 800px) {
  .vault-inner { flex-direction: column; padding-inline: var(--container-padding-mobile); }
  .vault-actions { justify-content: center; width: 100%; }
}

.catwalk { background: var(--color-bg); }
.catwalk-inner {
  counter-reset: legal-section;
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-2xl);
  padding-inline: var(--container-padding-desktop);
}
.catwalk-intro {
  color: var(--color-text);
  font-size: var(--fs-h5);
  line-height: var(--lh-normal);
  margin-block-end: var(--space-lg);
}
.catwalk-section {
  counter-increment: legal-section;
  margin-block-end: var(--space-xl);
}
.catwalk-heading {
  color: var(--color-text);
  font-size: var(--fs-h3);
  margin-block-end: var(--space-md);
}
.catwalk-heading::before {
  color: var(--color-accent);
  content: counter(legal-section) '. ';
  font-weight: var(--fw-bold);
}
.catwalk-section p {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  margin-block-end: var(--space-md);
  padding-inline-start: var(--space-md);
}
.catwalk-contacts {
  background: var(--color-bg-elevated);
  border-left: 4px solid var(--color-accent);
  margin-block-end: var(--space-lg);
  padding: var(--space-lg);
}
.catwalk-contacts h3 {
  color: var(--color-text);
  font-size: var(--fs-h4);
  margin-block-end: var(--space-md);
}
.catwalk-contacts ul { list-style: disc inside; }
.catwalk-contacts li { color: var(--color-text-muted); margin-block-end: var(--space-xs); }
.catwalk-disclaimer {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  font-style: italic;
  margin-block-end: var(--space-lg);
}

@media (max-width: 800px) {
  .catwalk-inner { padding-block: var(--space-xl); padding-inline: var(--container-padding-mobile); }
  .catwalk-section p { padding-inline-start: 0; }
}

.arbor { background: var(--color-bg); }
.arbor-inner {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-xl);
  padding-inline: var(--container-padding-desktop);
}
.arbor-intro {
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin-block-end: var(--space-lg);
  margin-inline: auto;
  max-width: 540px;
  text-align: center;
}
.arbor-success {
  background: rgba(51, 212, 147, 0.1);
  border: 1px solid var(--color-accent);
  color: var(--color-text);
  margin-inline: auto;
  max-width: 540px;
  padding: var(--space-md);
}
.arbor-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-inline: auto;
  max-width: 540px;
}
.arbor-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.arbor-field label {
  color: var(--color-text);
  font: var(--fw-medium) var(--fs-small) var(--font-body);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.arbor-field input, .arbor-field textarea {
  background: var(--color-bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: var(--space-sm) var(--space-md);
}
.arbor-field input:focus, .arbor-field textarea:focus {
  border-color: var(--color-accent);
  outline: none;
}
.arbor-field textarea { min-height: 140px; resize: vertical; }
.arbor-submit {
  background: var(--color-accent);
  border: none;
  color: var(--color-bg);
  font: var(--fw-bold) var(--fs-small) var(--font-display);
  height: 52px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.arbor-submit:hover { background: var(--color-accent-pressed); color: var(--color-bg); }

@media (max-width: 800px) {
  .arbor-inner { padding-block: var(--space-lg); padding-inline: var(--container-padding-mobile); }
}

.trefoil { background: var(--color-bg); }
.trefoil-inner {
  align-items: center;
  display: flex;
  gap: var(--space-md);
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding: var(--space-lg) 0;
}
.trefoil-card {
  align-items: center;
  display: flex;
  gap: var(--space-md);
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-xl);
  padding-inline: var(--container-padding-desktop);
}
.trefoil-portrait {
  border-radius: var(--radius-circle);
  flex-shrink: 0;
  height: 140px;
  overflow: hidden;
  width: 140px;
}
.trefoil-portrait img {
  height: 100%;
  object-fit: cover;
  object-position: center top;
  width: 100%;
}
.trefoil-body { display: flex; flex-direction: column; gap: var(--space-2xs); }
.trefoil-name { color: var(--color-text); font-size: var(--fs-h4); }
.trefoil-role { color: var(--color-text-muted); font-size: var(--fs-small); }
.trefoil-articles {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  padding-block: var(--space-lg);
  padding-inline: var(--container-padding-desktop);
}
.trefoil-articles-heading {
  color: var(--color-text);
  font: var(--fw-bold) var(--fs-h4) var(--font-display);
  margin-block-end: var(--space-md);
}
.trefoil-articles-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.trefoil-articles-item { color: var(--color-text); font-size: var(--fs-body); line-height: var(--lh-normal); }
.trefoil-articles-item a { color: var(--color-accent); text-decoration: underline; }
.trefoil-articles-item a:hover { color: var(--color-accent-pressed); }

@media (max-width: 800px) {
  .trefoil-card { padding-block: var(--space-lg); padding-inline: var(--container-padding-mobile); flex-direction: column; align-items: flex-start; }
  .trefoil-articles { padding-inline: var(--container-padding-mobile); }
}

.loft {
  align-items: center;
  background: var(--color-bg);
  display: flex;
  justify-content: center;
  min-height: 60vh;
  padding: var(--space-2xl) var(--container-padding-desktop);
}
.loft-inner {
  margin-inline: auto;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  text-align: center;
}
.loft-content { margin-inline: auto; max-width: 600px; }
.loft-code {
  color: var(--color-accent);
  font: var(--fw-bold) 120px var(--font-display);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  margin-block-end: var(--space-md);
}
.loft-title { color: var(--color-text); font-size: var(--fs-h2); margin-block-end: var(--space-md); }
.loft-text { color: var(--color-text-muted); font-size: var(--fs-h5); line-height: var(--lh-normal); margin-block-end: var(--space-lg); }
.loft-btn {
  background: var(--color-accent);
  color: var(--color-bg);
  display: inline-block;
  font: var(--fw-bold) var(--fs-small) var(--font-display);
  letter-spacing: var(--ls-wide);
  padding: 18px 40px;
  text-transform: uppercase;
}
.loft-btn:hover { background: var(--color-accent-pressed); color: var(--color-bg); }

@media (max-width: 800px) {
  .loft { padding: var(--space-xl) var(--container-padding-mobile); }
  .loft-code { font-size: 80px; }
}