/* ============================================================
   AE.R overrides — loads after main.css.
   Hand-edited; tools/build_site.py never overwrites this file.
   ============================================================ */

/* ------------------------------------------------------------
   Tenso — the typeface aerskinlab.com sets its headings in, from the clinic's
   own licensed files (exljbris Tenso Regular and Light).
   ------------------------------------------------------------ */
@font-face {
  font-family: "Tenso";
  src: url("/assets/fonts/Tenso-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tenso";
  src: url("/assets/fonts/Tenso-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
:root { --tenso: "Tenso", "Jost", "Helvetica Neue", Arial, sans-serif; }

/* ------------------------------------------------------------
   Top bar, set as aerskinlab.com sets it: capitals at 13px, and a plus after
   each item that opens a menu, turning 135° into a cross while it is open.
   The plus is the live site's own icon (24-unit grid, 2-unit bars), drawn at
   its 13px and 4px after the label.
   ------------------------------------------------------------ */
.head .nav .top,
.head .acct,
.head .head-cta .btn {
  font-family: var(--tenso);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.head .nav .top { gap: 4px; padding-inline: 9px; }
/* Tenso capitals are wider than the old menu face, so between the widest row
   (1240px) and where the menu button takes over (1080px) the bar tightens:
   12px type, 11px plus, closer items. */
@media (min-width: 1081px) and (max-width: 1239px) {
  .head .navrow { gap: 12px; padding-inline: 20px; }
  .head .nav .top,
  .head .acct,
  .head .head-cta .btn { font-size: 12px; }
  .head .nav .top { padding-inline: 5px; }
  .head .nav .top .chev { width: 11px; height: 11px; }
  .head .head-cta { gap: 10px; }
}
/* The logo never gives up width to the menu. It was allowed to shrink, and
   the wider Tenso capitals squeezed it from its 9.12:1 to 7.24:1. */
.head .brand { flex-shrink: 0; }
.head .brand img { width: auto; }
/* The logo never gives up width to the menu. It was allowed to shrink, and
   the wider Tenso capitals squeezed it from its 9.12:1 to 7.24:1. */
.head .brand { flex-shrink: 0; }
.head .brand img { width: auto; }
.head .nav .top .chev {
  width: 13px;
  height: 13px;
  border: 0;
  opacity: 1;
  transform: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11v2h-7v7h-2v-7H4v-2h7V4h2v7z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11v2h-7v7h-2v-7H4v-2h7V4h2v7z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s var(--ease, cubic-bezier(.2, .7, .2, 1));
}
.head .nav > li:hover .top .chev,
.head .nav > li:focus-within .top .chev { transform: rotate(135deg); }
/* Once the menu button takes over (1080px and down) the hidden menu still
   held a gap either side of it, and on a phone the logo, Book Now and the
   button needed 465px of a 390px screen, widening every page. The menu goes;
   the row tightens; on the narrowest phones the logo gets smaller whole —
   height and width together, never squeezed. */
@media (max-width: 1080px) {
  .head .navrow > nav { display: none; }
}
@media (max-width: 680px) {
  .head .navrow { padding-inline: 18px; gap: 12px; }
  .head .head-cta { gap: 8px; }
  .head .head-cta .btn { padding: 10px 14px; font-size: 11.5px; }
}
@media (max-width: 374px) {
  .head .brand img { height: 17px; }
}
@media (max-width: 340px) {
  .head .navrow { padding-inline: 14px; }
  .head .brand img { height: 15px; }
}
/* the phone menu: the same face for the same items; it already has its plus */
.mobile .mtop {
  font-family: var(--tenso);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .025em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Mega menu: one panel, no scrolling, no overlap.

   main.css gives .mega-wide a fixed 760px in two columns, so Aesthetic
   Treatments (5 groups / 40 items) stacks Injectables (11) and Bodycare (10)
   into a single column and runs past the fold.

   Here each group gets its own column. The panel is a fixed width so the
   columns divide it evenly, and every column is minmax(0, 1fr) so a long label
   wraps inside its own track instead of spilling into its neighbour.
   ------------------------------------------------------------ */

@media (min-width: 981px) {
  /* Every .nav rule here is scoped to the clinic header (.head). AE.R SKIN's
     own header is also class "nav", and unscoped, the stretch rule below
     pulled its logo's link to full height with the logo pinned to the top
     edge — 18px above the menu text — and squeezed that header to 56px. */
  /* anchor the panel to the header row, not the individual <li>, so a wide
     panel stays centred on the page instead of overflowing at the edges */
  .head .nav > li { position: static; }
  .head .navrow { position: relative; }

  .mega {
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    padding: 32px 40px 34px;

    /* Flush against the header row — no gap to cross.
       With the <li> static, `top: calc(100% + 6px)` resolves against the 77px
       navrow instead of the ~40px list item, so the panel sat 35px below the
       item while the hover bridge was only 6px. The pointer crossed dead space
       and the menu closed before it could be used. Flush removes the problem
       outright; the iridescent rule along the top edge still separates it. */
    top: 100%;
    margin-top: 0;
  }
  /* the 6px bridge is unnecessary now, and spanning 1240px it would sit over
     the other nav items and block them */
  .mega::before { display: none; }

  /* Nav items fill the full height of the header row.
     They were centred in a 76px row, so an item's bottom edge sat 29px above
     the row's bottom — which is where the panel starts. That strip was dead
     space: the pointer left the item before reaching the menu. Stretching the
     items closes it and gives a larger hit target at the same time. */
  .navrow > nav { align-self: stretch; display: flex; }
  .head .nav { align-items: stretch; height: 100%; }
  .head .nav > li { display: flex; align-items: stretch; }
  .head .nav .top {
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
  }
  .head .nav > li:hover .mega,
  .head .nav > li:focus-within .mega {
    transform: translateX(-50%) translateY(0);
  }

  /* Explicit widths: even columns need a known total to divide. */
  .mega-wide  { width: min(94vw, var(--measure)); }
  .mega-mid   { width: min(94vw, 760px); }
  .mega-narrow{ width: 290px; }

  /* one column per group */
  .mega-mid .mega-cols,
  .mega-wide .mega-cols {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);   /* equal, and allowed to shrink */
    gap: 0;
    align-items: start;
  }

  /* hairline between columns reads as structure, not decoration */
  .mega-mid .mega-cols > div,
  .mega-wide .mega-cols > div {
    min-width: 0;                        /* let the track actually shrink */
    padding: 0 24px;
    border-left: 1px solid var(--line);
  }
  .mega-mid .mega-cols > div:first-child,
  .mega-wide .mega-cols > div:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .mega-mid .mega-cols > div:last-child,
  .mega-wide .mega-cols > div:last-child {
    padding-right: 0;
  }

  /* Labels wrap inside their own column. Never nowrap — that is what pushed
     "Fotona® Micro Laser Peel" over the top of "Ozempic". */
  .mega a.li {
    white-space: normal;
    overflow-wrap: break-word;
    padding: 5px 0;
    line-height: 1.4;
  }
  .mega h4 {
    margin-bottom: 14px;
    line-height: 1.35;
    min-height: 2.7em;                   /* two-line headings keep rows aligned */
  }

  /* safety net: a future menu taller than the viewport scrolls inside the
     panel rather than disappearing off the bottom of the screen */
  .mega {
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
}

/* ------------------------------------------------------------
   Visually hidden utility.

   main.css never defined .screen-reader-text, so the skip link and any
   accessible-only heading render on screen. Defining it here fixes both.
   ------------------------------------------------------------ */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: 12px; left: 12px;
  width: auto; height: auto;
  padding: 12px 20px; margin: 0;
  clip: auto; clip-path: none;
  z-index: 999;
  background: var(--ink); color: var(--bone);
  font-family: "Jost", system-ui, sans-serif; font-size: 13px;
  letter-spacing: .08em;
}

/* ------------------------------------------------------------
   Trust band

   Evidence, not a marketing tile row: hairline dividers instead of boxes,
   Fraunces numerals at display size, Jost labels, and a source note under
   each figure — attribution is what makes a number credible. Marked up as a
   <dl>, not headings, so it doesn't compete with the page's real H1.
   ------------------------------------------------------------ */
.trust {
  padding: clamp(52px, 7vh, 78px) 0;
  background: var(--bone);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
/* the faintest iridescent hairline, echoing the ribbon */
.trust::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: var(--iridescence);
  background-size: 200% 100%;
  opacity: .55;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1.5s cubic-bezier(.16,.84,.28,1);
}
.trust.trust-in::before { transform: scaleX(1); }

.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
}
.trust-stat {
  padding: 0 clamp(16px, 2.4vw, 34px);
  text-align: center;
  min-width: 0;
  position: relative;

  /* resolve-into-focus: the figures arrive soft and settle into clarity,
     which is the clinic's own proposition expressed as motion — and avoids
     the digit-churn of a count-up. */
  opacity: 0;
  filter: blur(9px);
  transform: translateY(12px) scale(.985);
  transition:
    opacity 1.05s cubic-bezier(.22,.68,.24,1),
    filter 1.15s cubic-bezier(.22,.68,.24,1),
    transform 1.15s cubic-bezier(.22,.68,.24,1);
}
.trust-stat.is-in {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* the hairline draws down as its column arrives, rather than sitting there */
.trust-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: var(--line);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .9s cubic-bezier(.22,.68,.24,1) .1s;
}
.trust-stat.is-in::before { transform: scaleY(1); }
.trust-stat:first-child::before { display: none; }

.trust-stat dt {
  font-family: "Jost", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}
.trust-stat dd { margin: 0; }

.trust-figure {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 300;
  font-optical-sizing: auto;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1;
  letter-spacing: -.022em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.trust-figure .trust-star {
  font-size: .42em;
  vertical-align: .55em;
  margin-left: .12em;
  color: var(--green);
}
/* the wordmark cell carries the same weight without shouting */
.trust-figure-words {
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.45;
  letter-spacing: 0;
  padding-top: .35em;
  color: var(--ink-soft);
}

.trust-note {
  margin-top: 12px !important;
  font-family: "Jost", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-faint);
}

@media (max-width: 900px) {
  .trust-row { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .trust-stat:nth-child(odd) { border-left: 0; }
  .trust-stat:nth-child(-n+2) { padding-bottom: 0; }
}
@media (max-width: 520px) {
  .trust-row { grid-template-columns: 1fr; row-gap: 34px; }
  .trust-stat { border-left: 0; padding: 0; }
  .trust-stat + .trust-stat { padding-top: 34px; border-top: 1px solid var(--line); }
}

/* Motion is decoration here — the figures must be legible without it. */
@media (prefers-reduced-motion: reduce) {
  .trust-stat,
  .trust-stat.is-in {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
  .trust-stat::before,
  .trust-stat.is-in::before { transform: scaleY(1); transition: none; }
  .trust::before { transform: scaleX(1); transition: none; }
}

/* If scripting is disabled the <noscript> block in the partial reveals these;
   the failsafe timer in aer.js covers a script that loads but errors. */

/* ------------------------------------------------------------
   AE.R SKIN reel — real photography, cross-fading.

   Not a carousel: no dots, no arrows, no sliding. Slides cross-fade slowly so
   the band reads as one continuous image that happens to change, which suits
   a still-life shoot far better than motion would.
   ------------------------------------------------------------ */
.reel { position: relative; background: var(--ink); }
.reel-stage {
  position: relative;
  height: clamp(420px, 62vh, 720px);
  overflow: hidden;
  isolation: isolate;
}
.reel-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(.4,0,.2,1);
}
.reel-slide.is-on { opacity: 1; }
.reel-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}
/* a scrim so the copy stays legible over any frame */
.reel-veil {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(16,26,20,.30) 0%, rgba(16,26,20,0) 32%, rgba(16,26,20,.10) 60%, rgba(16,26,20,.62) 100%);
}
.reel-copy {
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: clamp(32px, 6vh, 66px);
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 32px;
  color: #fff;
}
.reel-copy .eyebrow { color: rgba(255,255,255,.82); margin-bottom: 14px; }
.reel-line {
  font-size: clamp(28px, 4.4vw, 54px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.018em;
  margin-bottom: 26px;
  text-shadow: 0 2px 40px rgba(0,0,0,.35);
}
@media (max-width: 640px) {
  .reel-stage { height: clamp(380px, 56vh, 520px); }
  .reel-copy { padding: 0 20px; }
}
/* One frame only, if motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
  .reel-slide { transition: none; }
}

/* ------------------------------------------------------------
   Memberships — tier rows with the real card, and a closing band.

   The source page is a flat run of <h2> + <p> inside .prose. aer.js lifts each
   tier into a row so its physical card sits alongside the description; the
   copy itself is untouched, so nothing changes for search engines.
   ------------------------------------------------------------ */
.tiers { display: flex; flex-direction: column; gap: clamp(28px, 4vh, 52px); margin: 8px 0 0; }
.tier {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 54px);
  align-items: center;
  padding-top: clamp(28px, 4vh, 48px);
  border-top: 1px solid var(--line);
}
.tier:first-child { border-top: 0; padding-top: 0; }
/* The card images are rectified cut-outs with their own rounded alpha, so the
   figure must not add a box behind them. drop-shadow follows the alpha; a
   box-shadow would draw a rectangle around the transparency. */
.tier-card {
  margin: 0;
  background: none;
  /* Matches the radius cut into the image: ID-1 is 3.18mm on a 53.98mm height
     = 5.89% of height, and 5.89 / 1.5857 = 3.71% of width. With overflow
     hidden the parent clips the hover sheen to exactly the card's shape, so it
     cannot paint white into the corners. */
  border-radius: 3.71% / 5.89%;
  overflow: hidden;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .26));
  transform: translateZ(0);
  transition: transform .7s var(--ease), filter .7s var(--ease);
}
.tier:hover .tier-card {
  transform: translateY(-4px);
  filter: drop-shadow(0 26px 36px rgba(0, 0, 0, .32));
}
.tier-card img { width: 100%; height: auto; display: block; }

