/* PCPDF — Pacific Charter in warm institutional register */
:root{
  --paper:#f7f4ec;
  --paper-deep:#efeadd;
  --ink:#1d1d20;
  --ink-soft:#45464b;
  --ink-mute:#66676b;
  --red:#a61820;
  --red-deep:#8c1119;
  --gold:#a3812e;
  --gold-text:#7e6220;
  --gold-soft:#c9ab62;
  --paper-bright:#fbf9f4;
  --dark-text:#efece2;
  --dark-text-mute:#b9b6aa;
  --dark-text-faint:#8f8d83;
  --hair:rgba(29,29,32,.16);
  --hair-light:rgba(239,236,226,.18);
  --print-paper:#fff;
  --print-ink:#000;
  --print-ink-soft:#333;
  --hair-gold:rgba(163,129,46,.4);
  --serif:'EB Garamond',Georgia,'Songti SC','Noto Serif SC',serif;
  --sans:Archivo,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --mono:'Spline Sans Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Hidden with the clip technique, not left:-9999px: an off-screen-left box is
   counted as scrollable width by Samsung Internet (and some Chrome-Android
   builds), which lets the whole page pan sideways. Clipping in place at 0,0
   cannot add scroll width. Expands to a real button on keyboard focus. */
.skip{position:absolute;top:0;left:0;z-index:100;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;background:var(--ink);color:var(--paper-bright);font-family:var(--sans);font-size:13px}
.skip:focus{width:auto;height:auto;clip:auto;overflow:visible;padding:12px 20px}
a,button{touch-action:manipulation}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.contact :focus-visible,footer :focus-visible,.dock :focus-visible{outline-color:var(--gold-soft)}
[tabindex="-1"]:focus{outline:none}
h1,h2,h3{text-wrap:balance}
html{scroll-behavior:smooth}
/* Kills Samsung Internet's phantom sideways pan (no element actually crosses the
   viewport in Chromium; the pan is the browser's own overscroll of clipped/fixed
   content). overflow-x:clip stops it without making the root a scroll container,
   so position:sticky on .nav stays intact (overflow:hidden would break it). */
html,body{overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.65}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 48px}
@media(max-width:760px){.wrap{padding:0 22px}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(247,244,236,.975);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:14px 48px;max-width:1400px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:44px;width:auto}
.brand .t{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:.01em;line-height:1.1}
.brand .t small{display:block;font-weight:400;font-size:12px;letter-spacing:.04em;color:var(--ink-soft);margin-top:3px}
.nav-links{display:flex;gap:26px;font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.nav-links a{text-decoration:none;color:var(--ink-soft);padding:6px 0;border-bottom:1px solid transparent}
.nav-links a:hover{color:var(--ink);border-color:var(--gold)}
.nav-links a.cur{color:var(--ink);border-color:var(--red)}
.nav-right{display:flex;align-items:center;gap:22px}
.langs{font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;display:flex;gap:2px;align-items:center;color:var(--ink-mute)}
.langs a{text-decoration:none;color:var(--ink-soft);padding:0 10px;min-height:44px;min-width:44px;
  display:inline-flex;align-items:center;justify-content:center}
.langs a:hover{color:var(--ink)}
.langs .on{color:var(--red);font-weight:600}
@media(max-width:1080px){.nav-links{display:none}}
.menu{display:none;position:relative;font-family:var(--sans)}
.menu summary{list-style:none;cursor:pointer;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);min-height:44px;display:inline-flex;align-items:center;padding:0 12px;
  border:1px solid var(--hair)}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{color:var(--ink);border-color:var(--gold)}
.menu[open] summary{color:var(--ink);border-color:var(--gold)}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--paper);
  border:1px solid var(--hair);box-shadow:0 10px 30px rgba(29,29,32,.08);padding:8px 0;z-index:60}
