:root {
  /* Chrome that used to be tinted. Colour is reserved for the hero, the CTA and
     anything that actually encodes data; everything else reads in ink. */
  --chrome: #1c1c1c;
  --chrome-soft: rgb(0 0 0 / 14%);
  --chrome-fill: rgb(0 0 0 / 5%);
}

/* Emberfall case study.
   Same skeleton as the Rivo and Vera detail pages: shared container, section
   rhythm, card treatment (1px border-soft, radius-lg, #fafafa) and breakpoints.
   Only the accent palette belongs to Emberfall.

   Every asset is a plain export of the matching Figma node, shown as it comes
   out of the file. The page does not wrap them in panels: each image sits on the
   section with nothing but a corner radius, and the labels around it are real
   text so they stay sharp and translate with the rest of the page. */

:root {
  /* Every detail page carries the one site accent, the colour of the "Product
     Designer" line on the homepage. Anything that needs to sit back from it uses
     the same hue at a lower opacity rather than a second colour. The only other
     colours here are the artwork's, and the palette swatches, which are the
     subject rather than decoration. */
  --ef-accent: var(--mint);
  --ef-accent-bright: var(--mint);
  --ef-ink: #171129;
  --ef-paper: #fafafa;
}

/* ---------- Hero ---------- */

.ef-hero {
  padding: 150px 0 100px;
  text-align: center;
  /* The key art fades out of a glow rather than starting at a hard edge, so the
     hero carries one behind it, in the site accent. */
  background:
    radial-gradient(1200px 640px at 50% 100%, rgb(41 182 246 / 22%), transparent 72%),
    radial-gradient(900px 520px at 15% 0%, rgb(41 182 246 / 10%), transparent 70%),
    var(--bg-dark);
}

.ef-eyebrow {
  display: inline-block;
  margin: 0 0 20px;
  color: var(--ef-accent-bright);
  font-family: var(--font-hand);
  font-size: var(--text-l);
  font-weight: 700;
  transform: rotate(-3deg);
}

.ef-title {
  margin: 0 0 24px;
  color: var(--text-dark-1);
  font-family: var(--font-display);
  font-size: var(--h1);
  font-weight: var(--fw-semibold);
  letter-spacing: -.04em;
  line-height: .92;
}

.ef-desc {
  max-width: 940px;
  margin: 0 auto;
  color: var(--text-dark-2);
  font-size: var(--text-m);
  line-height: 1.55;
}

.ef-hero-shot {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: clamp(36px, 5vw, 56px) auto 0;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px rgb(0 0 0 / 55%);
}

/* ---------- Shared copy blocks ---------- */

.ef-lede {
  max-width: 900px;
  margin: 0 0 44px;
  color: var(--text-light-2);
  font-size: var(--text-m);
  line-height: 1.65;
}

.ef-prose {
  display: grid;
  gap: 22px;
  max-width: 900px;
  margin: 0 0 44px;
}

.ef-prose p {
  margin: 0;
  color: var(--text-light-2);
  font-size: var(--text-m);
  line-height: 1.7;
}

.ef-closing {
  max-width: 900px;
  margin: 40px 0 0;
  padding-left: 22px;
  border-left: 3px solid var(--chrome);
  color: var(--text-light-1);
  font-size: var(--text-m);
  line-height: 1.65;
}

.ef-subhead {
  max-width: 900px;
  margin: 56px 0 22px;
  color: var(--text-light-1);
  font-family: var(--font-display);
  font-size: var(--h5);
  font-weight: var(--fw-semibold);
  letter-spacing: -.02em;
  line-height: 1.25;
}

/* ---------- Project meta ---------- */

