/* ==========================================================================
   Saraeva Consult — site.css
   Brand: embossed cream paper, Cormorant Garamond + Jost, taupe and bronze.
   One ground for the whole site. Plain CSS, no build step.
   1 fonts · 2 reset · 3 tokens · 4 type · 5 layout · 6 header · 7 components
   ========================================================================== */

/* 1. FONTS — self-hosted; nothing is fetched from Google at runtime.
   ========================================================================== */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/cormorant-garamond-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/cormorant-garamond-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;
  src:url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('../fonts/jost-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('../fonts/jost-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* Metric-matched fallbacks, so the swap window doesn't reflow the nowrap
   headline lines or push a horizontal scrollbar on narrow phones. */
@font-face{font-family:'Cormorant fallback';src:local('Georgia'),local('Times New Roman');size-adjust:88%;}
@font-face{font-family:'Jost fallback';src:local('Helvetica Neue'),local('Arial');size-adjust:96%;}


/* 2. RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body,h1,h2,h3,h4,p,ul,ol,li,figure,dl,dd,fieldset,blockquote{margin:0;padding:0;}
ul[class],ol[class]{list-style:none;}
img,svg{max-width:100%;display:block;}
button,input,select,textarea{font:inherit;color:inherit;}
fieldset{border:0;}
a{color:inherit;}


/* 3. TOKENS — sampled from the brand boards, then checked for contrast.
   The brand taupe is 3.3:1 on paper: logo, wordmark, large display and
   rules only. Everything a person reads at text size uses ink/body/muted.
   ========================================================================== */
:root{
  --paper:#EBE3D7;      /* the Individuals ground, and the default */
  --sheet:#F6F2EC;      /* cards: a lighter sheet of the same paper */
  --rule:#D6CCBF;       /* hairlines */
  --ink:#2A231F;        /* 12.6:1  headlines */
  --body:#4B4139;       /*  8.1:1  paragraphs */
  --muted:#6A5D52;      /*  5.2:1  labels, captions */
  --taupe:#8A7B6F;      /*  3.3:1  brand taupe — logo, large display only */
  --bronze:#7A5536;     /*  5.4:1  links, focus, active state */
  --wash:#E8DCCC;       /* active switch ground (bronze on it: 4.9:1) */
  --logo-shadow:rgba(105,84,62,.45);   /* the logo's own drop shadow */

  --serif:'Cormorant Garamond','Cormorant fallback',Georgia,'Times New Roman',serif;
  --sans:'Jost','Jost fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --r-card:22px;        /* softer, to suit the moulded look */

  /* Neumorphism: the surface is the paper itself, lifted or pressed by a
     highlight (top-left) and a warm shadow (bottom-right). Kept quiet on
     purpose — the relief is 1.11:1 of lift and 1.17:1 of depth against the
     ground, about half what it was. The card should look like paper pressed
     from behind, not like a button.

     The highlight is quieter than the shadow on purpose: at 1.05:1 it barely
     separates from the body behind it, which is what stops the top-left edge
     reading as a white rim. The warm shadow does the seating. */
  --sh-dark:rgba(122,100,78,.13);
  --sh-light:rgba(255,255,255,.18);
  --raise:6px 6px 14px var(--sh-dark),-6px -6px 14px var(--sh-light);
  --raise-sm:3px 3px 8px var(--sh-dark),-3px -3px 8px var(--sh-light);
  --raise-hover:9px 9px 19px var(--sh-dark),-8px -8px 17px var(--sh-light);
  --press:inset 4px 4px 9px var(--sh-dark),inset -4px -4px 9px var(--sh-light);
  --r-btn:10px;
  --r-nav:8px;

  --gutter:clamp(20px,5vw,56px);
  --band:clamp(72px,11vw,140px);
  --measure:40ch;
  --maxw:1120px;
}
/* The Companies side is the dark half of the site: the ground is the ink the
   rest of the site writes in, so nothing new enters the palette. 12.1:1
   against the Individuals cream — nobody reads that as a mistake.

   --paper and --ink swap roles rather than being special-cased. --paper is
   always the ground and always the colour written ON --ink; --ink is always
   the strong colour and always the button fill. Because every use obeys that
   pair, the buttons, the skip link and the burger bars invert on their own.

   colour-scheme is stated so the native select popup and the scrollbars come
   up dark here instead of light. */
:root[data-side="companies"]{
  color-scheme:dark;
  --paper:#2A231F;     /*  the ground */
  --ink:#EBE3D7;       /* 12.1:1  headings, and the button fill */
  --body:#D9CFC2;      /* 10.1:1  paragraphs */
  --muted:#988A7F;     /*  4.6:1  labels, captions */
  --bronze:#BC8E67;    /*  5.3:1  links, focus, active — margin kept on purpose,
                                  because it sits on the pill too (6.4:1 there) */
  --taupe:#8A7B6F;     /*  3.8:1  the brand taupe needs no change on ink */
  --rule:#4D433B;      /*  hairlines, at the weight they have opposite */
  --wash:#151210;      /*  the pill, still darker than its ground */
  --sheet:#39322F;     /*  form fields, lifted off the ground (cream on it 9.9:1) */

  /* Neumorphism inverts. A ground this dark has almost nothing below it —
     pure black is only 1.36:1 under it — so the highlight carries the lift
     and the shadow just seats the card. These alphas land on the same
     1.11:1 lift and 1.17:1 depth as the cream side, so a card has the same
     weight on both halves of the site. */
  --sh-dark:rgba(0,0,0,.39);
  --sh-light:rgba(255,255,255,.02);
  --logo-shadow:rgba(0,0,0,.55);
}

@media (max-width:390px){ :root{ --gutter:16px; } }


/* 4. TYPE
   ========================================================================== */
body{
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:clamp(16px,0.96rem + 0.18vw,17.5px);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{color:var(--ink);font-family:var(--serif);font-weight:500;text-wrap:balance;}

.h1{
  /* The hero lines are nowrap, and above 900px they share the row with the
     monogram, so the ceiling is set by the text column, not the page:
     "Better organizations." is 601px at 76px against a ~598px column. 68px
     keeps ~60px spare there; the 38px floor keeps ~27px spare at 360px. */
  font-size:clamp(38px,6.2vw,68px);line-height:1.0;letter-spacing:-0.012em;
}
h2{font-size:clamp(28px,3.2vw,40px);line-height:1.08;letter-spacing:-0.008em;}
h3{font-size:clamp(22px,2vw,26px);line-height:1.18;}

p{max-width:var(--measure);text-wrap:pretty;}
p+p{margin-top:1.05em;}

.lede{font-size:clamp(17px,1rem + 0.35vw,20px);line-height:1.6;color:var(--body);}

/* The brand's tracked capitals: taglines, eyebrows, labels. */
.eyebrow{
  font-family:var(--sans);font-weight:400;
  font-size:12px;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--muted);
  max-width:none;   /* it's a <p>: without this it inherits 40ch measured in
                       its own 12px type, and the tagline wraps at ~290px */
}
.caption{font-size:14.5px;color:var(--muted);}
.card__tag,.footer__tag{max-width:none;}


/* 5. LAYOUT — whitespace and hairlines. One ground, no bands of colour.
   ========================================================================== */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.band{padding-block:var(--band);}
.band--tight{padding-block:calc(var(--band)*0.6);}
.rule{border:0;border-top:1px solid var(--rule);margin:0;}
.section-head{display:grid;gap:14px;margin-bottom:clamp(32px,4vw,48px);}

.skip{position:absolute;left:-9999px;top:0;z-index:60;padding:12px 18px;
  background:var(--ink);color:var(--paper);font-size:13px;border-radius:var(--r-btn);}
.skip:focus{left:12px;top:12px;}


/* 6. HEADER — two rows on desktop, sticky. Mobile: lockup + burger.
   ========================================================================== */
.siteheader{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule);}

