/* ============================================================
   JST Media — main stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200;300;400;600;800&display=swap');

:root{
  --bg:        #0b0b0c;
  --bg-raised: #141416;
  --line:      #232326;
  --fg:        #ededec;
  --fg-dim:    #9a9a9c;
  --fg-dimmer: #6c6c6e;
  --accent:    #5b9bd1;
  --accent-dim:#3a5f7d;
  --max-w:     1320px;
  --gap:       14px;
  --nav-h:     64px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Mulish', sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{
  color: var(--fg);
  text-decoration: none;
}
a:hover{ color: var(--accent); }

.container{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------------- Nav ---------------- */

.site-nav{
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(11,11,12,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-nav .container{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand img{
  height: 34px;
  width: auto;
}

.nav-links{
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a{
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-dim);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.nav-links a:hover,
.nav-links a.is-active{
  color: var(--fg);
  border-bottom-color: var(--accent);
}

.nav-links .nav-tool{
  color: var(--accent);
}

.nav-toggle{
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
  margin-right: -8px;
}
.nav-toggle span{
  display: block;
  width: 22px;
  height: 2px;
  background: var(--fg);
  margin: 5px 0;
  transition: transform .2s ease, opacity .2s ease;
}

/* ---------------- Section nav (Photography / iRacing sub-header) ---------------- */
/* Sits directly under the main nav on every page: divides the site's two
   content sections (Photography's three categories vs. iRacing) so the
   category tabs read as belonging to "Photography" specifically, with
   iRacing set apart as its own equivalent section rather than a fourth
   flat item lost among the others. */

.section-nav{
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}

.section-nav-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 12px 0;
}

.section-nav-group{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.section-nav-label{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-dimmer);
  white-space: nowrap;
}

.section-nav-label--link{
  color: var(--fg-dim);
  transition: color .2s ease;
}
.section-nav-label--link:hover,
.section-nav-label--link.is-active{
  color: var(--accent);
}

.section-nav-links{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.section-nav-links a{
  font-size: 13px;
  color: var(--fg-dim);
  transition: color .2s ease;
}
.section-nav-links a:hover,
.section-nav-links a.is-active{
  color: var(--fg);
}

.section-nav-divider{
  width: 1px;
  height: 16px;
  background: var(--line);
  flex: none;
}
@media (max-width: 640px){
  .section-nav-divider{ display: none; }
}

/* ---------------- Hero ---------------- */

.hero{
  position: relative;
  height: 86vh;
  min-height: 460px;
  max-height: 860px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #050505;
}

.hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0.92;
}

.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,6,7,0.35) 0%, rgba(6,6,7,0.12) 30%, rgba(6,6,7,0.55) 78%, rgba(6,6,7,0.92) 100%);
}

.hero-content{
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 28px 64px;
}

.hero-mark{
  height: 64px;
  width: auto;
  margin-bottom: 24px;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.45));
}

.hero h1{
  font-size: clamp(28px, 4.4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  max-width: 640px;
  text-wrap: balance;
}

.hero p{
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 300;
  color: var(--fg-dim);
  max-width: 46ch;
  margin: 0;
}

.hero-scroll{
  position: absolute;
  right: 28px;
  bottom: 26px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: none;
}

/* ---------------- Sections / intro ---------------- */

section{ padding: 84px 0; }
.section-tight{ padding: 56px 0; }

.intro{
  max-width: 660px;
}
.intro .eyebrow{
  display: block;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  font-weight: 600;
}
.intro h2{
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  margin: 0 0 18px;
}
.intro p{
  color: var(--fg-dim);
  font-weight: 300;
  font-size: 16px;
  margin: 0 0 14px;
}

.about-layout{
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 60px;
  align-items: start;
}
.about-layout .intro{ max-width: 660px; }

.gear-panel{
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px 26px;
  background: var(--bg-raised);
}
.gear-panel > .eyebrow{
  display: block;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  font-weight: 600;
}
.gear-group{ margin-bottom: 22px; }
.gear-group:last-child{ margin-bottom: 0; }
.gear-group h3{
  font-size: 13px;
  font-weight: 800;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.gear-subhead{
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dimmer);
  margin: 12px 0 6px;
}
.gear-subhead:first-of-type{ margin-top: 0; }
.gear-group ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.gear-group li{
  font-size: 14px;
  font-weight: 300;
  color: var(--fg-dim);
  padding: 5px 0;
}
.gear-tag{
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-dimmer);
}

