/* ============================================================
   Iftiak — Shared design system
   Editorial minimal · Inter Tight · Indigo-violet accent
   ============================================================ */

:root{
  --bg:#fefefe;
  --fg:#0f0f10;
  --muted:#6b6b70;
  --line:#e6e6e4;
  --card:#f4f3ef;
  --accent:oklch(0.55 0.24 270);
  --accent-ink:oklch(0.32 0.17 270);
  --accent-wash:oklch(0.95 0.05 270);
  --radius:14px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --nav-h:76px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--fg);font-family:'Inter',sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
body{overflow-x:hidden;cursor:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:#fff}

.display{font-family:'Inter Tight',sans-serif;font-weight:500;letter-spacing:-0.035em;line-height:0.92}
.mono{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ============ CURSOR ============ */
.cursor{position:fixed;top:0;left:0;width:20px;height:20px;border-radius:50%;background:#fff;pointer-events:none;z-index:99999;mix-blend-mode:difference;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),background .2s;isolation:isolate}
.cursor.hover{width:56px;height:56px;background:var(--accent)}
.cursor-label{position:fixed;top:0;left:0;padding:6px 16px;border-radius:999px;background:var(--fg);color:var(--bg);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;pointer-events:none;z-index:9998;transform:translate(20px,20px);opacity:0;transition:opacity .2s}
.cursor-label.show{opacity:1}
@media (hover:none){.cursor,.cursor-label{display:none} body{cursor:auto}}

/* ============ NAV ============ */
nav.top{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:22px 40px;mix-blend-mode:difference;color:#fff;transition:background .3s}
nav.top .brand{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:18px;letter-spacing:-0.02em;display:flex;align-items:center;gap:10px}
nav.top .brand .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
nav.top ul{list-style:none;display:flex;gap:28px}
nav.top ul a{font-size:13px;position:relative;padding:4px 0;opacity:.85}
nav.top ul a.active{opacity:1}
nav.top ul a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .4s var(--ease)}
nav.top ul a:hover::after,nav.top ul a.active::after{right:0}
nav.top .status{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase}
nav.top .status .pulse{width:7px;height:7px;border-radius:50%;background:#3d7bff;box-shadow:0 0 0 0 rgba(61,123,255,.6);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(61,123,255,.6)}50%{box-shadow:0 0 0 8px rgba(61,123,255,0)}}

/* ============ PAGE HEADER (non-home) ============ */
.page-head{padding:calc(var(--nav-h) + 60px) 40px 80px;border-bottom:1px solid var(--line)}
.page-head .meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:60px;gap:24px;flex-wrap:wrap}
.page-head h1{font-family:'Inter Tight',sans-serif;font-size:clamp(56px,9vw,140px);letter-spacing:-0.04em;line-height:.9;font-weight:500;max-width:14ch}
.page-head h1 em{font-style:normal;color:var(--muted);font-weight:300}
.page-head h1 .accent{color:var(--accent)}
.page-head .sub{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;margin-top:60px;padding-top:40px;border-top:1px solid var(--line)}
.page-head .sub .lede{font-family:'Inter Tight',sans-serif;font-size:22px;line-height:1.3;letter-spacing:-0.01em;max-width:560px;font-weight:400;color:var(--fg)}
.page-head .sub .lede b{font-weight:500;background:linear-gradient(180deg,transparent 60%,var(--accent-wash) 60%);padding:0 2px}
.page-head .sub .col h4{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.page-head .sub .col p{font-size:14px;line-height:1.5}

/* ============ FOOTER ============ */
footer.site{padding:120px 40px 40px;background:var(--fg);color:var(--bg);margin-top:120px;position:relative;overflow:hidden}
footer.site .big{font-family:'Inter Tight',sans-serif;font-size:clamp(64px,11vw,180px);letter-spacing:-0.04em;line-height:.88;font-weight:400;margin-bottom:60px}
footer.site .big .accent{color:var(--accent)}
footer.site .big a{transition:transform .6s var(--ease);display:inline-block}
footer.site .big a:hover{transform:translateX(16px)}
footer.site .row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:40px;padding:40px 0;border-top:1px solid rgba(255,255,255,.15)}
footer.site .row h6{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:16px}
footer.site .row a{display:block;padding:4px 0;font-size:14px;color:rgba(255,255,255,.85);transition:color .2s;width:max-content;position:relative}
footer.site .row a:hover{color:var(--accent)}
footer.site .row a .ext{opacity:0;margin-left:4px;display:inline-block;transition:opacity .3s,transform .3s;transform:translateX(-3px)}
footer.site .row a:hover .ext{opacity:1;transform:translateX(0)}
footer.site .colo{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid rgba(255,255,255,.15);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* ============ IMAGE PLACEHOLDER ============ */
/* Stand-in until real images go in assets/images/ — swap for <img width height alt> */
.img-ph{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:12px;text-align:center;background:rgba(127,127,127,.08);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.04em;text-transform:uppercase}
.img-ph::after{content:"";position:absolute;inset:0;border:1.5px dashed currentColor;border-radius:inherit;opacity:.35;pointer-events:none}
.img-ph span{opacity:.7}
.img-ph.circle{border-radius:50%;padding:0}

/* ============ REVEAL (GSAP — see assets/motion.js) ============ */
/* Content is visible by default. html.motion, set by each page's head snippet, hides it only
   while GSAP animates it in; the snippet removes "motion" after 3s if motion.js never starts. */
html.motion .reveal{opacity:0}
html.motion [data-split]{visibility:hidden}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  nav.top .status .pulse{animation:none}
}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  nav.top{padding:16px 20px}
  nav.top ul{display:none}
  nav.top .status{display:none}
  .page-head{padding:calc(var(--nav-h) + 30px) 20px 40px}
  .page-head .meta{margin-bottom:30px}
  .page-head .sub{grid-template-columns:1fr;gap:24px;margin-top:30px;padding-top:24px}
  footer.site{padding:60px 20px 30px}
  footer.site .row{grid-template-columns:1fr 1fr;gap:24px}
  footer.site .colo{flex-direction:column;gap:10px;text-align:center}
}