/* Selden & Co — one stylesheet for both editions.
   Rules: logical properties only (no left/right), no opacity on text (Amiri tails),
   muted text via colour tokens, motion from one scale, everything off under reduced motion. */

@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/eb-garamond-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/eb-garamond-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Amiri';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/amiri-arabic-400-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Amiri';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/amiri-arabic-700-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}

:root{
  --pearl:#F3EFE6; --cream:#EAE4D6; --char:#30302D; --night:#262627; --ox:#5E1F1F; --oxdeep:#451414;
  --ink:var(--char);
  --ink-2:color-mix(in srgb,var(--char) 80%,var(--pearl));
  --ink-3:color-mix(in srgb,var(--char) 72%,var(--pearl));
  --line:color-mix(in srgb,var(--char) 20%,transparent);
  --line-2:color-mix(in srgb,var(--char) 12%,transparent);
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --t-micro:180ms; --t-ui:320ms; --t-reveal:900ms; --t-scene:1400ms;
  --rise:24px; --draw:1.2s;
  --ease:var(--ease-out); --t-fast:var(--t-micro); --t-med:var(--t-ui); --t-slow:var(--t-reveal);
  --dir:1;
  --serif:'EB Garamond','Amiri',Georgia,serif;
  --fs-hero:clamp(2.1rem,1.2rem + 3.4vw,3.6rem);
  --fs-h2:clamp(1.7rem,1.15rem + 1.9vw,2.5rem);
  --fs-h3:clamp(1.12rem,1rem + .5vw,1.4rem);
  --fs-body:clamp(1rem,.95rem + .3vw,1.14rem);
  --fs-lead:clamp(1.1rem,1rem + .6vw,1.35rem);
  --fs-small:.9rem; --fs-label:.8rem;
  --track:.2em;
  --sp:clamp(4.5rem,3rem + 6vw,7.5rem);
  --nav-h:68px;
  color-scheme:only light;
}
:root:dir(rtl){--dir:-1}
/* Arabic: Amiri reads smaller at the same size; letter-spacing breaks joining — never track Arabic */
:root:lang(ar){
  --serif:'Amiri','EB Garamond',serif;
  --fs-hero:clamp(1.9rem,1.2rem + 2.6vw,3rem);
  --fs-h2:clamp(1.75rem,1.2rem + 1.8vw,2.45rem);
  --fs-h3:clamp(1.2rem,1.05rem + .5vw,1.45rem);
  --fs-body:clamp(1.08rem,1rem + .35vw,1.22rem);
  --fs-lead:clamp(1.15rem,1.05rem + .55vw,1.4rem);
  --fs-small:.98rem; --fs-label:.95rem;
  --track:0;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--pearl);scrollbar-width:thin;scrollbar-color:var(--char) var(--pearl);-webkit-text-size-adjust:100%}
body{min-height:100svh;background:var(--pearl) url("../img/texture-laid.svg") 0 0/240px;color:var(--ink);font-family:var(--serif);font-size:var(--fs-body);line-height:1.75;-webkit-font-smoothing:antialiased;font-feature-settings:"liga" 1,"calt" 1;font-kerning:normal}
:lang(en) body,body:lang(en){font-feature-settings:"liga" 1,"calt" 1,"onum" 1}
:lang(ar) body,body:lang(ar){line-height:1.95}
body::after{content:none;display:none;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
::selection{background:var(--ox);color:var(--pearl)}
img{max-width:100%;display:block}
h1,h2,h3{text-wrap:balance;font-weight:500;line-height:1.3}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3{font-weight:700;line-height:1.55}
p{text-wrap:pretty}
a{color:inherit}
.en{font-family:'EB Garamond',serif;font-feature-settings:"liga" 1,"onum" 1}
[lang=ar]{font-family:'Amiri',serif}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:clamp(20px,4vw,32px)}
section{padding-block:var(--sp);scroll-margin-top:calc(var(--nav-h) + 8px);position:relative}

