/* Quiet Authority. Source of truth: design/DESIGN.md */
:root{--paper:#f5f2eb;--paper-2:#ece7dc;--ink:#15140f;--body:#3b3932;--muted:#6b675c;--line:#d9d3c6;--bronze:#8c6a3e;--bronze-light:#c4a574;--on-dark:#ede8dc;--olive-deep:#2a2f1f;--dark-surface:linear-gradient(100deg,var(--ink) 38%,var(--olive-deep));--on-dark-muted:#a8a294;--gutter:clamp(20px,4vw,48px);--space-section:clamp(52px,7vw,100px);--space-band:clamp(64px,9vw,128px);--space-head:clamp(32px,4vw,56px);--space-row:clamp(24px,3vw,36px);--serif:Newsreader,Georgia,'Times New Roman',serif;--sans:Inter,system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}html{overflow-x:clip}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.7 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.3em}button{font:inherit;cursor:pointer}img{max-width:100%}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}

/* Type */
h1,h2,h3{font-family:var(--serif);font-weight:400;font-optical-sizing:auto;margin:0;text-wrap:balance;color:inherit}
h1{font-size:clamp(46px,7.2vw,108px);line-height:.98;letter-spacing:-.03em}
h2{font-size:clamp(34px,4.6vw,64px);line-height:1.04;letter-spacing:-.02em}
h3{font-size:clamp(24px,2.2vw,30px);line-height:1.15;letter-spacing:-.01em}
h1 em,h2 em{font-style:italic;color:var(--bronze)}
p{margin:0 0 1.2em;color:var(--body)}
.eyebrow{display:flex;align-items:center;gap:14px;font:600 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);margin:0 0 28px}
.eyebrow::before{content:"";flex:none;width:32px;height:1px;background:currentColor}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--muted);max-width:36em}
.muted{color:var(--muted)}
.num{font-family:var(--serif);font-size:clamp(40px,4vw,56px);line-height:1;color:var(--bronze);font-variant-numeric:lining-nums}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:96px}
.wordmark{display:inline-flex;align-items:center;gap:14px;text-decoration:none;font:600 13px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.wordmark .signature{flex:none;width:auto;height:44px;margin-block:-4px}
.wordmark-name{display:block;padding-left:14px;border-left:1px solid var(--line)}
.wordmark small{display:block;margin-top:9px;font-size:10px;font-weight:400;letter-spacing:.2em;color:var(--muted)}
nav#navigation{display:flex;gap:clamp(20px,3vw,40px);font-size:13px;letter-spacing:.04em}
nav#navigation a{text-decoration:none;padding-block:6px;border-bottom:1px solid transparent}
nav#navigation a:hover,nav#navigation a[aria-current]{border-color:var(--bronze)}
.menu-button{display:none;position:relative;width:40px;height:40px;margin-right:-8px;border:0;background:none;padding:0;color:var(--ink)}
/* Three hairlines; the middle one fades and the outer two cross into an X when the menu is open. */
.menu-icon,.menu-icon::before,.menu-icon::after{position:absolute;left:9px;width:22px;height:1.5px;background:currentColor;transition:transform .2s,top .2s,background-color .2s}
.menu-icon{top:19.25px}.menu-icon::before,.menu-icon::after{content:"";left:0}.menu-icon::before{top:-7px}.menu-icon::after{top:7px}
.menu-button[aria-expanded="true"] .menu-icon{background-color:transparent}.menu-button[aria-expanded="true"] .menu-icon::before{top:0;transform:rotate(45deg)}.menu-button[aria-expanded="true"] .menu-icon::after{top:0;transform:rotate(-45deg)}

/* Actions */
.button{display:inline-flex;align-items:center;gap:16px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:0;padding:18px 28px;font:500 14px/1 var(--sans);letter-spacing:.04em;text-decoration:none}
.button:hover{background:var(--bronze);border-color:var(--bronze)}
.text-link{display:inline-block;font-size:14px;font-weight:500;letter-spacing:.02em;text-decoration:none;border-bottom:1px solid var(--bronze);padding-bottom:4px}
.text-link:hover{color:var(--bronze)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:40px}

/* Sections */
.section{padding-block:var(--space-section)}
.section+.section{border-top:1px solid var(--line)}
/* A ruled list already closes its section; the next section skips its divider so rules never double. */
.section:has(>.work-list:last-child,>.rows:last-child,>.product-grid:last-child,>.article-list:last-child,>.section-more:last-child)+.section{border-top:0}
/* "See all" links close their section, after the content they continue. */
.section-more{margin-top:clamp(24px,3vw,36px)}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;margin-bottom:var(--space-head)}
.section-head h2{max-width:14em}.section-head .lead{margin:20px 0 0}
.page-intro{padding-block:clamp(40px,6.5vw,96px) clamp(36px,5vw,72px);border-bottom:1px solid var(--ink)}
.page-intro h1{max-width:12em;margin-bottom:36px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(32px,6vw,112px)}
.split>:first-child>*{position:sticky;top:40px}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end;padding-block:clamp(40px,7vw,104px) clamp(48px,6vw,88px)}
.hero h1{font-size:clamp(46px,6.2vw,96px);margin-bottom:36px}
.hero-portrait img{aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.hero-social{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;border-top:1px solid var(--ink);padding-top:24px}
.hero-social-label{font:600 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.social-link{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;text-decoration:none;color:var(--ink)}
.social-link svg{width:18px;height:18px;flex:none}
.social-link span{border-bottom:1px solid transparent;padding-bottom:2px}.social-link:hover{color:var(--bronze)}.social-link:hover span{border-color:var(--bronze)}
.footer-social{display:flex;gap:20px}.footer-social .social-link{color:var(--on-dark-muted)}.footer-social .social-link:hover{color:var(--on-dark)}

/* Ruled rows */
.rows{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1.2fr);gap:32px;align-items:baseline;padding-block:var(--space-row);border-bottom:1px solid var(--line)}
.row p{margin:0;color:var(--muted)}
.work-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(24px,5vw,80px);padding-block:clamp(30px,3.6vw,48px);border-top:1px solid var(--line)}
.work-list{border-bottom:1px solid var(--line)}.work-list .work-item:first-child{border-top:1px solid var(--ink)}
.work-item h2,.work-item h3{font-size:clamp(32px,3.6vw,52px);line-height:1.05;letter-spacing:-.02em;margin-bottom:14px}
.work-item .role{font:600 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.work-item p{max-width:34em}
.work-item .text-link{margin-top:8px}
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);border-top:1px solid var(--ink);padding-top:40px}
.products h3{margin-bottom:12px}.products p{color:var(--muted);font-size:16px}