.tier-body h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 300;
  font-size: clamp(24px, 2.9vw, 36px);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 6px;
}
.tier-price {
  font-family: "Jost", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}
.tier-body p { margin: 0 0 10px; color: var(--ink-soft); font-weight: 300; line-height: 1.7; }
/* RE:COVER has no physical card in the shoot — it spans the full width */
.tier.no-card { grid-template-columns: 1fr; }

@media (max-width: 760px) {
  .tier { grid-template-columns: 1fr; gap: 22px; }
  .tier-card { max-width: 300px; }
}

/* ---- closing band ---- */
.mband { position: relative; overflow: hidden; background: var(--ink); isolation: isolate; }
.mband-img {
  width: 100%;
  height: clamp(360px, 56vh, 640px);
  object-fit: cover;
  object-position: center 52%;
  display: block;
}
.mband-veil {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(14,22,18,.18) 0%, rgba(14,22,18,0) 40%, rgba(14,22,18,.66) 100%);
}
.mband-copy {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(28px, 5vh, 56px);
  max-width: var(--measure); margin: 0 auto; padding: 0 32px; color: #fff;
}
.mband-copy .eyebrow { color: rgba(255,255,255,.85); margin-bottom: 12px; }
.mband-line {
  font-size: clamp(26px, 3.8vw, 46px); font-weight: 300; line-height: 1.1;
  letter-spacing: -.018em; margin-bottom: 24px;
  text-shadow: 0 2px 36px rgba(0,0,0,.4);
}
@media (max-width: 640px) { .mband-copy { padding: 0 20px; } }
@media (prefers-reduced-motion: reduce) {
  .tier-card, .tier:hover .tier-card { transform: none; transition: none; }
}

/* ------------------------------------------------------------
   Shared scroll reveal — used by the tiers and by inner pages,
   which otherwise have no movement in them at all.
   ------------------------------------------------------------ */
.will-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .9s cubic-bezier(.22,.68,.24,1),
    transform .9s cubic-bezier(.22,.68,.24,1);
  transition-delay: calc(var(--i, 0) * 85ms);
}
.will-reveal.in-view { opacity: 1; transform: none; }

/* the tier rows arrive with their card a beat before the copy */
.tier.will-reveal .tier-card {
  opacity: 0;
  transform: translateY(22px) scale(.975);
  transition: opacity 1s cubic-bezier(.22,.68,.24,1), transform 1.1s cubic-bezier(.22,.68,.24,1);
  transition-delay: calc(var(--i, 0) * 85ms + 60ms);
}
.tier.will-reveal.in-view .tier-card { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .will-reveal,
  .will-reveal.in-view,
  .tier.will-reveal .tier-card,
  .tier.will-reveal.in-view .tier-card {
    opacity: 1; transform: none; transition: none;
  }
}

/* larger, sharper card now that the crops are high-resolution */
.tier { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
@media (max-width: 760px) {
  .tier { grid-template-columns: 1fr; }
  .tier-card { max-width: 100%; }
}

/* ------------------------------------------------------------
   Memberships page typography.
   Measured before changing: the title sat 144px above the first line
   (72px hero padding + 72px body padding) and the two intro paragraphs had
   0px between them.
   ------------------------------------------------------------ */
.is-memberships .page-hero { padding-bottom: 40px; }
.is-memberships .page-body { padding-top: 32px; }   /* 144px gap -> 72px */

/* the lede, then a clear break before the scope line */
.is-memberships .prose p.m-lede {
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: 34px;
}

/* "For face, hair, and body." — set as a serif italic line, not body copy */
.is-memberships .prose p.m-scope {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-optical-sizing: auto;
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 46px;
}

/* Prices: `.tier-body p` was beating `.tier-price` on specificity, so they
   rendered in muted body colour at 11px. Raised and given the green accent. */
.is-memberships .tier-body p.tier-price,
.tier-body p.tier-price {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--green);
  margin-bottom: 18px;
}

/* ------------------------------------------------------------
   Card glimmer on hover.

   Masking with the card image looked right on gold and wrong on noir and
   platinum: with mask-mode resolving to luminance rather than alpha, a dark
   card masks itself away and the sheen tears at the corners. Clipping with the
   card's own corner radius instead removes the dependency entirely.

   The radius is the one baked into the cut-out: ISO/IEC 7810 ID-1 is 3.18mm on
   a 53.98mm height = 5.89% of height, and 5.89 / 1.5857 = 3.71% of width.
   ------------------------------------------------------------ */
.tier-card { position: relative; }
.tier-card::after {
  content: "";
  position: absolute;
  inset: 1px;              /* stay strictly inside the clip, no AA fringe */
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  /* Iridescent, not white — the same spectrum the ribbon and rules use, so the
     flash belongs to the brand rather than reading as a plain gloss sweep.
     screen keeps it as light passing over metal instead of paint on top. */
  background: linear-gradient(100deg,
    rgba(255,255,255,0)   38%,
    rgba(191,233,221,.34) 44%,
    rgba(207,224,244,.46) 48%,
    rgba(228,210,242,.50) 52%,
    rgba(247,215,226,.42) 56%,
    rgba(244,233,204,.30) 60%,
    rgba(255,255,255,0)   66%);
  background-size: 300% 100%;
  background-position: 130% 0;
  mix-blend-mode: screen;
}
.tier:hover .tier-card::after,
.tier:focus-within .tier-card::after {
  animation: card-glimmer 900ms cubic-bezier(.3,.1,.3,1);
}
@keyframes card-glimmer {
  0%   { opacity: 0;   background-position: 130% 0; }
  18%  { opacity: 1; }
  100% { opacity: 0;   background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tier:hover .tier-card::after,
  .tier:focus-within .tier-card::after { animation: none; }
}


/* ============================================================
   AE.R SKIN — film moments, and the product page behind a card
   ============================================================ */

/* --- The manifesto holds, then the hero film comes up behind it ---------

   The film is a layer *under* the copy, never a replacement for it. A scrim
   sits between the two so the paragraph keeps its contrast the whole way
   through and the footage reads as something moving behind the page rather
   than a video that has taken the section over. Timing lives in aer.js. */
#manifesto .mf-film {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 1200ms cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
#manifesto.film-on .mf-film { opacity: 1; }

#manifesto .mf-film video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);          /* hides the edge as the plate drifts */
}

/* The scrim. It only has to carry the copy — everywhere else the footage
   should be plainly visible, not a rumour under a sheet of paper. So it holds
   across the left half where the paragraph sits and then falls away sharply,
   leaving the right side, where the bottles are, almost clear.

   The stops were measured rather than eyeballed: the gradient was composited
   over real frames and scored for how much film comes through against the
   contrast ratio behind the paragraph. The first attempt showed 70% of the
   film but dropped the text to 1.3:1, which is unreadable. This holds 5.4:1
   at worst — past the 4.5:1 body-text threshold — while showing 42% of the
   film, against 10% before. */
#manifesto .mf-film::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--paper) 86%, transparent) 0%,
      color-mix(in srgb, var(--paper) 76%, transparent) 50%,
      color-mix(in srgb, var(--paper) 18%, transparent) 68%,
      color-mix(in srgb, var(--paper) 3%, transparent) 100%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  #manifesto .mf-film::after {
    background: linear-gradient(100deg, rgba(237, 239, 234, .86) 0%,
                                rgba(237, 239, 234, .76) 50%,
                                rgba(237, 239, 234, .18) 68%,
                                rgba(237, 239, 234, .03) 100%);
  }
}

/* the aurora blobs would sit on top of the film and muddy it */
#manifesto.film-on .aurora { opacity: .35; transition: opacity 900ms ease; }

/* --- The science portrait becomes the film -----------------------------

   #science is a two-up: photograph on one side, copy on the other. The
   vertical AE.R film is 9:16, which is exactly the shape of that column, so
   it lives here rather than being given a band of its own. The still holds
   first, then dissolves into the footage. */
#science .si { position: relative; overflow: hidden; }

#science .si-film {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.22, .61, .36, 1);
}
#science.film-on .si-film { opacity: 1; }

#science .si-film video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The film is 9:16 and this column is not, so cover crops it vertically.
     How much survives depends on the column: about 63% of the height at two
     columns, only 52% once the layout stacks. Heads in the close-ups run from
     as high as 5% of frame down to about 50%, so the crop is pinned near the
     top — at 10% the visible window is 4%-67%, which holds every head in the
     clip. Anything nearer centre starts cutting them off. */
  object-position: 50% 10%;
  display: block;
}

/* The mark reads up the left edge of the film, the way it is set on the
   squeeze bottles. It sits over the footage, not over the photograph. */
#science .si-mark {
  position: absolute;
  left: clamp(14px, 2.2vw, 30px);
  bottom: clamp(20px, 3vw, 42px);
  z-index: 3;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 400 clamp(10px, .78vw, 12px)/1 var(--sans);
  letter-spacing: .52em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity 900ms ease 300ms;
  pointer-events: none;
}
#science.film-on .si-mark { opacity: .92; }

#science .si-sound {
  position: absolute;
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(20px, 3vw, 42px);
  z-index: 4;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(0, 0, 0, .18);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 400 10px/1 var(--sans);
  letter-spacing: .12em;
  cursor: pointer;
  opacity: 0;
  transition: opacity 700ms ease 400ms, background 200ms ease;
}
#science.film-on .si-sound { opacity: 1; }
#science .si-sound:hover { background: rgba(0, 0, 0, .36); }