/* ——— header ——— */
#prog{position:fixed;inset-block-start:0;inset-inline-start:0;height:3px;inline-size:0;background:var(--ox);z-index:30}
@supports (animation-timeline:scroll()){
  #prog{inline-size:100%;transform-origin:var(--prog-origin,left);transform:scaleX(0);animation:prog linear both;animation-timeline:scroll(root)}
  :root:dir(rtl) #prog{--prog-origin:right}
  @keyframes prog{to{transform:scaleX(1)}}
}
nav.top{position:fixed;inset-block-start:0;inset-inline:0;z-index:20;border-block-end:1px solid transparent;transition:background var(--t-med),border-color var(--t-med)}
nav.top.solid{background:color-mix(in srgb,var(--pearl) 95%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:var(--line-2)}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;block-size:var(--nav-h);gap:18px}
nav.top .brand img{block-size:24px;inline-size:auto}
nav.top .links{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
nav.top .links a{text-decoration:none;font-size:.98rem;color:var(--ink-2);position:relative;padding-block-end:5px;letter-spacing:.02em}
:lang(ar) nav.top .links a{font-size:1.06rem;letter-spacing:0}
nav.top .links a::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;inline-size:0;block-size:1px;background:var(--ox);transition:inline-size var(--t-med) var(--ease)}
nav.top .links a:hover::after,nav.top .links a.active::after{inline-size:100%}
nav.top .links a.lang{border:1px solid color-mix(in srgb,var(--char) 34%,transparent);padding:3px 13px 5px}
nav.top .links a.lang::after,nav.top .links a.cta::after{display:none}
nav.top .links a.cta{color:var(--ox);border:1px solid color-mix(in srgb,var(--ox) 55%,transparent);padding:4px 16px 6px}
nav.top .links a.cta:hover,nav.top .links a.lang:hover{border-color:var(--ox);color:var(--ox)}
.burger{display:none;border:0;background:none;padding:8px;cursor:pointer;color:var(--char)}
.burger span{display:block;inline-size:22px;block-size:1px;background:currentColor;margin-block:5px;transition:transform var(--t-fast),opacity var(--t-fast)}
#menu{position:absolute;opacity:0;pointer-events:none}
nav.top:has(#menu:checked) .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
nav.top:has(#menu:checked) .burger span:nth-child(2){opacity:0}
nav.top:has(#menu:checked) .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:920px){
  .burger{display:block}
  nav.top{background:color-mix(in srgb,var(--pearl) 96%,transparent)}
  nav.top .links{position:fixed;inset-block-start:var(--nav-h);inset-inline:0;flex-direction:column;align-items:stretch;gap:0;background:var(--pearl);border-block-end:1px solid var(--line-2);max-block-size:0;overflow:hidden;transition:max-block-size var(--t-med) var(--ease)}
  nav.top:has(#menu:checked) .links{max-block-size:calc(100svh - var(--nav-h));overflow:auto}
  nav.top .links a{padding:16px clamp(20px,4vw,32px);font-size:1.08rem;border-block-start:1px solid var(--line-2)}
  nav.top .links a::after{display:none}
  nav.top .links a.lang,nav.top .links a.cta{border:0;border-block-start:1px solid var(--line-2);padding:16px clamp(20px,4vw,32px);color:var(--ox)}
}

/* ——— hero ——— */
.hero{min-block-size:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:130px 24px 96px;position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("../art/guilloche-rosette.webp") center/min(1180px,150vmin) no-repeat;opacity:.055}
.hero .mark{inline-size:min(560px,86vw)}
.hero .sig{inline-size:98px;aspect-ratio:430/520;background:url("../img/ampersand.webp") center/contain no-repeat;margin:18px auto 0}
.hero h1{font-size:var(--fs-hero);max-inline-size:19ch;margin:30px auto 0}
:lang(ar) .hero h1{max-inline-size:22ch}
.hero .creed{margin-top:22px;max-inline-size:52ch;font-size:var(--fs-lead);color:var(--ox)}
.hero .sub{margin-top:16px;font-size:var(--fs-small);letter-spacing:var(--track);color:var(--ink-3)}
.hero .enter{margin-top:48px;display:inline-flex;flex-direction:column;align-items:center;gap:14px;text-decoration:none;color:var(--ox);font-size:1.02rem;letter-spacing:var(--track)}
.hero .enter::after{content:"";inline-size:1px;block-size:52px;background:linear-gradient(var(--ox),transparent);animation:cue 2.4s 2.4s infinite}
.hero .enter span{border-block-end:1px solid color-mix(in srgb,var(--ox) 45%,transparent);padding-block-end:3px;transition:border-color var(--t-fast)}
.hero .enter:hover span{border-color:var(--ox)}
@keyframes rise{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}
@keyframes ink{to{-webkit-mask-size:100% 100%;mask-size:100% 100%}}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.ribbon{block-size:5px;background:linear-gradient(90deg,transparent,var(--ox) 18%,var(--ox) 82%,transparent)}

/* ——— section heads ——— */
.kicker{text-align:center;font-size:var(--fs-label);letter-spacing:.32em;color:var(--ox);text-transform:uppercase}
:lang(ar) .kicker{letter-spacing:0}
h2{font-size:var(--fs-h2);text-align:center;margin-top:10px}
.rule{inline-size:0;block-size:1px;background:var(--char);margin:22px auto 0;transition:inline-size 1.1s var(--ease)}
.in .rule,.rule.static{inline-size:72px}
.lead{text-align:center;max-inline-size:62ch;margin:22px auto 0;font-size:var(--fs-lead);color:var(--ink-2)}
.textlink{color:var(--ox);text-decoration:none;border-block-end:1px solid color-mix(in srgb,var(--ox) 45%,transparent);padding-block-end:2px}
.textlink:hover{border-color:var(--ox)}
.below{text-align:center;margin-top:12px}

/* ——— circles ——— */
#practice .wm{position:absolute;inset-inline-end:-70px;inset-block-start:30px;inline-size:340px;aspect-ratio:430/520;background:url("../img/ampersand.webp") center/contain no-repeat;opacity:.055;pointer-events:none}
.circles{display:grid;grid-template-columns:repeat(4,1fr);margin-top:64px;border-block-start:1px solid var(--line)}
.circle{position:relative;border-block-end:1px solid var(--line);border-inline-start:1px solid var(--line);transition:background var(--t-med)}
.circle:nth-child(4n+1){border-inline-start:0}
.circle::before{content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;inline-size:0;block-size:1px;background:var(--ox);transition:inline-size var(--t-med) var(--ease)}
.circle:hover{background:color-mix(in srgb,var(--ox) 4%,transparent)}
.circle:hover::before{inline-size:100%}
.circle .filetab{all:unset;box-sizing:border-box;display:flex;flex-direction:column;inline-size:100%;block-size:100%;cursor:pointer;padding:clamp(26px,2.6vw,40px) clamp(20px,2vw,28px)}
.circle .filetab:focus-visible{outline:2px solid var(--ox);outline-offset:-4px}
.circle h3{font-size:var(--fs-h3);transition:color var(--t-fast)}
.circle:hover h3{color:var(--ox)}
.circle .act{margin-top:8px;font-size:var(--fs-small);line-height:1.7;color:var(--ink-2);flex:1}
.circle .open{display:block;margin-top:18px;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ox)}
:lang(ar) .circle .open{letter-spacing:0}

.circle:hover .open::after{transform:translateX(4px)}
:root:dir(rtl) .circle:hover .open::after{transform:translateX(-4px)}
@media(max-width:1000px){.circles{grid-template-columns:repeat(2,1fr)}.circle{border-inline-start:1px solid var(--line)}.circle:nth-child(2n+1){border-inline-start:0}}
@media(max-width:600px){.circles{grid-template-columns:1fr}.circle{border-inline-start:0!important}}

/* ——— the file: a sheet that slides in from the reading edge ——— */
dialog.file{position:fixed;inset-block:0;inset-inline-end:0;inset-inline-start:auto;margin:0;block-size:100dvh;max-block-size:100dvh;inline-size:min(620px,100vw);max-inline-size:100vw;border:0;border-inline-start:1px solid color-mix(in srgb,var(--ox) 40%,transparent);background:var(--pearl) url("../img/texture-laid.svg") 0 0/240px;color:var(--ink);padding:0;overflow:auto;overscroll-behavior:contain;box-shadow:0 0 60px -20px rgba(0,0,0,.45);
  opacity:0;transform:translateX(var(--from,40px));transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease),overlay var(--t-med) allow-discrete,display var(--t-med) allow-discrete}
:root:dir(rtl) dialog.file{--from:-40px}
dialog.file[open]{opacity:1;transform:none}
@starting-style{dialog.file[open]{opacity:0;transform:translateX(var(--from,40px))}}
dialog.file::backdrop{background:color-mix(in srgb,var(--night) 0%,transparent);transition:background var(--t-med),overlay var(--t-med) allow-discrete,display var(--t-med) allow-discrete}
dialog.file[open]::backdrop{background:color-mix(in srgb,var(--night) 38%,transparent);backdrop-filter:blur(2px)}
@starting-style{dialog.file[open]::backdrop{background:color-mix(in srgb,var(--night) 0%,transparent)}}
.file .fhead{position:sticky;inset-block-start:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px clamp(22px,4vw,40px);background:color-mix(in srgb,var(--pearl) 94%,transparent);backdrop-filter:blur(6px);border-block-end:1px solid var(--line-2);z-index:1}
.file .fhead .fk{font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ox)}
:lang(ar) .file .fhead .fk{letter-spacing:0}
.file .x{all:unset;cursor:pointer;font-size:var(--fs-small);color:var(--ink-2);display:inline-flex;gap:8px;align-items:center;padding:4px 2px}
.file .x:hover{color:var(--ox)}
.file .x:focus-visible{outline:2px solid var(--ox);outline-offset:3px}
.file .fbody{padding:28px clamp(22px,4vw,40px) 48px}
.file h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.file .act{margin-top:10px;font-size:var(--fs-lead);color:var(--ink-2)}
.file dl{display:grid;gap:18px;margin-top:28px;padding-top:24px;border-block-start:1px solid color-mix(in srgb,var(--ox) 25%,transparent)}
.file dt,.file .lbl{font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ox)}
:lang(ar) .file dt,:lang(ar) .file .lbl{letter-spacing:0}
.file dd{margin-top:4px;color:var(--ink-2)}
.file .svc{margin-top:26px}
.file .svc ul{list-style:none;margin-top:8px;border-block-start:1px solid var(--line-2)}
.file .svc li{padding:10px 0;border-block-end:1px solid var(--line-2);position:relative;padding-inline-start:18px}
.file .svc li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:1.35em;inline-size:8px;block-size:1px;background:var(--ox)}
.file .forms{margin-top:22px;color:var(--ink-2);font-size:var(--fs-small)}
.file .forms .lbl{display:block;margin-bottom:4px}
.file .go{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px 28px}
body:has(dialog.file[open]){overflow:hidden}

