/* ============================================================
   MEETING THE UNIVERSE — Core Design Tokens
   Colors + Typography foundations and semantic styles.
   Import this file, or copy the :root block into your project.
   ============================================================ */

/* ----- Webfonts (Google Fonts) -----
   Cormorant Garamond — editorial display serif (the "voice")
   Hanken Grotesk      — quiet workhorse sans (the "body" / UI)
   Libre Caslon Text   — optional warm reading serif for body copy
   If self-hosting, drop woff2 files in /fonts and swap these. */

:root {
  /* ---------- COLOR · paper & ink ---------- */
  --paper:        #FFFFFF;   /* MAIN canvas — pure white, carries all text */
  --paper-2:      #F6F1E8;   /* warm cream — alternating sections, quiet wells */
  --white:        #FFFFFF;   /* cards & fields (lifted by hairline + shadow) */
  --sand:         #EFE7D9;   /* deeper warm well, behind cream */
  --ink:          #1C1714;   /* warm near-black — primary text */
  --ink-2:        #544C44;   /* muted warm grey — secondary text */
  --ink-3:        #8A8076;   /* faint — captions, meta, placeholders */

  /* ---------- COLOR · crimson (the one accent) ---------- */
  --crimson:      #C0322A;   /* confident crimson — primary accent */
  --crimson-deep: #861E1B;   /* wine — hover / pressed / depth */
  --crimson-tint: #F3E4DF;   /* blush — accent backgrounds, wells */
  --crimson-line: #E4C9C2;   /* soft crimson hairline */

  /* ---------- COLOR · WhatsApp green (single utility accent) ---------- */
  --whatsapp:      #1EA75C;   /* refined emerald — WhatsApp action */
  --whatsapp-deep: #15803F;   /* hover / pressed */

  /* ---------- COLOR · lines & shadow ---------- */
  --line:         #E7DFD2;   /* default warm hairline border */
  --line-strong:  #D6CBB9;   /* stronger divider */
  --shadow-sm:    0 1px 2px rgba(28,23,20,.05);
  --shadow-md:    0 12px 32px -12px rgba(28,23,20,.14);
  --shadow-lg:    0 30px 70px -28px rgba(28,23,20,.22);

  /* ---------- TYPE · families ---------- */
  --serif:  'Libre Caslon Text', Georgia, 'Times New Roman', serif; /* @kind font */
  --sans:   'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* @kind font */

  /* ---------- TYPE · fluid display scale ----------
     Tuned for easy reading: large on desktop, never small on mobile.
     Body sits at ~20px and grows; nothing drops below ~16px. */
  --t-hero:    clamp(3.6rem, 8.5vw, 7.5rem);   /* @kind font */
  --t-display: clamp(2.9rem, 5.6vw, 4.8rem);   /* @kind font */
  --t-h1:      clamp(2.4rem, 3.8vw, 3.3rem);   /* @kind font */
  --t-h2:      clamp(1.9rem, 2.6vw, 2.4rem);   /* @kind font */
  --t-h3:      clamp(1.4rem, 1.8vw, 1.6rem);   /* @kind font */
  --t-lead:    clamp(1.35rem, 1.4vw, 1.6rem);  /* @kind font */
  --t-body:    clamp(1.18rem, 1.1vw, 1.3rem);  /* @kind font */
  --t-small:   1.0625rem;                       /* @kind font */
  --t-eyebrow: 0.8125rem;                        /* @kind font */

  /* ---------- SPACE · 4px base ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px;
  --maxw: 1180px;                /* content container @kind spacing */
  --gutter: clamp(24px, 7vw, 128px); /* @kind spacing */

  /* ---------- RADIUS · sharp, architectural ---------- */
  --r-0: 0px;    /* default — corners stay crisp */
  --r-1: 2px;    /* inputs, the gentlest softening */
  --r-2: 4px;    /* the maximum we ever go */
  --r-pill: 999px; /* reserved ONLY for the round logo lockup badge */

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.22,.61,.36,1); /* @kind other */
  --dur:  .5s; /* @kind other */
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ============================================================ */
.mtu-hero, .mtu-display, .mtu-h1, .mtu-h2 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}
.mtu-hero    { font-size: var(--t-hero);    line-height: 0.98; letter-spacing: -0.02em; }
.mtu-display { font-size: var(--t-display); line-height: 1.0; }
.mtu-h1      { font-size: var(--t-h1);      line-height: 1.06; }
.mtu-h2      { font-size: var(--t-h2);      line-height: 1.1; }
.mtu-h3      { font-family: var(--sans); font-weight: 600; font-size: var(--t-h3);
               letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); margin: 0; }

/* italic display = the reflective, intimate register */
.mtu-italic { font-style: italic; font-weight: 400; }

.mtu-lead {
  font-family: var(--sans); font-weight: 400; font-size: var(--t-lead);
  line-height: 1.55; color: var(--ink-2); letter-spacing: 0; margin: 0;
  text-wrap: pretty;
}
.mtu-body {
  font-family: var(--sans); font-weight: 400; font-size: var(--t-body);
  line-height: 1.7; color: var(--ink-2); margin: 0; text-wrap: pretty;
}
.mtu-small { font-family: var(--sans); font-size: var(--t-small); line-height: 1.6; color: var(--ink-2); }

/* eyebrow / kicker — uppercase tracked label, the workhorse signpost */
.mtu-eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: var(--t-eyebrow);
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--crimson);
  display: inline-flex; align-items: center; gap: var(--s-3); margin: 0;
}
.mtu-eyebrow--ink { color: var(--ink-3); }

/* numeral index, e.g. "01 / 06" used in section headers */
.mtu-index { font-family: var(--sans); font-weight: 500; font-size: var(--t-eyebrow);
             letter-spacing: 0.14em; color: var(--ink-3); font-variant-numeric: tabular-nums; }