@media (max-width: 900px){
  .about-layout{
    grid-template-columns: 1fr;
  }
  .about-layout .intro{ max-width: none; }
}

.page-header{
  padding-top: 46px;
}
.page-header .eyebrow{
  display:block;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  font-weight: 600;
}
.page-header h1{
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  margin: 0 0 16px;
  max-width: 720px;
  text-wrap: balance;
}
.page-header p{
  color: var(--fg-dim);
  font-weight: 300;
  font-size: 16px;
  max-width: 62ch;
}

.section-heading{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.section-heading h2{
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  margin: 0;
}
.section-heading .view-all{
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 600;
  white-space: nowrap;
}
.section-heading .view-all:hover{ color: var(--accent); }

/* ---------------- Gallery (masonry via columns) ---------------- */

.gallery{
  column-count: 3;
  column-gap: var(--gap);
}

.gallery figure{
  margin: 0 0 var(--gap);
  break-inside: avoid;
  position: relative;
  overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--line);
}

.gallery figure img{
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
  transition: transform .5s ease, filter .5s ease;
}

.gallery figure:hover img{
  transform: scale(1.025);
}

.gallery figure figcaption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 14px 12px;
  font-size: 12px;
  color: var(--fg-dim);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.72));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  letter-spacing: .02em;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gallery figure:hover figcaption{
  opacity: 1;
  transform: translateY(0);
}

/* Caption text is built entirely from each photo's own EXIF/XMP data,
   read live in the browser (see js/exif-reader.js + js/photo-meta.js) -
   a figcaption only exists at all once that photo has something to show. */
.meta-title{
  color: var(--fg);
  font-size: 13px;
}
.meta-tech{
  color: var(--fg-dim);
  font-size: 11px;
}

/* ---------------- Empty category state ---------------- */

.gallery-empty{
  color: var(--fg-dim);
  font-size: 14px;
}

/* ---------------- Project headings (categories split into subfolders, e.g. iracing) ---------------- */

.gallery-project-heading{
  margin-top: 8px;
}
.gallery ~ .gallery-project-heading{
  margin-top: calc(var(--gap) * 4);
}

/* ---------------- Category strip on homepage ---------------- */

.cat-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.cat-card{
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: block;
  border: 1px solid var(--line);
}
.cat-card img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease, filter .5s ease;
  filter: brightness(0.82);
}
.cat-card:hover img{
  transform: scale(1.05);
  filter: brightness(0.62);
}
.cat-card .cat-label{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75));
}
.cat-label .cat-name{
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 4px;
}
.cat-label .cat-count{
  font-size: 12px;
  color: var(--fg-dim);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ---------------- Latest blog post (homepage, filled by js/homepage.js) ---------------- */

.latest-post{ padding: 40px 0 0; }
.latest-post-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  transition: border-color .2s ease;
}
.latest-post-link:hover{ border-color: var(--accent-dim); color: var(--fg); }
.latest-post-link .eyebrow{
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
}
.latest-post-title{
  display: block;
  font-size: 18px;
  font-weight: 800;
}
.latest-post-sub{
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 300;
  color: var(--fg-dim);
}
.latest-post-arrow{
  font-size: 20px;
  color: var(--fg-dim);
  transition: color .2s ease, transform .2s ease;
}
.latest-post-link:hover .latest-post-arrow{
  color: var(--accent);
  transform: translateX(3px);
}

