/* ==========================================================================
   Author Growth: design system
   1. Tokens   2. Base   3. Type   4. Layout   5. Header + nav   6. Buttons
   7. Labels + links   8. Sections   9. Home hero   10. Page heroes
   11. Editorial blocks   12. Cards   13. Service components   14. Method
   15. Reader path (interactive)   16. Proof slots   17. CTA components
   18. Forms   19. FAQ   20. Article   21. Legal   22. 404   23. Footer
   24. Signature path line   25. Motion   26. Reduced motion
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root{
  /* colour: warm paper, aubergine ink, one royal violet */
  --paper:#F7F5F2;
  --paper-deep:#EFEBE6;
  --mist:#EEE8F3;
  --panel:#FDFCFA;
  --ink:#1E1528;
  --ink-2:#463C52;
  --ink-3:#62586D;
  --line:#E2DBE6;
  --line-strong:#8A7E96;
  --violet:#5B2E91;
  --violet-hover:#47227A;
  --violet-soft:#B9A4D8;
  --violet-wash:#E7DDF3;
  --plum:#221630;
  --plum-2:#302140;
  --on-plum:#F5F0F8;
  --on-plum-2:#C9BDD5;
  --on-plum-line:rgba(245,240,248,.18);

  /* type */
  --f-display:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-body:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --fs-display:clamp(2.9rem,1.35rem + 5.2vw,6.4rem);
  --fs-h1:clamp(2.5rem,1.5rem + 3.4vw,4.6rem);
  --fs-h2:clamp(2rem,1.4rem + 2.1vw,3.35rem);
  --fs-h3:clamp(1.4rem,1.2rem + .8vw,1.85rem);
  --fs-h4:clamp(1.15rem,1.08rem + .3vw,1.3rem);
  --fs-lead:clamp(1.15rem,1.04rem + .5vw,1.42rem);
  --fs-body:1.0625rem;
  --fs-small:.9375rem;
  --fs-label:.75rem;

  --lh-tight:1.04;
  --lh-head:1.12;
  --lh-body:1.65;

  /* space: 4px base */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;
  --section-y:clamp(5rem,3.2rem + 7vw,10rem);
  --gutter:clamp(1.25rem,4vw,3.5rem);
  --wrap:1320px;
  --folio-x:clamp(14px,1.6vw,28px);

  /* shape + motion */
  --radius:4px;
  --radius-lg:10px;
  --ease-out:cubic-bezier(.22,.8,.24,1);
  --ease-soft:cubic-bezier(.45,.05,.25,1);
  --dur-1:.2s; --dur-2:.45s; --dur-3:.9s;
  --shadow-soft:0 1px 2px rgba(30,21,40,.04),0 18px 48px -24px rgba(30,21,40,.22);
  --paper-glow:0 0 1px rgba(247,245,242,.95),0 1px 14px rgba(247,245,242,.85),0 4px 36px rgba(247,245,242,.7);
}

/* 2. Base ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:6rem}
body{overflow-x:hidden;overflow-x:clip;margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--fs-body);line-height:var(--lh-body);font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
::selection{background:var(--violet-wash);color:var(--ink)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:2px}
.section--plum :focus-visible,.cta-band :focus-visible,.site-footer :focus-visible{outline-color:var(--violet-soft)}
.skip-link{position:absolute;left:var(--s-4);top:-100px;z-index:200;background:var(--ink);color:var(--paper);padding:var(--s-3) var(--s-4);border-radius:var(--radius);font-weight:500;text-decoration:none;transition:top var(--dur-1) var(--ease-out)}
.skip-link:focus{top:var(--s-4)}
main:focus{outline:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-8) 0}

/* the environment layer: one quiet, slow glow behind everything */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.env::before{content:"";position:absolute;width:70vmax;height:70vmax;right:-20vmax;top:-25vmax;border-radius:50%;background:radial-gradient(circle,rgba(185,164,216,.22) 0%,rgba(185,164,216,0) 62%);animation:envDrift 80s var(--ease-soft) infinite alternate;animation-delay:-20s}
.env::after{content:"";position:absolute;inset:0;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.08 0 0 0 0 0.16 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes envDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-18vmax,22vmax,0)}}

/* 3. Type ------------------------------------------------------------------ */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;color:var(--ink);margin:0;letter-spacing:-.018em;font-optical-sizing:auto;text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2);line-height:var(--lh-head)}
h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.01em}
h4{font-size:var(--fs-h4);line-height:1.3;letter-spacing:-.005em;font-weight:500}
h1 em,h2 em,h3 em,.display em{font-style:italic;color:var(--violet)}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
.display{font-family:var(--f-display);font-size:var(--fs-display);line-height:1;letter-spacing:-.028em;font-weight:400}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);max-width:40ch}
.body-lg{font-size:1.15rem;line-height:1.62;color:var(--ink-2);max-width:60ch}
.small{font-size:var(--fs-small)}
.muted{color:var(--ink-3)}
.label{font-family:var(--f-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);line-height:1.4}
.label--violet{color:var(--violet)}
.kicker{display:flex;align-items:baseline;gap:var(--s-3);margin-bottom:var(--s-5)}
.kicker .folio{font-family:var(--f-mono);font-size:var(--fs-label);color:var(--violet);letter-spacing:.08em}
.kicker .rule{flex:0 0 2.5rem;height:1px;background:var(--line-strong);align-self:center}
.serif-quote{font-family:var(--f-display);font-style:italic;font-size:clamp(1.8rem,1.2rem + 2.4vw,3.4rem);line-height:1.18;letter-spacing:-.015em}
.measure{max-width:62ch}
.measure-sm{max-width:44ch}