a { color: inherit; text-decoration: none; }

/* ============================================================
   Component styles
   ============================================================ */
/* ============================================================
   Meeting the Universe — Website UI Kit
   Component styles. Tokens come from ../../colors_and_type.css
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Libre Caslon Text', Georgia, serif;
  -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
button { font-family: var(--sans); cursor: pointer; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(48px, 7.8vw, 106px); }

/* ---------- shared atoms ---------- */
.eyebrow { font-family: var(--sans); font-weight: 600; font-size: var(--t-eyebrow); text-transform: uppercase;
  letter-spacing: .22em; color: var(--crimson); display: inline-flex; align-items: center;
  gap: 14px; margin: 0; }
.eyebrow::before { content: ""; width: 30px; height: 1.5px; background: currentColor; }
.eyebrow--center { justify-content: center; }
.eyebrow--mute { color: var(--ink-3); }

.serif { font-family: var(--serif); }
.ital { font-style: italic; }
.accent { color: var(--crimson); }
.h-display { font-family: var(--serif); font-weight: 500; font-size: var(--t-display);
  line-height: 1.02; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
/* CTA headline (door/contact bands) — same .h-display, modestly smaller; last line in crimson via .accent */
.cta-display { font-size: clamp(2.2rem, 3.3vw, 2.85rem); }
.h-1 { font-family: var(--serif); font-weight: 500; font-size: var(--t-h1); line-height: 1.06;
  letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.lead { font-family: 'Libre Caslon Text', Georgia, serif; font-size: var(--t-lead); line-height: 1.62; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.body { font-family: 'Libre Caslon Text', Georgia, serif; font-size: var(--t-body); line-height: 1.8; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.idx { font-variant-numeric: tabular-nums; font-size: var(--t-eyebrow); letter-spacing: .14em;
  color: var(--ink-3); font-weight: 500; }

.star { color: var(--crimson); flex: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; padding: 17px 32px; border: 1.5px solid transparent;
  border-radius: 0; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn .ar { transition: transform .35s var(--ease); }
.btn:hover .ar { transform: translateX(4px); }
.btn--primary { background: var(--crimson); color: #fff; }
.btn--primary:hover { background: var(--crimson-deep); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--ghost-light:hover { background: #fff; color: var(--crimson); border-color: #fff; }
.btn--whatsapp { background: var(--whatsapp); color: #fff; text-decoration: none; }
.btn--whatsapp:hover { background: var(--whatsapp-deep); }
.btn__wa { width: 20px; height: 20px; flex: none; }

/* ---------- avatar (initials circle) ---------- */
.avatar { width: 44px; height: 44px; border-radius: 999px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--crimson-tint); color: var(--crimson-deep); font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.avatar--lg { width: 90px; height: 90px; font-size: 26px; }
.avatar--sm { width: 38px; height: 38px; font-size: 12.5px; }
.avatar--photo { object-fit: cover; }
.tlink { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 0; font-family: var(--sans); white-space: nowrap;
  color: var(--crimson); font-weight: 600; font-size: var(--t-small); letter-spacing: .02em;
  border-bottom: 1.5px solid var(--crimson-line); transition: border-color .3s var(--ease); }
.tlink .ar { transition: transform .3s var(--ease); }
.tlink:hover { border-bottom-color: var(--crimson); }
.tlink:hover .ar { transform: translateX(4px); }
.tlink--back { font-weight: 700; margin-bottom: clamp(24px, 3.6vw, 43px); }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .4s var(--ease),
  border-color .4s var(--ease); border-bottom: 1px solid transparent; }
.hdr.scrolled { background: rgba(250,247,242,.85); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; }
.brand__mark { width: 26px; height: 26px; color: var(--crimson); }
.brand__name { font-family: var(--serif); font-weight: 500; font-size: 21px; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.brand__name em { font-style: italic; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav__link { background: none; border: 0; padding: 6px 0; font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: var(--ink-2); position: relative; transition: color .25s var(--ease); }
.nav__link:hover { color: var(--ink); }
.nav__link.active { color: var(--crimson); }
.nav__link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--crimson); }
.nav__cta { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: #fff; background: var(--crimson); border: 0; padding: 12px 22px; transition: background .3s var(--ease); }
.nav__cta:hover { background: var(--crimson-deep); }

/* desktop Offerings dropdown */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link--has-sub { display: inline-flex; align-items: center; gap: 5px; }
.nav__caret { font-size: 11px; line-height: 1; margin-top: 2px; opacity: .6; }
.dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 14px;
  min-width: 264px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-md);
  padding: 8px; display: none; flex-direction: column; z-index: 60; }
.nav__item:hover .dropdown { display: flex; }
.dropdown::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.dropdown__item { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
  background: none; border: 0; padding: 11px 14px; cursor: pointer; transition: background .2s var(--ease); }
.dropdown__item:hover { background: var(--paper-2); }
.dropdown__label { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.dropdown__note { font-family: var(--sans); font-size: 12px; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; }

/* mobile hamburger */
.burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px;
  background: none; border: 0; cursor: pointer; padding: 0; }
.burger span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 0 auto;
  transition: transform .3s var(--ease), opacity .25s var(--ease); }
.burger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger--open span:nth-child(2) { opacity: 0; }
.burger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.drawer { display: none; overflow: hidden; max-height: 0; background: var(--white); border-bottom: 1px solid var(--line);
  transition: max-height .4s var(--ease); }
.drawer--open { max-height: 460px; }
.drawer__nav { display: flex; flex-direction: column; padding: 12px var(--gutter) 28px; }
.drawer__link { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line); padding: 18px 0; cursor: pointer;
  font-family: var(--sans); font-size: 19px; font-weight: 600; color: var(--ink); }
.drawer__note { font-size: 12.5px; font-weight: 500; letter-spacing: .04em; color: var(--crimson); text-transform: uppercase; }
.drawer__cta { margin-top: 22px; padding: 16px; text-align: center; justify-content: center; }

/* ---------- hero ---------- */
.hero { position: relative; padding-top: 148px; padding-bottom: clamp(38px,4.8vw,65px); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px,6vw,96px); align-items: center; position: relative; }
.hero__copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.hero__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 3.6vw, 3.3rem); line-height: 1.06;
  letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.hero__title em { font-style: italic; color: var(--crimson); }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__media { position: relative; }
.hero__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; max-height: 560px; }
.hero__cap { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px;
  background: var(--paper); padding: 9px 14px; }
.hero__cap .st { width: 14px; height: 14px; color: var(--crimson); }
.hero__cap span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); white-space: nowrap; }

