:root{
  --ink:#1a1a16;
  --ink-2:#2a2922;
  --bone:#f3ede2;
  --bone-2:#e9e1d2;
  --paper:#fbf8f2;
  --emerald:#1d4a3c;
  --emerald-2:#2f6655;
  --emerald-soft:#9db5aa;
  --muted:#6c675c;
  --line:rgba(26,26,22,.2);
  --line-strong:rgba(26,26,22,.38);
  --on-ink:#ece7dc;
  --on-ink-mute:#a7a297;
  --radius:7px;
  --wrap:min(1320px,calc(100% - 88px));
  --display:'Noto Serif Display',Georgia,serif;
  --logo:'Noto Serif Display',Georgia,serif;
  --ui:'Overpass','Helvetica Neue',Arial,sans-serif;
  --text:'DM Sans','Helvetica Neue',Arial,sans-serif;
  --script:'Caveat',cursive;
}

/* WP-only: templates/page.html's <main> uses a "constrained" layout, which
   caps wp:post-content's own width at theme.json's contentSize (820px) —
   this design's .wrap already does its own full-width math (min(1320px,
   calc(100% - 88px))) against the true page width, so the extra WP cap
   above it crushes the two-column grids down to nothing. Only this file
   (loaded solely on visual-edit tagged pages) carries the override, so
   normal Gutenberg pages keep WordPress's default reading-width behavior. */
.wp-block-post-content{max-width:none}
/* WP-only, third of its kind: theme.json gives every h1 a line-height of 0.98,
   which the static design never had. Pages that set their own leading are
   unaffected — those rules come later in this file and win the tie — but a
   heading that simply inherited the body's 1.65 came out at half the leading it
   was drawn with. The links page was the visible case: same font, same size,
   and a title sitting cramped against everything under it. */
.wp-block-post-content :is(h1,h2,h3){line-height:inherit}
/* WP-only, same species as the rule above: WordPress's flow layout puts a
   block gap between sibling blocks, and a raw-HTML page's top-level <section>s
   are siblings. Every section boundary therefore got a 16px strip of BODY
   background showing through between two full-bleed bands — a pale line across
   the page wherever one section met the next. In this design sections butt
   directly against each other and own their own spacing through padding, so
   the gap is not a smaller-value judgement, it is a seam that should not
   exist. Scoped to the content wrapper, so ordinary Gutenberg pages keep
   WordPress's spacing. */