/* ——— sectors ——— */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;margin-top:48px;border-block-start:1px solid var(--line)}
.sector{padding:24px 0 22px;border-block-end:1px solid var(--line)}
.sector h3{font-size:1.1rem}
:lang(ar) .sector h3{font-size:1.2rem}
.sector p{font-size:var(--fs-small);color:var(--ink-2);margin-top:2px;line-height:1.8}
.sector .leads{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:.84rem}
:lang(ar) .sector .leads{font-size:.95rem}
.sector .leads .lbl{color:var(--ink-3)}
.sector .leads button{all:unset;cursor:pointer;color:var(--ox);border-block-end:1px solid color-mix(in srgb,var(--ox) 35%,transparent)}
.sector .leads button:hover{border-color:var(--ox)}
.sector .leads button:focus-visible{outline:2px solid var(--ox);outline-offset:2px}
@media(max-width:900px){.sectors{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.sectors{grid-template-columns:1fr}}

/* ——— the person: an editorial break, off-centre ——— */
.person{background:var(--cream);overflow:hidden}
.person .amp{position:absolute;inset-inline-start:-70px;inset-block-start:50%;transform:translateY(-52%);inline-size:min(430px,45vw);aspect-ratio:430/520;background:url("../img/ampersand.webp") center/contain no-repeat;opacity:.18;pointer-events:none}
.person .kicker,.person h2{text-align:start}
.person .rule{margin-inline:0}
.person .card{position:relative;display:grid;grid-template-columns:minmax(200px,1fr) 1.6fr;gap:clamp(24px,4vw,60px);margin-top:52px;align-items:start}
.person .name{font-size:1.6rem}
.person .role{color:var(--ox);font-size:var(--fs-small);letter-spacing:.05em;margin-top:8px}
:lang(ar) .person .role{letter-spacing:0}
.person .bio{color:var(--ink)}
.person .fortress{margin-top:22px;padding-inline-start:20px;border-inline-start:2px solid var(--ox)}
.person .fq{color:var(--ink)}
.person .fj{margin-top:8px;color:var(--ox)}
.person .cred{margin-top:22px;font-size:var(--fs-small);color:var(--ink-3)}
@media(max-width:840px){.person .card{grid-template-columns:1fr;gap:16px}}

/* ——— how we work: the night band ——— */
.how{background:linear-gradient(160deg,#1F1F1E,var(--night) 130%);color:var(--pearl);overflow:hidden}
.how::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("../art/guilloche-rosette.webp") -22% 130%/900px no-repeat;opacity:.05;filter:invert(1)}
.how .kicker{color:var(--cream)}
.how .rule{background:var(--cream)}
.how h2{text-shadow:0 1px 1px rgba(0,0,0,.3)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,58px);margin-top:66px;position:relative;z-index:1;counter-reset:step}
.step{padding-block-start:22px;border-block-start:1px solid color-mix(in srgb,var(--cream) 30%,transparent);counter-increment:step}
.step::before{content:counter(step);display:block;font-family:'EB Garamond',serif;font-size:1rem;color:var(--cream);margin-bottom:10px;font-feature-settings:"onum" 1}
.step h3{font-size:var(--fs-h3)}
.step p{margin-top:8px;font-size:var(--fs-small);color:color-mix(in srgb,var(--pearl) 86%,var(--night))}
@media(max-width:840px){.steps{grid-template-columns:1fr}}

/* ——— the record ——— */
.matters{display:grid;grid-template-columns:repeat(3,1fr);margin-top:62px}
.matter{padding:30px clamp(20px,2.2vw,34px);border-inline-start:1px solid var(--line)}
.matter:first-child{border-inline-start:0}
.matter .tag{font-size:var(--fs-label);letter-spacing:.2em;color:var(--ox);text-transform:uppercase}
:lang(ar) .matter .tag{letter-spacing:0}
.matter h3{font-size:1.12rem;margin:10px 0 8px;color:var(--ink-3)}
.matter p{font-size:var(--fs-small);color:var(--ink-2)}
.note{text-align:center;margin-top:44px;font-size:var(--fs-small);color:var(--ink-3)}
@media(max-width:840px){.matters{grid-template-columns:1fr}.matter{border-inline-start:0;border-block-start:1px solid var(--line)}}

/* ——— insights ——— */
.insights{background:var(--cream)}
.ilist{max-inline-size:920px;margin:56px auto 0;border-block-start:1px solid var(--line)}
.ientry{display:grid;grid-template-columns:130px 1fr;gap:22px;padding:24px 6px;border-block-end:1px solid var(--line)}
.ientry .date{font-size:var(--fs-label);letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}
:lang(ar) .ientry .date{letter-spacing:0}
.ientry h3{font-size:1.1rem;color:var(--ink-2)}
@media(max-width:620px){.ientry{grid-template-columns:1fr;gap:6px}}

/* ——— start a matter ——— */
.contact{overflow:hidden}
.contact .wm{position:absolute;inset-inline-start:-60px;inset-block-end:-50px;inline-size:300px;aspect-ratio:430/520;background:url("../img/ampersand.webp") center/contain no-repeat;opacity:.07;pointer-events:none}
.cwrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,70px);margin-top:56px;align-items:start}
@media(max-width:840px){.cwrap{grid-template-columns:1fr}}
form.sm{display:grid;gap:18px}
.field{display:grid;gap:4px}
.field label{font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
:lang(ar) .field label{letter-spacing:0;text-transform:none}
input,textarea,select{inline-size:100%;font:inherit;font-size:1rem;color:var(--ink);background:transparent;border:0;border-block-end:1px solid color-mix(in srgb,var(--char) 32%,transparent);padding:9px 2px;border-radius:0;transition:border-color var(--t-fast)}
select{appearance:none;background:linear-gradient(45deg,transparent 50%,var(--ox) 50%) calc(100% - 12px) 55%/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,var(--ox) 50%) calc(100% - 6px) 55%/6px 6px no-repeat;padding-inline-end:28px}
:root:dir(rtl) select{background-position:12px 55%,6px 55%;padding-inline:28px 2px}
textarea{resize:vertical;min-block-size:88px;field-sizing:content}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ox)}
.field:has(:focus) label{color:var(--ox)}
.hp{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden}
.btns{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:6px}
.btn{font:inherit;font-size:1rem;letter-spacing:.04em;padding:11px 34px;cursor:pointer;border:1px solid var(--ox);background:transparent;color:var(--ox);transition:background var(--t-fast),color var(--t-fast)}
:lang(ar) .btn{letter-spacing:0}
.btn:hover,.btn.primary{background:var(--ox);color:var(--pearl)}
.btn.primary:hover{background:var(--oxdeep)}
.btn.quiet{border:0;padding-inline:0;border-block-end:1px solid color-mix(in srgb,var(--ox) 45%,transparent);padding-block:2px;background:none;color:var(--ox)}
.btn.quiet:hover{border-color:var(--ox);background:none;color:var(--ox)}
.hint{font-size:.88rem;color:var(--ink-3)}
:lang(ar) .hint{font-size:.96rem}
.status{font-size:.92rem;color:var(--ox);min-block-size:1.4em}
.next{border-inline-start:2px solid var(--ox);padding-inline-start:26px}
.next h3{font-size:1.1rem}
.next ol{list-style:none;margin-top:18px;counter-reset:s}
.next li{counter-increment:s;padding:0 0 18px;padding-inline-start:42px;position:relative}
.next li::before{content:counter(s);position:absolute;inset-inline-start:0;inset-block-start:0;inline-size:26px;block-size:26px;border:1px solid var(--ox);color:var(--ox);display:grid;place-items:center;font-size:.85rem;font-family:'EB Garamond',serif}
.mail{display:inline-block;margin-top:14px;font-family:'EB Garamond',serif;font-size:1.2rem;text-decoration:none;border-block-end:1px solid var(--ox);padding-block-end:3px}
.mail:hover{color:var(--ox)}
.cred{margin-top:14px;font-size:var(--fs-small);color:var(--ink-3)}
.cityline{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;margin:44px 0 6px}
.cityline b{font-weight:700}
.cityline i{font-style:normal;color:var(--ink-3);font-size:.85rem;margin-inline-start:6px}
.privacy{text-align:center;font-size:var(--fs-small);color:var(--ink-3)}

/* ——— footer ——— */
footer{background:var(--night);color:var(--pearl);padding:clamp(52px,6vw,76px) 0 46px;text-align:center}
footer .wm{inline-size:min(320px,72vw);margin-inline:auto}
footer .seal{inline-size:170px;aspect-ratio:1;background:url("../img/seal-pearl.webp") center/contain no-repeat;margin:30px auto 0}
footer .legal{margin-top:26px;font-size:.88rem;line-height:2.1;color:color-mix(in srgb,var(--pearl) 66%,var(--night))}
:lang(ar) footer .legal{font-size:.98rem}
footer a{color:var(--pearl)}
footer .links{margin-top:10px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}

/* ——— document pages (legal, AI, 404) ——— */
.doc{padding-block:calc(var(--nav-h) + clamp(48px,8vw,96px)) var(--sp)}
.doc .wrap{max-inline-size:760px}
.doc .kicker,.doc h1,.doc .lede{text-align:start}
.doc h1{font-size:clamp(1.9rem,1.3rem + 2vw,2.8rem);margin-top:12px}
.doc .rule{margin-inline:0}
.doc .lede{margin-top:20px;font-size:var(--fs-lead);color:var(--ink-2)}
.doc article{margin-top:40px}
.doc article section{padding:26px 0;border-block-start:1px solid var(--line)}
.doc article h2{text-align:start;font-size:1.25rem;margin:0}
.doc article p{margin-top:10px;color:var(--ink-2)}
.doc .reviewed{margin-top:34px;font-size:var(--fs-small);color:var(--ink-3)}

