/* ============================================================================
   NAUTIKA · About Andaman (the blog)
   ----------------------------------------------------------------------------
   The blog's own furniture: hero, category chips, the masonry card grid, the
   slim search, pagination, the article layout and its contents rail, and the
   body block types.

   .nk-prose — the long-form body styling this file used to open with — now
   lives in nautika.site.css. It moved the moment a second kind of page
   (contentPage) needed it: it was always written as a self-contained block for
   exactly that, and nautika.site.css is loaded on every page.

   Motion is opt-in and quiet: a staggered reveal on scroll (the framework's own
   [data-nk-reveal] observer), a lift on hover, and a reading-progress line. The
   framework's global prefers-reduced-motion rule already flattens transitions
   and neutralises [data-nk-reveal]; the few keyframe animations declared here
   are switched off explicitly at the foot of the file.
   ========================================================================== */

/* ==========================================================================
   1 · BLOG HERO
   ========================================================================== */

.bl-hero{position:relative;overflow:hidden;background:var(--nk-grad-deep);color:#fff;
  display:flex;align-items:flex-end;min-height:clamp(18rem,42vh,26rem);
  padding-block:clamp(5.5rem,11vw,7.5rem) clamp(3rem,7vw,5rem)}
/* The photograph is a parallax layer (nautika.parallax.js, same contract as the content pages'):
   oversized so no bare edge shows, drifting slower than the page. The old 30s Ken Burns pan is
   gone — two independent motions on one picture fight each other. */
.bl-hero-media{position:absolute;left:0;right:0;top:-9%;height:118%;z-index:0;will-change:transform}
.bl-hero-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:.45}
/* The page's ground rises into the hero as a swell line — same mask as the content pages'. */
.bl-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(2rem,4.5vw,3.5rem);
  z-index:3;pointer-events:none;background:var(--nk-bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C240,96 480,16 720,44 C960,72 1200,24 1440,56 L1440,96 L0,96 Z' fill='%23000'/%3E%3C/svg%3E") center top/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C240,96 480,16 720,44 C960,72 1200,24 1440,56 L1440,96 L0,96 Z' fill='%23000'/%3E%3C/svg%3E") center top/100% 100% no-repeat}
.bl-hero-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(168deg,rgba(4,18,31,.9) 0%,rgba(6,38,66,.78) 55%,rgba(10,90,145,.55) 120%)}
.bl-hero-inner{position:relative;z-index:2}
.bl-hero .nk-eyebrow{color:var(--nk-reef)}
.bl-hero .nk-eyebrow::before{background:var(--nk-reef)}
/* The core stylesheet colours bare h1 with --nk-ink, which would win over the band's inherited
   white and leave the headline dark-on-dark. */
