/* Ali Nawaz portfolio. Mobile-first, light + dark. Fonts are self-hosted (SIL OFL), no external requests. */
@font-face{font-family:"Pixel";src:url(fonts/pixelify.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Hand";src:url(fonts/caveat.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Mono";src:url(fonts/jbmono.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Naskh";src:url(fonts/naskh.woff2) format("woff2");font-weight:400 700;font-display:swap}

/* ---------- theme tokens ---------- */
:root{
  color-scheme:light;
  --bg:#f5f1e8; --card:#fffdf8; --text:#1a1815; --muted:#5d574d; --line:#1a1815; --shade:#1a1815;
  --grid:rgba(26,24,21,.06);
  --accent:#c8323b; --accent-soft:rgba(200,50,59,.16); --on-accent:#fffdf8;
  --note-1:#fffdf8; --note-2:#e9e3d6; --note-3:#dcd5c6;
  --note-text:#1a1815;
  --folder-a:#1a1815; --folder-b:#c8323b;
  --bar:rgba(245,241,232,.9);
  --term-bg:#1a1815; --term-text:#efe9dc; --term-dim:#b9b2a4;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#121110; --card:#1c1a18; --text:#ece6da; --muted:#a59e91; --line:#ece6da; --shade:#34302b;
  --grid:rgba(236,230,218,.045);
  --accent:#ff4d57; --accent-soft:rgba(255,77,87,.2); --on-accent:#121110;
  --note-1:#ece6da; --note-2:#cfc8ba; --note-3:#b5ad9e;
  --note-text:#121110;
  --folder-a:#24211e; --folder-b:#b82a33;
  --bar:rgba(18,17,16,.88);
  --term-bg:#0a0908; --term-text:#ece6da; --term-dim:#a59e91;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#121110; --card:#1c1a18; --text:#ece6da; --muted:#a59e91; --line:#ece6da; --shade:#34302b;
    --grid:rgba(236,230,218,.045);
    --accent:#ff4d57; --accent-soft:rgba(255,77,87,.2); --on-accent:#121110;
    --note-1:#ece6da; --note-2:#cfc8ba; --note-3:#b5ad9e;
    --note-text:#121110;
    --folder-a:#24211e; --folder-b:#b82a33;
    --bar:rgba(18,17,16,.88);
    --term-bg:#0a0908; --term-text:#ece6da; --term-dim:#a59e91;
  }
}
:root{
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --hand:"Hand","Comic Sans MS",cursive;
  --pixel:"Pixel","Mono",monospace;
  --sd:"SF Arabic",-apple-system,BlinkMacSystemFont,"Naskh","Noto Naskh Arabic","Geeza Pro",sans-serif;
  --shadow:4px 4px 0 var(--shade);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;color:var(--text);font:16px/1.6 var(--sans);overflow-x:hidden;
  background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;transition:background-color .3s,color .3s}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
[lang="sd"],[lang="ur"]{font-family:var(--sd)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--text);color:var(--bg);padding:8px 14px;border-radius:8px;text-decoration:none;font-family:var(--mono)}
.skip:focus{top:12px}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;
  padding:8px 10px 8px 14px;padding-top:max(8px,env(safe-area-inset-top));background:var(--bar);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:2px solid var(--line)}
.logo{font:700 26px/1 var(--pixel);text-decoration:none;letter-spacing:1px;margin-right:auto}
.blink{animation:blink 1.1s steps(1) infinite;color:var(--accent)}
.topbar ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.topbar nav a{display:block;font:600 12.5px/1 var(--mono);text-decoration:none;padding:10px 8px;border-radius:999px}
.topbar nav a:hover{background:var(--accent-soft)}
.topbar .nav-hi{background:var(--text);color:var(--bg)}
.topbar .nav-hi:hover{background:var(--accent)!important;color:var(--on-accent)}
.nav-wide{display:none}
.theme-toggle{position:relative;width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;display:grid;place-items:center;padding:0;flex:none}
.theme-toggle:hover{background:var(--accent-soft)}
.tt-sun,.tt-moon{position:absolute;inset:0;margin:auto;transition:transform .35s,opacity .25s}
.tt-sun{width:14px;height:14px;border-radius:50%;background:currentColor;box-shadow:0 -9px 0 -5px currentColor,0 9px 0 -5px currentColor,9px 0 0 -5px currentColor,-9px 0 0 -5px currentColor,6.5px 6.5px 0 -5px currentColor,-6.5px -6.5px 0 -5px currentColor,6.5px -6.5px 0 -5px currentColor,-6.5px 6.5px 0 -5px currentColor}
.tt-moon{width:16px;height:16px;border-radius:50%;box-shadow:inset -5px -3px 0 0 currentColor;transform:rotate(-20deg) scale(.4);opacity:0}
:root[data-theme="dark"] .tt-sun{transform:scale(.3) rotate(90deg);opacity:0}
:root[data-theme="dark"] .tt-moon{transform:rotate(-20deg);opacity:1}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tt-sun{transform:scale(.3) rotate(90deg);opacity:0}
  :root:not([data-theme="light"]) .tt-moon{transform:rotate(-20deg);opacity:1}
}

