/* ==========================================================================
   Sex Video Call Video (codename Trunkline) — main.css
   A-7 Dusty Rose · B-9 Tektur + Fira Sans · C-5 Aurora / Mesh Gradient
   E1-1 sticky blur header · E2-6 editorial soft-drop · accent strategy 3
   D-9 Orbit Badge gate · H-9 chat-bubble illustration
   Micro: F-1 theme toggle · F-12 scrollbar · F-16 smooth anchors · F-3 top
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* A-7 Dusty Rose — light */
  --tkl-bg:        #FBF4F5;
  --tkl-surface:   #FFFCFC;
  --tkl-text:      #321F25;
  --tkl-muted:     #6F5560;
  --tkl-accent:    #A85669;   /* CTA background */
  --tkl-accent2:   #E8B8C4;
  /* Split off from --tkl-accent: accent doubles as a CTA background, and the
     same value fails AA as small text / a link colour. Never merge these. */
  --tkl-ink:       #8E4155;   /* accent-coloured headings + rules (strategy 3) */
  --tkl-link:      #97435A;
  --tkl-on-accent: #FFFFFF;

  --tkl-line:      rgba(50, 31, 37, 0.14);
  --tkl-hairline:  rgba(50, 31, 37, 0.09);

  /* C-5 aurora blobs */
  --tkl-blob-a:    rgba(168, 86, 105, 0.30);
  --tkl-blob-b:    rgba(232, 184, 196, 0.42);
  --tkl-blob-c:    rgba(190, 150, 205, 0.24);
  --tkl-card:      #FFFFFF;

  /* E2-6 editorial soft-drop */
  --tkl-radius:      10px;
  --tkl-radius-sm:   6px;
  --tkl-shadow:      0 24px 48px -16px rgba(50, 31, 37, 0.14);
  --tkl-shadow-lift: 0 32px 60px -18px rgba(50, 31, 37, 0.20);

  /* Spacing scale */
  --tkl-s1: 4px;  --tkl-s2: 8px;  --tkl-s3: 12px; --tkl-s4: 16px;
  --tkl-s5: 24px; --tkl-s6: 32px; --tkl-s7: 48px; --tkl-s8: 64px;

  /* Type scale (1.25) */
  --tkl-t-xs: 0.78rem; --tkl-t-sm: 0.875rem; --tkl-t-base: 1rem;
  --tkl-t-md: 1.15rem; --tkl-t-lg: 1.45rem;  --tkl-t-xl: 1.85rem;

  --tkl-display: "Tektur", "Trebuchet MS", system-ui, sans-serif;
  --tkl-body: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* The reading column. rem, never ch — a heading and a paragraph at the same
     ch value do not line up. */
  --tkl-col: 44rem;
  --tkl-shell: 1140px;
}

