/* ==========================================================================
   Rushdan Rushil, automotive photography and video, Toronto

   Charcoal ground, warm cream type, nothing else. Anything that looks like
   another colour is cream or charcoal at a different opacity.

   Type
     Archivo        display, run wide on its width axis. Industrial, squared
                    off, closer to signage than to a fashion face.
     Instrument Sans body. Slightly warm, quiet next to the display.
     JetBrains Mono  small technical labels only: counts, locations, numbers.

   Sections
     1.  Tokens              8.  Before and after
     2.  Base                9.  Motion grid
     3.  Type primitives    10.  Contact and footer
     4.  Shell              11.  Reveals and motion
     5.  Navigation         12.  Breakpoints
     6.  Hero and about
     7.  Set folders
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* near black, neutral, no blue in it. Dark enough that a lit car is the
     only thing on the screen carrying real brightness. */
  --ground:#08080A;
  --surface:#131317;
  --raise:#1E1E23;
  --cream:#FFFDF7;

  --c90:rgba(255,253,247,.90);
  --c78:rgba(255,253,247,.78);
  --c55:rgba(255,253,247,.55);
  --c38:rgba(255,253,247,.38);
  --c20:rgba(255,253,247,.20);
  --c10:rgba(255,253,247,.10);
  --c06:rgba(255,253,247,.06);

  --g92:rgba(8,8,10,.92);
  --g60:rgba(8,8,10,.60);
  --g30:rgba(8,8,10,.30);

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* the display face has a width axis. Held at normal so the letters stay
     square and even rather than stretched, and run at the heaviest weight. */
  --wide:100;
  --wider:100;

  --t-hero:clamp(30px,5.1vw,84px);
  --t-1:clamp(25px,3.5vw,47px);
  --t-2:clamp(19px,1.9vw,25px);
  --t-lead:clamp(15px,1.2vw,17.5px);
  --t-body:clamp(14.5px,1.05vw,16.5px);
  --t-sm:13px;
  --t-xs:12.5px;
  --t-label:10.5px;

  --gutter:clamp(20px,5vw,80px);
  --max:1520px;
  --sect:clamp(26px,2.6vw,42px);
  --head-gap:clamp(18px,1.9vw,28px);
  --tile-gap:clamp(10px,1.1vw,16px);

  --radius:2px;
  --e:cubic-bezier(.22,.61,.36,1);
  --e-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--cream);
  font-family:var(--body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--cream);color:var(--ground)}
:focus-visible{outline:2px solid var(--cream);outline-offset:3px;border-radius:2px}

.skip{
  position:fixed;top:-100px;left:var(--gutter);z-index:200;
  padding:12px 20px;background:var(--cream);color:var(--ground);
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border-radius:999px;transition:top .25s var(--e);
}
.skip:focus{top:16px}

/* a whisper of grain, so flat charcoal never bands on a wide gradient */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.045;
  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='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Type primitives ------------------------------------------- */
.s-title{
  font-family:var(--display);font-weight:900;
  font-variation-settings:"wdth" var(--wide);
  font-size:var(--t-1);line-height:1.0;letter-spacing:-.038em;
  margin:0;text-wrap:balance;
}
.lede{max-width:54ch;color:var(--c55);font-size:var(--t-body);margin:16px 0 0}
.mono{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase}

