/* ==========================================================================
   Shutki — content stylesheet
   1. Post cards          4. Single post        7. Sidebar
   2. Pin grid            5. Article body       8. Archive & pagination
   3. Home sections       6. Blocks & misc
   ========================================================================== */

/* 1. POST CARDS =========================================================== */

/*
 * The tile every listing uses. Numbers are taken straight off the reference
 * build: 12px corners, a 3:4 crop, a 16px/1.4 headline in an 10px/8px box,
 * 7px of breathing room under it, and a 5px lift on hover.
 */
.sk-card, .sk-pin {
  position: relative;
  display: grid; align-content: start;
  padding-bottom: 7px;
  background: var(--sk-surface);
  border-radius: var(--sk-card-radius);
  box-shadow: var(--sk-sh-card);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.sk-card:hover, .sk-pin:hover {
  transform: translateY(var(--sk-card-lift));
  box-shadow: var(--sk-sh-card-hover);
}

.sk-card__media, .sk-pin__media { display: block; background: var(--sk-sand); }
.sk-card__media img, .sk-pin__media img {
  width: 100%; display: block;
  aspect-ratio: 3 / 4; object-fit: cover;
}
/* Ratio overrides kept for the templates that still ask for them. */
.sk-card--wide .sk-card__media img { aspect-ratio: 3 / 2; }
.sk-card--square .sk-card__media img { aspect-ratio: 1; }

.sk-card__body, .sk-pin__body { margin: 0 10px; padding: 10px 8px; }
.sk-card__title, .sk-pin__title {
  margin: 0;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-card); font-weight: 600; line-height: 1.4;
  letter-spacing: var(--sk-ls);
  text-align: center; text-wrap: balance;
}
.sk-card__title a, .sk-pin__title a {
  color: var(--sk-ink); text-decoration: none;
  transition: color .2s ease-in-out;
}
.sk-card__title a:hover, .sk-pin__title a:hover { color: var(--sk-primary-ink); }
/* The whole tile is the hit area. */
.sk-card__title a::after, .sk-pin__title a::after { content: ""; position: absolute; inset: 0; }

/* Category badge, still used by the hero and the single-post header. */
.sk-badge {
  position: absolute; top: var(--sk-3); left: var(--sk-3); z-index: 2;
  display: inline-block; padding: 5px 11px;
  background: var(--sk-surface); color: var(--sk-ink);
  border-radius: var(--sk-r-pill);
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; box-shadow: var(--sk-sh-sm);
  transition: background-color var(--sk-dur) var(--sk-ease), color var(--sk-dur) var(--sk-ease);
}
.sk-badge:hover { background: var(--sk-primary); color: #fff; }

.sk-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sk-2);
  font-size: var(--sk-fs-xs); color: var(--sk-muted);
  letter-spacing: .03em;
}
.sk-meta__sep { opacity: .5; }
.sk-meta svg { width: 13px; height: 13px; vertical-align: -2px; }
.sk-meta a { color: inherit; text-decoration: none; font-weight: 600; }
.sk-meta a:hover { color: var(--sk-primary-ink); }

/* Compact horizontal card for sidebars and related lists. */
.sk-mini { display: grid; grid-template-columns: 92px 1fr; gap: var(--sk-4); align-items: center; }
.sk-mini__media { overflow: hidden; border-radius: var(--sk-card-radius); background: var(--sk-sand); }
.sk-mini__media img { aspect-ratio: 1; width: 100%; object-fit: cover; }
.sk-mini__title { margin: 0 0 4px; font-family: var(--sk-font-body); font-size: var(--sk-fs-card); font-weight: 600; line-height: 1.4; letter-spacing: var(--sk-ls); }
.sk-mini__title a { color: var(--sk-ink); text-decoration: none; transition: color .2s ease-in-out; }
.sk-mini__title a:hover { color: var(--sk-primary-ink); }
.sk-mini + .sk-mini { margin-top: var(--sk-5); padding-top: var(--sk-5); border-top: 1px solid var(--sk-line-soft); }
/* Ranked list variant used by "Most loved". */
.sk-mini__rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 6px;
  background: var(--sk-primary-tint); color: var(--sk-primary-deep);
  border-radius: 50%; font-size: 11px; font-weight: 800;
}

/* 2. PIN GRID ============================================================= */

/* Same tile, same gutter — the pin wall is just another card grid. */
.sk-pins {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sk-card-gap);
}
.sk-pins > * { flex: 0 1 var(--sk-card-min); }

/* 3. SAVE-TO-PINTEREST BUTTON ============================================= */