/* 4. Layout ---------------------------------------------------------------- */
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:calc(880px + var(--gutter)*2)}
.wrap--text{max-width:calc(720px + var(--gutter)*2)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2.4vw,2.5rem);row-gap:var(--s-7)}
.span-12{grid-column:1/-1}
.stack>*+*{margin-top:var(--s-5)}
.stack-lg>*+*{margin-top:var(--s-7)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
@media (min-width:900px){
  .col-l-5{grid-column:1/span 5}
  .col-l-6{grid-column:1/span 6}
  .col-l-7{grid-column:1/span 7}
  .col-r-5{grid-column:8/span 5}
  .col-r-6{grid-column:7/span 6}
  .col-r-7{grid-column:6/span 7}
  .col-mid-8{grid-column:3/span 8}
  .col-offset-1-6{grid-column:2/span 6}
  .col-offset-8-4{grid-column:9/span 4}
}
@media (max-width:899px){.grid>*{grid-column:1/-1}}

/* 5. Header + nav ----------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:60;transition:background-color var(--dur-2) var(--ease-soft),box-shadow var(--dur-2) var(--ease-soft),backdrop-filter var(--dur-2) var(--ease-soft)}
.site-header.is-scrolled{background:rgba(247,245,242,.86);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);min-height:76px}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand-mark{width:auto;height:34px;flex:none;object-fit:contain}
@media (max-width:520px){.brand-mark{height:30px}}
.brand-word{font-family:var(--f-display);font-size:1.38rem;letter-spacing:-.015em;line-height:1;white-space:nowrap}
.brand-word em{font-style:italic;color:var(--violet)}
.nav-primary{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem)}
.nav-list{display:flex;gap:clamp(.9rem,1.6vw,1.75rem);list-style:none;margin:0;padding:0}
.nav-list a{position:relative;display:inline-block;padding:.45rem 0;font-size:.9375rem;color:var(--ink-2);text-decoration:none;transition:color var(--dur-1) var(--ease-out)}
.nav-list a::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1px;background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease-out)}
.nav-list a:hover{color:var(--ink)}
.nav-list a:hover::after,.nav-list a[aria-current="page"]::after{transform:scaleX(1)}
.nav-list a[aria-current="page"]{color:var(--ink)}
.nav-toggle{display:none;align-items:center;gap:.6rem;background:none;border:1px solid var(--line-strong);border-radius:999px;padding:.55rem .95rem;font:500 .875rem/1 var(--f-body);color:var(--ink);cursor:pointer;min-height:44px}
.nav-toggle-lines{position:relative;width:16px;height:9px}
.nav-toggle-lines::before,.nav-toggle-lines::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform var(--dur-2) var(--ease-out),top var(--dur-2) var(--ease-out)}
.nav-toggle-lines::before{top:0}
.nav-toggle-lines::after{top:7.5px}
.nav-open .nav-toggle-lines::before{top:3.75px;transform:rotate(45deg)}
.nav-open .nav-toggle-lines::after{top:3.75px;transform:rotate(-45deg)}
.mobile-panel{position:fixed;inset:0;z-index:55;background:var(--paper);padding:110px var(--gutter) var(--s-7);display:flex;flex-direction:column;justify-content:space-between;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2);overflow-y:auto}
.nav-open .mobile-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mobile-panel ul{list-style:none;margin:0;padding:0}
.mobile-panel li+li{border-top:1px solid var(--line)}
.mobile-panel a.m-link{display:flex;justify-content:space-between;align-items:baseline;padding:.9rem 0;font-family:var(--f-display);font-size:clamp(1.7rem,6vw,2.4rem);letter-spacing:-.015em;text-decoration:none;color:var(--ink)}
.mobile-panel a.m-link[aria-current="page"]{color:var(--violet);font-style:italic}
.mobile-panel .m-link span{font-family:var(--f-mono);font-size:var(--fs-label);color:var(--ink-3)}
.mobile-panel .btn{margin-top:var(--s-6);width:100%}
body.nav-open{overflow:hidden}
@media (max-width:1060px){
  .nav-list,.nav-primary>.btn{display:none}
  .nav-toggle{display:inline-flex}
}
@media (min-width:1061px){.mobile-panel{display:none}}

/* 6. Buttons --------------------------------------------------------------- */
.btn{--btn-bg:var(--violet);--btn-fg:#FBF8FD;--btn-bd:var(--violet);display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:48px;padding:.8rem 1.35rem;border:1px solid var(--btn-bd);border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font:500 .96875rem/1.1 var(--f-body);letter-spacing:.005em;text-decoration:none;cursor:pointer;white-space:nowrap;text-shadow:none;transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.btn .arrow{width:16px;height:16px;flex:none;transition:transform var(--dur-2) var(--ease-out)}
.btn:hover{--btn-bg:var(--violet-hover);--btn-bd:var(--violet-hover)}
.btn:hover .arrow{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line-strong)}
.btn--ghost:hover{--btn-bg:var(--ink);--btn-fg:var(--paper);--btn-bd:var(--ink)}
.btn--light{--btn-bg:var(--on-plum);--btn-fg:var(--plum);--btn-bd:var(--on-plum)}
.btn--light:hover{--btn-bg:#fff;--btn-fg:var(--violet);--btn-bd:#fff}
.btn--outline-light{--btn-bg:transparent;--btn-fg:var(--on-plum);--btn-bd:rgba(245,240,248,.45)}
.btn--outline-light:hover{--btn-bg:var(--on-plum);--btn-fg:var(--plum);--btn-bd:var(--on-plum)}
.btn--sm{min-height:40px;padding:.6rem 1.05rem;font-size:.9rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
@media (pointer:coarse){.btn{min-height:48px}.btn--sm{min-height:44px}}

/* 7. Labels + links -------------------------------------------------------- */
.text-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:500;color:var(--violet);text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:2px;transition:background-size var(--dur-2) var(--ease-out),color var(--dur-1)}
.text-link:hover{background-size:100% 1px;color:var(--violet-hover)}
.text-link .arrow{width:15px;height:15px;transition:transform var(--dur-2) var(--ease-out)}
.text-link:hover .arrow{transform:translateX(3px)}
.prose a,.inline-link{color:var(--violet);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:var(--violet-soft);transition:text-decoration-color var(--dur-1)}
.prose a:hover,.inline-link:hover{text-decoration-color:var(--violet)}
.tag{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border:1px solid var(--line);border-radius:999px;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:var(--panel)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 var(--s-6);padding:0;font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.breadcrumb a{text-decoration:none;color:var(--ink-3);transition:color var(--dur-1)}
.breadcrumb a:hover{color:var(--violet)}
.breadcrumb li+li::before{content:"/";margin-right:.5rem;color:var(--line-strong)}

/* 8. Sections -------------------------------------------------------------- */
.section{position:relative;padding-block:var(--section-y)}
.section--tight{padding-block:calc(var(--section-y)*.6)}
.section--mist{background:var(--mist)}
.section--deep{background:var(--paper-deep)}
.section--panel{background:var(--panel)}
.section--plum{background:var(--plum);color:var(--on-plum)}
.section--plum h2,.section--plum h3,.section--plum h4{color:var(--on-plum)}
.section--plum .lead,.section--plum .body-lg,.section--plum p{color:var(--on-plum-2)}
.section--plum .label{color:var(--on-plum-2)}
.section--plum .kicker .folio{color:var(--violet-soft)}
.section--plum .kicker .rule{background:var(--on-plum-line)}
.section--plum h2 em,.section--plum h3 em{color:var(--violet-soft)}
.section-head{display:grid;gap:var(--s-5);margin-bottom:clamp(3rem,2rem + 3vw,5rem)}
.section-head--split{grid-template-columns:1fr}
@media (min-width:900px){.section-head--split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:clamp(2rem,4vw,5rem)}}
.section-head h2{max-width:18ch}
.divider{height:1px;background:var(--line)}

/* 9. Home hero (editorial, no film) ---------------------------------------- */
.home-hero{position:relative;padding-top:clamp(3rem,1.2rem + 6.5vw,8rem);padding-bottom:clamp(3.5rem,2rem + 5vw,7rem)}
.home-hero::after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;background:var(--line)}
.home-hero .label{margin-bottom:var(--s-5)}
.home-hero-title{font-family:var(--f-display);font-weight:400;font-size:clamp(2.9rem,1.2rem + 5vw,6.2rem);line-height:1.01;letter-spacing:-.03em;max-width:15ch}
.home-hero-row{display:grid;gap:var(--s-7);margin-top:clamp(2.5rem,1.5rem + 3vw,4.5rem)}
@media (min-width:1000px){.home-hero-row{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2.5rem,5vw,6rem);align-items:start}}
.home-hero .lead{max-width:46ch}
.home-hero .btn-row{margin-top:var(--s-6)}
.home-hero .hero-paths{max-width:none}
@media (max-width:520px){.home-hero .btn{width:100%}}
/* the two doors: published or still writing */
.hero-paths{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong);max-width:36rem}
.hero-paths li{border-bottom:1px solid var(--line-strong)}
.hero-paths a{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem 1.5rem;padding:1.35rem 0;text-decoration:none;color:var(--ink)}
.hero-paths .q{font-family:var(--f-display);font-size:clamp(1.9rem,1.1rem + 2.2vw,3.2rem);line-height:1.05;letter-spacing:-.022em;transition:color var(--dur-2) var(--ease-out)}
.hero-paths .a{display:inline-flex;align-items:center;gap:.6rem;font-weight:500;color:var(--violet);white-space:nowrap;text-shadow:none}
.hero-paths .arrow{width:16px;height:16px;transition:transform var(--dur-2) var(--ease-out)}
.hero-paths a:hover .q{color:var(--violet)}
.hero-paths a:hover .arrow{transform:translateX(4px)}
@media (max-width:640px){.hero-paths .q{font-size:clamp(1.5rem,1.1rem + 1.6vw,2rem)}}
@media (max-width:560px){.hero-paths a{flex-direction:column;align-items:flex-start;gap:.4rem}}

