/* =========================================================
   Asad Ullah — Portfolio v1
   Art direction: editorial, monochrome, typography-led
   ========================================================= */

:root{
  --bg:      #0A0A0A;
  --text:    #F5F5F2;
  --muted:   #8A8A86;
  --light:   #F2F1ED;

  --line:        rgba(245,245,242,.14);
  --line-soft:   rgba(245,245,242,.07);
  --line-faint:  rgba(245,245,242,.035);

  --f-display: "Bricolage Grotesque", "Archivo", sans-serif;
  --f-ui:      "Archivo", sans-serif;
  --f-serif:   "Instrument Serif", Georgia, serif;

  --m:   clamp(18px, 3.6vw, 56px);      /* page margin */
  --gap: clamp(10px, 1.4vw, 22px);      /* column gap  */

  --nav-h: clamp(62px, 7vh, 88px);

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-o: cubic-bezier(.22,.61,.36,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-ui);
  font-weight:400;
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  opacity:0;
  transition:opacity .9s ease;
}
body.is-ready{ opacity:1; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }

::selection{ background:var(--light); color:var(--bg); }

:focus-visible{
  outline:1px solid var(--light);
  outline-offset:6px;
}

/* --------- shared atoms --------- */

.lbl{
  font-family:var(--f-ui);
  font-size:clamp(9.5px,.72vw,11px);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.lbl--r{ text-align:right; }

.hair{
  display:block;
  height:1px;
  background:var(--line);
  transform-origin:left center;
  transition:transform 1.5s var(--ease);
}
.js .hair{ transform:scaleX(0); }
.js .is-in .hair, .js .hero .hair{ transform:scaleX(1); }

/* masked line entrance */
.line{
  display:block;
  overflow:hidden;
  padding-bottom:.11em;
  margin-bottom:-.11em;
}
.line > span{
  display:block;
  transition:transform 1.25s var(--ease);
  transition-delay:var(--d,0s);
  will-change:transform;
}
.js .line > span{ transform:translate3d(0,110%,0); }
.js .is-in .line > span{ transform:translate3d(0,0,0); }

/* soft fade-up for secondary blocks */
[data-reveal]{
  transition:opacity 1s var(--ease-o) var(--d,0s), transform 1.1s var(--ease) var(--d,0s);
}
.js [data-reveal]{ opacity:0; transform:translate3d(0,14px,0); }
.js [data-reveal].is-in{ opacity:1; transform:none; }

/* A hidden/backgrounded tab does not advance CSS transitions. If a reveal is
   triggered while hidden it can come back stuck at its start value — i.e. an
   invisible headline or a black showcase. While hidden we snap instead. */
.no-anim *, .no-anim *::before, .no-anim *::after{ transition:none !important; }

/* film grain */
.grain{
  position:fixed; inset:-50%;
  pointer-events:none;
  z-index:80;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:60;
  padding:0 var(--m);
  transition:transform .7s var(--ease), opacity .5s ease;
}
.nav::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:calc(var(--nav-h) + 30px);
  background:linear-gradient(to bottom,rgba(10,10,10,.92) 0%,rgba(10,10,10,.6) 45%,rgba(10,10,10,0) 100%);
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}
.nav.is-stuck::before{ opacity:1; }
.nav.is-hidden{ transform:translateY(-110%); }

.nav__in{
  height:var(--nav-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--gap);
}

.wordmark{
  display:inline-flex;
  align-items:flex-start;
  gap:.24em;
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(14px,1.05vw,16px);
  letter-spacing:-.015em;
  color:var(--text);
  line-height:1;
}
.wordmark__r{
  font-size:.62em;
  color:var(--muted);
  transform:translateY(.05em);
  transition:transform .6s var(--ease), color .4s ease;
}
.wordmark:hover .wordmark__r{ transform:translateY(.05em) rotate(180deg); color:var(--text); }