/* ---------------- Blog (blog/index.php) ---------------- */

.post-list{
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 860px;
  border-top: 1px solid var(--line);
}
.post-list li{ border-bottom: 1px solid var(--line); }
.post-list a{
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 4px 24px;
  padding: 22px 0;
}
.post-list-date{
  grid-row: span 2;
  padding-top: 5px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-dimmer);
}
.post-list-title{
  font-size: 19px;
  font-weight: 800;
  transition: color .2s ease;
}
.post-list-sub{
  grid-column: 2;
  font-size: 15px;
  font-weight: 300;
  color: var(--fg-dim);
}
.post-list a:hover{ color: var(--fg); }
.post-list a:hover .post-list-title{ color: var(--accent); }
.post-list li{
  display: flex;
  align-items: center;
  gap: 24px;
}
.post-list-link{ flex: 1; min-width: 0; }

/* Upvote + share (blog/lib/votes.php, js/blog.js) */
.post-actions{
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.post-actions button{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  background: none;
  border: 1px solid var(--line);
  color: var(--fg-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.post-actions button:hover{
  border-color: var(--accent);
  color: var(--accent);
}
.post-actions svg{
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.post-vote-count{
  min-width: 1ch;
  font-size: 13px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.post-vote.is-voted{
  border-color: var(--accent-dim);
  color: var(--accent);
}
.post-vote.is-voted svg{ fill: currentColor; }
.post-vote:disabled{ cursor: default; }
.post-header .post-actions{ margin-top: 22px; }

.post-header h1{ margin-bottom: 10px; }
.post-header p{ margin: 0; }

.post-body{
  max-width: 1000px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
}
.post-body > p,
.post-body > h2,
.post-body > h3,
.post-body > ul,
.post-body > ol,
.post-body > blockquote,
.post-body > hr{
  max-width: 68ch;
}
.post-body > p{ margin: 0 0 1.2em; }
.post-body > h2{
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 800;
  line-height: 1.3;
  margin: 1.8em 0 .6em;
}
.post-body > h3{
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  margin: 1.6em 0 .5em;
}
.post-body > :first-child{ margin-top: 0; }
.post-body ul,
.post-body ol{ margin: 0 0 1.2em; padding-left: 1.3em; }
.post-body li{ margin-bottom: .3em; }
.post-body blockquote{
  margin: 1.6em 0;
  padding-left: 18px;
  border-left: 2px solid var(--accent-dim);
  color: var(--fg-dim);
}
.post-body blockquote p{ margin: 0; }
.post-body hr{
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.4em 0;
}
.post-body strong{ font-weight: 800; }
.post-body a{
  color: var(--accent);
  border-bottom: 1px solid var(--accent-dim);
}
.post-body a:hover{ border-bottom-color: var(--accent); }

/* Photo rows: same <figure data-full> as the galleries (lightbox, EXIF
   captions), but laid out as a row instead of masonry columns. Each
   figure's inline flex-grow is its aspect ratio, so every photo in a
   row ends up the same height. */
.post-body .post-photos{
  column-count: auto;
  display: flex;
  gap: var(--gap);
  margin: 2em 0;
}
.post-body .post-photos{ align-items: flex-start; }
.post-body .post-photo{ min-width: 0; }
.post-body .post-photos figure{ margin: 0; }
/* A photo on its own is as wide as its row, unless that would make it
   taller than 88% of the screen (--ar = width / height, set inline). */
.post-body .post-photos--single .post-photo{
  width: min(100%, calc(88vh * var(--ar, 1.5)));
}
.post-caption{
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--fg-dim);
}
/* One caption under a whole row of photos (text right under the row). */
.post-body .post-photos--captioned{ margin-bottom: 0; }
.post-body .post-set-caption{ margin: 8px 0 2em; }

.post-body .post-ref{
  font-size: .68em;
  line-height: 0;
  vertical-align: super;
  margin-left: 1px;
}
.post-body .post-ref a{
  border-bottom: 0;
  padding: 0 1px;
}

.post-sources{
  max-width: 68ch;
  margin-top: 3em;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-dim);
}
.post-sources h2{
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-dim);
}
.post-sources ol{ margin: 0; padding-left: 1.4em; }
.post-sources li{ margin-bottom: .4em; overflow-wrap: anywhere; }
.post-sources li:target{ color: var(--fg); }

.post-back{
  display: inline-block;
  margin-top: 40px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-dim);
}
.post-back:hover{ color: var(--accent); }

@media (max-width: 720px){
  .post-list a{ grid-template-columns: minmax(0, 1fr); }
  .post-list li{ flex-wrap: wrap; gap: 0; padding-bottom: 20px; }
  .post-list .post-list-link{ flex-basis: 100%; padding-bottom: 14px; }
  .post-list-date{ grid-row: auto; padding-top: 0; }
  .post-list-sub{ grid-column: auto; }
  .post-body{ font-size: 16px; }
  .latest-post{ padding-top: 28px; }
  .latest-post-link{ padding: 16px 18px; }
}
/* Pairs stay side by side on a phone; three or more stack. */
@media (max-width: 520px){
  .post-body .post-photos{ gap: 8px; }
  .post-body .post-photos--many{ flex-direction: column; align-items: stretch; }
  .post-body .post-photos--many .post-photo{ flex: none !important; }
}

/* ---------------- Footer ---------------- */

.site-footer{
  border-top: 1px solid var(--line);
  padding: 56px 0 34px;
  margin-top: 40px;
}
.footer-grid{
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-brand img{
  height: 30px;
  margin-bottom: 12px;
}
.footer-brand p{
  color: var(--fg-dimmer);
  font-size: 13px;
  font-weight: 300;
  max-width: 34ch;
}
.footer-col h3{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 14px;
  font-weight: 600;
}
.footer-col ul{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.footer-col a{
  font-size: 14px;
  color: var(--fg-dim);
  font-weight: 300;
}
.footer-col a:hover{ color: var(--accent); }

.footer-bottom{
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--fg-dimmer);
}

/* ---------------- Lightbox ---------------- */

.lightbox{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6,6,7,0.96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox.is-open{ display: flex; }

.lightbox img{
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  height: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.lightbox-caption{
  position: absolute;
  left: 0; right: 0;
  bottom: 22px;
  text-align: center;
  font-size: 13px;
  color: var(--fg-dim);
  letter-spacing: .03em;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lightbox-caption .meta-title{ font-size: 14px; }
.lightbox-caption .meta-tech{ font-size: 12px; }

.lightbox-close,
.lightbox-nav{
  position: absolute;
  background: none;
  border: 0;
  color: var(--fg);
  cursor: pointer;
  font-family: 'Mulish', sans-serif;
  opacity: .78;
}
.lightbox-close:hover,
.lightbox-nav:hover{ opacity: 1; color: var(--accent); }

.lightbox-close{
  top: 22px; right: 26px;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lightbox-nav{
  top: 50%;
  transform: translateY(-50%);
  font-size: 34px;
  padding: 10px 16px;
  line-height: 1;
}
.lightbox-prev{ left: 6px; }
.lightbox-next{ right: 6px; }

/* ---------------- Misc ---------------- */

.btn{
  display: inline-block;
  padding: 13px 26px;
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
}
.btn:hover{
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------------- Responsive ---------------- */

@media (max-width: 900px){
  .gallery{ column-count: 2; }
  .cat-grid{ grid-template-columns: repeat(3, 1fr); gap: 8px; }
  section{ padding: 60px 0; }
}

@media (max-width: 720px){
  :root{ --gap: 10px; }
  .container{ padding: 0 18px; }

  /* Do not put overflow-x (clip or hidden) on html/body here to stop sideways
     swiping. It was tried: it makes the viewport take its overflow from
     <html>, so a scroll lock on <body> turns body into its own scroll box and
     the sticky .site-nav stops sticking to the screen (tap the hamburger far
     down a page and the header + menu jump to the top of the document). The
     real guard is below: nothing in the menu ever extends past the right
     edge, so there is no overflow to hide. */

  .nav-links{
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    height: calc(100vh - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 10px 24px 40px;

    /* The closed panel is NOT parked off-screen. It stays exactly inside the
       viewport and is uncovered from the right edge instead.

       Why it cannot be parked off-screen: .site-nav sets backdrop-filter,
       which makes it the containing block for its position: fixed children.
       So this panel is not viewport-fixed - it is an ordinary descendant of
       the header, and a transform: translateX(100%) on it really does make
       the document one whole screen wider. That is what let the page be
       swiped sideways onto the "hidden" menu, and it dragged the fixed
       lightbox out of line with the page underneath it too. Clipping it
       away at the root only hides the symptom and is not reliable, so
       nothing here is ever allowed past the right edge in the first place:
       the box is always left: 0 / right: 0, and clip-path does the reveal. */
    clip-path: inset(0 0 0 100%);
    /* visibility keeps the closed panel out of the tab order (clip-path
       already blocks paint and taps). It is switched, not interpolated: 0s
       delayed by the length of the reveal, so the panel stays visible for
       the whole close animation and only then goes hidden, while opening
       un-hides it on the spot. */
    visibility: hidden;
    transition: clip-path .28s ease, visibility 0s linear .28s;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-links.is-open{
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path .28s ease, visibility 0s linear 0s;
  }
  /* The rows carry the horizontal motion the panel itself no longer can, so
     the menu still reads as arriving from the right. */
  .nav-links li{ transform: translateX(22px); transition: transform .28s ease; }
  .nav-links.is-open li{ transform: translateX(0); }
  .nav-links li{ width: 100%; border-bottom: 1px solid var(--line); }
  .nav-links a{
    display: block;
    padding: 16px 0;
    font-size: 14px;
  }
  .nav-toggle{ display: block; }

  .hero{ height: 78vh; }
  .hero-content{ padding-bottom: 40px; }

  .gallery{ column-count: 1; }

  .cat-grid{ grid-template-columns: 1fr; }
  .cat-card{ aspect-ratio: 16 / 10; }

  .footer-grid{ gap: 34px; }

  /* Two mobile-only corrections to the overlay:

     - height. A fixed inset: 0 box is sized against the *large* viewport
       (the one you get with the browser's URL bar hidden), so with the bar
       on screen the overlay ran off the bottom: the photo sat low and the
       caption was under the browser chrome. 100dvh is the height actually
       visible right now.
     - touches. body { overflow: hidden } alone is not honoured by every
       mobile browser, so the overlay also refuses to hand the gesture off to
       the page behind it. pinch-zoom is kept so a photo can still be zoomed;
       only panning the document is blocked. */
  .lightbox{
    padding: 16px;
    height: 100dvh;
    touch-action: pinch-zoom;
    overscroll-behavior: contain;
  }
  .lightbox img{ max-height: 70dvh; }
  .lightbox-nav{ font-size: 26px; padding: 8px 10px; }
  .lightbox-close{ top: 14px; right: 16px; }
  .lightbox-caption{ bottom: 16px; }
}

@media (min-width: 721px) and (max-width: 1100px){
  .hero-scroll{ display: none; }
}

/* ============================================================
   Color Tool
   ============================================================ */

.lct-note{
  color: var(--fg-dim);
  font-size: 13.5px;
  font-weight: 300;
  margin: 0 0 32px;
  padding-left: 14px;
  border-left: 2px solid var(--accent-dim);
}

.lct-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: start;
}

.lct-card{
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 26px 24px 28px;
}

.lct-card-title{
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.lct-card-title--switch{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lct-row{
  margin-bottom: 22px;
}

.lct-row-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.lct-row-head label{
  font-size: 13px;
  color: var(--fg-dim);
  font-weight: 400;
}

.lct-row-control{
  display: flex;
  align-items: center;
  gap: 14px;
}

.lct-swatch{
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: #000;
}

/* number inputs -------------------------------------------------- */

.lct-number{
  -moz-appearance: textfield;
  width: 64px;
  height: 34px;
  padding: 0 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  transition: border-color .2s ease;
}
.lct-number:focus,
.lct-number:hover{
  outline: none;
  border-color: var(--accent);
}
.lct-number::-webkit-outer-spin-button,
.lct-number::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* range sliders --------------------------------------------------- */

.lct-slider{
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 6px;
  min-width: 0;
  background: var(--line);
  border: 1px solid var(--line);
  cursor: pointer;
}
.lct-slider:focus{ outline: none; }

.lct-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.35);
  cursor: pointer;
  margin-top: -1px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
}
.lct-slider::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.35);
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
}
.lct-slider::-moz-range-track{
  height: 6px;
  background: transparent;
  border: none;
}
.lct-slider:hover::-webkit-slider-thumb,
.lct-slider:focus::-webkit-slider-thumb{
  box-shadow: 0 0 0 2px var(--accent);
}
.lct-slider:hover::-moz-range-thumb,
.lct-slider:focus::-moz-range-thumb{
  box-shadow: 0 0 0 2px var(--accent);
}

.lct-slider--hue{
  background-image: linear-gradient(to right,
    hsl(0,100%,50%), hsl(45,100%,50%), hsl(90,100%,50%), hsl(135,100%,50%),
    hsl(180,100%,50%), hsl(225,100%,50%), hsl(270,100%,50%), hsl(315,100%,50%), hsl(360,100%,50%));
}

/* RGB output -------------------------------------------------- */

.lct-output{
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.lct-output-label{
  display: block;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 600;
  margin-bottom: 14px;
}

.lct-rgb{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.lct-rgb-field label{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dot, var(--fg-dim));
  margin-bottom: 8px;
}
.lct-rgb-field label::before{
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--dot, var(--fg-dim));
}
.lct-rgb-field--r label{ --dot: #e2584a; }
.lct-rgb-field--g label{ --dot: #3fc57e; }
.lct-rgb-field--b label{ --dot: #4ea0f5; }

.lct-percent{
  position: relative;
}
.lct-percent .lct-number{ width: 100%; padding-right: 22px; }
.lct-percent::after{
  content: '%';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-dimmer);
  font-size: 13px;
  pointer-events: none;
}

/* toggle switch -------------------------------------------------- */

.lct-switch{
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  cursor: pointer;
}
.lct-switch input{
  opacity: 0;
  width: 0;
  height: 0;
}
.lct-switch-track{
  position: absolute;
  inset: 0;
  background: var(--line);
  border: 1px solid var(--line);
  transition: background-color .2s ease;
}
.lct-switch-track::before{
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  top: 3px;
  background: var(--fg);
  transition: transform .2s ease;
}
.lct-switch input:checked + .lct-switch-track{
  background: var(--accent-dim);
  border-color: var(--accent);
}
.lct-switch input:checked + .lct-switch-track::before{
  transform: translateX(18px);
  background: #fff;
}
.lct-switch input:focus-visible + .lct-switch-track{
  border-color: var(--accent);
}

.lct-footnote{
  text-align: center;
  color: var(--fg-dimmer);
  font-size: 13px;
  font-weight: 300;
  margin: 36px 0 0;
}

@media (max-width: 720px){
  .lct-grid{ grid-template-columns: 1fr; }
  .lct-card{ padding: 22px 18px 24px; }
  .lct-slider::-webkit-slider-thumb{ width: 20px; height: 20px; }
  .lct-slider::-moz-range-thumb{ width: 20px; height: 20px; }
}