/* 10. Page heroes (inner pages) ------------------------------------------- */
.page-hero{position:relative;padding-top:clamp(3.5rem,2rem + 6vw,8rem);padding-bottom:clamp(3.5rem,2rem + 5vw,7rem)}
.page-hero h1{max-width:17ch}
.page-hero .lead{margin-top:var(--s-6);max-width:44ch}
.page-hero .btn-row{margin-top:var(--s-7)}
.page-hero--split .grid{align-items:end}
.page-hero--rule{border-bottom:1px solid var(--line)}
.page-hero-figure{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;background:var(--mist)}
.page-hero-figure img{width:100%;height:100%;object-fit:cover}
.page-hero-figure--wide{aspect-ratio:16/9}
.page-hero .label{margin-bottom:var(--s-5)}

/* 11. Editorial blocks ----------------------------------------------------- */
.figure{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--mist)}
.figure img{width:100%;height:100%;object-fit:cover}
.figure--portrait{aspect-ratio:4/5}
.figure--land{aspect-ratio:3/2}
.figure--wide{aspect-ratio:21/9}
.figure figcaption,.fig-caption{margin-top:var(--s-3);font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.figure .drift{animation:slowDrift 36s var(--ease-soft) infinite alternate;animation-delay:-9s;transform-origin:60% 50%}
@keyframes slowDrift{from{transform:scale(1)}to{transform:scale(1.06) translate3d(-1%,0,0)}}
.statement{font-family:var(--f-display);font-size:clamp(2rem,1.3rem + 2.6vw,3.6rem);line-height:1.1;letter-spacing:-.02em}
.statement em{font-style:italic;color:var(--violet)}
.signs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.signs li{display:grid;grid-template-columns:2.2rem 1fr;gap:var(--s-3);padding:1.05rem 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.signs li::before{content:"";width:9px;height:9px;margin-top:.55em;border-radius:50%;border:1px solid var(--violet)}
.section--plum .signs,.section--plum .signs li{border-color:var(--on-plum-line)}
.pillars{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line-strong)}
@media (min-width:900px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{padding:var(--s-7) 0 var(--s-6);border-bottom:1px solid var(--line)}
@media (min-width:900px){.pillar{padding:var(--s-7) clamp(1.25rem,2.5vw,2.75rem) var(--s-6);border-bottom:0;border-left:1px solid var(--line)}.pillar:first-child{border-left:0;padding-left:0}}
.pillar .num{font-family:var(--f-display);font-style:italic;font-size:clamp(3rem,2rem + 3vw,4.75rem);line-height:1;color:var(--violet);margin-bottom:var(--s-5)}
.pillar h3{margin-bottom:var(--s-4)}
.pillar p{color:var(--ink-2)}
.quote-block{text-align:center;max-width:26ch;margin-inline:auto}
.quote-block .serif-quote{color:var(--ink)}
.quote-mark{display:block;width:auto;height:56px;margin:0 auto var(--s-6)}
.two-col-list{display:grid;gap:var(--s-7)}
@media (min-width:900px){.two-col-list{grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,6rem)}}
.fit-col h3{margin-bottom:var(--s-5)}
.fit-col .label{display:block;margin-bottom:var(--s-4)}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{position:relative;padding:.85rem 0 .85rem 2rem;border-bottom:1px solid var(--line);color:var(--ink-2)}
.checklist li::before{content:"";position:absolute;left:0;top:1.28rem;width:14px;height:8px;border-left:1.5px solid var(--violet);border-bottom:1.5px solid var(--violet);transform:rotate(-45deg)}
.checklist--muted li::before{width:12px;height:1.5px;border:0;background:var(--line-strong);transform:none;top:1.45rem}
.pull{border-left:2px solid var(--violet);padding-left:var(--s-6)}

/* 12. Cards ---------------------------------------------------------------- */
.card{position:relative;display:flex;flex-direction:column;gap:var(--s-4);padding:clamp(1.5rem,1.2rem + 1vw,2.25rem);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);transition:border-color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.card:hover{border-color:var(--violet-soft);box-shadow:var(--shadow-soft)}
.card .label{margin-bottom:var(--s-2)}
.card h3{font-size:clamp(1.3rem,1.15rem + .6vw,1.65rem)}
.card p{color:var(--ink-2)}
.card .text-link{margin-top:auto;padding-top:var(--s-3)}
.card-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card-grid{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:1fr}
@media (min-width:700px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.card-grid--3{grid-template-columns:repeat(3,1fr)}}
.card--quiet{background:transparent}
.card--mist{background:var(--mist);border-color:transparent}
/* insight card */
.insight-card{display:flex;flex-direction:column;gap:var(--s-4);text-decoration:none;color:inherit;position:relative}
.insight-card .thumb{aspect-ratio:3/2;border-radius:var(--radius-lg);overflow:hidden;background:var(--mist)}
.insight-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.insight-card:hover .thumb img{transform:scale(1.035)}
.insight-card h3{font-size:clamp(1.3rem,1.15rem + .6vw,1.6rem);transition:color var(--dur-1)}
.insight-card:hover h3{color:var(--violet)}
.insight-card .meta{display:flex;gap:var(--s-3);align-items:baseline}
.insight-card p{color:var(--ink-2)}
.insight-grid{display:grid;gap:clamp(2.5rem,4vw,3.5rem) clamp(1.25rem,2.4vw,2.5rem);grid-template-columns:1fr}
@media (min-width:760px){.insight-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.insight-grid{grid-template-columns:repeat(3,1fr)}}
.insight-feature{display:grid;gap:clamp(1.5rem,3vw,3.5rem);align-items:center;text-decoration:none;color:inherit}
@media (min-width:900px){.insight-feature{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.insight-feature .thumb{aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;background:var(--mist)}
.insight-feature .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.insight-feature:hover .thumb img{transform:scale(1.03)}
.insight-feature h2{font-size:clamp(1.9rem,1.3rem + 2vw,3rem);transition:color var(--dur-1)}
.insight-feature:hover h2{color:var(--violet)}
.filter-row{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-8)}
.filter-row button{font:500 .875rem/1 var(--f-body);padding:.6rem 1rem;min-height:40px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--ink-2);cursor:pointer;transition:background-color var(--dur-1),color var(--dur-1),border-color var(--dur-1)}
.filter-row button:hover{border-color:var(--ink);color:var(--ink)}
.filter-row button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* 13. Service components --------------------------------------------------- */
/* contents-page style index of services */
.service-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong);counter-reset:svc}
.service-index li{border-bottom:1px solid var(--line)}
.service-row{display:grid;grid-template-columns:3rem 1fr auto;gap:var(--s-5);align-items:baseline;padding:clamp(1.4rem,1rem + 1.2vw,2.2rem) 0;text-decoration:none;color:inherit;position:relative}
@media (min-width:900px){.service-row{grid-template-columns:4.5rem minmax(0,5fr) minmax(0,6fr) 2.5rem}}
.service-row .n{font-family:var(--f-mono);font-size:var(--fs-label);color:var(--violet);letter-spacing:.08em}
.service-row h3{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.4rem);transition:color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.service-row p{color:var(--ink-2);margin:0;max-width:48ch}
.service-row .go{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--ink);transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out);align-self:center}
.service-row .go svg{width:16px;height:16px}
.service-row:hover h3{color:var(--violet);transform:translateX(6px)}
.service-row:hover .go{background:var(--violet);border-color:var(--violet);color:#fff;transform:rotate(-45deg)}
@media (max-width:899px){.service-row p{grid-column:2/-1}.service-row .go{grid-row:1;grid-column:3}}
/* deliverables */
.deliverables{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:dl}
.deliverables li{counter-increment:dl;display:grid;grid-template-columns:3.5rem 1fr;gap:var(--s-4);padding:var(--s-5) 0;border-top:1px solid var(--line)}
.deliverables li::before{content:counter(dl,decimal-leading-zero);font-family:var(--f-mono);font-size:var(--fs-label);color:var(--violet);padding-top:.35rem;letter-spacing:.08em}
.deliverables h4{margin-bottom:.35rem}
.deliverables p{color:var(--ink-2);margin:0}
.section--plum .deliverables li{border-color:var(--on-plum-line)}
.section--plum .deliverables li::before{color:var(--violet-soft)}
.service-nav{display:grid;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;grid-template-columns:1fr}
.service-nav a{border-bottom:1px solid var(--line)}
.service-nav a:last-child{border-bottom:0}
@media (min-width:700px){
  .service-nav{grid-template-columns:repeat(2,1fr)}
  .service-nav a{border-right:1px solid var(--line)}
  .service-nav a:nth-child(2n){border-right:0}
}
@media (min-width:1080px){
  .service-nav{grid-template-columns:repeat(3,1fr)}
  .service-nav a:nth-child(2n){border-right:1px solid var(--line)}
  .service-nav a:nth-child(3n){border-right:0}
}
.service-nav a{display:flex;flex-direction:column;gap:.5rem;padding:var(--s-6);background:var(--panel);text-decoration:none;color:inherit;transition:background-color var(--dur-2) var(--ease-out)}
.service-nav a:hover{background:var(--mist)}
.service-nav a[aria-current="page"]{background:var(--mist)}
.service-nav a h4{font-family:var(--f-display);font-weight:400;font-size:1.35rem}
.service-nav a span{font-size:var(--fs-small);color:var(--ink-3)}
.aside-card{position:sticky;top:110px;padding:var(--s-6);border-radius:var(--radius-lg);background:var(--mist)}
.aside-card h3{font-size:1.45rem;margin-bottom:var(--s-4)}
.aside-card p{color:var(--ink-2)}
.aside-card .btn{margin-top:var(--s-5);width:100%}

/* 14. Method --------------------------------------------------------------- */
.method{display:grid;gap:var(--s-7)}
@media (min-width:960px){.method{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,6vw,7rem)}.method-head{position:sticky;top:120px;align-self:start}}
.method-steps{list-style:none;margin:0;padding:0;position:relative}
.method-step{position:relative;display:grid;grid-template-columns:3.5rem 1fr;gap:var(--s-5);padding-bottom:clamp(2.5rem,2rem + 2vw,4rem)}
.method-step:last-child{padding-bottom:0}
.method-step .dot{position:relative;width:3.5rem;display:flex;justify-content:center}
.method-step .dot::before{content:"";position:absolute;top:2.6rem;bottom:-.25rem;left:50%;width:1px;background:var(--line-strong);transform:translateX(-50%)}
.method-step:last-child .dot::before{display:none}
.method-step .dot span{position:relative;z-index:1;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line-strong);background:var(--paper);font-family:var(--f-mono);font-size:.75rem;color:var(--ink-2);transition:background-color .6s var(--ease-out),color .6s var(--ease-out),border-color .6s var(--ease-out)}
.method-step.in .dot span{background:var(--violet);border-color:var(--violet);color:#fff}
.method-step h3{margin-bottom:var(--s-3);padding-top:.35rem}
.method-step p{color:var(--ink-2)}
.section--plum .method-step .dot span{background:var(--plum);border-color:var(--on-plum-line);color:var(--on-plum-2)}
.section--plum .method-step.in .dot span{background:var(--violet);border-color:var(--violet-soft);color:#fff}
.section--plum .method-step .dot::before{background:var(--on-plum-line)}
.section--plum .method-step p,.section--plum .method-step .small{color:var(--on-plum-2)}
.section--mist .method-step .dot span{background:var(--mist)}
.section--mist .method-step.in .dot span{background:var(--violet);border-color:var(--violet);color:#fff}

/* 15. Reader path (the one interactive moment) ----------------------------- */
.readerpath{display:grid;gap:var(--s-7)}
@media (min-width:960px){.readerpath{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,5vw,6rem);align-items:start}}
.rp-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:var(--s-6)}
.rp-track::before{content:"";position:absolute;left:12.5%;right:12.5%;top:21px;height:1px;background:var(--line-strong)}
.rp-track .rp-fill{position:absolute;left:12.5%;top:21px;height:2px;margin-top:-.5px;width:75%;background:var(--violet);transform-origin:left;transform:scaleX(var(--rp,0));transition:transform .9s var(--ease-out)}
.rp-stop{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.7rem;background:none;border:0;padding:0 .25rem;cursor:pointer;font:500 .9rem/1.2 var(--f-body);color:var(--ink-2);min-height:44px}
.rp-stop .pt{width:43px;height:43px;border-radius:50%;border:1px solid var(--line-strong);background:var(--paper);display:grid;place-items:center;font-family:var(--f-mono);font-size:.72rem;transition:background-color .5s var(--ease-out),border-color .5s var(--ease-out),color .5s var(--ease-out),transform .5s var(--ease-out)}
.rp-stop:hover .pt{border-color:var(--violet);color:var(--violet)}
.rp-stop[aria-selected="true"]{color:var(--ink)}
.rp-stop[aria-selected="true"] .pt{background:var(--violet);border-color:var(--violet);color:#fff;transform:scale(1.08)}
.rp-stop.is-passed .pt{border-color:var(--violet);color:var(--violet)}
.section--mist .rp-stop .pt{background:var(--mist)}
.section--mist .rp-stop[aria-selected="true"] .pt{background:var(--violet)}
.rp-panel{padding:clamp(1.5rem,1rem + 2vw,2.75rem);border-radius:var(--radius-lg);background:var(--panel);border:1px solid var(--line);min-height:18rem}
.rp-panel[hidden]{display:none}
.rp-panel .label{display:block;margin-bottom:var(--s-4)}
.rp-panel h3{margin-bottom:var(--s-4)}
.rp-panel .rp-cols{display:grid;gap:var(--s-5);margin-top:var(--s-5)}
@media (min-width:640px){.rp-panel .rp-cols{grid-template-columns:1fr 1fr}}
.rp-panel .rp-cols h4{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--ink-3);margin-bottom:var(--s-2)}
.rp-panel .rp-cols p{color:var(--ink-2);font-size:var(--fs-small)}
.js .rp-panel.is-entering{animation:panelIn .6s var(--ease-out)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:560px){.rp-stop{font-size:.78rem}.rp-stop .pt{width:38px;height:38px}.rp-track::before,.rp-track .rp-fill{top:19px}}

/* founder portrait and bio */
.portrait{margin:0;max-width:420px}
.portrait img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-lg);background:var(--mist)}
.portrait figcaption{margin-top:var(--s-3);font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.bio{margin-top:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--line)}
.bio p{color:var(--ink-2)}
.bio p:first-child::first-letter{float:left;font-family:var(--f-display);font-size:3.4em;line-height:.84;padding:.06em .1em 0 0;color:var(--violet)}