/* ---------- 4. Shell ----------------------------------------------------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--sect)}
.section--contact{padding-bottom:0}
.head{margin-bottom:var(--head-gap);max-width:var(--max)}

/* ---------- 5. Navigation ------------------------------------------------ */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px var(--gutter);
  border-bottom:1px solid transparent;
  transition:padding .4s var(--e),background-color .4s var(--e),
             backdrop-filter .4s var(--e),border-color .4s var(--e);
}
.nav.is-stuck{
  padding-block:13px;
  background:rgba(8,8,10,.82);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border-bottom-color:var(--c10);
}
.nav__progress{
  position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--cream);transform:scaleX(0);transform-origin:left;
  opacity:0;transition:opacity .4s var(--e);
}
.nav.is-stuck .nav__progress{opacity:.6}
.nav__logo{
  font-family:var(--display);font-weight:900;
  font-variation-settings:"wdth" var(--wide);
  font-size:13px;letter-spacing:.16em;text-decoration:none;white-space:nowrap;
}
.nav__links{
  display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);
  list-style:none;margin:0;padding:0;
}
.nav__links a{
  position:relative;text-decoration:none;
  font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:.12em;text-transform:uppercase;color:var(--c55);
  transition:color .3s var(--e);padding-block:4px;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--cream);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--e);
}
.nav__links a:hover,.nav__links a.is-current{color:var(--cream)}
.nav__links a:hover::after,.nav__links a.is-current::after{transform:scaleX(1);transform-origin:left}
.nav__toggle{
  display:none;background:none;border:0;padding:8px;margin:-8px;
  cursor:pointer;color:var(--cream);
}
.nav__toggle span{
  display:block;width:22px;height:1.5px;background:currentColor;
  transition:transform .35s var(--e),opacity .25s var(--e);
}
.nav__toggle span + span{margin-top:6px}
.nav.is-open .nav__toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav.is-open .nav__toggle span:nth-child(2){opacity:0}
.nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- 6. Hero and about --------------------------------------------
   The hero has no bottom edge. Its scrim resolves to the exact page ground
   over the last third, and the about block sits on that same ground with no
   rule or change of colour, so the photograph dissolves into the writing. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.06);animation:heroDrift 24s var(--e-out) forwards;
}
@keyframes heroDrift{to{transform:scale(1)}}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,
      var(--ground) 0%,
      var(--ground) 6%,
      rgba(8,8,10,.86) 15%,
      rgba(8,8,10,.42) 32%,
      rgba(8,8,10,.04) 58%),
    linear-gradient(to right,rgba(8,8,10,.70),rgba(8,8,10,.08) 46%,transparent 72%);
}
.hero__inner{position:relative;width:100%;padding-block:clamp(28px,4.4vh,50px)}
.hero__name{
  font-family:var(--display);font-weight:900;
  font-variation-settings:"wdth" var(--wider);
  font-size:var(--t-hero);line-height:.9;letter-spacing:-.05em;
  margin:0;text-transform:uppercase;
}
.hero__name .line{display:block;overflow:hidden}
.hero__name .line i{
  display:block;font-style:normal;
  transform:translateY(102%);animation:riseUp 1.15s var(--e-out) forwards;
}
.hero__name .line:nth-child(2) i{animation-delay:.08s}
@keyframes riseUp{to{transform:none}}
.hero__tag{
  margin:20px 0 0;font-family:var(--mono);
  font-size:clamp(10px,.85vw,12.5px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--c78);
  opacity:0;animation:fadeUp .9s var(--e-out) .4s forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* about, immediately under, no visible seam */
.about{position:relative;padding-block:clamp(14px,1.5vw,22px) var(--sect)}
.about__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,88px);align-items:start;
}
.about__statement{
  font-family:var(--display);font-weight:900;
  font-variation-settings:"wdth" var(--wide);
  font-size:clamp(23px,3.1vw,41px);line-height:1.04;letter-spacing:-.038em;
  margin:0;text-wrap:balance;
}
.about__body p{
  margin:0;font-size:clamp(15px,1.25vw,18px);line-height:1.68;color:var(--c78);
  max-width:58ch;
}

/* ---------- 7. Set folders -----------------------------------------------
   Each tile is a shoot, not a photo. The cover carries the name, the frame
   count and a line that draws on hover, so it reads as somewhere to go. */
.sets{display:grid;gap:var(--tile-gap)}
.sets--wide{grid-template-columns:repeat(3,1fr)}   /* three across, two rows */
.sets--tall{grid-template-columns:repeat(3,1fr)}   /* three across, two rows */

.set{
  position:relative;display:block;text-decoration:none;isolation:isolate;
}
.set__frame{
  position:relative;overflow:hidden;display:block;
  border-radius:var(--radius);background:var(--surface);
}
.sets--wide .set__frame{aspect-ratio:4/3}
.sets--tall .set__frame{aspect-ratio:4/5}
/* The tile is a window and the photograph sits behind it. Three numbers put
   it there: how wide it is drawn, and how far it is nudged left and up, all
   as percentages of the tile. No cropping happens in the file, which is what
   lets the framing stay changeable. */