.switchbar{border-bottom:1px solid var(--rule);}
.switchbar__in{display:flex;justify-content:flex-end;align-items:center;padding-block:9px;}

.masthead__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;}

/* Lockup: monogram + SARAEVA / CONSULT, as on the brand board. Brand name
   text is exempt from contrast minimums (WCAG 1.4.3 logotype exception). */
.lockup{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);}
.lockup__mark{height:34px;width:auto;flex:none;color:currentColor;overflow:visible;}
.lockup__words{display:grid;line-height:1;}
.lockup__name{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:0.3em;margin-right:-0.3em;}
.lockup__sub{display:flex;align-items:center;gap:6px;margin-top:5px;
  font-family:var(--sans);font-weight:400;font-size:8.5px;letter-spacing:0.42em;}
.lockup__sub::before,.lockup__sub::after{content:"";height:1px;flex:1;background:currentColor;opacity:.7;}

.nav{display:flex;align-items:center;gap:2px;}
.nav a{text-decoration:none;color:var(--body);font-size:14px;letter-spacing:0.14em;text-transform:uppercase;
  padding:9px 12px;border-radius:var(--r-nav);}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);}

.modes{display:flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--rule);border-radius:var(--r-nav);}
.modes a{text-decoration:none;font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--body);
  padding:7px 12px;border-radius:var(--r-nav);white-space:nowrap;}
