/* ==========================================================================
   Miles Below — shared stylesheet
   Deep water editorial · v1 · August 2026
   ========================================================================== */

:root{
  --abyss:#0A1214;
  --deep:#0F1C20;
  --shelf:#16262B;
  --line:#20353A;
  --line-soft:#1A2C31;
  --paper:#F2EFE9;
  --muted:#96A3A5;
  --dim:#6B7B7E;
  --copper:#C9724A;
  --copper-dim:#8F5233;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--abyss);color:var(--paper);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}
.narrow{max-width:680px;}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;margin:0;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- type helpers ---------- */
.eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-weight:500;}
.lede{color:var(--muted);font-size:15px;}
p.b{color:var(--muted);max-width:66ch;}
p.b b,p.b strong{color:var(--paper);font-weight:500;}
.hint{font-size:11.5px;color:var(--dim);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);
  font-size:13px;font-weight:500;letter-spacing:.04em;padding:14px 26px;
  border-radius:4px;border:1px solid transparent;cursor:pointer;
  text-decoration:none;transition:.18s;
}
.btn-p{background:var(--copper);color:#120803;}
.btn-p:hover{background:#D9835B;}
.btn-s{background:transparent;color:var(--paper);border-color:rgba(242,239,233,.28);}
.btn-s:hover{border-color:var(--paper);}
.btn-sm{font-size:12.5px;padding:10px 18px;}

/* ---------- pills ---------- */
.pill{
  display:inline-block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 10px;border-radius:3px;background:var(--shelf);color:var(--muted);white-space:nowrap;
}
.pill-a{background:rgba(201,114,74,.15);color:var(--copper);}
.pill-warn{background:rgba(201,114,74,.10);color:var(--copper-dim);}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:60;background:rgba(10,18,20,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav{
  max-width:var(--wrap);margin:0 auto;padding:16px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto;}
.brand .wm{font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-size:12.5px;}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;}
.nav ul a{text-decoration:none;font-size:13.5px;color:var(--muted);transition:.15s;}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--paper);}
@media(max-width:900px){.nav ul{display:none;}}

/* ---------- page head ---------- */
.pagehead{padding:64px 0 44px;border-bottom:1px solid var(--line-soft);}
.pagehead h1{font-size:clamp(34px,5.4vw,56px);font-weight:300;line-height:1.04;margin:16px 0 0;}
.pagehead .lede{max-width:60ch;margin:20px 0 0;}

/* ---------- sections ---------- */
section.blk{padding:72px 0;border-bottom:1px solid var(--line-soft);}
section.blk:last-of-type{border-bottom:0;}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:36px;flex-wrap:wrap;}
.shead h2{font-size:clamp(25px,3.2vw,34px);max-width:20ch;margin-top:12px;}
.shead .lede{max-width:44ch;font-size:14.5px;}

/* ---------- score components ---------- */
.srow{display:grid;grid-template-columns:112px 1fr 30px;gap:14px;align-items:center;padding:6px 0;}
.srow .l{font-size:13.5px;}
.srow .t{height:4px;background:var(--shelf);border-radius:2px;overflow:hidden;}
.srow .f{height:100%;background:var(--paper);border-radius:2px;width:0;transition:width .8s cubic-bezier(.2,.7,.3,1);}
.srow.sp .f{background:var(--dim);}
.srow .v{font-size:12.5px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;}

.gradebox{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex:0 0 auto;}
.gradebox .cell{padding:20px 26px;text-align:center;border-left:1px solid var(--line);}
.gradebox .cell:first-child{border-left:0;}
.gradebox .v{font-family:var(--serif);font-size:36px;font-weight:300;line-height:1;letter-spacing:-.025em;}
.gradebox .v.acc{color:var(--copper);}
.gradebox .l{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-top:9px;}

