/* ============================================================
   KINDIN STUDIO PAGE STYLES
   Self-contained (fonts and images under ./assets). Same visual language
   as Ricardo's CV site (Inter, Apple grays).

   Sections:
     1. Fonts + tokens        7. Footer + cookie settings
     2. Base + layout         8. Document pages (privacy.html)
     3. Mascot                9. Lightbox
     4. Header card          10. Small screens + reduced motion
     5. Tags                 11. Print
     6. Posts (items, media, side-by-side rows)
   ============================================================ */

/* ---------- 1. Fonts + tokens ---------- */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("./assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("./assets/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("./assets/fonts/inter-700.woff2") format("woff2");
}

:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Light theme (default). Dark values: the [data-theme="dark"] block below. */
  color-scheme: light;
  --ink:        #1d1d1f;                            /* primary text */
  --ink-soft:   #424245;                            /* body text */
  --gray:       #6e6e73;                            /* secondary text */
  --hairline:   #e2e2e7;                            /* borders, dividers */
  --surface:    #ffffff;                            /* cards */
  --surface-0:  rgba(255, 255, 255, 0);             /* --surface, transparent (fades) */
  --bg:         #f5f5f7;                            /* page */
  --fill:       #f5f5f7;                            /* chips, quiet buttons */
  --on-ink:     #ffffff;                            /* text on an --ink fill */
  --pattern:    url("./assets/bg-pattern.svg");     /* wallpaper */
  --linkedin:   #0a66c2;
  --youtube:    #ff0000;
  --radius:     22px;
  --shadow:     0 1px 2px rgba(0,0,0,.04), 0 8px 30px rgba(0,0,0,.06);
  --maxw:       1400px;
  --media-radius: 14px;                             /* post images and videos */
  --focus:      #3d8bff;                            /* keyboard focus ring */

  /* Brand colours (photo ring, photo glow, mascot glow) */
  --palette: conic-gradient(#ff5a4e, #ffb340, #34c759, #3d8bff, #af52de, #ff5a4e);

  /* Cover = same proportions as the cover image (2978 × 588), so the
     image is never cropped on desktop. Update if the image size changes. */
  --cover-ratio: 2978 / 588;

  /* Horizontal axis of the "Kindin" wordmark on the cover, as an offset from
     the card's centre (the wordmark is centred at 50.3% of the image width).
     The mascot and the contact row are both centred on this axis. */
  --brand-axis: 0.3%;
}

/* Dark theme, after Apple's dark mode: near-black page, raised gray cards,
   off-white text (never pure black/white). Set by theme.js on <html>. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:        #f5f5f7;
  --ink-soft:   #d1d1d6;
  --gray:       #98989d;
  --hairline:   #38383a;
  --surface:    #1c1c1e;
  --surface-0:  rgba(28, 28, 30, 0);
  --bg:         #111113;
  --fill:       #2c2c2e;
  --on-ink:     #1d1d1f;
  --pattern:    url("./assets/bg-pattern-dark.svg");
  --shadow:     0 1px 2px rgba(0,0,0,.3), 0 8px 30px rgba(0,0,0,.35);
}

/* ---------- 2. Base + layout ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }   /* smooth "Back to top" */
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
/* Wallpaper: light gray board-game pieces. It sits on a fixed layer behind
   the page, so only the content scrolls. (A fixed pseudo-element instead of
   background-attachment: fixed, which iOS Safari ignores.) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--bg) var(--pattern) repeat;
  background-size: 920px 920px;
  pointer-events: none;
}
a { color: inherit; text-decoration: none; }
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; }

.ks-page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: flex; flex-direction: column; gap: 24px;
}
.ks-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ---------- 3. Mascot (peeks over the header card) ----------
   Everything here scales with the card width, like the cover does:
   sizes in cqw (% of the header's width), margins in % (also the width).
   Desktop numbers were tuned at a 1352px-wide card. */
.ks-header { position: relative; container-type: inline-size; }
/* room above the card = visible part of the dog (23.1% - 5.5%) + a small gap */
.ks-header--mascot { margin-top: calc(17.6% - 20px); }

