/* ========================================================================== 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;} /* ---------- 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; } /* ---------- header ---------- */ /* ONE HEADER, EVERY PAGE -- Miles, 22 Sep: "the root pages are the reference". Measured at 1400 on index.html (the Below Magazine header, header.run): 64px row + 1px rule, Montserrat, wordmark 13px/500 at .22em caps, a 24px mark, nav 17px #aeb6ba with the current page white 500, a copper button 14px/500 padded 11px 20px. shell_nav() stays the one markup for guides, operators, product pages and the hand-built roots; these are the root header's SIZES. THE CONTENT WIDTH IS NOT ONE OF THEM -- a first pass copied header.run's own measure (1260px/48px, which is that six-page design's own choice) onto header.site, and the header stopped lining up with the footer and every other .fwrap/.wrap block on the page (item4, found by measuring the footer against it: 138 against 214 at 1440). header.site keeps var(--wrap), the measure the rest of a guide/operator/product page is held to; only the type, the button and the fixed height change. Scoped to header.site, so nothing else called .nav or .brand is touched. */ header.site{ position:sticky;top:0;z-index:60;background:#0e1416;color:#efe9df; border-bottom:1px solid rgba(255,255,255,.08);font-family:Montserrat,system-ui,sans-serif; } header.site .nav{ max-width:var(--wrap);margin:0 auto;padding:0 32px;height:64px;box-sizing:border-box; display:flex;align-items:center;justify-content:space-between;gap:24px; } header.site .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#efe9df;flex:0 0 auto;} header.site .brand svg{width:24px;height:24px;flex:0 0 auto;} header.site .brand .wm{font:500 13px Montserrat,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;} header.site .nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;} header.site .nav ul a{font:400 17px Montserrat,system-ui,sans-serif;color:#aeb6ba;text-decoration:none;transition:.15s;} header.site .nav ul a:hover,header.site .nav ul a[aria-current="page"]{color:#fff;} header.site .nav ul a[aria-current="page"]{font-weight:500;} header.site .nav .btn{background:#c2673a;border:1px solid #c2673a;color:#fff;padding:11px 20px;border-radius:3px; font:500 14px Montserrat,system-ui,sans-serif;letter-spacing:0;text-transform:none;white-space:nowrap;flex:0 0 auto;} header.site .nav .btn:hover{background:#a9542c;border-color:#a9542c;} @media(max-width:900px){header.site .nav{padding:0 20px;}header.site .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;} /* ONE COLUMN. Miles, on the two-column version: "the type face and how it just seems to float on the right ... something about it just feels off." The lede was bottom-aligned to a wrapped headline with a wide gap between them: no shared edge, no shared baseline. Eyebrow, headline, lede, one left edge. Proven on the V3 proposal first. */ .shead{display:block;margin-bottom:36px;} .shead h2{font-size:clamp(25px,3.2vw,34px);max-width:20ch;margin-top:12px;} .shead .lede{max-width:60ch;font-size:14.5px;margin-top:14px;} /* ---------- score components ---------- */ /* .srow (the old score bars) retired 22 Sep 2026: no page rendered it once the product page moved to the Below Magazine grammar. The rules are in git if a rollback needs them. */ /* difficulty ladder */ .rungs{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;} @media(max-width:700px){.rungs{grid-template-columns:1fr 1fr;}} .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;} .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.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;}} .hidden{display:none !important;} /* ---------- footer ---------- */ /* THE FOOTER, IN THE BELOW MAGAZINE GRAMMAR -- 19 Sep 2026. Self-contained tokens: this lands on pages carrying three different palettes, so it declares its own and inherits nothing. Values are template.html's --g-* set. The old dark .fgrid rules below are kept for rollback and match nothing now; see css-check. */ footer.site.fend{display:block;--fe-paper:#f2efe9;--fe-ink:#141414;--fe-mut:#8a8a8a;--fe-rule:#e4e0d8; --fe-cu:#C9724A;--fe-mono:"IBM Plex Mono",ui-monospace,monospace; background:var(--fe-paper);color:var(--fe-mut);border-top:1px solid var(--fe-rule); margin:0;padding:34px 0 40px;font:400 10.5px/2 var(--fe-mono);letter-spacing:.18em;text-transform:uppercase;} /* 22 Sep eve: the padding was max(gutter,(100% - 1180px)/2) INSIDE a box already capped at 1180px and centred -- the half-margin was paid twice, so at 1440 the footer ran 260-1180 while the guide header runs 212-1228. The cap centres it; the padding is only the gutter. */ footer.site.fend .fwrap{display:block;width:100%;box-sizing:border-box;max-width:1180px;margin:0 auto;padding:0 clamp(16px,6vw,84px);} footer.site.fend .fend-row{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px 28px;padding:10px 0;} footer.site.fend .fend-row + .fend-row{border-top:1px solid var(--fe-rule);} footer.site.fend nav.fend-row{justify-content:flex-start;font-size:12px;} footer.site.fend a{color:var(--fe-ink);text-decoration:none;border-bottom:1px solid transparent;} footer.site.fend a:hover{border-bottom-color:var(--fe-cu);color:var(--fe-ink);} footer.site.fend .fend-fine{font-size:10.5px;letter-spacing:.14em;} footer.site.fend .fend-fine span{display:flex;flex-wrap:wrap;gap:6px 18px;} footer.site.fend .fend-fine a{color:var(--fe-mut);} @media(max-width:700px){footer.site.fend .fend-row{flex-direction:column;gap:8px;}} 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;}} /* ---------- operator photographs ---------- ONE HOME. This sheet held the retired two-column 3:2 grid while template.html held the six-column mosaic that replaced it -- one name, two components, both declared bare, so name-check's descendant-only rule two never saw them disagree. The page-local copy won, which is the only reason the page looked right. Lifted here verbatim; rule three now catches the bare case. */ /* ---- operator photographs ---- The same lesson the gallery mosaic learned, in the quieter place where it matters more. This was two fixed columns with every cell forced to 3:2, so Misool Resort's single photograph rendered as a half-width orphan beside a hole, three photographs rendered as two and a gap, and a 3.25:1 panorama of a jetty kept its middle 46%. These are the least glamorous pictures on the site and they do the one job the reef frames cannot: they show a reader what they are buying. Cropping them badly on the section that sells the trip is not a small thing. Six columns, and the layout follows the COUNT rather than assuming two. The class comes from build.py, which read the real ratio out of each JPEG header; the CSS only turns a name into a span. Wide frames always run full width and tall frames keep a tall cell, so nothing is cropped into a shape it was not shot in. */ .stayimgs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:20px;} .stayimgs img{width:100%;height:100%;object-fit:cover;border-radius:4px;display:block; background:var(--deep);aspect-ratio:3/2;} /* Span comes from opLayout(), which pairs the frames so no row is ever short. Shape comes from the file's own ratio: a panorama is never squeezed into a 3:2 box and a portrait is never laid on its side. */ .stayimgs img.s6{grid-column:span 6;} /* THE ODD ONE OUT. Three photographs pair two at half width and leave one at full width. A 4:3 at full width is a 720px tower -- Miles, 4 September: "the third photos ... weren't so high?" They never were cropped; the rule only ever protected panoramas and portraits. A normal frame that lands alone crops to a wide band (about 2.1:1, his own example), keeping ~70% of a 3:2. Panoramas (.sw) and portraits (.st) keep their own shapes below. */ .stayimgs img.s6:not(.sw):not(.st){aspect-ratio:2.1/1;} .stayimgs img.s3{grid-column:span 3;} .stayimgs img.sw{aspect-ratio:auto;max-height:300px;object-fit:cover;} .stayimgs img.st{aspect-ratio:2/3;} .stayimgs img.s6.st{grid-column:span 3;justify-self:center;max-width:340px;} @media(max-width:640px){ .stayimgs img.s3,.stayimgs img.s6{grid-column:span 6;} } /* ---------- 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 ---------- */ /* ---------- 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;}} .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;} .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 , 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

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;} /* 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="op"] .idx .uwcol{display:none;} .idx th, .idx td{overflow:visible;}/* ---------- 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. */ /* 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. */ /* 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){ } /* .scorelink, .endcta, .ctagrid, .ctacard retired 16 Sep -- they styled the old destinations.html's "how this is scored" link and end-of-page CTA cards. Destinations is ported now (see notes/72-ive-port.md); the new page's "How this is scored" button is .v3-btn, and it has no end CTA grid. Nothing else on the site used these four. */ /* ---------- 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;} /* A LABEL THAT DOES NOT FIT IS A LAYOUT FAULT, NOT A NAMING FAULT. SUSTAINABILITY is 14 characters and needs ~90px at this type; the column is 72. `white-space:nowrap` turned that into a shove -- the header pushed into its neighbour and every heading after it drifted, which is what Miles saw. Wrapping costs one line of header height and keeps the word the whole category uses. It also fixes the axis generally rather than one label: nothing here has to be short any more. */ .idx th.axcol{font-size:9px;letter-spacing:.03em;line-height:1.2; white-space:normal;overflow-wrap:anywhere;vertical-align:bottom;} .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);} /* 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;} /* ---------- 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. */ .idx tr.nest td.axcol{color:var(--muted);font-weight:400;} /* 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. */ .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; }/* An axis label is a sort control. It has to look like one or nobody clicks it. */ .idx tr.axlab td[data-sort]{cursor:pointer;user-select:none;transition:color .15s;} /* 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 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;} /* ---------- the homepage top ten: give the table its columns ---------- This table borrows .idx from the guides index, and .idx is written for a table with six axis columns. Here there are seven ordinary ones and no widths, so `table-layout:auto` sized them by content: at --wrap the Destination column took 287px, Level and Last visited took 343px between them to hold a pill and a four-digit year, and the four score columns — the reason the table exists — were left sharing 359px, getting tighter left to right. It read as unbalanced because it was. Percentages rather than pixels, so it holds together between --wrap and the 900px breakpoint instead of only at one width. Scoped to #topTable: the guides index has its own column arithmetic and its own lint checking it. */ #topTable{table-layout:fixed;} #topTable th:nth-child(1),#topTable td:nth-child(1){width:30%;} /* Destination */ #topTable th:nth-child(2),#topTable td:nth-child(2){width:13%;} /* Level */ #topTable th:nth-child(3),#topTable td:nth-child(3){width:11%;} /* Last visited */ #topTable th:nth-child(4),#topTable td:nth-child(4){width:13%;} /* Underwater */ #topTable th:nth-child(5),#topTable td:nth-child(5){width:12%;} /* Operator */ #topTable th:nth-child(6),#topTable td:nth-child(6){width:11%;} /* Overall */ #topTable th:nth-child(7),#topTable td:nth-child(7){width:10%;} /* Grade */ /* .idx sets fixed pixel widths on these for the guides index. Under table-layout:fixed the first row wins, and a stray 104px would override the share above, so the percentage is restated at higher specificity. */ #topTable th.uwcol,#topTable td.uwcol{width:13%;max-width:none;} #topTable th.opcol,#topTable td.opcol{width:12%;max-width:none;} #topTable td.dest{min-width:0;} /* Below 900px .hidesm removes Level and Last visited. Reapportion, or the five survivors inherit shares that no longer sum to the table. */ @media(max-width:900px){ #topTable th:nth-child(1),#topTable td:nth-child(1){width:42%;} #topTable th:nth-child(4),#topTable td:nth-child(4), #topTable th.uwcol,#topTable td.uwcol{width:17%;} #topTable th:nth-child(5),#topTable td:nth-child(5), #topTable th.opcol,#topTable td.opcol{width:16%;} #topTable th:nth-child(6),#topTable td:nth-child(6){width:14%;} #topTable th:nth-child(7),#topTable td:nth-child(7){width:11%;} } /* ---------- the season map ---------- */ #seasonMap{margin-top:26px;} .smap{width:100%;height:auto;display:block;background:rgba(14,24,27,.6);border-radius:6px;} .smland{fill:rgba(140,160,163,.17);stroke:none;} .smeq{stroke:rgba(150,170,172,.10);stroke-width:1;stroke-dasharray:3 6;} .smpt{cursor:pointer;} .smhit{fill:transparent;} .smdot{transition:r .18s,fill .18s;stroke:var(--abyss);stroke-width:1.5;} .smpt:hover .smdot,.smpt:focus-visible .smdot{r:8.5;} .smpt:focus-visible{outline:none;} .smpt:focus-visible .smdot{stroke:var(--paper);stroke-width:2;} .smlist{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 34px;margin-top:22px;} .smlist a{display:flex;justify-content:space-between;align-items:baseline;gap:12px; padding:8px 0;border-bottom:1px solid var(--line-soft);text-decoration:none;} .smlist a:hover .n{color:var(--copper);} .smlist .n{font-size:14px;color:var(--paper);} .smlist .s{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;} @media(max-width:900px){.smlist{grid-template-columns:1fr 1fr;}} @media(max-width:600px){.smlist{grid-template-columns:1fr;}} .smlab{fill:var(--paper);font-size:11px;letter-spacing:.02em;opacity:0; pointer-events:none;paint-order:stroke;stroke:var(--abyss);stroke-width:3.5px; stroke-linejoin:round;transition:opacity .15s;} .smpt:hover .smlab,.smpt:focus-visible .smlab{opacity:1;} /* ========================================================================== REDESIGN — "witness with a method" Added on the redesign-witness branch, August 2026. The ordering rule everything below serves: DESIRE FIRST, PROOF SECOND, HONESTY THIRD. The old site led with methodology — "Every place, scored the same way" — which is a sentence nobody ever booked a dive trip because of. The honesty is what makes the praise believable, so it has to be present and findable; it does not have to be the first thing said. ========================================================================== */ /* ---------- cross-document view transitions ---------- Supported in Chrome, Edge, Safari 18.2+ and Firefox as of 2026. Costs no JavaScript and degrades to nothing at all in a browser that lacks it, which is the only reason it is worth having on a static site. */ @view-transition{navigation:auto;} ::view-transition-old(root){animation:vtOut .22s ease both;} ::view-transition-new(root){animation:vtIn .28s ease both;} @keyframes vtOut{to{opacity:0;}} @keyframes vtIn{from{opacity:0;}} @media(prefers-reduced-motion:reduce){ @view-transition{navigation:none;} html{scroll-behavior:auto;} } /* ---------- the frame ---------- One photograph at size, with what is actually known about it: the animal (verified against the species audit), where it was taken, and — when Miles has written it — why it was hard to take. Difficulty and rarity are the two things that make his work worth money and the two things invisible in the file itself. This unit exists to give them somewhere to live. It renders without them rather than inventing them. */ .frame{display:grid;grid-template-columns:1.35fr 1fr;gap:0;align-items:stretch; border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;background:var(--deep);} .frame.rev>.frame-img{order:2;} .frame-img{position:relative;min-height:420px;} .frame-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;} .frame-body{padding:40px 38px;display:flex;flex-direction:column;justify-content:center;} .frame-body .sci{font-style:italic;font-size:12.5px;color:var(--dim);letter-spacing:.01em;} .frame-body h3{font-size:clamp(24px,2.6vw,32px);font-weight:300;line-height:1.12;margin:10px 0 0;} .frame-where{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--copper); margin-top:14px;} .frame-body p{color:var(--muted);font-size:14.5px;line-height:1.68;margin:18px 0 0;max-width:44ch;} .frame-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;} .frame-meta .pill{background:transparent;border:1px solid var(--line);} .frame-acts{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:28px;} .frame-ed{font-size:11.5px;color:var(--dim);} @media(max-width:900px){ .frame{grid-template-columns:1fr;} .frame.rev>.frame-img{order:0;} .frame-img{min-height:0;} .frame-img img{aspect-ratio:3/2;} .frame-body{padding:30px 26px;} } /* ---------- the planner ---------- Replaces "Join the waitlist", which asks for an email and returns nothing until a trip exists 6 to 48 months later. This answers a real question out of data nobody else has, and the email is given for the answer rather than extracted for the promise of one. */ .plan{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--deep);} .plan-q{padding:26px 30px;border-bottom:1px solid var(--line-soft);} .plan-q:last-of-type{border-bottom:0;} .plan-q .qh{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;} .plan-q .qn{font-family:var(--serif);font-size:15px;color:var(--copper);width:22px;flex:none;} .plan-q .qt{font-size:14.5px;color:var(--paper);} .plan-opts{display:flex;flex-wrap:wrap;gap:8px;padding-left:34px;} .popt{background:transparent;border:1px solid var(--line);color:var(--muted); font:inherit;font-size:13px;padding:9px 16px;border-radius:4px;cursor:pointer;transition:.15s;} .popt:hover{border-color:var(--paper);color:var(--paper);} .popt.on{background:var(--copper);border-color:var(--copper);color:#120803;} .plan-out{background:var(--abyss);border-top:1px solid var(--line);padding:30px;} .plan-res{display:flex;flex-direction:column;gap:2px;margin-top:6px;} .presult{display:grid;grid-template-columns:auto 1fr auto auto;gap:16px;align-items:baseline; padding:13px 0;border-bottom:1px solid var(--line-soft);text-decoration:none;} .presult:last-child{border-bottom:0;} .presult .rk{font-family:var(--serif);font-size:14px;color:var(--dim);width:20px;} .presult .nm{font-size:15px;color:var(--paper);} .presult .nm .sb{display:block;font-size:12px;color:var(--dim);margin-top:2px;} .presult:hover .nm{color:var(--copper);} .presult .st{font-size:11px;letter-spacing:.1em;text-transform:uppercase;} .presult .sc{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;} .plan-none{color:var(--muted);font-size:14px;} @media(max-width:640px){ .plan-opts{padding-left:0;} .plan-q{padding:22px 20px;} .presult{grid-template-columns:auto 1fr;gap:6px 12px;} .presult .st,.presult .sc{grid-column:2;} } /* ---------- the ask ---------- One email capture, phrased as an exchange rather than a favour. */ .ask{border:1px solid var(--line);border-radius:10px;padding:38px 36px;background: linear-gradient(180deg,var(--deep),var(--abyss));} .ask h3{font-size:clamp(22px,2.4vw,28px);font-weight:300;margin:8px 0 0;} .ask p{color:var(--muted);font-size:14.5px;max-width:56ch;margin:14px 0 0;} .askform{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;} .askform input{flex:1 1 260px;background:var(--abyss);border:1px solid var(--line); border-radius:4px;color:var(--paper);font:inherit;font-size:14px;padding:14px 16px;} .askform input:focus{outline:none;border-color:var(--copper);} .askform input::placeholder{color:var(--dim);} .ask .fine{font-size:11.5px;color:var(--dim);margin-top:14px;} /* ---------- section rhythm ---------- A full-bleed photograph between sections, used sparingly, to stop the page reading as an unbroken run of grids. Height is capped so a 3:2 frame never becomes a strip — the fault that shipped four times already. */ .breath{position:relative;height:min(56vh,520px);overflow:hidden;margin:0;} .breath img{width:100%;height:100%;object-fit:cover;} .breath figcaption{position:absolute;inset:auto 0 0 0;padding:26px 0; background:linear-gradient(180deg,transparent,rgba(10,18,20,.9));} .breath figcaption .t{font-family:var(--serif);font-size:17px;} .breath figcaption .s{font-size:12px;color:var(--muted);margin-top:3px;} /* ---------- the month strip ---------- The coloured column is .mbar, NOT .bar. template.html already had a .bar — a prose callout with a copper left border and 15px of padding — and on a guide page that page-local rule reached straight into the calendar and applied its padding to every column. With box-sizing:border-box the padding outgrew the 36/25/12 heights and every month rendered the same height, which is the entire information content of the strip. One name, two components. Moved here from template.html so the guide pages and the season map on the destinations index render ONE calendar rather than two that merely look alike. Miles: "why create a new calendar element when we already have one". ------------------------------------------------------------------------ */ .mgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;align-items:end;} .mo2{cursor:pointer;text-align:center;} /* THE HOVER BOX HAD NO ROOM IN IT. The month cell takes a 1px border on hover, and the bar was drawn edge to edge inside it -- so the outline arrived hard against the bar on both sides and against the legend below. The state was right; the cell was never built to hold a border. Padding on the CELL, not a margin on the bar: the bar's height is the whole information content of this strip, and a margin would eat into it. */ .mo2{padding:5px 6px 4px;border-radius:4px;border:1px solid transparent; transition:border-color .18s,background .18s;} .mo2:hover{border-color:var(--line);background:rgba(255,255,255,.02);} .mo2 .mbar{display:block;border-radius:3px;background:#2A3436;opacity:.74;transition:opacity .18s,background .18s;} .mo2.best .mbar{height:36px;background:var(--copper);} .mo2.ok .mbar{height:25px;background:#5A7E88;} /* 4.30:1 — was #3E5A62 at 2.56:1 */ .mo2.shut .mbar{height:12px;background:var(--shelf);} .mo2 .mn{display:block;font-size:11.5px;margin-top:6px;color:var(--muted);} .mo2.shut .mn{color:#4A5A5E;text-decoration:line-through;} .mo2:hover .mbar,.mo2.sel .mbar{opacity:1;} .mo2.sel .mn{color:var(--paper);} .mkey{display:flex;gap:18px;margin:16px 0 16px;font-size:11px;color:var(--dim);} .mkey i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px;} .mkey i.best{background:var(--copper);}.mkey i.ok{background:#3E5A62;}.mkey i.shut{background:var(--shelf);} /* On the season map the bar means something different: not one destination's state in a month, but HOW MANY of the sixteen are at their best. Height is set inline from the count, so the fixed heights above are turned off. This also retires the sentence that used to sit above it — "August. 7 at their best, 7 worth going, 2 I would not" — which read as confusing next to a calendar that was about to say the same thing. The bars say it. */ .mgrid.mcount .mo2 .mbar{height:auto;background:#2A3436;opacity:1;} .mgrid.mcount .mo2.on .mbar{background:var(--copper);} .mgrid.mcount .mo2:hover .mbar{background:#3E5A62;} .mgrid.mcount .mo2.on .mn{color:var(--paper);} .mgrid.mcount .mo2 .ct{display:block;font-size:10px;color:var(--dim);margin-top:3px; font-variant-numeric:tabular-nums;} .mgrid.mcount .mo2.on .ct{color:var(--copper);} .mgrid.mcount .mo2:focus-visible{outline:1px solid var(--paper);outline-offset:3px;border-radius:3px;} .qsub{font-size:11.5px;color:var(--dim);margin:12px 0 0;padding-left:34px;line-height:1.5;} .plan-q .mgrid{padding-left:34px;} @media(max-width:640px){.qsub,.plan-q .mgrid{padding-left:0;}} .pclear{font-size:11.5px;padding:5px 12px;} .pclear:disabled{opacity:.5;cursor:default;} .plan-q .qh{width:100%;} /* ---------- the shop, and the one control bar it shares with the guides ---- One result set, one bar, applied state as removable chips with live counts. The old prints page had five collection tiles linking to "#", a separate region list and a grid of squares — three things showing overlapping subsets with no shared state. ------------------------------------------------- */ .shopbar{border:1px solid var(--line);border-radius:10px;background:var(--deep); padding:16px 18px 14px;} .shoprow{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:flex-end;} .shopf{display:flex;flex-direction:column;gap:6px;min-width:150px;} .shopf label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim); font-weight:500;} .shopf select{background:var(--abyss);border:1px solid var(--line);border-radius:4px; color:var(--paper);font:inherit;font-size:13.5px;padding:9px 11px;min-width:150px;} .shopf select:focus{outline:none;border-color:var(--copper);} .shopf select option:disabled{color:var(--dim);} .shopsort{margin-left:auto;} .shopchips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:14px; padding-top:12px;border-top:1px solid var(--line-soft);min-height:30px;} .chip{background:rgba(201,114,74,.14);border:1px solid rgba(201,114,74,.42);color:var(--copper); font:inherit;font-size:12px;padding:4px 11px;border-radius:3px;cursor:pointer;transition:.15s;} .chip:hover{background:rgba(201,114,74,.24);} .chip-all{background:transparent;border-color:var(--line);color:var(--muted);} .shopcount{font-size:13.5px;color:var(--muted);margin:20px 0 16px;} .shopcount b{color:var(--paper);font-weight:500;} .shopgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px;} @media(max-width:900px){.shopgrid{grid-template-columns:1fr 1fr;}.shopsort{margin-left:0;}} @media(max-width:560px){.shopgrid{grid-template-columns:1fr;}} /* THE TILE IS A TILE, WHATEVER TAG IT IS. A Library tile is an when the frame has a product page to link to and a