.avail{
  justify-self:center;
  display:inline-flex; align-items:center; gap:.7em;
  font-size:clamp(9.5px,.72vw,11px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.avail__dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--light);
  box-shadow:0 0 0 0 rgba(242,241,237,.5);
  animation:pulse 2.8s var(--ease-o) infinite;
}
@keyframes pulse{
  0%   { box-shadow:0 0 0 0 rgba(242,241,237,.45); }
  70%  { box-shadow:0 0 0 7px rgba(242,241,237,0); }
  100% { box-shadow:0 0 0 0 rgba(242,241,237,0); }
}

.nav__links{
  justify-self:end;
  display:flex;
  gap:clamp(20px,2.4vw,40px);
}
.nl{
  position:relative;
  display:block;
  overflow:hidden;
  line-height:1.15;
  font-size:clamp(12.5px,.95vw,14px);
  letter-spacing:-.005em;
  color:var(--text);
}
.nl span{
  display:block;
  position:relative;
  transition:transform .55s var(--ease);
}
.nl span::after{
  content:attr(data-t);
  position:absolute;
  left:0; top:100%;
  width:100%;
  color:var(--muted);
}
.nl:hover span{ transform:translateY(-100%); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  padding:var(--nav-h) var(--m) calc(var(--m) + 4px);
  display:grid;
  grid-template-rows:auto 1fr auto;
  row-gap:clamp(24px,5vh,64px);
}

/* fine column rules */
.rules{
  position:absolute;
  inset:0 var(--m);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  pointer-events:none;
  z-index:0;
}
.rules i{ border-left:1px solid var(--line-faint); }
.rules i:last-child{ border-right:1px solid var(--line-faint); }

.hero__top{
  position:relative; z-index:3;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(14px,2vw,28px);
  padding-top:clamp(10px,2.4vh,26px);
}

.hero__h{
  position:relative; z-index:3;
  align-self:center;
  font-family:var(--f-display);
  font-weight:500;
  font-variation-settings:"wdth" 100,"opsz" 96;
  font-size:clamp(2.45rem,8.45vw,10rem);
  line-height:.92;
  letter-spacing:-.042em;
  color:var(--text);
  max-width:15ch;
}
.hero__h em{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.015em;
  color:var(--light);
}
.line--off{ padding-left:clamp(0px,10vw,18ch); }

.hero__bot{
  position:relative; z-index:3;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  align-items:end;
}
.hero__meta{ grid-column:1 / span 6; }
.hero__role{
  font-size:clamp(13px,1.05vw,16px);
  color:var(--text);
  letter-spacing:-.01em;
  margin-bottom:.55em;
}
.hero__disc{
  font-size:clamp(11px,.85vw,13px);
  color:var(--muted);
  letter-spacing:.02em;
  max-width:60ch;
}

.scroll{
  grid-column:10 / span 3;
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:.85em;
  font-size:clamp(9.5px,.72vw,11px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .5s ease;
}
.scroll:hover{ color:var(--text); }
.scroll__a{
  font-style:normal;
  animation:nudge 2.4s var(--ease-o) infinite;
}
@keyframes nudge{
  0%,100%{ transform:translateY(0); opacity:.6; }
  50%    { transform:translateY(5px); opacity:1; }
}

/* cursor image reveal */
/* the layer itself never moves - it only hosts the trail items */
.peek{
  position:fixed;
  inset:0;
  /* strictly beneath the headline (z-index 3) — it can never sit over the type */
  z-index:1;
  pointer-events:none;
}

/* one item per project. Parked off-canvas so nothing can flash at 0,0 before the
   first pointer move; the script places, shows and retires them in sequence. */
.peek__item{
  position:absolute;
  top:0; left:0;
  width:clamp(200px,17vw,280px);
  opacity:0;
  transform:translate3d(-9999px,-9999px,0);
  transition:opacity .85s var(--ease-o);
  will-change:transform,opacity;
}
.peek__item.is-on{
  opacity:1;
  transition:opacity .4s var(--ease-o);
}
.peek__frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  border:1px solid var(--line);
  background:#0d0d0d;
}
.peek__img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.02) brightness(.5);
  transform:scale(1.14);
  will-change:transform;
}
.peek__tag{
  position:absolute;
  bottom:calc(100% + 9px); left:0;
  font-size:9.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

/* =========================================================
   SELECTED WORK INTRO
   ========================================================= */
.intro{
  padding:clamp(76px,13.5vh,180px) var(--m) clamp(30px,4.6vh,64px);
}
.intro__top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
  padding-bottom:clamp(26px,4.5vh,52px);
  border-bottom:1px solid var(--line-soft);
  margin-bottom:clamp(24px,4.4vh,58px);
}
.intro__h{
  font-family:var(--f-display);
  font-weight:500;
  font-variation-settings:"wdth" 100,"opsz" 96;
  font-size:clamp(2.1rem,6.1vw,6.6rem);
  line-height:.98;
  letter-spacing:-.038em;
  max-width:18ch;
}
.intro__h em{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--light);
}

