/* Pretty WILD Journal: shares the homepage's tokens, type and components. */
:root{
  --ivory:#F4EFE4; --ivory-deep:#EDE6D6; --forest:#1F2C24; --copper:#A9744B; --copper-light:#C79A72;
  --ink:#2B2B25; --body:#3E3E36; --stone:#7C8172; --hair:rgba(169,116,75,.22); --max:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background-color:var(--ivory);color:var(--ink);font-family:'EB Garamond',Georgia,serif;font-size:19px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--copper);color:var(--ivory)}
a{color:inherit}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
img,video{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding:0 6vw}
.eyebrow{font-family:'Jost',sans-serif;font-weight:400;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--copper)}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:400;line-height:1.12;text-wrap:balance}
.rule{width:64px;height:1px;background:var(--copper)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* nav and footer: as on the homepage */
nav{background-color:var(--ivory);display:flex;justify-content:space-between;align-items:center;padding:22px 6vw;border-bottom:1px solid var(--hair)}
.logo-img{height:74px;width:200px;background:url(/journal/img/logo.png) left center/contain no-repeat;display:block}
.nav-links{display:flex;gap:36px}
.nav-links a{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:color .3s}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a[aria-current]{color:var(--copper)}
@media(max-width:820px){.nav-links{display:none}nav{justify-content:center}.logo-img{height:60px;width:170px;background-position:center}}
footer{background-color:var(--ivory);color:var(--ink);padding:72px 0 56px;border-top:1px solid var(--hair)}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:44px;flex-wrap:wrap}
footer .logo-img{height:88px;width:240px}
footer .f-col{font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.06em;line-height:2.1}
footer a{text-decoration:none;transition:color .3s}
footer a:hover,footer a:focus-visible{color:var(--copper)}

.j-more{display:inline-block;font-family:'Jost',sans-serif;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--copper);text-decoration:none;border-bottom:1px solid var(--copper);padding-bottom:3px;align-self:flex-start}
.btn{display:inline-block;font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;padding:18px 38px;border:1px solid var(--copper-light);color:var(--ivory);background:rgba(24,32,26,.25);transition:background .35s,color .35s}
.btn:hover,.btn:focus-visible{background:var(--copper);color:var(--ivory)}