.set__pan{
  position:absolute;inset:0;
  transition:transform 1.3s var(--e-out);
}
.set__frame img{
  position:absolute;
  /* the global img cap would quietly clamp a framed cover back to the tile */
  max-width:none;
  width:calc(var(--w,100) * 1%);height:auto;
  left:calc(var(--x,0) * 1%);top:calc(var(--y,0) * 1%);
  display:block;
  transition:filter .6s var(--e);
  filter:brightness(.94);
}
/* the line that draws across the foot of the photograph on hover */
.set__rule{
  position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cream);z-index:3;
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--e-out);
}
.set__meta{display:block;padding:12px 0 0}
.set__name{
  display:block;min-width:0;overflow-wrap:anywhere;
  font-family:var(--display);font-weight:900;
  font-variation-settings:"wdth" var(--wide);
  font-size:clamp(14px,1.15vw,17px);line-height:1.15;letter-spacing:-.03em;
  transition:opacity .35s var(--e);
}
.set:hover .set__pan,.set:focus-visible .set__pan{transform:scale(1.035)}
.set:hover .set__frame img,.set:focus-visible .set__frame img{filter:brightness(1.04)}
.set:hover .set__rule,.set:focus-visible .set__rule{transform:scaleX(1)}

/* the way through to the full archive for a section */
.more{margin-top:clamp(18px,2vw,28px)}
.more__link{
  position:relative;display:flex;align-items:baseline;justify-content:space-between;
  gap:18px;padding:14px 0 15px;text-decoration:none;
  border-top:1px solid var(--c10);
}
.more__label{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--c78);transition:color .3s var(--e);
}
.more__count{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--c38);white-space:nowrap;
}
.more__rule{
  position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--cream);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e-out);
}
.more__link:hover .more__label{color:var(--cream)}
.more__link:hover .more__rule{transform:scaleX(1)}

/* ---------- 8. Before and after ------------------------------------------ */
.cmp-stack{display:flex;flex-direction:column;gap:var(--tile-gap)}
.cmp-pair{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--tile-gap)}
.cmp-stack + .cmp-pair{margin-top:var(--tile-gap)}
.cmp-figure{margin:0}
.cmp{
  --pos:52%;
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);
  background:var(--surface);cursor:ew-resize;
  touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp__after{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp__bar{
  position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;
  background:var(--cream);pointer-events:none;
  box-shadow:0 0 0 1px rgba(8,8,10,.4),0 0 26px rgba(255,253,247,.3);
}
.cmp__grab{
  position:absolute;top:50%;left:var(--pos);
  width:50px;height:50px;margin:-25px 0 0 -25px;padding:0;border-radius:50%;
  background:rgba(8,8,10,.55);border:1.5px solid var(--cream);color:var(--cream);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;grid-auto-flow:column;place-content:center;gap:3px;
  cursor:ew-resize;touch-action:none;
  transition:transform .35s var(--e),background-color .35s var(--e);
}
.cmp__grab svg{width:11px;height:16px;display:block}
.cmp:hover .cmp__grab{transform:scale(1.08)}
.cmp.is-dragging .cmp__grab{transform:scale(.95);background:rgba(8,8,10,.82)}
.cmp__tag{
  position:absolute;font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--c78);pointer-events:none;
  text-shadow:0 1px 10px rgba(8,8,10,.9);
}
.cmp__tag--after{left:clamp(14px,1.4vw,22px);bottom:clamp(12px,1.2vw,18px)}
.cmp__tag--before{right:clamp(14px,1.4vw,22px);bottom:clamp(12px,1.2vw,18px)}
.cmp__badge{
  position:absolute;top:clamp(12px,1.2vw,18px);left:clamp(14px,1.4vw,22px);
  padding:6px 13px;border:1px solid var(--c38);border-radius:999px;
  background:rgba(8,8,10,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c78);pointer-events:none;
}
.cmp__hint{
  position:absolute;top:clamp(12px,1.2vw,18px);right:clamp(14px,1.4vw,22px);
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--c55);pointer-events:none;
  text-shadow:0 1px 10px rgba(8,8,10,.9);transition:opacity .5s var(--e);
}
.cmp.is-touched .cmp__hint{opacity:0}