.menu-panel a{display:block;padding:12px 22px;text-decoration:none;color:var(--ink-soft);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.menu-panel a:hover{color:var(--ink);background:var(--paper-deep)}
@media(max-width:1080px){.menu{display:block}}
/* One row on the phone, the owner's pick 2026-09-27. .nav-right stays a real box, so on /news/
   news.css's .nav-right{margin-left:auto} keeps MENU on the right and its panel on screen. */
@media(max-width:760px){.nav-in{padding:8px 22px}.brand .t small{display:none}.langs a,.menu summary{white-space:nowrap}}
/* Narrow phones show the emblem alone, as /news/ does: at 384 wide (Galaxy S24+) "pcpdf" ran under EN (2026-09-27). */
@media(max-width:480px){.brand .t{display:none}}
/* The emblem never gives up width to its neighbours: Google Translate made "中文" into "Chinese" and the row squeezed it thin (2026-09-27). */
.brand,.brand img{flex-shrink:0}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(420px,5fr) 6fr;gap:40px;align-items:center;
  padding-top:64px;padding-bottom:24px;min-height:78vh}
h1{font-weight:500;font-size:clamp(2.6rem,4.6vw,4.1rem);line-height:1.08;letter-spacing:-.005em;max-width:15ch}
h1 .em{color:var(--red)}
.hero-rule{width:64px;height:2px;background:var(--gold);margin:30px 0 26px}
.zh-line{font-family:var(--serif);font-size:15px;letter-spacing:.5em;color:var(--ink-mute);margin:-8px 0 22px}
html[lang="zh-Hans"] .zh-line{font-family:var(--sans);letter-spacing:.28em;font-size:12px;text-transform:uppercase}
html[lang="zh-Hans"] h1,html[lang="zh-Hans"] h2,html[lang="zh-Hans"] .ethos p,html[lang="zh-Hans"] .person h3{font-family:'Noto Serif SC Display','Songti SC','Noto Serif SC',serif}
/* Chinese sets tighter and breaks by character, so the Latin measure and leading do not carry over */
html[lang="zh-Hans"] h1{max-width:11em;line-height:1.32;letter-spacing:.01em;line-break:strict}
html[lang="zh-Hans"] h2{max-width:16em;line-height:1.42;line-break:strict}
html[lang="zh-Hans"] .lede,html[lang="zh-Hans"] .sect-head .side{max-width:34em;line-break:strict}
html[lang="zh-Hans"] .hero-in{min-height:62vh}
html[lang="zh-Hans"] .ethos p{max-width:20em;line-height:1.7}
.lede{font-size:19px;line-height:1.7;color:var(--ink-soft);max-width:44ch}
.cta-row{display:flex;align-items:center;gap:18px;margin-top:36px;flex-wrap:wrap}
.btn{font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:17px 30px;display:inline-flex;align-items:center;gap:10px}
.btn-red{background:var(--red);color:var(--paper-bright);border:1px solid var(--red)}
.btn-red:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn{transition:transform .15s var(--ease)}
.btn:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.btn:active{transform:scale(.98)}
.hero-note{margin-top:18px;font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--ink-mute);
  display:flex;align-items:center;gap:8px}
.hero-note svg{flex:0 0 auto}
.hero-map{position:relative}
.hero-map svg{width:100%;height:auto;display:block}
@media(max-width:980px){
  /* The first screen has to END above Safari's toolbar. At 402x874 the hero ran
     40px of head room and 36px above the button, which parked ESCRIBANOS half
     under the toolbar with the address line hidden behind it. Owner's phone,
     2026-09-24. Pulling 34px out of the two gaps lifts both clear. */
  .hero-in{grid-template-columns:1fr;min-height:0;padding-top:22px;padding-bottom:8px}
  .cta-row{margin-top:20px}
  .hero-map{margin:26px -12px 0}
}

