/* ============================================================
   We Are One Studio · Journal
   Extends main.css tokens; no new colors, no new faces.
   ============================================================ */

/* The fixed header blends via difference; journal pages are light,
   so give the page top room to breathe under it. */
.jr-main{padding-top:clamp(5.5rem,10vh,7.5rem); background:var(--limestone);}

/* ---------- Index ---------- */
.jr-head{padding:clamp(2rem,5vh,4rem) var(--pad) clamp(1.5rem,3vh,2.5rem);}
.jr-head .title{margin-bottom:1rem;}
.jr-head__line{color:var(--ink-soft); max-width:52ch; font-size:1rem;}
.jr-head .kicker .num{letter-spacing:.32em; text-transform:uppercase;}

.jr-gridwrap{padding:0 var(--pad) clamp(4rem,9vh,7rem);}
.jr-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3vw,2.8rem);}

.jr-card a{text-decoration:none; color:inherit; display:block;}
.jr-card figure{margin:0 0 1.1rem; overflow:hidden; background:var(--limestone-3);}
.jr-card img{width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.jr-card a:hover img{transform:scale(1.04);}
.jr-card__meta{font-size:.66rem; text-transform:uppercase; letter-spacing:.26em; color:var(--bronze); margin:0 0 .6rem;}
.jr-card h2, .jr-card h3{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(.95rem,1.6vw,1.15rem); line-height:1.4; color:var(--ink);
  margin:0 0 .7rem; transition:color .3s ease;
}
.jr-card a:hover h2, .jr-card a:hover h3{color:var(--bronze);}
.jr-card__ex{
  font-size:.9rem; color:var(--ink-soft); margin:0 0 .9rem;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.jr-card__read{
  font-size:.64rem; text-transform:uppercase; letter-spacing:.26em; color:var(--bronze);
  border-bottom:1px solid var(--line-dark); padding-bottom:.25rem;
}
.jr-card a:hover .jr-card__read{border-color:var(--bronze);}

/* ---------- Homepage teaser reuses the cards ---------- */
.jr-teaser{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3vw,2.8rem);}
.jr-teaser .jr-card{min-width:0;}
.jr-more{margin:2.2rem 0 0;}
.jr-more a{
  color:var(--bronze); text-decoration:none; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.28em;
  border-bottom:1px solid var(--line-dark); padding-bottom:.3rem;
}
.jr-more a:hover{border-color:var(--bronze);}

/* ---------- Article ---------- */
.jr-hero{margin:0 auto; max-width:var(--maxw); padding:0 var(--pad);}
.jr-hero img{width:100%; max-height:72svh; object-fit:cover;}

.jr-prose{max-width:760px; margin:0 auto; padding:clamp(2.2rem,5vh,3.5rem) var(--pad) clamp(3rem,6vh,4.5rem);}
.jr-meta{font-size:.66rem; text-transform:uppercase; letter-spacing:.28em; color:var(--bronze); margin:0 0 1.1rem;}
.jr-prose h1{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(1.4rem,3.4vw,2.1rem); line-height:1.3; color:var(--ink);
  margin:0 0 1.6rem; text-wrap:balance;
}
.jr-partner{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; color:var(--ink-soft);
  border:1px solid var(--line-dark); display:inline-block; padding:.45rem .9rem; margin:0 0 1.6rem;
}
.jr-prose > p{font-size:1rem; line-height:1.75; color:var(--espresso);}
.jr-prose h1 + p, .jr-prose .jr-partner + p{
  font-size:clamp(1.08rem,1.8vw,1.25rem); line-height:1.7; color:var(--ink);
}
.jr-prose h2{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.18em;
  font-size:1.02rem; color:var(--ink); margin:2.6rem 0 1rem;
}
.jr-prose h3{
  font-weight:500; font-size:.95rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--bronze); margin:2rem 0 .7rem;
}
.jr-prose a{color:var(--bronze);}
.jr-prose ul{margin:0 0 1.2em; padding-left:1.1em;}
.jr-prose li{margin-bottom:.5em;}
.jr-prose li::marker{color:var(--bronze);}
.jr-prose blockquote{
  margin:2rem 0; padding:0 0 0 1.4rem; border-left:1px solid var(--greige);
}
.jr-prose blockquote p{font-style:italic; font-size:1.1rem; color:var(--ink); margin:0;}