/* the award line under the bio */
.accolade{
  display:flex;align-items:baseline;gap:12px;margin:clamp(20px,2.2vw,30px) 0 0;
  padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--c10);
  text-decoration:none;
}
.accolade__mark{
  flex:none;font-family:var(--display);font-weight:900;
  font-variation-settings:"wdth" var(--wide);
  font-size:clamp(20px,1.9vw,28px);line-height:1;letter-spacing:-.03em;color:var(--cream);
}
.accolade__text{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;
  text-transform:uppercase;line-height:1.7;color:var(--c55);
}
.accolade:hover .accolade__text{color:var(--c90)}
.accolade__text{transition:color .3s var(--e)}

/* ---------- 9. Motion grid ----------------------------------------------- */
.grid-video{
  display:grid;grid-template-columns:1fr .665fr 1fr;grid-template-rows:auto auto;
  gap:var(--tile-gap);
}
.grid-video > :nth-child(1){grid-column:1;grid-row:1}
.grid-video > :nth-child(2){grid-column:1;grid-row:2}
.grid-video > :nth-child(3){grid-column:2;grid-row:1 / span 2}
.grid-video > :nth-child(4){grid-column:3;grid-row:1}
.grid-video > :nth-child(5){grid-column:3;grid-row:2}
.vcard{
  position:relative;display:block;overflow:hidden;border-radius:var(--radius);
  background:var(--surface);border:0;padding:0;margin:0;
  color:inherit;font:inherit;text-align:left;cursor:pointer;
}
.vcard--h{aspect-ratio:16/9}
.vcard--v{aspect-ratio:auto;min-height:0}
.vcard__media{position:absolute;inset:0}
.vcard__media img,.vcard__media video{width:100%;height:100%;object-fit:cover}
.vcard__media video{position:absolute;inset:0;opacity:0;transition:opacity .55s var(--e)}
.vcard.is-playing .vcard__media video{opacity:1}
.vcard__shade{
  position:absolute;inset:0;
  background:linear-gradient(to top,var(--g92) 2%,var(--g30) 45%,rgba(8,8,10,.2));
  transition:opacity .5s var(--e);
}
.vcard.is-playing .vcard__shade{opacity:.7}
.vcard__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;border:1.5px solid var(--c78);
  display:grid;place-items:center;background:rgba(8,8,10,.35);
  transition:transform .45s var(--e),opacity .45s var(--e),background-color .45s var(--e);
}
.vcard__play svg{width:14px;height:16px;display:block;margin-left:2px}
.vcard:hover .vcard__play{transform:translate(-50%,-50%) scale(1.1);background:rgba(8,8,10,.55)}
.vcard.is-playing .vcard__play{opacity:0;transform:translate(-50%,-50%) scale(.8)}
.vcard__label{
  position:absolute;left:clamp(14px,1.4vw,22px);right:clamp(14px,1.4vw,22px);
  bottom:clamp(12px,1.2vw,18px);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
}
.vcard__label b{font-size:var(--t-sm);font-weight:600}
.vcard__label i{
  font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--c38);white-space:nowrap;
}
.vcard__bar{
  position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--cream);
  transform:scaleX(0);transform-origin:left;opacity:0;transition:opacity .3s var(--e);
}
.vcard.is-playing .vcard__bar{opacity:.85}

/* ---------- 10. Contact and footer --------------------------------------- */
.btn{
  display:inline-block;padding:14px 36px;
  border:1px solid var(--c38);border-radius:999px;
  background:transparent;color:var(--cream);cursor:pointer;text-decoration:none;
  font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:.16em;text-transform:uppercase;
  transition:background-color .4s var(--e),color .4s var(--e),border-color .4s var(--e);
}
.btn:hover,.btn:focus-visible{background:var(--cream);color:var(--ground);border-color:var(--cream)}
.btn--lead{margin-top:clamp(26px,3vw,40px);padding:17px 44px}
.closing{max-width:56ch;padding-bottom:clamp(30px,4.5vw,64px)}

/* ---------- 10b. The contact page -----------------------------------------
   A full screen of his own work with the two ways to reach him sitting on
   it. Photographs cross fade and drift behind the type, and the scrim is
   weighted to the lower left so the words never have to fight them. */