/* ——— motion: stamp ——— */
.no-js .rule{inline-size:72px}
#stamp{position:fixed;inset-block-end:24px;inset-inline-end:24px;inline-size:clamp(76px,7.5vw,112px);z-index:22;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
#stamp.on{opacity:.3}
@supports (animation-timeline:scroll()){#stamp.on{animation:turn linear both;animation-timeline:scroll(root)}}
@keyframes turn{to{transform:rotate(360deg)}}
#stamp.press{opacity:1;animation:press .8s var(--ease) forwards!important;animation-timeline:auto!important}
@keyframes press{0%{transform:translateY(-46px) rotate(-14deg) scale(1.5);opacity:0}45%{transform:translateY(0) rotate(-8deg) scale(1.06);opacity:.95}60%{transform:translateY(0) rotate(-8deg) scale(.96)}100%{transform:translateY(0) rotate(-8deg) scale(1);opacity:.9}}
#matters,#insights,#contact{content-visibility:auto;contain-intrinsic-size:auto 760px}
.prefer{position:fixed;inset-block-end:18px;inset-inline-start:18px;z-index:25;background:var(--ox);color:var(--pearl);padding:9px 18px;text-decoration:none;font-size:.95rem}

/* ——— accessibility ——— */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.burger:focus-visible{outline:2px solid var(--ox);outline-offset:4px}
.skip{position:fixed;inset-block-start:-60px;inset-inline-start:16px;z-index:70;background:var(--ox);color:var(--pearl);padding:10px 22px;text-decoration:none;transition:inset-block-start var(--t-fast)}
.skip:focus{inset-block-start:12px}
.sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media(forced-colors:active){
  .rule,.ribbon,#prog{forced-color-adjust:none;background:CanvasText}
  .circle .filetab,.btn,nav.top .links a.lang,nav.top .links a.cta{border:1px solid CanvasText}
  body::after,.hero::before,.how::after,.wm,.amp{display:none}
}
@media print{
  nav.top,#prog,.skip,#stamp,form.sm,.wm,.amp,.hero .enter,.hero .sig,.burger,.prefer,dialog.file::backdrop{display:none!important}
  body::after{display:none}
  body{background:#fff;color:#000;font-size:11.5pt}
  section,.person,.how,.insights,.contact,footer{background:#fff!important;color:#000!important;padding:22pt 0!important}
  h1,h2,h3{color:#000!important;text-shadow:none}
  a{color:#000;text-decoration:none}
  dialog.file{display:block;position:static;opacity:1;transform:none;box-shadow:none;border:0;inline-size:auto;block-size:auto;page-break-inside:avoid}
  .file .fhead .x{display:none}
  .contact::after{content:"selden.law · contact@selden.law";display:block;margin-top:12pt;font-family:'EB Garamond',serif}
}
.steps{list-style:none}
html,body{overflow-x:clip}#practice{overflow:clip}

/* ——— circle pages (anatomy after the Magic Circle practice page: statement, scope, services, sectors, related, start) ——— */
.chero{padding:calc(var(--nav-h) + clamp(48px,7vw,96px)) 0 clamp(44px,5vw,70px);position:relative;isolation:isolate;overflow:clip}
.chero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("../art/guilloche-rosette.webp") 110% 40%/min(900px,120vmin) no-repeat;opacity:.05}
:root:dir(rtl) .chero::before{background-position:-10% 40%}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:.86rem;color:var(--ink-3);margin-bottom:34px}
:lang(ar) .crumbs{font-size:.95rem}
.crumbs a{text-decoration:none;color:var(--ink-2)}.crumbs a:hover{color:var(--ox)}
.chero .kicker,.chero h1{text-align:start}
.chero h1{font-size:clamp(2.2rem,1.4rem + 3vw,3.8rem);margin-top:10px;max-inline-size:18ch}
.chero .rule{margin-inline:0}
.clede{margin-top:22px;font-size:var(--fs-lead);color:var(--ox);max-inline-size:52ch}
.cintro{padding-block:clamp(3.5rem,2.5rem + 4vw,5.5rem)}
.cintro .scope{font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem);line-height:1.7;max-inline-size:44em}
:lang(ar) .cintro .scope{line-height:1.95}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px 48px;margin-top:44px;padding-top:30px;border-block-start:1px solid var(--line)}
.facts .lbl,.pager .lbl{font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ox);display:block;margin-bottom:6px}
:lang(ar) .facts .lbl,:lang(ar) .pager .lbl{letter-spacing:0}
.facts p:not(.lbl){color:var(--ink-2)}
.cservices{background:var(--cream)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);margin-top:56px;border-block-start:1px solid var(--line)}
.tile{padding:30px clamp(20px,2.4vw,34px) 30px 0;border-block-end:1px solid var(--line);padding-inline:0 clamp(20px,3vw,40px)}
.tile:nth-child(2n){padding-inline:clamp(20px,3vw,40px) 0;border-inline-start:1px solid var(--line)}
.tile h3{font-size:var(--fs-h3)}
.tile p{margin-top:8px;color:var(--ink-2);font-size:var(--fs-small)}
@media(max-width:760px){.tiles{grid-template-columns:1fr}.tile,.tile:nth-child(2n){padding-inline:0;border-inline-start:0}}
.chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}
.chips li{border:1px solid var(--line);padding:8px 20px;color:var(--ink-2)}
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:52px;border-block-start:1px solid var(--line)}
.relc{display:block;padding:28px clamp(18px,2vw,28px);text-decoration:none;border-block-end:1px solid var(--line);border-inline-start:1px solid var(--line);transition:background var(--t-med)}
.relc:first-child{border-inline-start:0}
.relc:hover{background:color-mix(in srgb,var(--ox) 4%,transparent)}
.relc h3{font-size:1.15rem}.relc:hover h3{color:var(--ox)}
.relc p{margin-top:6px;font-size:var(--fs-small);color:var(--ink-2)}
.relc .open{display:block;margin-top:14px;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ox)}
:lang(ar) .relc .open{letter-spacing:0}
.cstart{background:linear-gradient(160deg,#1F1F1E,var(--night) 130%);color:var(--pearl);text-align:center;overflow:clip}
.cstart .lead{color:color-mix(in srgb,var(--pearl) 82%,var(--night))}
.cstart .btn.primary{display:inline-block;margin-top:26px;text-decoration:none;border-color:var(--pearl);background:var(--pearl);color:var(--ox)}
.cstart .btn.primary:hover{background:transparent;color:var(--pearl)}
.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;padding-block:44px}
.pager a{text-decoration:none;color:var(--ink)}
.pager a:hover{color:var(--ox)}
.pager .nx{text-align:end}
.pager .all{font-size:var(--fs-small);color:var(--ox);border-block-end:1px solid color-mix(in srgb,var(--ox) 45%,transparent)}
@media(max-width:640px){.pager{grid-template-columns:1fr 1fr}.pager .all{grid-column:1/-1;justify-self:center;order:3}}

/* ——— footer columns ——— */
footer{text-align:start}
.fcols{display:grid;grid-template-columns:1.2fr 1.1fr .9fr .9fr;gap:36px 40px;align-items:start}
.fbrand .wm{inline-size:min(240px,70vw);margin:0}
.fbrand .seal{inline-size:120px;margin:22px 0 0}
.fcol{display:flex;flex-direction:column;gap:9px;font-size:.95rem}
:lang(ar) .fcol{font-size:1.02rem}
.fcol .fh{font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--cream);margin-bottom:6px}
:lang(ar) .fcol .fh{letter-spacing:0}
.fcol a{text-decoration:none;color:color-mix(in srgb,var(--pearl) 78%,var(--night))}
.fcol a:hover{color:var(--pearl)}
footer .legal{margin-top:44px;padding-top:22px;border-block-start:1px solid color-mix(in srgb,var(--pearl) 14%,transparent);text-align:start}
@media(max-width:900px){.fcols{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}}
@media(max-width:520px){.fcols{grid-template-columns:1fr}}
.hero .sub{letter-spacing:.06em}
:lang(ar) .hero .sub{letter-spacing:0}
.file .go{justify-content:space-between}
/* guilloche medallion: soften the centre so it never sits as a disc behind the headline */
.hero::before{--rs:min(1180px,150vmin);-webkit-mask:radial-gradient(circle at 50% 50%,transparent calc(var(--rs)*.07),#000 calc(var(--rs)*.2));mask:radial-gradient(circle at 50% 50%,transparent calc(var(--rs)*.07),#000 calc(var(--rs)*.2))}
.chero::before{background:url("../art/guilloche-rosette.webp") right -570px center/900px no-repeat}
:root:dir(rtl) .chero::before{background-position:left -570px center}


/* ═══ Editorial layer (v3) — decisions 1–9, Sept 2026 ═══
   1 headings without eyebrows or rules · 2 start-aligned editorial grid · 3 one orchestrated moment
   4 circles as a ledger · 5 mega menu · 6 on-this-page + key contact · 7 hero statement
   8 no caps labels, no middots, no arrows, no watermarks · 9 footer with office and legal row */

/* 1–2 · section heads: title in the margin column, lead beside it */
.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:14px clamp(28px,5vw,72px);align-items:baseline;padding-block-end:clamp(26px,3vw,40px);border-block-end:1px solid var(--line)}
.shead h2{text-align:start;margin:0;font-size:var(--fs-h2)}
.shead .lead{text-align:start;margin:0;max-inline-size:60ch}
@media(max-width:760px){.shead{grid-template-columns:1fr}}
.how .shead{border-color:color-mix(in srgb,var(--cream) 22%,transparent)}
.kicker,.rule,.wm,.person .amp{display:none}
.lead{text-align:start}


/* 4 · the circles as a ledger: a register of eight files */
.ledger{list-style:none;counter-reset:none}
.ledger li{border-block-end:1px solid var(--line)}
.ledger .row{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;gap:10px clamp(24px,4vw,56px);align-items:baseline;inline-size:100%;padding:clamp(20px,2.2vw,28px) 0;transition:background var(--t-fast),padding var(--t-med) var(--ease)}
.ledger .nm{font-size:var(--fs-h3);font-weight:500;color:var(--ink)}
:lang(ar) .ledger .nm{font-weight:700}
.ledger .ac{color:var(--ink-2);font-size:var(--fs-small)}
.ledger .op{font-size:var(--fs-small);color:var(--ox);white-space:nowrap;border-block-end:1px solid transparent}
.ledger .row:hover .nm{color:var(--ox)}
.ledger .row:hover .op{border-color:var(--ox)}
.ledger .row:focus-visible{outline:2px solid var(--ox);outline-offset:4px}
@media(max-width:760px){.ledger .row{grid-template-columns:1fr auto}.ledger .ac{grid-column:1/-1;grid-row:2}}
.after{margin-top:26px}

/* 8 · labels in sentence case, never tracked capitals */
.circle .open,.file .fhead .fk,.file dt,.file .lbl,.matter .tag,.ientry .date,.field label,.facts .lbl,.pager .lbl,.relc .open,.fcol .fh,footer .fh,.sector .leads .lbl{text-transform:none!important;letter-spacing:0!important}
.file dt,.file .lbl,.facts .lbl,.pager .lbl,.matter .tag,.fcol .fh{font-size:var(--fs-small)}
.cityline{list-style:none;padding:0}
.cityline li{display:inline}

/* person, how: editorial, not centred */
.person .card{margin-top:40px}
.steps{margin-top:40px}
.matters,.ilist,.sectors,.cwrap{margin-top:40px}
.ilist{max-inline-size:none}
.note{text-align:start}
.privacy{text-align:start;margin-top:10px}
.cityline{justify-content:flex-start}

/* 5 · mega menu (native popover: light-dismiss, escape, top layer) */
.mega-btn{all:unset;cursor:pointer;font-size:.98rem;color:var(--ink-2);padding-block-end:5px}
:lang(ar) .mega-btn{font-size:1.06rem}
.mega-btn:hover{color:var(--ox)}
.mega-btn:focus-visible{outline:2px solid var(--ox);outline-offset:4px}
.m-only{display:none}
.mega{position:fixed;inset:var(--nav-h) 0 auto 0;margin:0;inline-size:100%;max-inline-size:none;border:0;border-block-end:1px solid var(--line);background:var(--pearl) url("../img/texture-laid.svg") 0 0/240px;color:var(--ink);padding:clamp(28px,3vw,44px) 0;box-shadow:0 30px 60px -40px rgba(0,0,0,.35);
  opacity:0;transform:translateY(-8px);transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),overlay var(--t-fast) allow-discrete,display var(--t-fast) allow-discrete}