.sk-save,
.sk-content a.sk-save,
.sk-content a.sk-save:visited,
.sk-save:link,
.sk-save:visited {
  position: absolute; top: var(--sk-3); right: var(--sk-3); z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: #e60023; color: #ffffff !important;
  border: 0; border-radius: var(--sk-r-pill);
  font-family: var(--sk-font-body); font-size: var(--sk-fs-sm); font-weight: 800;
  text-decoration: none !important; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  opacity: 0; transform: scale(.9) translateY(-4px);
  transition: opacity var(--sk-dur) var(--sk-ease), transform var(--sk-dur) var(--sk-ease), background-color var(--sk-dur) var(--sk-ease);
}
.sk-save span { color: #ffffff !important; text-decoration: none !important; }
.sk-save svg { width: 15px; height: 15px; fill: currentColor; color: #ffffff !important; flex-shrink: 0; }
.sk-save:hover,
.sk-content a.sk-save:hover { background: #ad081b; color: #ffffff !important; text-decoration: none !important; }
.sk-card:hover .sk-save,
.sk-pin:hover .sk-save,
.sk-figure:hover .sk-save,
.sk-save:focus-visible { opacity: 1; transform: scale(1) translateY(0); }

@media (hover: none) {
  .sk-save { opacity: 1; transform: none; }
}

/* Wrapper the JS injects around every in-content image. */
.sk-figure { position: relative; display: block; }

/* 4. HOME SECTIONS ======================================================== */

/* Hero: one large lead story beside a stacked pair. */
.sk-hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sk-6); }
.sk-hero__side { display: grid; gap: var(--sk-6); align-content: start; }

.sk-feature { position: relative; border-radius: var(--sk-r-xl); overflow: hidden; min-height: 460px; display: flex; background: var(--sk-sand); }
.sk-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sk-ease); }
.sk-feature:hover img { transform: scale(1.04); }
.sk-feature__inner {
  position: relative; z-index: 2;
  margin-top: auto; width: 100%;
  padding: var(--sk-9) var(--sk-7) var(--sk-7);
  background: linear-gradient(to top, rgba(10, 12, 12, .9), rgba(10, 12, 12, .5) 60%, transparent);
  color: #fff;
}
.sk-feature__title { margin: var(--sk-2) 0 var(--sk-3); color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
.sk-feature__title a { color: #fff; text-decoration: none; }
.sk-feature__title a::after { content: ""; position: absolute; inset: 0; }
.sk-feature__title a:hover { color: var(--sk-accent); }
.sk-feature .sk-meta { color: rgba(255, 255, 255, .75); }
.sk-feature .sk-meta a { color: rgba(255, 255, 255, .9); }
.sk-feature .sk-badge { position: static; }
.sk-feature--sm { min-height: 218px; }
.sk-feature--sm .sk-feature__title { font-size: var(--sk-fs-lg); }
.sk-feature--sm .sk-feature__inner { padding: var(--sk-7) var(--sk-5) var(--sk-5); }

/* Editor's-pick strip: a wide two-column band. */
.sk-spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.sk-spotlight__media { overflow: hidden; box-shadow: var(--sk-sh-card); }
.sk-spotlight h2 {
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-h2);
  font-weight: 600; line-height: 1.3; letter-spacing: var(--sk-ls);
}
.sk-spotlight h2 a { color: var(--sk-ink); text-decoration: none; }
.sk-spotlight h2 a:hover { color: var(--sk-primary-ink); }
.sk-spotlight__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/*
 * Trending strip: the best-read post from each category, four across, the
 * rest a click away. Numbers come off the reference build — a 45deg tinted
 * band behind the heading, a flat white panel for the standfirst, and the
 * ordinary 12px card at a 16px gutter in the track.
 */
/*
 * Banded heading + standfirst panel. The top-level band carries the 45deg
 * wash, a category band inside it is flat — that difference is what keeps the
 * two levels apart when they stack down the page.
 */
.sk-trend__head, .sk-cat__title {
  margin: 0 0 4px;
  padding: 12px 16px;
  font-family: var(--sk-font-body);
  font-weight: 600; line-height: 1.4;
  letter-spacing: var(--sk-ls); color: var(--sk-ink);
  text-align: center; text-wrap: balance;
}
.sk-trend__head {
  background: linear-gradient(45deg, var(--sk-primary-tint-2), transparent);
  font-size: var(--sk-fs-h2);
}
.sk-cat__title {
  background: var(--sk-primary-tint-2);
  font-size: var(--sk-fs-h3);
}

.sk-trend__intro, .sk-cat__intro {
  margin: 0 0 var(--sk-4);
  padding: 14px var(--sk-5) var(--sk-5);
  background: var(--sk-surface);
  color: var(--sk-body);
  font-size: var(--sk-fs-md); line-height: var(--sk-lh-body);
  text-align: center; text-wrap: pretty;
}

.sk-trend { position: relative; }

/*
 * The padding is the room the cards need to lift and cast a shadow inside a
 * clipping scroller; the matching negative margin gives it straight back so
 * the first card still lines up with the heading above it.
 */
.sk-trend__track {
  display: flex; gap: var(--sk-card-gap);
  padding: 8px 4px 16px; margin: -8px -4px -16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.sk-trend__track::-webkit-scrollbar { display: none; }
.sk-trend__track:focus-visible { outline: 2px solid var(--sk-primary); outline-offset: 2px; }

/* Four across, whatever the container is doing. */
.sk-trend__track > .sk-card {
  flex: 0 0 calc((100% - 3 * var(--sk-card-gap)) / 4);
  scroll-snap-align: start;
}

.sk-trend__nav {
  position: absolute; top: 50%; z-index: 3;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: var(--sk-surface); color: var(--sk-primary-deep);
  border: 1px solid var(--sk-primary-line); border-radius: 50%;
  box-shadow: var(--sk-sh-card); cursor: pointer;
  transform: translateY(-50%);
  transition: opacity var(--sk-dur) var(--sk-ease), background-color var(--sk-dur) var(--sk-ease), color var(--sk-dur) var(--sk-ease);
}
.sk-trend__nav:hover { background: var(--sk-primary); color: #fff; border-color: var(--sk-primary); }
.sk-trend__nav--prev { left: 8px; }
.sk-trend__nav--next { right: 8px; }
/* Chevron points down; rotate it into place. */
.sk-trend__nav--prev svg { transform: rotate(90deg); }
.sk-trend__nav--next svg { transform: rotate(-90deg); }
/* Nothing left that way — fade out rather than reflow the row. */
.sk-trend__nav.is-off { opacity: 0; pointer-events: none; }

.sk-trend__link, .sk-cat__link { margin: var(--sk-5) 0 0; text-align: right; color: var(--sk-body); }
.sk-trend__link a, .sk-cat__link a { color: var(--sk-primary-ink); text-decoration: underline; font-weight: 600; }
.sk-trend__link a:hover, .sk-cat__link a:hover { color: var(--sk-primary-deep); }

/*
 * Explore-by-category: the same tile at six across, so a whole category reads
 * as one row rather than competing with the hero above it.
 */
.sk-cat + .sk-cat { margin-top: var(--sk-8); }
/*
 * Flex rather than grid: a category with four posts in a six-across row would
 * sit hard left under a full one, and grid tracks cannot be centred while they
 * still stretch. Fixed basis + justify-content keeps a short row under the
 * middle of its heading.
 */
.sk-cat__grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sk-card-gap);
}
.sk-cat__grid > .sk-card { flex: 0 0 calc((100% - 5 * var(--sk-card-gap)) / 6); }

/* 5. SINGLE POST ========================================================== */

.sk-breadcrumbs { font-size: var(--sk-fs-sm); color: var(--sk-muted); margin-bottom: var(--sk-5); }
.sk-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--sk-2); list-style: none; margin: 0; padding: 0; }
.sk-breadcrumbs li { margin: 0; display: flex; align-items: center; gap: var(--sk-2); }
.sk-breadcrumbs li:not(:last-child)::after { content: "/"; opacity: .45; }
.sk-breadcrumbs a { color: var(--sk-muted); text-decoration: none; }
.sk-breadcrumbs a:hover { color: var(--sk-primary-ink); }

