/* Cold Press: shared magazine style for every article.
   Same palette and fonts as the brochure. Change here, all articles follow. */
:root{
  --paper:#f4efe6; --ink:#3a3128; --ink2:#5c5245; --muted:#8f8571;
  --gold:#b39b5e; --gold2:#cdb57e; --night:#15120e; --cream:#efe7d6;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper); color:var(--ink); font-family:var(--serif); -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%}
a{color:inherit}

/* only the chosen language is shown */
html[lang="en"] [lang="tr"]:not(html), html[lang="tr"] [lang="en"]:not(html){display:none !important}

/* top bar */
.jbar .cp{font-family:var(--sans); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold2); text-decoration:none; border:1px solid rgba(205,181,126,.45); padding:.42rem .8rem}
.jbar .cp:hover{background:var(--gold); color:#171410}
.jbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.55rem 4vw; background:rgba(21,18,14,.94); backdrop-filter:blur(6px); color:#cfc6b6}
.jbar .home{display:flex; align-items:center; gap:.9rem; text-decoration:none}
.jbar .home img{height:30px}
.jbar .home span{font-family:var(--sans); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold2);
  border-left:1px solid rgba(205,181,126,.4); padding-left:.9rem}
.jbar .ctl{display:flex; gap:.45rem}
.jbtn{font-family:var(--sans); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; background:none; cursor:pointer;
  border:1px solid rgba(232,224,208,.35); color:#cfc6b6; padding:.42rem .8rem; text-decoration:none}
.jbtn:hover{border-color:var(--gold2); color:var(--gold2)}
.jbtn.on{background:var(--gold); border-color:var(--gold); color:#171410}
.progress{position:fixed; top:0; left:0; height:2px; background:var(--gold); width:0; z-index:30}

/* hero */
.hero{position:relative; height:min(62vh,600px); background:#2a241c center/cover no-repeat; color:#fff}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(21,18,14,.15) 30%,rgba(21,18,14,.78) 100%)}
.hero .in{position:absolute; left:0; right:0; bottom:0; z-index:1; max-width:860px; margin:0 auto; padding:0 6vw 5vh}
.kicker{font-family:var(--sans); font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold2)}
.hero h1{font-weight:400; font-size:clamp(1.8rem,4vw,3.1rem); line-height:1.08; letter-spacing:.01em; margin:.3em 0 0}
.hero .stand{font-style:italic; font-size:clamp(1.05rem,1.8vw,1.3rem); line-height:1.38; max-width:40em; color:#efe7d6}
.credit{position:absolute; right:1rem; bottom:.6rem; z-index:1; font-family:var(--sans); font-size:.55rem; letter-spacing:.12em; color:rgba(255,255,255,.6)}

/* meta line */
.meta{max-width:700px; margin:0 auto; padding:1.4rem 6vw 0; display:flex; flex-wrap:wrap; gap:.4rem 1.6rem;
  font-family:var(--sans); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.meta b{font-weight:500; color:var(--ink2)}
.brandname{text-transform:none}

/* body text */
.article{max-width:680px; margin:0 auto; padding:1.6rem 6vw 1.8rem; font-size:clamp(1.05rem,1.3vw,1.15rem); line-height:1.5; color:var(--ink)}
.article p{margin:0 0 .65em}
.article > p.lead:first-of-type::first-letter, .article > div > p.lead:first-of-type::first-letter{
  float:left; font-size:3.6em; line-height:.84; padding:.04em .08em 0 0; color:var(--gold); font-weight:500}
.article h2{font-weight:500; font-size:1.3em; line-height:1.2; margin:1em 0 .3em; color:var(--ink)}
.article h2::before{content:""; display:block; width:30px; height:1px; background:var(--gold); margin-bottom:.4em}
.article em{color:var(--ink2)}

/* pull quote */
.pull{margin:1.6em -2vw; padding:1.1em 0; border-top:1px solid rgba(179,155,94,.5); border-bottom:1px solid rgba(179,155,94,.5);
  text-align:center; font-style:italic; font-size:1.55em; line-height:1.35; color:var(--clay,#7a5a45)}
.pull cite{display:block; margin-top:.8em; font-style:normal; font-family:var(--sans); font-size:.42em; letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}

/* figures: photo inside the text, wide photo, small graphic */
figure{margin:1em 0}
figure img{width:100%; height:auto}
figcaption{margin-top:.45em; font-family:var(--sans); font-size:.68rem; letter-spacing:.06em; line-height:1.5; color:var(--muted)}
figure.wide{margin-left:calc(-1 * min(14vw,140px)); margin-right:calc(-1 * min(14vw,140px))}
figure.graphic{max-width:360px; margin:1.5em auto; text-align:center}
figure.graphic img{width:auto; max-height:220px; margin:0 auto}
@media (max-width:860px){ .article{padding-top:1.1rem; line-height:1.48} .hero.nophoto{padding-top:1.5rem} .hero.nophoto .in{padding-bottom:1.3rem} figure.wide{margin-left:-6vw; margin-right:-6vw} .pull{margin:2em 0} }

/* hero without a photo (until the article photo is chosen) */
.hero.nophoto{height:auto; min-height:0; background:var(--night) !important; padding-top:2.2rem}
.hero.nophoto::after{display:none}
.hero.nophoto .in{position:relative; padding-bottom:1.9rem}
.hero.nophoto .credit{display:none}

/* chart / data figure: full text width, white card */
figure.chart{background:#fff; padding:.6rem; border:1px solid rgba(179,155,94,.25)}
figure.chart figcaption{margin-top:.8em}

/* sources: small and collapsible */
details.sources{margin:1.2em 0 0; border-top:1px solid rgba(179,155,94,.5); padding-top:1em; font-family:var(--sans)}
details.sources summary{cursor:pointer; list-style:none; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}
details.sources summary::-webkit-details-marker{display:none}
details.sources summary::after{content:" +"; color:var(--gold)}
details.sources[open] summary::after{content:" \2212"}
details.sources ol{margin:.7em 0 0 1.2em; font-size:.72rem; line-height:1.5; color:var(--ink2)}
details.sources li{margin-bottom:.45em; word-break:break-word}
details.sources a{color:var(--clay,#7a5a45)}

/* end mark + footer */
.end{display:block; width:10px; height:10px; margin:1.1em auto 0; transform:rotate(45deg); border:1px solid var(--gold)}
.jfoot{background:var(--night); color:#a99f8a; text-align:center; padding:1.4rem 6vw; font-family:var(--sans); font-size:.68rem; letter-spacing:.16em}
.jfoot img{height:32px; margin:0 auto .8rem}
.jfoot .row{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:1rem}

/* print / save as PDF: clean pages without the bars */
@media print{
  @page{margin:16mm 16mm 18mm}
  .jbar,.progress,.jfoot .row,.noprint{display:none !important}
  body{background:#fff}
  .hero{height:auto; min-height:0; color:var(--ink); background:none !important}
  .hero::after{display:none}
  .hero .in{position:static; padding:0}
  .hero .stand{color:var(--ink2)}
  .hero .printimg{display:block !important; margin-top:1.2em}
  .article,.meta{max-width:none; padding-left:0; padding-right:0}
  .article{font-size:11.5pt; line-height:1.6}
  figure,.pull{break-inside:avoid}
  details.sources{display:block} details.sources > *{display:block}
  .hero.nophoto{padding-top:0; background:none !important}
  figure.wide{margin-left:0; margin-right:0}
  .jfoot{background:none; color:var(--muted); padding:1.2rem 0 0; border-top:1px solid #ddd}
  .jfoot img{display:none}
}

/* Compact editorial layout (Ömer, Oct 2026): less scrolling, especially on phones */
@media screen{
  .hero.nophoto{padding-top:1.3rem}
  .hero.nophoto .in{padding-bottom:1rem}
  .hero h1{font-size:clamp(1.55rem,3.2vw,2.5rem); line-height:1.1}
  .article{padding:1rem 6vw 1.2rem; font-size:clamp(1rem,1.15vw,1.08rem); line-height:1.42}
  .article p{margin:0 0 .5em}
  .article h2{font-size:1.18em; line-height:1.2; margin:.9em 0 .2em}
  .article h2::before{display:none}
  .article > p.lead:first-of-type::first-letter, .article > div > p.lead:first-of-type::first-letter{font-size:2.7em; line-height:.86}
  figure{margin:.7em 0}
  figure.chart{padding:.4rem}
  figure.chart figcaption{margin-top:.45em}
  details.sources{margin-top:.8em; padding-top:.7em}
  .end{margin-top:.7em}
  .jfoot{padding:1.1rem 6vw}
}
@media screen and (max-width:860px){
  .hero.nophoto{padding-top:1rem}
  .hero.nophoto .in{padding-bottom:.8rem}
  .hero h1{font-size:1.45rem}
  .kicker{font-size:.58rem}
  .article{padding-top:.8rem; font-size:.98rem; line-height:1.4}
  .article p{margin-bottom:.45em}
  .article h2{font-size:1.12em; margin:.8em 0 .15em}
}

/* ---- Header + footer (Ömer, final): logo prominent in the black header, COLD PRESS under it,
        GERİ / HOME back to the brochure, no dates, no repeated brand line ---- */
.jhead{background:var(--night); color:#fff; text-align:center; padding:1rem 5vw 2.4rem; position:relative}
.jhead .jtop{display:flex; justify-content:space-between; align-items:center; min-height:2rem}
.jhead .back{font-family:var(--sans); font-size:.66rem; letter-spacing:.24em; color:var(--gold2); text-decoration:none;
  border:1px solid rgba(205,181,126,.45); padding:.45rem .9rem}
.jhead .back:hover{background:var(--gold); color:#171410}
.jhead .ctl{display:flex; gap:.45rem}
.jhead .brand{display:inline-flex; flex-direction:column; align-items:center; text-decoration:none; margin-top:.6rem}
.jhead .brand img{height:clamp(54px,6.5vw,78px); width:auto}
.jhead .brand span{font-family:var(--sans); font-size:.68rem; letter-spacing:.42em; text-indent:.42em; color:var(--gold2); margin-top:.9rem}
.jhead h1{font-weight:400; font-size:clamp(1.7rem,3.3vw,2.6rem); line-height:1.12; max-width:820px; margin:1.6rem auto 0; color:#fff}
.jhead h1:empty{display:none}
.jfoot .brandname{display:none}
.jfoot img{height:40px}
.jfoot .row{margin-bottom:0}

/* desktop: between the original (too spacious) and the compact version (too narrow) */
@media screen and (min-width:861px){
  .article{max-width:780px; padding:2.2rem 4vw 2.4rem; font-size:clamp(1.12rem,1.2vw,1.22rem); line-height:1.58}
  .article p{margin:0 0 .75em}
  .article h2{font-size:1.32em; margin:1.3em 0 .35em}
  figure{margin:1.1em 0}
  .jfoot{padding:1.8rem 6vw}
}
/* phone: keep the compact layout, header a little smaller */
@media screen and (max-width:860px){
  .jhead{padding:.8rem 5vw 1.7rem}
  .jhead .brand img{height:46px}
  .jhead .brand span{font-size:.6rem; margin-top:.7rem}
  .jhead h1{font-size:1.45rem; margin-top:1.2rem}
}
@media print{
  .jhead{background:none !important; color:var(--ink); padding:0 0 1rem}
  .jhead .jtop,.jhead .brand img{display:none}
  .jhead .brand span{color:var(--muted)}
  .jhead h1{color:var(--ink); margin-top:.6rem}
}

/* ---- final refinements (Ömer): HOME button larger on desktop, COLD PRESS more prominent,
        desktop reading text a little larger and wider; phone article layout unchanged ---- */
.jhead .brand span{font-size:.82rem; letter-spacing:.45em; text-indent:.45em}
@media screen and (min-width:861px){
  .jhead .back{font-size:.78rem; letter-spacing:.26em; padding:.6rem 1.25rem; border-width:1.5px}
  .jhead .brand span{font-size:1.02rem; margin-top:1rem}
  .article{max-width:860px; font-size:clamp(1.2rem,1.28vw,1.3rem)}
}
@media screen and (max-width:860px){
  .jhead .brand span{font-size:.7rem}
}

/* ---- last refinements: desktop reading text a little wider and larger; top bar lower;
        HOME and ENG/TR buttons share one style ---- */
.jhead .jtop .jbtn{font-family:var(--sans); font-size:.66rem; letter-spacing:.24em; color:var(--gold2);
  border:1px solid rgba(205,181,126,.45); padding:.45rem .9rem; background:none; line-height:1.2}
.jhead .back{line-height:1.2}
.jhead .jtop .jbtn:hover,.jhead .jtop .jbtn.on{background:var(--gold); color:#171410}
@media screen and (min-width:861px){
  .jhead{padding-top:1.9rem}
  .jhead .jtop .jbtn{font-size:.78rem; letter-spacing:.26em; padding:.6rem 1.25rem; border-width:1.5px}
  .article{max-width:920px; font-size:clamp(1.26rem,1.34vw,1.36rem)}
}

/* section headings bold, like the bold words in the text (Cormorant Garamond 700) */
.article h2{font-weight:700}