.mega:popover-open{opacity:1;transform:none}
@starting-style{.mega:popover-open{opacity:0;transform:translateY(-8px)}}
.mega-in{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,80px)}
.mega .mh{font-size:var(--fs-small);color:var(--ox);margin-bottom:12px}
.mega ul{list-style:none;columns:2;column-gap:40px}
.mega li{break-inside:avoid;padding-block:6px;border-block-end:1px solid var(--line-2)}
.mega a{text-decoration:none;color:var(--ink)}
.mega a:hover{color:var(--ox)}
@media(max-width:920px){.mega-btn,.mega{display:none!important}.m-only{display:block}}

/* 6 · circle pages */
.ctype{font-size:var(--fs-small);color:var(--ox)}
.onpage{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:34px;padding-top:18px;border-block-start:1px solid var(--line);font-size:var(--fs-small)}
.onpage .lbl{color:var(--ink-3)}
.onpage a{color:var(--ox);text-decoration:none;border-block-end:1px solid color-mix(in srgb,var(--ox) 35%,transparent)}
.cservices h2,.csectors h2,.crelated h2,.ccontact h2,.cstart h2{text-align:start}
.cstart h2{text-align:center}
.tiles,.rel{margin-top:36px}
.chips{justify-content:flex-start}
.ccontact{padding-block:clamp(3rem,2rem + 3vw,4.5rem)}
.kc{margin-top:22px;padding-inline-start:20px;border-inline-start:2px solid var(--ox)}
.kc .name{font-size:1.4rem}.kc .role{color:var(--ox);font-size:var(--fs-small);margin-top:4px}
.chero::before{display:none}

/* 7 · hero statement */
.hero h1{margin-top:26px}

/* 9 · footer: office and legal row */
.fcols{grid-template-columns:1.3fr 1.2fr 1fr .6fr}
.office{font-style:normal;display:flex;flex-direction:column;gap:2px;margin-top:26px;font-size:.95rem;color:color-mix(in srgb,var(--pearl) 78%,var(--night))}
.office strong{color:var(--pearl);font-weight:500;margin-bottom:4px}
.office a{color:var(--pearl);text-decoration:none;margin-top:8px}
footer .seal{inline-size:110px;margin:0}
.fbase{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 40px;margin-top:44px;padding-top:22px;border-block-start:1px solid color-mix(in srgb,var(--pearl) 14%,transparent);font-size:.86rem;color:color-mix(in srgb,var(--pearl) 62%,var(--night))}
:lang(ar) .fbase{font-size:.95rem}
.flegal{line-height:1.9}
.frow{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:flex-start}
.frow a{color:color-mix(in srgb,var(--pearl) 80%,var(--night));text-decoration:none}
.frow a:hover{color:var(--pearl)}
@media(max-width:900px){.fcols{grid-template-columns:1fr 1fr}.fcols .fcol:last-child{display:none}}
@media(max-width:520px){.fcols{grid-template-columns:1fr}}
.sectors,.matters,.ilist{border-block-start:0}
.how::after,.hero::after{display:none}
.shead + .ledger{margin-top:0}
.flegal{font-style:normal}
.flegal .rights{display:inline-block;margin-top:10px;color:color-mix(in srgb,var(--pearl) 80%,var(--night))}

/* ——— stages (circle pages and the file) ——— */
.cstages{padding-block:clamp(3.5rem,2.5rem + 4vw,5.5rem)}
.stages{list-style:none;counter-reset:st;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:36px;border-block-start:1px solid var(--ox)}
.stages li{counter-increment:st;padding:22px clamp(14px,2vw,26px) 8px 0;padding-inline:0 clamp(14px,2vw,26px);position:relative}
.stages li+li{border-inline-start:1px solid var(--line);padding-inline-start:clamp(14px,2vw,26px)}
.stages li::before{content:counter(st);display:block;font-family:'EB Garamond',serif;color:var(--ox);font-size:1.05rem;margin-bottom:8px;font-feature-settings:"onum" 1}
.stages h3{font-size:1.12rem}
.stages p{margin-top:6px;font-size:var(--fs-small);color:var(--ink-2)}
@media(max-width:900px){.stages{grid-template-columns:1fr 1fr}.stages li:nth-child(3){border-inline-start:0;padding-inline-start:0}}
@media(max-width:560px){.stages{grid-template-columns:1fr}.stages li,.stages li+li{border-inline-start:0;padding-inline:0;border-block-end:1px solid var(--line-2)}}
.cauth{padding-block:clamp(3rem,2rem + 3vw,4.5rem)}
.auths{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.auths li{border:1px solid var(--line);padding:9px 18px;color:var(--ink)}
.file .fst{margin-top:26px}
.file .fst ol{list-style:none;counter-reset:fs;margin-top:8px;border-block-start:1px solid var(--line-2)}
.file .fst li{counter-increment:fs;padding:10px 0;padding-inline-start:30px;position:relative;border-block-end:1px solid var(--line-2);color:var(--ink-2);font-size:var(--fs-small)}
.file .fst li::before{content:counter(fs);position:absolute;inset-inline-start:0;inset-block-start:10px;color:var(--ox);font-family:'EB Garamond',serif}
.file .fst strong{color:var(--ink);font-weight:500;display:block}
:lang(ar) .file .fst strong{font-weight:700}
.file .fauth{margin-top:22px;color:var(--ink-2);font-size:var(--fs-small)}
.file .fauth .lbl{display:block;margin-bottom:4px}
.cstages h2,.cauth h2{text-align:start}

/* ——— insights, sectors, careers ——— */
.ientry{text-decoration:none;color:inherit;transition:background var(--t-fast)}
.ientry:hover h3{color:var(--ox)}
.ientry h3{color:var(--ink)}
.ientry .il{margin-top:6px;font-size:var(--fs-small);color:var(--ink-2)}
.sector h3 a{text-decoration:none;color:inherit}.sector h3 a:hover{color:var(--ox)}
.also{margin-top:30px;color:var(--ink-2);max-inline-size:70ch}
h2.start{text-align:start}
.mini{list-style:none;margin-top:10px;font-size:.88rem;color:var(--ink-3)}
:lang(ar) .mini{font-size:.96rem}
.mini li::before{content:"— ";color:var(--ox)}
.note-page .meta{margin-top:14px;color:var(--ink-3);font-size:var(--fs-small)}
.note-page h1{max-inline-size:24ch}
.note-page .body{margin-top:36px}
.note-page .body section{padding:22px 0;border-block-start:1px solid var(--line)}
.note-page .body h2{text-align:start;font-size:1.25rem;margin:0}
.note-page .body p{margin-top:10px;color:var(--ink);max-inline-size:66ch}
.note-page .more{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;padding-top:24px;border-block-start:1px solid var(--line)}
.note-page .more a{text-decoration:none;color:var(--ink)}.note-page .more a:hover{color:var(--ox)}
.note-page .more .lbl{display:block;font-size:var(--fs-small);color:var(--ox);margin-bottom:4px}
@media(max-width:640px){.note-page .more{grid-template-columns:1fr}}
.mega-in{grid-template-columns:1.2fr .9fr 1fr}
.mega .mnotes ul{columns:1}
@media(max-width:1100px){.mega-in{grid-template-columns:1fr 1fr}.mega .mnotes{display:none}}

/* ——— search ——— */
.search-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);padding:4px 2px}
.search-btn:hover{color:var(--ox)}
.search-btn:focus-visible{outline:2px solid var(--ox);outline-offset:4px}
.search-btn .m-lbl{display:none}
.search{position:fixed;inset:var(--nav-h) 0 auto 0;margin:0;inline-size:100%;max-inline-size:none;border:0;border-block-end:1px solid var(--line);background:var(--pearl) url("../img/texture-laid.svg") 0 0/240px;color:var(--ink);padding:clamp(24px,3vw,40px) 0;box-shadow:0 30px 60px -40px rgba(0,0,0,.35);
  opacity:0;transform:translateY(-8px);transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),overlay var(--t-fast) allow-discrete,display var(--t-fast) allow-discrete}
.search:popover-open{opacity:1;transform:none}
@starting-style{.search:popover-open{opacity:0;transform:translateY(-8px)}}
.search input{font-size:clamp(1.2rem,1rem + 1vw,1.7rem);padding:10px 2px;border-block-end:1px solid var(--char)}
.search input::-webkit-search-cancel-button{display:none}
.results{list-style:none;margin-top:14px}
.results a{display:grid;grid-template-columns:minmax(120px,.35fr) 1fr;gap:18px;padding:12px 4px;border-block-end:1px solid var(--line-2);text-decoration:none;color:var(--ink)}
.results a:hover,.results a:focus{color:var(--ox);outline:none;background:color-mix(in srgb,var(--ox) 5%,transparent)}
.results .rk{font-size:var(--fs-small);color:var(--ink-3)}
.snone{margin-top:14px;color:var(--ink-3)}
@media(max-width:920px){.search-btn{padding:16px clamp(20px,4vw,32px);border-block-start:1px solid var(--line-2);color:var(--ox)}.search-btn svg{display:none}.search-btn .m-lbl{display:inline}.results a{grid-template-columns:1fr;gap:2px}}