/* =========================================================
   PROJECT 01 — ZKOP
   ========================================================= */
.pj{
  padding:clamp(24px,4vh,58px) var(--m) clamp(60px,11vh,150px);
}
.pj__meta{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(14px,2vw,30px);
  margin-bottom:clamp(10px,2vh,26px);
}

.pj__title{
  font-family:var(--f-display);
  font-weight:600;
  font-variation-settings:"wdth" 100,"opsz" 96;
  font-size:clamp(4.2rem,24.6vw,25rem);
  line-height:.8;
  letter-spacing:-.055em;
  color:var(--text);
  margin-left:-.015em;
}

.pj__sub{
  text-align:right;
  font-family:var(--f-serif);
  font-style:italic;
  font-size:clamp(1.15rem,3vw,2.7rem);
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--light);
  margin-top:clamp(8px,1.6vh,22px);
  margin-bottom:clamp(18px,3.4vh,42px);
}
.pj__sub em{ font-style:italic; }

/* the showcase image */
.shot{
  position:relative;
  display:block;
  overflow:hidden;
  /* the cover is shown WHOLE — the frame takes the image's own ratio so nothing is
     ever cropped. --ar is overwritten from the real file once it loads. */
  --ar:1.5;
  width:100%;
  aspect-ratio:var(--ar);
  background:#0d0d0d;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  transform:translate3d(0,var(--py,0px),0);
  transition:clip-path 1.1s var(--ease);
  will-change:transform;
  cursor:pointer;
}
/* closed only when the script is alive to open it again */
.js .shot{ clip-path:inset(0 0 100% 0); }
.js .shot.is-in{ clip-path:inset(0 0 0 0); }

.shot__inner{
  position:absolute;
  inset:0;
  display:block;
}
.shot__img{
  width:100%; height:100%;
  /* contain, not cover: guarantees the full composition survives sub-pixel rounding */
  object-fit:contain;
  transition:transform 1.4s var(--ease), filter .9s ease;
  will-change:transform;
}
.js .shot__img{ transform:scale(1.12); }
.js .shot.is-in .shot__img{ transform:scale(1); }
/* hover lifts the image rather than zooming it — a zoom would crop the cover */
.shot:hover .shot__img{ filter:brightness(1.07) contrast(1.02); }

.shot__empty{
  position:absolute; inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
}
.shot.is-empty .shot__empty{ display:flex; }
.shot.is-empty .shot__inner{ display:none; }
.shot__empty b{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(20px,3vw,34px);
  letter-spacing:-.03em;
  color:var(--muted);
}
.shot__empty i{
  font-style:normal;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(138,138,134,.6);
}