/* meta strip under hero */
.metastrip { display: flex; gap: 40px; flex-wrap: wrap; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); padding: 22px 0; }
.metastrip__i { display: flex; flex-direction: column; gap: 4px; }
.metastrip__i .k { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.metastrip__i .v { font-family: var(--serif); font-size: 22px; color: var(--ink); }

/* ---------- section header ---------- */
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 43px; }
.shead__l { display: flex; flex-direction: column; gap: 22px; max-width: 960px; }
.shead--center { flex-direction: column; align-items: center; text-align: center; }
.shead--center .shead__l { align-items: center; }

/* ---------- intro / about block ---------- */
.intro { background: var(--paper-2); }
.intro__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px,6vw,104px); align-items: center; }
.intro__media { position: relative; }
.intro__media img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.intro__media .frame { position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--crimson-line); z-index: -1; }
.intro__copy { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
/* signature — a real, humble pen-hand, set small and quiet (Tweaks: choose the hand) */
.signature { font-family: 'Caveat', cursive; font-weight: 600; font-style: normal; font-size: 2.25rem;
  line-height: 1; color: var(--ink); margin: 0; transform: rotate(-2.5deg); transform-origin: left center; }
[data-sign="sacramento"] .signature { font-family: 'Sacramento', cursive; font-weight: 400; font-size: 2.7rem; transform: rotate(-2deg); }
[data-sign="serif"] .signature { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 22px; color: var(--crimson); transform: none; margin-top: 28px; }

/* ---------- offerings ---------- */
.offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.offers--four { grid-template-columns: repeat(2, 1fr); }
.offers--three { grid-template-columns: repeat(3, 1fr); }
.offer { background: var(--paper); border: 1px solid var(--line); padding: 52px 48px; display: flex; flex-direction: column; gap: 22px;
  min-height: 300px; transition: background .4s var(--ease), box-shadow .4s var(--ease); position: relative; text-align: left; }
.offer:hover { background: var(--white); box-shadow: var(--shadow-md); }
.offer__top { display: flex; align-items: center; justify-content: space-between; }
.offer__num { font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--crimson); line-height: 1; }
.offer__star { width: 22px; height: 22px; color: var(--crimson); opacity: 0; transform: rotate(-12deg) scale(.8);
  transition: opacity .4s var(--ease), transform .4s var(--ease); }
.offer:hover .offer__star { opacity: 1; transform: rotate(0) scale(1); }
.offer__title { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.04; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.offer__kicker { font-family: var(--sans); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--crimson); font-weight: 600; margin: 0 0 6px; }
.offer__desc { font-size: 1.0625rem; line-height: 1.62; color: var(--ink-2); margin: 0; flex: 1; }
.offer__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--line); }
.offer__meta { font-family: var(--sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.offer__go { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--crimson); display: inline-flex; gap: 7px; align-items: center; }
.offer__go .ar { transition: transform .35s var(--ease); }
.offer:hover .offer__go .ar { transform: translateX(4px); }

/* ---------- filter chips ---------- */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { font-family: var(--sans); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  padding: 10px 18px; border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--paper);
  transition: all .3s var(--ease); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- quote / crimson field ---------- */
.quote { position: relative; background: var(--crimson); color: #fff; overflow: hidden; }
/* --- floral motif backdrop (white linework over crimson; chosen via Tweaks) --- */
.qb-motif { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  pointer-events: none; user-select: none; opacity: .24; }
[data-motif="lotus"]    .qb-motif { width: min(680px, 72%); opacity: .30; }
[data-motif="magnolia"] .qb-motif { width: min(1160px, 94%); opacity: .26; }
[data-motif="lily"]     .qb-motif { width: auto; height: min(580px, 155%); opacity: .26; }
[data-motif="lavender"] .qb-motif { width: auto; height: min(640px, 170%); opacity: .30; }
[data-motif="mandala"]  .qb-motif { width: min(640px, 72%); opacity: .24; }
.quote__in { position: relative; max-width: 880px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 34px; }
.quote__t { font-family: 'Courgette', 'Brush Script MT', cursive; font-weight: 400; font-style: normal; font-size: clamp(1.9rem,3.6vw,3rem);
  line-height: 1.35; margin: 0; text-wrap: balance; }
.quote__by { font-family: var(--sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #F3D9D4; font-weight: 600; }

/* ---------- writings ---------- */
.posts { display: flex; flex-direction: column; }
.post { display: grid; grid-template-columns: 130px 1fr auto; gap: 32px; align-items: baseline;
  padding: 40px 0; border-top: 1px solid var(--line); text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; transition: padding-left .35s var(--ease); }
.post:last-child { border-bottom: 1px solid var(--line); }
.post:hover { padding-left: 12px; }
.post__date { font-family: var(--sans); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.post__main { display: flex; flex-direction: column; gap: 10px; }
.post__title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem,2.4vw,2.1rem); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); margin: 0; transition: color .3s var(--ease); }
.post:hover .post__title { color: var(--crimson); }
.post__ex { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 560px; }
.post__arrow { color: var(--crimson); font-size: 20px; transition: transform .35s var(--ease); }
.post:hover .post__arrow { transform: translate(4px,-4px); }
.post__tag { font-family: var(--sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--crimson); font-weight: 600; }

/* ---------- article ---------- */
.article { padding-top: 140px; }
.article__head { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.article__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem,5vw,4rem); line-height: 1.03; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.article__hero { margin: clamp(40px,6vw,72px) 0; }
.article__hero img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }
.prose { max-width: 660px; margin: 0 auto; }
.prose p { font-family: 'Libre Caslon Text', Georgia, serif; font-size: 1.32rem; line-height: 1.9; color: var(--ink); margin: 0 0 1.7em; }
.prose .pull { font-family: 'Libre Caslon Text', Georgia, serif; font-style: italic; font-size: 1.9rem; line-height: 1.3; color: var(--ink); border-left: 2px solid var(--crimson); padding-left: 28px; margin: 1.6em 0; text-wrap: balance; }

/* ---------- contact ---------- */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,96px); align-items: start; }
.contact__copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.form { display: flex; flex-direction: column; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }
.field input, .field textarea, .field select { font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line-strong); border-radius: 2px; padding: 14px 15px;
  outline: none; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); width: 100%; }
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--crimson); box-shadow: 0 0 0 3px var(--crimson-tint); }
.form__note { font-family: var(--sans); font-size: 13.5px; color: var(--ink-3); }
.thanks { background: var(--paper-2); border: 1px solid var(--line); padding: 56px 40px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px; }
.thanks__star { width: 44px; height: 44px; color: var(--crimson); }