.bio-contact{margin-top:var(--s-5);font-size:var(--fs-small);color:var(--ink-3)}

/* the portfolio shelf */
.shelf{display:flex;flex-wrap:wrap;gap:clamp(1.75rem,3vw,2.75rem) clamp(1.25rem,2.4vw,2.5rem);align-items:flex-end}
.shelf figure{margin:0;width:150px;display:flex;flex-direction:column;gap:.75rem}
.shelf img{display:block;width:auto;max-width:100%;height:160px;object-fit:contain;align-self:flex-start;border-radius:2px;box-shadow:0 1px 2px rgba(30,21,40,.14),0 16px 30px -20px rgba(30,21,40,.5);transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.shelf figure:hover img{transform:translateY(-5px);box-shadow:0 2px 4px rgba(30,21,40,.16),0 22px 38px -20px rgba(30,21,40,.55)}
.shelf figcaption{font-size:.8125rem;line-height:1.45;color:var(--ink-2)}
.shelf .by{display:block;margin-top:.2rem;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;color:var(--ink-3)}
.shelf--compact figure{width:118px}
.shelf--compact img{height:124px}
@media (max-width:520px){.shelf figure{width:calc(50% - .75rem)}.shelf img{height:140px}}

/* slow horizontal scrollers: reviews and book covers */
.marquee{position:relative;overflow:hidden;padding-block:var(--s-2);--fade:clamp(1.5rem,6vw,7rem);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%)}
.marquee-track{display:flex;align-items:stretch;gap:clamp(1rem,2vw,1.75rem);width:max-content;padding-inline:var(--gutter);animation:marqueeScroll var(--speed,90s) linear infinite;animation-play-state:paused;will-change:transform}
.marquee.in .marquee-track{animation-play-state:running}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marqueeScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.quotes-track .quote-card{width:min(23rem,78vw);flex:none}
.shelf-track figure{margin:0;flex:none;display:flex;align-items:flex-end}
.shelf-track img{display:block;width:auto;height:clamp(140px,15vw,180px);object-fit:contain;border-radius:2px;box-shadow:0 1px 2px rgba(30,21,40,.14),0 16px 30px -20px rgba(30,21,40,.5)}
@media (prefers-reduced-motion: reduce){
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none;width:auto}
}