/* ---------- shared bits ---------- */
section{position:relative;padding:56px 18px;max-width:1120px;margin:0 auto}
.label{font:600 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin:0 0 10px}
.label--center{text-align:center}
.hand{font-family:var(--hand);font-size:23px;line-height:1.2}
.sticky{display:inline-block;border:2px solid var(--line);font:700 25px/1 var(--hand);padding:10px 16px 12px;color:var(--note-text);box-shadow:3px 3px 0 var(--shade);transform:rotate(-3deg);margin:0}
.sticky small{font-size:18px;font-weight:600;opacity:.75}
.sticky [lang="sd"]{font-size:22px;font-weight:700}
.sticky--yellow{background:var(--note-1)}.sticky--pink{background:var(--note-2)}.sticky--teal{background:var(--note-3)}
h2.sticky{font-weight:700}
.section-tag{margin-bottom:28px}
.btn{display:inline-flex;align-items:center;gap:8px;font:700 15px/1 var(--mono);text-decoration:none;padding:14px 18px;border:2px solid var(--line);border-radius:999px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;min-height:48px}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--shade)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shade)}
.btn--ink{background:var(--text);color:var(--bg)}
.btn--paper{background:var(--card);color:var(--text)}
.btn--sm{padding:11px 15px;font-size:13px;min-height:44px}
.folder .btn--paper{background:#fffaf0;color:#1d1a16;border-color:#1d1a16;box-shadow:4px 4px 0 #1d1a16}
.caret{display:inline-block;width:.55em;height:1.05em;background:currentColor;vertical-align:-.15em;margin-inline-start:3px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.washi{position:absolute;top:-13px;left:50%;width:96px;height:26px;transform:translateX(-50%) rotate(3deg);background:rgba(214,206,190,.82);box-shadow:0 1px 0 rgba(0,0,0,.08);z-index:2;clip-path:polygon(0 0,100% 6%,97% 50%,100% 100%,0 94%,3% 50%)}

/* ---------- hero ---------- */
.hero{padding-top:30px;padding-bottom:64px}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.hero-note{margin:0 0 0 2px;transform:rotate(-4deg)}
.hero-intro{min-width:0;padding-top:6px}
.hero-intro .hero-from{margin:18px 0 18px;font-size:22px}
.photo{position:relative;margin:4px 2px 0 0;flex:none;width:148px;background:#fffaf0;border:2px solid var(--line);padding:7px 7px 22px;box-shadow:var(--shadow);transform:rotate(3deg)}
.photo img,.photo-mono{display:block;width:100%;height:auto;aspect-ratio:600/730;object-fit:cover;background:#000}
.photo-mono{display:grid;place-content:center;justify-items:center;gap:2px;background:#1a1815;color:#f5f1e8;font:700 38px/1 var(--pixel);letter-spacing:1px;
  background-image:radial-gradient(rgba(245,241,232,.18) 1px,transparent 1.5px);background-size:8px 8px}
.photo-mono [lang="sd"]{font-size:17px;color:var(--accent);letter-spacing:0;line-height:1.2}
/* dark: the black-background portrait sits straight on the page, edges fading into the dark */
:root[data-theme="dark"] .photo{background:transparent;border:0;box-shadow:none;padding:0;transform:none}
:root[data-theme="dark"] .photo img{mix-blend-mode:lighten;background:transparent}
:root[data-theme="dark"] .photo .washi{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .photo{background:transparent;border:0;box-shadow:none;padding:0;transform:none}
  :root:not([data-theme="light"]) .photo img{mix-blend-mode:lighten;background:transparent}
  :root:not([data-theme="light"]) .photo .washi{display:none}
}
.name{font:700 clamp(60px,25.5vw,220px)/.82 var(--pixel);white-space:nowrap;margin:0 0 24px;letter-spacing:-.01em}
.name-row{display:block}
.name-row:nth-child(2){color:var(--accent)}
.name .ch{display:inline-block;animation:rise .6s cubic-bezier(.2,1.3,.4,1) both}
.name-row:first-child .ch:nth-child(1){animation-delay:.05s}.name-row:first-child .ch:nth-child(2){animation-delay:.1s}.name-row:first-child .ch:nth-child(3){animation-delay:.15s}
.name-row:nth-child(2) .ch:nth-child(1){animation-delay:.24s}.name-row:nth-child(2) .ch:nth-child(2){animation-delay:.29s}.name-row:nth-child(2) .ch:nth-child(3){animation-delay:.34s}.name-row:nth-child(2) .ch:nth-child(4){animation-delay:.39s}.name-row:nth-child(2) .ch:nth-child(5){animation-delay:.44s}
@keyframes rise{from{transform:translateY(28%);opacity:0}to{transform:none;opacity:1}}
.hero-pitch{font-size:19px;line-height:1.5;max-width:36ch;margin:0 0 24px}
.hero-from{color:var(--accent);transform:rotate(-1.5deg);transform-origin:left}
.hero-from .arr{font-family:var(--mono);font-size:.8em}
.nw{white-space:nowrap}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- ajrak strip: an original block-print-style band ---------- */
.ajrak{height:30px;border-block:2px solid var(--line);background-color:#c8323b;
  background-image:
    radial-gradient(circle at 50% 50%,#f5f1e8 0 3px,transparent 3.5px),
    conic-gradient(from 45deg at 50% 50%,#1a1815 0 25%,transparent 0 50%,#1a1815 0 75%,transparent 0),
    linear-gradient(45deg,transparent 46%,rgba(26,24,21,.55) 46% 54%,transparent 54%),
    linear-gradient(-45deg,transparent 46%,rgba(26,24,21,.55) 46% 54%,transparent 54%);
  background-size:30px 30px,30px 30px,15px 15px,15px 15px;background-position:center}
.ajrak--thin{height:18px;border-bottom:0}

/* ---------- about ---------- */
.about-grid{display:grid;gap:40px}
.postcard{position:relative;margin:0 auto;background:#fffaf0;padding:12px 12px 8px;border:2px solid var(--line);box-shadow:var(--shadow);transform:rotate(-2deg);max-width:380px;width:100%;color:#1d1a16}
.postcard svg{display:block;width:100%;height:auto;border:1.5px solid #1d1a16}
.postcard figcaption{text-align:center;margin-top:8px;font-size:24px}
.map-label{font:700 15px var(--mono);fill:#1d1a16}
.reveal.in .route-path{animation:march 1.8s linear infinite}
@keyframes march{to{stroke-dashoffset:-28}}
.about-text p{margin:0 0 16px;font-size:17px}
.about-text .lead{font-size:21px;line-height:1.45}
.hl{padding:0 .15em;color:inherit;border-radius:0;background:linear-gradient(transparent 58%,var(--accent-soft) 58%)!important;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl--yellow{background:var(--note-1)}.hl--pink{background:var(--note-2)}
.facts{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fact{border:2px solid var(--line);border-radius:12px;padding:12px;background:var(--card);display:flex;flex-direction:column;gap:4px;box-shadow:3px 3px 0 var(--shade)}
.fact--a{transform:rotate(-1.2deg)}.fact--b{transform:rotate(1deg)}.fact--c{transform:rotate(.8deg)}.fact--d{transform:rotate(-.8deg)}
.fact--d{background:var(--text);color:var(--bg)}.fact--d .fact-k{color:var(--accent)}
.fact-k{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.fact-v{font-weight:700;font-size:16px;line-height:1.25}

/* ---------- work ---------- */
.outline{font:700 clamp(60px,19vw,150px)/.9 var(--pixel);text-align:center;margin:0 0 12px;color:var(--bg);-webkit-text-stroke:2px var(--text);text-shadow:5px 5px 0 var(--accent);letter-spacing:.02em}
.sub{text-align:center;margin:0 auto 44px;max-width:30ch;font-size:17px;color:var(--muted)}
.folder{margin:0 auto 48px;max-width:880px}
.folder-tab{display:inline-flex;gap:16px;font:700 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;padding:12px 18px 10px;border:2px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;color:#fff}
.folder-body{border:2px solid var(--line);border-radius:0 16px 16px 16px;padding:22px 18px;box-shadow:6px 6px 0 var(--shade);color:#fff}
.folder--indigo .folder-tab,.folder--indigo .folder-body{background:var(--folder-a)}
:root[data-theme="dark"] .folder--indigo .folder-body,:root[data-theme="dark"] .folder--indigo .folder-tab{border-color:#4a443c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .folder--indigo .folder-body,:root:not([data-theme="light"]) .folder--indigo .folder-tab{border-color:#4a443c}}
.folder--red .folder-tab,.folder--red .folder-body{background:var(--folder-b)}
.folder h3{font:700 34px/1 var(--pixel);margin:0 0 14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.folder h3 .sd{font-size:26px;font-weight:700;color:#f5f1e8;opacity:.6}
.pitch{font-size:17px;margin:0 0 22px;color:#efe9dc}
.pipeline{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px;counter-reset:st}
.pipeline li{position:relative;background:#fffaf0;color:#1d1a16;border:2px solid #1d1a16;border-radius:10px;padding:10px 12px 10px 46px;counter-increment:st}
.pipeline li::before{content:counter(st);position:absolute;left:10px;top:10px;width:24px;height:24px;border-radius:50%;background:#c8323b;color:#fff;border:2px solid #1d1a16;display:grid;place-items:center;font:700 12px/1 var(--mono)}
.pipeline b{display:block;font:700 15px/1.3 var(--mono)}
.pipeline small{display:block;font-size:14px;line-height:1.4;color:#4a443b}
.feature-list{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:9px}
.feature-list li{padding-left:22px;position:relative;font-size:15.5px;line-height:1.45}
.feature-list li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;background:#efe9dc}
.folder--indigo .feature-list li::before{background:var(--accent)}
.folder-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;border-top:2px dashed rgba(255,255,255,.45);padding-top:16px}
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.chips li{font:600 12px/1 var(--mono);padding:7px 10px;border-radius:999px;border:1.5px solid rgba(255,255,255,.8)}

/* phone screenshots on a project card (Yaad) */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 22px;max-width:560px}
.shots figure{margin:0}
.shots img{display:block;width:100%;height:auto;border:2px solid #1d1a16;border-radius:12px;box-shadow:4px 4px 0 #1d1a16;background:#fffaf0}
.shots figcaption{font:700 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;text-align:center;margin-top:10px;color:#efe9dc}
.foot-btns{display:flex;flex-wrap:wrap;gap:10px}

/* code window */
.code-wrap{max-width:880px;margin:0 auto 56px}
.code-note{color:var(--accent);margin:0 0 8px 8px;transform:rotate(-2deg);transform-origin:left;font-size:25px}
:root[data-theme="dark"] .code-note{color:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .code-note{color:var(--accent)}}
.window{margin:0;border:2px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:#16140f}
.window-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#2a261e;border-bottom:2px solid #000;color:#d8cdb6}
.window-bar i{width:11px;height:11px;border-radius:50%;background:#ff5c66}
.window-bar i:nth-child(2),.window-bar i:nth-child(3){background:#5a544a}
.window-bar span{margin-inline-start:auto;font-size:15px}
.code{margin:0;padding:18px 16px;overflow-x:auto;color:#f3ead6;font:500 18.5px/1.8 var(--sd);text-align:right;tab-size:4}
.code code{font:inherit;white-space:pre}
.code .k{color:#ff5c66;font-weight:700}.code .f{color:#fffdf8;font-weight:700}.code .o{color:#c9c1b2}.code .n{color:#ffb3b8}.code .b{color:#fffdf8;text-decoration:underline;text-decoration-color:rgba(255,92,102,.6);text-underline-offset:6px}.code .s{color:#ffb3b8}
.window-out{border-top:2px dashed #4a4335;background:#0f0e0a}
.window-out pre{margin:0;padding:14px 16px;font:500 14px/1.6 var(--mono);color:#efe9dc;overflow-x:auto}
.window-out .prompt{color:#ff5c66}
.window-out [lang="sd"]{font-family:var(--sd)}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0}
.legend div{display:flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:999px;padding:4px 12px 4px 10px;background:var(--card)}
.legend dt{font-size:17px;font-weight:700;color:var(--accent)}
.legend dd{margin:0;font:600 13px/1 var(--mono)}

/* keyboard visual */
.kbd{background:rgba(0,0,0,.2);border:2px solid #1d1a16;border-radius:12px;padding:12px;margin:0 0 22px}
.kbd-screen{background:#fffaf0;color:#1d1a16;border:2px solid #1d1a16;border-radius:8px;min-height:50px;padding:6px 12px;margin-bottom:10px;font-size:24px;line-height:1.5;text-align:right}
.kbd-row{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin-top:6px;direction:rtl}
.kbd-row span{font:700 20px/1 var(--sd);background:#fffaf0;color:#1d1a16;border:2px solid #1d1a16;border-radius:7px;padding:8px 0 6px;text-align:center;box-shadow:0 3px 0 #1d1a16;transition:transform .1s,box-shadow .1s,background .1s}
.kbd-row span.hit{transform:translateY(3px);box-shadow:0 0 0 #1d1a16;background:#1a1815;color:#fffdf8}

/* ---------- skills ---------- */
.skills-intro{margin:-8px 0 30px;font-size:17px;color:var(--muted);max-width:40ch}
.shelf{margin:0 0 30px}
.shelf .label{margin-bottom:14px}
.stickers{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.stk{font:700 16px/1 var(--mono);padding:13px 16px;border:2px solid var(--line);box-shadow:3px 3px 0 var(--shade);transition:transform .2s;border-radius:6px;color:#1d1a16}
.stk:hover{transform:rotate(0) scale(1.05)!important}
.stk:nth-child(odd){transform:rotate(-1.5deg)}.stk:nth-child(even){transform:rotate(1.2deg)}
.stk{background:var(--card);color:var(--text)}
.stk--1,.stk--2,.stk--3,.stk--4{background:var(--note-1);color:var(--note-text)}
.stk--5,.stk--6,.stk--7,.stk--8{background:var(--note-2);color:var(--note-text)}
.stk--9,.stk--10,.stk--11,.stk--12,.stk--13{border-style:dashed}
.stk--14{background:var(--text);color:var(--bg)}.stk--15{font-size:13.5px;border-style:dashed}
.stk--16{background:var(--accent);color:var(--on-accent)}.stk--17{background:var(--text);color:var(--bg)}

/* ---------- contact ---------- */
.contact{text-align:center;padding-bottom:76px}
.big-hi{font:700 clamp(64px,19vw,170px)/.88 var(--pixel);margin:0 0 20px;color:var(--text);text-shadow:5px 5px 0 var(--accent)}
.contact-copy{max-width:36ch;margin:0 auto 28px;font-size:18px}
.links{list-style:none;padding:0;margin:0 auto;display:grid;gap:14px;max-width:460px}
.link-card{display:flex;align-items:center;gap:14px;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:15px 16px;box-shadow:var(--shadow);text-decoration:none;transition:transform .15s,box-shadow .15s;min-height:64px}
.link-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--shade)}
.link-card > svg{flex:none}
.link-card > span:not(.arrow){min-width:0}
.link-card b{display:block;font:700 16px/1.3 var(--mono)}
.link-card small{display:block;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.link-card .arrow{font:700 20px/1 var(--mono);margin-left:auto;flex:none}
.link-card--mail{background:var(--accent);color:var(--on-accent)}.link-card--mail small{color:inherit;opacity:.85}


/* ---------- footer ---------- */
.footer{background:#1a1815;color:#f5f1e8}
.footer-in{text-align:center;padding:30px 18px calc(30px + env(safe-area-inset-bottom))}
.footer p{margin:4px 0}
.footer-name{font:700 30px/1 var(--pixel)}
.footer-sd{font-size:22px;color:#ff5c66}
.footer-tr{font:500 13px var(--mono);opacity:.8}
.footer .small{font:500 12px var(--mono);opacity:.65;margin-top:12px}

/* ---------- scroll reveal ---------- */
.js .reveal{opacity:0;translate:0 22px;transition:opacity .6s ease,translate .6s ease}
.js .reveal.in{opacity:1;translate:0 0}

/* ---------- wider screens ---------- */
@media (min-width:430px){ .nav-wide{display:block} }
@media (min-width:700px){
  section{padding:84px 32px}
  .topbar{padding:12px 24px 12px 28px;gap:12px}
  .topbar nav a{font-size:13px;padding:10px 14px}
  .hero{padding-top:56px;padding-bottom:96px}
  .photo{width:230px;padding:10px 10px 32px}
  .hero-intro .hero-from{font-size:26px}
  .photo-mono{font-size:58px}.photo-mono [lang="sd"]{font-size:24px}
  .hero-pitch{font-size:21px}
  .about-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:60px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .folder-body{padding:30px 32px}
  .folder h3{font-size:46px}
  .pipeline{grid-template-columns:repeat(4,1fr)}
  .feature-list{grid-template-columns:1fr 1fr;column-gap:28px}
  .code{font-size:22px;padding:22px 26px}
  .kbd{max-width:520px}
  .shelves{display:grid;grid-template-columns:1fr 1fr;gap:10px 40px}
}
@media (min-width:1100px){
  .hero-top{display:block}
  .photo{position:absolute;right:40px;top:60px;width:300px;padding:12px 12px 40px}
  .name{font-size:200px}
  .photo-mono{font-size:84px}.photo-mono [lang="sd"]{font-size:32px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;translate:0 0}
}