/* ═══════════════════════════════════════════════════════════════════════════
   MOHAMMAD SADEK — PERSONAL FILE
   Paper, ink, oxide. No framework, no build step.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── palette, sampled from the material of the work: drafting paper, ink,
        oxide-red stamp pad, and the concrete of an engineering office ── */
  --paper:#e9e5da;
  --paper-deep:#ded9ca;
  --paper-warm:#f0ece2;
  --ink:#1b1c17;
  --ink-2:#34352c;
  --muted:#5b5a4e;
  --oxide:#7a3226;
  --oxide-deep:#5e2419;
  --steel:#3e4a48;
  --rule:rgba(27,28,23,.20);
  --rule-soft:rgba(27,28,23,.11);
  --rule-hard:rgba(27,28,23,.45);
  --crt:#14150f;
  --crt-2:#1c1e15;
  --phos:#c6cdb0;
  --phos-dim:#7f8770;

  --f-display:"Russo One","Arial Narrow",sans-serif;
  --f-body:"PT Serif",Georgia,"Times New Roman",serif;
  --f-mono:"PT Mono",ui-monospace,"Courier New",monospace;
  --f-pixel:"Silkscreen","PT Mono",monospace;
  --f-ar:"Noto Kufi Arabic","Segoe UI",sans-serif;

  --rail:76px;
  --pad:clamp(20px,4.4vw,88px);
  --sheet-pad:clamp(56px,7.5vw,118px);
  --maxw:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(16px,.55vw + 14.6px,17.5px);
  line-height:1.72;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
  padding-left:var(--rail);
  overflow-x:hidden;
  /* ruled paper, 28px, barely there */
  background-image:
    linear-gradient(to right,var(--rule-soft) 0 1px,transparent 1px);
  background-size:100% 100%;
  background-repeat:no-repeat;
}

/* paper grain — fixed, multiply, near-invisible up close */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:60;
  pointer-events:none;
  opacity:.32;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.14'/></feComponentTransfer></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
}

::selection{background:var(--oxide);color:var(--paper-warm)}