/* author reviews (real quotes, supplied by the client) */
.quotes{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:1fr}
@media (min-width:760px){.quotes{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.quotes--3{grid-template-columns:repeat(3,1fr)}}
.quote-card{display:flex;flex-direction:column;gap:var(--s-4);margin:0;padding:clamp(1.5rem,1.2rem + 1vw,2.25rem);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.quote-card:hover{border-color:var(--violet-soft);box-shadow:var(--shadow-soft)}
.quote-card .qm{width:24px;height:24px;color:var(--violet-soft);flex:none}
.quote-card blockquote{margin:0;font-family:var(--f-display);font-size:clamp(1.05rem,1rem + .4vw,1.3rem);line-height:1.5;letter-spacing:-.005em;color:var(--ink)}
.quote-card figcaption{margin-top:auto;padding-top:var(--s-2);font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.section--mist .quote-card{border-color:transparent}
.section--plum .quote-card{background:var(--plum-2);border-color:var(--on-plum-line)}
.section--plum .quote-card blockquote{color:var(--on-plum)}
.section--plum .quote-card figcaption{color:var(--on-plum-2)}
.quotes-note{margin-top:var(--s-6);font-size:var(--fs-small);color:var(--ink-3)}

/* 16. Proof slots (no invented proof: designed to be filled later) -------- */
.proof-slot{display:grid;gap:var(--s-5);padding:clamp(2rem,1.5rem + 2vw,3.5rem);border:1px dashed var(--line-strong);border-radius:var(--radius-lg);background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(185,164,216,.08) 14px 15px)}
@media (min-width:900px){.proof-slot{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}}
.proof-slot h3{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem)}
.proof-slot p{color:var(--ink-2)}

/* 17. CTA components ------------------------------------------------------- */
.cta-band{position:relative;overflow:hidden;background:var(--plum);color:var(--on-plum);padding-block:clamp(5rem,3.5rem + 7vw,10rem)}
.cta-band .cta-media{position:absolute;inset:0;opacity:.34;background-size:cover;background-position:70% 50%;mix-blend-mode:luminosity}
.cta-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--plum) 0%,rgba(34,22,48,.88) 40%,rgba(34,22,48,.35) 100%);pointer-events:none}
.cta-band .wrap{position:relative;z-index:1}
.cta-band h2{color:var(--on-plum);max-width:15ch;font-size:clamp(2.3rem,1.5rem + 3vw,4.4rem);line-height:1.04}
.cta-band h2 em{color:var(--violet-soft)}
.cta-band p{color:var(--on-plum-2);max-width:46ch;font-size:var(--fs-lead);line-height:1.5;margin-top:var(--s-5)}
.cta-band .btn-row{margin-top:var(--s-7)}
.cta-band .label{color:var(--violet-soft);margin-bottom:var(--s-5);display:block}
.cta-inline{display:grid;gap:var(--s-5);padding:clamp(1.75rem,1.2rem + 2vw,3rem);border-radius:var(--radius-lg);background:var(--mist);align-items:center}
@media (min-width:800px){.cta-inline{grid-template-columns:1fr auto}}
.cta-inline h3{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem)}
.cta-inline p{color:var(--ink-2);margin-top:var(--s-2)}