.wp-block-post-content > section{margin-block:0}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--ui);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
body.drawer-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{color:inherit}
.wrap{width:var(--wrap);margin-inline:auto}
.narrow{width:min(820px,calc(100% - 48px));margin-inline:auto}
.section{padding:clamp(88px,9vw,138px) 0}
.section--paper{background:var(--paper)}
.section--bone-2{background:var(--bone-2)}
.section--ink{background:var(--ink);color:var(--on-ink)}
.display,h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:.005em}
h1,h2,h3,p,ul,blockquote{margin-top:0}
p{font-family:var(--text)}
.eyebrow{display:inline-flex;align-items:center;gap:13px;color:var(--emerald);font-size:12px;font-weight:700;letter-spacing:.23em;text-transform:uppercase}
.eyebrow .dash{width:28px;height:1px;background:currentColor}
.rule-label{display:flex;align-items:center;gap:18px;margin-bottom:clamp(40px,5vw,70px);color:var(--emerald);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.rule-label .rule{height:1px;flex:1;background:var(--line)}
.lead{color:var(--muted);font-size:clamp(17px,1.45vw,20px);line-height:1.68}
.muted{color:var(--muted)}
/* The underline draws itself in on hover, exactly as it does on the front page.
   It used to be a permanent border-bottom here, so the same link behaved like
   two different links depending on which page you met it on: animated on the
   home page, inert everywhere else. The rule is copied from front-page.css
   rather than reinvented — same 1px, same currentColor, same .3s — so the two
   cannot drift apart again. The type stays as it is: these links are the
   smaller uppercase kind by design, and only the interaction was inconsistent. */
.text-link{position:relative;display:inline-flex;align-items:center;gap:14px;padding-bottom:4px;color:var(--emerald);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.text-link::before{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .3s}
.text-link:hover::before{right:0}
.text-link::after{content:"\2192";font-size:16px;font-weight:400;transition:transform .2s ease}
.text-link:hover::after{transform:translateX(5px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:58px;padding:0 28px;border:1px solid var(--ink);border-radius:var(--radius);background:var(--ink);color:var(--paper);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn::after{content:"\2192";font-size:16px}
.btn:hover{background:transparent;color:var(--ink)}
.btn--emerald{border-color:var(--emerald);background:var(--emerald)}
.btn--emerald:hover{background:transparent;color:var(--emerald)}
.btn--light{border-color:rgba(255,255,255,.75);background:transparent;color:#fff}
.btn--light:hover{background:#fff;color:var(--ink)}
.frame{display:block;overflow:hidden;border-radius:var(--radius);background:var(--bone-2)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.frame:hover img{transform:scale(1.025)}
.script-mark{font-family:var(--script);font-size:clamp(70px,8vw,126px);font-weight:500;line-height:.8;color:#bcae98;opacity:.62;transform:rotate(-7deg);pointer-events:none}

/* Header */
.site-header{position:relative;z-index:50;border-bottom:1px solid var(--line);background:rgba(251,248,242,.94)}
.site-header.is-sticky{position:sticky;top:0;backdrop-filter:blur(14px)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:24px max(28px,calc((100% - 1200px)/2 + 28px)) 24px clamp(20px,2.5vw,48px);gap:30px}
.site-logo{font-family:var(--logo);font-size:30px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:30px}
/* .has-sub is what Clara_VE_Front_Nav emits for a menu item with children.
   This stylesheet was written against the hand-coded markup, which named that
   wrapper .nav-pages — so once the shared header started rendering from the WP
   menu, "Pages" fell out of every one of these rules: it lost the nav font
   (.nav-links>a no longer matched a nested link) and its dropdown never opened
   (.nav-pages:hover never matched). Both names are carried so hand-coded and
   generated markup style identically. */
.nav-links>a,.nav-pages>a,.nav-links .has-sub>a{position:relative;color:var(--ink);font-size:15px;font-weight:500;letter-spacing:.18em;opacity:.92}
.nav-links>a::after,.nav-pages>a::after,.nav-links .has-sub>a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--emerald);transition:right .3s}
.nav-links>a:hover::after,.nav-links>a[aria-current="page"]::after,.nav-pages>a:hover::after,.nav-links .has-sub:hover>a::after{right:0}
.nav-pages,.nav-links .has-sub{position:relative;display:inline-flex;align-items:center}
.nav-sub{position:absolute;top:100%;left:0;right:auto;min-width:240px;padding:8px 0;background:var(--ink);color:var(--on-ink);opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s;box-shadow:0 18px 44px rgba(0,0,0,.2)}
.nav-sub a{display:block;padding:12px 22px;border-bottom:1px solid rgba(236,231,220,.12);color:var(--on-ink);font-size:15px;font-weight:500;letter-spacing:.1em}
.nav-sub a:last-child{border-bottom:0}
.nav-sub a:hover{color:#fff;background:rgba(236,231,220,.08)}
.nav-pages:hover .nav-sub,.nav-pages:focus-within .nav-sub,.has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:none}
@media (max-width:1500px){.nav-sub{left:auto;right:0}}
.nav-burger{display:none;flex-direction:column;gap:5px;width:46px;height:46px;align-items:center;justify-content:center;padding:0;border:1px solid var(--line-strong);background:transparent;cursor:pointer}
.nav-burger span{display:block;width:20px;height:1px;background:currentColor}
.drawer-veil{position:fixed;inset:0;z-index:70;background:rgba(10,10,8,.5);backdrop-filter:blur(4px)}
.drawer{position:fixed;z-index:80;top:0;right:0;bottom:0;width:min(400px,92vw);padding:26px 30px;background:var(--ink);color:var(--on-ink);transform:translateX(102%);transition:transform .35s cubic-bezier(.22,.9,.3,1);overflow:auto}
.drawer.open{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.15)}
.drawer-logo,.drawer-mark{font-family:var(--logo);font-size:20px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.drawer-close{border:0;background:transparent;color:#fff;font-size:32px;cursor:pointer}
.drawer-nav{display:grid;padding-top:18px}
.drawer-nav>a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--display);font-size:26px;font-weight:300;color:#fff}
.drawer-label{margin:26px 0 8px;color:var(--on-ink-mute);font-size:14.375px;font-weight:600;letter-spacing:.2em}
.drawer-sub{display:block}
.drawer-sub a{display:block;padding:8px 0;color:var(--on-ink);font-size:12px;letter-spacing:.1em}

/* Interior heroes */
.sub-hero{padding:clamp(72px,8vw,124px) 0;background:var(--paper);overflow:hidden}
.sub-hero__grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr);align-items:center;gap:clamp(48px,7vw,112px)}
.sub-hero__copy{padding-left:clamp(0px,2vw,28px)}
.sub-hero h1{max-width:760px;margin:28px 0 30px;font-size:clamp(54px,6.2vw,92px);line-height:.98}
.sub-hero h1 em,.page-hero h1 em{font-weight:500;font-style:italic}
.sub-hero__copy .lead{max-width:590px;margin-bottom:36px}
.sub-hero__media{position:relative;aspect-ratio:4/4.5}
.sub-hero__media .frame{width:100%;height:100%}
.sub-hero__media .script-mark{position:absolute;left:-72px;bottom:-28px}
.page-hero{padding:clamp(84px,9vw,138px) 0;background:var(--paper);border-bottom:1px solid var(--line)}
.page-hero__inner{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);align-items:end;gap:clamp(40px,7vw,100px)}
.page-hero h1{max-width:900px;margin:24px 0 0;font-size:clamp(58px,7vw,104px);line-height:.98}
.page-hero .lead{max-width:450px;margin:0 0 8px}
.image-hero{position:relative;min-height:min(790px,84vh);display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.image-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,10,7,.72) 0%,rgba(12,10,7,.38) 45%,rgba(12,10,7,.08) 78%)}
/* The focal point is a third of the way down, not halfway. These heroes are a
   wide band and the photographs behind them are portraits, so `cover` throws
   away most of the height — centred, it kept the middle third and cut the
   subject's head off. A third down keeps a standing figure whole and still
   leaves the horizon in frame. */
.image-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 33%}
.image-hero__copy{position:relative;z-index:2;max-width:770px;padding:clamp(90px,10vw,150px) 0}
.image-hero .eyebrow{color:#fff}
.image-hero h1{margin:26px 0 24px;font-size:clamp(58px,7vw,104px);line-height:.95}
.image-hero .lead{max-width:620px;margin-bottom:34px;color:#f2eee7}

/* Shared editorial content */
.story-grid{display:grid;grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr);gap:clamp(56px,8vw,132px);align-items:center}
.story-grid .frame{aspect-ratio:4/5}
.story-copy h2,.section-heading h2{margin:24px 0;font-size:clamp(43px,5vw,70px);line-height:1.04}
.story-copy p{max-width:620px;color:var(--muted);font-size:17px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:40px 0}
.stat{padding-top:20px;border-top:1px solid var(--line)}
.stat strong{display:block;font-family:var(--display);font-size:clamp(40px,4.4vw,64px);font-weight:300;line-height:1;color:var(--emerald)}
.stat span{display:block;margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.principle{min-height:250px;padding:42px clamp(26px,3vw,46px);border-right:1px solid var(--line)}
.principle:last-child{border-right:0}
.principle .num{font-family:var(--display);font-size:18px;color:var(--emerald)}
.principle h3{margin:54px 0 15px;font-size:clamp(28px,2.8vw,39px)}
.principle p{max-width:31ch;color:var(--muted)}
.quote-band{padding:clamp(86px,9vw,132px) 0;background:var(--emerald);color:#fff}
.quote-band blockquote{max-width:1020px;margin:0 auto;font-family:var(--display);font-size:clamp(42px,5.4vw,76px);font-weight:300;line-height:1.08;text-align:center}
.quote-band cite{display:block;margin-top:28px;font-family:var(--ui);font-size:11px;font-style:normal;font-weight:700;letter-spacing:.22em;text-transform:uppercase}

/* Services */
.offers{padding-top:0}
.offer{display:grid;grid-template-columns:minmax(240px,.58fr) minmax(0,1.42fr);gap:clamp(42px,8vw,126px);padding:clamp(78px,8vw,118px) 0;border-top:1px solid var(--line)}
.offer:first-child{border-top:0}
.offer__intro{position:relative}
.offer__num{display:block;font-family:var(--display);font-size:clamp(66px,7vw,104px);font-weight:300;line-height:.9;color:var(--emerald)}
.offer__price{display:block;margin-top:26px;color:var(--emerald);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.offer__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);gap:clamp(40px,5vw,78px);align-items:start}
.offer__body h2{margin:0 0 22px;font-size:clamp(41px,4.5vw,66px);line-height:1.02}
.offer__body .lead{max-width:610px}
.offer-list{list-style:none;margin:32px 0;padding:0;border-top:1px solid var(--line)}
.offer-list li{position:relative;padding:14px 0 14px 25px;border-bottom:1px solid var(--line);font-family:var(--text);font-size:14px}
.offer-list li::before{content:"\2713";position:absolute;left:0;color:var(--emerald)}
.offer__media{aspect-ratio:4/5}
.faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(60px,9vw,150px)}
.faq-intro h2{margin:20px 0;font-size:clamp(46px,5vw,72px);line-height:1}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:25px 0;list-style:none;cursor:pointer;font-family:var(--display);font-size:clamp(24px,2.3vw,34px);line-height:1.2}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--emerald);font-family:var(--ui);font-size:20px}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list details p{max-width:68ch;padding:0 0 27px;color:var(--muted)}

