/* Document pages. Shares the visual language of the main portfolio page. */
:root{
  --ink:#070912; --ink-2:#0B0E1D; --panel:#10142A; --panel-2:#161B36;
  --line:#232A4D; --line-hi:#38416F;
  --text:#E8EAF6; --muted:#8B93B8; --dim:#626B92;
  --magenta:#E845C8; --magenta-d:#9E2A88; --violet:#7B5CFF;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --wrap:820px; --gut:clamp(20px,5vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--ink); color:var(--text);
  font-family:var(--body); font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%}
a{color:inherit}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut)}

/* nav */
.nav{position:sticky; top:0; z-index:60; background:rgba(7,9,18,.88);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut);
  height:60px; display:flex; align-items:center; gap:20px}
.mark{font-family:var(--display); font-style:italic; font-weight:800; font-size:19px;
  text-transform:uppercase; text-decoration:none; color:var(--text); white-space:nowrap}
.mark span{color:var(--magenta)}
.nav-back{margin-left:auto; font-family:var(--body); font-size:13.5px; font-weight:500; color:var(--muted); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; border-bottom:1px solid transparent; padding-bottom:2px}
.nav-back:hover{color:var(--magenta); border-bottom-color:var(--magenta)}

/* header */
.dhead{border-bottom:1px solid var(--line); background:var(--ink-2); position:relative; overflow:hidden}
.dhead::before{content:""; position:absolute; top:-40%; right:7%; width:40px; height:180%;
  transform:rotate(24deg); pointer-events:none;
  background:linear-gradient(180deg,rgba(123,92,255,0),rgba(232,69,200,.38),rgba(123,92,255,0))}
.dhead-in{position:relative; z-index:2; padding-block:clamp(38px,6vw,64px) clamp(28px,4vw,44px)}
.dproj{font-family:var(--body); font-size:14px; font-weight:500; color:var(--magenta); margin:0 0 12px}
.dtitle{font-family:var(--display); font-style:italic; font-weight:800;
  font-size:clamp(32px,6vw,58px); line-height:.98;
  margin:0; text-wrap:balance}
.dmeta{font-family:var(--body); font-size:14px;
  color:var(--dim); margin:16px 0 0; display:flex; flex-wrap:wrap; gap:6px 14px}
.dmeta .sep{color:var(--line-hi)}

/* body */
.dbody{padding-block:clamp(36px,5vw,60px) clamp(48px,7vw,80px)}
.dbody h2{font-family:var(--display); font-style:italic; font-weight:800;
  font-size:clamp(26px,4vw,38px); line-height:1.04;
  margin:52px 0 14px; padding-top:22px; border-top:1px solid var(--line); text-wrap:balance}
.dbody h2:first-child{margin-top:0; padding-top:0; border-top:0}
.dbody h3{font-family:var(--display); font-style:italic; font-weight:700;
  font-size:clamp(21px,3vw,28px); line-height:1.1;
  margin:38px 0 10px; color:var(--text); text-wrap:balance}
.dbody h4{font-family:var(--body); font-size:14px; font-weight:600; color:var(--magenta); margin:30px 0 8px}
.dbody p{margin:0 0 16px; color:var(--muted)}
.dbody strong{color:var(--text); font-weight:600}
.dbody hr{border:0; border-top:1px solid var(--line); margin:32px 0}

.dbody ul,.dbody ol{margin:0 0 16px; padding-left:0; list-style:none}
.dbody li{position:relative; padding-left:22px; margin-bottom:8px; color:var(--muted)}
.dbody ul>li::before{content:""; position:absolute; left:0; top:.68em;
  width:9px; height:1px; background:var(--magenta)}
.dbody ol{counter-reset:d}
.dbody ol>li{counter-increment:d}
.dbody ol>li::before{content:counter(d); position:absolute; left:0; top:0;
  font-family:var(--body); font-size:13.5px; font-weight:600; color:var(--magenta); line-height:1.9}
.dbody li ul,.dbody li ol{margin:8px 0 0}

blockquote{margin:0 0 18px; padding:2px 0 2px 20px; border-left:2px solid var(--magenta-d);
  color:var(--muted); font-style:italic}
.callout{margin:0 0 18px; padding:16px 18px; border-radius:2px;
  border:1px solid var(--line); border-left:2px solid var(--magenta);
  background:var(--panel); color:var(--text)}