/* difficulty ladder */
.rungs{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;}
.rung{padding:13px 8px;text-align:center;border-radius:5px;background:var(--shelf);}
.rung.on{background:var(--paper);}
.rung .k{font-size:10px;font-weight:600;color:var(--dim);}
.rung.on .k{color:#0A1214;opacity:.5;}
.rung .n{font-size:12px;margin-top:4px;color:var(--muted);line-height:1.25;}
.rung.on .n{color:#0A1214;font-weight:600;}
@media(max-width:700px){.rungs{grid-template-columns:1fr 1fr;}}

/* conditions grid */
.ctable{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;
}
.cc{background:var(--abyss);padding:20px 18px;}
.cc .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}
.cc .v{font-size:15px;margin-top:8px;}
.cc .v small{display:block;font-size:12px;color:var(--muted);margin-top:3px;}
@media(max-width:900px){.ctable{grid-template-columns:1fr 1fr;}}

/* ---------- index table ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:28px;}
.fbtn{
  font:inherit;font-size:12.5px;padding:8px 14px;border-radius:4px;
  background:transparent;border:1px solid var(--line);color:var(--muted);
  cursor:pointer;transition:.15s;
}
.fbtn:hover{border-color:var(--muted);color:var(--paper);}
.fbtn[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:#0A1214;font-weight:500;}
.fsep{width:1px;height:22px;background:var(--line);margin:0 6px;}

.idx{width:100%;border-collapse:collapse;}
.idx th{
  text-align:left;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim);font-weight:500;padding:0 12px 14px 0;
  border-bottom:1px solid var(--line);cursor:pointer;user-select:none;white-space:nowrap;
}
.idx th:hover{color:var(--paper);}
.idx th .ar{opacity:0;margin-left:4px;}
.idx th.on{color:var(--paper);}
.idx th.on .ar{opacity:1;color:var(--copper);}
.idx th.r,.idx td.r{text-align:right;padding-right:0;}
.idx td{padding:14px 12px 14px 0;border-bottom:1px solid var(--line-soft);vertical-align:middle;font-size:14px;}
.idx tbody tr.area{transition:.15s;}
.idx tbody tr.area:hover{background:rgba(22,38,43,.5);}
.idx .dest .n{font-size:14.5px;}
.idx .dest .s{font-size:11.5px;color:var(--dim);margin-top:1px;}
.idx .dest a{text-decoration:none;}
.idx .dest a:hover .n{color:var(--copper);}
.idx td.num{font-variant-numeric:tabular-nums;color:var(--muted);}
.idx td.tot{font-variant-numeric:tabular-nums;color:var(--paper);}
.idx td.g{font-family:var(--serif);font-size:17px;}
.idx td.g.hi{color:var(--copper);}
.idx tr.stay td{
  padding:9px 12px 9px 0;border-bottom:1px solid var(--line-soft);
  font-size:13px;color:var(--muted);background:rgba(15,28,32,.45);
}
.idx tr.stay .sname{padding-left:22px;position:relative;}
.idx tr.stay .sname:before{
  content:"";position:absolute;left:6px;top:50%;width:8px;height:1px;background:var(--dim);
}
.idx tr.stay.hidden{display:none;}
.flag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--copper-dim);margin-left:8px;}
@media(max-width:900px){.idx .hidesm{display:none;}}

/* ---------- guide cards ---------- */
.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media(max-width:980px){.gcards{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.gcards{grid-template-columns:1fr;}}
.gcard{text-decoration:none;display:block;}
.gcard .ph{position:relative;border-radius:7px;overflow:hidden;aspect-ratio:5/4;background:var(--shelf);}
.gcard .ph img{width:100%;height:100%;object-fit:cover;transition:.55s cubic-bezier(.2,.7,.3,1);}
.gcard:hover .ph img{transform:scale(1.045);}
.gcard .badge{
  position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:8px;
  background:rgba(10,18,20,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(242,239,233,.16);border-radius:6px;padding:7px 11px;
}
.gcard .badge .sc{font-family:var(--serif);font-size:19px;line-height:1;font-variant-numeric:tabular-nums;}
.gcard .badge .gr{font-family:var(--serif);font-size:14px;line-height:1;color:var(--muted);}
.gcard .badge .gr.hi{color:var(--copper);}
.gcard .reg{position:absolute;left:12px;bottom:12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#CFD6D6;text-shadow:0 1px 6px rgba(0,0,0,.7);}
.gcard .meta{padding-top:15px;}
.gcard .nm{font-family:var(--serif);font-size:21px;line-height:1.2;letter-spacing:-.015em;transition:.15s;}
.gcard:hover .nm{color:var(--copper);}
.gcard .sub{font-size:12.5px;color:var(--dim);margin-top:3px;}
.gcard .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.gcard .tg{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:3px;background:var(--shelf);color:var(--muted);}
.gcard .tg.b{background:rgba(201,114,74,.15);color:var(--copper);}
.gcard .stayline{font-size:12px;color:var(--dim);margin-top:10px;line-height:1.5;}

.grouphead{display:flex;align-items:baseline;gap:14px;margin:0 0 22px;}
.grouphead h3{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-weight:500;}
.grouphead .rule{flex:1;height:1px;background:var(--line-soft);}
.grouphead .ct{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;}
.groupwrap{margin-bottom:52px;}
.groupwrap:last-child{margin-bottom:0;}

.viewtoggle{display:flex;gap:0;border:1px solid var(--line);border-radius:5px;overflow:hidden;}
.viewtoggle button{
  font:inherit;font-size:12.5px;padding:8px 16px;background:transparent;border:0;
  color:var(--muted);cursor:pointer;transition:.15s;
}
.viewtoggle button[aria-pressed="true"]{background:var(--paper);color:#0A1214;font-weight:500;}
.hidden{display:none !important;}

/* ---------- footer ---------- */
footer.site{padding:72px 0 44px;border-top:1px solid var(--line-soft);margin-top:0;}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px;border-bottom:1px solid var(--line-soft);}
.fgrid h5{font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:500;margin:0 0 16px;}
.fgrid ul{list-style:none;margin:0;padding:0;}
.fgrid li{margin-bottom:10px;}
.fgrid a{text-decoration:none;font-size:13.5px;color:var(--muted);}
.fgrid a:hover{color:var(--paper);}
.fbot{display:flex;justify-content:space-between;gap:20px;padding-top:26px;font-size:12.5px;color:var(--dim);flex-wrap:wrap;}
.sister{background:var(--deep);border:1px solid var(--line-soft);border-radius:8px;padding:18px;margin-top:20px;}
.sister .l{font-size:12px;color:var(--dim);}
.sister .n{font-size:14.5px;margin-top:5px;}
.sister a{text-decoration:none;}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr;}}

/* ---------- prototype marker ---------- */
.proto{
  position:fixed;right:14px;bottom:14px;z-index:99;background:var(--copper);
  color:#120803;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 13px;border-radius:20px;font-weight:600;
}

/* ---------- what you'll photograph (evidence strip, sits under the score) ---------- */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;}
@media(max-width:900px){.shots{grid-template-columns:1fr 1fr;}}
.shot{display:block;text-decoration:none;}
.shot .ph{border-radius:6px;overflow:hidden;aspect-ratio:3/2;background:var(--shelf);}
.shot img{width:100%;height:100%;object-fit:cover;transition:.5s;}
.shot:hover img{transform:scale(1.05);}
.shot .cap{font-size:12px;color:var(--muted);margin-top:9px;line-height:1.45;}
.shot .cap b{color:var(--paper);font-weight:500;display:block;}
.shot .cap span{color:var(--dim);}

/* ---------- stay photos ---------- */
.stayimgs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.stayimgs img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:5px;}
@media(max-width:800px){.stayimgs{grid-template-columns:1fr 1fr;}}

