/* Etpaar Creative Studio page */
.st-sec {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(60px, 9vh, 116px) var(--gutter);
}

.st-section-head {
  margin-bottom: clamp(30px, 5vh, 52px);
}

.st-h {
  font-size: clamp(2rem, 4.6vw, 3.45rem);
  margin-top: 18px;
  line-height: 1.04;
}

.st-h em {
  color: var(--gold);
  font-style: italic;
  font-variation-settings: var(--fx-i);
}

.st-section-head .lede {
  margin-top: 16px;
  max-width: 54ch;
}

/* Required labels stay in ink on cream. Gold is reserved for rules and display type. */
.st-sec .sec-index .num,
.st-sec .sec-index .lab {
  color: var(--soft-ink);
}

.st-sec .sec-index .rule {
  background: var(--gold);
}

.phero .peyebrow .num {
  color: var(--soft-ink);
}

/* One smooth slide-and-settle language overrides the shared rotating type modes. */
.phero h1.type-entry {
  opacity: 1;
  clip-path: none;
  filter: none;
  letter-spacing: -0.03em;
  transform: none;
  transition: opacity .82s var(--e-quart), transform .95s var(--e-expo);
}

html.js-ready body:not(.calm) .phero h1.type-entry:not(.type-in) {
  opacity: 0;
  clip-path: none;
  filter: none;
  letter-spacing: -0.03em;
  transform: translateY(14px);
}

.phero h1.type-entry::before {
  display: none;
}

html.js-ready body:not(.calm) .phero :is(.peyebrow, .pintro) {
  animation-name: st-slide-settle;
  animation-duration: .9s;
  animation-timing-function: var(--e-expo);
}

html.js-ready body:not(.calm) main .rv:not(.in) {
  transform: translateY(16px);
}

@keyframes st-slide-settle {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Name, owner, and capacity. Photo pending: the studio photograph column is
   commented out in studio.html, so the introduction sets as one calm reading
   column. When the photograph returns, restore
   grid-template-columns: minmax(0, .82fr) minmax(360px, 1.18fr) with
   align-items: center, and remove the .st-intro-copy max-width. */
.st-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(38px, 7vw, 104px);
  padding-top: clamp(32px, 5vh, 64px);
}

.st-intro-copy {
  max-width: 720px;
}

.st-story p {
  color: var(--soft-ink);
  font-size: clamp(1.14rem, 1.8vw, 1.32rem);
  line-height: 1.65;
  margin-bottom: 22px;
}

.st-story b {
  color: var(--ink);
  font-weight: 600;
}

.st-ledger {
  border-bottom: 1px solid rgba(20, 18, 31, .16);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 34px;
}

.st-ledger .cell {
  border-top: 1px solid rgba(20, 18, 31, .16);
  padding: 17px 0 20px;
}

.st-ledger .cell + .cell {
  padding-left: clamp(18px, 3vw, 34px);
}

.st-ledger dt,
.st-ledger span,
.st-human figcaption,
.st-desk figcaption,
.st-era .tag,
.st-fit-label {
  font-family: var(--ff-mono);
  font-size: .6875rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.st-ledger dt {
  color: var(--soft-ink);
  margin-bottom: 8px;
}

.st-ledger dd {
  color: var(--ink);
  font-family: var(--ff-display);
  font-size: clamp(1.12rem, 1.8vw, 1.42rem);
  font-variation-settings: var(--fx-d);
  font-weight: 500;
  letter-spacing: -.01em;
}

.st-ledger span {
  color: var(--warm-gray);
  display: block;
  margin-top: 7px;
}

.st-human {
  margin: 0;
}

.st-human-frame {
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, transparent 49.85%, rgba(20, 18, 31, .14) 50%, transparent 50.15%),
    linear-gradient(45deg, transparent 49.85%, rgba(20, 18, 31, .14) 50%, transparent 50.15%),
    var(--paper-2);
  border: 1px solid rgba(20, 18, 31, .16);
  border-radius: 8px;
  box-shadow: 0 32px 62px -42px rgba(60, 30, 10, .48);
  display: grid;
  overflow: hidden;
  place-items: center;
  position: relative;
}