.bl-hero h1{color:#fff;font-size:var(--nk-text-4xl);font-weight:800;letter-spacing:-.02em;max-width:18ch}
.bl-hero-intro{margin-top:.9rem;max-width:58ch;color:rgba(217,232,244,.85);font-size:var(--nk-text-lg);
  line-height:1.65}
@keyframes bl-drift{from{transform:scale(1.08) translate3d(-1%,-1%,0)}
  to{transform:scale(1.16) translate3d(1%,1%,0)}}

/* ---- Slim search: one line, no chrome until you touch it ------------------ */
.bl-search{margin-top:1.75rem;max-width:26rem;position:relative;display:flex;align-items:center}
.bl-search input{width:100%;padding:.7rem 2.6rem .7rem 2.6rem;border-radius:var(--nk-radius-pill);
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;
  font-size:var(--nk-text-sm);backdrop-filter:blur(8px);
  transition:background var(--nk-dur) var(--nk-ease),border-color var(--nk-dur) var(--nk-ease),
             box-shadow var(--nk-dur) var(--nk-ease)}
.bl-search input::placeholder{color:rgba(217,232,244,.6)}
/* 16px under a thumb, or iOS zooms the hero on focus. */
@media(max-width:820px){.bl-search input{font-size:max(16px,var(--nk-text-base))}}
.bl-search input:focus{outline:none;background:rgba(255,255,255,.16);border-color:var(--nk-reef);
  box-shadow:0 0 0 4px rgba(0,153,255,.18)}
.bl-search-icon{position:absolute;left:.95rem;color:rgba(217,232,244,.7);font-size:1.1rem;pointer-events:none}
.bl-search-clear{position:absolute;right:.6rem;display:inline-flex;align-items:center;justify-content:center;
  width:1.7rem;height:1.7rem;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;
  cursor:pointer;font-size:1rem;transition:background var(--nk-dur-fast) var(--nk-ease)}
.bl-search-clear:hover{background:rgba(255,255,255,.26)}

/* ==========================================================================
   2 · CATEGORY CHIPS
   ========================================================================== */

/* The chips are links, not buttons: filtering happens on the server, so a chosen
   category is a real URL that can be shared, bookmarked and crawled. */
.bl-chips{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.bl-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1.05rem;
  border-radius:var(--nk-radius-pill);border:1px solid var(--nk-line);background:var(--nk-surface);
  color:var(--nk-ink-soft);font-size:var(--nk-text-sm);font-weight:600;text-decoration:none;
  transition:transform var(--nk-dur) var(--nk-ease-out),border-color var(--nk-dur) var(--nk-ease),
             background var(--nk-dur) var(--nk-ease),color var(--nk-dur) var(--nk-ease),
             box-shadow var(--nk-dur) var(--nk-ease-out)}
.bl-chip:hover{transform:translateY(-2px);border-color:var(--nk-primary);color:var(--nk-primary-700);
  background:var(--nk-primary-50);box-shadow:var(--nk-shadow-xs)}
.bl-chip.nk-active{background:var(--nk-primary);border-color:var(--nk-primary);color:#fff;
  box-shadow:var(--nk-shadow-primary)}
.bl-chip.nk-active:hover{color:#fff}
.bl-chip-count{font-size:var(--nk-text-xs);font-weight:700;opacity:.6;font-variant-numeric:tabular-nums}
.bl-chip .nk-icon{font-size:1.05rem}

.bl-toolbar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  margin-bottom:1.75rem}
.bl-result-count{font-size:var(--nk-text-sm);color:var(--nk-muted);white-space:nowrap}

/* ==========================================================================
   3 · CARDS IN A MASONRY GRID
   ========================================================================== */

/* CSS columns, so cards of different heights pack without gaps and without script.
   The trade-off is reading order: columns flow top-to-bottom, so the DOM order is
   down column 1 then column 2. Acceptable for a browse grid where no card is
   "next" in a sequence; it would not be for paginated prose. */
.bl-grid{columns:3 320px;column-gap:1.5rem}
@media(max-width:640px){.bl-grid{columns:1}}
.bl-grid > *{break-inside:avoid;margin-bottom:1.5rem}

.bl-card{display:block;text-decoration:none;color:inherit;background:var(--nk-surface);
  border:1px solid var(--nk-line);border-radius:var(--nk-radius-lg);overflow:hidden;
  box-shadow:var(--nk-shadow-xs);
  transition:transform var(--nk-dur) var(--nk-ease-out),box-shadow var(--nk-dur) var(--nk-ease-out),
             border-color var(--nk-dur) var(--nk-ease)}
.bl-card:hover{transform:translateY(-6px);box-shadow:var(--nk-shadow-lg);border-color:var(--nk-primary-200)}
/* Every part of a card is a <span>, because the whole card is one <a> and a nested block-level
   link would be a second tab stop for the same destination. Spans default to inline, so each
   piece has to be made block-level explicitly or the title, badge and excerpt pile on top of
   one another. */
.bl-card-media,.bl-card-body,.bl-card-title,.bl-card-excerpt,
.bl-feature-title,.bl-feature-excerpt{display:block}
.bl-card-media{position:relative;overflow:hidden;background:var(--nk-surface-2)}
.bl-card-media img{display:block;width:100%;height:auto;
  transition:transform .7s var(--nk-ease-out)}
.bl-card:hover .bl-card-media img{transform:scale(1.06)}
.bl-card-badge{position:absolute;left:.85rem;top:.85rem;z-index:2}
.bl-card-body > .nk-badge{display:inline-flex;margin-bottom:.5rem}
.bl-card-body{padding:1.15rem 1.25rem 1.35rem}
.bl-card-title{font-family:var(--nk-font-display);font-weight:700;font-size:var(--nk-text-lg);
  line-height:1.3;color:var(--nk-ink);
  transition:color var(--nk-dur-fast) var(--nk-ease)}
.bl-card:hover .bl-card-title{color:var(--nk-primary-700)}
.bl-card-excerpt{margin-top:.5rem;font-size:var(--nk-text-sm);color:var(--nk-ink-soft);line-height:1.6}
.bl-card-meta{margin-top:.9rem;display:flex;align-items:center;gap:.55rem;
  font-size:var(--nk-text-xs);color:var(--nk-muted)}
.bl-card-meta .nk-avatar{width:1.6rem;height:1.6rem;font-size:.6rem}
.bl-card-dot{opacity:.5}

/* The featured card: same component, given the whole first column-span and an overlay. */
.bl-feature{position:relative;display:block;text-decoration:none;color:#fff;overflow:hidden;
  border-radius:var(--nk-radius-lg);min-height:22rem;
  transition:transform var(--nk-dur) var(--nk-ease-out),box-shadow var(--nk-dur) var(--nk-ease-out)}
.bl-feature:hover{transform:translateY(-4px);box-shadow:var(--nk-shadow-xl)}
.bl-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--nk-ease-out)}
.bl-feature:hover img{transform:scale(1.05)}
.bl-feature-veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,18,31,.94) 0%,rgba(4,18,31,.55) 45%,rgba(4,18,31,.08) 100%)}
.bl-feature .nk-badge{align-self:flex-start}
.bl-feature-body{position:relative;z-index:2;padding:1.75rem;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-end;min-height:22rem}
.bl-feature-title{font-family:var(--nk-font-display);font-weight:800;font-size:var(--nk-text-2xl);
  line-height:1.2;margin-top:.6rem}
