/* Editorial layer (company.html, projects.html, knowledge.html): the corporate identity statement, the journal,
   exhibitions, client references and the Knowledge reading layout. Same tokens and type families as the rest of the
   site (Archivo for display, IBM Plex Sans for reading, IBM Plex Mono for technical labels); no new ornaments. */

/* ---------- shared: the journal's meta line (category · date) ---------- */
.jr-m{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0;font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.jr-m span{color:var(--co-t)}

/* ---------- Company: identity and capabilities ---------- */
.co-anchor{position:relative;top:calc(-1 * var(--hdr))}
.co-id-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px clamp(40px,6vw,96px);align-items:end;margin-bottom:clamp(48px,6vw,80px)}
.co-id-k{margin:0 0 22px;font:500 14px/1.35 var(--sans);color:var(--ink-2)}
.co-id-k b{font-weight:600;color:var(--co-t)}
.co-id-h{margin:0;font:600 clamp(40px,5.2vw,76px)/1 var(--disp);letter-spacing:-.03em;color:var(--ink);max-width:13ch;text-wrap:balance}
.co-id-tx p{margin:0;font-size:16.5px;line-height:1.65;color:var(--ink-2);max-width:56ch}
.co-id-tx p+p{margin-top:14px}
.co-id-tx .co-id-lead{font-size:clamp(18px,1.45vw,20.5px);line-height:1.55;color:var(--ink)}
.co-cap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;margin:0 0 clamp(48px,6vw,80px);border-top:1px solid var(--ink)}
.co-cap>div{padding:20px 0 4px}
.co-cap dt{display:flex;align-items:baseline;gap:12px;font:600 17px/1.3 var(--sans);color:var(--ink)}
.co-cap dt span{font:500 12px/1 var(--mono);color:var(--co-t)}
.co-cap dd{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:30ch}
@media (max-width:1000px){.co-id-g{grid-template-columns:1fr}.co-cap{grid-template-columns:1fr 1fr;gap:0 24px}.co-cap>div{border-bottom:1px solid var(--line)}}
@media (max-width:560px){.co-cap{grid-template-columns:1fr}}