/* ---------- newsletter ---------- */
.newsletter { padding-block: clamp(34px, 4.8vw, 62px); }
.newsletter--cream { background: var(--paper-2); }
.newsletter--ink { background: var(--ink); }
.newsletter--blush { background: var(--crimson-tint); }
.newsletter__in { max-width: 728px; margin: 0 auto; padding-inline: 24px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.newsletter__star { width: 30px; height: 30px; color: var(--crimson); margin-bottom: 22px; }
.newsletter__in .eyebrow { margin-bottom: 18px; }
.newsletter__title { font-size: clamp(1.85rem, 3.2vw, 2.7rem); line-height: 1.12; margin: 0 0 16px; }
.newsletter--ink .newsletter__title { color: var(--paper); }
.newsletter .signup { width: 100%; max-width: none; }
.newsletter__copy { font-size: 1.12rem; line-height: 1.65; color: var(--ink-2); margin: 0 0 32px; max-width: 46ch; }
.newsletter--ink .newsletter__copy { color: #C9C0B5; }

.signup { display: flex; gap: 12px; width: 100%; max-width: 600px; }
.signup__fields { display: flex; gap: 12px; flex: 1; min-width: 0; }
.signup__fields input { flex: 1; }
.signup input { min-width: 0; font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line-strong); border-radius: 2px; padding: 15px 16px;
  outline: none; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.signup input::placeholder { color: var(--ink-3); }
.signup input:focus { border-color: var(--crimson); box-shadow: 0 0 0 3px var(--crimson-tint); }
.signup .btn { flex: none; }
@media (max-width: 600px) {
  .signup { flex-direction: column; }
  .signup .btn { width: 100%; justify-content: center; }
}
.signup__thanks { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 1.3rem; color: var(--ink); }
.signup__thanks--ink { color: var(--paper); }
.signup__thanksstar { width: 22px; height: 22px; color: var(--crimson); flex: none; }

/* slide-up popup — base state is VISIBLE; entrance via JS-toggled class so it
   never stays stuck hidden if transitions don't run (print/offscreen/reduced-motion) */
.npop { position: fixed; left: 24px; bottom: 24px; z-index: 200; width: 720px; max-width: calc(100vw - 48px);
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  overflow: hidden; opacity: 1; transform: none;
  display: flex; align-items: stretch;
  transition: opacity .45s var(--ease), transform .5s var(--ease); }
.npop--closing { opacity: 0; transform: translateY(125%); }
.npop__close { position: absolute; top: 8px; right: 10px; background: none; border: 0; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--ink-3); transition: color .2s var(--ease); z-index: 2; }
.npop__close:hover { color: var(--ink); }
.npop__media { flex: 0 0 38%; align-self: stretch; overflow: hidden; box-sizing: border-box; padding: 10px 0 10px 10px; }
.npop__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.npop__body { flex: 1; min-width: 0; padding: 26px 28px 28px; }
@media (max-width: 600px) {
  .npop { flex-direction: column; width: calc(100vw - 32px); left: 16px; bottom: 16px; max-height: calc(100svh - 32px); }
  .npop__media { order: 2; flex-shrink: 0; height: 100px; max-height: 100px; padding: 0; }
  .npop__media img { object-position: center center; }
  .npop__body { overflow-y: auto; padding: 36px 20px 20px; }
}
.npop__body .eyebrow { margin: 0 0 8px; font-size: 11px; }
.npop__title { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; line-height: 1.1; color: var(--ink); margin: 0 0 8px; letter-spacing: -.01em; }
[data-headfont="sans"] .npop__title { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; }
.npop__copy { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0 0 18px; }
.npop .signup { max-width: none; }
.npop .signup__thanks { font-size: 1.05rem; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--paper); }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-block: 53px; }
.foot__brand { display: flex; flex-direction: column; gap: 18px; max-width: 300px; }
.foot__lock { display: flex; align-items: center; gap: 12px; }
.foot__lock .m { width: 28px; height: 28px; color: var(--crimson); }
.foot__lock .n { font-family: var(--serif); font-size: 22px; color: var(--paper); }
.foot__lock .n em { font-style: italic; }
.foot__tag { font-size: 1rem; line-height: 1.65; color: #B7ADA2; margin: 0; }
.foot__col h5 { font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #8C8378; font-weight: 600; margin: 0 0 18px; }
.foot__col a { font-family: var(--sans); display: block; color: #D9D1C6; text-decoration: none; font-size: 1rem; margin-bottom: 13px; transition: color .25s var(--ease); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.foot__col a:hover { color: #fff; }
.foot__bar { border-top: 1px solid rgba(255,255,255,.12); padding-block: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot__bar span { font-family: var(--sans); font-size: 12.5px; color: #8C8378; }

/* ---------- books ---------- */
.books { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.book { display: grid; grid-template-columns: 396px 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; background: var(--paper); padding: clamp(36px, 5vw, 64px); min-height: 380px; }
.book__cover { display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; }
.book__cover img { width: 100%; max-width: 396px; height: auto; transition: transform .4s var(--ease); }
.book__cover:hover img { transform: translateY(-4px); }
.book__body { display: flex; flex-direction: column; align-items: flex-start; }
.book__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 3vw, 2.7rem); line-height: 1.05; letter-spacing: -.015em; color: var(--ink); margin: 6px 0 0; }
.book__sub { font-family: var(--sans); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--crimson); font-weight: 600; margin: 0; }
.book__blurb { font-size: 1.1rem; line-height: 1.65; color: var(--ink-2); margin: 16px 0 0; }
.book__review { font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.4; color: var(--ink); border-left: 2px solid var(--crimson); padding-left: 22px; margin: 22px 0 0; }
.book__review cite { display: block; font-family: var(--sans); font-style: normal; font-size: 13px; letter-spacing: .04em; color: var(--ink-3); margin-top: 12px; }
.book__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 24px; }
.book__actions a.btn { text-decoration: none; }

.coming { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 28px; padding: 28px 32px; border: 1px solid var(--crimson-line); background: var(--crimson-tint); }
.coming__star { width: 30px; height: 30px; color: var(--crimson); flex: none; }
.coming__k { font-family: var(--sans); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--crimson); font-weight: 600; margin: 0 0 4px; }
.coming__t { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); margin: 0; }
.coming__t em { font-style: italic; color: var(--crimson); }
.coming > div { flex: 1; min-width: 220px; }