.modes a:hover{color:var(--ink);}
.modes a[aria-current="true"]{background:var(--wash);color:var(--bronze);}
.modes__label{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-right:10px;}

/* Burger */
.burger{display:none;align-items:center;gap:9px;background:none;border:1px solid var(--rule);
  border-radius:var(--r-nav);min-height:44px;padding:0 14px;cursor:pointer;
  font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);}
.burger__box{position:relative;width:16px;height:10px;display:block;flex:none;}
.burger__bar,.burger__bar::before,.burger__bar::after{position:absolute;left:0;width:16px;height:1.5px;
  background:var(--ink);border-radius:1px;transition:transform 160ms ease,top 160ms ease,background 160ms ease;}
.burger__bar{top:4.25px;}
.burger__bar::before{content:"";top:-4.25px;}
.burger__bar::after{content:"";top:4.25px;}
.burger[aria-expanded="true"] .burger__bar{background:transparent;}
.burger[aria-expanded="true"] .burger__bar::before{top:0;transform:rotate(45deg);}
.burger[aria-expanded="true"] .burger__bar::after{top:0;transform:rotate(-45deg);}

/* Full-screen menu — sits BELOW the header (z 40 < 50) so the burger, which
   is also the close button, stays visible. */
.drawer{position:fixed;inset:0;z-index:40;background:var(--paper);overflow-y:auto;}
.drawer[hidden]{display:none;}
.drawer__in{min-height:100%;display:flex;flex-direction:column;gap:28px;padding-top:96px;padding-bottom:40px;}
.drawer__eyebrow{margin-bottom:-14px;}
.modes--drawer{align-self:flex-start;}
.modes--drawer a{font-size:12.5px;padding:0 18px;min-height:44px;display:flex;align-items:center;}
.drawer__nav{display:flex;flex-direction:column;}
.drawer__nav a{text-decoration:none;color:var(--ink);font-family:var(--serif);font-weight:500;
  font-size:clamp(32px,9vw,44px);line-height:1.1;padding:8px 0;}
.drawer__nav a:hover{color:var(--bronze);}
.drawer__foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:24px;border-top:1px solid var(--rule);font-size:14px;}
.drawer__foot a{display:inline-flex;align-items:center;min-height:32px;}
.drawer__legal{display:flex;flex-wrap:wrap;gap:0 20px;}
.drawer__legal a{color:var(--body);text-decoration:none;}
body.menu-open{overflow:hidden;}