/* ---------- month strip ---------- */
.months{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:20px;}
.mo{text-align:center;padding:12px 2px;border-radius:4px;background:var(--shelf);}
.mo .m{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);}
.mo .d{height:4px;border-radius:2px;margin-top:8px;background:var(--line);}
.mo.best .d{background:var(--copper);}
.mo.ok .d{background:var(--muted);}
.mo.best .m{color:var(--paper);}
@media(max-width:700px){.months{grid-template-columns:repeat(6,1fr);}}

/* ---------- suits / doesn't suit ---------- */
.suits{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;margin-top:24px;}
.suits .col{background:var(--abyss);padding:26px 24px;}
.suits .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;}
.suits .k.y{color:var(--copper);}
.suits .k.n{color:var(--dim);}
.suits ul{list-style:none;margin:0;padding:0;}
.suits li{font-size:14px;color:var(--muted);padding-left:18px;position:relative;margin-bottom:10px;line-height:1.5;}
.suits li:before{content:"";position:absolute;left:0;top:9px;width:8px;height:1px;background:var(--line);}
.suits .col.y li:before{background:var(--copper);}
@media(max-width:760px){.suits{grid-template-columns:1fr;}}

/* ---------- planning list ---------- */
.plan{margin-top:22px;}
.plan .item{display:grid;grid-template-columns:150px 1fr;gap:22px;padding:18px 0;border-top:1px solid var(--line-soft);}
.plan .item:last-child{border-bottom:1px solid var(--line-soft);}
.plan .k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--copper);padding-top:2px;}
.plan .v{font-size:14.5px;color:var(--muted);line-height:1.6;max-width:62ch;}
.plan .v b{color:var(--paper);font-weight:500;}
@media(max-width:700px){.plan .item{grid-template-columns:1fr;gap:6px;}}

