/* Gowan Duff Barrister. Mono: off-white and black; the photograph carries the colour. */
:root{
  --bg:#FAF9F6; --bg-2:#EFEEEA; --ink:#111111; --ink-2:#3A3A3A; --muted:#707070; --line:#E4E2DD; --line-2:#CFCCC6; --paper:#FAF9F6; --paper-2:#CFC5B2; --paper-3:#A79E8C; --gold:#FAF9F6;
  --brass:#111111; --nav:rgba(250,249,246,.92);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --max:1160px; --gutter:clamp(16px,4vw,40px); --radius:28px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121110; --bg-2:#1A1816; --ink:#F1EDE5; --ink-2:#CFC9BE; --muted:#9A948A; --line:#2A2724; --line-2:#3B3733;
    --nav:rgba(18,17,16,.86); --brass:#F1EDE5; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121110; --bg-2:#1A1816; --ink:#F1EDE5; --ink-2:#CFC9BE; --muted:#9A948A; --line:#2A2724; --line-2:#3B3733;
  --nav:rgba(18,17,16,.86); --brass:#F1EDE5; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important}}
html{overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px}
body>*{position:relative;z-index:1}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;padding-inline:var(--gutter);padding-block:0 0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;margin:0;text-wrap:balance}
p{margin:0}
.eyebrow{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:600}

/* Header: flat, one hairline, no pills */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);background:var(--nav);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .pill{max-width:var(--max);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0 18px}
.nav .brand{font-family:var(--serif);font-weight:300;font-size:1.35rem;letter-spacing:-.02em;white-space:nowrap;line-height:1}
.nav .brand .dot,.brand .dot{color:var(--brass)}
.nav .brand .short{display:none;letter-spacing:.02em}
.nav .links{display:flex;gap:28px;margin-left:auto}
.nav .links a{font-size:.9rem;font-weight:500;color:var(--ink-2);padding:6px 0;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.nav .links a:hover{color:var(--ink);border-color:var(--brass)}
.nav .btn.dark{background:none;color:var(--ink);border:0;border-radius:0;padding:6px 0;font-size:.9rem;font-weight:600;border-bottom:1px solid var(--line-2);margin-left:8px}
.nav .btn.dark:hover{transform:none;color:var(--brass);border-color:var(--brass)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:.95rem;padding:12px 22px;border-radius:2px;border:1px solid transparent;transition:transform .15s,background .15s,border-color .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn.dark{background:var(--ink);color:var(--bg)}
.btn.outline{background:transparent;color:var(--ink);border-color:var(--line-2)}
@media (max-width:820px){.nav .links{display:none}.nav .brand .long{display:none}.nav .brand .short{display:inline}.nav .pill{padding:16px 0 14px}}

/* Hero: light, asymmetric, air */
.hero{margin-top:0;padding-block:clamp(48px,7vw,96px) 0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:end;border-bottom:1px solid var(--line-2)}
.hero .copy{padding:0 0 clamp(44px,5vw,72px);display:flex;flex-direction:column;gap:30px}
.hero h1,.hero h2{font-size:clamp(3.2rem,2rem + 6vw,7.2rem);line-height:.96;letter-spacing:-.03em;font-weight:300;max-width:10ch}
.hero h1 em,.hero h2 em{font-style:italic;font-weight:300}
.hero .lede{font-size:clamp(1.05rem,1rem + .4vw,1.3rem);line-height:1.5;color:var(--ink-2);max-width:38ch}
.hero .actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.textlink{font-weight:600;font-size:.95rem;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.textlink:hover{border-color:var(--ink)}
.hero .note{font-size:.88rem;color:var(--muted)}
.hero .note a{border-bottom:1px solid var(--line-2)}
.hero .portrait{padding:0;display:grid;gap:14px;justify-items:start}
.hero .portrait figure{margin:0;width:min(100%,380px);aspect-ratio:3/4;overflow:hidden;background:var(--bg-2)}
.hero .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:saturate(.55) contrast(1.02)}
.hero .portrait figcaption{font-size:.8rem;color:var(--muted);letter-spacing:.02em;padding-bottom:clamp(44px,5vw,72px)}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:0}
  .hero .copy{padding-top:48px;padding-bottom:36px}
  .hero .portrait{padding-top:0;justify-items:start}
  .hero .portrait figure{width:min(100%,260px);aspect-ratio:4/5}
  .hero h1,.hero h2{font-size:clamp(2.8rem,11vw,4.4rem)}
}

/* Sections */
section{padding-block:clamp(56px,8vw,104px)}
.section-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.section-head h2{font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);line-height:1.05}
.section-head .lead{font-size:1.1rem;color:var(--ink-2);max-width:52ch}
.section-head .lead+.lead{margin-top:.9em}
.section-head .eyebrow{display:block;margin-bottom:14px}
@media (max-width:820px){.section-head{grid-template-columns:1fr;gap:16px}}

/* Stages: where are you */
.stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.stage{padding:26px 22px 28px 0;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.stage+.stage{padding-left:22px}
.stage:last-child{border-right:0}
.stage h3{font-size:1.35rem;line-height:1.15}
.stage p{color:var(--muted);font-size:.95rem;line-height:1.45}
@media (max-width:900px){.stages{grid-template-columns:1fr}.stage{border-right:0;border-bottom:1px solid var(--line);padding:20px 0}.stage+.stage{padding-left:0}.stage:last-child{border-bottom:0}}

/* Approach index, Back on the Road's signature */
.index{border-top:1px solid var(--line-2)}
.row{display:grid;grid-template-columns:56px minmax(0,4fr) minmax(0,8fr);column-gap:clamp(20px,3vw,40px);padding:30px 0;border-bottom:1px solid var(--line);align-items:baseline}
.row .n{font-family:var(--serif);font-size:1.5rem;color:var(--brass);font-variant-numeric:tabular-nums}
.row h3{font-size:1.55rem;line-height:1.15}
.row p{color:var(--ink-2);max-width:58ch}
.row p+p{margin-top:.7em}
@media (max-width:820px){.row{grid-template-columns:40px 1fr;row-gap:10px}.row>div,.row p{grid-column:2}}
.pull{margin-top:clamp(36px,5vw,60px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px)}
.pull blockquote{margin:0;font-family:var(--serif);font-size:clamp(1.5rem,1.2rem + 1.4vw,2.3rem);line-height:1.25;letter-spacing:-.01em;grid-column:2}
@media (max-width:820px){.pull{grid-template-columns:1fr}.pull blockquote{grid-column:1}}

/* Barristers */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);border-top:1px solid var(--line-2);padding-top:clamp(28px,4vw,44px)}
.person{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:22px;align-items:start}
.person figure{margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--bg-2)}
.person img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;filter:saturate(.55)}
.person h3{font-size:1.7rem;line-height:1.1}
.person .role{color:var(--muted);font-size:.92rem;margin:6px 0 14px}
.person p.bio{color:var(--ink-2);font-size:.98rem}
.person .more{display:inline-block;margin-top:16px;font-weight:600;font-size:.92rem;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.person .more:hover{border-color:var(--ink)}
@media (max-width:900px){.people{grid-template-columns:1fr}}
@media (max-width:520px){.person{grid-template-columns:1fr}.person figure{aspect-ratio:4/3}}

/* Fees */
.fees{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px)}
.fees h2{font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);line-height:1.05}
.fees .prose p{color:var(--ink-2);max-width:60ch}
.fees .prose p+p{margin-top:1em}
.fees .facts{margin-top:28px;border-top:1px solid var(--line-2);display:grid}
.fees .fact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.fees .fact span:last-child{color:var(--muted);text-align:right}
@media (max-width:820px){.fees{grid-template-columns:1fr}}

