:root{
 --bg:#ffffff; --surface:#f6f7f9; --surface2:#eef1f5; --line:#e2e6ec; --line2:#cfd6df;
 --text:#3a4048; --dim:#6b7480; --head:#141821;
 --accent:#8b1e2d; --accent-fill:#8b1e2d; --accent-hi:#68161f; --steel:#44607a;
 --maxw:1180px; --ease:cubic-bezier(.22,.68,.32,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
font:400 17px/1.75 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;color:var(--head);
font-weight:600;line-height:1.16;letter-spacing:-.012em;margin:0}
img{max-width:100%;display:block}
a{color:var(--accent)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);
backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid transparent;
transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.nav.stuck{background:rgba(255,255,255,.97);border-bottom-color:var(--line);
box-shadow:0 8px 28px -20px rgba(20,24,33,.45)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:82px;gap:24px;
transition:height .3s var(--ease)}
.nav.stuck .wrap{height:68px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.brand img{width:38px;height:auto;opacity:.95;transition:transform .45s var(--ease),opacity .3s}
.brand:hover img{transform:rotate(-4deg) scale(1.06);opacity:1}
.brand .bt{display:block}
.brand b{white-space:nowrap;font-family:"Source Serif 4",Georgia,serif;font-size:18px;font-weight:600;color:var(--head);
letter-spacing:-.01em;display:block;line-height:1.15}
.brand span{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
color:var(--steel);display:block;margin-top:3px}
.menu{display:flex;gap:6px;align-items:center}
.menu a{position:relative;font-size:14px;font-weight:500;color:var(--text);text-decoration:none;
padding:9px 13px;border-radius:3px;white-space:nowrap;transition:color .22s var(--ease)}
.menu a:after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:1.5px;
background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .34s var(--ease)}
.menu a:hover{color:var(--head)}
.menu a:hover:after{transform:scaleX(1);transform-origin:left}
.menu a.on{color:var(--head)}
.menu a.on:after{transform:scaleX(1)}
.menu a.navcta{margin-left:10px;background:var(--accent-fill);color:#fff!important;
padding:12px 22px;font-weight:600;border-radius:3px;line-height:1;
transition:background .25s,box-shadow .4s var(--ease),transform .25s var(--ease)}
.menu a.navcta:after{display:none}
.menu a.navcta:hover{background:var(--accent-hi);transform:translateY(-2px);
box-shadow:0 10px 26px -10px rgba(139,30,45,.45)}
.burger{display:none;background:none;border:0;font-size:24px;color:var(--head);cursor:pointer;line-height:1}

.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
background:
 radial-gradient(1000px 560px at 80% 16%, rgba(139,30,45,.10), transparent 62%),
 radial-gradient(820px 560px at 6% 94%, rgba(91,125,158,.20), transparent 62%),
 linear-gradient(150deg,#ffffff 0%,#f3f6fa 44%,#e9eef4 100%)}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(20,24,33,.075) 1px, transparent 1px);
background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000 8%,transparent 82%);
mask-image:linear-gradient(180deg,#000 8%,transparent 82%)}
.owlmark{position:absolute;right:-70px;top:50%;transform:translateY(-50%);
width:min(680px,58vw);opacity:.10;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:56px;
align-items:center;min-height:min(88vh,780px);padding-top:74px;padding-bottom:74px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;
letter-spacing:.19em;text-transform:uppercase;color:var(--accent);margin-bottom:24px}
.eyebrow:before{content:"";width:30px;height:1px;background:var(--accent);opacity:.75}
.hero h1{font-size:clamp(40px,5.4vw,68px);margin-bottom:26px;letter-spacing:-.022em}
.hero .tag{font-size:20.5px;line-height:1.6;color:var(--dim);max-width:32em;margin:0}
.portrait{position:relative;justify-self:center;width:min(430px,100%)}
.portrait:before{content:"";position:absolute;inset:-16px -16px 16px 16px;border-radius:8px;
border:1px solid var(--line2);opacity:.75}
.portrait figure{position:relative;margin:0;border-radius:8px;overflow:hidden;
box-shadow:0 30px 60px -34px rgba(20,24,33,.55);border:1px solid var(--line)}
.portrait img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:var(--pp,50% 22%);
transform:scale(1.02);transition:transform 1.6s var(--ease)}
.portrait:hover img{transform:scale(1)}
.portrait figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 14px;
font:500 12px/1.4 "Inter",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#fff;
background:linear-gradient(180deg,rgba(20,24,33,0),rgba(20,24,33,.72))}

