/* ============================================================
   PAGE FURNITURE — Analog, Risograph, Studio, shared bits
   ============================================================ */

/* ---------- shared eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--realm-accent);margin:0 0 10px;
}
[dir="rtl"] .eyebrow{font-family:var(--arabic-display);letter-spacing:0;font-weight:700;}
.rule{height:1px;background:linear-gradient(90deg,var(--realm-ink),transparent);opacity:.3;margin:12px 0;}
.folio{
  position:absolute;bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--realm-ink);opacity:.5;
}
.page.left .folio{left:clamp(20px,3.2vh,42px);}
.page.right .folio{right:clamp(20px,3.2vh,42px);}

/* texture placeholder (project shots, scene art) */
.ph{
  position:relative;overflow:hidden;border-radius:2px;
  background:
    repeating-linear-gradient(45deg, color-mix(in oklch, var(--realm-accent) 16%, transparent) 0 8px, transparent 8px 16px),
    color-mix(in oklch, var(--realm-paper) 70%, var(--realm-ink) 6%);
  border:1px solid color-mix(in oklch, var(--realm-ink) 18%, transparent);
  display:grid;place-items:center;
}
.ph span{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in oklch, var(--realm-ink) 70%, transparent);
  background:var(--realm-paper);padding:4px 8px;border-radius:2px;
}

/* ============================================================
   ANALOG — letterpress / broadsheet
   ============================================================ */
.analog h1,.analog h2,.analog h3{font-family:var(--serif-display);font-weight:400;color:var(--realm-ink);}
[dir="rtl"] .analog h1,[dir="rtl"] .analog h2,[dir="rtl"] .analog h3{font-family:var(--arabic-display);}
.analog{color:var(--realm-ink);}

.masthead{text-align:center;border-bottom:3px double var(--realm-ink);padding-bottom:10px;margin-bottom:14px;}
.masthead .kicker{font-family:var(--mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;opacity:.7;}
.masthead h1{font-size:clamp(30px,5.4vh,52px);line-height:.98;margin:6px 0 4px;letter-spacing:-.01em;}
.masthead .sub{font-style:italic;font-size:14px;opacity:.8;}

.cols{column-count:2;column-gap:22px;column-rule:1px solid color-mix(in oklch,var(--realm-ink) 22%, transparent);
  font-size:13.5px;line-height:1.62;text-align:justify;hyphens:auto;flex:1;overflow:hidden;}
.cols p{margin:0 0 10px;}
.cols p:first-letter{}
.dropcap::first-letter{
  font-family:var(--serif-display);float:left;font-size:3.3em;line-height:.74;padding:6px 8px 0 0;color:var(--realm-accent);
}
[dir="rtl"] .dropcap::first-letter{float:right;padding:6px 0 0 8px;}

/* ink date stamp */
.stamp{
  display:inline-block;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.08em;
  color:var(--realm-accent);border:2px solid var(--realm-accent);border-radius:4px;
  padding:4px 9px;transform:rotate(-4deg);
  box-shadow:0 0 0 2px color-mix(in oklch,var(--realm-accent) 20%, transparent) inset;
  opacity:.92;
}
.stamp.round{border-radius:999px;transform:rotate(3deg);}

/* timeline columns */
.timeline{display:flex;flex-direction:column;gap:14px;flex:1;overflow:hidden;}
.tl-item{border-top:1px solid color-mix(in oklch,var(--realm-ink) 24%, transparent);padding-top:10px;}
.tl-item h3{font-size:18px;margin:8px 0 2px;}
.tl-item .role{font-style:italic;font-size:13px;opacity:.8;}
.tl-item ul{margin:8px 0 0;padding-inline-start:16px;font-size:12px;line-height:1.5;}
.tl-item li{margin-bottom:4px;}

/* skills wheel */
.wheel-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:10px;}
.wheel{position:relative;width:min(280px,38vh);aspect-ratio:1;}
.wheel svg{width:100%;height:100%;}
.wheel .hub{
  position:absolute;inset:0;margin:auto;width:34%;aspect-ratio:1;border-radius:50%;
  display:grid;place-content:center;text-align:center;
  background:var(--realm-paper);border:2px solid var(--realm-ink);
}
.wheel .hub b{font-family:var(--serif-display);font-size:16px;line-height:1;}
.wheel .hub small{font-family:var(--mono);font-size:8px;letter-spacing:.2em;opacity:.6;}

