/* CodeCaffe homepage (/codecaffe/) and sign-up form. Laid out like The Royal Wire homepage, in the CodeCaffe palette.
   Everything is scoped under .cch so it does not clash with the WordPress theme. */
body.cc-page{margin:0;background:#FBF8F3}
.cch{--mast:#1F1510;--mast-rule:#C8892E;--ink:#1F1510;--paper:#FBF8F3;--tint:#F2E6D3;--rule:#E3D9CB;--accent:#12805C;--muted:#6F655D;--onink:#FBF8F3;
  --display:'IBM Plex Serif',Georgia,'Times New Roman',serif;--body:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;--label:'IBM Plex Sans Condensed','IBM Plex Sans','Arial Narrow',Arial,sans-serif;--mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;text-align:left;min-height:100vh}
.cch *,.cch *::before,.cch *::after{box-sizing:border-box}
.cch :where(h1,h2,h3,h4){font-family:var(--display);font-weight:700;color:var(--ink);margin:0;line-height:1.12;text-wrap:balance;letter-spacing:-.012em;text-transform:none}
.cch :where(p){margin:0 0 1em;text-wrap:pretty}
.cch :where(a){color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.cch :where(a:hover){color:var(--accent)}
.cch a:focus-visible,.cch .btn:focus-visible,.cch button:focus-visible{outline:2px solid var(--mast-rule);outline-offset:3px}
.cch .k{font-family:var(--label);font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--accent);margin:0}
.cch .wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.cch .col{max-width:720px;margin:0 auto}
.cch .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* masthead */
.cch .mast{background:var(--mast);color:#FBF8F3;padding:28px 0 40px;background-image:radial-gradient(120% 90% at 100% 0%,rgba(200,137,46,.16),transparent 60%)}
.cch .mast .top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:3px solid var(--mast-rule);padding-bottom:10px}
.cch .mast .k{color:#F2E6D3}
.cch .mast .name{font-family:var(--display);font-weight:700;font-size:clamp(50px,9.4vw,108px);line-height:.95;letter-spacing:-.035em;color:#FBF8F3;margin:22px 0 8px}
.cch .mast .tag{color:#E2C9A6;margin:0;font-size:20px;font-family:var(--display);font-style:italic;font-weight:400}
.cch .mast .intro{font-size:20px;color:#FBF8F3;max-width:640px;margin:22px 0 0}
.cch .mast .audience{color:#CBB89F;font-size:16px;max-width:680px;margin:10px 0 0}
.cch .actions{display:flex;flex-wrap:wrap;gap:12px}
.cch .mast .actions{margin-top:24px}
.cch .btn{display:inline-flex;align-items:center;min-height:46px;padding:10px 20px;border-radius:4px;font-family:var(--body);font-weight:600;font-size:16px;line-height:1.2;text-decoration:none;border:2px solid currentColor;cursor:pointer;background:transparent}
.cch .btn.solid{background:#FBF8F3;color:var(--mast);border-color:#FBF8F3}
.cch .btn.ghost{color:#FBF8F3}
.cch .btn.dark{background:var(--ink);color:var(--onink);border-color:var(--ink)}
.cch .btn.line{color:var(--ink);border-color:var(--ink)}
.cch .btn:hover{opacity:.86}
.cch .btn.solid:hover{color:var(--mast)}
.cch .btn.ghost:hover{color:#FBF8F3}
.cch .btn.dark:hover{color:var(--onink)}

/* what's in each issue */
.cch .brief{border-top:4px solid var(--ink);padding-top:12px}
.cch .contents{margin-top:44px}
.cch .contents h2{font-weight:700;font-size:clamp(28px,4vw,36px);margin:6px 0 14px}
.cch .brief .row{display:grid;grid-template-columns:150px 1fr;gap:16px;border-top:1px solid var(--rule);padding:14px 0}
.cch .brief .row b{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.3;color:var(--accent)}
.cch .brief .row p{margin:0;font-size:16px}
.cch .brief .note{font-size:14px;color:var(--muted);border-top:1px solid var(--rule);padding-top:12px;margin:0}

/* issue list */
.cch .empty{margin-top:18px}
.cch .group{display:flex;align-items:center;gap:14px;margin:30px 0 0;flex-wrap:wrap}
.cch .group h3{font-size:26px;color:var(--accent)}
.cch .group i{flex:1;height:3px;background:var(--accent);min-width:40px}
.cch .group span{flex-basis:100%;font-size:14px;color:var(--muted);margin-top:-6px}
.cch .issues{list-style:none;padding:0;margin:20px 0 40px;display:grid;gap:18px}
.cch .card{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;border-top:4px solid var(--ink);padding:18px 0 6px;margin:0}
.cch .card .no{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:58px;line-height:1;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.cch .card .k{color:var(--muted)}
.cch .card h2{font-size:30px;margin:6px 0 8px}
.cch .card h2 a{text-decoration:none}
.cch .card h2 a:hover{text-decoration:underline}
.cch .card .hook{font-size:18px;margin:0 0 6px}
.cch .card .sum{font-size:16px;color:var(--muted);margin:0 0 14px}
.cch .card .actions{margin-top:10px}
.cch .card .actions .btn{min-height:42px;padding:8px 16px;font-size:15px}
.cch .latest{display:inline-block;margin-left:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;background:var(--accent);color:#FFFFFF;padding:3px 8px;border-radius:3px;vertical-align:1px}

/* sign-up */
.cch .cc-subscribe,.cc-embed .cc-subscribe{background:var(--tint);border-radius:4px;padding:24px;margin:40px 0 0;scroll-margin-top:24px}
.cch .cc-subscribe h2{font-size:28px;margin-bottom:8px}
.cch .cc-form{margin-top:16px}
.cch .cc-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px;margin-bottom:14px}
.cch .cc-field{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600}
.cch .cc-field em{font-weight:400;font-style:normal;color:var(--muted)}
.cch .cc-field input{font:inherit;font-weight:400;font-size:17px;min-height:48px;padding:10px 12px;border:2px solid var(--ink);border-radius:4px;background:#FFFFFF;color:var(--ink);width:100%;margin:0;box-shadow:none}
.cch .cc-field input:focus{outline:2px solid var(--accent);outline-offset:2px}
.cch .cc-consent{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;margin:0 0 16px;cursor:pointer;font-weight:400}
.cch .cc-consent input{width:20px;height:20px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--ink)}
.cch .cc-small{font-size:13px;color:var(--muted);margin:14px 0 0}
.cch .cc-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.cch .cc-notice{font-size:16px;padding:12px 14px;border-radius:4px;margin:12px 0 4px;border-left:4px solid var(--accent);background:#FFFFFF}
.cch .cc-notice-err{border-left-color:#B42D1A}

.cch .fine{font-size:14px;color:var(--muted);margin:28px 0 48px}
.cch .foot{border-top:1px solid var(--rule);padding:18px 0 28px;font-size:14px;color:var(--muted)}
.cch .foot .wrap{display:flex;justify-content:space-between;gap:12px}
.cch .foot a{color:var(--muted)}

@media (max-width:640px){
  .cch{font-size:17px}
  .cch .brief .row{grid-template-columns:1fr;gap:4px}
  .cch .card{grid-template-columns:1fr;gap:4px}
  .cch .card .no{font-size:40px}
  .cch .card h2{font-size:26px}
  .cch .cc-fields{grid-template-columns:1fr}
}
.cch.cc-embed{min-height:0;background:transparent}
.cch.cc-embed .cc-subscribe{margin:24px 0}

/* tabs: Published issues | About */
.cch .tabs{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--rule)}
.admin-bar .cch .tabs{top:32px}
@media (max-width:782px){.admin-bar .cch .tabs{top:46px}}
@media (max-width:600px){.admin-bar .cch .tabs{top:0}}
.cch .tabs .wrap{display:flex;gap:4px;max-width:760px}
.cch .tab{display:inline-flex;align-items:center;min-height:52px;padding:0 16px;font-weight:600;font-size:16px;text-decoration:none;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.cch .tab:hover{color:var(--ink)}
.cch .tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--mast-rule)}
.cch .panel{padding-top:32px;scroll-margin-top:64px}
.cch.js .panel[hidden]{display:none}
.cch.js .season[hidden]{display:none}
.cch .panel>.contents:first-child{margin-top:8px}
.cch .lede{font-family:var(--display);font-size:22px;line-height:1.4}

/* season buttons */
.cch .seasons{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.cch .sbtn{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:6px 16px;border-radius:999px;border:2px solid var(--ink);font-weight:600;font-size:15px;text-decoration:none;color:var(--ink);background:transparent}
.cch .sbtn span{font-family:var(--label);font-weight:600;font-size:12px;font-weight:500;background:var(--tint);border-radius:999px;padding:1px 8px}
.cch .sbtn:hover{background:var(--tint);color:var(--ink)}
.cch .sbtn[aria-pressed="true"]{background:var(--ink);color:var(--onink)}
.cch .sbtn[aria-pressed="true"] span{background:var(--mast-rule);color:var(--mast)}
.cch .season{scroll-margin-top:64px}
.cch .group h2{font-size:26px;color:var(--accent)}
.cch .tab:first-child{padding-left:0}

/* ---------- shared CodeCaffe page shell (issue pages and extra pages) ---------- */
.cch{overflow-x:clip}
.cch .topbar{background:var(--mast);color:#FBF8F3}
.cch .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;flex-wrap:wrap}
.cch .topbar .brand{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.02em;color:#FBF8F3;text-decoration:none;letter-spacing:-.01em}
.cch .topbar nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cch .topbar nav a:not(.btn){color:#F2E6D3;text-decoration:none;font-size:15px;font-weight:500}
.cch .topbar nav a:not(.btn):hover{color:#FFFFFF;text-decoration:underline;text-decoration-color:var(--mast-rule)}
.cch .btn.sm{min-height:36px;padding:6px 14px;font-size:14px}
.cch .topbar .btn.solid{color:var(--mast)}
.cch .foot .wrap{flex-wrap:wrap}
.cch .foot span a{margin:0 2px}

/* issue pages: the built masthead runs full width, then a sticky bar of the issue's sections */
.cch-issue .cc-issue{background:transparent;padding-top:0}
.cch-issue .cc-issue>.cc-mast{margin:0 calc(50% - 50vw) 0;padding:28px calc(50vw - 50% + 16px) 36px;border-top:1px solid rgba(242,230,211,.18)}
.cch-issue .cc-issue>.cc-cover{margin-top:0}
.cch .secnav{position:sticky;top:0;z-index:6;background:var(--paper);border-bottom:1px solid var(--rule);margin:0 calc(50% - 50vw) 28px;padding:0 calc(50vw - 50%)}
.admin-bar .cch .secnav{top:32px}
@media (max-width:782px){.admin-bar .cch .secnav{top:46px}}
@media (max-width:600px){.admin-bar .cch .secnav{top:0}}
.cch .secnav ul{display:flex;gap:6px;list-style:none;margin:0;padding:10px 16px;overflow-x:auto;scrollbar-width:thin}
.cch .secnav li{margin:0}
.cch .secnav a{display:inline-flex;align-items:center;white-space:nowrap;padding:6px 14px;border-radius:999px;background:var(--tint);color:var(--ink);text-decoration:none;font-family:var(--body);font-size:14px;font-weight:600;min-height:36px}
.cch .secnav a:hover,.cch .secnav a:focus-visible{background:var(--ink);color:var(--onink)}
.cch .cc-section{scroll-margin-top:72px}
.admin-bar .cch .cc-section{scroll-margin-top:104px}

/* end of an issue */
.cch .cc-strip{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:4px solid var(--ink);border-bottom:1px solid var(--rule);padding:22px 0;margin:48px 0 0}
.cch .cc-strip h2{font-size:28px;margin:4px 0 6px}
.cch .cc-strip p{margin:0}
.cch .cc-strip>div{flex:1;min-width:260px}
.cch .cc-boxes{display:grid;grid-template-columns:1fr;gap:16px;margin:28px 0 0}
.cch .cc-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 28px;align-items:center;border-radius:6px;padding:24px 28px;background:var(--mast);color:#FBF8F3}
.cch .cc-box p:last-child{margin-bottom:0}
.cch .cc-box .btn{white-space:nowrap}
.cch .cc-box .k{color:var(--mast-rule)}
.cch .cc-box h2{color:#FBF8F3;font-size:24px;margin:6px 0 8px}
.cch .cc-box p{color:#E8D9C2;font-size:16px}
.cch .cc-box.alt{background:var(--tint);color:var(--ink)}
.cch .cc-box.alt h2{color:var(--ink)}
.cch .cc-box.alt p{color:var(--ink)}
.cch .cc-box.alt .k{color:var(--accent)}
.cch .pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--rule);margin-top:40px;padding:18px 0 0}
.cch .issue-main{padding-bottom:72px}
.cch .view-main{padding-bottom:72px}
.cch .pager a{display:flex;flex-direction:column;gap:4px;text-decoration:none;padding:12px 0}
.cch .pager a.next{text-align:right;align-items:flex-end}
.cch .pager b{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.25}
.cch .pager a:hover b{text-decoration:underline;text-decoration-color:var(--accent)}
.cch .cc-comments{margin:0 0 40px}
@media (max-width:640px){.cch .cc-box{grid-template-columns:1fr}.cch .cc-box .btn{justify-self:start}.cch .pager{grid-template-columns:1fr}.cch .pager a.next{text-align:left;align-items:flex-start}.cch .topbar nav{gap:12px}}

/* pop-up */
.cch dialog.cc-modal{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;border:0;border-radius:8px;padding:0;background:var(--paper);color:var(--ink);box-shadow:0 24px 64px rgba(0,0,0,.35)}
.cch dialog.cc-modal::backdrop{background:rgba(20,12,8,.62)}
.cch dialog.cc-modal .cc-subscribe{margin:0;border-radius:0;padding:28px 28px 24px}
.cch dialog.cc-modal .cc-subscribe h2{padding-right:40px}
.cch dialog.cc-modal .cc-fields{grid-template-columns:1fr}
.cch .cc-modal-close{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:28px;line-height:1;cursor:pointer;z-index:1}
.cch .cc-modal-close:hover,.cch .cc-modal-close:focus-visible{background:var(--rule)}

/* extra pages and forms */
.cch .view-main{padding-top:40px;padding-bottom:72px}
.cch .cc-page-h{font-weight:700;font-size:clamp(36px,6vw,54px);line-height:1.05;margin:4px 0 14px}
.cch .cc-time{display:inline-block;font-size:14px;font-weight:600;background:var(--tint);border-radius:999px;padding:5px 12px;margin:0 0 6px}
.cch .cc-qform{margin-top:20px}
.cch .cc-q{border:0;border-top:1px solid var(--rule);margin:0;padding:22px 0 20px;min-width:0}
.cch .cc-q-label{display:flex;gap:12px;align-items:baseline;font-family:var(--display);font-weight:600;font-size:20px;line-height:1.3;color:var(--ink);padding:0;margin:0 0 14px;width:100%}
.cch .cc-q-n{flex:0 0 auto;font-family:var(--body);font-size:13px;font-weight:600;color:var(--accent);min-width:18px}
.cch .cc-req{font-family:var(--body);font-weight:400;font-size:14px;color:var(--muted)}
.cch .cc-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 16px;padding-left:30px}
.cch .cc-opt{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.45;cursor:pointer;padding:6px 0}
.cch .cc-opt input{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--ink)}
.cch .cc-q textarea,.cch .cc-q .cc-field input{display:block;width:100%;font:inherit;font-size:17px;padding:10px 12px;border:2px solid var(--ink);border-radius:4px;background:#FFFFFF;color:var(--ink);margin:0 0 0 30px;max-width:calc(100% - 30px)}
.cch .cc-q .cc-field{display:block}
.cch .cc-q textarea:focus,.cch .cc-q input:focus{outline:2px solid var(--accent);outline-offset:2px}
.cch .cc-qform>.btn{margin-top:18px}
.cch .cc-qform .cc-consent{margin-top:18px}
@media (max-width:640px){.cch .cc-opts{grid-template-columns:1fr;padding-left:0}.cch .cc-q textarea,.cch .cc-q .cc-field input{margin-left:0;max-width:100%}}

/* private preview bar */
.cc-preview-bar{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#FFF4D6;border-top:1px solid #E3C766;color:#3A3000;font:600 13px/1.4 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;text-align:center;padding:8px 12px}
@media (max-width:480px){.cch .topbar .wrap{flex-wrap:nowrap}.cch .topbar nav a.about-link{display:none}.cch .topbar .brand{font-size:21px}}
