/* ═══════════════════════════════════════════════════════════════════
   alwaz.css — alwaztahir.com

   Brief, verbatim: "white and black or ash white and black, minimal designs
   with black lines, abstract asymmetrical kinda feeling", dot cursor,
   "animations but minimal like rai but more better and personalised".

   So the rules for this file are:

     NO CARDS. No fills, no shadows, no rounded boxes. Structure comes from
     hairlines and from where things sit, nothing else. The moment a panel
     gets a background it stops being this design.

     NOTHING IS CENTRED. Every section uses an off-centre grid and the
     columns deliberately do not match each other section to section. That
     asymmetry is the "abstract" part of the brief — it should feel composed
     rather than laid out.

     TWO COLOURS. Ink on ash. A single accent exists but is used about four
     times on the whole page.

   This is the only stylesheet on the domain. It carries its own reset
   because it shares nothing with scalewiseva.com — that is deliberate, it is
   a different site about a person.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --ash:    #FAFAF7;   /* page */
    --paper:  #FFFFFF;   /* the few lighter bands */
    --ink:    #0B0B0B;
    --ink-70: rgba(11, 11, 11, 0.70);
    --ink-45: rgba(11, 11, 11, 0.45);
    --ink-25: rgba(11, 11, 11, 0.25);
    --line:   rgba(11, 11, 11, 0.14);
    --accent: #C2410C;   /* used ~4 times total. Restraint is the point. */
    --gut:    clamp(1.25rem, 5vw, 5.5rem);
    --maxw:   1440px;
}

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

html {
    scroll-behavior: smooth;
    /* The nav is fixed; anchors would otherwise land underneath it. */
    scroll-padding-top: 6rem;
}

body {
    background: var(--ash);
    color: var(--ink);
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ═══ Cursor ═══════════════════════════════════════════════════════
   A solid dot that tracks exactly, and a ring that lags behind it. The lag
   is what makes it feel like a physical object rather than a second
   pointer.

   Both are pointer-events:none and aria-hidden. The real cursor is hidden
   only on devices with a fine pointer that can hover — a touch screen keeps
   its own behaviour, and so does anyone who asked for reduced motion, which
   alwaz.js handles by never starting.                                    */
.cur, .cur-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    will-change: transform;
}
.cur {
    width: 6px; height: 6px;
    margin: -3px 0 0 -3px;
    background: var(--ink);
    border-radius: 50%;
}
.cur-ring {
    width: 32px; height: 32px;
    margin: -16px 0 0 -16px;
    border: 1px solid var(--ink-25);
    border-radius: 50%;
    transition: width .22s ease, height .22s ease, margin .22s ease,
                border-color .22s ease, background .22s ease;
}
/* Over anything clickable the ring opens up and fills faintly. */
.cur-ring.is-over {
    width: 56px; height: 56px;
    margin: -28px 0 0 -28px;
    border-color: transparent;
    background: rgba(11, 11, 11, 0.07);
}
body.has-cursor { cursor: none; }
body.has-cursor a,
body.has-cursor button { cursor: none; }

/* ═══ Reveal ═══════════════════════════════════════════════════════
   One animation, used everywhere: 12px up and a fade, staggered by a
   variable the script sets. No slides, no scales, no parallax. */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .7s cubic-bezier(.2,.7,.3,1),
                transform .7s cubic-bezier(.2,.7,.3,1);
    transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .cur, .cur-ring { display: none; }
}

/* ═══ Nav ══════════════════════════════════════════════════════════ */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.6rem var(--gut);
    background: linear-gradient(to bottom, var(--ash) 55%, rgba(250,250,247,0));
}
.nav-name {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.02em;
    text-decoration: none;
}
.nav-links { display: flex; gap: 1.75rem; }
.nav-links a {
    font-size: 0.82rem;
    color: var(--ink-45);
    text-decoration: none;
    position: relative;
    transition: color .2s;
}
/* Underline draws from the left rather than appearing. */
.nav-links a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -4px;
    width: 100%; height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }

/* ═══ Hero ═════════════════════════════════════════════════════════
   Asymmetric: a wide left column and a narrower right one, and the
   portrait deliberately hangs lower than the text baseline. */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: end;
    padding: clamp(8rem, 18vh, 13rem) var(--gut) clamp(3rem, 8vh, 5rem);
    max-width: var(--maxw);
}
/* The hero's left column. Nothing but a stacking context and a max width —
   the asymmetry comes from the grid on .hero, not from here. */
.hero-l { min-width: 0; }

.avail {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-45);
    margin-bottom: 2rem;
}
.avail-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    /* The only looping animation on the page. */
    animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.25 } }
@media (prefers-reduced-motion: reduce) { .avail-dot { animation: none } }

.hero-h {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: clamp(3.4rem, 12vw, 9rem);
    line-height: 0.86;
    letter-spacing: -0.055em;
    margin-bottom: 2.2rem;
}
.hero-h .dot { color: var(--accent); }

.hero-sub {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.55;
    max-width: 34ch;
    color: var(--ink-70);
    margin-bottom: 1rem;
}
.hero-sub2 {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.55;
    max-width: 34ch;
    margin-bottom: 2.5rem;
}
.hero-cta { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }

.btn {
    display: inline-block;
    padding: 0.85rem 1.6rem;
    background: var(--ink);
    color: var(--ash);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .25s, transform .25s;
}
.btn:hover { background: var(--accent); transform: translateY(-2px); }

.lnk {
    display: inline-block;
    font-size: 0.88rem;
    text-decoration: none;
    border-bottom: 1px solid var(--ink-25);
    padding-bottom: 2px;
    transition: border-color .25s;
}
.lnk:hover { border-color: var(--ink); }

/* Portrait: a hairline frame, image inset, and it sits low. No radius,
   no shadow — a rectangle and a line. */
.hero-r { align-self: end; }
.portrait {
    position: relative;
    border: 1px solid var(--line);
    padding: 10px;
    /* Pulled down so it crosses the rule below. Asymmetry, on purpose. */
    margin-bottom: -3.5rem;
    background: var(--paper);
}
.portrait img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.04);
    transition: filter .5s ease;
}
.portrait:hover img { filter: grayscale(0%) contrast(1); }
.portrait-fallback {
    display: none;
    font-family: 'Sora', sans-serif;
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--ink-25);
    aspect-ratio: 4 / 5;
    align-items: center;
    justify-content: center;
}
/* Set by the img onerror handler, so a missing photo is a design, not a
   broken icon. */
.portrait.no-img img { display: none; }
.portrait.no-img .portrait-fallback { display: flex; }

/* ═══ Rules ════════════════════════════════════════════════════════
   The black lines that carry the whole layout. Full-bleed on purpose. */
.rule { height: 1px; background: var(--line); }

/* ═══ Facts ════════════════════════════════════════════════════════ */
.facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: var(--maxw);
    padding: 0 var(--gut);
}
.fact {
    padding: 2.5rem 1.5rem 2.5rem 0;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.fact:first-child { padding-left: 0; }
.fact:last-child { border-right: none; }
.fact-n {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.fact-l { font-size: 0.78rem; color: var(--ink-45); max-width: 20ch; }

/* ═══ Sections ═════════════════════════════════════════════════════
   Every section is a two-column grid whose split differs from its
   neighbours. The numbered head sits in the narrow column. */
.sec {
    display: grid;
    grid-template-columns: minmax(0, 0.28fr) minmax(0, 0.72fr);
    gap: clamp(1.5rem, 5vw, 5rem);
    max-width: var(--maxw);
    padding: clamp(4rem, 10vh, 7rem) var(--gut);
}
.sec-head { display: flex; align-items: baseline; gap: 0.9rem; }
.sec-n {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    color: var(--accent);
    letter-spacing: 0.05em;
}
.sec-t {
    font-family: 'Sora', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink-45);
}

.about-body { max-width: 62ch; }
.about-body p {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.65;
}
.about-body p + p { margin-top: 1.5rem; }

/* ═══ Work ═════════════════════════════════════════════════════════ */
.work {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 5vw, 4.5rem);
}
.work-main { text-decoration: none; display: block; }
.work-kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    color: var(--ink-45);
    letter-spacing: 0.06em;
}
.work-main h3 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
    margin: 0.6rem 0 1.1rem;
    transition: color .25s;
}
.work-main:hover h3 { color: var(--accent); }
.work-main p { color: var(--ink-70); max-width: 46ch; margin-bottom: 1.25rem; }
.work-go {
    font-size: 0.85rem;
    border-bottom: 1px solid var(--ink-25);
    padding-bottom: 2px;
}