.sk-posthead { max-width: 820px; margin: 0 auto var(--sk-6); text-align: center; }
.sk-posthead .sk-badge {
  position: static; box-shadow: none;
  background: var(--sk-primary-tint); color: var(--sk-primary-deep);
}
.sk-posthead__title {
  margin: var(--sk-4) 0 7px;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-title);
  font-weight: 700; line-height: 1.2; letter-spacing: var(--sk-ls);
  color: var(--sk-ink);
}


.sk-hero-img { margin: 0 0 var(--sk-8); border-radius: var(--sk-r-xl); overflow: hidden; box-shadow: var(--sk-sh); position: relative; }
.sk-hero-img img { width: 100%; max-height: 620px; object-fit: cover; }
.sk-hero-img figcaption { padding: var(--sk-3) var(--sk-4); font-size: var(--sk-fs-sm); color: var(--sk-muted); text-align: center; background: var(--sk-surface-2); }

/* Reading progress bar pinned to the very top of the viewport. */
.sk-progress { position: fixed; top: 0; left: 0; z-index: 400; height: 3px; width: 0; background: var(--sk-primary); transition: width .08s linear; }

/* Share rail floats beside the article on wide screens. */
.sk-share { display: flex; align-items: center; gap: var(--sk-2); flex-wrap: wrap; }
.sk-share__label { font-size: var(--sk-fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sk-muted); }
.sk-share a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--sk-sand); color: var(--sk-ink);
  transition: background-color var(--sk-dur) var(--sk-ease), color var(--sk-dur) var(--sk-ease), transform var(--sk-dur) var(--sk-ease);
}
.sk-share a:hover { transform: translateY(-3px); color: #fff; }
.sk-share a[data-net="pinterest"]:hover { background: #e60023; }
.sk-share a[data-net="facebook"]:hover  { background: #1877f2; }
.sk-share a[data-net="x"]:hover         { background: #000; }
.sk-share a[data-net="whatsapp"]:hover  { background: #25d366; }
.sk-share a[data-net="linkedin"]:hover  { background: #0a66c2; }
.sk-share a[data-net="email"]:hover     { background: var(--sk-primary); }
.sk-share button:hover                  { background: var(--sk-invert-bg); color: var(--sk-invert-fg); }
.sk-share svg { width: 17px; height: 17px; }

/* Sticky bottom share bar on phones. */
.sk-share--bar {
  position: fixed; inset: auto 0 0 0; z-index: 350;
  display: none; justify-content: center; gap: var(--sk-3);
  padding: var(--sk-3);
  background: var(--sk-surface);
  border-top: 1px solid var(--sk-line);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .08);
  transform: translateY(100%);
  transition: transform .3s var(--sk-ease);
}
.sk-share--bar.is-visible { transform: translateY(0); }

/* Table of contents */
.sk-toc {
  margin: 0 0 var(--sk-8);
  padding: var(--sk-5) var(--sk-6);
  background: var(--sk-surface-2);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-lg);
}
.sk-toc__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sk-3);
  width: 100%; padding: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--sk-font-body); font-size: var(--sk-fs-sm); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sk-ink);
}
.sk-toc__head svg { width: 16px; height: 16px; transition: transform var(--sk-dur) var(--sk-ease); }
.sk-toc.is-collapsed .sk-toc__head svg { transform: rotate(-90deg); }