/* Case studies */
.case-study{padding:clamp(86px,9vw,132px) 0;border-bottom:1px solid var(--line)}
.case-study__grid{display:grid;grid-template-columns:minmax(420px,.95fr) minmax(0,1.05fr);gap:clamp(54px,8vw,120px);align-items:start}
.case-study:nth-child(even) .case-study__grid{direction:rtl}
.case-study:nth-child(even) .case-study__grid>*{direction:ltr}
.case-study__media{aspect-ratio:4/5;position:sticky;top:122px}
.case-study h2{margin:22px 0 36px;font-size:clamp(46px,5vw,72px);line-height:1.03}
.case-block{padding:25px 0;border-top:1px solid var(--line)}
.case-block h3{margin-bottom:8px;font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--emerald)}
.case-block p{margin:0;color:var(--muted)}
.case-quote{margin:34px 0 0;padding-left:26px;border-left:1px solid var(--emerald);font-family:var(--display);font-size:clamp(25px,2.6vw,36px);font-style:italic;line-height:1.35}

/* Journal */
.journal-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:28px}
.journal-card{grid-column:span 4;padding-bottom:28px;border-bottom:1px solid var(--line)}
.journal-card:nth-child(2){margin-top:70px}
.journal-card .frame{aspect-ratio:4/5;margin-bottom:27px}
.journal-card:nth-child(2) .frame{aspect-ratio:1/1}
.journal-card h2{margin:15px 0 12px;font-size:clamp(29px,3vw,42px);line-height:1.08}
.journal-card p{color:var(--muted)}
.newsletter{padding:clamp(72px,8vw,110px) 0;background:var(--emerald);color:#fff}
.newsletter__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(50px,8vw,120px);align-items:end}
.newsletter h2{max-width:690px;margin:18px 0;font-size:clamp(42px,5vw,70px);line-height:1.05}
.newsletter p{max-width:600px;color:#d8e1dd}

/* Article
   One paper sheet on the bone background, and one column inside it: the
   back-link, title, dateline, image and body all measure the same. The sheet's
   own padding sets that measure, so nothing inside it needs a width of its
   own — which is also why the image lines up with the text edge-for-edge
   instead of running wider, as it did when each piece was sized separately.
   The 1040px/40px pair below is repeated by .article-nav and .cve-specimen so
   they stay in the same column; change one, change all three. */
.article-sheet{width:min(1040px,calc(100% - 40px));margin:clamp(18px,2.2vw,36px) auto clamp(34px,3.5vw,56px);padding:clamp(34px,4.4vw,62px) clamp(22px,3.6vw,56px) clamp(46px,5vw,76px);background:var(--paper);border-radius:calc(var(--radius) * 3)}
/* The back link is the same species as .text-link and the share links — a
   standalone, uppercase, letter-spaced link — and it was the only one of them
   with no underline at all. The arrow lives on ::before here (it points left),
   so the underline takes ::after; everything else is the front page's rule
   unchanged. */
.article-back{position:relative;display:inline-flex;align-items:center;gap:13px;color:var(--emerald);font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.23em;text-transform:uppercase}
.article-back::before{content:"\2190";font-size:16px;font-weight:400;transition:transform .2s ease}
.article-back:hover::before{transform:translateX(-5px)}
.article-back::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:currentColor;transition:right .3s}
.article-back:hover::after{right:0}
.article-head{margin-bottom:clamp(32px,3.6vw,50px)}
.article-head h1{margin:clamp(22px,2.4vw,34px) 0 0;font-size:clamp(58px,7vw,100px);line-height:.96}
.article-dek{max-width:760px;margin-bottom:42px;font-size:clamp(19px,1.7vw,23px);line-height:1.55}
.article-image{aspect-ratio:16/9;border-radius:calc(var(--radius) + 5px);overflow:hidden}
.article-image img{width:100%;height:100%;object-fit:cover}
.article-body{padding:clamp(44px,4.6vw,68px) 0 0}
.article-body p{margin-bottom:26px;font-family:var(--display);font-size:clamp(20px,2vw,26px);line-height:1.72}
/* A link inside the prose had no rule at all, so it fell through to the global
   a{color:inherit;text-decoration:none} reset — the same colour as the sentence
   around it and no underline, which makes it invisible. No post has one yet,
   which is the only reason nobody has hit it; the first article that links to
   anything would have.
   Deliberately NOT the draw-in-on-hover underline the standalone links use:
   that pattern works because those links are obviously interactive where they
   sit, and a reader mid-sentence has to be able to SEE the link before deciding
   to hover it. Underlined at rest, in the emerald every other link on the site
   uses, with the same offset the consent line already established. */