.st-human img {
  background: transparent;
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.st-photo-note {
  color: var(--soft-ink);
  font-family: var(--ff-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  line-height: 1.7;
  padding: 24px;
  text-align: center;
  text-transform: uppercase;
}

.st-human figcaption,
.st-desk figcaption {
  color: var(--soft-ink);
  line-height: 1.45;
  margin-top: 11px;
}

/* The one retained principle. */
.st-guides {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr);
  gap: clamp(38px, 7vw, 110px);
  align-items: start;
}

.st-guide-grid {
  border-bottom: 1px solid rgba(20, 18, 31, .15);
}

.st-guide-grid p {
  border-top: 1px solid rgba(20, 18, 31, .15);
  color: var(--soft-ink);
  line-height: 1.62;
  padding: clamp(24px, 4vh, 40px) 0;
}

.st-guide-lede {
  font-family: var(--ff-display);
  font-size: clamp(1.45rem, 2.8vw, 2.15rem);
  font-variation-settings: var(--fx-d);
  letter-spacing: -.018em;
}

.st-guide-note {
  font-size: 1.12rem;
  max-width: 58ch;
}

.st-star {
  color: var(--gold);
  display: inline-block;
  margin-right: 12px;
}

/* One large work proof with three supporting figures. */
.st-desk .dgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
}

.st-desk figure {
  margin: 0;
}

.st-work-support {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 26px);
}

.st-work-support > .work-figure:last-child {
  grid-column: 1 / -1;
}

.work-figure {
  color: inherit;
  display: block;
  text-decoration: none;
  transition: color .3s var(--e-quart), transform .65s var(--e-expo);
}

.work-figure .ph {
  background: var(--paper-2);
  border-radius: 6px;
  box-shadow: 0 24px 46px -30px rgba(60, 30, 10, .45);
  overflow: hidden;
}

.work-figure img {
  display: block;
  filter: none;
  height: auto;
  object-fit: contain;
  transition: transform .75s var(--e-expo);
  width: 100%;
}

.work-figure:hover,
.work-figure:focus-visible {
  color: var(--vermilion);
  transform: translateY(-4px);
}

.work-figure:hover img,
.work-figure:focus-visible img {
  transform: scale(1.012);
}

.st-work-link {
  margin-top: clamp(30px, 5vh, 52px);
}

/* The authored interaction: both halves settle into the seam as one scene. */
.st-eras .panels {
  border-radius: 10px;
  box-shadow: 0 36px 70px -42px rgba(60, 30, 10, .55);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  position: relative;
}

.st-era {
  padding: clamp(34px, 4.5vw, 58px) clamp(26px, 4vw, 54px) clamp(38px, 5vw, 62px);
  transform: none;
  transition: transform .86s var(--e-expo);
}

html.js-ready body:not(.calm) .st-eras .panels.rv:not(.in) .st-era.old {
  transform: translateX(-16px);
}

html.js-ready body:not(.calm) .st-eras .panels.rv:not(.in) .st-era.new {
  transform: translateX(16px);
}

.st-era.old {
  background: var(--paper-2);
}

.st-era.new {
  background: var(--ink);
}

.st-era .tag {
  display: block;
  margin-bottom: 18px;
}

.st-era.old .tag {
  color: var(--soft-ink);
}

.st-era.new .tag {
  color: var(--gold);
}

.st-era h3 {
  text-wrap: balance;
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  font-optical-sizing: auto;
  font-variation-settings: var(--fx-d);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.06;
  margin-bottom: 14px;
}

.st-era.old h3 {
  color: var(--ink);
  font-style: italic;
  font-variation-settings: var(--fx-i);
}

.st-era.new h3 {
  color: #F4EEE4;
}

.st-era > p {
  font-size: 1.12rem;
  line-height: 1.62;
  max-width: 42ch;
}

.st-era.old > p {
  color: var(--soft-ink);
}

.st-era.new > p {
  color: rgba(244, 238, 228, .82);
}