.shot__cta{
  position:absolute;
  right:clamp(14px,2vw,28px);
  bottom:clamp(14px,2vw,28px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:clamp(64px,7vw,96px);
  height:clamp(64px,7vw,96px);
  border:1px solid rgba(242,241,237,.5);
  border-radius:50%;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--light);
  backdrop-filter:blur(2px);
  opacity:0;
  transform:scale(.8);
  transition:opacity .6s var(--ease-o), transform .7s var(--ease);
}
.shot:hover .shot__cta{ opacity:1; transform:scale(1); }

.pj__foot{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  align-items:baseline;
  padding-top:clamp(18px,3.4vh,40px);
}
.pj__disc{
  grid-column:1 / span 7;
  font-size:clamp(11px,.85vw,13px);
  letter-spacing:.02em;
  color:var(--muted);
}

.view{
  grid-column:9 / span 4;
  justify-self:end;
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:.5em;
  padding-bottom:.45em;
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(15px,1.5vw,22px);
  letter-spacing:-.02em;
  color:var(--text);
}
.view__a{ font-style:normal; transition:transform .55s var(--ease); }
.view:hover .view__a{ transform:translate(.22em,-.22em); }
.view__u{
  position:absolute; left:0; right:0; bottom:0;
  height:1px;
  background:var(--line);
}
.view__u::after{
  content:"";
  position:absolute; inset:0;
  background:var(--light);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .7s var(--ease);
}
.view:hover .view__u::after{ transform:scaleX(1); }

/* =========================================================
   TRANSITION 01 -> 02
   A chapter mark, not decoration: the index steps and the two rules
   draw outward from the numeral.
   ========================================================= */
.step{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(16px,2.6vw,40px);
  padding:clamp(18px,3.6vh,52px) var(--m) clamp(44px,8vh,116px);
}
.step__n{
  font-family:var(--f-display);
  font-weight:500;
  font-variation-settings:"wdth" 100,"opsz" 96;
  font-size:clamp(1.5rem,3.4vw,3.2rem);
  line-height:1;
  letter-spacing:-.045em;
  color:var(--muted);
}
.step .hair:first-child{ transform-origin:right center; }

/* =========================================================
   PROJECT 02 - JONI
   Same atoms as ZKOP, mirrored composition: title flush right,
   metadata under the title, lead copy left, cover past the margins.
   ========================================================= */
.pj--alt{ padding-top:0; }

/* the oversized wordmark and the lead copy share one row, baseline-aligned */
.pj--alt .pj__top{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  align-items:end;
}
.pj--alt .pj__title{
  grid-column:6 / span 7;
  grid-row:1;
  text-align:right;
  font-size:clamp(4.2rem,29.2vw,29.5rem);
  margin-left:0;
  margin-right:-.018em;
}
.pj--alt .pj__lead{
  grid-column:1 / span 5;
  grid-row:1;
  margin:0 0 clamp(6px,1.4vh,20px);
}

.pj--alt .pj__meta{
  margin-top:clamp(14px,2.6vh,34px);
  margin-bottom:clamp(18px,3.4vh,44px);
}

.pj__lead{ max-width:36ch; }
.pj__lead-a{
  font-family:var(--f-serif);
  font-style:italic;
  font-size:clamp(1.15rem,3vw,2.7rem);
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--light);
}
.pj__lead-b{
  margin-top:.6em;
  font-size:clamp(11px,.9vw,14px);
  letter-spacing:.02em;
  color:var(--muted);
}

/* the cover breaks the page margins - a different treatment from ZKOP's framed shot */
/* negative page-margins rather than 100vw: vw includes the scrollbar and would
   overflow by its width */
.shot--bleed{
  width:auto;
  margin-left:calc(-1 * var(--m));
  margin-right:calc(-1 * var(--m));
  border-left:0;
  border-right:0;
}

/* light cover: dark badge, and a hover that lifts contrast rather than brightness
   (brightening a near-white image just washes it out) */