[data-theme="dark"] {
  --tkl-bg:        #1E1417;
  --tkl-surface:   #291B20;
  --tkl-text:      #F2E5E9;
  --tkl-muted:     #C7A9B2;
  --tkl-accent:    #A25264;
  --tkl-accent2:   #D195A4;
  --tkl-ink:       #E2A3B2;
  --tkl-link:      #E2A3B2;
  --tkl-on-accent: #FFFFFF;

  --tkl-line:      rgba(242, 229, 233, 0.18);
  --tkl-hairline:  rgba(242, 229, 233, 0.11);

  --tkl-blob-a:    rgba(162, 82, 100, 0.40);
  --tkl-blob-b:    rgba(209, 149, 164, 0.22);
  --tkl-blob-c:    rgba(150, 116, 172, 0.28);
  --tkl-card:      #2E1F25;

  --tkl-shadow:      0 24px 48px -16px rgba(0, 0, 0, 0.55);
  --tkl-shadow-lift: 0 32px 60px -18px rgba(0, 0, 0, 0.66);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
  margin: 0;
  background: var(--tkl-bg);
  color: var(--tkl-text);
  font-family: var(--tkl-body);
  font-size: var(--tkl-t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The hidden ATTRIBUTE must always win: a component `display:` rule (0,1,0)
   otherwise beats the UA `[hidden]` rule and leaves an invisible,
   opacity:0 element sitting over the page swallowing taps. */
[hidden] { display: none !important; }

img { max-width: 100%; height: auto; }
/* Deliberately NOT svg{max-width:100%} — on iOS Safari that clamps the icon
   inside a shrink-to-fit flex button to 0 width (invisible icon, tall empty
   pill). Icon buttons below carry explicit sizes instead. */

a { color: var(--tkl-link); }
:focus-visible {
  outline: 2px solid var(--tkl-ink);
  outline-offset: 2px;
  border-radius: 3px;
}

/* F-12 custom scrollbar */
* { scrollbar-color: var(--tkl-accent2) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--tkl-accent2);
  border-radius: 999px;
  border: 3px solid var(--tkl-bg);
}

::selection { background: var(--tkl-accent2); color: var(--tkl-text); }

/* F-16 smooth anchors — motion-gated; scroll-margin keeps the sticky header
   off the headings. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
h1, h2, [id] { scroll-margin-top: 92px; }

/* --------------------------------------------------------------------------
   3. C-5 Aurora / Mesh Gradient — the page's ambient field
   -------------------------------------------------------------------------- */
.tkl-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.tkl-aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.tkl-aurora span:nth-child(1) {
  width: 46vmax; height: 46vmax; top: -12vmax; left: -8vmax;
  background: var(--tkl-blob-a);
  animation: tkl-drift-a 34s ease-in-out infinite alternate;
}
.tkl-aurora span:nth-child(2) {
  width: 40vmax; height: 40vmax; top: 24vmax; right: -12vmax;
  background: var(--tkl-blob-b);
  animation: tkl-drift-b 42s ease-in-out infinite alternate;
}
.tkl-aurora span:nth-child(3) {
  width: 34vmax; height: 34vmax; bottom: -10vmax; left: 26vmax;
  background: var(--tkl-blob-c);
  animation: tkl-drift-c 38s ease-in-out infinite alternate;
}
@keyframes tkl-drift-a { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); } }
@keyframes tkl-drift-b { to { transform: translate3d(-7vmax, -5vmax, 0) scale(1.08); } }
@keyframes tkl-drift-c { to { transform: translate3d(4vmax, -6vmax, 0) scale(1.15); } }

/* --------------------------------------------------------------------------
   4. Shell
   -------------------------------------------------------------------------- */
.tkl-shell {
  width: 100%;
  max-width: var(--tkl-shell);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
}
.tkl-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tkl-accent);
  color: var(--tkl-on-accent);
  padding: var(--tkl-s3) var(--tkl-s4);
  z-index: 90;
}
.tkl-skip:focus { left: var(--tkl-s4); top: var(--tkl-s2); }

/* --------------------------------------------------------------------------
   5. E1-1 Header — sticky blur
   -------------------------------------------------------------------------- */
.tkl-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--tkl-bg) 72%, transparent);
  border-bottom: 1px solid var(--tkl-hairline);
}
@supports (backdrop-filter: blur(14px)) {
  .tkl-header { backdrop-filter: blur(14px) saturate(150%); }
}
.tkl-header__row {
  display: flex;
  align-items: center;
  gap: var(--tkl-s3);
  min-height: 64px;
}

/* Brand — icon + wordmark, exactly once. min-width:0 lets it truncate rather
   than wrap or shove the buttons off-screen below 400px. */
.tkl-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--tkl-s2);
  text-decoration: none;
  color: var(--tkl-text);
  min-width: 0;
  flex: 1 1 auto;
  margin-right: auto;
}
.tkl-brand__icon { width: 30px; height: 30px; flex: none; }
.tkl-brand__name {
  font-family: var(--tkl-display);
  font-weight: 700;
  font-size: clamp(0.92rem, 3.1vw, 1.12rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tkl-header__actions { display: flex; align-items: center; gap: var(--tkl-s2); flex: none; }

/* Icon-only buttons: fixed size + grid centring (the iOS 0-width trap). */
.tkl-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--tkl-hairline);
  border-radius: var(--tkl-radius-sm);
  background: var(--tkl-surface);
  color: var(--tkl-text);
  cursor: pointer;
}
.tkl-iconbtn svg { width: 21px; height: 21px; display: block; }
.tkl-iconbtn:hover { border-color: var(--tkl-line); }

.tkl-sun, .tkl-moon { transition: opacity .25s ease, transform .35s ease; }
.tkl-moon { display: none; }
[data-theme="dark"] .tkl-sun { display: none; }
[data-theme="dark"] .tkl-moon { display: block; }

