/** Shopify CDN: Minification failed

Line 298:18 Expected identifier but found whitespace
Line 298:20 Unexpected "{"
Line 298:29 Expected ":"
Line 298:63 Unexpected "%"
Line 298:66 Unexpected "{"
Line 298:75 Expected ":"
Line 298:109 Expected identifier but found "%"
Line 3018:0 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:orris-about-arc (INDEX:38) */
.oa-arc {
  /* Was --orris-surface (#f6f3ee). This section is the first thing under the
     hero on Our Story, and a flat mid-cream field directly below a photograph
     reads as a dead zone rather than a ground. White lets the hero carry the
     colour and the timeline carry the structure. */
  background: var(--orris-white);
  padding-block: clamp(5.6rem, 13vw, 10rem);
  scroll-margin-top: 8rem;
}

.oa-arc__head { max-width: 60rem; margin-bottom: clamp(3rem, 7vw, 4.4rem); }
.oa-arc__title {
  margin: 0 0 1.4rem;
  font-family: var(--font-display-family);
  font-weight: 400;
  font-size: clamp(3.4rem, 9.4vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--orris-ink);
  text-wrap: balance;
}
.oa-arc__sub {
  margin: 0;
  font-size: clamp(1.6rem, 4.2vw, 1.75rem);
  line-height: 1.62;
  color: var(--orris-muted);
  max-width: 52ch;
}

.oa-arc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--orris-line);
}
.oa-arc__act {
  position: relative;
  padding: 0 0 clamp(3.2rem, 7.5vw, 4rem) clamp(2rem, 5.5vw, 2.8rem);
}
.oa-arc__act:last-child { padding-bottom: 0; }

/* Markers grow with the act — the base note is the heavy one. */
.oa-arc__act::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--orris-ink);
  transform: translateX(-50%);
}
.oa-arc__act:nth-child(2)::before { width: 1rem; height: 1rem; top: 0.3rem; }
.oa-arc__act:nth-child(3)::before { width: 1.4rem; height: 1.4rem; top: 0.1rem; }

.oa-arc__when {
  display: block;
  margin-bottom: 1.2rem;
  font-family: var(--font-body-family);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--orris-muted);
}

.oa-arc__name {
  margin: 0 0 0.9rem;
  font-family: var(--font-display-family);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--orris-ink);
}
/* Steps up act by act, but capped below the section heading — at 8.4vw the
   base note was 33px against a 37px heading, which read as two headings
   arguing rather than a heading and its items. */
.oa-arc__act:nth-child(1) .oa-arc__name { font-size: clamp(2.2rem, 5.8vw, 2.9rem); }
.oa-arc__act:nth-child(2) .oa-arc__name { font-size: clamp(2.5rem, 6.6vw, 3.5rem); }
.oa-arc__act:nth-child(3) .oa-arc__name { font-size: clamp(2.8rem, 7.4vw, 4.1rem); }

.oa-arc__text {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 1.65rem);
  line-height: 1.66;
  color: var(--orris-ink-3);
  max-width: 46ch;
}

@media screen and (min-width: 750px) {
  .oa-arc__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(2.4rem, 3.6vw, 5.2rem);
    border-left: 0;
    border-top: 1px solid var(--orris-line);
  }
  .oa-arc__act { padding: 2.8rem 0 0; }
  .oa-arc__act::before { top: 0; left: 0; transform: translate(0, -50%); }
  .oa-arc__act:nth-child(2)::before,
  .oa-arc__act:nth-child(3)::before { top: 0; }
}
/* END_SECTION:orris-about-arc */

/* START_SECTION:orris-about-case (INDEX:39) */
.oa-case {
  background: var(--orris-ink);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(5.6rem, 13vw, 11rem);
  scroll-margin-top: 8rem;
}

.oa-case__head { margin-bottom: clamp(2.4rem, 6vw, 3.6rem); }
.oa-case__head .orris-eyebrow { margin-bottom: 1.2rem; }

.oa-case__title {
  margin: 0;
  font-family: var(--font-display-family);
  font-weight: 400;
  font-size: clamp(3.4rem, 9.2vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.027em;
  color: #fff;
  max-width: 15ch;
  text-wrap: balance;
}

.oa-case__col { min-width: 0; }

.oa-case__lead {
  margin: 0 0 2.2rem;
  font-size: clamp(1.85rem, 5vw, 2.3rem);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: rgba(255, 255, 255, 0.93);
  max-width: 36ch;
}

.oa-case__prose {
  font-size: clamp(1.6rem, 4.2vw, 1.7rem);
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.66);
  max-width: 56ch;
}
.oa-case__prose p { margin: 0 0 1.4em; }
.oa-case__prose > :last-child { margin-bottom: 0; }
.oa-case__prose strong { color: #fff; font-weight: 600; }

.oa-case__ledgerwrap { margin-top: clamp(3.6rem, 8vw, 6rem); }
.oa-case__ledger-label {
  margin: 0 0 1.4rem;
  font-family: var(--font-body-family);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.oa-case__ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.oa-case__item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 1.4rem;
  padding: 1.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.oa-case__n {
  font-family: var(--font-display-family);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.42);
}
.oa-case__itembody { min-width: 0; }
.oa-case__itemtitle {
  margin: 0 0 0.5rem;
  font-family: var(--font-display-family);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.6vw, 2.6rem);
  line-height: 1.16;
  letter-spacing: -0.019em;
  color: #fff;
}
.oa-case__itemtext {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.62);
  max-width: 46ch;
}

.oa-case__cta { margin: clamp(3rem, 6.5vw, 4rem) 0 0; }
.oa-case__cta .orris-btn { width: 100%; }

@media screen and (min-width: 750px) {
  .oa-case__cta .orris-btn { width: auto; }
  .oa-case__ledger {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(3.2rem, 5vw, 7rem);
  }
}

/* One grid for the whole argument. The heading is short and the prose beside
   it is long, which left a ~350px hole under the heading on desktop; putting
   the button there closes it and gives the column a bottom edge. */
@media screen and (min-width: 990px) {
  .oa-case__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: clamp(3.2rem, 5vw, 7rem);
  }
  .oa-case__head { grid-column: 1; grid-row: 1; align-self: start; margin-bottom: 0; }
  .oa-case__col { grid-column: 2; grid-row: 1 / span 2; }
  .oa-case__cta { grid-column: 1; grid-row: 2; align-self: end; margin: 3.2rem 0 0.6rem; }
  .oa-case__ledgerwrap { grid-column: 1 / -1; grid-row: 3; margin-top: clamp(4rem, 5.5vw, 6.4rem); }
}
/* END_SECTION:orris-about-case */

/* START_SECTION:orris-about-hero (INDEX:40) */
/* Three heights from one section. A content page wants a header, not a
   splash: the same composition at 34vh reads as a page title with a
   photograph behind it, which is what /pages/contact needs and what a 66vh
   hero would bully. */
/* Height was set in vh, so the SHAPE of this band changed with the browser
   window: at 1440px wide it measured 2.42, 3.04, 3.08 and 4.21 across the
   pages using it, and it moved again whenever the window was resized. One
   photograph cannot serve four ratios, and a ratio that depends on the
   visitor's window cannot be art-directed at all.

   It is an aspect-ratio now, so the box is deterministic: 12:5 on desktop and
   4:5 on a phone, whatever the tier. The tier still changes the padding and
   the type size — it just no longer changes the crop. */
.oah { position: relative; display: grid; align-items: end; background: var(--orris-ink); isolation: isolate; aspect-ratio: 4 / 5; }
@media screen and (min-width: 750px) {
  .oah { aspect-ratio: 12 / 5; }
}
/* A floor, so a long heading can still push the band taller rather than
   overflowing it.

   max-width is not decoration here: min-height and aspect-ratio together are a
   WIDTH instruction. A 340px floor at 12/5 resolves to 816px, so from 750px
   (where the ratio switches) up to 816px the band was wider than the viewport
   and every page using this section — 14 templates — scrolled sideways by up
   to 48px. Measured at 768px, the common tablet portrait width. */
.oah { min-height: 34rem; max-width: 100%; }
/* In that 750-816px window the ratio cannot hold the floor inside the
   viewport, so drop the floor and let the ratio decide the height. */
@media screen and (min-width: 750px) and (max-width: 816px) {
  .oah { min-height: 0; }
}
/* A landscape phone is NARROW AND SHORT, and the breakpoint above only knows
   about width — so a 667x375 screen took the phone branch and its 4/5 ratio
   resolved to 834px of hero in a 375px viewport: 2.2 screens of banner before
   a word of content. Cap against the viewport height instead of the ratio
   whenever the screen is short, and drop the 34rem floor, which is itself
   taller than the viewport here. Height, not aspect-ratio, so the image simply
   crops. */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .oah {
    aspect-ratio: auto;
    min-height: 0;
    height: 78svh;
    max-height: 78svh;
  }
}
.oah__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.oah__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: {{ section.settings.focus_x | default: 50 }}% {{ section.settings.focus_y | default: 50 }}%;
}

/* Two stops, not one. A flat overlay dulls the whole photograph to lift text
   that only sits across the bottom third; this leaves the top of the image at
   full strength and darkens only where words land. */
.oah__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 6, 0.82) 0%, rgba(10, 8, 6, 0.55) 34%, rgba(10, 8, 6, 0.1) 66%, rgba(10, 8, 6, 0.06) 100%);
}
/* A phone hero is 488px tall against 600px on a desktop, so the same block of
   copy covers a much larger share of the frame and reaches further up into the
   thin part of the gradient. Measured against this page's photograph, the
   headline was sitting at 1.8:1 where a white laptop screen showed through.
   The mid stop moves up and deepens; the top stays light so the picture is
   still a picture. */
@media screen and (max-width: 749px) {
  .oah__scrim {
    background: linear-gradient(to top, rgba(10, 8, 6, 0.90) 0%, rgba(10, 8, 6, 0.74) 48%, rgba(10, 8, 6, 0.26) 78%, rgba(10, 8, 6, 0.08) 100%);
  }
}

/* Some hero photographs carry incidental text — a screen, a label, a sign —
   that is legible enough to be read as ours when it is not. The gradient above
   is tuned for headline contrast and is deliberately thin at the top, so it
   cannot settle that on its own. This is an even veil over the whole frame,
   off by default, for the heroes that need the picture to stay a texture. */
.oah--veiled .oah__scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, var(--oah-veil, 0));
}

/* The scrim handles the average, and on every hero the average is now 11:1 or
   better. What it cannot handle is a single blown highlight — a window, a lamp,
   a lit screen — sitting directly behind a word, which left two of the nine
   headlines near 3:1 at their worst pixel. Deepening the scrim enough to cover
   that would dull all nine photographs to fix two spots. A shadow costs the
   picture nothing and travels with the text. */
.oah__title,
.oah__text,
.oah .orris-eyebrow { text-shadow: 0 1px 14px rgba(10, 8, 6, 0.55), 0 1px 3px rgba(10, 8, 6, 0.35); }

.oah__inner { max-width: 142rem; margin-inline: auto; width: 100%; padding: 8rem var(--orris-gutter, 2rem) 3.6rem; }
.oah__eyebrow {
  margin: 0 0 1.2rem;
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
.oah__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display-family);
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 1.08;
  color: #fff;
}
.oah__text {
  margin: 1.4rem 0 0;
  max-width: 52ch;
  font-family: var(--font-heading-family);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.oah__actions { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2.4rem; }
.oah__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.8rem;
  padding-inline: 2.8rem;
  background: #fff;
  border: 1px solid #fff;
  color: var(--orris-ink);
  font-family: var(--font-heading-family);
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--orris-t, 0.3s) var(--orris-ease), color var(--orris-t, 0.3s) var(--orris-ease);
}
.oah__btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }

@media (hover: hover) {
  .oah__btn:hover { background: transparent; color: #fff; }
  .oah__btn--ghost:hover { background: #fff; color: var(--orris-ink); border-color: #fff; }
}

@media screen and (min-width: 750px) {
  .oah--compact .oah__inner { padding-block: 7rem 3.6rem; }
  .oah--compact .oah__title { font-size: 4.4rem; }
  .oah__title { font-size: 5.6rem; }
  .oah__text { font-size: 1.7rem; }
  .oah__inner { padding-block: 10rem 5.2rem; }
}
@media screen and (min-width: 990px) {
  .oah__title { font-size: 7rem; }
}
/* END_SECTION:orris-about-hero */

/* START_SECTION:orris-about-open (INDEX:41) */
/* The masthead needs to read as its own plate. On bone (#faf8f5) against the
   white section beneath it the edge is invisible on a phone, so the whole top
   of the page ran together as one band — off-white gives it a real edge
   without adding a rule. */
.oa-open {
  background: var(--orris-surface);
  padding-block: clamp(4rem, 10.5vw, 9.6rem) clamp(4rem, 8vw, 7.2rem);
}
.oa-open--bone { background: var(--orris-bone); }
.oa-open--white { background: var(--orris-white); }

.oa-open__kicker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--orris-line);
  margin-bottom: clamp(2.4rem, 5.5vw, 4rem);
}
.oa-open__kicker .orris-eyebrow { margin: 0; }
.oa-open__locator {
  font-family: var(--font-body-family);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orris-muted);
  white-space: nowrap;
}

/* The page's one genuinely large typographic moment. 44px at 390, 88px at
   1400 — a 4.5x scale is only real if something actually sits at the top. */
.oa-open__title {
  margin: 0;
  font-family: var(--font-display-family);
  font-weight: 400;
  font-size: clamp(4rem, 11.4vw, 8.8rem);
  line-height: 0.99;
  letter-spacing: -0.03em;
  color: var(--orris-ink);
  max-width: 19ch;
  text-wrap: balance;
}
/* The tone change has to land on a line break, not mid-phrase — a muted word
   stranded at the end of an ink line reads as a rendering fault. */
.oa-open__tail { display: block; color: var(--orris-muted-2); }

.oa-open__body { margin-top: clamp(2.8rem, 6vw, 4.4rem); }
.oa-open__col { min-width: 0; }

.oa-open__lede {
  margin: 0;
  font-size: clamp(1.7rem, 4.5vw, 2.05rem);
  line-height: 1.56;
  color: var(--orris-ink-3);
  max-width: 48ch;
}

.oa-open__meta {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.6rem;
}
.oa-open__meta li {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-family: var(--font-body-family);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--orris-muted);
}
/* Rules between items only above 750px, where the row is guaranteed to fit
   on one line. Below that a wrapped line would open with a stray divider. */
@media screen and (min-width: 750px) {
  .oa-open__meta { gap: 1rem 0; }
  .oa-open__meta li + li { margin-inline-start: 1.4rem; }
  .oa-open__meta li + li::before {
    content: "";
    width: 1px;
    height: 1.1rem;
    background: var(--orris-line);
    flex: 0 0 auto;
  }
}

.oa-open__note {
  margin: 2.4rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--orris-line);
  font-size: 1.4rem;
  line-height: 1.66;
  color: var(--orris-muted);
  max-width: 44ch;
}

/* Index — the page's spine on a phone. */
.oa-open__index { margin-top: clamp(3.2rem, 7vw, 4.4rem); }
.oa-open__index-label {
  display: block;
  margin-bottom: 1.2rem;
  font-family: var(--font-body-family);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orris-muted);
}
.oa-open__row {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) 1.6rem;
  align-items: center;
  column-gap: 1.2rem;
  min-height: 6.4rem;
  padding: 1.5rem 1.2rem;
  margin-inline: -1.2rem;
  border-top: 1px solid var(--orris-line);
  text-decoration: none;
  color: var(--orris-ink);
  transition: background var(--orris-t-fast);
}
.oa-open__row:last-child { border-bottom: 1px solid var(--orris-line); }
.oa-open__num {
  font-family: var(--font-display-family);
  font-weight: 400;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--orris-muted);
}
.oa-open__rowtext { min-width: 0; }
.oa-open__rowlabel {
  display: block;
  font-family: var(--font-body-family);
  font-size: clamp(1.6rem, 4.3vw, 1.8rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: var(--orris-ink);
}
.oa-open__rownote {
  display: block;
  margin-top: 0.3rem;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--orris-muted);
}
.oa-open__arrow {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--orris-muted);
  transition: transform var(--orris-t-fast), color var(--orris-t-fast);
}
/* Sand, not surface: the plate itself is off-white, so a surface-coloured
   hover would be invisible on the default background. */