@media (max-width:819px){
  .switchbar,.nav{display:none;}
  .burger{display:inline-flex;}
  .masthead__in{padding-block:12px;}
}
@media (min-width:820px){ .drawer{display:none !important;} }


/* 7. COMPONENTS
   ========================================================================== */

/* --- Signature headline: a deepening column down the left edge, now in the
   brand's own palette — taupe, bronze, ink. Lines are forced, never reflow. */
.hero-h1 .ln{display:block;white-space:nowrap;}
.hero-h1 .b1{color:var(--taupe);}   /* 3.3:1 — large text only, and it is */
.hero-h1 .b2{color:var(--bronze);}
.hero-h1 .b3{color:var(--ink);}

/* Hero: text left, brand mark right. The mark is decoration, not content. */
.hero{display:grid;gap:clamp(32px,5vw,64px);grid-template-columns:minmax(0,1fr);align-items:center;}
@media (min-width:900px){ .hero{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);} }

/* --- Cards: a lighter sheet on the paper, defined by a hairline. No shadow. */
.cards{display:grid;gap:clamp(24px,3vw,34px);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));}
.cards--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}
.card{
  background:var(--paper);border:0;border-radius:var(--r-card);
  box-shadow:var(--raise);
  padding:30px 26px 30px;display:flex;flex-direction:column;gap:12px;
}
.card__tag{font-size:11.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);}
.card h3{margin-top:2px;}
.card p{font-size:15.5px;max-width:36ch;}
.card__foot{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-top:1px solid var(--rule);}
.price{font-family:var(--serif);font-size:24px;font-weight:500;color:var(--ink);line-height:1;}
.price small{font-family:var(--sans);font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0.02em;}
.card__link{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--bronze);text-decoration:none;}
.card__link:hover{text-decoration:underline;text-underline-offset:4px;}


/* --- Books */
.book{display:grid;gap:22px;}
/* Books keep a sensible size rather than stretching to fill the row. */
.shelf{display:grid;gap:clamp(28px,4vw,44px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),340px));}
/* Slots use the real covers' ratio (1418x2000), so nothing gets cropped and
   a placeholder lines up exactly with a finished cover beside it. */
.book__cover{aspect-ratio:1418/2000;border-radius:14px;border:0;box-shadow:var(--press);
  /* A flex item defaults to min-width:auto, so the placeholder title refused
     to shrink below its text and overflowed its card by 3.5px — which, with
     the aspect ratio, also made it taller than a real cover beside it. */
  min-width:0;
  background:var(--paper);display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;}
.book__cover span{font-family:var(--serif);font-size:22px;color:var(--muted);line-height:1.2;}
.book__cover span{display:grid;gap:10px;}
.book__cover em{font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);}
.book__cover img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;}
/* A finished cover is a physical object on the paper: raised, not pressed. */
.book__cover--img{padding:0;box-shadow:var(--raise-sm);}
.book__sub{display:block;font-style:italic;font-weight:400;color:var(--muted);font-size:.8em;margin-top:4px;}

/* --- Buttons & links */
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:var(--r-btn);
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);text-decoration:none;
  font-size:12.5px;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;}
.btn:hover{background:var(--bronze);border-color:var(--bronze);}
.btn--quiet{background:transparent;color:var(--ink);border-color:var(--rule);}
.btn--quiet:hover{background:transparent;border-color:var(--ink);color:var(--ink);}
.btns{display:flex;flex-wrap:wrap;gap:12px;}
.a{color:var(--bronze);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}

/* The contact address is the whole call to action now that the form is gone,
   so it is set at display size. It wraps rather than overflowing at 360px. */
.mailto{font-family:var(--serif);font-size:clamp(21px,3.4vw,30px);line-height:1.25;
  text-underline-offset:5px;overflow-wrap:anywhere;}
