/* ================= friendly design layer ================= */
:root{
  --paper:#fdf8f1; --card:#fffdf9; --ink:#33424a; --muted:#6d7c82; --line:#ecdfc8;
  --primary:#17708a; --primary-dark:#0e5468; --primary-soft:#e2f0f3;
  --accent:#ef6f4c; --accent-dark:#d8552f; --accent-soft:#ffefe3;
  --radius:22px;
  --shadow:0 2px 6px rgba(122,94,60,.06),0 14px 34px rgba(122,94,60,.09);
  --shadow-lg:0 3px 10px rgba(122,94,60,.08),0 28px 64px rgba(122,94,60,.14);
}
body{line-height:1.72;background:var(--paper)}
h1,h2,h3,h4{color:var(--primary-dark)}
a{color:var(--primary)}
/* --- header: softer, calmer --- */
.site-head{background:rgba(253,248,241,.88);border-bottom:1px solid rgba(236,223,200,.9);box-shadow:0 2px 14px rgba(122,94,60,.05)}
.site-head.scrolled{box-shadow:0 8px 28px rgba(122,94,60,.1)}
.head-in{padding:11px 22px}
.main-nav a{border-radius:999px;padding:9px 15px}
.main-nav a.active{background:var(--accent-soft);color:var(--accent-dark)}
.btn{border-radius:999px;padding:14px 26px;font-size:15.5px;letter-spacing:.01em}
.btn-primary{background:var(--accent);box-shadow:0 10px 24px rgba(239,111,76,.3)}
.btn-primary:hover{background:var(--accent-dark);box-shadow:0 14px 30px rgba(239,111,76,.36)}
.btn-ghost{border-color:#e6d5b8;border-radius:999px}
.eyebrow{border-radius:999px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#ffd9c4;backdrop-filter:blur(4px)}
/* --- hero: warmer, softer, friendlier --- */
.hero{background:
  radial-gradient(900px 420px at 88% -10%, rgba(255,214,180,.22), transparent 62%),
  radial-gradient(700px 380px at -8% 115%, rgba(255,255,255,.12), transparent 60%),
  linear-gradient(135deg,#17708a 0%,#0e5468 58%,#0c4351 100%)}
.hero::after{background-image:radial-gradient(rgba(255,255,255,.14) 1.6px, transparent 1.6px);background-size:22px 22px;height:120px}
.hero h1{letter-spacing:-.01em}
.hero p.lead{color:#d7ecef;line-height:1.7}
.hero-stats .hs{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:12px 20px;backdrop-filter:blur(4px)}
.hero-fig{border-radius:26px}
.hero-fig img{border-radius:26px;height:410px}
.hero-fig figcaption{border-radius:0 0 26px 26px}
/* --- sections + cards --- */
.section.alt{background:#faf2e6}
.card,.feature,.cat-card{border-radius:var(--radius);border-color:#f0e4cd;box-shadow:var(--shadow)}
.card:hover,.cat-card:hover{transform:translateY(-6px)}
.card-fig img{border-radius:0}
.chip{border-radius:999px;background:var(--primary-soft);color:var(--primary-dark)}
.sec-head h2{display:inline-block;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M2 8c14-8 26 6 40-1s26 5 40-2 24 4 36 0' fill='none' stroke='%23ef6f4c' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:bottom 2px left;background-size:min(180px,70%) 10px;padding-bottom:16px}
.sec-head.center h2{background-position:bottom 2px center}
.sec-head p{font-size:1.06rem}
/* --- pro band + cta --- */
.pro-band{padding:64px 0}
.pro-band{background:
  radial-gradient(700px 340px at 92% 8%, rgba(255,214,180,.16), transparent 60%),
  linear-gradient(120deg,#0c4351 0%,#0e5468 55%,#13708a 100%)}
.pro-stats div{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);border-radius:18px}
.pro-fig{border-radius:24px}
.pro-fig img{border-radius:24px}
.pro-cta{border-radius:24px;background:linear-gradient(120deg,#0c4351,#13708a)}
.pro-cta .btn-primary{background:var(--accent)}
/* --- article pages --- */
.article-hero{border-radius:24px}
.article-hero img{border-radius:24px}
.prose{line-height:1.78}
.prose strong{color:var(--primary-dark)}
.callout{border-radius:20px;background:#fff3e6;border-color:#f6d9bf}
.check{border-radius:14px;border-color:#f0e4cd}
.tbl{border-radius:18px;border-color:#f0e4cd}
.tbl th{background:var(--primary);border-radius:0}
.author-box{border-radius:22px;border-color:#f0e4cd}
/* --- page heads --- */
.page-head{background:
  radial-gradient(800px 380px at 90% -20%, rgba(255,214,180,.2), transparent 60%),
  linear-gradient(135deg,#17708a,#0e5468)}
/* --- newsletter --- */
.news{background:linear-gradient(180deg,#ffefe3,#fdf8f1)}
.news-in{background:var(--card);border:1px solid #f3ddc2;border-radius:26px;padding:34px 38px;box-shadow:var(--shadow)}
/* --- footer --- */
.site-foot{border-radius:30px 30px 0 0;margin:0 14px}
.foot-grid{padding-top:8px}
/* --- chunk2 --- */
/* ===== spacing & alignment fixes ===== */
.page-head{padding:56px 0 52px}
.page-head .breadcrumb{display:none}
.page-breadcrumb{max-width:var(--maxw);margin:0 auto;padding:16px 22px 0;font-size:13px;color:var(--muted)}
.page-breadcrumb a{color:var(--muted);font-weight:600}
.page-breadcrumb a:hover{color:var(--primary)}
.page-breadcrumb .sep{margin:0 8px;color:#cbbda3}
.article-layout{max-width:var(--maxw)}
.team-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 20px}
.team-card img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;box-shadow:var(--shadow)}
.team-card h3{margin:0;font-size:1.08rem}
.team-card .ab-role{font-size:12px;color:var(--accent-dark);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.team-card p{font-size:.88rem;color:var(--muted);margin:0}
.related-band{background:#faf2e6;border-block:1px solid #f0e4cd}
.related-band .sec-head{margin-bottom:30px}
/* feature-pro band rhythm (matches .section) */
.pro-band{padding:64px 0}
.news{padding:52px 0}
@media (max-width:860px){
  .pro-band{padding:48px 0}
  .news{padding:44px 0}
}
.contact-form{border-radius:22px;border-color:#f0e4cd}
.contact-form input,.contact-form select,.contact-form textarea{border-radius:12px;border-color:#ecdfc8}
.form-note{font-size:13.5px}
.pro-card{border-radius:22px;border-color:#f0e4cd}
.stat-row .stat{border-radius:18px;border-color:#f0e4cd}
.page-body{line-height:1.75}
.mobile-nav-body a{border-radius:999px}
.mobile-nav-foot{border-top-color:#ecdfc8}
@media (max-width:860px){
  .mobile-nav.open{background:var(--paper)}
  .foot-bottom{justify-content:center;text-align:center}
  .site-foot{border-radius:26px 26px 0 0;margin:0 8px}
}
@media (max-width:520px){
  .news-in{padding:26px 22px}
  .hero-fig img{height:240px}
}


/* ================= motion & ux layer ================= */
.progress-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;background:linear-gradient(90deg,var(--accent),#ffb199);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.to-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;background:var(--primary);color:#fff;border:none;cursor:pointer;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .3s,transform .3s cubic-bezier(.34,1.56,.64,1),background .2s;z-index:90;font-size:19px;line-height:1}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--accent);transform:translateY(-3px)}
.card,.cat-card{position:relative}
.card::before,.cat-card::before{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(239,111,76,.13),transparent 65%);opacity:0;transition:opacity .35s;pointer-events:none;z-index:2}
.card:hover::before,.cat-card:hover::before{opacity:1}
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-90%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .65s cubic-bezier(.16,1,.3,1);pointer-events:none}
.btn-primary:hover::after{left:140%}
img{opacity:0;transition:opacity .5s ease}
img.loaded{opacity:1}
noscript img,.no-js img{opacity:1!important}
.grid .card.reveal:nth-child(2){transition-delay:.07s}
.grid .card.reveal:nth-child(3){transition-delay:.14s}
.grid .card.reveal:nth-child(4){transition-delay:.21s}
/* --- article layout: toc + prose --- */
.article-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px;max-width:1080px;margin:0 auto;padding:0 22px;align-items:start}
.toc{position:sticky;top:96px;align-self:start;font-size:14px;max-height:calc(100dvh - 130px);overflow-y:auto;padding:6px 0}
.toc h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 10px;font-family:var(--sans)}
.toc a{display:block;padding:6px 12px;border-radius:9px;color:var(--muted);border-left:2px solid #eee0c8;line-height:1.4}
.toc a:hover{color:var(--primary-dark);background:var(--primary-soft);border-left-color:var(--accent)}
.toc a.lvl3{padding-left:26px;font-size:13px}
.toc a.current{color:var(--primary-dark);background:var(--primary-soft);border-left-color:var(--accent);font-weight:600}
.prose{max-width:760px;margin:36px 0 0}
.dek{font-family:var(--serif);font-style:italic;font-size:1.18rem;color:var(--muted);line-height:1.6;max-width:660px;margin:16px auto 0}
.share{display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:760px;margin:34px auto 0;padding-top:22px;border-top:1px dashed var(--line)}
.share span{font-size:13.5px;color:var(--muted);font-weight:600}
.copy-link{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid #e6d5b8;border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--primary-dark);cursor:pointer;transition:.2s}
.copy-link:hover{border-color:var(--accent);color:var(--accent-dark)}
.copy-link svg{width:15px;height:15px}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:760px;margin:52px auto 0}
.pn-card{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid #f0e4cd;border-radius:20px;padding:20px 22px;box-shadow:var(--shadow);transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s}
.pn-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pn-card .pn-k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dark)}
.pn-card .pn-t{font-family:var(--serif);font-size:1.08rem;color:var(--primary-dark);line-height:1.35}
.pn-card.next{text-align:right}
@media (max-width:1020px){
  .article-layout{grid-template-columns:1fr}
  .toc{display:none}
  .prose{margin-inline:auto}
}
@media (max-width:560px){
  .prevnext{grid-template-columns:1fr}
  .pn-card.next{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .btn-primary::after{display:none}
  img{opacity:1;transition:none}
  .grid .card.reveal{transition-delay:0s!important}
}