/* ============================================================
   P.S. — the personal study of Pedrum Shokouhi
   Design system: paper & ink, one orange, quoted labels,
   Twombly marks, museum spacing.
   ============================================================ */

:root {
  --paper:   #F6F4ED;
  --card:    #FCFBF6;
  --ink:     #121110;
  --ink-2:   #55524B;
  --muted:   #8B877C;
  --line:    #DCD8CB;
  --line-2:  #EAE7DD;
  --accent:  #FF4D00;
  --dark:    #0E0D0C;
  --dark-2:  #171614;
  --serif:   Georgia, "Times New Roman", serif;
  --sans:    "Helvetica Neue", Helvetica, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: #fff; }

a { color: inherit; }

img { max-width: 100%; }

/* ---------- the industrial stripe (Abloh) ---------- */
.stripe {
  height: 5px;
  background: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 10px,
    transparent 10px 20px
  );
}

/* ---------- quoted labels ---------- */
.tag {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
}
.tag::before { content: "\201C"; color: var(--accent); margin-right: 1px; }
.tag::after  { content: "\201D"; color: var(--accent); margin-left: 1px; }
.tag.plain::before, .tag.plain::after { content: none; }
.tag.dim { color: var(--muted); }

/* ---------- top nav ---------- */
.nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 26px clamp(20px, 5vw, 56px) 22px;
  border-bottom: 1px solid var(--line);
}
.nav .mark {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
}
.nav .mark i { font-style: normal; color: var(--accent); }
.nav ul {
  display: flex;
  gap: clamp(16px, 3vw, 34px);
  list-style: none;
  align-items: baseline;
}
.nav ul a {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav ul a:hover { color: var(--ink); border-color: var(--accent); }
.nav ul a.door { color: var(--accent); }
.nav ul a.door::before { content: "\201C"; }
.nav ul a.door::after  { content: "\201D"; }
.nav ul a.active { color: var(--ink); border-color: var(--ink); }

.nav ul a.lab {
  border: 1.5px solid var(--ink);
  padding: 9px 14px 8px;
  border-radius: 2px;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.nav ul a.lab:hover {
  color: var(--on-dark);
  border-color: var(--accent);
  border-bottom-color: var(--accent);
  transform: rotate(-2deg) translateY(-1px);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  background: repeating-linear-gradient(-45deg, var(--accent) 0 10px, var(--dark) 10px 20px);
  background-size: 28px 28px;
  animation: labStripes .5s linear infinite;
}
@keyframes labStripes { to { background-position: 28px 0; } }
.nav ul a.lab.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

@media (max-width: 700px) {
  .nav { flex-wrap: wrap; gap: 14px 0; padding: 18px 20px 14px; }
  .nav .mark { width: 100%; font-size: 22px; }
  .nav ul { width: 100%; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
  .nav ul a { font-size: 10px; letter-spacing: .13em; white-space: nowrap; }
  .nav ul a.lab { padding: 7px 11px 6px; }
}



/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  margin-top: clamp(60px, 10vw, 120px);
  padding: 34px clamp(20px, 5vw, 56px) 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  justify-content: space-between;
  align-items: baseline;
}
.footer .cols { display: flex; flex-wrap: wrap; gap: 14px 34px; }
.footer span, .footer a {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.footer a:hover { color: var(--accent); }

/* ---------- reveal on scroll ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- twombly scribble stroke animation ---------- */
.scribble path {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}
.in .scribble path, .scribble.go path {
  animation: draw 1.6s ease forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }


/* ============================================================
   THE LIGHT SWITCH — seven themes on one set of tokens
   ============================================================ */
:root[data-theme="gallery"] {
  --paper: #FFFFFF; --card: #FAFAF8; --ink: #0C0C0C; --ink-2: #4A4A4A;
  --muted: #9A9A9A; --line: #E4E4E0; --line-2: #F0F0EC;
  --accent: #E8380D; --dark: #0C0C0C; --dark-2: #191918;
}
:root[data-theme="night"] {
  --paper: #141312; --card: #1C1A18; --ink: #F1EDE2; --ink-2: #C9C4B6;
  --muted: #8F8A7D; --line: #33302B; --line-2: #262421;
  --accent: #FF4D00; --dark: #060505; --dark-2: #0E0D0C;
}
:root[data-theme="board"] {
  --paper: #232A27; --card: #2A322E; --ink: #EDE7D8; --ink-2: #C6BFAE;
  --muted: #8D9187; --line: #3D4641; --line-2: #313A35;
  --accent: #FF6E4F; --dark: #121614; --dark-2: #1A1F1C;
}
:root[data-theme="blueprint"] {
  --paper: #0F2C4E; --card: #14365D; --ink: #E8F1FD; --ink-2: #BCCFE8;
  --muted: #7E97B5; --line: #2C4E77; --line-2: #1E3D63;
  --accent: #FFC94B; --dark: #071A32; --dark-2: #0C2440;
}
:root[data-theme="riso"] {
  --paper: #F6F1E5; --card: #EFE9D9; --ink: #20359F; --ink-2: #44519F;
  --muted: #8890C4; --line: #C9CBE2; --line-2: #DEDFEC;
  --accent: #FF4438; --dark: #16246E; --dark-2: #1D2D85;
}
:root[data-theme="terminal"] {
  --paper: #0A0D0A; --card: #101710; --ink: #B7FFC9; --ink-2: #8FDCA6;
  --muted: #4E7A5C; --line: #1F3826; --line-2: #16281B;
  --accent: #4AFF7F; --dark: #030503; --dark-2: #0A100A;
}

/* theme flavor */
#themeFx { position: fixed; inset: 0; pointer-events: none; z-index: 300; display: none; }
:root[data-theme="terminal"] #themeFx { display: block; mix-blend-mode: multiply;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.24) 0 1px, transparent 1px 3px); }
:root[data-theme="terminal"] body { text-shadow: 0 0 7px rgba(74,255,127,.16); }
:root[data-theme="riso"] h1, :root[data-theme="riso"] h2, :root[data-theme="riso"] h3 {
  text-shadow: 2px 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
:root[data-theme="board"] body { text-shadow: 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent); }

/* theme switch: view transition */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: none; }

/* the light switch button */
#themeBtn { position: fixed; left: 18px; bottom: 18px; z-index: 90; width: 44px; height: 44px;
  border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 25%, transparent);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
#themeBtn:hover { transform: translateY(-2px) rotate(18deg); }
#themeBtn.open { transform: rotate(140deg); }
#themeBtn .tb-disc { width: 24px; height: 24px; border-radius: 50%; display: block;
  border: 1.5px solid var(--ink); }