.bl-feature-excerpt{margin-top:.6rem;color:rgba(217,232,244,.85);font-size:var(--nk-text-sm);
  max-width:52ch;line-height:1.6}

.bl-featured-row{display:grid;grid-template-columns:1.55fr 1fr;gap:1.5rem;margin-bottom:3rem}
@media(max-width:900px){.bl-featured-row{grid-template-columns:1fr}}
.bl-featured-side{display:flex;flex-direction:column;gap:1.5rem}

/* Reveal stagger — each card trails the one before it, capped so a long page does
   not end up with a two-second delay at the bottom. */
[data-nk-reveal].bl-stagger-1{transition-delay:.05s}
[data-nk-reveal].bl-stagger-2{transition-delay:.1s}
[data-nk-reveal].bl-stagger-3{transition-delay:.15s}
[data-nk-reveal].bl-stagger-4{transition-delay:.2s}
[data-nk-reveal].bl-stagger-5{transition-delay:.25s}

/* ==========================================================================
   4 · ARTICLE
   ========================================================================== */

.bl-article-head{padding-block:2.5rem 1.5rem}
@media(max-width:640px){.bl-article-head{padding-block:1.5rem 1rem}}
/* Its own clamp, not --nk-text-4xl: article titles run long ("… Complete Travel Guide"), and the
   display scale's 2.4rem floor set a five-line headline on a phone before a word of the article
   was on screen. The ceiling comes down with it — a reading page's title is a heading, not a hero. */
.bl-article-title{font-size:clamp(1.8rem,1.3rem+2.4vw,3.1rem);font-weight:800;letter-spacing:-.025em;line-height:1.14;
  max-width:22ch}
.bl-standfirst{margin-top:1rem;font-size:var(--nk-text-lg);color:var(--nk-ink-soft);line-height:1.65;
  max-width:62ch;font-weight:400}
