/* ============================================================================
   Mockup 03 "Signature": inner pages and the shared blocks (the founding
   story, footprint lists, news rows, forms). Uses the tokens and the
   kind-of-help classes (.m-*) declared in styles.css. Square for what you
   look at, round for what you press.
   ========================================================================== */

/* ------------------------------------------------------- page header --- */
.pg-h{padding:clamp(28px,3.8vw,52px) 0 clamp(36px,4.6vw,64px);border-bottom:1px solid var(--rule)}
.pg-h h1{font-size:clamp(40px,5.6vw,76px);font-weight:800;letter-spacing:-.04em;line-height:.98;max-width:18ch}
.pg-h__p{margin:22px 0 0;max-width:60ch;font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--ink-2)}
.pg-h__p em{font-style:italic}
.pg-h .acts{margin-top:28px}
/* a page about one kind of help wears its colour */
.pg-h--m{background:var(--m);color:var(--on);border-bottom:0}
.pg-h--m .pg-h__p,.pg-h--m .crumb,.pg-h--m .crumb a{color:var(--on)}
.pg-h--m .crumb i{color:var(--on)}
.pg-h--m :focus-visible{outline-color:var(--on)}
.narrow{max-width:860px}
.crumb{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0 0 20px;font-size:15px;color:var(--ink-2)}
.crumb a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.crumb a:hover{text-decoration-thickness:2px}
.crumb i{font-style:normal;color:var(--ink-3)}

/* --------------------------------------------------------- structure --- */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.two--wide{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.two--port{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
.prose p{margin:0 0 1.05em;font-size:18px;line-height:1.7;color:var(--ink-2);max-width:64ch}
.prose>p:last-child,.prose>div:last-child>p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:700}
.prose em{font-style:italic}
.prose h2{font-size:clamp(28px,3vw,38px);font-weight:800;letter-spacing:-.025em;margin:0 0 18px}
.prose h3{font-size:23px;margin:28px 0 10px}
.prose a{color:var(--ink);font-weight:700;text-underline-offset:3px}
.sh .prose{margin-top:18px}

.fig{margin:0}
.fig img{width:100%;object-fit:cover;background:var(--stone-2)}
.fig--32 img{aspect-ratio:3/2}
.fig--43 img{aspect-ratio:4/3}
.fig figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--ink-3)}

.pull{margin:30px 0 0;padding:20px 0 0;border-top:2px solid var(--ink);font-size:clamp(22px,2.2vw,28px);line-height:1.3;
      font-weight:700;letter-spacing:-.02em;color:var(--ink)}

/* a plain related list, hairlines between */
.rel{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.rel li{padding:18px 0;border-bottom:1px solid var(--rule)}
.rel>li>a,.rel h3{font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--ink);text-decoration:none;margin:0}
.rel>li>a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.rel p,.sh .rel p{margin:6px 0 0;font-size:16px;line-height:1.6;color:var(--ink-2)}
.rel p a{color:var(--ink);font-weight:700}
.sh .rel{margin-top:24px}
.sh .more{margin:22px 0 0}
.stand{margin:18px 0 0;max-width:46ch;font-size:clamp(20px,2vw,24px);line-height:1.45;color:var(--ink-2)}
.sh .stand{margin-top:18px}

.small{font-size:15px;line-height:1.6;color:var(--ink-2)}
.small a{color:var(--ink);font-weight:700}

/* information labels: a story's kind of help, category and date */
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 8px;font-size:14px;color:var(--ink-2)}
.meta b{color:var(--ink);font-weight:700}
.meta .key{width:11px;height:11px}

/* ------------------------------------------------------- pill tabs ---- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.tabs button{min-height:44px;padding:8px 18px;border:1.5px solid var(--line);border-radius:var(--pill);background:var(--paper);
             font-size:15px;font-weight:700;color:var(--ink);transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.tabs button:hover{border-color:var(--ink)}
.tabs button.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.tabs__n{margin:14px 0 0;font-size:15px;color:var(--ink-2)}

/* ------------------------------------------------------------- news ---- */
.nw-lead{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);
         align-items:start;margin:0 0 clamp(40px,5vw,64px)}
.nw-lead[hidden]{display:none}
.nw-lead__img{display:block}
.nw-lead__img img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--stone-2)}
.nw-lead h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.06;margin:4px 0 16px}
.nw-lead h2 a{text-decoration:none}
.nw-lead h2 a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.nw-lead p{font-size:18px;line-height:1.65;color:var(--ink-2)}

