/* Hakeemi portfolio — "drawing to build".
   Cool drafting paper, ink, and an ultramarine drawing layer revealed by a lens. */

:root {
  --paper:#EDEFF2;
  --paper-2:#E3E7EC;
  --ink:#15181D;
  --ink-2:#3A404A;
  --muted:#5D6470;
  --rule:#CBD1DA;
  --blue:#1F3BFF;
  --blue-deep:#1530D8;
  --blue-line:rgba(255,255,255,.16);
  --signal:#FF5A1F;
  --font:'Archivo', system-ui, sans-serif;
  --gutter:clamp(16px, 4vw, 56px);
  --radius-s:6px;
  --radius-l:18px;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection { background:var(--blue); color:#fff; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
h1,h2,h3,p,ul,ol,dl,dd,figure { margin:0; padding:0; }
ul,ol { list-style:none; }
:focus-visible { outline:2px solid var(--blue); outline-offset:4px; border-radius:2px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.wrap { width:100%; max-width:1360px; margin-inline:auto; padding-inline:var(--gutter); }

.skip-link { position:fixed; left:16px; top:-80px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--radius-s); }
.skip-link:focus { top:12px; }

/* Header */
.site-header {
  position:fixed; inset:0 0 auto; z-index:40;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.site-header.is-scrolled { border-bottom-color:var(--rule); }
.header-inner { height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.wordmark { font-weight:800; font-size:22px; letter-spacing:-.04em; font-variation-settings:'wdth' 118; }
.wordmark span { color:var(--blue); font-size:.6em; vertical-align:super; margin-left:1px; }
#site-nav { display:flex; align-items:center; gap:clamp(12px, 2.4vw, 32px); font-size:15px; }
#site-nav a { color:var(--ink-2); transition:color .2s; }
#site-nav a:hover, #site-nav a.is-active { color:var(--ink); }
#site-nav a.is-active:not(.nav-cta) { box-shadow:0 2px 0 var(--blue); }
#site-nav a.nav-cta { background:var(--ink); color:#fff; padding:9px 16px; border-radius:99px; transition:background .2s; }
#site-nav a.nav-cta:hover, #site-nav a.nav-cta.is-active { background:var(--blue); color:#fff; }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; isolation:isolate; }
.hero-sheet { padding-top:clamp(96px, 13vh, 150px); padding-bottom:40px; min-height:100svh; display:flex; flex-direction:column; background:var(--paper); }
.hero-inner { display:flex; flex-direction:column; flex:1; }
.hero-role { display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink-2); }
.status-dot { width:8px; height:8px; border-radius:50%; background:#16A34A; box-shadow:0 0 0 4px rgba(22,163,74,.18); flex:none; }
.hero-name {
  font-size:var(--name-size, clamp(64px, 14.2vw, 216px));
  font-weight:850;
  font-variation-settings:'wdth' 125;
  line-height:.86;
  letter-spacing:-.045em;
  margin:clamp(16px, 2.4vw, 30px) 0 clamp(24px, 3vw, 40px) -.04em;
  white-space:nowrap;
  width:max-content;
  position:relative;
}
.hero-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(32px, 6vw, 96px); align-items:end; margin-top:auto; }
.hero-lead { font-size:clamp(19px, 1.7vw, 24px); line-height:1.45; max-width:30ch; color:var(--ink-2); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 24px; border-radius:99px; font-weight:600; font-size:16px; transition:background .2s, color .2s, border-color .2s, transform .2s; }
.btn-ink { background:var(--ink); color:#fff; }
.btn-ink:hover { background:var(--blue); }
.btn-line { border:1.5px solid var(--ink); }
.btn-line:hover { background:var(--ink); color:#fff; }
.btn:active { transform:scale(.97); }

.hero-figure { justify-self:end; width:min(100%, 400px); }
.now-card { display:grid; grid-template-columns:1fr auto; gap:4px 16px; padding:14px; background:#fff; border-radius:var(--radius-l); box-shadow:0 1px 0 var(--rule), 0 30px 60px -30px rgba(21,24,29,.35); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.now-card:hover { transform:translateY(-4px) rotate(-.4deg); }
.now-label { font-size:13px; color:var(--muted); grid-column:1; padding:4px 6px 0; }
.now-title { font-size:20px; font-weight:700; grid-column:1; padding:0 6px; }
.now-shot { grid-column:1 / -1; margin-top:10px; border-radius:10px; overflow:hidden; aspect-ratio:16 / 8; background:var(--paper-2); }
.now-shot img { width:100%; height:100%; object-fit:cover; object-position:top; }
.now-note { grid-column:1 / -1; font-size:14px; color:var(--muted); padding:8px 6px 2px; }
.hero-hint { margin-top:28px; font-size:14px; color:var(--muted); }
.hero-sheet:not(.is-drawing) .bp-only { display:none !important; }

/* Drawing layer: a clone of .hero-sheet, revealed through the lens. */
.hero-sheet.is-drawing {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-color:var(--blue-deep);
  background-image:
    linear-gradient(var(--blue-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--blue-line) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:96px 96px, 96px 96px, 16px 16px, 16px 16px;
  background-position:-1px -1px;
  color:#fff;
  clip-path:circle(var(--lens-r, 0px) at var(--lens-x, 70%) var(--lens-y, 50%));
  -webkit-clip-path:circle(var(--lens-r, 0px) at var(--lens-x, 70%) var(--lens-y, 50%));
}
.is-drawing .built-only { display:none; }
.is-drawing .bp-only { display:block; }
.is-drawing .stack { display:grid; }
.is-drawing .hero-role, .is-drawing .hero-lead, .is-drawing .hero-hint { color:rgba(255,255,255,.88); }
.is-drawing .status-dot { background:transparent; border:1.5px solid #fff; box-shadow:none; }
.is-drawing .hero-name { color:transparent; -webkit-text-stroke:1.5px #fff; }
.is-drawing .btn { background:transparent; color:#fff; border:1.5px dashed rgba(255,255,255,.85); }
.is-drawing [data-dim] { position:relative; }
.is-drawing [data-dim]::after {
  content:attr(data-dim);
  position:absolute; left:0; top:-22px;
  font-size:12px; font-weight:500; letter-spacing:.02em; font-variation-settings:'wdth' 80;
  -webkit-text-stroke:0; color:#fff; white-space:nowrap; line-height:1;
  background:var(--blue-deep); padding:2px 6px; border:1px solid rgba(255,255,255,.5); border-radius:3px;
}
.is-drawing .hero-name::before {
  content:""; position:absolute; left:0; right:0; top:-12px; height:8px;
  border:1px solid rgba(255,255,255,.75); border-bottom:0;
}
.is-drawing .hero-name::after { top:-34px; left:50%; transform:translateX(-50%); font-size:13px; }
.is-drawing .hero-lead { outline:1px dashed rgba(255,255,255,.55); outline-offset:8px; }
.stack { display:grid; gap:10px; }
.stack-layer { display:flex; justify-content:space-between; gap:16px; align-items:baseline; padding:16px 18px; border:1.5px solid rgba(255,255,255,.8); border-radius:10px; font-size:14px; }
.stack-layer:nth-child(2) { margin-left:14px; }
.stack-layer:nth-child(3) { margin-left:28px; }
.stack-layer:nth-child(4) { margin-left:42px; border-style:dashed; }
.stack-layer b { font-size:17px; font-variation-settings:'wdth' 118; }
.stack-layer span { color:rgba(255,255,255,.8); text-align:right; }

.lens-ring {
  position:absolute; z-index:3; left:0; top:0; pointer-events:none;
  width:calc(var(--lens-r, 0px) * 2); height:calc(var(--lens-r, 0px) * 2);
  border-radius:50%;
  transform:translate(calc(var(--lens-px, -999px) - var(--lens-r, 0px)), calc(var(--lens-py, -999px) - var(--lens-r, 0px)));
  box-shadow:0 0 0 2px var(--signal), 0 0 0 9px rgba(255,90,31,.12), 0 24px 60px rgba(21,48,216,.35);
}
.lens-ring::after {
  content:"drawing view"; position:absolute; left:50%; bottom:-30px; transform:translateX(-50%);
  font-size:12px; color:var(--signal); white-space:nowrap; font-weight:600;
}
.hero.no-lens .lens-ring { display:none; }

/* ---------- Sections ---------- */
.section-head { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:24px 64px; align-items:end; padding-bottom:clamp(36px, 5vw, 64px); }
.section-head h2 { font-size:clamp(44px, 6.6vw, 104px); font-weight:800; font-variation-settings:'wdth' 125; letter-spacing:-.045em; line-height:.9; }
.section-head p { color:var(--ink-2); font-size:18px; max-width:44ch; justify-self:end; }
.kind { font-size:14px; color:var(--muted); margin-bottom:10px; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0; }
.tags li { font-size:13px; padding:5px 11px; border:1px solid var(--rule); border-radius:99px; color:var(--ink-2); background:rgba(255,255,255,.5); }
.text-link { display:inline-flex; gap:6px; font-weight:600; border-bottom:1.5px solid currentColor; padding-bottom:2px; transition:color .2s; }
.text-link:hover { color:var(--blue); }

.work { padding-top:clamp(72px, 9vw, 128px); }

/* Hakeemi Cloud */
.cloud { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(32px, 5vw, 72px); padding:clamp(24px, 4vw, 56px); background:#fff; border-radius:28px; box-shadow:0 1px 0 var(--rule), 0 50px 100px -60px rgba(21,24,29,.4); }
.cloud h3, .product h3 { font-size:clamp(36px, 4vw, 56px); font-weight:800; font-variation-settings:'wdth' 118; letter-spacing:-.04em; line-height:1; }
.cloud-lead { font-size:22px; line-height:1.35; margin:14px 0 20px; }
.cloud-copy > p:not(.kind):not(.cloud-lead) { color:var(--ink-2); max-width:56ch; }
.cloud-copy > p + p { margin-top:14px; }
.cloud-diagram { display:flex; flex-direction:column; gap:20px; min-width:0; }
.cloud-diagram svg { width:100%; height:auto; border-radius:var(--radius-l); background:var(--paper); font-family:var(--font); }
.d-grid { stroke:rgba(21,24,29,.06); stroke-width:1; }
.d-wire { fill:none; stroke:var(--rule); stroke-width:2; transition:stroke .3s; }
.d-pulse { fill:none; stroke:var(--blue); stroke-width:3.5; stroke-linecap:round; stroke-dasharray:10 90; stroke-dashoffset:100; opacity:.25; animation:pulse 2.4s linear infinite; }
.d-late { animation-delay:1.2s; }
.d-route.is-on .d-wire { stroke:var(--blue); stroke-opacity:.45; }
.d-route.is-on .d-pulse { opacity:1; }
@keyframes pulse { to { stroke-dashoffset:0; } }
.d-node rect { fill:#fff; stroke:var(--rule); stroke-width:1.5; transition:fill .3s, stroke .3s; }
.d-node text { text-anchor:middle; font-size:15px; font-weight:600; fill:var(--ink); transition:fill .3s; }
.d-node .d-small { font-size:12px; font-weight:400; fill:var(--muted); }
.d-domain { cursor:pointer; outline:none; }
.d-node.is-on rect { fill:var(--blue); stroke:var(--blue); }
.d-node.is-on text, .d-node.is-on .d-small { fill:#fff; }
.d-domain:focus-visible rect { stroke:var(--ink); stroke-width:3; }
.d-core rect { fill:var(--ink); }
.d-core text { text-anchor:middle; fill:#fff; }
.d-core-title { font-size:20px; font-weight:800; font-variation-settings:'wdth' 118; }
.d-core-sub { font-size:12px; fill:rgba(255,255,255,.7) !important; }
.cloud-shot { border-radius:12px; overflow:hidden; border:1px solid var(--rule); background:#fff; }
.cloud-shot img { aspect-ratio:16 / 7; width:100%; object-fit:cover; object-position:top; }
.browser-bar { display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:#F5F6F8; border-bottom:1px solid var(--rule); font-size:12px; color:var(--muted); }
.browser-bar i { width:9px; height:9px; border-radius:50%; background:var(--rule); }
.browser-bar span { margin-left:10px; }

/* Products */
.product { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(32px, 5vw, 80px); align-items:center; margin-top:clamp(72px, 10vw, 140px); }
.product:nth-of-type(odd) .product-media { order:2; }
.product-media { position:relative; display:block; aspect-ratio:4 / 3; border-radius:28px; overflow:hidden; isolation:isolate; }
.product-line { font-size:22px; line-height:1.35; margin:14px 0 18px; }
.product-copy > p:not(.kind):not(.product-line) { color:var(--ink-2); max-width:52ch; }
[data-parallax] { will-change:transform; transform:translate3d(0, var(--py, 0px), 0); }

.product-pledge .product-media { background:radial-gradient(120% 90% at 20% 0%, #F4C35E 0%, #E8A33D 45%, #C9762A 100%); }
.pledge-brand { position:absolute; top:24px; left:28px; display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; color:#3B1414; }
.pledge-brand img { width:36px; height:36px; border-radius:9px; }
.phone { position:absolute; width:31%; border-radius:28px; overflow:hidden; border:6px solid #1a1214; box-shadow:0 40px 60px -20px rgba(59,20,20,.55); transition:rotate .5s cubic-bezier(.2,.8,.2,1); }
.phone-a { left:20%; top:22%; rotate:-8deg; }
.phone-b { left:50%; top:12%; rotate:6deg; }
.product-media:hover .phone-a { rotate:-11deg; }
.product-media:hover .phone-b { rotate:9deg; }

.product-pc .product-media { background:linear-gradient(160deg, #C9D3DE 0%, #A9B7C6 100%); }
.pc-word { position:absolute; left:8%; top:8%; font-size:clamp(32px, 4.4vw, 64px); font-weight:800; font-variation-settings:'wdth' 125; letter-spacing:-.045em; line-height:.95; color:#1B2633; }
.pc-shot { position:absolute; left:16%; right:-6%; top:47%; border-radius:12px 0 0 0; overflow:hidden; background:#fff; box-shadow:0 40px 80px -30px rgba(27,38,51,.6); transition:translate .5s cubic-bezier(.2,.8,.2,1); }
.product-media:hover .pc-shot { translate:-12px -10px; }
.pc-shot .browser-bar span { margin-left:10px; }

.trawlly-media { background:#14201B; display:flex; flex-direction:column; justify-content:center; padding:clamp(24px, 4vw, 56px); gap:20px; }
.recipe { margin:0; font-size:clamp(13px, 1.25vw, 17px); line-height:1.7; color:#D6E4DC; font-family:ui-monospace, 'SF Mono', Menlo, monospace; white-space:pre; overflow:auto; }
.c-dim { color:#6E8579; } .c-key { color:#9FE3C1; } .c-str { color:#F1D58A; }
.recipe-out { display:flex; gap:8px; flex-wrap:wrap; }
.recipe-out span { font-size:13px; color:#14201B; background:#9FE3C1; padding:4px 10px; border-radius:4px; animation:fill 4.8s ease-in-out infinite both; }
.recipe-out span:nth-child(2) { animation-delay:.25s; }
.recipe-out span:nth-child(3) { animation-delay:.5s; background:#F1D58A; }
@keyframes fill { 0%, 12% { opacity:0; translate:0 6px; } 22%, 86% { opacity:1; translate:0 0; } 100% { opacity:0; } }

.more { margin-top:clamp(80px, 10vw, 140px); }
.more h3 { font-size:15px; font-weight:600; color:var(--muted); margin-bottom:12px; }
.more a { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) auto; gap:16px; align-items:baseline; padding:20px 0; border-top:1px solid var(--rule); transition:padding .3s, color .2s; }
.more li:last-child a { border-bottom:1px solid var(--rule); }
.more a span:first-child { font-size:clamp(22px, 2.4vw, 32px); font-weight:700; font-variation-settings:'wdth' 112; letter-spacing:-.02em; }
.more a span:nth-child(2) { color:var(--muted); }
.more a:hover { color:var(--blue); padding-left:12px; }

/* About */
.about { margin-top:clamp(120px, 14vw, 200px); padding-block:clamp(96px, 12vw, 160px); background:var(--ink); color:#fff; }
.statement { font-size:clamp(32px, 4.6vw, 72px); font-weight:700; font-variation-settings:'wdth' 110; line-height:1.08; letter-spacing:-.035em; max-width:20ch; }
.statement .w { color:rgba(255,255,255,.22); transition:color .25s; }
.statement .w.is-lit { color:#fff; }
.about-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(40px, 6vw, 96px); margin-top:clamp(64px, 8vw, 112px); }
.about-copy p { color:rgba(255,255,255,.75); max-width:52ch; }
.about-copy p + p { margin-top:16px; }
.skills div { display:grid; grid-template-columns:140px minmax(0, 1fr); gap:16px; padding:16px 0; border-top:1px solid rgba(255,255,255,.16); }
.skills div:last-child { border-bottom:1px solid rgba(255,255,255,.16); }
.skills dt { font-weight:700; }
.skills dd { color:rgba(255,255,255,.75); }
.skills div:last-child dt { color:#8FA0FF; }

/* Background */
.background { padding-top:clamp(120px, 14vw, 200px); }
.timeline li { display:grid; grid-template-columns:180px minmax(0, 1.1fr) minmax(0, 1fr); gap:16px 48px; padding:32px 0; border-top:1px solid var(--rule); }
.timeline li:last-child { border-bottom:1px solid var(--rule); }
.when { font-size:15px; color:var(--blue); font-weight:600; padding-top:6px; }
.timeline h3 { font-size:clamp(22px, 2.2vw, 30px); font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.org { color:var(--muted); margin-top:6px; }
.timeline li > p { color:var(--ink-2); }

/* Contact */
.contact { margin-top:clamp(120px, 14vw, 200px); padding-block:clamp(80px, 10vw, 140px); background:var(--blue); color:#fff; overflow:hidden; }
.contact-status { display:flex; gap:10px; align-items:center; font-size:15px; }
.contact-status .status-dot { background:#7CFFB2; box-shadow:0 0 0 4px rgba(124,255,178,.25); }
.contact h2 { font-size:clamp(72px, 17vw, 260px); font-weight:850; font-variation-settings:'wdth' 125; letter-spacing:-.055em; line-height:.85; margin:28px 0 56px -.04em; }
.contact h2 a { display:inline-flex; align-items:flex-start; gap:.08em; }
.contact h2 .talk {
  padding-bottom:.06em;
  background:linear-gradient(currentColor, currentColor) left bottom / 0% .07em no-repeat;
  transition:background-size .5s cubic-bezier(.2,.8,.2,1);
}
.contact h2 .talk-arrow { font-size:.35em; margin-top:.15em; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.contact h2 a:hover .talk, .contact h2 a:focus-visible .talk { background-size:100% .07em; }
.contact h2 a:hover .talk-arrow, .contact h2 a:focus-visible .talk-arrow { transform:translate(.12em, -.12em); }
.contact-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:32px 64px; }
.contact-grid > p { font-size:20px; max-width:36ch; color:rgba(255,255,255,.85); }
.contact-links { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px 24px; }
.contact-links a { display:block; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.3); overflow-wrap:anywhere; transition:border-color .2s; }
.contact-links a:hover { border-color:#fff; }
.contact :focus-visible { outline-color:#fff; }

.footer { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:32px; font-size:14px; color:var(--muted); }
.footer a:hover { color:var(--blue); }

/* ---------- Responsive ---------- */
@media (max-width:980px) {
  .hero-grid, .cloud, .product, .about-grid, .contact-grid, .section-head { grid-template-columns:minmax(0, 1fr); }
  .hero-figure { justify-self:start; }
  .section-head p { justify-self:start; }
  .product:nth-of-type(odd) .product-media { order:0; }
  .timeline li { grid-template-columns:minmax(0, 1fr); gap:8px; }
}
@media (max-width:640px) {
  body { font-size:16px; }
  .header-inner { height:60px; }
  #site-nav a:not(.nav-cta):not([href="#work"]) { display:none; }
  #site-nav .nav-cta { padding:8px 14px; font-size:14px; }
  .hero-sheet { padding-top:96px; min-height:auto; }
  .hero-name { white-space:normal; width:auto; font-size:var(--name-size, 25vw); }
  .hero-name span { display:block; }
  .hero-figure { width:100%; }
  .now-shot { display:none; }
  .stack-layer { font-size:13px; padding:12px 14px; }
  .stack-layer:nth-child(n) { margin-left:0; margin-right:0; }
  .cloud { border-radius:20px; padding:20px; }
  .product-media { aspect-ratio:1 / 1; border-radius:20px; }
  .phone { width:40%; border-width:4px; border-radius:20px; }
  .phone-a { left:10%; top:24%; }
  .phone-b { left:48%; top:16%; }
  .pc-shot { top:52%; left:10%; }
  .more a { grid-template-columns:minmax(0, 1fr) auto; }
  .more a span:nth-child(2) { grid-row:2; font-size:14px; }
  .skills div { grid-template-columns:minmax(0, 1fr); gap:4px; }
  .contact-links { grid-template-columns:minmax(0, 1fr); }
  .contact h2 { font-size:26vw; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .d-pulse, .recipe-out span { animation:none; }
  .d-pulse { opacity:0; }
  .recipe-out span { opacity:1; }
  [data-parallax] { transform:none; }
  .statement .w { color:#fff; }
  *,*::before,*::after { transition-duration:.01ms !important; }
}