:focus-visible{
  outline:2px solid var(--oxide);
  outline-offset:3px;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4,p,dl,dd,ul,ol,figure{margin:0}
ul,ol{list-style:none;padding:0}

.sr,.skip:not(:focus){
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.skip{
  position:fixed;top:8px;left:8px;z-index:99;
  background:var(--ink);color:var(--paper);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;padding:10px 14px;
}

.mono{
  font-family:var(--f-mono);
  font-size:.66rem;
  letter-spacing:.155em;
  text-transform:uppercase;
  line-height:1.5;
}
.mono--dim{color:var(--muted)}

/* ═══ progress hairline ═══ */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:70;
  background:transparent;pointer-events:none;
}
.progress i{
  display:block;height:100%;width:0%;
  background:var(--oxide);
  transition:width .12s linear;
}

/* ═══ left rail: the sheet index ═══ */
.rail{
  position:fixed;top:0;bottom:0;left:0;width:var(--rail);z-index:50;
  display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;
  padding:26px 0 22px;
  border-right:1px solid var(--rule);
  background:linear-gradient(to right,rgba(233,229,218,.92),rgba(233,229,218,.55));
  backdrop-filter:blur(3px);
}
.rail__mark{
  font-family:var(--f-display);
  font-size:.82rem;letter-spacing:.06em;
  border:1px solid var(--ink);
  width:34px;height:34px;display:grid;place-items:center;
  transition:background .25s,color .25s;
}
.rail__mark:hover{background:var(--ink);color:var(--paper)}
.rail__nav{display:flex;flex-direction:column;gap:14px;align-items:center}
.rail__nav a{
  font-family:var(--f-pixel);font-size:.62rem;
  color:var(--muted);
  padding:3px 4px;
  position:relative;
  transition:color .2s;
}
.rail__nav a::after{
  content:"";
  position:absolute;left:-9px;top:50%;width:4px;height:4px;
  transform:translateY(-50%) scale(0);
  background:var(--oxide);
  transition:transform .3s var(--ease);
}
.rail__nav a:hover,.rail__nav a.is-active{color:var(--ink)}
.rail__nav a.is-active::after{transform:translateY(-50%) scale(1)}
.rail__yr{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;
  color:var(--muted);writing-mode:vertical-rl;
}

/* ═══ shell ═══ */
main{
  max-width:calc(var(--maxw) + var(--pad)*2);
  margin:0 auto;
  padding:0 var(--pad);
}
.sheet{
  padding-block:var(--sheet-pad);
  scroll-margin-top:0;
  position:relative;
}

/* section head: folio in the margin, title, meta — no eyebrows above headings */
.head{
  display:grid;
  grid-template-columns:clamp(2.6rem,6vw,4.6rem) minmax(0,1fr) auto;
  align-items:end;
  gap:clamp(12px,2vw,28px);
  padding-top:22px;
  border-top:1px solid var(--rule-hard);
}
.folio{
  font-family:var(--f-pixel);
  font-size:.78rem;
  letter-spacing:.02em;
  color:var(--oxide);
  transform:translateY(-2px);
}
.head h2{
  font-family:var(--f-display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(1.55rem,3.55vw,2.85rem);
  line-height:1.03;
  letter-spacing:-.012em;
  text-wrap:balance;
  max-width:22ch;
}
.head__meta{
  font-family:var(--f-mono);
  font-size:.64rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:right;
  padding-bottom:.35rem;
  white-space:nowrap;
}
.section-note{
  max-width:54ch;
  margin-top:clamp(18px,2.4vw,28px);
  color:var(--ink-2);
  font-size:.97rem;
  line-height:1.7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   01 — HERO
   ═══════════════════════════════════════════════════════════════════════════ */
.hero{
  padding-top:clamp(20px,3vw,34px);
  padding-bottom:clamp(40px,5vw,64px);
}
.hero__slug{
  display:flex;
  flex-wrap:wrap;
  gap:6px clamp(14px,3vw,34px);
  justify-content:space-between;
  padding-bottom:14px;
  border-bottom:1px solid var(--rule);
}
.hero__slug .mono:first-child{color:var(--oxide)}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(132px,13.5vw,196px);
  gap:clamp(20px,3.4vw,56px);
  align-items:start;
  padding-top:clamp(26px,4vw,54px);
}

.name{
  font-family:var(--f-display);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(2.9rem,10.1vw,9.5rem);
  line-height:.87;
  letter-spacing:-.038em;
  margin-left:-.045em; /* optical: pull the M to the rule */
}
.name .line{
  display:block;
  overflow:clip;
  padding-block:.04em;
  overflow-clip-margin:.22em;
}
.name .line--2{
  margin-left:.045em;
  letter-spacing:-.026em;
}
.name__ar{
  font-family:var(--f-ar);
  font-weight:500;
  font-size:clamp(.95rem,1.35vw,1.18rem);
  line-height:1.9;
  letter-spacing:0;
  color:var(--ink-2);
  margin-top:.9rem;
  padding-bottom:.2em;
  text-align:right;
  max-width:min(100%,38rem);
  margin-left:auto;
}

.hero__cols{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(18px,3vw,48px);
  align-items:start;
  margin-top:clamp(26px,3.6vw,44px);
  padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid var(--rule);
  max-width:52rem;
}
.lede{
  font-size:clamp(1.02rem,1.25vw,1.16rem);
  line-height:1.66;
  max-width:46ch;
  color:var(--ink-2);
}
.hero__act{display:flex;flex-direction:column;gap:10px;min-width:max-content}

.btn{
  display:inline-flex;align-items:center;justify-content:space-between;
  gap:18px;
  font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.135em;text-transform:uppercase;
  padding:11px 14px;
  background:var(--ink);color:var(--paper-warm);
  border:1px solid var(--ink);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s;
}
.btn .arw{width:.95em;height:.95em}

/* authored arrow, one stroke weight everywhere */
.arw{
  width:.72em;height:.72em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.15;
  stroke-linecap:square;stroke-linejoin:miter;
  transition:transform .3s var(--ease);
}
.arw--up{transform:rotate(180deg)}
.btn:hover{background:var(--oxide);border-color:var(--oxide)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-hard)}
.btn--ghost:hover{background:transparent;color:var(--oxide);border-color:var(--oxide)}

/* right-hand spine */
.hero__side{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(18px,2.4vw,30px);
  padding-top:.4rem;
}
.seal{width:100%;max-width:196px;color:var(--oxide);opacity:.92}
.seal svg{width:100%;height:auto;overflow:visible}
.seal__text{
  font-family:var(--f-mono);
  font-size:11.8px;
  letter-spacing:.19em;
  fill:currentColor;
}
.seal__spin{transform-origin:100px 100px;transform-box:view-box}
.seal__mono{
  font-family:var(--f-display);
  font-size:40px;
  fill:currentColor;
  letter-spacing:-.02em;
}
.seal__est,.seal__line{
  font-family:var(--f-mono);
  font-size:8.6px;
  letter-spacing:.19em;
  fill:currentColor;
}
.spine{
  font-family:var(--f-mono);
  font-size:.6rem;letter-spacing:.215em;text-transform:uppercase;
  color:var(--muted);
  writing-mode:vertical-rl;
  height:clamp(120px,17vw,220px);
  white-space:nowrap;
}
.status{
  font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);
  display:flex;align-items:center;gap:.5em;
  white-space:nowrap;
}
.status i{
  width:6px;height:6px;background:var(--oxide);
  box-shadow:0 0 0 3px rgba(122,50,38,.14);
  animation:pulse 2.8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* title block — the drawing sheet's signature strip */
.titleblock{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,.9fr) minmax(0,.55fr);
  margin-top:clamp(34px,4.6vw,60px);
  border-top:1px solid var(--rule-hard);
  border-left:1px solid var(--rule);
  background:rgba(240,236,226,.35);
}
.tb{
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:11px 13px 12px;
  min-width:0;
}
.tb dt{
  font-family:var(--f-mono);font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
  margin-bottom:5px;
}
.tb dd{
  font-family:var(--f-mono);
  font-size:.755rem;
  line-height:1.5;
  color:var(--ink);
  letter-spacing:.01em;
}
.tb dd span{color:var(--oxide);margin:0 .35em}
.tb--sig dd.signature{
  font-family:"PT Serif",serif;
  font-style:italic;
  font-size:1.02rem;
  color:var(--ink);
  transform:rotate(-1.4deg);
  transform-origin:left center;
}
.tb--sheet dd{font-family:var(--f-pixel);font-size:.72rem}