/* Open/close slide. The panel is a one-row grid whose track eases between 0fr
   and 1fr, so it opens to exactly the height its own contents need — no
   measured max-height to keep in sync as entries are built. Browsers that
   cannot interpolate the track simply snap, which is what this did before. */
.sk-toc__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .32s var(--sk-ease);
}
.sk-toc.is-collapsed .sk-toc__panel { grid-template-rows: 0fr; }
.sk-toc__list {
  list-style: none; margin: 0; padding: 0;
  counter-reset: toc;
  min-height: 0; overflow: hidden;
  visibility: visible;
  transition: opacity var(--sk-dur) var(--sk-ease) 80ms, visibility 0s;
}
/* The gap under the heading rides on the first entry, not on the list's own
   padding: a padded box cannot shrink past its padding, which would leave a
   sliver of open panel behind when collapsed. */
.sk-toc__list li:first-child { padding-top: var(--sk-4); }
/* Hidden only once the panel has finished closing, so the links leave the tab
   order when they are out of sight but the fade still plays out. */
.sk-toc.is-collapsed .sk-toc__list {
  opacity: 0; visibility: hidden;
  transition: opacity var(--sk-dur) var(--sk-ease), visibility 0s linear .32s;
}

/* Entries drift up as the panel closes, and settle back in a short stagger on
   the way open — enough to read as motion, not enough to wait for. */
.sk-toc__list li {
  margin-bottom: var(--sk-2);
  transition: opacity var(--sk-dur) var(--sk-ease), transform var(--sk-dur) var(--sk-ease);
}
.sk-toc.is-collapsed .sk-toc__list li { opacity: 0; transform: translateY(-6px); transition-delay: 0s; }
.sk-toc__list li:nth-child(1)  { transition-delay: 90ms; }
.sk-toc__list li:nth-child(2)  { transition-delay: 120ms; }
.sk-toc__list li:nth-child(3)  { transition-delay: 150ms; }
.sk-toc__list li:nth-child(4)  { transition-delay: 180ms; }
.sk-toc__list li:nth-child(5)  { transition-delay: 210ms; }
.sk-toc__list li:nth-child(n+6) { transition-delay: 240ms; }
.sk-toc__list > li:not(.is-h3) > a { counter-increment: toc; }
.sk-toc__list > li:not(.is-h3) > a::before { content: counter(toc) ". "; color: var(--sk-primary-ink); font-weight: 800; }
.sk-toc__list a { color: var(--sk-body); text-decoration: none; font-size: var(--sk-fs-base); }
.sk-toc__list a:hover, .sk-toc__list a.is-active { color: var(--sk-primary-ink); font-weight: 700; }
.sk-toc__list .is-h3 { padding-left: var(--sk-5); font-size: var(--sk-fs-sm); }
.sk-toc__list .is-h3 a::before { content: "– "; color: var(--sk-muted); }

/* 6. ARTICLE BODY ========================================================= */

.sk-content {
  max-width: var(--sk-reading);
  margin-inline: auto;
  font-size: var(--sk-fs-read);
  line-height: var(--sk-lh-read2);
  letter-spacing: var(--sk-ls);
  color: var(--sk-read-ink);
}
/* Headings run in the body sans and carry the weight themselves, no rules or
   ornaments — the reading page is meant to be plain and fast to scan. */