.a:hover{text-decoration-thickness:2px;}

/* --- About */
.about{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:minmax(0,1fr);align-items:start;}
@media (min-width:860px){ .about{grid-template-columns:minmax(0,380px) minmax(0,1fr);} }
.portrait img{width:100%;height:auto;border:1px solid var(--rule);border-radius:var(--r-card);}
@media (max-width:859px){ .portrait{max-width:330px;} }

/* --- Form */
.field{display:block;margin-bottom:20px;max-width:34rem;}
.field>span{display:block;font-size:13px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink);margin-bottom:8px;}
.field input,.field select,.field textarea{width:100%;background:var(--sheet);border:1px solid var(--rule);
  border-radius:var(--r-btn);padding:13px 14px;font-size:16px;color:var(--ink);}
.field textarea{min-height:150px;resize:vertical;}

/* --- Legal */
.legal{max-width:66ch;}
.legal h2{font-size:26px;margin-top:44px;padding-top:20px;border-top:1px solid var(--rule);}
.legal h3{font-size:20px;margin-top:24px;}
.legal p,.legal ul{margin-top:12px;max-width:66ch;}
.legal ul{padding-left:20px;list-style:disc;}
.legal li+li{margin-top:5px;}
.legal address{font-style:normal;margin-top:12px;}
.todo{font-size:13px;line-height:1.6;color:var(--ink);border:1px dashed var(--taupe);
  border-radius:var(--r-card);padding:16px 18px;margin-top:14px;max-width:66ch;}

/* --- Footer: the brand's own sign-off */
.footer{border-top:1px solid var(--rule);padding-block:48px 56px;}
.footer__in{display:grid;gap:28px;}
@media (min-width:760px){ .footer__in{grid-template-columns:1fr auto;align-items:end;} }
.footer__tag{font-size:12px;letter-spacing:0.36em;text-transform:uppercase;color:var(--muted);display:grid;gap:8px;}
.footer__tag::after{content:"";width:44px;height:1px;background:var(--taupe);margin-top:8px;}
.footer nav{display:flex;flex-wrap:wrap;gap:6px 22px;}
.footer a{color:var(--body);text-decoration:none;font-size:14px;}
.footer a:hover{color:var(--ink);}
.footer .caption{margin-top:18px;}


/* 8. FOCUS — 2px bronze, 3px offset. Never removed from real controls.
   ========================================================================== */
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:2px;}


/* 9. MOTION — user action only.
   ========================================================================== */
.btn,.nav a,.modes a,.a,.card__link{transition:color 140ms ease,background-color 140ms ease,border-color 140ms ease;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}

/* Windows High Contrast and similar modes strip box-shadow, which would leave
   neumorphic cards with no edge at all. Give them a real border there. */
@media (forced-colors:active){
  .card,.book__cover{border:1px solid CanvasText;}
}

