/* Swizzle Journal — shared styles, tokens mirrored from the main page */
@font-face{font-family:'Calathea';src:url('../assets/fonts/calathea.otf') format('opentype');font-display:swap}
:root{
  --jungle:#16281E;--jungle-2:#1C3226;--jungle-3:#24402F;
  --gold:#C9A45C;--gold-hi:#E9D3A0;--gold-dim:rgba(201,164,92,.4);
  --terra:#B4543A;--terra-2:#9C4530;
  --cream:#F1E7CE;--cream-dim:rgba(241,231,206,.78);--cream-faint:rgba(241,231,206,.5);
  --line:rgba(201,164,92,.28);
  --serif:'Cinzel','Times New Roman',serif;
  --garalde:'Cormorant Garamond',Georgia,serif;
  --tiki:'Calathea','Cinzel',serif;
  --body:'Jost','Helvetica Neue',sans-serif;
  --max:1180px;--pad:clamp(20px,5vw,60px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{overflow-x:hidden;background:var(--jungle);color:var(--cream);font-family:var(--body);font-weight:300;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
::selection{background:var(--gold);color:var(--jungle)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* nav */
header.nav{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(15,26,19,.96);border-bottom:1px solid var(--line)}
.nav-in{max-width:1280px;margin:0 auto;padding:10px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:26px}
.brand-wide{height:64px;margin:-4px 0;width:auto;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));transition:transform .4s}
a.brand:hover .brand-wide{transform:scale(1.04)}
nav.links{display:flex;gap:24px;align-items:center;white-space:nowrap}
nav.links a{font-size:11.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-dim);padding:8px 0;text-decoration:none;position:relative;transition:color .3s}
nav.links a::after{content:"";position:absolute;left:50%;right:50%;bottom:2px;height:2px;background:var(--gold);transition:left .3s,right .3s}
nav.links a:hover{color:var(--gold-hi)}
nav.links a:hover::after{left:0;right:0}
nav.links a.active{color:var(--gold)}
nav.links a.active::after{left:0;right:0}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;-webkit-tap-highlight-color:transparent}
.burger span{display:block;width:26px;height:1.5px;background:var(--cream);margin:6px 0;transition:.35s}
@media(max-width:900px){
  header.nav{background:rgba(15,26,19,.97)}
  nav.links{position:fixed;inset:0;background:rgba(15,26,19,.98);flex-direction:column;justify-content:center;
    gap:30px;transform:translateX(100%);transition:transform .45s;z-index:59}
  nav.links::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:url('../assets/photos/tiki-doodles.png') repeat;background-size:380px;opacity:.06}
  nav.links.open{transform:none}
  nav.links a{font-size:15px}
  .burger{display:block;z-index:61;position:relative}
  .burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}
@media(max-width:600px){.brand-wide{height:50px}}

/* trim divider (paddles) */
.trim{height:46px;background-color:#0F1D15;background-image:url('../assets/photos/trim-paddles.png');
  background-repeat:repeat-x;background-position:0 center;background-size:70.5px 32px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  animation:trimflow 22s linear infinite}
@keyframes trimflow{to{background-position:-70.5px center}}
@media(prefers-reduced-motion:reduce){.trim{animation:none}}