#themePanel { position: fixed; left: 18px; bottom: 74px; z-index: 90;
  width: min(320px, calc(100vw - 36px)); background: var(--paper); border: 1.5px solid var(--ink);
  border-radius: 5px; padding: 18px 14px 12px;
  box-shadow: 0 24px 70px color-mix(in srgb, var(--ink) 35%, transparent);
  opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
#themePanel.open { opacity: 1; transform: none; pointer-events: auto; }
#themePanel .th-tag { display: inline-block; font-family: var(--sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: .22em; color: var(--paper); background: var(--ink); border-radius: 999px;
  padding: 4px 11px; }
#themePanel .th-lede { font-style: italic; color: var(--ink-2); font-size: 13.5px; margin: 9px 2px 10px; }
#themePanel .th-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: none; border: 1px solid transparent; border-radius: 4px; padding: 8px 9px; cursor: pointer;
  opacity: 0; transform: translateX(-8px); transition: opacity .35s ease, transform .35s ease,
    border-color .15s ease, background .15s ease; }
#themePanel.open .th-row { opacity: 1; transform: none; }
#themePanel .th-row:hover { border-color: var(--line); background: var(--card); }
#themePanel .th-row.on { border-color: var(--accent); background: var(--card); }
#themePanel .th-sw { display: flex; flex: none; }
#themePanel .th-sw i { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--ink);
  display: block; }