/* map inks */
.m-grat{stroke:var(--hair);stroke-width:.6;fill:none}
.m-coast{stroke:rgba(29,29,32,.34);stroke-width:1.1;fill:none}
.m-land{fill:url(#dots)}
.m-route{stroke:var(--red);stroke-width:2.2;fill:none}
.m-port{fill:var(--red)}
.m-ring{stroke:var(--red);fill:none;stroke-width:1}
.m-label{font-family:var(--mono);font-size:13px;letter-spacing:.06em;fill:var(--ink-soft)}
.m-label.red{fill:var(--red)}
.m-label.faint{fill:rgba(29,29,32,.42)}
@media(max-width:880px){
  .m-label{font-size:15.5px}
  .m-label.faint,.m-coord{display:none}
}

/* ---------- figures (chart legend) ---------- */
.figures{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--paper)}
.fig-row{display:grid;grid-template-columns:repeat(4,1fr)}
.fig{padding:34px 30px;border-right:1px solid var(--hair)}
.fig:last-child{border-right:0}
.fig .n{font-size:clamp(1.9rem,2.8vw,2.7rem);font-weight:500;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.01em}
.fig .n small{font-size:.55em;color:var(--gold-text);font-weight:500}
.fig .l{font-family:var(--sans);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
  margin-top:9px;line-height:1.6}
.fig .src{font-family:var(--mono);font-size:12px;color:var(--ink-mute);margin-top:8px;letter-spacing:.02em;line-height:1.5}
@media(max-width:880px){
  .fig-row{grid-template-columns:1fr 1fr}
  .fig:nth-child(2){border-right:0}
  .fig:nth-child(1),.fig:nth-child(2){border-bottom:1px solid var(--hair)}
}
@media(max-width:600px){
  .fig{padding:28px 20px}
  .fig .l{letter-spacing:.06em;line-height:1.5}
}

/* ---------- sections ---------- */
section{scroll-margin-top:90px}
.sect{padding:96px 0 88px}
.sect.alt{background:var(--paper-deep)}
h2{font-weight:500;font-size:clamp(1.9rem,3vw,2.7rem);line-height:1.15;max-width:24ch}
h2 .em{color:var(--red)}
.sect-head{display:grid;grid-template-columns:minmax(280px,5fr) 6fr;gap:48px;margin-bottom:56px}
.sect-head .side{font-size:17.5px;color:var(--ink-soft);max-width:52ch;padding-top:8px}
.gold-rule{width:52px;height:2px;background:var(--gold);margin-top:22px}
@media(max-width:880px){.sect-head{grid-template-columns:1fr;gap:18px}}

/* port marks: the route's ports of call, one per section */
.port-mark{width:11px;height:11px;border-radius:50%;background:var(--red);position:relative;margin-bottom:20px}
.port-mark::before{content:"";position:absolute;inset:-6px;border:1px solid var(--red);border-radius:50%;opacity:.75}
.port-mark::after{content:"";position:absolute;left:18px;top:5px;width:64px;height:1px;background:var(--red);opacity:.55}
.contact .port-mark::after{background:var(--gold-soft)}

/* why now */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--hair)}
.why-item{padding:34px 34px 8px 0;border-top:2px solid transparent;margin-top:-1px}
.why-item+ .why-item{padding-left:34px;border-left:1px solid var(--hair)}
.why-item h3{font-weight:600;font-size:21px;margin:0 0 10px;line-height:1.3}
.why-item p{font-size:15.5px;color:var(--ink-soft);line-height:1.7;max-width:62ch}
.why-item .when{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--gold-text);display:block;margin-top:14px}
@media(max-width:880px){
  .why{grid-template-columns:1fr}
  .why-item+ .why-item{padding-left:0;border-left:0;border-top:1px solid var(--hair)}
  .why-item{padding-right:0}
}

/* provide: ledger rows, not cards */
.provide{border-top:1px solid var(--hair)}
.prov{display:grid;grid-template-columns:minmax(230px,2fr) 3fr;gap:30px;align-items:start;
  padding:30px 0;border-bottom:1px solid var(--hair)}
.prov h3{font-weight:600;font-size:22px;display:flex;align-items:center;gap:14px}
.prov h3 svg{flex:0 0 auto;stroke:var(--gold);stroke-width:1.4;fill:none}
.prov p{font-size:15.5px;color:var(--ink-soft);line-height:1.7;max-width:58ch}
@media(max-width:880px){
  .prov{grid-template-columns:1fr;gap:10px}
}

/* sectors: a set of four cells, so the section does not read as a continuation of the services ledger */
.sector-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.sec{padding:34px 34px 32px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  display:flex;flex-direction:column}
.sec h3{font-weight:600;font-size:22px;display:flex;align-items:center;gap:14px}
.sec h3 svg{flex:0 0 auto;stroke:var(--gold);stroke-width:1.4;fill:none}
.sec p{font-size:15.5px;color:var(--ink-soft);line-height:1.7;margin-top:14px;flex:1}
.sec .src{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ink-mute);
  margin-top:18px;padding-top:12px;border-top:1px solid var(--hair)}