/* --- Product page ------------------------------------------------------ */

.pcard { cursor: pointer; }
.pcard .stage { position: relative; }

/* a card says it opens, without shouting about it */
.pcard .peek {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translate(-50%, 6px);
  z-index: 3;
  font: 400 9px/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 320ms ease, transform 320ms ease;
  pointer-events: none;
}
.pcard:hover .peek, .pcard:focus-visible .peek { opacity: .8; transform: translate(-50%, 0); }

.pdp {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  background: rgba(28, 30, 28, 0);
  transition: background 420ms ease;
  visibility: hidden;
}
.pdp.is-open { visibility: visible; background: rgba(28, 30, 28, .46); }

.pdp-sheet {
  position: relative;
  width: min(980px, 100%);
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  transform: translateX(3%);
  opacity: 0;
  transition: transform 520ms cubic-bezier(.22, .61, .36, 1), opacity 380ms ease;
}
.pdp.is-open .pdp-sheet { transform: none; opacity: 1; }

.pdp-close {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  padding: 16px clamp(18px, 3vw, 40px) 0;
  background: linear-gradient(var(--paper) 62%, transparent);
}
.pdp-close button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 400 10px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 11px 16px;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.pdp-close button:hover { background: var(--ink); color: var(--paper); }

.pdp-body { padding: 0 clamp(18px, 3vw, 40px) clamp(60px, 8vw, 110px); }

/* gallery */
.pdp-gal { margin-bottom: clamp(26px, 4vw, 44px); }
.pdp-shot {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  overflow: hidden;
}
.pdp-shot img {
  /* All frames occupy the same box and cross-fade. Left in normal flow they
     stack down the page instead, and .pdp-shot's fixed ratio plus overflow
     clip means only the first one is ever visible. */
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity 460ms ease;
}
.pdp-shot img.is-on { opacity: 1; }
.pdp-shot img.is-photo { object-fit: cover; }

.pdp-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.pdp-thumbs button {
  flex: 0 0 auto;
  width: 74px; height: 74px;
  padding: 0;
  border: 1px solid transparent;
  background: var(--paper-2);
  cursor: pointer;
  opacity: .55;
  transition: opacity 240ms ease, border-color 240ms ease;
}
.pdp-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumbs button.is-sel { opacity: 1; border-color: var(--ink); }
.pdp-thumbs button:hover { opacity: .9; }

/* head */
.pdp-ser {
  font: 400 10px/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pdp h2 {
  font: 400 clamp(30px, 4vw, 46px)/1.06 var(--serif);
  margin: 12px 0 6px;
}
.pdp .pdp-with { color: var(--ink-soft); font-style: italic; }
.pdp-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin: 20px 0 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.pdp-price { font: 400 clamp(20px, 2.4vw, 26px)/1 var(--serif); }
.pdp-size { font: 400 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.pdp-add {
  margin-left: auto;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: 400 10px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 14px 22px;
  cursor: pointer;
}
.pdp-lede { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.66; max-width: 62ch; }

/* the detail blocks */
.pdp-block { margin-top: clamp(30px, 4vw, 48px); }
.pdp-block > h3 {
  font: 400 10px/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.pdp-actives { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.pdp-actives li {
  border: 1px solid var(--line);
  padding: 8px 13px;
  font-size: 12.5px;
  letter-spacing: .01em;
}
.pdp-inci { font-size: 12.5px; line-height: 1.82; color: var(--ink-soft); max-width: 78ch; }
.pdp-inci b { color: var(--ink); font-weight: 400; }
.pdp-note { font-size: 12px; color: var(--ink-soft); font-style: italic; margin-top: 10px; }
.pdp-dir { max-width: 62ch; line-height: 1.7; }

/* the blueprint */
.pdp-spec { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.blueprint {
  width: 100%;
  height: auto;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.blueprint text { font-family: var(--sans); fill: var(--ink-soft); }
.blueprint .bp-dim { stroke: var(--ink-soft); stroke-width: .5; }
.blueprint .bp-out { stroke: var(--ink); stroke-width: 1; fill: none; }
.blueprint .bp-ghost { stroke: var(--ink-soft); stroke-width: .5; fill: none; stroke-dasharray: 3 3; }
.blueprint .bp-fill { fill: var(--paper); }
.blueprint .bp-title { fill: var(--ink); letter-spacing: .22em; }

.pdp-table { border-top: 1px solid var(--line); }
.pdp-table div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.pdp-table dt, .pdp-table span:first-child {
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-size: 10px;
}
.pdp-table span:last-child { text-align: right; }

@media (max-width: 860px) {
  .pdp-spec { grid-template-columns: 1fr; }
  .pdp-sheet { width: 100%; }

  /* The split stacks here, which turns the film's column into a wide, short
     box — and the film is 9:16. Give it height back so the frame is cropped
     rather than reduced to a letterbox of somebody's shoulder, and pin the
     crop higher still, because only about half the frame survives. */
  #science .si { min-height: 78vh; }
  #science .si-film video { object-position: 50% 6%; }
}

@media (prefers-reduced-motion: reduce) {
  #manifesto .mf-film, #science .si-film, .pdp, .pdp-sheet,
  .pdp-shot img, .pcard .peek { transition-duration: 1ms; }
  #manifesto .mf-film video, #science .si-film video { display: none; }
}


/* --- Real Expertise: the frame keeps changing ---------------------------

   The clinic photograph cross-fades through the Real Expertise set. Two
   layers sit on top of the page's own <img> and trade places, so nothing has
   to be swapped on an element that is already showing. */
.intro-figure .cframe { position: absolute; inset: 0; overflow: hidden; }

.exp-cycle {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
/* Only the incoming frame animates. It fades up on top of the outgoing one,
   which stays fully opaque underneath until the fade has finished — so there
   is never a moment where the two together are less than opaque and the
   photograph the page shipped shows through the gap. */
.exp-cycle img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1100ms cubic-bezier(.22, .61, .36, 1);
}
.exp-cycle img.is-on { opacity: 1; }
.exp-cycle img.is-under { opacity: 1; transition: none; z-index: 0; }
.exp-cycle img.is-on { z-index: 1; }

/* the page's grade sits over whichever frame is showing */
.intro-figure .cframe .grade { z-index: 2; }

/* --- The closing band stands on the clinic interior --------------------- */
.section.clinic {
  position: relative;
  background: var(--paper);
  overflow: hidden;
}
.section.clinic .clinic-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 42%;
  z-index: 0;
}
/* A light wash, not a blackout. The previous grade sat the copy on almost
   three-quarters ink and the room disappeared behind it; this keeps the
   interior legible and lets the type sit dark on top of it. */
.section.clinic .clinic-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(237, 239, 234, .58), rgba(237, 239, 234, .78));
}
.section.clinic .wrap { color: var(--ink); }
.section.clinic .logo-w { filter: invert(1) brightness(.28); }
.section.clinic .btn { border-color: var(--ink); color: var(--ink); }
.section.clinic .wrap { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .exp-cycle img { transition-duration: 1ms; }
}


/* --- Feature stages: aligned seam, and a slideshow of the series ---------

   The feature grid shipped as 1.04fr / .96fr while the splits below it are
   1fr / 1fr, so the vertical seam moved by about 2% of the viewport between
   one section and the next. Every full-height band on this page now breaks at
   the same place. */
@media (min-width: 861px) {
  .feature { grid-template-columns: 1fr 1fr; }
}

.fstage .feat-shots {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
}
.fstage .feat-shots img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.22, .61, .36, 1);
}
.fstage .feat-shots img.is-on { opacity: 1; }

/* A render is a cut-out on a white card, not a photograph — it sits inside
   the stage rather than filling it, and keeps the ground it was drawn on. */
.fstage .feat-shots img.is-render { object-fit: contain; padding: 8%; }

/* While a photograph is up, the prism furniture built for the cut-out would
   be laid over somebody's shoulder. */
.fstage.shot-photo .prism,
.fstage.shot-photo .glow,
.fstage.shot-photo .mist,
.fstage.shot-photo .bottlewrap { opacity: 0; transition: opacity 600ms ease; }

.fstage .tagfloat { z-index: 4; }

/* which of the series is showing */
.fstage .feat-dots {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 7px;
}
.fstage .feat-dots button {
  width: 6px; height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  opacity: .22;
  cursor: pointer;
  transition: opacity 300ms ease, transform 300ms ease;
}
.fstage .feat-dots button.is-on { opacity: .78; transform: scale(1.35); }

.fcopy .ser, .fcopy h2, .fcopy p, .fcopy .priceline {
  transition: opacity 420ms ease;
}
.fcopy.swapping .ser, .fcopy.swapping h2,
.fcopy.swapping p, .fcopy.swapping .priceline { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .fstage .feat-shots img, .fcopy .ser, .fcopy h2,
  .fcopy p, .fcopy .priceline { transition-duration: 1ms; }
}


/* --- Feature bands: a control to step through the series ---------------- */
.fstage .feat-next {
  position: absolute;
  right: clamp(16px, 2.2vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 240ms ease, transform 240ms ease, border-color 240ms ease;
}
.fstage .feat-next:hover {
  background: rgba(255, 255, 255, .32);
  transform: translateY(-50%) scale(1.06);
}
.fstage .feat-next:active { transform: translateY(-50%) scale(.97); }
.fstage .feat-next svg { width: 15px; height: 15px; display: block; }

/* Over a render the stage is near-white, so a white-on-white control would
   vanish; invert it there. */
.fstage:not(.shot-photo) .feat-next {
  border-color: rgba(36, 58, 46, .38);
  background: rgba(255, 255, 255, .5);
  color: var(--ink);
}
.fstage:not(.shot-photo) .feat-next:hover { background: rgba(255, 255, 255, .82); }


/* --- Collection: a cinematic band the grid lives behind ----------------

   Seventeen cards is a long scroll for somebody who has not decided to shop
   yet, so the section opens as one wide band of the range. The grid is not
   hidden behind it in the display sense — it is genuinely underneath, and the
   band thins on hover so you can see it there. The button dissolves the band
   away entirely. */
#collection { position: relative; }

/* the products, clipped to the band's height until the band goes */
.coll-stack {
  position: relative;
  overflow: hidden;
  transition: height 900ms cubic-bezier(.22, .61, .36, 1);
}
.coll-stack > * { position: relative; z-index: 0; }

.coll-preview {
  position: absolute;
  top: 0;
  bottom: 0;
  /* edge to edge, out past the wrap's padding and max-width */
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 700ms cubic-bezier(.22, .61, .36, 1);
}
.coll-preview.is-going { opacity: 0; pointer-events: none; }

/* Hovering thins the photograph to a veil so the row of products underneath
   can actually be read, and takes the band's own words away so they are not
   sitting across the product names behind them. The button stays — it is the
   one thing still worth saying while you are looking through. */
.coll-preview .cp-shots,
.coll-preview .cp-scrim {
  transition: opacity 600ms cubic-bezier(.22, .61, .36, 1);
}
.coll-preview.is-hint .cp-shots { opacity: .14; }
.coll-preview.is-hint .cp-scrim { opacity: .10; }

.coll-preview .cp-eyebrow,
.coll-preview h3,
.coll-preview .cp-cats,
.coll-preview .cp-count {
  transition: opacity 450ms ease;
}
.coll-preview.is-hint .cp-eyebrow,
.coll-preview.is-hint h3,
.coll-preview.is-hint .cp-cats,
.coll-preview.is-hint .cp-count { opacity: 0; }

/* the inner column must not swallow clicks meant for the band */
.coll-preview .cp-inner { pointer-events: none; }
.coll-preview .cp-btn { pointer-events: auto; }

.coll-preview .cp-shots { position: absolute; inset: 0; }
.coll-stack { border: 0; }
.coll-preview .cp-shots img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1600ms cubic-bezier(.22, .61, .36, 1);
}
.coll-preview .cp-shots img.is-on { opacity: 1; z-index: 1; }
.coll-preview .cp-shots img.is-under { opacity: 1; transition: none; z-index: 0; }

.coll-preview .cp-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(20, 27, 24, .30) 0%, rgba(20, 27, 24, .62) 100%);
}