.ef-meta {
  display: grid;
  grid-template-columns: 1.6fr 1.4fr 1.2fr;
  margin: 56px 0 0;
  padding: 28px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.ef-meta div {
  padding: 0 24px;
  border-right: 1px solid var(--border-soft);
}

.ef-meta div:first-child { padding-left: 0; }

.ef-meta div:last-child {
  padding-right: 0;
  border-right: 0;
}

.ef-meta dt {
  margin: 0 0 8px;
  color: var(--text-light-2);
  font-size: var(--text-t);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ef-meta dd {
  margin: 0;
  color: var(--text-light-1);
  font-size: var(--text-r);
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- Chips ---------- */

.ef-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ef-chips li {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid var(--chrome-soft);
  border-radius: 999px;
  background: #fff;
  color: var(--text-light-1);
  font-size: var(--text-s);
  font-weight: 700;
  line-height: 1.3;
}

/* ---------- Card grids ---------- */

.ef-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.ef-cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ef-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--ef-paper);
}

.ef-card--rule {
  padding-top: 24px;
  border-top: 4px solid var(--accent, var(--chrome));
}

.ef-card-index {
  display: block;
  margin-bottom: 14px;
  color: var(--accent, var(--chrome));
  font-size: var(--text-t);
  font-weight: 800;
  letter-spacing: .1em;
}

.ef-card h3 {
  margin: 0 0 14px;
  color: var(--text-light-1);
  font-size: var(--text-l);
  line-height: 1.35;
}

.ef-card p {
  margin: 0;
  color: var(--text-light-2);
  font-size: var(--text-r);
  line-height: 1.65;
}

/* ---------- Numbered rules ---------- */

.ef-numlist {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ef-num;
  max-width: 900px;
}

.ef-numlist li {
  display: grid;
  align-items: baseline;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 26px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--ef-paper);
  color: var(--text-light-2);
  counter-increment: ef-num;
  font-size: var(--text-r);
  line-height: 1.6;
}

.ef-numlist li::before {
  content: counter(ef-num, decimal-leading-zero);
  color: var(--chrome);
  font-size: var(--text-s);
  font-weight: 800;
  letter-spacing: .08em;
}

.ef-numlist strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text-light-1);
  font-size: var(--text-m);
  font-weight: 600;
}

/* ---------- Pull quote ---------- */

.ef-quote {
  display: grid;
  gap: 10px;
  max-width: 900px;
  margin: 40px 0 0;
  padding: clamp(22px, 2.6vw, 30px) clamp(24px, 2.8vw, 34px);
  border: 1px solid var(--chrome-soft);
  border-left: 4px solid var(--chrome);
  border-radius: var(--radius-lg);
  background: #fafafa;
}

.ef-quote p {
  margin: 0;
  color: var(--text-light-1);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.45;
}