.bl-byline{margin-top:1.5rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  font-size:var(--nk-text-sm);color:var(--nk-muted)}
.bl-byline-name{color:var(--nk-ink);font-weight:600}

.bl-article-hero{margin-block:1.5rem 2.5rem;border-radius:var(--nk-radius-lg);overflow:hidden;
  box-shadow:var(--nk-shadow-sm)}
.bl-article-hero img{display:block;width:100%;height:auto}

/* Body beside a contents rail. The rail is second in the DOM so a screen reader and a
   phone both reach the article first; the grid puts it back on the left at width. */
/* Contents rail + body. The body column is sized to a reading measure rather than "whatever is
   left", so the article does not stretch to an unreadable line length on a wide screen.

   .bl-no-toc is not cosmetic: without it, a post with no headings to build a rail from would put
   its body into the *first* column and render the whole article 15rem wide. */
.bl-article-grid{display:grid;grid-template-columns:15rem minmax(0,74ch);gap:3rem;align-items:start}
.bl-article-grid.bl-no-toc{grid-template-columns:minmax(0,78ch);justify-content:center}
@media(max-width:1023px){
  .bl-article-grid,.bl-article-grid.bl-no-toc{grid-template-columns:minmax(0,1fr);gap:0}
}
/* The grid column already sets the measure; a second cap inside it only wastes the column. */
.bl-article-grid .nk-prose{max-width:none}
.bl-toc{position:sticky;top:calc(var(--site-navbar-h) + 1.5rem);order:-1;max-height:calc(100vh - var(--site-navbar-h) - 3rem);
  overflow-y:auto}
@media(max-width:1023px){.bl-toc{display:none}}

/* The phone's contents list: the same generated headings, folded into a native <details> above the
   article (rendered by blogPost.cshtml only when the rail would render). The rail disappears below
   1024px, and the posts that most need navigating — the 3,000-word guides — are read on phones. */
.bl-toc-mobile{margin-block:0 1.75rem;border:1px solid var(--nk-line);border-radius:var(--nk-radius);
  background:var(--nk-surface-2)}
@media(min-width:1024px){.bl-toc-mobile{display:none}}
.bl-toc-mobile summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  padding:.85rem 1.1rem;font-family:var(--nk-font-display);font-weight:700;font-size:var(--nk-text-sm);
  color:var(--nk-ink)}
.bl-toc-mobile summary::-webkit-details-marker{display:none}
.bl-toc-mobile summary .nk-icon{color:var(--nk-primary);font-size:1.2rem}
.bl-toc-mobile summary::after{content:"expand_more";font-family:"Material Symbols Outlined";
  margin-left:auto;color:var(--nk-muted);transition:transform var(--nk-dur) var(--nk-ease)}
.bl-toc-mobile[open] summary::after{transform:rotate(180deg)}
.bl-toc-mobile-list{padding:0 1.1rem .85rem}
.bl-toc-mobile-list a{display:block;padding:.45rem 0 .45rem .75rem;border-left:2px solid var(--nk-line);
  font-size:var(--nk-text-sm);color:var(--nk-ink-soft);text-decoration:none;line-height:1.45}
.bl-toc-mobile-list a:hover{color:var(--nk-primary-700);border-color:var(--nk-primary)}
.bl-toc-mobile-list a.is-sub{padding-left:1.5rem;font-size:var(--nk-text-xs)}
.bl-toc-mobile-list a.is-sub-2{padding-left:2.1rem;font-size:var(--nk-text-xs)}
.bl-toc-label{font-family:var(--nk-font-display);font-size:var(--nk-text-xs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--nk-muted);margin-bottom:.75rem}
.bl-toc a{display:block;padding:.35rem 0 .35rem .75rem;border-left:2px solid var(--nk-line);
  font-size:var(--nk-text-sm);color:var(--nk-muted);text-decoration:none;line-height:1.45;
  transition:color var(--nk-dur-fast) var(--nk-ease),border-color var(--nk-dur-fast) var(--nk-ease),
             padding-left var(--nk-dur-fast) var(--nk-ease-out)}
