:root {
  --eb-bg: #f4f5f2;
  --eb-ink: #192b4e;
  --eb-muted: rgba(25, 43, 78, 0.68);
  --eb-gutter: clamp(20px, 4vw, 64px);
  --eb-max: 1500px;
  --eb-reading: 680px;
}

html { scroll-behavior: smooth; }
body.eb-feature-page { margin: 0; overflow-x: clip; background: var(--eb-bg); color: var(--eb-ink); }
.eb-feature-page *, .eb-feature-page *::before, .eb-feature-page *::after { box-sizing: border-box; }
.eb-feature-page img { display: block; max-width: 100%; }
.eb-feature-wrap { width: min(calc(100% - (var(--eb-gutter) * 2)), var(--eb-max)); margin-inline: auto; }

.eb-feature-intro { padding-top: clamp(72px, 9vw, 140px); }
.eb-feature-intro h1 { max-width: 10ch; margin: 0; font-size: clamp(4rem, 10vw, 9.5rem); font-weight: 700; letter-spacing: -0.07em; line-height: 0.86; text-transform: uppercase; }
.eb-feature-standfirst { max-width: 620px; margin: clamp(36px, 5vw, 72px) 0 0 auto; }
.eb-feature-standfirst p { margin: 0; font-family: "Source Sans 3", sans-serif; font-size: 1.5625rem; font-weight: 400; letter-spacing: 0; line-height: 1.35; }
.eb-feature-standfirst p + p { margin-top: 1.2em; }
.eb-feature-hero { width: min(calc(100% - (var(--eb-gutter) * 2)), 1720px); margin: clamp(58px, 8vw, 120px) auto 0; }
.eb-feature-hero img { width: 100%; height: auto; }

.eb-feature-reading { width: min(calc(100% - (var(--eb-gutter) * 2)), 640px); margin-inline: auto; }
.eb-feature-reading--intro { padding-block: clamp(88px, 12vw, 180px); }
.eb-feature-reading p:not(.eb-feature-kicker):not(.eb-feature-note) { margin: 0; font-family: "Source Sans 3", sans-serif; font-size: 1.25rem; font-weight: 400; letter-spacing: 0; line-height: 1.44; }
.eb-feature-reading p:not(.eb-feature-kicker):not(.eb-feature-note) + p:not(.eb-feature-kicker):not(.eb-feature-note) { margin-top: 1.2em; }

.eb-feature-section { padding-block: clamp(90px, 12vw, 180px); }
.eb-feature-section + .eb-feature-section { padding-top: 0; }
.eb-feature-heading { margin-bottom: clamp(44px, 6vw, 82px); }
.eb-feature-heading h2 { max-width: 13ch; margin: 0; font-size: clamp(2.8rem, 6.8vw, 7rem); font-weight: 700; letter-spacing: -0.065em; line-height: 0.9; text-transform: uppercase; }
.eb-feature-kicker, .eb-feature-note, .eb-feature-comparison figcaption { font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; }
.eb-feature-kicker { margin: 0 0 22px; color: var(--eb-muted); font-size: 0.78rem; }

.eb-feature-film { padding-top: 0; }
.eb-feature-vimeo { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #d8d9d5; }
.eb-feature-vimeo iframe, .eb-feature-launch-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.eb-feature-media { margin: 0; }
.eb-feature-media img { width: 100%; height: auto; }
.eb-feature-media--wide { width: min(calc(100% - (var(--eb-gutter) * 2)), 1720px); margin-inline: auto; }
.eb-feature-setting__lead { width: 86%; }
.eb-feature-setting__support { display: grid; grid-template-columns: .72fr 1.28fr; align-items: end; gap: clamp(8px, 1vw, 16px); width: 82%; margin: clamp(16px, 2vw, 30px) 0 0 auto; }
.eb-feature-setting__copy { margin-top: clamp(70px, 9vw, 130px); }

.eb-feature-solar-study { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); align-items: start; }
.eb-feature-solar-study img { width: 100%; height: auto; }
.eb-feature-solar-study-wrap + .eb-feature-reading { margin-top: clamp(70px, 9vw, 130px); }
.eb-feature-solar-dots { display: none; }
.eb-feature-note { margin-top: 36px !important; color: var(--eb-muted); font-size: .72rem !important; line-height: 1.4 !important; }

.eb-feature-palette { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: clamp(8px, 1vw, 16px); }
.eb-feature-palette figure { min-width: 0; }
.eb-feature-palette__living { grid-column: 1 / 11; }
.eb-feature-palette__green { grid-column: 1 / 7; margin-top: clamp(28px, 4vw, 64px); }
.eb-feature-palette__bedroom { grid-column: 8 / 13; margin-top: clamp(90px, 12vw, 180px); }
.eb-feature-palette__dining { grid-column: 2 / 9; margin-top: clamp(8px, 1vw, 16px); }
.eb-feature-palette__interior { grid-column: 9 / 13; align-self: end; margin-bottom: clamp(28px, 4vw, 64px); }
.eb-feature-palette__copy { margin-top: clamp(70px, 9vw, 130px); }

.eb-feature-sequence { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, .85fr); gap: clamp(8px, 1vw, 16px); align-items: start; }
.eb-feature-sequence__lead { grid-row: 1 / span 2; }
.eb-feature-sequence img { width: 100%; height: auto; }
.eb-feature-sequence + .eb-feature-reading { margin-top: clamp(70px, 9vw, 130px); }

