/* ==========================================================================
   User homepage styles (site.css)
   Contract: <body class="us t-{slug}"> with inline vars on .us:
   --bg --bg1 --bg2 --text --accent --on-accent --fh --fb
   Order: base, components, animations, themes, reduced motion.
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

.us {
  /* Surface tokens (themes override). Every pair below meets WCAG AA. */
  --surface: #ffffff;
  --on-surface: #111111;
  --line: color-mix(in srgb, var(--on-surface) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--on-surface) 55%, transparent);
  --bw: 1px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 10px 30px -12px rgba(0, 0, 0, .18);
  --pad: clamp(18px, 3.5vw, 28px);
  --gap: clamp(14px, 2.5vw, 22px);
  --btn-radius: 999px;
  --btn-shadow: none;
  --btn-bw: 2px;
  --nav-bg: var(--surface);
  --nav-fg: var(--on-surface);
  --input-bg: var(--surface);
  --h-weight: 700;
  --h-transform: none;
  --h-spacing: -0.01em;
  --sec-pad: clamp(40px, 7vw, 84px);
  --focus: var(--text);

  margin: 0;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  background: var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--fb);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

.us h1, .us h2, .us h3, .us h4 {
  font-family: var(--fh);
  font-weight: var(--h-weight);
  text-transform: var(--h-transform);
  letter-spacing: var(--h-spacing);
  line-height: 1.15;
  margin: 0 0 .5em;
}
.us img { max-width: 100%; height: auto; display: block; }
.us a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.us a:hover { text-decoration-thickness: 3px; }
.us :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.us ::selection { background: var(--accent); color: var(--on-accent); }

/* Elements that sit on a surface use the surface text colour for focus rings. */
.box, .card, .quote, .cta, .comment, .comment-form, .lock, .notice, .react { --focus: var(--on-surface); }
.us-nav { --focus: var(--nav-fg); }

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 20px); }

.skip {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  padding: 12px 18px; background: var(--accent); color: var(--on-accent) !important;
  font-weight: 700; border-radius: 8px; text-decoration: none;
}
.skip:focus { top: 8px; }

.hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

.us-preview-badge {
  position: fixed; right: 12px; bottom: 12px; z-index: 60; pointer-events: none;
  padding: 6px 12px; border-radius: 999px; background: #111; color: #fff;
  font: 700 .75rem/1.2 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

/* ---------- Navigation ---------- */
.us-nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--nav-bg); color: var(--nav-fg);
  border-bottom: var(--bw) solid var(--line);
}
.us-nav .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding-block: 6px; }
.us-brand {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--fh); font-weight: 700; font-size: 1.15rem; text-decoration: none;
}
.us-nav nav { flex: 0 1 auto; min-width: 0; }
.us-nav ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.us-nav li a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: var(--btn-radius); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.us-nav li a:hover { background: color-mix(in srgb, var(--nav-fg) 10%, transparent); }
.us-nav li a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
@media (max-width: 560px) {
  .us-nav .wrap { justify-content: center; text-align: center; }
  .us-nav ul { justify-content: center; }
  .us-nav li a { padding: 0 10px; }
}

/* ---------- Sections ---------- */
.us-main { display: block; }
.sec { padding-block: var(--sec-pad); }
.sec + .sec { padding-top: calc(var(--sec-pad) * .6); }
.sec-heading, .sec-text, .sec-button, .sec-divider { padding-block: 14px !important; }
.sec-spacer { padding-block: 0 !important; }
.sec-title { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: clamp(18px, 3vw, 30px) !important; }

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