/* ——— final pass: portrait slot, telephone, contrast, rhythm ——— */
.person .cred{color:var(--ink-2)}
.how .shead{border-block-end:0;padding-block-end:0}
.portrait{margin:0 0 22px;inline-size:min(260px,100%);aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--pearl)}
.portrait img{inline-size:100%;block-size:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) sepia(.12)}
.portrait::after{content:"";position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--ox) 35%,transparent);pointer-events:none}
.portrait.empty{background:color-mix(in srgb,var(--pearl) 70%,var(--cream))}
.portrait .pf{position:absolute;inset:0;background:url("../img/ampersand.webp") center/42% no-repeat;opacity:.16}
.portrait.sm{inline-size:96px;margin:0}
.portrait.sm::after{inset:5px}
.kc{display:flex;gap:22px;align-items:flex-start}
.tel{margin-top:10px;font-size:var(--fs-small);color:var(--ink-2)}
.tel a{color:var(--ink);text-decoration:none;border-block-end:1px solid color-mix(in srgb,var(--ox) 35%,transparent)}
.flegal a{color:inherit;text-decoration:none}
@media(max-width:840px){.portrait{inline-size:200px}}
.ientry .date{color:var(--ink-2)}

/* ——— cross-browser fallbacks ——— */
nav.top.open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
nav.top.open .burger span:nth-child(2){opacity:0}
nav.top.open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:920px){nav.top.open .links{max-block-size:calc(100svh - var(--nav-h));overflow:auto}}
.no-popover .mega-btn,.no-popover .search-btn,.no-popover #mega,.no-popover #search{display:none!important}
.no-popover .m-only{display:inline-block!important}
nav.top.solid,.file .fhead,.search,.mega{-webkit-backdrop-filter:blur(8px)}
dialog.file[open]::backdrop{-webkit-backdrop-filter:blur(2px)}

/* ═══ Skill pass (frontend-design): one orchestrated moment, structure as information, a stated type scale ═══ */
/* Type scale — ratio 1.25 (major third) on the body size; each step is body × 1.25ⁿ */
:root{--fs-body:clamp(1rem,.96rem + .25vw,1.125rem);--fs-lead:clamp(1.125rem,1.05rem + .45vw,1.406rem);--fs-h3:clamp(1.125rem,1.02rem + .5vw,1.406rem);--fs-h2:clamp(1.563rem,1.2rem + 1.4vw,2.197rem);--fs-hero:clamp(1.953rem,1.2rem + 3vw,3.433rem)}
:root:lang(ar){--fs-body:clamp(1.08rem,1rem + .35vw,1.22rem);--fs-lead:clamp(1.35rem,1.2rem + .5vw,1.525rem);--fs-h3:clamp(1.2rem,1.08rem + .5vw,1.525rem);--fs-h2:clamp(1.7rem,1.3rem + 1.5vw,2.383rem);--fs-hero:clamp(2.1rem,1.3rem + 2.8vw,2.979rem)}
.chero h1{font-size:var(--fs-hero)}
/* headings carry no decorative rule; rules remain only where they separate records */
.shead{border-block-end:0;padding-block-end:0}
/* the seal appears only when a matter is sent */
#stamp.on{opacity:0;animation:none}
/* hover changes the title only */
.relc:hover,.circle:hover{background:none}

/* ═══ Emblems, dates that matter, note figures ═══ */
.ledger .row{grid-template-columns:auto minmax(0,1fr) minmax(0,1.6fr) auto}
.ledger .em{inline-size:40px;block-size:40px;opacity:.75;transition:opacity var(--t-fast)}
.ledger .row:hover .em{opacity:1}
@media(max-width:760px){.ledger .row{grid-template-columns:auto 1fr auto}.ledger .ac{grid-column:2/-1;grid-row:2}.ledger .em{inline-size:32px;block-size:32px}}
.file .fhead .fk{display:inline-flex;align-items:center;gap:10px}
.file .fhead .em{inline-size:28px;block-size:28px}
.chero{isolation:isolate}
.chem{position:absolute;inset-inline-end:max(-60px,calc((100vw - 1120px)/2 - 120px));inset-block-start:50%;transform:translateY(-44%);inline-size:min(420px,48vw);block-size:auto;opacity:.16;z-index:-1;pointer-events:none}
@media(max-width:760px){.chem{inset-inline-end:-90px;opacity:.1}}
/* dates that matter */
.kdates{background:var(--cream)}
.kd{list-style:none;margin-top:36px;border-block-start:1px solid var(--line)}
.kdi{display:grid;grid-template-columns:minmax(170px,.32fr) 1fr;gap:10px clamp(24px,4vw,56px);padding:22px 0;border-block-end:1px solid var(--line)}
.kdi[hidden]{display:none}
.kdd{display:flex;flex-direction:column;gap:4px}
.kdd time{font-size:var(--fs-small);color:var(--ink)}
.kdd .cd{font-size:var(--fs-small);color:var(--ox)}
.kdi h3{font-size:var(--fs-h3)}
.kdi .kw{font-size:var(--fs-small);color:var(--ink-2);margin-top:2px}
.kdi .ky{margin-top:6px;color:var(--ink-2);max-inline-size:62ch}
@media(max-width:640px){.kdi{grid-template-columns:1fr;gap:6px}}
.cdates{padding-block:clamp(3rem,2rem + 3vw,4.5rem);background:var(--cream)}
.cdates h2{text-align:start}
/* note figures */
.nfig{margin:26px 0 6px;padding:22px clamp(16px,2.4vw,28px);background:color-mix(in srgb,var(--cream) 70%,var(--pearl));border-inline-start:2px solid var(--ox)}
.nfig figcaption{font-size:var(--fs-small);color:var(--ox);margin-bottom:12px}
.tscroll{overflow-x:auto}
.nfig table{border-collapse:collapse;inline-size:100%;min-inline-size:460px;font-size:var(--fs-small)}
.nfig th,.nfig td{padding:10px 8px;border-block-end:1px solid var(--line);text-align:start;vertical-align:top}
.nfig thead th{color:var(--ink-2);font-weight:500}
.nfig tbody th{font-weight:500;color:var(--ink)}
.nfig td.new{color:var(--ox)}
.bars{display:grid;gap:14px}
.bar{display:grid;grid-template-columns:minmax(150px,.9fr) 1.6fr auto;gap:14px;align-items:center;font-size:var(--fs-small)}
.bt{display:block;block-size:10px;background:color-mix(in srgb,var(--char) 8%,transparent)}
.bf{display:block;block-size:100%;background:var(--ox)}
.bv{color:var(--ox);min-inline-size:3ch}
.fnote{margin-top:12px;font-size:var(--fs-small);color:var(--ink-2)}
@media(max-width:560px){.bar{grid-template-columns:1fr auto}.bt{grid-column:1/-1;grid-row:2}}
.tl{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-block-start:1px solid var(--ox);font-size:var(--fs-small)}
.tl li{padding:12px 12px 4px 0;padding-inline:0 12px;position:relative}
.tl li::before{content:"";position:absolute;inset-block-start:-5px;inset-inline-start:0;inline-size:9px;block-size:9px;border-radius:50%;background:var(--ox)}
.tl .td{display:block;color:var(--ox);margin-top:4px}
.tl .tt{display:block;color:var(--ink);margin-top:2px}
@media(max-width:640px){.tl{grid-template-columns:1fr 1fr;row-gap:14px}}
.ck{list-style:none;counter-reset:ck;display:grid;gap:8px;font-size:var(--fs-small)}
.ck li{counter-increment:ck;padding-inline-start:30px;position:relative}
.ck li::before{content:counter(ck);position:absolute;inset-inline-start:0;inline-size:20px;block-size:20px;border:1px solid var(--ox);color:var(--ox);display:grid;place-items:center;font-size:.8rem;font-family:'EB Garamond',serif}
@media print{.chem,.ledger .em{display:none}}