.reach{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.reach__stage{position:absolute;inset:0;background:var(--surface)}
.reach__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s var(--e)}
.reach__slide.is-on{opacity:1}
.reach__slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08)}
.reach__slide.is-on img{animation:reachDrift 8.5s linear forwards}
@keyframes reachDrift{from{transform:scale(1.08)}to{transform:scale(1)}}
.reach__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,
      var(--ground) 0%,
      rgba(8,8,10,.90) 20%,
      rgba(8,8,10,.52) 48%,
      rgba(8,8,10,.16) 78%),
    linear-gradient(to right,rgba(8,8,10,.76),rgba(8,8,10,.20) 50%,transparent 78%);
}
.reach__inner{position:relative;width:100%;padding-block:clamp(34px,6vh,76px)}
.reach__title{
  font-family:var(--display);font-weight:900;
  font-variation-settings:"wdth" var(--wider);
  font-size:var(--t-hero);line-height:.92;letter-spacing:-.048em;
  margin:clamp(18px,2vw,30px) 0 0;text-wrap:balance;
}
.reach__lede{margin:20px 0 0;max-width:44ch;font-size:var(--t-lead);color:var(--c78)}
.reach__links{margin-top:clamp(28px,3.8vw,50px);max-width:660px}
.reach__link{
  position:relative;display:grid;
  grid-template-columns:minmax(0,120px) minmax(0,1fr);
  align-items:baseline;gap:18px;padding:20px 0 21px;
  text-decoration:none;border-top:1px solid var(--c20);
}
.reach__link:last-child{border-bottom:1px solid var(--c20)}
.reach__key{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--c55);transition:color .3s var(--e);
}
.reach__val{
  min-width:0;overflow-wrap:anywhere;
  font-family:var(--display);font-weight:800;
  font-variation-settings:"wdth" var(--wide);
  font-size:clamp(16px,1.85vw,26px);letter-spacing:-.025em;line-height:1.18;
}
.reach__rule{
  position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--cream);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e-out);
}
.reach__link:hover .reach__rule,.reach__link:focus-visible .reach__rule{transform:scaleX(1)}
.reach__link:hover .reach__key,.reach__link:focus-visible .reach__key{color:var(--cream)}
.reach__ticks{display:flex;gap:7px;margin-top:clamp(22px,2.6vw,34px)}
.reach__tick{width:24px;height:2px;background:var(--c20);overflow:hidden}
.reach__tick i{
  display:block;height:100%;background:var(--cream);
  transform:scaleX(0);transform-origin:left;
}
.reach__tick.is-on i{animation:tickFill 6.6s linear forwards}
@keyframes tickFill{to{transform:scaleX(1)}}
@media (max-width:560px){
  .reach__link{grid-template-columns:minmax(0,1fr);gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .reach__slide img,.reach__tick.is-on i{animation:none}
  .reach__tick.is-on i{transform:scaleX(1)}
  .reach__slide{transition-duration:.4s}
}

.footer{
  border-top:1px solid var(--c10);margin-top:clamp(30px,3.4vw,52px);
  padding-block:30px 38px;
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--c38);
}
.footer a{text-decoration:none;transition:color .3s var(--e)}
.footer a:hover{color:var(--cream)}

/* ---------- 11. Reveals and motion --------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
.reveal.is-in{opacity:1;transform:none}
/* set tiles arrive one after another rather than all at once */
.sets.is-in .set{animation:tileIn .7s var(--e-out) backwards}
.sets.is-in .set:nth-child(2){animation-delay:.07s}
.sets.is-in .set:nth-child(3){animation-delay:.14s}
.sets.is-in .set:nth-child(4){animation-delay:.21s}
.sets.is-in .set:nth-child(5){animation-delay:.28s}
.sets.is-in .set:nth-child(6){animation-delay:.35s}
.sets.is-in .set:nth-child(7){animation-delay:.4s}
.sets.is-in .set:nth-child(8){animation-delay:.44s}
.sets.is-in .set:nth-child(9){animation-delay:.48s}
.sets.is-in .set:nth-child(n+10){animation-delay:.52s}
@keyframes tileIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* leaving the page for a set: a short dip, so the jump is not abrupt */
body.is-leaving{opacity:0;transition:opacity .22s var(--e)}