/* 18. Forms ---------------------------------------------------------------- */
.form{display:grid;gap:var(--s-5)}
.form-row{display:grid;gap:var(--s-5)}
@media (min-width:700px){.form-row--2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.5rem}
.field label,.field legend{font-size:.9rem;font-weight:500;color:var(--ink)}
.field .opt{font-weight:400;color:var(--ink-3)}
.field .hint{font-size:.85rem;color:var(--ink-3);margin:0}
.input,.select,.textarea{width:100%;font:400 1rem/1.4 var(--f-body);color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);padding:.85rem 1rem;min-height:50px;transition:border-color var(--dur-1),box-shadow var(--dur-1),background-color var(--dur-1);appearance:none;-webkit-appearance:none}
.textarea{min-height:150px;resize:vertical;line-height:1.55}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23463C52' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-2)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-wash)}
.input::placeholder,.textarea::placeholder{color:#8A8094}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:#A4263C}
.field .error{display:none;font-size:.85rem;color:#A4263C}
.field.has-error .error{display:block}
.choice-group{border:0;margin:0;padding:0;display:grid;gap:.6rem}
.choice-group legend{margin-bottom:.5rem}
.choices{display:flex;flex-wrap:wrap;gap:.5rem}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.choice span{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1rem;border:1px solid var(--line-strong);border-radius:999px;font-size:.92rem;color:var(--ink-2);background:var(--panel);transition:background-color var(--dur-1),color var(--dur-1),border-color var(--dur-1)}
.choice input:hover+span{border-color:var(--ink)}
.choice input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.choice input:focus-visible+span{outline:2px solid var(--violet);outline-offset:2px}
.check{display:flex;gap:.75rem;align-items:flex-start;font-size:.9rem;color:var(--ink-2)}
.check input{width:20px;height:20px;margin-top:.15rem;accent-color:var(--violet);flex:none}
.form-note{font-size:.85rem;color:var(--ink-3)}
.form-success{display:none;padding:clamp(2rem,1.5rem + 2vw,3rem);border-radius:var(--radius-lg);background:var(--mist)}
.form-success h3{margin-bottom:var(--s-4)}
.form.is-sent{display:none}
.form.is-sent+.form-success{display:block}
.form-panel{padding:clamp(1.5rem,1rem + 2.5vw,3.25rem);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg)}
/* manuscript submission block */
.submit-ms{border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.1rem,.9rem + 1vw,1.6rem);background:var(--mist);display:grid;gap:var(--s-5)}
.submit-ms legend{padding:0 .5rem;margin-left:-.5rem;font-family:var(--f-display);font-size:1.25rem;font-weight:400;color:var(--ink)}
.submit-ms>.hint{margin-top:-.25rem}
.submit-ms .input{background:var(--panel)}
.input-file{padding:.65rem .75rem;cursor:pointer;line-height:1.3}
.input-file::file-selector-button{margin-right:.9rem;padding:.55rem .95rem;min-height:38px;border:1px solid var(--line-strong);border-radius:999px;background:var(--panel);color:var(--ink);font:500 .9rem/1 var(--f-body);cursor:pointer;transition:background-color var(--dur-1),color var(--dur-1),border-color var(--dur-1)}
.input-file::file-selector-button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (pointer:coarse){.input-file::file-selector-button{min-height:44px}}

/* 19. FAQ ------------------------------------------------------------------ */
.faq-group+.faq-group{margin-top:var(--s-9)}
.faq-group h2{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.3rem);margin-bottom:var(--s-5)}
.faq{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:grid;grid-template-columns:1fr 28px;gap:var(--s-5);align-items:center;padding:1.35rem 0;cursor:pointer;font-family:var(--f-display);font-size:clamp(1.15rem,1.05rem + .45vw,1.4rem);line-height:1.3;color:var(--ink);transition:color var(--dur-1)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--violet)}
.faq summary .pm{position:relative;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform var(--dur-2) var(--ease-out)}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary .pm{background:var(--violet);border-color:var(--violet);color:#fff}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq .answer{padding:0 3.5rem 1.6rem 0;color:var(--ink-2);max-width:68ch}
.js .faq details[open] .answer{animation:panelIn .5s var(--ease-out)}

/* 20. Article -------------------------------------------------------------- */
.article-head{padding-top:clamp(3rem,2rem + 5vw,7rem);padding-bottom:var(--s-7)}
.article-head h1{font-size:clamp(2.4rem,1.5rem + 3.4vw,4.4rem);max-width:20ch}
.article-meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);align-items:baseline;margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}
.article-hero{margin-bottom:clamp(3rem,2rem + 4vw,6rem)}
.article-layout{display:grid;gap:var(--s-7)}
@media (min-width:1080px){.article-layout{grid-template-columns:minmax(0,3fr) minmax(0,8fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem)}}
.toc{align-self:start;font-size:var(--fs-small)}
@media (min-width:1080px){.toc{position:sticky;top:120px}}
.toc .label{display:block;margin-bottom:var(--s-4)}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a{display:block;padding:.45rem 0 .45rem 1rem;margin-left:-1px;border-left:1px solid transparent;text-decoration:none;color:var(--ink-3);transition:color var(--dur-1),border-color var(--dur-1)}
.toc a:hover{color:var(--ink)}
.toc a.is-active{color:var(--violet);border-left-color:var(--violet)}
.prose{font-size:1.125rem;line-height:1.72;color:var(--ink-2)}
.prose>*{max-width:68ch}
.prose h2{font-size:clamp(1.7rem,1.35rem + 1.3vw,2.35rem);color:var(--ink);margin:2.4em 0 .7em}
.prose h3{font-size:clamp(1.3rem,1.15rem + .6vw,1.6rem);color:var(--ink);margin:2em 0 .6em}
.prose p{margin:0 0 1.25em}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.4em}
.prose li{margin-bottom:.55em}
.prose li::marker{color:var(--violet)}
.prose strong{color:var(--ink);font-weight:600}
.prose .dropcap::first-letter{float:left;font-family:var(--f-display);font-size:4.6em;line-height:.82;padding:.08em .12em 0 0;color:var(--violet)}
.prose blockquote{margin:2.2em 0;padding:0 0 0 1.5em;border-left:2px solid var(--violet);font-family:var(--f-display);font-style:italic;font-size:1.45rem;line-height:1.4;color:var(--ink)}
.prose .pullquote{max-width:none;margin:2.8em 0;padding:2rem 0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);font-family:var(--f-display);font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.prose .callout{margin:2.2em 0;padding:1.6rem 1.75rem;border-radius:var(--radius-lg);background:var(--mist);color:var(--ink-2);font-size:1.05rem}
.prose .callout .label{display:block;margin-bottom:.6rem;color:var(--violet)}
.prose figure{margin:2.6em 0}
.prose figure img{border-radius:var(--radius-lg)}
.prose figcaption{margin-top:.8rem;font-size:.85rem;color:var(--ink-3)}
.author-box{display:grid;grid-template-columns:56px 1fr;gap:var(--s-4);align-items:start;padding:var(--s-6) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:var(--s-8)}
.author-box .mono-mark{width:56px;height:56px;border-radius:50%;background:var(--mist);display:grid;place-items:center;font-family:var(--f-display);font-style:italic;font-size:1.5rem;color:var(--violet)}
.author-box h4{font-family:var(--f-display);font-weight:400;font-size:1.25rem}
.author-box p{font-size:var(--fs-small);color:var(--ink-3);margin-top:.35rem}
.share-row{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;margin-top:var(--s-6)}
.reading-bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;background:transparent;pointer-events:none}
.reading-bar span{display:block;height:100%;background:var(--violet);transform-origin:left;transform:scaleX(var(--read,0))}