/* ═══ tape ═══ */
.tape{
  overflow:hidden;
  border-top:1px solid var(--rule-hard);
  border-bottom:1px solid var(--rule-hard);
  background:var(--ink);
  color:var(--paper);
}
.tape__track{
  display:flex;
  align-items:center;
  gap:0;
  width:max-content;
  animation:tape 58s linear infinite;
}
.tape__track span{
  font-family:var(--f-mono);
  font-size:.66rem;
  letter-spacing:.145em;
  text-transform:uppercase;
  padding:9px 0;
  white-space:nowrap;
  display:flex;align-items:center;
}
.tape__track span::after{
  content:"";
  width:4px;height:4px;
  background:#a4553d;
  margin:0 24px;
  flex:none;
}
@keyframes tape{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ═══════════════════════════════════════════════════════════════════════════
   02 — PROFILE
   ═══════════════════════════════════════════════════════════════════════════ */
.split{
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);
  gap:clamp(28px,5vw,84px);
  margin-top:clamp(34px,4.6vw,58px);
}
.split__prose p{
  max-width:62ch;
  text-wrap:pretty;
  margin-bottom:1.15em;
  color:var(--ink-2);
}
.split__prose p+p{font-size:.985rem}
.drop::first-letter{
  float:left;
  font-family:var(--f-display);
  font-size:3.55em;
  line-height:.86;
  padding:.06em .16em 0 0;
  color:var(--oxide);
}
.pull{
  font-family:var(--f-body);
  font-style:italic;
  font-size:clamp(1.12rem,1.7vw,1.42rem);
  line-height:1.55;
  color:var(--ink);
  border-top:1px solid var(--rule);
  padding-top:1.1em;
  margin-top:1.8em;
  max-width:34ch;
}