@media print{
  .card,.book__cover{box-shadow:none;border:1px solid #bbb;}
  .siteheader,.drawer,.skip,.btns{display:none;}
  body{background:#fff;color:#000;}
}

/* Inline technical terms (e.g. the storage key named in the privacy policy). */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;color:var(--ink);}

/* Second service group on the services page: the same breathing room a new
   section gets elsewhere, without a hairline band between the two groups. */
.group-next{margin-top:clamp(64px,8vw,104px);}

/* Anything that can be jumped to must clear the sticky header, or the heading
   you asked for ends up hidden behind it. */
main [id],section[id]{scroll-margin-top:clamp(96px,12vh,150px);}

/* Contact form: the spam-trap field is moved off-screen rather than hidden
   with display:none, which some bots detect and skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-note{margin-top:16px;max-width:44ch;}
.form-note[data-state="ok"]{color:var(--ink);}
.form-note[data-state="error"]{color:var(--bronze);}
.btn:disabled{opacity:.6;cursor:progress;}

/* ==========================================================================
   Hero, claim version
   The headline is a sentence making an argument, so it is set in the sans at
   weight 600: Cormorant is deliberately delicate and takes the force out of a
   blunt claim. Cormorant keeps the section headings, the wordmark and quotes.
   ========================================================================== */
.h1--claim{
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(31px,4.4vw,54px);
  line-height:1.08;
  letter-spacing:-0.022em;
  max-width:17ch;               /* keeps the claim to three or four lines */
}
.hero__sub{
  font-size:clamp(16px,.95rem+.3vw,18.5px);
  line-height:1.6;color:var(--muted);max-width:46ch;margin-top:22px;
}

/* The quote sits in a raised card, with the monogram embossed above it. */
.quote{
  background:var(--paper);border-radius:var(--r-card);box-shadow:var(--raise);
  padding:clamp(28px,3vw,40px);display:grid;gap:20px;justify-items:start;
}
.quote__mark{width:64px;height:auto;color:var(--taupe);overflow:visible;}
.quote p{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(19px,1.15rem+.45vw,24px);line-height:1.42;
  color:var(--ink);max-width:34ch;
}
.quote cite{font-style:normal;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}

/* ---- Principles: three plain columns, hairline above each ---------------- */
.principles{display:grid;gap:clamp(28px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));}
.principle{display:grid;gap:10px;align-content:start;padding-top:20px;border-top:1px solid var(--rule);}
.principle h3{font-family:var(--sans);font-weight:600;font-size:19px;letter-spacing:-0.01em;}
.principle p{font-size:15.5px;max-width:34ch;}

/* ---- Credentials: one quiet line, centred, no box ------------------------ */
.credits{text-align:center;display:grid;gap:18px;justify-items:center;}
.credits p{font-family:var(--serif);font-size:clamp(21px,1.1rem+1vw,30px);line-height:1.34;
  color:var(--ink);max-width:44ch;}   /* 24ch broke this into six stub lines */
.credits .caption{max-width:40ch;}

/* ---- Closing call to action --------------------------------------------- */
.door{text-align:center;display:grid;gap:16px;justify-items:center;}
.door h2{max-width:18ch;}
.door p{max-width:38ch;}

/* ==========================================================================
   Interaction polish — all on user action, nothing on scroll
   ========================================================================== */
.card{transition:box-shadow 200ms ease,transform 200ms ease;}
@media (hover:hover){
  .card:hover{box-shadow:var(--raise-hover);transform:translateY(-2px);}
  .card--soon:hover,.book__cover:hover{transform:none;}
}
.btn:active{box-shadow:var(--press);transform:translateY(1px);}
.nav a,.modes a{transition:background-color 160ms ease,color 160ms ease;}
.nav a:hover{background:var(--wash);}

/* Anchor jumps glide instead of teleporting, unless the visitor asked not to. */
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }

/* A card whose whole body is a link: the link covers the card, but the text
   stays selectable and the focus ring lands on the card, not a bare word. */
.card__link::after{content:"";position:absolute;inset:0;border-radius:inherit;}
.card{position:relative;}
.card:focus-within{box-shadow:var(--raise-hover);}

/* Stacked buttons on a phone look untidy at different widths. */
@media (max-width:480px){
  .btns{flex-direction:column;align-items:stretch;}
  .btns .btn{width:100%;justify-content:center;}
}

/* About: the two current roles and the books, as plain rows. */
.roles{display:grid;gap:0;margin-top:26px;}
.role{padding-block:22px;border-top:1px solid var(--rule);display:grid;gap:6px;}
.role:last-child{border-bottom:1px solid var(--rule);}
.role h3{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:-0.005em;}
.role p{font-size:15.5px;max-width:52ch;margin:0;}
.role a{color:var(--bronze);}
.about__foot{margin-top:30px;font-size:15px;color:var(--muted);max-width:56ch;}