.work-side-l {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-45);
    margin-bottom: 1rem;
}
.clients { list-style: none; margin-bottom: 1.5rem; }
.clients li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
}

/* ═══ Building ═════════════════════════════════════════════════════ */
.builds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 4rem);
}
.build-top { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.9rem; }
.build h3 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.035em;
}
.build p { color: var(--ink-70); max-width: 44ch; }
.tag {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--line);
    color: var(--ink-45);
}
.tag-live { border-color: var(--accent); color: var(--accent); }

/* ═══ Writing ══════════════════════════════════════════════════════ */
.posts { list-style: none; border-top: 1px solid var(--line); margin-bottom: 1.75rem; }
.post a {
    display: grid;
    grid-template-columns: 8rem 1fr auto;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    transition: padding-left .3s cubic-bezier(.2,.7,.3,1);
}
.post a:hover { padding-left: 0.75rem; }
.post-date {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    color: var(--ink-45);
}
.post-t { font-size: 1rem; }
.post-go { color: var(--ink-25); transition: color .25s; }
.post a:hover .post-go { color: var(--accent); }

/* ═══ Credentials ══════════════════════════════════════════════════ */
.creds { list-style: none; border-top: 1px solid var(--line); }
.creds li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}
.creds strong { font-family: 'Sora', sans-serif; font-weight: 500; font-size: 1rem; }
.creds span { font-size: 0.82rem; color: var(--ink-45); }

/* ═══ Contact ══════════════════════════════════════════════════════ */
.contact-body { min-width: 0; }

.contact-lead {
    font-size: clamp(1.3rem, 3vw, 2.1rem);
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.25;
    max-width: 24ch;
    margin-bottom: 2rem;
}
.mail {
    display: inline-block;
    font-size: clamp(1rem, 2vw, 1.3rem);
    text-decoration: none;
    border-bottom: 1px solid var(--ink-25);
    padding-bottom: 3px;
    margin-bottom: 3rem;
    transition: border-color .25s, color .25s;
}
.mail:hover { color: var(--accent); border-color: var(--accent); }

.elsewhere { list-style: none; border-top: 1px solid var(--line); max-width: 40rem; }
.elsewhere a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    transition: padding-left .3s cubic-bezier(.2,.7,.3,1);
}
.elsewhere a:hover { padding-left: 0.6rem; }
.elsewhere em { font-style: normal; font-size: 0.78rem; color: var(--ink-45); }

/* ═══ Footer ═══════════════════════════════════════════════════════ */
.foot {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 2rem var(--gut) 3rem;
    border-top: 1px solid var(--line);
    font-size: 0.78rem;
    color: var(--ink-45);
}
.foot a { text-decoration: none; border-bottom: 1px solid var(--ink-25); }

/* ═══ Responsive ═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        align-items: start;
        padding-top: 7rem;
    }
    .hero-r { max-width: 320px; }
    .portrait { margin-bottom: 0; }
    .sec { grid-template-columns: 1fr; gap: 1.75rem; }
    .work, .builds { grid-template-columns: 1fr; }
    .facts { grid-template-columns: repeat(2, 1fr); }
    .fact { padding: 1.75rem 1rem 1.75rem 0; }
    .fact:nth-child(2) { border-right: none; }
    .fact:nth-child(3), .fact:nth-child(4) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
    .nav-links { gap: 1.1rem; }
    .nav-links a { font-size: 0.76rem; }
    .post a { grid-template-columns: 1fr auto; }
    .post-date { grid-column: 1 / -1; }
}