.nw-rows{list-style:none;margin:20px 0 0;padding:0;border-top:2px solid var(--ink)}
.nw-row{border-bottom:1px solid var(--rule)}
.nw-row.is-off{display:none}
.nw-row a{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(18px,3vw,36px);padding:24px 0;
          text-decoration:none;align-items:start}
.nw-row img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--stone-2)}
.nw-row h3{font-size:clamp(20px,2.1vw,25px);font-weight:700;letter-spacing:-.015em;line-height:1.22;margin:2px 0 8px}
.nw-row a:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.nw-row p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.nw-rows--top{margin-top:0}

/* ---------------------------------------------------------- article ---- */
.art{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,270px);gap:clamp(30px,5vw,80px);align-items:start}
.art__main{max-width:70ch;min-width:0}
.art h1{font-size:clamp(34px,4.4vw,56px);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:8px 0 0}
.art__stand{margin:20px 0 0;font-size:clamp(19px,1.8vw,22px);line-height:1.5;color:var(--ink-2)}
.art__fig{margin:32px 0 34px}
.art__fig img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--stone-2)}
.art__body p{margin:0 0 1.15em;font-size:18px;line-height:1.75;color:var(--ink-2)}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:36px;padding-top:18px;
       border-top:2px solid var(--ink);font-size:16px}
.share span{color:var(--ink-2)}
.share a,.share button{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--ink);
                       text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
.share a:hover,.share button:hover{text-decoration-thickness:2px}
.side{position:sticky;top:calc(var(--top-h) + 24px)}
.side h2{font-size:20px;font-weight:800;margin:0 0 4px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.side ul{list-style:none;margin:0;padding:0}
.side li{border-bottom:1px solid var(--rule)}
.side a{display:block;padding:14px 0;text-decoration:none}
.side a b{display:block;font-size:16px;font-weight:700;line-height:1.35;color:var(--ink)}
.side a span{display:block;margin-top:3px;font-size:14px;color:var(--ink-2)}
.side a:hover b{text-decoration:underline;text-underline-offset:3px}

.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:clamp(36px,4.4vw,56px);
       padding-top:18px;border-top:2px solid var(--ink)}
.art .pager{grid-column:1/-1}
.pager a{text-decoration:none}
.pager span{display:block;font-size:14px;color:var(--ink-2);margin-bottom:4px}
.pager b{display:block;font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.pager a:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pager__n{text-align:right}

/* ---------------------------------------------------------- gallery ---- */
.gl{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,2.6vw,34px) clamp(12px,1.6vw,20px);
    margin-top:clamp(24px,3vw,34px)}
.gl__f{margin:0;grid-column:span 4;min-width:0}
.gl__f.is-off{display:none}
.gl__f.w7{grid-column:span 7}
.gl__f.w5{grid-column:span 5}
.gl__b{display:block;width:100%;padding:0;border:0;background:var(--stone-2);cursor:zoom-in}
.gl__b img{width:100%;height:clamp(200px,24vw,330px);object-fit:cover}
.gl__f.w4 .gl__b img{height:clamp(170px,18vw,250px)}
.gl__f figcaption{margin-top:10px;font-size:15px;line-height:1.45;color:var(--ink)}
.gl__f figcaption span{display:block;color:var(--ink-2);font-size:14px;margin-top:2px}

.sg-lbx{position:fixed;inset:0;z-index:400;background:rgba(14,20,17,.95);display:grid;overscroll-behavior:contain;
        grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:5vh 3vw}