.ef-quote footer {
  color: var(--text-light-2);
  font-size: var(--text-s);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------- Currency cards ---------- */

.ef-currencies {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ef-currencies li {
  padding: 28px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--ef-paper);
}

.ef-currencies img {
  display: block;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
}

.ef-currencies b {
  display: block;
  margin-bottom: 10px;
  color: var(--text-light-1);
  font-size: var(--text-m);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ef-currencies p {
  margin: 0;
  color: var(--text-light-2);
  font-size: var(--text-r);
  line-height: 1.65;
}

/* ---------- Colour ramps ---------- */

.ef-ramp {
  display: grid;
  grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ef-ramp li {
  display: grid;
  gap: 7px;
}

.ef-ramp span {
  display: block;
  height: 54px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}

.ef-ramp b,
.ef-ramp small {
  display: block;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  text-align: center;
}

.ef-ramp b {
  color: var(--text-light-1);
  font-size: var(--text-t);
  font-weight: 800;
  text-transform: uppercase;
}

.ef-ramp small {
  margin-top: -3px;
  color: var(--text-light-2);
  font-size: var(--text-t);
}

.ef-ramps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ef-ramp-group {
  padding: 22px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--ef-paper);
}

.ef-ramp-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 16px;
  font-size: var(--text-s);
}

.ef-ramp-head b {
  color: var(--text-light-1);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ef-ramp-head em {
  color: var(--text-light-2);
  font-size: var(--text-t);
  font-style: normal;
}

/* ---------- Swatch rows: panel build up and elevation ----------
   The exports are cut to the panel, so the two swatches whose whole point is an
   effect outside that shape get it back here. */

.ef-swatches {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ef-swatches img {
  display: block;
  width: 100%;
  height: auto;
}

/* Cropping to the panel drops the cast shadow and the glow, which are the whole
   subject of those two swatches, so the page draws them instead. */
.ef-swatches li.is-shadow img { filter: drop-shadow(0 5px 9px rgb(23 17 41 / 45%)); }

.ef-swatches li.is-glow img { filter: drop-shadow(0 0 8px rgb(41 182 246 / 80%)); }

.ef-swatches b {
  display: block;
  margin: 14px 0 3px;
  color: var(--ef-accent);
  font-size: var(--text-t);
  font-weight: 800;
  letter-spacing: .04em;
}

.ef-swatches span {
  display: block;
  color: var(--text-light-2);
  font-size: var(--text-t);
  line-height: 1.45;
}

.ef-swatches--center { text-align: center; }

/* ---------- Button states ---------- */

.ef-buttonset {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ef-buttonset img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Shared components ----------
   Two specs side by side. The bars are shown near their real 390px width rather
   than blown up: at that size the counters and labels read exactly as they do on
   the device, which is the point of putting them here. */

.ef-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  max-width: 900px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ef-spec-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 14px;
}

.ef-spec-head b {
  color: var(--text-light-1);
  font-size: var(--text-t);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ef-spec-head span {
  color: var(--text-light-2);
  font-size: var(--text-t);
  font-variant-numeric: tabular-nums;
}

.ef-specs img {
  display: block;
  width: 100%;
  max-width: 390px;
  height: auto;
  border-radius: 12px;
}

.ef-specs p:last-child {
  margin: 16px 0 0;
  color: var(--text-light-2);
  font-size: var(--text-r);
  line-height: 1.6;
}

/* ---------- Village art ---------- */

.ef-villages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ef-villages figure { margin: 0; }

.ef-villages img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.ef-villages figcaption {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 18px;
  font-size: var(--text-t);
}

.ef-villages figcaption b {
  color: var(--text-light-1);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ef-villages figcaption span { color: var(--text-light-2); }

/* ---------- Scale strip: radius and spacing numbers ---------- */

.ef-scale {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.ef-scale li {
  padding: 18px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--ef-paper);
  text-align: center;
}

.ef-scale b {
  display: block;
  margin-bottom: 4px;
  color: var(--chrome);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -.02em;
}

.ef-scale small {
  color: var(--text-light-2);
  font-size: var(--text-t);
  letter-spacing: .04em;
}

/* ---------- Device screens ----------
   The screen exports are cropped to the bezel, so the corner rounding and the
   shadow are the page's job. 7.7% of the width is the phone's own 30px radius at
   390px wide; the second value keeps the corner circular at the 1:2.153 crop. */

.ef-screens {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ef-screens figure,
.ef-pair figure { margin: 0; }

.ef-screens img,
.ef-pair img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7.7% / 3.58%;
  box-shadow: 0 14px 30px rgb(23 17 41 / 26%);
}

.ef-screens figcaption,
.ef-pair figcaption {
  margin-top: 16px;
  color: var(--text-light-2);
  font-size: var(--text-t);
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}

.ef-screens figcaption b { color: var(--chrome); }

/* The two screens that carry the whole first impression run larger, at a size
   where the HUD is actually readable. */
.ef-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  max-width: 640px;
  margin: 0 0 48px;
}

/* ---------- Closing stats ---------- */

.ef-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 56px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--border-soft);
}

.ef-stats div {
  padding: 0 24px;
  border-right: 1px solid var(--border-soft);
}

.ef-stats div:first-child { padding-left: 0; }

.ef-stats div:last-child {
  padding-right: 0;
  border-right: 0;
}

.ef-stats dt {
  margin: 0 0 6px;
  color: var(--text-light-1);
  font-family: var(--font-display);
  font-size: var(--h3);
  font-weight: var(--fw-semibold);
  letter-spacing: -.03em;
  line-height: 1;
}

.ef-stats dd {
  margin: 0;
  color: var(--text-light-2);
  font-size: var(--text-t);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .ef-ramp--surface { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ef-scale { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ef-ramps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-swatches,
  .ef-buttonset { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .ef-specs { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .ef-screens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ef-currencies { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .ef-cards,
  .ef-cards--four {
    grid-template-columns: minmax(0, 1fr);
  }

  .ef-meta,
  .ef-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }

  .ef-meta div,
  .ef-stats div {
    padding: 0 18px;
  }

  .ef-meta div:nth-child(odd),
  .ef-stats div:nth-child(odd) {
    padding-left: 0;
  }

  .ef-meta div:nth-child(even),
  .ef-stats div:nth-child(even) {
    padding-right: 0;
    border-right: 0;
  }

  .ef-meta div:last-child { border-right: 0; }

  .ef-screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .ef-ramps,
  .ef-villages { grid-template-columns: minmax(0, 1fr); }
  .ef-swatches,
  .ef-buttonset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .ef-hero { padding: 120px 0 70px; }

  .ef-lede,
  .ef-prose p {
    font-size: var(--text-m);
  }

  .ef-numlist li {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 18px 20px;
  }

  .ef-card,
  .ef-currencies li {
    padding: 22px;
  }
}