/* Resources: hub, guides, insights and the article template. Builds on site.css and pages.css. */

/* ===== page head, shared ===== */
.gh{padding:calc(var(--header-h) + clamp(56px,7vw,96px)) 0 clamp(36px,5vw,56px)}
.gh .container{display:grid;gap:32px}
.gh-in{display:grid;gap:20px;justify-items:start;max-width:820px}
.gh h1{font:600 clamp(40px,5vw,64px)/1.02 var(--sans);letter-spacing:-.04em;text-wrap:balance}
.gh .lead{max-width:56ch}
.js .gh-in>*{opacity:0;transform:translateY(10px);animation:art-rise .7s var(--ease-enter) forwards;animation-delay:calc(var(--s,0) * 90ms + 60ms)}
.gh-in>:nth-child(2){--s:1}.gh-in>:nth-child(3){--s:2}.gh-in>:nth-child(4){--s:3}
.gh-meta{display:flex;flex-wrap:wrap;gap:12px 36px;padding-top:18px;border-top:1px solid var(--line);font:600 15px/22px var(--sans)}
.gh-meta span{display:grid;gap:2px}
.gh-meta small{font:450 12px/16px var(--mono);color:var(--ink-muted)}

/* filter chips */
.flt{display:flex;flex-wrap:wrap;gap:8px}
.flt button{height:38px;padding:0 16px;border-radius:999px;font:500 14.5px/1 var(--sans);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-strong);transition:background var(--d-quick) var(--ease),color var(--d-quick) var(--ease)}
.flt button:hover{background:var(--paper)}
.flt button[aria-pressed="true"]{background:var(--brand);color:#fff;box-shadow:none}
.flt-empty{padding:28px 0;color:var(--ink-muted)}
.is-out{display:none!important}

/* ===== guide cards ===== */
.gds{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.gd{position:relative;isolation:isolate;display:grid;grid-template-rows:auto auto 1fr auto auto;gap:12px;padding:24px;border-radius:var(--r-lg);background:#FFFFFFA6;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);overflow:hidden;transition:transform var(--d-base) var(--ease),box-shadow var(--d-base) var(--ease),background var(--d-base) var(--ease)}
.gd::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),#0266FC14,transparent 65%);opacity:0;transition:opacity var(--d-gentle) var(--ease)}
.gd:hover{transform:translateY(-4px);background:var(--paper);box-shadow:var(--shadow-3)}
.gd:hover::before{opacity:1}
.js .stg.in>.gd:hover{transform:translateY(-4px)}
.gd-top{display:flex;justify-content:space-between;align-items:center}
.gd-top .ic{width:34px;height:34px;color:var(--ink)}
.gd-top span{font:450 12px/1 var(--mono);color:var(--ink-muted)}
.gd h3{font:600 22px/1.2 var(--sans);letter-spacing:-.02em;margin-top:6px}
.gd p{font-size:15px;line-height:22px;color:var(--ink-muted)}
.gd-r{display:flex;flex-wrap:wrap;gap:6px}
.gd-r em{font:500 12px/1 var(--sans);font-style:normal;padding:6px 9px;border-radius:7px;background:var(--mist);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.go{display:inline-flex;align-items:center;gap:6px;font:600 15px/1 var(--sans);color:var(--signal)}
.gd .go .arr{transition:transform var(--d-base) var(--ease)}
.gd:hover .go .arr{transform:translateX(4px)}

/* ===== a guide ===== */
.gl{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
.gtoc{position:sticky;top:calc(var(--header-h) + 40px);display:grid;gap:2px;padding-left:18px}
.gtoc p{margin-bottom:10px;font:600 13px/18px var(--sans);color:var(--ink-muted)}
.gtoc a{display:grid;grid-template-columns:28px 1fr;gap:6px;padding:8px 0;font-size:14.5px;line-height:20px;color:var(--ink-muted);transition:color var(--d-quick) var(--ease)}
.gtoc a span{font:500 12px/20px var(--mono)}
.gtoc a:hover{color:var(--ink)}
.gtoc a.on{color:var(--ink);font-weight:600}
.gtoc a.on span{color:var(--signal)}
.gtoc-bar{position:absolute;left:0;top:30px;bottom:0;width:2px;border-radius:1px;background:var(--line)}
.gtoc-bar i{position:absolute;left:0;top:0;width:100%;height:var(--p,0%);border-radius:1px;background:var(--signal);transition:height .3s var(--ease)}
.gsteps{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,72px)}
.gs{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 20px;scroll-margin-top:calc(var(--header-h) + 32px)}
.gs-n{font:500 14px/34px var(--mono);color:var(--signal)}
.gs-c{display:grid;gap:12px;max-width:62ch}
.gs h2{font:600 clamp(24px,2.4vw,30px)/1.15 var(--sans);letter-spacing:-.025em}
.gs p{font-size:17px;line-height:27px;color:var(--ink-2)}
.tip{padding:14px 16px;border-radius:12px;background:var(--signal-soft);font-size:15.5px!important;line-height:23px!important;color:var(--ink)!important}
.tip b{margin-right:8px;color:var(--signal)}
.gs-v{grid-column:2;margin-top:22px;max-width:620px}
@media (max-width:900px){.gl{grid-template-columns:1fr}.gtoc{display:none}}
@media (max-width:560px){.gs{grid-template-columns:minmax(0,1fr)}.gs-v{grid-column:1}}

/* step visuals */
.gv{display:grid;gap:0;border-radius:18px;background:var(--paper);box-shadow:0 0 0 1px #01182F0F,0 24px 48px -32px #01182F59;overflow:hidden;font-size:14px}
.gv-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.gv-h b{font:600 13.5px/18px var(--sans)}
.gv-h small{font:450 12px/1 var(--mono);color:var(--ink-muted)}
.gv>:not(.gv-h){padding:16px 18px}
.gv-rule{font:500 17px/1.6 var(--sans);letter-spacing:-.01em}
.gv-rule span{padding:1px 4px;margin:0 -2px;border-radius:6px;background:var(--t);box-shadow:inset 0 -2px 0 var(--c)}
.gv-rule span[data-c="a"]{--c:#0059E0;--t:#D6E4FF}.gv-rule span[data-c="c"]{--c:#23395E;--t:#CFD8E8}.gv-rule span[data-c="t"]{--c:#0F7F82;--t:#C6EDEC}.gv-rule span[data-c="p"]{--c:#8A6A4A;--t:#F0DFC6}
.gv-t{display:grid;font:450 13px/18px var(--mono)}
.gv-t>div{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.gv-t>div:first-child{border-top:0;padding-top:0;font:600 11px/14px var(--sans);letter-spacing:.04em;color:var(--ink-muted)}
.gv-t .ch{color:var(--signal);font-weight:600}
.gv-k{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.gv-k>div{display:grid;gap:4px;padding:12px 14px;border-radius:12px;background:var(--mist)}
.gv-k b{font:500 24px/1 var(--mono);letter-spacing:-.03em}
.gv-k .hi b{color:var(--signal)}
.gv-k small{font-size:12.5px;line-height:17px;color:var(--ink-muted)}
.gv-rows{display:grid}
.gv-rows>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line)}
.gv-rows>div:first-child{border-top:0;padding-top:0}
.gv-rows span{color:var(--ink-2)}
.gv-rows b{font:450 13px/20px var(--mono);font-weight:450}
.gv-l{display:grid}
.gv-l>div{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.gv-l>div:first-child{border-top:0;padding-top:0}
.gv-l .t{min-width:30px;padding:5px 7px;border-radius:7px;text-align:center;font:500 11.5px/1 var(--mono);background:var(--mist);color:var(--ink-2)}
.gv-l .t.red{background:var(--risk-severe-soft);color:var(--risk-severe)}
.gv-l .t.amber{background:var(--risk-medium-soft);color:var(--risk-medium)}
.gv-l .t.green{background:var(--risk-low-soft);color:var(--risk-low)}
.gv-l p{font:500 13.5px/19px var(--sans);min-width:0}
.gv-l small{display:block;font:450 11.5px/16px var(--mono);color:var(--ink-muted)}
.gv-l em{font:500 12px/1 var(--mono);font-style:normal;color:var(--ink-muted);white-space:nowrap}
.gv-c{display:grid;gap:8px}
.gv-c li{display:flex;align-items:center;gap:10px;font-size:14px}
.gv-c li::before{content:"";flex:none;width:15px;height:15px;border-radius:4px;background:var(--risk-low) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.gv-c li.bad{color:#B84800}
.gv-c li.bad::before{background:#FFF1E6;box-shadow:inset 0 0 0 1.5px #B84800}
.gv-lock{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--mist);font-size:13px!important;line-height:18px!important;color:var(--ink-muted)!important}
.gv-lock::before{content:"";display:inline-block;width:9px;height:7px;margin-right:9px;border-radius:2px;background:var(--ink-muted);box-shadow:0 -4px 0 -1px var(--mist),0 -5px 0 0 var(--ink-muted);vertical-align:0}
.gv-ch{display:flex}
.gv-ch li{flex:1;position:relative;display:grid;justify-items:center;gap:6px;text-align:center}
.gv-ch li::before{content:"";position:absolute;top:13px;right:50%;width:100%;height:2px;background:var(--line)}
.gv-ch li:first-child::before{display:none}
.gv-ch li.done::before,.gv-ch li.now::before{background:var(--brand)}
.gv-ch i{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line-strong);font:500 11px/1 var(--mono);font-style:normal}
.gv-ch .done i{background:var(--brand);color:#fff;box-shadow:none}
.gv-ch .now i{background:var(--avus-blue);color:#fff;box-shadow:0 0 0 5px #0266FC1F}
.gv-ch b{font:600 13px/17px var(--sans)}
.gv-ch small{font-size:12px;color:var(--ink-muted)}
/* each visual assembles as its step scrolls in */
.js .gs.rv .gv>*:not(.gv-h){opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease-enter) .25s,transform .6s var(--ease-enter) .25s}
.js .gs.rv.in .gv>*{opacity:1;transform:none}

/* ===== insight cards: a cover in the topic's colour, then the title ===== */
.pcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:760px){.pcs{grid-template-columns:1fr}}
.pc{--a:#0B3A8C;--b:#0266FC;display:grid;grid-template-rows:auto 1fr;border-radius:24px;background:var(--paper);box-shadow:0 0 0 1px var(--line);color:var(--ink);overflow:hidden;transition:transform var(--d-base) var(--ease),box-shadow var(--d-base) var(--ease)}
.pc.t-prac{--a:#0E4A3A;--b:#1F9E73}
.pc.t-chain{--a:#0B4F52;--b:#0F7F82}
.pc:hover,.js .stg.in>.pc:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line),0 36px 70px -40px #01182F66}
.pc-cv{position:relative;isolation:isolate;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;height:clamp(180px,20vw,240px);padding:22px 24px;background:radial-gradient(120% 140% at 100% 0%,var(--b) 0%,var(--a) 45%,var(--abyss) 100%);color:#fff;overflow:hidden}
.pc-cv::before{content:"";position:absolute;inset:-20%;z-index:-1;opacity:.5;transition:transform 1.2s var(--ease)}
.pc.t-reg .pc-cv::before{background:repeating-linear-gradient(180deg,#FFFFFF1F 0 1px,transparent 1px 22px);-webkit-mask-image:linear-gradient(200deg,#000 10%,transparent 70%);mask-image:linear-gradient(200deg,#000 10%,transparent 70%)}
.pc.t-prac .pc-cv::before{background:radial-gradient(#FFFFFF40 1.2px,transparent 1.4px) 0 0/18px 18px;-webkit-mask-image:linear-gradient(200deg,#000 10%,transparent 70%);mask-image:linear-gradient(200deg,#000 10%,transparent 70%)}
.pc.t-chain .pc-cv::before{background:repeating-linear-gradient(135deg,#FFFFFF1F 0 1px,transparent 1px 16px);-webkit-mask-image:linear-gradient(200deg,#000 10%,transparent 70%);mask-image:linear-gradient(200deg,#000 10%,transparent 70%)}
.pc:hover .pc-cv::before{transform:translate(-18px,12px)}
.pc-cv::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;box-shadow:0 0 0 1px #FFFFFF26,0 0 0 40px #FFFFFF08,0 0 0 41px #FFFFFF1A;transition:transform 1.2s var(--ease)}
.pc:hover .pc-cv::after{transform:scale(1.08)}
.pc-cat{font:600 15px/1 var(--sans);letter-spacing:-.01em}
.pc-no{margin-left:auto;font:450 12px/1 var(--mono);color:#FFFFFFB3}
.pc-cv em{position:absolute;left:24px;bottom:22px;font:600 11.5px/1 var(--sans);font-style:normal;padding:6px 9px;border-radius:7px;background:#fff;color:var(--abyss)}
.pc-b{display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:24px 24px 26px}
.pc-m{display:flex;flex-wrap:wrap;gap:6px 16px;font:450 12.5px/1 var(--mono);color:var(--ink-muted)}
.pc h3{font:600 clamp(24px,2.4vw,32px)/1.14 var(--sans);letter-spacing:-.03em;text-wrap:balance;transition:color var(--d-quick) var(--ease)}
.pc:hover h3{color:var(--signal)}
.pc p{font-size:16px;line-height:24px;color:var(--ink-muted)}
.pc .go{margin-top:8px}
.pc .go .arr{transition:transform var(--d-base) var(--ease)}
.pc:hover .go .arr{transform:translateX(4px)}
/* the piece itself carries its topic's colour in the header */
.art{--a:#0B3A8C;--b:#0266FC}
.art.t-prac{--a:#0E4A3A;--b:#1F9E73}.art.t-chain{--a:#0B4F52;--b:#0F7F82}
.art-h{position:relative;isolation:isolate}
.art-h::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--a),var(--b))}
.art-m .cat{color:var(--b)}

/* ===== article ===== */
.rprog{position:fixed;left:0;right:0;top:0;z-index:60;height:3px;pointer-events:none}
.rprog i{display:block;height:100%;width:100%;transform:scaleX(var(--p,0));transform-origin:left;background:var(--signal)}
.art-h{padding:calc(var(--header-h) + clamp(56px,7vw,96px)) 0 clamp(32px,4vw,48px)}
.art-h .container{display:grid;gap:20px;justify-items:start}
.art-h h1,.art-h .lead{max-width:900px}
.art-m{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font:450 13px/1 var(--mono);color:var(--ink-muted)}
.art-m .cat{font:600 13px/1 var(--sans);color:var(--signal)}
.art-h h1{font:600 clamp(36px,4.6vw,58px)/1.06 var(--sans);letter-spacing:-.035em;text-wrap:balance}
.js .art-h .container>*{opacity:0;animation:art-rise .7s var(--ease-enter) forwards;animation-delay:calc(var(--s,0) * 90ms + 60ms)}
.art-h .container>:nth-child(2){--s:1}.art-h .container>:nth-child(3){--s:2}.art-h .container>:nth-child(4){--s:3}
.art-g{display:grid;grid-template-columns:200px minmax(0,700px);gap:clamp(32px,6vw,88px);padding-top:32px;padding-bottom:var(--section);justify-content:start;position:relative}
.art-g::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--line)}
.art-side{position:sticky;top:calc(var(--header-h) + 40px);align-self:start;display:grid;gap:22px}
.art-toc{display:grid;gap:8px}
.art-toc[hidden]{display:none}
.art-toc p{font:600 13px/18px var(--sans);color:var(--ink-muted)}
.art-toc a{font-size:14px;line-height:20px;color:var(--ink-muted)}
.art-toc a.on,.art-toc a:hover{color:var(--ink)}
.art-copy{justify-self:start;height:36px;padding:0 14px;border-radius:999px;font:500 13.5px/1 var(--sans);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.art-copy:hover{background:var(--paper)}
@media (max-width:900px){.art-g{grid-template-columns:1fr}.art-side{position:static;order:2}}
.prose{font-size:18px;line-height:30px;color:var(--ink-2)}
.prose>*+*{margin-top:22px}
.prose h2{margin-top:48px;font:600 28px/1.2 var(--sans);letter-spacing:-.025em;color:var(--ink);scroll-margin-top:calc(var(--header-h) + 32px)}
.prose h3{margin-top:32px;font:600 21px/1.3 var(--sans);color:var(--ink)}
.prose a{color:var(--signal);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{display:grid;gap:10px;padding-left:22px}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose blockquote{padding:4px 0 4px 22px;border-left:2px solid var(--signal);font:500 21px/1.45 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.prose figure img{width:100%;border-radius:16px}
.prose figcaption{margin-top:10px;font-size:14px;color:var(--ink-muted)}
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:22px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-top:1px solid var(--line)}
.prose .note{padding:18px 20px;border-radius:14px;background:var(--signal-soft);font-size:16px;line-height:26px;color:var(--ink)}
.soon{display:grid;gap:6px;padding:26px 28px;border-radius:var(--r-lg);background:#FFFFFFA6;box-shadow:inset 0 0 0 1px var(--line)}
.soon b{font:600 18px/24px var(--sans);color:var(--ink)}
.soon p{font-size:16px;line-height:24px;color:var(--ink-muted)}

@media (max-width:760px){
  .gd p{font-size:17px;line-height:25px}
  .gs p{font-size:18px;line-height:28px}
  .gv{font-size:15px}
  /* list rows in step visuals: tag and text on one line, the time or state beneath the text */
  .gv-l>div{grid-template-columns:auto minmax(0,1fr);row-gap:6px}
  .gv-l em{grid-column:2;justify-self:start}
  .gv-l p{font-size:15px;line-height:21px}
  .gv-l small,.gv-t{font-size:13px}
  .gv-k small,.gv-ch small,.gd-top span,.gd-r em{font-size:13px}
  /* article contents: comfortable tap rows */
  .art-toc a{padding:7px 0;font-size:16px}
  .art-copy{height:42px;font-size:15px}
  /* Court & Capital: the portrait film fits one screen, and the gallery reads as a grid */
  .cc-video{max-width:300px;margin:0 auto}
  .cc-gal{columns:2;column-gap:10px}
  .cc-gal img{margin-bottom:10px;border-radius:var(--r-md)}
}
@media (prefers-reduced-motion:reduce){
  .js .gh-in>*,.js .art-h .container>*{opacity:1;transform:none;animation:none}
  .js .gs.rv .gv>*{opacity:1;transform:none}
}

/* legal pages */
.art.t-legal{--a:#01182F;--b:#0266FC}
.lgl-id{display:grid;gap:4px;padding:20px 22px;border-radius:var(--r-lg);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:16px;line-height:26px}
.lgl-id b{color:var(--ink)}
.prose .lgl-t{display:block;overflow-x:auto}
.prose th{font-weight:600;color:var(--ink);border-top:0}
.prose td code{font:450 14px/1 var(--mono);color:var(--ink)}
.prose .btn{text-decoration:none}

@keyframes art-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:900px){.art-g{grid-template-columns:minmax(0,1fr)}}