.sg-lbx[hidden]{display:none}
.sg-lbx__f{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.sg-lbx__f img{max-width:100%;max-height:78vh;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.sg-lbx__f figcaption{color:#e4e9e6;font-size:15px;text-align:center;max-width:62ch}
.sg-lbx__x{position:absolute;top:14px;right:18px;width:48px;height:48px;border:2px solid #fff;border-radius:var(--pill);
           background:none;color:#fff;font-size:28px;line-height:1}
.sg-lbx__p,.sg-lbx__n{width:52px;height:52px;border:2px solid rgba(255,255,255,.6);background:none;color:#fff;
                      font-size:26px;line-height:1;border-radius:var(--pill);transition:border-color .2s var(--ease)}
.sg-lbx__p:hover,.sg-lbx__n:hover{border-color:#fff}
.sg-lbx :focus-visible{outline-color:#fff}

/* ----------------------------------------------------------- awards ---- */
.aw{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.aw li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:clamp(20px,3.6vw,56px);
       padding:clamp(26px,3vw,36px) 0;border-bottom:1px solid var(--rule)}
.aw__y{font-size:clamp(30px,3vw,40px);font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:lining-nums}
.aw h3{font-size:clamp(21px,2.1vw,26px);font-weight:700;line-height:1.25;margin:0 0 6px}
.aw__by{margin:0 0 10px;font-size:16px;font-weight:700;color:var(--ink-2)}
.aw p:last-child{margin:0;font-size:17px;line-height:1.7;color:var(--ink-2);max-width:72ch}

/* ------------------------------------------------- office directory ---- */
.dirbar{display:flex;justify-content:space-between;align-items:center;gap:14px 28px;flex-wrap:wrap}
.dirbar .tabs{flex:1}
.find{min-width:min(340px,100%)}
.find input{width:100%;min-height:48px;border:1.5px solid var(--line);background:var(--paper);padding:10px 14px;
            font-size:16px;color:var(--ink);outline:none}
.find input:focus-visible{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.find input::placeholder{color:var(--ink-3)}
.dir__n{margin:18px 0 30px;font-size:16px;color:var(--ink-2)}
.dir{display:grid;gap:clamp(32px,3.6vw,48px)}
.ctry h3{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0 0 4px;
         padding-bottom:10px;border-bottom:2px solid var(--ink);font-size:clamp(21px,2.2vw,26px);font-weight:800}
.ctry h3 span{font-size:15px;font-weight:400;color:var(--ink-2);white-space:nowrap}
.offs{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(26px,4vw,56px)}
.off{break-inside:avoid;padding:13px 0;border-bottom:1px solid var(--rule-2)}
.off b{display:block;font-size:16px;font-weight:700;line-height:1.4;color:var(--ink)}
.off>span{display:block;font-size:15px;line-height:1.55;color:var(--ink-2);margin-top:2px}
.off>.off__l{display:flex;flex-wrap:wrap;gap:2px 16px;margin-top:6px;font-size:15px}
.off__l span{color:var(--ink-2)}
.off__l a{color:var(--ink);font-weight:700}
.ctry__more{margin:12px 0 0;font-size:15px;color:var(--ink-2)}
.ctry__more a{color:var(--ink);font-weight:700}
.none{padding:40px 0;color:var(--ink-2);font-size:17px}

/* ------------------------------------------- footprints, in full ------- */
.fpl{border-top:2px solid var(--ink)}
.fpl__r{display:grid;grid-template-columns:72px minmax(0,240px) minmax(0,1fr);gap:clamp(18px,3vw,48px);
        padding:clamp(28px,3.2vw,40px) 0;border-bottom:1px solid var(--rule);align-items:start}
.fpl__tile{display:grid;place-items:center;width:72px;height:72px;background:var(--m)}
.fpl__tile .ico{width:44px;height:44px}
.fpl__r h2{font-size:clamp(23px,2.3vw,28px);font-weight:800;letter-spacing:-.02em;margin:4px 0 6px}
.fpl__tag{margin:0;font-size:16px;color:var(--ink-2)}
.fpl__x{margin:0;font-size:17px;line-height:1.75;color:var(--ink-2);max-width:68ch}
.fpl__q{margin:16px 0 0;font-size:21px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.fpl__go{margin:16px 0 0}

/* ------------------------------------------------- year lists ---------- */
.yr{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.yr li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:clamp(18px,3vw,44px);padding:18px 0;
       border-bottom:1px solid var(--rule);align-items:baseline}
.yr__y{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.yr p{margin:0;font-size:17px;line-height:1.7;color:var(--ink-2);max-width:68ch}
.yr strong{display:block;font-size:18px;font-weight:700;color:var(--ink)}
.yr span span{display:block;font-size:16px;color:var(--ink-2)}
.yr--two{columns:2;column-gap:clamp(28px,4vw,64px);border-top:0}
.yr--two li{break-inside:avoid;border-top:0}
.yr--two li:first-child{border-top:2px solid var(--ink)}
.yr--two{column-rule:0}

/* --------------------------------------------------- numbered steps ---- */
.nsteps{list-style:none;margin:0;padding:0;counter-reset:n;border-top:2px solid var(--ink)}
.nsteps li{counter-increment:n;display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding:24px 0;
           border-bottom:1px solid var(--rule)}
.nsteps li::before{content:counter(n);display:grid;place-items:center;width:40px;height:40px;border-radius:var(--pill);
                   background:var(--ink);color:#fff;font-size:18px;font-weight:800}
.nsteps h3{font-size:22px;font-weight:700;margin:6px 0 6px}
.nsteps p{margin:0;font-size:17px;line-height:1.7;color:var(--ink-2);max-width:66ch}

/* ------------------------------------------------------------- form ---- */
.sg-formwrap{background:var(--paper);border:2px solid var(--ink);padding:clamp(22px,3vw,40px)}
.sg-fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sg-f{display:block;min-width:0}
.sg-f--wide{grid-column:1/-1;margin-top:22px}
.sg-f>span{display:block;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:6px}
.sg-f>span i,.sg-fs legend i,.sg-consent i{color:var(--err);font-style:normal}
.sg-f input,.sg-f select,.sg-f textarea{width:100%;min-height:48px;border:1.5px solid var(--line);background-color:var(--paper);
  color:var(--ink);padding:11px 13px;font-size:16px;outline:none;border-radius:0}
.sg-f textarea{resize:vertical;min-height:110px}
.sg-f input:focus-visible,.sg-f select:focus-visible,.sg-f textarea:focus-visible{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.sg-f em{display:block;font-style:normal;font-size:15px;color:var(--err);margin-top:6px}
.sg-f.is-bad input,.sg-f.is-bad select,.sg-f.is-bad textarea{border-color:var(--err);box-shadow:0 0 0 1.5px var(--err)}
.sg-fs{border:0;padding:0;margin:28px 0 0;min-width:0}
.sg-fs legend{padding:0;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:10px}
.sg-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sg-opt{display:flex;gap:12px;align-items:center;min-height:52px;padding:10px 14px;border:1.5px solid var(--line);
        cursor:pointer;font-size:16px;line-height:1.45;color:var(--ink);background:var(--paper);
        transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.sg-opt:hover{border-color:var(--ink)}
.sg-opt:has(input:checked){border-color:var(--ink);background:var(--stone)}
.sg-opt input{margin:0;width:20px;height:20px;flex:0 0 20px;accent-color:var(--ink)}
.sg-err{display:block;font-style:normal;font-size:15px;color:var(--err);margin-top:8px}
.sg-fs.is-bad .sg-opt{border-color:var(--err)}
.sg-consent{display:flex;gap:12px;align-items:flex-start;margin-top:24px;font-size:16px;line-height:1.6;color:var(--ink-2);cursor:pointer}
.sg-consent input{margin:3px 0 0;width:20px;height:20px;flex:0 0 20px;accent-color:var(--ink)}
.sg-consent a{color:var(--ink);font-weight:700}
.sg-ffoot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--rule)}
.sg-fnote{margin:0;font-size:15px;color:var(--ink-2);max-width:44ch}
.sg-thanks{padding:clamp(8px,2vw,20px) 0}
.sg-thanks h3{font-size:clamp(26px,2.8vw,34px);font-weight:800;margin:0 0 12px}
.sg-thanks p{margin:0 0 20px;max-width:56ch;font-size:17px;line-height:1.7;color:var(--ink-2)}

/* --------------------------------------------- one footprint ---------- */
.mn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.mn--nofig{grid-template-columns:120px minmax(0,1fr)}
.mn__tile{display:grid;place-items:center;width:120px;height:120px;background:var(--m)}
.mn__tile .ico{width:72px;height:72px}
.mn .prose p{font-size:18.5px}
.mn-idx{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
        column-gap:clamp(26px,4vw,60px);border-top:2px solid var(--ink)}
.mn-idx li{border-bottom:1px solid var(--rule)}
.mn-idx a,.mn-idx .is-here{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;
                           padding:14px 0;text-decoration:none}
.mn-idx__tile{display:grid;place-items:center;width:44px;height:44px;background:var(--m)}
.mn-idx__tile .ico{width:28px;height:28px}
.mn-idx b{display:block;font-size:18px;font-weight:700;color:var(--ink)}
.mn-idx span span{display:block;font-size:15px;color:var(--ink-2)}
.mn-idx a:hover b{text-decoration:underline;text-underline-offset:3px}
.mn-idx .is-here{box-shadow:inset 4px 0 0 var(--ink);padding-left:14px}

/* ------------------------------------------------- one region --------- */
.rg__fig{display:flex;flex-wrap:wrap;gap:12px 40px;margin:0 0 22px;font-size:18px;color:var(--ink-2)}
.rg__fig b{display:block;font-size:clamp(44px,5vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink);
           font-variant-numeric:lining-nums proportional-nums}
.gz{columns:2;column-gap:clamp(30px,4vw,60px)}
.gz__c{break-inside:avoid;margin:0 0 32px}
.gz__c h3{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px;
          padding-bottom:8px;border-bottom:2px solid var(--ink);font-size:21px;font-weight:800}
.gz__c h3 span{font-size:15px;font-weight:400;color:var(--ink-2)}
.gz__c ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gz__c li{font-size:16px;line-height:1.5}
.gz__c li b{display:block;font-weight:700;color:var(--ink)}
.gz__c li span{display:block;color:var(--ink-2);font-size:15px}
.gz__c li a{color:var(--ink);font-size:15px;font-weight:700}
.gz__more{margin:10px 0 0;font-size:15px;color:var(--ink-2)}
.rglinks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 32px}
.rglinks a{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink);text-underline-offset:4px}
.rglinks a:hover{text-decoration-thickness:2px}
.rglinks span{font-size:15px;font-weight:400;color:var(--ink-2);margin-left:8px}

/* ------------------------------------------------------------ videos --- */
.vd-lead{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(22px,3.6vw,52px);
         align-items:start;margin:clamp(28px,3vw,40px) 0 clamp(30px,3.4vw,44px);text-decoration:none}
.vd-lead img,.vd-row img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--stone-2)}
.vd-lead h2{font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.025em;margin:0 0 12px}
.vd-lead:hover h2,.vd-row a:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.vd-lead p,.vd-row p{margin:0 0 10px;font-size:17px;line-height:1.65;color:var(--ink-2)}
.vd-lead.is-off{display:none}
.vd-rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.vd-row{border-bottom:1px solid var(--rule)}
.vd-row.is-off{display:none}
.vd-row a{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(18px,3vw,36px);padding:22px 0;
          text-decoration:none;align-items:start}
.vd-row h3{font-size:22px;font-weight:700;margin:0 0 6px}
.watch{font-size:15px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------- aphorisms -- */
.aphl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
      column-gap:clamp(30px,4vw,64px);border-top:2px solid var(--ink)}
.aphl li{padding:22px 0 24px;border-bottom:1px solid var(--rule)}
.aphl p{margin:0;font-size:clamp(20px,1.9vw,24px);line-height:1.38;font-weight:700;letter-spacing:-.015em;color:var(--ink)}

/* ---------------------------------------------- photo-with-text rows --- */
.pt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4.5vw,72px);align-items:center;
    padding:clamp(32px,4vw,56px) 0;border-bottom:1px solid var(--rule)}
.pt:first-child{border-top:2px solid var(--ink)}
.pt--flip .pt__fig{order:2}
.pt__fig{margin:0}
.pt__fig img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--stone-2)}
.pt__fig figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--ink-3)}
.pt h2{font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-.03em;margin:0 0 12px}
.pt p{font-size:17px;line-height:1.7;color:var(--ink-2);max-width:52ch}

