/* =====================================================================
   This Is Where We're From — theme.css
   Component styling. Brand: amber #FBB03B accent on ink #0F0F0F, greyscale
   everywhere else; the photography carries the colour. Big playful display
   type (--fd), clean body (--fb). Inline-free; all classes.
   ===================================================================== */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
	margin:0; background:var(--ink); color:var(--text);
	font-family:var(--fb); font-size:var(--base); line-height:1.6;
	-webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }
.wrap{ max-width:1280px; margin-inline:auto; padding-inline:40px; }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* keyframes */
@keyframes kb{ from{ transform:scale(1.03);} to{ transform:scale(1.14);} }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(7px);} }
@keyframes mq{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes rise{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:translateY(0);} }
.reveal{ opacity:0; }
.reveal.in{ animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards; }

/* eyebrows / shared */
.eyebrow{ font:600 13px/1 var(--fb); letter-spacing:.22em; text-transform:uppercase; color:var(--amber); margin-bottom:22px; }
.eyebrow--dark{ color:#1a1a1a; opacity:.62; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:38px; }
.sec-title{ font-family:var(--fd); font-weight:600; font-size:52px; line-height:1.02; color:var(--text-strong); margin:0; letter-spacing:-.01em; }
.sec-note{ font:400 18px/1.55 var(--fb); color:var(--mute); margin:0; max-width:38ch; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:9px; font:600 16px var(--fb); padding:16px 26px; border-radius:999px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:background .25s, color .25s, border-color .25s, transform .15s; }
.btn:active{ transform:translateY(1px); }
.btn--sm{ font-size:14px; padding:11px 20px; }
.btn--amber{ background:var(--amber); color:var(--on-amber); }
.btn--amber:hover{ background:#ffc25c; }
.btn--ghost{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn--ghost:hover{ border-color:var(--amber); color:var(--amber); }
.btn--ghost-dark{ border-color:var(--line-2); color:var(--text); }
.btn--ghost-dark:hover{ border-color:var(--amber); color:var(--amber); }
.btn--ink{ background:#1a1a1a; color:var(--amber); }
.btn--ink:hover{ background:#000; }
.btn--ink-ghost{ border-color:#1a1a1a; color:#1a1a1a; }
.btn--ink-ghost:hover{ background:rgba(0,0,0,.06); }
.btn--disabled{ background:rgba(255,255,255,.1); color:rgba(255,255,255,.45); cursor:not-allowed; }

/* ---------------- header ---------------- */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:70; display:flex; align-items:center; justify-content:space-between; padding:18px 40px; transition:background .35s, padding .35s, box-shadow .35s; }
.site-header.is-scrolled{ background:rgba(15,15,15,.92); backdrop-filter:blur(10px); padding:12px 40px; box-shadow:0 1px 0 rgba(255,255,255,.08); }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand__mark, .brand .custom-logo{ width:42px; height:42px; border-radius:0; }
.brand__logo{ height:44px; width:auto; max-width:240px; object-fit:contain; display:block; }
.brand{ min-width:0; }
.brand__name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42vw; }
.brand__name{ font-family:var(--fd); font-weight:600; font-size:17px; color:#fff; }
.primary-nav{ display:flex; align-items:center; gap:30px; }
.primary-nav__list{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
.primary-nav__list a{ font:500 15px var(--fb); color:rgba(255,255,255,.82); text-decoration:none; transition:color .2s; }
.primary-nav__list a:hover{ color:var(--amber); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ width:24px; height:2px; background:#fff; display:block; transition:transform .3s, opacity .3s; }

/* ---------------- hero ---------------- */
.hero{ position:relative; height:100vh; min-height:660px; overflow:hidden; background:var(--ink); }
.hero__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.hero__grad{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,15,15,.72) 0%, rgba(15,15,15,.06) 26%, rgba(15,15,15,.12) 50%, rgba(15,15,15,.96) 100%); }
.hero__inner{ position:absolute; left:0; right:0; bottom:58px; z-index:3; }
.hero__kicker{ font:600 13px var(--fb); letter-spacing:.22em; text-transform:uppercase; color:var(--amber); margin-bottom:20px; text-shadow:0 2px 12px rgba(0,0,0,.7); }
.hero__title{ font-family:var(--fd); font-weight:600; font-size:100px; line-height:.94; color:#fff; margin:0; max-width:16ch; letter-spacing:-.015em; text-wrap:balance; text-shadow:0 4px 30px rgba(0,0,0,.4); }
.hero__sub{ font:400 21px/1.5 var(--fb); color:rgba(255,255,255,.92); margin:26px 0 0; max-width:52ch; text-shadow:0 2px 14px rgba(0,0,0,.55); }
.hero__cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero__scroll{ position:absolute; left:50%; bottom:22px; z-index:3; transform:translateX(-50%); text-decoration:none; color:rgba(255,255,255,.72); font:600 12px var(--fb); letter-spacing:.18em; text-transform:uppercase; }
.hero__scroll span{ display:inline-block; animation:bob 2.4s ease-in-out infinite; }

/* ---------------- about ---------------- */
.about{ padding-top:120px; padding-bottom:0; }
.about__lead{ font-family:var(--fd); font-weight:500; font-size:46px; line-height:1.22; margin:0; max-width:24ch; letter-spacing:-.01em; text-wrap:balance; }
.about__lead-dim{ color:#EDE9E0; }
.about__lead-bright{ color:#fff; }
.about__split{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; margin-top:70px; }
.about__text p{ font:400 20px/1.62 var(--fb); color:var(--text); margin:0 0 20px; }
.about__text p:last-of-type{ margin-bottom:0; }
.hl{ color:var(--amber); font-style:normal; font-weight:600; }
.hl-strong{ color:#fff; font-weight:700; }
.tags{ display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; }
.tag{ font:500 14px var(--fb); color:#d8d3c8; border:1px solid var(--line); padding:9px 16px; border-radius:999px; }
.about__media{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; margin:0; }
.about__media img{ width:100%; height:100%; object-fit:cover; }
.about__media figcaption{ position:absolute; left:0; right:0; bottom:0; padding:30px 18px 14px; background:linear-gradient(transparent,rgba(15,15,15,.85)); font:500 14px var(--fb); color:#fff; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:84px; border-top:1px solid var(--line); padding-top:46px; }
.stat__n{ font-family:var(--fd); font-weight:600; font-size:54px; line-height:1; color:var(--amber); }
.stat__l{ font:500 15px var(--fb); color:var(--mute); margin-top:12px; }

/* ---------------- statement band ---------------- */
.statement{ background:var(--amber); padding:90px 0; margin-top:96px; }
.statement__h{ font-family:var(--fd); font-weight:600; font-size:68px; line-height:1.02; color:#1a1a1a; margin:0; max-width:18ch; letter-spacing:-.01em; }
.statement__h .stroke{ -webkit-text-stroke:2px #1a1a1a; color:transparent; }

/* ---------------- photographers ---------------- */
.photographers{ padding-top:110px; }
.feat{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:54px; align-items:start; }
.feat--archive{ margin-top:0; }
.p-card{ position:relative; display:block; border-radius:var(--radius); overflow:hidden; text-decoration:none; background:var(--smoke); }
.p-card img{ width:100%; height:auto; display:block; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.p-card:hover img{ transform:scale(1.06); }
.p-card__grad{ position:absolute; inset:0; background:linear-gradient(transparent 45%, rgba(15,15,15,.9)); }
.p-card__body{ position:absolute; left:16px; right:16px; bottom:16px; }
.p-card__name{ display:block; font-family:var(--fd); font-weight:600; font-size:21px; color:#fff; line-height:1.1; }
.p-card__meta{ display:block; font:500 14px var(--fb); color:var(--amber); margin-top:4px; }
.roster{ margin-top:44px; border-top:1px solid var(--line); padding-top:34px; }
.roster__label{ font:600 12px var(--fb); letter-spacing:.18em; text-transform:uppercase; color:var(--mute-2); margin-bottom:18px; }
.roster__chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{ font:500 15px var(--fb); color:#e7e2d7; border:1px solid var(--line); padding:9px 17px; border-radius:999px; }

/* ---------------- gallery ---------------- */
.gallery{ padding-top:110px; }
.gal-filters{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:24px; }
.filter{ font:600 14px var(--fb); padding:10px 18px; border-radius:999px; cursor:pointer; transition:all .25s; background:transparent; color:#cfcabf; border:1px solid var(--line-2); }
.filter:hover{ border-color:var(--amber); color:var(--amber); }
.filter.is-active{ background:var(--amber); color:var(--on-amber); border-color:var(--amber); }
.gal{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:230px; gap:14px; }
.gal__cell{ position:relative; overflow:hidden; border-radius:3px; border:none; padding:0; cursor:pointer; background:var(--smoke); display:block; }
.gal__cell--big{ grid-column:span 2; grid-row:span 2; }
.gal__cell img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.gal__cell:hover img{ transform:scale(1.05); }
.gal__cap{ position:absolute; left:14px; right:14px; bottom:12px; text-align:left; color:#fff; font:600 14px var(--fb); text-shadow:0 2px 12px rgba(0,0,0,.7); }
.gal__by{ position:absolute; left:14px; right:14px; bottom:-2px; text-align:left; color:var(--amber); font:600 12px var(--fb); text-shadow:0 2px 12px rgba(0,0,0,.8); padding-bottom:8px; }
.gal__cell{ padding-bottom:0; }
.gal__cell .gal__cap{ bottom:30px; }
.gal__cell::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:96px; background:linear-gradient(transparent, rgba(15,15,15,.82)); pointer-events:none; }
.gal__cell.is-hidden{ display:none; }

/* ---------------- zine ---------------- */
.zine{ padding-top:110px; padding-bottom:110px; }
.zine__card{ background:linear-gradient(180deg,#171717,#101010); border:1px solid var(--line); border-radius:6px; padding:56px; display:grid; grid-template-columns:.85fr 1.15fr; gap:54px; align-items:center; }
.zine__cover{ position:relative; }
.zine__cover-inner{ position:relative; aspect-ratio:3/4; border-radius:3px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.5); transform:rotate(-2deg); }
.zine__cover-inner img{ width:100%; height:100%; object-fit:cover; }
.zine__cover-grad{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,15,15,.25), rgba(15,15,15,.78)); }
.zine__cover-text{ position:absolute; left:20px; right:20px; bottom:22px; }
.zine__issue{ display:block; font:600 11px var(--fb); letter-spacing:.2em; text-transform:uppercase; color:var(--amber); }
.zine__cover-title{ display:block; font-family:var(--fd); font-weight:600; font-size:30px; line-height:1; color:#fff; margin-top:8px; }
.zine__badge{ position:absolute; top:-14px; right:-10px; transform:rotate(9deg); background:var(--amber); color:#1a1a1a; font-family:var(--fd); font-weight:600; font-size:14px; padding:10px 16px; border-radius:999px; }
.zine__title{ font-family:var(--fd); font-weight:600; font-size:46px; line-height:1.04; color:#fff; margin:0 0 18px; letter-spacing:-.01em; }
.zine__blurb{ font:400 19px/1.6 var(--fb); color:var(--text); margin:0 0 28px; max-width:48ch; }
.zine__slot{ border:2px dashed rgba(251,176,59,.55); border-radius:5px; padding:26px; display:flex; align-items:center; gap:18px; background:rgba(251,176,59,.05); }
.zine__slot-icon{ flex-shrink:0; width:52px; height:52px; border-radius:50%; background:rgba(251,176,59,.16); display:flex; align-items:center; justify-content:center; font-size:24px; }
.zine__slot-title{ font:600 16px var(--fb); color:#fff; }
.zine__slot-sub{ font:400 14px/1.5 var(--fb); color:var(--mute); margin-top:3px; }
.zine__actions{ display:flex; gap:12px; margin-top:24px; align-items:center; flex-wrap:wrap; }
.zine__inactive{ font:500 13px var(--fb); color:var(--mute-2); }

/* ---------------- support ---------------- */
.support{ background:var(--amber); padding:96px 0; }
.support__grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:center; }
.support__h{ font-family:var(--fd); font-weight:600; font-size:56px; line-height:1; color:#1a1a1a; margin:0; max-width:16ch; letter-spacing:-.01em; }
.support__actions{ display:flex; flex-direction:column; gap:14px; }
.support__actions .btn{ justify-content:center; font-size:17px; padding:19px 28px; }

/* ---------------- footer ---------------- */
.site-footer{ background:#0B0B0B; padding:64px 0 40px; }
.site-footer__top{ display:flex; justify-content:space-between; gap:36px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:38px; }
.site-footer__brand{ max-width:34ch; }
.site-footer__brand img{ width:230px; max-width:80%; height:auto; margin-bottom:18px; }
.site-footer__brand p{ font:400 15px/1.6 var(--fb); color:var(--mute); margin:0; }
.site-footer__cols{ display:flex; gap:64px; flex-wrap:wrap; }
.site-footer__label{ font:600 12px var(--fb); letter-spacing:.16em; text-transform:uppercase; color:var(--mute-2); margin-bottom:14px; }
.site-footer__col{ display:flex; flex-direction:column; gap:10px; }
.site-footer__col a, .site-footer__col span{ font:500 15px var(--fb); color:rgba(255,255,255,.78); text-decoration:none; }
.site-footer__col a:hover{ color:var(--amber); }
.site-footer__base{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px; }
.site-footer__base span{ font:400 13px var(--fb); color:#6a6a6a; }

/* ---------------- back-to-top ---------------- */
.to-top{ position:fixed; right:24px; bottom:24px; z-index:40; width:48px; height:48px; border-radius:50%; border:none; background:var(--amber); color:var(--on-amber); font-size:20px; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; transform:translateY(10px); }
.to-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* ---------------- lightbox ---------------- */
.lightbox{ position:fixed; inset:0; z-index:100; background:rgba(8,8,8,.94); display:flex; align-items:center; justify-content:center; padding:40px; }
.lightbox[hidden]{ display:none; }
.lightbox__figure{ max-width:1100px; max-height:84vh; margin:0; display:flex; flex-direction:column; align-items:center; gap:16px; }
.lightbox__img{ max-width:100%; max-height:74vh; object-fit:contain; border-radius:3px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox__cap{ font:500 15px var(--fb); color:rgba(255,255,255,.78); text-align:center; }
.lightbox__close{ position:absolute; top:24px; right:28px; width:48px; height:48px; border-radius:50%; border:none; background:rgba(255,255,255,.12); color:#fff; font-size:24px; cursor:pointer; line-height:1; }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; border:none; background:rgba(255,255,255,.12); color:#fff; font-size:26px; cursor:pointer; }
.lightbox__nav--prev{ left:28px; }
.lightbox__nav--next{ right:28px; }
.lightbox__close:hover, .lightbox__nav:hover{ background:var(--amber); color:var(--on-amber); }

/* ---------------- generic pages ---------------- */
.page-main{ padding-top:140px; padding-bottom:90px; min-height:60vh; }
.page-hero{ margin-bottom:40px; }
.page-hero__title{ font-family:var(--fd); font-weight:600; font-size:60px; line-height:1.02; color:var(--text-strong); margin:0; letter-spacing:-.01em; }
.page-hero__desc{ color:var(--mute); margin-top:14px; max-width:60ch; }
.prose{ max-width:70ch; font-size:19px; line-height:1.7; color:var(--text); }
.prose a{ color:var(--amber); }
.prose h2, .prose h3{ font-family:var(--fd); color:var(--text-strong); }
.post-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.post-card{ background:var(--smoke); border-radius:var(--radius); overflow:hidden; }
.post-card__thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.post-card__body{ padding:22px; }
.post-card__title{ font-family:var(--fd); font-size:24px; margin:0 0 8px; }
.post-card__title a{ color:var(--text-strong); text-decoration:none; }
.post-card__meta{ font-size:13px; color:var(--mute-2); margin-bottom:10px; }
.pagination{ margin-top:48px; }
.pagination .page-numbers{ display:inline-block; padding:10px 16px; border:1px solid var(--line-2); border-radius:8px; margin-right:8px; text-decoration:none; color:var(--text); }
.pagination .page-numbers.current{ background:var(--amber); color:var(--on-amber); border-color:var(--amber); }
.pagination .page-numbers:hover{ border-color:var(--amber); color:var(--amber); }
.empty{ color:var(--mute); font-size:19px; }

.photographer-single{ padding:140px 0 90px; }
.photographer-single__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start; }
.photographer-single__media{ margin:0; border-radius:var(--radius); overflow:hidden; }
.photographer-single__media img{ width:100%; height:auto; display:block; }
.photographer-single__name{ font-family:var(--fd); font-weight:600; font-size:52px; line-height:1; color:var(--text-strong); margin:0 0 10px; }
.photographer-single__meta{ font:500 16px var(--fb); color:var(--amber); margin-bottom:20px; }
.photographer-single__body .btn{ margin-top:24px; }

/* ---------------- search ---------------- */
.search-form{ display:flex; gap:8px; max-width:420px; }
.search-form__field{ flex:1; background:var(--smoke); border:1px solid var(--line-2); color:var(--text); border-radius:999px; padding:12px 18px; font-family:var(--fb); }
.search-form__submit{ background:var(--amber); color:var(--on-amber); border:none; border-radius:999px; padding:12px 22px; font-weight:600; cursor:pointer; }

/* ---------------- 404 ---------------- */
.error404__inner{ text-align:center; padding:60px 0; }
.error404__code{ font-family:var(--fd); font-weight:700; font-size:120px; color:var(--amber); line-height:1; }
.error404__title{ font-family:var(--fd); font-size:44px; color:var(--text-strong); margin:10px 0 14px; }
.error404__text{ color:var(--mute); max-width:46ch; margin:0 auto 26px; }
.error404__search{ display:flex; justify-content:center; margin-top:30px; }

/* ---------------- responsive ---------------- */
@media (max-width:1024px){
	.hero__title{ font-size:78px; }
	.sec-title, .support__h, .statement__h, .zine__title{ font-size:44px; }
	.about__lead{ font-size:38px; }
}
@media (max-width:860px){
	.wrap{ padding-inline:22px; }
	.site-header{ padding:14px 22px; }
	.site-header.is-scrolled{ padding:10px 22px; }
	.primary-nav{ position:fixed; inset:0; width:100%; height:100vh; height:100dvh; background:var(--ink); flex-direction:column; align-items:center; justify-content:center; gap:26px; padding:96px 24px 40px; transform:translateX(100%); transition:transform .3s ease; overflow-y:auto; z-index:55; }
	.primary-nav.is-open{ transform:translateX(0); }
	.primary-nav__list{ flex-direction:column; align-items:center; gap:24px; }
	.primary-nav__list a{ font-family:var(--fd); font-size:26px; color:var(--text-strong); }
	.nav-toggle{ display:flex; position:relative; z-index:80; }
	.hero{ height:88vh; }
	.hero__title{ font-size:52px; }
	.hero__sub{ font-size:18px; }
	.about{ padding-top:80px; }
	.about__split{ grid-template-columns:1fr; gap:30px; }
	.about__lead{ font-size:32px; }
	.stats{ grid-template-columns:repeat(2,1fr); gap:30px 20px; }
	.statement{ padding:64px 0; margin-top:70px; }
	.statement__h{ font-size:38px; }
	.feat{ grid-template-columns:1fr 1fr; }
	.gal{ grid-template-columns:1fr 1fr; grid-auto-rows:160px; }
	.zine__card{ grid-template-columns:1fr; gap:36px; padding:30px; }
	.support__grid{ grid-template-columns:1fr; gap:28px; }
	.support__h{ font-size:38px; }
	.post-list{ grid-template-columns:1fr; }
	.photographer-single__grid{ grid-template-columns:1fr; gap:28px; }
	.lightbox__nav--prev{ left:12px; }
	.lightbox__nav--next{ right:12px; }
	.page-hero__title{ font-size:42px; }
}
@media (max-width:520px){
	.hero__title{ font-size:42px; }
	.feat{ grid-template-columns:1fr; }
	.gal{ grid-template-columns:1fr; grid-auto-rows:220px; }
	.gal__cell--big{ grid-column:span 1; grid-row:span 1; }
}
/* ---------------- contact page ---------------- */
.contact__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; }
.contact__lead{ font:400 20px/1.6 var(--fb); color:var(--text); max-width:46ch; margin:0 0 30px; }
.contact__rows{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.contact__row{ display:flex; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.contact__k{ width:120px; flex-shrink:0; font:600 12px var(--fb); letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.contact__v{ font:500 17px var(--fb); color:var(--text-strong); text-decoration:none; }
a.contact__v:hover{ color:var(--amber); }
.contact__panel{ background:var(--smoke); border:1px solid var(--line); border-radius:var(--radius); padding:36px; }
.contact__cta-h{ font-family:var(--fd); font-size:28px; color:var(--text-strong); margin:0 0 10px; }
.contact__cta-p{ color:var(--text); margin:0 0 22px; }
.contact__hint{ font-size:13px; color:var(--mute-2); margin-top:18px; }

/* ---------------- retina crispness ---------------- */
/* Uploaded content images get WP srcset automatically; bundled demo images are
   ~1400–1800px so they stay crisp on 2x/3x displays. */

/* ---------------- mobile: brand fit + contact ---------------- */
@media (max-width:860px){
	.brand{ max-width:calc(100% - 64px); gap:10px; }
	.brand__logo{ height:34px; max-width:160px; }
	.brand__mark{ width:36px; height:36px; }
	.brand__name{ font-size:15px; max-width:46vw; }
	.contact__grid{ grid-template-columns:1fr; gap:30px; }
	.contact__panel{ padding:26px; }
}
@media (max-width:420px){
	.brand__name{ font-size:13.5px; max-width:40vw; }
	.brand__logo{ height:30px; max-width:130px; }
	.brand__mark{ width:32px; height:32px; }
	.contact__k{ width:96px; }
}

@media (prefers-reduced-motion:reduce){
	*{ animation:none !important; scroll-behavior:auto !important; }
	.reveal{ opacity:1 !important; }
}

/* lock scroll behind the open mobile menu */
body.nav-open{ overflow:hidden; }

/* retina: keep bitmap photos crisp on high-DPI screens */
img{ image-rendering:auto; }
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi){
	.brand__mark, .brand .custom-logo img, .site-footer__brand img{ image-rendering:-webkit-optimize-contrast; }
}

/* hand-drawn inline icons */
.tiwwf-ico{ display:inline-block; vertical-align:middle; }

/* ===================================================================
   v2.1 — final pass: logo protection, tight photographer layout,
   gallery credit-only tiles, menu style templates, perf polish.
   =================================================================== */

/* logos cannot be dragged/selected/right-click-saved */
.tiwwf-protect, .brand img, .site-footer__brand img{
	-webkit-user-select:none; user-select:none;
	-webkit-user-drag:none; user-drag:none;
	pointer-events:none;
}
.brand{ pointer-events:auto; } /* the link still clicks; the image itself doesn't */

/* photographer profile — use the whole canvas, little left margin */
.wrap--wide{ max-width:1560px; padding-inline:24px; }
.photographer-single{ padding:112px 0 72px; }
.photographer-single__grid{ grid-template-columns:minmax(320px,44%) 1fr; gap:56px; align-items:start; }
.photographer-single__media{ margin:0; border-radius:var(--radius); overflow:hidden; background:var(--smoke); }
.photographer-single__media img{ width:100%; height:auto; display:block; }
.photographer-single__name{ font-size:64px; }
.bio-favs{ max-width:1560px; padding-inline:24px; }
.bio-favs__grid .gal__cell img{ width:100%; height:auto; display:block; }
.bio-favs__grid .gal__cell{ aspect-ratio:auto; }

/* gallery — credit visible; caption appears in the lightbox on click */
.gal__by{ bottom:10px; padding-bottom:0; }
.gal__cell::after{ height:72px; }

/* menu style templates (TIWWF Core → Design → Menu style) */
.menu-centered .site-header{ flex-direction:column; gap:10px; padding-top:14px; }
.menu-centered .primary-nav__list{ gap:26px; }
.menu-pill .primary-nav{ background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:999px; padding:6px 10px 6px 22px; }
@media (max-width:860px){
	.menu-centered .site-header{ flex-direction:row; }
	.menu-pill .primary-nav{ border-radius:0; border:none; padding:96px 24px 40px; background:var(--ink); }
}

/* perf: contain layout work on big grids */
.gal, .feat, .stories-grid{ content-visibility:auto; contain-intrinsic-size: 800px; }

/* contact form builder: subject select + phone */
.cfield--select .cfield__toplabel{ display:block; font:600 13px var(--fb); color:var(--mute); margin-bottom:8px; }
.cfield__input--select{ padding:14px 16px; appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--amber) 50%), linear-gradient(135deg, var(--amber) 50%, transparent 50%); background-position:calc(100% - 21px) 50%, calc(100% - 16px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
.cfield__input--select option{ background:var(--smoke); color:var(--text-strong); }
.way-card__ic{ display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; color:var(--amber); }
.way-card__ic .tiwwf-ico{ width:30px; height:30px; }
.bio-audio__ic, .audio-menu__ic{ display:inline-flex; align-items:center; color:var(--amber); }

/* ===================================================================
   v1.8 additions — supporters, stories, infographics, get involved,
   about journey, lively contact form.
   =================================================================== */

/* ---- supporters / funders strip ---- */
.supporters{ padding-top:30px; padding-bottom:10px; text-align:center; }
.supporters__label{ font:600 12px var(--fb); letter-spacing:.2em; text-transform:uppercase; color:var(--mute-2); margin-bottom:22px; }
.supporters__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px 40px; }
.supporters__item{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; opacity:.82; transition:opacity .2s, transform .2s; }
.supporters__item:hover{ opacity:1; transform:translateY(-2px); }
.supporters__item img{ height:46px; width:auto; max-width:180px; object-fit:contain; filter:grayscale(1) brightness(1.7); transition:filter .25s; }
.supporters__item:hover img{ filter:grayscale(0) brightness(1); }
.supporters__name{ font-family:var(--fd); font-weight:600; font-size:20px; color:#cfcabf; }
a.supporters__item:hover .supporters__name{ color:var(--amber); }

/* ---- stories ---- */
.home-stories{ padding-top:110px; }
.stories-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:18px; }
.story-card{ display:flex; flex-direction:column; background:var(--smoke); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; transition:transform .3s, border-color .3s; }
.story-card:hover{ transform:translateY(-4px); border-color:rgba(251,176,59,.5); }
.story-card__media{ display:block; aspect-ratio:3/2; overflow:hidden; }
.story-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.story-card:hover .story-card__media img{ transform:scale(1.05); }
.story-card__body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:8px; }
.story-card__by{ font:600 12px var(--fb); letter-spacing:.12em; text-transform:uppercase; color:var(--amber); }
.story-card__title{ font-family:var(--fd); font-weight:600; font-size:23px; line-height:1.12; color:var(--text-strong); }
.story-card__sum{ font:400 15px/1.6 var(--fb); color:var(--mute); }
.story-card__more{ margin-top:6px; font:600 14px var(--fb); color:var(--text-strong); }
.story-card:hover .story-card__more{ color:var(--amber); }

/* ---- single story ---- */
.story-single__hero{ position:relative; height:62vh; min-height:420px; overflow:hidden; background:var(--ink); }
.story-single__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.story-single__grad{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,15,15,.5) 0%, rgba(15,15,15,.1) 40%, rgba(15,15,15,.92) 100%); }
.story-single__head{ position:absolute; left:0; right:0; bottom:40px; }
.story-single__title{ font-family:var(--fd); font-weight:600; font-size:60px; line-height:1; color:#fff; margin:6px 0 10px; letter-spacing:-.01em; }
.story-single__by{ font:600 14px var(--fb); color:var(--amber); }
.story-single__body{ padding-top:48px; padding-bottom:80px; }
.story-single__stand{ font-family:var(--fd); font-weight:500; font-size:26px; line-height:1.4; color:var(--text-strong); max-width:30ch; margin:0 0 30px; }

/* ---- infographics: stats + bars ---- */
.info-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px; border-top:1px solid var(--line); padding-top:46px; }
.info-stat__n{ font-family:var(--fd); font-weight:600; font-size:58px; line-height:1; color:var(--amber); }
.info-stat__l{ font:500 15px/1.4 var(--fb); color:var(--mute); margin-top:12px; }
.info-bars{ display:grid; grid-template-columns:1fr 1fr; gap:26px 48px; margin-top:40px; }
.info-bar__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; font-family:var(--fb); }
.info-bar__head span:first-child{ font-weight:600; font-size:17px; color:var(--text-strong); }
.info-bar__pct{ font-family:var(--fd); font-weight:600; font-size:18px; color:var(--amber); }
.info-bar__track{ height:12px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; }
.info-bar__fill{ display:block; height:100%; width:0; border-radius:999px; background:var(--amber); transition:width 1.1s cubic-bezier(.2,.7,.2,1); }
.info-bar.in .info-bar__fill{ width:var(--w); }

/* ---- get involved ---- */
.getinvolved{ padding-top:0; }
.gi-hero{ position:relative; min-height:74vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); }
.gi-hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.gi-hero__grad{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,15,15,.66) 0%, rgba(15,15,15,.1) 30%, rgba(15,15,15,.12) 50%, rgba(15,15,15,.96) 100%); }
.gi-hero__inner{ position:relative; z-index:2; padding-bottom:60px; padding-top:140px; }
.gi-hero__title{ font-family:var(--fd); font-weight:600; font-size:80px; line-height:.96; color:#fff; margin:0; max-width:16ch; letter-spacing:-.015em; text-wrap:balance; text-shadow:0 4px 30px rgba(0,0,0,.4); }
.gi-hero__sub{ font:400 21px/1.5 var(--fb); color:rgba(255,255,255,.9); margin:24px 0 0; max-width:54ch; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.gi-hero__cta{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.gi-impact{ padding-top:96px; }
.gi-alloc{ padding-top:96px; }
.gi-alloc__head{ max-width:60ch; }
.gi-tiers{ padding-top:96px; }
.tier-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px; }
.tier-card{ position:relative; display:flex; flex-direction:column; gap:10px; background:var(--smoke); border:1px solid var(--line); border-radius:10px; padding:30px 24px; }
.tier-card--feat{ background:#1a1712; border-color:rgba(251,176,59,.6); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.tier-card__flag{ position:absolute; top:-12px; left:24px; background:var(--amber); color:var(--on-amber); font:600 12px var(--fb); padding:5px 12px; border-radius:999px; }
.tier-card__name{ font:600 13px var(--fb); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.tier-card__amt{ font-family:var(--fd); font-weight:600; font-size:40px; line-height:1; color:var(--text-strong); }
.tier-card__desc{ font:400 15px/1.55 var(--fb); color:var(--mute); flex:1; }
.tier-card .btn{ justify-content:center; margin-top:8px; }
.gi-ways{ padding-top:96px; }
.ways-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:30px; }
.way-card{ display:flex; flex-direction:column; gap:8px; background:var(--smoke); border:1px solid var(--line); border-radius:10px; padding:26px 22px; }
.way-card__ic{ font-size:30px; }
.way-card strong{ font-family:var(--fd); font-weight:600; font-size:19px; color:var(--text-strong); }
.way-card span:last-child{ font:400 14px/1.55 var(--fb); color:var(--mute); }
.gi-cta{ background:var(--amber); margin-top:96px; padding:88px 0; }
.gi-cta__inner{ text-align:center; }
.gi-cta__h{ font-family:var(--fd); font-weight:600; font-size:54px; line-height:1.02; color:#1a1a1a; margin:0 auto; max-width:18ch; letter-spacing:-.01em; }
.gi-cta__t{ font:400 19px/1.6 var(--fb); color:rgba(26,26,26,.82); margin:18px auto 28px; max-width:54ch; }
.gi-cta__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---- about journey ---- */
.about-info{ padding-top:96px; }
.journey{ list-style:none; margin:34px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:none; }
.journey__step{ position:relative; background:var(--smoke); border:1px solid var(--line); border-radius:10px; padding:26px 22px; display:flex; flex-direction:column; gap:8px; }
.journey__num{ font-family:var(--fd); font-weight:700; font-size:30px; color:var(--amber); line-height:1; }
.journey__t{ font-family:var(--fd); font-weight:600; font-size:22px; color:var(--text-strong); }
.journey__d{ font:400 15px/1.55 var(--fb); color:var(--mute); }

/* ---- lively contact form ---- */
.contact__note{ border-radius:8px; padding:14px 18px; font:500 15px var(--fb); margin-bottom:20px; }
.contact__note--ok{ background:rgba(251,176,59,.14); border:1px solid rgba(251,176,59,.5); color:#f5e6c8; }
.contact__note--err{ background:rgba(214,54,56,.12); border:1px solid rgba(214,54,56,.5); color:#f3c3c3; }
.cform{ display:flex; flex-direction:column; gap:18px; margin-top:8px; }
.cform__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cform__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cfield{ position:relative; }
.cfield__input{ width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:8px; color:var(--text-strong); font:400 16px var(--fb); padding:20px 16px 8px; transition:border-color .2s, background .2s; }
.cfield__input--area{ resize:vertical; min-height:130px; padding-top:24px; }
.cfield__input:focus{ outline:none; border-color:var(--amber); background:rgba(255,255,255,.06); }
.cfield__label{ position:absolute; left:16px; top:15px; font:400 16px var(--fb); color:var(--mute); pointer-events:none; transition:transform .18s ease, color .18s ease, font-size .18s ease; transform-origin:left top; }
.cfield__input:focus + .cfield__label,
.cfield__input:not(:placeholder-shown) + .cfield__label{ transform:translateY(-9px) scale(.74); color:var(--amber); }
.cform__submit{ align-self:flex-start; }

/* ---- responsive for v1.8 ---- */
@media (max-width:860px){
	.supporters__row{ gap:16px 26px; }
	.supporters__item img{ height:36px; }
	.stories-grid{ grid-template-columns:1fr; }
	.info-stats{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
	.info-bars{ grid-template-columns:1fr; }
	.gi-hero__title{ font-size:48px; }
	.gi-hero__sub{ font-size:18px; }
	.tier-grid{ grid-template-columns:1fr 1fr; }
	.ways-grid{ grid-template-columns:1fr 1fr; }
	.journey{ grid-template-columns:1fr; }
	.gi-cta__h{ font-size:38px; }
	.cform__row{ grid-template-columns:1fr; }
	.story-single__title{ font-size:40px; }
}
@media (max-width:520px){
	.info-stats{ grid-template-columns:1fr 1fr; }
	.tier-grid{ grid-template-columns:1fr; }
	.ways-grid{ grid-template-columns:1fr; }
}

/* ===================================================================
   v1.9 — slogan, bio profile, audio menu, problem/solution, theory of
   change, background templates, homepage/contact/bio style variants.
   =================================================================== */

/* slogan band */
.slogan{ background:var(--amber); padding:64px 0; margin-top:20px; }
.slogan__h{ font-family:var(--fd); font-weight:700; font-size:clamp(30px,4.6vw,64px); line-height:1.02; letter-spacing:-.01em; color:#1a1a1a; margin:0; text-transform:uppercase; text-wrap:balance; }

/* supporters — single strip already styled; add spacing when standalone */
.supporters{ margin-top:10px; }

/* zine coming-soon (front-end instructions removed) */
.zine__soon{ display:inline-flex; align-items:center; font:600 14px var(--fb); letter-spacing:.12em; text-transform:uppercase; color:var(--amber); border:1px solid var(--line-2); padding:12px 20px; border-radius:999px; }

/* photographer bio: quote, audio, favourites */
.bio-quote{ margin:22px 0 6px; padding:0 0 0 18px; border-left:3px solid var(--amber); font-family:var(--fd); font-weight:500; font-size:24px; line-height:1.32; color:var(--text-strong); }
.bio-audio{ margin-top:26px; background:var(--smoke); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.bio-audio__label{ display:flex; align-items:center; gap:8px; font:600 14px var(--fb); color:var(--text-strong); margin-bottom:10px; }
.bio-audio__ic{ font-size:18px; }
.bio-audio audio, .audio-note audio{ width:100%; height:38px; }
.bio-favs{ padding-top:80px; padding-bottom:20px; }
.bio-favs__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px; }
.bio-favs__grid .gal__cell{ aspect-ratio:4/5; }
.bio--editorial .photographer-single__grid{ grid-template-columns:1fr; }
.bio--editorial .photographer-single__media img{ width:100%; height:auto; display:block; }

/* audio footer menu */
.audio-menu{ border-top:1px solid var(--line); margin-top:14px; padding:30px 0 8px; }
.audio-menu__label{ display:flex; align-items:center; gap:8px; font:600 12px var(--fb); letter-spacing:.16em; text-transform:uppercase; color:var(--mute-2); margin-bottom:18px; }
.audio-menu__ic{ font-size:16px; }
.audio-menu__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.audio-note{ background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.audio-note__name{ display:block; font-family:var(--fd); font-weight:600; font-size:17px; color:var(--text-strong); text-decoration:none; }
.audio-note__name:hover{ color:var(--amber); }
.audio-note__title{ display:block; font:400 13px var(--fb); color:var(--mute); margin:2px 0 8px; }

/* about — problem / solution */
.about-ps{ padding-top:80px; }
.ps-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ps-card{ background:var(--smoke); border:1px solid var(--line); border-radius:14px; padding:34px 30px; }
.ps-card--amber{ background:var(--amber); border-color:var(--amber); }
.ps-card__k{ font:600 12px var(--fb); letter-spacing:.18em; text-transform:uppercase; color:var(--amber); margin-bottom:14px; }
.ps-card--amber .ps-card__k{ color:#1a1a1a; opacity:.7; }
.ps-card__t{ font-family:var(--fd); font-weight:500; font-size:24px; line-height:1.34; color:var(--text-strong); margin:0; }
.ps-card--amber .ps-card__t{ color:#1a1a1a; }

/* about — theory of change chain */
.about-toc{ padding-top:80px; }
.toc-chain{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.toc-chain__step{ position:relative; display:flex; gap:14px; align-items:flex-start; background:var(--smoke); border:1px solid var(--line); border-radius:12px; padding:22px 20px; }
.toc-chain__n{ flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--amber); color:#1a1a1a; font-family:var(--fd); font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center; }
.toc-chain__t{ font:500 16px/1.45 var(--fb); color:var(--text-strong); }
.about-toc__full{ font:400 19px/1.7 var(--fb); color:var(--mute); max-width:70ch; margin:30px 0 0; }

/* homepage style variants */
.home-editorial .hero{ height:auto; min-height:0; padding:180px 0 90px; }
.home-editorial .hero__media, .home-editorial .hero__scroll{ display:none; }
.home-editorial .hero{ background:var(--ink); }
.home-editorial .hero__inner{ position:static; }
.home-editorial .hero__title{ text-shadow:none; }
.home-editorial .hero__sub{ text-shadow:none; color:var(--text); }
.home-minimal .hero{ height:72vh; min-height:520px; }

/* contact style variant: centered */
.contactstyle-centered .contact__grid{ grid-template-columns:1fr; max-width:720px; margin-inline:auto; text-align:center; }
.contactstyle-centered .cform__submit{ align-self:center; }
.contactstyle-centered .cfield__label{ text-align:left; }

/* paper background template: darken chrome that assumed a dark ground */
.bg-paper .site-header.is-scrolled{ background:rgba(255,255,255,.92); box-shadow:0 1px 0 rgba(0,0,0,.08); }
.bg-paper .brand__name, .bg-paper .primary-nav__list a{ color:#1a1a1a; }
.bg-paper .hero__title, .bg-paper .hero__sub, .bg-paper .hero__kicker{ color:#fff; }
.bg-paper .supporters__item img{ filter:none; }

@media (max-width:860px){
	.bio-favs__grid{ grid-template-columns:1fr 1fr; }
	.audio-menu__list{ grid-template-columns:1fr; }
	.ps-grid{ grid-template-columns:1fr; }
	.toc-chain{ grid-template-columns:1fr; }
	.slogan{ padding:44px 0; }
}