#themePanel .th-sw i + i { margin-left: -5px; }
#themePanel .th-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#themePanel .th-tx b { font-family: var(--serif); font-size: 15.5px; font-weight: 700; color: var(--ink);
  letter-spacing: -.01em; }
#themePanel .th-tx small { font-family: var(--sans); font-size: 10.5px; color: var(--muted);
  line-height: 1.45; letter-spacing: .02em; }
#themePanel .th-dot { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; flex: none;
  background: transparent; }
#themePanel .th-row.on .th-dot { background: var(--accent); }
@media (max-width: 700px) { #themeBtn { bottom: 16px; left: 14px; } #themePanel { left: 14px; bottom: 70px; } }

/* ============ living themes ============ */
:root[data-theme="sim"] {
  --paper: #06080F; --card: #0C1120; --ink: #D7E4FF; --ink-2: #A9BBDD;
  --muted: #5F6E8F; --line: #1B2740; --line-2: #121B30;
  --accent: #00E5FF; --dark: #02030A; --dark-2: #080D1A;
}
:root[data-theme="aurora"] {
  --paper: #0B1024; --card: #121736; --ink: #EDEFFC; --ink-2: #C3C8E8;
  --muted: #7A81AC; --line: #252B52; --line-2: #191E3E;
  --accent: #7DF5C6; --dark: #05081A; --dark-2: #0C1130;
}
:root[data-theme="rain"] {
  --paper: #171C23; --card: #1E242D; --ink: #E6EBF2; --ink-2: #BDC7D4;
  --muted: #77828F; --line: #2A323D; --line-2: #222932;
  --accent: #6FB7FF; --dark: #0C0F14; --dark-2: #12161C;
}
#themeBg { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none;
  width: 100vw; height: 100vh; }
:root[data-theme="sim"] h1, :root[data-theme="sim"] .lab-head h1 em {
  text-shadow: 2px 0 0 color-mix(in srgb, var(--accent) 40%, transparent),
    -2px 0 0 rgba(255,61,223,.30); }
:root[data-theme="sim"] body { text-shadow: 0 0 8px rgba(0,229,255,.07); }
:root[data-theme="aurora"] .exp, :root[data-theme="aurora"] .door-panel,
:root[data-theme="rain"] .exp {
  backdrop-filter: blur(2px); }
:root[data-theme="sim"] .exp, :root[data-theme="aurora"] .exp, :root[data-theme="rain"] .exp {
  background: color-mix(in srgb, var(--paper) 78%, transparent); }
#themePanel { max-height: min(72vh, 620px); overflow-y: auto; }
#themePanel .th-live { font-style: normal; font-family: var(--sans); font-size: 8.5px;
  font-weight: 700; letter-spacing: .14em; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 1.5px 6px; margin-left: 6px; vertical-align: 2px;
  animation: bootBlinkTh 1.4s steps(2) infinite; }
@keyframes bootBlinkTh { 50% { opacity: .35; } }

/* ============ playroom + swarm ============ */
:root[data-theme="play"] {
  --paper: #F2EDE2; --card: #FAF6EC; --ink: #26221B; --ink-2: #57503F;
  --muted: #97907E; --line: #DFD8C8; --line-2: #EAE4D6;
  --accent: #FF5C39; --dark: #1B1812; --dark-2: #26221B;
}
:root[data-theme="swarm"] {
  --paper: #050505; --card: #111111; --ink: #EDEDED; --ink-2: #B9B9B9;
  --muted: #6E6E6E; --line: #262626; --line-2: #1A1A1A;
  --accent: #FF2E63; --dark: #000000; --dark-2: #0D0D0D;
}
:root[data-theme="play"] .exp { background: color-mix(in srgb, var(--paper) 82%, transparent); }
:root[data-theme="play"] .exp, :root[data-theme="play"] .ebtn, :root[data-theme="play"] .ebtn2 { border-radius: 10px; }
:root[data-theme="play"] .exp .etag, :root[data-theme="play"] #themeBtn { border-radius: 999px; }
:root[data-theme="swarm"] .exp { background: color-mix(in srgb, var(--paper) 72%, transparent); }
:root[data-theme="swarm"] h1 { text-shadow: 0 0 22px rgba(255,46,99,.25); }
:root[data-theme="swarm"] body { text-shadow: 0 0 6px rgba(237,237,237,.06); }

