/* ============================================================================
   photo.css — shared design language for photo.jakesmith.studio
   ----------------------------------------------------------------------------
   The main jakesmith.studio page keeps its CSS inline because it's a single
   file. This site has two pages that share the cursor, header, footer, fade
   overlay and bloom, so those live here and each page adds only what's its own.
   Values follow the design tokens in the handoff.
   ========================================================================== */

:root{
  --bg:#0a0a0a;
  --tile:#111;
  --fg:#f4f3ee;
  --muted:rgba(244,243,238,.55);
  --grid-gap:15px;
  --side-bar:48px;
  --cursor-size:50px;
  --fade-ms:380ms;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Work Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--fg);text-decoration:none}
.link{transition:opacity .18s ease}
.link:hover{opacity:.55}
:where(a,button):focus-visible{outline:1.5px solid var(--fg);outline-offset:4px;opacity:1}

.mono{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace}

/* ---- difference cursor -------------------------------------------------- */
/* One element, two states, same diameter. mix-blend-mode:difference is what
   makes it read against both the black page and a bright photograph. */
#cursor{
  position:fixed;top:0;left:0;
  width:var(--cursor-size);height:var(--cursor-size);
  border:1.5px solid rgba(255,255,255,.85);
  border-radius:50%;
  background:transparent;
  pointer-events:none;
  z-index:99999;
  mix-blend-mode:difference;
  transform:translate(-200px,-200px) translate(-50%,-50%);
  transition:width .18s ease,height .18s ease;
}
#cursor.is-disc{background:#fff;border:none}

/* ---- dip-to-black page transition -------------------------------------- */
/* Starts opaque and fades out on load, so arriving and leaving are the same
   gesture. Inline `opacity:1` on the element means it covers the page even
   before the stylesheet lands. */
#fade{
  position:fixed;inset:0;
  background:var(--bg);
  opacity:1;
  pointer-events:none;
  z-index:100000;
  transition:opacity var(--fade-ms) ease;
}

/* ---- page frame -------------------------------------------------------- */
.page{
  height:100vh;
  height:100svh;
  display:flex;
  flex-direction:column;
}

.site-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:44px 48px 30px;
  gap:24px;
  flex-wrap:wrap;
  flex-shrink:0;
  z-index:10;
}

.site-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:30px 48px 44px;
  gap:24px;
  flex-wrap:wrap;
  flex-shrink:0;
}
.site-footer a{font-size:13px;font-weight:300;letter-spacing:.14em}

/* ---- tile layers (landing) --------------------------------------------- */
.tile__layer{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}
.tile__base{filter:grayscale(1) brightness(.5) contrast(1.05)}
/* Radius 0 at rest — the bloom grows this mask from wherever the cursor entered. */
.tile__colour{
  -webkit-mask-image:radial-gradient(circle 0px at 50% 50%,#000 0,rgba(0,0,0,0) 1px);
  mask-image:radial-gradient(circle 0px at 50% 50%,#000 0,rgba(0,0,0,0) 1px);
}

/* ---- touch / no-hover -------------------------------------------------- */
@media (hover:none){
  #cursor{display:none!important}
  /* No cursor means no bloom to trigger, so the colour is simply always on. */
  .tile__colour{-webkit-mask-image:none!important;mask-image:none!important}
  .site-header{flex-direction:column;align-items:flex-start;text-align:left;gap:14px}
}

@media (max-width:640px){
  .site-header{padding:32px 24px 22px}
  .site-footer{padding:22px 24px 32px}
}

@media (prefers-reduced-motion:reduce){
  #cursor{transition:none}
  #fade{transition:opacity 60ms linear}
}