/* ---------- bulk order ---------- */
.bulk { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; margin-top: 20px; padding: clamp(32px, 4vw, 52px) clamp(28px, 4vw, 52px); background: #fff; border-radius: 4px; box-shadow: 0 2px 16px rgba(0,0,0,.06); }
.bulk__img-wrap { display: flex; justify-content: center; align-items: center; }
.bulk__img { width: 100%; max-width: 420px; height: auto; display: block; object-fit: contain; }
.bulk__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.bulk__title { font-family: var(--serif); font-weight: 500; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -.015em; color: var(--ink); margin: 0; }
.bulk__desc { font-family: var(--serif); font-size: var(--t-body); color: var(--ink-2); line-height: 1.65; margin: 0; max-width: 42ch; }
@media (max-width:680px) {
  .bulk { grid-template-columns: 1fr; }
  .bulk__img { max-width: 300px; margin: 0 auto; }
}

/* ---------- book detail page ---------- */
.bookhero { padding-top: 124px; padding-bottom: clamp(24px, 3.6vw, 43px); }
.bookhero__grid { display: grid; grid-template-columns: minmax(300px, 440px) 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.bookhero__cover { display: flex; align-items: center; justify-content: center; }
.bookhero__cover img { width: 100%; max-width: 440px; height: auto; }
.bookhero__info { display: flex; flex-direction: column; align-items: flex-start; }
.crumb { background: none; border: 0; padding: 0 0 18px; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); transition: color .25s var(--ease); white-space: nowrap; }
.crumb:hover { color: var(--crimson); }
.bookhero__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1.04; letter-spacing: -.015em; color: var(--ink); margin: 8px 0 0; }
.bookhero__hero { font-family: var(--serif); font-style: normal; font-size: var(--t-body); line-height: 1.8; color: var(--ink-2); margin: 22px 0 0; max-width: 48ch; text-wrap: pretty; }
.bookhero__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
.bookhero__actions a.btn { text-decoration: none; }
.bookhero__meta { font-family: var(--sans); font-size: 13px; letter-spacing: .04em; color: var(--ink-3); margin: 22px 0 0; }

.booksec { padding-block: clamp(38px, 5.4vw, 79px); }
.booksec--cream { background: var(--paper-2); }
.booksec__wrap { max-width: 760px; }
.prose--book { margin: 22px 0 0; max-width: 680px; }
.prose--book p { font-family: 'Libre Caslon Text', Georgia, serif; font-size: 1.22rem; line-height: 1.85; color: var(--ink); margin: 0 0 1.35em; }
.prose--book p:last-child { margin-bottom: 0; }
.prose--book em { font-style: italic; }
.prose__lead { font-family: var(--serif); font-style: italic; font-size: 1.7rem !important; line-height: 1.3 !important; color: var(--ink) !important; margin: 0 0 .6em !important; }