.ks-mascot {
  position: absolute; bottom: 100%; z-index: 2;
  height: 312px; height: 23.1cqw; width: auto;
  /* centre the dog's body (43.5% of its image width) on the brand axis */
  left: calc(50% + var(--brand-axis));
  transform: translateX(-43.5%);
  /* sink into the cover so the paws sit just above the wordmark */
  margin-bottom: -5.5%;
  /* soft shadow + a tighter contact shadow, so the dog lifts off the page */
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.4)) drop-shadow(0 3px 6px rgba(0,0,0,.25));
}

/* Coloured glow behind the mascot: the brand palette, blurred and
   slowly spinning. Same axis and baseline as the mascot, raised a little
   so it sits behind the body. */
.ks-mascot-glow {
  position: absolute; bottom: 100%; z-index: 1;
  left: calc(50% + var(--brand-axis));
  transform: translateX(-50%);                      /* kept when motion is reduced */
  width: 350px; width: 25.9cqw; aspect-ratio: 1;
  margin-bottom: -7.7%;
  border-radius: 50%;
  background: var(--palette);
  filter: blur(66px); filter: blur(4.9cqw);
  opacity: .45;
  pointer-events: none;
  animation: ks-glow-spin 6s linear infinite;
}
@keyframes ks-glow-spin {
  from { transform: translateX(-50%) rotate(0turn); }
  to   { transform: translateX(-50%) rotate(1turn); }
}

/* ---------- 4. Header card ---------- */
.ks-cover {
  position: relative;
  aspect-ratio: var(--cover-ratio);
  background: var(--hairline) center / cover no-repeat;
  container-type: inline-size;                      /* lets the cover links scale with it */
}

/* Author block: inside the cover, left side, vertically centred - the
   round photo (a button that opens the lightbox) with name, role and the
   site link under it. Everything scales with the cover
   (cqw = % of the cover width; the cover is 19.74cqw tall at 2978/588).
   Left margin = the cards' inner padding, so it lines up with the title. */
.ks-author {
  position: absolute; left: 36px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  /* photo = ~79% of the cover height minus room for the caption */
  --photo: 165px; --photo: calc(15.6cqw - 46px);
}
.ks-author__photo { position: relative; display: block; width: var(--photo); aspect-ratio: 1; }
.ks-avatar, .ks-avatar-glow { position: absolute; inset: 0; border-radius: 50%; display: block; }
.ks-author__caption {
  display: block; text-align: left; line-height: 1.3;
  /* wrap before the "Kindin / Spatial Computing Studio" lettering of the cover
     art, which starts at 40.5% of the image width (minus the 36px left offset
     and a 16px gap) */
  max-width: calc(40.5cqw - 52px);
}
.ks-author__name { display: block; font-size: max(12px, 1.1cqw); font-weight: 600; color: #fff; }
.ks-author__role { display: block; font-size: max(10px, .95cqw); color: rgba(255,255,255,.75); }
.ks-author__site {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: max(4px, .3cqw);
  font-size: max(10px, .9cqw); font-weight: 500;
  color: rgba(255,255,255,.85);
  text-decoration: none; white-space: nowrap;
}
.ks-author__site:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.ks-author__site:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.ks-author__site .ic { opacity: .9; }
.ks-avatar {
  padding: 4px;                                     /* thickness of the coloured ring */
  border: 0; background: none;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  cursor: zoom-in;
}
.ks-avatar:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* animated ring: a colourful conic gradient spinning behind the photo */
.ks-avatar::before {
  content: ""; position: absolute; inset: -50%; z-index: -1;
  background: var(--palette);
  animation: ks-spin 6s linear infinite;
}
.ks-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 50%;
  border: 3px solid var(--surface);                 /* thin white gap between ring and photo */
  background: var(--surface);
}
/* coloured glow: the ring's colours, blurred, spinning behind the photo */
.ks-avatar-glow { pointer-events: none; }
.ks-avatar-glow::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: var(--palette);
  filter: blur(20px);
  opacity: .5;
  animation: ks-spin 6s linear infinite;
}
@keyframes ks-spin { to { transform: rotate(1turn); } }