.bl-toc a:hover{color:var(--nk-ink);border-color:var(--nk-line-strong)}
.bl-toc a.nk-active{color:var(--nk-primary-700);border-color:var(--nk-primary);font-weight:600;
  padding-left:1rem}
.bl-toc a.is-sub{padding-left:1.5rem;font-size:var(--nk-text-xs)}
.bl-toc a.is-sub-2{padding-left:2.1rem;font-size:var(--nk-text-xs)}
.bl-toc a.is-sub-2.nk-active{padding-left:2.35rem}
.bl-toc a.is-sub.nk-active{padding-left:1.75rem}

/* Reading progress: a hairline under the navbar. Width is set by script. */
.bl-progress{position:fixed;top:var(--site-navbar-h);left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--nk-primary),var(--nk-reef));
  z-index:calc(var(--nk-z-nav) + 1);transition:width .1s linear;pointer-events:none}

/* ---- Body blocks --------------------------------------------------------- */
.bl-block + .bl-block{margin-top:2rem}

.bl-figure{margin-block:2rem}
.bl-figure img{display:block;width:100%;height:auto;border-radius:var(--nk-radius)}
.bl-figure figcaption{margin-top:.65rem;font-size:var(--nk-text-sm);color:var(--nk-muted);text-align:center}
/* Break out of the prose measure, up to the container's width. */
.bl-figure.is-wide{width:min(100%,52rem)}

.bl-callout{margin-block:2rem;padding:1.4rem 1.6rem;border-radius:var(--nk-radius);
  background:var(--nk-primary-50);border:1px solid color-mix(in srgb,var(--nk-primary) 22%,transparent);
  border-left-width:4px}
.bl-callout-head{display:flex;align-items:center;gap:.55rem;font-family:var(--nk-font-display);
  font-weight:700;color:var(--nk-primary-700);margin-bottom:.6rem}
.bl-callout .nk-prose{max-width:none}
.bl-callout .nk-prose > :first-child{margin-top:0}

.bl-quote{margin-block:2.5rem;padding-left:1.5rem;border-left:4px solid var(--nk-primary);
  font-family:var(--nk-font-display);font-size:var(--nk-text-xl);line-height:1.45;color:var(--nk-ink);
  font-weight:600}
.bl-quote cite{display:block;margin-top:.7rem;font-family:var(--nk-font-body);font-size:var(--nk-text-sm);
  font-weight:400;font-style:normal;color:var(--nk-muted)}

.bl-faq{margin-block:2.5rem}
.bl-faq-q{border-top:1px solid var(--nk-line)}
.bl-faq-q:last-child{border-bottom:1px solid var(--nk-line)}
.bl-faq-q summary{cursor:pointer;list-style:none;padding:1rem 2rem 1rem 0;position:relative;
  font-family:var(--nk-font-display);font-weight:700;color:var(--nk-ink);
  transition:color var(--nk-dur-fast) var(--nk-ease)}
.bl-faq-q summary::-webkit-details-marker{display:none}
.bl-faq-q summary:hover{color:var(--nk-primary-700)}
.bl-faq-q summary::after{content:"add";font-family:"Material Symbols Outlined";position:absolute;
  right:.25rem;top:50%;transform:translateY(-50%);color:var(--nk-primary);font-weight:400;
  transition:transform var(--nk-dur) var(--nk-ease-out)}
.bl-faq-q[open] summary::after{content:"remove";transform:translateY(-50%) rotate(180deg)}
.bl-faq-a{padding-bottom:1.1rem;animation:bl-fade-in var(--nk-dur) var(--nk-ease-out)}
.bl-faq-a .nk-prose{max-width:none}
.bl-faq-a .nk-prose > :first-child{margin-top:0}
@keyframes bl-fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.bl-cta{margin-block:2.5rem;padding:1.75rem;border-radius:var(--nk-radius-lg);
  background:var(--nk-grad-deep);color:#fff;position:relative;overflow:hidden}
.bl-cta h3{font-family:var(--nk-font-display);font-weight:800;font-size:var(--nk-text-xl);color:#fff}
.bl-cta p{margin-top:.5rem;color:rgba(217,232,244,.85);font-size:var(--nk-text-sm);max-width:48ch}
.bl-cta .nk-btn{margin-top:1.1rem}

.bl-gallery{margin-block:2rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}
.bl-gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--nk-radius-sm);
  cursor:zoom-in;transition:transform var(--nk-dur) var(--nk-ease-out)}