.phead{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
min-height:min(58vh,470px);display:flex;align-items:center;padding:70px 0;
background:radial-gradient(820px 420px at 76% 0%, rgba(139,30,45,.09), transparent 64%),
 linear-gradient(160deg,#ffffff,#eef2f7)}
.phead:before{content:"";position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(20,24,33,.06) 1px, transparent 1px);background-size:26px 26px;
-webkit-mask-image:linear-gradient(180deg,#000,transparent);
mask-image:linear-gradient(180deg,#000,transparent)}
.pheadbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;
transform:scale(1.06);transition:transform 9s var(--ease)}
.phead:hover .pheadbg{transform:scale(1)}
.phead:after{content:"";position:absolute;inset:0;
background:linear-gradient(270deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.97) 44%,
 rgba(255,255,255,.90) 62%,rgba(255,255,255,.45) 82%,rgba(255,255,255,0) 100%)}
.phead .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr minmax(0,560px)}
.pheadtext{grid-column:2}
.phead h1{font-size:clamp(34px,4.2vw,52px);margin-bottom:18px}
.phead .tag{font-size:19.5px;color:var(--text);line-height:1.6;margin:0}

h2{font-size:clamp(25px,2.8vw,35px);margin:0 0 22px;position:relative;padding-top:20px}
h2:before{content:"";position:absolute;top:0;left:0;width:44px;height:2px;background:var(--accent);
transform-origin:left;transform:scaleX(0);transition:transform .6s var(--ease) .1s}
.in h2:before{transform:scaleX(1)}
h3{font-size:19px;margin:36px 0 12px;color:var(--steel);font-family:"Inter",sans-serif;
font-weight:600;letter-spacing:.005em}
p{margin:0 0 20px;max-width:78ch}
p.lead{font-weight:600;color:var(--head);margin-bottom:16px}
ul.grid{list-style:none;margin:0 0 26px;padding:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:0 34px}
ul.grid li{position:relative;padding:12px 0 12px 24px;border-bottom:1px solid var(--line);
font-size:16px;transition:color .25s var(--ease),padding-left .3s var(--ease),border-color .25s}
ul.grid li:before{content:"";position:absolute;left:0;top:21px;width:7px;height:7px;
background:var(--accent-fill);border-radius:50%;transition:background .25s,transform .3s var(--ease)}
ul.grid li:hover{color:var(--head);padding-left:30px;border-bottom-color:var(--line2)}
ul.grid li:hover:before{background:var(--accent);transform:scale(1.35)}
ul.cites{list-style:none;margin:0 0 26px;padding:0}
ul.cites li{padding:16px 18px;border-left:2px solid var(--line2);background:var(--surface);
border-radius:0 3px 3px 0;margin-bottom:12px;font-size:15.5px;line-height:1.62;
transition:border-color .25s,background .25s,transform .3s var(--ease)}
ul.cites li.bookcite{display:flex;gap:20px;align-items:flex-start}
ul.cites li.bookcite img{width:104px;flex:0 0 104px;border-radius:3px;
box-shadow:0 10px 24px -14px rgba(20,24,33,.55);transition:transform .35s var(--ease)}
ul.cites li.bookcite a:hover img{transform:translateY(-3px) scale(1.03)}
a.booklink{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(139,30,45,.35)}
a.booklink:after{content:" →"}
@media(max-width:560px){ul.cites li.bookcite{flex-direction:column}}
ul.cites li:hover{border-left-color:var(--accent);background:var(--surface2);transform:translateX(4px)}
ul.cites a{word-break:break-all;font-size:14px;color:var(--steel);text-decoration:none;
border-bottom:1px solid rgba(68,96,122,.35)}
ul.cites a:hover{color:var(--accent);border-bottom-color:var(--accent)}

.band{position:relative;height:380px;overflow:hidden;background:#dfe4ea}
.band img{width:100%;height:100%;object-fit:cover;opacity:.9;
transform:scale(1.05);transition:transform 1.4s var(--ease),opacity 1.4s var(--ease)}
.band:hover img{transform:scale(1);opacity:1}
.band:after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 42%,rgba(255,255,255,.75))}