.st-era ul {
  list-style: none;
  margin-top: 24px;
  padding: 0;
}

.st-era li {
  border-top: 1px solid rgba(20, 18, 31, .13);
  padding: 12px 0;
}

.st-era.old li {
  color: var(--soft-ink);
  font-size: 1.06rem;
}

.st-era.old li::before {
  color: var(--gold);
  content: '✦';
  font-size: .62em;
  margin-right: 12px;
  position: relative;
  top: -.15em;
}

.st-era.new li {
  border-color: rgba(244, 238, 228, .14);
  color: rgba(244, 238, 228, .78);
  display: flex;
  font-family: var(--ff-mono);
  font-size: .6875rem;
  gap: 16px;
  justify-content: space-between;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.st-era.new li b {
  color: var(--gold);
  flex-shrink: 0;
  font-weight: 500;
}

.st-era.new li span {
  text-align: right;
}

.st-seam {
  align-items: center;
  background: var(--paper);
  border: 1px solid rgba(20, 18, 31, .14);
  border-radius: 50%;
  box-shadow: 0 12px 26px -10px rgba(60, 30, 10, .45);
  color: var(--gold);
  display: flex;
  font-size: 18px;
  height: 46px;
  justify-content: center;
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity .5s var(--e-quart) .32s, transform .78s var(--e-expo) .2s;
  width: 46px;
  z-index: 2;
}

html.js-ready body:not(.calm) .st-eras .panels.rv:not(.in) .st-seam {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
}

/* =====================================================================
   THE HAND/MOTOR DIPTYCH — № 04 as a two-spread branch of the house
   accordion (canon: src/styles/journal-strip.css). Desktop only, JS only:
   studio.js adds .hm-on and the two spine buttons; without either, the
   static grid diptych above renders untouched (fail open, print gets both
   sides). One side open, the other collapsed to a titled spine — the
   Motor's spine is its own ink, the Hand's stays paper — and every width
   move rides the one house curve, the suck.
   ===================================================================== */
.st-spine {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: none;
  inset: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 3;
}

.st-era.old .st-spine:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}

.st-era.new .st-spine:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -4px;
}

