/* ===================================================================
   SAM NIXON — full-bleed scrolling portfolio
   White canvas (so white-bordered images blend). One continuous feed.
   Some items open a story. No menu.
   =================================================================== */

:root{
  --bg:#ffffff;
  --fg:#141414;
  --muted:#7c7c7c;
  --line:rgba(0,0,0,.12);
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(1rem,3vw,2rem);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.01em;
  overscroll-behavior-y:none;
}
img,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* Floating chrome uses white + difference blend, so it reads as black on white
   areas and white over dark images — legible on anything. */
.chrome{color:#fff;mix-blend-mode:difference;}

/* ---------- fixed brand (top-left, every page) ---------- */
.brand-wrap{
  position:fixed;top:var(--pad);left:var(--pad);z-index:40;
  mix-blend-mode:difference;pointer-events:none;
}
.brand{
  display:inline-block;text-decoration:none;
  font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:#fff;
  pointer-events:auto;
}
.brand-tagline{
  margin-top:.3rem;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.7;
  pointer-events:none;
}

/* ---------- story: section name (top-right) ---------- */
.section-name{
  position:fixed;top:var(--pad);right:var(--pad);z-index:45;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#fff;
  mix-blend-mode:difference;pointer-events:none;max-width:60vw;text-align:right;
}
@media (max-width:600px){               /* mobile only — desktop size unchanged */
  .section-name{ font-size:.56rem;letter-spacing:.16em; }
}

/* ---------- story: back button (fixed bottom-centre) ---------- */
.back{
  position:fixed;left:50%;bottom:var(--pad);transform:translateX(-50%);z-index:50;
  background:none;border:none;cursor:pointer;color:#fff;
  font:inherit;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  mix-blend-mode:difference;padding:.4rem .6rem;
}
.back:hover{opacity:.6;}

/* ---------- story: left-edge "back" zone (desktop only) ----------
   Hovering the left 25% shows a back-arrow cursor; clicking goes back. */
.back-zone{
  position:fixed;top:0;left:0;width:25vw;height:100vh;z-index:35;
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2030%2030%27%3E%3Cpath%20d%3D%27M21%205%20L8%2015%20L21%2025%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") 8 15, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABsUlEQVR4nN2Wu0oDURCGd5M0WgghVewULOyCRQoFsbMURPIAkt59gzxCWkEL27yBD2AThJQWNnZWkRArNZfPYueYP8do4Z7dwoGQYXf2fHP+OZeJov9gQAkoFQ4VPy4KWrH/bWDXTyQPYAyUzd8HRsADsG7vws/cAc1PgA8Wdp1LvUXaKtAT4ET8Iz/BLECVdg8YCNDNeAycA2tBZmzSxea3gVeBupk+As3MMIE6aSvApSftzPweUNP4UNAd4M4gU6+eicRnq6nVs2R+C3hZIe0zcGwxX6XIBBW/84O0t0DdYoJIG9uvZoNjsJkk0JX47NtFBwJuDPJu0DnwBJzY+0wHxG8fbq54NoyiqG9+OY7j+V/B38wtEqBhi8etYif1CGhJbLhjkcVBUffqPJU6dyQ+TJ1tML1fu4WsbIWzvJeHAte9fGAxZUJehSyfXn2p+0QSSSQ+qPQOvgFcedI76wFViwu66LTubdIrENIr0SUwABp5wPVObpJehX7d34BD5LwPmYCTvsaiC3HNwD1pd1JI33Vh0DGwZc9y7zTdljsDTv2kcjVv9sU09ArPVd4Q9glt+DFPDcqZsgAAAABJRU5ErkJggg==) 8 15, pointer;
}
@media (hover:none){ .back-zone{ display:none; } }   /* no hover/cursor on touch */

/* ---------- contact (bottom-left, hover / tap to reveal) ---------- */
.contact-corner{position:fixed;left:var(--pad);bottom:var(--pad);z-index:40;mix-blend-mode:difference;}
.contact-corner .cc-trigger{
  background:none;border:none;color:#fff;cursor:pointer;font:inherit;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
}
.contact-corner .cc-list{
  margin-top:.7rem;display:grid;gap:.45rem;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .5s var(--ease),opacity .35s var(--ease);
}
.contact-corner:hover .cc-list,
.contact-corner:focus-within .cc-list,
.contact-corner.open .cc-list{max-height:280px;opacity:1;}
.cc-list .row{font-size:.78rem;color:#fff;letter-spacing:.02em;}
.cc-list .row .k{display:block;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-bottom:.1rem;}
.cc-list a{border-bottom:1px solid rgba(255,255,255,.5);}

/* ---------- THE FEED ---------- */
.feed{display:block;width:100%;}
.feed-item{
  position:relative;display:block;width:100%;line-height:0;
  background:#fff;
}
.feed-item img,.feed-item video{width:100%;height:auto;display:block;}
.feed-item.is-story{cursor:pointer;}
.feed-title{
  position:absolute;left:0;right:0;bottom:clamp(1rem,3vh,2rem);
  text-align:center;color:#fff;mix-blend-mode:difference;pointer-events:none;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;line-height:1.4;
  opacity:0;transition:opacity .45s var(--ease);padding:0 1rem;
}
.feed-item:hover .feed-title{opacity:.92;}

/* two consecutive PORTRAIT covers sit side by side — wide desktop only.
   Below 1000px they stack full-width like everything else. */
.feed-pair{display:block;}
@media (min-width:1000px){
  .feed-pair{display:flex;}
  /* equal-height halves: crop each cover to a common 4:5 portrait so the row lines up */
  .feed-pair > .feed-item{width:50%;aspect-ratio:4 / 5;overflow:hidden;}
  .feed-pair > .feed-item img,
  .feed-pair > .feed-item video{width:100%;height:100%;object-fit:cover;}
}

/* ---------- STORY PAGE ---------- */
.story{width:100%;padding-bottom:clamp(3.5rem,10vh,6.5rem);}  /* room for the fixed Back button */
.story-item{width:100%;line-height:0;background:#fff;}
.story-item img,.story-item video{width:100%;height:auto;display:block;}
/* embedded video player — responsive 16:9, white canvas, clear of the top bar */
.story-video{width:100%;max-width:1180px;margin:0 auto;padding:clamp(4.5rem,12vh,7.5rem) var(--pad) clamp(0.5rem,2vh,1.5rem);position:relative;z-index:36;}  /* above the back-zone so video controls stay clickable */
.story-video + .story-video{padding-top:clamp(0.5rem,2vh,1.5rem);}  /* tighter gap between stacked videos */
.vid-ratio{position:relative;width:100%;padding-top:56.25%;background:#000;}
.vid-ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}

/* hidden but readable by search engines */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px;
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ---------- touch / small screens ---------- */
@media (hover:none){
  .feed-item .feed-title{opacity:.82;}     /* no hover -> show titles softly */
  /* on touch, hover/focus "stick" after a tap — so let ONLY the tapped .open
     class control the panel (the 6s timer removes it). */
  .contact-corner .cc-list,
  .contact-corner:hover .cc-list,
  .contact-corner:focus-within .cc-list{max-height:0;opacity:0;}
  .contact-corner.open .cc-list{max-height:280px;opacity:1;}
}