/* Desktop language dropdown */
.tkl-lang { position: relative; }
.tkl-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--tkl-s2);
  height: 44px;
  padding: 0 var(--tkl-s3);
  border: 1px solid var(--tkl-hairline);
  border-radius: var(--tkl-radius-sm);
  background: var(--tkl-surface);
  color: var(--tkl-text);
  font-family: var(--tkl-body);
  font-size: var(--tkl-t-sm);
  cursor: pointer;
}
.tkl-lang__btn svg { width: 12px; height: 12px; transition: transform .2s ease; }
.tkl-lang__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.tkl-lang__pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  padding: var(--tkl-s2);
  background: var(--tkl-card);
  border: 1px solid var(--tkl-hairline);
  border-radius: var(--tkl-radius);
  box-shadow: var(--tkl-shadow);
  z-index: 41;
}

/* Language list markup (TranslatePress menu + shortcode fallback) */
.tkl-lang__pop ul,
.tkl-sheet__langs ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tkl-lang__pop li a,
.tkl-sheet__langs li a,
.tkl-lang__pop .trp-language-switcher-container a,
.tkl-sheet__langs .trp-language-switcher-container a {
  display: flex;
  align-items: center;
  gap: var(--tkl-s2);
  min-height: 44px;
  padding: 0 var(--tkl-s3);
  border-radius: var(--tkl-radius-sm);
  color: var(--tkl-text);
  text-decoration: none;
  font-size: var(--tkl-t-sm);
}
.tkl-lang__pop li a:hover,
.tkl-sheet__langs li a:hover { background: color-mix(in srgb, var(--tkl-accent2) 32%, transparent); }
.tkl-lang__pop img, .tkl-sheet__langs img { width: 18px; height: auto; flex: none; }

/* Mobile sheet */
.tkl-sheet { position: fixed; inset: 0; z-index: 60; }
.tkl-sheet__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(24, 12, 16, 0.5);
}
.tkl-sheet__panel {
  position: absolute;
  z-index: 2;                 /* above the scrim: a tap on a link navigates */
  left: 0; right: 0; bottom: 0;
  max-height: 82vh;
  overflow-y: auto;
  padding: var(--tkl-s5) clamp(16px, 5vw, 28px) calc(var(--tkl-s6) + env(safe-area-inset-bottom));
  background: var(--tkl-surface);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--tkl-shadow-lift);
}
.tkl-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tkl-s3);
  margin-bottom: var(--tkl-s4);
}
.tkl-sheet__title {
  font-family: var(--tkl-display);
  font-size: var(--tkl-t-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tkl-muted);
  margin: 0;
}
.tkl-sheet__links {
  list-style: none;
  padding: 0;
  margin: var(--tkl-s4) 0 0;
  border-top: 1px solid var(--tkl-hairline);
}
.tkl-sheet__links a {
  display: block;
  min-height: 44px;
  line-height: 44px;
  color: var(--tkl-muted);
  text-decoration: none;
  font-size: var(--tkl-t-sm);
}

/* Desktop-only hide, SCOPED — an unscoped .tkl-lang{display:none} at <=768px
   would also hide the language list inside the sheet. */
@media (max-width: 768px) {
  .tkl-header__actions .tkl-lang { display: none; }
}
@media (min-width: 769px) {
  .tkl-burger { display: none; }
  .tkl-sheet { display: none !important; }
}

/* --------------------------------------------------------------------------
   6. The reading column
   Zero-specificity rule on direct children; component rules always win.
   The gate is the ONLY exempt block.
   -------------------------------------------------------------------------- */
.tkl-entry { padding-block: var(--tkl-s7) var(--tkl-s8); }
.tkl-entry > :where(*:not(.tkl-gate)) {
  max-width: var(--tkl-col);
  margin-inline: auto;
}
/* Explicit re-centre at (0,2,1) for every classed block: WP core block CSS and
   any `[class]`-bearing reset would otherwise zero margin-inline and leave
   these left-aligned while the paragraphs stay centred (the recurring
   reading-column bug). Belt and braces on top of the :where() rule above. */
.tkl-entry > ol.tkl-steps,
.tkl-entry > ul.tkl-tips,
.tkl-entry > ul.tkl-chips,
.tkl-entry > figure.tkl-figure,
.tkl-entry > blockquote.tkl-pull,
.tkl-entry > h1.tkl-h1,
.tkl-entry > p.tkl-lede {
  max-width: var(--tkl-col);
  margin-inline: auto;
}

/* Body links: exclude buttons, or the accent colour lands on accent
   backgrounds and the label disappears. */