/* page head */
.page-head{padding-top:140px;padding-bottom:14px;position:relative}
.crumb{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.crumb a{text-decoration:none;color:var(--cream-faint);transition:color .3s}
.crumb a:hover{color:var(--gold-hi)}
.page-head h1{font-family:var(--tiki);font-weight:400;font-size:clamp(34px,5vw,58px);letter-spacing:.06em;
  text-transform:uppercase;line-height:1.15;max-width:820px;
  background:linear-gradient(175deg,var(--gold-hi) 20%,var(--gold) 65%,#9C7A38 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.standfirst{font-family:var(--garalde);font-size:clamp(18px,2vw,22px);font-style:italic;color:var(--cream-dim);max-width:640px;margin-top:22px}

/* post list */
.post-list{padding-top:34px;padding-bottom:90px;display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
.post-card{display:flex;flex-direction:column;text-decoration:none;position:relative;
  background:linear-gradient(180deg,rgba(201,164,92,.07),rgba(201,164,92,.02)) var(--jungle-2);
  border:1px solid var(--gold-dim);padding:12px 12px 22px;
  transition:transform .45s cubic-bezier(.2,.6,.2,1),border-color .4s,box-shadow .45s}
.post-card::before{content:"";position:absolute;inset:5px;border:1px solid rgba(201,164,92,.18);pointer-events:none;z-index:2;transition:inset .4s,border-color .4s}
.post-card::after{content:"";position:absolute;left:11px;right:11px;top:10px;bottom:10px;pointer-events:none;z-index:2;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8'%3E%3Cpath d='M0 0 7 8 14 0Z' fill='%23C9A45C' fill-opacity='.55'/%3E%3Cpath d='M14 0 21 8 28 0Z' fill='%23C9A45C' fill-opacity='.22'/%3E%3C/svg%3E") top center repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8'%3E%3Cpath d='M0 8 7 0 14 8Z' fill='%23C9A45C' fill-opacity='.55'/%3E%3Cpath d='M14 8 21 0 28 8Z' fill='%23C9A45C' fill-opacity='.22'/%3E%3C/svg%3E") bottom center repeat-x;
  background-size:28px 8px;opacity:.45;transition:opacity .45s}
.post-card:hover{transform:translateY(-8px);border-color:var(--gold);box-shadow:0 30px 50px -24px rgba(0,0,0,.7)}
.post-card:hover::before{inset:9px;border-color:rgba(201,164,92,.35)}
.post-card:hover::after{opacity:1}
.art-wrap{overflow:hidden;position:relative;border:1px solid rgba(201,164,92,.25)}
.post-card .art{aspect-ratio:16/9;background-size:cover;background-position:center;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.post-card:hover .art{transform:scale(1.06)}
.art-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,26,19,.35),transparent 45%)}
.post-card .body{padding:20px 14px 0;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card .cat{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px}
.post-card .cat::before{content:"";width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex:none;opacity:.8}
.post-card h2{font-family:var(--serif);font-weight:500;font-size:clamp(18px,2vw,23px);letter-spacing:.04em;color:var(--gold-hi);line-height:1.4;transition:color .3s}
.post-card:hover h2{color:var(--gold)}
.post-card p{color:var(--cream-dim);font-size:14px;line-height:1.65;max-width:64ch}
.post-card .read{margin-top:auto;padding-top:16px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-faint);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.post-card .read .arrow{color:var(--gold);font-size:15px;letter-spacing:0;transition:transform .35s}
.post-card:hover .read .arrow{transform:translateX(6px)}
/* featured first card: full width, photo beside text */
.post-card.featured{grid-column:1/-1;flex-direction:row;align-items:stretch;gap:0}
.post-card.featured .art-wrap{flex:1.05;border:1px solid rgba(201,164,92,.25)}
.post-card.featured .art{height:100%;min-height:300px;aspect-ratio:auto}
.post-card.featured .body{flex:1;justify-content:center;padding:26px 30px}
.post-card.featured h2{font-size:clamp(22px,2.6vw,30px)}
.post-card.featured p{font-size:15px}
@media(max-width:860px){
  .post-list{grid-template-columns:1fr}
  .post-card.featured{flex-direction:column}
  .post-card.featured .art{height:auto;width:100%;min-height:0;aspect-ratio:16/9}
  .post-card.featured .body{padding:20px 14px 0}
}

/* article */
.art-hero{height:clamp(220px,34vw,380px);background-size:cover;background-position:center;position:relative;margin-top:84px}
.art-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--jungle) 2%,transparent 55%),linear-gradient(180deg,rgba(15,26,19,.65),transparent 40%)}
article.post{max-width:760px;margin:0 auto;padding:34px var(--pad) 40px}
article.post .meta{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-faint);margin:16px 0 0}
article.post h1{padding:0;margin-top:14px}
article.post .standfirst{margin-top:18px}
article.post .body{margin-top:38px}
article.post .body p{margin:0 0 22px;color:var(--cream-dim);font-size:16.5px}
article.post .body>p:first-child::first-letter{font-family:var(--garalde);font-size:64px;line-height:.8;color:var(--gold);float:left;padding:8px 12px 0 0}
article.post h2{font-family:var(--tiki);font-weight:400;font-size:clamp(21px,2.6vw,28px);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:44px 0 18px}
article.post h2::after{content:"";display:block;width:64px;height:8px;margin-top:10px;opacity:.85;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='8'%3E%3Cpath d='M32 0 38 4 32 8 26 4Z' fill='%23C9A45C'/%3E%3Cpath d='M18 2 22 4 18 6 14 4Z' fill='%23C9A45C' fill-opacity='.6'/%3E%3Cpath d='M46 2 50 4 46 6 42 4Z' fill='%23C9A45C' fill-opacity='.6'/%3E%3Cpath d='M0 3.6h12v.8H0Z M52 3.6h12v.8H52Z' fill='%23C9A45C' fill-opacity='.45'/%3E%3C/svg%3E") left/contain no-repeat}
article.post blockquote{margin:34px 0;padding:6px 0 6px 26px;border-left:2px solid var(--gold);
  font-family:var(--garalde);font-style:italic;font-size:21px;line-height:1.55;color:var(--gold-hi)}
article.post .body b{color:var(--cream);font-weight:500}
/* in-article figure — photos, clippings, documents */
article.post figure{margin:38px 0}
article.post figure img{display:block;width:100%;border:1px solid var(--gold-dim)}
article.post figure.clipping img{
  background:#F1E7CE;padding:10px;
  filter:sepia(.22) contrast(1.04);
  box-shadow:0 18px 34px -18px rgba(0,0,0,.8)}
article.post figure.narrow{max-width:430px;margin-left:auto;margin-right:auto}
article.post figure.narrow figcaption{max-width:430px}
article.post figcaption{
  margin-top:12px;font-size:12px;line-height:1.6;letter-spacing:.04em;
  color:var(--cream-faint);font-family:var(--body);
  border-left:2px solid var(--gold-dim);padding-left:12px}
article.post figcaption b{color:var(--gold);font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;display:block;margin-bottom:4px}
article.post figcaption a{color:var(--cream-dim);text-decoration:underline;text-underline-offset:3px}
article.post figcaption a:hover{color:var(--gold-hi)}

.post-foot{max-width:760px;margin:0 auto;padding:10px var(--pad) 80px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border:1px solid var(--gold);color:var(--gold-hi);
  font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;transition:background .3s,color .3s}
.btn:hover{background:var(--gold);color:var(--jungle)}

/* footer */
footer{background:#0F1D15;border-top:1px solid var(--line);padding:34px 0;text-align:center}
footer .foot-base{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-faint)}
footer a{color:var(--gold);text-decoration:none}