.callout p:last-child{margin-bottom:0}
pre{margin:0 0 18px; padding:16px 18px; overflow-x:auto; border-radius:2px;
  border:1px solid var(--line); background:var(--panel);
  font-family:var(--mono); font-size:13.5px; line-height:1.6; color:var(--text)}

figure{margin:26px 0; }
figure img{width:100%; height:auto; border-radius:2px; border:1px solid var(--line); background:var(--panel)}
figure.tall img{max-height:none}
figcaption{font-family:var(--body); font-size:14px;
  color:var(--dim); margin-top:10px}

.tablewrap{overflow-x:auto; margin:0 0 22px; border:1px solid var(--line); border-radius:2px}
table{border-collapse:collapse; width:100%; min-width:460px; font-size:15.5px}
th,td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--muted)}
thead th{font-family:var(--body); font-size:14px; font-weight:600; color:var(--magenta); background:var(--panel); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:rgba(255,255,255,.015)}

.embed{position:relative; margin:26px 0; padding-top:56.25%; border-radius:2px;
  overflow:hidden; border:1px solid var(--line); background:#05060E}
.embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* footer */
.dfoot{border-top:1px solid var(--line); background:var(--ink-2); padding-block:36px}
.dfoot-in{display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center;
  font-family:var(--body); font-size:13.5px; color:var(--dim)}
.dfoot-in a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line)}
.dfoot-in a:hover{color:var(--magenta); border-color:var(--magenta)}
.dfoot-sp{margin-left:auto}
@media (max-width:620px){.dfoot-sp{margin-left:0}}

a:focus-visible,button:focus-visible{outline:2px solid var(--magenta); outline-offset:3px; border-radius:2px}

/* docs index */
.dlist{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.drow{display:grid; grid-template-columns:168px minmax(0,1fr) auto; gap:20px; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--text);
  transition:background .16s, padding-left .16s}
.drow:hover{background:rgba(232,69,200,.06); padding-left:14px}
@media (prefers-reduced-motion:reduce){.drow:hover{padding-left:0}}

.drow-thumb{position:relative; display:block; width:168px; border-radius:2px; overflow:hidden;
  border:1px solid var(--line); background:#05060E; transition:border-color .16s}
.drow:hover .drow-thumb{border-color:var(--magenta-d)}
.drow-thumb img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  filter:saturate(.9); transition:transform .35s ease}
.drow:hover .drow-thumb img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.drow:hover .drow-thumb img{transform:none}}
/* corner tick, echoing the project cards on the main page */
.drow-thumb::after{content:""; position:absolute; top:0; left:0; width:14px; height:14px;
  border-top:2px solid var(--magenta-d); border-left:2px solid var(--magenta-d);
  transition:border-color .16s}
.drow:hover .drow-thumb::after{border-color:var(--magenta)}
.drow-t{font-family:var(--display); font-style:italic; font-weight:700;
  font-size:clamp(19px,2.4vw,24px); line-height:1.1; margin:0}
.drow:hover .drow-t{color:#fff}
.drow-p{font-family:var(--body); font-size:14px;
  color:var(--dim); margin:6px 0 0}
.drow-go{font-family:var(--body); font-size:13.5px;
  color:var(--dim); white-space:nowrap}
.drow:hover .drow-go{color:var(--magenta)}
.dgroup{font-family:var(--body); font-size:13.5px; font-weight:600; color:var(--magenta); margin:40px 0 4px}
.dgroup:first-of-type{margin-top:28px}
@media (max-width:620px){
  .drow{grid-template-columns:104px minmax(0,1fr); gap:14px}
  .drow-thumb{width:104px}
  .drow-go{display:none}
}

/* ---------- mobile ---------- */
@media (max-width:560px){
  body{font-size:16.5px}
  .dhead-in{padding-block:28px 22px}
  .dtitle{font-size:clamp(26px,7.5vw,34px)}
  .dbody{padding-block:28px 44px}
  .dbody h2{font-size:clamp(23px,6.5vw,30px); margin:36px 0 12px; padding-top:18px}
  .dbody h3{font-size:clamp(19px,5.5vw,24px); margin:28px 0 8px}
  .callout{padding:14px 15px}
  figure{margin:20px 0}
  .drow{padding:13px 0}
  .drow-t{font-size:clamp(17px,4.8vw,20px)}
}
@media (max-width:400px){
  .drow{grid-template-columns:78px minmax(0,1fr); gap:12px}
  .drow-thumb{width:78px}
}