.ctas{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;background:var(--accent-fill);
color:#fff;text-decoration:none;padding:15px 27px;border-radius:3px;font-size:15px;font-weight:600;
overflow:hidden;transition:background .25s,transform .28s var(--ease),box-shadow .35s var(--ease)}
.btn:after{content:"→";transition:transform .32s var(--ease)}
.btn:hover{background:var(--accent-hi);transform:translateY(-3px);
box-shadow:0 14px 30px -16px rgba(139,30,45,.55)}
.btn:hover:after{transform:translateX(5px)}
.btn.ghost{background:transparent;color:var(--head);border:1px solid var(--line2)}
.btn.ghost:hover{background:rgba(139,30,45,.06);border-color:var(--accent);color:var(--accent);
box-shadow:0 14px 28px -20px rgba(139,30,45,.45)}
.pending{display:inline-block;padding:13px 22px;border:1px dashed var(--line2);
color:var(--dim);font-size:14.5px;border-radius:3px}

.cols{display:grid;grid-template-columns:minmax(0,1fr) 356px;gap:58px;align-items:start;
max-width:var(--maxw);margin:0 auto;padding:0 28px}
.cols main{padding:70px 0;min-width:0}
/* Homepage runs as one full-width column: the inquiry form is in the contact section,
   not a side rail, so every section gets the whole measure and the page breathes. */
.cols.solo{grid-template-columns:minmax(0,1fr)}
#contact .rail{position:static;margin:0;top:auto}
#contact .formcard{background:#fff}
#contact .cbox{align-items:start}
#contact .cbox.withform{grid-template-columns:minmax(0,.92fr) minmax(0,420px);gap:64px}
.cdetails{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.rail{position:sticky;top:104px;margin-top:70px}
.formcard{position:relative;background:linear-gradient(165deg,var(--surface2),var(--surface));
border:1px solid var(--line);border-radius:6px;padding:28px 26px;overflow:hidden;
transition:border-color .35s var(--ease),box-shadow .45s var(--ease)}
.formcard:before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(420px 200px at 82% -12%, rgba(139,30,45,.07), transparent 68%)}
.formcard:hover{border-color:var(--line2);box-shadow:0 24px 54px -32px rgba(20,24,33,.35)}
.formcard>*{position:relative}
.formcard h3{font-family:"Source Serif 4",Georgia,serif;color:var(--head);font-size:24px;
margin:0 0 12px;font-weight:600}
.formcard p.sub{font-size:14.5px;line-height:1.62;margin:0 0 22px;color:var(--dim)}
.f label{display:block;font-size:12px;font-weight:600;color:var(--steel);margin:0 0 7px;
letter-spacing:.05em;text-transform:uppercase}
.f .row{margin-bottom:16px}
.f input,.f select,.f textarea{width:100%;font:400 15px/1.5 "Inter",sans-serif;color:var(--head);
padding:12px 14px;border:1px solid var(--line2);border-radius:3px;background:#fff;outline:none;
transition:border-color .25s,box-shadow .3s,background .25s}
.f input::placeholder,.f textarea::placeholder{color:#98a1ac}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--accent);background:#fff;
box-shadow:0 0 0 3px rgba(139,30,45,.12)}
.f textarea{min-height:110px;resize:vertical}
.f button{position:relative;width:100%;background:var(--accent-fill);color:#fff;border:0;
padding:15px 20px;border-radius:3px;font:600 15px "Inter",sans-serif;cursor:pointer;overflow:hidden;
transition:background .25s,transform .25s var(--ease),box-shadow .35s var(--ease)}
.f button:hover{background:var(--accent-hi);transform:translateY(-2px);
box-shadow:0 14px 28px -16px rgba(139,30,45,.55)}
.f button:active{transform:translateY(0)}
.f .fine{font-size:13px;color:var(--dim);margin:15px 0 0;line-height:1.55}