/* Contact: hairline framed, open */
.contact{border-top:1px solid var(--line-2);padding-top:clamp(40px,6vw,80px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px)}
.contact h2{font-size:clamp(2.2rem,1.5rem + 3vw,4.4rem);line-height:1.02;letter-spacing:-.025em;font-weight:300}
.contact .lead{color:var(--ink-2);margin-top:18px;max-width:44ch;font-size:1.05rem}
.contact .actions{margin-top:28px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.contact .details{display:grid;gap:22px;align-content:end;font-size:.98rem}
.contact .details .k{color:var(--muted);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-bottom:6px}
.contact .details a{border-bottom:1px solid var(--line-2)}
.contact .details a:hover{border-color:var(--ink)}
@media (max-width:820px){.contact{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,80px);padding:28px 0 44px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:.88rem}
footer .brand{font-family:var(--serif);font-weight:300;color:var(--ink);font-size:1.1rem;letter-spacing:-.02em}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a:hover{color:var(--ink)}

/* Site additions beyond the concept */
.nav .brand .long,.nav .brand .short{font-family:var(--serif)}
.photo{margin:0;overflow:hidden;background:var(--bg-2)}
.photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.6) contrast(1.02)}
.photo figcaption{font-size:.78rem;color:var(--muted);letter-spacing:.02em;padding-top:10px}
.band{padding-block:0}
.band .photo{aspect-ratio:21/9;max-height:520px}
.band .photo img{height:100%}
@media (max-width:700px){.band .photo{aspect-ratio:4/3}}
.placeholder{position:relative}
.placeholder::after{content:"Placeholder";position:absolute;top:12px;left:12px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#F4F0E8;background:rgba(23,21,15,.55);padding:5px 8px;border-radius:999px}

/* Page shell for inner pages */
.page{padding-top:clamp(56px,7vw,96px)}
.page-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:end;border-bottom:1px solid var(--line-2);padding-bottom:clamp(28px,4vw,48px)}
.page-head h1{font-size:clamp(2.6rem,1.8rem + 4vw,5.4rem);line-height:.98;letter-spacing:-.03em;font-weight:300}
.page-head .lede{font-size:clamp(1.05rem,1rem + .4vw,1.25rem);color:var(--ink-2);max-width:40ch;margin-top:20px}
@media (max-width:820px){.page-head{grid-template-columns:1fr}}
.bio-page{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,80px);padding-block:clamp(40px,6vw,80px)}
.bio-page .photo{aspect-ratio:3/4;position:sticky;top:90px}
.bio-page .prose p{color:var(--ink-2);max-width:60ch;font-size:1.05rem}
.bio-page .prose p+p{margin-top:1em}
.bio-page .prose p:first-child{font-family:var(--serif);font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem);line-height:1.3;color:var(--ink);max-width:30ch}
.facts{margin-top:32px;border-top:1px solid var(--line-2)}
.fact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.fact span:first-child{color:var(--muted)}
.fact a{border-bottom:1px solid var(--line-2)}
.fact a:hover{border-color:var(--ink)}
@media (max-width:820px){.bio{grid-template-columns:1fr}.bio-page .photo{position:static;max-width:360px}}

/* Contact form */
.form-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);padding-block:clamp(40px,6vw,80px)}
@media (max-width:820px){.form-grid{grid-template-columns:1fr}}
form.enquiry{display:grid;gap:22px}
form.enquiry .two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:560px){form.enquiry .two{grid-template-columns:1fr}}
form.enquiry label{display:grid;gap:8px;font-size:.9rem;font-weight:600;color:var(--ink-2)}
form.enquiry input,form.enquiry select,form.enquiry textarea{font:inherit;font-size:1rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:10px 0;border-radius:0;width:100%;min-height:44px}
form.enquiry textarea{min-height:140px;resize:vertical}
form.enquiry input:focus,form.enquiry select:focus,form.enquiry textarea:focus{outline:none;border-bottom-color:var(--ink)}
form.enquiry .hint{font-size:.85rem;color:var(--muted);font-weight:400}
form.enquiry .hp{position:absolute;left:-9999px}
form.enquiry button{justify-self:start;cursor:pointer}
.aside-note{border-top:1px solid var(--line-2);padding-top:20px;display:grid;gap:22px;align-content:start;font-size:.98rem}
.aside-note .k{color:var(--muted);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-bottom:6px}
.aside-note a{border-bottom:1px solid var(--line-2)}
.aside-note a:hover{border-color:var(--ink)}