/* Contact row at the base of the cover: round buttons in each brand's own
   colours, centred on the brand axis. Size follows the cover width (cqw). */
.ks-cover-links {
  position: absolute; bottom: 6%;                   /* centred in the space under the wordmark */
  left: calc(50% + var(--brand-axis));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  --btn: 36px; --btn: 2.65cqw;                     /* button size (px fallback first) */
}
.ks-cover-link {
  width: var(--btn); height: var(--btn); min-width: 26px; min-height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: #1d1d1f;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.ks-cover-link .ic { font-size: max(12px, calc(var(--btn) * .46)); }

/* Theme picker: above the header card, aligned with its right edge, on the
   wallpaper (in the room left for the mascot). A pill with "Light" and "Dark";
   the current theme is filled. Follows the theme itself. See theme.js. */
.ks-theme {
  position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 3;
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 980px;
  background: var(--surface); border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}
.ks-theme__opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px; border: 0; border-radius: 980px;
  -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--gray);
  background: none; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ks-theme__opt .ic { font-size: 15px; }
.ks-theme__opt:hover { color: var(--ink); }
.ks-theme__opt[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); cursor: default; }
.ks-theme__opt:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ks-cover-link[data-icon="youtube"]  { background: var(--youtube); }
.ks-cover-link[data-icon="youtube"] .ic { font-size: max(14px, calc(var(--btn) * .56)); }
.ks-cover-link[data-icon="linkedin"] { background: var(--linkedin); }
.ks-cover-link[data-icon="mail"]     { background: #fff; color: #1d1d1f; }

/* Title, description, tags */
.ks-intro { padding: 28px 36px 32px; }
.ks-title { margin: 0; font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.ks-desc {
  margin: 14px 0 0;
  font-size: 17px; color: var(--ink-soft);
  white-space: pre-line;
}
.ks-intro .ks-tags { margin-top: 20px; }

/* ---------- 5. Tags ---------- */
.ks-tags {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ks-tags li {
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--fill); border: 1px solid var(--hairline);
  padding: 7px 13px; border-radius: 980px;
}
/* posts: same chips, smaller, so they read as belonging to the post */
.ks-tags--small { gap: 5px; }
.ks-tags--small li { font-size: 11px; padding: 2px 8px; }

/* ---------- 6. Posts ---------- */
/* Divider ONLY between posts, with the same space above and below it. */
.ks-posts { padding: 36px; --post-gap: 36px; }
.post + .post { margin-top: var(--post-gap); padding-top: var(--post-gap); border-top: 1px solid var(--hairline); }

/* Every part of a post is optional; flex gap means a missing one leaves no hole. */
.post { display: flex; flex-direction: column; gap: 14px; }
.post__title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }

.post__item { display: flex; flex-direction: column; gap: 12px; }
.post__item + .post__item { margin-top: 34px; }    /* + the post's 14px gap = 48px between items */
.post__text { margin: 0; font-size: 15px; color: var(--gray); white-space: pre-line; }

/* Media: a video is always a 16:9 frame; an image keeps its own proportions
   (except in a row, below) and is a button that opens the lightbox.
   width: 100% is required next to aspect-ratio: without it Safari derives the
   width from the content's height (a 1000px+ tall image → a frame wider than the page). */
.post__video, .post__image { width: 100%; }
.post__video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--media-radius); overflow: hidden;
  background: #000;
}
.post__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* No white flash while the player loads: the frame stays black until YouTube's
   page is in (kindin.js adds .is-loaded). color-scheme: light matches YouTube's
   page, otherwise in dark theme the browser paints the iframe's canvas opaque
   white (embedder and embedded colour schemes differ). */
.post__video iframe { color-scheme: light; opacity: 0; transition: opacity .3s ease; }
.post__video iframe.is-loaded { opacity: 1; }

.post__zoom {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; border-radius: var(--media-radius);
  background: none; cursor: zoom-in;
}
.post__zoom img { display: block; width: 100%; height: auto; border-radius: var(--media-radius); }
.post__zoom:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Side-by-side row ({"row": [...]} in data.json).
   Equal columns that content can't widen. Texts share grid row 1 and media
   share row 2 (subgrid), so the media line up even when the texts differ;
   each text sits on its media and the spare space goes above it. */
