/*
Theme Name: A Place of One's Own
Theme URI: https://aplaceofonesown.com
Author: Here Now Film
Description: Custom theme for the documentary A Place of One's Own. Golden haze and deep shadow palette drawn from the film's grade, wide-tracked light capitals from the in-film location cards, and the red dashed journey line from the animated map sequences.
Version: 1.0
Requires PHP: 7.4
License: Proprietary
Text Domain: apo
*/

:root{
  --ink:#241c14;
  --shadow:#1a130c;
  --haze:#f2ead9;
  --haze-deep:#e9dfc9;
  --bone:#faf6ec;
  --dash-red:#b5342a;
  --sari-green:#5d7a3d;
  --gold:#c99a4b;
  --track:0.32em;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Source Serif 4', Georgia, serif;
  background:var(--haze);
  color:var(--ink);
  line-height:1.65;
  font-size:17px;
}
h1,h2,h3,.caps{
  font-family:'Archivo', sans-serif;
  font-weight:200;
  text-transform:uppercase;
  letter-spacing:var(--track);
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 5vw;
  transition:background .4s ease, box-shadow .4s ease, padding .4s ease;
}
.nav.scrolled,.nav.solid{background:rgba(26,19,12,.94);box-shadow:0 1px 0 rgba(250,246,236,.08);padding:14px 5vw}
.nav .brand{
  font-family:'Archivo',sans-serif;font-weight:300;text-transform:uppercase;
  letter-spacing:.28em;font-size:.72rem;color:var(--bone);text-decoration:none;white-space:nowrap;
}
.nav ul{display:flex;gap:2.2em;list-style:none}
.nav ul a{
  font-family:'Archivo',sans-serif;font-weight:300;text-transform:uppercase;
  letter-spacing:.2em;font-size:.62rem;color:var(--bone);text-decoration:none;
  opacity:.75;transition:opacity .25s;padding-bottom:4px;border-bottom:1px solid transparent;
}
.nav ul a:hover,.nav ul a:focus-visible,.nav ul .current-menu-item > a{opacity:1;border-bottom-color:var(--dash-red)}
@media(max-width:760px){
  .nav ul{gap:1.1em}
  .nav ul a{font-size:.55rem;letter-spacing:.14em}
  .nav ul li:nth-child(n+4){display:none}
}

/* ---------- hero ---------- */
.hero{
  position:relative;height:100svh;min-height:620px;
  background:var(--shadow);overflow:hidden;
}
.hero .hero-img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:.92}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(26,19,12,.35) 0%, rgba(26,19,12,0) 34%, rgba(26,19,12,.12) 62%, rgba(26,19,12,.82) 100%);
}
.hero-inner{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  padding:0 6vw 11vh;text-align:center;color:var(--bone);
}
.hero-cards{
  position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);z-index:2;
  display:flex;justify-content:space-between;padding:0 7vw;
  font-family:'Archivo',sans-serif;font-weight:200;text-transform:uppercase;
  letter-spacing:.5em;font-size:.72rem;color:rgba(250,246,236,.85);
  pointer-events:none;
}
.hero h1{
  font-size:clamp(1.7rem, 5.2vw, 4.3rem);
  color:var(--bone);
  line-height:1.28;
  margin-bottom:26px;
  text-wrap:balance;
}
.hero .logline{
  font-style:italic;font-size:clamp(.98rem, 1.5vw, 1.2rem);
  max-width:620px;color:rgba(250,246,236,.88);line-height:1.7;
}
.hero .eyebrow{
  font-family:'Archivo',sans-serif;font-weight:300;text-transform:uppercase;
  letter-spacing:.42em;font-size:.66rem;color:rgba(250,246,236,.7);margin-bottom:22px;
}
.scrollcue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  width:1px;height:44px;background:linear-gradient(to bottom, transparent, var(--bone));
  opacity:.6;animation:cue 2.4s ease-in-out infinite;
}
@keyframes cue{0%,100%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(.55);transform-origin:top}}