.bookauthor { display: grid; grid-template-columns: 300px 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.bookauthor__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.bookauthor__copy { display: flex; flex-direction: column; align-items: flex-start; }

.bookreview { max-width: 1000px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.bookreview__mark { font-family: var(--serif); font-size: 96px; line-height: .6; color: var(--crimson); opacity: .35; margin-bottom: 8px; height: 56px; }
.bookreview__q { font-family: var(--serif); font-style: normal; font-size: 1.22rem; line-height: 1.85; color: var(--ink); margin: 0; text-wrap: balance; }
.bookreview__by { display: flex; align-items: center; gap: 16px; margin: 32px 0 0; }
.bookreview__meta { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.bookreview__name { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.bookreview__role { font-family: var(--sans); font-size: 13.5px; color: var(--ink-3); margin-top: 3px; }

.readerreviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 24px; }
@media (max-width: 900px) { .readerreviews { grid-template-columns: 1fr; } }
.readerreview { background: var(--paper); margin: 0; padding: 30px 32px; display: flex; flex-direction: column; gap: 18px; }
.readerreview__q { font-family: var(--serif); font-style: normal; font-size: 1.3rem; line-height: 1.45; color: var(--ink); margin: 0; }
.readerreview__by { display: flex; align-items: center; gap: 13px; }
.readerreview__role { font-family: var(--sans); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); }

.regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); max-height: 124px; overflow: hidden; }
.regions--open { max-height: none; }
.region { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--paper); padding: 16px 20px; text-decoration: none; transition: background .25s var(--ease); }
.region:hover { background: var(--paper-2); }
.region__name { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink); }
.region__go { font-family: var(--sans); color: var(--crimson); font-size: 15px; }

/* ---------- offer checklist (mentorship) ---------- */
.offerlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 40px; max-width: 880px; }
.offerlist__i { display: flex; align-items: flex-start; gap: 14px; }
.offerlist__star { width: 18px; height: 18px; color: var(--crimson); flex: none; margin-top: 5px; }
.offerlist__i span { font-size: 1.12rem; line-height: 1.5; color: var(--ink); }

/* ---------- accordions ---------- */
.accs { margin-top: 24px; border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); }
.acc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: none; border: 0; padding: 32px 4px; cursor: pointer; text-align: left; }
.acc__q { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); transition: color .25s var(--ease); }
.acc:hover .acc__q { color: var(--crimson); }
.acc__icon { font-family: var(--sans); font-size: 26px; font-weight: 300; color: var(--crimson); flex: none; line-height: 1; width: 24px; text-align: center; }
.acc__body { padding: 0 4px 30px; max-width: 720px; }
.acc__list { columns: 1; margin: 0; padding: 0 0 0 18px; }
.acc__list li { font-size: 1.08rem; line-height: 1.5; color: var(--ink-2); margin-bottom: 12px; break-inside: avoid; }
.acc__p { font-size: 1.18rem; line-height: 1.75; color: var(--ink); margin: 0 0 1em; }
.acc__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.acc__steps li { display: flex; align-items: flex-start; gap: 16px; font-size: 1.12rem; line-height: 1.55; color: var(--ink-2); }
.acc__steps strong { color: var(--ink); font-weight: 600; }
.acc__stepnum { flex: none; width: 32px; height: 32px; border: 1.5px solid var(--crimson); color: var(--crimson); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- testimonials ---------- */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial { background: var(--white); border: 1px solid var(--line); margin: 0; padding: 36px 32px; display: flex; flex-direction: column; align-items: flex-start; }
.testimonial__mark { font-family: var(--serif); font-size: 72px; line-height: .7; color: var(--crimson); opacity: .3; height: 40px; }
.testimonial__q { font-family: var(--serif); font-style: italic; font-size: 1.32rem; line-height: 1.5; color: var(--ink); margin: 8px 0 28px; flex: 1; }
.testimonial__by { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line); width: 100%; }
.testimonial__meta { display: flex; flex-direction: column; }
.testimonial__name { font-family: var(--sans); font-style: normal; font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: .03em; }
.testimonial__role { font-family: var(--sans); font-style: normal; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
[data-headfont="sans"] .testimonial__q { font-family: var(--serif); } /* keep quotes serif even in sans-headline mode */

/* ---------- real book — lifestyle photo band (book detail page) ---------- */
.bookphoto { width: 55%; margin: 0 auto 48px; }
.bookphoto img { width: 100%; height: clamp(300px, 44vw, 575px); object-fit: cover; object-position: center; display: block; }

/* ---------- headline font swap (Tweaks: serif ↔ sans) ---------- */
[data-headfont="sans"] :is(.h-display, .h-1, .h-2, .hero__title, .bookhero__title,
  .article__title, .book__title, .offer__title, .acc__q, .coming__t,
  .post__title, .metastrip__i .v, .brand__name, .foot__lock .n, .bulk__title) {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -.02em;
}
[data-headfont="sans"] :is(.brand__name, .foot__lock .n) { font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; }
[data-headfont="sans"] :is(.brand__name em, .foot__lock .n em, .hero__title em, .h-display em,
  .bookhero__title em, .article__title em, .acc__q, .quote__t) { font-style: normal; }

/* ---------- body font swap (Tweaks: sans ↔ Libre Caslon Text) ----------
   Only running/reading copy switches to the serif; UI text, labels,
   eyebrows, buttons and meta stay in the sans for clarity. */
[data-bodyfont="serif"] :is(.lead, .body, .prose p, .prose--book p, .book__blurb,
  .offer__desc, .acc__p, .acc__list li, .acc__steps li, .offerlist__i span, .post__ex,
  .foot__tag, .hero .lead, .article .lead, .bulk__desc) {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
}
[data-bodyfont="serif"] :is(.lead, .body, .prose p, .prose--book p) { line-height: 1.7; }

/* ---------- reveal animation ----------
   Base state is VISIBLE. We only hide-then-reveal when JS has added
   `.reveal-on` to the root AND motion is allowed — so print, PDF export,
   no-JS, reduced-motion, and frozen-transition contexts all show content. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal-on .reveal:not(.in) { opacity: 0; transform: translateY(16px); }
}
@media print { .reveal, .reveal-on .reveal { opacity: 1 !important; transform: none !important; } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero__grid, .intro__grid, .contact__grid { grid-template-columns: 1fr; }
  .hero__media, .intro__media { order: -1; }
  .offers, .offers--four, .offers--three { grid-template-columns: 1fr; }
  .book { grid-template-columns: 1fr; gap: 24px; }
  .book__cover img { max-width: 283px; }
  .bookhero__grid { grid-template-columns: 1fr; }
  .bookhero__cover { order: -1; max-width: 100%; margin: 0 auto; }
  .bookphoto { width: calc(100% - 2 * clamp(24px, 7vw, 128px)); }
  .bookauthor { grid-template-columns: 1fr; }
  .bookauthor__media { max-width: 280px; }
  .offerlist { grid-template-columns: 1fr; }
  .acc__list { columns: 1; }
  .testimonials { grid-template-columns: 1fr; }
  .nav { display: none; }
  .burger { display: flex; }
  .drawer { display: block; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-block: 34px; }
  .foot__brand { grid-column: 1 / -1; max-width: 420px; }
  .post { grid-template-columns: 1fr; gap: 10px; }
  .post__arrow { display: none; }
}

@media (max-width: 560px) {
  .foot__grid { grid-template-columns: 1fr; gap: 36px; padding-block: 29px; }
  .foot__brand { grid-column: auto; }
  .foot__bar { flex-direction: column; align-items: flex-start; gap: 8px; padding-block: 22px; }
  .hero__cap { left: 12px; bottom: 12px; padding: 8px 12px; }
  .regions { grid-template-columns: 1fr; }
  .bookhero__actions, .hero__actions, .book__actions, .bookhero__actions { gap: 14px; }
  .testimonial { padding: 26px 22px; }
  .coming { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .coming .book__actions { flex-wrap: wrap !important; }
}

/* ===================== commerce — /buy + /pay ===================== */
.commerce__sec { padding-top: 150px; }
.commerce__head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 72px); }
.commerce__title { margin: 8px 0 16px; }
.commerce__lead { max-width: 54ch; }
.commerce__inlink { background: none; border: 0; padding: 0; margin-left: 6px; color: var(--crimson);
  font: inherit; font-weight: 600; cursor: pointer; border-bottom: 1.5px solid var(--crimson-line);
  transition: border-color .25s var(--ease); }
