/* Self-hosted first, Google Fonts as fallback if file:// blocks local fonts */
@font-face{
  font-family:'IT Local';
  src:url('Fonts/InterTight-VariableFont_wght.ttf') format('truetype-variations');
  font-weight:100 900;font-display:swap;
}

:root{
  --ink:#000;
  --paper:#fff;
  --mute:#6f6f6f;
  --box:#f2f2f2;
  --rule:#ebebeb;
  --faint:#9a9a9a;
  --gut:29px;
  --tilegap:14px;
  --body:'IT Local','Inter Tight',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --label:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:13px;line-height:1.45;
  padding:0 var(--gut) 0;
}
a{color:inherit;text-decoration:none}
img{display:block}

/* ---------------- HEADER ---------------- */
.head{
  display:grid;grid-template-columns:repeat(12,1fr);
  align-items:start;
  padding:30px 0 0;
}
.head .logo{grid-column:1 / 5}
.head .logo svg,.head .logo img{
  display:block;width:98px;height:auto;
  overflow:visible;
}
body.home .head .logo svg{width:min(426px,31vw)}

/* aperture iris on the dot of the i — runs once on first load */
.iris{
  transform-box:view-box;
  transform-origin:1261.3px 31.25px;
  animation:irisSpin 1700ms cubic-bezier(.22,.9,.24,1) 500ms both;
}
.iris .leaf{
  animation:irisClose 1700ms cubic-bezier(.22,.9,.24,1) 500ms both;
}
@keyframes irisSpin{
  from{transform:rotate(-62deg)}
  to  {transform:rotate(0deg)}
}
@keyframes irisClose{
  from{transform:translateY(34px)}
  to  {transform:translateY(0px)}
}

.head .roles{
  grid-column:5 / 10;
  display:grid;grid-template-columns:repeat(3,1fr);
  font-size:11.5px;letter-spacing:.005em;color:var(--ink);
  padding-top:3px;
}

/* inner pages: roles become section links */
.head .pages{
  grid-column:5 / 10;
  display:none;grid-template-columns:repeat(3,1fr);
  font-size:11.5px;letter-spacing:.005em;
  padding-top:3px;
}
.head .pages a{
  position:relative;display:inline-block;justify-self:start;
  color:var(--mute);
  transition:color .3s ease, padding-left .45s cubic-bezier(.16,.84,.24,1);
}
.head .pages a::before{
  content:'//';position:absolute;left:0;top:0;
  opacity:0;transform:translateX(-8px);
  transition:opacity .3s ease, transform .45s cubic-bezier(.16,.84,.24,1);
}
.head .pages a.on{color:var(--ink);padding-left:1.16em}
.head .pages a.on::before{opacity:1;transform:translateX(0)}

body:not(.home) .head .roles{display:none}
body:not(.home) .head .pages{display:grid}

/* inner pages: pin the header */
body:not(.home) .head{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  margin-inline:calc(var(--gut) * -1);
  padding:30px var(--gut) 20px;
}
.head .nav{
  grid-column:10 / 13;
  display:flex;gap:17px;justify-content:flex-end;align-items:baseline;
  font-size:11.5px;padding-top:3px;
}
.head .nav a{color:var(--ink)}
.head .nav a.on{text-decoration:underline;text-underline-offset:3px}

/* ---------------- HOME ---------------- */
.hero{
  /* mirrors .tiles exactly so the copy lines up with the Video tile:
     same 3 columns, same gap. A 12-col grid with no gap lands ~9px left. */
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--tilegap);
  padding-top:112px;
}
.hero .blurb{
  grid-column:3;
  font-size:14px;line-height:1.42;max-width:44ch;
}
.hero .blurb p{margin-bottom:1.42em}
.hero .blurb p:last-child{margin-bottom:0}

.tiles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--tilegap);
  margin-top:55px;
}
.card .label{
  font-weight:500;
  font-size:var(--label);letter-spacing:0;
  margin-bottom:9px;display:block;position:relative;
  transition:padding-left .5s cubic-bezier(.16,.84,.24,1);
}
.card .label::before{
  content:'//';
  position:absolute;left:0;top:0;
  opacity:0;transform:translateX(-10px);
  transition:opacity .32s ease, transform .5s cubic-bezier(.16,.84,.24,1);
}

.card{display:block}
.card .shot{
  display:block;
  position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--box);
}
.card .shot img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1);
  transition:transform 1.15s cubic-bezier(.16,.84,.24,1);
}

/* ---------------- CATEGORY / GRID ---------------- */
.pagehead{
  font-weight:500;
  font-size:var(--label);letter-spacing:0;
  padding-top:80px;margin-bottom:22px;
}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--tilegap)}
.frame{
  position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--box);
}
.frame img{
  width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1);
  transition:opacity .45s ease, transform 1.15s cubic-bezier(.16,.84,.24,1);
}
.frame img.in{opacity:1}

.frame .tag{
  position:absolute;left:0;right:0;bottom:0;
  padding:15px 16px;
  font-size:12px;color:#fff;
  opacity:0;transform:translateY(9px);
  transition:opacity .3s ease, transform .5s cubic-bezier(.16,.84,.24,1);
  background:linear-gradient(to top,rgba(0,0,0,.38),rgba(0,0,0,0) 62%);
  pointer-events:none;
}
.frame .tag i{
  font-style:normal;display:inline-block;margin-right:.42em;
  opacity:0;transform:translateX(-8px);
  transition:opacity .34s ease .07s, transform .5s cubic-bezier(.16,.84,.24,1) .07s;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .card:hover .shot img,.frame:hover img.in{transform:none}
  .iris,.iris .leaf{animation:none;transform:none}
}