.article-body a{color:var(--emerald);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s ease,text-decoration-color .2s ease}
.article-body a:hover{color:var(--emerald-2);text-decoration-thickness:2px}
.article-body>p:first-child::first-letter{float:left;margin:9px 12px 0 0;font-family:var(--display);font-size:78px;line-height:.75;color:var(--emerald)}
.article-body h2{margin:62px 0 18px;font-size:clamp(37px,4.2vw,56px);line-height:1.1}
.article-pull{margin:66px -90px;padding:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--emerald);font-family:var(--display);font-size:clamp(36px,4.4vw,61px);font-style:italic;line-height:1.12;text-align:center}
.author{display:grid;grid-template-columns:88px 1fr;gap:22px;align-items:center;margin-top:70px;padding-top:30px;border-top:1px solid var(--line)}
.author img{width:88px;height:88px;border-radius:50%;object-fit:cover}
.author p{margin:5px 0 0;font-family:var(--text);font-size:14px;line-height:1.5;color:var(--muted)}

/* Forms, directory, legal and utility pages */
/* Contact — the invitation on the left, the form on the right, the ways to
   reach a human across the bottom.
   The copy column used to be .78fr, which put an 88px headline in a 430px
   column: five lines with a ragged edge, and a page whose loudest element was
   also its most cramped. Equal columns and a smaller top end give it three
   comfortable lines instead. */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(52px,6vw,96px);align-items:start}
.contact-copy h1{margin:22px 0 24px;font-size:clamp(46px,4.6vw,72px);line-height:1.02}
.contact-copy>.lead{max-width:24em}
/* The form carried no weight of its own on a paper section, so the right half
   read as unfinished next to a dense left one. A bone panel gives it edges —
   same radius as an article sheet, because it is the same idea: one considered
   surface holding one job. */
.contact-form-panel{padding:clamp(28px,3vw,44px);border:1px solid var(--line);border-radius:calc(var(--radius) * 3);background:var(--bone)}
.contact-form-panel h2{margin:0 0 clamp(22px,2.4vw,30px);font-size:clamp(27px,2.4vw,36px);line-height:1.1}
.contact-form-panel .field input,.contact-form-panel .field textarea{border-bottom-color:var(--line-strong)}

/* Booking a call is not a contact detail, it is the second thing a hesitant
   visitor looks for — so it sits beside the invitation rather than in a row of
   addresses, and it fills the space a short copy column left under the lead. */
.contact-callout{margin-top:clamp(34px,3.6vw,52px);padding:clamp(22px,2.2vw,30px);border:1px solid var(--line);border-left:2px solid var(--emerald);border-radius:calc(var(--radius) + 4px)}
.contact-callout strong{display:block;margin-bottom:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--emerald)}
.contact-callout p{margin:0 0 16px;max-width:34em;color:var(--muted);font-size:15px;line-height:1.6}

/* The details used to stack under the copy, lengthening the column that was
   already too long and leaving the space under the form empty. As a strip they
   fill it, and four short columns read faster than four stacked rows. */
.contact-strip-section{padding-top:0}
.contact-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.contact-cell{padding:clamp(26px,2.6vw,36px) clamp(20px,2vw,30px) 0 0;border-right:1px solid var(--line)}
.contact-cell:last-child{border-right:0;padding-right:0}
.contact-cell:not(:first-child){padding-left:clamp(20px,2vw,30px)}
.contact-cell strong{display:block;margin-bottom:12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--emerald)}
.contact-cell a{font-family:var(--text);font-size:17px}
.contact-cell .muted{margin:8px 0 0;font-size:14px;line-height:1.55}
.contact-cell .text-link{font-size:12px}
.form-title{margin:0 0 34px;font-size:clamp(35px,4vw,52px)}
.editorial-form{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
.field{display:grid;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.field input,.field textarea{width:100%;border:0;border-bottom:1px solid var(--line-strong);outline:0;background:transparent;padding:11px 0;color:var(--ink);font-family:var(--text);font-size:16px}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--emerald)}
.editorial-form .btn{grid-column:1/-1;justify-self:start;margin-top:8px}
.inline-form{display:flex;align-items:end;gap:14px}
.inline-form .field{flex:1}
.inline-form input{color:inherit;border-color:currentColor}
.inline-form .btn{flex:0 0 auto}
.directory{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.directory__col{padding:42px clamp(25px,3.4vw,52px);border-right:1px solid var(--line)}
.directory__col:last-child{border-right:0}
.directory h2{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--emerald)}
.directory ul{list-style:none;margin:28px 0 0;padding:0}
.directory li{border-top:1px solid var(--line)}
.directory a{display:flex;justify-content:space-between;gap:18px;padding:14px 0;font-family:var(--display);font-size:20px}
.directory a::after{content:"\2197";color:var(--emerald);font-family:var(--ui);font-size:15px}
.legal{width:min(860px,calc(100% - 48px));margin:auto;padding:clamp(82px,9vw,132px) 0}
.legal h1{margin:24px 0 30px;font-size:clamp(58px,7vw,96px);line-height:.98}
.legal .updated{padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted)}
.legal h2{margin:54px 0 13px;font-size:clamp(31px,3.5vw,46px)}
.legal p,.legal li{color:var(--muted);font-size:17px}
.legal ul{padding-left:22px}
.utility{min-height:calc(100vh - 92px);display:grid;place-items:center;padding:80px 24px;background:var(--paper);text-align:center}
.utility__inner{max-width:850px}
.utility .code{display:block;font-family:var(--display);font-size:clamp(110px,18vw,250px);font-weight:300;line-height:.72;color:var(--emerald);opacity:.18}
.utility h1{margin:28px 0 20px;font-size:clamp(52px,7vw,94px);line-height:.98}
.utility .lead{max-width:680px;margin:0 auto 36px}
.utility .inline-form{max-width:560px;margin:34px auto 0}
.links-page{min-height:calc(100vh - 92px);padding:75px 24px 100px;background:var(--paper);text-align:center}
.links-avatar{width:156px;height:156px;margin:0 auto 26px;border-radius:50%;object-fit:cover}
.links-page h1{margin:0;font-size:clamp(48px,6vw,76px)}
.links-page .lead{margin:8px auto 32px}
.link-stack{width:min(610px,100%);margin:0 auto;display:grid;gap:12px}
.link-stack a{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:0 22px;border:1px solid var(--line-strong);border-radius:var(--radius);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:.2s}
.link-stack a::after{content:"\2192"}
.link-stack a:first-child,.link-stack a:hover{border-color:var(--emerald);background:var(--emerald);color:#fff}
.social-line{margin-top:30px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--emerald)}