@media (hover: hover) {
  .oa-open__row:hover { background: var(--orris-sand); }
  .oa-open__row:hover .oa-open__arrow { transform: translateX(0.4rem); color: var(--orris-ink); }
}
.oa-open__row:focus-visible { background: var(--orris-sand); }

@media screen and (min-width: 990px) {
  .oa-open__title { line-height: 0.97; }
  .oa-open__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
    gap: clamp(3.2rem, 4.5vw, 6.4rem);
    align-items: start;
  }
  .oa-open__index { margin-top: 0.6rem; }
}
/* END_SECTION:orris-about-open */

/* START_SECTION:orris-about-proof (INDEX:42) */
/* The section that follows sits flush against this one, so the two grounds ran
   together as a single block. The bottom margin separates them. */
.oap {
  background: var(--orris-white, #fff);
  padding-block: var(--orris-section-y, 2.2rem);
  margin-bottom: 4.8rem;
}
.oap__wrap { max-width: 142rem; margin-inline: auto; padding-inline: var(--orris-gutter, 2rem); }

.oap__head { text-align: center; margin-bottom: 2rem; }
.oap__eyebrow {
  margin: 0 0 0.8rem;
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orris-ink);
}
.oap__title { margin: 0; font-family: var(--font-display-family); font-size: 3.2rem; font-weight: 400; line-height: 1.15; color: var(--orris-ink); }

.oap__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.oap__item { text-align: center; }

.oap__icon { display: grid; place-items: center; width: 4.8rem; height: 4.8rem; margin: 0 auto 1.2rem; border-radius: 50%; background: rgba(255, 255, 255, 0.72); color: var(--orris-ink); }
.oap__icon svg { width: 2.2rem; height: 2.2rem; }

.oap__claim { margin: 0 0 0.4rem; font-family: var(--font-heading-family); font-size: 1.6rem; font-weight: 500; line-height: 1.3; color: var(--orris-ink); }
.oap__text { margin: 0 auto; max-width: 30ch; font-family: var(--font-heading-family); font-size: 1.4rem; font-weight: 300; line-height: 1.45; color: var(--orris-ink-3); }

@media screen and (min-width: 750px) {
  .oap__title { font-size: 4rem; }
  .oap__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.2rem 2rem; }
}
/* END_SECTION:orris-about-proof */

/* START_SECTION:orris-about-steps (INDEX:43) */
.ost { background: var(--orris-white); padding-block: var(--orris-section-y, 2.2rem); }
.ost--divided { border-top: 1px solid var(--orris-line, #e7e2da); }
.ost__wrap { max-width: 142rem; margin-inline: auto; padding-inline: var(--orris-gutter, 2rem); }

.ost__head { text-align: center; margin-bottom: 2.4rem; }
.ost__eyebrow {
  margin: 0 0 0.8rem;
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orris-ink);
}
.ost__title { margin: 0; font-family: var(--font-display-family); font-size: 3.2rem; font-weight: 400; line-height: 1.15; color: var(--orris-ink); }
.ost__sub { margin: 0.8rem auto 0; max-width: 68ch; font-family: var(--font-heading-family); font-size: 1.5rem; font-weight: 300; color: var(--orris-ink-3); }

.ost__list { display: grid; gap: 2.4rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ost__item { padding-top: 1.6rem; border-top: 1px solid var(--orris-line, #e7e2da); }

.ost__n {
  display: block;
  margin-bottom: 0.8rem;
  font-family: var(--font-display-family);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--orris-gold-ink);
}
.ost__h { margin: 0 0 0.6rem; font-family: var(--font-heading-family); font-size: 1.7rem; font-weight: 500; line-height: 1.3; color: var(--orris-ink); }
.ost__text { margin: 0; font-family: var(--font-heading-family); font-size: 1.45rem; font-weight: 300; line-height: 1.55; color: var(--orris-ink-3); }

.ost__cta { display: flex; justify-content: center; margin-top: 2.8rem; }
.ost__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.8rem;
  padding-inline: 3.2rem;
  background: var(--orris-ink);
  border: 1px solid var(--orris-ink);
  color: var(--orris-white);
  font-family: var(--font-heading-family);
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--orris-t, 0.3s) var(--orris-ease), color var(--orris-t, 0.3s) var(--orris-ease);
}
@media (hover: hover) { .ost__btn:hover { background: transparent; color: var(--orris-ink); } }

@media screen and (min-width: 750px) {
  .ost__title { font-size: 4rem; }
  /* Columns follow the number of steps, so three or five read as one row
     rather than leaving a gap where a fourth would have been. */
  .ost__list { grid-template-columns: repeat(var(--ost-cols, 4), minmax(0, 1fr)); gap: 3.2rem 2.4rem; }
}
/* END_SECTION:orris-about-steps */

/* START_SECTION:orris-about-story (INDEX:44) */
.oas { background: var(--orris-white); padding-block: var(--orris-section-y, 2.2rem); }
.oas__wrap { max-width: 142rem; margin-inline: auto; padding-inline: var(--orris-gutter, 2rem); }

.oas__head { text-align: center; margin-bottom: 2.4rem; }
.oas__eyebrow {
  margin: 0 0 0.8rem;
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orris-ink);
}
.oas__title { margin: 0; font-family: var(--font-display-family); font-size: 3.2rem; font-weight: 400; line-height: 1.15; color: var(--orris-ink); }
.oas__sub { margin: 0.8rem auto 0; max-width: 66ch; font-family: var(--font-heading-family); font-size: 1.5rem; font-weight: 300; color: var(--orris-ink-3); }

.oas__row { display: grid; gap: 2rem; }
.oas__row + .oas__row { margin-top: 3.2rem; }
/* Neutral, not the warm off-white. That beige is not on the homepage in any
   section, so it has no business on this page either — it only shows for the
   instant before an image paints, and even that should match. */
.oas__media { aspect-ratio: var(--ar-landscape, 3 / 2); overflow: hidden; background: var(--orris-line, #e7e2da); }
.oas__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oas__media-empty { display: block; width: 100%; height: 100%; }

.oas__body { align-self: center; }
.oas__kicker {
  margin: 0 0 0.8rem;
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orris-muted);
}
.oas__h { margin: 0 0 1rem; font-family: var(--font-display-family); font-size: 2.8rem; font-weight: 400; line-height: 1.2; color: var(--orris-ink); }
.oas__text { font-family: var(--font-heading-family); font-size: 1.55rem; font-weight: 300; line-height: 1.6; color: var(--orris-ink-3); }
.oas__text p { margin: 0 0 1.2rem; }
.oas__text p:last-child { margin-bottom: 0; }

/* A rule rather than quotation marks: the marks read as decoration at this
   size and the rule ties the quote to the ink line used elsewhere. */
.oas__quote {
  margin: 1.6rem 0 0;
  padding-left: 1.6rem;
  border-left: 2px solid var(--orris-ink);
  font-family: var(--font-display-family);
  font-size: 1.9rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--orris-ink);
}

.oas__link { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.6rem; font-family: var(--font-heading-family); font-size: 1.45rem; font-weight: 500; color: var(--orris-ink); text-decoration: none; }
.oas__link span { text-decoration: underline; text-underline-offset: 0.35rem; }
.oas__link svg { width: 0.8rem; height: 1.2rem; }

@media screen and (min-width: 750px) {
  .oas__title { font-size: 4rem; }
  .oas__h { font-size: 3.2rem; }
  .oas__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; align-items: center; }
  .oas__row + .oas__row { margin-top: 4.4rem; }
  /* Order, not direction: `direction: rtl` would flip the text too. */
  .oas__row--flip .oas__media { order: 2; }
  .oas__row--flip .oas__body { order: 1; }
}
@media screen and (min-width: 990px) {
  .oas__row { gap: 6rem; }
  .oas__body { max-width: 52ch; }
}
/* END_SECTION:orris-about-story */

/* START_SECTION:orris-article (INDEX:45) */
.oar { background: var(--orris-white); padding-block: var(--orris-section-y, 2.2rem); }
.oar__wrap { max-width: 68ch; margin-inline: auto; padding-inline: var(--orris-gutter, 2rem); }

.oar__head { margin-bottom: 2.4rem; }
.oar__back { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.6rem; font-family: var(--font-heading-family); font-size: 1.35rem; font-weight: 500; color: var(--orris-muted); text-decoration: none; }
.oar__back svg { width: 0.8rem; height: 1.2rem; }
.oar__back span { text-decoration: underline; text-underline-offset: 0.3rem; }

.oar__title { margin: 0 0 1rem; font-family: var(--font-display-family); font-size: 3.2rem; font-weight: 400; line-height: 1.15; color: var(--orris-ink); }
.oar__meta { margin: 0; font-family: var(--font-heading-family); font-size: 1.35rem; font-weight: 300; color: var(--orris-muted); }
.oar__meta span { margin-inline: 0.6rem; }

/* Wider than the text column and narrower than the page: the picture gets to
   breathe without breaking the reading measure it sits inside. */
.oar__hero { max-width: 96rem; margin: 0 auto 2.8rem; padding-inline: var(--orris-gutter, 2rem); }
.oar__hero img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
@media screen and (max-width: 749px) {
  /* The phone header is a 3:4 portrait composed for that shape; forcing it
     back into 3:2 would undo the point of shipping a second frame. */
  .oar__hero img { aspect-ratio: 4 / 5; }
}

.oar__body { font-family: var(--font-heading-family); font-size: 1.6rem; font-weight: 300; line-height: 1.75; color: var(--orris-ink-3); }
.oar__body > :first-child { margin-top: 0; }
.oar__body h2, .oar__body h3 { font-family: var(--font-display-family); font-weight: 400; color: var(--orris-ink); letter-spacing: 0; }
.oar__body h2 { margin: 3.2rem 0 1rem; font-size: 2.6rem; line-height: 1.25; }
.oar__body h3 { margin: 2.4rem 0 0.8rem; font-size: 2rem; line-height: 1.3; }
.oar__body p, .oar__body ul, .oar__body ol { margin: 0 0 1.5rem; }
.oar__body ul, .oar__body ol { padding-left: 2rem; }
.oar__body li { margin-bottom: 0.7rem; }
.oar__body strong { font-weight: 500; color: var(--orris-ink); }
.oar__body a { color: var(--orris-ink); text-decoration: underline; text-underline-offset: 0.25rem; }
.oar__body img { width: 100%; height: auto; display: block; margin: 2.4rem 0; }
.oar__body blockquote {
  margin: 2.4rem 0;
  padding-left: 1.6rem;
  border-left: 2px solid var(--orris-ink);
  font-family: var(--font-display-family);
  font-size: 1.9rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--orris-ink);
}

.oar__tags { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 2.8rem 0 0; padding: 0; list-style: none; }
.oar__tags a {
  display: inline-flex;
  align-items: center;
  min-height: 3.6rem;
  padding-inline: 1.4rem;
  border: 1px solid var(--orris-line, #e7e2da);
  font-family: var(--font-heading-family);
  font-size: 1.3rem;
  color: var(--orris-ink-3);
  text-decoration: none;
}

.oar__nav { display: grid; gap: 1.6rem; margin-top: 3.2rem; padding-top: 2.4rem; border-top: 1px solid var(--orris-line, #e7e2da); }
.oar__nav-link { text-decoration: none; color: inherit; }
.oar__nav-link--next { text-align: right; }
.oar__nav-label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-heading-family);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orris-muted);
}
.oar__nav-title { font-family: var(--font-heading-family); font-size: 1.5rem; font-weight: 500; line-height: 1.35; color: var(--orris-ink); }

@media (hover: hover) {
  .oar__tags a:hover { border-color: var(--orris-ink); color: var(--orris-ink); }
  .oar__nav-title:hover, .oar__nav-link:hover .oar__nav-title { text-decoration: underline; text-underline-offset: 0.3rem; }
}

@media screen and (min-width: 750px) {
  .oar__title { font-size: 4.4rem; }
  .oar__hero { margin-bottom: 4rem; }
  .oar__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem; }
}
/* END_SECTION:orris-article */

/* START_SECTION:orris-blog-grid (INDEX:47) */
.obg { background: var(--orris-white); padding-block: var(--orris-section-y, 2.2rem); }
.obg__wrap { max-width: 142rem; margin-inline: auto; padding-inline: var(--orris-gutter, 2rem); }

.obg__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem; margin: 0; padding: 0; list-style: none; }
.obg__item { min-width: 0; }

.obg__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--orris-white);
  border: 1px solid var(--orris-line, #e7e2da);
  text-decoration: none;
  color: inherit;
  transition: transform var(--orris-t, 0.3s) var(--orris-ease), box-shadow var(--orris-t, 0.3s) var(--orris-ease);
}
.obg__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--orris-white); }
.obg__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.obg__media-empty { display: block; width: 100%; height: 100%; background: var(--orris-line, #e7e2da); }

.obg__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 2rem 2rem 2.4rem; }
.obg__tag {
  margin: 0 0 0.8rem;
  font-family: var(--font-heading-family);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orris-muted);
}
.obg__h { margin: 0 0 0.8rem; font-family: var(--font-heading-family); font-size: 1.8rem; font-weight: 500; line-height: 1.3; color: var(--orris-ink); }
.obg__excerpt { margin: 0 0 1.4rem; font-family: var(--font-heading-family); font-size: 1.45rem; font-weight: 300; line-height: 1.55; color: var(--orris-ink-3); }
/* Pushed down so the date sits on the same baseline across a row of cards
   whose titles and excerpts run to different depths. */
.obg__meta { margin: auto 0 0; font-family: var(--font-heading-family); font-size: 1.35rem; font-weight: 300; color: var(--orris-muted); }
.obg__meta span { margin-inline: 0.6rem; }

.obg__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 3.2rem; }
.obg__page {
  display: grid;
  place-items: center;
  min-width: 4.4rem;
  min-height: 4.4rem;
  padding-inline: 0.8rem;
  border: 1px solid transparent;
  font-family: var(--font-heading-family);
  font-size: 1.45rem;
  color: var(--orris-ink-3);
  text-decoration: none;
}
.obg__page.is-current { border-color: var(--orris-ink); color: var(--orris-ink); font-weight: 500; }
.obg__page--gap { color: var(--orris-muted); }

.obg__empty { max-width: 56ch; margin-inline: auto; padding-block: 3.2rem; text-align: center; }
.obg__empty-title { margin: 0 0 0.8rem; font-family: var(--font-display-family); font-size: 2.4rem; font-weight: 400; color: var(--orris-ink); }
.obg__empty-text { margin: 0; font-family: var(--font-heading-family); font-size: 1.5rem; font-weight: 300; line-height: 1.6; color: var(--orris-ink-3); }
.obg__empty-text a { color: var(--orris-ink); text-decoration: underline; text-underline-offset: 0.3rem; }

@media (hover: hover) {
  .obg__card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
  .obg__card:hover .obg__h { text-decoration: underline; text-underline-offset: 0.3rem; }
  .obg__page:hover { border-color: var(--orris-line); }
}
@media (prefers-reduced-motion: reduce) {
  .obg__card { transition: none; }
  .obg__card:hover { transform: none; }
}

@media screen and (min-width: 750px) {
  .obg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (min-width: 990px) {
  .obg__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.2rem 2.4rem; }
  .obg__body { padding: 2.4rem 2.4rem 2.8rem; }
  .obg__h { font-size: 2rem; }
}
/* END_SECTION:orris-blog-grid */