/* ---------------- ABOUT ---------------- */
.about{display:grid;grid-template-columns:repeat(12,1fr);gap:0}
.about .portrait{grid-column:1 / 5;aspect-ratio:1/1;overflow:hidden;background:var(--box)}
.about .portrait img{width:100%;height:100%;object-fit:cover}
.about .colA{grid-column:5 / 9;padding:0 34px 0 21px}
.about .colB{grid-column:9 / 13;padding-left:21px}
.about .colA p,.about .colB p{font-size:13.5px;line-height:1.48;margin-bottom:1.55em}
.about .colA p:last-child,.about .colB p:last-child{margin-bottom:0}
.about .colB{padding-top:0}
.about .contact{margin-top:58px}
.about .contact h3{
  font-weight:500;font-size:var(--label);
  letter-spacing:0;margin-bottom:10px;
}
.about .contact a{
  display:block;font-size:13.5px;line-height:1.45;
  text-decoration:underline;text-underline-offset:2px;
}

/* ---------------- VIDEO ---------------- */
.soon{
  grid-column:1 / 3;font-size:14px;line-height:1.5;max-width:44ch;color:var(--ink);
}
.soon span{color:var(--mute);display:block;margin-top:10px}



/* ---------------- IMAGE PROTECTION ----------------
   pointer-events:none means a right-click lands on the wrapper, not the
   image, so the browser offers no "Save image as". Hover still works
   because it's bound to the parent. Friction only — not true protection. */
.frame img,
.card .shot img,
.about .portrait img{
  pointer-events:none;
  -webkit-user-drag:none;
  -khtml-user-drag:none;
  -moz-user-drag:none;
  -o-user-drag:none;
  user-drag:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;   /* stops iOS long-press save sheet */
}


/* ---------------- TEST: click to expand a tile to 2x2 ----------------
   A 2x2 block is the same shape as a 1x1 tile (2 tiles + 1 gap, both axes),
   so the growth is a uniform scale — no distortion mid-animation.
   Remove this block and the matching section in app.js to revert. */
.frame{cursor:zoom-in}
/* dense back-fills any hole the 2x2 leaves, so the only empty space
   ends up at the very bottom of the grid. With every tile 1x1 by
   default this is a no-op — it only engages once one is expanded. */
.grid{grid-auto-flow:dense}
.frame.big{
  grid-column:span 2;
  grid-row:span 2;
  z-index:2;
  cursor:zoom-out;
}
.frame.big .tag{font-size:13px;padding:18px 20px}
.frame:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:560px){
  .frame.big{grid-column:span 2;grid-row:span 2}
}

/* ---------------- FOOTER ---------------- */
.foot{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:4px 24px;
  margin-top:64px;padding:11px 0 26px;
  border-top:1px solid var(--rule);
  font-size:10.5px;line-height:1.3;letter-spacing:.012em;
  color:var(--faint);
}
.foot a{color:var(--faint);transition:color .25s ease}
.foot .end{margin-left:auto}


/* ---------------- HOVER (pointer devices only) ----------------
   Gated on hover+fine pointer so touch screens get no hover states at all. */
@media (hover:hover) and (pointer:fine){
  .card:hover .label{padding-left:1.16em}
  .card:hover .label::before{opacity:1;transform:translateX(0)}
  .card:hover .shot img{transform:scale(1.045)}

  .frame:hover img.in{transform:scale(1.045)}
  .frame:hover .tag{opacity:1;transform:translateY(0)}
  .frame:hover .tag i{opacity:1;transform:translateX(0)}

  .head .pages a:hover{color:var(--ink);padding-left:1.16em}
  .head .pages a:hover::before{opacity:1;transform:translateX(0)}
  .head .nav a:hover{opacity:.45}
  .about .contact a:hover{opacity:.45}
  .foot a:hover{color:var(--ink)}
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1000px){
  :root{--gut:18px;--tilegap:10px}
  .head{grid-template-columns:repeat(6,1fr);row-gap:16px}
  .head .logo{grid-column:1 / 4}
  .head .nav{grid-column:4 / 7}
  .head .roles{grid-column:1 / 7;order:3;gap:14px;color:var(--mute)}
  .head .pages{grid-column:1 / 7;order:3;gap:14px}
  .foot{margin-top:44px;gap:3px 16px}
  .foot .end{margin-left:0}
  body:not(.home) .head{padding:18px var(--gut) 14px}
  body.home .head .logo img{width:min(340px,52vw)}
  .hero{padding-top:56px}
  .hero .blurb{grid-column:1 / 4}
  .tiles{grid-template-columns:1fr;gap:26px;margin-top:38px}
  .grid{grid-template-columns:repeat(3,1fr)}
  .pagehead{padding-top:42px}
  .about{gap:24px}
  .about .portrait{grid-column:1 / 13}
  .about .colA,.about .colB{grid-column:1 / 13;padding:0}
  .about .colB{padding-top:0}
  .about .contact{margin-top:32px}
  .soon{grid-column:1 / 4}
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .head .roles{grid-template-columns:1fr;row-gap:2px}
}