/* krt.creatives — the one header + footer used on every page (home, library, media kit and the generated pages).
   Self-contained: works with or without Tailwind. Edit here once; bump ?v= on the <link> tags. */
:root { --sc-h: 94px; }                                   /* header height on phones (logo row + link row) */
@media (min-width: 768px) { :root { --sc-h: 64px; } }

.sc-head { position: fixed; top: 0; left: 0; right: 0; z-index: 40; font-family: 'Poppins', sans-serif; }
.sc-head::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: -22px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(246,246,248,.86) 0%, rgba(246,246,248,.7) 62%, rgba(246,246,248,0) 100%);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); }
.sc-in, .sc-foot-in { max-width: 1440px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 640px) { .sc-in, .sc-foot-in { padding: 0 48px; } }
@media (min-width: 1024px) { .sc-in, .sc-foot-in { padding: 0 80px; } }
@media (min-width: 1440px) { .sc-in, .sc-foot-in { max-width: min(92vw, 2000px); } }
.sc-in { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'logo act' 'nav nav'; align-items: center; }
@media (min-width: 768px) { .sc-in { height: 64px; grid-template-columns: 1fr auto 1fr; grid-template-areas: 'logo nav act'; } }

.sc-logo { grid-area: logo; height: 56px; display: inline-flex; align-items: center; width: fit-content; text-decoration: none; }
@media (min-width: 768px) { .sc-logo { height: auto; } }
.sc-logo .krt-logo { display: inline-flex; align-items: baseline; font-family: 'Poppins', sans-serif; font-weight: 800; line-height: 1; letter-spacing: -0.04em; text-transform: lowercase; white-space: nowrap; font-size: 20px; }
.sc-logo .k, .sc-logo .d { font-size: 1.12em; color: #222; }
.sc-logo .d { color: #E8B931; }
.sc-logo .c { font-size: .88em; color: #222; letter-spacing: -0.025em; }
@media (min-width: 640px) { .sc-logo .krt-logo { font-size: 23px; } }
@media (min-width: 1700px) { .sc-logo .krt-logo { font-size: clamp(23px, 1.3vw, 30px); } }

.sc-nav { grid-area: nav; display: flex; align-items: center; justify-content: space-between; height: 38px; margin: 0 -4px;
  border-top: 1px solid rgba(34,34,34,.07); }
@media (min-width: 768px) { .sc-nav { justify-content: center; gap: clamp(22px, 2.6vw, 40px); height: auto; margin: 0; border: 0; } }
.sc-link { position: relative; padding: 6px 4px; font-family: 'Montserrat', 'Poppins', sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: #222; text-decoration: none; white-space: nowrap; transition: opacity .2s ease; }
@media (min-width: 768px) { .sc-link { font-size: 12px; } }
@media (min-width: 1440px) { .sc-link { font-size: clamp(12px, .66vw, 15px); } }
.sc-link:hover { opacity: .55; }
@media (max-width: 767px) { .sc-link[data-page="home"] { display: none; } }   /* phones: the logo is the home link */
@media (max-width: 420px) { .sc-link { letter-spacing: .06em; } }                         /* small phones: the four links keep clear gaps */
@media (max-width: 340px) { .sc-link { font-size: 9.5px; letter-spacing: .03em; padding: 6px 2px; } }
.sc-link[aria-current="page"] { font-weight: 700; }
.sc-link[aria-current="page"]::after { content: ''; position: absolute; left: 50%; bottom: -2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #E8B931; }

.sc-act { grid-area: act; justify-self: end; display: flex; align-items: center; }
.sc-collab { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; text-decoration: none;
  font: 700 11px/1 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #222;
  background: linear-gradient(180deg, #F2CB52 0%, #E8B931 55%, #D9A920 100%); border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 18px -6px rgba(232,185,49,.75); transition: transform .2s ease, box-shadow .2s ease; }
.sc-collab:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 24px -8px rgba(232,185,49,.9); }

/* content starts below the fixed header */
.sc-main { padding-top: calc(var(--sc-h) + 12px) !important; }
@media (max-width: 767px) { #heroStage { padding-top: calc(var(--sc-h) + 18px) !important; } }

/* ---------- footer ---------- */
.sc-foot { background: #0B0B0D; color: #fff; border-top: 1px solid rgba(255,255,255,.06); font-family: 'Poppins', sans-serif; }
.sc-foot-in { padding-top: clamp(40px, 4.5vw, 56px); padding-bottom: 24px; }
.sc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
@media (min-width: 1024px) { .sc-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sc-h { margin: 0 0 16px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.sc-a { display: block; width: fit-content; padding: 5px 0; font-size: 14px; font-weight: 500; text-align: left; color: rgba(255,255,255,.82); text-decoration: none;
  background: none; border: 0; font-family: inherit; cursor: pointer; transition: color .2s ease, transform .2s ease; }
.sc-a:hover { color: #E8B931; transform: translateX(3px); }
.sc-base { margin-top: 40px; display: flex; flex-direction: column; gap: 8px; font-size: 11.5px; color: rgba(255,255,255,.4); }
.sc-base p { margin: 0; }
.sc-base a { color: inherit; text-decoration: none; transition: color .2s; }
.sc-base a:hover { color: #fff; }
@media (min-width: 640px) { .sc-base { flex-direction: row; align-items: center; justify-content: space-between; } }
@media print { .sc-head, .sc-foot { display: none !important; } }

/* ---------- speed: live blur only where it shows ----------
   Buttons, pills and cards sit on the plain light page, where a live background blur looks the same as none
   but makes the browser re-blur them on every scroll frame. The header, side drawer and pop-ups keep their blur. */
html :is(.glass, .glass-dark, .glass-yellow, .cr-card):not(.glass-panel) { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- yellow dot cursor (mouse/trackpad only; phones keep normal touch) ----------
   It is the computer's own cursor with a yellow-dot picture, so it never lags behind the mouse.
   Dot = normal · ring = something you can click · play = the home-page film player · text boxes keep the I-beam. */
@media (hover: hover) and (pointer: fine) {
  html, html * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='5.5' fill='%23E8B931' stroke='%23222' stroke-opacity='.4'/%3E%3C/svg%3E") 12 12, auto !important;
    cursor: -webkit-image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5.5' fill='%23E8B931' stroke='%23222' stroke-opacity='.4' stroke-width='.8'/%3E%3C/svg%3E") 2x) 12 12, auto !important;
  }
  :is(a[href], button:not(:disabled), [role="button"], [role="switch"], [role="tab"], label, summary, select, [data-sd], [data-go], [onclick], .lift, .cursor-pointer),
  :is(a[href], button:not(:disabled), [role="button"], [role="switch"], [role="tab"], label, summary, select, [data-sd], [data-go], [onclick], .lift, .cursor-pointer) * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='12' fill='%23E8B931' fill-opacity='.28' stroke='%23E8B931' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='13.2' fill='none' stroke='%23222' stroke-opacity='.22' stroke-width='.7'/%3E%3Ccircle cx='16' cy='16' r='2.6' fill='%23E8B931'/%3E%3C/svg%3E") 16 16, pointer !important;
    cursor: -webkit-image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='%23E8B931' fill-opacity='.28' stroke='%23E8B931' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='13.2' fill='none' stroke='%23222' stroke-opacity='.22' stroke-width='.7'/%3E%3Ccircle cx='16' cy='16' r='2.6' fill='%23E8B931'/%3E%3C/svg%3E") 2x) 16 16, pointer !important;
  }
  .cn-stage.is-clickable, .cn-stage.is-clickable * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23E8B931' stroke='%23222' stroke-opacity='.3'/%3E%3Cpath d='M13 10.5v11l9-5.5z' fill='%23222'/%3E%3C/svg%3E") 16 16, pointer !important;
    cursor: -webkit-image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23E8B931' stroke='%23222' stroke-opacity='.3' stroke-width='.8'/%3E%3Cpath d='M13 10.5v11l9-5.5z' fill='%23222'/%3E%3C/svg%3E") 2x) 16 16, pointer !important;
  }
  .cn-stage.is-clickable :is(a, button), .cn-stage.is-clickable :is(a, button) * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='12' fill='%23E8B931' fill-opacity='.28' stroke='%23E8B931' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='13.2' fill='none' stroke='%23222' stroke-opacity='.22' stroke-width='.7'/%3E%3Ccircle cx='16' cy='16' r='2.6' fill='%23E8B931'/%3E%3C/svg%3E") 16 16, pointer !important;
    cursor: -webkit-image-set(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='%23E8B931' fill-opacity='.28' stroke='%23E8B931' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='13.2' fill='none' stroke='%23222' stroke-opacity='.22' stroke-width='.7'/%3E%3Ccircle cx='16' cy='16' r='2.6' fill='%23E8B931'/%3E%3C/svg%3E") 2x) 16 16, pointer !important;
  }
  :is(input:not([type=button],[type=submit],[type=reset],[type=checkbox],[type=radio],[type=range],[type=color],[type=file]), textarea, [contenteditable=""], [contenteditable="true"]) { cursor: text !important; }
}
.krt-pop { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 2147483647; contain: layout style; }
.krt-pop { width: 0; height: 0; }
.krt-pop i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #E8B931;
  box-shadow: 0 0 0 1px rgba(34,34,34,.2); animation: krt-pop .6s cubic-bezier(.2,.7,.3,1) forwards; }
.krt-pop b { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #E8B931;
  animation: krt-ring .5s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes krt-pop { 0% { transform: rotate(var(--a)) translateX(4px) scale(1); opacity: 1; }
  55% { opacity: 1; }
  100% { transform: rotate(var(--a)) translateX(24px) scale(.35); opacity: 0; } }
@keyframes krt-ring { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .krt-pop i { display: none; } }
@media print { .krt-pop { display: none !important; } }