@media(max-width:760px){.sector-grid{grid-template-columns:1fr}.sec{padding:28px 0 26px;border-right:0;border-left:0}
  .sector-grid{border-left:0}}

/* services ledger source line */
.prov .src{grid-column:2;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ink-mute);
  margin-top:12px;padding-top:10px;border-top:1px solid var(--hair);max-width:58ch}
@media(max-width:880px){.prov .src{grid-column:1;margin-top:4px}}

/* ethos */
.ethos{padding:84px 0;text-align:center;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ethos p{font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.5;max-width:34ch;margin:0 auto;font-style:italic;color:var(--ink-soft)}
.ethos p .em{font-style:normal;color:var(--red)}
.ethos-cta{margin-top:40px}
@media(max-width:1080px){.ethos-cta{display:none}} /* dock already carries the one action */

/* leadership */
/* leadership: dossier plates. The photograph dissolves into ink, the record sits under it. */
.people{display:flex;flex-wrap:wrap;justify-content:center;gap:36px}
.person{width:340px;max-width:100%;background:var(--ink);color:var(--dark-text);display:flex;flex-direction:column}
.pf{position:relative}
.pf img{width:100%;height:300px;object-fit:cover;object-position:50% 16%;display:block;
  filter:grayscale(1) contrast(1.06) brightness(.95)}
.pf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;pointer-events:none;
  background:linear-gradient(to top,var(--ink) 6%,rgba(29,29,32,.55) 46%,transparent)}
.pb{padding:0 24px 26px;margin-top:-30px;position:relative;z-index:2;flex:1;display:flex;flex-direction:column}
.person p{font-size:15px;color:var(--dark-text-mute);line-height:1.7;padding-bottom:20px;flex:1;
  border-bottom:1px solid rgba(239,236,226,.18)}
.person h3{font-weight:500;font-size:22px;color:var(--paper-bright);margin-top:18px}
.person .role{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);margin-top:6px}

/* contact */
.contact{background:var(--ink);color:var(--dark-text)}
.contact .sect-head .side{color:var(--dark-text-mute)}
.contact h2{color:var(--paper-bright)}
.em-gold{color:var(--gold-soft)}
.sig{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 0 8px}
.sig .line{width:320px;max-width:78%;border-bottom:1px solid rgba(239,236,226,.5);height:40px;margin-bottom:12px;
  position:relative}
.sig .line::before{content:"×";position:absolute;left:2px;bottom:-2px;font-family:var(--sans);font-size:19px;
  line-height:1;color:var(--red);opacity:.9}
.sig .cap{font-variant:small-caps;letter-spacing:.2em;font-size:15px;color:var(--dark-text-mute)}
.sig .btn-red{margin-top:26px}
.sig .sub{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--dark-text-mute)}

/* identity ledger: the checks a chief of staff runs */
.ident{margin-top:74px;border-top:1px solid rgba(239,236,226,.2)}
.ident-row{display:grid;grid-template-columns:minmax(190px,1fr) 3fr;gap:24px;padding:18px 0;
  border-bottom:1px solid rgba(239,236,226,.12)}
.ident dt{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dark-text-mute);padding-top:3px}
.ident dd{font-size:17px;line-height:1.6;color:var(--dark-text)}
.ident dd a{color:var(--dark-text);display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px}
.ident dd a:hover{color:var(--paper-bright)}
@media(max-width:760px){.ident-row{grid-template-columns:1fr;gap:6px}}

/* mobile dock: the one action, always reachable, as an ink pill.
   Owner picked this 2026-09-24 from two candidates shot on the Simulator.

   The red edge to edge bar is what the owner rejected: iOS Safari tints its own
   bottom toolbar with the colour behind it, so a red slab at the foot of the
   window turned the toolbar red too. This sits on the page's own ink with a
   gold hairline, keeps clear water on all four sides, and never touches the
   bottom edge, so the toolbar samples paper and stays neutral. */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:0 16px calc(16px + env(safe-area-inset-bottom));pointer-events:none;
  transform:translateY(160%);transition:transform .38s cubic-bezier(.22,1,.36,1)}
.dock.on{transform:none}
.dock a:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.dock a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  max-width:300px;margin:0 auto;pointer-events:auto;border-radius:999px;
  background:rgba(22,20,18,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--paper-bright);text-decoration:none;
  font-family:var(--sans);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--gold-soft);box-shadow:0 10px 30px rgba(20,16,12,.34)}