/* ---------- Journal listing ---------- */
.j-head{padding:110px 0 64px}
.j-head .wrap{display:grid;gap:24px}
.j-head h1{font-size:clamp(44px,6.4vw,80px);font-weight:300;max-width:14ch}
.j-head h1 em{color:var(--forest)}
.j-head p{max-width:56ch;color:var(--body);font-size:20px}
.stories{padding:0 0 120px}
.story-card{display:grid;grid-template-columns:1.15fr .85fr;background:var(--ivory-deep);border:1px solid var(--hair);text-decoration:none;color:inherit}
.story-card + .story-card{margin-top:28px}
.story-card .img{min-height:440px;background:var(--forest) center/cover no-repeat}
.story-card .txt{padding:48px 44px;display:flex;flex-direction:column;gap:18px;justify-content:center;min-width:0}
.story-card h2{font-size:clamp(32px,3.6vw,46px);color:var(--forest)}
.story-card p{color:var(--body)}
.story-card .meta{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.story-card:hover .j-more{color:var(--forest);border-color:var(--forest)}
@media(max-width:860px){.story-card{grid-template-columns:1fr}.story-card .img{min-height:0;aspect-ratio:3/2}.story-card .txt{padding:32px 24px}}

/* ---------- Story page ---------- */
.s-hero{position:relative;color:var(--ivory);background:var(--forest) center 40%/cover no-repeat;min-height:74svh;display:flex;align-items:flex-end;overflow:hidden}
.s-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,32,26,.12) 0%,rgba(24,32,26,.42) 45%,rgba(24,32,26,.82) 100%)}
.s-hero .wrap{position:relative;width:100%;padding-top:120px;padding-bottom:70px}
.crumbs{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:28px;color:rgba(244,239,228,.85)}
.crumbs a{text-decoration:none;border-bottom:1px solid rgba(244,239,228,.4)}
.crumbs a:hover{color:var(--copper-light);border-color:var(--copper-light)}
.s-hero .eyebrow{color:var(--copper-light);display:block;margin-bottom:18px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.crumbs{text-shadow:0 1px 10px rgba(0,0,0,.45)}
.s-hero h1{font-size:clamp(44px,6.6vw,88px);font-weight:300;max-width:13ch;text-shadow:0 1px 24px rgba(0,0,0,.25)}
.s-hero .line{margin-top:18px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(20px,2.4vw,27px);color:rgba(244,239,228,.92);max-width:40ch}
.byline{border-bottom:1px solid var(--hair)}
.byline .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:22px;padding-bottom:22px;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.byline b{font-weight:500;color:var(--ink)}

.story{padding:72px 0 64px}
.col{display:grid;grid-template-columns:minmax(16px,1fr) minmax(0,680px) minmax(16px,1fr);row-gap:24px}
.col > *{grid-column:2;min-width:0}
.col > .wide{grid-column:1 / -1;justify-self:center;width:calc(100% - 32px);max-width:1080px}
.col > p{font-size:20px;color:var(--body)}
.col > p.lead{font-size:23px;line-height:1.6;color:var(--ink)}
.col > p.lead::first-letter{font-family:'Cormorant Garamond',serif;font-size:3.4em;float:left;line-height:.85;padding:6px 10px 0 0;color:var(--copper)}
.col h2{font-size:clamp(32px,3.8vw,44px);color:var(--forest);margin-top:36px}
.col a{color:var(--forest);text-decoration-color:var(--copper);text-underline-offset:3px}
blockquote{margin:16px 0;padding:6px 0 6px 28px;border-left:1px solid var(--copper);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(26px,3vw,32px);line-height:1.3;color:var(--forest)}
blockquote cite{display:block;margin-top:12px;font-family:'Jost',sans-serif;font-style:normal;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--copper)}
figure{margin:24px 0}
figure img{width:100%}
figcaption{margin-top:10px;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.06em;color:var(--stone);line-height:1.5}
.portrait img{max-height:760px;object-fit:cover}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0}
.pair img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media(max-width:620px){.pair{grid-template-columns:minmax(0,1fr)}.pair img{aspect-ratio:3/2}}
.facts{border:1px solid var(--hair);background:var(--ivory-deep);padding:26px 28px 20px;margin:8px 0}
.facts h3{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--copper);margin-bottom:12px;font-weight:400}
.facts dl{display:grid;grid-template-columns:minmax(120px,auto) 1fr;font-size:17px}
.facts dt,.facts dd{padding:10px 0;border-top:1px solid var(--hair)}
.facts dt{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);padding-right:18px;padding-top:13px}
.facts small{display:block;margin-top:12px;font-family:'Jost',sans-serif;font-size:11.5px;color:var(--stone);letter-spacing:.04em}
.reel{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:center;background:var(--forest);color:var(--ivory);padding:24px;margin:16px 0}
.reel video{width:100%;aspect-ratio:9/16;background:#111}
.reel h3{font-size:30px;color:var(--ivory);margin-top:10px}
.reel p{color:rgba(244,239,228,.82);font-size:17px;margin-top:10px}
.reel .eyebrow{color:var(--copper-light)}
@media(max-width:620px){.reel{grid-template-columns:1fr}.reel video{max-width:280px;margin:0 auto}}
.more{list-style:none;display:grid;gap:10px;font-size:18px}
.sign{text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:30px;color:var(--copper);margin-top:24px}
.back{text-align:center;margin-top:8px}

.cta{background:var(--forest);color:var(--ivory);text-align:center}
.cta .wrap{padding-top:110px;padding-bottom:110px;display:grid;gap:22px;justify-items:center}
.cta .eyebrow{color:var(--copper-light)}
.cta h2{font-size:clamp(34px,4.4vw,54px);max-width:18ch;color:var(--ivory)}
.cta p{max-width:46ch;color:rgba(244,239,228,.85)}
.cta .btn{margin-top:22px}
.cta .contact-line{font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.08em;color:rgba(244,239,228,.75)}
.cta .contact-line a{text-decoration:none}

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