/* ───────────────────────── Fonts ───────────────────────── */
@font-face{font-family:"Thmanyah Sans";src:url("fonts/thmanyahsans-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("fonts/thmanyahsans-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("fonts/thmanyahsans-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("fonts/thmanyahsans-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

/* ───────────────────────── Tokens ───────────────────────── */
:root{
  --paper:#f3ead7;        /* palette 02: Ivory */
  --paper-a:rgba(243,234,215,.88);
  --ink:#141414;          /* text stays near-black */
  --blue:#0b2a4a;         /* Prussian Blue: every drawn line, frame and the tower */
  --dim:#4a4a4a;          /* secondary text: 7.4:1 on the ivory */
  --line:rgba(11,42,74,.14);
  --line2:rgba(11,42,74,.24);
  --teal:#0b2a4a;         /* accent = the same blue (two-colour palette) */
  --teal-deep:#0b2a4a;
  /* Logo (Radiant Grapnel). Change these three to recolour the mark everywhere on the site. */
  --logo-arm:var(--teal);        /* the five flukes */
  --logo-ring:var(--teal-deep);  /* the anchor ring */
  --logo-core:transparent;       /* the ring aperture; set to a colour (e.g. #ff8a3d) for the lit variant */
  --grad:#0b2a4a;
  --grad-l:#0b2a4a;
  --grad-l2:#0b2a4a;
  --sans:"Schibsted Grotesk",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ar:"Thmanyah Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  --ar-display:"Thmanyah Sans","IBM Plex Sans Arabic",system-ui,sans-serif;   /* Arabic headlines: Thmanyah Sans at medium weight (decision 2026-11-06) */
  --col:17%;
  --top:0px;
  --navh:72px;
  --mark:50px;            /* logo symbol (size C) */
  --word:25px;            /* wordmark */
  --ease:cubic-bezier(.6,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.4;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.dim{color:var(--dim)}

/* mono labels */
.m{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:400}

/* Arabic */
html[lang="ar"] body{font-family:var(--ar)}
html[lang="ar"] .m{font-family:var(--ar);text-transform:none;letter-spacing:0;font-size:13px}
html[lang="ar"] h1{font-family:var(--ar-display);font-weight:500}
html[lang="ar"] h2,html[lang="ar"] .quote{font-family:var(--ar)}
html[lang="ar"] .wordmark{font-family:var(--ar);font-weight:500}

/* ───────────────────────── Canvas ───────────────────────── */
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ───────────────────────── Top bar ───────────────────────── */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--top);z-index:40;
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:0 16px;background:var(--paper);border-bottom:1px solid var(--line);
  transition:transform .5s var(--ease);
}
.topbar b{font-weight:500}
.topbar .arr{color:var(--teal)}
.topbar-x{position:absolute;inset-inline-end:14px;top:0;height:var(--top);font-size:16px;line-height:1;font-family:var(--sans)}
body.scrolled .topbar,body.topbar-closed .topbar{transform:translateY(-100%)}

/* ───────────────────────── Nav ───────────────────────── */
.nav{
  position:fixed;top:var(--top);left:0;right:0;height:var(--navh);z-index:40;
  display:grid;grid-template-columns:minmax(var(--col),max-content) 1fr auto var(--col);align-items:center;   /* the logo column grows to fit the logo */
  background:rgba(243,234,215,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transition:top .5s var(--ease);
}
body.scrolled .nav,body.topbar-closed .nav{top:0}
.logo{display:flex;align-items:center;gap:10px;padding-inline-start:16px;font-size:var(--word);font-weight:500;letter-spacing:.02em}
.mark{width:var(--mark);height:var(--mark);flex:none;display:block}
.anyar-mark .arm{fill:var(--logo-arm)}
.anyar-mark .ring{fill:var(--logo-ring)}
.anyar-mark .core{fill:var(--logo-core)}
.menu{display:flex;gap:40px;padding-inline-start:64px;height:100%}   /* well clear of the wordmark */
.menu>li{display:flex;align-items:center;height:100%;position:relative}
.menu a,.menu .sub-btn{display:inline-flex;align-items:center;gap:7px;padding:4px 0;transition:color .2s;font:inherit;letter-spacing:inherit;text-transform:inherit}
.menu a:hover,.menu .sub-btn:hover,.has-sub.open .sub-btn{color:var(--teal)}
/* Solutions opens a list of the five screens: on hover, on click or tap, and on keyboard focus */
.chev{width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.has-sub.open .chev{transform:translateY(1px) rotate(225deg)}
.submenu{position:absolute;top:100%;inset-inline-start:-16px;min-width:200px;display:none;flex-direction:column;padding:8px 0;background:var(--paper);border:1px solid var(--line2);border-top:0;box-shadow:0 12px 30px rgba(11,42,74,.08)}
.has-sub:hover .submenu,.has-sub.open .submenu,.has-sub:focus-within .submenu{display:flex}
.submenu li{display:block}
.submenu a{display:flex;gap:10px;padding:9px 16px;white-space:nowrap}
.submenu .k{color:var(--dim)}
.pad{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;padding:0 26px}
.lang{font-family:var(--ar);font-size:14px;line-height:1;padding:7px 12px;border:1px solid var(--line2);border-radius:4px;color:var(--teal);transition:background .2s,color .2s}
.lang:hover{background:var(--teal);color:var(--paper);border-color:var(--teal)}
html[lang="ar"] .lang{font-family:var(--mono);font-size:12px;letter-spacing:.06em}
/* the ≡ button: phones only */
.burger{display:none;width:40px;height:40px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger .bar{width:18px;height:1.5px;background:var(--blue);transition:transform .25s,opacity .2s}
body.menu-open .burger .bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .burger .bar:nth-child(2){opacity:0}
body.menu-open .burger .bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* the phone menu */
.mmenu{position:fixed;inset:0;z-index:38;background:var(--paper);padding:calc(var(--navh) + 28px) 24px 32px;overflow:auto}
.mmenu[hidden]{display:none}
.mm-list li{border-bottom:1px solid var(--line2)}
.mm-list li.mm-sep{margin-top:26px;border-top:1px solid var(--line2)}
.mm-list a{display:flex;align-items:baseline;gap:14px;padding:16px 0;font-size:24px}
.mm-list .k{font-family:var(--mono);font-size:12px;color:var(--dim)}
html[lang="ar"] .mm-list .k{font-family:var(--ar)}
body.menu-open{overflow:hidden}
.btn{
  position:relative;justify-self:center;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;
  border:1px solid var(--blue);white-space:nowrap;transition:background .2s,color .2s;
}
.btn::before{content:"";position:absolute;inset:-1px;padding:2px;background:var(--grad-l);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  clip-path:polygon(0 0,62% 0,62% 2px,2px 2px,2px 100%,0 100%);pointer-events:none}
html[dir="rtl"] .btn::before{clip-path:polygon(38% 0,100% 0,100% 100%,calc(100% - 2px) 100%,calc(100% - 2px) 2px,38% 2px)}
.btn .dots{letter-spacing:-.05em;color:var(--teal)}
.btn:hover{background:var(--blue);color:var(--paper)}
.btn.big{height:40px;padding:0 20px;font-size:12px;margin-top:22px}

/* ───────────────────────── Right rail ───────────────────────── */
.rail{position:fixed;inset-inline-end:22px;top:50%;height:270px;transform:translateY(-50%);z-index:30;width:60px}
.rail-dots{position:absolute;inset-inline-end:-6px;top:-6px;bottom:-6px;display:flex;flex-direction:column;justify-content:space-between}
.rail-dots a{display:flex;align-items:center;justify-content:center;width:16px;height:16px}
.rail-dots a::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--blue);opacity:.45;transition:transform .3s,opacity .3s}
.rail-dots a:hover::before,.rail-dots a.on::before{opacity:1;transform:scale(1.6)}
.rail-label{position:absolute;inset-inline-end:14px;top:0;display:flex;align-items:center;gap:7px;white-space:nowrap;transition:top .7s var(--ease)}
.dial{width:12px;height:12px;border:1px solid var(--blue);border-radius:50%;position:relative;flex:none}
.dial::after{content:"";position:absolute;left:50%;top:1px;width:1px;height:5px;background:var(--teal);transform-origin:bottom;animation:dial 6s linear infinite}
@keyframes dial{to{transform:rotate(360deg)}}

/* ───────────────────────── Sections ───────────────────────── */
main{position:relative;z-index:2}
.s{position:relative;height:100vh;min-height:620px}

/* corner brackets */
.ck{position:absolute;width:7px;height:7px;border:1px solid var(--blue);pointer-events:none}
.ck.tl{top:-4px;left:-4px;border-right:0;border-bottom:0;border-top-left-radius:2px}
.ck.tr{top:-4px;right:-4px;border-left:0;border-bottom:0;border-top-right-radius:2px}
.ck.bl{bottom:-4px;left:-4px;border-right:0;border-top:0;border-bottom-left-radius:2px}
.ck.br{bottom:-4px;right:-4px;border-left:0;border-top:0;border-bottom-right-radius:2px}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.s.in .rv{opacity:1;transform:none}
.s.in .rv:nth-of-type(2){transition-delay:.1s}
.s.in .rv:nth-of-type(3){transition-delay:.2s}
.s.in .rv:nth-of-type(4){transition-delay:.3s}
.s.in .rv:nth-of-type(5){transition-delay:.4s}

/* ───────── 1 · Intro ───────── */
.intro{--hero-top:calc(var(--navh) + 8vh)}   /* the prompt and features hang just under the nav */
.prompt{position:absolute;inset-inline-start:var(--col);top:var(--hero-top);width:24.4%}
.prompt .tab{width:42px;height:42px;border:1px solid var(--blue);border-bottom:0;display:flex;align-items:flex-end;justify-content:center;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:30px;line-height:1;padding-bottom:4px;background:var(--paper)}
.prompt .plabel{line-height:17px;margin-bottom:10px;color:var(--dim)}   /* 27px: the rule and the features list hang below it */
.prompt .box{position:relative;border:1px solid var(--blue);padding:14px 16px;min-height:88px;font-family:var(--mono);font-size:13px;line-height:1.45;background:var(--paper-a)}
html[lang="ar"] .prompt .box{font-family:var(--ar);font-size:14px}
.caret{display:inline-block;width:6px;height:11px;background:var(--ink);vertical-align:-1px;margin-inline-start:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.rule-top{position:absolute;top:calc(var(--hero-top) + 69px);inset-inline-start:calc(var(--col) + 24.4%);inset-inline-end:var(--col);height:1px;background:var(--line2)}
.features{position:absolute;top:calc(var(--hero-top) + 69px);inset-inline-end:var(--col);width:23%}
.features li{position:relative;height:21px;display:flex;align-items:center;padding-inline-start:18%;border-bottom:1px solid var(--line2)}
.features li::before{content:"";position:absolute;inset-inline-start:calc(18% - 12px);top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--teal)}

.hero{position:absolute;inset-inline-start:var(--col);top:calc(var(--hero-top) + 170px + 6vh)}   /* 170px: the prompt block (label, tab, box) */
.eyebrow{font-size:12px;margin-bottom:14px}
h1{font-size:clamp(42px,5.25vw,92px);font-weight:400;line-height:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;letter-spacing:-.01em}
html[lang="ar"] h1{line-height:1.25;letter-spacing:0}
h1 span{position:relative;display:inline-block;padding:.06em .28em .1em}
h1 span::before{content:"";position:absolute;inset:0;padding:2px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
h1 .l1::before{background:var(--grad-l)}
h1 .l2::before{background:var(--grad-l2)}
h1 .l1{clip-path:polygon(0 0,100% 0,100% calc(100% - .32em),calc(100% - .32em) 100%,0 100%)}
html[dir="rtl"] h1 .l1{clip-path:polygon(0 0,100% 0,100% 100%,.32em 100%,0 calc(100% - .32em))}

.sub{margin-top:22px;font-size:15px;line-height:1.5;max-width:340px;color:var(--ink)}
.rule-bottom{position:absolute;bottom:14%;inset-inline-start:50%;inset-inline-end:0;height:1px;background:var(--line2)}

/* ───────── 2 · Solutions ───────── */
.strip{position:absolute;top:calc(var(--top) + var(--navh) + 40px);inset-inline-start:var(--col);inset-inline-end:0;height:74px;overflow:hidden;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.track{display:flex;height:100%;transition:transform .9s cubic-bezier(.65,0,.2,1);will-change:transform}
.tab{position:relative;flex:none;width:33vw;height:100%;display:flex;align-items:stretch;opacity:.14;transition:opacity .9s}
.tab .n{width:68px;flex:none;display:flex;align-items:center;justify-content:center;border-inline-end:1px solid var(--line2);font-family:var(--mono);font-size:11px}
.tab .t{display:flex;align-items:center;padding:0 22px;font-size:17px;white-space:nowrap}
.tab.active{opacity:1}
.tab .frame{display:none;position:absolute;inset:6px 8px;border:1px solid var(--blue);pointer-events:none}
.tab.active .frame{display:block}
.tab.active .frame .ck{border-color:var(--teal)}
.tab.past{opacity:0}

.h2{position:absolute;inset-inline-start:var(--col);bottom:12%}
.dotdot{font-size:16px;letter-spacing:.1em;color:var(--teal);margin-bottom:10px}
h2{font-size:clamp(30px,3.05vw,54px);font-weight:400;line-height:1.1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;letter-spacing:-.01em}
html[lang="ar"] h2{line-height:1.35;letter-spacing:0}
h2 .boxed{border:1px solid var(--blue);border-radius:10px;padding:.08em .4em .14em}
h2 .plain{padding-inline-start:.4em}
.side{position:absolute;inset-inline-end:var(--col);top:calc(var(--top) + var(--navh) + 40px + 74px + 22px);width:23%;color:var(--dim);line-height:1.6}

/* ───────── 3 · Sovereign ───────── */
.header{position:absolute;top:calc(var(--top) + var(--navh) + 40px);inset-inline-start:var(--col);inset-inline-end:var(--col);height:60px;display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--line2)}
.header .num{position:relative;padding:3px 6px}
.header .sq{width:56px;height:56px;border:1px solid var(--blue);position:relative;margin-inline-start:auto;
  background:linear-gradient(var(--line2),var(--line2)) 50% 0/1px 100% no-repeat,radial-gradient(circle at 50% 42%,var(--teal) 0 5px,transparent 6px)}
.header .sq::after{content:"";position:absolute;left:10px;right:10px;bottom:10px;height:14px;border:1px solid var(--teal);border-radius:0 0 14px 14px;border-top:0}
.header .dot{color:var(--teal)}
.header .name{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:15px}
html[lang="ar"] .header .name{font-family:var(--ar)}
.quote{position:absolute;inset-inline-start:var(--col);top:26%;width:23vw;font-size:clamp(20px,2.3vw,40px);line-height:1.19;font-weight:400;letter-spacing:-.01em}
html[lang="ar"] .quote{line-height:1.5;letter-spacing:0}
.try{position:absolute;inset-inline-start:var(--col);top:calc(26% + 23vw * .6 + 40px);padding:4px 10px 4px 14px;border-inline-start:1px solid var(--blue);color:var(--teal);background:var(--paper-a)}
.principles{position:absolute;inset-inline-start:50%;inset-inline-end:var(--col);top:26%}
.principles li{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line2)}
.principles .k{font-family:var(--mono);font-size:12px;color:var(--teal);padding-top:4px}
html[lang="ar"] .principles .k{font-family:var(--ar)}
.principles .h{font-size:20px;margin-bottom:4px}
.principles .d{color:var(--dim);font-size:14px;line-height:1.5}
.ghost{position:absolute;inset-inline-start:calc(100% - var(--col) + 24px);top:52%;transform:translateY(-50%);font-family:var(--mono);font-size:clamp(60px,9vw,160px);color:rgba(11,42,74,.1);line-height:1;pointer-events:none}

/* ───────── 4 · About + Contact ───────── */
.about .col-a{position:absolute;inset-inline-start:var(--col);top:22%;width:23%}
.about .col-b{position:absolute;inset-inline-start:43%;top:22%;width:21%}   /* ends at 64%: the tower stands from 67% even on a squarer window */
.about .label{margin-bottom:18px;color:var(--teal)}
.about .body{font-size:clamp(15px,1.55vw,18px);line-height:1.5;margin-bottom:16px}
.about .mail{font-size:clamp(22px,2.2vw,36px);display:inline-block;margin-bottom:12px;border-bottom:1px solid var(--blue);line-height:1.2}
.about .mail:hover{color:var(--teal);border-color:var(--teal)}
.about .addr{color:var(--dim);display:block}
.rule-mid{position:absolute;top:calc(30% - 24px);inset-inline-start:var(--col);inset-inline-end:var(--col);height:1px;background:var(--line2)}

.about .sig{position:absolute;inset-inline-start:var(--col);bottom:6%;display:flex;align-items:center;gap:12px;color:var(--dim)}
.about .sig .mark{width:22px;height:22px;--logo-arm:var(--dim);--logo-ring:var(--dim)}

/* ───────────────────────── Share image (index.html?og at 1200×630) ───────────────────────── */
body.og .menu,body.og .pad,body.og .prompt,body.og .features,body.og .rail,body.og .rule-top,body.og .rule-bottom{display:none}
body.og .nav{background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
body.og .hero{top:50%;transform:translateY(-46%)}
body.og .rv{opacity:1;transform:none;transition:none}
body.og .hero.rv{transform:translateY(-46%)}
body.og h1{font-size:76px}
body.og .sub{font-size:17px;max-width:380px}

/* ───────────────────────── Short screens (laptops) ───────────────────────── */
@media (min-width:901px) and (max-height:760px){
  .svc-text{top:19%}
  .svc-text .body{font-size:16px;margin-bottom:18px}
  .about .col-a,.about .col-b{top:17%}
  .about .body{font-size:16px}
  .about .contact{margin-top:22px}
  .about .mail{font-size:26px}
  .about .sig{inset-inline-start:43%}   /* under the principles, clear of the address */
}

/* ───────────────────────── Mobile ───────────────────────── */

/* ───────────────────────── Service sections (the tour) ───────────────────────── */
.svc-text{position:absolute;inset-inline-start:var(--col);top:24%;width:31%;max-width:520px}
.svc-text .label{display:flex;gap:12px;align-items:baseline;color:var(--teal);margin-bottom:22px}
.svc-text .label .k{color:var(--dim)}
.svc-h{font-size:clamp(28px,2.6vw,44px);font-weight:400;line-height:1.12;letter-spacing:-.01em;display:block;margin-bottom:18px}
.svc-text .body{font-size:17px;line-height:1.55;color:var(--ink);margin-bottom:22px}
/* one real question under each service, the quickest way to show what it does */
.svc-ask{display:flex;gap:12px;align-items:baseline;margin:-6px 0 22px;font-size:16px;line-height:1.45;color:var(--ink)}
.svc-ask .ask-k{color:var(--dim);flex:none;text-transform:none;letter-spacing:.01em}
html[lang="ar"] .svc-ask{font-family:var(--ar)}
.svc-list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.svc-list{text-transform:none;letter-spacing:.01em;font-size:13px}
html[lang="ar"] .svc-list{font-size:14px}
.svc-list li{border:1px solid var(--line2);padding:5px 11px;border-radius:999px;color:var(--ink)}
.onprem{color:var(--teal);display:flex;gap:8px;align-items:center}
.onprem .dots{letter-spacing:-.05em}
.about .contact{margin-top:34px}
.about .col-b .principles{position:static}
.about .col-b .principles li{grid-template-columns:36px 1fr}
html[lang="ar"] .svc-h{font-family:var(--ar-display);font-weight:500}
html[lang="ar"] .svc-text .body{font-family:var(--ar)}

@media (max-width:900px){
  .svc-text{inset-inline:16px;width:auto;max-width:none;top:16%;background:var(--paper-a);padding:12px 12px 8px}
  .svc-h{font-size:26px}
  .svc-text .body{font-size:15px}
  .svc-ask{font-size:14px;gap:8px}
  .about .contact{margin-top:20px}
  .menu,.rail,.features,.ghost,.rule-top,.rule-bottom,.side,.topbar{display:none}
  .nav{grid-template-columns:1fr auto auto;top:0}
  .pad{border:0;padding:0 8px}
  .burger{display:flex}
  .btn{margin-inline-end:12px;font-size:10px;padding:0 10px}
  .s{min-height:100vh}
  .prompt{inset-inline:16px;width:auto;top:18%}
  .hero{inset-inline-start:16px;top:auto;bottom:16%;margin:0}
  h1{font-size:clamp(34px,10vw,64px)}
  .eyebrow,h1 span,.sub,h2 span,.quote,.try,.dotdot{background:var(--paper-a)}
  .sub{max-width:80%;padding:4px 6px}
  .strip{inset-inline-start:0;top:calc(var(--navh) + 24px)}
  .tab{width:78vw}
  .h2{inset-inline-start:16px;bottom:14%}
  .header{inset-inline:16px;top:calc(var(--navh) + 24px);gap:10px;font-size:10px}
  .header .role{display:none}
  .quote{inset-inline:16px;width:auto;top:22%;font-size:26px;padding:4px 6px}
  .try{top:auto;bottom:40%;inset-inline-start:16px}
  .principles li{padding:10px 0}
  .principles .h{font-size:16px}
  .principles .d{font-size:13px}
  /* About stacks in normal flow and may run past one screen; the tower stays behind on the fixed canvas */
  .about{height:auto;min-height:100vh;display:flex;flex-direction:column;gap:16px;padding:calc(var(--navh) + 36px) 16px 20px}
  .about .col-a,.about .col-b,.about .sig{position:static;width:auto;inset:auto}
  .about .col-a{background:var(--paper-a);padding:8px 10px}
  .about .col-b{background:var(--paper-a);padding:8px 10px 12px}
  .about .sig{margin-top:auto;padding-top:34vh}   /* leaves room for the tower between the text and the signature */
  .about .body{font-size:15px}
  .rule-mid{inset-inline:16px}
}