/* ---------- interactive month strip ---------- */
.moWrap{margin-top:26px;}
.months{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;}
.mo{text-align:center;padding:12px 2px 10px;border-radius:4px;background:var(--shelf);cursor:pointer;transition:.15s;border:1px solid transparent;}
.mo:hover{background:var(--deep);border-color:var(--line);}
.mo[aria-selected="true"]{background:var(--deep);border-color:var(--copper);}
.mo .m{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);}
.mo .d{height:4px;border-radius:2px;margin-top:8px;background:var(--line);}
.mo.best .d{background:var(--copper);}
.mo.ok .d{background:var(--muted);}
.mo.shut .d{background:transparent;border-top:1px dashed var(--line);}
.mo.best .m,.mo[aria-selected="true"] .m{color:var(--paper);}
@media(max-width:700px){.months{grid-template-columns:repeat(6,1fr);}}

.moPanel{
  margin-top:16px;border:1px solid var(--line-soft);border-radius:8px;
  background:var(--deep);padding:26px 28px;min-height:150px;
}
.moPanel .st{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:3px;margin-bottom:14px;}
.moPanel .st.best{background:rgba(201,114,74,.16);color:var(--copper);}
.moPanel .st.ok{background:var(--shelf);color:var(--muted);}
.moPanel .st.shut{background:var(--shelf);color:var(--dim);}
.moPanel h4{font-size:21px;margin:0 0 10px;}
.moPanel p{font-size:14.5px;color:var(--muted);margin:0;max-width:62ch;line-height:1.6;}
.moPanel p b{color:var(--paper);font-weight:500;}
.moFacts{display:flex;gap:28px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);}
.moFacts div{font-size:12px;color:var(--dim);}
.moFacts div b{display:block;color:var(--paper);font-weight:400;font-size:14px;margin-top:3px;}
.moSp{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.moSp a,.moSp span{display:block;text-decoration:none;width:96px;}
.moSp .th{width:96px;height:64px;border-radius:4px;overflow:hidden;background:var(--shelf);}
.moSp .th img{width:100%;height:100%;object-fit:cover;}
.moSp .th.none{border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;}
.moSp .th.none:after{content:"no frame";font-size:10px;color:var(--dim);letter-spacing:.06em;}
.moSp .nm{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.3;}

/* ---------- month: confidence + current ---------- */
.moSp .cf{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;margin-top:3px;display:block;}
.moSp .cf.reliable{color:var(--copper);}
.moSp .cf.likely{color:var(--muted);}
.moSp .cf.luck{color:var(--dim);}
.predict{display:flex;align-items:center;gap:10px;margin-top:18px;padding:14px 16px;border-radius:6px;background:var(--shelf);}
.predict .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);flex:0 0 auto;}
.predict .v{font-size:13.5px;color:var(--muted);line-height:1.5;}
.predict .v b{color:var(--paper);font-weight:500;}
.predict.warn{background:rgba(201,114,74,.10);}
.predict.warn .v b{color:var(--copper);}

/* ==========================================================================
   Scoring overlays. Two of them: one for the water, one for the operator.
   They are separate because they answer different questions and a reader
   arrives with only one of them. A single merged panel forced everyone to
   scroll past the half they did not ask about.
   Native <dialog>, so Esc, the focus trap and inertness are the browser's job.
   ========================================================================== */
