/* stephenbontly.com - rebuilt 2026-09-23 from the Squarespace export of
   2026-09-07. The template was Squarespace 7.0 "Forte"; every measurement here
   is taken off the Squarespace screenshots at 1920x1080 so the rebuild reads
   as the same site.

   Futura PT was the template face. It is licensed to Squarespace domains only,
   so Jost - an open Futura revival - stands in for it. */

:root{
  --paper:#fafafa;
  --ink:#141414;
  --text:#2a2a2a;
  --muted:#8e8e8e;
  --m:50px;                               /* the side margin */
  --h:clamp(220px,46.3vh,900px);          /* strip height: 500px on a 1080 screen */
  --font:"Jost","Futura PT",Futura,"Century Gothic","Avenir Next",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.noscroll{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--font);
  font-size:14px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
img{display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---- header ---------------------------------------------------------- */
.hdr{position:absolute;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:40px var(--m) 0;color:var(--ink)}
.logo{font-size:38px;font-weight:600;letter-spacing:.135em;line-height:42px;
  text-decoration:none;white-space:nowrap;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:25px}
.nav>ul{list-style:none;margin:0;padding:0;display:flex;gap:24px;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;line-height:1;font-weight:380}
.nav li{position:relative}
.nav ul a{text-decoration:none;display:inline-block;padding:6px 0}
.nav>ul>li.on>a{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.nav .fold>ul{list-style:none;margin:0;padding:10px 0;position:absolute;top:100%;left:-16px;
  min-width:170px;background:var(--paper);color:var(--ink);box-shadow:0 3px 18px rgba(0,0,0,.09);
  opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s}
.nav .fold:hover>ul,.nav .fold:focus-within>ul{opacity:1;visibility:visible}
.nav .fold>ul a{display:block;padding:8px 16px;white-space:nowrap}
.nav .fold>ul a[aria-current]{text-decoration:underline;text-underline-offset:5px}
.socs{display:flex;align-items:center;gap:15px}
.soc{display:block;width:20px;height:20px;color:inherit}
.soc svg{width:100%;height:100%;fill:currentColor;display:block}
.menu{display:none}
/* Forte read the colour of each picture's top corners and turned the header
   white over a dark one. The export kept that reading for every slide. */
.hdr.tl-dark .logo{color:#fff}
.hdr.tr-dark .nav>ul>li>a,.hdr.tr-dark .socs{color:#fff}

/* ---- the front page ---------------------------------------------------- */
.splash{position:relative;height:100vh;min-height:520px;overflow:hidden;background:#3b3a2c;
  color:#fff;display:flex;align-items:center;justify-content:center;text-align:center}
.splash .bg,.splash .bg img{position:absolute;inset:0;width:100%;height:100%}
.splash .bg img{object-fit:cover}
.splash .bg::after{content:"";position:absolute;inset:0;background:#fff;opacity:.2}
.splash-in{position:relative;padding:0 24px}
.splash h1{font-size:97px;font-weight:500;line-height:1;margin:0 0 36px;letter-spacing:0;white-space:nowrap}
.tag{font-size:17px;font-weight:600;letter-spacing:.12em;line-height:1.25;
  text-transform:capitalize;margin:0 auto 18px;max-width:550px}
.enter{display:inline-block;margin-top:24px;border:2px solid #fff;border-radius:3px;
  padding:12px 20px 11px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;transition:background .2s,color .2s}
.enter:hover{background:#fff;color:#222}
.splash-soc{position:absolute;left:0;right:0;bottom:60px;display:flex;justify-content:center;gap:6px}
.splash-soc a{display:block;width:24px;height:24px;color:#fff;border-radius:50%;overflow:hidden}
.splash-soc svg{width:100%;height:100%;fill:currentColor;display:block}

/* ---- a section page: its galleries, full screen, one at a time ---------- */
.index{position:relative;height:100vh;min-height:480px;overflow:hidden;background:#171717}
.islide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;display:block;color:#fff}
.islide.on{opacity:1;z-index:1}
.islide img{width:100%;height:100%;object-fit:cover}
.label{position:absolute;left:var(--m);bottom:50px;background:rgba(20,20,20,.93);color:#fff;
  padding:13px 20px 12px;font-size:14px;letter-spacing:.25em;text-transform:uppercase;
  line-height:17px;white-space:nowrap}
.label .f{color:#9b9b9b}

/* ---- a gallery: one horizontal strip, captions under each picture ------- */
.gallery{min-height:100vh;padding-top:max(140px,calc(50vh - var(--h) / 2))}
.strip{display:flex;gap:15px;overflow-x:auto;overflow-y:hidden;padding:0 var(--m) 70px;
  scroll-snap-type:x proximity;scroll-padding-inline:var(--m);scrollbar-width:none;
  overscroll-behavior-x:contain}
.strip::-webkit-scrollbar{display:none}
.strip::after{content:"";flex:0 0 calc(var(--m) - 15px)}
.slide{flex:0 0 auto;margin:0;scroll-snap-align:start;width:calc(var(--h) * var(--ar))}
.pic{position:relative;height:var(--h);background:#ececec;overflow:hidden;cursor:pointer}
.pic img{width:100%;height:100%;object-fit:cover}
.pic iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.play::before{content:"";width:72px;height:72px;border-radius:50%;
  background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") 55% 50%/30px no-repeat}
.cap{width:80%;padding-top:21px;font-size:14px;line-height:22.5px;letter-spacing:.01em;color:var(--text)}
.cap h2{font-size:16px;font-weight:600;color:var(--ink);margin:0 0 12px;letter-spacing:.01em;line-height:1.3}
.cap p{margin:0}
.cap p:empty{height:22.5px}
.cap a{color:var(--ink)}

/* ---- about -------------------------------------------------------------- */
.about{padding:130px var(--m) 100px}
.about-in{max-width:718px;margin:0 auto}
.show{position:relative;aspect-ratio:718/402;background:#000;overflow:hidden}
.show img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.show img.on{opacity:1}
.show button{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:72px;
  border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.show button svg{width:15px;height:26px;fill:none;stroke:#fff;stroke-width:2}
.show .prev{left:2px}
.show .next{right:2px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 154px;gap:36px;margin-top:18px}
.bio{font-size:14px;line-height:22.4px;letter-spacing:.01em;color:var(--text)}
.bio p{margin:0 0 22.4px}
.bio p:empty{display:none}
.info{text-align:center;color:var(--ink)}
.info h1,.info h2,.info h3{font-weight:600;margin:0 0 50px;line-height:1.3}
.info h1{font-size:26px}
.info h2{font-size:24px}
.info h3{font-size:22px}
.info p{margin:0 0 30px}
.info a{text-underline-offset:4px}
.info .first h1,.info .first h2,.info .first h3{text-align:left;font-size:22px;margin-bottom:20px}
.cv{display:block;margin:0 0 34px;background:#272727;color:#fff;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;line-height:1.45;text-transform:uppercase;padding:14px 34px 13px;
  text-underline-offset:3px}
.cv:hover{background:#000}

/* ---- not found ---------------------------------------------------------- */
.lost{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:140px var(--m) 80px;color:var(--ink)}
.lost h1{font-size:22px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin:0 0 18px}
.lost a{letter-spacing:.1em;text-transform:uppercase;font-size:13px}

/* ---- a narrow screen: the same site, rescaled, with the menu folded ----- */
@media (max-width:1100px){
  .logo{font-size:30px;line-height:32px}
  .nav>ul{gap:18px;font-size:13px}
}
@media (max-width:860px){
  :root{--m:20px;--h:clamp(200px,50vh,560px)}
  .hdr{padding-top:22px}
  .logo{font-size:21px;letter-spacing:.17em;line-height:26px}
  .menu{display:block;position:relative;z-index:3;background:none;border:0;padding:8px 0;margin:0;
    font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:inherit;cursor:pointer}
  .nav{position:fixed;inset:0;z-index:2;background:var(--paper);color:var(--ink);flex-direction:column;
    justify-content:center;gap:34px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
  .hdr.open .nav{opacity:1;visibility:visible}
  .hdr.open .menu,.hdr.open .logo{color:var(--ink)}
  .hdr.open{z-index:40}
  .nav>ul{flex-direction:column;align-items:center;gap:20px;font-size:15px}
  .nav .fold>ul{position:static;opacity:1;visibility:visible;box-shadow:none;background:none;
    padding:8px 0 0;min-width:0;text-align:center;font-size:12px;color:var(--muted)}
  .nav .fold>ul a{padding:5px 0}
  .hdr.tr-dark .nav>ul>li>a,.hdr.tr-dark .socs{color:var(--ink)}
  .hdr.tr-dark .menu{color:#fff}
  .splash h1{font-size:56px;margin-bottom:26px;white-space:normal}
  .tag{font-size:13px;letter-spacing:.1em}
  .enter{font-size:12px}
  .splash-soc{bottom:34px}
  .label{bottom:26px;font-size:11px;letter-spacing:.2em;padding:11px 14px 10px}
  .cap{width:100%;font-size:13px;line-height:21px}
  .about{padding-top:96px}
  .cols{grid-template-columns:1fr;gap:28px}
  .info{max-width:300px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
  .islide,.show img{transition:none}
}