/* Xun Studio site styles.
   Layout: left-aligned editorial column on warm stone, forest green for emphasis bands and actions.
   Single light look by design; every colour is set explicitly. */
:root{
  color-scheme: light;
  --stone:#ECE7DF; --stone-2:#E2DBD0; --stone-3:#D6CEC1; --white:#FFFFFF; --paper:#F7F4EF;
  --ink:#16231E; --ink-2:#36443E; --mute:#55605B; --mute-2:#6A7370;
  --line:#D2C9BB; --line-2:#BFB5A5;
  --forest:#1E3A31; --forest-2:#28483D; --on-forest:#F1ECE4; --on-forest-2:#C8D3CD;
  --gold:#A8823E; --gold-dk:#7A5C27;
  /* names kept for shared report styles */
  --cream:#F7F4EF; --brass:#A8823E; --brass-hi:#7A5C27; --brass-dk:#7A5C27; --green:#1E3A31; --green-2:#28483D;
  --display:'Newsreader',Georgia,'Times New Roman',serif; --body:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--stone);color:var(--ink);font:17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--forest);text-underline-offset:3px} a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
img,svg{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(42px,5.6vw,72px);line-height:1.02}
h2{font-size:clamp(32px,3.8vw,50px);line-height:1.08}
h3{font-size:24px;line-height:1.25}
p{margin:0}
.eyebrow{font-size:14px;font-weight:500;color:var(--mute)}
.lede{font-size:19px;color:var(--ink-2);max-width:34em}
.muted{color:var(--mute)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;text-decoration:none;border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;font:600 16px/1.2 var(--body);border-radius:4px}
.btn:hover{background:var(--ink);color:var(--white)}
.btn.primary,.btn.dark{background:var(--forest);border-color:var(--forest);color:var(--on-forest)}
.btn.primary:hover,.btn.dark:hover{background:var(--forest-2);border-color:var(--forest-2);color:var(--white)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* header */
.site-h{padding-block:18px;border-bottom:1px solid transparent}
.site-h .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px}
.logo{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink)}
.logo b{font:500 26px/1 var(--display);letter-spacing:.12em}
.logo span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;font-size:15px}
.site-nav a{color:var(--ink-2);text-decoration:none;padding:6px 0}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink)}
.site-nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--forest)}
.site-nav .btn{padding:11px 18px;font-size:14px;color:var(--on-forest);box-shadow:none}

/* sections */
.section{padding-block:104px}
.band{border-top:1px solid var(--line)}
.forest{background:var(--forest);color:var(--on-forest)}
.forest h1,.forest h2,.forest h3{color:var(--on-forest)}
.forest .muted,.forest .lede,.forest .eyebrow{color:var(--on-forest-2)}
.forest a{color:var(--on-forest)}
.cream{background:var(--paper);color:var(--ink)}
.cream .muted,.cream .lede{color:var(--ink-2)}
.hero{display:flex;flex-wrap:wrap;gap:48px;align-items:center;padding-block:40px 96px}
.hero .copy{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:24px}
.hero .art{flex:1 1 480px;min-width:0;display:flex;justify-content:center}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}
.split>div{display:flex;flex-direction:column;gap:16px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.three>div{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line-2);padding-top:22px}
.three .k{font-size:14px;font-weight:600;color:var(--gold-dk)}
.stack{display:flex;flex-direction:column;gap:18px}
.row{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.row>*{flex:1 1 380px;min-width:0}
.faq{display:flex;flex-direction:column}
.faq details{border-top:1px solid var(--line-2);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--line-2)}
.faq summary{cursor:pointer;font:400 22px/1.35 var(--display);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--body);font-size:22px;color:var(--mute)}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;color:var(--ink-2);max-width:46em}

/* guide */
.guide{display:flex;flex-wrap:wrap;gap:72px;align-items:flex-start}
.toc{flex:1 1 220px;max-width:250px;display:flex;flex-direction:column;font-size:15px;position:sticky;top:20px}
.toc a{color:var(--ink);text-decoration:none;padding:11px 0;border-top:1px solid var(--line-2);display:flex;gap:14px}
.toc a:last-child{border-bottom:1px solid var(--line-2)}
.toc a:hover{color:var(--forest)}
.toc a span{font-family:var(--display);color:var(--gold-dk);min-width:22px}
.article{flex:999 1 600px;min-width:0;max-width:780px;display:flex;flex-direction:column;gap:80px}
.article section{display:flex;flex-direction:column;gap:20px;scroll-margin-top:20px}
.ring-no{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--gold-dk)}
.tbl{overflow-x:auto}
.tbl table{width:100%;min-width:600px;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;color:var(--mute);font-size:13px;font-weight:600;padding:10px 12px 10px 0}
.tbl td{padding:12px 12px 12px 0;border-top:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:1px solid var(--line)}
.tbl tr.hl td{color:var(--gold-dk);font-weight:600}
.tbl td:first-child{font-family:var(--display);font-size:17px}
.cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.box{background:var(--paper);padding:26px;display:flex;flex-direction:column;gap:8px;border-radius:6px}
.box p{color:var(--ink-2);font-size:15px}
.panel-cream{background:var(--forest);color:var(--on-forest);padding:44px;display:flex;flex-direction:column;gap:20px;border-radius:6px}
.panel-cream h2,.panel-cream strong{color:var(--on-forest)}
.panel-cream .ring-no{color:#D9B978}
.panel-cream p{color:var(--on-forest-2)}
.panel-cream label{color:var(--on-forest-2)!important}
.panel-cream #kgp{color:var(--on-forest)} .panel-cream #kb{color:var(--on-forest-2)!important}
.panel-cream #kuaForm>div:nth-child(2){border-color:var(--forest-2)!important}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;font-size:15px}
.cols3>div{display:flex;flex-direction:column;gap:6px;border-top:2px solid var(--gold);padding-top:12px}
.els{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;font-size:14px}
.els>div{padding-top:10px;border-top:3px solid}
.els b{font-family:var(--display);font-weight:400;font-size:19px;display:block}
.els span{color:var(--ink-2)}
.note{font-size:14px;color:var(--mute);border-top:1px solid var(--line);padding-top:20px}
.prose{display:flex;flex-direction:column;gap:16px;max-width:760px}
.prose h2{font-size:30px;margin-top:20px}
.prose ul{margin:0;padding-left:20px;color:var(--ink-2)}
.prose p{color:var(--ink-2)}

/* footer */
.site-f{border-top:1px solid var(--line);padding-block:40px 56px;font-size:14px;color:var(--mute)}
.site-f .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
.site-f nav{display:flex;gap:20px;flex-wrap:wrap}
.site-f a{color:var(--ink-2);text-decoration:none}
.site-f a:hover{color:var(--ink)}
.site-f .logo b{font-size:20px}

@media (max-width:820px){
  .section{padding-block:72px}
  .split,.cards2,.three,.cols3{grid-template-columns:minmax(0,1fr);gap:28px}
  .els{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toc{position:static;max-width:none}
  .panel-cream{padding:28px}
}