@media (min-width: 821px) {
  .st-eras .panels.hm-on {
    --e-suck: cubic-bezier(.87, 0, .13, 1);  /* slow in, sucked through, soft release */
    --hm-spine: clamp(200px, 16vw, 240px);
    display: flex;
    height: clamp(440px, 56vh, 580px);
  }

  .panels.hm-on .st-era {
    flex: 0 0 auto;
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: width 1050ms var(--e-suck), padding 1050ms var(--e-suck), transform .86s var(--e-expo);
    width: var(--hm-spine);
    will-change: width;
  }

  .panels.hm-on .st-era.hm-open {
    width: calc(100% - var(--hm-spine));
  }

  html.js-ready .panels.hm-on .st-era:not(.hm-open) .st-spine {
    display: block;
  }

  /* the spine: tighter margins; the tag + title survive, set small */
  .panels.hm-on .st-era:not(.hm-open) {
    padding: clamp(26px, 3.4vh, 36px) clamp(18px, 1.6vw, 26px);
  }

  .panels.hm-on .st-era h3 {
    transition: font-size 1050ms var(--e-suck), color 700ms var(--e-quart);
  }

  .panels.hm-on .st-era:not(.hm-open) h3 {
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    line-height: 1.3;
  }

  /* the melt: body copy fades on collapse, returns after the landing */
  .panels.hm-on .st-era > p,
  .panels.hm-on .st-era ul {
    transition: opacity 450ms var(--e-quart);
  }

  .panels.hm-on .st-era:not(.hm-open) > p,
  .panels.hm-on .st-era:not(.hm-open) ul {
    opacity: 0;
    pointer-events: none;
  }

  .panels.hm-on .st-era.hm-open > p,
  .panels.hm-on .st-era.hm-open ul {
    transition-delay: 560ms;
  }

  /* text rides above the ghosted glyph */
  .panels.hm-on .st-era > .tag,
  .panels.hm-on .st-era > h3,
  .panels.hm-on .st-era > p,
  .panels.hm-on .st-era ul {
    position: relative;
    z-index: 1;
  }

  /* the panel glyph, ghosted on the spine (the house watermark move) */
  .panels.hm-on .st-era::before {
    align-items: center;
    content: '✦';
    display: flex;
    font-size: clamp(4rem, 6.5vw, 6.5rem);
    inset: 0;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 500ms var(--e-quart) 250ms;
    z-index: 0;
  }

  .panels.hm-on .st-era.old::before {
    color: var(--gold);
  }

  .panels.hm-on .st-era.new::before {
    color: #F4EEE4;
  }

  .panels.hm-on .st-era:not(.hm-open)::before {
    opacity: .15;
  }

  .panels.hm-on .st-era:not(.hm-open):is(:hover, :focus-within)::before {
    opacity: .3;
  }

  /* the fore-edge: page-ends stacked along the collapsed side's inner
     edge — the same "there are pages beneath" cue as the journal stack.
     Two hairlines at rest; hovering cracks the spine a few px and the
     paper block itself slides into view. Pure transform, clipped by the
     panel's own overflow. Ink hairlines on the paper side, cream on the
     ink side. */
  .panels.hm-on .st-era::after {
    bottom: 0;
    content: '';
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: transform .55s var(--e-expo), opacity 250ms var(--e-quart);
    width: 13px;
    z-index: 2;
  }

  .panels.hm-on .st-era.new::after {
    background: linear-gradient(90deg,
      #F4EEE4 0 4px,
      rgba(20, 18, 31, .5) 4px 5px,
      rgba(244, 238, 228, .85) 5px 6px,
      transparent 6px 8px,
      rgba(244, 238, 228, .55) 8px 9px,
      transparent 9px 11px,
      rgba(244, 238, 228, .34) 11px 12px,
      transparent 12px);
    left: 0;
    transform: translateX(-7px);
  }

  .panels.hm-on .st-era.old::after {
    background: linear-gradient(270deg,
      #FFFDF9 0 4px,
      rgba(20, 18, 31, .4) 4px 5px,
      rgba(20, 18, 31, .5) 5px 6px,
      transparent 6px 8px,
      rgba(20, 18, 31, .32) 8px 9px,
      transparent 9px 11px,
      rgba(20, 18, 31, .2) 11px 12px,
      transparent 12px);
    right: 0;
    transform: translateX(7px);
  }

  .panels.hm-on .st-era:not(.hm-open)::after {
    opacity: 1;
    transition: transform .55s var(--e-expo), opacity 450ms var(--e-quart) 400ms;
  }

  .panels.hm-on .st-era:not(.hm-open):is(:hover, :focus-within)::after {
    transform: translateX(0);
  }

  /* the seam star rides the moving boundary, above the spine button */
  .panels.hm-on .st-seam {
    left: calc(100% - var(--hm-spine));
    pointer-events: none;
    transition: left 1050ms var(--e-suck), opacity .5s var(--e-quart) .32s, transform .78s var(--e-expo) .2s;
    z-index: 4;
  }

  .panels.hm-on.hm-motor .st-seam {
    left: var(--hm-spine);
  }
}

/* the diptych under reduced motion / the calm toggle: instant swap */
@media (prefers-reduced-motion: reduce) {
  .panels.hm-on .st-era,
  .panels.hm-on .st-era::before,
  .panels.hm-on .st-era::after,
  .panels.hm-on .st-era h3,
  .panels.hm-on .st-era > p,
  .panels.hm-on .st-era ul,
  .panels.hm-on .st-seam {
    transition: none !important;
  }
}

body.calm .panels.hm-on .st-era,
body.calm .panels.hm-on .st-era::before,
body.calm .panels.hm-on .st-era::after,
body.calm .panels.hm-on .st-era h3,
body.calm .panels.hm-on .st-era > p,
body.calm .panels.hm-on .st-era ul,
body.calm .panels.hm-on .st-seam {
  transition: none !important;
}