/* ---------- 12. Breakpoints ---------------------------------------------- */
@media (max-width:1100px){
  .about__grid{grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,32px)}
}
@media (max-width:900px){
  .hero__media img{object-position:62% center}
  .cmp__grab{width:44px;height:44px;margin:-22px 0 0 -22px}
}
@media (max-width:820px){
  .sets--wide{grid-template-columns:repeat(2,1fr)}
  .sets--tall{grid-template-columns:repeat(2,1fr)}
  .cmp-pair{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .grid-video{display:flex;flex-direction:column;gap:12px}
  .vcard--v{aspect-ratio:4/5}
}
@media (max-width:720px){
  .nav{gap:14px}
  .nav__logo{font-size:11.5px;letter-spacing:.12em}
  .nav__toggle{display:block;margin-right:-6px}
  .nav__links{
    position:fixed;inset:0;z-index:-1;
    flex-direction:column;justify-content:center;align-items:flex-start;
    gap:clamp(16px,3.6vh,30px);padding:0 var(--gutter);
    background:var(--ground);
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .4s var(--e),transform .4s var(--e),visibility .4s;
  }
  .nav.is-open .nav__links{opacity:1;visibility:visible;transform:none}
  .nav.is-open{
    background:transparent;border-bottom-color:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .nav__links a{
    font-family:var(--display);font-weight:900;
    font-variation-settings:"wdth" var(--wide);
    font-size:clamp(21px,6.6vw,32px);letter-spacing:-.03em;color:var(--cream);
  }
  .nav__links a::after{display:none}
  .sets--wide{grid-template-columns:repeat(2,1fr)}
  .sets--tall{grid-template-columns:repeat(2,1fr)}
  .cmp__grab{width:42px;height:42px;margin:-21px 0 0 -21px}
  .cmp__hint{display:none}
  /* ---------- 10b. The contact page -----------------------------------------
   A full screen of his own work with the two ways to reach him sitting on
   it. Photographs cross fade and drift behind the type, and the scrim is
   weighted to the lower left so the words never have to fight them. */
.reach{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.reach__stage{position:absolute;inset:0;background:var(--surface)}
.reach__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s var(--e)}
.reach__slide.is-on{opacity:1}
.reach__slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08)}
.reach__slide.is-on img{animation:reachDrift 8.5s linear forwards}
@keyframes reachDrift{from{transform:scale(1.08)}to{transform:scale(1)}}
.reach__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,
      var(--ground) 0%,
      rgba(8,8,10,.90) 20%,
      rgba(8,8,10,.52) 48%,
      rgba(8,8,10,.16) 78%),
    linear-gradient(to right,rgba(8,8,10,.76),rgba(8,8,10,.20) 50%,transparent 78%);
}
.reach__inner{position:relative;width:100%;padding-block:clamp(34px,6vh,76px)}
.reach__title{
  font-family:var(--display);font-weight:900;
  font-variation-settings:"wdth" var(--wider);
  font-size:var(--t-hero);line-height:.92;letter-spacing:-.048em;
  margin:clamp(18px,2vw,30px) 0 0;text-wrap:balance;
}
.reach__lede{margin:20px 0 0;max-width:44ch;font-size:var(--t-lead);color:var(--c78)}
.reach__links{margin-top:clamp(28px,3.8vw,50px);max-width:660px}
.reach__link{
  position:relative;display:grid;
  grid-template-columns:minmax(0,120px) minmax(0,1fr);
  align-items:baseline;gap:18px;padding:20px 0 21px;
  text-decoration:none;border-top:1px solid var(--c20);
}
.reach__link:last-child{border-bottom:1px solid var(--c20)}
.reach__key{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--c55);transition:color .3s var(--e);
}
.reach__val{
  min-width:0;overflow-wrap:anywhere;
  font-family:var(--display);font-weight:800;
  font-variation-settings:"wdth" var(--wide);
  font-size:clamp(16px,1.85vw,26px);letter-spacing:-.025em;line-height:1.18;
}
.reach__rule{
  position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--cream);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e-out);
}
.reach__link:hover .reach__rule,.reach__link:focus-visible .reach__rule{transform:scaleX(1)}
.reach__link:hover .reach__key,.reach__link:focus-visible .reach__key{color:var(--cream)}
.reach__ticks{display:flex;gap:7px;margin-top:clamp(22px,2.6vw,34px)}
.reach__tick{width:24px;height:2px;background:var(--c20);overflow:hidden}
.reach__tick i{
  display:block;height:100%;background:var(--cream);
  transform:scaleX(0);transform-origin:left;
}
.reach__tick.is-on i{animation:tickFill 6.6s linear forwards}
@keyframes tickFill{to{transform:scaleX(1)}}
@media (max-width:560px){
  .reach__link{grid-template-columns:minmax(0,1fr);gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .reach__slide img,.reach__tick.is-on i{animation:none}
  .reach__tick.is-on i{transform:scaleX(1)}
  .reach__slide{transition-duration:.4s}
}

.footer{flex-direction:column;align-items:flex-start}
}