/* Dark band */
.band{position:relative;margin-inline:calc(50% - 50vw);background:var(--ink);background-image:var(--dark-surface);color:var(--on-dark);overflow:hidden;isolation:isolate}
.band-inner{max-width:1280px;margin-inline:auto;padding:var(--space-band) var(--gutter)}
.band-photo{position:absolute;inset:0 0 0 34%;z-index:-1}
.band-photo picture,.band-photo img{width:100%;height:100%}
.band-photo img{object-fit:cover;object-position:44% 30%;opacity:.26;mix-blend-mode:luminosity}
.band-photo.photo-strong img{opacity:.55}.band-photo.photo-faint img{opacity:.13}
.band-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink),rgba(21,20,15,.5) 30%,rgba(42,47,31,0) 70%),linear-gradient(0deg,rgba(42,47,31,.55),rgba(42,47,31,0) 45%)}
.band h2{max-width:11em;margin-bottom:28px}.band h2 em{color:var(--bronze-light)}
.band p,.band .lead{color:var(--on-dark-muted)}.band .eyebrow{color:var(--bronze-light)}
.band .text-link{border-color:var(--bronze-light)}.band .text-link:hover{color:var(--bronze-light)}
.band .button,footer .button{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.band .button:hover,footer .button:hover{background:var(--bronze-light);border-color:var(--bronze-light)}

/* Photography */
figure{margin:0}picture{display:block}
picture img{display:block;width:100%;height:auto;border-radius:0;filter:grayscale(1) contrast(1.06);background:var(--paper-2)}
figcaption{display:flex;align-items:center;gap:12px;margin-top:16px;font:500 11px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
figcaption::before{content:"";flex:none;width:24px;height:1px;background:var(--bronze)}
.feature{margin-inline:calc(50% - 50vw)}
.feature img{width:100%;height:auto;aspect-ratio:auto}
.feature figcaption{max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.photo-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.photo-pair img,.photo-single img{aspect-ratio:4/3;object-fit:cover}
.photo-single{width:calc(50% - clamp(10px,1.5vw,20px));margin-top:clamp(20px,3vw,40px)}
.band-rows{border-color:rgba(237,232,220,.4);margin-block:40px 36px}.band-rows .row{border-color:rgba(237,232,220,.14)}.band .num{color:var(--bronze-light)}.band .row h3{color:var(--on-dark)}
/* A full-width photo or band is its own divider: the intro drops its rule there instead of touching the image edge. */
.page-intro:has(+.feature,+.band){border-bottom:0}.feature+.section{border-top:0}
.about-portrait img{aspect-ratio:4/5;object-fit:cover}

/* Insights */
.article-list{border-top:1px solid var(--ink)}
.article-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding-block:28px;border-bottom:1px solid var(--line)}
.article-row time{font:600 11px/2.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.article-row h2,.article-row h3{font-size:clamp(26px,2.6vw,36px);line-height:1.12;margin-bottom:12px}
.article-row h2 a,.article-row h3 a{text-decoration:none}.article-row h2 a:hover,.article-row h3 a:hover{color:var(--bronze)}
.article-row p{margin:0;color:var(--muted)}
.topic-filter{display:flex;flex-wrap:wrap;gap:8px 28px;margin-bottom:40px}
.topic-filter a{font-size:13px;letter-spacing:.04em;text-decoration:none;padding-bottom:4px;border-bottom:1px solid transparent;color:var(--muted)}
.topic-filter a:hover,.topic-filter a[aria-current]{color:var(--ink);border-color:var(--bronze)}

/* Prose and articles */
.prose{max-width:680px}
.prose h2{font-size:clamp(30px,3.2vw,42px);line-height:1.1;margin:64px 0 20px}.prose h2:first-child{margin-top:0}
.prose h3{margin:40px 0 12px}
.article{max-width:760px;margin-inline:auto;padding-block:clamp(56px,8vw,112px)}
.article h1{font-size:clamp(40px,5.6vw,80px);margin-bottom:28px}
.article .meta{font:600 11px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--ink);padding-top:20px;margin-top:40px}
.article-cover{display:block;width:100%;height:auto;max-height:560px;object-fit:cover;margin:40px 0}
.article-body{font-size:18px;line-height:1.8;overflow-wrap:anywhere}
.article-body h2{font-size:clamp(28px,3vw,38px);margin:56px 0 18px}.article-body h3{margin:40px 0 12px}
.article-body blockquote{margin:40px 0;padding:0 0 0 28px;border-left:1px solid var(--bronze);font:italic 400 clamp(22px,2.2vw,28px)/1.4 var(--serif);color:var(--ink)}
.article-body blockquote p{color:inherit}.article-body li{margin-bottom:8px;color:var(--body)}
.article .back{display:inline-block;margin-top:56px}

/* Contact */
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(40px,7vw,120px)}
.contact-layout h2{margin-bottom:24px}
.contact-form{display:grid;gap:8px}
/* Fields read clearly as places to type: soft white fill, visible border, button-matched corners, bronze focus ring. */
.contact-form label{font:600 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--body);margin-top:22px}
.contact-form input,.contact-form textarea,.contact-form select{font:inherit;font-size:max(16px,1em);color:var(--ink);width:100%;padding:14px 16px;border:1px solid #cfc6b6;border-radius:6px;background:#fffdf8;appearance:none;transition:border-color .2s,box-shadow .2s}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#a39d90}
.contact-form input:hover,.contact-form textarea:hover,.contact-form select:hover{border-color:#b3a994}
.contact-form select{padding-right:44px;background-color:#fffdf8;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(-45deg,transparent 50%,var(--ink) 50%);background-position:calc(100% - 24px) 52%,calc(100% - 18px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.contact-form select:invalid{color:#a39d90}
.contact-form textarea{resize:vertical;min-height:160px;line-height:1.55}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 3px rgba(140,106,62,.18)}
.contact-form .muted{font-size:14px;margin-top:20px}
.contact-form button{justify-self:start;margin-top:8px}.contact-form button:disabled{opacity:.6;cursor:default}
.contact-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Footer */
footer{background:var(--ink);background-image:var(--dark-surface);color:var(--on-dark)}
.footer-cta{padding-block:clamp(64px,8vw,112px) clamp(48px,5.5vw,72px);border-bottom:1px solid rgba(237,232,220,.14)}
.footer-cta .eyebrow{color:var(--bronze-light)}
.footer-cta h2{font-size:clamp(44px,6.4vw,96px);line-height:1;max-width:10em;margin-bottom:44px}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-block:36px;font-size:13px;color:var(--on-dark-muted)}
.footer-base nav{display:flex;flex-wrap:wrap;gap:28px}.footer-base a{text-decoration:none}.footer-base a:hover{color:var(--on-dark)}
.footer-base .wordmark{color:var(--on-dark)}.footer-base .wordmark .signature{height:36px}.footer-base .wordmark-name{border-color:rgba(237,232,220,.2)}

/* Utility and dialogs */
dialog{border:1px solid var(--ink);border-radius:8px;padding:36px;max-width:min(480px,calc(100vw - 32px));color:var(--ink);background:var(--paper);box-shadow:0 24px 60px -24px rgba(21,20,15,.5)}
dialog::backdrop{background:rgba(21,20,15,.6)}dialog h2{font-size:30px;margin-bottom:16px}
#progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--bronze);z-index:20}
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;margin:-1px;white-space:nowrap;border:0}
.skip:focus{position:fixed;top:12px;left:12px;background:var(--paper);padding:12px;z-index:30}
:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}main:focus{outline:none}
@media(prefers-reduced-motion:no-preference){a,.button{transition:color .2s,background-color .2s,border-color .2s}}