.commerce__inlink:hover { border-bottom-color: var(--crimson); }

.commerce__grid { display: grid; grid-template-columns: 1fr 340px; gap: clamp(32px, 5vw, 64px); align-items: start; }

/* shop list/cards */
.shop__soon { font-family: var(--sans); font-size: .98rem; color: var(--ink-3); margin: 26px 0 0; }
.shop__soon em { font-style: italic; color: var(--ink-2); }

.shop--list { border-top: 1px solid var(--line); }
.shop--list .shopitem { display: grid; grid-template-columns: 76px 1fr auto; gap: clamp(18px, 3vw, 32px);
  align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); }
.shop--list .shopitem__cover img { width: 76px; }

.shop--cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.shop--cards .shopitem { display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  background: var(--paper); padding: clamp(28px, 3vw, 40px); }
.shop--cards .shopitem__cover img { width: 132px; }
.shop--cards .shopitem__act { margin-top: 4px; }

.shopitem__cover img { height: auto; display: block; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.shopitem__title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.shopitem__sub { font-size: 1rem; line-height: 1.45; color: var(--ink-2); margin: 6px 0 0; max-width: 42ch; }
.shopitem__price { font-family: var(--sans); font-weight: 600; font-size: 1.18rem; color: var(--ink);
  margin: 12px 0 0; font-variant-numeric: tabular-nums; }
.shopitem__unit { font-family: var(--sans); font-weight: 400; font-size: .92rem; color: var(--ink-3); letter-spacing: 0; }

/* pay items */
.shop--pay { display: flex; flex-direction: column; gap: 16px; }
.payitem { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  padding: clamp(24px, 3vw, 32px); border: 1px solid var(--line); background: var(--white);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.payitem--on { border-color: var(--crimson); box-shadow: var(--shadow-sm); }
.payitem__topline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.payitem__title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.1; color: var(--ink); margin: 0; }
.payitem__badge { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--crimson); background: var(--crimson-tint); padding: 5px 10px; }
.payitem__sub { font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); margin: 9px 0 0; max-width: 48ch; }
.payitem__price { font-family: var(--sans); font-weight: 600; font-size: 1.25rem; color: var(--ink);
  margin: 13px 0 0; font-variant-numeric: tabular-nums; }

/* quantity stepper */
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: var(--r-1);
  transition: border-color .25s var(--ease); }
.qty[data-empty="false"] { border-color: var(--crimson); }
.qty__b { width: 42px; height: 42px; background: none; border: 0; font-size: 20px; font-weight: 300; line-height: 1;
  color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color .2s var(--ease); }
.qty__b:hover:not(:disabled) { color: var(--crimson); }
.qty__b:disabled { color: var(--ink-3); opacity: .45; cursor: default; }
.qty__n { min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; color: var(--ink); }

/* order rail */
.order { position: sticky; top: 100px; }
.order__card { border: 1px solid var(--line); background: var(--white); padding: clamp(24px, 3vw, 32px); box-shadow: var(--shadow-sm); }
.order__title { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--ink);
  margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.order__empty { font-family: var(--sans); font-size: 1rem; line-height: 1.5; color: var(--ink-3); margin: 0; }