/* START_SECTION:orris-circles (INDEX:52) */
.ocr { padding-block: var(--orris-section-y, 3.6rem); }
.ocr__head { text-align: center; margin-bottom: clamp(2.4rem, 4vw, 3.2rem); }
.ocr__title {
  font-family: var(--font-display-family, Georgia, serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 2.8vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--orris-ink, #17130f);
  margin: 0;
}
.ocr__frame { position: relative; }
/* The rail is a flex row rather than a column grid so it can do two things a
   fixed track cannot: centre itself when the items fit, and wrap onto a
   second line instead of forcing a horizontal scroll on small screens.

   `justify-content: center` centres the row whenever there is spare width;
   once the items overflow, flex ignores it and starts at the left edge, which
   is exactly the behaviour a scrolling rail needs. Card width comes from a
   custom property so each breakpoint sets one number. */
.ocr__rail {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1.6rem;
  margin: 0;
  padding: 0 var(--orris-gutter, 2rem);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline-start: var(--orris-gutter, 2rem);
  scrollbar-width: none;
}
.ocr__rail::-webkit-scrollbar { display: none; }
.ocr__item {
  scroll-snap-align: center;
  flex: 0 0 var(--ocr-card, 38%);
  min-width: 0;
}
@media (prefers-reduced-motion: reduce) { .ocr__rail { scroll-behavior: auto; } }

/* Phones: two-and-a-bit circles visible, so the row reads as swipeable. */
@media screen and (max-width: 479px) {
  .ocr__rail { --ocr-card: 40%; gap: 1.2rem; }
}
/* Large phones / small tablets: three up. */
@media screen and (min-width: 480px) and (max-width: 749px) {
  .ocr__rail { --ocr-card: 30%; }
}
/* Tablets: four up. */
@media screen and (min-width: 750px) and (max-width: 1023px) {
  .ocr__rail { --ocr-card: 22%; }
}
/* Small laptops: five up. */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .ocr__rail { --ocr-card: calc((100% - 6.4rem) / 5); }
}
/* Desktop: the rail wraps instead of scrolling, so all seven circles are
   visible and the row stays centred — no cut-off item at the right edge. */
@media screen and (min-width: 1200px) {
  .ocr__rail {
    --ocr-card: calc((100% - 9.6rem) / 7);
    flex-wrap: wrap;
    row-gap: 3.2rem;
    overflow-x: visible;
    padding-inline: max(2.4rem, calc((100vw - 142rem) / 2));
    scroll-padding-inline-start: max(2.4rem, calc((100vw - 142rem) / 2));
  }
}
/* Very wide: cap the circle so seven across do not become huge. */
@media screen and (min-width: 1600px) {
  .ocr__rail { --ocr-card: 18rem; }
}

.ocr__link { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-decoration: none; }
.ocr__disc {
  display: block; width: 100%; aspect-ratio: var(--ar-square, 1 / 1);
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--orris-line, #e7e2da);
  background: #fff;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
/* These slots take 3:4 portraits into a 1:1 circle, so cover throws away the
   top and bottom. Centred, that lands the cut across the subject's head —
   every one of these frames is a person, and a portrait puts the face in the
   upper third. Biasing the crop upward keeps the face and loses floor. */
/* `object-fit: cover` already fills the disc, so a photo with dark corners
   still shows them — the corners are in the image, not empty space. The zoom
   scales the picture up inside the circle to crop past them. Default 1 means
   every circle that does not set it renders exactly as before. */
.ocr__disc img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 28%;
  display: block;
  transform: scale(var(--disc-zoom, 1));
  transform-origin: 50% 28%;
}
.ocr__link:hover .ocr__disc { transform: translateY(-3px); }
.ocr__link:focus-visible .ocr__disc { outline: 2px solid var(--orris-gold-ink, #965c1d); outline-offset: 3px; }
.ocr__label {
  font-family: var(--font-body-family, sans-serif);
  font-size: 1.6rem; font-weight: 400;
  color: var(--orris-ink, #17130f); text-align: center;
}

.ocr__arrow {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 3;
  width: 4.4rem; height: 4.4rem; display: none; place-items: center;
  border-radius: 50%; border: 1px solid var(--orris-line, #e7e2da);
  background: #fff; color: var(--orris-ink, #17130f); cursor: pointer;
}
.ocr__arrow svg { width: 1.8rem; height: 1.8rem; }
.ocr__arrow[disabled] { opacity: 0.3; cursor: default; }
.ocr__arrow--prev { inset-inline-start: 0.6rem; }
.ocr__arrow--next { inset-inline-end: 0.6rem; }
/* Arrows only in the band where the rail actually scrolls. From 1200px it
   wraps and shows every circle, so a Next arrow would do nothing. */
@media screen and (min-width: 990px) and (max-width: 1199px) { .ocr__arrow { display: grid; } }

.ocr__cta { display: flex; justify-content: center; margin-top: 2rem; }
.ocr__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 4.4rem; padding: 0 2.4rem;
  background: var(--orris-ink, #17130f); color: #fff; text-decoration: none;
  font-size: 1.4rem; font-weight: 500;
}
.ocr__btn:hover { background: #000; }
/* END_SECTION:orris-circles */

/* START_SECTION:orris-collection-index (INDEX:54) */
.ocx__head { max-width: 62ch; margin-bottom: 2.4rem; }
.ocx__title {
  font-family: var(--font-display-family, Georgia, serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 4.4vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--orris-ink, #17130f);
  margin: 0.6rem 0 0;
}
.ocx__sub { color: var(--orris-ink-3, #45392f); font-size: 1.6rem; line-height: 1.6; margin-top: 1rem; }

.ocx__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 750px) {
  .ocx__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
}
.ocx__cell--feature { grid-column: 1 / -1; }

.ocx__card {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: var(--orris-ink, #17130f);
  isolation: isolate;
}
.ocx__media { display: block; }
.ocx__media img {
  display: block;
  width: 100%;
  /* The width/height attributes are there to reserve space and stop layout
     shift, but a browser applies height="2880" as a presentational hint, which
     outranks aspect-ratio and left every card 2880px tall. height:auto hands
     the sizing back to aspect-ratio without giving up the CLS reservation. */
  height: auto;
  aspect-ratio: var(--ar-portrait, 4 / 5);
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ocx__cell--feature .ocx__media img { aspect-ratio: var(--ar-portrait, 4 / 5); }
@media screen and (min-width: 750px) {
  .ocx__cell--feature .ocx__media img { aspect-ratio: var(--ar-banner, 12 / 5); }
}
.ocx__card:hover .ocx__media img,
.ocx__card:focus-visible .ocx__media img { transform: scale(1.04); }

/* The gradient stops short of the top so the photograph keeps its own light;
   a full-height wash on fourteen cards flattens the whole page. */
.ocx__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23, 19, 15, 0.88) 0%, rgba(23, 19, 15, 0.34) 38%, rgba(23, 19, 15, 0) 68%);
  z-index: 1;
}
.ocx__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.6rem;
}
@media screen and (min-width: 750px) {
  .ocx__body { padding: 2.2rem; }
  .ocx__cell--feature .ocx__body { padding: 3.2rem; max-width: 46ch; }
}
.ocx__kicker {
  font-family: var(--font-body-family);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orris-gold, #e9b775);
}
.ocx__name {
  font-family: var(--font-display-family, Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
}
.ocx__cell--feature .ocx__name { font-size: clamp(2.6rem, 4.4vw, 4.4rem); }
.ocx__blurb {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.35rem;
  line-height: 1.5;
  margin-top: 0.2rem;
}
/* On a phone two columns is already tight; the blurb is the first thing to go. */
@media screen and (max-width: 749px) {
  .ocx__cell:not(.ocx__cell--feature) .ocx__blurb { display: none; }
}
/* END_SECTION:orris-collection-index */

/* START_SECTION:orris-contact (INDEX:57) */
/* ===== The Perfume Vault contact page =========================================
   Namespaced .oc- : Shopify bundles section stylesheets site-wide.
   Written mobile-first at 390px, then widened.
   ================================================================= */
.oc-open { --oc-rule: rgba(23, 19, 15, 0.2); }
.oc-write { --oc-rule: rgba(23, 19, 15, 0.2); }

/* The floating WhatsApp bubble is the site-wide shortcut TO this page's
   primary action, so on the contact page it is duplicate chrome — and being
   fixed bottom-right it sat on top of the topic arrows. Hidden here only. */
body:has(.oc-open) .orris-wa { display: none; }
.oc-open { padding-block: calc(var(--orris-section-y) * 0.8) var(--orris-section-y); }
.oc-open__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.6rem; }

.oc-title {
  font-family: var(--font-display-family);
  font-weight: 400;
  font-size: clamp(3.6rem, 10vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--orris-ink);
  margin: 0 0 1.4rem;
  max-width: 14ch;
}
.oc-lede {
  font-size: 1.65rem;
  line-height: 1.62;
  color: var(--orris-muted);
  max-width: 46ch;
  margin: 0;
}
.oc-lede p { margin: 0 0 1rem; }
.oc-lede > :last-child { margin-bottom: 0; }

/* Live open/closed. Height is reserved so the JS swap cannot shift layout. */
.oc-status {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin: 2.4rem 0 0;
  min-height: 2.4rem;
  font-size: 1.4rem;
  line-height: 1.45;
  color: var(--orris-ink);
}
.oc-status__dot {
  flex: none;
  width: 0.8rem; height: 0.8rem;
  margin-top: 0.6rem;
  background: var(--orris-muted);
  border-radius: 50%;
}
.oc-status.is-open .oc-status__dot { background: var(--orris-green); }
.oc-status.is-shut .oc-status__dot { background: var(--orris-line); box-shadow: inset 0 0 0 1px var(--orris-muted); }
.oc-status__state { font-weight: 600; color: var(--orris-ink); }
.oc-status__rest { color: var(--orris-muted); }

/* The primary action: a WhatsApp thread that starts with context.

   The panel and the deflection band both used to sit on --orris-surface. That
   warm off-white is used nowhere else in the store any more — every page is
   white with one mist band — so it read as a stray from an older design. A
   hairline gives the panel its edge without a fill, and the band above is now
   plain white. */
.oc-panel {
  border: 1px solid var(--orris-line);
  margin-inline: calc(var(--orris-gutter) * -1);
  padding: 2.4rem var(--orris-gutter) 2rem;
}
.oc-panel__head { display: flex; align-items: center; gap: 1rem; }
.oc-panel__mark { display: grid; place-items: center; flex: none; }
.oc-panel__mark svg { width: 2.2rem; height: 2.2rem; color: var(--orris-ink); display: block; }
.oc-panel__title {
  font-family: var(--font-body-family);
  font-size: 1.6rem; font-weight: 600; letter-spacing: -0.005em;
  color: var(--orris-ink);
}
.oc-panel__note {
  margin: 0.8rem 0 1.8rem;
  font-size: 1.35rem; line-height: 1.55;
  color: var(--orris-muted);
  max-width: 42ch;
}

.oc-topics { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--orris-line); }
.oc-topic + .oc-topic { border-top: 1px solid var(--orris-line); }
.oc-topic__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem;
  min-height: 6.4rem;
  padding: 1.4rem 0;
  text-decoration: none;
  color: var(--orris-ink);
  transition: color var(--orris-t-fast);
}
.oc-topic__copy { display: block; min-width: 0; }
.oc-topic__label {
  display: block;
  font-size: 1.75rem; font-weight: 500; line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--orris-ink);
}
.oc-topic__sub {
  display: block;
  margin-top: 0.3rem;
  font-size: 1.3rem; line-height: 1.45;
  color: var(--orris-muted);
}
.oc-arrow { width: 1.9rem; height: 1.9rem; flex: none; transition: transform var(--orris-t-fast); }
.oc-topic__link .oc-arrow { color: var(--orris-muted); }
.oc-topic__link:hover { color: var(--orris-ink); }
.oc-topic__link:hover .oc-arrow { color: var(--orris-ink); transform: translateX(0.4rem); }
.oc-topic__link:focus-visible { outline: 2px solid var(--orris-gold-ink); outline-offset: 3px; }

.oc-panel__plain {
  display: inline-flex;
  align-items: center;
  margin-top: 1.2rem;
  min-height: 4.4rem;
  font-size: 1.35rem;
  color: var(--orris-muted);
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 1px;
}
.oc-panel__plain:hover { color: var(--orris-ink); }

/* Call / email, kept plain so WhatsApp stays the loudest thing here. */
.oc-direct { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--orris-line); }
.oc-direct__item:first-child { border-top: 0; }
.oc-direct__item + .oc-direct__item { border-top: 1px solid var(--orris-line); }
.oc-direct__link {
  display: flex; align-items: center; gap: 1.2rem;
  min-height: 5.6rem; padding: 1rem 0;
  text-decoration: none; color: var(--orris-ink);
  font-size: 1.55rem;
}
.oc-direct__link svg { width: 1.9rem; height: 1.9rem; flex: none; color: var(--orris-muted); }
.oc-direct__link:hover svg { color: var(--orris-ink); }
.oc-direct__label {
  display: block;
  font-size: 1.15rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orris-muted);
  margin-bottom: 0.1rem;
}

/* ---- Before you write ---- */
.oc-before { padding-block: var(--orris-section-y); }
.oc-h2 {
  font-family: var(--font-display-family);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--orris-ink);
  margin: 0;
  max-width: 20ch;
}
.oc-before__head { margin-bottom: 3.2rem; }
.oc-before__title { min-width: 0; }
.oc-before__foot { margin-top: 1.2rem; }
.oc-before__all {
  display: inline-flex; align-items: center; gap: 0.7rem;
  min-height: 4.4rem;
  font-size: 1.4rem; font-weight: 500;
  color: var(--orris-ink); text-decoration: none;
}
.oc-before__all span { border-bottom: 1px solid var(--orris-ink); padding-bottom: 0.2rem; }
.oc-before__all .oc-arrow { width: 1.7rem; height: 1.7rem; }
.oc-before__all:hover .oc-arrow { transform: translateX(0.4rem); }
.oc-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.oc-card { display: flex; flex-direction: column; padding: 2.4rem 0; border-top: 1px solid var(--orris-line); }
.oc-card:last-child { border-bottom: 1px solid var(--orris-line); }
.oc-card__n {
  display: block;
  font-family: var(--font-display-family);
  font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em;
  color: var(--orris-muted);
  margin-bottom: 1rem;
}
.oc-card__q {
  font-family: var(--font-body-family);
  font-size: 1.95rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--orris-ink);
  margin: 0 0 0.8rem;
}
.oc-card__a { margin: 0; font-size: 1.5rem; line-height: 1.6; color: var(--orris-muted); max-width: 52ch; }
.oc-card__link {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 0.7rem;
  margin-top: auto; padding-top: 1.4rem; min-height: 4.4rem;
  font-size: 1.4rem; font-weight: 500;
  color: var(--orris-ink);
  text-decoration: none;
}
.oc-card__link span { border-bottom: 1px solid var(--orris-ink); padding-bottom: 0.2rem; }
.oc-card__link .oc-arrow { width: 1.7rem; height: 1.7rem; }
.oc-card__link:hover .oc-arrow { transform: translateX(0.4rem); }

/* ---- Form + facts ---- */
.oc-write { padding-block: var(--orris-section-y); }
.oc-write__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4.8rem; }
.oc-form__lede { margin: 1.2rem 0 0; font-size: 1.55rem; line-height: 1.6; color: var(--orris-muted); max-width: 50ch; }
.oc-form__el { margin-top: 3rem; }

.oc-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2rem; }
.oc-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 2.4rem; }
.oc-field label {
  font-size: 1.25rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--orris-muted);
  display: flex; align-items: baseline; gap: 0.8rem;
}
.oc-opt {
  /* Was 1.1rem. This one is sentence-case helper text next to a field label,
     not a tracked uppercase eyebrow, so 11px reads as small print rather than
     as a design device — 1.2rem is the floor for anything a visitor has to
     read while filling in a form. */
  font-size: 1.2rem; font-weight: 500; letter-spacing: 0.06em; text-transform: none;
  color: var(--orris-muted-2);
}
/* 16px minimum: anything smaller makes iOS Safari zoom the page on focus. */
.oc-field input,
.oc-field textarea,
.oc-field select {
  width: 100%;
  min-height: 4.6rem;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid var(--oc-rule);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body-family);
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--orris-ink);
  transition: border-color var(--orris-t-fast), box-shadow var(--orris-t-fast);
  -webkit-appearance: none;
  appearance: none;
}
.oc-field textarea {
  min-height: 13rem;
  padding: 1.4rem;
  border: 1px solid var(--oc-rule);
  resize: vertical;
}
.oc-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' stroke='%2317130f' stroke-width='1.2'/%3E%3C/svg%3E");
  background-position: right 0.2rem center;
  background-size: 1.2rem 0.8rem;
  background-repeat: no-repeat;
  padding-right: 3.2rem;
}
.oc-field input::placeholder, .oc-field textarea::placeholder { color: var(--orris-muted-2); opacity: 1; }
.oc-field input:hover, .oc-field select:hover { border-bottom-color: var(--orris-ink-3); }
.oc-field textarea:hover { border-color: var(--orris-ink-3); }
.oc-field input:focus, .oc-field select:focus {
  outline: none;
  border-bottom-color: var(--orris-ink);
  box-shadow: 0 1px 0 0 var(--orris-ink);
}
.oc-field textarea:focus {
  outline: none;
  border-color: var(--orris-ink);
  box-shadow: inset 0 0 0 1px var(--orris-ink);
}
/* Chrome paints autofilled inputs; transparent fields would show the wash. */
.oc-field input:-webkit-autofill,
.oc-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100rem var(--orris-white) inset, 0 1px 0 0 var(--orris-ink);
  -webkit-text-fill-color: var(--orris-ink);
}
.oc-field__help { margin-top: 0.6rem; font-size: 1.25rem; line-height: 1.45; color: var(--orris-muted); }