.bl-gallery img:hover{transform:scale(1.03)}

.bl-embed{margin-block:2rem}
.bl-embed-frame{position:relative;aspect-ratio:16/9;border-radius:var(--nk-radius);overflow:hidden;
  background:var(--nk-abyss)}
.bl-embed-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- Author card + related ---------------------------------------------- */
.bl-author{margin-top:3rem;padding:1.5rem;border:1px solid var(--nk-line);border-radius:var(--nk-radius-lg);
  background:var(--nk-surface-2);display:flex;gap:1.25rem;align-items:flex-start}
@media(max-width:560px){.bl-author{flex-direction:column}}
.bl-author-name{font-family:var(--nk-font-display);font-weight:700;color:var(--nk-ink)}
.bl-author-role{font-size:var(--nk-text-sm);color:var(--nk-muted)}
.bl-author .nk-prose{max-width:none;font-size:var(--nk-text-sm);margin-top:.6rem}

.bl-related{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--nk-line)}

/* ---- Empty state --------------------------------------------------------- */
.bl-empty{text-align:center;padding-block:4rem;color:var(--nk-muted)}
.bl-empty-icon{font-size:3rem;color:var(--nk-line-strong)}

/* ==========================================================================
   5 · MOTION OPT-OUT
   The framework's reduced-motion block covers transitions and [data-nk-reveal];
   the keyframe animations declared above need saying explicitly.
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  .bl-hero-bg{animation:none;transform:none}
  .bl-faq-a{animation:none}
  .bl-card:hover,.bl-feature:hover,.bl-chip:hover{transform:none}
  .bl-card:hover .bl-card-media img,.bl-feature:hover img,.bl-gallery img:hover{transform:none}
}

/* ==========================================================================
   6 · CATEGORY RAILS
   --------------------------------------------------------------------------
   One horizontally snapping shelf per category on the front page, between the
   featured stories and the full grid. The shelf is native scroll — no script,
   no buttons — and the part-visible next card is the affordance. Keyboard
   users get the same row (the track is focusable and arrow-scrollable);
   everything on it is also reachable in the grid below, so nothing is locked
   behind a gesture.
   ========================================================================== */

.bl-rail{margin-block:2.75rem}
.bl-rail-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem}
.bl-rail-title{display:flex;align-items:center;gap:.55rem;font-family:var(--nk-font-display);
  font-weight:800;font-size:var(--nk-text-2xl);letter-spacing:-.02em;color:var(--nk-ink)}
.bl-rail-title .nk-icon{color:var(--nk-primary);font-size:1.5rem}
.bl-rail-all{margin-left:auto;display:inline-flex;align-items:center;gap:.3rem;flex-shrink:0;
  padding:.45rem .9rem;border-radius:var(--nk-radius-pill);border:1px solid var(--nk-line);
  font-size:var(--nk-text-sm);font-weight:700;color:var(--nk-primary-700);text-decoration:none;
  transition:border-color var(--nk-dur-fast) var(--nk-ease),background var(--nk-dur-fast) var(--nk-ease)}
.bl-rail-all:hover{border-color:var(--nk-primary);background:var(--nk-primary-50)}
.bl-rail-all .nk-icon{font-size:1rem;transition:transform var(--nk-dur) var(--nk-ease)}
.bl-rail-all:hover .nk-icon{transform:translateX(3px)}

.bl-rail-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,17rem);gap:1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--nk-gutter) * -1);padding-inline:var(--nk-gutter);
  padding-block:.25rem 1rem;scroll-padding-inline:var(--nk-gutter);scrollbar-width:none}
