/* Shared styles for language deep-dive pages — Ocean palette */
:root {
  --deep:#0A2A43; --blue:#065A82; --teal:#1C7293; --mid:#21295C;
  --ice:#CADCFC; --cream:#F5F9FC; --ink:#17222E; --muted:#5D6B7A;
  --accent:#F2A541; --line:#D6E2EC; --ok:#2C8F5C;
  --card-shadow:0 4px 14px rgba(10,42,67,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:"Segoe UI","Calibri",system-ui,sans-serif;color:var(--ink);background:var(--cream);scroll-behavior:smooth}
h1,h2,h3,h4{font-family:Georgia,"Times New Roman",serif;margin:0;color:var(--deep)}

header.hero{background:linear-gradient(135deg,var(--deep) 0%,var(--blue) 60%,var(--teal) 100%);color:#fff;padding:60px 40px 80px;position:relative;overflow:hidden}
header.hero::before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:rgba(28,114,147,.35);top:-120px;right:-100px}
header.hero::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(242,165,65,.25);bottom:-80px;left:-60px}
.hero-inner{position:relative;max-width:1100px;margin:0 auto}
.eyebrow{letter-spacing:6px;font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;margin-bottom:14px}
header h1{font-size:clamp(34px,5vw,54px);color:#fff;line-height:1.05;margin-bottom:14px}
header p.lede{font-size:18px;color:var(--ice);max-width:780px;margin:0}
.tags{margin-top:14px}
.tags span{display:inline-block;font-size:11px;background:rgba(255,255,255,.15);color:#fff;padding:4px 10px;border-radius:14px;margin-right:6px;margin-bottom:6px;font-weight:600;letter-spacing:.5px}
.back{display:inline-block;margin-top:18px;padding:8px 14px;border-radius:8px;color:var(--deep);background:var(--accent);text-decoration:none;font-weight:700;font-size:13px}
.back:hover{background:#fff}

.page{max-width:1100px;margin:-50px auto 60px;padding:0 24px;position:relative;z-index:2}

section.chapter{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--card-shadow);overflow:hidden}
.chapter-head{padding:20px 26px 14px;border-bottom:4px solid var(--accent);background:linear-gradient(90deg,var(--deep) 0%,var(--blue) 100%);color:#fff}
.chapter-head h2{color:#fff;font-size:22px}
.chapter-head .eyebrow{margin:0 0 4px;color:var(--accent);font-size:11px;letter-spacing:4px}
.chapter-body{padding:24px 26px}

.basics{background:linear-gradient(135deg,#FFF7E8 0%,#FFEFD1 100%);border-left:5px solid var(--accent);padding:16px 20px;border-radius:8px;margin-bottom:18px}
.basics h4{font-size:13px;text-transform:uppercase;letter-spacing:3px;color:var(--accent);margin-bottom:8px;font-family:"Segoe UI",sans-serif;font-weight:700}
.basics ul{margin:8px 0 0;padding-left:22px;font-size:14px;line-height:1.6}
.basics strong{color:var(--deep)}

details.drill{margin-top:14px;border:1px solid var(--line);border-radius:10px;background:var(--cream);overflow:hidden}
details.drill>summary{cursor:pointer;padding:14px 18px;font-weight:700;color:var(--deep);background:#fff;list-style:none;display:flex;align-items:center;gap:10px;font-size:15px;user-select:none}
details.drill>summary::-webkit-details-marker{display:none}
details.drill>summary::before{content:"▸";color:var(--teal);font-size:14px;transition:transform .15s}
details.drill[open]>summary::before{transform:rotate(90deg)}
details.drill>summary:hover{background:#FBFDFF}
details.drill .drill-body{padding:16px 20px 20px;border-top:1px solid var(--line)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:12px}
.card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:8px;padding:14px 16px}
.card.teal{border-left-color:var(--teal)}.card.mid{border-left-color:var(--mid)}.card.accent{border-left-color:var(--accent)}.card.ok{border-left-color:var(--ok)}
.card h5{font-family:Georgia,serif;font-size:16px;color:var(--deep);margin-bottom:6px}
.card p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink)}

table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13.5px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--blue);color:#fff;font-weight:700;letter-spacing:.5px;font-size:12.5px}
tbody tr:nth-child(even){background:#FBFDFF}

pre{background:#0F2233;color:#E0EAF2;padding:14px 16px;border-radius:8px;overflow-x:auto;font-size:13px;line-height:1.5;font-family:Consolas,Monaco,monospace;margin-top:8px}
pre .kw{color:#82C8FF}
pre .str{color:#F2A541}
pre .com{color:#7B8FA1;font-style:italic}
pre .fn{color:#7CD8C7}
pre .tag{color:#FF9DAF}
pre .num{color:#C7B6FF}

.lede-p{font-size:15px;color:var(--muted);margin-bottom:16px;font-style:italic}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
@media(max-width:700px){.two-col{grid-template-columns:1fr}}
.pros-cons h6{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--teal);margin:0 0 8px;font-family:"Segoe UI",sans-serif}
.pros-cons ul{margin:0;padding-left:20px;font-size:14px;line-height:1.6}
.pros{background:#EAF7EE;border-left:4px solid var(--ok);padding:12px 16px;border-radius:6px}
.cons{background:#FCEEEA;border-left:4px solid #C0573B;padding:12px 16px;border-radius:6px}
.pros h6{color:var(--ok)}.cons h6{color:#C0573B}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:12px 0 18px}
.facts .f{background:#F1F7FC;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.facts .f .label{font-size:10.5px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;font-weight:700}
.facts .f .val{font-size:14.5px;color:var(--deep);font-weight:600;margin-top:3px;font-family:Georgia,serif}

.stack-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.stack-row span{font-size:11.5px;padding:3px 10px;border-radius:14px;background:var(--ice);color:var(--deep);font-weight:600}

.nav-other{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.nav-other a{padding:7px 12px;background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--deep);text-decoration:none;font-size:12.5px;font-weight:600}
.nav-other a:hover{background:var(--ice)}

footer{text-align:center;color:var(--muted);font-size:12px;padding:30px 20px 40px}