dialog.sx{
  border:0;padding:0;color:var(--paper);
  background:linear-gradient(180deg,#122126 0%,var(--deep) 46%);
  border-radius:14px;width:min(660px,calc(100vw - 28px));max-height:min(86vh,900px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 30px 80px -12px rgba(0,0,0,.7);
  overflow:hidden;
}
dialog.sx::backdrop{background:rgba(5,13,15,.76);backdrop-filter:blur(3px);}
dialog.sx[open]{display:flex;flex-direction:column;animation:sxin .22s cubic-bezier(.2,.7,.3,1);}
@keyframes sxin{from{opacity:0;transform:translateY(8px) scale(.985);}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){dialog.sx[open]{animation:none;}}

.sx .hd{
  flex:none;position:relative;padding:26px 30px 20px;
  padding-right:64px;
  border-bottom:1px solid var(--line-soft);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
}
.sx .hd .eyebrow{margin-bottom:9px;}
.sx .hd h2{
  font-family:Fraunces,Georgia,serif;font-weight:300;
  font-size:25px;line-height:1.2;margin:0;letter-spacing:-.01em;
}
.sx .hd .tot{text-align:right;flex:none;}
.sx .hd .tot .n{font-family:Fraunces,Georgia,serif;font-size:30px;line-height:1;font-weight:300;}
.sx .hd .tot .n s{text-decoration:none;font-size:15px;color:var(--dim);margin-left:1px;}
.sx .hd .tot .l{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:7px;}
.sx .x{
  position:absolute;top:16px;right:16px;width:28px;height:28px;padding:0;
  border:1px solid var(--line);border-radius:50%;background:transparent;
  color:var(--dim);font-size:15px;line-height:1;cursor:pointer;
  transition:color .15s,border-color .15s;
}
.sx .x:hover{color:var(--paper);border-color:var(--muted);}

.sx .bd{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 30px 34px;
  overscroll-behavior:contain;scrollbar-width:thin;}
.sx .bd > :last-child{margin-bottom:0;}
.sx .intro{font-size:13.5px;color:var(--muted);line-height:1.68;margin:20px 0 4px;max-width:60ch;}

.sx .row{padding:19px 0;border-bottom:1px solid var(--line-soft);}
.sx .row:last-of-type{border-bottom:0;}
.sx .row .top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.sx .row .nm{font-size:14.5px;font-weight:500;color:var(--paper);letter-spacing:.005em;}
.sx .row .vl{font-family:Fraunces,Georgia,serif;font-size:17px;font-weight:300;flex:none;}
.sx .row .vl s{text-decoration:none;color:var(--dim);font-size:12px;}
.sx .row .tr{height:2px;background:var(--line);margin:11px 0 0;border-radius:2px;overflow:hidden;}
.sx .row .fl{display:block;height:100%;background:var(--muted);border-radius:2px;}
.sx .row .df{font-size:12.5px;color:var(--muted);line-height:1.68;margin:11px 0 0;max-width:66ch;}
.sx .row.bm .nm,.sx .row.bm .vl{color:var(--copper);}
.sx .row.bm .fl{background:var(--copper);}
.sx .row.bm .chip{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);
  border:1px solid var(--copper-dim);border-radius:3px;padding:2px 6px;margin-left:9px;
  vertical-align:2px;white-space:nowrap;
}
.sx .row.na .nm,.sx .row.na .vl{color:var(--dim);}
.sx .row.na .tr{background:repeating-linear-gradient(90deg,var(--line) 0 3px,transparent 3px 7px);}

.sx .note{
  margin-top:24px;padding:16px 18px;border:1px solid var(--line-soft);border-radius:9px;
  background:rgba(255,255,255,.017);font-size:12.5px;color:var(--muted);line-height:1.72;
}
.sx .note b{color:var(--paper);font-weight:500;}
.sx .note + .note{margin-top:10px;}
.sx .ft{margin-top:18px;font-size:12px;color:var(--dim);line-height:1.6;}
.sx .ft a{color:var(--muted);text-underline-offset:3px;}
.sx .ft a:hover{color:var(--paper);}

@media (max-width:560px){
  .sx .hd{padding:20px 20px 16px;padding-right:56px;flex-direction:column;align-items:flex-start;gap:14px;}
  .sx .hd .tot{text-align:left;}
  .sx .bd{padding:4px 20px 28px;}
}

/* Prose slots that carry paragraph breaks. The build emits real <p> elements;
   without a margin rule they stack flush and the reader sees one wall of text
   with line breaks in it, which is worse than no breaks at all. */
.prose p{margin:0 0 1.15em;}
.prose p:last-child{margin-bottom:0;}

/* ---------- compare table: tell the two halves apart at a glance ----------
   Underwater and Operator are different measurements of different things, and
   a reader scanning the table needs to know which column they are in without
   reading the header. A copper wash marks the water; the operator column stays
   plain. The header was also clipping — these are explicit widths, not guesses. */
.idx th.uwcol{color:var(--copper);border-bottom-color:var(--copper-dim);}
.idx th.opcol{color:var(--muted);}
/* Explicit widths. With min-width only, the last unconstrained column
   absorbed every spare pixel — which is why Underwater rendered as a
   copper block a third of the table wide. */
/* These add up. Six axis columns plus four totals plus the destination name
   have to fit inside --wrap minus its padding, or the whole page scrolls
   sideways rather than the table doing it politely inside its own box. The
   sum below is 990 against 1016 available. */
.idx th.uwcol, .idx td.uwcol{width:104px;max-width:110px;white-space:nowrap;}
.idx th.opcol, .idx td.opcol{width:100px;max-width:106px;white-space:nowrap;}
.idx th.totcol, .idx td.totcol{width:100px;}
.idx th.gcol{width:64px;}
/* The sort arrow needs somewhere to sit. It is absent, not invisible, until
   the column is sorted — reserving it as inline space pushed the label into
   its neighbour instead. */
.idx th.r .ar{position:absolute;margin-left:5px;}
.idx th.r{position:relative;padding-left:14px;}
.idx tr.area td.uwcol{font-weight:500;}

/* Which total columns exist is a property of the scope, so it is declared once
   here rather than assigned per element in script. Rows are redrawn constantly;
   any JS that styles cells is racing the next innerHTML, and when it lost, a
   hidden header sat above a visible cell and shunted every number one column
   sideways. CSS cannot lose that race — it applies to rows that do not exist
   yet. */
body[data-scope="place"] .idx .opcol,
body[data-scope="place"] .idx .totcol,
body[data-scope="op"]    .idx .uwcol,
body[data-scope="op"]    .idx .totcol{display:none;}
.idx th, .idx td{overflow:visible;}
/* Scope toggle reads as a mode, not another tag filter. */
.filters .fbtn[data-scope][aria-pressed="true"]{background:var(--paper);color:var(--abyss);border-color:var(--paper);}

/* ---------- guides index control bar ----------
   Two rows with one job each: what you are looking at, then how it is ordered.
   The old single row wrapped the view toggle onto its own line below the
   filters, which read as a third unrelated control. */
.ctlbar{margin:0 0 34px;}
.ctlrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.ctlrow > .segbtn:only-child{margin-right:auto;}
.ctlrow + .ctlrow{margin-top:30px;}   /* was 10 — the two rows read as one block */
.ctlright{display:flex;align-items:center;gap:22px;margin-left:auto;}
/* row-gap, not just gap: when a group wraps, the second line needs vertical
   separation or it reads as a broken control rather than a second row. On a
   phone the three scope buttons cannot fit on one line at any sane type size,
   so wrapping is a certainty and has to be designed rather than tolerated. */
.segbtn{display:flex;gap:6px;row-gap:8px;flex-wrap:wrap;}
.rankby{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-right:4px;}
.scorelink{font-size:12.5px;color:var(--muted);white-space:nowrap;
  text-decoration:underline;text-decoration-color:var(--line);
  text-decoration-thickness:1px;text-underline-offset:4px;}
.scorelink:hover{color:var(--paper);text-decoration-color:var(--copper);}
.ctlbar .fbtn[data-scope][aria-pressed="true"]{background:var(--paper);color:var(--abyss);border-color:var(--paper);}
@media(max-width:720px){
  .ctlright{width:100%;margin-left:0;justify-content:space-between;}
  /* row-gap so a wrapped ctlrow keeps its two halves apart, and more air
     between the two rows once the first one starts wrapping — otherwise the
     Sort row crowds the view toggle and the whole block reads as one mass. */
  .ctlrow{gap:12px;row-gap:14px;}
  .ctlrow + .ctlrow{margin-top:24px;}
}
/* Below this the scope group always wraps. Letting the buttons grow gives two
   flush rows instead of a full-width pair and one orphan, so the wrap reads as
   deliberate. The view toggle takes the full width for the same reason. */
@media(max-width:560px){
  .ctlbar .segbtn .fbtn[data-scope]{flex:1 1 auto;justify-content:center;text-align:center;}
  .ctlbar .viewtoggle{width:100%;}
  .ctlbar .viewtoggle button{flex:1 1 0;}
  .ctlrow + .ctlrow{margin-top:26px;}
}
/* section captions inside the scoring overlay */
.sx .sxcap{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  margin:26px 0 2px;padding-top:18px;border-top:1px solid var(--line-soft);
}
.sx .bd > .sxcap:first-of-type{border-top:0;padding-top:0;margin-top:22px;}

/* ---------- end-of-page CTA ---------- */
.endcta{border-top:1px solid var(--line-soft);}
.ctagrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.ctacard{
  border:1px solid var(--line-soft);border-radius:12px;padding:28px 30px;
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent);
  display:flex;flex-direction:column;align-items:flex-start;
}
.ctacard h3{font-family:Fraunces,Georgia,serif;font-weight:300;font-size:22px;margin:10px 0 0;letter-spacing:-.01em;}
.ctacard p{font-size:14px;color:var(--muted);line-height:1.68;margin:12px 0 22px;max-width:44ch;}
.ctacard .btn{margin-top:auto;}
@media(max-width:720px){.ctagrid{grid-template-columns:1fr;}.ctacard{padding:24px;}}