/* In brief: the quick-facts frame */
.jr-brief{border:1px solid var(--line-dark); background:var(--limestone-2); padding:clamp(1.3rem,3vw,2rem); margin:2.2rem 0;}
.jr-brief h2{margin:0 0 1.1rem; font-size:.85rem;}
.jr-brief dl{margin:0; display:flex; flex-direction:column; gap:.75rem;}
.jr-brief__row{display:grid; grid-template-columns:9.5rem 1fr; gap:1rem; border-top:1px solid var(--line-dark); padding-top:.75rem;}
.jr-brief__row:first-child{border-top:0; padding-top:0;}
.jr-brief dt{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.22em; color:var(--bronze);
  padding-top:.2rem;
}
.jr-brief dd{margin:0; font-size:.92rem;}

/* Figures: single, pair, triple */
.jr-figs{display:grid; gap:clamp(.8rem,1.6vw,1.2rem); margin:2rem 0;}
.jr-figs--2{grid-template-columns:1fr 1fr;}
.jr-figs--3{grid-template-columns:repeat(3,1fr);}
.jr-figs figure{margin:0; background:var(--limestone-3); overflow:hidden;}
.jr-figs img{width:100%; height:100%; object-fit:cover;}
.jr-figs--2 img, .jr-figs--3 img{aspect-ratio:4/5;}

/* End-of-article hand-off */
.jr-after{border-top:1px solid var(--line-dark); padding:clamp(2.4rem,6vh,4rem) var(--pad);}
.jr-after__line{font-size:1.05rem; color:var(--ink); margin:0 0 1.2rem;}
.jr-after__links{display:flex; gap:1.6rem; align-items:center; flex-wrap:wrap; margin:0;}
.jr-cta{
  background:var(--terracotta); color:var(--limestone); text-decoration:none;
  font-weight:500; text-transform:uppercase; letter-spacing:.26em; font-size:.68rem;
  padding:.95rem 2.2rem; border-radius:2px; transition:background .3s ease;
}
.jr-cta:hover{background:#8F5636;}
.jr-back{
  color:var(--bronze); text-decoration:none; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.26em;
  border-bottom:1px solid var(--line-dark); padding-bottom:.3rem;
}
.jr-back:hover{border-color:var(--bronze);}

/* ---------- Portfolio ---------- */
.pf-split, .pf-themes{display:grid; gap:clamp(1.6rem,3vw,2.8rem);}
.pf-split{grid-template-columns:1fr 1fr;}
.pf-themes{grid-template-columns:1fr 1fr;}
.pf-tile{text-decoration:none; color:inherit; display:block;}
.pf-tile figure{margin:0 0 1.1rem; overflow:hidden; background:var(--limestone-3);}
.pf-tile img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.pf-tile:hover img{transform:scale(1.04);}
.pf-tile h2{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.18em;
  font-size:clamp(1.05rem,2vw,1.3rem); color:var(--ink); margin:0 0 .5rem;
  transition:color .3s ease;
}
.pf-tile:hover h2{color:var(--bronze);}
.pf-tile p{font-size:.88rem; color:var(--ink-soft); margin:0;}
.pf-grid{columns:2; column-gap:clamp(.9rem,1.8vw,1.4rem);}
.pf-grid figure{margin:0 0 clamp(.9rem,1.8vw,1.4rem); break-inside:avoid; background:var(--limestone-3); overflow:hidden;}
.pf-grid img{width:100%; height:auto; display:block;}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .jr-grid, .jr-teaser{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .jr-grid, .jr-teaser, .jr-figs--2, .jr-figs--3, .pf-split, .pf-themes{grid-template-columns:1fr;}
  .pf-grid{columns:1;}
  .jr-brief__row{grid-template-columns:1fr; gap:.3rem;}
  .jr-hero{padding:0;}
}