/* Practical fit and one grouped three-part process. */
.st-fit {
  align-items: start;
  border-bottom: 1px solid rgba(20, 18, 31, .15);
  border-top: 1px solid rgba(20, 18, 31, .15);
  display: grid;
  gap: clamp(18px, 4vw, 58px);
  grid-template-columns: minmax(110px, .28fr) minmax(0, 1.72fr);
  margin-bottom: clamp(42px, 7vh, 76px);
  padding: clamp(24px, 4vh, 38px) 0;
}

.st-fit-label {
  color: var(--soft-ink);
  padding-top: .45em;
}

.st-fit p {
  color: var(--soft-ink);
  font-size: clamp(1.15rem, 2vw, 1.38rem);
  line-height: 1.62;
  max-width: 68ch;
}

.st-method .steps {
  display: grid;
  gap: clamp(22px, 3.4vw, 48px);
  grid-template-columns: repeat(3, 1fr);
}

.st-step {
  border-top: 2px solid var(--gold);
  padding-top: 16px;
}

.st-step .snm {
  color: var(--gold);
  display: block;
  font-family: var(--ff-mono);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: .02em;
}

.st-step h3 {
  font-family: var(--ff-display);
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  font-variation-settings: var(--fx-d);
  font-weight: 500;
  letter-spacing: -.02em;
  margin: 9px 0 10px;
}

.st-step p {
  color: var(--soft-ink);
  font-size: 1.06rem;
  line-height: 1.62;
}

/* =====================================================================
   THE EDITOR'S NOTE — the paper's sign-off, moved home from the front
   page. Eyebrow (why it exists) · the note · a signed close under the
   gold star. Ink on cream: the studio's dark only arrives at the footer,
   so the note reads on paper, unlike its old dusk-side setting.
   ===================================================================== */
.st-note .sec-index {
  align-items: flex-start;
  margin-bottom: clamp(26px, 4.5vh, 44px);
}

/* the taller label block (eyebrow · title · why-line) top-aligns the row;
   the № and rule are nudged back level with the title line */
.st-note .sec-index .num {
  margin-top: 1.9em;
  white-space: nowrap;
}

.st-note .sec-index .rule {
  margin-top: 24px;
}