/* ═══ Horizon and photography ═══ */
#dates .kdi.more{display:none}
.hz .kd{margin-top:34px}
.hz .meta{margin-top:12px;font-size:var(--fs-small);color:var(--ink-2)}
.kc{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:var(--fs-small)}
.kc a{color:var(--ox);text-decoration:none;border-block-end:1px solid color-mix(in srgb,var(--ox) 30%,transparent)}
.kc a.kn{color:var(--ink)}
.band{position:relative;margin:0;background:var(--night);overflow:hidden}
.band img{display:block;inline-size:100%;block-size:clamp(280px,46vw,620px);object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--night) 70%,transparent));pointer-events:none}
.band figcaption{position:absolute;inset-inline:0;inset-block-end:clamp(18px,3vw,34px);z-index:1;color:var(--pearl);font-size:var(--fs-small);max-inline-size:1120px}
.sband img{block-size:clamp(220px,32vw,420px)}
.credits{margin-top:30px;padding-top:22px;border-block-start:1px solid var(--line)}
.credits h2{text-align:start;font-size:1.1rem}
.credits p{margin-top:8px;font-size:var(--fs-small);color:var(--ink-2)}
.band .pc{display:block;margin-top:4px;font-size:.78rem;color:color-mix(in srgb,var(--pearl) 72%,var(--night))}
/* band: one photograph, or a diptych of two */
div.band{display:grid;grid-template-columns:1fr;gap:2px;background:var(--night)}
div.band.duo{grid-template-columns:1fr 1fr}
div.band figure{position:relative;margin:0;overflow:hidden}
div.band figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--night) 70%,transparent));pointer-events:none}
div.band figcaption{position:absolute;inset-inline:clamp(20px,4vw,48px);inset-block-end:clamp(16px,3vw,30px);z-index:1;color:var(--pearl);font-size:var(--fs-small)}
div.band::after{display:none}
@media(max-width:760px){div.band.duo{grid-template-columns:1fr}div.band.duo img{block-size:clamp(220px,60vw,340px)}}
div.band figure::after{background:linear-gradient(180deg,transparent 78%,color-mix(in srgb,var(--night) 45%,transparent))}
div.band figcaption.credit{inset-block-end:10px}
div.band .pc{margin:0;font-size:.72rem}