/* Shoot brief */
.shots{display:grid;gap:clamp(32px,5vw,64px);padding-block:clamp(40px,6vw,80px)}
.shot{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,56px);align-items:start;border-top:1px solid var(--line);padding-top:28px}
.shot .n{font-family:var(--serif);font-size:1.5rem;color:var(--brass)}
.shot h3{font-size:1.6rem;line-height:1.1;margin:6px 0 12px}
.shot p{color:var(--ink-2);max-width:52ch}
.shot p+p{margin-top:.7em}
.shot .use{font-size:.85rem;color:var(--muted);margin-top:12px}
@media (max-width:820px){.shot{grid-template-columns:1fr}}
.prose-block{padding-block:clamp(40px,6vw,80px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px)}
.prose-block h2{font-size:clamp(1.8rem,1.3rem + 2vw,3rem);line-height:1.05}
.prose-block .prose p,.prose-block .prose li{color:var(--ink-2);max-width:60ch}
.prose-block .prose p+p{margin-top:1em}
.prose-block .prose ul{padding-left:1.1em;margin:.6em 0 0}
.prose-block .prose li{margin-bottom:.5em}
@media (max-width:820px){.prose-block{grid-template-columns:1fr}}

/* House punctuation */
.dot{color:var(--brass)}
footer .tag{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-left:6px}
.hero .portrait figure{position:relative}
.page .lede a{border-bottom:1px solid var(--line-2)}
.skip{position:absolute;left:-9999px;top:0;padding:8px 12px;background:var(--ink);color:var(--bg);z-index:99}
.skip:focus{left:12px;top:12px}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pair .photo{aspect-ratio:3/4}

/* Phone menu */
.menu-btn{display:none;background:none;border:0;padding:10px;margin:-10px -10px -10px 0;cursor:pointer;color:var(--ink)}
.menu-btn span{display:block;width:22px;height:1.5px;background:currentColor;margin:5px 0;transition:transform .2s,opacity .2s}
.nav.open .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.open .menu-btn span:nth-child(2){opacity:0}
.nav.open .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menu{display:none}
.nav-call{display:none}
@media (max-width:820px){
  .menu-btn{display:block}
  .nav-call{display:block;margin-left:auto;padding:10px;margin-block:-10px;color:var(--ink);line-height:0}
  .nav-call svg{display:block}
  .nav .btn.dark{display:none}
  .nav.open .menu{display:grid;max-width:var(--max);margin-inline:auto;padding:6px 0 22px;border-top:1px solid var(--line)}
  .menu a{font-family:var(--serif);font-size:1.6rem;font-weight:300;letter-spacing:-.02em;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink)}
  .menu a:last-child{border-bottom:0;font-family:var(--sans);font-size:.95rem;font-weight:600;padding-top:18px}
  .menu a:last-child::after{content:" \2192"}
  .stage{padding:18px 0}
  .stage h3{font-size:1.3rem}
  .pull blockquote{font-size:1.4rem}
  .fees .facts{margin-top:20px}
  .contact .details{gap:16px}
  footer{gap:12px}
}

/* Why: one column, one thought */
.thesis{padding-block:clamp(56px,8vw,96px);border-bottom:1px solid var(--line);display:grid;gap:18px;justify-items:start;max-width:62ch}
.thesis h2{font-size:clamp(2.2rem,1.5rem + 2.8vw,3.8rem);line-height:1.02;letter-spacing:-.025em;font-weight:300}
.thesis .lead{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.5;color:var(--ink-2);max-width:40ch;margin-top:6px}
.thesis .note{font-size:.88rem;color:var(--muted);margin-top:4px}
.thesis .note a{border-bottom:1px solid var(--line-2)}

/* Questions */
.qa{border-top:1px solid var(--line-2)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:20px;align-items:baseline;padding:20px 0;font-family:var(--serif);font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);line-height:1.2;letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--brass);font-family:var(--sans);font-weight:500;font-size:1.3rem;justify-self:end}
.qa details[open] summary::after{content:"\2212"}
.qa summary:hover{color:var(--brass)}
.qa .answer{padding:0 0 24px;max-width:62ch}
.qa .answer p{color:var(--ink-2)}
.qa .answer p+p{margin-top:.8em}

/* Chambers: the tail of the barristers section */
.chambers{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start;border-top:1px solid var(--line);margin-top:clamp(36px,5vw,56px);padding-top:clamp(28px,4vw,44px)}
.chambers .chambers-mark{display:block;border:0;max-width:260px;padding-top:6px}
.chambers .chambers-mark img{width:100%;height:auto;opacity:.92;transition:opacity .15s}
.chambers .chambers-mark:hover img{opacity:1}
.chambers .lead{font-size:1.05rem;color:var(--ink-2);max-width:52ch;margin-bottom:16px}
@media (max-width:820px){.chambers{grid-template-columns:1fr;gap:18px}.chambers-mark{max-width:200px}}

.contact .details a.addr{border-bottom:0;display:inline-block;line-height:1.5}
.contact .details a.addr:hover{color:var(--brass)}

.wordmark-link{display:inline-block;border:0;margin:2px 0 8px}
.wordmark-link img{height:13px;width:auto;display:block;opacity:.95}
.wordmark-link:hover img{opacity:1}
.wordmark-link.foot{margin:0;align-self:center}
.wordmark-link.foot img{height:13px}
.contact .details a.addr{color:var(--ink)}
.contact .details a.addr:hover{color:var(--brass)}
footer nav{align-items:center}

/* Lock-up: the name, the chambers beneath */
.lockup{display:grid;gap:5px;justify-items:start}
.lockup .brand{line-height:1}
.lockup .chambers-mark{display:block;border:0;line-height:0}
.lockup .chambers-mark img{height:9px;width:auto;opacity:.9}
.lockup .chambers-mark:hover img{opacity:1}
.nav .pill{align-items:center}
footer{align-items:flex-start}
footer .lockup .chambers-mark img{height:13px}
@media (max-width:820px){.lockup .chambers-mark img{height:8px}}

footer{align-items:center;justify-content:space-between}
footer>.chambers-mark{display:block;border:0;line-height:0}
footer>.chambers-mark img{height:14px;width:auto;opacity:.9}
footer>.chambers-mark:hover img{opacity:1}

footer{justify-content:flex-start;padding:24px 0 40px}

main>.wrap{padding-bottom:clamp(56px,8vw,112px)}