.st-note-lab {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.st-note-eyebrow {
  color: var(--soft-ink);
  font-family: var(--ff-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.st-note-star {
  color: var(--gold);
  font-style: normal;
  margin-right: 2px;
}

.st-note-title {
  color: var(--ink);
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-style: italic;
  font-variation-settings: var(--fx-i);
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.05;
  margin-top: 4px;
  text-transform: none;
}

.st-note-why {
  color: var(--warm-gray);
  display: block;
  font-family: var(--ff-body);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-style: italic;
  font-variation-settings: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  margin-top: 10px;
  max-width: 46ch;
  text-transform: none;
}

.st-note-body {
  max-width: 720px;
}

.st-note-body p {
  color: var(--soft-ink);
  font-size: clamp(1.14rem, 1.8vw, 1.32rem);
  line-height: 1.65;
  margin-bottom: 22px;
  max-width: 58ch;
}

.st-note-body b {
  color: var(--ink);
  font-weight: 600;
}

.st-note-lead,
.st-note-body p.st-note-lead {
  color: var(--ink);
  font-family: var(--ff-display);
  font-optical-sizing: auto;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-variation-settings: var(--fx-d);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.16;
  margin-bottom: clamp(22px, 3.5vh, 34px);
  max-width: 26ch;
}

.st-note-sig {
  align-items: baseline;
  border-top: 1px solid rgba(20, 18, 31, .15);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(20px, 4vh, 42px);
  max-width: 720px;
  padding-top: clamp(16px, 2.5vh, 24px);
}

.st-sig-star {
  color: var(--gold);
  flex: none;
  font-size: .95rem;
}

.st-sig-name {
  color: var(--ink);
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-style: italic;
  font-variation-settings: var(--fx-i);
  letter-spacing: -.01em;
}

.st-sig-role {
  color: var(--warm-gray);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* A soft ending: the signed close gets extra paper below it, and the dusk
   ramp is taller with a later, gentler crossing — near-transparent through
   its upper half (so the signature reads on clean paper), then one eased
   descent into the footer plum with no hard band. */
.st-note {
  padding-bottom: clamp(140px, 24vh, 300px);
}

/* narrow screens: the tall label block would crush the № and rule, so the
   eyebrow row keeps its line and the label stacks beneath it */
@media (max-width: 640px) {
  .st-note .sec-index {
    flex-wrap: wrap;
  }

  .st-note .sec-index .num {
    margin-top: 0;
    white-space: nowrap;
  }

  .st-note .sec-index .rule {
    margin-top: 0;
  }

  .st-note-lab {
    flex-basis: 100%;
    margin-top: 14px;
  }
}

.site-footer .fblend {
  height: clamp(320px, 48vh, 560px);
  background:
    radial-gradient(circle, rgba(60, 38, 12, .05) .5px, transparent 1.1px) 0 0/5px 5px,
    radial-gradient(circle, rgba(40, 25, 10, .03) .5px, transparent 1px) 1.5px 1px/3px 3px,
    linear-gradient(180deg,
      rgba(85, 65, 75, 0) 0%, rgba(85, 65, 75, .002) 20%, rgba(85, 65, 75, .012) 32%,
      rgba(85, 65, 75, .03) 44%, rgba(85, 65, 75, .06) 52%, rgba(85, 65, 75, .12) 60%,
      rgba(85, 65, 75, .22) 68%, rgba(85, 65, 75, .36) 75%, rgba(85, 65, 75, .52) 81%,
      rgba(85, 65, 75, .68) 87%, rgba(85, 65, 75, .83) 92%, rgba(85, 65, 75, .93) 96%,
      rgba(85, 65, 75, .985) 99%, #55414B 100%);
  background-blend-mode: multiply, multiply, normal;
}

.st-footer-invite .sec-index {
  margin-bottom: 22px;
}

.st-footer-invite .sec-index .num,
.st-footer-invite .sec-index .lab {
  color: rgba(244, 238, 241, .76);
}

.st-footer-invite .sec-index .rule {
  background: var(--gold);
}

.st-footer-invite h2 {
  color: #F4EEF1;
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 5.7vw, 4.9rem);
  font-variation-settings: var(--fx-d);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.02;
  margin-bottom: 34px;
  text-wrap: balance;
}

.st-footer-invite h2 em {
  color: var(--gold);
  font-style: italic;
  font-variation-settings: var(--fx-i);
}

@media (max-width: 900px) {
  .st-intro,
  .st-guides {
    grid-template-columns: 1fr;
  }

  .st-intro-copy {
    max-width: 720px;
  }

  .st-human {
    width: min(100%, 780px);
  }
}

@media (max-width: 760px) {
  .st-desk .dgrid,
  .st-method .steps {
    grid-template-columns: 1fr;
  }

  .st-work-support {
    grid-template-columns: 1fr 1fr;
  }

  .st-eras .panels {
    grid-template-columns: 1fr;
  }

  .st-seam {
    display: none;
  }

  html.js-ready body:not(.calm) .st-eras .panels.rv:not(.in) .st-era.old,
  html.js-ready body:not(.calm) .st-eras .panels.rv:not(.in) .st-era.new {
    transform: translateY(14px);
  }
}

@media (max-width: 520px) {
  .st-ledger,
  .st-fit,
  .st-work-support {
    grid-template-columns: 1fr;
  }

  .st-ledger .cell + .cell {
    padding-left: 0;
  }

  .st-work-support > .work-figure:last-child {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phero h1.type-entry,
  .st-era,
  .st-seam,
  .work-figure,
  .work-figure img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .st-seam {
    transform: translate(-50%, -50%) !important;
  }
}

body.calm .phero h1.type-entry,
body.calm .st-era,
body.calm .work-figure,
body.calm .work-figure img {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body.calm .st-seam {
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
  transition: none !important;
}