.tkl-entry a:not([class]) {
  color: var(--tkl-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   7. Typography — accent strategy 3: coloured headings + rules
   -------------------------------------------------------------------------- */
.tkl-h1 {
  font-family: var(--tkl-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 6.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-block: 0 var(--tkl-s4);   /* margin-block only — a margin shorthand
                                      would zero margin-inline and break the
                                      centred column. */
  color: var(--tkl-text);
}
.tkl-lede {
  font-size: var(--tkl-t-md);
  color: var(--tkl-text);
  margin-block: 0 var(--tkl-s5);
}
.tkl-entry h2 {
  font-family: var(--tkl-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 3.6vw, var(--tkl-t-xl));
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--tkl-ink);
  margin-block: var(--tkl-s8) var(--tkl-s4);
  padding-block-start: var(--tkl-s5);
  border-top: 1px solid var(--tkl-line);   /* the rule sits above the heading,
                                              never across the number */
}
.tkl-entry p { margin-block: 0 var(--tkl-s4); }
.tkl-entry > p:last-child { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   8. D-9 Orbit Badge age gate (exempt from the reading column)
   -------------------------------------------------------------------------- */
.tkl-gate {
  max-width: 62rem;
  margin-inline: auto;
  margin-block: var(--tkl-s7) var(--tkl-s8);
  padding-top: var(--tkl-s7);   /* room for the half-overlapping badge */
}
.tkl-gate__card {
  position: relative;
  background: var(--tkl-card);
  border: 1px solid var(--tkl-hairline);
  border-radius: var(--tkl-radius);
  box-shadow: var(--tkl-shadow);
  padding: var(--tkl-s8) clamp(20px, 5vw, 56px) var(--tkl-s7);
  text-align: center;
}

/* The badge half-overlaps the card's top edge. The bg-coloured ring cuts it
   cleanly out of the border. */
.tkl-gate__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tkl-accent);
  color: var(--tkl-on-accent);
  box-shadow: 0 0 0 8px var(--tkl-bg);
}
.tkl-gate__badge-text {
  font-family: var(--tkl-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  z-index: 2;
}
.tkl-gate__badge-ring {
  position: absolute;
  inset: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
}
/* Three dots on their own orbits — the gate's single moving decoration. */
.tkl-gate__badge-orbit {
  position: absolute;
  inset: -13px;
  border-radius: 50%;
}
.tkl-gate__badge-orbit i {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--tkl-accent2);
  display: block;
}
.tkl-gate__badge-orbit--a { animation: tkl-orbit 11s linear infinite; }
.tkl-gate__badge-orbit--b { animation: tkl-orbit 17s linear infinite reverse; }
.tkl-gate__badge-orbit--c { animation: tkl-orbit 23s linear infinite; }
.tkl-gate__badge-orbit--b i { top: auto; bottom: -3px; background: var(--tkl-accent); }
.tkl-gate__badge-orbit--c i { top: 50%; left: -3px; margin-top: -3.5px; opacity: .8; }
@keyframes tkl-orbit { to { transform: rotate(360deg); } }

.tkl-gate__over {
  font-family: var(--tkl-display);
  font-size: var(--tkl-t-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tkl-ink);
  margin: 0 0 var(--tkl-s3);
}
.tkl-gate__q {
  font-family: var(--tkl-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 4.4vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--tkl-text);
  margin-block: 0 var(--tkl-s3);
}
.tkl-gate__note {
  max-width: 34rem;
  margin-inline: auto;
  margin-block: 0 var(--tkl-s5);
  color: var(--tkl-muted);
  font-size: var(--tkl-t-sm);
}

/* Functional variant 4 — a CSS micro-interaction (the arrow slides).
   The button stays a plain link: no JS, no redirect. */
.tkl-gate__go {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--tkl-s2);
  min-height: 52px;
  padding: 0 var(--tkl-s6);
  border-radius: var(--tkl-radius-sm);
  background: var(--tkl-accent);
  background-image: none;
  color: var(--tkl-on-accent);
  font-family: var(--tkl-display);
  font-weight: 600;
  font-size: var(--tkl-t-base);
  letter-spacing: -0.01em;
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.tkl-gate__go::after {
  content: "";
  width: 0;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg) translateX(0);
  width: 8px;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.tkl-gate__go:hover { box-shadow: var(--tkl-shadow-lift); transform: translateY(-2px); }
.tkl-gate__go:hover::after { transform: rotate(45deg) translate(3px, -3px); }

/* --------------------------------------------------------------------------
   9. H-9 illustration (aurora render)
   -------------------------------------------------------------------------- */
.tkl-figure { margin-block: var(--tkl-s6); }
.tkl-illus { width: 100%; height: auto; display: block; border-radius: var(--tkl-radius); }
.tkl-illus__bg { fill: var(--tkl-surface); stroke: var(--tkl-hairline); stroke-width: 1; }
.tkl-illus__stopA0 { stop-color: var(--tkl-accent); stop-opacity: .55; }
.tkl-illus__stopA1 { stop-color: var(--tkl-accent); stop-opacity: 0; }
.tkl-illus__stopB0 { stop-color: var(--tkl-accent2); stop-opacity: .7; }
.tkl-illus__stopB1 { stop-color: var(--tkl-accent2); stop-opacity: 0; }
.tkl-illus__bubble { fill: var(--tkl-card); stroke: var(--tkl-ink); stroke-width: 1.6; }
.tkl-illus__bubble--lg { fill: var(--tkl-card); }
.tkl-illus__bubble--md,
.tkl-illus__bubble--xs { fill: color-mix(in srgb, var(--tkl-accent2) 26%, var(--tkl-card)); }
.tkl-illus__bubble--sm { fill: var(--tkl-accent); stroke: var(--tkl-accent); }
.tkl-illus__bubble--tiny { fill: var(--tkl-card); opacity: .75; }
.tkl-illus__rule { stroke: var(--tkl-muted); stroke-width: 5; stroke-linecap: round; opacity: .5; }
.tkl-illus__rule--alt { stroke-width: 4; opacity: .42; }
.tkl-illus__dot { fill: var(--tkl-on-accent); }

/* --------------------------------------------------------------------------
   10. Blocks
   -------------------------------------------------------------------------- */
/* Gutenberg lists are .wp-block-list — a ul:not([class]) selector never
   catches them. */
.tkl-entry .wp-block-list {
  padding-left: 1.35em;
  margin-block: 0 var(--tkl-s5);
}
.tkl-entry .wp-block-list li { margin-block: 0 var(--tkl-s3); }
.tkl-entry .wp-block-list li::marker { color: var(--tkl-ink); }

.tkl-steps {
  counter-reset: none;
  padding-left: 1.5em;
}
.tkl-steps li::marker {
  font-family: var(--tkl-display);
  font-weight: 700;
  color: var(--tkl-ink);
}
.tkl-tips li strong { color: var(--tkl-ink); font-weight: 600; }

/* Chips — wrap INSIDE the reading column, same edges as the paragraphs. */
.tkl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tkl-s2);
  list-style: none;
  padding: 0;
  margin-block: 0 var(--tkl-s5);
  max-width: var(--tkl-col);
  margin-inline: auto;
}
.tkl-chips li {
  padding: var(--tkl-s2) var(--tkl-s4);
  border: 1px solid var(--tkl-line);
  border-radius: 999px;
  background: var(--tkl-surface);
  color: var(--tkl-text);
  font-size: var(--tkl-t-sm);
  line-height: 1.4;
}