.eb-feature-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(6px, .8vw, 12px); }
.eb-feature-comparison figure { margin: 0; }
.eb-feature-comparison img { width: 100%; height: auto; }
.eb-feature-comparison figcaption { margin-top: 12px; color: var(--eb-muted); font-size: .68rem; }
.eb-feature-comparison + .eb-feature-reading { margin-top: clamp(70px, 9vw, 130px); }

.eb-feature-launch .eb-feature-reading { margin-left: max(var(--eb-gutter), calc((100% - var(--eb-max)) / 2)); }
.eb-feature-launch-media { position: relative; width: min(72vw, 1100px); aspect-ratio: 16 / 9; margin-top: clamp(60px, 8vw, 110px); margin-left: auto; margin-right: max(var(--eb-gutter), calc((100% - var(--eb-max)) / 2)); background: #111; }

.eb-feature-credits { padding-block: clamp(100px, 14vw, 190px); }
.eb-feature-credits dl { margin: 0; color: var(--eb-muted); font-size: .78rem; letter-spacing: .06em; line-height: 1.55; text-transform: uppercase; }
.eb-feature-credits dl div { display: flex; gap: 10px; }
.eb-feature-credits dt::after { content: " //"; }
.eb-feature-credits dd { margin: 0; color: var(--eb-ink); }

.eb-feature-signoff { padding-bottom: clamp(100px, 12vw, 170px); }
.eb-feature-signoff > p:not(.eb-feature-kicker) { margin: 0; font-size: clamp(1.12rem, 1.5vw, 1.36rem); letter-spacing: -.024em; line-height: 1.48; }
.eb-feature-signoff__links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 38px; }
.eb-feature-signoff__links a { color: var(--eb-ink); font: 600 .75rem/1.3 ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.eb-feature-signoff__links a:hover, .eb-feature-signoff__links a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 699px) {
  :root { --eb-gutter: 19px; }
  .eb-feature-page .v2-topbar-inner { padding-inline: var(--eb-gutter); }
  .eb-feature-page .v2-nav { gap: 15px; font-size: .68rem; }
  .eb-feature-intro { padding-top: 58px; }
  .eb-feature-intro h1 { font-size: clamp(3.7rem, 17vw, 5.8rem); }
  .eb-feature-standfirst { margin-top: 34px; }
  .eb-feature-standfirst p { font-size: 1.25rem; line-height: 1.38; }
  .eb-feature-hero { width: 100%; margin-top: 48px; }
  .eb-feature-hero img { min-height: 72vw; object-fit: cover; }
  .eb-feature-reading--intro { padding-block: 76px 104px; }
  .eb-feature-reading p:not(.eb-feature-kicker):not(.eb-feature-note) { font-size: 1.125rem; line-height: 1.44; }
  .eb-feature-section { padding-bottom: 108px; }
  .eb-feature-heading { margin-bottom: 34px; }
  .eb-feature-heading h2 { font-size: clamp(2.7rem, 13vw, 4.5rem); }
  .eb-feature-film .eb-feature-wrap { width: 100%; }
  .eb-feature-film .eb-feature-kicker { width: calc(100% - (var(--eb-gutter) * 2)); margin-inline: auto; }
  .eb-feature-media--wide { width: 100%; }
  .eb-feature-setting { width: 100%; }
  .eb-feature-setting__lead { width: 100%; }
  .eb-feature-setting__support { grid-template-columns: 1fr; width: 88%; gap: 8px; margin-top: 8px; }
  .eb-feature-setting__copy { margin-top: 56px; }
  .eb-feature-solar-study-wrap { width: 100%; overflow: hidden; }
  .eb-feature-solar-study {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 var(--eb-gutter) 4px;
    scroll-behavior: smooth;
    scroll-padding-left: var(--eb-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .eb-feature-solar-study::-webkit-scrollbar { display: none; }
  .eb-feature-solar-study figure { flex: 0 0 86%; scroll-snap-align: start; }
  .eb-feature-solar-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .eb-feature-solar-dots button { width: 6px; height: 6px; border: 0; border-radius: 50%; padding: 0; background: rgba(25, 43, 78, .26); cursor: pointer; }
  .eb-feature-solar-dots button[aria-current="true"] { background: var(--eb-ink); }
  .eb-feature-solar-study-wrap + .eb-feature-reading, .eb-feature-sequence + .eb-feature-reading, .eb-feature-comparison + .eb-feature-reading { margin-top: 56px; }
  .eb-feature-palette { width: 100%; display: flex; flex-direction: column; gap: 8px; }
  .eb-feature-palette figure { width: 100%; margin: 0; }
  .eb-feature-palette__green, .eb-feature-palette__interior { width: 88% !important; align-self: flex-end; }
  .eb-feature-palette__bedroom { width: 78% !important; align-self: flex-start; }
  .eb-feature-palette__copy { margin-top: 56px; }
  .eb-feature-sequence { width: 100%; grid-template-columns: 1fr; gap: 8px; }
  .eb-feature-sequence__lead { grid-row: auto; }
  .eb-feature-comparison { width: 100%; grid-template-columns: 1fr; gap: 30px; }
  .eb-feature-comparison figcaption { padding-inline: var(--eb-gutter); }
  .eb-feature-launch .eb-feature-reading { margin-inline: auto; }
  .eb-feature-launch-media { width: 100%; margin: 52px auto 0; }
  .eb-feature-credits dl div { display: block; margin-top: 12px; }
  .eb-feature-credits dd { margin-top: 2px; }
  .eb-feature-signoff { padding-bottom: 104px; }
  .eb-feature-signoff__links { align-items: flex-start; flex-direction: column; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .eb-feature-solar-study { scroll-behavior: auto; }
}