.sk-content h2, .sk-content h3, .sk-content h4 {
  font-family: var(--sk-font-body);
  color: var(--sk-ink);
  letter-spacing: var(--sk-ls);
}
.sk-content h2 { font-size: var(--sk-fs-h2); font-weight: 600; line-height: 1.3; }
.sk-content h3 { font-size: var(--sk-fs-h3); font-weight: 600; line-height: 1.3; }
.sk-content h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }

.sk-content.is-wide { max-width: none; }
.sk-content > * + * { margin-top: var(--sk-6); }
.sk-content h2 {
  margin-top: 40px; margin-bottom: 12px; scroll-margin-top: 90px;
  /* The restrained cousin of the section band. Twenty filled lime blocks down
     one article would shout, so inside the body copy the accent is a rule. */
  padding-left: .58em;
  border-left: 4px solid var(--sk-accent);
}
.sk-content h3 { margin-top: var(--sk-6); margin-bottom: 10px; scroll-margin-top: 90px; }
.sk-content h4 { margin-top: var(--sk-5); margin-bottom: 8px; }
.sk-content h2 + p, .sk-content h3 + p, .sk-content h4 + p { margin-top: 0; }

.sk-content ul, .sk-content ol { padding-left: 1.4em; }
.sk-content li { margin-bottom: 7px; }
.sk-content ul > li::marker { color: var(--sk-primary); }
.sk-content ol > li::marker { color: var(--sk-primary-ink); font-weight: 700; }

.sk-content figure { margin: var(--sk-6) 0 20px; }
.sk-content img { width: 100%; height: auto; }
.sk-content figcaption { margin-top: var(--sk-3); font-size: var(--sk-fs-sm); color: var(--sk-muted); text-align: center; }
.sk-content a { color: var(--sk-primary-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--sk-primary-line); text-underline-offset: 3px; }
.sk-content a:hover { text-decoration-color: var(--sk-primary); }

/* First-letter flourish on the opening paragraph only. */
.sk-content > p.has-dropcap::first-letter {
  float: left;
  font-family: var(--sk-font-head);
  font-size: 3.6em; line-height: .82;
  font-weight: 700; color: var(--sk-primary);
  margin: .06em .1em 0 0;
}

/* Editorial callout, e.g. a pro tip. */
.sk-callout {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sk-4);
  margin: var(--sk-7) 0; padding: var(--sk-5) var(--sk-6);
  background: var(--sk-gold-tint);
  border: 1px solid var(--sk-gold);
  border-radius: var(--sk-r-lg);
  font-size: var(--sk-fs-md);
}
.sk-callout__icon { font-size: 1.4em; line-height: 1.2; }
.sk-callout strong { display: block; margin-bottom: 4px; color: var(--sk-ink); }

/* Pin-me card the author can drop mid-article. */
.sk-pinme {
  margin: var(--sk-8) 0; padding: var(--sk-5);
  background: var(--sk-primary-tint);
  border: 1px dashed var(--sk-primary);
  border-radius: var(--sk-r-lg);
  text-align: center;
}
.sk-pinme p { margin-bottom: var(--sk-4); font-weight: 600; color: var(--sk-ink); }

.sk-tags { display: flex; flex-wrap: wrap; gap: var(--sk-2); }
.sk-tags a {
  display: inline-block; padding: 6px 13px;
  background: var(--sk-sand); color: var(--sk-body);
  border-radius: var(--sk-r-pill);
  font-size: var(--sk-fs-xs); font-weight: 600; text-decoration: none;
  transition: background-color var(--sk-dur) var(--sk-ease), color var(--sk-dur) var(--sk-ease);
}
.sk-tags a:hover { background: var(--sk-primary); color: #fff; }

/* Author box */
.sk-author {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sk-5);
  margin: var(--sk-9) 0;
  padding: var(--sk-6);
  background: var(--sk-surface-2);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-lg);
}
.sk-author__avatar img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.sk-author__name { margin: 0 0 var(--sk-1); font-family: var(--sk-font-body); font-weight: 700; font-size: var(--sk-fs-lg); }
.sk-author__role { font-size: var(--sk-fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sk-primary-ink); }
.sk-author p { margin: var(--sk-3) 0 var(--sk-4); font-size: var(--sk-fs-base); }