.tkl-pull {
  margin-block: var(--tkl-s6);
  padding: var(--tkl-s5) clamp(20px, 4vw, 36px);
  background: var(--tkl-card);
  border: 1px solid var(--tkl-hairline);
  border-left: 3px solid var(--tkl-accent);
  border-radius: var(--tkl-radius);
  box-shadow: var(--tkl-shadow);
}
.tkl-pull p {
  font-family: var(--tkl-display);
  font-weight: 500;
  font-size: var(--tkl-t-md);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--tkl-text);
  margin: 0;
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.tkl-footer {
  border-top: 1px solid var(--tkl-line);
  background: color-mix(in srgb, var(--tkl-accent2) 12%, var(--tkl-bg));
  padding-block: var(--tkl-s6);
  font-size: var(--tkl-t-sm);
}
.tkl-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tkl-s3);
}
.tkl-footer__copy { color: var(--tkl-muted); margin: 0; }
.tkl-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tkl-s4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.tkl-footer nav a { color: var(--tkl-muted); text-decoration: none; }
.tkl-footer nav a:hover { color: var(--tkl-link); text-decoration: underline; }

/* --------------------------------------------------------------------------
   12. Cookie notice
   -------------------------------------------------------------------------- */
.tkl-cookie {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tkl-s4) + env(safe-area-inset-bottom));
  transform: translate(-50%, 140%);
  width: min(680px, calc(100vw - 2 * var(--tkl-s4)));
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tkl-s3) var(--tkl-s4);
  padding: var(--tkl-s4) var(--tkl-s5);
  background: var(--tkl-card);
  border: 1px solid var(--tkl-hairline);
  border-radius: var(--tkl-radius);
  box-shadow: var(--tkl-shadow-lift);
  z-index: 50;
  opacity: 0;
  transition: transform .4s cubic-bezier(.2, .8, .3, 1), opacity .4s ease;
}
.tkl-cookie.is-open { transform: translate(-50%, 0); opacity: 1; }
.tkl-cookie p { margin: 0; flex: 1 1 260px; font-size: var(--tkl-t-sm); color: var(--tkl-muted); }
.tkl-cookie a { color: var(--tkl-link); }
.tkl-cookie__ok {
  min-height: 44px;
  padding: 0 var(--tkl-s5);
  border: 0;
  border-radius: var(--tkl-radius-sm);
  background: var(--tkl-accent);
  color: var(--tkl-on-accent);
  font-family: var(--tkl-display);
  font-weight: 600;
  font-size: var(--tkl-t-sm);
  cursor: pointer;
  flex: none;
}