.bl-rail-track::-webkit-scrollbar{display:none}
.bl-rail-track:focus-visible{outline:3px solid var(--nk-primary-300);outline-offset:2px;
  border-radius:var(--nk-radius-sm)}

.bl-rail-card{scroll-snap-align:start;display:flex;flex-direction:column;text-decoration:none;
  color:inherit;background:var(--nk-surface);border-radius:var(--nk-radius-lg);overflow:hidden;
  box-shadow:var(--nk-shadow-xs);
  transition:transform var(--nk-dur) var(--nk-ease-out),box-shadow var(--nk-dur) var(--nk-ease-out)}
.bl-rail-card:hover{transform:translateY(-4px);box-shadow:var(--nk-shadow-lg)}
.bl-rail-card-media{display:block;aspect-ratio:16/10;background:var(--nk-surface-2);overflow:hidden}
.bl-rail-card-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--nk-ease-out)}
.bl-rail-card:hover .bl-rail-card-media img{transform:scale(1.05)}
.bl-rail-card-body{display:flex;flex-direction:column;gap:.5rem;padding:.9rem 1rem 1.1rem}
.bl-rail-card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--nk-font-display);font-weight:700;font-size:var(--nk-text-base);line-height:1.35;
  color:var(--nk-ink)}
.bl-rail-card:hover .bl-rail-card-title{color:var(--nk-primary-700)}

/* The archive heading between the rails and the grid. */
.bl-all-title{margin:3rem 0 1.25rem}

/* ==========================================================================
   7 · FEATURED SIDE CARDS, RESHAPED
   --------------------------------------------------------------------------
   The two stories beside the lead used to be the same portrait card as the
   grid below, which made the featured row read as three grid items that had
   wandered off. Sideways — picture left, words right — they read as
   companions to the lead instead. Markup untouched: this reshapes the
   standard card only inside .bl-featured-side.
   ========================================================================== */

.bl-featured-side .bl-card{display:grid;grid-template-columns:minmax(8rem,42%) 1fr;align-items:stretch;flex:1}
.bl-featured-side .bl-card-media{height:100%;min-height:9rem}
.bl-featured-side .bl-card-media img{width:100%;height:100%;object-fit:cover}
.bl-featured-side .bl-card-badge{display:none}
.bl-featured-side .bl-card-body{padding:1rem 1.1rem;display:flex;flex-direction:column;justify-content:center}
.bl-featured-side .bl-card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-featured-side .bl-card-excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-featured-side .bl-card-meta .nk-avatar{display:none}
@media(max-width:560px){
  .bl-featured-side .bl-card{grid-template-columns:1fr}
  .bl-featured-side .bl-card-media{min-height:0;aspect-ratio:16/9}
}

@media(prefers-reduced-motion:reduce){
  .bl-rail-card:hover{transform:none}
  .bl-rail-card:hover .bl-rail-card-media img{transform:none}
}

/* ---- Carousel controls on the rails --------------------------------------
   Revealed by nautika.blog.js only when a rail overflows; hidden on the
   widths where the rail is swiped by touch and the head has no room. */
.bl-rail-nav{display:flex;gap:.4rem;flex-shrink:0}
@media(max-width:767px){.bl-rail-nav{display:none}}
.bl-rail-btn{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;
  border-radius:50%;border:1px solid var(--nk-line);background:var(--nk-surface);color:var(--nk-ink-soft);
  cursor:pointer;transition:color var(--nk-dur-fast) var(--nk-ease),border-color var(--nk-dur-fast) var(--nk-ease),
    background var(--nk-dur-fast) var(--nk-ease)}
.bl-rail-btn:hover:not(:disabled){color:var(--nk-primary-700);border-color:var(--nk-primary);background:var(--nk-primary-50)}
.bl-rail-btn:disabled{opacity:.35;cursor:default}
/* Grab-to-drag: the cursor advertises it on devices that have one, and snap is
   suspended mid-drag so the rail follows the hand rather than fighting it. */
@media(pointer:fine){.bl-rail-track{cursor:grab}}
.bl-rail-track.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none;scroll-behavior:auto}