/* ============ deep-end themes ============ */
:root { --on-dark: #F4F1E8; --on-dark-2: #CBC7BA; }
:root[data-theme="abyss"] {
  --paper: #06222B; --card: #0A2E3A; --ink: #D8F0F2; --ink-2: #A9CFD4;
  --muted: #5E8B92; --line: #14404D; --line-2: #0D3340;
  --accent: #3EE6C1; --dark: #031318; --dark-2: #07242E;
}
:root[data-theme="city"] {
  --paper: #0B0E1A; --card: #12162B; --ink: #EAE6F8; --ink-2: #C0BBDD;
  --muted: #6F6C92; --line: #232849; --line-2: #171B36;
  --accent: #FF6EC7; --dark: #05060F; --dark-2: #0B0E1E;
}
:root[data-theme="ember"] {
  --paper: #191210; --card: #221915; --ink: #F4E8DC; --ink-2: #D2C2B2;
  --muted: #8F7E6F; --line: #35281F; --line-2: #281E17;
  --accent: #FF7A45; --dark: #0D0907; --dark-2: #151009;
}
:root[data-theme="warp"] {
  --paper: #030308; --card: #0B0B18; --ink: #EDEBFF; --ink-2: #C2BFE2;
  --muted: #6C6A8E; --line: #1D1D33; --line-2: #121224;
  --accent: #8A7BFF; --dark: #000004; --dark-2: #080812;
}
:root[data-theme="void"] {
  --paper: #000000; --card: #0A0A0A; --ink: #FFFFFF; --ink-2: #C8C8C8;
  --muted: #6A6A6A; --line: #1E1E1E; --line-2: #141414;
  --accent: #FFFFFF; --dark: #000000; --dark-2: #050505;
}
:root[data-theme="abyss"] .exp, :root[data-theme="city"] .exp, :root[data-theme="ember"] .exp,
:root[data-theme="warp"] .exp, :root[data-theme="void"] .exp {
  background: color-mix(in srgb, var(--paper) 76%, transparent); }
:root[data-theme="city"] h1 { text-shadow: 0 0 24px rgba(255,110,199,.22); }
:root[data-theme="warp"] h1 { text-shadow: 0 0 24px rgba(138,123,255,.25); }
:root[data-theme="void"] h1 { text-shadow: 0 0 30px rgba(255,255,255,.28); }
:root[data-theme="void"] ::selection { background: #FFFFFF; color: #000000; }
#themePanel .th-live.th-secret { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#themePanel .th-live.th-orig { animation: none; color: var(--muted); border-color: var(--line); }


/* ============================================================
   ELITE PASS — typography, scrollbars, instruments
   ============================================================ */
h1, h2, h3, h4 { text-wrap: balance; }
p, .edesc, .eline, .wsub { text-wrap: pretty; }
a { transition: color .15s ease, border-color .15s ease, background-color .15s ease; }

html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 24%, transparent);
  border-radius: 6px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

:root[data-theme="night"], :root[data-theme="board"], :root[data-theme="blueprint"],
:root[data-theme="terminal"], :root[data-theme="sim"], :root[data-theme="abyss"],
:root[data-theme="city"], :root[data-theme="swarm"], :root[data-theme="warp"],
:root[data-theme="aurora"], :root[data-theme="rain"], :root[data-theme="ember"],
:root[data-theme="void"] { color-scheme: dark; }

/* canvases read as drafting instruments */
.exp canvas { background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px);
  background-size: 18px 18px; background-position: 9px 9px; }

/* slider progress fill (webkit via --sfill, firefox native) */
.exp input[type=range]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--accent) 0 var(--sfill, 0%), var(--ink) var(--sfill, 0%)); }
.exp input[type=range]::-moz-range-progress { background: var(--accent); height: 2px; border-radius: 1px; }

@media (prefers-reduced-motion: reduce) {
  .ticker .tk { animation: none; }
}