/* --------------------------------------------------------------------------
   13. F-3 back to top
   -------------------------------------------------------------------------- */
.tkl-top {
  position: fixed;
  right: var(--tkl-s4);
  bottom: calc(var(--tkl-s4) + env(safe-area-inset-bottom));
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--tkl-hairline);
  border-radius: 50%;
  background: var(--tkl-card);
  color: var(--tkl-text);
  box-shadow: var(--tkl-shadow);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 45;
}
.tkl-top.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tkl-top svg { width: 18px; height: 18px; display: block; }

/* Two fixed bottom overlays must never stack. Lifting the button clear of the
   cookie card doesn't work: the card wraps to ~185px on a narrow screen, so
   any fixed offset still lands inside it and the card silently swallows the
   tap (elementFromPoint returns .tkl-cookie, the button looks fine and simply
   never fires). The cookie is one tap to dismiss, so the button yields to it
   entirely instead. */
body.tkl-cookie-open .tkl-top {
  opacity: 0;
  transform: translateY(140%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   14. 404
   -------------------------------------------------------------------------- */
.tkl-404 { text-align: center; padding-block: var(--tkl-s8); }
.tkl-404__num {
  font-family: var(--tkl-display);
  font-weight: 700;
  font-size: clamp(4.5rem, 20vw, 9rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--tkl-ink);
  margin: 0 0 var(--tkl-s4);
}
.tkl-404 p { color: var(--tkl-muted); margin-block: 0 var(--tkl-s5); }
.tkl-btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--tkl-s6);
  border-radius: var(--tkl-radius-sm);
  background: var(--tkl-accent);
  background-image: none;
  color: var(--tkl-on-accent);
  font-family: var(--tkl-display);
  font-weight: 600;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   15. Inner pages
   -------------------------------------------------------------------------- */
.tkl-page { padding-block: var(--tkl-s7) var(--tkl-s8); }
.tkl-page > * { max-width: var(--tkl-col); margin-inline: auto; }
.tkl-page__title {
  font-family: var(--tkl-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-block: 0 var(--tkl-s5);
}

/* --------------------------------------------------------------------------
   16. Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .tkl-gate__card { padding-inline: var(--tkl-s4); }
  .tkl-footer__row { justify-content: center; text-align: center; }
}
@media (max-width: 400px) {
  .tkl-brand__name { font-size: 0.86rem; }
  .tkl-brand__icon { width: 26px; height: 26px; }
}

/* --------------------------------------------------------------------------
   17. Reduced motion — every decorative animation stops, nothing disappears
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tkl-aurora span { animation: none; }
  .tkl-aurora span:nth-child(1) { transform: translate3d(3vmax, 2vmax, 0) scale(1.06); }
  .tkl-aurora span:nth-child(2) { transform: translate3d(-4vmax, -3vmax, 0); }
  .tkl-gate__badge-orbit { animation: none; }
  .tkl-gate__badge-orbit--a { transform: rotate(28deg); }
  .tkl-gate__badge-orbit--b { transform: rotate(150deg); }
  .tkl-gate__badge-orbit--c { transform: rotate(255deg); }
  .tkl-gate__go, .tkl-cookie, .tkl-top, .tkl-lang__btn svg { transition: none; }
  .tkl-gate__go:hover { transform: none; }
}