.oc-submit { width: 100%; }
.oc-fine { margin: 1.6rem 0 0; font-size: 1.3rem; line-height: 1.55; color: var(--orris-muted); }

.oc-note {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.6rem 1.8rem;
  margin-bottom: 2.4rem;
  font-size: 1.45rem; line-height: 1.55;
  border: 1px solid var(--orris-line);
  background: var(--orris-bone);
  color: var(--orris-ink);
}
.oc-note svg { width: 2rem; height: 2rem; flex: none; margin-top: 0.2rem; }
.oc-note--good { border-color: var(--orris-green); }
.oc-note--good svg { color: var(--orris-green); }
.oc-note--bad { border-color: var(--orris-sale); }
.oc-note--bad ul { margin: 0; padding-left: 1.8rem; }
.oc-note:focus { outline: 2px solid var(--orris-ink); outline-offset: 2px; }

.oc-facts__h {
  font-family: var(--font-body-family);
  font-size: 1.2rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orris-muted);
  margin: 0 0 1.8rem;
}
.oc-facts__list { margin: 0; }
.oc-fact { padding: 1.6rem 0; border-top: 1px solid var(--orris-line); }
.oc-fact:last-child { border-bottom: 1px solid var(--orris-line); }
.oc-fact dt {
  font-size: 1.15rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orris-muted);
  margin-bottom: 0.5rem;
}
.oc-fact dd { margin: 0; font-size: 1.5rem; line-height: 1.55; color: var(--orris-ink); }
.oc-fact dd a {
  display: inline-flex; align-items: center; min-height: 4.4rem;
  color: var(--orris-ink);
  text-decoration: underline;
  text-decoration-color: var(--oc-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4rem;
}
.oc-fact dd a:hover { text-decoration-color: var(--orris-ink); }
.oc-fact:has(a) { padding-block: 1.2rem; }
.oc-fact__note { display: block; margin-top: 0.4rem; font-size: 1.3rem; color: var(--orris-muted); }

/* ---- 750px and up ---- */
@media screen and (min-width: 750px) {
  .oc-panel { margin-inline: 0; padding: 2.8rem 3rem; }
  .oc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .oc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3.2rem; }
  .oc-card { border-bottom: 0; padding-bottom: 0; }
  .oc-card:last-child { border-bottom: 0; }
  .oc-before__foot { margin-top: 3.2rem; padding-top: 2rem; border-top: 1px solid var(--orris-line); }
  .oc-submit { width: auto; min-width: 24rem; }
}

/* ---- 990px and up ---- */
@media screen and (min-width: 990px) {
  .oc-open__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    grid-template-areas: "say panel" "direct panel";
    grid-template-rows: auto 1fr;
    column-gap: 6.4rem;
    row-gap: 3.2rem;
    align-items: start;
  }
  .oc-open__say { grid-area: say; padding-top: 0.6rem; }
  .oc-panel { grid-area: panel; }
  .oc-direct { grid-area: direct; align-self: start; margin-top: 0; }
  .oc-lede { font-size: 1.75rem; }
  .oc-status { font-size: 1.45rem; }
  .oc-before__head { margin-bottom: 4rem; }
  .oc-write__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 6.4rem; align-items: start; }
  .oc-facts { position: sticky; top: 10rem; }
}

@media (prefers-reduced-motion: reduce) {
  .oc-arrow, .oc-topic__link { transition: none; }
  .oc-topic__link:hover .oc-arrow, .oc-card__link:hover .oc-arrow { transform: none; }
}
/* END_SECTION:orris-contact */

/* START_SECTION:orris-editorial-band (INDEX:58) */
/* A split, not an overlay.

   The first version printed the copy over the photograph on a dark gradient
   with a gold eyebrow. Two things were wrong with that. The scrim exists only
   to make type legible, and it pays for that by muting the picture — these
   frames were chosen for their light, so dimming two thirds of every one to
   carry four lines of text is a bad trade. And the store is bright: bone,
   white and a pale mist blue. A run of dark overlay bands reads as a different
   site spliced into this one.

   So the image keeps its full brightness and the copy sits beside it on the
   store's own ground. Nothing is dimmed and nothing needs to be. */
.oeb {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--orris-bone, #faf8f5);
}
/* The band spans the FULL viewport width — the coloured ground runs edge to
   edge on every device, and the picture fills its half of that. An earlier
   pass capped the band at the page measure and added side padding, which
   inset the whole thing and shrank the picture; the fix for the far-apart
   copy belongs in the panel's padding, not in the band's width.

   The image column is 50%, so the picture is as large as the band allows. */
@media screen and (min-width: 750px) {
  .oeb {
    grid-template-columns: 50% 1fr;
    align-items: stretch;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  /* Copy-right is the default; this flips the pair without reordering markup,
     so the reading order stays image-then-text for a screen reader. */
  .oeb--left .oeb__media { order: 2; }
  .oeb--left .oeb__panel { order: 1; }
  /* order moves the elements but not the track widths, so a flipped band gave
     the auto track to the copy and the 1fr track to a plate that does not
     stretch — leaving white beside it. The flip needs its own track order. */
  .oeb--left { grid-template-columns: 1fr 50%; }
}

.oeb__media { position: relative; overflow: hidden; }
.oeb__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block; }
@media screen and (max-width: 749px) {
  .oeb__media img { aspect-ratio: var(--ar-portrait, 4 / 5); height: auto; }
}
/* Height is set by the picture on desktop, so the panel matches whatever the
   image column resolves to rather than fighting it with a viewport unit. */
@media screen and (min-width: 750px) {
  /* The plate fills its half edge to edge. The ratio sets the whole band's
     height, and the copy beside it is short — a taller plate buys nothing but
     empty space above and below the text, so this stays wide enough to keep
     the pair balanced. The 4:5 sources lose top and bottom to cover — ceiling
     and dresser — and the bottle sits mid-frame, so a centred crop spares it. */
  .oeb--tall .oeb__media,
  .oeb--medium .oeb__media,
  .oeb--compact .oeb__media { height: auto; }
  /* `width: 100%` + `min-width: 0` are load-bearing, not tidying. A grid item
     defaults to `min-width: auto`, and `aspect-ratio` with `height: auto`
     resolves width FROM the row height — which the text panel sets. Below
     ~1326px the panel is tall enough that 16/11 demanded up to 229px more
     width than the track, and the item was free to take it: the plate ran
     over the copy and `overflow-x: clip` on .oeb hid the damage, so the
     heading and button were sliced with no scrollbar to show for it.
     Pinning the width makes the ratio derive height from width, as intended. */
  .oeb__media { aspect-ratio: 16 / 11; width: 100%; min-width: 0; }
  .oeb__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
}

.oeb__panel {
  display: flex;
  align-items: center;
  padding: 3.2rem var(--orris-gutter, 2rem) 4rem;
}
@media screen and (min-width: 750px) {
  /* `justify-content: center` floated the copy in the middle of its track,
     which on a 1440px screen left a wide gap between picture and text while
     the far side ran short. Starting the block against the image keeps the
     pair reading together; the padding is the intended breathing room. */
  /* The copy sits a comfortable distance from the picture — enough air that
     the two are distinct, not so much that they stop reading as one unit.
     `clamp` scales it with the viewport rather than jumping at a breakpoint,
     and the block starts against the image instead of floating mid-track,
     which is what left the big hole before. */
  .oeb__panel {
    padding-block: clamp(4rem, 5vw, 6.4rem);
    padding-inline: clamp(4rem, 5.5vw, 8rem);
    justify-content: flex-start;
  }
  /* Flipped bands read from the other side. The extra inline padding shifts the
     copy off the left edge so it sits nearer the picture than the page edge,
     matching how the unflipped band reads. */
  .oeb--left .oeb__panel {
    justify-content: flex-end;
    padding-left: clamp(6rem, 9vw, 14rem);
  }
}
.oeb__copy { max-width: 52rem; }