/* ═══ Photography placed as the Magic Circle place it: in the opening, and as the ground of a section — not as a strip between sections ═══ */
.hero.has-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);padding:0;align-items:stretch;text-align:center}
.hero.has-photo .hero-text{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:calc(var(--nav-h) + 48px) clamp(24px,4vw,64px) 72px;position:relative;isolation:isolate;overflow:clip}
.hero.has-photo::before{inset:0 auto 0 0;inline-size:50%;background-size:min(900px,110vmin)}
:root:dir(rtl) .hero.has-photo::before{inset:0 0 0 auto}
.hero.has-photo .mark{inline-size:min(440px,80%)}
.hero.has-photo h1{max-inline-size:16ch}
.hero-photo{margin:0;position:relative;min-block-size:100svh;background:var(--night)}
.hero-photo img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;animation:rise 1.4s .2s var(--ease) both}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--night) 25%,transparent),transparent 30%);pointer-events:none}
:root:dir(rtl) .hero-photo::after{background:linear-gradient(-90deg,color-mix(in srgb,var(--night) 25%,transparent),transparent 30%)}
body:has(.hero.has-photo) nav.top{background:color-mix(in srgb,var(--pearl) 95%,transparent);border-color:var(--line-2)}
@media(max-width:900px){
  .hero.has-photo{grid-template-columns:1fr}
  .hero-photo{order:-1;min-block-size:46svh;margin-top:var(--nav-h)}
  .hero.has-photo .hero-text{padding:40px 22px 64px}
  .hero.has-photo::before{inline-size:100%;inset:46svh 0 0 0}
}
.how.has-photo{background:linear-gradient(90deg,rgba(31,31,30,.96) 0%,rgba(31,31,30,.9) 45%,rgba(31,31,30,.62) 100%),var(--how-photo) center 40%/cover no-repeat,var(--night)}
:root:dir(rtl) .how.has-photo{background:linear-gradient(-90deg,rgba(31,31,30,.96) 0%,rgba(31,31,30,.9) 45%,rgba(31,31,30,.62) 100%),var(--how-photo) center 40%/cover no-repeat,var(--night)}
@media(max-width:760px){.how.has-photo{background:linear-gradient(180deg,rgba(31,31,30,.9),rgba(31,31,30,.94)),var(--how-photo) center/cover no-repeat,var(--night)}}
@media print{.hero-photo{display:none}.hero.has-photo{display:block}}
.how.has-photo{background:linear-gradient(90deg,rgba(31,31,30,.95) 0%,rgba(31,31,30,.78) 42%,rgba(31,31,30,.18) 100%),var(--how-photo) center 45%/cover no-repeat,var(--night)}
:root:dir(rtl) .how.has-photo{background:linear-gradient(-90deg,rgba(31,31,30,.95) 0%,rgba(31,31,30,.78) 42%,rgba(31,31,30,.18) 100%),var(--how-photo) center 45%/cover no-repeat,var(--night)}
.how.has-photo{padding-block:clamp(6rem,4rem + 7vw,9.5rem)}
@media(max-width:760px){.how.has-photo{background:linear-gradient(180deg,rgba(31,31,30,.62),rgba(31,31,30,.92) 55%),var(--how-photo) center top/cover no-repeat,var(--night)}}
.how.has-photo,:root:dir(rtl) .how.has-photo{background-color:var(--night);background-size:cover;background-position:center 45%;background-repeat:no-repeat}
@media(max-width:760px){.how.has-photo{background-position:center top}}
/* the financial district as a light ground behind the sectors: seen, not read */
#sectors.has-photo{background-color:var(--pearl);background-repeat:no-repeat;background-size:auto 115%;background-position:left 40%}
:root:dir(rtl) #sectors.has-photo{background-position:left 40%}
:root:dir(ltr) #sectors.has-photo{background-position:right 40%}
@media(max-width:760px){#sectors.has-photo{background-size:cover;background-position:center}}
/* language preference: a quiet note, not a button */
.prefer{background:var(--pearl);color:var(--ox);border:1px solid color-mix(in srgb,var(--ox) 35%,transparent);padding:6px 14px;font-size:.85rem;inset-block-end:14px;inset-inline-start:14px;box-shadow:0 6px 20px -12px rgba(0,0,0,.35)}
.prefer:hover{border-color:var(--ox)}
#sectors.has-photo,:root:dir(rtl) #sectors.has-photo,:root:dir(ltr) #sectors.has-photo{background-size:cover;background-position:center 30%}
/* sectors on the night ground of the financial district, as the three steps sit on Diriyah */
#sectors.has-photo,:root:dir(rtl) #sectors.has-photo,:root:dir(ltr) #sectors.has-photo{background-color:var(--night);background-size:cover;background-position:center 45%;background-repeat:no-repeat;color:var(--pearl);padding-block:clamp(6rem,4rem + 7vw,9.5rem)}
#sectors.has-photo h2,#sectors.has-photo .sector h3,#sectors.has-photo .sector h3 a{color:var(--pearl)}
#sectors.has-photo .lead,#sectors.has-photo .sector p,#sectors.has-photo .also{color:color-mix(in srgb,var(--pearl) 84%,var(--night))}
#sectors.has-photo .sector{border-color:color-mix(in srgb,var(--pearl) 20%,transparent)}
#sectors.has-photo .sector h3 a:hover{color:var(--cream)}
#sectors.has-photo a:focus-visible{outline-color:var(--cream)}
@media(max-width:760px){#sectors.has-photo{background-position:62% center}}
#sectors.has-photo,:root:dir(rtl) #sectors.has-photo,:root:dir(ltr) #sectors.has-photo{background-position:70% 62%}
:root:dir(rtl) #sectors.has-photo{background-position:30% 62%}
:root:dir(rtl) #sectors.has-photo{background-position:20% 62%}
/* the district as a horizon under the sectors: the night sky of the photograph is the night of the section */
#sectors.has-photo,:root:dir(rtl) #sectors.has-photo,:root:dir(ltr) #sectors.has-photo{background-color:#262627;background-size:100% auto;background-position:center bottom;background-repeat:no-repeat;padding-block-end:calc(var(--sp) + 100vw / 3.6 * .78)}
@media(max-width:760px){#sectors.has-photo,:root:dir(rtl) #sectors.has-photo{background-size:230% auto;padding-block-end:calc(var(--sp) + 230vw / 3.6 * .7)}}
#sectors.has-photo,:root:dir(rtl) #sectors.has-photo,:root:dir(ltr) #sectors.has-photo{padding-block-end:calc(var(--sp) + 100vw / 2.77 * .62)}
@media(max-width:760px){#sectors.has-photo,:root:dir(rtl) #sectors.has-photo{background-size:210% auto;padding-block-end:calc(var(--sp) + 210vw / 2.77 * .6)}}
#sectors.has-photo,:root:dir(rtl) #sectors.has-photo,:root:dir(ltr) #sectors.has-photo{padding-block-end:calc(var(--sp) + 100vw / 2.77 * .84)}
@media(max-width:760px){#sectors.has-photo,:root:dir(rtl) #sectors.has-photo{padding-block-end:calc(var(--sp) + 210vw / 2.77 * .8)}}
#sectors.has-photo,:root:dir(rtl) #sectors.has-photo,:root:dir(ltr) #sectors.has-photo{padding-block-end:calc(var(--sp) * .4 + 100vw / 2.77)}
@media(max-width:760px){#sectors.has-photo,:root:dir(rtl) #sectors.has-photo{padding-block-end:calc(var(--sp) * .4 + 210vw / 2.77)}}

/* ═══ Sectors on the financial district at night: full ground, lights alive, text first ═══ */
#sectors.has-photo,:root:dir(rtl) #sectors.has-photo,:root:dir(ltr) #sectors.has-photo{background:var(--night);padding-block:clamp(6rem,4rem + 7vw,9.5rem);position:relative;overflow:hidden;isolation:isolate}
#sectors .sg{position:absolute;inset:0;z-index:-1;pointer-events:none}
#sectors .sg img{inline-size:100%;block-size:100%;object-fit:cover;transform-origin:62% 70%;animation:drift 48s ease-in-out infinite alternate,glow 7s ease-in-out infinite alternate}
#sectors .sg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,38,39,.86) 0%,rgba(38,38,39,.72) 40%,rgba(38,38,39,.38) 78%,rgba(38,38,39,.5) 100%)}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes glow{from{filter:brightness(.92) saturate(.95)}to{filter:brightness(1.12) saturate(1.1)}}
@media(prefers-reduced-motion:reduce){#sectors .sg img{animation:none}}
@media print{#sectors .sg{display:none}}
#sectors.has-photo,:root:dir(rtl) #sectors.has-photo,:root:dir(ltr) #sectors.has-photo{padding-block:clamp(6rem,4rem + 7vw,9.5rem) clamp(12rem,8rem + 14vw,20rem)}
#sectors .sg::after{background:linear-gradient(180deg,rgba(38,38,39,.9) 0%,rgba(38,38,39,.82) 45%,rgba(38,38,39,.5) 72%,rgba(38,38,39,.22) 100%)}
#sectors .sg img{transform-origin:62% 96%}
/* the natural photograph: colour kept, a darker veil so the type stays first */
#sectors .sg.natural::after{background:linear-gradient(180deg,rgba(20,20,22,.88) 0%,rgba(20,20,22,.8) 45%,rgba(20,20,22,.45) 74%,rgba(20,20,22,.2) 100%)}
/* sectors on the night ground: a size up, for reading over light */
#sectors.has-photo .lead{font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem)}
#sectors.has-photo .sector h3{font-size:clamp(1.2rem,1.1rem + .4vw,1.4rem)}
:lang(ar) #sectors.has-photo .sector h3{font-size:clamp(1.3rem,1.15rem + .45vw,1.55rem)}
#sectors.has-photo .sector p{font-size:var(--fs-body);line-height:1.75}
#sectors.has-photo .also{font-size:var(--fs-lead)}
#sectors.has-photo .sector{padding-block:28px 26px}

/* ═══ Motion (spec v1, «engraving and ink») · phase 1: tokens, reduced motion, page transitions, hero, circles ═══
   Only transform, translate/rotate/scale, opacity, clip-path/mask and stroke-dashoffset move.
   Hidden first states live behind .js (time-based) or @supports(animation-timeline) / .io (scroll). */

/* page transitions: the header stays, the title leaves up and arrives from below, the circle emblem travels */
@view-transition{navigation:auto}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:420ms;animation-timing-function:var(--ease-out)}
nav.top{view-transition-name:nav}
::view-transition-group(nav),::view-transition-new(nav){animation:none}
::view-transition-old(nav){display:none}
main h1{view-transition-name:var(--vt,none);view-transition-class:title}
::view-transition-old(*.title){animation:vt-up 420ms var(--ease-out) both}
::view-transition-new(*.title){animation:vt-in 420ms var(--ease-out) both}
@keyframes vt-up{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
::view-transition-new(sheet){animation:vt-sheet 420ms var(--ease-out) both}
@keyframes vt-sheet{from{opacity:0;transform:translateX(calc(40px * var(--dir)))}}
dialog.file.vt{transition:none}
.flying nav.top{view-transition-name:none}                            /* within the page the header dims with the backdrop */
.ledger .em,.file .fhead .em,.chem{view-transition-class:em}
::view-transition-group(*.em){z-index:1}                                /* the emblem flies above the sheet it lands on */

/* hero, on load: the engraving is drawn line by line, then the ampersand is inked, then the statement opens line by line */
.hero .ros{position:absolute;inset:0;z-index:-1;pointer-events:none;--rs:min(1180px,150vmin);-webkit-mask:radial-gradient(circle at 50% 50%,transparent calc(var(--rs)*.07),#000 calc(var(--rs)*.2));mask:radial-gradient(circle at 50% 50%,transparent calc(var(--rs)*.07),#000 calc(var(--rs)*.2))}
.hero .ros canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);inline-size:var(--rs);aspect-ratio:1;opacity:.055}   /* centred on the hero, as the printed rosette is */
.opening .hero::before{display:none}
.js:not(.seen) .hero .mark{animation:rise var(--t-scene) .1s var(--ease-out) backwards}
.js:not(.seen) .hero .sig{-webkit-mask:linear-gradient(#000,#000) no-repeat top/100% 0%;mask:linear-gradient(#000,#000) no-repeat top/100% 0%;animation:ink 1s .9s var(--ease-out) forwards}
.js:not(.seen) .hero h1:not(.split,.opened),.js:not(.seen) .hero h1 .ln{animation:line var(--t-reveal) calc(1.3s + var(--i,0) * .12s) var(--ease-out) backwards}
.hero h1 .ln{display:block}
.js:not(.seen) .hero .creed{animation:rise var(--t-reveal) 1.7s var(--ease-out) backwards}
.js:not(.seen) .hero .enter{animation:rise var(--t-reveal) 2s var(--ease-out) backwards}
@keyframes line{from{clip-path:inset(100% 0 -.4em 0);transform:translateY(var(--rise))}to{clip-path:inset(-.4em 0 -.4em 0);transform:none}}

/* hero, with the scroll: the engraving recedes, the statement lifts */
@supports (animation-timeline:scroll()){
  .hero::before,.hero .ros{animation:recede linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  .js:not(.seen) .hero h1:not(.split,.opened){animation:line var(--t-reveal) 1.3s var(--ease-out) backwards,lift linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
  .js:not(.seen) .hero .creed{animation:rise var(--t-reveal) 1.7s var(--ease-out) backwards,lift linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
  .js .hero h1:is(.split,.opened),:is(html:not(.js),.seen) .hero :is(h1,.creed){animation:lift linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  @keyframes recede{to{scale:.92;opacity:0}}
  @keyframes lift{to{translate:0 -40px}}
}

/* circles: each row's rule is engraved in the reading direction, then its emblem and name open */
.ledger li{position:relative;border-block-end-color:transparent}
.ledger li::after{content:"";position:absolute;inset-inline:0;inset-block-end:-1px;block-size:1px;background:var(--line);transform-origin:var(--edge,left);transition:background-color var(--t-ui) var(--ease-out)}
:root:dir(rtl) .ledger li{--edge:right}
.ledger li:has(.row:is(:hover,:focus-visible))::after{background:var(--ox)}
.ledger .em{transition:opacity var(--t-micro),rotate var(--t-ui) var(--ease-out)}
.ledger .nm{transition:color var(--t-micro),translate var(--t-ui) var(--ease-out)}
.ledger .row:is(:hover,:focus-visible) .em{opacity:1;rotate:8deg}
.ledger .row:is(:hover,:focus-visible) .nm{color:var(--ox);translate:calc(4px * var(--dir)) 0}
.ledger li{--open:inset(-.4em 100% -.4em 0)}
:root:dir(rtl) .ledger li{--open:inset(-.4em 0 -.4em 100%)}
@keyframes engrave{from{transform:scaleX(0)}}
@keyframes open{from{opacity:0;clip-path:var(--open)}to{clip-path:inset(-.4em 0 -.4em 0)}}
@keyframes unveil{from{opacity:0;transform:translateY(12px)}}
@supports (animation-timeline:view()){
  .ledger li{view-timeline:--row block}
  .ledger li::after{animation:engrave linear both;animation-timeline:--row;animation-range:entry 0% entry 100%}
  .ledger :is(.em,.nm){animation:open linear both;animation-timeline:--row;animation-range:entry 60% cover 30%}
  .ledger :is(.ac,.op){animation:unveil linear both;animation-timeline:--row;animation-range:entry 80% cover 35%}
}
/* no scroll timelines: the same end states, triggered once on entry */
.io .ledger li::after{transform:scaleX(0);transition:transform var(--t-reveal) var(--ease-out),background-color var(--t-ui)}
.io .ledger li :is(.em,.nm,.ac,.op){opacity:0;transition:opacity var(--t-reveal) var(--ease-out) .25s,color var(--t-micro),rotate var(--t-ui) var(--ease-out),translate var(--t-ui) var(--ease-out)}
.io .ledger li.in::after{transform:none}
.io .ledger li.in :is(.nm,.ac,.op){opacity:1}
.io .ledger li.in .em{opacity:.75}
.io .ledger li.in .row:is(:hover,:focus-visible) .em{opacity:1}

/* reduced motion: no displacement, no scenes; fades of 150ms at most */
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation:none!important;transition-duration:.15s!important;transition-delay:0s!important;transition-property:opacity,color,background-color,border-color,outline-color!important;scroll-behavior:auto!important}
  .hero .sig{-webkit-mask:none;mask:none}
  .ledger li::after{transform:none}
  .ledger .row:is(:hover,:focus-visible) :is(.em,.nm){rotate:none;translate:none}
  #stamp{display:none}
  dialog.file{opacity:1;transform:none}
}