/* CTA and footer */
.cta-band{padding:clamp(72px,7vw,104px) 0;background:var(--bone-2)}
.cta-band__inner{display:grid;grid-template-columns:1.15fr .85fr auto;align-items:center;gap:clamp(35px,6vw,90px)}
.cta-band h2{margin:0;font-size:clamp(42px,5vw,70px);line-height:1.02}
.cta-band p{margin:0;color:var(--muted)}
.site-footer{padding:clamp(72px,7vw,104px) 0 28px;background:var(--ink);color:var(--on-ink)}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(36px,4vw,64px);align-items:start}
.footer-brand .site-logo{display:block;color:#fff;font-size:24px}
.footer-brand p{max-width:300px;margin-top:18px;color:var(--on-ink-mute);font-size:15px;line-height:1.6}
.footer-col h2,.footer-join h2{margin:0 0 18px;color:var(--emerald-soft);font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-col a{font-size:14px}
.footer-col a:hover{color:#fff}
.footer-join p{max-width:280px;margin-bottom:18px;color:var(--on-ink-mute);font-size:15px}
.footer-join form{display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.25)}
.footer-join input{flex:1;min-width:0;padding:12px 0;border:0;outline:0;background:transparent;color:#fff}
.footer-join input::placeholder{color:var(--on-ink-mute)}
.footer-join button{padding:8px;border:0;background:transparent;color:#fff;font-size:18px;cursor:pointer}
.footer-strip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:58px;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.footer-strip>div{padding:22px 18px;border-right:1px solid rgba(255,255,255,.16)}
.footer-strip>div:last-child{border-right:0}
.footer-strip strong{display:block;margin-bottom:5px;color:var(--emerald-soft);font-size:10px;letter-spacing:.17em;text-transform:uppercase}
.footer-strip a,.footer-strip span{font-size:12px;color:var(--on-ink)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;color:var(--on-ink-mute);font-size:11px;letter-spacing:.1em}

.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.frame img{transition:none}}

@media (max-width:1100px){
  :root{--wrap:min(100% - 56px,1320px)}
  .nav-links{display:none}.nav-burger{display:flex}
  .sub-hero__grid{grid-template-columns:1fr 1fr;gap:42px}
  .sub-hero h1{font-size:clamp(50px,6.7vw,74px)}
  .offer__body{grid-template-columns:1fr}.offer__media{max-width:520px;aspect-ratio:16/10}
  .case-study__grid{grid-template-columns:.9fr 1.1fr;gap:55px}
  .footer-top{grid-template-columns:1fr 1fr}.footer-strip{grid-template-columns:1fr 1fr}
  .footer-strip>div:nth-child(2){border-right:0}.footer-strip>div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.16)}
}

@media (max-width:800px){
  :root{--wrap:calc(100% - 40px)}
  .nav-inner{min-height:76px}.site-logo{font-size:19px}
  .sub-hero{padding-top:62px}.sub-hero__grid,.page-hero__inner,.story-grid,.offer,.offer__body,.faq-layout,.case-study__grid,.newsletter__inner,.contact-grid,.cta-band__inner{grid-template-columns:1fr}
  .sub-hero__copy{padding:0}.sub-hero h1,.page-hero h1{font-size:clamp(47px,13vw,72px)}
  .sub-hero__media{aspect-ratio:4/4.4}.page-hero .lead{max-width:650px}
  .story-grid{gap:48px}.story-grid .frame{aspect-ratio:4/4.6}
  .principles{grid-template-columns:1fr}.principle{border-right:0;border-bottom:1px solid var(--line)}.principle:last-child{border-bottom:0}.principle h3{margin-top:30px}
  .offer{gap:35px}.offer__num{font-size:70px}.offer__body{gap:36px}.offer__media{aspect-ratio:16/10}
  .case-study:nth-child(even) .case-study__grid{direction:ltr}.case-study__media{position:relative;top:0;aspect-ratio:4/3}
  .journal-grid{display:grid;grid-template-columns:1fr 1fr}.journal-card{grid-column:auto}.journal-card:nth-child(2){margin-top:0}.journal-card:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center}
  .article-head h1{font-size:clamp(50px,12vw,78px)}
  .article-pull{margin:55px 0}
  .contact-grid{gap:56px}.contact-strip{grid-template-columns:1fr 1fr}.contact-cell:nth-child(2n){border-right:0}.contact-cell:nth-child(-n+2){padding-bottom:26px;border-bottom:1px solid var(--line)}.contact-cell:nth-child(odd){padding-left:0}.contact-cell:last-child{padding-left:0}.directory{grid-template-columns:1fr}.directory__col{border-right:0;border-bottom:1px solid var(--line)}.directory__col:last-child{border-bottom:0}
  .footer-top{grid-template-columns:1fr 1fr}
}