/* Prev / next */
.sk-adjacent { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sk-5); margin: var(--sk-9) 0; }
.sk-adjacent__item {
  padding: var(--sk-5);
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-lg);
  text-decoration: none;
  transition: border-color var(--sk-dur) var(--sk-ease), transform var(--sk-dur) var(--sk-ease), box-shadow var(--sk-dur) var(--sk-ease);
}
.sk-adjacent__item:hover { transform: translateY(-3px); box-shadow: var(--sk-sh); border-color: transparent; }
.sk-adjacent__item--next { text-align: right; }
.sk-adjacent__label { display: block; margin-bottom: var(--sk-2); font-size: var(--sk-fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sk-primary-ink); }
.sk-adjacent__title { font-family: var(--sk-font-body); font-size: var(--sk-fs-md); font-weight: 600; color: var(--sk-ink); line-height: 1.4; }

/* 7. SIDEBAR ============================================================== */

.sk-sidebar { font-size: var(--sk-fs-md); line-height: 1.75; }
.sk-widget { margin-bottom: var(--sk-7); }
/*
 * Block widgets ignore the before_title/after_title that register_sidebar()
 * supplies, so their heading arrives as a bare <h2> inside the block markup.
 * Matching it here keeps classic and block widgets visually identical.
 */
.sk-widget__title,
.sk-sidebar .widget_block h2 {
  margin: 0 0 var(--sk-5); padding-bottom: var(--sk-3);
  border-bottom: 2px solid var(--sk-line);
  font-family: var(--sk-font-body); font-size: var(--sk-fs-sm); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sk-ink);
  position: relative;
  text-align: center;
}
.sk-widget__title::after,
.sk-sidebar .widget_block h2::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -2px; width: 48px; height: 2px; background: var(--sk-primary); }
.sk-widget ul { list-style: none; margin: 0; padding: 0; }
.sk-widget li { margin-bottom: var(--sk-3); }
.sk-widget a { color: var(--sk-body); text-decoration: none; }
.sk-widget a:hover { color: var(--sk-primary-ink); }

/*
 * "Popular" — the sidebar's own card grid, two across. The heading is left
 * aligned and plain rather than the centred uppercase rule the widget titles
 * use: it labels a block of pictures, not a list of links, and that is how the
 * reference build sets it.
 */
.sk-popular { margin-bottom: var(--sk-7); }
.sk-popular__title {
  margin: 0 0 20px;
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-h3); font-weight: 700; line-height: 1.4;
  letter-spacing: var(--sk-ls); color: var(--sk-ink);
}
.sk-popular__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sk-card-gap);
}
/* No room for the save pill on a 140px tile, and the reference carries none. */
.sk-popular .sk-save { display: none; }

/*
 * Author intro card — the reference's "Welcome!" block, reworked. No panel
 * behind it: a big round portrait, a centred greeting and the byline, which is
 * how the reference sets it and how the Popular grid below it reads too.
 */
.sk-aboutcard { margin-bottom: var(--sk-7); text-align: center; }
.sk-aboutcard img {
  width: min(200px, 72%); height: auto; aspect-ratio: 1;
  margin: 0 auto var(--sk-4);
  border-radius: 50%; object-fit: cover;
  background: var(--sk-primary-tint);
}
.sk-aboutcard h3 {
  margin: 0 0 var(--sk-2);
  font-family: var(--sk-font-body);
  font-size: var(--sk-fs-h3); font-weight: 700;
  letter-spacing: var(--sk-ls); color: var(--sk-ink);
}
.sk-aboutcard p { font-size: var(--sk-fs-base); margin-bottom: var(--sk-5); }
.sk-aboutcard p.sk-aboutcard__by { margin-bottom: var(--sk-4); }
/*
 * Band variant: the home page has no sidebar, so the card stands on its own
 * under the editor's pick — portrait on the left, everything else ranged
 * beside it, the same shape as the band above it.
 */
.sk-aboutcard--band {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  align-items: center;
  max-width: 840px;
  margin-inline: auto;
  padding-top: var(--sk-7);
  border-top: 1px solid var(--sk-line);
  text-align: left;
}
.sk-aboutcard--band img { width: 200px; margin: 0; }
.sk-aboutcard--band .sk-aboutcard__by { margin-bottom: var(--sk-3); }
.sk-aboutcard--band p:last-of-type { margin-bottom: var(--sk-5); }

.sk-aboutcard__name { display: block; font-weight: 700; color: var(--sk-ink); }
.sk-aboutcard__role {
  display: block; margin-top: 3px;
  font-size: var(--sk-fs-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sk-primary-ink);
}