.order__lines { display: flex; flex-direction: column; gap: 14px; }
.order__line { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.order__lname { font-family: var(--sans); font-size: 1rem; line-height: 1.4; color: var(--ink); }
.order__lx { font-family: var(--sans); color: var(--ink-3); white-space: nowrap; }
.order__lamt { font-family: var(--sans); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; }
.order__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.order__total > span:first-child { font-family: var(--sans); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); }
.order__totalamt { font-family: var(--serif); font-weight: 500; font-size: 1.8rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.order__go { width: 100%; margin-top: 22px; }
.order__go:disabled { background: var(--line-strong); color: var(--paper); cursor: default; }
.order__go:disabled .ar { display: none; }
.order__note { font-family: var(--sans); display: flex; align-items: center; gap: 8px; font-size: .85rem; line-height: 1.4; color: var(--ink-3); margin: 16px 0 0; }
.order__notelock { width: 14px; height: 14px; flex: none; }

/* checkout sheet (Stripe-style, mocked) */
.co { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.co__scrim { position: absolute; inset: 0; background: rgba(28,23,20,.5); backdrop-filter: blur(3px); animation: cofade .3s var(--ease); }
.co__sheet { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 48px); overflow: auto;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  padding: clamp(26px, 4vw, 38px); animation: corise .45s var(--ease); }
@keyframes cofade { from { opacity: 0; } }
@keyframes corise { from { opacity: 0; transform: translateY(18px); } }
.co__close { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 28px; line-height: 1;
  color: var(--ink-3); cursor: pointer; transition: color .2s var(--ease); }
.co__close:hover:not(:disabled) { color: var(--ink); }
.co__close:disabled { opacity: .4; cursor: default; }

.co__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.co__brandmark { display: flex; align-items: center; }
.co__brandlogo { width: 26px; height: 26px; color: var(--crimson); }
.co__pay { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; color: var(--ink); font-variant-numeric: tabular-nums; }

.co__summary { padding: 20px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.co__sumrow { font-family: var(--sans); display: flex; justify-content: space-between; gap: 16px; font-size: .95rem; color: var(--ink-2); }
.co__sumamt { font-family: var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.co__sumx { font-family: var(--sans); color: var(--ink-3); white-space: nowrap; }
.co__sumrow--total { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--ink); font-weight: 600; }

.co__fields { border: 0; padding: 20px 0 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.co__field { display: flex; flex-direction: column; gap: 7px; }
.co__lab { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--ink-2); }
.co__field > input { font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--white);
  border: 1px solid var(--line-strong); border-radius: var(--r-1); padding: 13px 14px; outline: none; width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.co__field > input::placeholder { color: var(--ink-3); }
.co__field > input:focus { border-color: var(--crimson); box-shadow: 0 0 0 3px var(--crimson-tint); }

.co__cardbox { border: 1px solid var(--line-strong); border-radius: var(--r-1); overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.co__cardbox:focus-within { border-color: var(--crimson); box-shadow: 0 0 0 3px var(--crimson-tint); }
.co__cardbox input { border: 0 !important; box-shadow: none !important; border-radius: 0; background: var(--white);
  font-family: var(--sans); font-size: 15px; color: var(--ink); padding: 13px 14px; outline: none; }
.co__cardbox input::placeholder { color: var(--ink-3); }
.co__cardrow { display: flex; align-items: center; }
.co__cardrow + .co__cardrow { border-top: 1px solid var(--line-strong); }
.co__cardnum { flex: 1; min-width: 0; }
.co__brands { display: flex; gap: 5px; padding-right: 12px; flex: none; }
.co__brands span { font-size: 9px; font-weight: 700; letter-spacing: .02em; color: var(--ink-3);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 2px; padding: 3px 5px; }
.co__cardrow--split { gap: 1px; background: var(--line-strong); }
.co__cardrow--split input { flex: 1; min-width: 0; }

.co__paybtn { width: 100%; margin-top: 22px; min-height: 50px; background: var(--crimson); color: #fff; border: 0;
  padding: 15px; border-radius: var(--r-1); font-family: var(--sans); font-size: 14px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 10px; transition: background .25s var(--ease); }
.co__paybtn:hover:not(:disabled) { background: var(--crimson-deep); }
.co__paybtn:disabled { background: var(--line-strong); cursor: default; }
.co__paybtn span { display: inline-flex; align-items: center; gap: 9px; }
.co__lock { width: 15px; height: 15px; }
.co__spin { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: cospin .7s linear infinite; }
@keyframes cospin { to { transform: rotate(360deg); } }

.co__secure { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: var(--ink-3); margin: 16px 0 0; }
.co__securelock { width: 13px; height: 13px; flex: none; }
.co__secure strong { color: var(--ink-2); font-weight: 700; letter-spacing: .01em; text-transform: uppercase; font-size: 11.5px; }
.co__demo { font-family: var(--sans); text-align: center; font-size: 11.5px; color: var(--ink-3); margin: 8px 0 0; opacity: .85; }

.co__done { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 6px 0; }
.co__donestar { width: 46px; height: 46px; color: var(--crimson); }
.co__doneh { font-family: var(--serif); font-weight: 500; font-size: 1.8rem; color: var(--ink); margin: 18px 0 10px; }
.co__donep { font-family: var(--sans); font-size: 1.05rem; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 36ch; }
.co__rcpt { width: 100%; margin: 24px 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.co__rcptrow { font-family: var(--sans); display: flex; justify-content: space-between; gap: 16px; font-size: .95rem; color: var(--ink-2); }
.co__rcptrow--total { font-weight: 600; color: var(--ink); padding-top: 10px; border-top: 1px dashed var(--line); }
.co__sent { font-family: var(--sans); font-size: .95rem; line-height: 1.5; color: var(--ink-2); margin: 0; }
.co__sent strong { color: var(--ink); }
.co__doneb { margin-top: 24px; min-width: 160px; }

@media (max-width: 900px) {
  .commerce__grid { grid-template-columns: 1fr; }
  .order { position: static; }
  .shop--cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .shop--list .shopitem { grid-template-columns: 60px 1fr; row-gap: 16px; }
  .shop--list .shopitem__act { grid-column: 1 / -1; justify-self: start; }
  .payitem { grid-template-columns: 1fr; }
  .payitem__act { justify-self: start; }
}