:root { --bg : #2a1030; --bg2 : #361741; --surface : #3d1c4a; --surface2 : #4a2557; --line : #6b3a72; --ink : #fdeedd; --ink2 : #ecd6d9; --ink3 : #c3a6ba; --accent : #f59323; --accent-lt : #ffb85c; --accent-dk : #a85e08; --sky : #e0459a; --sky-dk : #96256a; --grass : #3f9e4d; --dirt : #b05a3a; --dirt-dk : #7a3822; --stone : #c3a6ba; --diamond : #59c6f0; --emerald : #6fd06a; --tnt : #f2c53d; --tnt-ink : #ffd96b; --on-accent : #2a1030; --bw : 2px; --r : 14px; --r-lg : 22px; --sh-block : 0 14px 34px -18px rgba(0,0,0,.85); --sh-bar : 0 -10px 24px -14px rgba(0,0,0,.7); --img-render : auto; --gloss : rgba(255,255,255,.32); --shade : rgba(0,0,0,.12); --scrim : rgba(0,0,0,.42); --h1-max : 44px; --h2-max : 30px; --h1-measure : none; --font-display : "Chonburi","Trebuchet MS",Impact,sans-serif; --font-ui : "Martian Mono",ui-monospace,"SFMono-Regular",Menlo,monospace; --font-body : "Asap",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif }

html { color-scheme : dark }

*,*::before,*::after { box-sizing : border-box }

html { -webkit-text-size-adjust : 100%; scroll-behavior : smooth; scroll-padding-top : 84px }

body,h1,h2,h3,h4,p,ul,ol,figure,dl,dd { margin : 0 }

ul,ol { padding : 0; list-style : none }

img,svg,video { display : block; max-width : 100% }

img { height : auto }

button,input,select,textarea { font : inherit; color : inherit }

a { color : inherit }

table { border-collapse : collapse }

body { margin : 0; background : var(--bg); color : var(--ink); font-family : var(--font-body); font-size : 16px; line-height : 1.68; font-weight : 400; overflow-x : hidden; -webkit-font-smoothing : antialiased; background-image :  radial-gradient(900px 420px at 88% -8%, color-mix(in srgb, var(--sky) 15%, transparent), transparent 70%), radial-gradient(760px 380px at 4% 2%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%); background-repeat : no-repeat }

::selection { background : var(--accent); color : var(--on-accent) }

.wg-shortcut { position : absolute; left : -9999px; top : 0; z-index : 200; background : var(--accent); color : var(--on-accent); padding : 12px 20px; font-family : var(--font-ui); font-size : 13px; letter-spacing : .05em }

.wg-shortcut:focus { left : 12px; top : 12px }

:where(a,button,summary,[tabindex]):focus-visible { outline : 3px solid var(--diamond); outline-offset : 3px; border-radius : 2px }

/* ---------- layout ---------- */ .wg-claim { width : min(100% - 32px, 1240px); margin-inline : auto }

.wg-claim-narrow { width : min(100% - 32px, 980px); margin-inline : auto }

main { display : block }

/* ---------- pixel primitives ---------- */ .wg-seam { height : 26px; width : 100%; position : relative; background :  linear-gradient(var(--grass) 0 9px, transparent 9px), repeating-linear-gradient(90deg,var(--dirt) 0 12px,var(--dirt-dk) 12px 24px); border-top : 3px solid color-mix(in srgb, var(--grass) 70%, #000); image-rendering : pixelated }

.wg-seam::after { content : ""; position : absolute; left : 0; right : 0; top : 9px; height : 4px; background : repeating-linear-gradient(90deg,color-mix(in srgb,var(--grass) 65%,#000) 0 6px,transparent 6px 12px) }

.wg-seam--line { height : 34px; background : none; border-top : 0; position : relative; display : grid; place-items : center }

.wg-seam--line::before { content : ""; position : absolute; left : 0; right : 0; top : 50%; height : 2px; background : repeating-linear-gradient(90deg,var(--line) 0 14px,transparent 14px 22px) }

.wg-seja { position : relative; width : 16px; height : 16px; border : 3px solid var(--accent); border-radius : 50%; background : var(--bg) }

.wg-seam--wave { height : auto; background : none; border-top : 0; line-height : 0 }

.wg-seam--wave::after { content : none }

.wg-seam--wave svg { width : 100%; height : 52px; display : block }

.wg-vaxo { fill : var(--surface) }

.wg-ziho { fill : none; stroke : var(--sky); stroke-width : 3; vector-effect : non-scaling-stroke; opacity : .85 }

/* ---------- buttons ---------- */ .wg-pushbtn { border-radius : var(--r); --btn-bg : var(--accent); --btn-ink : var(--on-accent); --btn-edge : var(--accent-dk); display : inline-flex; align-items : center; justify-content : center; gap : 9px; font-family : var(--font-ui); font-weight : 400; font-size : 13.5px; letter-spacing : .045em; line-height : 1.15; padding : 16px 26px 17px; text-decoration : none; cursor : pointer; background : var(--btn-bg); color : var(--btn-ink); border : 0; border-bottom : 5px solid var(--btn-edge); box-shadow : inset 0 3px 0 var(--gloss), inset 0 -3px 0 var(--shade); transition : transform .12s ease, filter .12s ease; text-align : center }

.wg-pushbtn:hover { filter : brightness(1.08) }

.wg-pushbtn:active { transform : translateY(3px); border-bottom-width : 2px }

.wg-pushbtn svg { width : 19px; height : 19px; flex : none }

.wg-pushbtn--ghost { --btn-bg : transparent; --btn-ink : var(--ink); --btn-edge : transparent; border : var(--bw) solid var(--line); box-shadow : none; padding : 13px 22px }

.wg-pushbtn--ghost:hover { border-color : var(--accent); color : var(--accent); filter : none }

.wg-pushbtn--ghost:active { transform : translateY(2px) }

.wg-pushbtn--sm { font-size : 11.5px; padding : 12px 16px 13px; border-bottom-width : 4px }

.wg-pushbtn--wide { width : 100% }

/* ---------- header ---------- */ .wg-headframe { position : sticky; top : 0; z-index : 90; background : color-mix(in srgb, var(--bg2) 92%, transparent); backdrop-filter : blur(10px); border-bottom : var(--bw) solid var(--line) }

.wg-headframe-row { display : flex; align-items : center; gap : 18px; min-height : 70px }

.wg-stamp2 { display : flex; align-items : center; gap : 11px; text-decoration : none; flex : 0 1 auto; min-width : 0 }

.wg-stamp2-icon { width : 38px; height : 38px; flex : none; image-rendering : pixelated }

.wg-stamp2-word { font-family : var(--font-display); font-size : clamp(17px,4.8vw,26px); color : var(--accent); letter-spacing : .005em; line-height : 1; white-space : nowrap; overflow : hidden; text-overflow : ellipsis }

.wg-signpost { margin-left : auto; display : none }

.wg-signpost ul { display : flex; align-items : center; gap : 2px }

.wg-signpost a { display : block; padding : 9px 11px; text-decoration : none; font-size : 14px; font-weight : 500; color : var(--ink2); border-bottom : 3px solid transparent; transition : color .15s,border-color .15s; white-space : nowrap }

.wg-signpost a:hover { color : var(--ink) }

.wg-signpost a[aria-current="page"] { color : var(--accent); border-bottom-color : var(--accent) }

.wg-headframe-action { display : none; flex : none }

.wg-shutter { border-radius : var(--r); margin-left : auto; width : 46px; height : 42px; background : var(--surface); border : var(--bw) solid var(--line); display : grid; place-items : center; cursor : pointer; padding : 0 }

.wg-shutter span { display : block; width : 20px; height : 3px; background : var(--ink); box-shadow : 0 -7px 0 var(--ink),0 7px 0 var(--ink); transition : .2s }

.wg-shutter[aria-expanded="true"] span { background : transparent; box-shadow : 0 0 0 transparent }

.wg-shutter[aria-expanded="true"]::before,.wg-shutter[aria-expanded="true"]::after { content : ""; position : absolute; width : 22px; height : 3px; background : var(--accent) }

.wg-shutter[aria-expanded="true"]::before { transform : rotate(45deg) }

.wg-shutter[aria-expanded="true"]::after { transform : rotate(-45deg) }

.wg-shutter { position : relative }

.wg-swagbag { border-top : var(--bw) solid var(--line); background : var(--bg2) }

.wg-swagbag[hidden] { display : none }

.wg-swagbag ul { display : grid; grid-template-columns : 1fr 1fr; gap : 0 }

.wg-swagbag li:last-child:nth-child(odd) { grid-column : 1 / -1 }

.wg-swagbag nav a { display : block; padding : 14px 12px; text-decoration : none; font-size : 14.5px; font-weight : 500; color : var(--ink2); border-bottom : 1px solid var(--line); border-right : 1px solid var(--line) }

.wg-swagbag li:last-child:nth-child(odd) a { border-right : 0 }

.wg-swagbag nav a[aria-current="page"] { color : var(--accent) }

.wg-swagbag-action { padding : 16px }

/* ---------- hero ---------- */ .wg-canyon { position : relative; overflow : hidden; border-bottom : var(--bw) solid var(--line) }

.wg-canyon::before { content : ""; position : absolute; inset : 0; background :  linear-gradient(180deg, color-mix(in srgb,var(--sky) 22%,transparent) 0%, transparent 45%), repeating-linear-gradient(90deg, color-mix(in srgb,var(--line) 45%,transparent) 0 1px, transparent 1px 44px), repeating-linear-gradient(0deg, color-mix(in srgb,var(--line) 45%,transparent) 0 1px, transparent 1px 44px); opacity : .5; pointer-events : none }

.wg-canyon-row { position : relative; display : grid; gap : 30px; padding : 38px 0 44px }

.wg-canyon-copy { min-width : 0 }

.wg-bowe { min-width : 0 }

.wg-bowe .wg-canyon-actions { margin-top : 0 }

.wg-canyon-row--art-wide .wg-canyon-art img { width : 100% }

.wg-canyon-row--art-wide .wg-canyon-seal { right : auto; left : 0 }

/* The wide band centres its copy; the art is capped near its intrinsic width so a small source asset is never upscaled into mush. */ .wg-canyon-row--art-wide .wg-canyon-art { max-width : var(--hero-art-max,820px); margin-inline : auto; width : 100% }

.wg-canyon h1 { font-family : var(--font-display); font-weight : 400; font-size : clamp(32px,6.4vw,var(--h1-max)); line-height : 1.04; letter-spacing : .002em; margin : 16px 0 0; text-wrap : balance }

.wg-canyon h1 { max-width : var(--h1-measure,none) }

.wg-canyon h1 .wg-glint { color : var(--accent) }

.wg-canyon-lede { margin-top : 16px; font-size : clamp(16px,2.3vw,18.5px); color : var(--ink2); max-width : 56ch }

.wg-canyon-actions { display : flex; flex-wrap : wrap; gap : 12px; margin-top : 26px }

.wg-canyon-smallprint { margin-top : 14px; font-size : 12.5px; color : var(--ink3); display : flex; align-items : flex-start; gap : 7px }

.wg-canyon-smallprint svg { width : 14px; height : 14px; flex : none; margin-top : 3px }

.wg-canyon-art { position : relative }

.wg-canyon-art .wg-sluice { border-radius : var(--r-lg); overflow : hidden; border : var(--bw) solid var(--line); background : var(--bg2); box-shadow : var(--sh-block); position : relative; overflow : hidden }

.wg-canyon-art img { width : 100%; image-rendering : var(--img-render,pixelated) }

.wg-canyon-art--portrait .wg-sluice { display : grid; place-items : center; padding : 20px; background : var(--bg2) }

.wg-canyon-art--portrait img { width : auto; max-width : 100%; max-height : min(58vh,430px) }

.wg-canyon-art .wg-sluice::after { content : ""; position : absolute; inset : 0; pointer-events : none; background : linear-gradient(180deg,transparent 62%, color-mix(in srgb,var(--bg) 78%,transparent)) }

.wg-canyon-seal { border-radius : var(--r); position : absolute; right : -6px; bottom : -14px; z-index : 2; background : var(--accent); color : var(--on-accent); border-bottom : 5px solid var(--accent-dk); padding : 11px 15px 12px; font-family : var(--font-display); line-height : 1.05; box-shadow : var(--sh-block) }

.wg-canyon-seal b { display : block; font-size : 27px; font-weight : 400; line-height : 1 }

.wg-canyon-seal span { display : block; font-family : var(--font-ui); font-size : 9px; letter-spacing : .1em; text-transform : uppercase; opacity : .85; margin-top : 6px }

.wg-canyon-seal.wg-canyon-seal--bottom-left { right : auto; left : -6px }

.wg-canyon-seal.wg-canyon-seal--top-left { right : auto; bottom : auto; left : -6px; top : -14px }

.wg-canyon-seal.wg-canyon-seal--top-right { bottom : auto; top : -14px }

/* ---------- fact strip ---------- */ .wg-assay { background : var(--bg2); border-bottom : var(--bw) solid var(--line) }

.wg-assay--strip .wg-assay-grid { display : grid; grid-template-columns : repeat(2,1fr); gap : 0; border-left : 1px solid var(--line); border-right : 1px solid var(--line) }

.wg-assay-cell { padding : 20px 16px; border-bottom : 1px solid var(--line); border-right : 1px solid var(--line); display : flex; align-items : center; gap : 13px; min-width : 0 }

.wg-assay--strip .wg-assay-cell:nth-child(2n) { border-right : 0 }

.wg-assay-icon { border-radius : var(--r); width : 42px; height : 42px; flex : none; display : grid; place-items : center; border : max(2px, calc(var(--bw) - 1px)) solid var(--line); background : var(--surface) }

.wg-assay-icon svg { width : 22px; height : 22px }

.wg-assay-note { min-width : 0 }

.wg-assay-term { display : block; font-family : var(--font-ui); font-size : 9.5px; letter-spacing : .13em; text-transform : uppercase; color : var(--ink3) }

.wg-assay-figure { display : block; font-family : var(--font-display); font-size : 24px; color : var(--ink); line-height : 1.15; margin-top : 6px; overflow-wrap : break-word; hyphens : auto }

.wg-assay-figure.wg-tint-gold { color : var(--accent) }

.wg-assay-figure.wg-tint-sky { color : var(--diamond) }

.wg-assay-figure.wg-tint-cactus { color : var(--emerald) }

.wg-assay--cards { background : transparent; border-bottom : 0; padding : 26px 0 4px }

.wg-assay--cards .wg-assay-grid { display : grid; grid-template-columns : repeat(2,1fr); gap : 12px; border : 0 }

.wg-assay--cards .wg-assay-cell { flex-direction : column; align-items : flex-start; gap : 10px; padding : 16px 15px; border : var(--bw) solid var(--line); border-radius : var(--r-lg); background : var(--surface); box-shadow : var(--sh-block) }

.wg-assay--cards .wg-assay-cell .wg-assay-term,.wg-assay--cards .wg-assay-cell .wg-assay-figure { display : block }

.wg-assay--cards .wg-assay-figure { margin-top : 2px }

.wg-assay--list { background : var(--bg2); border-bottom : var(--bw) solid var(--line); padding : 6px 0 }

.wg-assay--list .wg-assay-grid { display : grid; grid-template-columns : 1fr; gap : 0 34px; border : 0 }

.wg-assay--list .wg-assay-cell { display : grid; grid-template-columns : 34px 1fr auto; align-items : center; gap : 12px; padding : 13px 2px; border : 0; border-bottom : 1px dashed var(--line) }

.wg-assay--list .wg-assay-cell:last-child { border-bottom : 0 }

@media (min-width:760px) {
  .wg-assay--list .wg-assay-grid { grid-template-columns : 1fr 1fr }
  }
@media (min-width:760px) {
  .wg-assay--list .wg-assay-cell:nth-last-child(2) { border-bottom : 0 }
  }
@media (min-width:760px) {}

.wg-assay--list .wg-assay-icon { width : 34px; height : 34px; border : 0; background : transparent; color : var(--accent) }

.wg-assay--list .wg-assay-icon svg { width : 20px; height : 20px }

.wg-assay--list .wg-assay-term { font-family : var(--font-ui); font-size : 11px; letter-spacing : .12em; text-transform : uppercase; color : var(--ink3) }

.wg-assay--list .wg-assay-figure { margin : 0; font-family : var(--font-display); font-size : 19px; color : var(--ink); text-align : right; line-height : 1.2 }

/* ---------- page shell ---------- */ .wg-spread3 { display : grid; gap : 34px; padding : 38px 0 56px; align-items : start }

/* Long compounds (Finnish, German, Dutch) blow past a 320px column otherwise. `hyphens` needs the document language, which the head already declares. */ .wg-canyon h1,.wg-column2 h2,.wg-column2 h3,.wg-query2-q,.wg-wayposts-list a,.wg-xozu { overflow-wrap : break-word; hyphens : auto }

/* ---------- prose ---------- */ .wg-column2 { min-width : 0; font-size : 16.5px }

.wg-column2 > * + * { margin-top : 19px }

.wg-column2 h2 { font-family : var(--font-display); font-weight : 400; font-size : clamp(25px,3.7vw,var(--h2-max)); line-height : 1.16; letter-spacing : .004em; margin-top : 52px; padding-top : 4px; position : relative; padding-left : 26px; text-wrap : balance; scroll-margin-top : 90px }

.wg-column2 h2::before { content : ""; position : absolute; left : 0; top : .42em; width : 14px; height : 14px; background : var(--accent); box-shadow : 0 -8px 0 -3px var(--sky), 0 8px 0 -3px var(--emerald) }

.wg-column2 h3 { font-family : var(--font-body); font-weight : 700; font-size : clamp(18px,2.6vw,21px); line-height : 1.32; margin-top : 34px; color : var(--ink); text-wrap : balance; scroll-margin-top : 90px }

.wg-column2 h2 + h3, .wg-column2 h2 + p, .wg-column2 h2 + ul, .wg-column2 h2 + ol, .wg-column2 h2 + .wg-logbook { border-radius : var(--r-lg); margin-top : 17px }

.wg-column2 p { color : var(--ink2) }

.wg-column2 strong { color : var(--ink); font-weight : 600 }

.wg-column2 .wg-opening { font-size : 17px; color : var(--ink); font-weight : 600; border-left : 4px solid var(--accent); padding-left : 14px }

.wg-column2 ul { display : grid; gap : 11px }

.wg-column2 ul > li { position : relative; padding-left : 29px; color : var(--ink2) }

.wg-column2 ul > li::before { content : ""; position : absolute; left : 2px; top : .56em; width : 11px; height : 11px; background : var(--sky); box-shadow : inset 0 2px 0 var(--gloss) }

.wg-column2 ul > li > ul { margin-top : 10px }

.wg-column2 ul > li > ul > li::before { background : var(--stone) }

.wg-column2 li p { margin-top : 8px }

.wg-column2 ol { counter-reset : step; display : grid; gap : 15px }

.wg-column2 ol > li { position : relative; padding-left : 48px; counter-increment : step; color : var(--ink2) }

.wg-column2 ol > li::before { content : counter(step); position : absolute; left : 0; top : 0; width : 33px; height : 33px; display : grid; place-items : center; font-family : var(--font-ui); font-size : 13px; background : var(--surface2); color : var(--accent); border : max(2px, calc(var(--bw) - 1px)) solid var(--line) }

.wg-column2 ol > li > ul { margin-top : 11px }

.wg-logbook { overflow-x : auto; border : var(--bw) solid var(--line); background : var(--surface); box-shadow : var(--sh-block); -webkit-overflow-scrolling : touch; background-image :  linear-gradient(to right, var(--surface), color-mix(in srgb, var(--surface) 0%, transparent)), linear-gradient(to left, var(--surface), color-mix(in srgb, var(--surface) 0%, transparent)), linear-gradient(to right, var(--scrim), color-mix(in srgb, var(--scrim) 0%, transparent)), linear-gradient(to left, var(--scrim), color-mix(in srgb, var(--scrim) 0%, transparent)); background-position : 0 0, 100% 0, 0 0, 100% 0; background-repeat : no-repeat; background-size : 26px 100%, 26px 100%, 14px 100%, 14px 100%; background-attachment : local, local, scroll, scroll }

.wg-logbook table { width : 100%; min-width : 520px; font-size : 15px }

.wg-logbook th,.wg-logbook td { padding : 12px 15px; text-align : left; border-bottom : 1px solid var(--line); vertical-align : top }

.wg-logbook thead th { background : var(--surface2); color : var(--ink); font-family : var(--font-ui); font-size : 10.5px; letter-spacing : .09em; text-transform : uppercase; border-bottom : var(--bw) solid var(--line); position : sticky; top : 0; white-space : nowrap }

.wg-logbook tbody tr:last-child td { border-bottom : 0 }

.wg-logbook tbody tr:nth-child(even) { background : color-mix(in srgb,var(--surface2) 45%,transparent) }

.wg-logbook td { color : var(--ink2) }

.wg-logbook td:first-child { color : var(--ink); font-weight : 500 }

.wg-logbook td strong { color : var(--accent); font-weight : 600 }

.wg-logbook-hint { display : none; align-items : center; gap : 6px; margin-top : 8px; font-size : 12px; color : var(--ink3) }

html:not(.wg-with-js) .wg-logbook-hint { display : flex }

.wg-logbook.wg-shifts + .wg-logbook-hint { display : flex }

.wg-logbook-hint svg { width : 13px; height : 13px }

/* ---------- faq ---------- */ .wg-queries2 { display : grid; gap : 10px; margin-top : 20px }

.wg-query2 { border-radius : var(--r); border : var(--bw) solid var(--line); background : var(--surface) }

.wg-query2-q { margin : 0; font-family : var(--font-body); font-size : 16.5px; font-weight : 600; line-height : 1.45 }

.wg-query2-toggle { width : 100%; display : flex; align-items : center; justify-content : space-between; gap : 16px; background : none; border : 0; padding : 16px 17px; text-align : left; cursor : pointer; color : var(--ink); font : inherit }

.wg-query2-toggle:hover { color : var(--accent) }

.wg-query2-icon { width : 26px; height : 26px; flex : none; position : relative; border : max(2px, calc(var(--bw) - 1px)) solid var(--line); background : var(--surface2); transition : .18s }

.wg-query2-icon::before,.wg-query2-icon::after { content : ""; position : absolute; background : var(--accent); left : 50%; top : 50%; transform : translate(-50%,-50%) }

.wg-query2-icon::before { width : 11px; height : 3px }

.wg-query2-icon::after { width : 3px; height : 11px; transition : opacity .18s }

.wg-query2-toggle[aria-expanded="true"] .wg-query2-icon { background : var(--accent); border-color : var(--accent) }

.wg-query2-toggle[aria-expanded="true"] .wg-query2-icon::before { background : var(--on-accent) }

.wg-query2-toggle[aria-expanded="true"] .wg-query2-icon::after { opacity : 0 }

.wg-query2-a { padding : 0 17px 17px; border-top : 1px solid var(--line); padding-top : 15px }

.wg-query2-a > * + * { margin-top : 14px }

.wg-query2-a p { color : var(--ink2); font-size : 15.5px }

.wg-query2-a[hidden] { display : none }

.wg-without-js .wg-query2-a[hidden] { display : block }

.wg-without-js .wg-query2-icon { display : none }

.wg-without-js .wg-query2-toggle { cursor : default }

details.wg-query2 summary { list-style : none; cursor : pointer }

details.wg-query2 summary::-webkit-details-marker { display : none }

details.wg-query2 .wg-query2-toggle { display : flex; align-items : center; justify-content : space-between; gap : 16px; padding : 16px 17px; color : var(--ink) }

details.wg-query2 .wg-query2-q { margin : 0; font-family : var(--font-body); font-size : 16.5px; font-weight : 600; line-height : 1.45 }

details.wg-query2 summary:hover .wg-query2-q { color : var(--accent) }

details.wg-query2[open] .wg-query2-icon { background : var(--accent); border-color : var(--accent) }

details.wg-query2[open] .wg-query2-icon::before { background : var(--on-accent) }

details.wg-query2[open] .wg-query2-icon::after { opacity : 0 }

details.wg-query2 .wg-query2-a { padding : 0 17px 17px; border-top : 1px solid var(--line); padding-top : 15px }

/* ---------- sidebar ---------- */ .wg-ledger2 { display : grid; gap : 20px; min-width : 0 }

.wg-notice { border-radius : var(--r-lg); border : var(--bw) solid var(--line); background : var(--surface); box-shadow : var(--sh-block) }

.wg-notice-head { padding : 13px 16px; border-bottom : var(--bw) solid var(--line); background : var(--surface2); font-family : var(--font-ui); font-size : 10.5px; letter-spacing : .11em; text-transform : uppercase; color : var(--ink); display : flex; align-items : center; gap : 9px }

.wg-notice-head svg { width : 17px; height : 17px; color : var(--accent) }

.wg-notice-body { padding : 16px }

.wg-stake { border-color : var(--accent); box-shadow : 0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent), var(--sh-block) }

.wg-stake .wg-notice-head { background : var(--accent); color : var(--on-accent); border-bottom-color : var(--accent-dk) }

.wg-stake .wg-notice-head svg { color : var(--on-accent) }

.wg-stake-value { font-family : var(--font-display); font-size : clamp(30px,4.6vw,38px); color : var(--accent); line-height : 1.06 }

.wg-stake-extra { font-family : var(--font-display); font-size : 21px; color : var(--ink); margin-top : 6px; line-height : 1.1 }

.wg-stake-terms { font-size : 12px; color : var(--ink3); margin-top : 12px; line-height : 1.5 }

.wg-stake .wg-pushbtn { margin-top : 15px }

.wg-datasheet2 dl { display : grid; gap : 0 }

.wg-datasheet2 .wg-strip2 { display : flex; justify-content : space-between; gap : 14px; padding : 10px 0; border-bottom : 1px dashed var(--line) }

.wg-datasheet2 .wg-strip2:last-child { border-bottom : 0 }

.wg-datasheet2 dt { font-size : 13px; color : var(--ink3); letter-spacing : .03em }

.wg-datasheet2 dd { margin : 0; font-family : var(--font-display); font-size : 18px; color : var(--ink); text-align : right; line-height : 1.25 }

/* ---------- page contents ---------- */ .wg-wayposts { background : var(--bg2); border-bottom : var(--bw) solid var(--line); padding : 18px 0 20px }

.wg-wayposts-head { display : flex; align-items : center; justify-content : space-between; gap : 16px; min-height : 34px }

.wg-wayposts-title { display : flex; align-items : center; gap : 9px; font-family : var(--font-ui); font-size : 10.5px; letter-spacing : .13em; text-transform : uppercase; color : var(--ink2) }

.wg-wayposts-title svg { width : 16px; height : 16px; color : var(--accent); flex : none }

.wg-wayposts-toggle { border-radius : var(--r); display : none; align-items : center; gap : 10px; cursor : pointer; background : var(--surface); border : max(2px, calc(var(--bw) - 1px)) solid var(--line); padding : 8px 12px; font-family : var(--font-ui); font-size : 10px; letter-spacing : .09em; text-transform : uppercase; color : var(--ink2) }

.wg-wayposts-toggle:hover { border-color : var(--accent); color : var(--accent) }

.wg-wayposts-icon { width : 16px; height : 16px; flex : none; position : relative }

.wg-wayposts-icon::before,.wg-wayposts-icon::after { content : ""; position : absolute; left : 50%; top : 50%; transform : translate(-50%,-50%); background : var(--accent) }

.wg-wayposts-icon::before { width : 11px; height : 3px }

.wg-wayposts-icon::after { width : 3px; height : 11px; transition : opacity .18s }

.wg-wayposts-toggle[aria-expanded="true"] .wg-wayposts-icon::after { opacity : 0 }

.wg-wayposts-list { counter-reset : pn; display : grid; grid-template-columns : 1fr; gap : 2px; margin-top : 14px }

.wg-wayposts-list li { counter-increment : pn; min-width : 0 }

.wg-wayposts-list a { display : flex; gap : 11px; padding : 9px 11px; text-decoration : none; font-size : 14px; line-height : 1.4; color : var(--ink2); border-left : 3px solid transparent; transition : color .15s,background .15s,border-color .15s }

.wg-wayposts-list a::before { content : counter(pn,decimal-leading-zero); font-family : var(--font-ui); font-size : 10px; color : var(--ink3); flex : none; padding-top : 3px }

.wg-wayposts-list a:hover { color : var(--accent); background : var(--surface); border-left-color : var(--accent) }

.wg-wayposts-list a.wg-onnow { color : var(--accent); background : var(--surface); border-left-color : var(--accent) }

/* ---------- in-content promo band ---------- */ .wg-shoutline { border-radius : var(--r-lg); position : relative; overflow : hidden; border : 3px solid var(--accent); background : linear-gradient(135deg,var(--surface2),var(--surface)); padding : 24px 22px; display : grid; gap : 18px; box-shadow : var(--sh-block) }

.wg-shoutline::before { content : ""; position : absolute; inset : 0; opacity : .16; pointer-events : none; background : repeating-linear-gradient(45deg,var(--accent) 0 8px,transparent 8px 24px) }

.wg-shoutline > * { position : relative }

.wg-shoutline-title { font-family : var(--font-display); font-size : clamp(24px,3.6vw,30px); line-height : 1.14; color : var(--ink) }

.wg-shoutline-title em { font-style : normal; color : var(--accent) }

.wg-shoutline-text { font-size : 15px; color : var(--ink2); margin-top : 8px }

.wg-shoutline-terms { font-size : 11.5px; color : var(--ink3); margin-top : 11px }

/* ---------- pickaxe tier strip ---------- */ .wg-sete { display : grid; grid-template-columns : 1fr; gap : 12px }

@media (min-width:400px) {
  .wg-sete { grid-template-columns : repeat(2,1fr) }
  }
@media (min-width:400px) {}

.wg-seamrank { min-width : 0; border-radius : var(--r); border : var(--bw) solid var(--line); background : var(--surface); padding : 15px 14px; text-align : center }

.wg-seamrank-icon { border-radius : var(--r); display : grid; place-items : center; width : 52px; height : 52px; margin : 0 auto 12px; border : max(2px, calc(var(--bw) - 1px)) solid var(--line); background : var(--surface2) }

.wg-seamrank-icon svg { width : 30px; height : 30px }

.wg-seamrank-name { font-family : var(--font-display); font-size : 20px; line-height : 1.1 }

.wg-seamrank-meter { display : flex; gap : 3px; margin-top : 11px; justify-content : center }

.wg-seamrank-meter i { display : block; width : 11px; height : 11px; background : var(--line) }

.wg-seamrank-meter i.wg-struck { background : var(--tnt) }

.wg-seamrank-note { font-size : 12px; color : var(--ink3); margin-top : 9px; line-height : 1.45; display : block }

.wg-seamrank--wood { color : #c08c53 }

.wg-seamrank--stone { color : var(--stone) }

.wg-seamrank--iron { color : #dfe6ee }

.wg-seamrank--diamond { color : var(--diamond) }

.wg-seamrank-name { color : currentColor }

.wg-seamrank-icon { color : currentColor }

/* ---------- gallery ---------- */ .wg-plates { display : grid; gap : 14px; grid-template-columns : 1fr; align-items : start }

.wg-plate2 { border-radius : var(--r-lg); border : var(--bw) solid var(--line); background : var(--bg2); box-shadow : var(--sh-block); overflow : hidden }

.wg-plate2 img { width : 100%; image-rendering : pixelated }

.wg-plate2 figcaption { padding : 11px 14px; font-size : 12.5px; color : var(--ink3); border-top : 1px solid var(--line) }

/* ---------- footer ---------- */ .wg-bedrock { background : var(--bg2); border-top : var(--bw) solid var(--line); padding : 42px 0 0; font-size : 14.5px }

.wg-bedrock-grid { display : grid; gap : 30px; grid-template-columns : 1fr }

.wg-bedrock-col h2 { font-family : var(--font-ui); font-size : 10px; letter-spacing : .13em; text-transform : uppercase; color : var(--ink); margin-bottom : 14px }

.wg-bedrock-col ul { display : grid; gap : 9px }

.wg-bedrock-col a { color : var(--ink3); text-decoration : none; transition : color .15s }

.wg-bedrock-col a:hover { color : var(--accent) }

.wg-teller { display : flex; flex-wrap : wrap; gap : 8px }

.wg-teller span { border-radius : var(--r); border : max(2px, calc(var(--bw) - 1px)) solid var(--line); background : var(--surface); padding : 7px 11px; font-family : var(--font-ui); font-size : 9.5px; letter-spacing : .05em; color : var(--ink3) }

.wg-steady { margin-top : 34px; border-top : 1px solid var(--line); padding : 24px 0; display : grid; gap : 16px; align-items : center }

.wg-steady-tags { display : flex; flex-wrap : wrap; gap : 9px; align-items : center }

.wg-steady-tag { border-radius : var(--r); display : inline-flex; align-items : center; gap : 7px; border : max(2px, calc(var(--bw) - 1px)) solid var(--line); padding : 7px 12px; font-size : 12px; color : var(--ink2); background : var(--surface) }

.wg-steady-tag b { font-family : var(--font-ui); color : var(--tnt-ink); font-size : 12px; letter-spacing : .04em }

.wg-steady-tag svg { width : 15px; height : 15px; color : var(--ink3) }

.wg-steady p { color : var(--ink3); font-size : 13px; line-height : 1.6 }

.wg-steady a { color : var(--ink2) }

.wg-bedrock-base { border-top : 1px solid var(--line); padding : 18px 0 30px; color : var(--ink3); font-size : 12.5px; display : grid; gap : 8px }

/* ---------- sticky mobile CTA ---------- */ .wg-railbar { position : fixed; left : 0; right : 0; bottom : 0; z-index : 80; background : color-mix(in srgb, var(--bg2) 96%, transparent); backdrop-filter : blur(10px); border-top : var(--bw) solid var(--line); padding : 10px 0 calc(10px + env(safe-area-inset-bottom)); box-shadow : var(--sh-bar) }

.wg-railbar-row { display : flex; align-items : center; justify-content : space-between; gap : 14px }

.wg-railbar-text { flex : 1 1 auto; min-width : 0; line-height : 1.15 }

.wg-railbar-text b { display : block; font-family : var(--font-display); font-size : 18px; color : var(--accent); overflow : hidden; text-overflow : ellipsis; white-space : nowrap }

.wg-railbar-text span { display : block; font-family : var(--font-ui); font-size : 9.5px; letter-spacing : .1em; text-transform : uppercase; color : var(--ink3); margin-top : 4px; overflow : hidden; text-overflow : ellipsis; white-space : nowrap }

@media (max-width:359px) {
  .wg-railbar-row { gap : 10px }
  }
@media (max-width:359px) {
  .wg-railbar .wg-pushbtn { padding-left : 14px; padding-right : 14px }
  }
@media (max-width:359px) {
  .wg-railbar .wg-pushbtn svg { display : none }
  }
@media (max-width:359px) {
  .wg-railbar-text span { display : none }
  }
@media (max-width:359px) {
  .wg-railbar-text b { font-size : 15px }
  }
@media (max-width:359px) {}

.wg-railbar .wg-pushbtn { flex : none; white-space : nowrap }

.wg-with-js .wg-railbar { transform : translateY(110%); transition : transform .28s ease; will-change : transform }

.wg-with-js .wg-railbar.wg-up2 { transform : none }

.wg-pewe .wg-railbar { display : none }

/* ---------- 404 ---------- */ .wg-dryhole { min-height : 62vh; display : grid; place-items : center; text-align : center; padding : 60px 0 }

.wg-dryhole-code { font-family : var(--font-display); font-size : clamp(84px,22vw,170px); line-height : .86; color : var(--accent); text-shadow : 7px 7px 0 var(--surface2) }

.wg-dryhole h1 { font-family : var(--font-display); font-size : clamp(28px,5.2vw,40px); margin-top : 20px; font-weight : 400 }

.wg-dryhole p { color : var(--ink2); margin-top : 14px; max-width : 52ch; margin-inline : auto }

.wg-dryhole .wg-dryhole-code { color : var(--accent); max-width : none; margin-top : 0 }

.wg-dryhole .wg-canyon-actions { justify-content : center }

.wg-dryhole-links { margin-top : 30px; display : flex; flex-wrap : wrap; gap : 9px; justify-content : center }

.wg-dryhole-links a { border-radius : var(--r); border : max(2px, calc(var(--bw) - 1px)) solid var(--line); background : var(--surface); padding : 9px 14px; text-decoration : none; font-size : 13.5px; color : var(--ink2); transition : .15s }

.wg-dryhole-links a:hover { border-color : var(--accent); color : var(--accent) }

/* ---------- reveal ---------- */ .wg-with-js .wg-surfacing { opacity : 0; transform : translateY(16px) }

.wg-with-js .wg-surfacing.wg-surfaced { opacity : 1; transform : none; transition : opacity .5s ease,transform .5s ease }

/* ---------- breadcrumb ---------- */ .wg-breadline { padding : 14px 0; font-size : 13px; color : var(--ink3); border-bottom : 1px solid var(--line); background : var(--bg2) }

.wg-breadline ol { display : flex; flex-wrap : wrap; gap : 7px; align-items : center }

.wg-breadline a { color : var(--ink2); text-decoration : none }

.wg-breadline a:hover { color : var(--accent) }

.wg-breadline li + li::before { content : "›"; margin-right : 7px; color : var(--ink3) }

.wg-breadline li { display : flex; align-items : center }

.wg-breadline [aria-current] { color : var(--ink3) }

/* ---------- responsive ---------- */ @media (max-width:719px) {
  .wg-wayposts-toggle { display : inline-flex }
  }
/* ---------- responsive ---------- */ @media (max-width:719px) {
  .wg-with-js .wg-wayposts-list { display : none }
  }
/* ---------- responsive ---------- */ @media (max-width:719px) {
  .wg-with-js .wg-wayposts.wg-unlocked2 .wg-wayposts-list { display : grid }
  }
/* ---------- responsive ---------- */ @media (max-width:719px) {}

@media (max-width:599px) {
  .wg-canyon-seal { position : static; margin-top : -2px; padding : 13px 16px; text-align : center; border-radius : 0 0 var(--r-lg) var(--r-lg); box-shadow : none }
  }
@media (max-width:599px) {
  .wg-canyon-seal b { font-size : 23px }
  }
@media (max-width:599px) {}

@media (min-width:600px) {
  .wg-wayposts-list { grid-template-columns : 1fr 1fr }
  }
@media (min-width:600px) {
  .wg-assay--cards .wg-assay-grid { grid-template-columns : repeat(3,1fr) }
  }
@media (min-width:600px) {
  .wg-assay--strip .wg-assay-grid { grid-template-columns : repeat(3,1fr) }
  }
@media (min-width:600px) {
  .wg-assay--strip .wg-assay-cell:nth-child(2n) { border-right : 1px solid var(--line) }
  }
@media (min-width:600px) {
  .wg-assay--strip .wg-assay-cell:nth-child(3n) { border-right : 0 }
  }
@media (min-width:600px) {
  .wg-sete { grid-template-columns : repeat(4,1fr) }
  }
@media (min-width:600px) {
  .wg-shoutline { grid-template-columns : 1fr auto; align-items : center; gap : 26px; padding : 28px 26px }
  }
@media (min-width:600px) {
  .wg-steady { grid-template-columns : auto 1fr; gap : 24px }
  }
@media (min-width:600px) {
  .wg-bedrock-base { grid-template-columns : 1fr auto; align-items : center }
  }
@media (min-width:600px) {
  .wg-plates { grid-template-columns : 2fr 1fr }
  }
@media (min-width:600px) {}

@media (max-width:899px) {
  .wg-canyon-row--art-left .wg-canyon-copy { order : -1 }
  }
@media (max-width:899px) {}

@media (min-width:900px) {
  .wg-canyon-row.wg-canyon-row--art-left { grid-template-columns : .94fr 1.06fr }
  }
@media (min-width:900px) {
  .wg-canyon-row.wg-canyon-row--art-wide { grid-template-columns : 1fr; gap : 26px; align-items : start; text-align : center; padding : 34px 0 40px }
  }
@media (min-width:900px) {
  .wg-canyon-row--art-wide h1 { font-size : clamp(32px,5vw,50px) }
  }
@media (min-width:900px) {
  .wg-canyon-row--art-wide .wg-canyon-copy { max-width : none }
  }
@media (min-width:900px) {
  .wg-canyon-row--art-wide h1 { margin-inline : auto }
  }
@media (min-width:900px) {
  .wg-canyon-row--art-wide .wg-canyon-lede { max-width : 56ch; margin-inline : auto }
  }
@media (min-width:900px) {
  .wg-canyon-row--art-wide .wg-canyon-actions, .wg-canyon-row--art-wide .wg-canyon-smallprint { justify-content : center }
  }
@media (min-width:900px) {
  .wg-canyon-row--art-wide .wg-canyon-smallprint { align-items : center }
  }
@media (min-width:900px) {
  .wg-wayposts { padding : 22px 0 26px }
  }
@media (min-width:900px) {
  .wg-wayposts-list { grid-template-columns : repeat(3,1fr); gap : 2px 18px; margin-top : 16px }
  }
@media (min-width:900px) {
  .wg-canyon-row { grid-template-columns : 1.06fr .94fr; align-items : center; gap : 44px; padding : 52px 0 60px }
  }
@media (min-width:900px) {
  .wg-assay--cards .wg-assay-grid { grid-template-columns : repeat(6,1fr) }
  }
@media (min-width:900px) {
  .wg-assay--strip .wg-assay-grid { grid-template-columns : repeat(6,1fr) }
  }
@media (min-width:900px) {
  .wg-assay--strip .wg-assay-cell:nth-child(3n) { border-right : 1px solid var(--line) }
  }
@media (min-width:900px) {
  .wg-assay--strip .wg-assay-cell:nth-child(6n) { border-right : 0 }
  }
@media (min-width:900px) {
  .wg-assay-cell { flex-direction : column; align-items : flex-start; gap : 11px; padding : 20px 15px }
  }
@media (min-width:900px) {
  .wg-swagbag { display : none }
  }
@media (min-width:900px) {}

@media (max-width:1079px) {
  body { padding-bottom : 78px }
  }
@media (max-width:1079px) {}

@media (min-width:1080px) {
  .wg-railbar { display : none }
  }
@media (min-width:1080px) {
  .wg-signpost { display : block }
  }
@media (min-width:1080px) {
  .wg-shutter { display : none }
  }
@media (min-width:1080px) {
  .wg-headframe-action { display : inline-flex }
  }
@media (min-width:1080px) {
  .wg-spread3 { grid-template-columns : minmax(0,1fr) 316px; gap : 42px; padding : 44px 0 72px }
  }
@media (min-width:1080px) {
  .wg-spread3--side-left { grid-template-columns : 316px minmax(0,1fr) }
  }
@media (min-width:1080px) {
  .wg-ledger2 { position : sticky; top : 88px; max-height : calc(100vh - 104px); overflow-y : auto; overflow-x : hidden; padding : 0 10px 10px 0; margin-right : -10px; scrollbar-width : thin; scrollbar-color : var(--line) transparent }
  }
@media (min-width:1080px) {
  .wg-ledger2::-webkit-scrollbar { width : 8px }
  }
@media (min-width:1080px) {
  .wg-ledger2::-webkit-scrollbar-thumb { background : var(--line) }
  }
@media (min-width:1080px) {
  .wg-ledger2::-webkit-scrollbar-track { background : transparent }
  }
@media (min-width:1080px) {
  .wg-bedrock-grid { grid-template-columns : 1.5fr 1fr 1fr 1fr }
  }
@media (min-width:1080px) {}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior : auto }
  }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration : .001ms !important; transition-duration : .001ms !important }
  }
@media (prefers-reduced-motion:reduce) {
  .wg-with-js .wg-surfacing { opacity : 1; transform : none }
  }
@media (prefers-reduced-motion:reduce) {}

@media print {
  .wg-headframe,.wg-ledger2,.wg-shoutline,.wg-canyon-actions,.wg-shutter,.wg-swagbag,.wg-wayposts,.wg-railbar { display : none !important }
  }
@media print {
  body { background : #fff; color : #000 }
  }
@media print {
  .wg-column2 p,.wg-column2 li { color : #222 }
  }
@media print {}