.post__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 24px;
}
.post__cell { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; }
.post__textbox { grid-row: 1; align-self: end; position: relative; margin-bottom: 12px; }
.post__media { grid-row: 2; align-self: start; display: flex; flex-direction: column; gap: 12px; }

/* at most 3 lines, so a long text doesn't push its media down */
.post__textbox .post__text {
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden;
}
/* "more": at the end of line 3 over a fade; only on texts that are cut (kindin.js) */
.post__more {
  display: none;
  position: absolute; right: 0; bottom: 0;
  padding: 0 0 0 3.5em; border: 0;
  background: linear-gradient(to right, var(--surface-0), var(--surface) 3em);
  font: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
  cursor: pointer;
}
.post__textbox.is-clamped .post__more { display: block; }
.post__more:hover { text-decoration: underline; }
.post__more:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* in a row every media is the same 16:9 frame; images fit inside it uncropped */
.post__row .post__image {
  aspect-ratio: 16 / 9;
  border-radius: var(--media-radius); overflow: hidden;
  background: #000;
}
.post__row .post__zoom img { height: 100%; object-fit: contain; border-radius: 0; }

/* ---------- 7. Footer + cookie settings ----------
   Outside the cards, on the wallpaper; same gap above it as between the cards.
   Side padding = the cards' inner padding, so it lines up with their content. */
.ks-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 24px;
  padding: 8px 36px 0;
  font-size: 13px; color: var(--gray);
}
.ks-footer p { margin: 0; }
.ks-footer__copy { font-weight: 600; color: var(--ink-soft); }

