/* ============================================================
   VELVET HOUR  ·  approved by Darrell 2026-09-28
   ------------------------------------------------------------
   A deep-emerald room at dusk: the page stays dark while ivory
   cards read like lit pages floating through it. Rebuilt here
   from the Open House B sandbox skin, with the live site's own
   hero (team photograph beside the words), the "who does what"
   ledger on the three home service cards, Darrell's tweaker
   picks for colour and size, and the KME Shop's Trace glow
   button on every button.

   Loaded on every page after style.css; experience.css still
   follows it on the Experience page, as it did in the sandbox.
   Every rule starts html.velvet so it carries the specificity
   it was designed at in the sandbox skin.
   Remove class="velvet" in render.mjs to switch it all off.
   ============================================================ */
html.velvet{--ink:#f3ede1;--soft:#d5cfc1;--muted:#b9b2a5;--line:rgba(243,237,225,.22);--ground:#0c1713;--card:#f7f1e6;--umber:#2a2219;--forest:#15392e;--emerald:#98bea3;--emerald-paper:#1e4938;--radius:16px;color-scheme:dark}
html.velvet body{background:var(--ground);color:#f4f1ea}
html.velvet :is(h1,h2) em{color:#1e4938}
html.velvet :is(.eyebrow,.location){color:#f4f1ea}
html.velvet :is(h3,.offering-heading){color:#4c9a74}
html.velvet .flourish{color:#1e4938}
html.velvet .wordmark-sub{font-size:calc(.6875rem * 1.45)}
html.velvet .navigation-ready .navigation{background:var(--ground)}
html.velvet .navigation .nav-inquire{color:var(--gold)}
html.velvet img{filter:saturate(.85) brightness(.9) contrast(1.08)}
html.velvet :is(h1,h2,h3,.service-price,.team-member figcaption),html.velvet :is(h1,h2) em{letter-spacing:-.02em}

/* Lit pages need their own dark reading tokens, rather than inheriting ivory copy.
   Their eyebrows stay emerald: ivory would vanish on the ivory card. */
html.velvet :is(.paper,.founder-feature-copy,.full-planning-copy,.founder-story>div,.experience-founder,.supporting-offering,.team-member){color:var(--noir);--ink:var(--noir);--soft:#4d5049;--muted:#64665e;--line:rgba(20,24,20,.18)}
html.velvet :is(.paper,.founder-feature-copy,.full-planning-copy,.founder-story>div,.experience-founder,.supporting-offering,.team-member) .eyebrow{color:var(--emerald-paper)}

/* ---------- home hero: the site's own, team photograph beside the words ---------- */
html.velvet .page-home .navigation-ready .navigation.is-open a{color:var(--ink)}

/* ---------- intro: centred ---------- */
html.velvet .intro{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1rem}
html.velvet .fine-rule{display:none}
html.velvet .intro-columns{text-align:left;max-width:58rem}

/* ---------- services: three cards, each with its ledger ---------- */
html.velvet .experience{border:0;padding-top:2rem}
html.velvet .service-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;border:0;overflow:visible}
html.velvet .service-row{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;padding:0 0 1rem;border:0}
html.velvet .service-row:hover{transform:none;background:none}
html.velvet .service-number{position:absolute;top:1rem;left:1rem;background:transparent;color:#f7f1e6;border-radius:999px;padding:.25rem .75rem}
html.velvet .service-row>.arrow{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:grid;place-items:center;background:var(--emerald-paper);color:#f7f1e6;border-radius:50%;font-size:1.1rem;letter-spacing:0}
html.velvet .service-row p{font-size:calc(1.2rem * var(--type-body-scale,1));line-height:1.5;color:#cfc9be}
html.velvet .service-row h3{color:#1e4938}
html.velvet .service-row .investment{font-size:calc(.72rem * var(--type-ui-scale,1))}

/* the ledger: an ink page in a velvet frame rounded to 40px, blush dots,
   forest row rules, a sage title and ivory tags */
html.velvet .page-home .svc-art{display:block;order:-1;width:100%;aspect-ratio:4/5;margin-bottom:.8rem;border:3px solid #0c1713;border-radius:40px;background:#16130f;color:#f4f1ea;box-shadow:0 34px 80px rgba(0,0,0,.62);padding:3.9rem 1.1rem 1.1rem;overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
html.velvet .page-home .service-row:hover .svc-art{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(232,205,130,.28),0 18px 60px rgba(232,205,130,.2)}
html.velvet .service-row .lg{height:100%;display:flex;flex-direction:column}
html.velvet .service-row .lg-head{font:500 calc(1.8rem * var(--type-headings-scale,1))/1.1 var(--display);letter-spacing:0;margin:0 0 1.1rem;color:#4c9a74}
html.velvet .service-row .lg ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;flex:1;justify-content:space-between}
html.velvet .service-row .lg li{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;padding:.42rem 0;border-bottom:1px solid #15392e;font:400 calc(1.02rem * var(--type-body-scale,1))/1.25 var(--body)}
html.velvet .service-row .lg li:last-child{border-bottom:0}
html.velvet .service-row .lg-task{font-size:1.3924em;color:#cfc9be}
html.velvet .service-row .lg-who{display:inline-flex;align-items:center;gap:.45rem;flex:0 0 auto;font:500 .822rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#f4f1ea}
html.velvet .service-row .lg-who i{width:.7rem;height:.7rem;border-radius:50%;border:1.5px solid #b77c73}
html.velvet .service-row .lg-kme .lg-who i{background:#b77c73}
html.velvet .service-row .lg-both .lg-who i{background:linear-gradient(90deg,#b77c73 50%,transparent 50%)}

/* ---------- founder: umber colour block, floating ivory card ---------- */
html.velvet .founder-feature.wrap{width:100%;max-width:none;margin-top:4rem;padding:6.5rem max(var(--gutter),calc((100% - 82.5rem)/2));gap:4rem;background:var(--umber);border-bottom:1.25rem solid #07110d}
html.velvet .founder-feature>figure{padding:0}
html.velvet .founder-feature figcaption{color:rgba(244,241,234,.7)}
html.velvet .founder-feature-copy{background:var(--card);border-radius:var(--radius);padding:3.5rem;box-shadow:0 30px 70px rgba(0,0,0,.3)}
/* Hurricane needs a true ink colour against the lit founder card, not the inherited sage. */
html.velvet .page-home .founder-signature{font:400 3.4rem/1 Hurricane,cursive;letter-spacing:0;color:#174735}

/* ---------- inquiry: an ivory card on a full-width dark band ---------- */
html.velvet .paper{margin-block:6rem;background:var(--card);box-shadow:0 0 0 100vmax var(--ground);clip-path:inset(-6rem -100vmax)}
html.velvet .founder-feature+.paper{margin-top:6rem}
html.velvet .paper-simple{margin-top:6rem}

/* the dark band carries on into the footer, so the page ends in one dark chapter */
html.velvet .site-footer{background:#07110d;color:var(--ink);box-shadow:0 0 0 100vmax #07110d;clip-path:inset(0 -100vmax -100vmax);--line:rgba(243,237,225,.2);--soft:#d5cfc1;--muted:#b9b2a5}
html.velvet main>.paper:last-child{margin-bottom:0;clip-path:inset(-6rem -100vmax 0)}

/* ---------- inner pages ---------- */
html.velvet .page-intro{text-align:center;padding-top:5.5rem}
html.velvet .page-intro-grid{grid-template-columns:1fr;justify-items:center;gap:1.8rem}
html.velvet .page-intro-grid>div{max-width:34rem;margin-inline:auto}
html.velvet .page-intro-grid .text-link{margin-inline:auto}
html.velvet .service-index{justify-content:center;gap:.6rem;border-top:0}
/* the service jump links wear the Trace glow too: ivory outline on the dark
   ground, the first one filled like the gold button; main.js moves the light */
html.velvet .service-index a{--b-glow:118,160,135;position:relative;isolation:isolate;overflow:hidden;justify-content:center;
  min-height:2.75rem;padding:.6rem 1.35rem;border:1.5px solid color-mix(in srgb,var(--ink) 45%,transparent);border-radius:999px;background:transparent;color:var(--ink);
  font-family:var(--ui);font-size:calc(.6875rem * var(--type-ui-scale,1));letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  transition:color .35s ease,background-color .35s ease,border-color .35s ease,box-shadow .45s ease}
html.velvet .service-index a::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(var(--b-glow),.4),rgba(var(--b-glow),0) 62%);opacity:0;transition:opacity .35s ease}
html.velvet .service-index a:is(:hover,:focus-visible){color:var(--ink);border-color:color-mix(in srgb,var(--ink) 70%,transparent);box-shadow:0 6px 24px rgba(var(--b-glow),.3)}
html.velvet .service-index a:is(:hover,:focus-visible)::after{opacity:1}
html.velvet .service-index a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
html.velvet .experience-index .index-primary{background:var(--emerald-paper);border-color:rgba(152,190,163,.55);color:var(--paper);text-decoration:none}
html.velvet .experience-index .index-primary:is(:hover,:focus-visible){color:var(--paper);border-color:rgba(152,190,163,.85)}
/* the team photograph: wide, soft-cornered, and graded for the emerald room */
html.velvet .service-banner img{border-radius:var(--radius);box-shadow:0 30px 60px rgba(4,18,12,.38)}
/* full planning: an emerald colour block, the copy on a floating ivory card */
html.velvet .full-planning-feature.wrap{width:100%;max-width:none;margin-top:5rem;padding:6.5rem max(var(--gutter),calc((100% - 82.5rem)/2));background:var(--forest);border-bottom:1.25rem solid #07110d}
html.velvet .full-planning-copy{background:var(--card);border-radius:var(--radius);padding:3.5rem;box-shadow:0 30px 70px rgba(0,0,0,.3)}
html.velvet .full-planning-visual figcaption,html.velvet .full-planning-visual figcaption span:last-child{color:rgba(244,241,234,.75)}
html.velvet .planning-collage,html.velvet .collage-tile{border-radius:var(--radius)}
html.velvet .planning-collage{box-shadow:0 30px 70px rgba(0,0,0,.3)}
/* Kristi, supporting offerings: ivory cards on the ground */
html.velvet .experience-founder{background:var(--card);border-radius:var(--radius);padding:2rem;margin-top:5rem;box-shadow:0 18px 40px rgba(0,0,0,.25)}
html.velvet .experience-founder img{border-radius:12px}
html.velvet .supporting-intro{text-align:center}
html.velvet .planning-options{gap:1.4rem}
html.velvet .supporting-offering{background:var(--card);border:0;border-radius:var(--radius);padding:2rem 2.2rem 1.2rem;box-shadow:0 18px 40px rgba(0,0,0,.22)}
html.velvet .disclosure-mark::before,html.velvet .disclosure-mark::after{background:var(--emerald-paper)}
html.velvet .experience-closing .experience-closing-team{width:100%;max-width:none}
html.velvet .experience-closing-team img{border-radius:var(--radius);aspect-ratio:2.6}
/* The two white-studio frames sit one stop darker than the general photo grade,
   so their daylight falls back into the room without losing faces. No hue shift:
   it turned skin grey-green. */
html.velvet :is(.service-banner img,.experience-closing-team img){filter:brightness(.7) contrast(1.12) saturate(.72) sepia(.06)}
/* the team page: Kristi on the umber block, portraits as cards */
html.velvet .founder-story.wrap{width:100%;max-width:none;padding:6rem max(var(--gutter),calc((100% - 82.5rem)/2));background:var(--umber);border-bottom:1.25rem solid #07110d}
html.velvet .founder-story>figure img{border-radius:var(--radius);box-shadow:0 30px 70px rgba(0,0,0,.3)}
html.velvet .founder-story>figure figcaption{color:rgba(244,241,234,.7)}
html.velvet .founder-story>div{background:var(--card);border-radius:var(--radius);padding:3.5rem;box-shadow:0 30px 70px rgba(0,0,0,.3)}
html.velvet .founder-story .founder-signature{color:var(--emerald-paper)}
html.velvet .team-section{border-top:0}
html.velvet .team-member{background:var(--card);border-radius:var(--radius);padding:.6rem .6rem 0;box-shadow:0 14px 34px rgba(0,0,0,.22);transition:transform .5s var(--ease)}
html.velvet .team-member:hover{transform:translateY(-4px)}
html.velvet .team-member img{border-radius:12px}
html.velvet .team-member figcaption{padding:.8rem .5rem 1rem;text-align:center}
html.velvet .team-closing{background:var(--forest);color:var(--card);border-color:transparent}
html.velvet .team-closing .small-mark,html.velvet .team-closing p em{color:var(--gold)}

/* ============================================================
   BUTTONS · the KME Shop's 04 Trace glow, in emerald, compact
   ------------------------------------------------------------
   Ported from the shop's library (kme-shop/dev_sandbox/skins/
   _buttons.css, via the tweaker). A soft light follows the
   pointer across the button: main.js writes --mx/--my.
   Markup from render.mjs: .bx-fx (the light) + .bx-l (label, ↗).
   On the dark ground a button is an ivory outline; on the ivory
   panels it is filled with emerald paper and labelled ivory.
   ============================================================ */
html.velvet .button{--b-fill:var(--emerald);--b-on:#0a0908;--b-ink:var(--ink);--b-line:color-mix(in srgb,var(--ink) 45%,transparent);--b-alt:var(--gold);--b-glow:118,160,135;
  --rest:transparent;--rest-on:var(--b-ink);--edge:var(--b-line);
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:1.2rem;
  min-height:3rem;padding:.75rem 1.6rem;background:var(--rest);color:var(--rest-on);border:1.5px solid var(--edge);border-radius:999px;
  box-shadow:none;transform:none;filter:none;text-decoration:none;cursor:pointer;
  transition:color .35s ease,background-color .35s ease,border-color .35s ease,box-shadow .45s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
html.velvet .button-gold{--rest:var(--b-fill);--rest-on:var(--b-on);--edge:var(--b-fill);letter-spacing:.075em}
html.velvet .paper .button{--b-ink:var(--noir);--b-line:rgba(10,9,8,.4);--b-fill:var(--emerald-paper);--b-on:var(--paper)}
html.velvet .button::before{content:none}
html.velvet .button:hover,html.velvet .button:focus-visible{background:var(--rest);color:var(--rest-on);border-color:var(--edge);transform:none;box-shadow:0 6px 24px rgba(var(--b-glow),.3)}
html.velvet .button:active{transform:scale(.97);box-shadow:none}
html.velvet .button:focus-visible{outline:2px solid var(--b-alt);outline-offset:3px}
html.velvet .button .bx-l{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.45em;pointer-events:none;white-space:nowrap}
html.velvet .button .bx-fx{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;overflow:hidden;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(var(--b-glow),.4),rgba(var(--b-glow),0) 62%);opacity:0;transition:opacity .35s ease}
html.velvet .button-gold .bx-fx{background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.62),rgba(255,255,255,0) 58%)}
html.velvet .button:is(:hover,:focus-visible) .bx-fx{opacity:1}

/* ---------- smaller screens ---------- */
@media(max-width:600px){html.velvet .service-index{gap:.45rem .4rem}html.velvet .service-index a{min-height:2.5rem;padding:.4rem .85rem;font-size:calc(.52rem * var(--type-ui-scale,1));letter-spacing:.06em}}
@media(max-width:860px){
  html.velvet .service-list{grid-template-columns:1fr 1fr}
  html.velvet .founder-feature.wrap{grid-template-columns:1fr}
  html.velvet .founder-story.wrap{grid-template-columns:1fr}
  html.velvet .full-planning-feature.wrap{padding-block:4rem}
  html.velvet .page-home .navigation-ready .navigation{background:var(--ground)}
}
@media(max-width:760px){
  /* the hero: keep the topline, the button and the foot each on one line */
  html.velvet .page-home .hero-topline .location{display:none}
  html.velvet .page-home .hero .button{gap:1rem;padding-inline:1.4rem;white-space:nowrap;font-size:calc(.6rem * var(--type-ui-scale,1))}
  html.velvet .page-home .hero-foot{align-items:center}
  html.velvet .page-home .hero-foot .scroll-link{white-space:nowrap}
  html.velvet .page-home .hero-foot .flourish{white-space:nowrap;font-size:1.9rem}
}
@media(max-width:600px){
  html.velvet .service-list{grid-template-columns:1fr}
  html.velvet .page-home .svc-art{aspect-ratio:auto}
  html.velvet .founder-feature-copy{padding:2rem 1.5rem;border-left:0}
  html.velvet .founder-feature.wrap{padding-block:4rem}
  html.velvet :is(.full-planning-copy,.founder-story>div){padding:2rem 1.4rem}
  html.velvet .founder-story.wrap{padding-block:3.5rem}
  html.velvet .supporting-offering{padding:1.6rem 1.4rem .8rem}
}

/* The finishing touches: a fourth ledger under the three home service cards, in their
   language (blush dot, forest rules, the gold halo on hover). Rows open in place. */
html.velvet .extras-ledger{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:3rem;align-items:start;margin-top:4.5rem;border:3px solid #0c1713;border-radius:40px;background:#16130f;box-shadow:0 34px 80px rgba(0,0,0,.62);padding:2.6rem 2.6rem 2.2rem;transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s cubic-bezier(.22,1,.36,1)}
html.velvet .extras-ledger:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(232,205,130,.28),0 18px 60px rgba(232,205,130,.2)}
html.velvet .extras-head{font:500 calc(1.8rem * var(--type-headings-scale,1))/1.1 var(--display);letter-spacing:0;color:#4c9a74;margin:0}
html.velvet .extras-ledger ul{list-style:none;margin:0;padding:0}
html.velvet .extras-ledger li{border-bottom:1px solid #15392e}
html.velvet .extras-ledger li:last-child{border-bottom:0}
html.velvet .extras-ledger summary{list-style:none;display:grid;grid-template-columns:1fr auto 1.2rem;align-items:center;gap:1.4rem;padding:1.1rem 0;cursor:pointer}
html.velvet .extras-ledger summary::-webkit-details-marker{display:none}
html.velvet .extras-ledger summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
html.velvet .extras-task{font:400 calc(1.42rem * var(--type-body-scale,1))/1.25 var(--body);color:#cfc9be}
html.velvet .extras-task em{display:block;font-size:.72em;color:#b9b2a5;margin-top:.2rem}
html.velvet .extras-price{display:inline-flex;align-items:center;gap:.5rem;font:500 .822rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#f4f1ea;white-space:nowrap}
html.velvet .extras-price i{width:.7rem;height:.7rem;border-radius:50%;background:#b77c73}
html.velvet .extras-plus{position:relative;width:.9rem;height:.9rem}
html.velvet .extras-plus::before,html.velvet .extras-plus::after{content:'';position:absolute;background:#98bea3;transition:transform .3s cubic-bezier(.22,1,.36,1)}
html.velvet .extras-plus::before{left:0;right:0;top:50%;height:1px}
html.velvet .extras-plus::after{top:0;bottom:0;left:50%;width:1px}
html.velvet .extras-ledger details[open] .extras-plus::after{transform:scaleY(0)}
html.velvet .extras-more{padding:0 0 1.3rem;color:#cfc9be}
html.velvet .extras-more p{margin:0;font-size:calc(1.15rem * var(--type-body-scale,1));line-height:1.5}
html.velvet .extras-more .text-link{margin-top:1.2rem}
html.velvet .choice.is-added{animation:choice-added 1.6s ease}
@keyframes choice-added{0%,60%{box-shadow:0 0 0 6px rgba(30,73,56,.18);border-radius:8px}100%{box-shadow:none}}
@media(max-width:860px){html.velvet .extras-ledger{grid-template-columns:1fr;gap:1.6rem}}
@media(max-width:600px){html.velvet .extras-ledger{margin-top:3rem;padding:1.8rem 1.3rem 1.2rem;border-radius:28px}html.velvet .extras-ledger summary{gap:.8rem}html.velvet .extras-price{font-size:.7rem;letter-spacing:.08em}}
@media(prefers-reduced-motion:reduce){html.velvet .extras-ledger,html.velvet .extras-plus::after{transition:none}html.velvet .choice.is-added{animation:none}}