.sk-widget--cta { padding: var(--sk-6); background: var(--sk-invert-bg); border-radius: var(--sk-r-lg); text-align: center; color: rgba(242, 240, 236, .78); }
.sk-widget--cta .sk-widget__title { color: #fff; border-color: rgba(255, 255, 255, .18); }
.sk-widget--cta p { font-size: var(--sk-fs-base); margin-bottom: var(--sk-4); }

/* 9. ARCHIVE & PAGINATION ================================================= */

/* Category description, when there is one, above the archive grid. */
.sk-archive-intro { margin-bottom: var(--sk-6); color: var(--sk-body); max-width: 70ch; }

/* No fill of its own — the archive header sits on the page like everything else. */
.sk-pagehead { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem); border-bottom: 1px solid var(--sk-line); text-align: center; }
.sk-pagehead__title { margin: 0 0 var(--sk-3); font-family: var(--sk-font-body); font-weight: 700; letter-spacing: -.015em; }
.sk-pagehead p { margin: 0 auto; max-width: 60ch; color: var(--sk-muted); }
.sk-pagehead__count { display: inline-block; margin-top: var(--sk-4); padding: 5px 14px; background: var(--sk-surface); border-radius: var(--sk-r-pill); font-size: var(--sk-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sk-muted); }

.sk-pagination { display: flex; justify-content: center; gap: var(--sk-2); margin-top: var(--sk-9); flex-wrap: wrap; }
.sk-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 var(--sk-3);
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-pill);
  font-size: var(--sk-fs-base); font-weight: 700;
  color: var(--sk-ink); text-decoration: none;
  transition: background-color var(--sk-dur) var(--sk-ease), color var(--sk-dur) var(--sk-ease), border-color var(--sk-dur) var(--sk-ease), transform var(--sk-dur) var(--sk-ease);
}
.sk-pagination .page-numbers:hover { transform: translateY(-2px); border-color: var(--sk-primary); color: var(--sk-primary-ink); }
.sk-pagination .page-numbers.current { background: var(--sk-primary); border-color: var(--sk-primary); color: #fff; }
.sk-pagination .dots { border-color: transparent; background: none; }

.sk-empty { max-width: 560px; margin-inline: auto; text-align: center; padding-block: var(--sk-10); }
.sk-empty__icon { font-size: 3rem; margin-bottom: var(--sk-4); }

/* 404 */
.sk-404 { text-align: center; padding-block: clamp(3rem, 2rem + 5vw, 7rem); }
.sk-404__code {
  font-family: var(--sk-font-head); font-size: clamp(5rem, 3rem + 12vw, 11rem);
  font-weight: 700; line-height: .9; color: var(--sk-brand-tint-2);
  font-variation-settings: "SOFT" 60, "WONK" 1;
}
.sk-404__actions { display: flex; justify-content: center; gap: var(--sk-3); flex-wrap: wrap; margin-top: var(--sk-6); }

/* Contact page split layout */
.sk-contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
.sk-contact__card { padding: var(--sk-6); background: var(--sk-primary-tint); border-radius: var(--sk-r-lg); }
.sk-contact__list { list-style: none; margin: var(--sk-5) 0 0; padding: 0; }
.sk-contact__list li { display: flex; gap: var(--sk-3); margin-bottom: var(--sk-4); font-size: var(--sk-fs-base); }
.sk-contact__form { padding: var(--sk-7); background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: var(--sk-r-lg); box-shadow: var(--sk-sh-sm); }

/* Archives / sitemap page */
.sk-archives__group { margin-bottom: var(--sk-9); }
.sk-archives__group h2 { display: flex; align-items: baseline; gap: var(--sk-3); }
.sk-archives__group h2 span { font-family: var(--sk-font-body); font-size: var(--sk-fs-xs); font-weight: 700; color: var(--sk-muted); }
.sk-archives__list { columns: 2; column-gap: var(--sk-8); }
.sk-archives__list li { break-inside: avoid; }

/* FAQ accordion, useful on legal and about pages */
.sk-faq { border: 1px solid var(--sk-line); border-radius: var(--sk-r-lg); overflow: hidden; background: var(--sk-surface); }
.sk-faq__item + .sk-faq__item { border-top: 1px solid var(--sk-line); }
.sk-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sk-4);
  width: 100%; padding: var(--sk-5) var(--sk-6);
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--sk-font-head); font-size: var(--sk-fs-md); font-weight: 600; color: var(--sk-ink);
}
.sk-faq__q svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--sk-primary); transition: transform var(--sk-dur) var(--sk-ease); }
.sk-faq__item.is-open .sk-faq__q svg { transform: rotate(45deg); }
.sk-faq__a { padding: 0 var(--sk-6) var(--sk-5); font-size: var(--sk-fs-base); display: none; }
.sk-faq__item.is-open .sk-faq__a { display: block; }

/* 10. BLOCK EDITOR ALIGNMENT ============================================== */

.sk-content .alignwide { width: min(1060px, 92vw); max-width: none; margin-inline: calc(50% - min(530px, 46vw)); }
.sk-content .alignfull { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); border-radius: 0; }
.alignleft { float: left; margin: .3em var(--sk-6) var(--sk-4) 0; max-width: 50%; }
.alignright { float: right; margin: .3em 0 var(--sk-4) var(--sk-6); max-width: 50%; }
.aligncenter { margin-inline: auto; text-align: center; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--sk-fs-sm); color: var(--sk-muted); text-align: center; }
.sticky .sk-card { box-shadow: 0 0 0 2px var(--sk-primary); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sk-3); }
.gallery-item { margin: 0; }
.wp-block-embed__wrapper { position: relative; }
.wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--sk-r); }