.shot--light{ background:var(--light); }
.shot--light .shot__cta{
  border-color:rgba(10,10,10,.4);
  color:#0A0A0A;
}
.shot--light:hover .shot__img{ filter:contrast(1.04) saturate(1.06); }

/* =========================================================
   PROJECT 03 - FORGECPG
   Same atoms again, third architecture: a two-line STATEMENT instead of a
   wordmark, every piece of metadata above the cover, and the cover set as a
   centred plate capped to the viewport (the file is nearly square, so full
   width would run well past one screen).
   ========================================================= */
.pj--plate{ padding-top:0; }

.pj--plate .pj__title{
  font-size:clamp(2.3rem,10.4vw,11rem);
  font-weight:500;
  line-height:.94;
  letter-spacing:-.04em;
  margin-top:clamp(20px,3.8vh,50px);
  margin-left:-.012em;
  text-align:left;
}
.pj--plate .pj__title em{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.015em;
  color:var(--light);
}
/* a shorter indent than the hero's, so the device reads as a relative, not a copy */
.line--off2{ padding-left:clamp(0px,4.4vw,7ch); }

/* disciplines sit above the plate here, not in the footer */
.pj__disc--top{
  margin-top:clamp(14px,2.6vh,34px);
  margin-bottom:clamp(22px,3.3vh,46px);
}
/* a touch more air under the plate than above it, so the cover reads as the
   anchor and the metadata as attached to it */
.pj--plate .pj__foot{ padding-top:clamp(22px,4vh,48px); }

/* centred plate, hairline framed - not a card: no radius, no fill, no shadow.
   Width is a share of the content measure (was capped to 86vh, which kept it
   small next to ZKOP and JONI); aspect-ratio still drives the height, so the
   whole cover shows uncropped. */
.shot--plate{
  width:84%;
  margin-inline:auto;
  border:1px solid var(--line-soft);
}

/* =========================================================
   PROJECT 04 - PACE WALLET
   Fourth architecture from the same atoms: the wordmark and its subtitle read as
   one left-hand block, the index and year sit as a right-hand column beside it,
   the hairline falls under the whole block instead of inside a meta row, and the
   cover runs frameless so its own dark edge carries into the page.
   ========================================================= */
.pj--stack{ padding-top:0; }

.pj--stack .pj__top{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  align-items:end;
}
.pj--stack .pj__head{ grid-column:1 / span 9; }

.pj--stack .pj__title{
  grid-column:auto;
  text-align:left;
  font-size:clamp(4.2rem,27.5vw,28rem);
  margin-left:-.018em;
}

.pj--stack .pj__lead-a{
  margin-top:clamp(14px,3vh,38px);
  max-width:42ch;
}

.pj--stack .pj__idx{
  grid-column:10 / span 3;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.85em;
  padding-bottom:clamp(6px,1.2vh,18px);
}

/* the rule sits under the whole block, so the meta row carries only the hairline */
.pj__meta--rule{
  grid-template-columns:1fr;
  margin-top:clamp(14px,2.6vh,34px);
  margin-bottom:clamp(20px,3.3vh,44px);
}

/* near the full measure, centred, frameless - no border, no shadow, no container */
.shot--edge{
  width:96%;
  margin-inline:auto;
  border:0;
  background:#202127;
}

/* =========================================================
   PROJECT 05 - TRAQSTOCK
   Fifth architecture: the only centred masthead in the set. The wordmark drops
   to label scale and the headline carries the section, so the page does not get
   a fourth oversized four-letter name. Cover runs frameless like PACE - the warm
   artwork already separates itself from the black page.
   ========================================================= */
.pj--mid{ padding-top:0; }

.pj__centre{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(18px,3vh,40px);
  padding-bottom:clamp(30px,5.2vh,72px);
}

.pj--mid .pj__title{
  text-align:center;
  font-size:clamp(1.9rem,6.2vw,6.6rem);
  font-weight:500;
  line-height:1.03;
  letter-spacing:-.035em;
  margin-left:0;
  /* asymmetric: more air above the headline than below, so the section lands */
  margin-top:clamp(10px,2.4vh,32px);
}