@media (max-width:520px){
  .sets--wide{grid-template-columns:minmax(0,1fr)}
  .sets--tall{grid-template-columns:repeat(2,1fr)}
  .set__name{font-size:13.5px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .hero__name .line i,.hero__tag{transform:none;opacity:1}
  body.is-leaving{opacity:1}
}

/* ==========================================================================
   13. Set page
   A shoot on its own page. The header sits on the ground rather than over a
   photograph, so the work is the only thing with contrast on the screen.
   ========================================================================== */
.set-head{padding-block:clamp(80px,8vw,112px) clamp(16px,2vw,28px)}
.backlink{
  display:inline-block;font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--c38);
  text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .3s var(--e),border-color .3s var(--e);
}
.backlink:hover{color:var(--cream);border-bottom-color:var(--c38)}
.set-head__title{
  font-family:var(--display);font-weight:900;
  font-variation-settings:"wdth" var(--wider);
  font-size:clamp(31px,5.6vw,80px);line-height:.96;letter-spacing:-.048em;
  margin:clamp(18px,2vw,30px) 0 0;text-wrap:balance;
}
.set-head__meta{
  display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--c38);
}
.set-head__intro{
  margin:20px 0 0;max-width:56ch;font-size:var(--t-lead);color:var(--c55);
}

.set-grid{display:grid;gap:var(--tile-gap);padding-bottom:clamp(32px,4vw,58px)}
.set-grid--wide{grid-template-columns:repeat(2,1fr)}
.set-grid--tall{grid-template-columns:repeat(3,1fr)}
.set-shot{margin:0}
.set-shot--lead{grid-column:1 / -1}
.set-shot img{
  width:100%;height:auto;border-radius:var(--radius);background:var(--surface);
  opacity:0;animation:shotIn .9s var(--e-out) forwards;
}
@keyframes shotIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.set-shot figcaption{
  margin-top:9px;font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:.08em;color:var(--c38);line-height:1.5;
}

.set-next{
  display:block;position:relative;text-decoration:none;
  padding-block:clamp(28px,3.4vw,48px);border-top:1px solid var(--c10);
}
.set-next__label{
  display:block;font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--c38);
}
.set-next__title{
  display:block;margin-top:10px;
  font-family:var(--display);font-weight:900;
  font-variation-settings:"wdth" var(--wide);
  font-size:clamp(23px,3.2vw,42px);line-height:1.04;letter-spacing:-.04em;
  transition:opacity .35s var(--e);
}
.set-next__rule{
  position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cream);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e-out);
}
.set-next:hover .set-next__rule{transform:scaleX(1)}

.set-foot{padding-block:0 8px}
.set-foot /* ---------- 10b. The contact page -----------------------------------------
   A full screen of his own work with the two ways to reach him sitting on
   it. Photographs cross fade and drift behind the type, and the scrim is
   weighted to the lower left so the words never have to fight them. */