.coll-preview .cp-inner {
  position: relative;
  z-index: 3;
  text-align: center;
  color: #fff;
  padding: clamp(24px, 4vw, 54px);
  max-width: 860px;
}
.coll-preview .cp-eyebrow {
  font: 400 10px/1 var(--sans);
  letter-spacing: .36em;
  text-transform: uppercase;
  /* the house iridescence, so the way in reads as the way in */
  background: linear-gradient(96deg, #EAC7D2, #C3C9E8, #CBE3D4, #F0D9C2, #E7CBE2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.coll-preview h3 {
  font: 400 clamp(28px, 3.8vw, 50px)/1.05 var(--serif);
  margin: 14px 0 0;
  color: #fff;
}
.coll-preview h3 em {
  font-style: italic;
  background: linear-gradient(96deg, #EAC7D2, #C3C9E8, #CBE3D4, #F0D9C2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.coll-preview .cp-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: clamp(16px, 2.2vw, 26px) 0 0;
  padding: 0;
  list-style: none;
}
.coll-preview .cp-cats li {
  font: 400 10.5px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
}
.coll-preview .cp-cats li + li { position: relative; }
.coll-preview .cp-cats li + li::before {
  content: '';
  position: absolute;
  left: -13px; top: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

.coll-preview .cp-btn {
  position: relative;
  margin-top: clamp(20px, 2.6vw, 32px);
  border: 0;
  padding: 15px 32px;
  font: 400 10px/1 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  background: linear-gradient(96deg, #EAC7D2, #C3C9E8, #CBE3D4, #F0D9C2, #E7CBE2);
  background-size: 220% 220%;
  animation: cpHue 8s ease-in-out infinite;
  transition: transform 260ms ease, box-shadow 260ms ease;
  box-shadow: 0 10px 26px rgba(20, 27, 24, .28);
}
.coll-preview .cp-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(20, 27, 24, .34); }
.coll-preview.is-hint .cp-btn {
  /* against pale product cards rather than a dark photograph */
  box-shadow: 0 10px 30px rgba(20, 27, 24, .18), 0 0 0 1px rgba(36, 58, 46, .10);
}
@keyframes cpHue {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.coll-preview .cp-count {
  margin-top: 14px;
  font: 400 10px/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

@media (prefers-reduced-motion: reduce) {
  .coll-preview, .coll-preview .cp-shots img, .coll-stack { transition-duration: 1ms; }
  .coll-preview .cp-btn { animation: none; }
}

/* a size chooser, where a formula is made in more than one vessel */
.pdp-sizes { display: flex; gap: 8px; }
.pdp-sizes button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font: 400 11px/1 var(--sans);
  letter-spacing: .12em;
  padding: 9px 13px;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.pdp-sizes button.is-sel { border-color: var(--ink); color: var(--ink); }
.pdp-sizes button:hover { border-color: var(--ink); }


/* --- The bag ------------------------------------------------------------ */
.bag {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  justify-content: flex-end;
  background: rgba(28, 30, 28, 0);
  transition: background 400ms ease;
  visibility: hidden;
}
.bag.is-open { visibility: visible; background: rgba(28, 30, 28, .46); }

.bag-sheet {
  width: min(460px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  transform: translateX(4%);
  opacity: 0;
  transition: transform 480ms cubic-bezier(.22, .61, .36, 1), opacity 340ms ease;
}
.bag.is-open .bag-sheet { transform: none; opacity: 1; }

.bag-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 26px clamp(18px, 4vw, 30px) 18px;
  border-bottom: 1px solid var(--line);
}
.bag-head h2 { font: 400 clamp(20px, 2.4vw, 26px)/1 var(--serif); margin: 0; }
.bag-x, .bag-rm {
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: 400 10px/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
}
.bag-x:hover, .bag-rm:hover { color: var(--ink); }

.bag-list { flex: 1; overflow-y: auto; padding: 6px clamp(18px, 4vw, 30px); }
.bag-empty { color: var(--ink-soft); padding: 40px 0; font-size: 14px; }

.bag-line {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.bag-line img {
  width: 62px; height: 62px;
  object-fit: contain;
  background: var(--paper-2);
}
.bag-name { margin: 0; font-size: 14px; }
.bag-meta {
  margin: 5px 0 0;
  font: 400 10px/1.5 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bag-qty { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.bag-qty button {
  width: 24px; height: 24px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
.bag-qty button:hover { border-color: var(--ink); }
.bag-qty span { font-size: 13px; min-width: 12px; text-align: center; }

.bag-right { text-align: right; }
.bag-price { margin: 0 0 8px; font-size: 14px; }

.bag-foot { border-top: 1px solid var(--line); padding: 20px clamp(18px, 4vw, 30px) 26px; }
.bag-sum {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
}
.bag-sum span:first-child {
  font: 400 10px/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bag-note { margin: 8px 0 16px; font-size: 11.5px; color: var(--ink-soft); }
.bag-go {
  width: 100%;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: 400 10px/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 17px;
  cursor: pointer;
}
.bag-go:hover { opacity: .9; }
.bag-pending {
  margin-top: 16px;
  border: 1px solid var(--line);
  padding: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.bag-pending p { margin: 0 0 10px; }
.bag-pending p:last-child { margin: 0; }
.bag-order { color: var(--ink); }

.tools .cart { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .bag, .bag-sheet { transition-duration: 1ms; }
}


/* --- Before / after comparison -----------------------------------------

   A drag-to-wipe slider. It is the obvious shape for this and that is the
   point: people already know how it works, so nothing has to be explained.
   The whole frame is the control — drag anywhere, not just the handle — and
   arrow keys move it too. */
.ba { position: relative; margin: clamp(34px, 5vw, 54px) auto; }

.ba-frame {
  position: relative;
  overflow: hidden;
  background: var(--paper-2, #f2f3ef);
  cursor: ew-resize;
  touch-action: pan-y;          /* the page keeps the vertical, we take across */
  user-select: none;
  -webkit-user-select: none;
}
.ba-frame img { display: block; width: 100%; height: auto; pointer-events: none; }

/* the after sits over the before and is revealed from the left */
.ba-after { position: absolute; inset: 0; overflow: hidden; width: 50%; }
.ba-after img {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: auto;
  max-width: none;
}

.ba-line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 1px rgba(28, 36, 32, .18);
  pointer-events: none;
}
.ba-grip {
  position: absolute;
  top: 50%; left: 50%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 4px 18px rgba(28, 36, 32, .26);
  pointer-events: none;
}
.ba-grip::before, .ba-grip::after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -4.5px;
  width: 0; height: 0;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.ba-grip::before { left: 13px; border-right: 6px solid var(--ink, #22302a); }
.ba-grip::after { right: 13px; border-left: 6px solid var(--ink, #22302a); }

.ba-tag {
  position: absolute;
  bottom: 14px;
  z-index: 2;
  font: 400 9.5px/1 var(--sans, system-ui);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(28, 36, 32, .44);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 8px 12px;
  pointer-events: none;
}
.ba-tag-before { left: 14px; }
.ba-tag-after { right: 14px; }

.ba-cap { margin: 14px 0 0; font: 400 11.5px/1.6 var(--sans, system-ui); color: var(--ink-soft, #6b736e); }
.ba-frame:focus-visible { outline: 2px solid var(--ink, #22302a); outline-offset: 3px; }

/* one slow sweep the first time it comes into view, then it rests */
@media (prefers-reduced-motion: no-preference) {
  .ba-ease .ba-after { transition: width 1500ms cubic-bezier(.4, 0, .2, 1); }
  .ba-ease .ba-line, .ba-ease .ba-grip { transition: left 1500ms cubic-bezier(.4, 0, .2, 1); }
}



/* The fold also runs on AE.R SKIN, whose stylesheet defines none of
   --ease, --green, --green-deep, --ink-faint or --iridescence, so every
   colour below carries its fallback. */
/* ── Folded sections ───────────────────────────────────────────────────────
   The homepage carried three bands that each ran more than a screen of
   links: the menu, the conditions and the Instagram wall. Each now shows
   its head and one band of what is inside, and opens when the pointer is
   over it.

   Nothing is removed. The markup is untouched and every link is still in
   the document — the band is clipped, not emptied — so a crawler and a
   reader without a mouse both see the whole thing (the cue is a real
   button, and focus inside the band opens it). */
.fold .fold-body {
  position: relative;
  overflow: hidden;
  max-height: var(--peek, 240px);
  -webkit-mask-image: linear-gradient(#000 calc(100% - var(--fade, 84px)), transparent);
  mask-image: linear-gradient(#000 calc(100% - var(--fade, 84px)), transparent);
  transition: max-height .62s var(--ease, cubic-bezier(.2, .7, .2, 1));
}
.fold.is-open .fold-body {
  -webkit-mask-image: none;
  mask-image: none;
}

/* the cue sits under the section's standfirst and carries the state */
.fold-cue {
  /* AE.R SKIN's stylesheet has no button reset, so this carries its own —
     otherwise the cue renders as a grey bevelled system button there */
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-family: "Jost", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-faint, #7E8C82);
  transition: color .3s var(--ease, cubic-bezier(.2, .7, .2, 1));
}
.fold-cue:hover,
.fold.is-open .fold-cue { color: var(--green-deep, #3C5645); }
.fold-cue i {
  position: relative;
  width: 25px;
  height: 25px;
  border: 1px solid var(--line, #D9DDD1);
  border-radius: 50%;
  transition: transform .45s var(--ease, cubic-bezier(.2, .7, .2, 1)), border-color .3s var(--ease, cubic-bezier(.2, .7, .2, 1));
}
/* The plus carries the brand's iridescence rather than the text colour —
   the horizontal stroke shows the whole spectrum across its width, the
   upright drifts through it. */
.fold-cue i::before,
.fold-cue i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background-size: 200% 100%;
  animation: drift 9s linear infinite;
  transition: opacity .3s var(--ease, cubic-bezier(.2, .7, .2, 1));
}
.fold-cue i::before {
  width: 11px; height: 2px; margin: -1px 0 0 -5.5px;
  background-image: var(--iridescence, linear-gradient(112deg, #BFE9DD 0%, #CFE0F4 24%, #E4D2F2 48%, #F7D7E2 70%, #F4E9CC 88%, #CFE0F4 100%));
}
.fold-cue i::after {
  width: 2px; height: 11px; margin: -5.5px 0 0 -1px;
  background-image: linear-gradient(158deg, var(--ir-1, #BFE9DD) 0%, var(--ir-2, #CFE0F4) 24%,
                    var(--ir-3, #E4D2F2) 48%, var(--ir-4, #F7D7E2) 70%, var(--ir-5, #F4E9CC) 88%, var(--ir-2, #CFE0F4) 100%);
}
.fold.is-open .fold-cue i { border-color: var(--green, #5F7A64); }
/* the plus loses its upright and becomes a minus */
.fold.is-open .fold-cue i::after { opacity: 0; }

/* What is revealed arrives rather than appearing. --d is the item's own
   delay in milliseconds, set where the band is built so the cascade
   follows the reading order: down each column, columns one after another. */
@keyframes foldIn {
  from { opacity: 0; transform: translateY(13px); }
  to   { opacity: 1; transform: none; }
}
.fold.is-open .fold-item,
.fold.is-open .panel.active .fold-item {
  animation: foldIn .52s var(--ease, cubic-bezier(.2, .7, .2, 1)) both;
  animation-delay: calc(var(--d, 0) * 1ms);
}

@media (prefers-reduced-motion: reduce) {
  .fold .fold-body { transition: none; }
  .fold.is-open .fold-item,
  .fold.is-open .panel.active .fold-item { animation: none; }
  .fold-cue i { transition: none; }
}

/* ── The questions, tightened and moved to the end ─────────────────────────
   They are the last thing anybody needs and they were sitting in the
   middle of the page at full display size. */
.faq-tight { padding: 76px 0; }
.faq-tight .section-head { margin-bottom: 30px; }
.faq-tight .section-head h2 { font-size: clamp(26px, 3vw, 36px); }
.faq-tight .faq { max-width: 820px; }
.faq-tight .faq-q {
  padding: 16px 4px;
  gap: 18px;
  font-size: clamp(16px, 1.7vw, 18.5px);
}
.faq-tight .faq-q .pm { font-size: 18px; }
.faq-tight .faq-a p { padding: 0 4px 18px; font-size: 15px; }

/* ══ Concierge and opt-in ═══════════════════════════════════════════════════
   Both of these ride on every page, including aer-skin.html, whose stylesheet
   declares its own palette and does not carry --bone or --iridescence. So the
   whole component resolves its own tokens once, here, with a literal fallback
   behind every var(). Nothing below reaches for a variable that might not
   exist on the page it lands on. */
.aer-cx, .aer-optin {
  --cx-ink:   var(--ink, #16271E);
  --cx-soft:  var(--ink-soft, #44564B);
  --cx-faint: var(--ink-faint, #7E8C82);
  --cx-line:  var(--line, #D9DDD1);
  /* aer-skin.html's sheet keeps its own palette, in which --mist is a mid
     green-grey rather than the near-white it is everywhere else; --paper-3 is
     that page's white and does not exist elsewhere. Ask for both, in order. */
  --cx-paper: var(--paper-3, var(--mist, #FBFCFA));
  --cx-tint:  var(--bone-2, #E8ECE3);
  --cx-green: var(--green-deep, #3C5645);
  --cx-sans:  "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cx-serif: "Fraunces", Georgia, serif;
  --cx-ease:  var(--ease, cubic-bezier(.2, .7, .2, 1));
  --cx-r:     var(--r, 2px);
  --cx-irid:  var(--iridescence, linear-gradient(112deg, #BFE9DD 0%, #CFE0F4 24%,
              #E4D2F2 48%, #F7D7E2 70%, #F4E9CC 88%, #CFE0F4 100%));
}
/* Neither stylesheet on this site ships one, and both fixtures label a field
   that already carries a placeholder. */
.cx-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes cxDrift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes cxRise  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── the concierge ───────────────────────────────────────────────────────── */
.aer-cx {
  position: fixed;
  right: clamp(14px, 2.2vw, 26px);
  /* the opt-in band publishes its height while it is up, so the launcher
     rides above it instead of sitting on the subscribe field */
  bottom: calc(clamp(14px, 2.2vw, 26px) + var(--optin-h, 0px));
  transition: bottom .3s cubic-bezier(.4, 0, .2, 1);
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: var(--cx-sans);
}

/* The launcher is the site's own dark button, not a floating glass bubble. */
.cx-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--cx-r);
  background: var(--cx-ink);
  color: var(--bone, #F1F3EE);
  cursor: pointer;
  box-shadow: 0 6px 20px -8px rgba(22, 39, 30, .4);
  transition: background .3s var(--cx-ease), transform .3s var(--cx-ease);
}
.cx-launch:hover { background: var(--cx-green); transform: translateY(-1px); }
.cx-launch svg { width: 19px; height: 19px; flex: none; }
.aer-cx.is-open .cx-launch { display: none; }

.cx-panel {
  position: relative;
  display: none;
  flex-direction: column;
  width: min(392px, calc(100vw - 28px));
  height: min(580px, calc(100vh - 130px));
  background: var(--cx-paper);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r);
  box-shadow: 0 30px 70px -30px rgba(22, 39, 30, .38);
  overflow: hidden;
}
.aer-cx.is-open .cx-panel { display: flex; animation: cxRise .42s var(--cx-ease) both; }
/* the iridescent hairline the rest of the site uses to open a surface */
.cx-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--cx-irid);
  background-size: 200% 100%;
  animation: cxDrift 14s linear infinite;
}

.cx-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 22px 16px;
  border-bottom: 1px solid var(--cx-line);
}
.cx-head h2 {
  margin: 7px 0 0;
  font: 300 22px/1.05 var(--cx-serif);
  letter-spacing: -.015em;
  color: var(--cx-ink);
}
.cx-eyebrow {
  margin: 0;
  font: 500 10px/1 var(--cx-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cx-faint);
}
.cx-x {
  border: 0;
  background: none;
  padding: 4px 0 0;
  cursor: pointer;
  font: 400 10px/1 var(--cx-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cx-faint);
  transition: color .25s var(--cx-ease);
}
.cx-x:hover { color: var(--cx-ink); }

.cx-log {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
}
.cx-msg {
  max-width: 84%;
  padding: 12px 15px;
  border-radius: var(--cx-r);
  font-size: 14.5px;
  line-height: 1.62;
  animation: cxRise .4s var(--cx-ease) both;
}
.cx-msg p { margin: 0 0 9px; }
.cx-msg p:last-child { margin: 0; }
.cx-msg a { color: var(--cx-green); border-bottom: 1px solid currentColor; }
.cx-them {
  align-self: flex-start;
  background: var(--cx-tint);
  color: var(--cx-ink);
}
.cx-you {
  align-self: flex-end;
  background: var(--cx-ink);
  color: var(--bone, #F1F3EE);
}
.cx-you a { color: inherit; }

/* what the concierge points at: pages and products, same card either way */
.cx-cards {
  align-self: stretch;
  display: grid;
  gap: 8px;
  animation: cxRise .4s var(--cx-ease) both;
}
.cx-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 13px;
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-r);
  background: #fff;
  transition: border-color .25s var(--cx-ease), transform .25s var(--cx-ease);
}
.cx-card:hover { border-color: var(--cx-ink); transform: translateX(3px); }
.cx-card img {
  width: 42px;
  height: 52px;
  object-fit: cover;
  flex: none;
  background: var(--cx-tint);
}
.cx-card-t { min-width: 0; }
.cx-card b {
  display: block;
  font: 400 13.5px/1.35 var(--cx-sans);
  color: var(--cx-ink);
}
.cx-card i {
  display: block;
  margin-top: 3px;
  font: 400 10px/1 var(--cx-sans);
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cx-faint);
}
.cx-card em { margin-left: auto; font-style: normal; font-size: 13px; color: var(--cx-soft); }

/* the openers, in the same shape as the concern chips on the homepage */
.cx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 22px 0;
}
.cx-chip {
  border: 1px solid var(--cx-line);
  border-radius: 40px;
  background: #fff;
  padding: 8px 15px;
  font: 400 12.5px/1 var(--cx-sans);
  color: var(--cx-soft);
  cursor: pointer;
  transition: all .28s var(--cx-ease);
}
.cx-chip:hover {
  border-color: transparent;
  color: var(--cx-ink);
  background: var(--cx-irid);
  background-size: 200% 100%;
  animation: cxDrift 8s linear infinite;
}

.cx-compose {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 22px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cx-ink);
}
.cx-compose input {
  flex: 1;
  border: 0;
  background: none;
  font: 400 14.5px/1.4 var(--cx-sans);
  color: var(--cx-ink);
  padding: 0;
}
.cx-compose input::placeholder { color: var(--cx-faint); }
.cx-compose input:focus { outline: none; }
.cx-send {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: 500 11px/1 var(--cx-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cx-faint);
  transition: color .25s var(--cx-ease);
}
.cx-send:hover, .cx-compose input:not(:placeholder-shown) ~ .cx-send { color: var(--cx-ink); }

.cx-note {
  margin: 0;
  padding: 11px 22px 16px;
  font: 400 11px/1.55 var(--cx-sans);
  color: var(--cx-faint);
}
.cx-note a { color: var(--cx-soft); border-bottom: 1px solid var(--cx-line); }

/* thinking */
.cx-dots { display: inline-flex; gap: 4px; }
.cx-dots i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cx-faint);
  animation: cxBlink 1.1s infinite;
}
.cx-dots i:nth-child(2) { animation-delay: .16s; }
.cx-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes cxBlink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

@media (max-width: 560px) {
  .aer-cx { left: 14px; align-items: stretch; }
  .cx-panel { width: 100%; height: min(560px, calc(100vh - 110px)); }
  .cx-launch { align-self: flex-end; }
}

/* ── the opt-in bar ──────────────────────────────────────────────────────────
   The live site runs this as a full-width band along the bottom edge that
   slides up four seconds in and stays gone for thirty days once dismissed.
   Same band, same timing, same words — set in the type this site uses. */
.aer-optin {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  border-top: 1px solid var(--cx-ink);
  background: linear-gradient(45deg, #dce7ff 0%, #ebefdd 50%, #e3d9f2 100%);
  color: var(--cx-ink);
  font-family: var(--cx-sans);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.aer-optin.is-up { transform: none; }
/* One line: the offer, the field and the button side by side, so the band
   takes a strip off the bottom of the window rather than a block of it. */
.optin-in {
  max-width: var(--measure, 1240px);
  margin: 0 auto;
  padding: 13px 58px 13px 32px;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}
.optin-in p {
  margin: 0;
  flex: 0 1 auto;
  font: 300 clamp(13.5px, 1.25vw, 15.5px)/1.4 var(--cx-sans);
}
.optin-form {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 260px;
  max-width: 400px;
  border-bottom: 1px solid var(--cx-ink);
  padding-bottom: 4px;
}
.optin-form input {
  flex: 1;
  border: 0;
  background: none;
  padding: 0;
  font: 300 14.5px/1.4 var(--cx-sans);
  color: var(--cx-ink);
}
.optin-form input::placeholder { color: rgba(22, 39, 30, .45); }
.optin-form input:focus { outline: none; }
.optin-form button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  font: 500 11.5px/1 var(--cx-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cx-ink);
  transition: opacity .25s var(--cx-ease);
}
.optin-form button:hover { opacity: .6; }
.optin-x {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--cx-ink);
  line-height: 0;
}
.optin-x svg { width: 15px; height: 15px; }
.optin-said { margin: 0; flex: 1 1 260px; font-size: 14px; }

@media (max-width: 760px) {
  .optin-in {
    display: block;
    padding: 14px 46px 16px 20px;
  }
  .optin-form { margin-top: 10px; max-width: none; }
  .optin-said { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .aer-optin { transition: none; }
  .aer-cx.is-open .cx-panel, .cx-msg, .cx-cards { animation: none; }
  .cx-panel::before, .cx-chip:hover { animation: none; }
}

/* ── The header row, taken in ──────────────────────────────────────────────
   The row was 76px carrying a 24px mark. Both come down together so the
   proportion holds: the row loses 12px, the mark 15%. Nothing else in the
   header is sized off either — the nav items stretch to whatever the row
   is, and the mega panel hangs off its bottom edge — so this is the whole
   change. */
.navrow { height: 64px; }
.brand { height: 22px; }
.brand img { height: 20.4px; }          /* 24 × 0.85 */

/* ── The concierge button, unplated ────────────────────────────────────────
   No ground behind it, so the mark has to hold on its own over whatever is
   underneath — the dark hero film at the top of the page, bone further
   down. The halo does that work: a tight white edge separates the stroke
   from dark footage, and on a pale section it simply disappears into it.

   It also moves in off the right edge. At rest it sat on top of the hero's
   vertical coordinates, which run up the last 32–51px of the window. */
.cx-launch {
  width: 44px;
  height: 44px;
  margin-right: clamp(44px, 4.5vw, 62px);
  background: none;
  color: var(--cx-ink);
  box-shadow: none;
}
.cx-launch:hover {
  background: none;
  color: var(--cx-green);
  transform: translateY(-1px);
}
.cx-launch svg {
  width: 27px;
  height: 27px;
  stroke-width: 1.15;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .95))
          drop-shadow(0 1px 7px rgba(255, 255, 255, .75));
}
/* The inset is on the button alone, not on .aer-cx, so the panel still opens
   against the edge of the window: it is a surface rather than a mark, and
   60-odd pixels of margin beside a 392px card would just be a hole. */

/* ── The comparison band ───────────────────────────────────────────────────
   Where a page carries more than one view of the same result, they sit side
   by side under the copy rather than replacing it. */
.ba-band {
  margin-top: clamp(34px, 5vw, 56px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line, #DEE2D9);
}
.ba-band h2 {
  margin: 0;
  font: 300 clamp(24px, 3vw, 34px)/1.12 "Fraunces", Georgia, serif;
  letter-spacing: -.015em;
}
.ba-note {
  margin: 14px 0 0;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft, #46554B);
}
.ba-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 38px);
  align-items: flex-start;
  margin-top: clamp(20px, 3vw, 32px);
}
.ba-row .ba { flex: 1 1 300px; margin: 0; }
.ba-view {
  margin: 0 0 10px;
  font: 400 10px/1 "Jost", system-ui, sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-faint, #7E8C82);
}

/* ── The traced line ───────────────────────────────────────────────────────
   The contour runs exactly along the boundary between a dark background and
   lit skin, so a single stroke of any one colour vanishes into one side of
   it. A dark line underneath carries the white dashes across both. */
.ba-trace {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  fill: none;
}
.ba-trace-under {
  stroke: rgba(12, 18, 14, .55);
  stroke-width: 4;
  stroke-linecap: round;
}
.ba-trace-over {
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2 5.5;
}

/* ══ Treatment pages ═══════════════════════════════════════════════════════
   One layout for every treatment and condition page, filled from the live
   site's own content by tools/treatment_pages.py. Reading order: what it
   looks like and what it is, the facts at a glance, what it does and what
   people ask, then results. */
.trt { padding-top: clamp(40px, 6vh, 72px); }
.trt-wrap {
  max-width: var(--measure, 1240px);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
}
.trt h2 {
  margin: 0 0 18px;
  font: 300 clamp(24px, 2.6vw, 32px)/1.1 "Fraunces", Georgia, serif;
  letter-spacing: -.015em;
  color: var(--ink);
}

/* ── media and About ── */
.trt-top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}
.trt-media { margin: 0; position: sticky; top: 90px; }
.trt-slides { list-style: none; margin: 0; padding: 0; }
.trt-slide {
  border-radius: var(--r, 2px);
  overflow: hidden;
  background: var(--bone-2, #E8ECE3);
}
.trt-slide + .trt-slide { margin-top: 12px; }
.trt-slide img, .trt-slide video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: cover;
  background-size: cover;
}
.trt-slide video { background: #111; object-fit: contain; }
/* once the gallery script runs, one slide shows at a time */
.trt-media.is-live .trt-slide { display: none; margin-top: 0; }
.trt-media.is-live .trt-slide.is-on { display: block; animation: trtIn .45s var(--ease) both; }
@keyframes trtIn { from { opacity: 0; } to { opacity: 1; } }

.trt-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.trt-thumb {
  position: relative;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r, 2px);
  overflow: hidden;
  background: var(--bone-2, #E8ECE3);
  cursor: pointer;
  opacity: .62;
  transition: opacity .25s var(--ease), border-color .25s var(--ease);
}
.trt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trt-thumb:hover, .trt-thumb.is-on { opacity: 1; border-color: var(--ink); }
.trt-play {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; margin: -8px 0 0 -5px;
  border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
}

/* the space for media, where a page has none yet */
.trt-media--empty .trt-slot {
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: var(--r, 2px);
  background: var(--mist, #FBFCFA);
}
.trt-slot-k {
  font: 500 10.5px/1 "Jost", system-ui, sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.trt-slot-v { font: 300 clamp(20px, 2.2vw, 26px)/1.2 "Fraunces", Georgia, serif; color: var(--ink-soft); }

.trt-intro .aer-treatment-meta { margin-top: 0; }
.trt-tag {
  margin: 18px 0 10px;
  font: 500 11px/1.3 "Jost", system-ui, sans-serif;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--green);
}
.trt-intro h2 { margin-top: 14px; }
.trt-rich { color: var(--ink-soft); font-size: 16.5px; line-height: 1.78; font-weight: 300; }
.trt-rich p { margin: 0 0 1em; }
.trt-rich p:last-child { margin-bottom: 0; }
.trt-rich strong { color: var(--ink); font-weight: 500; }
.trt-rich ul, .trt-rich ol { margin: 0 0 1em; padding-left: 1.15em; }
.trt-rich li { margin: .25em 0; }
.trt-rich a { color: var(--green-deep); border-bottom: 1px solid currentColor; }
.trt-book { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.trt-book-note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-faint); max-width: 52ch; }

/* ── at a glance ── */
.trt-glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  margin: clamp(48px, 7vw, 84px) 0 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r, 2px);
  overflow: hidden;
}
.trt-cell { background: var(--bone); padding: 22px 22px 24px; }
.trt-cell--wide { grid-column: span 2; }
.trt-cell dt {
  font: 500 10px/1.3 "Jost", system-ui, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.trt-cell dd { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink); }

/* ── benefits and questions ── */
.trt-two {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 76px);
  margin-top: clamp(48px, 7vw, 84px);
  align-items: start;
}
.trt-two > :only-child { grid-column: 1 / -1; }
/* Benefits on its own (no questions beside it) sets its list in two columns,
   so the lines keep a readable length across the full width. */
.trt-two > .trt-benefits:only-child ul { column-count: 2; column-gap: clamp(32px, 5vw, 76px); }
.trt-two > .trt-benefits:only-child li { break-inside: avoid; border-top: 0; border-bottom: 1px solid var(--line); }
.trt-benefits ul { list-style: none; margin: 0; padding: 0; }
.trt-benefits li {
  position: relative;
  padding: 14px 0 14px 30px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.trt-benefits li:last-child { border-bottom: 1px solid var(--line); }
.trt-benefits li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 21px;
  width: 12px;
  height: 2px;
  background: var(--iridescence, linear-gradient(90deg, #BFE9DD, #E4D2F2));
}
.trt-q { border-top: 1px solid var(--line); }
.trt-q:last-child { border-bottom: 1px solid var(--line); }
.trt-q summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 2px;
  cursor: pointer;
  font: 300 clamp(17px, 1.7vw, 19.5px)/1.35 "Fraunces", Georgia, serif;
  color: var(--ink);
}
.trt-q summary::-webkit-details-marker { display: none; }
.trt-q summary::after {
  content: "+";
  flex: none;
  font: 300 20px/1 "Jost", system-ui, sans-serif;
  color: var(--green);
  transition: transform .3s var(--ease);
}
.trt-q[open] summary::after { transform: rotate(45deg); }
.trt-a { padding: 0 2px 20px; }
.trt-a p { margin: 0 0 .9em; font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); font-weight: 300; }
.trt-a p:last-child { margin-bottom: 0; }

.trt-section { margin-top: clamp(48px, 7vw, 84px); max-width: 76ch; }

/* ── results ── */
.trt-results, .trt-gallery { margin-top: clamp(56px, 8vw, 96px); }
.trt-gallery .trt-media { position: static; max-width: 560px; }
.trt-pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.trt-pair { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.trt-pair-side { position: relative; background: var(--bone-2); overflow: hidden; border-radius: var(--r, 2px); }
.trt-pair-side img { display: block; width: 100%; height: auto; background-size: cover; }
.trt-pair-k {
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  padding: 6px 9px;
  font: 500 9.5px/1 "Jost", system-ui, sans-serif;
  letter-spacing: .2em; text-transform: uppercase;
  color: #fff; background: rgba(20, 28, 24, .55);
}
/* a pair the script has turned into a wipe slider */
.trt-pair.is-slider { display: block; }

/* ── a registered comparison as the lead image ── */
.trt-lead .ba { margin: 0 auto; }
.trt-lead .ba-note { max-width: 46ch; margin-inline: auto; text-align: center; }

@media (max-width: 900px) {
  .trt-top, .trt-two { grid-template-columns: 1fr; }
  .trt-two > .trt-benefits:only-child ul { column-count: 1; }
  .trt-media { position: static; }
  .trt-cell--wide { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .trt-media.is-live .trt-slide.is-on { animation: none; }
}

/* ── the text column beside the media ──────────────────────────────────────
   One ordered column: what it is, then the facts, then the booking. */
.trt-intro > h2 + .trt-rich { margin-top: 0; }
.trt-intro > .trt-rich + h2 { margin-top: clamp(30px, 3.4vw, 42px); }
/* the opening paragraph leads */
.trt-lede > p:first-child {
  font-size: clamp(17.5px, 1.5vw, 19.5px);
  line-height: 1.62;
  color: var(--ink);
}
.trt-rich ul { list-style: none; padding-left: 0; }
.trt-rich ul li { position: relative; padding-left: 20px; }
.trt-rich ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .82em;
  width: 9px;
  height: 1.5px;
  background: var(--green);
}
/* the facts, stacked label over value beside the media */
.trt-glance--side {
  display: block;
  margin: clamp(30px, 3.4vw, 42px) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.trt-glance--side .trt-cell {
  display: grid;
  grid-template-columns: minmax(130px, 34%) 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  background: none;
  border-bottom: 1px solid var(--line);
}
.trt-glance--side .trt-cell dd { margin: 0; font-size: 15.5px; }
.trt-glance--side + .trt-book { border-top: 0; padding-top: 0; }
/* short text beside a tall picture: keep the column level with the picture */
.trt-top > .trt-intro { position: sticky; top: 90px; }
@media (max-width: 900px) {
  .trt-top > .trt-intro { position: static; }
  .trt-glance--side .trt-cell { grid-template-columns: 1fr; gap: 6px; }
}

/* ── where the reader is, in the menu ── */
.mega a.li.is-current {
  color: var(--ink);
  padding-left: 12px;
  position: relative;
}
.mega a.li.is-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 1.5px;
  background: var(--green);
}
.mobile .mbody a.is-current { color: var(--green-deep); font-weight: 500; }


/* ── AE.R SKIN image bands: the incoming frame of a crossfade ── */
.bg-fade {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1100ms cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.bg-fade.is-in { opacity: 1; }
.bg-fade.snap { transition: none; }

/* ── the collection, once open, can be closed again ── */
.coll-close {
  display: flex;
  justify-content: center;
  margin-top: clamp(30px, 4vw, 52px);
}
.coll-close[hidden] { display: none; }
.coll-close .cp-btn--close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid var(--ink, #22302A);
  border-radius: 999px;
  background: transparent;
  color: var(--ink, #22302A);
  font: 500 11px/1 "Jost", system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.coll-close .cp-btn--close::after {
  content: "";
  width: 7px;
  height: 7px;
  border-left: 1.4px solid currentColor;
  border-top: 1.4px solid currentColor;
  transform: rotate(45deg) translate(1px, 1px);
}
.coll-close .cp-btn--close:hover { background: var(--ink, #22302A); color: #fff; }

/* ── AE.R SKIN: two text boxes in one frame, changing with the picture ──
   The stack takes over the place a single panel had — bottom left, above the
   photograph — and both boxes sit in the same cell, bottom-aligned, so a
   shorter one does not jump up the frame when the text changes. */
.is-merged .pstack {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: end;
  justify-items: start;
  margin: 0 0 7vh clamp(20px, 5vw, 64px);
}
.is-merged .pstack > .panel {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: none;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
/* the incoming text waits a little into the picture's fade */
.is-merged .pstack > .panel.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity .7s ease .25s, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .is-merged .pstack > .panel, .is-merged .pstack > .panel.is-on { transition: none; }
}

/* The label inside these frames is the page's own eyebrow. `.band2 .panel p`
   and `.cine .panel p` set every paragraph in the box as a 30px italic quote,
   and out-rank `.eyebrow`, so "Howe Sound · Gangwon-do" rendered in that size
   with eyebrow letter-spacing and wrapped onto four lines. These are the
   values page-aer-skin.css gives .eyebrow everywhere else on the page. */
.band2 .panel p.eyebrow,
.cine .panel p.eyebrow {
  font-family: var(--wide, "Jost", system-ui, sans-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--sage, #6E7E6B);
  margin-bottom: 14px;
}

/* ============================================================
   About pages — Our Story, Our Team, Location, Contact, Journal,
   Community (tools/about_pages.py). Each opens on a photograph set edge
   to edge and run up under the header, as the homepage does; titles in
   Tenso capitals, as aerskinlab.com sets them.
   ============================================================ */
.ab { background: var(--bone); color: var(--ink); }
.ab-wrap { max-width: var(--measure); margin: 0 auto; padding-inline: clamp(20px, 4vw, 32px); }
.ab-label {
  font-family: var(--tenso); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 18px;
}
.ab-label--gap { margin-top: 44px; }
.ab-inline {
  font-family: var(--tenso); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.ab-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--tenso); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 26px; border-radius: 999px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--bone); cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.ab-btn:hover { background: transparent; color: var(--ink); }
.ab-btn--ghost { background: transparent; color: var(--ink); }
.ab-btn--ghost:hover { background: var(--ink); color: var(--bone); }
.ab-btn--light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .8); }
.ab-btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* the opening photograph */
.ab-hero {
  position: relative; height: 92svh; min-height: 560px; max-height: 1080px;
  overflow: hidden; background: #0d1210; color: #fff; isolation: isolate;
}
.ab-hero-media, .ab-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-hero-media img {
  object-fit: cover; background-size: cover;
  animation: abDrift 24s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes abDrift {
  from { transform: scale(1.09); opacity: 0; }
  8%   { opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}
.ab-hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 17, 13, .5) 0%, rgba(10, 17, 13, 0) 26%,
                              rgba(10, 17, 13, 0) 44%, rgba(10, 17, 13, .66) 100%);
}
.ab-hero-copy {
  position: absolute; left: 0; right: 0; bottom: clamp(40px, 9vh, 96px);
  max-width: var(--measure); margin: 0 auto; padding-inline: clamp(20px, 4vw, 32px);
  animation: abRise 1.4s .25s var(--ease) both;
}
@keyframes abRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.ab-crumbs {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--tenso); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.ab-crumbs a { color: inherit; }
.ab .ab-title {
  font-family: var(--tenso); font-weight: 300; text-transform: uppercase;
  letter-spacing: .04em; font-size: clamp(40px, 7.4vw, 112px); line-height: .95;
  margin: 18px 0 0; max-width: none; color: #fff; text-shadow: 0 2px 40px rgba(0, 0, 0, .25);
}
.ab-sub {
  font-family: var(--tenso); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  margin: 20px 0 0; color: rgba(255, 255, 255, .86);
}

/* About beside a picture */
.ab-split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 7vw, 110px); align-items: center; padding-block: clamp(80px, 12vw, 160px);
}
.ab-split-media { margin: 0; }
.ab-split-media img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: cover; background-size: cover; }
.ab-lede {
  font-family: "Fraunces", Georgia, serif; font-weight: 300; letter-spacing: -.01em;
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.3; color: var(--ink); margin: 0 0 28px;
}
.ab-split-copy > p:not([class]), .ab-words > p:not([class]) {
  font-size: 17px; line-height: 1.8; color: var(--ink-soft); max-width: 60ch; margin: 0 0 18px;
}
.ab-links { display: flex; flex-wrap: wrap; gap: 30px; margin: 40px 0 0; }
.ab-links a {
  font-family: var(--tenso); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 3px;
}

/* three rooms, edge to edge */
.ab-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ab-strip figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bone-2); }
.ab-strip img {
  width: 100%; height: 100%; object-fit: cover; background-size: cover; display: block;
  transition: transform 1.4s var(--ease);
}
.ab-strip figure:hover img { transform: scale(1.04); }

/* a closing line over a photograph */
.ab-band {
  position: relative; min-height: min(80vh, 780px); display: grid; place-items: center;
  overflow: hidden; color: #fff; background: #111; isolation: isolate;
}
.ab-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; z-index: -2; }
.ab-band-shade { position: absolute; inset: 0; background: rgba(10, 17, 13, .32); z-index: -1; }
.ab-band-copy { text-align: center; padding: 48px 24px; max-width: 920px; }
.ab-band-line {
  font-family: var(--tenso); font-weight: 300; text-transform: uppercase; letter-spacing: .06em;
  font-size: clamp(26px, 3.6vw, 52px); line-height: 1.15; margin: 0 0 36px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .25);
}

/* team */
.ab-team { padding-block: clamp(70px, 9vw, 130px); }
.ab-people {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(34px, 3.4vw, 52px) clamp(16px, 2vw, 28px);
}
.ab-person-open {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: center; cursor: pointer;
}
.ab-person-open.is-static { cursor: default; }
.ab-person-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.ab-person-frame { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bone-2); }
.ab-person-frame img {
  display: block; width: 100%; height: 100%; object-fit: cover; background-size: cover;
  transition: transform 1.2s var(--ease);
}
.ab-person-open:not(.is-static):hover img { transform: scale(1.035); }
.ab-person-more {
  position: absolute; left: 14px; bottom: 14px; padding: 8px 12px;
  font-family: var(--tenso); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: rgba(10, 17, 13, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.ab-person-open:hover .ab-person-more,
.ab-person-open:focus-visible .ab-person-more { opacity: 1; transform: none; }
@media (hover: none) { .ab-person-more { opacity: 1; transform: none; } }
.ab-person-label { font-family: "Jost", sans-serif; font-style: italic; font-size: 13.5px; color: var(--ink-faint); margin: 18px 0 5px; }
.ab .ab-person-name {
  font-family: var(--tenso); font-weight: 400; font-size: 15px; letter-spacing: .08em;
  text-transform: uppercase; margin: 0; color: var(--ink); line-height: 1.3;
}

/* a person's bio */
.ab-bio {
  /* main.css zeroes every margin; a modal dialog centres itself on auto */
  margin: auto;
  border: 0; padding: 0; width: min(1000px, 92vw); max-width: none; max-height: 88vh;
  background: var(--bone); color: var(--ink); border-radius: 2px; overflow: hidden;
}
.ab-bio::backdrop { background: rgba(10, 17, 13, .58); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ab-bio[open] { animation: abRise .5s var(--ease) both; }
.ab-bio-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); max-height: 88vh; }
.ab-bio-pic { min-height: 0; }
.ab-bio-pic img { display: block; width: 100%; height: 100%; max-height: 88vh; object-fit: cover; background-size: cover; }
.ab-bio-text { padding: clamp(30px, 4.4vw, 60px); overflow: auto; max-height: 88vh; }
.ab .ab-bio-text h2, .ab-bio-text h2 {
  font-family: var(--tenso); font-weight: 400; text-transform: uppercase; letter-spacing: .06em;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; margin: 0 0 12px; color: var(--ink);
}
.ab-bio-creds { font-family: var(--tenso); font-size: 12px; letter-spacing: .12em; color: var(--ink-faint); margin: 0; }
.ab-bio-role { font-style: italic; color: var(--ink-soft); margin: 6px 0 26px; }
.ab-bio-body p:not([class]) { font-size: 16px; line-height: 1.8; color: var(--ink-soft); margin: 0 0 16px; }
.ab-bio-text .ab-btn { margin-top: 18px; }
.ab-bio-close {
  position: absolute; top: 8px; right: 12px; z-index: 1; width: 44px; height: 44px;
  font-size: 30px; line-height: 1; background: none; border: 0; color: var(--ink); cursor: pointer;
}

/* location */
.ab-visit {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px); padding-block: clamp(80px, 11vw, 150px); align-items: stretch;
}
.ab-address {
  font-family: "Fraunces", Georgia, serif; font-weight: 300;
  font-size: clamp(26px, 2.6vw, 36px); line-height: 1.25; margin: 0;
}
.ab-hours { margin: 0; }
.ab-hours div { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ab-hours div:first-child { border-top: 1px solid var(--line); }
.ab-hours dt { font-size: 16px; color: var(--ink-soft); }
.ab-hours dd { margin: 0; font-family: var(--tenso); font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; }
.ab-note { margin: 22px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.ab-contact-lines { display: flex; flex-direction: column; gap: 6px; margin: 26px 0 0; font-size: 16px; }
.ab-contact-lines a { color: var(--ink); }
.ab-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 36px 0 0; }
.ab-map { position: relative; min-height: 440px; background: var(--bone-2); }
.ab-map iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  filter: grayscale(1) contrast(1.04);
}

/* contact: dark, after the sign */
.ab-dark { background: #0E1512; color: #EEF1EA; padding-block: clamp(80px, 10vw, 140px); }
.ab-dark .ab-label { color: rgba(238, 241, 234, .55); }
.ab-dark a { color: inherit; }
.ab-contact-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(56px, 7vw, 96px); border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.ab-big { font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: clamp(20px, 2vw, 27px); line-height: 1.45; margin: 0 0 16px; }
.ab-dark .ab-hours div { border-color: rgba(255, 255, 255, .14); }
.ab-dark .ab-hours dt { color: rgba(238, 241, 234, .72); }
.ab-contact-form {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px); padding-top: clamp(56px, 7vw, 96px); align-items: start;
}
.ab-field { display: block; margin: 0 0 28px; }
.ab-field span {
  display: block; font-family: var(--tenso); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(238, 241, 234, .6);
}
.ab-field input, .ab-field textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 12px 0;
  background: transparent; color: #fff; font: 17px/1.5 "Jost", sans-serif;
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, .34); border-radius: 0; outline: none;
  transition: border-color .3s var(--ease);
}
.ab-field textarea { resize: vertical; min-height: 140px; }
.ab-field input:focus, .ab-field textarea:focus { border-bottom-color: #fff; }
.ab-field.is-missing input, .ab-field.is-missing textarea { border-bottom-color: #F4B8B8; }
.ab-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; margin: 10px 0 0; }
.ab-form-note { margin: 22px 0 0; font-size: 15px; line-height: 1.6; color: rgba(238, 241, 234, .78); }
.ab-contact-pic { margin: 0; }
.ab-contact-pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background-size: cover; }

/* journal */
.ab-journal { padding-block: clamp(70px, 9vw, 130px); }
.ab-post a { display: block; color: inherit; height: 100%; }
.ab-post-pic { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bone-2); }
.ab-post-pic img { display: block; width: 100%; height: 100%; object-fit: cover; background-size: cover; transition: transform 1.2s var(--ease); }
.ab-post a:hover .ab-post-pic img { transform: scale(1.04); }
.ab-post-copy { padding-top: 20px; }
.ab-post time { font-family: var(--tenso); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.ab .ab-post h2 {
  font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: 23px; line-height: 1.25;
  letter-spacing: -.005em; margin: 10px 0 12px; color: inherit; max-width: none;
}
.ab-post p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 18px; }
.ab-post--feature a { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: #0E1512; color: #EEF1EA; }
.ab-post--feature .ab-post-pic { aspect-ratio: auto; min-height: 480px; }
.ab-post--feature .ab-post-copy { padding: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.ab .ab-post--feature h2 { font-size: clamp(28px, 2.8vw, 40px); }
.ab-post--feature p { color: rgba(238, 241, 234, .74); }
.ab-post--feature time { color: rgba(238, 241, 234, .6); }
.ab-posts { display: grid; gap: clamp(34px, 3.4vw, 52px) clamp(18px, 2vw, 28px); margin-top: clamp(40px, 5vw, 64px); }
.ab-posts--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-posts--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ab-posts--four h2 { font-size: 20px !important; }
.ab-posts--four p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ab .ab-rule {
  font-family: var(--tenso); font-weight: 400; text-transform: uppercase; letter-spacing: .12em;
  font-size: 14px; color: var(--ink); margin: clamp(80px, 9vw, 120px) 0 0; padding: 22px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: none;
}
.ab-center { text-align: center; margin: clamp(56px, 6vw, 80px) 0 0; }

/* community */
.ab-words { max-width: 880px; padding-block: clamp(80px, 10vw, 140px) clamp(40px, 5vw, 64px); }
.ab-charities { padding-bottom: clamp(90px, 11vw, 150px); }
.ab-marks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ab-marks li {
  background: #fff; aspect-ratio: 3 / 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px; padding: 28px; text-align: center;
}
.ab-mark { height: 96px; display: flex; align-items: center; justify-content: center; }
.ab-mark img {
  max-height: 96px; max-width: min(240px, 100%); width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: .82; transition: filter .6s var(--ease), opacity .6s var(--ease);
}
.ab-marks li:hover .ab-mark img { filter: none; opacity: 1; }
.ab-mark-name { font-family: var(--tenso); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

@media (max-width: 1080px) {
  .ab-people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-posts--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ab-split, .ab-visit, .ab-contact-form, .ab-post--feature a, .ab-bio-grid { grid-template-columns: 1fr; }
  .ab-contact-cols, .ab-posts--three { grid-template-columns: 1fr; }
  .ab-marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-map { min-height: 340px; }
  .ab-post--feature .ab-post-pic { min-height: 0; aspect-ratio: 16 / 10; }
  .ab-bio-pic img { max-height: 42vh; object-position: 50% 20%; }
  .ab-bio-grid, .ab-bio-text { max-height: none; }
  .ab-bio { overflow: auto; }
}
@media (max-width: 680px) {
  .ab-hero { height: 78svh; min-height: 480px; }
  .ab-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-strip { grid-template-columns: 1fr; }
  .ab-strip figure { aspect-ratio: 3 / 2; }
  .ab-posts--four { grid-template-columns: 1fr; }
  .ab-marks li { aspect-ratio: auto; padding: 32px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-hero-media img, .ab-hero-copy, .ab-bio[open] { animation: none; }
}

/* The footer's single column at phone width was `1fr`, whose minimum is its
   longest unbreakable line; on a 320px phone that was 25px wider than the
   room, and the whole page widened by 3px. minmax(0, 1fr) lets it fit. */
@media (max-width: 680px) {
  footer .fgrid { grid-template-columns: minmax(0, 1fr); }
  footer .fgrid * { overflow-wrap: anywhere; }
}

/* Homepage reviews: the waiting reviews sit 48px to the right, ready to slide
   in, and on a phone that pushed past the screen edge and widened the page by
   16px. Clipped sideways only — `clip` makes no scroll box. */
.rrot { overflow-x: clip; }

/* ============================================================
   Shop pages — the ten categories, All Products and the Gift Card
   (tools/shop_pages.py). A short opening photograph, the categories,
   then the products.
   ============================================================ */
.sh { background: var(--bone); color: var(--ink); }
.sh-wrap { max-width: var(--measure); margin: 0 auto; padding-inline: clamp(20px, 4vw, 32px); }
.sh-label { font-family: var(--tenso); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px; }
.sh-label--gap { margin-top: 32px; }

.sh-hero {
  position: relative; height: clamp(320px, 46vh, 520px); overflow: hidden;
  background: #0d1210; color: #fff; isolation: isolate;
}
.sh-hero-media, .sh-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sh-hero-media img { object-fit: cover; background-size: cover; }
.sh-hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 17, 13, .48) 0%, rgba(10, 17, 13, .05) 40%, rgba(10, 17, 13, .6) 100%);
}
.sh-hero-copy {
  position: absolute; left: 0; right: 0; bottom: clamp(26px, 5vh, 52px);
  max-width: var(--measure); margin: 0 auto; padding-inline: clamp(20px, 4vw, 32px);
}
.sh-crumbs {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--tenso); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.sh-crumbs a { color: inherit; }
.sh .sh-title {
  font-family: var(--tenso); font-weight: 300; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(32px, 5vw, 68px); line-height: 1; margin: 14px 0 0; max-width: none; color: #fff;
}
.sh-count {
  font-family: var(--tenso); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  margin: 12px 0 0; color: rgba(255, 255, 255, .82);
}

.sh-cats {
  display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 26px 0;
  border-bottom: 1px solid var(--line); margin-bottom: clamp(28px, 4vw, 44px);
}
.sh-cats a {
  font-family: var(--tenso); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.sh-cats a:hover { color: var(--ink); }
.sh-cats a.is-on { color: var(--ink); border-bottom-color: var(--ink); }

.sh-brands { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(26px, 3vw, 38px); }
.sh-brands a {
  font-family: var(--tenso); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.sh-brands a:hover { border-color: var(--ink); color: var(--ink); }
.sh-brands a.is-on { background: var(--ink); border-color: var(--ink); color: var(--bone); }

.sh-grid {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(34px, 3.4vw, 52px) clamp(16px, 2vw, 28px);
}
.sh-item[hidden] { display: none; }
.sh-item a { display: block; color: inherit; height: 100%; }
.sh-shot {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: #fff; margin-bottom: 18px;
}
.sh-shot img {
  display: block; width: 100%; height: 100%; object-fit: contain; background-size: cover;
  box-sizing: border-box; transition: transform 1.2s var(--ease);
}
/* a photograph, not a product on a sweep: it fills the tile */
.sh-shot--fill img { object-fit: cover; }
.sh-item a:hover .sh-shot img { transform: scale(1.04); }
.sh-noshot { display: block; width: 100%; height: 100%; background: var(--bone-2); }
.sh-out {
  position: absolute; left: 12px; top: 12px; padding: 6px 10px;
  font-family: var(--tenso); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(10, 17, 13, .78); color: #fff;
}
.sh-brand { display: block; font-family: var(--tenso); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.sh-name { display: block; font-size: 16px; line-height: 1.4; margin: 7px 0 6px; color: var(--ink); }
.sh-price { display: block; font-family: var(--tenso); font-size: 13.5px; letter-spacing: .06em; color: var(--ink-soft); }
.sh-price s { color: var(--ink-faint); margin-right: 6px; }

.sh-note {
  margin: clamp(48px, 6vw, 80px) 0 clamp(70px, 9vw, 120px);
  padding-top: 26px; border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.7; color: var(--ink-faint);
}
.sh-note a { color: var(--ink-soft); border-bottom: 1px solid var(--line); }

.sh-btn {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
  font-family: var(--tenso); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 26px; border-radius: 999px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--bone);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.sh-btn:hover { background: transparent; color: var(--ink); }

/* gift card */
.sh-wrap--cats { padding-bottom: 0; }
.sh-gift { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.sh-gift-pic { margin: 0; background: #fff; }
/* one large shot: it fills its frame rather than sitting in a white border */
.sh-gift-pic img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.sh .sh-gift-copy h2 {
  font-family: var(--tenso); font-weight: 300; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(28px, 3vw, 44px); line-height: 1.05; margin: 0 0 14px; max-width: none; color: var(--ink);
}
.sh-gift-price { font-family: "Fraunces", Georgia, serif; font-weight: 300; font-size: clamp(20px, 2vw, 26px); margin: 0 0 22px; color: var(--ink-soft); }
.sh-gift-copy p:not([class]) { font-size: 16px; line-height: 1.8; color: var(--ink-soft); max-width: 56ch; }
.sh-amounts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sh-amounts li {
  font-family: var(--tenso); font-size: 12.5px; letter-spacing: .06em;
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; color: var(--ink-soft);
}

@media (max-width: 1080px) { .sh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sh-gift { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the shop landing page */
.sh-head { max-width: 62ch; margin: 0 0 clamp(28px, 3.4vw, 44px); }
.sh-head--gap { margin-top: clamp(70px, 9vw, 120px); }
.sh .sh-head h2 {
  font-family: "Fraunces", Georgia, serif; font-weight: 300; letter-spacing: -.015em;
  font-size: clamp(26px, 3vw, 40px); line-height: 1.15; margin: 0; color: var(--ink); max-width: none;
}
.sh-lede { font-size: 17px; line-height: 1.75; color: var(--ink-soft); margin: 16px 0 0; }
.sh-lede a { color: var(--ink); border-bottom: 1px solid var(--line); }
.sh-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sh-tile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 26px 24px; background: var(--mist, #FBFCFA); border: 1px solid var(--line);
  color: var(--ink); transition: background .3s var(--ease), color .3s var(--ease);
}
.sh-tile span { font-family: var(--tenso); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.sh-tile em { font-style: normal; font-size: 12px; color: var(--ink-faint); }
.sh-tile:hover { background: var(--ink); color: var(--bone); }
.sh-tile:hover em { color: rgba(241, 243, 238, .7); }
@media (max-width: 900px) { .sh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sh-tiles { grid-template-columns: 1fr; } }

/* The introducing ribbon carries the AE.R SKIN wordmark itself rather than
   the words set in the page's own face. It is drawn as a mask filled with the
   ribbon's ink, so it matches the type beside it exactly and follows the
   smaller size on a phone; the ratio is the artwork's own, 852 × 134. */
.skin-ribbon .skin-mark {
  display: inline-block;
  flex: none;               /* the ribbon is a flex row: never squash the mark */
  height: .82em;
  width: 5.21em;            /* .82em × 852/134 */
  vertical-align: -.06em;
  background: currentColor;
  -webkit-mask: url("/assets/img/img-95922a3e.png") center / contain no-repeat;
          mask: url("/assets/img/img-95922a3e.png") center / contain no-repeat;
}

/* Why AE.R: two photographs rather than one — the cartons and the shelf —
   staggered so the column reads as a spread. Both are 2:3, the shape the
   frames are cut to, so neither is cropped. */
.intro-figure--pair {
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.4vw, 18px);
  align-items: start;
}
.intro-figure--pair figure { margin: 0; overflow: hidden; border-radius: var(--r, 2px); }
.intro-figure--pair figure:first-child { margin-top: clamp(28px, 5vw, 64px); }
.intro-figure--pair img {
  display: block; width: 100%; height: auto; aspect-ratio: 2 / 3;
  object-fit: cover; background-size: cover;
}

/* a hosted Instagram widget draws itself: it takes the grid's place rather
   than sitting inside its columns */
.moments-clean.has-widget { display: block; }
.moments-clean .moments-widget { width: 100%; }