/* CodeCaffe issue styles. Everything is scoped to .cc-issue so it can sit inside any WordPress theme.
   Palette: Espresso, Roast, Crema, Paper, Steam, Line + Signal green and Crema gold accents. */
.cc-issue{
  --cc-espresso:#1F1510; --cc-roast:#4A2E1F; --cc-crema:#F2E6D3; --cc-paper:#FBF8F3;
  --cc-steam:#6F655D; --cc-line:#E3D9CB; --cc-signal:#12805C; --cc-gold:#C8892E;
  --cc-ink:#1F1510; --cc-bg:var(--cc-paper); --cc-surface:#FFFFFF; --cc-soft:#F6EFE4;
  --cc-display:'IBM Plex Serif',Georgia,'Times New Roman',serif;
  --cc-body:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --cc-label:'IBM Plex Sans Condensed','IBM Plex Sans','Arial Narrow',Arial,sans-serif;
  --cc-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  background:var(--cc-bg); color:var(--cc-ink); font-family:var(--cc-body);
  font-size:18px; line-height:1.65; font-weight:400; text-rendering:optimizeLegibility; font-kerning:normal; max-width:760px; margin:0 auto; padding:0 16px 48px;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme:dark){
  .cc-issue:not(.cc-light){--cc-ink:#F2E6D3; --cc-bg:#1A120D; --cc-surface:#24180F; --cc-soft:#2C1F16; --cc-line:#3E2E22; --cc-steam:#B3A595; --cc-signal:#4CC593; --cc-gold:#E2A64A}
}
.cc-issue *{box-sizing:border-box}
.cc-issue img{max-width:100%; height:auto; display:block}
.cc-issue a{color:var(--cc-signal); text-underline-offset:3px; text-decoration-thickness:1px}
.cc-issue a:hover{text-decoration-thickness:2px}
.cc-issue p{margin:0 0 1em}
.cc-issue h1,.cc-issue h2,.cc-issue h3{font-family:var(--cc-display); color:var(--cc-ink); line-height:1.12; letter-spacing:-.012em; text-wrap:balance}
.cc-issue h3{font-size:24px; font-weight:600; margin:1.6em 0 .5em}
.cc-issue ul,.cc-issue ol{padding-left:1.2em; margin:0 0 1em}
.cc-issue li{margin:.3em 0}
.cc-issue strong{font-weight:600}
.cc-mono{font-family:var(--cc-mono)}

/* masthead */
.cc-mast{background:var(--cc-espresso); color:var(--cc-crema); margin:0 -16px 32px; padding:28px 24px 32px}
.cc-mast .cc-brand{font-family:var(--cc-label); font-weight:600; font-size:14px; letter-spacing:.12em; text-transform:uppercase; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-bottom:1px solid rgba(242,230,211,.25); padding-bottom:12px; margin-bottom:24px}
.cc-mast .cc-brand b{color:#fff; letter-spacing:.06em}
.cc-mast h1{color:var(--cc-crema); font-size:clamp(36px,6.4vw,56px); font-weight:700; margin:0 0 16px; letter-spacing:-.02em; line-height:1.06}
.cc-mast .cc-hook{font-size:20px; color:#E8D9C2; margin:0 0 18px; max-width:36em}
.cc-mast .cc-byline{font-family:var(--cc-body); font-weight:500; font-size:15px; color:#CBB89F}
.cc-mast .cc-byline a{color:var(--cc-crema)}
.cc-cover{margin:-32px -16px 32px}
.cc-cover figcaption{font-size:13px; color:var(--cc-steam); padding:8px 16px 0}

/* sections */
.cc-section{margin:56px 0 0; scroll-margin-top:24px}
.cc-kicker{font-family:var(--cc-mono); font-weight:500; font-size:14px; letter-spacing:.04em; color:var(--cc-signal); margin:0 0 6px}
.cc-section>h2{font-size:clamp(30px,4.8vw,42px); font-weight:700; letter-spacing:-.02em; margin:0 0 20px; padding-top:12px; border-top:3px solid var(--cc-ink)}
.cc-source{font-size:14px; color:var(--cc-steam); border-top:1px solid var(--cc-line); padding-top:10px; margin-top:20px}
.cc-check{background:#FFE9A8; color:#5A3B00; padding:0 4px; border-radius:3px; font-family:var(--cc-mono); font-size:.85em}

/* callout, note, canada */
.cc-callout{font-family:var(--cc-display); font-weight:600; font-size:23px; line-height:1.35; border-left:4px solid var(--cc-gold); padding:4px 0 4px 18px; margin:0 0 24px}
.cc-note{background:var(--cc-soft); border:1px solid var(--cc-line); border-radius:6px; padding:18px 20px; margin:24px 0}
.cc-note h4{font-family:var(--cc-label); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 8px; color:var(--cc-roast)}
.cc-canada{border-top:4px solid #C8102E}
.cc-canada h4{color:#C8102E}

/* figure */
.cc-figure{margin:24px 0}
.cc-figure figcaption{font-size:14px; color:var(--cc-steam); margin-top:8px}
@media (min-width:700px){.cc-figure.cc-right{float:right; width:46%; margin:6px 0 16px 24px}.cc-figure.cc-left{float:left; width:46%; margin:6px 24px 16px 0}}
.cc-clear,.cc-note,.cc-board,.cc-claims,.cc-shots,.cc-table-wrap,.cc-stats,.cc-pour,.cc-qa,.cc-cta,.cc-receipt{clear:both}

/* receipt */
.cc-receipt{background:var(--cc-surface); border:1px dashed var(--cc-steam); border-radius:4px; padding:20px 22px; margin:28px 0; font-size:15px}
.cc-receipt h3{font-family:var(--cc-label); font-weight:600; font-size:15px; letter-spacing:.14em; text-transform:uppercase; text-align:center; margin:0 0 14px}
.cc-issue .cc-receipt ol{list-style:none; padding:0; margin:0}
.cc-receipt li{display:grid; grid-template-columns:auto 1fr; gap:4px 10px; padding:8px 0; border-bottom:1px dotted var(--cc-line)}
.cc-receipt li b{font-family:var(--cc-mono); font-weight:500; white-space:nowrap}
.cc-receipt li a{color:inherit; text-decoration:none}
.cc-receipt li span{color:var(--cc-ink)}
.cc-receipt .cc-total{display:flex; justify-content:space-between; font-family:var(--cc-mono); padding-top:12px; font-weight:500}
@media (max-width:560px){.cc-receipt li{grid-template-columns:1fr}}
.cc-signoff{font-family:var(--cc-mono); font-size:14px; margin-top:8px}
.cc-signoff b{display:block; font-family:var(--cc-display); font-size:20px; font-weight:600}

/* stats + key figures */
.cc-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:24px 0}
.cc-stat{background:var(--cc-surface); border:1px solid var(--cc-line); border-radius:6px; padding:16px}
.cc-stat b{display:block; font-family:var(--cc-display); font-size:34px; font-weight:700; line-height:1; margin-bottom:6px; font-variant-numeric:tabular-nums}
.cc-stat span{font-size:15px; color:var(--cc-steam)}

/* table */
.cc-table-wrap{overflow-x:auto; margin:24px 0}
.cc-table{border-collapse:collapse; width:100%; font-size:15px}
.cc-table caption{text-align:left; font-weight:600; margin-bottom:8px}
.cc-table th{font-family:var(--cc-label); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; text-align:left; border-bottom:2px solid var(--cc-ink); padding:8px}
.cc-table td{border-bottom:1px solid var(--cc-line); padding:8px; vertical-align:top}
.cc-table .cc-num{text-align:right; font-variant-numeric:tabular-nums}

/* evidence claims */
.cc-issue .cc-claims{list-style:none; padding:0; margin:24px 0}
.cc-claim{background:var(--cc-surface); border:1px solid var(--cc-line); border-radius:6px; padding:16px 18px; margin:0 0 12px}
.cc-claim p{margin:0 0 8px}
.cc-claim .cc-claim-text{font-weight:600}
.cc-beans{font-family:var(--cc-mono); font-size:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 8px}
.cc-beans i{font-style:normal; letter-spacing:3px; color:var(--cc-gold); font-size:18px}
.cc-beans em{font-style:normal; text-transform:uppercase; letter-spacing:.08em}
.cc-claim small{display:block; color:var(--cc-steam); font-size:14px}
.cc-legend{font-family:var(--cc-mono); font-size:13px; color:var(--cc-steam)}

/* terms on the board */
.cc-board{background:var(--cc-espresso); color:var(--cc-crema); border-radius:6px; padding:22px 24px; margin:28px 0}
.cc-board h3{color:var(--cc-crema); font-family:var(--cc-label); font-weight:600; font-size:14px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 12px}
.cc-board dl{margin:0}
.cc-board dt{font-family:var(--cc-mono); color:#F7C977; margin-top:12px}
.cc-board dd{margin:2px 0 0; font-size:16px}
.cc-board a{color:#8FE3BC}

/* the pour */
.cc-pour{background:var(--cc-espresso); color:var(--cc-crema); border-radius:8px; padding:28px 24px; margin:0}
.cc-pour .cc-big{font-family:var(--cc-display); font-size:clamp(64px,13vw,104px); font-weight:700; line-height:.95; color:#fff}
.cc-pour .cc-big-label{font-family:var(--cc-label); font-weight:600; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:#F7C977; margin:8px 0 6px}
.cc-pour p{color:#E8D9C2}
.cc-pour h3{color:var(--cc-crema); font-size:20px; margin:28px 0 12px}
.cc-issue .cc-bars{margin:0; padding:0; list-style:none}
.cc-bars li{display:grid; grid-template-columns:minmax(110px,32%) 1fr auto; gap:12px; align-items:center; padding:6px 0; font-size:15px}
.cc-bars .cc-bar{height:14px; background:rgba(242,230,211,.15); border-radius:2px; overflow:hidden}
.cc-bars .cc-bar i{display:block; height:100%; background:#F7C977}
.cc-bars b{font-family:var(--cc-mono); font-weight:500}
.cc-pour .cc-stats .cc-stat{background:rgba(255,255,255,.06); border-color:rgba(242,230,211,.18)}
.cc-pour .cc-stat b{color:#fff}
.cc-pour .cc-stat span{color:#D9C7AE}
.cc-pour .cc-source{color:#BBA88F; border-color:rgba(242,230,211,.2)}
.cc-pour a{color:#8FE3BC}

/* two shots */
.cc-shots{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0}
@media (max-width:640px){.cc-shots{grid-template-columns:1fr}}
.cc-shot{background:var(--cc-surface); border:1px solid var(--cc-line); border-top:5px solid var(--cc-roast); border-radius:6px; padding:18px}
.cc-shot.cc-b{border-top-color:var(--cc-signal)}
.cc-shot .cc-shot-label{font-family:var(--cc-label); font-weight:600; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--cc-steam)}
.cc-shot h3{font-size:21px; margin:6px 0 10px}
.cc-shot ul{font-size:16px}
.cc-shot small{display:block; color:var(--cc-steam); font-size:14px}

/* refill */
.cc-issue .cc-resources{list-style:none; padding:0; margin:16px 0 24px}
.cc-resources li{border-bottom:1px solid var(--cc-line); padding:12px 0}
.cc-resources .cc-rtype{font-family:var(--cc-label); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--cc-steam); margin-left:8px}
.cc-resources p{margin:4px 0 0; font-size:16px}

/* barista */
.cc-barista-card{display:flex; gap:16px; align-items:center; margin:0 0 20px}
.cc-barista-card img{width:88px; height:88px; border-radius:50%; object-fit:cover}
.cc-barista-card b{font-family:var(--cc-display); font-size:22px; display:block}
.cc-barista-card span{color:var(--cc-steam); font-size:15px}
.cc-qa dt{font-weight:600; margin-top:20px}
.cc-qa dt::before{content:"Q. "; font-family:var(--cc-mono); color:var(--cc-signal)}
.cc-qa dd{margin:6px 0 0}
.cc-quote{font-family:var(--cc-display); font-weight:600; font-style:italic; font-size:26px; line-height:1.3; margin:28px 0; padding:0 0 0 20px; border-left:4px solid var(--cc-signal)}
/* Many themes (Webon included) draw their own quote mark, background or frame on blockquotes: the left bar is the only mark. */
.cc-issue blockquote,.cc-issue blockquote.cc-quote{quotes:none; background:none; box-shadow:none; border-top:0; border-right:0; border-bottom:0; border-radius:0; min-height:0; text-indent:0}
.cc-issue blockquote.cc-quote{border-left:4px solid var(--cc-signal); padding:2px 0 2px 20px; margin:28px 0; color:var(--cc-ink)}
.cc-issue blockquote::before,.cc-issue blockquote::after,.cc-issue blockquote p::before,.cc-issue blockquote p::after,.cc-issue blockquote footer::before,.cc-issue blockquote footer::after{content:none!important; display:none!important; background:none!important}
.cc-issue blockquote p{margin:0 0 .4em; font:inherit; color:inherit; padding:0}
.cc-quote footer{font-family:var(--cc-body); font-style:normal; font-weight:500; font-size:14px; color:var(--cc-steam); margin-top:10px}

/* cta + footer */
.cc-cta{background:var(--cc-soft); border:1px solid var(--cc-line); border-radius:8px; padding:22px; margin:32px 0}
.cc-cta h3{margin:0 0 6px}
.cc-btn{display:inline-block; background:var(--cc-espresso); color:var(--cc-crema)!important; text-decoration:none; padding:11px 18px; border-radius:4px; font-weight:600; margin-top:8px}
.cc-foot{margin-top:56px; padding-top:20px; border-top:3px solid var(--cc-ink); font-size:15px}
.cc-foot .cc-next{font-family:var(--cc-display); font-weight:600; font-size:22px; margin:0 0 10px}
.cc-made{font-size:14px; color:var(--cc-steam)}
.cc-archive-note{font-family:var(--cc-body); font-weight:500; font-size:14px; background:var(--cc-soft); border:1px solid var(--cc-line); padding:10px 14px; border-radius:4px; margin:0 0 24px}

/* archive page */
.cc-issue .cc-issues{list-style:none; padding:0; margin:24px 0}
.cc-issues li{border-top:1px solid var(--cc-line); padding:18px 0}
.cc-issues .cc-no{font-family:var(--cc-label); font-weight:600; letter-spacing:.06em; font-size:14px; color:var(--cc-signal)}
.cc-issues h3{margin:4px 0 6px; font-size:24px}
.cc-issues h3 a{color:var(--cc-ink); text-decoration:none}
.cc-issues p{margin:0; font-size:16px; color:var(--cc-steam)}
.cc-season{font-family:var(--cc-label); font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin:40px 0 0; color:var(--cc-roast)}

@media print{
  .cc-issue{max-width:none; padding:0; font-size:11pt; background:#fff}
  .cc-section{break-inside:auto}
  .cc-pour,.cc-board,.cc-shot,.cc-claim,.cc-stat,.cc-receipt{break-inside:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .cc-mast{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}