.reach{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.reach__stage{position:absolute;inset:0;background:var(--surface)}
.reach__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s var(--e)}
.reach__slide.is-on{opacity:1}
.reach__slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08)}
.reach__slide.is-on img{animation:reachDrift 8.5s linear forwards}
@keyframes reachDrift{from{transform:scale(1.08)}to{transform:scale(1)}}
.reach__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,
      var(--ground) 0%,
      rgba(8,8,10,.90) 20%,
      rgba(8,8,10,.52) 48%,
      rgba(8,8,10,.16) 78%),
    linear-gradient(to right,rgba(8,8,10,.76),rgba(8,8,10,.20) 50%,transparent 78%);
}
.reach__inner{position:relative;width:100%;padding-block:clamp(34px,6vh,76px)}
.reach__title{
  font-family:var(--display);font-weight:900;
  font-variation-settings:"wdth" var(--wider);
  font-size:var(--t-hero);line-height:.92;letter-spacing:-.048em;
  margin:clamp(18px,2vw,30px) 0 0;text-wrap:balance;
}
.reach__lede{margin:20px 0 0;max-width:44ch;font-size:var(--t-lead);color:var(--c78)}
.reach__links{margin-top:clamp(28px,3.8vw,50px);max-width:660px}
.reach__link{
  position:relative;display:grid;
  grid-template-columns:minmax(0,120px) minmax(0,1fr);
  align-items:baseline;gap:18px;padding:20px 0 21px;
  text-decoration:none;border-top:1px solid var(--c20);
}
.reach__link:last-child{border-bottom:1px solid var(--c20)}
.reach__key{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--c55);transition:color .3s var(--e);
}
.reach__val{
  min-width:0;overflow-wrap:anywhere;
  font-family:var(--display);font-weight:800;
  font-variation-settings:"wdth" var(--wide);
  font-size:clamp(16px,1.85vw,26px);letter-spacing:-.025em;line-height:1.18;
}
.reach__rule{
  position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--cream);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--e-out);
}
.reach__link:hover .reach__rule,.reach__link:focus-visible .reach__rule{transform:scaleX(1)}
.reach__link:hover .reach__key,.reach__link:focus-visible .reach__key{color:var(--cream)}
.reach__ticks{display:flex;gap:7px;margin-top:clamp(22px,2.6vw,34px)}
.reach__tick{width:24px;height:2px;background:var(--c20);overflow:hidden}
.reach__tick i{
  display:block;height:100%;background:var(--cream);
  transform:scaleX(0);transform-origin:left;
}
.reach__tick.is-on i{animation:tickFill 6.6s linear forwards}
@keyframes tickFill{to{transform:scaleX(1)}}
@media (max-width:560px){
  .reach__link{grid-template-columns:minmax(0,1fr);gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .reach__slide img,.reach__tick.is-on i{animation:none}
  .reach__tick.is-on i{transform:scaleX(1)}
  .reach__slide{transition-duration:.4s}
}

.footer{margin-top:0;border-top:0}
.set-missing{padding-block:clamp(120px,16vw,220px) clamp(60px,8vw,120px)}
.set-missing .lede{margin-bottom:22px}

@media (max-width:820px){
  .set-grid--tall{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .set-grid--wide{grid-template-columns:minmax(0,1fr)}
  .set-grid--tall{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .set-shot img{opacity:1;animation:none}
}

/* ==========================================================================
   14. Archive pages
   ========================================================================== */
.archive-video{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--tile-gap);
  align-items:start;
}
.archive-video .vcard--v{aspect-ratio:9/16}
.archive-nav{
  display:flex;flex-wrap:wrap;gap:0 clamp(24px,4vw,56px);
  border-top:1px solid var(--c10);padding-top:clamp(20px,2.4vw,32px);
  padding-bottom:clamp(28px,3.4vw,48px);
}
.archive-nav__link{
  position:relative;text-decoration:none;padding-block:8px;
  font-family:var(--display);font-weight:900;
  font-variation-settings:"wdth" var(--wide);
  font-size:clamp(17px,1.8vw,24px);letter-spacing:-.03em;color:var(--c55);
  transition:color .3s var(--e);
}
.archive-nav__rule{
  position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cream);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e-out);
}
.archive-nav__link:hover{color:var(--cream)}
.archive-nav__link:hover .archive-nav__rule{transform:scaleX(1)}

@media (max-width:900px){
  .archive-video{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .archive-video{grid-template-columns:minmax(0,1fr)}
}