/* contacts: small, quiet icons that take their brand colour on hover */
.ks-footer__links { display: flex; gap: 8px; }
.ks-footer__link {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--gray);
  background: var(--surface); border: 1px solid var(--hairline);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.ks-footer__link:hover { color: #fff; }
.ks-footer__link[data-icon="youtube"]:hover  { background: var(--youtube);  border-color: var(--youtube); }
.ks-footer__link[data-icon="linkedin"]:hover { background: var(--linkedin); border-color: var(--linkedin); }
.ks-footer__link[data-icon="mail"]:hover     { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.ks-footer__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* bottom block: back to top, legal links and trademark notice, centred */
.ks-footer__bottom {
  flex-basis: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-top: 16px; border-top: 1px solid var(--hairline);
  text-align: center;
}
.ks-footer__top a, .ks-footer__legal a, .ks-footer__cookies {
  color: var(--ink-soft); font-weight: 600;
}
.ks-footer__cookies { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.ks-footer__top a:hover, .ks-footer__legal a:hover, .ks-footer__cookies:hover {
  text-decoration: underline; text-underline-offset: 2px;
}
.ks-footer__top a:focus-visible, .ks-footer__legal a:focus-visible, .ks-footer__cookies:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px;
}
.ks-footer__trademark { max-width: 60ch; font-size: 11px; color: var(--gray); }

/* Cookie settings panel: a small card pinned to the bottom of the screen, opened
   only from the footer's "Cookie settings". Both choices have the same size;
   the current one is filled. */
.ks-consent {
  position: fixed; z-index: 10;
  left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px 14px 20px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.14);
  font-size: 13px; color: var(--ink-soft);
}
.ks-consent[hidden] { display: none; }
.ks-consent__text { margin: 0; flex: 1; line-height: 1.45; }
.ks-consent__text a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ks-consent__actions { display: flex; gap: 8px; flex: none; }
.ks-consent__btn {
  padding: 8px 16px; border-radius: 980px;
  border: 1px solid var(--ink); background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer;
}
.ks-consent__btn[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.ks-consent__btn:focus-visible, .ks-consent__text a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- 8. Document pages (privacy.html) ----------
   A single readable card: same page, wallpaper and footer-like back link. */
.ks-doc { padding: 40px 48px 48px; max-width: 820px; margin: 0 auto; width: 100%; }
.ks-doc__back { display: inline-block; margin-bottom: 24px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.ks-doc__back:hover { text-decoration: underline; text-underline-offset: 2px; }
.ks-doc h1 { margin: 0; font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.ks-doc__updated { margin: 8px 0 28px; font-size: 14px; color: var(--gray); }
.ks-doc h2 { margin: 32px 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.ks-doc p, .ks-doc li { font-size: 16px; color: var(--ink-soft); }
.ks-doc p { margin: 0 0 12px; }
.ks-doc ul { margin: 0 0 12px; padding-left: 22px; }
.ks-doc li { margin-bottom: 6px; }
.ks-doc a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ks-doc code { font-size: 14px; background: var(--fill); border: 1px solid var(--hairline); border-radius: 6px; padding: 1px 6px; }

/* ---------- 9. Lightbox ----------
   Enlarged image and/or full text over the page (native <dialog>, see kindin.js). */
.ks-lightbox {
  width: 100vw; height: 100vh; height: 100dvh;
  max-width: none; max-height: none;
  margin: 0; padding: 24px; border: 0;
  background: none; cursor: zoom-out;
}
.ks-lightbox[open] {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.ks-lightbox::backdrop { background: rgba(0, 0, 0, .85); }
html:has(.ks-lightbox[open]) { overflow: hidden; }   /* the page doesn't scroll behind it */

/* The image fills all the room left by the caption, scaled up or down to fit
   (object-fit: contain), so even a small file - like the 640px author photo -
   really opens large. */
.ks-lightbox__img {
  flex: 1 1 0; min-height: 0;
  width: 100%;
  object-fit: contain;
}
.ks-lightbox__caption {
  flex: none; margin: 0;
  max-width: 900px; max-height: 30vh; overflow: auto;
  font-size: 15px; color: rgba(255, 255, 255, .85);
  white-space: pre-line; cursor: auto;
}
.ks-lightbox__caption:empty { display: none; }
/* text only (a video cell's "more"): the text gets the whole box */
.ks-lightbox__img[hidden] + .ks-lightbox__caption { max-height: 100%; font-size: 17px; }

.ks-lightbox__close {
  position: fixed; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  /* iOS Safari: drop the native button look and padding (they squash the circle
     and push the X off centre); min sizes + aspect-ratio keep it a 40px circle */
  padding: 0; -webkit-appearance: none; appearance: none;
  min-width: 40px; min-height: 40px; aspect-ratio: 1; flex: none;
  display: grid; place-items: center;
  font-size: 22px; color: #fff;
  background: rgba(255, 255, 255, .16); cursor: pointer;
}
.ks-lightbox__close .ic { display: block; }           /* no inline-text offset */

/* ---------- 10. Small screens + reduced motion ---------- */
@media (max-width: 720px) {
  /* cover is 3:1 here, so the wordmark lands further from the centre */
  :root { --brand-axis: 0.5%; }

  .ks-page { padding: 16px 12px 40px; gap: 16px; }

  /* cover is 3:1 here, so the dog is larger relative to the width */
  .ks-header--mascot { margin-top: calc(32.7% - 11px); }
  .ks-mascot { height: 42.7cqw; margin-bottom: -10%; }
  .ks-mascot-glow { width: 48cqw; margin-bottom: -13.7%; filter: blur(9cqw); }

  .ks-cover { aspect-ratio: 3 / 1; }
  /* Phones: the 3:1 cover is too short for the caption beside the lettering, so
     (like a LinkedIn profile) the photo sits at the cover's bottom-left and the
     caption moves just below the cover, on the white card. The intro's top
     padding makes room for it (name + role + site ≈ 58px). */
  .ks-author { left: 20px; top: auto; bottom: 12px; transform: none; --photo: min(22cqw, 110px); }
  .ks-author__caption {
    position: absolute; left: 0; top: calc(100% + 24px);
    width: calc(100cqw - 40px); max-width: none;
  }
  .ks-author__name { font-size: 16px; color: var(--ink); }
  .ks-author__role { font-size: 14px; color: var(--gray); }
  .ks-author__site { font-size: 14px; color: var(--ink-soft); }
  .ks-author__site:hover { color: var(--ink); }
  .ks-avatar { padding: 3px; }
  .ks-avatar img { border-width: 2px; }
  .ks-cover-links { bottom: 7px; gap: 10px; }
  .ks-theme { bottom: calc(100% + 8px); padding: 2px; }
  .ks-theme__opt { padding: 4px 9px 4px 7px; font-size: 11px; gap: 4px; }
  .ks-theme__opt .ic { font-size: 12px; }

  .ks-intro { padding: 96px 20px 24px; }
  .ks-title { font-size: 28px; }
  .ks-desc { font-size: 16px; }

  .ks-posts { padding: 24px 20px; --post-gap: 28px; }
  .post__title { font-size: 22px; }

  .ks-footer { flex-direction: column; text-align: center; padding: 4px 20px 0; }

  .ks-consent { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .ks-consent__btn { flex: 1; }

  .ks-doc { padding: 24px 20px 32px; }
  .ks-doc h1 { font-size: 28px; }
}

/* narrow phones: theme picker shows icons only (sun | moon), clear of the mascot's ears */
@media (max-width: 520px) {
  .ks-theme__opt { padding: 4px 7px; }
  .ks-theme__opt .ic { font-size: 12px; }
  .ks-theme__label { display: none; }
}

/* Stacked rows: too narrow for two players side by side, and on paper.
   Columns go one under the other, texts in full and left-aligned, no "more". */
@media (max-width: 720px), print {
  .post__row { display: flex; flex-direction: column; gap: 24px; }
  .post__cell { display: flex; flex-direction: column; }
  .post__textbox { align-self: stretch; }
  .post__textbox .post__text { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
  .post__textbox.is-clamped .post__more { display: none; }
  /* full width: the desktop align-self: start would shrink the media to 0 in a column */
  .post__media { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ks-avatar::before,
  .ks-avatar-glow::before,
  .ks-mascot-glow { animation: none; }
  .post__video iframe { transition: none; }
}

/* ---------- 11. Print ----------
   Screen layout is untouched; this only tidies the printed page:
   white paper, no animations/glows, nothing split across pages,
   videos, images and icon buttons replaced by readable text. */
.ks-print-only { display: none; }

@media print {
  /* paper size and margins: left to the print dialog */

  /* paper is white: always the light palette, whatever the screen theme */
  :root[data-theme="dark"] {
    color-scheme: light;
    --ink: #1d1d1f; --ink-soft: #424245; --gray: #6e6e73;
    --hairline: #e2e2e7; --surface: #ffffff; --bg: #f5f5f7; --fill: #f5f5f7;
  }
  .ks-theme { display: none; }
  html, body { background: #fff; }
  body {
    -webkit-print-color-adjust: exact;              /* keep the cover, ring and chips colours */
            print-color-adjust: exact;
  }
  body::before { display: none; }                   /* no wallpaper on paper */

  /* block, not flex: browsers ignore forced page breaks inside flex containers */
  .ks-page { display: block; width: auto; max-width: 100%; padding: 0; }
  .ks-card { max-width: 100%; box-shadow: none; }

  /* no motion, no glows */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ks-avatar-glow, .ks-mascot-glow { display: none; }
  /* smaller mascot, with enough room above the card for the ears
     (the page has no top padding on paper) */
  .ks-header--mascot { margin-top: 170px; }
  .ks-mascot { height: 200px; filter: none; }

  /* cover icon buttons → plain contacts under the description */
  .ks-cover-links { display: none; }
  .ks-print-only { display: block; }
  .ks-print-contact { margin: 14px 0 0; font-size: 13px; color: var(--ink-soft); }

  /* players and images don't print → videos show their link */
  .post__video, .post__image { display: none; }
  .post__video-link { margin: 0; font-size: 13px; color: var(--ink-soft); }
  .post__row { gap: 12px; }

  /* footer: only the copyright line */
  .ks-footer { padding: 24px 0 0; justify-content: center; }
  .ks-footer__tagline, .ks-footer__links, .ks-footer__bottom, .ks-consent { display: none; }

  /* page 1 = studio header; posts start on page 2 */
  .ks-posts { break-before: page; page-break-before: always; }

  /* keep blocks whole across pages */
  .ks-header, .post__item { break-inside: avoid; }
  .post__title { break-after: avoid; }
}