/* ------------------------------------------------------------ careers -- */
/* the roles: a row each, the role, the mission it serves (its colour), what you would do,
   and Apply by email; on a desktop, cards with a rule on top in that colour (the user,
   2026-10-07), four across, two on a narrower screen, each with its Apply at its foot */
.jobs-h{text-wrap:balance}
.jobs__lede{max-width:60ch;margin:12px 0 0;font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--ink-2)}
.jobs{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.job{display:grid;gap:6px;padding:20px 0 22px;border-bottom:1px solid var(--rule)}
.job__t{margin:0;font-size:clamp(20px,1.7vw,23px);font-weight:800;letter-spacing:-.015em;line-height:1.2;
        overflow-wrap:anywhere;text-wrap:balance}
.job__d{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:700;line-height:1.3}
.job__x{max-width:52ch;margin:2px 0 0;font-size:16px;line-height:1.5;color:var(--ink-2)}
.job__go{justify-self:start;min-height:44px;margin-top:10px;padding:8px 22px}
@media (max-width:640px){
  .job__go{justify-self:stretch}     /* a wide target for a thumb */
}
@media (min-width:900px){
  .jobs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;border-top:0}
  .job{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:22px 24px 26px;
       background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--m)}
  .job__x{margin-bottom:12px}
  .job__go{margin-top:auto}
}
@media (min-width:900px) and (max-width:1120px){
  .jobs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.areas{margin:0;padding:0;border-top:2px solid var(--ink)}
.areas div{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(16px,3vw,44px);
           padding:18px 0;border-bottom:1px solid var(--rule)}
.areas dt{font-size:21px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.areas dd{margin:0;font-size:17px;line-height:1.65;color:var(--ink-2)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.8vw,36px);margin-top:clamp(28px,3.4vw,44px)}
.pair .fig img{aspect-ratio:4/3}

/* ------------------------------------------------------------ figures -- */
.figs{margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.figs div{padding:22px 22px 24px 0;border-bottom:1px solid var(--rule)}
.figs dt{font-size:clamp(36px,3.8vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink);
         font-variant-numeric:lining-nums proportional-nums}
.figs dd{margin:12px 0 0;font-size:16px;line-height:1.5;color:var(--ink-2)}
.figs dd b{display:block;color:var(--ink);font-weight:700}
.regl{list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding:0;border-top:2px solid var(--ink)}
.regl li{border-bottom:1px solid var(--rule)}
.regl a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 0;text-decoration:none}
.regl b{font-size:21px;font-weight:800;letter-spacing:-.015em}
.regl span{font-size:16px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.regl a:hover b{text-decoration:underline;text-underline-offset:4px}

/* ===================================================== founding story ==
   Dated chapters: the year large, the place under it, the archive
   photograph with its caption and credit. */
.story{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.bt{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr) minmax(0,.95fr);gap:clamp(20px,3vw,52px);
    padding:clamp(30px,3.6vw,48px) 0;border-bottom:1px solid var(--rule);align-items:start}
.bt--nofig .bt__body{grid-column:2 / -1;max-width:68ch}
.bt__y{display:block;font-size:clamp(44px,4.6vw,64px);font-weight:800;letter-spacing:-.045em;line-height:.9;
       font-variant-numeric:lining-nums proportional-nums}
.bt__pl{display:block;margin-top:10px;font-size:15px;line-height:1.4;color:var(--ink-2)}
.bt__body h3{font-size:clamp(23px,2.3vw,30px);font-weight:800;letter-spacing:-.025em;line-height:1.15;margin:4px 0 12px}
.bt__body p{margin:0;font-size:17.5px;line-height:1.7;color:var(--ink-2)}
.bt__body em{font-style:italic}
.bt__fig{margin:0}
.bt__fig img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--stone-2)}
.bt__fig figcaption{margin-top:10px;font-size:14px;line-height:1.55;color:var(--ink-3)}
.story__close{margin:0;padding:clamp(26px,3vw,36px) 0 0;max-width:60ch;font-size:clamp(20px,2vw,24px);line-height:1.5;
              font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.story__go{margin:0;padding:24px 0 0;font-size:17px}

/* the short version */
.brief{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.brief li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:clamp(16px,2.4vw,36px);padding:22px 0;
          border-bottom:1px solid var(--rule)}
.brief b{font-size:clamp(30px,3vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:lining-nums}
.brief h3{font-size:22px;font-weight:700;margin:2px 0 6px}
.brief p{margin:0;font-size:17px;line-height:1.68;color:var(--ink-2)}
.brief__go{margin:24px 0 0}

/* the portrait */
.port{margin:0}
.port img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--stone-2)}
.port figcaption{margin-top:10px;font-size:14px;line-height:1.55;color:var(--ink-3)}