/* diploma */
.diploma{
  border:2px solid var(--realm-ink);padding:16px;text-align:center;position:relative;
  background:color-mix(in oklch,var(--realm-paper) 88%, #fff);
}
.diploma::before,.diploma::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--realm-accent);}
.diploma::before{top:6px;left:6px;border-right:none;border-bottom:none;}
.diploma::after{bottom:6px;right:6px;border-left:none;border-top:none;}
.diploma h3{font-size:20px;margin:6px 0;}
.diploma .seal{
  width:54px;height:54px;border-radius:50%;margin:8px auto 0;display:grid;place-items:center;
  border:2px dashed var(--realm-accent);color:var(--realm-accent);font-family:var(--mono);font-size:8px;
  letter-spacing:.1em;text-align:center;line-height:1.1;
}

/* TOC of 7 realms */
.toc{display:flex;flex-direction:column;gap:8px;flex:1;}
.toc-item{
  display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:4px;
  border:1px solid transparent;transition:.2s;text-align:start;
}
.toc-item:hover{border-color:color-mix(in oklch,var(--realm-ink) 24%, transparent);background:color-mix(in oklch,var(--realm-paper) 50%, #fff);}
.toc-swatch{width:30px;height:30px;border-radius:4px;flex:none;border:1px solid rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);}
.toc-num{font-family:var(--mono);font-size:11px;opacity:.5;width:22px;}
.toc-name{font-family:var(--serif-display);font-size:17px;flex:1;}
[dir="rtl"] .toc-name{font-family:var(--arabic-display);}
.toc-tag{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.55;}
.toc-item.live .toc-name{color:var(--realm-accent);}
.toc-item.soon{opacity:.55;}

/* ============================================================
   RISOGRAPH — duotone halftone
   ============================================================ */
.riso{position:relative;color:var(--realm-ink);}
.riso h1,.riso h2,.riso h3{font-family:var(--grotesk);font-weight:700;letter-spacing:-.02em;}
[dir="rtl"] .riso h1,[dir="rtl"] .riso h2,[dir="rtl"] .riso h3{font-family:var(--arabic-display);}
.riso .eyebrow{font-family:var(--grotesk);font-weight:600;}
/* halftone dot overlay */
.riso-grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;mix-blend-mode:multiply;opacity:.5;
  background-image:radial-gradient(color-mix(in oklch,var(--realm-accent) 80%, transparent) 26%, transparent 27%);
  background-size:5px 5px;
}
.riso-mis{ /* misregistration accent block */
  position:relative;
}
.riso-title{font-size:clamp(34px,7vh,72px);line-height:.92;text-transform:uppercase;color:var(--realm-accent);
  text-shadow:3px 3px 0 color-mix(in oklch,var(--realm-accent2) 90%, transparent);}

.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:1;align-content:start;}
.proj-card{
  position:relative;display:flex;flex-direction:column;cursor:pointer;
  border:2px solid var(--realm-ink);background:var(--realm-paper);
  transition:transform .25s cubic-bezier(.3,.8,.3,1), box-shadow .25s;
  overflow:hidden;
}
.proj-card:hover{transform:translateY(-5px);box-shadow:6px 6px 0 var(--realm-accent);}
.proj-thumb{aspect-ratio:4/3;position:relative;overflow:hidden;
  background:
    repeating-linear-gradient(0deg, color-mix(in oklch,var(--realm-accent) 22%, transparent) 0 3px, transparent 3px 6px),
    color-mix(in oklch,var(--realm-accent2) 30%, var(--realm-paper));}
.proj-thumb .tagline{position:absolute;inset:auto 0 0 0;padding:8px;font-family:var(--grotesk);font-weight:700;
  font-size:13px;color:#fff;background:linear-gradient(transparent,rgba(20,15,10,.7));}
.proj-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.02) contrast(1.02);}
.proj-meta{padding:10px 12px;}
.proj-meta .disc{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--realm-accent);}
.proj-meta h3{font-size:16px;margin:3px 0 0;color:var(--realm-ink);}
.proj-card.placeholder{border-style:dashed;opacity:.78;cursor:default;}
.proj-card.placeholder:hover{transform:none;box-shadow:none;}
.soon-ribbon{
  position:absolute;top:10px;inset-inline-start:-30px;z-index:6;
  background:var(--realm-accent2);color:#11302c;
  font-family:var(--grotesk);font-weight:700;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 34px;transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* case-study modal */
.cs-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(20,12,5,.62);backdrop-filter:blur(4px);
  display:grid;place-items:center;padding:24px;opacity:0;animation:fadeIn .3s forwards;
}
@keyframes fadeIn{to{opacity:1;}}
.cs-modal{
  width:min(880px,94vw);max-height:90vh;overflow:auto;border-radius:6px;
  background:var(--realm-paper);color:var(--realm-ink);box-shadow:0 40px 80px -20px rgba(0,0,0,.6);
  transform:translateY(14px);animation:rise .4s cubic-bezier(.3,.9,.3,1) forwards;
}
@keyframes rise{to{transform:translateY(0);}}
.cs-hero{aspect-ratio:16/7;position:relative;overflow:hidden;
  background:repeating-linear-gradient(45deg,color-mix(in oklch,var(--realm-accent) 20%,transparent) 0 10px,transparent 10px 20px),
  color-mix(in oklch,var(--realm-accent2) 24%, var(--realm-paper));}