/* Welcome: the portrait. Words left, the photograph full height to the right edge */
.welcome{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:clamp(40px,6vw,96px);align-items:center;margin-right:calc(50% - 50vw);min-height:min(calc(100svh - 64px),780px);padding:0;border-bottom:1px solid var(--line)}
.welcome-copy{display:grid;gap:28px;padding-block:clamp(56px,8vw,112px)}
.welcome .eyebrow{color:var(--muted);letter-spacing:.26em;font-size:.7rem}
.welcome h1{display:grid;gap:14px;font-weight:300;margin:0}
.welcome h1 .name{font-size:clamp(3rem,1.5rem + 4.6vw,6.2rem);line-height:.92;letter-spacing:-.035em}
.welcome h1 .title{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
.welcome .lede{font-size:1.05rem;line-height:1.65;color:var(--ink-2);max-width:38ch}
.welcome .actions{display:flex;gap:30px;flex-wrap:wrap;align-items:center;margin-top:6px}
.welcome-portrait{margin:0;align-self:stretch;position:relative;overflow:hidden;background:var(--bg-2)}
.welcome-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 22%;filter:saturate(.35) contrast(1.04)}
@media (max-width:820px){
  .welcome{grid-template-columns:1fr;margin-right:0;min-height:0;border-bottom:0}
  .welcome-copy{padding-block:44px 36px;gap:22px}
  .welcome-portrait{align-self:start;margin-inline:calc(-1 * var(--gutter))}
  .welcome-portrait img{position:static;display:block;height:auto;aspect-ratio:4/5}
}
@media (max-width:560px){
  /* Phone: a plain stack on one margin. Photo, name, lede, actions */
  .welcome-copy{display:contents}
  .welcome-portrait{order:-1;margin:24px 0 0}
  .welcome-portrait img{aspect-ratio:4/3;object-position:50% 12%;filter:saturate(.55) contrast(1.04)}
  .welcome .eyebrow{display:block;margin:26px 0 12px}
  .welcome h1{gap:12px;margin:0}
  .welcome h1 .name{font-size:clamp(2.6rem,12vw,3.4rem)}
  .welcome .lede{margin:22px 0 0}
  .welcome .actions{margin:24px 0 44px;display:grid;grid-template-columns:1fr;gap:12px}
  .welcome .actions .cta,.welcome .actions .cta-quiet{display:block;text-align:center;padding:17px 28px;border:1px solid var(--ink)}
  .nav-call{margin-right:-4px}
}