@media(max-width:760px){
 .site-header{min-height:76px;flex-wrap:wrap;padding-block:16px;gap:12px}.wordmark small{letter-spacing:.12em}.wordmark .signature{height:36px}.wordmark{gap:10px}.wordmark-name{padding-left:10px}
 .menu-button{display:block}
 nav#navigation{display:none;width:100%;flex-direction:column;gap:0;padding-bottom:12px;font-size:16px}
 nav#navigation.open{display:flex}nav#navigation a{padding-block:12px;border-bottom:1px solid var(--line)}
 .hero,.split,.contact-layout,.photo-pair,.products,.work-item,.section-head{grid-template-columns:minmax(0,1fr)}
 .hero{gap:40px}.hero-portrait{max-width:420px}
 .row{grid-template-columns:56px minmax(0,1fr);gap:8px 20px}.row .num{font-size:32px}.row p{grid-column:2}
 .article-row{grid-template-columns:minmax(0,1fr);gap:4px}
 .split>:first-child>*{position:static}.about-portrait{max-width:420px}.photo-single{width:100%}

 .band-photo{inset:0}.band-photo::after{background:linear-gradient(0deg,var(--ink) 40%,rgba(21,20,15,.55))}.band,footer{--dark-surface:linear-gradient(160deg,var(--ink) 45%,var(--olive-deep))}
 .actions{gap:20px}
}
.page-intro+.section:has(>.work-list){padding-top:0}.page-intro+.section>.work-list>.work-item:first-child{border-top:0}
.section-head>.text-link{justify-self:start}
/* Portraits of Jas stay in colour and face into the page (design/DESIGN.md, Photography). */
.hero-portrait img,.about-portrait img{filter:none}.hero-portrait img{transform:scaleX(-1)}
/* Hero fills one desktop or laptop screen below the header, social row included (design/DESIGN.md, Hero). */
.hero .hero-social{grid-column:1/-1}
@media(min-width:761px){
 .hero{grid-template-rows:minmax(0,1fr) auto;height:calc(100svh - 96px);min-height:540px;padding-block:clamp(16px,4svh,56px) clamp(20px,4svh,48px);row-gap:clamp(20px,4svh,48px);align-items:stretch}
 .hero-copy{align-self:center}
 .hero .eyebrow{margin-bottom:clamp(12px,2.6svh,28px)}
 .hero h1{font-size:clamp(38px,min(6.2vw,9.4svh),96px);margin-bottom:clamp(14px,3.4svh,36px)}
 .hero .lead{font-size:clamp(16px,2.3svh,21px)}
 .hero .actions{margin-top:clamp(16px,3.6svh,40px)}
 .hero-portrait{display:flex;justify-content:flex-end;align-items:center;min-height:0}
 .hero-portrait picture{height:100%;max-width:100%}
 .hero-portrait img{height:100%;width:auto;max-width:100%}
 .hero .hero-social{padding-top:clamp(14px,2.6svh,24px)}
}
/* Product logo grid (Work). Product logos keep their own colours (design/DESIGN.md, Product logos). */
.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--ink)}
.product{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(22px,3vw,36px) clamp(0px,3vw,40px) clamp(22px,3vw,36px) 0;border-bottom:1px solid var(--line)}
.product:nth-child(even){padding-left:clamp(24px,4vw,48px);padding-right:0;border-left:1px solid var(--line)}
.product-logo{display:flex;align-items:center;height:48px;margin-bottom:28px;text-decoration:none}
.product-logo img{display:block;height:100%;width:auto;max-width:100%}
.product p{color:var(--muted);max-width:30em;margin-bottom:20px}.product .text-link{margin-top:auto}
.product .role{font:600 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:auto 0 12px;padding-top:8px}
.product-lockup{gap:12px;font:800 28px/1 var(--sans);letter-spacing:-1.1px;color:#15140f;white-space:nowrap}
.product-lockup img{height:42px}
.lockup-text{display:flex;flex-direction:column;gap:6px;line-height:1.05}
.product-lockup small{font:500 10px/1 var(--sans);letter-spacing:0;color:var(--muted)}
.tone-sync{color:#c4008a}.tone-ai{color:#a8840a}.tone-fls{color:#b94312}.tone-people{color:#3f8f00}
@media(max-width:760px){.product-grid{grid-template-columns:minmax(0,1fr)}.product,.product:nth-child(even){padding:32px 0;border-left:0}.product-logo{height:40px}}
/* Optical balance: each logo sized so the four read at the same visual weight. */
.product-logo.logo-ff img{height:58px}.product-logo.logo-lpg img{height:30px}.product-logo.logo-craftami img{height:40px}
@media(max-width:760px){.product-logo.logo-ff img{height:50px}.product-logo.logo-lpg img{height:26px}.product-logo.logo-craftami img{height:34px}.product-lockup img{height:34px}.product-lockup{font-size:24px}}
/* LYB company lockup (Work), built like the lyb.solutions header: quadrant icon, name, tagline. */
.lyb-lockup{display:inline-flex;align-items:center;gap:16px;margin-top:6px;text-decoration:none;color:var(--ink)}
.lyb-lockup img{width:64px;height:64px;border-radius:15px;flex:none}
.lyb-lockup strong{display:block;font:800 34px/1 var(--sans);letter-spacing:-1.2px}
.lyb-lockup small{display:block;margin-top:8px;font:600 11px/1.35 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media(max-width:760px){.lyb-lockup img{width:52px;height:52px;border-radius:12px}.lyb-lockup strong{font-size:28px}}
.work-item .work-logo{margin:6px 0 0}
/* Fit to screen (design/DESIGN.md, Layout): on laptops and desktops, vertical rhythm and headline sizes also respond to
   screen height, so a section that is not genuinely long fits in one view. Long sections still scroll naturally. */
@media(min-width:761px){
 :root{--space-section:clamp(40px,min(7vw,8.5svh),100px);--space-band:clamp(48px,min(9vw,10svh),128px);--space-head:clamp(24px,min(4vw,4.5svh),56px);--space-row:clamp(12px,min(3vw,2.3svh),36px)}
 h2{font-size:clamp(32px,min(4.6vw,7.2svh),64px)}
 h3{font-size:clamp(21px,min(2.2vw,3.3svh),30px)}
 .eyebrow{margin-bottom:clamp(14px,2.6svh,28px)}
 .num{font-size:clamp(30px,min(4vw,5.8svh),56px)}
 .work-item{padding-block:clamp(20px,min(3.6vw,3.4svh),48px)}
 .work-item h2,.work-item h3{font-size:clamp(26px,min(3.6vw,5.4svh),52px)}
 .work-item p{margin-bottom:.7em}
 .band-rows{margin-block:clamp(24px,4svh,40px) clamp(20px,3.5svh,36px)}
 .band .lead{margin-bottom:0}.band .actions{margin-top:clamp(20px,3.5svh,40px)}
 .photo-pair img,.photo-single img{max-height:58svh}
 /* A band that holds a list gets tighter outer padding so the whole list fits. */
 .band:has(.band-rows) .band-inner{padding-block:clamp(36px,min(7vw,6svh),100px)}
 .band:has(.band-rows) h2{margin-bottom:clamp(12px,2.2svh,28px)}.band:has(.band-rows) .lead{font-size:clamp(15px,2.2svh,21px)}
 .rows .row:last-child{padding-bottom:clamp(10px,2svh,36px)}
}
/* Event logos (Speaking): third-party marks shown in single-colour ink on a transparent background. */
.event-logo{display:block;margin-top:10px;color:var(--ink);width:auto;max-width:100%;object-fit:contain}
.event-philsme{height:clamp(84px,min(9vw,13svh),120px);width:auto}
.event-fpinas{height:clamp(56px,min(6vw,8.5svh),80px)}
.event-pfcrafts{height:clamp(44px,min(4.6vw,6.5svh),62px);width:auto;max-width:100%}
/* Phone reading sizes (design/DESIGN.md, Typography): larger text and touch-friendly actions. */
@media(max-width:760px){
 body{font-size:19px;line-height:1.55}
 p,.row p,.work-item p,.product p,.prose p{line-height:1.55}
 .lead,.hero .lead,.band .lead{font-size:21px;line-height:1.45}
 .button{font-size:17px;padding:17px 14px;letter-spacing:.01em;white-space:nowrap}
 .text-link{font-size:17px;letter-spacing:0;white-space:nowrap}
 .actions{gap:14px 16px;justify-content:center}
 .social-link{font-size:16px}.social-link svg{width:20px;height:20px}
 .eyebrow,.role,.work-item .role,.product .role,.hero-social-label,.article-row time{font-size:13px}
 .eyebrow{letter-spacing:.12em;gap:12px}.eyebrow::before{width:24px}
 figcaption{font-size:13px}
 .product p,.products p{font-size:18px}
 .footer-base{font-size:15px}.footer-base nav{gap:22px}
 .topic-filter a{font-size:15px}
 .contact-form label{font-size:13px}.contact-form .muted{font-size:16px}
}
/* Living buttons (design/DESIGN.md, Components): small radius, lift and shadow on hover, a chevron that slides into the
   right padding, and press feedback. Hover effects only on devices that can hover. */
.button{border-radius:6px;position:relative;box-shadow:0 1px 0 rgba(21,20,15,.08);transition:background-color .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s}
.button::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translate(-5px,-50%) rotate(45deg);opacity:0;transition:transform .2s,opacity .2s}
@media(hover:hover){
 .button:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(21,20,15,.55)}
 .button:hover::after{opacity:1;transform:translate(0,-50%) rotate(45deg)}
}
.button:active{transform:translateY(0) scale(.98);box-shadow:0 1px 0 rgba(21,20,15,.08)}
.band .button,footer .button{box-shadow:0 1px 0 rgba(0,0,0,.2)}
@media(hover:hover){.band .button:hover,footer .button:hover{box-shadow:0 12px 26px -12px rgba(0,0,0,.7)}}
/* Text links: the bronze underline sweeps in from the left. */
.text-link{border-bottom-color:transparent;background:linear-gradient(var(--bronze),var(--bronze)) left bottom/100% 1px no-repeat;transition:color .2s,background-size .3s}
@media(hover:hover){.text-link:hover{background-size:0 1px;animation:link-sweep .35s ease forwards}}
@keyframes link-sweep{from{background-size:0 1px}to{background-size:100% 1px}}
.band .text-link{background-image:linear-gradient(var(--bronze-light),var(--bronze-light))}
@media(prefers-reduced-motion:reduce){.button,.button::after,.text-link{transition:none!important;animation:none!important}.button:hover,.button:active{transform:none!important}}
.turnstile{min-height:65px;margin-top:20px}
/* Modal motion (design/DESIGN.md, Components): fade and rise in, ease out on close. */
dialog[open]{animation:dialog-in .24s cubic-bezier(.2,.7,.2,1)}
dialog[open]::backdrop{animation:backdrop-in .24s ease-out}
dialog.closing{animation:dialog-out .18s ease-in forwards}
dialog.closing::backdrop{animation:backdrop-out .18s ease-in forwards}
@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes dialog-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes backdrop-out{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){dialog[open],dialog[open]::backdrop,dialog.closing,dialog.closing::backdrop{animation:none}}
/* Contact form folds away after a successful inquiry; the confirmation fades in. */
.contact-form.collapsing{overflow:hidden;opacity:0;transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.contact-done{padding:28px 0;border-top:1px solid var(--ink);opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.contact-done.shown{opacity:1;transform:none}
.contact-done h2{margin-bottom:12px}.contact-done p{color:var(--muted);margin:0}
@media(prefers-reduced-motion:reduce){.contact-done{opacity:1;transform:none;transition:none}}

/* Speaking experience: event logo and details beside a photo from that event, shown whole */
.event-item{align-items:center}
.event-venue{margin-top:18px}
.event-photo img{width:100%;height:auto}
@media (max-width:760px){.event-photo{order:-1}}

/* Speaking "In conversation": one photo per venue, in a three-up grid of matching tiles */
.venue-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.venue-grid img{aspect-ratio:3/2;object-fit:cover}
@media (max-width:1100px){.venue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.venue-grid{grid-template-columns:minmax(0,1fr)}}

/* Rows (home and Speaking pillars, Work steps): a line icon in place of the number, same bronze as .num, top-aligned with the heading */
.row-icon{display:block;width:clamp(36px,3.4vw,48px);height:auto;color:var(--bronze);align-self:start;margin-top:-4px}
.band .row-icon{color:var(--bronze-light)}
@media (max-width:760px){.row-icon{width:32px;margin-top:0}}

/* Page transition (AJAX navigation): fade out quickly, then fade and rise in. Nothing moves with reduced motion. */
@media(prefers-reduced-motion:no-preference){
 #page-view{transition:opacity .34s ease-out,transform .42s cubic-bezier(.2,.7,.2,1)}
 #page-view.page-leave{opacity:0;transform:translateY(6px);transition:opacity .18s ease-in,transform .18s ease-in}
 #page-view.page-enter{opacity:0;transform:translateY(14px);transition:none}
}