/* ~90% of the measure, centred, frameless - no border, no shadow, no container */
.shot--wide{
  width:90%;
  margin-inline:auto;
  border:0;
  background:#7b5a48;
}

/* =========================================================
   ABOUT
   Two columns: statement left, introduction right, disciplines on a hairline
   row beneath. Reuses .pj__meta for the header rule and .lbl for the labels.
   ========================================================= */
.ab{
  padding:clamp(40px,7vh,96px) var(--m) clamp(90px,15vh,200px);
}

.ab__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  align-items:start;
  margin-top:clamp(42px,7.4vh,102px);
}

.ab__h{
  grid-column:1 / span 7;
  margin:0;
  font-family:var(--f-display);
  font-weight:500;
  font-variation-settings:"wdth" 100,"opsz" 96;
  font-size:clamp(1.9rem,5.4vw,5.7rem);
  line-height:1.01;
  letter-spacing:-.038em;
  color:var(--text);
}
.ab__h em{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.012em;
  color:var(--light);
}

.ab__txt{
  grid-column:9 / span 4;
  padding-top:clamp(6px,1.2vh,14px);
}
.ab__txt p{
  font-size:clamp(13px,1vw,15px);
  line-height:1.62;
  color:var(--muted);
  letter-spacing:.005em;
}
.ab__txt p:first-child{
  color:var(--text);
  margin-bottom:1.1em;
}

.ab__disc{ margin-top:clamp(56px,9.6vh,132px); }
.ab__disc ul{
  list-style:none;
  margin:clamp(16px,2.8vh,34px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--gap);
}
.ab__disc li{
  font-size:clamp(9.5px,.72vw,11px);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

/* =========================================================
   CONTACT
   The closing statement - no chapter number, full measure, largest type after
   the hero, email alone on its line.
   ========================================================= */
.ct{
  padding:clamp(60px,11vh,150px) var(--m) clamp(50px,9vh,120px);
}

.ct__h{
  margin:clamp(34px,6.2vh,86px) 0 0;
  font-family:var(--f-display);
  font-weight:500;
  font-variation-settings:"wdth" 100,"opsz" 96;
  font-size:clamp(2.1rem,7.4vw,8.2rem);
  line-height:.98;
  letter-spacing:-.042em;
  color:var(--text);
}
.ct__h em{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.015em;
  color:var(--light);
}

.ct__cta{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  align-items:baseline;
  margin-top:clamp(54px,8.8vh,120px);
}

.ct__mail{
  grid-column:1 / span 8;
  justify-self:start;
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:.42em;
  padding-bottom:.28em;
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(1.5rem,4.4vw,4.6rem);
  letter-spacing:-.032em;
  color:var(--text);
}
.ct__mail .view__a{ font-size:.5em; }

.ct__note{
  grid-column:10 / span 3;
  justify-self:end;
  text-align:right;
  font-size:clamp(11px,.85vw,13px);
  line-height:1.5;
  color:var(--muted);
}

/* =========================================================
   FOOTER
   ========================================================= */
.ft{
  padding:0 var(--m) clamp(28px,5vh,56px);
}
.ft__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:clamp(20px,3vw,56px);
  padding-top:clamp(20px,3.4vh,40px);
}
.ft__name{
  display:inline-flex;
  align-items:flex-start;
  gap:.24em;
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(13px,1vw,15px);
  letter-spacing:-.015em;
  line-height:1;
  color:var(--text);
}
.ft__name span{
  font-size:.62em;
  color:var(--muted);
  transform:translateY(.05em);
  transition:transform .6s var(--ease), color .4s ease;
}
.ft__name:hover span{ transform:translateY(.05em) rotate(180deg); color:var(--text); }

