/* ============================================================================
   The DolFin blog: the list, the tier pages and the post (blog spec, mockup 2).
   Loaded after brand.css and site.css. The site header and footer are site.css's.
   Class names the old blog shared with site.css (bucket, cause, num, dot, faq-item,
   meta) are set here in full, under the blog's own containers.
   ============================================================================ */
.blog :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote,fieldset){margin:0}
.blog img{height:auto}
.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:24px;position:relative}
[data-t="shore"]{--t:var(--world-sand-bg);--on:var(--world-sand-on)}
[data-t="lagoon"]{--t:var(--world-shallows-bg);--on:var(--world-shallows-on)}
[data-t="out"]{--t:var(--world-blue-bg);--on:var(--world-blue-on)}
[data-t="deep"]{--t:var(--world-navy-bg);--on:var(--world-navy-on)}
.blog .k{font:700 12px/1 var(--font-family-mono);letter-spacing:.12em;text-transform:uppercase}

/* ---------- the list page and the tier pages ---------- */
.bl-head{padding-block:40px 28px;display:grid;gap:14px}
.bl-head .k{color:var(--color-ink-3)}
.bl-head h1{font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:-.045em;font-weight:800;max-width:13em}
.lede{font-size:18px;line-height:1.55;color:var(--color-ink-2);max-width:38rem;text-wrap:pretty}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--radius-pill);background:var(--color-ground);font-weight:700;font-size:14px;text-decoration:none}
.chip b{font:700 12px/1 var(--font-family-mono);color:var(--color-ink-3)}
.chip i{width:10px;height:10px;border-radius:50%;background:var(--t);box-shadow:inset 0 0 0 1.5px rgba(5,26,73,.3)}
.chip.on{background:var(--color-ink);color:var(--color-on-dark)}
.chip.on b{color:var(--color-on-dark);opacity:.7}
.chip.on i{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.chip:focus-visible,.tile:focus-visible,.copy:focus-visible,.back:focus-visible,.crumb a:focus-visible,.cover .tchip:focus-visible,.badge:focus-visible{outline:3px solid var(--color-ink);outline-offset:3px}
.ask a:focus-visible,.cover[data-t="deep"] a:focus-visible{outline-color:var(--color-on-dark)}
.grid{display:grid;gap:30px;padding-block:14px 72px}
.tile{display:grid;gap:14px;align-content:start;text-decoration:none;color:inherit;border-radius:var(--radius-card)}
.cov{position:relative;aspect-ratio:16/10;border-radius:var(--radius-card);background:var(--t);margin-bottom:14px}
.tchip{position:absolute;right:14px;top:14px;background:var(--color-surface);color:var(--color-ink);font:700 11px/1 var(--font-family-mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:var(--radius-pill);text-decoration:none}
.cov .finn{position:absolute;left:9%;bottom:-14px;height:90%;width:auto;max-width:none;--e:4px}
.cov .obj{position:absolute;right:9%;bottom:12%;height:44%;width:auto;max-width:none;--e:3px;rotate:8deg}
.tile:nth-child(even) .cov .obj{rotate:-6deg}
.cbody{display:grid;gap:8px}
.ct{font-size:20px;line-height:1.2;letter-spacing:-.015em;font-weight:800;margin:0}
.cd{font-size:15px;line-height:1.5;color:var(--color-ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm{font:600 12px/1.4 var(--font-family-mono);color:var(--color-ink-3)}
.tile:hover .ct{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
@media (prefers-reduced-motion:no-preference){.cov{transition:translate var(--duration-fast) var(--ease-enter)}.tile:hover .cov{translate:0 -4px}}

/* ---------- the post: the cover ---------- */
.cover{background:var(--t);color:var(--on);padding-top:22px}
.cov-in{display:grid;gap:16px;padding-bottom:30px}
.crumb{font-size:13px;font-weight:600;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px;margin:-6px}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.cover .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;color:inherit;font:600 12px/1.4 var(--font-family-mono)}
.cover .tchip{position:static}
.cover h1{font-size:clamp(34px,4.6vw,56px);line-height:1.04;letter-spacing:-.04em;font-weight:800;max-width:16em}
.dek{font-size:19px;line-height:1.5;max-width:34rem;text-wrap:pretty}
.cover-art{position:relative;z-index:2;width:min(64%,250px);margin:-4px 0 -34px auto}
.cover-finn{width:74%;--e:5px}
.cover-obj{position:absolute;right:0;bottom:16%;width:42%;--e:4px;rotate:9deg}
.col{position:relative;max-width:calc(36rem + 48px);margin-inline:auto;padding-inline:24px}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding-block:44px 6px;font-size:14px;font-weight:600;color:var(--color-ink-2)}
.byline img{width:34px;height:34px;--e:2px}
.byline+.story{margin-top:24px}
.copy{min-height:44px;padding:0 16px;border-radius:var(--radius-pill);border:1px solid var(--color-line);background:var(--color-surface);font:700 13px/1 var(--font-family-sans);color:var(--color-ink);cursor:pointer}

/* ---------- the show's modules: the same place and colour in every post ---------- */
.show{position:relative;border-radius:var(--radius-sheet);padding:24px 22px 26px;margin-block:48px 30px;display:grid;gap:12px}
.show .finn{position:absolute;right:-4px;top:-34px;width:80px;--e:3px;rotate:8deg}
.guess{background:var(--color-ground)}
.guess .q{font-size:21px;line-height:1.3;font-weight:800;letter-spacing:-.01em;padding-right:56px;text-wrap:balance}
.opts{display:flex;flex-wrap:wrap;gap:10px;border:0;padding:0;margin-top:4px;min-width:0}
.opts legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts label{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border-radius:var(--radius-pill);background:var(--color-surface);font-weight:800;font-size:15px;box-shadow:0 3px 0 var(--color-line);cursor:pointer}
.opts input:checked+label{background:var(--color-ink);color:var(--color-on-dark);box-shadow:0 3px 0 var(--color-action)}
.opts input:focus-visible+label{outline:3px solid var(--color-ink);outline-offset:2px}
.gnote{font-size:14px;font-weight:600;color:var(--color-ink-2)}
.reveal{background:var(--world-blue-bg);color:var(--world-blue-on)}
.reveal .big{font-size:48px;line-height:1;font-weight:800;letter-spacing:-.045em}
.reveal p{font-size:17px;line-height:1.55;max-width:30rem}
.yg{display:none;font-weight:700}
.post:has(#g1:checked) .yg1,.post:has(#g2:checked) .yg2,.post:has(#g3:checked) .yg3{display:block}
.move{background:var(--world-palm-bg);color:var(--world-palm-on)}
.move p{font-size:18px;line-height:1.5;font-weight:600;max-width:30rem;padding-right:40px}
.move .sig{font-weight:800;font-size:16px}

/* ---------- the article: the post's own words, with art every few paragraphs ---------- */
.story{font-size:17px;line-height:1.65}
.story>*+*{margin-top:18px}
.story h2{font-size:clamp(24px,2.7vw,30px);line-height:1.15;letter-spacing:-.025em;font-weight:800;margin-top:44px}
.story h3{font-size:19px;line-height:1.3;font-weight:800;margin-top:30px}
.story ul{padding-left:1.25em}
.story li+li{margin-top:8px}
.story a{color:var(--color-link);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.story ol.steps{padding:0;list-style:none;counter-reset:s;display:grid;gap:12px}
.story ol.steps li{counter-increment:s;position:relative;padding-left:46px;min-height:32px;margin:0}
.story ol.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--color-ink);color:var(--color-on-dark);font:800 14px/1 var(--font-family-sans)}
.story figure{margin-block:30px}
.story .bucket-bar{display:flex;height:12px;border-radius:99px;overflow:hidden;margin-bottom:14px}
.story .bucket-bar span{flex:1}
.seg-gone{background:var(--world-coral-bg)}.seg-fixed{background:var(--world-sand-bg)}.seg-drip{background:var(--world-palm-bg)}
.story .bucket-grid{display:grid;gap:10px}
.story .bucket{margin:0;max-width:none;border-radius:var(--radius-xl);padding:16px 18px;background:var(--color-surface-raised);display:grid;grid-template-columns:10px minmax(0,1fr);align-items:center;align-content:start;gap:6px 8px}
.story .bucket h4{margin:0;font-size:16px;font-weight:800}
.story .bucket .dot{display:block;width:10px;height:10px;border-radius:50%}
.story .bucket p{grid-column:1/-1}
.story .bucket.gone .dot{background:var(--world-coral-bg)}.story .bucket.fixed .dot{background:var(--world-sand-bg)}.story .bucket.drip .dot{background:var(--world-palm-bg)}
.story .bucket p{font-size:15px;line-height:1.5;color:var(--color-ink-2)}
.story figcaption{font-size:13px;color:var(--color-ink-3);margin-top:10px}
.story .cause{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:18px;border-radius:var(--radius-xl);background:var(--color-surface-raised);max-width:none}
.story .cause .num{width:32px;height:32px;border-radius:50%;background:var(--color-ink);color:var(--color-on-dark);display:grid;place-items:center;font-size:15px;font-weight:800}
.story .cause>div:last-child{display:grid;gap:6px}
.story .cause h3{font-size:17px;margin:0}
.story .cause p{font-size:16px}
.story .sec-art{width:84px;margin:40px 0 10px;--e:3px;rotate:-6deg}
.story .sec-art+h2{margin-top:0}
.short{background:var(--color-ground);border-radius:var(--radius-card);padding:16px 20px 18px;display:grid;gap:8px}
.short-k{display:flex;align-items:center;gap:10px;font:700 12px/1 var(--font-family-mono);letter-spacing:.12em;text-transform:uppercase}
.short-k img{width:28px;height:28px;--e:2px}
.short p:last-child{font-weight:600}
.strip{display:flex;justify-content:space-around;align-items:center;gap:8px;padding:18px 14px;border-radius:var(--radius-card);background:var(--world-shallows-bg)}
.strip .st{width:17%;max-height:58px;object-fit:contain;--e:2px}
.strip .st:nth-child(odd){rotate:-6deg}.strip .st:nth-child(even){rotate:7deg}
.pull{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;padding-block:10px}
.pull-finn{width:96px;--e:3px;rotate:-4deg}
.pull blockquote{font-size:25px;line-height:1.2;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.story mark{background:linear-gradient(transparent 55%,var(--color-marker) 55%);color:inherit;padding:0 2px}
.react{width:104px;--e:3px}
.react.r{margin:4px 6px 4px auto;rotate:6deg}.react.l{margin:4px auto 4px 6px;rotate:-5deg}
.note{background:var(--world-sand-bg);color:var(--world-sand-on);border-radius:var(--radius-card);padding:20px 22px 22px;display:grid;gap:10px}
.mn-k{display:flex;align-items:center;gap:10px;font:700 12px/1 var(--font-family-mono);letter-spacing:.12em;text-transform:uppercase}
.av{width:46px;height:46px;border-radius:50%;background:var(--color-ink);color:var(--color-on-dark);display:grid;place-items:center;font-weight:800;font-size:18px;flex:none}
.mn-k .av{width:32px;height:32px;font-size:14px}

/* ---------- the one ask, on navy with the wave line (the home's close) ---------- */
.ask{position:relative;margin-top:60px;background:var(--color-dark);color:var(--color-on-dark)}
.wave{position:absolute;left:0;right:0;top:-22px;width:100%;height:24px;display:block;color:var(--color-dark)}
.ask-in{padding-block:44px 48px;display:grid;gap:14px;justify-items:start}
.ask h2{font-size:clamp(26px,3.2vw,38px);line-height:1.1;font-weight:800;letter-spacing:-.03em;max-width:17em}
.ask p{font-size:17px;line-height:1.55;max-width:34rem;opacity:.9}
.badge{display:inline-block;border-radius:10px;margin-top:6px}
.badge img{width:162px;height:54px}

/* ---------- sign-off, questions, more posts ---------- */
.signoff{display:flex;gap:16px;align-items:center;padding:22px;border-radius:var(--radius-card);background:var(--color-surface-raised);margin-block:34px 30px}
.avs{display:flex;flex:none}
.avs img{width:46px;height:46px;margin-left:-12px;--e:2px}
.signoff b{font-weight:800;font-size:16px}
.signoff p{font-size:14px;line-height:1.5;color:var(--color-ink-2);margin-top:4px}
.qa{display:grid;gap:10px;margin-bottom:44px}
.qa h2{font-size:clamp(24px,2.7vw,30px);font-weight:800;letter-spacing:-.025em;margin-bottom:8px}
.qa .faq-item{background:var(--color-ground);border:0;border-radius:var(--radius-card);padding:0}
.qa .faq-item summary{list-style:none;display:flex;gap:14px;align-items:center;cursor:pointer;font-weight:800;font-size:16px;line-height:1.4;padding:16px 18px;margin:0;min-height:44px}
.qa .faq-item summary::-webkit-details-marker{display:none}
.qa .faq-item summary::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;border-right:2.5px solid var(--color-ink);border-bottom:2.5px solid var(--color-ink);rotate:45deg;translate:0 -3px}
.qa .faq-item[open] summary::after{rotate:225deg;translate:0 2px}
.qa .faq-item summary:focus-visible{outline:3px solid var(--color-ink);outline-offset:2px;border-radius:var(--radius-card)}
.qa .faq-item p{padding:0 18px 16px;font-size:15px;line-height:1.55;color:var(--color-ink-2)}
.qa .faq-item a{color:var(--color-link);text-underline-offset:3px}
.reads{border-top:1px solid var(--color-line);padding-block:8px 64px}
.reads h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-block:32px 20px}
.reads .grid{padding:0}
.back{display:inline-block;margin-top:28px;font-weight:700;color:var(--color-link);text-underline-offset:3px}
main.blog+footer.page{margin-top:0}

/* ---------- phone: after the first three, compact rows ---------- */
@media (max-width:759px){
  .tile.row{grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:center}
  .tile.row .cov{aspect-ratio:1;margin:0;border-radius:var(--radius-xl)}
  .tile.row .tchip,.tile.row .cd,.tile.row .obj{display:none}
  .tile.row .finn{inset:8% 12% auto;height:86%;width:76%;object-fit:contain;--e:2px}
  .tile.row .ct{font-size:16px}
  .grid{gap:22px}
}
/* ---------- the About page: Maxim's photo as a round sticker on the cover ---------- */
.cover-photo{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;border:6px solid var(--color-surface);box-shadow:0 10px 30px rgba(5,26,73,.18)}

/* ---------- comparison tables and sources (SEO site layer) ---------- */
.story .tbl{margin:0;max-width:none;display:grid;gap:8px}
.story .tbl-scroll{overflow-x:auto;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface)}
.story .tbl table{width:100%;min-width:34rem;border-collapse:collapse;font-size:15px;line-height:1.4}
.story .tbl th{text-align:left;font-weight:700;background:var(--color-surface-raised);padding:10px 12px;border-bottom:1px solid var(--color-line);white-space:nowrap}
.story .tbl td{padding:10px 12px;border-top:1px solid var(--color-line);vertical-align:top}
.story .tbl tbody tr:first-child td{border-top:0}
.story .tbl figcaption{font-size:14px;color:var(--color-ink-2)}
.story .sources{border-top:1px solid var(--color-line);padding-top:18px;display:grid;gap:8px;max-width:none}
.story .sources h2{font-size:18px;margin:0}
.story .sources ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:15px;color:var(--color-ink-2)}

/* ---------- tablet and desktop ---------- */
@media (min-width:760px){
  .wrap{padding-inline:56px}
  .bl-head{padding-block:72px 40px}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:52px 32px}
  .cover{padding-top:40px}
  .cover .wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:end;gap:40px}
  .cov-in{padding-bottom:64px}
  .cover-art{width:min(100%,360px);margin:0 0 -64px auto}
  .byline{padding-top:56px}
  .col{padding-inline:56px;max-width:calc(36rem + 112px)}
  .story .bucket-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pull blockquote{font-size:30px}
  .show{padding:30px 32px 32px}
  .show .finn{width:96px;right:-18px;top:-40px}
  .ask-in{padding-block:64px 72px}
}
/* wide screens: the section objects and Finn move into the margins beside the column */
@media (min-width:1100px){
  .story .sec-art{position:absolute;left:-150px;width:112px;margin:10px 0 0}
  .story .sec-art+h2{margin-top:52px}
  .react{position:absolute;width:128px;margin:0}
  .react.r{right:-176px}.react.l{left:-176px}
}
@media (prefers-reduced-motion:reduce){.cov{transition:none}}