.cs-body{padding:clamp(20px,3vw,38px);}
.cs-body .disc{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--realm-accent);}
.cs-body h2{font-family:var(--grotesk);font-weight:700;font-size:clamp(26px,4vw,40px);margin:6px 0 4px;}
.cs-body .stack{font-family:var(--mono);font-size:11px;opacity:.7;margin-bottom:18px;}
.cs-body p{font-size:15px;line-height:1.7;margin:0 0 14px;max-width:62ch;}
.cs-metrics{display:flex;gap:24px;flex-wrap:wrap;margin:20px 0;}
.cs-metric b{display:block;font-family:var(--grotesk);font-size:30px;color:var(--realm-accent);}
.cs-metric span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;}
.cs-close{position:absolute;top:14px;inset-inline-end:14px;width:38px;height:38px;border-radius:50%;
  background:rgba(20,12,5,.5);color:#fff;display:grid;place-items:center;z-index:3;font-size:18px;}
.cs-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;}
.cs-links a{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-decoration:none;
  border:1.5px solid var(--realm-ink);color:var(--realm-ink);padding:8px 14px;border-radius:3px;transition:.2s;}
.cs-links a:hover{background:var(--realm-ink);color:var(--realm-paper);}

/* ============================================================
   STUDIO + CONTACT
   ============================================================ */
.studio{position:relative;display:flex;flex-direction:column;height:100%;}
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex:1;align-content:center;}
.relic{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.relic .obj{width:100%;aspect-ratio:1;border-radius:6px;display:grid;place-items:center;border:1px solid rgba(0,0,0,.12);}
.relic small{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;}

/* contact form (paper) */
.form-paper{display:flex;flex-direction:column;gap:11px;flex:1;justify-content:center;}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:4px;opacity:.75;}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--serif-text);font-size:14px;color:var(--realm-ink);
  background:transparent;border:none;border-bottom:1.5px solid color-mix(in oklch,var(--realm-ink) 40%, transparent);
  padding:6px 2px;outline:none;transition:.2s;
}
[dir="rtl"] .field input,[dir="rtl"] .field textarea,[dir="rtl"] .field select{font-family:var(--arabic-text);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--realm-accent);}
.field textarea{resize:none;height:54px;}
.field.err input,.field.err textarea,.field.err select{border-color:#c0392b;}
.field .msg{font-family:var(--mono);font-size:9px;color:#c0392b;margin-top:3px;min-height:11px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.submit-stamp{
  align-self:flex-start;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--realm-accent);border:2.5px solid var(--realm-accent);border-radius:5px;padding:10px 22px;
  transform:rotate(-2deg);transition:.2s;background:transparent;
}
.submit-stamp:hover{transform:rotate(0) scale(1.03);background:color-mix(in oklch,var(--realm-accent) 12%, transparent);}
.sent-stamp{
  position:absolute;inset:0;display:grid;place-items:center;z-index:10;pointer-events:none;
}
.sent-stamp .ink{
  font-family:var(--mono);font-weight:700;font-size:clamp(22px,4vw,34px);letter-spacing:.06em;text-transform:uppercase;
  color:var(--realm-accent);border:5px solid var(--realm-accent);border-radius:8px;padding:14px 26px;
  transform:rotate(-9deg) scale(0);opacity:0;text-align:center;
  box-shadow:0 0 0 3px color-mix(in oklch,var(--realm-accent) 22%, transparent) inset;
  animation:stampDown .5s cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes stampDown{60%{transform:rotate(-9deg) scale(1.12);opacity:1;}100%{transform:rotate(-9deg) scale(1);opacity:.95;}}

/* dust motes (analog ambient) */
.motes{position:absolute;inset:0;pointer-events:none;z-index:25;overflow:hidden;}
.mote{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(196,96,61,.5);
  filter:blur(.4px);animation:float linear infinite;}
@keyframes float{0%{transform:translateY(20px) translateX(0);opacity:0;}10%{opacity:.7;}90%{opacity:.5;}100%{transform:translateY(-90px) translateX(14px);opacity:0;}}
@media (prefers-reduced-motion:reduce){.mote{display:none;}}