.ft__links{
  display:flex;
  gap:clamp(16px,2vw,32px);
}
.ft__yr{ justify-self:end; }

/* =========================================================
   PROJECT 06 - QUECKO
   Sixth architecture: a narrow discipline column carrying the left edge with the
   statement spanning the remaining ten columns. Architectural by structure, not
   by ornament. Cover runs the full page measure, frameless.
   ========================================================= */
.pj--grid{ padding-top:0; }

.pj__span{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gap);
  align-items:start;
  margin-top:clamp(26px,4.6vh,62px);
  margin-bottom:clamp(30px,5.4vh,74px);
}

/* the load-bearing column */
.pj__cols{
  grid-column:1 / span 2;
  display:flex;
  flex-direction:column;
  gap:.75em;
  padding-top:clamp(8px,1.4vh,18px);
}

.pj--grid .pj__title{
  grid-column:3 / span 10;
  text-align:left;
  font-size:clamp(2rem,8.2vw,8.7rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-.04em;
  margin-left:-.012em;
}
.pj--grid .pj__title em{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.015em;
  color:var(--light);
}

/* full page measure, frameless - the artwork's own near-white edge meets the page */
.shot--span{
  width:100%;
  border:0;
  background:var(--light);
}

/* footer carries the project name above the disciplines */
.pj__id{ grid-column:1 / span 7; }
.pj__name{
  font-family:var(--f-display);
  font-weight:500;
  font-size:clamp(13px,1.05vw,16px);
  letter-spacing:-.01em;
  color:var(--text);
  margin-bottom:.45em;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .avail{ display:none; }
  .nav__in{ grid-template-columns:1fr auto; }
  .rules{ grid-template-columns:repeat(6,1fr); }
  .rules i:nth-child(n+7){ display:none; }
}

@media (max-width:860px){
  .hero{
    row-gap:clamp(32px,6vh,60px);
    padding-bottom:calc(var(--m) + 10px);
  }
  .hero__h{
    font-size:clamp(2.75rem,11.3vw,5.5rem);
    line-height:.95;
    letter-spacing:-.035em;
    max-width:none;
  }
  .line--off{ padding-left:clamp(28px,14vw,90px); }

  .hero__bot{ grid-template-columns:1fr; row-gap:clamp(22px,4vh,34px); }
  .hero__meta{ grid-column:1; }
  .hero__disc{ max-width:26ch; }
  .scroll{ grid-column:1; justify-self:start; }

  .intro__h{ font-size:clamp(2rem,8.4vw,3.4rem); line-height:1.02; }

  .pj__title{ font-size:clamp(3.4rem,27vw,9rem); }
  .pj__sub{
    text-align:left;
    font-size:clamp(1.1rem,5.4vw,2rem);
    margin-bottom:clamp(24px,5vh,40px);
  }

  /* full-bleed on mobile, still the whole composition — edge to edge, no crop.
     Negative page-margins rather than 100vw: vw counts the scrollbar, so on a
     desktop browser narrowed past this breakpoint 100vw overflowed the page by
     the scrollbar's width. */
  .shot{
    width:auto;
    margin-left:calc(-1 * var(--m));
    margin-right:calc(-1 * var(--m));
    transform:none;
    border-left:0; border-right:0;
  }
  .shot.is-empty{ aspect-ratio:3/2; }
  .shot__cta{ display:none; }

  .step{ padding-bottom:clamp(32px,5.6vh,64px); }
  .pj--alt .pj__top{ grid-template-columns:1fr; }
  .pj--alt .pj__title{ grid-column:1; grid-row:auto; font-size:clamp(3.4rem,31vw,10rem); margin-right:0; }
  .pj--alt .pj__lead{ grid-column:1; grid-row:auto; margin:clamp(12px,2.4vh,22px) 0 0; }

  .pj--mid .pj__title{ font-size:clamp(1.45rem,7vw,2.6rem); line-height:1.08; }
  .pj__centre{ gap:clamp(14px,2.4vh,26px); padding-bottom:clamp(24px,4.4vh,52px); }

  .pj--stack .pj__top{ grid-template-columns:1fr; }
  .pj--stack .pj__head{ grid-column:1; }
  .pj--stack .pj__title{ font-size:clamp(3.4rem,30vw,10rem); }
  .pj--stack .pj__lead-a{ max-width:none; }
  .pj--stack .pj__idx{
    grid-column:1;
    flex-direction:row;
    justify-content:space-between;
    align-items:baseline;
    width:100%;
    padding-bottom:0;
    margin-top:clamp(14px,2.6vh,24px);
  }
  .pj__meta--rule{ margin-bottom:clamp(22px,4vh,48px); }

  .pj--plate .pj__title{ font-size:clamp(2.2rem,10.6vw,4.4rem); line-height:.98; }
  .line--off2{ padding-left:clamp(14px,7vw,54px); }
  .pj__disc--top{ margin-bottom:clamp(20px,3.4vh,44px); }
  .shot--plate{ border-top-width:1px; border-bottom-width:1px; }
  .pj__lead{ max-width:none; }

  .pj__foot{ grid-template-columns:1fr; row-gap:clamp(20px,4vh,30px); }
  .pj__disc{ grid-column:1; }
  .view{ grid-column:1; justify-self:start; font-size:clamp(18px,5.4vw,24px); }
}

@media (max-width:860px){
  /* QUECKO - the column moves under the statement and reads as a caption row,
     so the statement keeps the full width it needs to stay legible */
  .pj__span{
    grid-template-columns:1fr;
    row-gap:clamp(18px,3.2vh,28px);
    margin-top:clamp(20px,3.6vh,34px);
    margin-bottom:clamp(24px,4.4vh,40px);
  }
  .pj--grid .pj__title{
    grid-column:1;
    grid-row:1;
    font-size:clamp(1.8rem,9.2vw,3.6rem);
    line-height:1.04;
  }
  .pj__cols{
    grid-column:1;
    grid-row:2;
    flex-direction:row;
    gap:clamp(14px,4vw,28px);
    padding-top:0;
  }

  /* ABOUT / CONTACT / FOOTER */
  .ab__grid{ grid-template-columns:1fr; row-gap:clamp(26px,4.6vh,40px); margin-top:clamp(24px,4.4vh,40px); }
  .ab__h{ grid-column:1; font-size:clamp(1.8rem,8.6vw,3.4rem); line-height:1.04; }
  .ab__txt{ grid-column:1; padding-top:0; }
  .ab__txt p{ font-size:14px; }
  .ab__disc ul{ grid-template-columns:repeat(2,1fr); row-gap:clamp(10px,1.8vh,16px); }

  .ct__h{ font-size:clamp(1.9rem,9.4vw,3.6rem); line-height:1.02; }
  .ct__cta{ grid-template-columns:1fr; row-gap:clamp(24px,4.2vh,36px); }
  .ct__mail{ grid-column:1; font-size:clamp(1.3rem,7vw,2.4rem); }
  .ct__note{ grid-column:1; justify-self:start; text-align:left; }

  .ft__row{
    flex-direction:column;
    align-items:flex-start;
    gap:clamp(16px,2.6vh,24px);
  }
}

@media (max-width:540px){
  .nav__links{ gap:18px; }
  .hero__top{ grid-template-columns:auto 1fr; }
  .hero__top .lbl--r{ display:none; }
  .rules{ grid-template-columns:repeat(3,1fr); }
  .rules i:nth-child(n+4){ display:none; }
  .intro__top{ flex-wrap:wrap; row-gap:10px; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .line > span{ transform:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .shot{ clip-path:none !important; transform:none !important; }
  .shot__img{ transform:scale(1) !important; }
  .hair{ transform:scaleX(1) !important; }
  .peek{ display:none !important; }
}