/* ======================================================= responsive ==== */
@media (max-width:1120px){
  .art{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
  .side ul{columns:2;column-gap:36px}
  .side li{break-inside:avoid}
  .fpl__r{grid-template-columns:72px minmax(0,1fr);row-gap:14px}
  .fpl__r>div:last-child{grid-column:1 / -1}
  .offs{columns:1}
}
@media (max-width:900px){
  .two,.two--wide,.two--port,.nw-lead,.mn,.pt,.vd-lead{grid-template-columns:minmax(0,1fr)}
  .pt--flip .pt__fig{order:0}
  .gz,.aphl,.mn-idx{columns:1;grid-template-columns:minmax(0,1fr)}
  .yr--two{columns:1}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gl__f,.gl__f.w7,.gl__f.w5,.gl__f.w4{grid-column:span 6}
  .gl__b img,.gl__f.w4 .gl__b img{height:auto;aspect-ratio:4/3}
  .bt{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px 28px;padding:28px 0}
  .bt__rail{grid-column:1 / -1;display:flex;align-items:baseline;gap:14px}
  .bt--nofig .bt__body{grid-column:1 / -1}
  .bt__y{font-size:40px}
  .bt__pl{margin-top:0}
  .two--port .port{max-width:340px}
  .dirbar{flex-direction:column;align-items:stretch}
  .find{min-width:0}
}
@media (max-width:640px){
  .gl__f,.gl__f.w7,.gl__f.w5,.gl__f.w4{grid-column:1 / -1}
  .bt{grid-template-columns:minmax(0,1fr)}
  .nw-row a,.vd-row a{grid-template-columns:112px minmax(0,1fr);gap:14px}
  .nw-row p{display:none}
  .sg-fgrid,.sg-opts{grid-template-columns:minmax(0,1fr)}
  .side ul{columns:1}
  .pager{grid-template-columns:minmax(0,1fr)}
  .pager__n{text-align:left}
  .sg-lbx{grid-template-columns:minmax(0,1fr);padding:9vh 5vw}
  .sg-lbx__p,.sg-lbx__n{position:fixed;bottom:20px}
  .sg-lbx__p{left:24%}
  .sg-lbx__n{right:24%}
  .sg-ffoot{flex-direction:column;align-items:stretch}
  .sg-ffoot .solid{width:100%}
  .aw li,.yr li{grid-template-columns:minmax(0,1fr);gap:4px}
  .areas div{grid-template-columns:minmax(0,1fr);gap:4px}
  .brief li{grid-template-columns:76px minmax(0,1fr);gap:14px}
  .figs{grid-template-columns:minmax(0,1fr)}
  .figs div{padding-right:0}
  .pair{grid-template-columns:minmax(0,1fr)}
  .fpl__r{grid-template-columns:56px minmax(0,1fr)}
  .fpl__tile{width:56px;height:56px}
  .fpl__tile .ico{width:36px;height:36px}
  .mn--nofig{grid-template-columns:minmax(0,1fr)}
}

/* a heading that names a kind of help carries its key */
.h-key{display:flex;align-items:center;gap:14px}
.h-key .key{width:.5em;height:.5em}

/* buttons on a coloured header: the filled one takes the tile's text colour */
.pg-h--m .solid{background:var(--on);border-color:var(--on);color:var(--m)}
.pg-h--m .solid:hover{background:var(--on);border-color:var(--on);text-decoration:underline;text-underline-offset:3px}
.pg-h--m .line{border-color:var(--on);color:var(--on)}
.pg-h--m .line:hover{background:rgba(255,255,255,.12)}
.pg-h--m.m-education .line:hover{background:rgba(23,32,27,.08)}

/* ------------------------------------------------------------ phones ----
   Long lists fold or run sideways, so a phone page stays a page. */
@media (max-width:640px){
  /* pill rows scroll sideways in one line; contain keeps the row from widening the page */
  .tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;contain:inline-size;
        margin:-6px calc(-1 * var(--gut));padding:6px var(--gut)}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:none;white-space:nowrap}
  /* the gallery two across, with short captions */
  .gl{gap:22px 12px}
  .gl__f,.gl__f.w7,.gl__f.w5,.gl__f.w4{grid-column:span 6}
  .gl__f figcaption{margin-top:8px;font-size:14px}
  .gl__f figcaption span{display:none}
  /* each country a row that opens */
  .dir--folded{gap:0}
  .ctry.is-folded h3{margin:0;padding:0;border-bottom:1px solid var(--rule)}
  .ctry.is-folded:not(.is-shut) h3{border-bottom:2px solid var(--ink)}
  .ctry.is-folded:not(.is-shut){padding-bottom:28px}
  .ctry__t{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:60px;margin:0;padding:0;
           border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
  .ctry__t span{display:inline-flex;align-items:center;gap:12px}
  .ctry__t span::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
                       transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease)}
  .ctry.is-folded:not(.is-shut) .ctry__t span::after{transform:translateY(1px) rotate(-135deg)}
  .ctry__t:focus-visible{outline-offset:-3px}
  .ctry.is-shut .offs,.ctry.is-shut .ctry__more{display:none}
}