@media (max-width:560px){
  :root{--wrap:calc(100% - 30px)}
  body{font-size:15.5px}.section{padding:76px 0}
  .site-logo{font-size:17px}.nav-inner{padding:0 15px}
  .drawer{padding:20px}.drawer-sub{grid-template-columns:1fr}
  .sub-hero h1,.page-hero h1,.image-hero h1,.contact-copy h1{font-size:clamp(43px,14vw,61px)}
  .sub-hero__media{aspect-ratio:4/5}.image-hero{min-height:680px}.image-hero__copy{padding:90px 0 70px}
  .stats{grid-template-columns:1fr}.stat{display:flex;align-items:end;justify-content:space-between}.stat strong{font-size:46px}
  .offer{padding:70px 0}.offer__media{aspect-ratio:4/3}
  .journal-grid{grid-template-columns:1fr}.journal-card:last-child{grid-column:auto;display:block}.journal-card .frame,.journal-card:nth-child(2) .frame{aspect-ratio:4/3}
  .article-sheet{width:calc(100% - 20px);border-radius:calc(var(--radius) * 2);padding-inline:18px}.article-image{aspect-ratio:4/3}.cve-specimen{width:calc(100% - 20px);padding-inline:18px}.article-nav{width:calc(100% - 20px)}
  .contact-strip{grid-template-columns:1fr}.contact-cell{padding:24px 0;border-right:0;border-bottom:1px solid var(--line)}.contact-cell:last-child{border-bottom:0}.contact-cell:not(:first-child){padding-left:0}.editorial-form{grid-template-columns:1fr}.field--full,.editorial-form .btn{grid-column:auto}.inline-form{display:grid}.inline-form .btn{width:100%}
  .cta-band__inner{text-align:left}.cta-band .btn{width:100%}
  .footer-top{grid-template-columns:1fr}.footer-strip{grid-template-columns:1fr}.footer-strip>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}.footer-strip>div:last-child{border-bottom:0}.footer-strip>div:nth-child(2){border-bottom:1px solid rgba(255,255,255,.16)}
  .footer-bottom{flex-direction:column}
}

/* Consent note + submit result under any connected form on a subpage. Same
   voice as .lead/.muted rather than a new one — these lines belong to the form
   they sit under, not to the plugin that inserted them. */