/* ---------- compare table: the six axes as columns ----------
   Ranking by Macro used to float Lembeh to the top showing 77% — its overall —
   with nothing on the row explaining the order. The axes are columns now, so
   the reason for the ranking is visible beside it, and so is what the place
   gives up on the other five. */
/* Sized for a one- or two-character number, not the bars these used to hold. */
.idx th.axcol, .idx td.axcol{width:72px;padding-right:6px;font-variant-numeric:tabular-nums;}
.idx th.axcol{font-size:9px;letter-spacing:.03em;white-space:nowrap;}
.idx th.axcol.on{color:var(--copper);border-bottom-color:var(--copper-dim);}
.idx th[data-k]{cursor:pointer;user-select:none;}
.idx th[data-k]:hover{color:var(--paper);}

/* ---------- compare table: bars, and a row you can hit ---------- */
.idx tr.area{cursor:pointer;}
.idx tr.area:hover td{background:rgba(255,255,255,.022);}
.idx td.dest .flagrow{display:block;margin:5px 0 0;}
.idx td.dest .flag{margin:0 6px 0 0;}
.idx td.dest .s{margin-top:5px;}
.idx td.dest .s2{display:flex;align-items:center;gap:10px;margin-top:8px;}
.idx td.dest .s2 .yr{font-size:11.5px;color:var(--dim);}