/* 21. Legal ---------------------------------------------------------------- */
.legal .prose h2{font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem);margin-top:2em}
.legal-updated{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.legal-note{margin-bottom:var(--s-7);padding:1rem 1.25rem;border-left:2px solid var(--violet);background:var(--mist);font-size:var(--fs-small);color:var(--ink-2)}

/* 22. 404 ------------------------------------------------------------------ */
.notfound{min-height:calc(100svh - 76px);display:grid;align-items:center;padding-block:var(--s-9)}
.notfound .display{max-width:12ch}
.notfound .lost-path{width:min(520px,100%);height:auto;color:var(--violet);margin-bottom:var(--s-7)}
.notfound .lost-path path{stroke-dasharray:6 8}

/* 23. Footer --------------------------------------------------------------- */
.site-footer{position:relative;background:var(--plum);color:var(--on-plum-2);padding-top:clamp(4rem,3rem + 5vw,8rem);overflow:hidden}
.footer-top{display:grid;gap:var(--s-7);padding-bottom:clamp(3rem,2rem + 4vw,6rem);border-bottom:1px solid var(--on-plum-line)}
@media (min-width:960px){.footer-top{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}}
.footer-top .serif-quote{color:var(--on-plum);font-style:normal;max-width:18ch}
.footer-top .serif-quote em{font-style:italic;color:var(--violet-soft)}
.footer-top .btn-row{justify-content:flex-start}
@media (min-width:960px){.footer-top .btn-row{justify-content:flex-end}}
.footer-cols{display:grid;gap:var(--s-7) var(--s-6);grid-template-columns:repeat(2,minmax(0,1fr));padding-block:clamp(3rem,2rem + 3vw,4.5rem)}
@media (min-width:960px){.footer-cols{grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.4fr))}}
.footer-brand{grid-column:1/-1}
@media (min-width:960px){.footer-brand{grid-column:auto}}
.footer-brand .brand{color:var(--on-plum)}
.footer-brand .brand-mark{color:var(--violet-soft)}
.footer-brand .brand-word em{color:var(--violet-soft)}
.footer-brand p{margin-top:var(--s-5);max-width:34ch;font-size:var(--fs-small);line-height:1.6}
.footer-col h2{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--on-plum-2);margin-bottom:var(--s-5)}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.footer-col a{color:var(--on-plum);text-decoration:none;font-size:.95rem;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size var(--dur-2) var(--ease-out),color var(--dur-1)}
.footer-col a:hover{background-size:100% 1px;color:#fff}
.footer-bottom{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);justify-content:space-between;align-items:baseline;padding-block:var(--s-6);border-top:1px solid var(--on-plum-line);font-size:.85rem}
.footer-bottom a{color:var(--on-plum-2);text-decoration:none}
.footer-bottom a:hover{color:var(--on-plum)}
.footer-bottom ul{list-style:none;display:flex;gap:var(--s-5);margin:0;padding:0}
.footer-word{font-family:var(--f-display);font-style:italic;font-size:clamp(4rem,2rem + 13vw,15rem);line-height:.8;letter-spacing:-.04em;color:rgba(245,240,248,.06);white-space:nowrap;margin:0 0 -.12em;user-select:none;pointer-events:none;text-align:center}