/* ---------- Hero ---------- */
.hero { display: grid; gap: clamp(24px, 5vw, 48px); align-items: center; padding-block: clamp(12px, 5vw, 48px); }
.hero-title { font-size: clamp(2.2rem, 8vw, 4.6rem); line-height: 1.05 !important; margin-bottom: .35em !important; }
.hero-sub { font-size: clamp(1.05rem, 2.2vw, 1.3rem); max-width: 58ch; margin: 0 0 1.6em; opacity: .9; }
.hero-center { text-align: center; }
.hero-center .hero-sub { margin-inline: auto; }
.hero-left { text-align: left; }
.hero-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
@media (min-width: 820px) {
  .hero.has-img { grid-template-columns: 1.1fr 1fr; }
  .hero.has-img.hero-center .hero-text { text-align: center; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.5em;
  background: var(--accent); color: var(--on-accent);
  border: var(--btn-bw) solid var(--accent); border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
  font: inherit; font-weight: 700; line-height: 1.2; text-align: center;
  text-decoration: none !important; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active { transform: translateY(0); }
.btn[disabled] { cursor: not-allowed; filter: grayscale(.4); transform: none; }
.btn-outline { background: transparent; color: inherit; }
.btn-outline:hover { background: var(--accent); color: var(--on-accent); }
.btn-lg { min-height: 56px; padding: .85em 2em; font-size: 1.15rem; }
.btn-block { display: flex; width: 100%; }

/* ---------- Prose ---------- */
.prose { max-width: 70ch; }
.prose.align-center { margin-inline: auto; }
.prose.align-right { margin-left: auto; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 1em; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.4em; }
.prose li { margin: .3em 0; }
.prose li::marker { color: inherit; }
.prose h2 { font-size: 1.6rem; margin-top: 1.4em; }
.prose h3 { font-size: 1.3rem; margin-top: 1.3em; }
.prose h4 { font-size: 1.1rem; margin-top: 1.2em; }
.prose blockquote { margin: 1.2em 0; padding: .3em 0 .3em 1.1em; border-left: 4px solid var(--accent); font-style: italic; }
.prose mark { background: var(--accent); color: var(--on-accent); padding: 0 .25em; border-radius: 3px; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; padding: .1em .35em; border-radius: 4px; background: color-mix(in srgb, currentColor 10%, transparent); }
.prose img { border-radius: var(--radius-sm); margin: 1em 0; }
.prose hr { border: 0; height: 1px; background: color-mix(in srgb, currentColor 25%, transparent); margin: 1.5em 0; }

.box {
  background: var(--surface); color: var(--on-surface);
  border: var(--bw) solid var(--line); border-radius: var(--radius);
  padding: var(--pad); box-shadow: var(--shadow);
}

/* ---------- About ---------- */
.about.has-img { display: grid; gap: clamp(20px, 4vw, 40px); align-items: start; }
.about-img { width: 100%; max-width: 360px; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (min-width: 720px) { .about.has-img { grid-template-columns: minmax(200px, 320px) 1fr; } }

/* ---------- Cards ---------- */
.cards { display: grid; gap: var(--gap); }
.cards-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.cards-list { grid-template-columns: 1fr; max-width: 760px; }
.card {
  position: relative; display: flex; flex-direction: column; gap: .6em;
  background: var(--surface); color: var(--on-surface);
  border: var(--bw) solid var(--line); border-radius: var(--radius);
  padding: var(--pad); box-shadow: var(--shadow);
}
.card h3 { font-size: 1.2rem; margin: 0; }
.card p { margin: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5em .8em; }
.cards-list .card-head { align-items: center; }
.price {
  display: inline-block; padding: .2em .75em; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-weight: 700; font-size: .9rem; white-space: nowrap;
}
.card-link {
  align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent);
}

/* ---------- Testimonials ---------- */
.quotes { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.quote {
  margin: 0; background: var(--surface); color: var(--on-surface);
  border: var(--bw) solid var(--line); border-radius: var(--radius);
  padding: var(--pad); box-shadow: var(--shadow);
}
.quote blockquote { margin: 0 0 1em; font-size: 1.1rem; }
.quote blockquote::before {
  content: "\201C"; display: block; width: 40px; height: 40px; margin-bottom: .5em;
  border-radius: 50%; background: var(--accent); color: var(--on-accent);
  font: 700 2rem/1.45 Georgia, serif; text-align: center;
}
.quote figcaption span { display: block; font-size: .9rem; opacity: .8; }

/* ---------- Gallery ---------- */
.gallery figure { margin: 0; }
.gallery img { width: 100%; border-radius: var(--radius-sm); }
.gallery figure a { display: block; border-radius: var(--radius-sm); }
.gallery figure a img { transition: transform .25s ease, filter .25s ease; }
.gallery figure a:hover img { filter: brightness(1.05); transform: scale(1.015); }
.gallery figcaption { padding: .45em .2em 0; font-size: .9rem; opacity: .85; }
.gallery-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.gallery-grid img { aspect-ratio: 1; object-fit: cover; }
.gallery-masonry { columns: 2 160px; column-gap: 12px; }
.gallery-masonry figure { break-inside: avoid; margin-bottom: 12px; }
@media (min-width: 720px) { .gallery-masonry { columns: 3; } }
.gallery-bento { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; grid-auto-flow: dense; }
.gallery-bento figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.gallery-bento figure a { min-height: 0; height: 100%; }
.gallery-bento img { height: 100%; object-fit: cover; }
.gallery-bento figure:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
.gallery-bento figure:nth-child(6n+4) { grid-row: span 2; }
.gallery-bento figure:nth-child(6n+6) { grid-column: span 2; }
@media (min-width: 720px) {
  .gallery-bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; }
}

/* ---------- Embeds ---------- */
.embeds { display: grid; gap: var(--gap); }
.embed {
  position: relative; width: 100%; max-width: 100%; margin-inline: auto; overflow: hidden;
  border-radius: var(--radius); background: color-mix(in srgb, var(--text) 8%, transparent);
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.embed[style*="height:"] { max-width: 720px; }
.embed[style*="aspect-ratio:9/16"] { max-width: 380px; }

/* ---------- Links (link-in-bio) ---------- */
.linklist { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; display: grid; gap: 12px; }
.linklist .btn { min-height: 56px; }

/* ---------- Call to action ---------- */
.cta {
  text-align: center; background: var(--surface); color: var(--on-surface);
  border: var(--bw) solid var(--line); border-radius: var(--radius);
  padding: clamp(28px, 6vw, 56px) var(--pad); box-shadow: var(--shadow);
}
.cta p { max-width: 52ch; margin: 0 auto 1.4em; }
.cta .embed { margin-top: 28px; }

/* ---------- Contact ---------- */
.contact { display: grid; gap: 22px; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.contact-list li { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.contact-list a { display: inline-flex; align-items: center; min-height: 44px; }
.ci {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface); border: var(--bw) solid var(--line); font-size: 1.1rem;
}
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 2px solid var(--accent); border-radius: 999px;
  font-weight: 600; text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}
.chip:hover { background: var(--accent); color: var(--on-accent); }

/* ---------- Forms (comments, lock) ---------- */
.comment-form, .lock {
  display: grid; gap: 14px; max-width: 640px;
  background: var(--surface); color: var(--on-surface);
  border: var(--bw) solid var(--line); border-radius: var(--radius);
  padding: var(--pad); box-shadow: var(--shadow);
}
.comment-form { margin-bottom: 28px; }
.lock { max-width: 460px; margin: clamp(20px, 8vh, 80px) auto; }
.lock p { margin: 0; }
.comment-form label, .lock label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.comment-form input, .comment-form textarea, .lock input {
  width: 100%; min-height: 48px; padding: .7em .9em;
  font: inherit; font-weight: 400;
  background: var(--input-bg); color: var(--on-surface);
  border: 2px solid var(--line-strong); border-radius: var(--radius-sm);
}
.comment-form textarea { min-height: 110px; resize: vertical; }
.comment-form input:focus-visible, .comment-form textarea:focus-visible, .lock input:focus-visible { border-color: var(--on-surface); }
.comment-form .btn, .lock .btn { justify-self: start; }

/* ---------- Comments ---------- */
.comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.comment {
  background: var(--surface); color: var(--on-surface);
  border: var(--bw) solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; box-shadow: var(--shadow);
}
.comment.reply { margin-left: clamp(18px, 6vw, 52px); border-left: 4px solid var(--accent); }
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .9rem; }
.comment-meta time { opacity: .8; }
.comment p { margin: .35em 0 0; }
.badge {
  display: inline-block; padding: .1em .55em; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.notice {
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--on-surface);
  border: var(--bw) solid var(--line); border-left: 5px solid var(--accent);
}
.notice-error { background: #fef2f2; color: #7f1d1d; border-color: #fecaca; border-left-color: #b91c1c; }
.muted { opacity: .8; }

/* ---------- Likes (.reactions/.react are the shared button styles) ---------- */
.like { font-weight: 600; }
.like b { padding-left: 8px; margin-left: 2px; border-left: 1px solid currentColor; }
.like.on span { animation: like-pop .3s ease; }
@keyframes like-pop { 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .like.on span { animation: none; } }
.reactions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.us-main > .reactions { max-width: 1040px; margin: 0 auto; padding: 8px 20px 48px; }
.reactions-sm { justify-content: flex-start; gap: 6px; margin-top: 10px; }
.react {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0 14px;
  background: var(--surface); color: var(--on-surface);
  border: 2px solid var(--line-strong); border-radius: 999px;
  font: inherit; cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.react span { font-size: 1.25rem; line-height: 1; }
.react b { font-size: .9rem; font-weight: 700; }
.react b:empty { display: none; }
.react:hover:not([disabled]) { transform: translateY(-2px); border-color: var(--accent); }
.react.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.react[disabled] { cursor: default; border-style: dashed; }
.reactions-sm .react { padding: 0 10px; }
.reactions-sm .react span { font-size: 1.05rem; }

/* ---------- Heading, divider, spacer ---------- */
.heading { margin: 0 !important; }
h1.heading { font-size: clamp(2.2rem, 6.5vw, 4rem); }
h2.heading { font-size: clamp(1.8rem, 4.5vw, 3rem); }
h3.heading { font-size: clamp(1.4rem, 3vw, 2rem); }

.divider { border: 0; margin: clamp(10px, 2vw, 22px) auto; }
.divider-line { height: 2px; background: color-mix(in srgb, var(--text) 30%, transparent); }
.divider-dots {
  height: 12px; width: min(240px, 70%);
  background: radial-gradient(circle, var(--accent) 0 4px, transparent 4.5px) center / 24px 12px repeat-x;
}
.divider-wave {
  height: 12px; width: min(360px, 85%);
  background:
    linear-gradient(135deg, var(--accent) 25%, transparent 25%) -12px 0 / 24px 24px,
    linear-gradient(225deg, var(--accent) 25%, transparent 25%) -12px 0 / 24px 24px;
}
.divider-stars { height: auto; text-align: center; overflow: visible; color: inherit; }
.divider-stars::before { content: "\2726\00a0\00a0\00a0\2726\00a0\00a0\00a0\2726"; font-size: 1.2rem; opacity: .85; }

.spacer-s { height: 16px; }
.spacer-m { height: 44px; }
.spacer-l { height: 96px; }

/* ---------- Footer & ads ---------- */
.us-foot {
  padding: 28px 0 36px; text-align: center; font-size: .875rem;
  border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}
.us-foot p { margin: 0; opacity: .85; }
.us-foot a { display: inline-block; padding: 12px 4px; }
.us-foot .report { text-decoration-style: dotted; }
.ad { max-width: 728px; margin: 0 auto 16px; text-align: center; font-size: .85rem; overflow: hidden; }
.ad a { display: inline-flex; align-items: center; min-height: 44px; }

/* ==========================================================================
   Text animations (VIP)
   ========================================================================== */
.fx { display: inline-block; max-width: 100%; }
.fx-wave span, .fx-bounce span, .fx-spin span { display: inline-block; animation-delay: calc(var(--i) * 60ms); }

.fx-typewriter { animation: fx-type calc(var(--n) * 75ms) steps(var(--n)) .2s both; }
.fx-typewriter::after { content: ""; display: inline-block; width: .08em; height: 1em; margin-left: .06em; vertical-align: -.1em; background: currentColor; animation: fx-caret 1s steps(1) infinite; }
@keyframes fx-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fx-caret { 50% { opacity: 0; } }

.fx-glitch { position: relative; }
.fx-glitch::before, .fx-glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.fx-glitch::before { text-shadow: -2px 0 #ff2a6d; animation: fx-glitch-a 2.6s steps(1) infinite; clip-path: inset(0 0 60% 0); }
.fx-glitch::after { text-shadow: 2px 0 #05d9e8; animation: fx-glitch-b 2.2s steps(1) infinite; clip-path: inset(55% 0 0 0); }
@keyframes fx-glitch-a { 0%, 86%, 100% { transform: none; clip-path: inset(0 0 100% 0); } 88% { transform: translate(-3px, -1px); clip-path: inset(10% 0 55% 0); } 92% { transform: translate(3px, 1px); clip-path: inset(40% 0 30% 0); } }
@keyframes fx-glitch-b { 0%, 80%, 100% { transform: none; clip-path: inset(100% 0 0 0); } 83% { transform: translate(3px, 1px); clip-path: inset(60% 0 10% 0); } 89% { transform: translate(-2px, 0); clip-path: inset(25% 0 50% 0); } }

.fx-neon { text-shadow: 0 0 2px currentColor, 0 0 10px var(--accent), 0 0 24px var(--accent); animation: fx-neon 2.4s ease-in-out infinite alternate; }
@keyframes fx-neon { to { text-shadow: 0 0 2px currentColor, 0 0 16px var(--accent), 0 0 40px var(--accent); } }

.fx-wave span { animation: fx-wave 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * 60ms); }
@keyframes fx-wave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-.22em); } }
.fx-bounce span { animation: fx-bounce 1.4s cubic-bezier(.3, 1.6, .5, 1) infinite; animation-delay: calc(var(--i) * 60ms); }
@keyframes fx-bounce { 0%, 50%, 100% { transform: translateY(0) scale(1); } 20% { transform: translateY(-.3em) scale(1.08, .94); } 35% { transform: translateY(0) scale(.96, 1.04); } }
.fx-spin span { animation: fx-spin 4s ease-in-out infinite; animation-delay: calc(var(--i) * 60ms); }
@keyframes fx-spin { 0%, 25%, 100% { transform: rotateY(0); } 50% { transform: rotateY(360deg); } }

.fx-rainbow { animation: fx-rainbow 4s linear infinite; }
@keyframes fx-rainbow {
  0%, 100% { text-shadow: .06em .06em 0 #ff4d4d; } 17% { text-shadow: .06em .06em 0 #ff9f1c; }
  33% { text-shadow: .06em .06em 0 #ffe14d; } 50% { text-shadow: .06em .06em 0 #2ec4b6; }
  67% { text-shadow: .06em .06em 0 #3a86ff; } 83% { text-shadow: .06em .06em 0 #b14dff; }
}
.fx-gradient {
  background: linear-gradient(90deg, var(--accent), var(--bg2), var(--accent), var(--bg1), var(--accent)) 0 100% / 300% .2em no-repeat;
  padding-bottom: .1em; animation: fx-grad 5s linear infinite;
}
@keyframes fx-grad { to { background-position: 150% 100%; } }
.fx-shake { animation: fx-shake 3.5s ease-in-out infinite; }
@keyframes fx-shake { 0%, 84%, 100% { transform: none; } 86%, 90%, 94% { transform: translateX(-4px) rotate(-1deg); } 88%, 92%, 96% { transform: translateX(4px) rotate(1deg); } }
.fx-float { animation: fx-float 5s ease-in-out infinite; }
@keyframes fx-float { 50% { transform: translateY(-10px); } }
.fx-flicker { animation: fx-flicker 5s linear infinite; text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
@keyframes fx-flicker { 0%, 40%, 44%, 100% { opacity: 1; } 42% { opacity: .55; text-shadow: none; } 70% { opacity: 1; } 71% { opacity: .6; text-shadow: none; } 72% { opacity: 1; } }
.fx-fadeup { animation: fx-fadeup .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes fx-fadeup { from { opacity: 0; transform: translateY(.6em); } }
.fx-zoom { animation: fx-zoom .8s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes fx-zoom { from { opacity: 0; transform: scale(.6); } }
.fx-blur { animation: fx-blur 1.1s ease-out both; }
@keyframes fx-blur { from { opacity: 0; filter: blur(14px); letter-spacing: .12em; } }
.fx-outline { -webkit-text-stroke: .035em currentColor; -webkit-text-fill-color: transparent; animation: fx-outline 4s ease-in-out infinite alternate; }
@keyframes fx-outline { 60%, 100% { -webkit-text-fill-color: currentColor; } }
.fx-marquee { display: block; overflow: hidden; white-space: nowrap; animation: fx-marquee 14s linear infinite; }
@keyframes fx-marquee { from { text-indent: 100%; } to { text-indent: -100%; } }

/* ==========================================================================
   Themes
   ========================================================================== */

/* Shared helper for fixed decorative overlays drawn above var(--bg) and below content. */
.t-futuristic::before, .t-maximalism::before, .t-retrofuturism::before, .t-grunge::before, .t-y2k::before,
.t-vibrant::before, .t-handdrawn::before, .t-vaporwave::before, .t-vaporwave::after, .t-cyberpunk::before,
.t-glass::before, .t-artdeco::before, .t-terminal::before, .t-kawaii::before, .t-trendy::before, .t-retro::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
}

/* --- Retro: 70s sunset stripes, rounded --- */
.t-retro { --surface: #fff4e2; --on-surface: #3a1a0c; --line: #3a1a0c; --line-strong: #3a1a0c; --bw: 3px; --radius: 22px; --shadow: 6px 6px 0 #3a1a0c; --btn-shadow: 0 4px 0 #3a1a0c; }
.t-retro::before { position: absolute; top: auto; height: 34px; background: linear-gradient(#f7b538 0 33%, #e8692f 33% 66%, #b4361e 66%); opacity: .9; }
.t-retro .us-foot { padding-bottom: 72px; }
.t-retro .sec-title::after { content: ""; display: block; width: 96px; height: 12px; margin-top: 10px; border-radius: 6px; background: linear-gradient(#f7b538 0 33%, #e8692f 33% 66%, #b4361e 66%); }
.t-retro .align-center .sec-title::after, .t-retro .cta .sec-title::after { margin-inline: auto; }
.t-retro .hero-media img { border-radius: 999px 999px 24px 24px; border: 3px solid #3a1a0c; }
.t-retro .btn { border-color: #3a1a0c; }

/* --- Trendy: pastel blobs, big friendly type --- */
.t-trendy { --surface: #ffffff; --on-surface: #22163a; --radius: 28px; --bw: 0px; --shadow: 0 24px 48px -24px color-mix(in srgb, var(--accent) 45%, transparent); --h-weight: 800; --h-spacing: -0.035em; --nav-bg: color-mix(in srgb, #fff 85%, transparent); }
.t-trendy::before { background: radial-gradient(40vmax 40vmax at 90% 0%, color-mix(in srgb, var(--bg2) 70%, transparent), transparent 70%), radial-gradient(35vmax 35vmax at 0% 100%, color-mix(in srgb, var(--bg1) 80%, transparent), transparent 70%); }
.t-trendy .us-nav { backdrop-filter: blur(12px); }
.t-trendy .hero-title { font-size: clamp(2.6rem, 10vw, 5.4rem); }
.t-trendy .card:hover { transform: translateY(-4px) rotate(-.5deg); transition: transform .2s ease; }

/* --- Futuristic: deep space, glowing edges --- */
.t-futuristic { --surface: #0b1030; --on-surface: #e6efff; --line: color-mix(in srgb, var(--accent) 55%, transparent); --line-strong: color-mix(in srgb, var(--accent) 80%, #fff); --radius: 6px; --radius-sm: 4px; --shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 28px -6px color-mix(in srgb, var(--accent) 55%, transparent); --h-transform: uppercase; --h-spacing: .06em; --btn-radius: 4px; --btn-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent); --nav-bg: #070b22; }
.t-futuristic::before { background: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%) 0 0 / 180px 180px, radial-gradient(1.5px 1.5px at 70% 60%, rgba(255, 255, 255, .8) 50%, transparent 51%) 0 0 / 240px 240px, radial-gradient(1px 1px at 40% 85%, rgba(255, 255, 255, .6) 50%, transparent 51%) 0 0 / 130px 130px; opacity: .6; }
.t-futuristic .sec-title::after { content: ""; display: block; width: 64px; height: 2px; margin-top: 12px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.t-futuristic .hero-media img { border: 1px solid var(--accent); box-shadow: 0 0 40px -6px var(--accent); }

/* --- Minimal: lots of air, nothing extra --- */
.t-minimal { --surface: transparent; --on-surface: var(--text); --line: color-mix(in srgb, var(--text) 14%, transparent); --line-strong: color-mix(in srgb, var(--text) 55%, transparent); --radius: 0px; --radius-sm: 0px; --shadow: none; --btn-radius: 0px; --nav-bg: var(--bg1); --nav-fg: var(--text); --input-bg: transparent; --h-weight: 600; --h-spacing: -0.02em; --sec-pad: clamp(56px, 10vw, 120px); }
.t-minimal .card, .t-minimal .quote { border-width: 1px 0 0; padding-inline: 0; }
.t-minimal .cta { border-width: 1px 0; }
.t-minimal .us-nav { border-bottom-color: transparent; }
.t-minimal .sec-title { font-size: clamp(1.2rem, 2.5vw, 1.5rem); letter-spacing: .02em; }
.t-minimal .quote blockquote::before { width: auto; height: auto; background: none; color: inherit; text-align: left; font-size: 2.6rem; line-height: 1; }

/* --- Modern: crisp cards, confident spacing --- */
.t-modern { --surface: #ffffff; --on-surface: #0f172a; --line: #e2e8f0; --line-strong: #64748b; --radius: 16px; --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 32px -12px rgba(15, 23, 42, .16); --btn-radius: 12px; --h-weight: 700; --h-spacing: -0.025em; }
.t-modern .card { transition: transform .2s ease, box-shadow .2s ease; }
.t-modern .card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 22px 44px -16px rgba(15, 23, 42, .25); }
.t-modern .sec-title { font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* --- Clean: white, calm, readable --- */
.t-clean { --surface: #ffffff; --on-surface: #1f2937; --line: #e5e7eb; --line-strong: #6b7280; --radius: 10px; --radius-sm: 8px; --shadow: none; --btn-radius: 8px; --h-weight: 600; --nav-bg: #ffffff; }
.t-clean .sec-title::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 10px; background: var(--accent); border-radius: 2px; }
.t-clean .align-center .sec-title::after, .t-clean .cta .sec-title::after { margin-inline: auto; }

/* --- Bold typography: huge uppercase headlines --- */
.t-bold { --surface: #111111; --on-surface: #fff200; --line: #111; --line-strong: #fff200; --bw: 0px; --radius: 0px; --radius-sm: 0px; --shadow: none; --btn-radius: 0px; --h-transform: uppercase; --h-spacing: 0; --h-weight: 400; --nav-bg: #111; --nav-fg: #fff; }
.t-bold .sec-title { font-size: clamp(2.6rem, 11vw, 6.5rem); line-height: .9; }
.t-bold .hero-title { font-size: clamp(3rem, 15vw, 9rem); line-height: .88 !important; }
.t-bold h1.heading { font-size: clamp(3rem, 13vw, 8rem); line-height: .9; }
.t-bold h2.heading { font-size: clamp(2.4rem, 10vw, 6rem); line-height: .9; }
.t-bold .btn { text-transform: uppercase; letter-spacing: .06em; }
.t-bold .card h3 { font-size: 1.6rem; }

/* --- Maximalism: pattern on pattern --- */
.t-maximalism { --surface: #fff7e0; --on-surface: #1a0a3d; --line: #1a0a3d; --line-strong: #1a0a3d; --bw: 4px; --radius: 26px 6px 26px 6px; --radius-sm: 12px; --shadow: 8px 8px 0 var(--accent); --btn-shadow: 4px 4px 0 #1a0a3d; --h-weight: 400; }
.t-maximalism::before { background: radial-gradient(color-mix(in srgb, var(--text) 12%, transparent) 2px, transparent 2.5px) 0 0 / 22px 22px, repeating-linear-gradient(45deg, transparent 0 40px, color-mix(in srgb, var(--bg2) 35%, transparent) 40px 52px); }
.t-maximalism .sec-title { display: inline-block; padding: .1em .45em; background: var(--accent); color: var(--on-accent); transform: rotate(-2deg); border: 4px solid #1a0a3d; }
.t-maximalism .card:nth-child(3n+1) { transform: rotate(-1deg); }
.t-maximalism .card:nth-child(3n+2) { transform: rotate(1deg); }
.t-maximalism .btn { border-color: #1a0a3d; }
.t-maximalism .hero-media img { border: 4px solid #1a0a3d; box-shadow: 12px 12px 0 var(--accent); }

/* --- Retrofuturism: atomic age optimism --- */
.t-retrofuturism { --surface: #fdf1d6; --on-surface: #1b1446; --line: #1b1446; --line-strong: #1b1446; --bw: 3px; --radius: 40px 40px 40px 10px; --radius-sm: 18px; --shadow: 0 10px 0 color-mix(in srgb, var(--accent) 85%, #000); --btn-shadow: 0 5px 0 #1b1446; --nav-bg: #1b1446; --nav-fg: #fdf1d6; }
.t-retrofuturism::before { background: radial-gradient(circle, rgba(255, 255, 255, .7) 0 1.5px, transparent 2px) 0 0 / 120px 120px, radial-gradient(circle, rgba(255, 255, 255, .45) 0 1px, transparent 1.5px) 60px 40px / 90px 90px; }
.t-retrofuturism .sec-title::before { content: "\2726 "; }
.t-retrofuturism .hero-media img { border-radius: 50% 50% 24px 24px / 40% 40% 24px 24px; border: 3px solid #1b1446; }
.t-retrofuturism .btn { border-color: #1b1446; }

/* --- Dark: elegant, soft glow --- */
.t-dark { --surface: #17171d; --on-surface: #ececf1; --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .5); --radius: 16px; --shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 18px 50px -20px color-mix(in srgb, var(--accent) 45%, transparent); --nav-bg: #111116; --btn-shadow: 0 8px 28px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.t-dark .card:hover, .t-dark .quote:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.t-dark .hero-media img { box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--accent) 60%, transparent); }

/* --- Grunge: photocopied zine, taped cards --- */
.t-grunge { --surface: #ece6d6; --on-surface: #1c1a17; --line: #1c1a17; --line-strong: #1c1a17; --bw: 2px; --radius: 2px; --radius-sm: 2px; --shadow: 3px 4px 0 rgba(0, 0, 0, .45); --btn-radius: 2px; --nav-bg: #ece6d6; --h-weight: 400; }
.t-grunge::before { background: repeating-radial-gradient(circle at 17% 32%, rgba(255, 255, 255, .04) 0 1px, transparent 1px 4px), repeating-radial-gradient(circle at 83% 71%, rgba(0, 0, 0, .12) 0 1px, transparent 1px 5px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); }
.t-grunge .card, .t-grunge .quote, .t-grunge .box, .t-grunge .cta { background-image: linear-gradient(170deg, rgba(0, 0, 0, .04), transparent 40%, rgba(0, 0, 0, .06)); }
.t-grunge .card:nth-child(odd), .t-grunge .quote:nth-child(odd) { transform: rotate(-1.4deg); }
.t-grunge .card:nth-child(even), .t-grunge .quote:nth-child(even) { transform: rotate(1.1deg); }
.t-grunge .card::before, .t-grunge .quote::before { content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 248, 210, .6); border: 1px solid rgba(0, 0, 0, .12); }
.t-grunge .quote { position: relative; }
.t-grunge .sec-title, .t-grunge .hero-title { transform: rotate(-1.5deg); text-shadow: 2px 2px 0 color-mix(in srgb, var(--text) 25%, transparent); }
.t-grunge .btn { border-color: #1c1a17; box-shadow: 3px 3px 0 #000; }
.t-grunge .hero-media img { filter: grayscale(1) contrast(1.3); transform: rotate(1.5deg); border: 6px solid #ece6d6; }

/* --- Y2K: chrome, bubbles, glossy --- */
.t-y2k { --surface: #ffffff; --on-surface: #2a1440; --line: #ffffff; --line-strong: #8a6fb0; --bw: 2px; --radius: 26px; --shadow: inset 0 2px 0 #fff, 0 10px 28px -10px rgba(110, 70, 190, .45); --btn-shadow: inset 0 -3px 6px rgba(0, 0, 0, .18), 0 6px 16px -6px rgba(0, 0, 0, .35); --nav-bg: #ffffff; }
.t-y2k::before { background: radial-gradient(circle, #fff 0 2px, transparent 2.5px) 10px 20px / 160px 160px, radial-gradient(circle, rgba(255, 255, 255, .8) 0 1.5px, transparent 2px) 90px 70px / 110px 110px; }
.t-y2k .card, .t-y2k .quote, .t-y2k .box, .t-y2k .cta, .t-y2k .comment-form { background-image: linear-gradient(180deg, #ffffff, #eef3ff); }
.t-y2k .btn { background-image: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .08) 50%, rgba(0, 0, 0, .06) 51%, transparent); border-color: rgba(255, 255, 255, .7); text-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 60%, transparent); }
.t-y2k .btn-outline { background-image: none; border-color: var(--accent); text-shadow: none; }
.t-y2k .sec-title, .t-y2k .hero-title { text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 3px 0 rgba(0, 0, 0, .12); }
.t-y2k .hero-media img { border-radius: 40px; border: 4px solid #fff; }

/* --- Neo-brutalism: thick borders, hard shadows --- */
.t-neobrutalism { --surface: #ffffff; --on-surface: #000000; --line: #000; --line-strong: #000; --bw: 3px; --radius: 8px; --radius-sm: 6px; --shadow: 6px 6px 0 #000; --btn-radius: 8px; --btn-shadow: 4px 4px 0 #000; --nav-bg: #fff; }
.t-neobrutalism .btn { border-color: #000; }
.t-neobrutalism .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; filter: none; }
.t-neobrutalism .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.t-neobrutalism .sec-title { display: inline-block; padding: .1em .45em; background: var(--accent); color: var(--on-accent); border: 3px solid #000; box-shadow: 4px 4px 0 #000; }
.t-neobrutalism .chip, .t-neobrutalism .react { border-color: #000; box-shadow: 3px 3px 0 #000; }
.t-neobrutalism .hero-media img, .t-neobrutalism .gallery img, .t-neobrutalism .about-img { border: 3px solid #000; box-shadow: 6px 6px 0 #000; }

/* --- High contrast: black, white, one sharp accent --- */
.t-highcontrast { --surface: #000000; --on-surface: #ffffff; --line: #ffffff; --line-strong: #ffffff; --bw: 3px; --radius: 0px; --radius-sm: 0px; --shadow: none; --btn-radius: 0px; --btn-bw: 3px; --nav-bg: #000; --nav-fg: #fff; }
.t-highcontrast :focus-visible { outline: 4px solid var(--focus) !important; outline-offset: 3px; box-shadow: 0 0 0 9px var(--accent); }
.t-highcontrast a { text-decoration-thickness: 3px; text-decoration-color: currentColor; }
.t-highcontrast .btn { border-color: var(--text); }
.t-highcontrast .card .btn, .t-highcontrast .cta .btn { border-color: #fff; }
.t-highcontrast .sec-title { border-bottom: 6px solid var(--accent); padding-bottom: .15em; display: inline-block; }

/* --- Vibrant: saturated, punchy --- */
.t-vibrant { --surface: #ffffff; --on-surface: #1a0033; --line: transparent; --line-strong: #6b4a8a; --radius: 24px; --shadow: 0 24px 50px -18px rgba(0, 0, 0, .45); --h-weight: 800; --h-spacing: -0.03em; --btn-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); }
.t-vibrant::before { background: radial-gradient(30vmax 30vmax at 85% 15%, color-mix(in srgb, var(--bg2) 60%, transparent), transparent 70%), radial-gradient(30vmax 30vmax at 10% 80%, color-mix(in srgb, var(--bg1) 60%, transparent), transparent 70%); }
.t-vibrant .card { border-top: 8px solid var(--accent); }
.t-vibrant .hero-title { font-size: clamp(2.6rem, 9vw, 5.2rem); }
.t-vibrant .hero-media img { border-radius: 32px; transform: rotate(2deg); }

/* --- Neumorphism: soft extruded plastic --- */
.t-neumorphism {
  --surface: var(--bg1); --on-surface: var(--text); --bw: 0px; --radius: 24px; --radius-sm: 14px;
  --nm-dark: color-mix(in srgb, var(--bg1) 78%, #000); --nm-light: color-mix(in srgb, var(--bg1) 55%, #fff);
  --shadow: 9px 9px 18px var(--nm-dark), -9px -9px 18px var(--nm-light);
  --btn-shadow: 5px 5px 12px var(--nm-dark), -5px -5px 12px var(--nm-light);
  --nav-bg: var(--bg1); --nav-fg: var(--text); --input-bg: var(--bg1);
}
.t-neumorphism .us-nav { border-bottom: 0; box-shadow: 0 6px 14px var(--nm-dark); }
.t-neumorphism .btn-outline { box-shadow: var(--btn-shadow); }
.t-neumorphism .comment-form input, .t-neumorphism .comment-form textarea, .t-neumorphism .lock input { box-shadow: inset 4px 4px 8px var(--nm-dark), inset -4px -4px 8px var(--nm-light); }
.t-neumorphism .react, .t-neumorphism .chip, .t-neumorphism .ci { border-color: transparent; box-shadow: 4px 4px 9px var(--nm-dark), -4px -4px 9px var(--nm-light); background: var(--bg1); }
.t-neumorphism .react { border: 2px solid var(--line-strong); }
.t-neumorphism .react.on { box-shadow: inset 3px 3px 7px color-mix(in srgb, var(--accent) 60%, #000); }
.t-neumorphism .hero-media img, .t-neumorphism .about-img { box-shadow: var(--shadow); border: 8px solid var(--bg1); }

/* --- Constructivism: red, black, revolutionary angles --- */
.t-constructivism { --surface: #fff8ea; --on-surface: #111111; --line: #111; --line-strong: #111; --bw: 3px; --radius: 0px; --radius-sm: 0px; --shadow: 8px 8px 0 #111; --btn-radius: 0px; --h-transform: uppercase; --h-spacing: .02em; --nav-bg: #111; --nav-fg: #f4ecd8; }
.t-constructivism .sec-title { display: inline-block; padding: .15em .6em .15em .4em; background: #111; color: #f4ecd8; transform: rotate(-3deg); transform-origin: left; clip-path: polygon(0 0, 100% 0, calc(100% - .6em) 100%, 0 100%); }
.t-constructivism .hero-title { transform: rotate(-2deg); }
.t-constructivism .hero-text::after { content: ""; display: block; height: 26px; margin-top: 28px; background: linear-gradient(100deg, var(--accent) 0 58%, transparent 58% 61%, #111 61%); clip-path: polygon(0 35%, 100% 0, 100% 65%, 0 100%); }
.t-constructivism .card { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); box-shadow: none; border-left-width: 12px; border-left-color: var(--accent); }
.t-constructivism .btn { border-color: #111; transform: skewX(-8deg); }
.t-constructivism .btn:hover { transform: skewX(-8deg) translateY(-2px); }
.t-constructivism .divider-line { height: 8px; background: linear-gradient(100deg, var(--accent) 0 70%, #111 70%); }

/* --- Swiss: strict grid, flush left, red rules --- */
.t-swiss { --surface: #ffffff; --on-surface: #111111; --line: #111; --line-strong: #111; --bw: 0px; --radius: 0px; --radius-sm: 0px; --shadow: none; --btn-radius: 0px; --h-spacing: -0.03em; --h-weight: 700; --nav-bg: #fff; }
.t-swiss .hero-center, .t-swiss .hero-center .hero-text { text-align: left; }
.t-swiss .hero-center .hero-sub { margin-inline: 0; }
.t-swiss .hero-title { font-size: clamp(2.6rem, 9vw, 5.6rem); letter-spacing: -0.045em; }
.t-swiss .sec-title { border-top: 6px solid var(--accent); padding-top: .35em; font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.t-swiss .card, .t-swiss .quote, .t-swiss .comment { border-top: 3px solid var(--accent); padding-inline: 0; background: transparent; color: inherit; --focus: var(--text); }
.t-swiss .cta, .t-swiss .box, .t-swiss .comment-form { border-left: 6px solid var(--accent); }
.t-swiss .us-nav { border-bottom: 2px solid var(--accent); }
.t-swiss .quote blockquote::before { border-radius: 0; }
@media (min-width: 820px) {
  .t-swiss .sec:has(> .wrap > .sec-title) > .wrap { display: grid; grid-template-columns: 1fr 3fr; column-gap: 40px; align-items: start; }
  .t-swiss .sec:has(> .wrap > .sec-title) > .wrap > :not(.sec-title) { grid-column: 2; }
  .t-swiss .sec:has(> .wrap > .sec-title) > .wrap > .sec-title { grid-row: 1 / span 4; }
}

/* --- Editorial: magazine serifs, drop caps, column rules --- */
.t-editorial { --surface: #fffdf8; --on-surface: #1f1a14; --line: rgba(31, 26, 20, .22); --line-strong: #6b5d4d; --radius: 0px; --radius-sm: 0px; --shadow: none; --btn-radius: 0px; --h-weight: 700; --h-spacing: -0.01em; --nav-bg: #f8f4ec; --nav-fg: #1f1a14; }
.t-editorial .sec-title { border-top: 4px double currentColor; padding-top: .4em; font-style: italic; }
.t-editorial .hero-title { font-style: italic; font-size: clamp(2.6rem, 9vw, 5.4rem); }
.t-editorial .prose { font-size: 1.1rem; }
.t-editorial .prose > p:first-of-type::first-letter { float: left; margin: .08em .12em 0 0; padding: .02em .12em; font-family: var(--fh); font-size: 3.6em; line-height: .85; font-weight: 700; background: var(--accent); color: var(--on-accent); }
.t-editorial .card, .t-editorial .quote { border-width: 0 0 0 1px; background: transparent; color: inherit; --focus: var(--text); }
.t-editorial .quote blockquote { font-family: var(--fh); font-style: italic; font-size: 1.25rem; }
.t-editorial .us-nav .us-brand { font-style: italic; font-size: 1.35rem; }
@media (min-width: 860px) {
  .t-editorial .sec-custom .prose, .t-editorial .sec-about .about:not(.has-img) .prose { max-width: none; columns: 2; column-gap: 48px; column-rule: 1px solid color-mix(in srgb, var(--text) 25%, transparent); }
}

/* --- Hand-drawn: sketchy, wobbly, doodle charm --- */
.t-handdrawn { --surface: #ffffff; --on-surface: #1b2a4a; --line: #1b2a4a; --line-strong: #1b2a4a; --bw: 2px; --wobble: 255px 15px 225px 15px / 15px 225px 15px 255px; --radius: var(--wobble); --radius-sm: 15px 225px 15px 255px / 255px 15px 225px 15px; --shadow: 3px 4px 0 rgba(27, 42, 74, .25); --btn-radius: var(--wobble); }
.t-handdrawn::before { background: repeating-linear-gradient(transparent 0 31px, rgba(43, 89, 195, .08) 31px 32px); }
.t-handdrawn .card, .t-handdrawn .quote, .t-handdrawn .box, .t-handdrawn .cta, .t-handdrawn .comment { border-style: dashed; }
.t-handdrawn .card:nth-child(even) { transform: rotate(.8deg); }
.t-handdrawn .card:nth-child(odd) { transform: rotate(-.6deg); }
.t-handdrawn .sec-title { display: inline-block; padding-bottom: 8px; background: radial-gradient(circle at 50% 0, transparent 6px, var(--accent) 6.5px 8.5px, transparent 9px) 0 100% / 16px 10px repeat-x; }
.t-handdrawn .btn { border-color: #1b2a4a; border-style: solid; }
.t-handdrawn .hero-media img, .t-handdrawn .about-img, .t-handdrawn .gallery img { border: 2px solid #1b2a4a; border-radius: var(--wobble); }
.t-handdrawn .chip, .t-handdrawn .react { border-radius: var(--radius-sm); }

/* --- Bento: tidy rounded tiles --- */
.t-bento { --surface: #ffffff; --on-surface: #18181b; --line: transparent; --line-strong: #71717a; --radius: 20px; --radius-sm: 14px; --shadow: none; --sec-pad: 0px; --tile: #f4f4f1; }
.t-bento .us-main { max-width: 1080px; margin: 0 auto; padding: 12px clamp(8px, 2vw, 20px); display: grid; gap: 12px; }
.t-bento .sec { padding: 0 !important; }
.t-bento .sec > .wrap { max-width: none; background: var(--surface); color: var(--on-surface); border-radius: 28px; padding: clamp(20px, 4vw, 40px); --focus: var(--on-surface); }
.t-bento :is(.sec-spacer, .sec-divider) > .wrap { background: none; color: inherit; padding-block: 0; --focus: var(--text); }
.t-bento .card, .t-bento .quote, .t-bento .comment, .t-bento .comment-form, .t-bento .cta, .t-bento .box, .t-bento .react, .t-bento .ci { background: var(--tile); }
.t-bento .embed { background: var(--tile); }
.t-bento .us-main > .reactions { padding: 8px 0 40px; }
@media (min-width: 700px) {
  .t-bento .cards-grid { grid-template-columns: repeat(4, 1fr); }
  .t-bento .cards-grid .card:nth-child(4n+1), .t-bento .cards-grid .card:nth-child(4n+4) { grid-column: span 2; }
  .t-bento .cards-grid .card:nth-child(4n+1) { background: var(--accent); color: var(--on-accent); --focus: var(--on-accent); }
  .t-bento .cards-grid .card:nth-child(4n+1) .price { background: var(--on-accent); color: var(--accent); }
  .t-bento .cards-grid .card:nth-child(4n+1) .card-link { text-decoration-color: currentColor; }
}

/* --- Professional: trustworthy navy --- */
.t-professional { --surface: #ffffff; --on-surface: #0f172a; --line: #cbd5e1; --line-strong: #64748b; --radius: 6px; --radius-sm: 4px; --shadow: 0 1px 3px rgba(15, 23, 42, .12); --btn-radius: 6px; --h-weight: 600; --h-spacing: -0.01em; --nav-bg: #ffffff; }
.t-professional .us-nav { border-top: 4px solid var(--accent); }
.t-professional .sec-title::before { content: ""; display: block; width: 36px; height: 4px; margin-bottom: 14px; background: var(--accent); }
.t-professional .align-center .sec-title::before, .t-professional .cta .sec-title::before { margin-inline: auto; }
.t-professional .card { border-top: 3px solid var(--accent); }
.t-professional .us-foot { border-top-width: 2px; }

/* --- Vaporwave: aesthetic sunset, perspective grid --- */
.t-vaporwave { --surface: #1d0b33; --on-surface: #fdf2ff; --line: var(--accent); --line-strong: #fdf2ff; --bw: 2px; --radius: 4px; --radius-sm: 2px; --shadow: 6px 6px 0 #01cdfe; --btn-radius: 0px; --btn-shadow: 4px 4px 0 #ff71ce; --nav-bg: #1d0b33; --h-spacing: .04em; }
.t-vaporwave::before { inset: auto auto 34vh 50%; width: min(70vw, 380px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(#fffb96, #ff71ce 70%); --sun: linear-gradient(#000 55%, transparent 55% 60%, #000 60% 68%, transparent 68% 73%, #000 73% 80%, transparent 80% 86%, #000 86% 92%, transparent 92%); -webkit-mask: var(--sun); mask: var(--sun); opacity: .4; }
.t-vaporwave::after { inset: auto -50% 0 -50%; height: 38vh; transform: perspective(320px) rotateX(62deg); transform-origin: bottom; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent) 0 2px, transparent 2px 64px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 55%, transparent) 0 2px, transparent 2px 64px); -webkit-mask: linear-gradient(transparent, #000 35%); mask: linear-gradient(transparent, #000 35%); }
.t-vaporwave .sec-title, .t-vaporwave .hero-title { text-shadow: 3px 3px 0 color-mix(in srgb, #01cdfe 70%, transparent); }
.t-vaporwave .card, .t-vaporwave .quote { border-top: 18px solid var(--accent); }
.t-vaporwave .btn { border-color: var(--surface); }
.t-vaporwave .hero-media img { border: 3px solid #fff; box-shadow: 10px 10px 0 #ff71ce, 20px 20px 0 #01cdfe; border-radius: 0; }

/* --- Cyberpunk: neon yellow, clipped corners, night city --- */
.t-cyberpunk { --surface: #12121a; --on-surface: #f5f5ef; --line: var(--accent); --line-strong: var(--accent); --bw: 2px; --radius: 0px; --radius-sm: 0px; --shadow: none; --btn-radius: 0px; --cut: 16px; --h-transform: uppercase; --h-spacing: .05em; --nav-bg: #0a0a0f; --nav-fg: #f5f5ef; }
.t-cyberpunk::before { background: repeating-linear-gradient(90deg, rgba(252, 238, 10, .05) 0 1px, transparent 1px 48px), repeating-linear-gradient(0deg, rgba(5, 217, 232, .05) 0 1px, transparent 1px 48px); }
.t-cyberpunk .card, .t-cyberpunk .quote, .t-cyberpunk .cta, .t-cyberpunk .box, .t-cyberpunk .comment-form, .t-cyberpunk .lock, .t-cyberpunk .hero-media img {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.t-cyberpunk .btn { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); text-transform: uppercase; letter-spacing: .08em; }
.t-cyberpunk .btn:focus-visible { outline: 3px solid var(--on-accent); outline-offset: -7px; }
.t-cyberpunk .btn-outline:focus-visible { outline-color: currentColor; }
.t-cyberpunk .sec-title, .t-cyberpunk .hero-title { text-shadow: 2px 0 rgba(255, 42, 109, .7), -2px 0 rgba(5, 217, 232, .7); }
.t-cyberpunk .sec-title::after { content: ""; display: block; width: 120px; height: 6px; margin-top: 10px; background: repeating-linear-gradient(90deg, var(--accent) 0 18px, transparent 18px 24px); }
.t-cyberpunk .us-nav { border-bottom: 2px solid var(--accent); }
.t-cyberpunk .card { border-left-width: 6px; }

/* --- Glassmorphism: frosted cards over colour blobs --- */
.t-glass {
  --surface: color-mix(in srgb, var(--bg1) 55%, transparent); --on-surface: var(--text);
  --line: rgba(255, 255, 255, .38); --line-strong: color-mix(in srgb, var(--text) 60%, transparent);
  --radius: 22px; --shadow: 0 20px 50px -20px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
  --nav-bg: color-mix(in srgb, var(--bg1) 70%, transparent); --nav-fg: var(--text); --input-bg: color-mix(in srgb, var(--bg1) 60%, transparent);
}
/* Blobs use only bg1/bg2 so every blended point stays within the contrast-checked range. */
.t-glass::before { background: radial-gradient(38vmax 38vmax at 12% 18%, var(--bg2), transparent 70%), radial-gradient(34vmax 34vmax at 88% 30%, var(--bg1), transparent 70%), radial-gradient(40vmax 40vmax at 60% 95%, var(--bg2), transparent 70%); filter: blur(40px); }
.t-glass .card, .t-glass .quote, .t-glass .box, .t-glass .cta, .t-glass .comment, .t-glass .comment-form, .t-glass .lock, .t-glass .us-nav, .t-glass .react, .t-glass .notice, .t-glass .ci { -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.t-glass .hero-media img { border: 1px solid rgba(255, 255, 255, .5); border-radius: 28px; }

/* --- Art Deco: gold double lines, symmetry --- */
.t-artdeco { --surface: #13221e; --on-surface: #f3e9c6; --line: var(--accent); --line-strong: #f3e9c6; --bw: 4px; --radius: 0px; --radius-sm: 0px; --shadow: 0 0 0 6px #13221e, 0 0 0 7px color-mix(in srgb, var(--accent) 70%, transparent); --btn-radius: 0px; --btn-shadow: 0 0 0 3px var(--bg1), 0 0 0 4px var(--accent); --h-transform: uppercase; --h-spacing: .14em; --h-weight: 400; --nav-bg: #0b1512; --nav-fg: #f3e9c6; }
.t-artdeco::before { background: repeating-conic-gradient(from -90deg at 50% -5%, color-mix(in srgb, var(--accent) 7%, transparent) 0 2deg, transparent 2deg 8deg); -webkit-mask: linear-gradient(#000, transparent 70%); mask: linear-gradient(#000, transparent 70%); }
.t-artdeco .card, .t-artdeco .quote, .t-artdeco .box, .t-artdeco .cta, .t-artdeco .comment-form, .t-artdeco .lock { border-style: double; }
.t-artdeco .sec-title { text-align: center; display: flex; align-items: center; justify-content: center; gap: .6em; font-size: clamp(1.3rem, 3.4vw, 2rem); }
.t-artdeco .sec-title::before, .t-artdeco .sec-title::after { content: ""; flex: 0 1 90px; height: 7px; border-block: 1px solid var(--accent); background: linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat; }
.t-artdeco .hero-title::after { content: "\25C6"; display: block; margin-top: .3em; font-size: .3em; letter-spacing: 1em; }
.t-artdeco .us-nav { border-bottom: 4px double var(--accent); }
.t-artdeco .hero-media img { border: 4px double var(--accent); padding: 6px; background: transparent; }
.t-artdeco .divider-line { height: 7px; border-block: 1px solid var(--accent); background: linear-gradient(var(--accent), var(--accent)) center / 100% 1px no-repeat; }

/* --- Terminal: green phosphor command line --- */
.t-terminal { --surface: #061206; --on-surface: #c6ffd2; --line: color-mix(in srgb, var(--accent) 60%, transparent); --line-strong: var(--accent); --bw: 1px; --radius: 0px; --radius-sm: 0px; --shadow: none; --btn-radius: 0px; --nav-bg: #041004; --nav-fg: #c6ffd2; --h-weight: 400; --h-spacing: 0; }
.t-terminal::before { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .35)); }
.t-terminal .card, .t-terminal .quote, .t-terminal .box, .t-terminal .cta, .t-terminal .comment, .t-terminal .comment-form, .t-terminal .lock { border-style: dashed; }
.t-terminal .sec-title::before, .t-terminal .heading::before, .t-terminal .hero-title::before { content: "> "; }
.t-terminal .hero-title::after { content: "_"; animation: fx-caret 1s steps(1) infinite; }
.t-terminal .sec-title, .t-terminal .hero-title, .t-terminal .heading { text-shadow: 0 0 8px color-mix(in srgb, var(--text) 45%, transparent); }
.t-terminal .btn::before { content: "["; } .t-terminal .btn::after { content: "]"; }
.t-terminal .hero-media img { filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(2.5); border: 1px dashed var(--accent); }
.t-terminal .us-brand::before { content: "~/"; }

/* --- Pastel Kawaii: cute, bubbly, sweet --- */
.t-kawaii { --surface: #ffffff; --on-surface: #5a2a48; --line: color-mix(in srgb, var(--accent) 35%, #fff); --line-strong: #a0688a; --bw: 3px; --radius: 30px; --radius-sm: 18px; --shadow: 0 8px 0 color-mix(in srgb, var(--accent) 25%, #fff); --btn-shadow: 0 5px 0 color-mix(in srgb, var(--accent) 65%, #000); --h-weight: 400; }
.t-kawaii::before { background: radial-gradient(circle, rgba(255, 255, 255, .9) 0 3px, transparent 3.5px) 0 0 / 70px 70px, radial-gradient(circle, color-mix(in srgb, var(--accent) 25%, transparent) 0 4px, transparent 4.5px) 35px 35px / 70px 70px; }
.t-kawaii .sec-title::before { content: "\2661\00a0"; }
.t-kawaii .sec-title::after { content: "\00a0\2661"; }
.t-kawaii .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 65%, #000); }
.t-kawaii .card:hover { transform: translateY(-4px) rotate(-1deg); transition: transform .2s ease; }
.t-kawaii .hero-media img, .t-kawaii .about-img { border-radius: 50% 50% 46% 54% / 55% 45% 55% 45%; border: 6px solid #fff; }
.t-kawaii .gallery img { border-radius: 22px; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .us *, .us *::before, .us *::after { animation: none !important; transition: none !important; }
  .fx, .fx span { transform: none !important; opacity: 1 !important; filter: none !important; }
  .fx-typewriter { clip-path: none !important; }
  .fx-typewriter::after, .fx-glitch::before, .fx-glitch::after { display: none; }
  .fx-marquee { white-space: normal; text-indent: 0; }
  .fx-outline { -webkit-text-fill-color: currentColor; }
  .btn:hover, .react:hover, .t-trendy .card:hover, .t-modern .card:hover, .t-kawaii .card:hover { transform: none !important; }
  .t-constructivism .btn, .t-constructivism .btn:hover { transform: skewX(-8deg) !important; }
}

/* ==========================================================================
   Alignment (site default via body.ua-*, per-section override via .sa-*)
   + content width, visitor counter, webring widget, follow link
   ========================================================================== */
.uw-narrow .wrap, .uw-narrow .us-main > .reactions { max-width: 680px; }
.uw-wide .wrap, .uw-wide .us-main > .reactions { max-width: 1280px; }
.t-bento.uw-narrow .us-main, .t-bento.uw-wide .us-main { max-width: none; }

/* Site default (sections without their own alignment) */
.ua-center .sec:not(.sa-left):not(.sa-right) > .wrap { text-align: center; }
.ua-right .sec:not(.sa-left):not(.sa-center) > .wrap { text-align: right; }
/* Section override */
.sec.sa-left > .wrap { text-align: left; }
.sec.sa-center > .wrap { text-align: center; }
.sec.sa-right > .wrap { text-align: right; }

/* Make block-level pieces follow the text alignment */
:is(.ua-center .sec:not(.sa-left):not(.sa-right), .sec.sa-center) :is(.prose, .hero-sub, .about) { margin-inline: auto; }
:is(.ua-center .sec:not(.sa-left):not(.sa-right), .sec.sa-center) :is(.socials, .contact-list) { justify-content: center; }
:is(.ua-center .sec:not(.sa-left):not(.sa-right), .sec.sa-center) .contact-list { display: grid; justify-items: center; }
:is(.ua-center .sec:not(.sa-left):not(.sa-right), .sec.sa-center) .sec-title::after,
:is(.ua-center .sec:not(.sa-left):not(.sa-right), .sec.sa-center) .sec-title::before { margin-inline: auto; }
:is(.ua-right .sec:not(.sa-left):not(.sa-center), .sec.sa-right) :is(.prose, .hero-sub) { margin-left: auto; }
:is(.ua-right .sec:not(.sa-left):not(.sa-center), .sec.sa-right) :is(.socials, .contact-list) { justify-content: flex-end; }
:is(.ua-right .sec:not(.sa-left):not(.sa-center), .sec.sa-right) .contact-list { display: grid; justify-items: end; }
.sec.sa-left .linklist, .ua-left .sec:not(.sa-center):not(.sa-right) .linklist { margin-inline: 0; }
.sec.sa-right .linklist, .ua-right .sec:not(.sa-left):not(.sa-center) .linklist { margin-inline: auto 0; }
/* Cards, quotes and forms keep readable left-aligned text inside, whatever the section alignment */
.card, .quote, .comment, .comment-form, .lock { text-align: left; }
.sec.sa-center .card, .ua-center .sec:not(.sa-left):not(.sa-right) .card { text-align: center; }
.sec.sa-center .card-head, .ua-center .sec:not(.sa-left):not(.sa-right) .card-head { justify-content: center; flex-wrap: wrap; }
/* The hero keeps its own Alignment option; a section override wins over it */
.sec-hero.sa-left .hero-text { text-align: left; }
.sec-hero.sa-left .hero-sub { margin-inline: 0; }
.sec-hero.sa-center .hero-text { text-align: center; }
.sec-hero.sa-right .hero-text { text-align: right; }
.sec-hero.sa-right .hero-sub { margin-inline: auto 0; }

/* Visitor counter */
.counter { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; font-size: .9rem; }
.counter-label { opacity: .85; }
.counter-digits { display: inline-flex; gap: 3px; }
.counter-digits b { display: inline-grid; place-items: center; min-width: 1.6em; height: 2.1em; font: 700 1.25rem/1 'Courier New', monospace; }
.counter-odometer .counter-digits b { background: linear-gradient(#222 0 48%, #000 52%); color: #fff; border-radius: 4px; box-shadow: inset 0 0 0 1px #444; }
.counter-lcd .counter-digits { background: #0b1a0b; padding: 6px 10px; border-radius: 6px; box-shadow: inset 0 0 8px #000; }
.counter-lcd .counter-digits b { color: #57ff7a; background: none; min-width: 1em; text-shadow: 0 0 6px #2bff5a; letter-spacing: 1px; }
.counter-retro .counter-digits b { background: #000; color: #ff3b3b; border: 2px outset #bbb; min-width: 1.3em; font-family: 'Times New Roman', serif; }
.counter-plain .counter-digits { gap: 0; }
.counter-plain .counter-digits b { min-width: 0; height: auto; font: inherit; font-weight: 700; }
.sec-counter { padding-block: 20px; }
.sec-counter > .wrap { text-align: center; }

/* Webring widget */
.webring { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 620px; margin-inline: auto; text-align: center; }
.webring-name { display: grid; gap: 2px; flex: 1; min-width: 160px; }
.webring-name small { opacity: .85; }
.webring a { color: inherit; }
.sec.sa-left .webring { margin-inline: 0; }
.sec.sa-right .webring { margin-inline: auto 0; }

/* Follow link in the footer */
.us-foot .follow { font-weight: 700; }

/* Lists follow centred / right alignment (bullets move with the text) */
:is(.ua-center .sec:not(.sa-left):not(.sa-right), .sec.sa-center, .ua-right .sec:not(.sa-left):not(.sa-center), .sec.sa-right) .prose :is(ul, ol) { list-style-position: inside; padding-left: 0; }
.prose [style*="text-align:center"] :is(ul, ol), .prose :is(ul, ol)[style*="text-align:center"] { list-style-position: inside; padding-left: 0; }

/* Guestbook: centred unless the section picks its own alignment */
.us .sec-comments:not(.sa-left):not(.sa-right) > .wrap { text-align: center; }
.sec-comments :is(.comments, .notice) { max-width: 640px; }
.sec-comments:not(.sa-left):not(.sa-right) :is(.comment-form, .comments, .notice) { margin-inline: auto; }
.sec-comments.sa-right :is(.comment-form, .comments, .notice) { margin-inline: auto 0; }

/* Row & Columns: boxes fill columns left to right, extra boxes wrap to a new row */
.cols { display: grid; gap: var(--gap); align-items: center; }
.cols.cv-top { align-items: start; }
.cols.cv-bottom { align-items: end; }
.cols-1 { grid-template-columns: minmax(0, 1fr); }
.cols-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.cols-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cols-1-1-1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-1-2-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
.cols-1-1-1-1 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col { min-width: 0; }
.col.ca-left { text-align: left; }
.col.ca-center { text-align: center; }
.col.ca-right { text-align: right; }
.col .prose { max-width: none; }
.col-heading { font-size: clamp(1.3rem, 3vw, 1.8rem); margin: 0 !important; }
.col-image img { display: inline-block; vertical-align: middle; border-radius: var(--radius-sm); }
@media (max-width: 900px) { .cols-1-1-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cols { grid-template-columns: minmax(0, 1fr) !important; }
  .col-empty { display: none; }
}

/* More visitor counter looks */
.counter-neon .counter-digits { padding: 8px 14px; background: #0a0a12; border: 2px solid var(--accent); border-radius: 12px; box-shadow: 0 0 12px var(--accent), inset 0 0 12px var(--accent); }
.counter-neon .counter-digits b { min-width: .9em; color: #fff; text-shadow: 0 0 4px #fff, 0 0 12px var(--accent), 0 0 26px var(--accent); }
.counter-nixie .counter-digits { gap: 6px; padding: 8px; background: #1a1410; border-radius: 10px; }
.counter-nixie .counter-digits b { min-width: 1.4em; height: 2.4em; border-radius: 45% 45% 8px 8px / 30% 30% 8px 8px; background: radial-gradient(ellipse at 50% 40%, rgba(255, 140, 40, .2), rgba(0, 0, 0, .6) 70%), #0d0a08; color: #ffb347; text-shadow: 0 0 4px #ff7a00, 0 0 12px #ff5a00; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 -6px 10px rgba(0, 0, 0, .6); font-weight: 400; }
.counter-flip .counter-digits b { position: relative; min-width: 1.5em; height: 2.2em; background: #2b2b2b; color: #f5f5f5; border-radius: 6px; box-shadow: 0 3px 0 #111, 0 6px 10px rgba(0, 0, 0, .35); font-family: Arial, sans-serif; font-size: 1.5rem; }
.counter-flip .counter-digits b::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(0, 0, 0, .65); }
.counter-badge { flex-direction: row; gap: 0; border-radius: 4px; overflow: hidden; font: 600 .85rem/1 Verdana, Geneva, sans-serif; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.counter-badge .counter-label { opacity: 1; padding: 7px 10px; background: #555; color: #fff; }
.counter-badge .counter-digits { gap: 0; padding: 7px 10px; background: var(--accent); color: var(--on-accent); }
.counter-badge .counter-digits b { min-width: 0; height: auto; font: inherit; }
.counter-pixel .counter-label { text-transform: uppercase; letter-spacing: .1em; }
.counter-pixel .counter-digits { gap: 7px; padding: 3px; }
.counter-pixel .counter-digits b { min-width: 1.5em; height: 1.9em; background: #1d2b53; color: #fff1e8; font-family: 'Press Start 2P', 'Courier New', monospace; font-size: .95rem; box-shadow: 3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000; }
.counter-rainbow .counter-digits b { color: #fff; border-radius: 6px; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.counter-rainbow .counter-digits b:nth-child(6n+1) { background: #c1121f; }
.counter-rainbow .counter-digits b:nth-child(6n+2) { background: #c2410c; }
.counter-rainbow .counter-digits b:nth-child(6n+3) { background: #a16207; }
.counter-rainbow .counter-digits b:nth-child(6n+4) { background: #15803d; }
.counter-rainbow .counter-digits b:nth-child(6n+5) { background: #1d4ed8; }
.counter-rainbow .counter-digits b:nth-child(6n) { background: #7e22ce; }
.counter-big .counter-digits { gap: 0; }
.counter-big .counter-digits b { min-width: 0; height: auto; font: 800 clamp(2.6rem, 9vw, 4.5rem)/1 var(--fh); }
.counter-big .counter-label { order: 2; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
.counter-tape .counter-digits { gap: 2px; padding: 6px 12px; background: #c8102e; border-radius: 2px; transform: rotate(-2deg); box-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.counter-tape .counter-digits b { min-width: .8em; height: auto; color: #fff; font: 700 1.3rem/1.2 'Courier New', monospace; text-shadow: 0 -1px 0 rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .35); }

/* ==========================================================================
   Templates added in 1.2
   ========================================================================== */
.t-geocities::before, .t-riso::before, .t-earthy::before, .t-mixtape::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* --- 90s Web: starfield, bevelled grey boxes, Press Start headings --- */
.t-geocities { --surface: #c0c0c0; --on-surface: #000000; --line: #dfdfdf; --line-strong: #000000; --bw: 3px; --radius: 0px; --radius-sm: 0px; --shadow: 2px 2px 0 #000; --btn-radius: 0px; --nav-bg: #c0c0c0; --nav-fg: #000000; --input-bg: #ffffff; --h-weight: 400; --h-spacing: 0; }
.t-geocities::before { background: radial-gradient(1px 1px at 20px 30px, #fff 50%, transparent 51%) 0 0 / 120px 120px, radial-gradient(1px 1px at 80px 70px, #ffd 50%, transparent 51%) 0 0 / 120px 120px, radial-gradient(2px 2px at 50px 100px, #fff 50%, transparent 51%) 0 0 / 170px 170px, radial-gradient(1px 1px at 100px 15px, #aaf 50%, transparent 51%) 0 0 / 90px 90px; }
.t-geocities :is(.card, .quote, .box, .cta, .comment, .comment-form, .lock, .notice) { border-style: outset; }
.t-geocities :is(.comment-form, .lock) input, .t-geocities .comment-form textarea { border-style: inset; border-color: #808080; }
.t-geocities .hero-title { font-size: clamp(1.4rem, 4.6vw, 2.7rem); line-height: 1.4 !important; color: var(--accent); text-shadow: 3px 3px 0 #ff00ff; }
.t-geocities .sec-title, .t-geocities .heading { font-size: clamp(1rem, 3vw, 1.6rem); line-height: 1.5; }
.t-geocities .sec-title::before { content: "\2605\00a0"; color: var(--accent); }
.t-geocities .col-heading, .t-geocities .card h3 { font-size: .95rem; line-height: 1.5; }
.t-geocities .btn { background: #c0c0c0; color: #000; border: 3px outset #fff; box-shadow: 1px 1px 0 #000; }
.t-geocities .btn:active { border-style: inset; }
.t-geocities .chip { border-radius: 0; }
.t-geocities .us-nav { border-bottom: 3px outset #fff; }
.t-geocities .us-nav li a { border-radius: 0; }
.t-geocities .divider-line { height: 4px; background: linear-gradient(90deg, #f00, #f90, #ff0, #0f0, #0ff, #00f, #f0f); }
.t-geocities :is(.hero-media img, .about-img, .gallery img) { border: 4px ridge #c0c0c0; border-radius: 0; }
.t-geocities .us-main > .sec .prose:not(.box) a { color: #8fd8ff; }

/* --- Risograph: two-ink print, slight misregistration, dot grain --- */
.t-riso { --surface: #fffaf0; --on-surface: #1b1b3a; --line: #1b1b3a; --line-strong: #1b1b3a; --bw: 2px; --radius: 4px; --radius-sm: 4px; --shadow: 5px 5px 0 rgba(0, 120, 191, .7); --btn-radius: 4px; --btn-shadow: 3px 3px 0 #0078bf; --nav-bg: #f4f0e6; --h-weight: 400; --h-transform: uppercase; --h-spacing: .01em; }
.t-riso::before { background: radial-gradient(rgba(27, 27, 58, .09) 1px, transparent 1.3px) 0 0 / 5px 5px; }
.t-riso :is(.hero-title, .sec-title, .heading) { text-shadow: 3px 2px 0 color-mix(in srgb, var(--accent) 80%, transparent), -2px -1px 0 rgba(0, 120, 191, .6); }
.t-riso .card:nth-child(even), .t-riso .quote:nth-child(even) { box-shadow: 5px 5px 0 color-mix(in srgb, var(--accent) 75%, transparent); }
.t-riso .btn { border-color: #1b1b3a; }
.t-riso :is(.hero-media img, .about-img, .gallery img) { filter: grayscale(1) contrast(1.15); box-shadow: 6px 6px 0 var(--accent); }
.t-riso .divider-line { height: 6px; background: repeating-linear-gradient(90deg, var(--accent) 0 14px, #0078bf 14px 28px); }

/* --- Earthy: sage and clay, soft blobs, organic photo shapes --- */
.t-earthy { --surface: #fbf8ef; --on-surface: #2f3a28; --line: rgba(47, 58, 40, .18); --line-strong: #6b7a5e; --radius: 28px; --radius-sm: 16px; --shadow: 0 10px 30px -18px rgba(60, 70, 40, .45); --btn-radius: 999px; --nav-bg: #f6f3e7; --nav-fg: #2f3a28; --h-weight: 600; --h-spacing: -0.015em; }
.t-earthy::before { background: radial-gradient(ellipse 40% 30% at 8% 12%, rgba(196, 122, 82, .16), transparent 70%), radial-gradient(ellipse 35% 28% at 92% 30%, rgba(77, 107, 60, .14), transparent 70%), radial-gradient(ellipse 45% 30% at 30% 95%, rgba(214, 177, 108, .18), transparent 70%); }
.t-earthy .sec-title { font-style: italic; }
.t-earthy .sec-title::after { content: ""; display: block; width: 56px; height: 4px; margin-top: .35em; border-radius: 4px; background: #c47a52; }
.t-earthy .card { border-top: 4px solid #c47a52; }
.t-earthy .hero-media img, .t-earthy .about-img { border-radius: 62% 38% 55% 45% / 48% 58% 42% 52%; }
.t-earthy .gallery img { border-radius: 22px; }

/* --- Mixtape: cassette J-card stripes, Bebas headlines --- */
.t-mixtape { --surface: #f3e4c4; --on-surface: #2a1d16; --line: #2a1d16; --line-strong: #2a1d16; --bw: 2px; --radius: 6px; --radius-sm: 4px; --shadow: 0 6px 0 rgba(0, 0, 0, .35); --btn-radius: 4px; --nav-bg: #1f1510; --nav-fg: #f3e4c4; --h-weight: 400; --h-transform: uppercase; --h-spacing: .03em; }
.t-mixtape::before { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 10px); }
.t-mixtape :is(.card, .quote, .box, .cta) { background-image: linear-gradient(#ff8a2a 0 6px, #ffc23d 6px 12px, #e2442f 12px 18px, transparent 18px); padding-top: calc(var(--pad) + 14px); }
.t-mixtape .hero-title { font-size: clamp(3rem, 12vw, 7rem); }
.t-mixtape .sec-title { font-size: clamp(2rem, 6vw, 3.2rem); }
.t-mixtape .btn { border-color: #2a1d16; }
.t-mixtape .hero-media img { border: 10px solid #f3e4c4; border-bottom-width: 36px; border-radius: 4px; transform: rotate(-2deg); box-shadow: 0 10px 0 rgba(0, 0, 0, .35); }
.t-mixtape .gallery img { border: 6px solid #f3e4c4; }
.t-mixtape .us-brand::before { content: "\25B6\00a0"; color: var(--accent); }

/* ==========================================================================
   1.3: WhatsApp ordering, gig list, journal posts, 88x31 buttons
   ========================================================================== */
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: auto; padding-top: 4px; }
.sec.sa-center .card-actions, .ua-center .sec:not(.sa-left):not(.sa-right) .card-actions { justify-content: center; }
.btn-wa::before { content: "\1F4AC"; }

/* Gig & events list */
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 760px; text-align: left; }
:is(.ua-center .sec:not(.sa-left):not(.sa-right), .sec.sa-center) .events { margin-inline: auto; }
.sec.sa-right .events, .ua-right .sec:not(.sa-left):not(.sa-center) .events { margin-left: auto; }
.event {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--surface); color: var(--on-surface); --focus: var(--on-surface);
  border: var(--bw) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px 16px;
}
.ev-date { flex: none; display: grid; place-items: center; width: 58px; padding: 6px 0; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); line-height: 1; }
.ev-date b { font: 800 1.5rem/1 var(--fh); }
.ev-date span { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
.ev-info { flex: 1 1 200px; display: grid; gap: 2px; min-width: 0; }
.ev-info strong { font-size: 1.05rem; }
.ev-info span { font-size: .9rem; opacity: .85; }
.event .btn { flex: none; }
.events-past .event { opacity: .7; box-shadow: none; }
.events-past .ev-date { background: transparent; color: inherit; border: 2px solid var(--line-strong); }
.events-past-title { font-size: 1.1rem; margin-top: 24px !important; }

/* Journal */
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; max-width: 70ch; }
:is(.ua-center .sec:not(.sa-left):not(.sa-right), .sec.sa-center) .posts { margin-inline: auto; }
.post-item h3 { font-size: 1.25rem; margin: 0 0 .15em; }
.post-item h3 a { text-decoration: none; }
.post-item h3 a:hover { text-decoration: underline; }
.post-item time, .post-date { font-size: .85rem; opacity: .8; }
.post-item p { margin: .35em 0 0; }
.posts-more { margin-top: 18px; }
.post { max-width: 70ch; margin-inline: auto; text-align: left; }
.post-back { margin: 0 0 18px; font-size: .9rem; }
.post-title { font-size: clamp(2rem, 6vw, 3.2rem); margin-bottom: .2em !important; }
.post-date { display: block; margin-bottom: 26px; }
.post .prose img, .prose img { border-radius: var(--radius-sm); margin: 1em 0; }

/* 88x31 buttons and stamps */
.b88 { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
:is(.ua-center .sec:not(.sa-left):not(.sa-right), .sec.sa-center) .b88 { justify-content: center; }
.sec.sa-right .b88, .ua-right .sec:not(.sa-left):not(.sa-center) .b88 { justify-content: flex-end; }
.b88 img, .b88-me img { display: block; image-rendering: pixelated; max-width: none; }
.b88-88x31 img, .b88-me img[width="88"] { width: 88px; height: 31px; }
.b88-stamp img, .b88-me img[width="99"] { width: 99px; height: 56px; }
.b88 a { display: block; line-height: 0; }
.b88 a:hover img { outline: 2px solid var(--accent); outline-offset: 1px; }
.b88-me { display: grid; justify-items: start; gap: 10px; max-width: 460px; margin-top: 22px; text-align: left; }
:is(.ua-center .sec:not(.sa-left):not(.sa-right), .sec.sa-center) .b88-me { margin-inline: auto; }
.b88-me p { margin: 0; }
.b88-me label { display: grid; gap: 6px; width: 100%; font-size: .9rem; font-weight: 600; }
.snippet { width: 100%; font: .8rem/1.4 ui-monospace, Menlo, Consolas, monospace; padding: 8px; resize: none; background: var(--input-bg); color: var(--on-surface); border: 2px solid var(--line-strong); border-radius: var(--radius-sm); }