#contact{position:relative;overflow:hidden;padding:86px 0;border-top:1px solid var(--line);
background:radial-gradient(760px 400px at 20% 0%, rgba(139,30,45,.08), transparent 66%),
 linear-gradient(180deg,#f7f8fa,#eef2f7)}
#contact h2{color:var(--head)}
#contact p{color:var(--dim)}
.cbox{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center}
.cline{font-size:17px;margin:0 0 10px}
.cline a{color:var(--head);text-decoration:none;border-bottom:1px solid var(--accent-fill);
transition:border-color .25s,color .25s}
.cline a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.cowl{width:190px;opacity:.20;justify-self:end;transition:opacity .5s var(--ease),transform .7s var(--ease)}
.cbox:hover .cowl{opacity:.24;transform:translateY(-6px)}
footer{background:#f2f4f7;color:#6b7480;padding:32px 0;font-size:13.5px;border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

.js .rv{opacity:0;transform:translateY(26px);
transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .rv.in{opacity:1;transform:none}
/* sections */
.sec{padding:44px 0}
.sec:first-child{padding-top:8px}
.sec+.sec{border-top:1px solid var(--line)}
.sec.tint{background:var(--surface);border:1px solid var(--line);border-radius:8px;
padding:38px 34px;margin:44px 0;border-top:1px solid var(--line)}
.sec.tint+.sec{border-top:0}
.proof{list-style:none;margin:22px 0 6px;padding:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.proof li{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--accent);
border-radius:0 5px 5px 0;padding:16px 18px;font-size:15.5px;line-height:1.5;color:var(--head);
transition:transform .3s var(--ease),box-shadow .35s var(--ease)}
.proof li:hover{transform:translateY(-3px);box-shadow:0 16px 34px -24px rgba(20,24,33,.45)}
/* ---------- HOMEPAGE, to her 2026-09-11 spec ------------------------------
   Generous white space, short sections, cards over prose, and deliberate variation
   in section shape so the rhythm is not flat. */

/* 2. Personal introduction: photo one side, her words the other. */
.intro{padding-top:86px;padding-bottom:78px}
.introwrap{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:56px;align-items:start}
.introfig{margin:0;border-radius:10px;overflow:hidden;position:relative}
.introfig:before{content:"";position:absolute;inset:auto -14px -14px 14px;border-radius:10px;
border:1px solid var(--line);z-index:-1}
/* marina-outdoor.jpg is 4:3. A 4/5 frame threw away 40% of its width; a square keeps
   the blossom and the skyline that make the photograph worth using. */
.introfig img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 28%;
transition:transform 1.1s var(--ease)}
.introfig:hover img{transform:scale(1.035)}
.introtext p{font-size:18.5px;line-height:1.72;margin:0 0 20px;max-width:62ch}
.introtext p:first-child{font-size:21px;line-height:1.62;color:var(--head)}
.introtext p:last-child{margin-bottom:0}

/* ---------- FOOTER: Casey's three-column shape, identity / links / legal ---------- */
footer{border-top:1px solid var(--line);background:linear-gradient(180deg,#fbfcfd,#eef2f7);
padding:62px 0 26px;margin-top:0}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;align-items:start}
.fbrand .brand{margin-bottom:16px}
.fbrand p{margin:0 0 14px;font-size:15px;line-height:1.62;color:var(--dim);max-width:34ch}
.fcontact a{color:var(--head);text-decoration:none;border-bottom:1px solid var(--accent-fill)}
.fcontact a:hover{color:var(--accent)}
.fcol h3{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--head)}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin:0 0 9px}
.fcol a{font-size:15px;color:#48525e;text-decoration:none;transition:color .25s var(--ease)}
.fcol a:hover{color:var(--accent)}
.fbar{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;
margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
font-size:13.5px;color:#5a6472}
.fnote{color:#6b7480}
.legal h2{font-size:23px;margin-top:34px}
.legal h2:first-child{margin-top:0}
.legal p{max-width:72ch}

/* About page: her spec asks for varied section shapes, so the photo alternates sides and
   changes proportion rather than every band looking the same. */
.introwrap.reverse{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
/* Her narrative columns run much taller than a photograph, which left a long dead gap
   beside the text. The image travels with the reader instead. */
.introwrap .introfig{position:sticky;top:104px}
.introwrap.reverse .introfig img{aspect-ratio:3/4;object-position:50% 12%}
.introfig.wide img{aspect-ratio:4/3;object-position:50% 40%}
.introwrap.reverse .introfig.tall img{aspect-ratio:3/4;object-position:50% 8%}
.introtext h2{margin-top:0}
.intro .introtext h2+p{margin-top:14px}
.focus.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 40px}
.roles .lead{max-width:70ch}
.bridge p.lead+p.lead{margin-top:14px}
.nowcard p+p{margin-top:10px}

/* 3. Philosophy: a statement, not a testimonial. Big type, lots of air, no quote marks. */
.philosophy{padding:104px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:linear-gradient(160deg,#fbfcfd,#f2f5f9)}
.philo{margin:0 auto;max-width:23ch;font-family:"Source Serif 4",Georgia,serif;
font-size:clamp(29px,3.9vw,50px);line-height:1.2;letter-spacing:-.018em;color:var(--head);
text-align:center;text-wrap:balance}
.philo:before{content:"";display:block;width:46px;height:3px;background:var(--accent);
margin:0 auto 30px;border-radius:2px}

/* 4. Expertise in Action: three cards. */
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* 5. Current Work: four cards, status carried by a small label not a graphic. */
.now{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:26px}
.nowcard{display:flex;flex-direction:column;align-items:flex-start;gap:11px;
background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px 26px 24px;
transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.nowcard:hover{transform:translateY(-3px);border-color:rgba(139,30,45,.22);
box-shadow:0 22px 44px -30px rgba(20,24,33,.45)}
.nowlabel{margin:0;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
color:var(--accent)}
.nowcard.fc .nowlabel{color:#6b7a8d}
.nowcard.ev .nowlabel{color:#3f5468}
.nowcover{display:block;width:104px;border-radius:3px;overflow:hidden;
box-shadow:0 12px 26px -16px rgba(20,24,33,.6)}
.nowcover img{display:block;width:100%}
.nowcard h3{margin:0;font-family:"Source Serif 4",Georgia,serif;font-size:21px;line-height:1.26;
color:var(--head)}
.nowsub{margin:-4px 0 0;font-family:"Source Serif 4",Georgia,serif;font-size:16.5px;
line-height:1.38;color:var(--dim)}
.nowcard p{margin:0;font-size:15.8px;line-height:1.62;color:var(--text)}
.nowmeta{font-size:14px!important;color:var(--dim)!important;line-height:1.55!important}
.btn.small{padding:9px 17px;font-size:14.5px}
/* Cards in a row stretch to equal height; push the button to the bottom so the row of
   buttons lines up instead of floating at different heights. */
.nowcard .btn{margin-top:auto}

/* 6. Research in Focus: numbered, airy, no publication list. */
.focus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin:30px 0 34px}
.focusitem{border-top:2px solid var(--accent);padding-top:20px}
.focusnum{display:block;font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--accent);
margin-bottom:9px}
.focusitem h3{margin:0 0 10px;font-family:"Source Serif 4",Georgia,serif;font-size:20px;
line-height:1.28;color:var(--head)}
.focusitem p{margin:0;font-size:15.8px;line-height:1.66;color:var(--text)}

/* 7. Credibility strip: four roles across on desktop, stacked on a phone. */
.rolestrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:26px 0 30px;
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.role-item{padding:26px 24px;border-right:1px solid var(--line)}
.role-item:last-child{border-right:0}
.role-title{margin:0 0 6px;font-size:16.5px;font-weight:600;color:var(--head);line-height:1.34}
/* var(--dim) measures 4.42 on the tinted band, under the 4.5 floor. Darkened here only. */
.role-org{margin:0;font-size:14.5px;color:#48525e;line-height:1.45}

/* 8. Bridge: one short transition, three ways onward. */
.bridge .lead{max-width:64ch}

/* A book title inside her own prose. Reads as a title and links to the Books block. */
.booktitle{text-decoration:none;color:inherit}
.booktitle cite{font-style:italic;font-family:"Source Serif 4",Georgia,serif;
font-size:1.04em;color:var(--accent);background:linear-gradient(180deg,transparent 62%,rgba(139,30,45,.14) 62%);
box-decoration-break:clone;-webkit-box-decoration-break:clone;
padding:0 .12em;border-radius:2px;transition:background .35s var(--ease),color .35s var(--ease)}
.booktitle:hover cite{background:linear-gradient(180deg,transparent 0%,rgba(139,30,45,.16) 0%);color:var(--head)}
.booktitle cite:after{content:"↗";font-style:normal;font-size:.72em;vertical-align:.42em;
margin-left:.18em;opacity:.6}
.books{display:grid;gap:34px;margin-top:26px}
.bookcard{display:grid;grid-template-columns:190px minmax(0,1fr);gap:32px;align-items:start;
background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px 30px;
box-shadow:0 1px 0 rgba(20,24,33,.03);transition:box-shadow .45s var(--ease),transform .45s var(--ease)}
.bookcard:hover{transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(20,24,33,.5)}
.bookflag{display:inline-block;margin:0 0 12px;padding:5px 11px;border-radius:100px;
font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
background:rgba(139,30,45,.09);color:var(--accent)}
.bookflag.out{background:rgba(20,24,33,.06);color:var(--head)}
.booksub{margin:-6px 0 12px;font-family:"Source Serif 4",Georgia,serif;font-size:19px;
line-height:1.35;color:var(--dim)}
.byline{margin:0 0 10px;font-size:16px;color:var(--head)}
.byline b{font-weight:650;color:var(--accent);border-bottom:2px solid rgba(139,30,45,.28);
padding-bottom:1px}
.byline .role{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:100px;
font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
background:rgba(139,30,45,.09);color:var(--accent);vertical-align:2px}
.chapters{margin:0 0 14px;font-size:15.5px;color:var(--head);padding-left:14px;
border-left:2px solid rgba(139,30,45,.3)}
/* Routledge has published no cover yet, so the cover is set type rather than a stand-in
   image. Sized to the same 3/4.55 block as the real jacket so the pair stays even. */
.setcover{display:flex;flex-direction:column;justify-content:flex-end;gap:9px;
aspect-ratio:316/476;border-radius:4px;padding:22px 18px;overflow:hidden;
background:linear-gradient(155deg,#1b2432 0%,#24303f 44%,#3a1f27 100%);
box-shadow:0 18px 40px -22px rgba(20,24,33,.6)}
.sc-rule{display:block;width:34px;height:2px;background:var(--accent);margin-bottom:2px}
.sc-title{font-family:"Source Serif 4",Georgia,serif;font-size:23px;line-height:1.14;
font-weight:600;color:#fff;letter-spacing:-.012em}
.sc-sub{font-size:11.5px;line-height:1.42;color:rgba(255,255,255,.74)}
.sc-by{margin-top:7px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
color:rgba(255,255,255,.9)}
.bookblock{display:grid;grid-template-columns:190px minmax(0,1fr);gap:32px;align-items:start;margin-top:24px}
.bookcover img{width:100%;border-radius:4px;box-shadow:0 18px 40px -22px rgba(20,24,33,.6);
transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.bookcover:hover img{transform:translateY(-5px);box-shadow:0 26px 52px -24px rgba(20,24,33,.7)}
.bookmeta h3{margin:0 0 12px;font-family:"Source Serif 4",Georgia,serif;color:var(--head);
font-size:24px;font-weight:600}
.bookmeta p.hook{font-size:18px;line-height:1.6;color:var(--head);margin:0 0 14px;max-width:60ch}
.bookmeta p.cite{font-size:14.5px;color:var(--dim);margin:0;max-width:60ch}
.news{list-style:none;margin:24px 0 0;padding:0}
.news li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:22px;padding:20px 0;
border-top:1px solid var(--line);align-items:baseline}
.news li:last-child{border-bottom:1px solid var(--line)}
.news .when{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
color:var(--accent)}
.news .what{font-size:16px;line-height:1.6}
.news .what strong{font-weight:600;color:var(--head)}
.news .what a{color:var(--head);text-decoration:none;border-bottom:1px solid rgba(139,30,45,.35);
transition:color .25s,border-color .25s}
.news .what a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.news .what br+*,.news .what{color:var(--dim)}
@media(max-width:700px){
 .bookblock{grid-template-columns:1fr;gap:22px}
 .bookcover img{max-width:180px}
 .fcols{grid-template-columns:1fr;gap:34px}
 .fbrand p{max-width:100%}
 .fbar{flex-direction:column;align-items:flex-start;gap:8px}
 .introwrap,.introwrap.reverse{grid-template-columns:1fr;gap:30px}
 /* photo first on a phone regardless of desktop order */
 .introwrap .introfig{position:static;top:auto}
 .introwrap.reverse .introfig{order:-1}
 .introfig.wide img,.introfig.tall img{aspect-ratio:4/3;object-position:50% 34%}
 .focus.four{grid-template-columns:1fr;gap:26px}
 .introfig img{aspect-ratio:4/3;object-position:50% 22%}
 .introfig:before{display:none}
 .introtext p{font-size:17px}
 .introtext p:first-child{font-size:19px}
 .philosophy{padding:64px 0}
 .philo{max-width:100%;font-size:clamp(24px,6.4vw,32px);text-align:left}
 .philo:before{margin:0 0 22px}
 .cards.three{grid-template-columns:1fr}
 .now{grid-template-columns:1fr;gap:18px}
 .nowcard{padding:22px 20px}
 .focus{grid-template-columns:1fr;gap:26px}
 .rolestrip{grid-template-columns:1fr}
 .role-item{border-right:0;border-bottom:1px solid var(--line);padding:20px 0}
 .role-item:last-child{border-bottom:0}
 #contact .cbox.withform{grid-template-columns:1fr;gap:34px}
 .cdetails{margin-top:20px;padding-top:18px}
 .bookcard{grid-template-columns:1fr;gap:20px;padding:22px 20px}
 .bookcard .bookcover img{max-width:160px}
 .setcover{max-width:160px;padding:18px 15px}
 .sc-title{font-size:20px}
 .byline .role{margin-left:0;margin-top:6px;display:block;width:max-content}
 .news li{grid-template-columns:1fr;gap:6px}
}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:28px 0 8px}
.card{display:block;text-decoration:none;background:var(--bg);border:1px solid var(--line);
border-radius:7px;padding:24px 22px;transition:border-color .3s var(--ease),transform .3s var(--ease),
box-shadow .4s var(--ease)}
.card h3{margin:0 0 10px;font-family:"Source Serif 4",Georgia,serif;color:var(--head);
font-size:20px;font-weight:600}
.card p{margin:0 0 16px;font-size:15px;color:var(--dim);line-height:1.6;max-width:none}
.card .more{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--accent)}
.card .more:after{content:" →";transition:none}
.card:hover{border-color:var(--accent);transform:translateY(-4px);
box-shadow:0 20px 40px -26px rgba(20,24,33,.45)}
.fig{margin:24px 0 8px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.fig img{width:100%;height:300px;object-fit:cover;object-position:50% 22%;
transition:transform 1.3s var(--ease)}
.fig.tall{max-width:440px}
.fig.tall img{height:auto;aspect-ratio:3/4;object-position:50% 12%}
.sec:hover .fig img{transform:scale(1.05)}
.rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.001ms !important;transition-duration:.001ms !important}
 .js .rv{opacity:1;transform:none}
 .portrait img{animation:none}
}

@media(min-width:701px) and (max-width:1040px){
 .fcols{grid-template-columns:1fr 1fr;gap:34px}
 .introwrap.reverse{grid-template-columns:1fr}
 .introwrap.reverse .introfig{order:-1;position:static;top:auto}
 .focus.four{grid-template-columns:repeat(2,minmax(0,1fr))}
 .now{grid-template-columns:repeat(2,minmax(0,1fr))}
 .focus{grid-template-columns:1fr;gap:24px}
 .cards.three{grid-template-columns:1fr}
 .rolestrip{grid-template-columns:repeat(2,minmax(0,1fr))}
 .role-item:nth-child(2){border-right:0}
 .role-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:1040px){
 .cols{grid-template-columns:1fr;gap:0}
 .rail{position:static;margin:0 0 58px}
 .cols main{padding-bottom:42px}
}
@media(min-width:901px) and (max-width:1200px){
 .nav .wrap{gap:16px}
 .brand{flex:none}
 .brand b{font-size:14.5px}
 .brand span{font-size:9px}
 .brand img{width:32px}
 .menu{gap:2px}
 .menu a{font-size:14px;padding-left:6px;padding-right:6px}
 .menu a.navcta{padding-left:15px;padding-right:15px}

 .phead:after{background:linear-gradient(270deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.96) 58%,
 rgba(255,255,255,.86) 76%,rgba(255,255,255,.40) 92%,rgba(255,255,255,.14) 100%)}
}
@media(max-width:900px){
 .hero .wrap{grid-template-columns:1fr;gap:38px;min-height:0;padding-top:56px;padding-bottom:56px}
 .cbox{grid-template-columns:1fr;gap:34px}
 .cowl{justify-self:start;width:140px}
 .portrait{width:min(320px,82%)}
 .portrait img{width:100%}
 .owlmark{width:110vw;right:-30vw;opacity:.035}
 .menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
 flex-direction:column;gap:0;padding:10px 28px 22px;border-bottom:1px solid var(--line)}
 .menu.open{display:flex}
 .menu a{width:100%;padding:14px 0;border-bottom:1px solid var(--line)}
 .menu a:after{display:none}
 .menu a.navcta{text-align:center;margin:14px 0 0;justify-content:center}
 .burger{display:block}
 .fig img{height:210px}
 .fig.tall{max-width:100%}
 .phead .wrap{grid-template-columns:1fr}
 .pheadtext{grid-column:1}
 /* Mobile: at 390px wide a cover crop blows the image up and shows a blurry sliver.
    Contain it so the whole picture is visible, sit it at the top, and keep the veil
    light enough to read the type through while the picture still shows underneath. */
 .phead{min-height:0;padding:34px 0 40px}
 .pheadbg{object-fit:contain;object-position:50% 0;transform:none}
 /* Veil is heaviest across the top, where the small uppercase eyebrow sits and needs
    4.5:1, then thins so the picture reads through under the headline and tagline. */
 .phead:after{background:linear-gradient(180deg,rgba(255,255,255,.74) 0%,rgba(255,255,255,.70) 22%,
 rgba(255,255,255,.52) 46%,rgba(255,255,255,.72) 78%,rgba(255,255,255,.90) 100%)}
 .phead h1{font-size:clamp(26px,7.2vw,33px);margin-bottom:12px}
 .phead .tag{font-size:16.5px;line-height:1.55}
 .phead .eyebrow{font-size:11px}
}