/* Reveal-on-scroll, applied by the JS observer. */
.sk-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--sk-ease), transform .55s var(--sk-ease); }
.sk-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sk-reveal { opacity: 1; transform: none; } }

/* 11. RESPONSIVE ========================================================== */

@media (max-width: 1024px) {
  .sk-hero { grid-template-columns: 1fr; }
  .sk-trend__track > .sk-card { flex-basis: calc((100% - 2 * var(--sk-card-gap)) / 3); }
  .sk-cat__grid > .sk-card { flex-basis: calc((100% - 3 * var(--sk-card-gap)) / 4); }
  .sk-feature { min-height: 380px; }
}

@media (max-width: 860px) {
  .sk-spotlight { grid-template-columns: 1fr; }
  .sk-aboutcard--band { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .sk-aboutcard--band img { margin-inline: auto; }
  .sk-cat__grid > .sk-card { flex-basis: calc((100% - 2 * var(--sk-card-gap)) / 3); }
  .sk-contact { grid-template-columns: 1fr; }
  .sk-author { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

@media (max-width: 720px) {
  .sk-pins > * { flex-basis: calc((100% - var(--sk-card-gap)) / 2); }
  .sk-trend__track > .sk-card { flex-basis: calc((100% - var(--sk-card-gap)) / 2); }
  .sk-cat__grid > .sk-card { flex-basis: calc((100% - var(--sk-card-gap)) / 2); }
  .sk-trend__head { font-size: 1.375rem; }
  .sk-cat__title { font-size: 1.1875rem; }
  .sk-trend__nav { width: 38px; height: 38px; }
  .sk-content h2, .sk-spotlight h2, .sk-section-head__title { font-size: 1.375rem; }
  .sk-share--bar { display: flex; }
  body.single-post { padding-bottom: 70px; }
  .sk-adjacent { grid-template-columns: 1fr; }
  .sk-adjacent__item--next { text-align: left; }
  .sk-content { font-size: 1.0625rem; }
  .sk-archives__list { columns: 1; }
  .sk-contact__form { padding: var(--sk-5); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .alignleft, .alignright { float: none; margin-inline: auto; max-width: 100%; }
}

@media (max-width: 420px) {
  .sk-mini { grid-template-columns: 76px 1fr; gap: var(--sk-3); }
  .sk-feature__inner { padding: var(--sk-7) var(--sk-4) var(--sk-4); }
}

/* 10. AD SLOTS ============================================================ */

/*
 * Reserved boxes. The height is committed at first paint, so a unit dropping
 * in later has nowhere to push whatever is already on screen.
 */
.sk-ad {
  display: flex; align-items: center; justify-content: center;
  width: 100%; margin-inline: auto; overflow: hidden;
}
.sk-ad--in-content { min-height: var(--sk-ad-h-inline); max-width: var(--sk-reading); margin-block: var(--sk-8); }
.sk-ad--sidebar    { min-height: var(--sk-ad-h-sidebar); margin-top: var(--sk-7); }
.sk-ad--grid       { min-height: var(--sk-ad-h-grid); }
.sk-ad--footer     { min-height: var(--sk-ad-h-footer); margin-block: var(--sk-8); }

/* A 600px rail is right beside an article and far too tall stacked on a phone. */
@media (max-width: 900px) {
  .sk-ad--sidebar { min-height: var(--sk-ad-h-grid); }
}

/*
 * Nothing is wired to an ad network yet, so an unfilled slot collapses instead
 * of holding open a blank box. The reserved heights above still apply the
 * moment shutki_ad_slot_html() returns markup and :empty stops matching, which
 * is what keeps a unit from shoving the page around when it arrives.
 */
.sk-ad:empty { display: none; }

/* ==========================================================================
   SQUARE SURFACES
   Images themselves carry no radius — the card clips them to its own 12px
   corner. In-article media and the flat panels stay hard-edged; pills,
   badges, buttons and the circular avatars keep their radius.
   ========================================================================== */

.sk-card__media img,
.sk-mini__media img,
.sk-pin__media img,
.sk-feature,
.sk-spotlight__media,
.sk-spotlight__media img,
.sk-hero-img,
.sk-hero-img img,
.sk-content img,
.sk-content figure,
.wp-block-embed iframe,
.sk-placeholder,
/* Panels sit on the same flat grid as the cards. */
.sk-toc,
.sk-callout,
.sk-pinme,
.sk-author,
.sk-adjacent__item,
.sk-list,
.sk-widget--cta,
.sk-contact__card,
.sk-contact__form,
.sk-faq {
  border-radius: 0;
}