/* Calls to action: small, spaced capitals. One solid, one underlined */
.cta,.cta-quiet{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.cta{display:inline-block;background:var(--ink);color:var(--bg);padding:17px 28px;transition:opacity .15s}
.cta:hover{opacity:.82}
.cta-quiet{padding:6px 0;border-bottom:1px solid var(--line-2)}
.cta-quiet:hover{border-color:var(--ink)}

/* The painting: the ground of the closing section. The page opens on the person and ends on the art */
#contact{margin:0 calc(50% - 50vw);padding-inline:calc(50vw - 50%);position:relative;background:#22242A url(/assets/art/stone.jpg?v=3) 50% 45%/cover;color:#F3F1EC}
#contact::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,14,16,.78) 0%,rgba(14,14,16,.6) 50%,rgba(14,14,16,.42) 100%);pointer-events:none}
#contact>.contact{position:relative;border-top:0;padding-top:0}
#contact .contact h2{color:#F3F1EC}
#contact .contact .lead{color:#E2DFD8}
#contact .contact .details .k{color:#B9B5AD}
#contact .contact .details,#contact .contact .details a.addr{color:#F3F1EC}
#contact .contact .details a{border-bottom-color:rgba(243,241,236,.35)}
#contact .contact .details a.addr:hover,#contact .contact .details a:hover{color:#FFF;border-color:#F3F1EC}
#contact .cta{background:#F3F1EC;color:#111}
#contact .cta-quiet{color:#F3F1EC;border-bottom-color:rgba(243,241,236,.4)}
#contact .cta-quiet:hover{border-color:#F3F1EC}
main>.wrap{padding-bottom:0}

/* Elevation: smaller type, more air, quieter structure */
body{font-size:16px;line-height:1.65}
.nav .pill{padding:22px 0 20px}
.nav .brand .long,.nav .brand .short{font-family:var(--serif);font-weight:300;text-transform:none;letter-spacing:-.02em;font-size:1.5rem;line-height:1}
@media (max-width:820px){.nav .brand .long{display:inline;font-size:1.35rem}.nav .brand .short{display:none}}
.nav .links{gap:34px}
.nav .links a,.nav .btn.dark{font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.nav .btn.dark{font-weight:600}
section{padding-block:clamp(48px,6vw,88px)}
.section-head{margin-bottom:clamp(40px,5vw,72px)}
.section-head h2,.fees h2{font-size:clamp(1.9rem,1.3rem + 2vw,3rem);line-height:1.08;font-weight:300;letter-spacing:-.02em}
.section-head .lead{font-size:1.02rem;line-height:1.7;max-width:48ch}
.contact h2{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.8rem)}
.contact .lead{font-size:1rem;line-height:1.7}
.row{padding:36px 0}
.row .n{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.18em;color:var(--muted)}
.row h3{font-size:1.4rem;font-weight:300}
.stage h3,.person h3{font-weight:300}
.stage p,.row p,.person p.bio,.fees .prose p,.qa .answer p{line-height:1.7}
.person img{filter:saturate(.35) contrast(1.04)}
.qa summary{font-weight:300}
.qa summary::after{color:var(--muted)}
.qa summary:hover{color:var(--ink-2)}
.contact .details .k{letter-spacing:.22em;font-size:.68rem}

/* Quiet movement. Nothing moves for anyone who has asked for reduced motion */
.nav{border-bottom-color:transparent;transition:border-color .4s,background .4s}
.nav.scrolled{border-bottom-color:var(--line)}
.reveal-on .reveal{opacity:0;transform:translateY(18px);transition:opacity 1.1s cubic-bezier(.2,.6,.2,1),transform 1.1s cubic-bezier(.2,.6,.2,1)}
.reveal-on .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .welcome-portrait img{animation:settle 2.4s cubic-bezier(.2,.6,.2,1) both}
  .welcome-copy>*{animation:rise 1.2s cubic-bezier(.2,.6,.2,1) both}
  .welcome-copy>*:nth-child(2){animation-delay:.12s}
  .welcome-copy>*:nth-child(3){animation-delay:.24s}
  .welcome-copy>*:nth-child(4){animation-delay:.36s}
}
@keyframes settle{from{transform:scale(1.06);opacity:.6}to{transform:none;opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Portraits in black and white come into colour when you reach for them */
.person figure img,.welcome-portrait img{transition:filter .9s ease}
.person:hover figure img{filter:saturate(.95) contrast(1.02)}
.welcome-portrait:hover img{filter:saturate(.9) contrast(1.02)}

/* Bio pages: the same welcome as home, then results, then background */
.bio-welcome .welcome-copy{padding-block:clamp(48px,7vw,96px)}
.bio-welcome h1 .name{font-size:clamp(2.8rem,1.4rem + 4.2vw,5.6rem)}
.bio-block{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,80px);border-top:1px solid var(--line);padding-block:clamp(56px,8vw,112px)}
.bio-block+.bio-block{border-top:1px solid var(--line)}
.bio-block h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);font-weight:300;line-height:1.1;letter-spacing:-.02em}
.results{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.results li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.results h3{font-size:1.25rem;font-weight:300;line-height:1.25}
.results p{color:var(--ink-2);font-size:.95rem;line-height:1.65;margin-top:6px;max-width:58ch}
.results .r-where{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-top:6px}
.bio-more{margin-top:28px}
.bio-block .prose p{color:var(--ink-2);max-width:60ch;line-height:1.7}
.bio-block .prose p+p{margin-top:1em}
.bio-block .facts{margin-top:36px}
@media (max-width:820px){.bio-block{grid-template-columns:1fr;gap:20px}.results li{grid-template-columns:1fr;gap:6px}.results .r-where{padding-top:0;order:-1}}
.bio-block>*,.results li>*{min-width:0}
.bio-more .cta-quiet{white-space:normal;line-height:1.8}
.glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 40px;margin:40px 0 0;padding-top:28px;border-top:1px solid var(--line-2)}
.glance dt{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.glance dd{margin:0;font-family:var(--serif);font-weight:300;font-size:1.2rem;line-height:1.3}
@media (max-width:520px){.glance{grid-template-columns:1fr;gap:20px}}
/* Background: heading and the four facts on the left, the prose on the right */
.bio-side{display:grid;align-content:start;gap:0}
.bio-side .glance{grid-template-columns:1fr;gap:22px;margin-top:32px;padding-top:24px}
.bio-side .glance dd{font-size:1.05rem;line-height:1.4}
.bio-block>.prose p:first-child{font-family:var(--serif);font-weight:300;font-size:clamp(1.25rem,1.1rem + .6vw,1.55rem);line-height:1.4;color:var(--ink)}
@media (max-width:820px){.bio-side .glance{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}}
@media (max-width:420px){.bio-side .glance{grid-template-columns:1fr}}
/* Bio sections: one column, read top to bottom */
.bio-block{display:block;max-width:760px}
.bio-block h2{margin-bottom:clamp(24px,3vw,36px)}
.bio-block>.prose p{font-size:1.02rem}
.bio-block>.prose p:first-child{font-size:clamp(1.3rem,1.1rem + .7vw,1.65rem);line-height:1.4;margin-bottom:.4em}
.bio-block .glance{grid-template-columns:repeat(4,minmax(0,auto));justify-content:start;gap:24px 48px;margin-top:44px;padding-top:28px}
.bio-block .glance dd{font-size:1.05rem;line-height:1.4}
.bio-block .glance>div:first-child{max-width:15em}
@media (max-width:820px){.bio-block .glance{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}}
@media (max-width:420px){.bio-block .glance{grid-template-columns:1fr}}
.bio-block .results{margin-top:0}

.welcome-portrait{z-index:1}
.welcome-portrait img{object-position:42% 18%}
@media (max-width:560px){.welcome-portrait img{object-position:38% 16%}}
/* Desktop: Gowan sits further right in the frame, the open side toward the words */
@media (min-width:821px){.welcome-portrait img{scale:1.16;transform-origin:0% 6%;object-position:0% 12%}}

/* The masthead: one wide photograph of the library (the shelves either side extended), the name across the
   shelves on the left in paper, clear of the face. The name drifts with the scroll (mast.js) */
.mast{padding:0;margin:0 calc(50% - 50vw)}
.mast picture{display:contents}
.mast-stage{--stage-h:max(560px,min(calc(100svh - 64px),860px));--name-l:max(var(--gutter),calc((100vw - var(--max)) / 2));--img-w:max(calc(var(--stage-h) * 2.357),100vw);position:relative;height:var(--stage-h);background:#1B1C1A;overflow:hidden;isolation:isolate}
.mast-stage::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,12,12,.6) 0%,rgba(12,12,12,0) 18%),linear-gradient(90deg,rgba(12,12,12,.62) 0%,rgba(12,12,12,.42) 30%,rgba(12,12,12,.08) 50%,rgba(12,12,12,0) 100%),linear-gradient(0deg,rgba(12,12,12,.45) 0%,rgba(12,12,12,0) 30%);pointer-events:none}
.mast-photo{position:absolute;z-index:0;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:0% 35%;filter:saturate(.45) contrast(1.04)}
/* the face begins about 44% of the way across the photograph; the name ends before it */
.mast-name{position:absolute;z-index:2;left:var(--name-l);top:15%;margin:0;color:#F3F1EC;font-family:var(--serif);font-weight:300;font-size:max(3.4rem,min(10rem,calc((var(--img-w) * .435 - var(--name-l) - 48px) / 4.7)));line-height:.86;letter-spacing:-.045em;white-space:nowrap;will-change:transform;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.mast-title{position:absolute;z-index:3;left:var(--name-l);bottom:8%;margin:0;color:#D9D5CC;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase}
.mast-copy{max-width:var(--max);margin:0 auto;padding:clamp(40px,5vw,64px) max(var(--gutter),calc((100vw - var(--max)) / 2));display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:center;border-bottom:1px solid var(--line);box-sizing:content-box}
.mast-copy .lede{font-size:1.15rem;line-height:1.65;color:var(--ink-2);max-width:46ch}
.mast-copy .actions{display:flex;gap:30px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
@media (max-width:820px){
  /* Phone: the desktop composition in miniature. The same wide photograph with Gowan centred, the name on one line
     on the shelves above his head, the title bottom left. The photograph is sized so the head always starts below the name */
  .mast-stage{--fs:calc((100vw - 2 * var(--gutter)) / 5.15);--name-b:calc(var(--nav-h,68px) + 22px + var(--fs) * .9);--stage-h:clamp(600px,88svh,820px);height:var(--stage-h)}
  .mast-stage::before{display:block;background:linear-gradient(180deg,rgba(12,12,12,.55) 0%,rgba(12,12,12,0) 26%),linear-gradient(0deg,rgba(12,12,12,.6) 0%,rgba(12,12,12,0) 32%)}
  .mast-photo{inset:auto;top:auto;bottom:0;left:50%;right:auto;width:auto;height:calc((var(--stage-h) - var(--name-b) - 20px) / .92);transform:translateX(-48%);object-fit:fill;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%);mask-image:linear-gradient(180deg,transparent 0,#000 12%)}
  .mast-name{position:absolute;top:calc(var(--nav-h,68px) + 22px);left:var(--gutter);padding:0;font-size:var(--fs);line-height:.9;display:block;white-space:nowrap}
  .mast-name span{display:inline}
  .mast-name span+span{padding-left:0}
  .mast-title{position:absolute;left:var(--gutter);bottom:5%;padding:0;font-size:.64rem;letter-spacing:.2em;white-space:nowrap}
  .mast-copy{grid-template-columns:1fr;gap:24px;padding:32px var(--gutter) 44px;box-sizing:border-box;margin:0}
  .mast-copy .actions{justify-content:stretch;display:grid;grid-template-columns:1fr;gap:12px}
  .mast-copy .actions .cta,.mast-copy .actions .cta-quiet{display:block;text-align:center;padding:17px 28px;border:1px solid var(--ink)}
}




/* Home: the header sits over the photograph until you scroll past it. The small name steps aside while the big one is on screen */
.nav{transition:background-color .35s,border-color .35s,color .35s,backdrop-filter .35s}
.nav .brand{transition:opacity .35s}
.has-mast .mast{margin-top:calc(-1 * var(--nav-h,65px))}
.has-mast .mast-stage{--stage-h:max(600px,min(100svh,920px))}
.has-mast .nav.nav-over:not(.open){background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;color:#F3F1EC}
.has-mast .nav.nav-over:not(.open) .brand{opacity:0;pointer-events:none}
.has-mast .nav.nav-over:not(.open) .links a{color:rgba(243,241,236,.86)}
.has-mast .nav.nav-over:not(.open) .links a:hover{color:#fff;border-color:rgba(243,241,236,.6)}
.has-mast .nav.nav-over:not(.open) .btn.dark{color:#F3F1EC;border-bottom-color:rgba(243,241,236,.5)}
.has-mast .nav.nav-over:not(.open) .nav-call,.has-mast .nav.nav-over:not(.open) .menu-btn{color:#F3F1EC}

@media (max-width:820px){.has-mast .mast-stage{--stage-h:clamp(600px,88svh,820px)}}



/* The mark-up: one phrase in each section highlighted as you reach it, the way counsel marks the line that matters
   in disclosure. A soft band of legal green behind the lower half of the words, drawn left to right; it cannot be mistaken for a link */
:root{--markup:rgba(31,74,51,.21)}
#contact{--markup:rgba(243,241,236,.3)}
.mark{background-image:linear-gradient(var(--markup),var(--markup));background-repeat:no-repeat;background-position:0 88%;background-size:0% 42%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em;margin:0 -.08em;transition:background-size 1.3s cubic-bezier(.65,0,.25,1)}
.mark.on{background-size:100% 42%}
@media (prefers-reduced-motion:reduce){.mark{transition:none;background-size:100% 42%}}

/* The five stages: one numbered course. On a phone the numbers sit on a rail so the stages read as one case moving forward */
ol.journey{list-style:none;margin:0;padding:0}
@media (max-width:820px){
  section{padding-block:64px}
  .section-head{margin-bottom:36px}
  .journey{border-top:0;position:relative}
  .journey .row{grid-template-columns:30px 1fr;column-gap:18px;row-gap:6px;padding:0 0 34px;border-bottom:0;position:relative;align-items:start}
  .journey .row::before{content:"";position:absolute;left:14.5px;top:30px;bottom:4px;width:1px;background:var(--line-2)}
  .journey .row:last-child{padding-bottom:0}
  .journey .row:last-child::before{display:none}
  .journey .row .n{grid-row:1;width:30px;height:30px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:.72rem;letter-spacing:0;color:var(--ink);background:var(--bg)}
  .journey .row h3{grid-column:2;align-self:center;font-size:1.3rem}
  .journey .row>div{grid-column:2}
}
/* The statement stands on its own line; the reason sits under it, not beside it */

/* The reveal (home masthead from 20 Oct 2026). Two identical copies of the name, ink and paper, stacked; reveal.js clips
   each to the part above or over the photograph as it rises under the name */
.rv{--side:max(var(--gutter),calc((100vw - var(--max)) / 2));margin:0 calc(50% - 50vw);padding:0 var(--side)}
.rv-track{position:relative}
.rv-hold{position:sticky;top:var(--nav-h,65px);height:calc(100svh - var(--nav-h,65px));margin-bottom:calc(-1 * (100svh - var(--nav-h,65px)) + 74svh);z-index:2;display:grid;place-items:center;pointer-events:none}
.rv-layer{grid-area:1/1;width:100%;text-align:center;margin-top:-8svh;padding-block:clamp(28px,5vw,72px)}
.rv-ink{color:var(--ink)}
.rv-paper{color:#F3F1EC;clip-path:inset(100% 0 0 0)}
.rv-name{margin:0;font-family:var(--serif);font-weight:300;font-size:calc(min(var(--max),100vw - 2 * var(--gutter)) / 5.15);line-height:.9;letter-spacing:-.045em;white-space:nowrap}
.rv-eyebrow,.rv-foot{margin:0;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase}
.rv-eyebrow{margin-bottom:clamp(14px,2vw,26px)}
.rv-foot{margin-top:clamp(16px,2.2vw,30px)}
.rv-photo{margin:0;position:relative;z-index:1;height:min(88svh,820px);overflow:hidden;background:#1B1C1A}
.rv-photo img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:62% 30%;filter:saturate(.45) contrast(1.04)}
.rv-credits{display:flex;justify-content:space-between;gap:24px;padding-top:18px;font-size:.86rem;line-height:1.45;color:var(--ink-2)}
.rv-credits p{margin:0}.rv-credits p+p{text-align:right}
.rv .mast-copy{padding-inline:0;margin:0;max-width:none;box-sizing:border-box}
@media (max-width:820px){
  .rv-name{font-size:calc((100vw - 2 * var(--gutter)) / 2.95);line-height:.86}
  .rv-name span{display:block}
  .rv-photo{height:88svh}
  .rv-layer{margin-top:12svh}
  .rv-hold{margin-bottom:calc(-1 * (100svh - var(--nav-h,65px)) + 86svh)}
  .rv-photo img{object-position:51% 40%}
  .rv-eyebrow,.rv-foot{font-size:.64rem;letter-spacing:.2em}
}
/* The statement: its own section, centred with air around it, like the masthead. The reason reads as a quotation */
.statement{padding-block:clamp(56px,7vw,104px);display:grid;justify-items:center;text-align:center;gap:clamp(16px,2vw,24px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statement h2{font-size:clamp(2.2rem,1.5rem + 2.6vw,3.8rem);line-height:1;font-weight:300;letter-spacing:-.03em}
.statement p{margin:0;max-width:40ch;font-family:var(--serif);font-weight:300;font-size:clamp(1.1rem,.95rem + .5vw,1.4rem);line-height:1.45;color:var(--ink-2);text-wrap:balance}
/* The course: head above, the steps in one reading column on a numbered rail, heading over text (desktop as phone) */
#course .section-head{grid-template-columns:1fr;gap:18px;align-items:start}
#course .section-head .lead{max-width:56ch}
.journey{border-top:0;position:relative;max-width:720px}
.journey .row{grid-template-columns:34px 1fr;column-gap:24px;row-gap:8px;padding:0 0 44px;border-bottom:0;position:relative;align-items:start}
.journey .row::before{content:"";position:absolute;left:16.5px;top:34px;bottom:6px;width:1px;background:var(--line-2)}
.journey .row:last-child{padding-bottom:0}
.journey .row:last-child::before{display:none}
.journey .row .n{grid-row:1;width:34px;height:34px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:.74rem;letter-spacing:0;color:var(--ink);background:var(--bg)}
.journey .row h3{grid-column:2;align-self:start;margin-top:3px;font-size:1.4rem}
.journey .row>div{grid-column:2}
@media (max-width:820px){.statement{padding-block:52px}}
/* The course on desktop: four steps, two by two, no rail between them. The stages of a case follow in a row */
@media (min-width:821px){
  .journey{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,96px);row-gap:clamp(44px,5vw,64px)}
  .journey .row,.journey .row:last-child{padding:0;align-content:start}
  .journey .row::before{display:none}
  .journey .row p{max-width:52ch}
}
.stages-wrap{margin-top:clamp(64px,8vw,112px)}
.stages-h{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);font-weight:300;margin-bottom:clamp(20px,2.5vw,32px)}
/* The barristers: hairlines above and below frame the two of them; Mātai Chambers sits beneath the frame as one quiet line */
.people{border-bottom:1px solid var(--line-2);padding-bottom:clamp(28px,4vw,44px)}
.chambers{border-top:0;margin-top:0;padding-top:clamp(20px,2.5vw,28px);grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center}
.chambers .chambers-mark{max-width:150px;padding-top:0}
.chambers>div{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:24px;row-gap:6px}
.chambers .lead{margin:0;font-size:.95rem;color:var(--muted);max-width:none}
.chambers .lead+p{margin:0;font-size:.95rem}
@media (max-width:820px){.chambers{grid-template-columns:1fr;gap:12px}.chambers .chambers-mark{max-width:130px}}
/* The frame closes beneath Mātai Chambers, so it holds the two barristers and where they practise */
.people{border-bottom:0}
.chambers{border-bottom:1px solid var(--line-2);padding-bottom:clamp(20px,2.5vw,28px);padding-top:clamp(8px,1.5vw,16px)}
/* Fees: what happens, in order. Same numbered circles as the approach, so circles mean "process"; the rest is one quiet line */
#fees .section-head{grid-template-columns:1fr;gap:18px;align-items:start}
.fee-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.fee-steps li{display:grid;grid-template-columns:34px 1fr;column-gap:20px;row-gap:8px;align-content:start}
.fee-steps .n{width:34px;height:34px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-family:var(--sans);font-size:.74rem;font-weight:600;color:var(--ink)}
.fee-steps h3{align-self:start;margin-top:3px;font-size:1.4rem;font-weight:300;line-height:1.15}
.fee-steps p{grid-column:2;margin:0;color:var(--ink-2);line-height:1.7;max-width:34ch}
.fee-note{margin:clamp(36px,4vw,52px) 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:.95rem;color:var(--muted)}
@media (max-width:820px){.fee-steps{grid-template-columns:1fr;gap:28px}}
/* The reveal's credits row: chambers on the left, Call and Email on the right, under the photograph */
.rv-credits{align-items:start;padding-top:20px;padding-bottom:clamp(8px,2vw,24px)}
.rv-credits .actions{display:flex;gap:30px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
@media (max-width:820px){
  .rv-credits{flex-direction:column;gap:22px}
  .rv-credits .actions{display:grid;grid-template-columns:1fr;gap:12px;width:100%}
  .rv-credits .actions .cta,.rv-credits .actions .cta-quiet{display:block;text-align:center;padding:17px 28px;border:1px solid var(--ink)}
}
/* Air beneath Call / Email so the photo, name and buttons read as one card before the rule */
.rv-credits{padding-bottom:clamp(48px,6vw,88px)}
/* Practice pages: one reading column. A direct answer first, statement headings, questions, reviewed-by line */
.practice-head{padding-bottom:clamp(28px,4vw,48px);border-bottom:1px solid var(--line);max-width:860px}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:.8rem;color:var(--muted);margin-bottom:clamp(20px,3vw,32px)}
.crumbs a{color:var(--muted);border-bottom:1px solid transparent}.crumbs a:hover{color:var(--ink);border-color:var(--line-2)}
.practice-head h1{font-size:clamp(2.4rem,1.6rem + 3vw,4.2rem);font-weight:300;line-height:1.02;letter-spacing:-.025em;max-width:16ch}
.practice-head .lede{margin:clamp(18px,2.5vw,28px) 0 0;font-size:1.15rem;line-height:1.65;color:var(--ink-2);max-width:56ch}
.practice-head .actions{display:flex;gap:30px;flex-wrap:wrap;align-items:center;margin-top:clamp(24px,3vw,36px)}
.practice-body .prose{max-width:68ch}
.practice-body h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);font-weight:300;line-height:1.15;margin:clamp(36px,4vw,52px) 0 14px}
.practice-body h2:first-child{margin-top:0}
.practice-body p,.practice-body li{color:var(--ink-2);line-height:1.75}
.practice-body p+p{margin-top:.9em}
.practice-body ul{margin:.6em 0 0;padding-left:1.15em}.practice-body li+li{margin-top:.35em}
.practice-qa h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);font-weight:300;margin-bottom:clamp(20px,3vw,32px)}
.practice-qa .reviewed{margin-top:28px;font-size:.88rem;color:var(--muted);max-width:68ch}
.practice-qa .reviewed a{color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.stage-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px;border-top:1px solid var(--line-2);padding-top:22px}
.stage-links a{font-family:var(--serif);font-size:1.25rem;font-weight:300;border-bottom:1px solid var(--line-2)}
.stage-links a[aria-current]{color:var(--muted);border-color:transparent;pointer-events:none}
.stage .stage-name a{border-bottom:1px solid var(--line-2)}.stage .stage-name a:hover{border-color:var(--ink)}
/* The chambers credit under the photograph, a size up so it reads beside the buttons */
.rv-credits>p{font-size:1rem;line-height:1.5;color:var(--ink-2)}
@media (max-width:820px){.rv-credits>p{font-size:.95rem}}
.qa-note{margin-top:22px;font-size:.88rem;color:var(--muted)}
/* The questions sit on a softer band, full width, so the long page has a change of ground before the contact painting */
#questions,.practice-qa{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);background:#E9E7E2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #questions,:root:not([data-theme="light"]) .practice-qa{background:#1A1816}}
:root[data-theme="dark"] #questions,:root[data-theme="dark"] .practice-qa{background:#1A1816}
.practice-qa{padding-block:clamp(48px,6vw,88px)}
/* TRY (21 Oct): the stages on the same stone band as the questions, full width, closing the course section */
#course{padding-bottom:0}
.stages-wrap{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);background:#E9E7E2;padding-block:clamp(44px,5vw,72px);margin-top:clamp(56px,7vw,96px)}
.stages-wrap .stages{border-color:#D3D0C9}
.stages-wrap .stage{border-color:#D3D0C9}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stages-wrap{background:#1A1816}}
:root[data-theme="dark"] .stages-wrap{background:#1A1816}
/* muted text on the stone bands, darkened to 4.5:1 (light only; dark keeps its own --muted) */
:root:not([data-theme="dark"]) :is(.stages-wrap,#questions,.practice-qa){--muted:#646464}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.stages-wrap,#questions,.practice-qa){--muted:#9A948A}}

/* The header mark (21 Oct 2026). G/D, the hairline at 17°, opening to Gowan Duff (title case, 0.17 spacing) with Barrister.
   On the home page it starts as G/D and opens once the big name has scrolled away (brand.js); elsewhere it is open. */
.nav .brand{display:inline-flex;align-items:baseline;gap:.85em;font-size:1.3rem;letter-spacing:0;line-height:1;transition:none}
.nav .brand .bn{position:relative;display:inline-flex;align-items:baseline;font-family:var(--serif);font-weight:300;letter-spacing:.17em;white-space:nowrap}
.nav .brand .bn .end{margin-right:-.17em}
.nav .brand .bw{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:baseline}
.nav .brand .bs{display:inline-block;width:.25em}
.nav .brand .bl{display:inline-block;width:0;height:0;vertical-align:baseline}
.nav .brand .bt{font-family:var(--sans);font-weight:600;font-size:.52rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
.nav .brand .bslash{position:absolute;left:0;top:0;width:1.2px;background:currentColor;opacity:0;pointer-events:none}
.nav .brand.anim .b1,.nav .brand.anim .b2{width:0;transition:width .65s cubic-bezier(.65,0,.35,1)}
.nav .brand.anim .bs{width:var(--gap,.5em);transition:width .65s cubic-bezier(.65,0,.35,1)}
.nav .brand.anim .bt{opacity:0;transition:opacity .2s}
.nav .brand.anim.ready .bslash{height:var(--sh);transform:var(--sc);opacity:1;transition:transform .65s cubic-bezier(.65,0,.35,1),opacity .1s}
.nav .brand.anim.on .b1{width:var(--wO)}
.nav .brand.anim.on .b2{width:var(--wU)}
.nav .brand.anim.on .bs{width:var(--sp)}
.nav .brand.anim.ready.on .bslash{transform:var(--so);opacity:0;transition:transform .65s cubic-bezier(.65,0,.35,1),opacity .14s .52s}
.nav .brand.anim.on .bt{opacity:1;transition:opacity .3s .5s}
@media (max-width:560px){.nav .brand .bt{display:none}.nav .brand{font-size:1.2rem}}
@media (prefers-reduced-motion:reduce){.nav .brand *{transition:none!important}}
.nav .brand.still *{transition:none!important}
/* Barrister sits under the name, hanging below it so the name stays level with the menu */
.nav .brand{position:relative}
.nav .brand .bt{position:absolute;left:0;top:100%;margin-top:.42em;font-size:.5rem;line-height:1;white-space:nowrap}
@media (max-width:560px){.nav .brand .bt{display:block;font-size:.46rem;margin-top:.38em}}
/* Barrister centred under the name (the extra left padding balances the letter spacing after its last letter) */
.nav .brand .bt{left:50%;transform:translateX(-50%);padding-left:.26em}
/* Bio portraits: both office frames are already centred on the person, so the crop is centred with no zoom */
.bio-welcome .welcome-portrait img{scale:none;transform-origin:50% 50%;object-position:50% 14%}
@media (max-width:820px){.bio-welcome .welcome-portrait img{object-position:50% 12%}}
/* Portraits in full colour, no hover change (21 Oct 2026). The masthead photograph stays muted. */
.person img,.person figure img,.welcome-portrait img,.bio-welcome .welcome-portrait img{filter:none!important;transition:none}
.person:hover img,.person figure:hover img,.welcome-portrait:hover img{filter:none!important}