.cve-consent,.cve-form-message{max-width:520px;margin-top:12px;color:var(--muted);font-family:var(--ui);font-size:12.5px;line-height:1.5;opacity:1}
.cve-form-message{color:var(--emerald);font-weight:700;letter-spacing:.04em}
.cve-form-message[data-cve-error]{color:#8f3a2c}
.cve-consent a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.hero-form + .cve-consent,.hero-form ~ .cve-form-message,.inline-form + .cve-consent,.inline-form ~ .cve-form-message{margin-inline:auto;text-align:center}

/* Blog index — topic chips.
   Reuses the site's own uppercase/letter-spaced label voice (see .eyebrow,
   .btn) rather than introducing a second one. */
.topics{display:flex;flex-wrap:wrap;gap:12px}
.topic{display:inline-flex;align-items:baseline;gap:9px;padding:12px 21px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.topic:hover,.topic:focus-visible{border-color:var(--emerald);background:var(--emerald);color:#fff}
.topic i{font-style:normal;color:var(--muted);font-size:10px;letter-spacing:.08em}
.topic:hover i,.topic:focus-visible i{color:rgba(255,255,255,.72)}

/* Blog index — "load more".
   A pill, like the topic chips it sits under, rather than a second button
   language on the same page: the chips filter the listing, this extends it.
   Sized to .btn's height so it reads as an action, and the arrow turns down
   because that is where the next nine cards appear. */
.journal-more{display:flex;justify-content:center;margin-top:clamp(44px,4.5vw,68px)}
.journal-more .btn{border-color:var(--line);border-radius:999px;background:transparent;color:var(--ink)}
.journal-more .btn::after{content:"\2193"}
.journal-more .btn:hover,.journal-more .btn:focus-visible{border-color:var(--emerald);background:var(--emerald);color:#fff}
/* [hidden] is only display:none in the UA stylesheet, so .btn's own
   display:inline-flex outranks it and a button marked hidden — by the server
   when there is no page two, or by the script when the last page arrives —
   stays on screen, doing nothing. This is the rule that actually hides it. */
.journal-more .btn[hidden]{display:none}
/* Mid-request the button must look busy without moving: no spinner, no size
   change, just a button that clearly is not accepting a second press. */
.journal-more .btn[aria-busy="true"]{opacity:.5;cursor:progress}
.journal-more .btn[data-cve-error]::after{content:"\21BB"}

/* Featured post — the .story-grid pairing already used elsewhere on the site,
   with the card's own type scale rather than the story section's larger one. */
.featured-post .story-copy h2{margin:18px 0 14px;font-size:clamp(34px,3.6vw,52px)}
.featured-post .frame{aspect-ratio:4/5}

/* Category/search archives render through core blocks, so the post template's
   own <ul>/<li> stand in for .journal-card markup — give them the same grid
   slot and rhythm so an archive matches the blog index instead of looking like
   a default WordPress list. */
.journal-grid.wp-block-post-template{list-style:none;margin:0;padding:0}
.journal-grid.wp-block-post-template>li{grid-column:span 4;padding-bottom:28px;border-bottom:1px solid var(--line)}
.journal-grid.wp-block-post-template>li:nth-child(2){margin-top:70px}
.journal-grid.wp-block-post-template .wp-block-post-featured-image{overflow:hidden;aspect-ratio:4/5;margin-bottom:27px;border-radius:var(--radius);background:var(--bone-2)}
.journal-grid.wp-block-post-template .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover}
.journal-grid.wp-block-post-template .wp-block-post-title{margin:15px 0 12px;font-size:clamp(29px,3vw,42px);line-height:1.08}
.journal-grid.wp-block-post-template .wp-block-post-excerpt{color:var(--muted)}

/* ── Blog index, editorial layout ──────────────────────────────────────────
   Cards use a landscape frame here rather than the 4/5 portrait used
   elsewhere on the site: a listing is scanned, and tall images push the
   headline of every card below the fold. The stagger that makes a 3-item
   feature grid feel hand-placed also works against a listing, so this grid
   is deliberately uniform. */
.journal-grid{align-items:start}
.journal-card .frame,.journal-card:nth-child(2) .frame{aspect-ratio:16/10;margin-bottom:22px}
.journal-card:nth-child(2){margin-top:0}
.journal-card{padding-bottom:0;border-bottom:0}
.journal-card h2{margin:13px 0 10px;font-size:clamp(23px,1.8vw,27px);line-height:1.18}
.journal-card p{font-size:15px;line-height:1.6;
  /* Two lines, so every card in a row ends at the same place. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.journal-card .card-meta{display:flex;align-items:center;gap:12px;color:var(--emerald);font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.journal-card .card-meta time{color:var(--muted);font-weight:600;letter-spacing:.14em}
.journal-card .text-link{margin-top:14px}

/* Featured post — one wide tile with the copy over the image, the strongest
   moment on the page and the reason it doesn't need a large card grid too. */
.feature{position:relative;display:block;overflow:hidden;border-radius:var(--radius);aspect-ratio:21/9;color:#fff;text-decoration:none}
.feature img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.feature:hover img{transform:scale(1.03)}
.feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,26,23,.12) 0%,rgba(20,26,23,.34) 45%,rgba(20,26,23,.72) 100%)}
.feature__body{position:absolute;inset:auto 0 0 0;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 clamp(24px,5vw,80px) clamp(34px,5vw,64px);text-align:center}
.feature__cats{color:#fff;font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;opacity:.92}
.feature__body h2{max-width:19ch;margin:0;color:#fff;font-size:clamp(30px,3.6vw,54px);line-height:1.06}
.feature__date{color:rgba(255,255,255,.78);font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}

/* Centred section heading, the "from the blog" beat between the feature and
   the listing. */
.notes-head{margin-bottom:clamp(44px,5vw,68px);text-align:center}
.notes-head .eyebrow{justify-content:center}
.notes-head h2{margin:14px 0 0;font-size:clamp(34px,4vw,58px);line-height:1.04}

@media (max-width:900px){
  .feature{aspect-ratio:4/3}
  .feature__body h2{max-width:none}
}

/* ── Blog index, centred variant ───────────────────────────────────────────
   The default .sub-hero is a two-column grid whose larger column expects
   .sub-hero__media. A listing has no hero image to put there, and leaving it
   empty left half the screen blank, so this variant collapses to one centred
   column and carries the signup inline — the page opens full-width and the
   newsletter stops being a separate band lower down. */
.sub-hero--center .sub-hero__grid{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.sub-hero--center .sub-hero__copy{padding-left:0;max-width:820px}
.sub-hero--center .eyebrow{justify-content:center}
.sub-hero--center h1{max-width:none;margin:22px auto 24px}
.sub-hero--center .lead{max-width:620px;margin:0 auto 34px}
.hero-form{display:flex;justify-content:center;gap:10px;max-width:520px;margin:0 auto;flex-wrap:wrap}
.hero-form input{flex:1;min-width:240px;height:56px;padding:0 20px;border:1px solid var(--line-strong);border-radius:var(--radius);background:#fff;color:var(--ink);font-family:var(--ui);font-size:14px}
.hero-form input::placeholder{color:var(--muted)}
.hero-form input:focus{outline:none;border-color:var(--emerald)}
.hero-form .btn{min-height:56px;flex:none}
.hero-note{margin-top:14px;color:var(--muted);font-family:var(--ui);font-size:12px;letter-spacing:.04em}

/* Boxed cards. The borderless listing read as loose images floating on the
   page; a hairline box gives every card the same footprint whether its
   headline runs to one line or three. */
.journal-grid{align-items:stretch}
.journal-card{display:flex;flex-direction:column;height:100%;padding:14px 14px 20px;border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);background:var(--paper);transition:border-color .25s,transform .25s}
.journal-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.journal-card .frame,.journal-card:nth-child(2) .frame{aspect-ratio:16/10;margin-bottom:18px}
.journal-card .card-meta{padding:0 6px}
.journal-card h2{margin:10px 6px 8px;font-size:clamp(21px,1.55vw,24px);line-height:1.2}
.journal-card p{margin:0 6px;font-size:14.5px}
.journal-card .text-link{margin:18px 6px 0;align-self:flex-start;
  /* Pushed to the bottom so every card's link sits on one line across a row,
     however many lines its headline runs to. */
  margin-top:auto}

/* Filter row: category pills left, search right. They share one line because
   they are the same control surface — two ways of narrowing the same list —
   and the search field is deliberately built to the .topic pill's dimensions
   so the row reads as one set rather than a toolbar with a stray input. */
.topics-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.topics-bar .topics{flex:1 1 auto}
.topic-search{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border:1px solid var(--line);border-radius:999px;background:transparent;transition:border-color .2s}
.topic-search:focus-within{border-color:var(--emerald)}
.topic-search svg{flex:none;color:var(--muted);transition:color .2s}
.topic-search:focus-within svg{color:var(--emerald)}
.topic-search input{width:186px;padding:0;border:0;outline:0;background:transparent;color:var(--ink);font-family:var(--ui);font-size:12.5px;line-height:1.5}
.topic-search input::placeholder{color:var(--muted)}
/* Safari paints its own rounded box and clear button on type="search". */
.topic-search input[type=search]{-webkit-appearance:none;appearance:none}
.topic-search input::-webkit-search-decoration,.topic-search input::-webkit-search-cancel-button{-webkit-appearance:none}
@media (max-width:620px){
  .topics-bar{align-items:stretch}
  .topic-search{width:100%}
  .topic-search input{width:100%}
}

/* Archive + search results are rendered by core's post-template, not by the
   [wp-posts] token, so they need the boxed treatment stated again against
   their own markup. Without this the blog has three card looks: boxed on
   /blog/, and the older staggered borderless one everywhere else. */
.journal-grid.wp-block-post-template>li{display:flex;flex-direction:column;height:100%;padding:14px 14px 20px;border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);background:var(--paper);transition:border-color .25s,transform .25s}
.journal-grid.wp-block-post-template>li:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.journal-grid.wp-block-post-template>li:nth-child(2){margin-top:0}
.journal-grid.wp-block-post-template .wp-block-post-featured-image{aspect-ratio:16/10;margin-bottom:18px}
.journal-grid.wp-block-post-template .eyebrow{padding:0 6px}
.journal-grid.wp-block-post-template .wp-block-post-title{margin:10px 6px 8px;font-size:clamp(21px,1.55vw,24px);line-height:1.2}
.journal-grid.wp-block-post-template .wp-block-post-excerpt{margin:0 6px;font-size:14.5px}
.journal-grid.wp-block-post-template .wp-block-post-excerpt__more-text{margin-top:auto;padding-top:12px}

/* ---------- ARTICLE TEMPLATE ADDITIONS ---------- */
/* Dateline, share row and prev/next, added when the single-post layout became
   an editable template part (parts/article.html). */
/* Emerald, not muted: the dateline is now the only thing between a very large
   title and the image, so it carries the eyebrow's job as well as its own. It
   wraps rather than shrinks — three items in one line is a desktop luxury. */
.article-dateline{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:clamp(16px,1.8vw,24px) 0 0;color:var(--emerald);font-family:var(--ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.article-dateline__dot{width:3px;height:3px;border-radius:50%;background:var(--emerald-soft)}
.article-dateline__link{position:relative}
.article-dateline__link::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:currentColor;transition:right .3s}
.article-dateline__link:hover::after{right:0}

.article-share{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(44px,4.6vw,68px);padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--line)}
.article-share__label{color:var(--muted);font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.article-share__link{position:relative;font-family:var(--ui);font-size:13px;letter-spacing:.08em;color:var(--ink)}
.article-share__link::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:var(--emerald);transition:right .3s}
.article-share__link:hover::after{right:0}

.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:min(1040px,calc(100% - 40px));margin:0 auto;padding-bottom:clamp(72px,7vw,104px)}
.article-nav__item{display:flex;flex-direction:column;gap:8px;padding:26px 28px;border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);background:var(--paper);transition:border-color .25s,transform .25s}
.article-nav__item:hover{border-color:var(--line-strong);transform:translateY(-3px)}
/* When there is no previous post the {prev} half is dropped entirely, so the
   next-post card would sit in the left column on its own; this pushes a lone
   "next" back to the right where it belongs. */
.article-nav__item--next:only-child{grid-column:2}
/* The PREVIOUS / NEXT label carries the same drawn-in underline as every other
   standalone link. Two things make it differ from the rest in how it is wired:

   The whole card is the <a>, so the trigger is the CARD's hover, not the
   label's — hovering anywhere on the card draws it, which is what a reader
   aiming at a big target expects.

   align-self is not decoration. The label is a plain child of a flex COLUMN, so
   it stretches to the full card width by default and the underline would run
   the whole 500px of it instead of sitting under the four words. Shrinking the
   box to its content is what makes the line match the text. */
.article-nav__label{position:relative;align-self:flex-start;color:var(--muted);font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.article-nav__label::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:currentColor;transition:right .3s}
.article-nav__item:hover .article-nav__label::after{right:0}
/* Mirrored on the NEXT card so the line grows from the arrow's side, the way
   the arrow itself points — left-to-right going forward, right-to-left going
   back. */
.article-nav__item--next .article-nav__label{align-self:flex-end}
.article-nav__item--next .article-nav__label::after{left:100%;right:0;transition:left .3s}
.article-nav__item--next:hover .article-nav__label::after{left:0}
.article-nav__title{font-family:var(--display);font-size:clamp(19px,1.5vw,23px);font-weight:400;line-height:1.25}
.article-nav__item--next{text-align:right}

/* ---------- STYLE SPECIMEN (editor only) ---------- */
/* Never reaches a visitor — clara_ve_strip_specimen() cuts it from the
   published page. Deliberately set apart from the article so nobody mistakes
   it for content: dashed rule, muted label, its own band. */
/* Same column as the sheet, minus the sheet's own padding, so a paragraph
   styled here is the width it will be in a real article. */
.cve-specimen{width:min(1040px,calc(100% - 40px));margin:0 auto clamp(72px,7vw,104px);padding:clamp(40px,4vw,56px) clamp(22px,3.6vw,56px) 0;border-top:1px dashed var(--line-strong)}
.cve-specimen__note{margin:0 0 26px;color:var(--muted);font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
/* The samples inherit the real body rules, so what you see here is what an
   article looks like — that is the whole point of a specimen. */
.cve-specimen__body p{margin-bottom:26px;font-family:var(--display);font-size:clamp(20px,2vw,26px);line-height:1.72}
.cve-specimen__body h2{margin:40px 0 18px;font-size:clamp(37px,4.2vw,56px);line-height:1.1}
.cve-specimen__body h3{margin:32px 0 14px;font-size:clamp(26px,2.6vw,34px);line-height:1.15}
.cve-specimen__body blockquote{margin:32px 0;padding-left:24px;border-left:2px solid var(--emerald);font-family:var(--display);font-size:clamp(21px,2.1vw,27px);line-height:1.5}
.cve-specimen__body ul{margin:0 0 26px;padding-left:22px}
.cve-specimen__body li{margin-bottom:10px;font-family:var(--display);font-size:clamp(18px,1.7vw,22px);line-height:1.6}

@media (max-width:800px){
  .article-nav{grid-template-columns:1fr}
  .article-nav__item--next{text-align:left}
  /* Stacked, the NEXT card aligns left like the other one — so its label and
     its underline follow, or the line would still be drawn from the right edge
     of a card whose text now starts on the left. */
  .article-nav__item--next .article-nav__label{align-self:flex-start}
  .article-nav__item--next .article-nav__label::after{left:0;right:100%;transition:right .3s}
  .article-nav__item--next:hover .article-nav__label::after{right:0}
  .article-nav__item--next:only-child{grid-column:auto}
}

/* Safety net for hand-set sizes in the article template. Resizing the featured
   image writes a pixel width, which is the right thing to offer — but a fixed
   width wider than a phone turns the whole page into a horizontal scroll, and
   the person setting it is looking at a desktop canvas. max-width beats width
   without needing !important, so the chosen size still holds wherever there is
   room for it and simply stops short on screens where there isn't. */
.article-image,
.article-body,
.article-share{max-width:100%}
.article-nav{max-width:calc(100% - 20px)}