/* 23b. Page components ------------------------------------------------------ */
.site-footer{box-shadow:inset 0 1px 0 var(--on-plum-line)}
.cta-band h2{max-width:18ch}
.index-label{display:block;margin:0 0 var(--s-4)}
.service-index+.index-label{margin-top:var(--s-8)}
.quote-block{max-width:none}
.quote-block .serif-quote{max-width:24ch;margin:var(--s-5) auto 0}
.quote-block .muted{max-width:48ch;margin:var(--s-6) auto 0}
.quote-block .quote-mark{width:40px;height:40px}
/* the two doors */
.doors{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:1fr}
@media (min-width:900px){.doors{grid-template-columns:1fr 1fr}}
.door{position:relative;display:flex;flex-direction:column;gap:var(--s-4);padding:clamp(1.75rem,1.2rem + 2.4vw,3.5rem);border-radius:var(--radius-lg);background:var(--panel);border:1px solid var(--line);transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.door:hover{border-color:var(--violet-soft);box-shadow:var(--shadow-soft)}
.door--writing{background:var(--mist);border-color:var(--mist)}
.door .label{color:var(--violet);padding-right:2rem}
.door h3{font-size:clamp(1.9rem,1.3rem + 2vw,2.9rem);line-height:1.08}
.door .door-q{font-family:var(--f-display);font-style:italic;font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);line-height:1.35;color:var(--ink);max-width:30ch}
.door p{color:var(--ink-2);max-width:48ch}
.door .btn{align-self:flex-start;margin-top:auto}
.door .door-num{position:absolute;right:clamp(1.25rem,2vw,2rem);top:clamp(1.25rem,2vw,2rem);font-family:var(--f-display);font-style:italic;font-size:1.6rem;line-height:1;color:var(--violet-soft)}
.tag-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:var(--s-2) 0 var(--s-4)}
.journey-map{margin-top:clamp(3rem,2rem + 3vw,5rem);display:grid;gap:var(--s-4)}
.jm-row{display:grid;grid-template-columns:1fr;gap:var(--s-3);align-items:center;padding-top:var(--s-4);border-top:1px solid var(--line)}
@media (min-width:900px){.jm-row{grid-template-columns:9rem 1fr}}
.jm-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.jm-steps li{display:flex;align-items:center;gap:.5rem}
.jm-steps li+li::before{content:"";width:20px;height:1px;background:var(--line-strong)}
.jm-steps a{display:inline-flex;align-items:center;min-height:40px;padding:.5rem .95rem;border:1px solid var(--line-strong);border-radius:999px;text-decoration:none;font-size:.9rem;color:var(--ink-2);background:var(--paper);transition:border-color var(--dur-1),color var(--dur-1),background-color var(--dur-1)}
.jm-steps a:hover{border-color:var(--violet);color:var(--violet)}
.jm-steps li:first-child a{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.jm-steps li:first-child a:hover{background:var(--violet);border-color:var(--violet);color:#fff}
@media (pointer:coarse){.jm-steps a{min-height:44px}}
/* who we work with */
.who-grid{display:grid;gap:var(--s-7);grid-template-columns:1fr}
@media (min-width:1000px){.who-grid{grid-template-columns:repeat(3,1fr);gap:clamp(2rem,3vw,3.5rem)}}
.who-col{padding-top:var(--s-5);border-top:1px solid var(--line-strong)}
.who-col h3{margin-bottom:var(--s-4)}
.who-col p{color:var(--ink-2)}
.who-col .checklist{margin-top:var(--s-5)}
.section--mist .checklist li,.section--mist .signs li{border-color:rgba(138,126,150,.28)}
/* detail groups (manuscript help, what we do) */
.service-group{padding-top:var(--s-6);border-top:1px solid var(--line-strong)}
.service-group+.service-group{margin-top:var(--s-8)}
.service-group>.label{display:block;margin-bottom:var(--s-6)}
.detail-grid{display:grid;gap:var(--s-7) clamp(1.5rem,3vw,3rem);grid-template-columns:1fr}
@media (min-width:760px){.detail-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.detail-grid--3{grid-template-columns:repeat(3,1fr)}}
.detail h3{font-size:clamp(1.3rem,1.15rem + .6vw,1.65rem);margin-bottom:var(--s-3)}
.detail p{color:var(--ink-2)}
.detail .useful{font-size:var(--fs-small);color:var(--ink-3);margin-top:var(--s-3)}
.detail .useful strong{display:block;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--violet);margin-bottom:.25rem}
.guide-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.guide-list li{display:grid;gap:.4rem 2rem;padding:1.35rem 0;border-bottom:1px solid var(--line)}
@media (min-width:800px){.guide-list li{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:baseline}}
.guide-list .g-q{font-family:var(--f-display);font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);line-height:1.3;color:var(--ink)}
.guide-list .g-a{color:var(--violet);font-weight:500}
.path-cols{display:grid;gap:var(--s-8)}
@media (min-width:960px){.path-cols{grid-template-columns:1fr 1fr;gap:clamp(3rem,5vw,6rem)}}
.path-col>.label{display:block;margin-bottom:var(--s-3)}
.path-col>h3{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.3rem);margin-bottom:var(--s-7)}
.method-steps--compact .method-step{padding-bottom:var(--s-7)}
.values{list-style:none;margin:0;padding:0;counter-reset:v}
.values li{counter-increment:v;display:grid;grid-template-columns:3.5rem 1fr;gap:var(--s-2) var(--s-4);padding:var(--s-6) 0;border-top:1px solid var(--line)}
@media (min-width:900px){.values li{grid-template-columns:5rem minmax(0,5fr) minmax(0,6fr);align-items:baseline}}
.values li::before{content:counter(v,decimal-leading-zero);font-family:var(--f-mono);font-size:var(--fs-label);color:var(--violet)}
.values h3{font-size:clamp(1.35rem,1.15rem + .8vw,1.8rem)}
.values p{color:var(--ink-2);margin:0}
@media (max-width:899px){.values p{grid-column:2}}
.founder{display:grid;gap:var(--s-7)}
@media (min-width:900px){.founder{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(3rem,6vw,7rem)}}
.portrait-slot{position:relative;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;background:var(--mist)}
.portrait-slot img{width:100%;height:100%;object-fit:cover}
.portrait-slot .slot-note{position:absolute;left:var(--s-4);right:var(--s-4);bottom:var(--s-4);padding:.75rem 1rem;border-radius:var(--radius);background:rgba(253,252,250,.92);font-size:.8125rem;line-height:1.45;color:var(--ink-2)}
.slot-text{margin-top:var(--s-6);padding:var(--s-5);border:1px dashed var(--line-strong);border-radius:var(--radius-lg);color:var(--ink-3);font-size:var(--fs-small)}
.planned{display:flex;flex-direction:column;gap:var(--s-3);padding:clamp(1.5rem,1.2rem + 1vw,2rem);border:1px dashed var(--line-strong);border-radius:var(--radius-lg);min-height:13rem}
.planned h3{font-size:clamp(1.2rem,1.1rem + .5vw,1.45rem);color:var(--ink-2)}
.planned .tag{align-self:flex-start;margin-top:auto}
.related-list{list-style:none;margin:var(--s-7) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6)}
.form-layout{display:grid;gap:var(--s-7)}
@media (min-width:1000px){.form-layout{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,4vw,4.5rem);align-items:start}.form-aside{position:sticky;top:110px}}
.form-aside h3{font-size:1.45rem;margin-bottom:var(--s-4)}
.form-aside .checklist li{font-size:var(--fs-small)}
.form-error{padding:.8rem 1rem;border-radius:var(--radius);background:#FBEFF1;color:#8A1F32;font-size:.9rem}
.check.has-error span{color:#A4263C}
.rp-intro h3{margin:var(--s-4) 0}
.rp-intro p{color:var(--ink-2)}
.wide-figure{margin-top:clamp(3rem,2rem + 4vw,6rem)}
.service-nav .sn-title{font-family:var(--f-display);font-size:1.35rem;line-height:1.2;color:var(--ink)}
.service-nav a>span:first-child{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.path-col h4{font-family:var(--f-display);font-weight:400;font-size:clamp(1.2rem,1.1rem + .4vw,1.4rem);margin-bottom:var(--s-2);padding-top:.4rem}
.path-col p{color:var(--ink-2)}
.method-step .small{margin-top:var(--s-3);font-size:var(--fs-small);opacity:.85}
.card .card-link{text-decoration:none;color:inherit}
.card:has(.card-link:hover) h3{color:var(--violet)}
.card h3{transition:color var(--dur-1)}
.faq-wrap{min-width:0}
@media (max-width:899px){.page-faq .toc{display:none}.faq-wrap{grid-column:1/-1!important}}
.col-offset-8-4 .aside-card{margin-top:0}
@media (max-width:899px){.col-offset-8-4 .aside-card{position:static}}
.stack>.meta{margin:0}
.insight-feature .stack>*+*{margin-top:var(--s-4)}
.prose .callout ol{margin:.6rem 0 0;padding-left:1.25em}
.prose .callout ol li{margin-bottom:.3em}
.page-404 .pathline{display:none}

/* 24. Signature path line --------------------------------------------------- */
.pathline{position:fixed;top:0;bottom:0;left:var(--folio-x);width:1px;z-index:2;pointer-events:none;display:none;background:linear-gradient(180deg,rgba(138,126,150,0) 0%,rgba(138,126,150,.35) 8%,rgba(138,126,150,.35) 92%,rgba(138,126,150,0) 100%)}
.pathline span{position:absolute;inset:0;background:var(--violet);transform-origin:top;transform:scaleY(var(--p,0))}
.node{display:none}
@media (min-width:1180px){
  .pathline{display:block}
  .node{display:block;position:absolute;top:calc(var(--section-y) + .55rem);left:calc(var(--folio-x) - 4px);width:9px;height:9px;border-radius:50%;border:1px solid var(--line-strong);background:var(--paper);z-index:3;transition:background-color .7s var(--ease-out),border-color .7s var(--ease-out),transform .7s var(--ease-out)}
  .page-hero .node{top:calc(clamp(3.5rem,2rem + 6vw,8rem) + .55rem)}
  .in>.node,.node.in{background:var(--violet);border-color:var(--violet);transform:scale(1.15)}
  .section--mist .node{background:var(--mist)}
  .section--deep .node{background:var(--paper-deep)}
  .section--plum .node{background:var(--plum);border-color:rgba(245,240,248,.35)}
  .section--plum.in>.node{background:var(--violet-soft);border-color:var(--violet-soft)}
}
body.no-pathline .pathline{display:none}

/* 25. Motion ---------------------------------------------------------------- */
body{animation:pageIn .7s var(--ease-out) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
.js .stagger>*{opacity:0;transform:translateY(16px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out),border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
.js .stagger.in>*{opacity:1;transform:none}
.js .stagger.in>:nth-child(2){transition-delay:.08s}
.js .stagger.in>:nth-child(3){transition-delay:.16s}
.js .stagger.in>:nth-child(4){transition-delay:.24s}
.js .stagger.in>:nth-child(5){transition-delay:.32s}
.js .stagger.in>:nth-child(6){transition-delay:.4s}
.js .stagger.in>:nth-child(7){transition-delay:.48s}
.js .stagger.in>:nth-child(8){transition-delay:.56s}
.js .stagger.done>*,.js .stagger.done>:nth-child(n){transition-delay:0s!important}
.js .draw-line{transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease-out)}
.js .in .draw-line,.js .draw-line.in{transform:scaleX(1)}
/* animations only run while their section is on screen */
.figure .drift{animation-play-state:paused}
.figure.in .drift,.in .figure .drift{animation-play-state:running}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* 26. Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .reveal,.js .stagger>*{opacity:1;transform:none}
  .js .draw-line{transform:scaleX(1)}
  .pathline span{transform:scaleY(1)}
  .node{background:var(--violet)!important;border-color:var(--violet)!important}
  .method-step .dot span{background:var(--violet);border-color:var(--violet);color:#fff}
}