/* ---------- generic section ---------- */
.apo-section{padding:110px 6vw}
.wrap{max-width:1080px;margin:0 auto}
.kicker{
  font-family:'Archivo',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.34em;font-size:.66rem;color:var(--dash-red);
  display:block;margin-bottom:26px;
}
.dark .kicker{color:#d4685f}
h2{font-size:clamp(1.25rem,2.6vw,1.9rem);margin-bottom:34px;line-height:1.4}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .scrollcue{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- trailer ---------- */
.trailer{background:var(--shadow);color:var(--bone)}
.trailer .frame{
  position:relative;aspect-ratio:16/9;max-width:960px;margin:0 auto;
  border:1px dashed rgba(181,52,42,.85);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;
  background:radial-gradient(ellipse at center, rgba(201,154,75,.08), transparent 70%);
}
.trailer .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{
  width:74px;height:74px;border-radius:50%;
  border:1px solid rgba(250,246,236,.55);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .3s, transform .3s;cursor:pointer;background:none;
}
.play:hover{border-color:var(--dash-red);transform:scale(1.05)}
.play svg{width:20px;height:20px;fill:var(--bone);margin-left:4px}
.trailer .frame .caps{font-size:.66rem;letter-spacing:.38em;opacity:.7}
.trailer .note{
  text-align:center;margin-top:26px;font-style:italic;
  color:rgba(250,246,236,.55);font-size:.92rem;
}

/* ---------- about / journey ---------- */
.about{
  background:
    linear-gradient(rgba(242,234,217,.93), rgba(242,234,217,.93)),
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(36,28,20,.16) 27px, rgba(36,28,20,.16) 28px),
    repeating-linear-gradient(90deg, transparent, transparent 27px, rgba(36,28,20,.16) 27px, rgba(36,28,20,.16) 28px);
  background-color:var(--haze);
}
.about .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media(max-width:820px){.about .grid{grid-template-columns:1fr;gap:36px}}
.about .statement{
  font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.55;font-weight:600;
}
.about .statement em{color:var(--dash-red);font-style:italic}
.about .body p{margin-bottom:1.2em}
.facts{
  display:flex;gap:0;justify-content:center;flex-wrap:wrap;
  margin-top:84px;border-top:1px solid rgba(36,28,20,.18);border-bottom:1px solid rgba(36,28,20,.18);
}
.facts > div{
  flex:1;min-width:180px;text-align:center;padding:30px 18px;
  border-right:1px solid rgba(36,28,20,.18);
}
.facts > div:last-child{border-right:none}
.facts .num{font-family:'Archivo',sans-serif;font-weight:200;font-size:2.1rem;letter-spacing:.08em}
.facts .lab{font-family:'Archivo',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.26em;font-size:.6rem;margin-top:8px;color:rgba(36,28,20,.6)}

/* journey line */
.journey{margin-top:90px;text-align:center}
.journey .route{
  display:flex;justify-content:space-between;align-items:center;
  max-width:900px;margin:0 auto;flex-wrap:wrap;gap:14px 0;position:relative;
}
.journey .stop{
  font-family:'Archivo',sans-serif;font-weight:300;text-transform:uppercase;
  letter-spacing:.24em;font-size:.68rem;padding:0 6px;background:var(--haze);position:relative;z-index:2;
}
.journey .lineheader{margin-bottom:34px;font-size:.62rem;letter-spacing:.4em;color:rgba(36,28,20,.55)}
.dashline{
  position:absolute;left:0;right:0;top:50%;height:2px;z-index:1;
  background-image:linear-gradient(90deg, var(--dash-red) 55%, transparent 45%);
  background-size:14px 2px;background-repeat:repeat-x;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 2.2s ease;
}
.dashline.drawn{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.dashline{clip-path:inset(0 0 0 0);transition:none}}
@media(max-width:700px){
  .journey .route{flex-direction:column;gap:16px}
  .dashline{display:none}
}

/* ---------- quote break ---------- */
.break{
  position:relative;padding:0;height:76vh;min-height:480px;overflow:hidden;background:var(--shadow);
}
.break .break-img{width:100%;height:100%;object-fit:cover;opacity:.85}
.break .overlay{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  background:linear-gradient(to top, rgba(26,19,12,.78), rgba(26,19,12,.05) 55%);
}
.break blockquote{
  color:var(--bone);max-width:720px;padding:0 7vw 64px;
  font-style:italic;font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.6;border:none;
}
.break cite{
  display:block;margin-top:16px;font-style:normal;
  font-family:'Archivo',sans-serif;font-weight:300;text-transform:uppercase;
  letter-spacing:.3em;font-size:.62rem;color:rgba(250,246,236,.65);
}

/* ---------- people ---------- */
.people{background:var(--shadow);color:var(--bone)}
.people h2{color:var(--bone)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:14px}
@media(max-width:1000px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pgrid{grid-template-columns:1fr}}
.person{position:relative}
.person .ph{
  aspect-ratio:3/4;overflow:hidden;background:#2c2318;position:relative;
}
.person .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease, filter .8s ease;filter:saturate(.92)}
.person:hover .ph img{transform:scale(1.04);filter:saturate(1.05)}
.person .ph.empty{display:flex;align-items:center;justify-content:center}
.person .ph.empty span{
  font-family:'Archivo',sans-serif;font-weight:200;letter-spacing:.4em;
  font-size:.6rem;text-transform:uppercase;color:rgba(250,246,236,.4);text-align:center;line-height:2.2;
}
.person h3{font-size:.82rem;font-weight:300;letter-spacing:.3em;margin:20px 0 10px;color:var(--bone)}
.person .role{
  font-family:'Archivo',sans-serif;font-weight:400;font-size:.58rem;
  text-transform:uppercase;letter-spacing:.22em;color:var(--gold);display:block;margin-bottom:12px;
}
.person p{font-size:.92rem;line-height:1.6;color:rgba(250,246,236,.72)}

