/* REHAN — minimal portfolio landing · agence build 44
   Paper + ink, one accent (vermilion: the logo dot, active marks, button bloom). */

:root{
  --frame:1440px; --gutter:40px; --gutter-m:20px; --section-m:40px; --nav-h:72px;

  --space-2xs:8px; --space-xs:16px; --space-sm:24px; --space-md:40px;
  --space-lg:56px; --space-xl:80px; --space-2xl:100px;
  --section-pad:var(--space-xl); --section-pad-open:var(--space-2xl);
  --section-inner-gap:var(--space-md);

  --paper:#F3F2EE; --white:#FBFBF9; --ink:#15151A;
  --muted:#6E6D68; --mute-h:#85847E;
  --on-ink:#F3F2EE; --muted-d:#8C8C93;
  --accent:#FF4B1F; --grey:#E8E7E3;
  --line:rgba(21,21,26,.14); --line-d:rgba(243,242,238,.16);
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img,svg{max-width:100%}
p,dd{text-wrap:pretty}
h1,h2,.edit{text-wrap:balance}
.mute{color:var(--mute-h)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ph{display:inline-block;flex:none;fill:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:inherit}

.container{box-sizing:border-box;width:100%;max-width:var(--frame);margin:0 auto;padding-inline:var(--gutter)}

/* word reveal */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.wi{display:inline-block}

/* ── the wordmark ─────────────────────────────────────────── */
.lg{display:block;width:100%;height:auto;overflow:visible}
.lg-s{stroke:currentColor;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.lg-dot{fill:var(--accent)}
.lg-hit{fill:transparent;pointer-events:all}
html.pre .hero-mark .lg-s{stroke-dasharray:1 1.5;stroke-dashoffset:1.01}
html.pre .hero-mark .lg-dot{opacity:0}

/* ── intro: a paper cover under the hero's own wordmark ───── */
.intro-cover{display:none;position:fixed;inset:0;z-index:90;background:var(--paper)}
html.intro-on .intro-cover{display:block}
html.intro-on .hero-mark{position:relative;z-index:91}

/* ── cursor (Tier C): difference disc + exact core ────────── */
.cur,.cur-core{position:fixed;top:0;left:0;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:9999;opacity:0}
.cur{width:28px;height:28px;margin:-14px 0 0 -14px}
html.cur-ready .cur,html.cur-ready .explore{transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.cur-core{width:6px;height:6px;margin:-3px 0 0 -3px}
html.has-cur .cur,html.has-cur .cur-core{opacity:1}
html.has-cur,html.has-cur a,html.has-cur button{cursor:none}
/* over an accent-filled pill the difference blend turns cyan: drop to a flat ink dot there */
html.cur-flat .cur{mix-blend-mode:normal;background:var(--ink)}
html.cur-flat .cur-core{opacity:0}
/* over a project image the disc gives way to an Explore bubble that eases in and trails the pointer */
.explore{position:fixed;top:0;left:0;width:72px;height:72px;margin:-36px 0 0 -36px;pointer-events:none;z-index:9998}
.explore-in{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent);color:var(--ink);transform:scale(.3);opacity:0;transition:transform .5s var(--ease),opacity .3s ease}
.explore-in .ph{flex:none}
html.cur-explore .explore-in{transform:scale(1);opacity:1}
html.cur-explore .cur,html.cur-explore .cur-core{opacity:0}
@media (hover:none),(pointer:coarse){.cur,.cur-core{display:none}}
@media (prefers-reduced-motion:reduce){.cur,.cur-core{display:none}}

/* ── buttons: Type 2 ghost pill, aperture bloom on hover ──── */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border:1px solid currentColor;border-radius:300px;font-size:15px;font-weight:500;white-space:nowrap;color:var(--ink);transition:color .35s ease,border-color .35s ease}
.btn::before{content:'';position:absolute;inset:-1px;z-index:-1;background:var(--accent);clip-path:circle(0 at var(--x,50%) var(--y,50%));transition:clip-path .55s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{clip-path:circle(150% at var(--x,50%) var(--y,50%))}
.btn:hover,.btn:focus-visible{color:var(--ink);border-color:var(--accent)}
.btn .ph{transition:transform .45s var(--ease)}
.btn[aria-pressed="true"] .ph{transform:scaleX(-1)}
.btn-d{color:var(--on-ink)}
.link-btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:12px 0;font-size:15px}
.link-btn::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.link-btn:hover::after,.link-btn:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* ── nav ───────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;color:var(--ink);transition:transform .45s var(--ease),background .35s ease,color .35s ease}
.nav.hide{transform:translateY(-101%)}
.nav.solid{background:rgba(243,242,238,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav[data-tone="dark"]{color:var(--on-ink)}
.nav.solid[data-tone="dark"]{background:rgba(21,21,26,.86)}
.nav-inner{max-width:var(--frame);margin:0 auto;padding-inline:var(--gutter);height:var(--nav-h);display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:block;width:72px;padding:13px 0}
.nav-logo.is-off{opacity:0;pointer-events:none}
.nav-logo.is-off:focus-visible{opacity:1}
.nav-links{display:flex;gap:40px}
.nav-links a{position:relative;display:block;padding:12px 0;font-size:15px}
.nav-links a::before{content:'';position:absolute;left:-13px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--accent);transform:translateY(-50%) scale(0);transition:transform .35s var(--ease)}
.nav-links a:hover::before,.nav-links a:focus-visible::before{transform:translateY(-50%) scale(1)}
.burger{display:none;flex-direction:column;justify-content:center;align-items:stretch;width:44px;height:44px;padding:10px;gap:6px;margin-right:-10px}
.burger span{display:block;width:100%;height:1.5px;background:currentColor;transform-origin:center;transition:transform .34s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:45;background:var(--ink);color:var(--on-ink);padding:104px var(--gutter-m) var(--gutter-m);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.menu[hidden]{display:none}
.menu ul a{display:block;padding:8px 0;font-size:44px;line-height:1.1;letter-spacing:-.03em}
.btn-full{width:100%}
@media (min-width:769px){.menu{display:none}}
@media (prefers-reduced-motion:reduce){.nav,.burger span{transition:none}}

/* ── hero ──────────────────────────────────────────────────── */
.s-hero{min-height:100vh;min-height:100svh;display:flex;background:var(--paper);padding:calc(var(--nav-h) + var(--space-md)) 0 var(--gutter)}
.s-hero{position:relative}
.hero-fluid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:blur(46px);clip-path:inset(0)}
.hero-col{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:56px}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.hero-h1{font-size:clamp(30px,min(4.2vw,7.2vh),60px);line-height:1.06;letter-spacing:-.03em;font-weight:400;max-width:19ch}
.hero-h1 .mute{display:block}
.hero-mark{width:min(100%,calc((100svh - 470px) * 3.964));margin-left:auto;transform-origin:0 0;will-change:transform}

/* ── work ──────────────────────────────────────────────────── */
.s-work{background:var(--white);padding:var(--section-pad) 0;min-height:800px;display:flex;flex-direction:column;justify-content:center}
.h2{font-size:40px;line-height:1.1;letter-spacing:-.025em;font-weight:400}
.work-split{display:grid;grid-template-columns:38% 1fr;gap:56px;margin-top:var(--section-inner-gap)}
.work-list{display:grid;grid-template-rows:repeat(4,1fr);border-bottom:1px solid var(--line)}
.work-row{display:grid;grid-template-columns:56px 1fr;align-items:center;column-gap:16px;text-align:left;border-top:1px solid var(--line);color:var(--mute-h);transition:color .3s ease}
.wr-n{position:relative;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.wr-n::after{content:'';position:absolute;left:28px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--accent);transform:translateY(-50%) scale(0);transition:transform .4s var(--ease)}
.wr-name{font-size:32px;line-height:1.1;letter-spacing:-.025em;transition:transform .5s var(--ease)}
.work-row[aria-selected="true"]{color:var(--ink)}
.work-row[aria-selected="true"] .wr-n::after{transform:translateY(-50%) scale(1)}
.work-row[aria-selected="true"] .wr-name{transform:translateX(8px)}
.work-row:focus-visible{outline-offset:6px;border-radius:4px}

.work-stage{height:520px;border-radius:14px;background:var(--paper);overflow:hidden;min-width:0}
.pane{height:100%}
.pane[hidden]{display:none}
.pane-visual{position:relative;height:100%;border-radius:16px;overflow:hidden;background:var(--grey);animation:winIn .65s var(--ease) both}
.pane-shots{--zoom:1;display:flex;align-items:center;justify-content:center;gap:16px;height:100%;padding:28px 20px;transform:scale(var(--zoom));transition:transform .6s var(--ease)}
.pane-shots .pane-shot{flex:1 1 0;width:0;min-width:0;height:100%;object-fit:contain}
.pane-shots.is-single{padding:0}
.pane-shots.is-single .pane-shot{flex:none;width:100%;height:100%;object-fit:cover}
/* a gentle zoom while a mouse hovers a project image; the tile clips it */
@media (hover:hover) and (pointer:fine){
  .pane-visual:hover .pane-shots{transform:scale(calc(var(--zoom) * 1.04))}
}
.pane-cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 24px;background:linear-gradient(to top,rgba(21,21,26,.82),rgba(21,21,26,0))}
.pane-cap span{font-size:15px;line-height:1.3;color:#fff;max-width:34ch}
.pane-cta{display:inline-flex;align-items:center;gap:8px;flex:none;padding:6px 0;font-size:14px;font-weight:500;color:#fff;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 3px)/0 1px no-repeat;transition:background-size .5s var(--ease)}
a.pane-visual{display:block;color:inherit;text-decoration:none;cursor:pointer}
.pane-cta .ph{transition:transform .45s var(--ease),color .3s ease}
a.pane-visual:focus-visible .pane-cta{background-size:100% 1px}
a.pane-visual:focus-visible .pane-cta .ph{transform:translate(3px,-3px);color:var(--accent)}
a.pane-visual:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@keyframes winIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}


/* ── about: the sentence that edits itself down ────────────── */
.s-about{background:var(--paper);padding:var(--section-pad) 0;min-height:800px;display:flex;flex-direction:column;justify-content:center}
.about-split{display:grid;grid-template-columns:1fr 30%;gap:56px;min-height:520px}
.about-main{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:56px;min-width:0}
.about-side{display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.edit{font-size:clamp(40px,6.7vw,96px);line-height:1.06;letter-spacing:-.04em}
.cut{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;color:var(--mute-h);padding:.12em .24em .12em 0;margin:-.12em 0}
.about-bio{max-width:36ch}
.about-facts div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:14px}
.about-facts dt{color:var(--muted)}
.about-facts dd{text-align:right}

/* ── contact: the closing ask ──────────────────────────────── */
.s-contact{background:var(--ink);color:var(--on-ink);padding:var(--section-pad-open) 0;min-height:800px;display:flex}
.contact-col{display:flex;flex-direction:column;justify-content:space-between;gap:80px}
.ask{font-size:clamp(44px,8.2vw,118px);line-height:1;letter-spacing:-.045em;font-weight:400}
.ask .w{overflow:visible}
.s-contact .mute{color:var(--muted-d)}
.ask-row{display:flex;justify-content:space-between;align-items:center;gap:24px}
.ask-actions{display:flex;align-items:center;gap:40px}
.ask-note{font-size:14px;color:var(--muted-d)}

/* ── footer ────────────────────────────────────────────────── */
.footer{background:var(--ink);color:var(--on-ink);border-top:1px solid var(--line-d);padding:56px 0 24px}
.foot-grid{display:grid;grid-template-columns:6fr 3fr 3fr;gap:40px;padding-bottom:56px}
.foot-logo{display:block;width:132px;align-self:start}
.foot-head{font-size:13px;color:var(--muted-d);margin-bottom:16px}
.foot-col a{display:inline-block;padding:6px 0;font-size:15px;transition:color .3s ease}
.foot-col a:hover{color:var(--accent)}
.foot-bar{display:flex;justify-content:space-between;gap:24px;padding-top:24px;border-top:1px solid var(--line-d);font-size:13px;color:var(--muted-d)}

/* ═══ PROJECT CASE STUDY (project.html) ═══ */
.p-hero{background:var(--paper);padding:calc(var(--nav-h) + var(--space-md)) 0 var(--space-xl)}
.p-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:var(--space-xl)}
.p-count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.p-title{font-size:clamp(64px,13vw,188px);line-height:.95;letter-spacing:-.05em;font-weight:400;margin-left:-.04em}
.p-tag{margin-top:var(--space-sm);font-size:clamp(22px,2.4vw,32px);line-height:1.2;letter-spacing:-.02em;max-width:26ch;color:var(--mute-h)}
.p-meta{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:var(--space-xl)}
.p-meta div{padding-top:14px;border-top:1px solid var(--line);font-size:14px}
.p-meta dt{color:var(--muted);margin-bottom:4px}
.p-cover{background:var(--paper);padding-bottom:var(--space-xl)}
.p-stage{border-radius:14px;background:var(--white);border:1px solid var(--line);overflow:hidden}
.p-stage-img{display:block;width:100%;height:auto}
/* the website project gets a full-bleed browser-width shot instead of the boxed app-card treatment */
.p-cover-site{padding-bottom:0}
.p-stage-site{max-height:88vh;object-fit:cover;object-position:top}
.p-body{background:var(--white);padding:var(--space-xl) 0}
/* ── case-study narrative: short text beat, full visual, repeat ── */
.story-col{max-width:680px;margin:0 auto}
.story-h{margin:64px 0 16px;font-size:clamp(22px,2.6vw,28px);line-height:1.3;letter-spacing:-.015em;font-weight:400}
.story-col > .story-h:first-child{margin-top:0}
.story-p{margin:0 0 20px;font-size:18px;line-height:1.65;letter-spacing:-.005em;max-width:60ch}
.story-h + .story-p{margin-top:0}
.story-shot{margin:40px 0;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.story-shot img{width:100%;display:block}

.p-next{background:var(--ink);color:var(--on-ink);padding:var(--space-xl) 0 var(--space-lg)}
.p-next-k{font-size:14px;color:var(--muted-d)}
.p-next-a{position:relative;display:grid;grid-template-columns:56px 1fr auto;grid-template-areas:"n name go" ". kind go";align-items:end;column-gap:16px;margin-top:var(--space-sm);padding:var(--space-md) 0;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.p-next-n{grid-area:n;font-size:13px;color:var(--muted-d);padding-bottom:1.2em}
.p-next-name{grid-area:name;font-size:clamp(56px,11vw,160px);line-height:1;letter-spacing:-.05em;transition:transform .6s var(--ease),color .3s ease}
.p-next-kind{grid-area:kind;font-size:15px;color:var(--muted-d);padding-top:8px}
.p-next-go{grid-area:go;align-self:center;display:grid;place-items:center;width:72px;height:72px;border:1px solid currentColor;border-radius:50%;transition:background .4s ease,color .4s ease,border-color .4s ease,transform .5s var(--ease)}
.p-next-go .ph{width:28px;height:28px}
.p-next-a:hover .p-next-name,.p-next-a:focus-visible .p-next-name{transform:translateX(16px)}
.p-next-a:hover .p-next-go,.p-next-a:focus-visible .p-next-go{background:var(--accent);border-color:var(--accent);color:var(--ink);transform:translateX(-8px)}
.p-next-bar{display:flex;justify-content:space-between;gap:24px;margin-top:var(--space-md)}
.page-project .footer{border-top:0}
.page-project .link-btn{color:inherit}

@media (max-width:1024px){
  .p-meta{grid-template-columns:repeat(3,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .pane-visual{animation:none}
  .p-next-name,.p-next-go,.pane-cta,.pane-cta .ph{transition:none}
  .btn::before,.link-btn::after{transition:none}
}

/* ── ≤1024: content height, single columns ─────────────────── */
@media (max-width:1024px){
  .s-work,.s-about,.s-contact{min-height:0}
  .work-split,.about-split{grid-template-columns:1fr;gap:40px}
  .about-split{min-height:0}
  .work-row{padding:20px 0}
  .contact-col{gap:80px}
}

/* ═══ MOBILE GLOBAL RULES — ≤768px. Last block in the file. ═══ */
@media (max-width:768px){
  :root{--nav-h:64px}
  .container,.nav-inner,.menu{padding-left:var(--gutter-m);padding-right:var(--gutter-m)}
  [class^="s-"]{padding-top:var(--section-m);padding-bottom:var(--section-m)}
  .s-hero{padding-top:104px;padding-bottom:var(--gutter-m)}

  .nav-links{display:none}
  .burger{display:flex}

  .hero-col{gap:40px}
  .hero-top{flex-direction:column;gap:24px}
  .hero-h1{font-size:40px;max-width:none}
  .hero-mark{width:100%}

  .h2{font-size:32px}
  .work-split{gap:24px;margin-top:24px}
  .work-row{grid-template-columns:40px 1fr;column-gap:8px;padding:16px 0}
  .wr-n::after{left:22px}
  .wr-name{font-size:24px}
  .work-stage{height:320px}
  .pane-shots{gap:10px;padding:16px 12px}
  .pane-cap{padding:14px 16px}
  .pane-cap span{font-size:13px}

  .about-split{gap:24px}
  .about-main{gap:24px}
  .about-side{gap:24px}
  .edit{font-size:40px}

  .contact-col{gap:40px}
  .ask{font-size:44px}
  .ask-row{flex-direction:column;align-items:flex-start;gap:24px}
  .ask-actions{flex-direction:column;align-items:flex-start;gap:8px}

  .footer{padding:40px 0 20px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px 16px;padding-bottom:40px}
  .foot-logo{grid-column:1 / -1;width:112px}
  .foot-col a{padding:10px 0;font-size:14px}
  .foot-bar{flex-direction:column;gap:8px;padding-top:20px}
  .p-hero{padding-top:104px;padding-bottom:var(--section-m)}
  .p-top{margin-bottom:40px}
  .p-title{font-size:72px}
  .p-meta{grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
  .p-cover{padding-bottom:var(--section-m)}
  .p-body{padding:var(--section-m) 0}
  .story-h{margin:40px 0 12px;font-size:21px}
  .story-p{font-size:16px}
  .story-shot{margin:24px 0}
  .p-next{padding:var(--section-m) 0 40px}
  .p-next-a{grid-template-columns:32px 1fr auto;padding:24px 0}
  .p-next-go{width:48px;height:48px}
  .p-next-go .ph{width:20px;height:20px}
  .p-next-bar{flex-direction:column;gap:0}
}