.oeb__eyebrow {
  display: block;
  font-family: var(--font-body-family);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Muted ink, not gold. Gold was appearing as an eyebrow on every band, which
     is exactly the decorative over-use the design audit flagged. */
  color: var(--orris-muted, #6d6459);
}
.oeb__title {
  font-family: var(--font-display-family, Georgia, serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 3.9vw, 4.8rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--orris-ink, #17130f);
  margin: 1rem 0 0;
}
.oeb__text {
  color: var(--orris-ink-3, #45392f);
  font-size: 1.6rem;
  line-height: 1.62;
  margin-top: 1.4rem;
}
.oeb__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; margin-top: 2.4rem; }
@media screen and (max-width: 749px) { .oeb__cta .orris-btn { width: 100%; text-align: center; } }
.oeb__link {
  font-family: var(--font-body-family);
  font-size: 1.4rem; font-weight: 500;
  color: var(--orris-ink, #17130f);
  text-decoration: underline; text-underline-offset: 0.4rem;
}
/* END_SECTION:orris-editorial-band */

/* START_SECTION:orris-featured-cards (INDEX:61) */
.ofc { padding-block: var(--orris-section-y, 3.6rem); }
@media screen and (min-width: 1200px) { .ofc .orris-wrap { max-width: 142rem; padding-inline: 2.4rem; } }
.ofc__head { text-align: center; margin-bottom: clamp(2.4rem, 4vw, 3.2rem); }
.ofc__title {
  font-family: var(--font-display-family, Georgia, serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 3.2vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--orris-ink, #17130f);
  margin: 0;
}
.ofc__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem; margin: 0; padding: 0; list-style: none;
}
@media screen and (min-width: 750px) { .ofc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* The 1200px rule used to go to five columns. Five only ever divides a set of
   five, and any even card count then left one card alone in its own row. Three
   columns divides four and six, matches the tablet layout, and gives each card
   real width instead of a 167px sliver. */
@media screen and (min-width: 1200px) { .ofc__grid { gap: 2.4rem; } }

.ofc__card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--orris-line, #e7e2da); border-radius: 4px;
  padding: 1.4rem 1.4rem 2rem; text-decoration: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ofc__card:hover { border-color: #d8d2c8; box-shadow: 0 0.8rem 2.4rem rgba(23,19,15,0.08); transform: translateY(-2px); }
.ofc__card:focus-visible { outline: 2px solid var(--orris-gold-ink, #965c1d); outline-offset: 3px; }
.ofc__media { display: block; aspect-ratio: var(--ar-square, 1 / 1); overflow: hidden; background: var(--orris-white, #fff); }
.ofc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ofc__body { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 1.6rem; flex: 1 1 auto; }
.ofc__h {
  font-family: var(--font-display-family, Georgia, serif);
  font-weight: 400; font-size: 2rem; line-height: 1.2;
  color: var(--orris-ink, #17130f);
}
.ofc__text { margin-top: 0.8rem; font-size: 1.45rem; line-height: 1.45; color: var(--orris-ink-3, #45392f); max-width: 28ch; }
.ofc__link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 1.6rem; font-size: 1.45rem; font-weight: 500; color: var(--orris-ink, #17130f); }
.ofc__link-text { text-decoration: underline; text-underline-offset: 0.4rem; }
.ofc__chev { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; transition: transform 0.18s ease; }
.ofc__card:hover .ofc__chev { transform: translateX(3px); }
@media screen and (max-width: 749px) {
  /* Two columns on a 390px screen leaves each card about 167px. The card was
     spending that on its own border and padding, so the picture — the only
     part doing any selling — came out tiny. The frame gets thinner, the
     picture goes taller than square, and the supporting line is dropped. */
  .ofc__grid { gap: 1rem; }
  .ofc__card { padding: 0.6rem 0.6rem 1.2rem; border-radius: 2px; }
  /* Square on the phone too, so one file serves both and there is no second
     frame to keep in sync. */
  .ofc__media { aspect-ratio: var(--ar-square, 1 / 1); }
  .ofc__body { padding-top: 1.1rem; }
  .ofc__h { font-size: 1.6rem; line-height: 1.18; }
  .ofc__text { display: none; }
  .ofc__link { padding-top: 1rem; font-size: 1.3rem; }
}
/* END_SECTION:orris-featured-cards */

/* START_SECTION:orris-footer (INDEX:62) */
/* ---------------------------------------------------------------------------
   The Perfume Vault footer.

   Every selector is prefixed with `.orris-foot--v2`. layout/theme.liquid loads
   assets/orris-theme.css a SECOND time at the end of <body> as a deliberate
   cascade anchor, so a section stylesheet would lose to the base footer rules
   at equal specificity. One extra class wins on specificity instead, which
   keeps this section self-contained — no !important, and no edit to a shared
   stylesheet.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Colour.

   Every colour this footer decides is a token, and the white variant flips the
   whole set in one rule. It was previously authored dark-first with ~23 literal
   white alphas, and the white variant lived in assets/orris-theme.css as a set
   of two-class overrides. That could only ever half-work: the rules here carry
   two and three classes, so wherever this file was the more specific one, white
   won — the mobile column headings and their links rendered white on white.

   Specificity now decides nothing. `.orris-foot--v2.orris-foot--light` is two
   classes on the same element, so it beats the one-class default below no
   matter which stylesheet loads first, and every rule underneath reads a token
   rather than a colour.
   --------------------------------------------------------------------------- */
.orris-foot--v2 {
  --foot-strong: #fff;
  --foot-head: rgba(255, 255, 255, 0.92);
  --foot-text: rgba(255, 255, 255, 0.75);
  --foot-body: rgba(255, 255, 255, 0.68);
  --foot-muted: rgba(255, 255, 255, 0.55);
  --foot-faint: rgba(255, 255, 255, 0.38);
  --foot-rule: rgba(255, 255, 255, 0.1);
  --foot-rule-soft: rgba(255, 255, 255, 0.08);
  --foot-mark: rgba(255, 255, 255, 0.28);
  --foot-pay: rgba(255, 255, 255, 0.18);
  --foot-chip: rgba(255, 255, 255, 0.16);
  --foot-chip-strong: rgba(255, 255, 255, 0.6);
  --foot-tint: rgba(255, 255, 255, 0.05);
  --foot-press: rgba(255, 255, 255, 0.04);
  --foot-focus: rgba(255, 255, 255, 0.9);
  border-top: 1px solid var(--foot-rule);
  color: var(--foot-body);
}

.orris-foot--v2.orris-foot--light {
  --foot-strong: var(--orris-ink);
  --foot-head: var(--orris-ink);
  --foot-text: var(--orris-ink-3);
  --foot-body: var(--orris-ink-3);
  --foot-muted: var(--orris-muted);
  --foot-faint: var(--orris-muted-2);
  --foot-rule: var(--orris-line);
  --foot-rule-soft: var(--orris-line-2);
  --foot-mark: var(--orris-ink);
  --foot-pay: var(--orris-line);
  --foot-chip: var(--orris-line);
  --foot-chip-strong: var(--orris-ink);
  --foot-tint: rgba(0, 0, 0, 0.03);
  --foot-press: rgba(0, 0, 0, 0.04);
  --foot-focus: var(--orris-ink);
  background: var(--orris-white);
}

.orris-foot--v2 a:focus-visible,
.orris-foot--v2 summary:focus-visible {
  outline: 2px solid var(--foot-focus);
  outline-offset: 3px;
}

/* -- brand ----------------------------------------------------------------- */
.orris-foot--v2 .orris-foot__wordmark {
  font-family: var(--font-display-family);
  font-weight: 400;
  /* The footer inherits line-height 1.6, which at 42px hangs 13px of empty
     leading above the wordmark and dropped its cap-height 18px below the
     column labels beside it — four columns that visibly failed to line up.
     1.1 keeps room for a descender in a brand name that has one. */
  line-height: 1.1;
  letter-spacing: 0.16em;
  color: var(--foot-strong);
}
/* A short rule under the wordmark. It costs one pseudo-element and it is what
   stops the brand column reading as a stray line of text above a paragraph. */
.orris-foot--v2 .orris-foot__wordmark::after {
  content: '';
  display: block;
  width: 3.2rem;
  height: 1px;
  margin-top: 1.6rem;
  background: var(--foot-mark);
}
.orris-foot--v2 .orris-foot__blurb {
  margin-top: 1.8rem;
  color: var(--foot-muted);
  line-height: 1.75;
}

/* Only WhatsApp is configured, and one lone 40px icon square reads as three
   icons that failed to load. With a single network the row renders as a
   labelled button, which looks deliberate; add a second network and the labels
   drop out and it becomes an icon row again. */
.orris-foot--v2 .orris-foot__socials { gap: 1rem; flex-wrap: wrap; }
.orris-foot--v2 .orris-foot__social {
  width: 4.4rem;
  height: 4.4rem;
  border-color: var(--foot-chip);
  color: var(--foot-text);
}
.orris-foot--v2 .orris-foot__social:hover {
  border-color: var(--foot-chip-strong);
  background: var(--foot-tint);
  color: var(--foot-strong);
}
.orris-foot--v2 .orris-foot__social-txt { display: none; }
.orris-foot--v2 .orris-foot__socials--solo .orris-foot__social {
  width: auto;
  height: 4.8rem;
  gap: 1rem;
  padding-inline: 1.8rem;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.orris-foot--v2 .orris-foot__socials--solo .orris-foot__social-txt { display: inline; }

/* -- links ----------------------------------------------------------------- */
.orris-foot--v2 .orris-foot__list a { color: var(--foot-body); }

/* -- contact --------------------------------------------------------------- */
.orris-foot--v2 .orris-foot__contact a { color: var(--foot-text); }
.orris-foot--v2 .orris-foot__contact svg { color: var(--foot-faint); }

/* The footer's single gold moment. Gold is graphic-only elsewhere, but on ink
   it is allowed as text (#e9b775 on #17130f is 10.3:1), and spending the one
   allowance on the only action down here — rather than tinting four headings —
   is what keeps it reading as an accent instead of a theme colour. */
.orris-foot--v2 .orris-foot__cta {
  min-height: 5rem;
  border-color: rgba(233, 183, 117, 0.5);
  color: var(--orris-gold);
  font-size: 1.4rem;
  letter-spacing: 0.12em;
}
.orris-foot--v2 .orris-foot__cta:hover,
.orris-foot--v2 .orris-foot__cta:focus-visible {
  background: var(--orris-gold);
  border-color: var(--orris-gold);
  color: var(--orris-ink);
}

/* -- bottom bar ------------------------------------------------------------ */
/* The floating WhatsApp bubble (snippets/orris-whatsapp.liquid) is fixed to the
   bottom-right of the viewport at 4.8rem square with a 1.4rem offset, and the
   bottom of the page is exactly where it lands — it was sitting on top of the
   last legal link. The bar keeps a lane clear for it. Reserving the width costs
   nothing anywhere else: the bar's right-hand item simply stops short. */
.orris-foot--v2 .orris-foot__bar {
  border-top: 1px solid var(--foot-rule);
  padding-inline-end: 6.6rem;
}
.orris-foot--v2 .orris-foot__copy {
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--foot-muted);
}
/* Hairline pipes instead of raw whitespace: three legal links set in the same
   size as the copyright otherwise read as one run-on sentence. */
.orris-foot--v2 .orris-foot__legal { gap: 0.6rem 0; }
.orris-foot--v2 .orris-foot__legal li { display: flex; align-items: center; }
.orris-foot--v2 .orris-foot__legal li + li::before {
  content: '';
  width: 1px;
  height: 1.1rem;
  margin-inline: 1.6rem;
  background: var(--foot-pay);
}
.orris-foot--v2 .orris-foot__legal a {
  font-size: 1.3rem;
  color: var(--foot-muted);
  /* 1.3rem on this line box measured 21px tall — under the 24px WCAG 2.5.8
     minimum, on six links present in the footer of every page. Padding, not
     min-height: these sit in a flex row and inline-flex keeps the separator
     bullets between them aligned. */
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
}
.orris-foot--v2 .orris-foot__pay { gap: 0.6rem; flex-wrap: wrap; }
.orris-foot--v2 .orris-foot__pay svg { height: 2.2rem; opacity: 0.75; }

/* Clip, not translate. This used to open with `translateY(-0.5rem)`, which
   starts the panel 5px ABOVE its own box — overlapping the summary row and
   painting the first link across the heading for the length of the animation.
   A clip-path inset reveals downward and cannot paint outside the panel. */
@keyframes orris-foot-reveal {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* ===========================================================================
   Phones — one column, and the two link columns become disclosures.
   =========================================================================== */
/* ===========================================================================
   Link columns: an accordion on phones, plain lists above 750px.

   Closed-by-default columns are right on a phone, where the footer is a 900px
   wall of links and the visitor wants one of them. On desktop the columns fit
   side by side with room to spare, so collapsing them hides navigation to save
   space that is not scarce — every link there becomes two interactions instead
   of one. The two breakpoints get the behaviour that suits them.
   =========================================================================== */
@media screen and (max-width: 749px) {
  .orris-foot--v2 .orris-foot__sum {
    display: block;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .orris-foot--v2 .orris-foot__sum::-webkit-details-marker { display: none; }
  .orris-foot--v2 .orris-foot__sum::marker { content: ''; }
  /* The tap highlight is suppressed above, so the row needs its own press state
     or the accordion feels dead for the ~200ms before it opens. */
  .orris-foot--v2 .orris-foot__sum:active { background: var(--foot-press); }
  .orris-foot--v2 .orris-foot__sum:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }
  .orris-foot--v2 .orris-foot__sum .orris-foot__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    min-height: 4.4rem;
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: 0.16em;
    color: var(--foot-head);
    transition: color 0.18s var(--orris-ease);
  }
  /* The chevron is drawn in CSS rather than shipped as an SVG because <summary>
     may legally contain one heading element and nothing else, so there is
     nowhere in the markup to put an icon. Only the chevron animates:
     transitioning the panel height on a <details> needs JS to measure it and
     still janks on the first frame. */
  .orris-foot--v2 .orris-foot__sum .orris-foot__head::after {
    content: '';
    flex: 0 0 auto;
    width: 0.85rem;
    height: 0.85rem;
    margin-right: 0.4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.6;
    transform: translateY(-0.25rem) rotate(45deg);
    transition: transform 0.3s var(--orris-ease), opacity 0.18s var(--orris-ease);
  }
  .orris-foot--v2 .orris-foot__disc[open] .orris-foot__head::after {
    transform: translateY(0.15rem) rotate(225deg);
    opacity: 0.95;
  }
  .orris-foot--v2 .orris-foot__panel { padding-bottom: 1.6rem; }
  .orris-foot--v2 .orris-foot__disc[open] .orris-foot__panel {
    animation: orris-foot-reveal 0.26s var(--orris-ease) both;
  }
}

@media screen and (max-width: 749px) {
  /* Side-by-side link columns on a 360px screen gave two cramped ~150px
     measures and a 900px-tall footer. One column of labelled rows is both
     shorter and easier to scan. */
  .orris-foot--v2 .orris-foot__top {
    display: block;
    padding-block: 3.6rem 2.4rem;
  }
  .orris-foot--v2 .orris-foot__col--brand { padding-bottom: 3.2rem; }
  .orris-foot--v2 .orris-foot__col + .orris-foot__col {
    border-top: 1px solid var(--foot-rule);
  }
  .orris-foot--v2 .orris-foot__col--contact { padding-top: 2.8rem; }

  /* Full-width on a phone is ~350px; 2.8rem would have needed 372px. */
  .orris-foot--v2 .orris-foot__wordmark { font-size: 2.4rem; }
  .orris-foot--v2 .orris-foot__blurb { font-size: 1.5rem; max-width: 42ch; }

  /* Phone keeps a taller row: 5.4rem clears the 48px tap-target floor. */
  .orris-foot--v2 .orris-foot__sum .orris-foot__head {
    min-height: 5.4rem;
    font-size: 1.3rem;
  }
  .orris-foot--v2 .orris-foot__sum:active { background: var(--foot-press); }

  .orris-foot--v2 .orris-foot__list { gap: 0; }
  .orris-foot--v2 .orris-foot__list a {
    display: flex;
    align-items: center;
    min-height: 4.4rem;
    padding-block: 0.4rem;
    font-size: 1.55rem;
    color: var(--foot-text);
  }

  .orris-foot--v2 .orris-foot__col--contact .orris-foot__head {
    margin: 0 0 1.6rem;
    font-size: 1.3rem;
    letter-spacing: 0.16em;
    color: var(--foot-head);
  }
  .orris-foot--v2 .orris-foot__contact { gap: 1.4rem; font-size: 1.55rem; }
  .orris-foot--v2 .orris-foot__cta { width: 100%; justify-content: center; margin-top: 2.4rem; }

  /* Reordered: the legal links are the only part of this bar anyone taps, so
     they come first and the copyright — which nobody reads — goes last. */
  .orris-foot--v2 .orris-foot__bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.8rem;
    padding-block: 2.2rem 2.8rem;
  }
  .orris-foot--v2 .orris-foot__legal { order: 1; }
  .orris-foot--v2 .orris-foot__pay { order: 2; }
  .orris-foot--v2 .orris-foot__copy { order: 3; }
  /* No hairline pipes down here. Three legal links wrap onto two lines on a
     360px screen and a separator drawn before the item starts the second line
     with a stranded pipe. Space does the same job and cannot break. */
  .orris-foot--v2 .orris-foot__legal { gap: 0.4rem 2.8rem; }
  .orris-foot--v2 .orris-foot__legal li + li::before { content: none; }
  .orris-foot--v2 .orris-foot__legal a {
    display: block;
    padding-block: 0.5rem;
    font-size: 1.35rem;
  }
}

/* Hover only on pointer devices, and written as ONE flat query rather than
   `@media (hover: hover)` nested inside the phone block. Nesting is valid CSS
   and browsers honour it, but Shopify's {% stylesheet %} compiler does not:
   it dropped the entire enclosing block, which took the heading colour and the
   chevron with it and left both reading the dark-footer defaults on white.
   Keep every media query in this file flat. */
@media screen and (max-width: 749px) and (hover: hover) {
  .orris-foot--v2 .orris-foot__sum:hover .orris-foot__head { color: var(--foot-strong); }
}

/* ===========================================================================
   750px and up.
   =========================================================================== */
@media screen and (min-width: 750px) {
  /* `<details open>` in the markup is NOT enough: a desktop visitor can still
     click the summary shut. Three independent guards, in order of importance:

       1. the panel is forced visible whether or not [open] is set, so the state
          of the attribute stops mattering above 750px;
       2. the summary is inert to the pointer and carries no marker or chevron,
          so there is nothing to click;
       3. the JS below re-opens it and drops it out of the tab order on every
          breakpoint change, which covers the keyboard.

     1 and 2 are pure CSS, so the desktop footer is correct with JS disabled;
     3 only keeps the DOM honest so assistive tech announces "expanded". */
  .orris-foot--v2 .orris-foot__disc:not([open]) > .orris-foot__panel { display: block; }
  /* Chrome 131+ hides closed content on ::details-content with
     content-visibility, which the child rule above cannot reach. Browsers that
     do not know the pseudo-element drop this one rule and rely on the rule
     above, which is what they honour. */
  .orris-foot--v2 .orris-foot__disc::details-content {
    content-visibility: visible;
    block-size: auto;
  }
  .orris-foot--v2 .orris-foot__sum {
    display: block;
    list-style: none;
    pointer-events: none;
    cursor: default;
  }
  .orris-foot--v2 .orris-foot__sum::-webkit-details-marker { display: none; }
  .orris-foot--v2 .orris-foot__sum::marker { content: ''; }
  .orris-foot--v2 .orris-foot__sum .orris-foot__head {
    display: block;
    min-height: 0;
    margin: 0 0 2rem;
    color: var(--foot-muted);
  }
  .orris-foot--v2 .orris-foot__sum .orris-foot__head::after { content: none; }

  /* Two columns with the brand and contact blocks spanning both — the layout
     this footer used to have here — made a 980px-tall tablet footer: four
     stacked bands, each with half the width empty beside it. Three columns
     with the brand as a full-width band on top is ~40% shorter and leaves no
     orphaned space. */
  .orris-foot--v2 .orris-foot__top {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4rem 3.2rem;
    padding-block: 5.6rem 4.4rem;
  }
  .orris-foot--v2 .orris-foot__col--brand { grid-column: 1 / -1; }
  .orris-foot--v2 .orris-foot__col--contact { grid-column: auto; }

  /* Headings were pure white and the links they label were 72% — the label
     shouting over its own content. Dropping the headings to a quiet 50% label
     and lifting the links makes the links the figure and the headings the
     ground, which is the whole difference between this and a default footer.
     50% white on ink is 5.5:1, so the labels still clear AA at 11.5px. */
  .orris-foot--v2 .orris-foot__head {
    margin: 0 0 2rem;
    font-size: 1.2rem;
    letter-spacing: 0.16em;
    color: var(--foot-muted);
  }
  .orris-foot--v2 .orris-foot__list { gap: 1.15rem; }
  .orris-foot--v2 .orris-foot__list a { display: inline-block; font-size: 1.5rem; }

  .orris-foot--v2 .orris-foot__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem 3.2rem;
    padding-block: 2.4rem 3.2rem;
  }
}

/* An underline that grows from the left, on pointer devices only so a tap does
   not leave it stuck on. */
@media screen and (min-width: 750px) and (hover: hover) {
  .orris-foot--v2 .orris-foot__list a { position: relative; }
  .orris-foot--v2 .orris-foot__list a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.2rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s var(--orris-ease);
  }
  .orris-foot--v2 .orris-foot__list a:hover,
  .orris-foot--v2 .orris-foot__list a:focus-visible { color: var(--foot-strong); }
  .orris-foot--v2 .orris-foot__list a:hover::after,
  .orris-foot--v2 .orris-foot__list a:focus-visible::after { transform: scaleX(1); }
}

/* The full-width brand band only exists between 750px and 990px, so it gets a
   rule under it and lays its parts out across the width instead of stacking
   them down the left edge. */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .orris-foot--v2 .orris-foot__col--brand {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1.6rem 4.8rem;
    padding-bottom: 3.6rem;
    border-bottom: 1px solid var(--foot-rule-soft);
  }
  .orris-foot--v2 .orris-foot__col--brand .orris-foot__blurb {
    margin-top: 0;
    max-width: 46ch;
  }
  .orris-foot--v2 .orris-foot__col--brand .orris-foot__socials {
    margin: 0 0 0 auto;
    align-self: center;
  }
}

@media screen and (min-width: 990px) {
  .orris-foot--v2 .orris-foot__top {
    /* 1.8fr left the brand column ~90px wider than its own 34ch paragraph, so
       the footer opened with a column of dead black between the blurb and
       SHOP. The column and the measure now agree. */
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 4.8rem 4rem;
    padding-block: 8rem 5.2rem;
  }
  .orris-foot--v2 .orris-foot__col--brand { grid-column: auto; }
  /* Optical top-alignment with the column labels: see the note on line-height. */
  /* 4.2rem suited a five-letter name. Measured at this tracking the type runs
     about 133px per rem, so seventeen characters wanted ~630px inside a brand
     column that is only ~500px wide. 3.6rem fits it on one line with room to
     spare, and the column still reads as the largest thing in the footer. */
  .orris-foot--v2 .orris-foot__wordmark { margin-top: -0.7rem; font-size: 3.6rem; letter-spacing: 0.13em; }
  .orris-foot--v2 .orris-foot__wordmark::after { width: 4rem; margin-top: 2rem; }
  .orris-foot--v2 .orris-foot__blurb { margin-top: 2.2rem; max-width: 38ch; font-size: 1.5rem; }
  .orris-foot--v2 .orris-foot__socials { margin-top: 3.2rem; }
  .orris-foot--v2 .orris-foot__bar { padding-inline-end: 7.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .orris-foot--v2 .orris-foot__sum .orris-foot__head::after,
  .orris-foot--v2 .orris-foot__list a::after,
  .orris-foot--v2 .orris-foot__disc[open] .orris-foot__panel {
    transition: none;
    animation: none;
  }
}
/* END_SECTION:orris-footer */

/* START_SECTION:orris-journal (INDEX:65) */
/* White, deliberately. The mist ground belongs to the social bar directly
   above; running both on it merged them into one long band and cost the cards
   their edges, since the cards are white. */
.ojn {
  background: var(--orris-white, #fff);
  padding-block: var(--orris-section-y, 3.6rem);
}
.ojn__wrap { max-width: 142rem; margin-inline: auto; padding-inline: var(--orris-gutter, 2rem); }

.ojn__head { text-align: center; margin-bottom: 1.8rem; }
.ojn__eyebrow {
  margin: 0 0 1.2rem;
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orris-ink);
}
.ojn__title {
  margin: 0;
  font-family: var(--font-display-family);
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--orris-ink);
}
.ojn__sub {
  margin: 0.8rem 0 0;
  font-family: var(--font-heading-family);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--orris-ink-3);
}

/* A scroll-snap rail on phones and a grid above, so three cards never become
   three 110px-wide slivers. */
.ojn__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ojn__grid::-webkit-scrollbar { display: none; }
.ojn__item { scroll-snap-align: start; min-width: 0; }

.ojn__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--orris-white);
  border: 1px solid var(--orris-line, #e7e2da);
  text-decoration: none;
  color: inherit;
  transition: transform var(--orris-t, 0.3s) var(--orris-ease), box-shadow var(--orris-t, 0.3s) var(--orris-ease);
}
.ojn__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--orris-white); }
.ojn__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ojn__media-empty { display: block; width: 100%; height: 100%; background: var(--orris-line, #e7e2da); }

.ojn__body { padding: 2rem 2rem 2.4rem; }
.ojn__h {
  margin: 0 0 0.8rem;
  font-family: var(--font-heading-family);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--orris-ink);
}
.ojn__meta {
  margin: 0;
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--orris-muted);
}
.ojn__meta span { margin-inline: 0.6rem; }

.ojn__cta { display: flex; justify-content: center; margin-top: 3.2rem; }
.ojn__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.8rem;
  padding-inline: 3.2rem;
  background: var(--orris-ink);
  color: var(--orris-white);
  font-family: var(--font-heading-family);
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--orris-ink);
  transition: background var(--orris-t, 0.3s) var(--orris-ease), color var(--orris-t, 0.3s) var(--orris-ease);
}

@media (hover: hover) {
  .ojn__card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
  .ojn__card:hover .ojn__h { text-decoration: underline; text-underline-offset: 0.3rem; }
  .ojn__btn:hover { background: transparent; color: var(--orris-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .ojn__card { transition: none; }
  .ojn__card:hover { transform: none; }
}

@media screen and (min-width: 750px) {
  .ojn__grid { grid-auto-columns: 46%; }
  .ojn__title { font-size: 4rem; }
}
@media screen and (min-width: 990px) {
  .ojn__grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }
  .ojn__head { margin-bottom: 2.4rem; }
  .ojn__body { padding: 2.4rem 2.4rem 2.8rem; }
  .ojn__h { font-size: 2rem; }
}
/* END_SECTION:orris-journal */

/* START_SECTION:orris-marquee (INDEX:66) */
/* A brand strip is a rule between sections, not a section in its own right, so
   it does not take the global section rhythm. */
.omq { position: relative; overflow: hidden; background: #fff; }
.omq--tight { padding-block: 1.6rem; }
.omq--normal { padding-block: 2.4rem; }
.omq--roomy { padding-block: var(--orris-section-y, 5.6rem); }
@media screen and (min-width: 750px) {
  .omq--tight { padding-block: 2rem; }
  .omq--normal { padding-block: 3.4rem; }
}
.omq__head { margin-bottom: 1.6rem; text-align: center; }
.omq__title {
  font-family: var(--font-display-family, Georgia, serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 4vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--orris-ink, #17130f);
  margin: 0;
}
.orris-ink .omq__title { color: #fff; }

.omq__viewport {
  position: relative;
  display: flex;
  width: 100%;
  overflow: hidden;
  /* Fade the two ends so names enter and leave rather than being guillotined
     by the viewport edge. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
          mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
}

.omq__track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3rem;
  margin: 0;
  padding: 1.2rem 1.5rem;
  list-style: none;
  /* Exactly -50% of a track that is rendered twice: the second copy lands
     precisely where the first began, so the loop has no seam and cannot drift. */
  animation: omq-run var(--omq-duration, 40s) linear infinite;
}
.omq__track--rev { animation-direction: reverse; }
@keyframes omq-run { to { transform: translateX(-100%); } }

.omq__viewport:hover .omq__track,
.omq__viewport:focus-within .omq__track,
.omq__viewport.is-paused .omq__track { animation-play-state: paused; }

.omq__item { flex: 0 0 auto; }
.omq__cell {
  display: grid;
  place-items: center;
  width: 21.6rem;
  height: 7.14rem;
  padding: 1.2rem 1rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.16);
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.omq__cell:hover { border-color: rgba(0,0,0,0.32); box-shadow: 0 2px 12px rgba(0,0,0,0.18); }
.omq__cell:focus-visible { outline: 2px solid var(--orris-gold-ink, #965c1d); outline-offset: 2px; }
.omq__name {
  font-family: var(--font-body-family, sans-serif);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orris-ink, #17130f);
  white-space: nowrap;
  text-align: center;
}
/* Every logo ships on the same 440x150 canvas, so one width rule gives every
   house identical optical weight — no wordmark can dominate the row. */
/* Each logo is trimmed to its own ink and re-rendered to fill a common box,
   so a compact wordmark like Tom Ford is no longer left swimming in the
   whitespace its source file happened to carry. */
/* Explicit height, not `auto` + max-height. Every logo asset is a 320x94
   canvas — exactly 2x this box — with the mark centred and pre-scaled to equal
   optical ink area, so the canvas maps 1:1 onto the box and nothing is
   letterboxed. Normalising here in CSS is what cannot work: these wordmarks
   run 2:1 to 10:1, so any single CSS dimension makes some of them tiny. */
.omq__logo { width: 16rem; height: 4.7rem; object-fit: contain; display: block; margin-inline: 1.7rem; }

/* Plain: no cards, just names divided by a hairline. Reads far better at 390px
   than a row of small boxes, and it is the variant to use inside a dense page. */
.omq--plain .omq__cell {
  background: none;
  border: 0;
  min-height: 0;
  min-width: 0;
  padding: 0 2rem;
  border-inline-end: 1px solid var(--orris-line, #e7e2da);
}
.omq--plain .omq__cell:hover { transform: none; }
.omq--plain .omq__track { gap: 0; }
.omq--plain .omq__name { font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: 0.1em; }
.omq.orris-ink .omq__name { color: #fff; }
.omq.orris-ink .omq__cell { background: none; border-color: rgba(255, 255, 255, 0.16); }


@media screen and (max-width: 749px) {
  .omq__track { gap: 1.6rem; padding: 0.8rem; }
  .omq__cell { min-width: 15rem; min-height: 6.8rem; padding: 0.6rem 1.2rem; }
  .omq__name { font-size: 1.35rem; letter-spacing: 0.12em; }
  .omq__logo { width: 12rem; height: 3.525rem; margin-inline: 0.8rem; }
  .omq__head { margin-bottom: 1.8rem; }
  .omq__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 2.4rem, #000 calc(100% - 2.4rem), transparent);
            mask-image: linear-gradient(to right, transparent, #000 2.4rem, #000 calc(100% - 2.4rem), transparent);
  }
}

/* Motion off: no animation at all. The row becomes a normal swipeable strip
   rather than something that moves without being asked. */
@media (prefers-reduced-motion: reduce) {
  .omq__track { animation: none; }
  .omq__viewport { overflow-x: auto; scrollbar-width: none; }
  .omq__viewport::-webkit-scrollbar { display: none; }
  .omq__track[aria-hidden='true'] { display: none; }
}
/* END_SECTION:orris-marquee */

/* START_SECTION:orris-offer-cards (INDEX:69) */
.ooc { padding-block: var(--orris-section-y, 3.6rem); }
/* The cards read better a little larger than body-copy width. Widening the
   grid rather than shrinking the gaps keeps the rhythm between cards intact
   and takes the space off the outer margins instead. */
@media screen and (min-width: 1200px) {
  /* 142rem lands the card ~6% wider than the text measure on a large screen;
     152rem overshot to +15%. The trimmed gutter recovers the rest at 1440,
     where the viewport itself is the limit. */
  .ooc .orris-wrap { max-width: 142rem; padding-inline: 2.4rem; }
}
.ooc__head { text-align: center; margin-bottom: clamp(2.4rem, 4vw, 3.2rem); }
.ooc__title {
  font-family: var(--font-display-family, Georgia, serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 4vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--orris-ink, #17130f);
  margin: 0;
}
.ooc__lede {
  margin: 1.2rem auto 0;
  max-width: 56ch;
  font-size: 1.6rem;
  line-height: 1.55;
  color: var(--orris-muted, #6d6459);
}

.ooc__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 990px) {
  .ooc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4rem; }
}

.ooc__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* The tone is the card, and the picture is inset into it, so the colour
     frames the image and runs on into the panel — one coloured object rather
     than a photograph with a caption stuck underneath. */
  background: var(--ooc-tone, #d8b76f);
  padding: 0.6rem 0.6rem 0;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ooc__card:hover { transform: translateY(-3px); box-shadow: 0 1.2rem 2.8rem rgba(23, 19, 15, 0.14); }
.ooc__card:focus-visible { outline: 2px solid var(--orris-ink, #17130f); outline-offset: 3px; }

/* Was 404/425, a ratio that existed for no reason and forced its own source
   size. Square, like the other small cards. */
.ooc__media { display: block; position: relative; aspect-ratio: var(--ar-square, 1 / 1); overflow: hidden; background: #fff; }
/* Same crop problem as the circle tiles: a 3:4 source in a near-square box,
   centred, cuts heads. */
.ooc__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.ooc__media-empty { display: block; width: 100%; height: 100%; background: #fff; }

.ooc__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 1.6rem 1.6rem 2rem;
  text-align: center;
  color: var(--ooc-ink, #17130f);
}
.ooc__h {
  font-family: var(--font-display-family, Georgia, serif);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.8rem;
}
.ooc__text { font-size: 1.6rem; line-height: 1.35; max-width: 32ch; margin: 0 0 0.5rem; }
.ooc__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: 1.5rem;
  font-weight: 500;
}
/* Underline the words only. The chevron used to sit inside the underlined run,
   so the rule cut straight through it. */
.ooc__link-text { text-decoration: underline; text-underline-offset: 0.4rem; }
.ooc__chev { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; transition: transform 0.18s ease; }
.ooc__card:hover .ooc__link-text { text-decoration-thickness: 2px; }
.ooc__card:hover .ooc__chev { transform: translateX(3px); }

/* Four tones. Ink or white is chosen per tone rather than left to whoever
   configures the card — brown at 7.6:1 and blue at 6.1:1 need white, gold and
   pink need ink. */
.ooc__card--gold  { --ooc-tone: #d8b76f; --ooc-ink: #17130f; }
.ooc__card--brown { --ooc-tone: #84411b; --ooc-ink: #ffffff; }
.ooc__card--pink  { --ooc-tone: #fcc1c0; --ooc-ink: #17130f; }
.ooc__card--blue  { --ooc-tone: #03698f; --ooc-ink: #ffffff; }

@media screen and (max-width: 749px) {
  .ooc { padding-block: var(--orris-section-y, 2.2rem); }
  .ooc__grid { gap: 1.2rem; }
  .ooc__head { margin-bottom: 2.4rem; }
  .ooc__card { padding: 0.5rem 0.5rem 0; }
  .ooc__panel { padding: 1.2rem 1rem 1.6rem; }
  .ooc__text { font-size: 1.4rem; }
  .ooc__h { font-size: 1.9rem; }
}
/* END_SECTION:orris-offer-cards */

/* START_SECTION:orris-popup (INDEX:72) */
.opz {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.opz[hidden] { display: none; }
.opz__scrim { position: absolute; inset: 0; background: rgba(23, 19, 15, 0.55); border: 0; }

.opz__box {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: min(100%, 96rem);
  max-height: calc(100dvh - 4rem);
  overflow: auto;
  background: var(--orris-white, #fff);
  box-shadow: 0 2.4rem 6rem rgba(23, 19, 15, 0.28);
  animation: opz-in 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) { .opz__box { animation: none; } }
@keyframes opz-in { from { opacity: 0; transform: translateY(1.6rem); } to { opacity: 1; transform: none; } }

.opz__x {
  position: absolute;
  top: 1rem; inset-inline-end: 1rem;
  width: 4.4rem; height: 4.4rem;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--orris-ink, #17130f);
  z-index: 2;
}
.opz__x svg { width: 2rem; height: 2rem; }
.opz__x:focus-visible { outline: 2px solid var(--orris-gold-ink, #965c1d); outline-offset: -2px; }

.opz__media { display: none; background: var(--orris-surface, #f6f3ee); }
.opz__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.opz__body {
  padding: 4rem 2.4rem 3.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.opz__brand {
  font-family: var(--font-display-family, Georgia, serif);
  font-weight: 400;
  font-size: 2.2rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orris-ink, #17130f);
  margin: 0 0 2.4rem;
}
.opz__title {
  /* The reference sets this in Sofia Pro, which is an Adobe Fonts licence.
     Poppins is the store's own UI face and the closest thing already loaded —
     adding a fourth family for one modal would cost a request for nothing. */
  font-family: var(--font-body-family, sans-serif);
  font-weight: 500;
  font-size: clamp(3.6rem, 9vw, 5.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--orris-ink, #17130f);
  margin: 0;
}
.opz__sub {
  margin: 1.4rem 0 0;
  max-width: 34ch;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--orris-ink-3, #45392f);
}
.opz__form { width: 100%; max-width: 42rem; margin-top: 2.8rem; }
.opz__field {
  width: 100%;
  min-height: 5.6rem;
  padding: 0 1.8rem;
  /* 16px exactly: below this iOS zooms the page when the field is focused,
     which on a modal leaves the user scrolled somewhere they cannot escape. */
  font-size: 1.6rem;
  font-family: var(--font-body-family, sans-serif);
  color: var(--orris-ink, #17130f);
  text-align: center;
  background: #fff;
  border: 1px solid var(--orris-ink, #17130f);
  border-radius: 6px;
}
.opz__field::placeholder { color: var(--orris-muted, #6d6459); }
/* A focus ring offset outside a bordered field draws a second, differently
   coloured rectangle around the first. Thicken the field's own border instead —
   still an unmistakable focus state, one boundary. */
.opz__field:focus { outline: none; }
.opz__field:focus-visible,
.opz__field:focus { border-color: var(--orris-ink, #17130f); box-shadow: inset 0 0 0 1px var(--orris-ink, #17130f); }
.opz__btn {
  width: 100%;
  min-height: 5.6rem;
  margin-top: 1.2rem;
  padding: 0 2rem;
  background: var(--opz-accent, #2d7c94);
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-body-family, sans-serif);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: filter 0.18s ease;
}
.opz__btn:hover { filter: brightness(0.92); }
.opz__btn:focus-visible { outline: 2px solid var(--orris-ink, #17130f); outline-offset: 2px; }
.opz__err { margin: 1rem 0 0; font-size: 1.35rem; color: var(--orris-sale, #c8102e); }
.opz__decline {
  margin-top: 2rem;
  min-height: 4.4rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body-family, sans-serif);
  font-size: 1.5rem;
  color: var(--orris-ink, #17130f);
  text-decoration: underline;
  text-underline-offset: 0.4rem;
}
.opz__terms {
  margin: 2.4rem 0 0;
  max-width: 52ch;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--orris-muted, #6d6459);
}

@media screen and (min-width: 750px) {
  .opz__box { grid-template-columns: 32rem 1fr; }
  .opz__media { display: block; }
  .opz__body { padding: 5.6rem 5.6rem 4.4rem; }
  .opz__brand { margin-bottom: 3.2rem; }
}
/* END_SECTION:orris-popup */

/* START_SECTION:orris-product-grid (INDEX:73) */
.opg { padding-block: var(--orris-section-y, 2.2rem); }
.opg--white { background: var(--orris-white); }
.opg--surface { background: var(--orris-surface); }
.opg--mist { background: var(--orris-mist, #e5f7fb); }
/* Two product grids run back to back, so the second needs to read as its own
   section. A warm off-white fill did that, but the palette has moved cool and
   a beige band between white sections now looks like a mistake. A hairline
   separates them without introducing a colour. */
.opg--divided { border-top: 1px solid var(--orris-line, #e7e2da); }

.opg__wrap { max-width: 142rem; margin-inline: auto; padding-inline: var(--orris-gutter, 2rem); }

/* The gap has to clear the reveal. The head carries the 18px `rise`, so at the
   1.4rem it used to be, the heading spent half a second physically sitting on
   top of the first row of product cards on every load — measured at -4px
   between them. Anything animated needs room to move into. */
.opg__head { text-align: center; margin-bottom: clamp(2.4rem, 4vw, 3.2rem); }
.opg__eyebrow {
  margin: 0 0 0.8rem;
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orris-ink);
}
.opg__title {
  margin: 0;
  font-family: var(--font-display-family);
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--orris-ink);
}
.opg__sub {
  margin: 0.6rem auto 0;
  max-width: 80ch;
  font-family: var(--font-heading-family);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--orris-ink-3);
}

/* Scroll-snap on phones, grid from 990px. Five product cards on a 390px screen
   would be 70px wide. */
/* The card itself is snippets/orris-card.liquid, styled in orris-theme.css.
   This section owns the head, the rail and the button — nothing about how a
   product looks. */
.opg__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.opg__grid::-webkit-scrollbar { display: none; }
.opg__item { scroll-snap-align: start; min-width: 0; }

/* `contain`, not `cover`. These are bottles on white studio grounds; cropping
   one to fill a box cuts the cap or the base off. */

/* Pushed to the bottom so prices line up across cards whose titles wrap to
   different depths. */

.opg__cta { display: flex; justify-content: center; margin-top: 2rem; }
.opg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.8rem;
  padding-inline: 3.2rem;
  background: var(--orris-ink);
  color: var(--orris-white);
  border: 1px solid var(--orris-ink);
  font-family: var(--font-heading-family);
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--orris-t, 0.3s) var(--orris-ease), color var(--orris-t, 0.3s) var(--orris-ease);
}

@media screen and (min-width: 750px) {
  .opg__grid { grid-auto-columns: 34%; }
  .opg__title { font-size: 4rem; }
}
/* Desktop keeps SCROLLING rather than becoming a static row.
   The old rule switched to `grid-auto-flow: row` with `overflow: visible`,
   which laid every product out in one fixed row — so a 10-product collection
   either squeezed into five slots or overflowed with no way to reach the rest.
   Staying a column rail means ten products are all reachable, and the
   autoplay below can advance through them.

   Card width is `(100% - gaps) / 5`, so exactly five sit in view at a time and
   the sixth is the one that scrolls in.

   The gap count is N-1, not N: a percentage inside grid-auto-columns resolves
   against the track's whole content box, gaps included, so subtracting N gaps
   takes one gap too many and every card lands a fraction narrow. That
   fraction is what made an arrow press drift — the remaining scroll came to
   4.06 steps instead of 4, so the last press moved 13px instead of a card. */
@media screen and (min-width: 990px) {
  .opg__grid {
    grid-auto-flow: column;
    grid-auto-columns: calc((100cqw - 4 * 2rem) / 5);
    gap: 2rem;
    overflow-x: auto;
  }
}
@media screen and (min-width: 1600px) {
  /* Six across once there is room, so wide screens are not half empty. */
  .opg__grid { grid-auto-columns: calc((100cqw - 5 * 2rem) / 6); }
}

/* Centre the row when there are fewer products than slots.

   The rail sizes its cards so a whole number fit across — five below 1600px,
   six above it. A section holding fewer than that leaves the spare slots at
   the END, so the cards hug the left edge with the remainder as dead space on
   the right: measured 4px left against 212px right with five best-sellers on
   a 1600px screen, which reads as a layout mistake rather than a short row.

   `justify-content: center` is NOT the way to do this, however tempting. On a
   scroll container it centres the OVERFLOW too: a nine-card rail put its first
   card at -410px while scrollLeft was 0, so two cards sat permanently off the
   left edge with no scroll position that could reach them. Content that cannot
   be scrolled to is worse than an uneven gap.

   `margin-inline: auto` with `width: fit-content` centres the BOX instead of
   its contents. A short row shrinks to its cards and the leftover space goes
   to the margins; a full row is already as wide as the container, so
   fit-content changes nothing and it scrolls from its left edge exactly as
   before. The centring is a side effect of the box being narrow, which is
   only ever true when there is nothing to scroll. */
.opg__grid {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
@media (prefers-reduced-motion: reduce) {
  .opg__grid { scroll-behavior: auto; }
}
/* Widths, the container and the arrow gutter all live in orris-theme.css,
   which loads after this block and would otherwise silently win. */
.opg__frame { position: relative; }
/* END_SECTION:orris-product-grid */

/* START_SECTION:orris-promo-cards (INDEX:77) */
.opc { position: relative; padding-block: var(--orris-section-y, 3.6rem); }
.opc__head { margin-bottom: clamp(2.4rem, 4vw, 3.2rem); }
.opc__title {
  font-family: var(--font-display-family, Georgia, serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 4vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--orris-ink, #17130f);
  margin: 0;
}

.opc__frame { position: relative; }

.opc__rail {
  display: grid;
  grid-auto-flow: column;
  /* Phone only: a partial card at the edge says "this scrolls". From 750px up
     the columns below divide into whole cards instead. */
  grid-auto-columns: 86%;
  gap: 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.opc__rail::-webkit-scrollbar { display: none; }
.opc__item { scroll-snap-align: start; min-width: 0; }

/* Whole cards only, and the rail runs edge to edge with no side padding. A
   fractional divisor left a sliver of the next card hanging past the viewport
   and dead air on the other side; it also meant an arrow press moved the row
   by a card-width that did not line up with a snap point, so the movement
   settled a fraction off. Whole columns make one press equal one card. */
@media screen and (min-width: 750px) { .opc__rail { grid-auto-columns: calc((100% - 1 * 2.4rem) / 2); } }
@media screen and (min-width: 990px) {
  .opc__rail { grid-auto-columns: calc((100% - 3 * 2.4rem) / 4); }
}
@media screen and (min-width: 1200px) {
  .opc__head { max-width: 142rem; margin-inline: auto; padding-inline: max(2.4rem, calc((100vw - 142rem) / 2)); }
}

.opc__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: var(--opc-tone, #a8c4cc);
}
.opc__media { position: relative; aspect-ratio: var(--ar-landscape, 3 / 2); overflow: hidden; background: var(--orris-white, #fff); }
.opc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hover: the photograph pushes in behind its own frame.

   The card itself is deliberately left alone. .opc__item > * already
   carries the rail's proximity effect — a scale/brightness/shadow driven
   by the --near variable the script writes per card — and a hover
   transform on the same element would overwrite it mid-scroll. So the
   movement lives on the image, inside the media frame, where nothing
   else is competing for the transform. */
.opc__media img { transition: transform 0.55s var(--orris-ease, ease); }
/* No (hover: hover) gate: on a touch device :hover either never fires or
   clears on the next tap, and a stuck 1.06 zoom is harmless either way.
   The gate also makes the rule untestable in headless Chrome, which
   reports no hover capability at all. */
.opc__card:hover .opc__media img,
.opc__card:focus-within .opc__media img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .opc__media img { transition: none; }
  .opc__card:hover .opc__media img,
  .opc__card:focus-within .opc__media img { transform: none; }
}
.opc__media-empty { display: block; width: 100%; height: 100%; background: var(--orris-line, #e7e2da); }

.opc__panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.2rem;
  padding: 2.8rem 2.4rem 3.2rem;
  text-align: center;
}
/* `margin-top: auto` eats all the leftover height in the panel, so the button
   is pinned to the panel's bottom edge instead of sitting right under the
   description. Cards are equal height (align-items: stretch on the rail), so
   pinning to the bottom puts every button on the same baseline no matter how
   long the copy above it runs. */
.opc__panel .opc__btn { margin-top: auto; }
.opc__h {
  font-family: var(--font-display-family, Georgia, serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 2.6vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--opc-ink, #17130f);
}
.opc__text {
  margin: 0;
  max-width: 34ch;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--opc-ink, #17130f);
}
.opc__btn {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.8rem;
  padding: 0 2.8rem;
  background: var(--opc-btn-bg, #17130F);
  color: var(--opc-btn-ink, #fff);
  text-decoration: none;
  font-family: var(--font-body-family, sans-serif);
  font-size: 1.4rem;
  font-weight: 500;
  transition: opacity 0.18s ease;
}
.opc__btn:focus-visible { outline: 2px solid var(--opc-ink, #17130f); outline-offset: 3px; }
}

/* The three approved panel colours. Button and text invert on ink so contrast
   holds without anyone having to remember to change them. */
.opc__card--blue { --opc-tone: #a8c4cc; --opc-ink: #17130f; --opc-btn-bg: #17130F; --opc-btn-ink: #fff; }
.opc__card--gold { --opc-tone: #d8b76f; --opc-ink: #17130f; --opc-btn-bg: #17130F; --opc-btn-ink: #fff; }
/* The ink card used to invert its button to white-on-black; every button is
   now black-on-white so the row stays consistent. */
.opc__card--ink  { --opc-tone: #17130F; --opc-ink: #ffffff; --opc-btn-bg: #17130F; --opc-btn-ink: #fff; }


@media screen and (max-width: 749px) {
  /* This overrode the rhythm token with exactly double its value (4.4rem
     against --orris-section-y: 2.2rem), so on a phone every band sat twice as
     far apart as the system says it should. Back on the token. */
  .opc { padding-block: var(--orris-section-y, 2.2rem); }
  .opc__head { margin-bottom: clamp(2.4rem, 4vw, 3.2rem); }
  .opc__panel { padding: 2rem 1.8rem 2.2rem; }
  .opc__btn { width: 100%; }
  /* 2.4rem between cards on an 82%-wide rail wasted a tenth of the viewport
     in dead air between two things meant to read as a set. */
  .opc__rail { gap: 1.4rem; }
}
/* END_SECTION:orris-promo-cards */

/* START_SECTION:orris-readmore (INDEX:79) */
/* Reference metrics rather than the global section rhythm: this block is a
   footnote for search, not a section, and 8rem of padding gave it the weight of
   one. */
.orm { padding: 2.4rem 0 1.2rem; }
.orm .orris-wrap { max-width: 168rem; padding-inline: 4.4rem; }
.orm__inner { text-align: center; }
.orm__title {
  /* Sans here on purpose: the reference sets this heading in its UI face at
     32px, not in its display serif. */
  font-family: var(--font-heading-family, sans-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 3.2vw, 3.2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--orris-ink, #17130f);
  margin: 0 0 1.29rem;
}
.orm__text {
  margin-inline: auto;
  font-size: 1.4rem;
  line-height: 1.3;
  /* 300 on purpose: this is a search footnote, and the light weight is what
     keeps it from reading as body copy. */
  font-weight: 300;
  color: var(--orris-ink, #17130f);
}
.orm__text p { margin: 0 0 1.4rem; }
.orm__title + .orm__body .orm__text { margin-top: 0; }
.orm__text p:last-child { margin-bottom: 0; }

/* Clamped only once the button exists, so no-JS keeps the full text. */
.orm__body.is-clamped .orm__text {
  display: -webkit-box;
  -webkit-line-clamp: var(--orm-lines, 3);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.orm__btn {
  margin-top: 1.6rem;
  min-height: 4.8rem;
  padding: 0 3rem;
  background: var(--orris-ink, #17130f);
  color: #fff;
  border: 1px solid var(--orris-ink, #17130f);
  cursor: pointer;
  font-family: var(--font-body-family, sans-serif);
  font-size: 1.45rem;
  font-weight: 500;
  transition: background 0.18s ease, color 0.18s ease;
}
.orm__body.is-open .orm__btn { background: transparent; color: var(--orris-ink, #17130f); }
.orm__btn:hover { background: transparent; color: var(--orris-ink, #17130f); }
.orm__body.is-open .orm__btn:hover { background: var(--orris-ink, #17130f); color: #fff; }
.orm__btn:focus-visible { outline: 2px solid var(--orris-gold-ink, #965c1d); outline-offset: 2px; }
@media screen and (max-width: 749px) {
  .orm { padding: 2rem 0 1rem; }
  .orm .orris-wrap { padding-inline: var(--orris-gutter); }
  .orm__text { font-size: 1.4rem; line-height: 1.4; }
  .orm__btn { width: 100%; }
}
/* END_SECTION:orris-readmore */

/* START_SECTION:orris-shop-tabs (INDEX:81) */
.osc { padding-block: var(--orris-section-y, 3.6rem); }
.osc__head { text-align: center; margin-bottom: clamp(2.4rem, 4vw, 3.2rem); }
.osc__title {
  font-family: var(--font-display-family, Georgia, serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 3.8vw, 4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--orris-ink, #17130f);
  margin: 0;
}
.osc__lede { margin: 1rem auto 0; max-width: 72ch; font-size: 1.6rem; line-height: 1.5; color: var(--orris-ink-3, #45392f); }

/* --- pill tabs ----------------------------------------------------------- */
.osc__tabs {
  display: flex; gap: 1rem; justify-content: flex-start;
  margin: 0 0 2.4rem;
  padding-inline: var(--orris-gutter, 2rem);
  overflow-x: auto; scrollbar-width: none;
}
.osc__tabs::-webkit-scrollbar { display: none; }
@media screen and (min-width: 990px) { .osc__tabs { justify-content: center; } }
.osc__tab {
  flex: 0 0 auto;
  min-height: 4.2rem;
  padding: 0.8rem 2.4rem;
  border: 1px solid var(--orris-line, #e7e2da);
  border-radius: 999px;
  background: #fff;
  color: #000;
  cursor: pointer;
  font-family: var(--font-body-family, sans-serif);
  font-size: 1.8rem;
  font-weight: 400;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.osc__tab:hover { border-color: var(--orris-ink, #17130f); }
.osc__tab.is-active { background: var(--orris-ink, #17130f); border-color: var(--orris-ink, #17130f); color: #fff; }
.osc__tab:focus-visible { outline: 2px solid var(--orris-gold-ink, #965c1d); outline-offset: 2px; }
.osc__panel.is-hidden { display: none; }

/* --- rail ---------------------------------------------------------------- */
.osc__railwrap { position: relative; }
.osc__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 62%;
  gap: 1.6rem; margin: 0; padding: 0.4rem var(--orris-gutter, 2rem);
  list-style: none; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scroll-padding-inline-start: var(--orris-gutter, 2rem);
  scrollbar-width: none;
}
.osc__rail::-webkit-scrollbar { display: none; }
.osc__item { scroll-snap-align: start; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .osc__rail { scroll-behavior: auto; } }
@media screen and (min-width: 750px) { .osc__rail { grid-auto-columns: 32%; } }
@media screen and (min-width: 1200px) {
  .osc__rail {
    grid-auto-columns: calc((100% - 6.4rem) / 5);
    padding-inline: max(2.4rem, calc((100vw - 142rem) / 2));
    scroll-padding-inline-start: max(2.4rem, calc((100vw - 142rem) / 2));
  }
}

/* --- card ---------------------------------------------------------------- */


.osc__arrow {
  position: absolute; top: 38%; transform: translateY(-50%); z-index: 4;
  width: 4.8rem; height: 4.8rem; display: none; place-items: center;
  border-radius: 50%; border: 1px solid var(--orris-line, #e7e2da);
  background: #fff; color: var(--orris-ink, #17130f); cursor: pointer;
  box-shadow: 0 2px 10px rgba(23,19,15,0.08);
}
.osc__arrow svg { width: 2rem; height: 2rem; }
.osc__arrow[disabled] { opacity: 0.3; cursor: default; }
.osc__arrow--prev { inset-inline-start: 0.6rem; }
.osc__arrow--next { inset-inline-end: 0.6rem; }
@media screen and (min-width: 990px) { .osc__arrow { display: grid; } }

.osc__cta { display: flex; justify-content: center; margin-top: 2rem; }
.osc__btn {
  display: inline-flex; align-items: center; gap: 0.8rem;
  min-height: 5.2rem; padding: 0 3.2rem;
  background: var(--orris-ink, #17130f); color: #fff; text-decoration: none;
  font-size: 1.5rem; font-weight: 500;
  transition: background 0.18s ease;
}
.osc__btn:hover { background: #000; }

/* --- quick view ---------------------------------------------------------- */

@media screen and (max-width: 749px) {
  .osc__head { margin-bottom: 2rem; }
  .osc__tabs { margin-bottom: 1.8rem; }
  .osc__btn { width: calc(100% - var(--orris-gutter) * 2); justify-content: center; }
}
/* END_SECTION:orris-shop-tabs */

/* START_SECTION:orris-signup-bar (INDEX:82) */
.osb { background: var(--osb-bg, #027da1); color: #fff; margin-top: 2rem; }
.osb__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  padding-block: 3.2rem;
}
@media screen and (min-width: 990px) {
  .osb__inner { grid-template-columns: 1fr auto; gap: 4rem; padding-block: 3.9rem; }
}
.osb__title {
  font-family: var(--font-display-family, Georgia, serif);
  font-weight: 400;
  /* 37px and a 5px gap to the sub-line, per the reference inspector. */
  font-size: clamp(2.6rem, 3.4vw, 3.7rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 0.5rem;
}
.osb__sub { margin: 0; font-size: 1.8rem; line-height: 1.35; color: #fff; max-width: 70ch; }

.osb__form { display: flex; flex-wrap: wrap; gap: 1rem; width: 100%; max-width: 100%; min-width: 0; }
@media screen and (min-width: 990px) {
  /* The field had a 26rem flex-basis inside an auto-width grid column, so the
     button had nowhere to sit and wrapped underneath — which is also what made
     the band taller than the reference. One row, no wrapping. */
  .osb__form { flex-wrap: nowrap; width: 54rem; }
  .osb__field { flex: 1 1 auto; }
}
.osb__field {
  /* min-width: 0 is what lets this shrink. A flex item refuses to go narrower
     than its basis (26rem = 260px) without it, which is what pushed the field
     past the panel edge on a 320-390px phone. */
  flex: 1 1 26rem;
  min-width: 0;
  max-width: 100%;
  min-height: 5.2rem;
  padding: 0 1.6rem;
  /* 16px: below it iOS zooms the page on focus. */
  font-size: 1.6rem;
  font-family: var(--font-body-family, sans-serif);
  color: var(--orris-ink, #17130f);
  background: #fff;
  border: 0;
  border-radius: 0;
}
.osb__field::placeholder { color: var(--orris-muted, #6d6459); }
.osb__field:focus { outline: 2px solid #fff; outline-offset: 2px; }
.osb__btn {
  flex: 0 0 auto;
  min-height: 5.2rem;
  padding: 0 3rem;
  background: var(--orris-ink, #17130f);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body-family, sans-serif);
  font-size: 1.5rem;
  font-weight: 500;
  transition: background 0.18s ease;
}
/* Inverts rather than darkens: on a teal ground a black button going blacker
   reads as nothing happening. */
.osb__btn:hover { background: #fff; color: var(--orris-ink, #17130f); }
.osb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.osb__msg { flex: 1 1 100%; margin: 0.4rem 0 0; font-size: 1.35rem; color: #fff; }
.osb__msg--err { color: #ffd9d9; }

/* Phones and tablets — everything below the 990px desktop layout.
   The previous rule stopped at 749px, so 750-989px tablets kept the wide
   two-column form and overflowed. `minmax(0, 1fr)` on the grid is the other
   half of the fix: a default `1fr` track refuses to shrink below its content,
   so a long heading could push the whole column past the viewport. */
@media screen and (max-width: 989px) {
  .osb__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 2.4rem;
  }
  .osb__copy { min-width: 0; }
  /* One row at every width: a 0 basis on the field means it absorbs only the
     leftover space, so the button stays beside it instead of wrapping under. */
  .osb__form { flex-wrap: wrap; width: 100%; gap: 0; align-items: stretch; }
  .osb__field { flex: 1 1 0; min-width: 0; }
  .osb__btn { flex: 0 0 auto; white-space: nowrap; padding-inline: 1.8rem; }
  .osb__msg { flex: 1 1 100%; }
  /* Long unbroken words (a pasted URL, "drops and offers") must wrap rather
     than widen the column. */
  .osb__title,
  .osb__sub { overflow-wrap: anywhere; }
}

/* Small phones: trim the type so the heading does not eat the screen. */
@media screen and (max-width: 479px) {
  .osb__title { font-size: clamp(2.2rem, 7vw, 2.8rem); }
  .osb__sub { font-size: 1.5rem; }
  .osb__field,
  .osb__btn { min-height: 4.8rem; }
}
/* END_SECTION:orris-signup-bar */

/* START_SECTION:orris-social-bar (INDEX:83) */
/* Warm surface, not the cool mist this shipped with.
   --orris-mist (#e5f7fb) is the tint of a cool blue family that came in with
   a couple of reference-built sections; every other ground on the store is
   warm, and the homepage uses no mist at all. A pale blue band between a
   white grid and the burgundy signup bar read as a different site's
   component. --orris-surface is the warm off-white the rest of the theme
   already uses for exactly this job: a band that separates from white
   without introducing a colour.

   The monogram is a white circle, so it still reads as its own mark against
   this ground, and the ink text keeps full contrast (~15:1). */
.osoc { background: var(--orris-surface, #f6f3ee); padding-block: 3.2rem; }
.osoc__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 142rem;
  margin-inline: auto;
  padding-inline: var(--orris-gutter, 2rem);
  text-align: center;
}

/* A drawn monogram rather than an image: the mark is one letter of the
   wordmark, so shipping a PNG of it would be a second copy of the logo to keep
   in step with the first. */
.osoc__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  background: var(--orris-white);
  font-family: var(--font-display-family);
  font-size: 3rem;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  color: var(--orris-ink);
}

.osoc__text {
  margin: 0;
  font-family: var(--font-display-family);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--orris-ink);
}
.osoc__handle { font-style: italic; white-space: nowrap; }

.osoc__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.6rem 2.4rem; }
.osoc__link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.4rem;
  padding-inline: 2rem;
  border: 1px solid var(--orris-ink);
  background: var(--orris-ink);
  color: var(--orris-white);
  font-family: var(--font-heading-family);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background var(--orris-t, 0.3s) var(--orris-ease), color var(--orris-t, 0.3s) var(--orris-ease);
}
.osoc__link svg { width: 1.8rem; height: 1.8rem; }

.osoc__icons { display: flex; align-items: center; gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.osoc__icons a {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  color: var(--orris-ink);
  transition: border-color var(--orris-t, 0.3s) var(--orris-ease), background var(--orris-t, 0.3s) var(--orris-ease);
}
.osoc__icons svg { width: 1.9rem; height: 1.9rem; }

@media (hover: hover) {
  .osoc__link:hover { background: transparent; color: var(--orris-ink); }
  .osoc__icons a:hover { border-color: var(--orris-ink); background: var(--orris-white); }
}

@media screen and (min-width: 750px) {
  .osoc { padding-block: 3.6rem; }
  .osoc__wrap { flex-direction: row; text-align: left; gap: 2.8rem; }
  .osoc__text { flex: 1 1 auto; font-size: 2.6rem; }
  .osoc__links { flex: 0 0 auto; }
}
@media screen and (min-width: 990px) {
  .osoc__text { font-size: 3rem; }
  .osoc__mark { width: 8.8rem; height: 8.8rem; font-size: 3.6rem; }
}
/* END_SECTION:orris-social-bar */

/* START_SECTION:orris-story (INDEX:87) */
.orris-story {
  padding-block: var(--orris-section-y);
  scroll-margin-top: 8rem;
}

.orris-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.8rem;
}

/* Label and opening line sit together above the columns. The eyebrow used to
   live in the text column, which on a phone put the section's label BELOW the
   photograph it was supposed to introduce. */
.orris-story__lead { grid-column: 1 / -1; }
.orris-story__lead .orris-eyebrow { margin-bottom: 1.2rem; }

/* The line that opens the block. Display scale, not a decorated paragraph. */
.orris-story__quote {
  margin: 0;
  font-family: var(--font-display-family);
  font-weight: 400;
  font-size: clamp(3.2rem, 9.2vw, 5.2rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
  color: var(--orris-ink);
  max-width: 22ch;
  text-wrap: balance;
}

.orris-story__media { margin: 0; }
.orris-story__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--orris-surface);
}
/* Edge to edge on a phone. The wrap's only horizontal padding is the gutter,
   so pulling exactly one gutter each side lands on the viewport edge without
   creating a scroll. Restored to the column at 750px. */
@media screen and (max-width: 749px) {
  .orris-story__media { margin-inline: calc(var(--orris-gutter) * -1); }
  .orris-story__caption { padding-inline: var(--orris-gutter); }
}
.orris-story__caption {
  margin-top: 1.1rem;
  font-family: var(--font-body-family);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--orris-muted);
}

.orris-story__body { min-width: 0; }

.orris-story__heading {
  margin: 0 0 1.6rem;
  font-family: var(--font-display-family);
  font-weight: 400;
  font-size: clamp(3rem, 7.6vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.021em;
  color: var(--orris-ink);
  text-wrap: balance;
}

.orris-story__prose {
  font-size: clamp(1.65rem, 4.3vw, 1.8rem);
  line-height: 1.72;
  color: var(--orris-ink-3);
  max-width: 58ch;
}
.orris-story__prose p { margin: 0 0 1.45em; }
.orris-story__prose > :last-child { margin-bottom: 0; }
.orris-story__prose strong { color: var(--orris-ink); font-weight: 600; }
.orris-story__prose a { color: inherit; text-underline-offset: 0.3em; }

/* Drop cap — the cheapest signal that a page was set rather than filled. */
.orris-story--dropcap .orris-story__prose > p:first-child::first-letter {
  float: left;
  font-family: var(--font-display-family);
  font-weight: 400;
  font-size: 5.6rem;
  line-height: 0.76;
  margin: 0.7rem 0.9rem 0 0;
  color: var(--orris-ink);
}

.orris-story__cta { margin: 2.8rem 0 0; }

@media screen and (min-width: 750px) {
  .orris-story__grid { gap: 3.6rem; }
  .orris-story--dropcap .orris-story__prose > p:first-child::first-letter {
    font-size: 6.8rem;
    margin: 0.9rem 1.1rem 0 0;
  }
}

/* Asymmetric on desktop: the photograph supports the argument, it does not
   split the page in half with it. */
@media screen and (min-width: 990px) {
  .orris-story__grid {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(3.2rem, 4.4vw, 6rem);
    align-items: start;
  }
  .orris-story__quote { max-width: 24ch; }
  .orris-story__lead { margin-bottom: clamp(1.2rem, 2vw, 2.8rem); }
  .orris-story__grid--reverse .orris-story__media { order: 2; }
  .orris-story__media img { aspect-ratio: 4 / 3; }
}

/* Ink ground */
.orris-story.orris-ink .orris-story__quote,
.orris-story.orris-ink .orris-story__heading { color: #fff; }
.orris-story.orris-ink .orris-story__prose { color: rgba(255, 255, 255, 0.7); }
.orris-story.orris-ink .orris-story__prose strong { color: #fff; }
.orris-story.orris-ink .orris-story__caption { color: rgba(255, 255, 255, 0.55); }
.orris-story.orris-ink .orris-story--dropcap .orris-story__prose > p:first-child::first-letter { color: #fff; }
/* END_SECTION:orris-story */

/* START_SECTION:orris-wishlist (INDEX:93) */
.owl { background: var(--orris-white); padding-block: var(--orris-section-y, 2.2rem); }
.owl__wrap { max-width: 142rem; margin-inline: auto; padding-inline: var(--orris-gutter, 2rem); }

.owl__head { text-align: center; margin-bottom: 2rem; }
.owl__eyebrow {
  margin: 0 0 0.8rem;
  font-family: var(--font-heading-family);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orris-ink);
}
.owl__title { margin: 0; font-family: var(--font-display-family); font-size: 3.2rem; font-weight: 400; line-height: 1.15; color: var(--orris-ink); }
.owl__count { margin: 0.6rem 0 0; font-family: var(--font-heading-family); font-size: 1.45rem; font-weight: 300; color: var(--orris-muted); }
.owl__count[hidden] { display: none; }

.owl__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.owl__grid[hidden] { display: none; }
.owl__item[hidden] { display: none; }

.owl__empty { max-width: 52ch; margin-inline: auto; padding-block: 3.2rem; text-align: center; }
.owl__empty[hidden] { display: none; }
.owl__empty-title { margin: 0 0 0.8rem; font-family: var(--font-display-family); font-size: 2.4rem; font-weight: 400; color: var(--orris-ink); }
.owl__empty-text { margin: 0 0 2rem; font-family: var(--font-heading-family); font-size: 1.5rem; font-weight: 300; line-height: 1.6; color: var(--orris-ink-3); }
.owl__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.8rem;
  padding-inline: 3.2rem;
  background: var(--orris-ink);
  border: 1px solid var(--orris-ink);
  color: var(--orris-white);
  font-family: var(--font-heading-family);
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--orris-t, 0.3s) var(--orris-ease), color var(--orris-t, 0.3s) var(--orris-ease);
}
.owl__note { margin: 2.4rem 0 0; text-align: center; font-family: var(--font-heading-family); font-size: 1.3rem; font-weight: 300; color: var(--orris-muted); }

@media (hover: hover) { .owl__btn:hover { background: transparent; color: var(--orris-ink); } }

@media screen and (min-width: 750px) { .owl__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
@media screen and (min-width: 990px) { .owl__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .owl__title { font-size: 4rem; } }
/* END_SECTION:orris-wishlist */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:orris-bank-transfer-cta (INDEX:123) */
/* Sits above Dawn's checkout button and outranks it visually, because it is
   the outcome the store would rather have. The plain checkout button stays
   directly beneath it as the neutral option — a customer who wants to pay
   cash at the door should not have to hunt. */
.orris-bank-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  min-height: 5rem;
  padding: 1rem 1.6rem;
  margin-bottom: 1rem;
  background: var(--orris-ink, #17130f);
  color: #fff;
  border: 1px solid var(--orris-ink, #17130f);
  border-radius: 0;
  text-align: center;
  text-decoration: none;
  transition: background var(--orris-t, 0.3s) var(--orris-ease), color var(--orris-t, 0.3s) var(--orris-ease);
}
.orris-bank-cta__label {
  font-family: var(--font-heading-family);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
/* The saving is the reason to tap; the mechanics are reassurance. Second line,
   quieter, so the button still reads as one message at a glance. */
.orris-bank-cta__note {
  font-family: var(--font-body-family);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
}
@media (hover: hover) {
  .orris-bank-cta:hover { background: transparent; color: var(--orris-ink, #17130f); }
  .orris-bank-cta:hover .orris-bank-cta__note { color: var(--orris-muted, #6d6459); }
}
.orris-bank-cta:focus-visible {
  outline: 2px solid var(--orris-gold-ink, #965c1d);
  outline-offset: 3px;
}
/* Dawn turns .cart__ctas into a flex ROW at 750px, which was sized for its own
   one-line buttons. This CTA is two lines tall, so side by side the pair came
   out unequal and squeezed "Check out" onto two lines. Stacking them restores
   what this snippet was built for: transfer on top, checkout directly beneath. */
.cart__ctas:has(.orris-bank-cta) {
  display: block;
}
/* With the transfer button carrying the weight, the checkout button becomes
   the secondary path rather than two black slabs competing. */
.cart__ctas:has(.orris-bank-cta) .cart__checkout-button {
  width: 100%;
  min-height: 5rem;
  background: transparent;
  color: var(--orris-ink, #17130f);
  border: 1px solid var(--orris-line, #e7e2da);
}
/* END_SNIPPET:orris-bank-transfer-cta */