@media(max-width:1080px){.dock{display:block}}
@media(prefers-reduced-motion:reduce){.dock{transition:none}}

/* footer */
footer{background:var(--ink);color:var(--dark-text-faint);border-top:1px solid rgba(239,236,226,.14)}
.foot{display:flex;justify-content:space-between;gap:30px;padding:30px 48px;max-width:1400px;margin:0 auto;
  font-family:var(--sans);font-size:12px;letter-spacing:.06em;flex-wrap:wrap}
@media(max-width:1080px){.foot{padding-bottom:86px}}
.foot a{color:var(--dark-text-mute);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.foot a:hover{color:var(--paper-bright)}
.foot .zh{font-family:var(--serif)}

/* hidden until approved: sister orgs */
.sister[data-approved="false"]{display:none}

/* reveals: only under html.js, so a no-JS visitor gets the finished page, not an empty one */
html.js .rv{opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
html.js .rv.in,html.shown .rv{opacity:1;transform:none}
html.js .m-route{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 2.6s cubic-bezier(.62,0,.34,1)}
html.js .m-route.in,html.shown .m-route{stroke-dashoffset:0}
html.js #ring-a,html.js #ring-b{opacity:0;transform:scale(.4);transform-origin:center;transform-box:fill-box;
  transition:opacity .5s var(--ease),transform .55s var(--ease)}
html.js #ring-a.in,html.js #ring-b.in,html.shown #ring-a,html.shown #ring-b{opacity:.85;transform:none}
html.js #days-label{opacity:0;transition:opacity .8s var(--ease)}
html.js #days-label.in,html.shown #days-label{opacity:1}
@media(prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
  html.js .m-route{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  html.js #ring-a,html.js #ring-b{opacity:.85;transform:none;transition:none}
  html.js #days-label{opacity:1}
  html{scroll-behavior:auto}
}

.zh-line{font-size:17px}

/* ---------- print ----------
   The site replaces a PDF the founder used to email, so it will be saved and
   forwarded as one. Printed, it is a document: paper, ink, no furniture. */
@media print{
  @page{margin:16mm}
  html{scroll-behavior:auto}
  body{background:var(--print-paper);color:var(--print-ink);font-size:11pt;line-height:1.5}
  .skip,.dock,.langs,.nav-links,.menu{display:none!important}
  .rv{opacity:1!important;transform:none!important}
  .nav{position:static;background:none;backdrop-filter:none;border-bottom:1px solid var(--hair)}
  .nav-in{padding:0 0 10px}
  .hero-in{min-height:0;padding:14px 0 0;grid-template-columns:1fr 1fr;gap:24px}
  h1{font-size:26pt;max-width:100%}
  .lede{font-size:12pt}
  .cta-row{margin-top:16px}
  .wrap{padding:0}
  .sect{padding:20px 0;break-inside:avoid}
  .sect.alt,.figures,.ethos{background:none}
  .ethos{padding:20px 0}
  .person,.ident-row,.sig,.fig{break-inside:avoid}
  h2,h3{break-after:avoid}
  .sect-head{margin-bottom:22px}
  .prov,.sec{padding:16px 0}
  .why-item{padding:18px 18px 6px 0}
  /* the ink surfaces are a screen device; on paper they cost toner and legibility */
  .contact,footer,.person{background:var(--print-paper)!important;color:var(--print-ink)!important}
  .contact h2,.person h3,.ident dd,.ident dd a,.foot a{color:var(--print-ink)!important}
  .contact .sect-head .side,.person p,.sig .cap,.sig .sub,.ident dt,.foot{color:var(--print-ink-soft)!important}
  .person{border:1px solid var(--hair)}
  .pf::after{display:none}
  .pb{margin-top:12px}
  /* the port mark is a filled dot; without forcing it, print drops the fill and leaves a bare ring */
  .port-mark,.port-mark::before,.port-mark::after{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .people{gap:16px}
  .person{width:47%;min-width:0}
  .pf img{filter:grayscale(1) contrast(1.05)!important;height:150px}
  .btn-red{background:none!important;color:var(--print-ink)!important;border:1px solid var(--print-ink)!important;padding:10px 16px}
  .sig .line{border-bottom-color:var(--print-ink)}
  .sig .line::before{color:var(--print-ink)}
  .em-gold{color:var(--print-ink)!important}
  .m-label.faint{display:none}
}

/* header runs edge to edge like /news/ (owner 2026-09-27: "use all the extra space on the left and right"). */
@media (min-width:761px){.rd .nav-in{max-width:none;padding-left:clamp(24px,2.2vw,56px);padding-right:clamp(24px,2.2vw,56px)}}

/* big screens (owner pick A, 2026-09-27): from 1440 up to 2560 the column widens and type grows
   in a straight line; at 1440 and below every value equals the rule above, so the laptop is unchanged. Scoped to body.rd:
   /news/ loads this file too and has its own wide rules in news.css. */
@media (min-width:1441px){
  .rd .wrap,.rd #news-row{max-width:clamp(1200px,calc(1200px + 0.803571 * (100vw - 1440px)),2100px)}
  .rd .nav-in{padding-top:clamp(14px,calc(14px + 0.007143 * (100vw - 1440px)),22px);padding-bottom:clamp(14px,calc(14px + 0.007143 * (100vw - 1440px)),22px)}
  .rd .foot{max-width:clamp(1200px,calc(1200px + 0.803571 * (100vw - 1440px)),2100px)}
  body.rd{font-size:clamp(17px,calc(17px + 0.002679 * (100vw - 1440px)),20px)}
  .rd .lede{font-size:clamp(19px,calc(19px + 0.003571 * (100vw - 1440px)),23px)}
  .rd .sect-head .side,.rd .ident dd{font-size:clamp(17.5px,calc(17.5px + 0.002232 * (100vw - 1440px)),20px)}
  .rd .why-item p,.rd .prov p,.rd .sec p{font-size:clamp(15.5px,calc(15.5px + 0.003125 * (100vw - 1440px)),19px)}
  .rd .person p{font-size:clamp(15px,calc(15px + 0.002679 * (100vw - 1440px)),18px)}
  .rd .why-item h3,.rd .prov h3,.rd .sec h3,.rd .person h3{font-size:clamp(22px,calc(22px + 0.005357 * (100vw - 1440px)),28px)}
  .rd h1{font-size:clamp(65.6px,calc(65.6px + 0.027143 * (100vw - 1440px)),96px)}
  .rd h2{font-size:clamp(43.2px,calc(43.2px + 0.016786 * (100vw - 1440px)),62px)}
  .rd .fig .n{font-size:clamp(40.3px,calc(40.3px + 0.015804 * (100vw - 1440px)),58px)}
  .rd .ethos p{font-size:clamp(28.8px,calc(28.8px + 0.01 * (100vw - 1440px)),40px)}
  .rd .nav-links,.rd .menu summary,.rd .langs{font-size:clamp(12px,calc(12px + 0.003571 * (100vw - 1440px)),16px)}
  .rd .brand .t{font-size:clamp(17px,calc(17px + 0.008036 * (100vw - 1440px)),26px)}
  .rd .brand .t small{font-size:clamp(12px,calc(12px + 0.003571 * (100vw - 1440px)),16px)}
  .rd .brand img{height:clamp(44px,calc(44px + 0.025 * (100vw - 1440px)),72px)}
  .rd .btn{font-size:clamp(13px,calc(13px + 0.002679 * (100vw - 1440px)),16px)}
  .rd .hero-note,.rd .fig .l,.rd .fig .src,.rd .why-item .when,.rd .sec .src,.rd .prov .src,.rd .person .role,.rd .sig .sub,.rd .ident dt{font-size:clamp(12px,calc(12px + 0.003571 * (100vw - 1440px)),16px)}
  .rd .zh-line{font-size:clamp(15px,calc(15px + 0.002679 * (100vw - 1440px)),18px)}
  .rd .sig .cap{font-size:clamp(15px,calc(15px + 0.002679 * (100vw - 1440px)),18px)}
  .rd .person{width:clamp(340px,calc(340px + 0.107143 * (100vw - 1440px)),460px)}
  .rd .pf img{height:clamp(300px,calc(300px + 0.089286 * (100vw - 1440px)),400px)}
  .rd .sect{padding-top:clamp(96px,calc(96px + 0.035714 * (100vw - 1440px)),136px);padding-bottom:clamp(88px,calc(88px + 0.032143 * (100vw - 1440px)),124px)}
  .rd .sect-head{margin-bottom:clamp(56px,calc(56px + 0.021429 * (100vw - 1440px)),80px);gap:clamp(48px,calc(48px + 0.028571 * (100vw - 1440px)),80px)}
  .rd .hero-in{gap:clamp(40px,calc(40px + 0.05 * (100vw - 1440px)),96px)}
  .rd #news-row .nb-card{width:clamp(340px,calc(340px + 0.107143 * (100vw - 1440px)),460px)}
  .rd #news-row .nb-head{font-size:clamp(22px,calc(22px + 0.005357 * (100vw - 1440px)),28px)}
}
/* big screens, second pass (owner 2026-09-27, "something still doesn't feel right" at 2560): the header shares
   the page column so the emblem starts on the headline's edge and the languages end on the map's (above 1440 only; the
   laptop keeps its approved wider bar); the bar and
   its type grow with the page; the hero drops its dead band on top and the text column hugs its words. */
@media (min-width:1441px){
  .rd .brand .t small{font-size:clamp(12px,calc(12px + 0.005357 * (100vw - 1440px)),18px)}
  .rd .nav-links,.rd .langs{font-size:clamp(12px,calc(12px + 0.005357 * (100vw - 1440px)),18px)}
  .rd .nav-links{gap:clamp(26px,calc(26px + 0.016071 * (100vw - 1440px)),44px)}
  html[lang="zh-Hans"] .rd .hero-in{min-height:0}   /* Chinese sets short: the map sets the height, no band above */
  .rd .hero-in{padding-top:clamp(64px,calc(64px + -0.021429 * (100vw - 1440px)),40px);min-height:clamp(640px,calc(640px + 0.232143 * (100vw - 1440px)),900px);grid-template-columns:minmax(420px,auto) minmax(0,1fr)}
}
/* short windows (owner yes 2026-09-27): his father's laptop is 1536x695 of browser, and the hero pushed
   Email Us and the news row below the first screen. Under 760 tall the hero stops claiming 78% of the
   window and its gaps tighten, so the action and the top of the news row show without scrolling. */
@media (min-width:981px) and (max-height:760px){
  .rd .hero-in{min-height:0;padding-top:16px;padding-bottom:8px}
  .rd h1{font-size:min(clamp(2.6rem,4.6vw,4.1rem),7.6vh)}
  .rd .hero-rule{margin:18px 0 16px}
  .rd .lede{line-height:1.55}
  .rd .cta-row{margin-top:20px}
  .rd .hero-note{margin-top:10px}
  .rd #news-row{padding-top:12px}
}

/* section heads, owner 2026-09-27 (arrows on his screenshots): the side paragraph starts level with the
   headline, not with the port mark above it (padding measured as ink top to ink top), and on Mandate the
   second paragraph sits under the first in the right column instead of under the headline. */
@media (min-width:881px){
  .rd .sect-head .side{padding-top:clamp(29px,calc(29px + 0.007212 * (100vw - 1024px)),32px)}
  html[lang="zh-Hans"] .rd .sect-head .side{padding-top:clamp(34px,calc(34px + 0.009615 * (100vw - 1024px)),38px)}
  .rd .sect-head:has(.side + .side){row-gap:20px}
  .rd .sect-head:has(.side + .side) > div:first-child{grid-row:1 / span 2}
  .rd .sect-head .side + .side{grid-column:2;padding-top:0!important}
}
@media (min-width:1441px){
  .rd .sect-head .side{padding-top:clamp(32px,calc(32px + 0.002679 * (100vw - 1440px)),35px)}
  html[lang="zh-Hans"] .rd .sect-head .side{padding-top:clamp(38px,calc(38px + 0.004464 * (100vw - 1440px)),43px)}
}

/* Polish 2026-09-29: balanced last lines everywhere; on big screens the six sectors sit three across
   (two across, the text ran about 125 characters a line at 2560). 1440 and the 1536 laptop keep two across. */
.rd p{text-wrap:pretty}
@media (min-width:1600px){.rd .sector-grid{grid-template-columns:repeat(3,1fr)}}