/* Editorial finish: flat paper, hairline rules instead of coloured boxes, numbered section heads, squared buttons,
   captions that sit under the pictures like in a magazine. Loaded last on every page. */
:root{--rule:color-mix(in srgb,var(--ink) 16%,transparent)}
body{counter-reset:sec}
/* paper: no dotted background */
body:not(#_) .hero,body:not(#_) .strip-zone,body:not(#_) .case .case-hero,body:not(#_) .case .sec.s1{background:var(--bg)!important}
/* top bar: a flat strip with a hairline */
body:not(#_) .topbar{box-shadow:none;border:1px solid var(--rule);border-radius:4px}
/* buttons: squared, ink */
body:not(#_) .pbtn{border-radius:2px;background:var(--ink);color:var(--bg);box-shadow:none}
body:not(#_) .pbtn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* section heads: a rule across the page, a running number, the title */
body:not(#_) :is(.work,.exp) .h2{display:flex;align-items:flex-start;gap:clamp(14px,2vw,28px);width:100%;border-top:1px solid var(--ink);padding-top:clamp(14px,1.6vw,22px)}
body:not(#_) :is(.work,.exp) .h2::before{counter-increment:sec;content:"0" counter(sec);font:500 .68rem/1 var(--label);letter-spacing:.2em;color:var(--muted);padding-top:.9em;flex:none}
body:not(#_) .exp{border-image:none;background:var(--bg)}
/* tools: a plain line of names between two rules */
body:not(#_) .strip{background:none;box-shadow:none;border-radius:0;border-block:1px solid var(--rule);padding:.3rem 0}
body:not(#_) .strip-l{background:none;color:var(--muted);box-shadow:none;padding:.8rem 1.2rem .8rem 0;border-right:1px solid var(--rule);border-radius:0}
body:not(#_) .strip li{background:none;box-shadow:none;padding:.6rem 1rem}
/* project cards: picture, then a caption on the paper */
body:not(#_) .grid{row-gap:clamp(44px,5vw,72px)}
body:not(#_) .card{background:transparent!important;padding:0;border-radius:0;box-shadow:none!important;filter:none!important;color:var(--ink)}
body:not(#_) .card-img{border-radius:3px}
body:not(#_) .card-b{padding:1.1rem 0 0;gap:.5rem;border-top:0}
body:not(#_) .card-c{opacity:1;color:var(--muted)}
body:not(#_) .card-d{opacity:1;color:var(--muted)}
body:not(#_) .card-go{background:none;color:var(--ink);padding:0 0 .3rem;border-radius:0;border-bottom:1px solid var(--ink)}
body:not(#_) .card-n{border-radius:2px}
/* experience: tabs as an underlined index, panels as ruled columns */
body:not(#_) .pf-ind{display:none}
body:not(#_) .pf-tb{gap:0}
body:not(#_) .pf-tb label{box-shadow:inset 0 -1px 0 var(--rule);border-radius:0;padding:.9rem 1.4rem .9rem 0;color:var(--muted)}
body:not(#_) .pf-tb input:checked + label{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
body:not(#_) :is(.pf-about p,.pf-rows>li){background:transparent!important;color:var(--ink)!important;border-radius:0;box-shadow:none;border-top:1px solid var(--ink);padding:1.1rem 0 0}
body:not(#_) .pf-about{gap:clamp(20px,3vw,44px)}
body:not(#_) .pf-rows{column-gap:clamp(20px,3vw,44px)}
body:not(#_) .sk-chips span.chip{background:none;box-shadow:inset 0 0 0 1px var(--rule);border-radius:2px}
/* contact: on the paper, under a rule */
body:not(#_) .reach{background:var(--bg)!important;border-radius:0;border-top:1px solid var(--ink)}
body:not(#_) .r-item{background:none;box-shadow:none;border-radius:0;border-bottom:1px solid var(--rule);padding-left:0}
body:not(#_) .r-item:first-child{border-top:1px solid var(--rule)}
body:not(#_) .r-copy{border-radius:2px}
/* case studies: the coloured panels become ruled text on the paper */
body:not(#_) .case :is(.case-row > .panel,.case-body > .panel,.side-row > .panel,.did-card,.stats div,.tile-s,.brief li,.cq,.g-group,.theme .cat-panel){background:transparent!important;color:var(--ink)!important;border-radius:0!important;box-shadow:none!important;border:0!important;border-top:1px solid var(--ink)!important}
body:not(#_) .case :is(.case-row > .panel,.case-body > .panel,.side-row > .panel){padding-inline:0!important}
body:not(#_) .case .roles span{background:none!important;box-shadow:inset 0 0 0 1px var(--rule)!important;border-radius:2px}
body:not(#_) .back-pill{border-radius:2px;box-shadow:inset 0 0 0 1px var(--rule)!important;background:none!important}
body:not(#_) .case .next{background:transparent!important;border-radius:0!important;box-shadow:none!important;border-top:1px solid var(--ink)!important;color:var(--ink)!important}
body:not(#_) .case .next .go{border-radius:2px}
body:not(#_) .case .ctabs{background:none;border-radius:0;padding:0;box-shadow:inset 0 -1px 0 var(--rule)}
body:not(#_) .case .ct-ind{border-radius:0;background:var(--ink);box-shadow:none}
body:not(#_) .case .case-card .tile-top .num{background:var(--ink);color:var(--bg);border-radius:2px}
/* phones: the hero is only as tall as its text, no empty screen above the headline */
@media (max-width:820px){body:not(#_) .hero{min-height:0;padding-top:120px;padding-bottom:56px}}
/* CV dates as plain monospace labels rather than coloured pills */
body:not(#_) .pf-w{background:none!important;padding:0!important;border-radius:0!important;color:var(--muted)}
/* each page has a single numbered section, so the running number is dropped */
body:not(#_) :is(.work,.exp) .h2::before{content:none}
/* the Parliament postcard is cream on cream: a faint frame keeps it apart from the page */
body:not(#_) .card[href$="european-parliament.html"] .card-img{position:relative}
body:not(#_) .card[href$="european-parliament.html"] .card-img::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(27,30,69,.18);pointer-events:none}
/* contact band on every page: a soft wash in the hero lava colours (peach, pink, lavender, a touch of mint) */
body:not(#_) .reach{background:
  radial-gradient(60% 90% at 0% 100%,rgba(207,233,218,.85),transparent 70%),
  radial-gradient(55% 80% at 100% 0%,rgba(255,208,189,.9),transparent 70%),
  linear-gradient(120deg,#f6dde4 0%,#ecdcf4 45%,#dfe2fb 100%)!important;border-top:0}
:root[data-theme="dark"] body:not(#_) .reach{background:linear-gradient(120deg,#2a2346 0%,#262c66 60%,#1f2a4a 100%)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body:not(#_) .reach{background:linear-gradient(120deg,#2a2346 0%,#262c66 60%,#1f2a4a 100%)!important}}
body:not(#_) .reach .r-item{border-color:rgba(27,30,69,.18)}
/* a smaller contact band */
body:not(#_) .reach{padding-top:clamp(40px,5vw,64px);margin-top:clamp(24px,3vw,40px)}
body:not(#_) .reach .cta{font-size:clamp(2rem,1.3rem + 2vw,3rem)!important}
body:not(#_) .reach .r-wrap{margin-top:clamp(18px,2.4vw,28px)}
body:not(#_) .reach .r-item{padding-block:.55rem}
body:not(#_) .reach .pfoot-w{margin-top:clamp(28px,4vw,44px)}
body:not(#_) .reach .pfoot{padding:1.1rem 0 1.3rem}
/* the plain footer of the projects and about pages */
.pfoot-plain{max-width:1320px;margin:clamp(40px,6vw,80px) auto 0;padding:0 var(--g)}
.pfoot-plain .pfoot{display:flex;justify-content:space-between;gap:1rem;padding:1.3rem 0 1.6rem;border-top:1px solid var(--ink);font-size:.7rem}
.pfoot-plain a{color:inherit;text-decoration:none}
/* dark theme: the case-study blocks had navy text meant for their old pastel boxes; on the dark paper they take the page's ink */
:root[data-theme="dark"] .case :is(.brief li,.case-body > .panel,.side-row > .panel,.case-body > .panel h2,.side-row > .panel h2,.case-row > .panel .facts dt,.ct-empty p,.did li,.did-pts li,.did-card span,.did-card,.did-card > b,.did-col h3,.g-label,.next .label,.note,.stats div,.stats-note,.case-row > .panel,.next){color:var(--ink)!important}
:root[data-theme="dark"] .case :is(.case-row > .panel .facts dt,.g-label,.next .label,.stats-note,.note){color:var(--muted)!important}