.spec{
  border-top:1px solid var(--rule-hard);
  align-self:start;
}
.spec > div{
  display:grid;
  grid-template-columns:minmax(84px,.62fr) minmax(0,1fr);
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--rule);
}
.spec dt{
  font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);
  padding-top:.25em;
}
.spec dd{
  font-family:var(--f-mono);
  font-size:.79rem;
  line-height:1.55;
  letter-spacing:.005em;
}
.spec dd.ar-inline{
  font-family:var(--f-ar);
  font-size:1rem;
  line-height:1.95;
  text-align:right;
  letter-spacing:0;
}
.spec dd.live{color:var(--oxide)}
.spec dd.live::before{
  content:"";display:inline-block;
  width:5px;height:5px;background:var(--oxide);
  margin-right:.6em;vertical-align:.08em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   03 — WORK / PLATES
   ═══════════════════════════════════════════════════════════════════════════ */
.plate{
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  gap:clamp(24px,4.2vw,68px);
  align-items:start;
  padding-block:clamp(44px,6vw,84px);
  border-bottom:1px solid var(--rule);
}
.plate:last-of-type{border-bottom:0;padding-bottom:0}
.plate--flip .plate__media{order:2}
.plate--flip .plate__meta{order:1}

.plate__media{
  position:relative;
  display:block;
  padding:9px;
  background:var(--paper-deep);
  border:1px solid var(--rule);
  transition:border-color .3s;
}
.plate__media img{width:100%;height:auto}
.plate__gloss{
  position:absolute;inset:9px;
  width:calc(100% - 18px) !important;
  opacity:0;
  transition:opacity .55s var(--ease);
}
.plate__media:hover,.plate__media:focus-visible{border-color:var(--rule-hard)}
.plate__media:hover .plate__gloss,
.plate__media:focus-visible .plate__gloss{opacity:1}

.mk{position:absolute;width:11px;height:11px;pointer-events:none}
.mk--tl{top:-4px;left:-4px;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.mk--tr{top:-4px;right:-4px;border-top:1px solid var(--ink);border-right:1px solid var(--ink)}
.mk--bl{bottom:-4px;left:-4px;border-bottom:1px solid var(--ink);border-left:1px solid var(--ink)}
.mk--br{bottom:-4px;right:-4px;border-bottom:1px solid var(--ink);border-right:1px solid var(--ink)}

.plate__no{
  display:flex;justify-content:space-between;
  font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
  padding-bottom:10px;
  border-bottom:1px solid var(--rule);
  margin-bottom:16px;
}
.plate__no span:first-child{color:var(--oxide)}
.plate__meta h3{
  font-family:var(--f-display);
  font-weight:400;text-transform:uppercase;
  font-size:clamp(1.5rem,2.9vw,2.35rem);
  line-height:1;
  letter-spacing:-.008em;
  display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;
}
.h3-ar{
  font-family:var(--f-ar);
  font-size:.72em;
  letter-spacing:0;
  color:var(--oxide);
  line-height:1.6;
}
.plate__ar{
  font-family:var(--f-ar);
  font-size:.9rem;
  line-height:2;
  color:var(--muted);
  margin-top:.35rem;
  text-align:right;
}
.plate__desc{
  margin-top:.85rem;
  font-size:.97rem;
  line-height:1.68;
  color:var(--ink-2);
  max-width:44ch;
}
.plate__spec{margin-top:1.2rem;border-top:1px solid var(--rule)}
.plate__spec > div{
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  gap:12px;
  padding:7px 0;
  border-bottom:1px solid var(--rule-soft);
}
.plate__spec dt{
  font-family:var(--f-mono);font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding-top:.2em;
}
.plate__spec dd{font-family:var(--f-mono);font-size:.735rem;line-height:1.55}
.link{
  display:inline-flex;align-items:center;gap:.55em;
  margin-top:1.15rem;
  font-family:var(--f-mono);font-size:.72rem;
  letter-spacing:.06em;
  color:var(--oxide);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .25s,color .25s;
  word-break:break-word;
}
.link .arw{width:.8em;height:.8em}
.link:hover{border-color:var(--oxide)}
.link:hover .arw{transform:translate(2px,-2px)}

/* ═══════════════════════════════════════════════════════════════════════════
   04 — ARCHIVE
   ═══════════════════════════════════════════════════════════════════════════ */
.index{margin-top:clamp(26px,3.4vw,42px);border-top:1px solid var(--rule-hard)}
.index li{border-bottom:1px solid var(--rule)}
.index a{
  display:grid;
  grid-template-columns:4.2rem minmax(0,1.5fr) minmax(2rem,.7fr) 9.5rem 1.2rem;
  align-items:start;
  gap:clamp(10px,1.6vw,22px);
  padding:16px 2px 17px;
  transition:background .3s var(--ease),padding .3s var(--ease);
}
.index a:hover{background:rgba(122,50,38,.055);padding-left:.6rem;padding-right:.6rem}
.i__no{font-family:var(--f-pixel);font-size:.6rem;color:var(--oxide);letter-spacing:.02em;padding-top:.3rem}
.i__name{
  font-family:var(--f-display);font-size:clamp(.98rem,1.35vw,1.13rem);
  text-transform:uppercase;letter-spacing:.005em;
  display:flex;flex-direction:column;gap:.15em;
}
.i__sub{
  font-family:var(--f-body);font-size:.83rem;
  text-transform:none;letter-spacing:0;
  color:#4f4e43;line-height:1.45;
  font-style:italic;
}
.i__leader{border-bottom:1px dotted var(--rule-hard);margin-top:1.02rem}
.i__lang{
  font-family:var(--f-mono);font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;
  text-align:right;padding-top:.34rem;
}
.index a .arw{width:.86em;height:.86em;color:var(--oxide);margin-top:.55rem;justify-self:end}
.index a:hover .arw{transform:translate(3px,-3px)}

/* ═══════════════════════════════════════════════════════════════════════════
   05 — PRACTICE
   ═══════════════════════════════════════════════════════════════════════════ */
.practice{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(26px,4.6vw,72px);
  margin-top:clamp(34px,4.6vw,56px);
}
.col{border-top:1px solid var(--rule-hard);padding-top:18px}
.col__head{display:flex;align-items:baseline;gap:.9rem;margin-bottom:1.3rem}
.col__head h3{
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.15rem,1.9vw,1.5rem);letter-spacing:.005em;
}
.items{display:grid;gap:0;counter-reset:item}
.items li{
  counter-increment:item;
  display:grid;
  grid-template-columns:1.6rem minmax(0,1fr);
  column-gap:13px;
  padding:16px 0 0;
}
.items li::before{
  content:counter(item,decimal-leading-zero);
  grid-row:1 / span 2;
  font-family:var(--f-pixel);
  font-size:.62rem;
  color:var(--oxide);
  padding-top:.16rem;
}
.items h4{
  font-family:var(--f-mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);
  margin-bottom:.35rem;
}
.items p{font-size:.93rem;line-height:1.68;color:var(--ink-2);max-width:42ch}
.col__foot{
  margin-top:1.3rem;
  font-style:italic;
  font-size:.92rem;
  line-height:1.65;
  color:var(--muted);
  max-width:40ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   06 — CONTACT
   ═══════════════════════════════════════════════════════════════════════════ */
.sheet--crt{padding-bottom:clamp(48px,6vw,84px)}
.contact{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px,4.4vw,64px);
  align-items:start;
  margin-top:clamp(30px,4vw,50px);
}
.contact__lede{
  font-size:clamp(1.02rem,1.3vw,1.16rem);
  line-height:1.65;
  color:var(--ink-2);
  max-width:38ch;
}
.lines{margin-top:1.6rem;border-top:1px solid var(--rule)}
.lines li{
  display:grid;
  grid-template-columns:62px minmax(0,1fr);
  gap:14px;
  align-items:baseline;
  padding:11px 0;
  border-bottom:1px solid var(--rule);
  font-family:var(--f-mono);
  font-size:.84rem;
  word-break:break-word;
}
.lbl{
  font-family:var(--f-mono);font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.lines a{border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.lines a:hover{color:var(--oxide);border-color:var(--oxide)}
.contact__note{
  margin-top:1.15rem;font-size:.85rem;font-style:italic;color:var(--muted);
}

/* the terminal */
.crt{
  background:var(--crt);
  border:1px solid #000;
  color:var(--phos);
  font-family:var(--f-mono);
  box-shadow:0 18px 40px -28px rgba(20,21,15,.9);
  position:relative;
  overflow:hidden;
}
.crt::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
  opacity:.55;
  z-index:2;
}
.crt__bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 12px;
  background:var(--crt-2);
  border-bottom:1px solid #000;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--phos-dim);
  position:relative;z-index:3;
}
.crt__body{
  padding:14px 14px 8px;
  height:clamp(172px,20vw,208px);
  overflow-y:auto;
  font-size:.82rem;
  line-height:1.66;
  position:relative;z-index:3;
  scrollbar-width:thin;
  scrollbar-color:var(--phos-dim) transparent;
}
.crt__body::-webkit-scrollbar{width:6px}
.crt__body::-webkit-scrollbar-thumb{background:var(--phos-dim)}
.crt__line{white-space:pre-wrap;word-break:break-word}
.crt__line--dim{color:var(--phos-dim)}
.crt__line b{color:var(--phos);font-weight:400;border-bottom:1px dotted var(--phos-dim)}
.crt__line .ok{color:#a9bd8c}
.crt__line .hl{color:#d9c9a8}
.crt__form{
  display:flex;align-items:center;gap:.5em;
  padding:10px 14px 12px;
  border-top:1px solid #000;
  position:relative;z-index:3;
  background:var(--crt-2);
}
.crt__ps1{color:var(--phos-dim);font-size:.76rem;white-space:nowrap}
.crt__form input{
  flex:1;min-width:0;
  background:transparent;border:0;outline:0;
  color:var(--phos);
  font-family:var(--f-mono);font-size:.78rem;
  padding:0;
  caret-color:transparent;
}
.crt__form input::placeholder{color:var(--phos-dim);opacity:.55}
.crt__caret{
  width:7px;height:13px;background:var(--phos);
  animation:blink 1.05s steps(1) infinite;
  flex:none;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.crt__form:focus-within .crt__caret{animation-duration:.7s}
.crt__hints{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:0 14px 14px;
  position:relative;z-index:3;
}
.crt__hints button{
  font-family:var(--f-mono);font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:#9aa383;
  background:transparent;
  border:1px solid rgba(198,205,176,.34);
  padding:4px 8px;
  cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.crt__hints button:hover{
  color:var(--crt);background:var(--phos);border-color:var(--phos);
}

/* ═══ colophon ═══ */
.colophon{
  max-width:calc(var(--maxw) + var(--pad)*2);
  margin:0 auto;
  padding:0 var(--pad) 56px;
}
.colophon__sheet{
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  padding:12px 0;
  border-top:1px solid var(--rule-hard);
  border-bottom:1px solid var(--rule);
}
.colophon__notes{
  margin-top:22px;
  max-width:64ch;
  font-size:.87rem;
  line-height:1.8;
  color:var(--muted);
}
.colophon__notes b{font-weight:700;color:var(--ink-2)}
.colophon__top{
  margin-top:20px;
  font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.colophon__top a{color:var(--oxide);border-bottom:1px solid transparent}
.colophon__top a:hover{border-color:var(--oxide)}

/* ═══ reveal on scroll ═══ */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* ═══ load choreography ═══ */
@keyframes stampIn{
  from{transform:translateY(112%) scale(1.04);opacity:.001;filter:blur(6px)}
  to{transform:none;opacity:1;filter:blur(0)}
}
@keyframes riseIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes sealIn{
  from{opacity:0;transform:scale(.9) rotate(-7deg)}
  to{opacity:.92;transform:none}
}
@keyframes sealSpin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:no-preference){
  .name .line > span{
    display:block;
    animation:stampIn 1.05s var(--ease) both;
  }
  .name .line--2 > span{animation-delay:.10s}
  .name__ar{animation:riseIn .9s .45s var(--ease) both}
  .lede{animation:riseIn .9s .55s var(--ease) both}
  .hero__act{animation:riseIn .9s .65s var(--ease) both}
  .seal{animation:sealIn 1.1s .35s var(--ease) both}
  .seal__spin{animation:sealSpin 70s linear infinite}
  .titleblock .tb{animation:riseIn .7s var(--ease) both}
  .titleblock .tb:nth-child(1){animation-delay:.62s}
  .titleblock .tb:nth-child(2){animation-delay:.68s}
  .titleblock .tb:nth-child(3){animation-delay:.74s}
  .titleblock .tb:nth-child(4){animation-delay:.80s}
  .titleblock .tb:nth-child(5){animation-delay:.86s}
  .titleblock .tb:nth-child(6){animation-delay:.92s}
  .hero__slug{animation:riseIn .6s .05s var(--ease) both}
  .plate__media{transition:border-color .3s,transform .6s var(--ease)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .titleblock{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  :root{--rail:60px}
  .name{font-size:clamp(2.9rem,13vw,8rem)}
  .split{grid-template-columns:1fr;gap:34px}
  .plate{grid-template-columns:1fr;gap:22px;align-items:start}
  .plate--flip .plate__media{order:0}
  .plate--flip .plate__meta{order:0}
  .contact{grid-template-columns:1fr;gap:34px}
  .practice{grid-template-columns:1fr;gap:38px}
  .spine{display:none}
  .hero__side{align-items:flex-start;gap:12px}
  .seal{max-width:132px}
  .spec dd.ar-inline{text-align:right}
}
@media (max-width:760px){
  :root{--rail:0px;--sheet-pad:clamp(46px,9vw,72px)}
  body{padding-left:0}
  .rail{
    top:auto;bottom:0;left:0;right:0;width:100%;height:54px;
    flex-direction:row;justify-content:space-between;
    padding:0 16px;
    border-right:0;border-top:1px solid var(--rule-hard);
    background:rgba(233,229,218,.94);
    backdrop-filter:blur(8px);
  }
  .rail__mark{width:26px;height:26px;font-size:.66rem}
  .rail__nav{flex-direction:row;gap:16px}
  .rail__nav a{font-size:.58rem;padding:11px 5px}
  .rail__nav a::after{left:50%;top:auto;bottom:-6px;transform:translateX(-50%) scale(0)}
  .rail__nav a.is-active::after{transform:translateX(-50%) scale(1)}
  .rail__yr{display:none}
  body{padding-bottom:54px}
  .hero__grid{grid-template-columns:1fr;gap:22px}
  .hero__side{
    flex-direction:row;align-items:center;justify-content:space-between;
    order:-1;
  }
  .seal{max-width:82px;order:2}
  .status{order:1}
  .name{font-size:clamp(2.55rem,14.4vw,4.6rem);letter-spacing:-.03em}
  .name__ar{text-align:left;margin-left:0;font-size:1rem}
  .hero__cols{grid-template-columns:1fr;align-items:start;gap:18px}
  .hero__act{flex-direction:row;flex-wrap:wrap}
  .btn{flex:1;justify-content:space-between;min-width:132px}
  .titleblock{grid-template-columns:1fr 1fr}
  .tb--sig,.tb--sheet{grid-column:span 1}
  .head{grid-template-columns:2.4rem minmax(0,1fr);row-gap:6px}
  .head__meta{grid-column:2;text-align:left;padding-bottom:0}
  .head h2{max-width:none;font-size:clamp(1.35rem,6.2vw,2rem)}
  .index a{
    grid-template-columns:3.1rem minmax(0,1fr) 1.4rem;
    row-gap:2px;
    padding:13px 2px;
  }
  .i__leader{display:none}
  .i__lang{grid-column:2;font-size:.6rem;color:var(--muted)}
  .index a .arw{grid-row:1;grid-column:3;justify-self:end}
  .i__sub{font-size:.79rem}
  .crt__body{height:176px;font-size:.76rem}
  .crt__hints{gap:7px}
  .crt__hints button{padding:8px 10px;font-size:.66rem}
  .crt__ps1{font-size:.7rem}
  .crt__form input{font-size:.74rem}
  .folio{transform:none}
  .plate__desc,.items p{max-width:none}
  .lines li{grid-template-columns:56px minmax(0,1fr);font-size:.75rem}
}
@media (max-width:380px){
  .hero__act{flex-direction:column;width:100%}
  .btn{width:100%}
}
@media (max-width:420px){
  .titleblock{grid-template-columns:1fr}
  .hero__slug .mono:last-child{display:none}
  .lines li{grid-template-columns:1fr;gap:2px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}

/* ═══ print: the dossier goes to paper ═══ */
@media print{
  body{padding:0;background:#fff;font-size:10.5pt}
  body::after,.rail,.progress,.tape,.crt__hints,.crt__form,.mk,.plate__gloss{display:none !important}
  .name{font-size:52pt}
  .sheet,.hero{padding-block:16pt;break-inside:avoid}
  .crt{background:#fff;color:#000;border:1pt solid #000}
  .crt__body{height:auto;color:#000}
  a{text-decoration:underline}
}