/* ---------- Company: the journal ("What's new at FMP") ---------- */
.jr-cats{display:flex;flex-wrap:wrap;gap:0 28px;margin:0 0 28px;border-bottom:1px solid var(--line)}
.jr-cat{position:relative;min-height:44px;padding:12px 0;border:0;background:none;font:500 14.5px/1.2 var(--sans);color:var(--ink-2);cursor:pointer}
.jr-cat span{font:500 12px var(--mono);color:var(--mute);margin-left:4px}
.jr-cat::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--co);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--e)}
.jr-cat[aria-pressed="true"]{color:var(--ink)}.jr-cat[aria-pressed="true"]::after{transform:scaleX(1)}
.jr-cat:focus-visible{outline:2px solid var(--co);outline-offset:2px}
.jr-f{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;padding-bottom:clamp(36px,4vw,56px);border-bottom:1px solid var(--ink)}
.jr-f-im{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm,10px);background:var(--sand)}
.jr-f-im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--e)}
.jr-f:hover .jr-f-im img{transform:scale(1.02)}
.jr-h{margin:14px 0 0;font:600 clamp(24px,2.2vw,32px)/1.12 var(--disp);letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.jr-f .jr-h{font-size:clamp(28px,3vw,44px);line-height:1.05;letter-spacing:-.025em}
.jr-h a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--e)}
.jr-h a:hover{background-size:100% 1px}
.jr-s{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:52ch}
.jr-more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font:500 14.5px/1.2 var(--sans);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--co);padding-bottom:3px}
.jr-more:hover{color:var(--co-t)}
.jr-more:focus-visible,.jr-h a:focus-visible{outline:2px solid var(--co);outline-offset:3px}
.jr-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px)}
.jr-list>li{padding:28px 0 32px;border-bottom:1px solid var(--line)}
.jr-list .jr-h{font-size:clamp(20px,1.6vw,23px);line-height:1.2}
.jr-list .jr-s{font-size:15px}
.jr-empty{color:var(--mute)}
@media (max-width:1000px){.jr-f{grid-template-columns:1fr}.jr-list{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.jr-list{grid-template-columns:1fr}}
/* newsletter: one quiet row under the journal, not a sidebar of calls to action */
.jr-nl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px clamp(32px,5vw,80px);align-items:end;margin-top:clamp(48px,5vw,72px);padding:28px 0 0;border-top:1px solid var(--line-2);background:none!important;color:var(--ink)!important;border-radius:0!important;box-shadow:none!important}
.jr-nl h3{margin:0;font:600 19px/1.25 var(--sans);color:var(--ink)}
.jr-nl p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:48ch}
.jr-nl .nl-who{display:flex;flex-wrap:wrap;gap:0 20px;margin:0 0 10px}
.nl-w{min-height:40px;padding:8px 0;border:0;background:none;font:500 14px/1.2 var(--sans);color:var(--mute);cursor:pointer;border-bottom:2px solid transparent}
.nl-w[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--co)}
.nl-w:focus-visible{outline:2px solid var(--co);outline-offset:2px}
.jr-nl .nl-row{display:flex;gap:10px}
.jr-nl .nl-row input{flex:1;min-width:0;min-height:48px;padding:0 14px;border:1px solid var(--line-2);border-radius:6px;background:#fff;font:400 15px var(--sans);color:var(--ink)}
.jr-nl .nl-row input:focus-visible{outline:2px solid var(--co);outline-offset:1px}
.jr-nl .nl-ok{margin:8px 0 0;font-size:14px;color:var(--ink-2);min-height:1em}
@media (max-width:800px){.jr-nl{grid-template-columns:1fr}}

/* ---------- Company: exhibitions ---------- */
.exh-e{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px clamp(32px,5vw,72px);align-items:start}
.exh-e+.exh-e{margin-top:clamp(64px,8vw,120px)}
.exh-lead{margin:0}
.exh-open{display:block;width:100%;padding:0;border:0;background:var(--sand);border-radius:var(--r-sm,10px);overflow:hidden;cursor:zoom-in}
.exh-open img{display:block;width:100%;height:auto;transition:transform 1.2s var(--e)}
.exh-open:hover img{transform:scale(1.015)}
.exh-open:focus-visible{outline:2px solid var(--co);outline-offset:3px}
.exh-lead figcaption{margin-top:10px;font-size:13.5px;color:var(--mute)}
.exh-t{margin:14px 0 0;font:600 clamp(28px,2.8vw,40px)/1.06 var(--disp);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.exh-sum{margin:16px 0 0;font-size:16px;line-height:1.65;color:var(--ink-2);max-width:56ch}
.exh-facts{margin:24px 0 0;border-top:1px solid var(--ink)}
.exh-facts>div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.exh-facts dt{font:500 12px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.exh-facts dd{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.exh-facts a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--co)}
.exh-hl{margin:18px 0 0;padding:0 0 0 18px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.exh-hl li{margin:4px 0}
.exh-gal{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.exh-gal img{aspect-ratio:4/3;object-fit:cover}
@media (max-width:1000px){.exh-e{grid-template-columns:1fr}.exh-gal{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* phones: the gallery is a swipeable row, native scrolling */
@media (max-width:640px){.exh-gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 calc(-1 * var(--pad,20px));padding:0 var(--pad,20px);scrollbar-width:none}.exh-gal::-webkit-scrollbar{display:none}.exh-gal li{flex:0 0 72%;scroll-snap-align:start}.exh-facts>div{grid-template-columns:1fr;gap:4px}}
/* lightbox */
.exh-lb{width:min(1200px,94vw);max-width:none;max-height:94vh;padding:0;border:0;background:transparent;color:#f4efe6;overflow:visible}
.exh-lb::backdrop{background:rgba(14,12,10,.88)}
.exh-lb figure{margin:0}
.exh-lb img{display:block;max-width:100%;max-height:82vh;margin:0 auto;border-radius:6px}
.exh-lb figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:14px;color:#d8cfbf}
.exh-lb-n{font:500 12.5px var(--mono);color:#a99f8f;white-space:nowrap}
.exh-lb button{position:absolute;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.25);border-radius:4px;background:rgba(20,18,16,.6);color:#fff;font-size:16px;cursor:pointer}
.exh-lb button:hover{border-color:#fff}
.exh-lb button:focus-visible{outline:2px solid var(--co);outline-offset:2px}
.exh-lb-x{top:-54px;right:0}.exh-lb-p{top:calc(41vh - 22px);left:-56px}.exh-lb-q{top:calc(41vh - 22px);right:-56px}
@media (max-width:1100px){.exh-lb-p{left:8px}.exh-lb-q{right:8px}}
html.lb-open{overflow:hidden}

/* ---------- client references: one dataset, two treatments ---------- */
.refs-l{list-style:none;margin:0;padding:0}
/* logos in their own colours, always; hover and focus draw a thin FMP-orange rule under the mark */
.refs img{display:block;max-width:100%;max-height:44px;width:auto;height:auto;object-fit:contain}
.refs li{position:relative}
.refs li::after{content:"";position:absolute;left:50%;bottom:14px;width:28px;height:2px;margin-left:-14px;background:var(--co);transform:scaleX(0);transition:transform .35s var(--e)}
.refs li:hover::after,.refs li:focus-within::after{transform:scaleX(1)}
/* Company: a still, ruled wall */
.refs-grid .refs-l{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line-2);border-left:1px solid var(--line)}
.refs-grid li{display:grid;place-items:center;min-height:120px;padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (max-width:1000px){.refs-grid .refs-l{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.refs-grid .refs-l{grid-template-columns:repeat(2,minmax(0,1fr))}.refs-grid li{min-height:96px;padding:18px}}
/* Projects: a slow, seamless strip; pauses on hover or focus; static for reduced motion */
.pj-refs{padding-top:0}
.refs-run{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.refs-run .refs-l{display:flex;align-items:center}
.refs-run li{flex:none;display:grid;place-items:center;height:96px;padding:0 clamp(28px,3.5vw,52px)}
.refs-run:not(.is-run) .refs-l{flex-wrap:wrap;justify-content:center;padding:0 var(--pad,20px)}
.refs-track{display:flex;width:max-content;animation:refsRun calc(var(--n,10) * 4.5s) linear infinite}
.refs-run:hover .refs-track,.refs-run:focus-within .refs-track{animation-play-state:paused}
@keyframes refsRun{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.refs-track{animation:none}}

/* ---------- Knowledge: a publication you read in order ---------- */
.k-hero-g{grid-template-columns:minmax(0,1fr)}
.k-hero-g h1{max-width:18ch}
/* the section navigator: sticks under the header (or the top edge once the header slides away) */
.k-nav{position:sticky;top:var(--k-nav-y,var(--hdr));z-index:40;background:rgba(251,248,243,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:top .6s var(--e)}
.k-nav ol{list-style:none;margin:0;padding:0;display:flex;gap:0 clamp(20px,3vw,44px);overflow-x:auto;scrollbar-width:none}
.k-nav ol::-webkit-scrollbar{display:none}
.k-nav li{flex:none}
.k-nav a{position:relative;display:flex;align-items:baseline;gap:9px;min-height:52px;padding:17px 0 15px;font:500 14.5px/1.2 var(--sans);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.k-nav a span{font:500 11.5px/1 var(--mono);color:var(--mute)}
.k-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--co);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--e)}
.k-nav a:hover{color:var(--ink)}
.k-nav a[aria-current="true"]{color:var(--ink)}
.k-nav a[aria-current="true"] span{color:var(--co-t)}
.k-nav a[aria-current="true"]::after{transform:scaleX(1)}
.k-nav a:focus-visible{outline:2px solid var(--co);outline-offset:-2px}
/* anchors land below the header and the navigator */
.k-step{scroll-margin-top:calc(var(--hdr) + 52px)}
/* each section's heading column stays with its content; the next section's heading takes over */
@media (min-width:1001px){
  .k-split>div:first-child{position:sticky;top:var(--k-head-y,calc(var(--hdr) + 80px));align-self:start;transition:top .6s var(--e)}
  .k-plan-tx{position:static}
}
.k-split .d2{font-size:clamp(34px,3.4vw,52px);line-height:1.02;letter-spacing:-.025em}
.k-n{font:500 12px/1.3 var(--mono)!important;letter-spacing:.08em;text-transform:uppercase}
.k-note{font-size:15.5px;line-height:1.6}
.k-step::before{display:none}
.k-rows .kr b{font-weight:600}
@media (prefers-reduced-motion:reduce){.k-nav,.k-nav a::after{transition:none}}

/* grid children may shrink below their content's widest word (prevents the phone layout from widening) */
.k-split>*{min-width:0}
/* client references without a cleared logo: the company name, set in type (never a stand-in graphic) */
.refs .refs-n{display:block;font:600 clamp(15px,1.2vw,18px)/1.2 var(--disp);letter-spacing:-.01em;color:var(--ink-2);text-align:center;white-space:nowrap}
.refs li:hover .refs-n{color:var(--ink)}
.refs-run li{height:72px}
.refs-run .refs-n{opacity:.82}
.refs-grid li{min-height:96px}
.refs-grid .refs-n{white-space:normal;max-width:16ch}

/* white or reversed artwork ("logo_tone":"dark"): its own colours on a small graphite tile */
.refs li.is-dark img{background:var(--graphite,#141210);padding:8px 12px;border-radius:6px;max-height:60px;box-sizing:content-box}