/* ---------- gallery ---------- */
.gallery{background:var(--haze-deep)}
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px}
@media(max-width:820px){.ggrid{grid-template-columns:1fr}}
.ggrid figure{overflow:hidden;position:relative}
.ggrid img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;transition:transform .8s ease}
.ggrid figure:hover img{transform:scale(1.035)}
.ggrid figcaption{
  font-family:'Archivo',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.24em;font-size:.56rem;margin-top:12px;color:rgba(36,28,20,.55);
}
.gallery .more{margin-top:44px;text-align:center}
.btn{
  display:inline-block;font-family:'Archivo',sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.3em;font-size:.64rem;
  padding:16px 34px;border:1px solid var(--ink);text-decoration:none;
  transition:background .3s,color .3s,border-color .3s;background:transparent;cursor:pointer;color:var(--ink);
}
.btn:hover{background:var(--dash-red);border-color:var(--dash-red);color:var(--bone)}
.dark .btn{border-color:rgba(250,246,236,.5);color:var(--bone)}
.dark .btn:hover{background:var(--dash-red);border-color:var(--dash-red)}

/* ---------- press ---------- */
.press{background:var(--haze)}
.press .cols{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:10px}
@media(max-width:820px){.press .cols{grid-template-columns:1fr;gap:40px}}
.press h3{font-size:.78rem;font-weight:400;letter-spacing:.3em;margin-bottom:18px}
.press p{margin-bottom:22px;color:rgba(36,28,20,.8)}
.laurel{
  border:1px dashed rgba(36,28,20,.35);padding:34px;text-align:center;
  font-family:'Archivo',sans-serif;font-weight:300;text-transform:uppercase;
  letter-spacing:.3em;font-size:.62rem;color:rgba(36,28,20,.5);margin-top:8px;white-space:pre-line;
}

/* ---------- crew page ---------- */
.crew{background:var(--haze)}
.crew .wrap{max-width:820px}
.crew-member{
  display:flex;gap:36px;align-items:center;
  padding:34px 0;border-bottom:1px solid rgba(36,28,20,.14);
}
.crew-member:last-child{border-bottom:none}
.crew-photo{flex:0 0 120px}
.crew-photo img{
  width:120px;height:120px;border-radius:50%;
  object-fit:cover;object-position:center top;filter:saturate(.95);
}
.crew-text{flex:1}
.crew-text h3{font-size:.9rem;font-weight:300;letter-spacing:.28em;margin-bottom:8px;color:var(--ink)}
.crew-text .role{
  font-family:'Archivo',sans-serif;font-weight:400;font-size:.6rem;
  text-transform:uppercase;letter-spacing:.22em;color:var(--dash-red);display:block;margin-bottom:14px;
}
.crew-text p{font-size:.96rem;line-height:1.65;color:rgba(36,28,20,.82)}
@media(max-width:600px){
  .crew-member{flex-direction:column;gap:16px;text-align:center}
  .crew-photo{flex:none}
}

/* ---------- footer ---------- */
.site-footer{
  background:var(--shadow);color:rgba(250,246,236,.7);
  padding:80px 6vw 48px;
}
.site-footer .fwrap{max-width:1080px;margin:0 auto}
.site-footer .ftitle{
  font-family:'Archivo',sans-serif;font-weight:200;text-transform:uppercase;
  letter-spacing:.4em;font-size:.9rem;color:var(--bone);margin-bottom:34px;
}
.site-footer .frow{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-end}
.site-footer .fcol p{font-size:.88rem;line-height:1.8}
.site-footer a{color:var(--bone);text-decoration:none;border-bottom:1px solid rgba(181,52,42,.6)}
.site-footer .totop{border-bottom:none;font-family:'Archivo',sans-serif;font-size:.6rem;text-transform:uppercase;letter-spacing:.3em}
.site-footer .legal{
  margin-top:56px;padding-top:26px;border-top:1px solid rgba(250,246,236,.12);
  font-family:'Archivo',sans-serif;font-weight:300;font-size:.56rem;
  text-transform:uppercase;letter-spacing:.24em;color:rgba(250,246,236,.4);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
}

/* ---------- interior pages ---------- */
.page-banner{
  background:var(--shadow);color:var(--bone);
  padding:190px 6vw 90px;text-align:center;
}
.page-banner h1{font-size:clamp(1.4rem,3.4vw,2.6rem);color:var(--bone)}
.page-banner .kicker{color:#d4685f;margin-bottom:20px}
.entry-content{max-width:820px;margin:0 auto;padding:90px 6vw 120px}
.entry-content > *{margin-bottom:1.4em}
.entry-content h2{margin-top:1.6em}
.entry-content h3{font-size:.85rem;font-weight:400;letter-spacing:.28em}
.entry-content a{border-bottom:1px solid rgba(181,52,42,.6);text-decoration:none}
.entry-content .wp-block-gallery{max-width:none}
.entry-content figcaption{
  font-family:'Archivo',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.24em;font-size:.56rem;color:rgba(36,28,20,.55);
}
.entry-content blockquote{
  border-left:2px solid var(--dash-red);padding-left:1.4em;font-style:italic;
}
/* wide gallery pages */
.page-template-template-wide .entry-content{max-width:1200px}