/* ---------- compare table: the number is the mark ----------
   A bar beside a value encodes the same fact twice. Magnitude is carried by
   the type itself — bright and medium-weight at the top of the scale, receding
   to the background at the bottom — so a column can be scanned for its high
   scores without a single non-data mark being added. */
.idx td.axcol{padding-top:12px;padding-bottom:12px;font-variant-numeric:tabular-nums;
  font-size:13.5px;color:var(--muted);}
.idx td.axcol.v10,.idx td.axcol.v9{color:#F2EFE9;font-weight:500;}
.idx td.axcol.v8{color:#D2D6D3;}
.idx td.axcol.v7{color:#AEB7B6;}
.idx td.axcol.v6{color:#96A3A5;}
.idx td.axcol.v5{color:#82908F;}
.idx td.axcol.v4{color:#6B7B7E;}
.idx td.axcol.v3,.idx td.axcol.v2,.idx td.axcol.v1,.idx td.axcol.v0{color:#546265;}
.idx td.axcol.faint{opacity:.55;font-weight:400;}
.idx td.axcol.on{color:var(--copper);}
.idx th.axcol.on{color:var(--copper);border-bottom-color:var(--copper-dim);}
/* Tufte again: rules only where they separate, never a grid. */
.idx tr.stay td{border-top:0;}

/* The sort arrow only appears on the column actually doing the sorting. Six
   permanent arrows cost about sixty pixels of width and carried no information. */
.idx td.dest{min-width:190px;}

/* The destination cell takes whatever is left; every other column is fixed. */
.idxwrap{overflow-x:auto;max-width:100%;}
.idx{table-layout:auto;}
.idx td.dest,.idx th:first-child{width:auto;min-width:190px;}
.idx th.tot,.idx td.tot,.idx th:last-child,.idx td.g{width:64px;white-space:nowrap;}

/* The underwater band is a column marker, not a fill. It needs air on both
   sides or it reads as a hard edge butted against the number. */
.idx th.uwcol, .idx td.uwcol{padding-left:16px;padding-right:16px;border-radius:0;}
.idx tr:first-child td.uwcol{border-top-left-radius:4px;border-top-right-radius:4px;}
.ctlrow.end{justify-content:flex-end;margin-top:14px;}

/* ---------- compare table: sticky header ----------
   Sixteen destinations is more than a screen. Scroll past the head and the
   numbers become anonymous — nine columns of digits with nothing saying which
   axis is which. The header now travels with them. */
.idxwrap{overflow-x:auto;max-width:100%;overflow-y:visible;}
.idx thead th{
  position:sticky;top:0;z-index:5;
  background:var(--abyss);
  box-shadow:inset 0 -1px 0 var(--line);
}
.idx thead th.opcol{background:var(--abyss);}
@supports not (position:sticky){ .idx thead th{position:static;} }

/* Operator rows carry the operator axes in the same six columns. They are
   dimmed and the header names them, so the two vocabularies never collide. */

.idx td.axcol.op{color:var(--muted);font-weight:400;}
.idx td.axcol.op.v10,.idx td.axcol.op.v9{color:#C6CCC9;}
.idx td.axcol.op.v8{color:#AEB6B4;}
.idx td.axcol.op.v7{color:#98A3A2;}
.idx td.axcol.op.v6,.idx td.axcol.op.v5{color:#7E8C8B;}
.idx td.axcol.op.v4,.idx td.axcol.op.v3,.idx td.axcol.op.v2,.idx td.axcol.op.v1,.idx td.axcol.op.v0{color:#606E70;}
.idx td.axcol.op.on{color:var(--copper);}

/* Axis labels live inside each block, so a destination names its own six and an
   operator names its six — two vocabularies, never crowded into one header.
   The sticky header keeps only the summary columns, which never change meaning. */
.idx tr.axlab td{
  border:0;padding:14px 6px 4px 0;font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);text-align:right;font-weight:500;
}
.idx tr.axlab.op td{color:#5C6B6D;padding-top:10px;}
/* An axis label is a sort control. It has to look like one or nobody clicks it,
   and it has to work when they do — a dead affordance is worse than none. */
.idx tr.axlab td.axsort{cursor:pointer;user-select:none;transition:color .15s;}
.idx tr.axlab td.axsort:hover,
.idx tr.axlab td.axsort:focus-visible{color:var(--paper);outline:none;}
.idx tr.axlab td.axsort:focus-visible{text-decoration:underline;text-underline-offset:3px;}
.idx tr.axlab td.axsort.on{color:var(--copper);}
.idx tr.axlab td.axsort .ar{font-size:8.5px;}
/* The repeated total labels are a scroll aid, not a second header. They sit a
   shade back from the axis names so the eye still reads the numbers first. */
.idx tr.axlab td.uwcol,.idx tr.axlab td.opcol,.idx tr.axlab td.totcol{
  font-size:9px;letter-spacing:.03em;text-transform:uppercase;}
.idx tr.axlab td:last-child{font-size:9px;letter-spacing:.03em;text-transform:uppercase;}
.idx tr.axlab + tr.area td,.idx tr.axlab + tr.stay td{border-top:0;}
.idx th.axcol.blank{background:transparent;border-bottom-color:var(--line-soft);}
.ctlrow.sortrow{justify-content:flex-start;gap:10px;}
.sortlab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}

/* Totals keep their own identity without a full-height column wash, which broke
   once inline label rows interrupted the columns. Colour lives on the number. */
.idx th.uwcol{color:var(--copper);border-bottom-color:var(--copper-dim);}
.idx td.uwcol{color:var(--copper);}
.idx tr.stay td.uwcol{color:#8F5B42;}
.idx th.opcol{color:#7FA6AE;border-bottom-color:#3E5A62;}
.idx td.opcol{color:#7FA6AE;}
.idx th.totcol{color:var(--paper);}
.idx td.tot{color:var(--paper);font-weight:500;}
.idx thead th.uwcol,.idx thead th.opcol{background:var(--abyss);}

/* Give the two longest labels a little more room than the short ones, so a
   fourteen-character word is not squeezed into the same box as FOOD. */
.idx tr.axlab td{padding-left:4px;}
.idx tr.axlab td:nth-child(5),.idx tr.axlab td:nth-child(7){letter-spacing:.02em;}
.hint.oponly{display:none;max-width:78ch;line-height:1.65;margin:0 0 22px;}