/*
Theme Name: Sudoku Whisperer
Description: House theme — quiet register, reddish tints, bookish. Local dev build 2026-08-07.
Version: 0.1
Author: Sudoku Whisperer
*/

:root {
  /* THE TYPE SCALE — the only five font sizes on the site (Ron, 2026-08-08).
     Every font-size below MUST be one of these tokens; never a raw value. */
  --fs-hero: 3rem;      /* hero headline only */
  --fs-title: 2rem;     /* page titles (h1) */
  --fs-section: 1.6rem; /* section headings (h2) */
  --fs-sub: 1.2rem;     /* subheadings (h3), hero tagline */
  --fs-body: 1rem;      /* EVERYTHING else: text, buttons, forms */
  --paper: #f7f1e6;
  --paper-deep: #efe4d3;
  --ink: #241b16;
  --ink-soft: #6f6055;
  --wine: #6d1a14;
  --crimson: #9d2c22;
  --rose: #e0cfbc;
  --card: #fffdf7;

  --hero-size-pc: 325px;
  --hero-size-mobile: 325px;

  --hero-size: var(--hero-size-pc);
  --hero-words-offset: 0px;
  --hero-hint-offset: -200px;
  --hero-hint-flash: 34px;
  --hero-hint-grown: calc(var(--hero-size) + var(--hero-hint-offset));
  --hero-words-max: min(88vw, 34em);
}
@media (max-width: 700px) { :root { --hero-size: var(--hero-size-mobile); } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #211715; --paper-deep: #2a1d1a; --ink: #efe3de;
    --ink-soft: #b59d95; --wine: #e6b1a4; --crimson: #d9705f;
    --rose: #4a332e; --card: #2b201d;
  }
  :root:not([data-theme="light"]) .site-foot { background: #180f0d; color: #d8beb6; }
  :root:not([data-theme="light"]) .site-foot a { color: #d9705f; }
  :root:not([data-theme="light"]) .site-foot .fine { color: #9c837b; }
  :root:not([data-theme="light"]) .btn { color: #fff; }
}
:root[data-theme="dark"] {
  --paper: #211715; --paper-deep: #2a1d1a; --ink: #efe3de;
  --ink-soft: #b59d95; --wine: #e6b1a4; --crimson: #d9705f;
  --rose: #4a332e; --card: #2b201d;
}
.theme-toggle { background: none; border: 1px solid var(--ink-soft); border-radius: 8px;
  cursor: pointer; font-size: var(--fs-body); line-height: 1; padding: 6px 10px;
  color: var(--ink-soft); }

.theme-toggle .moon { display: block; width: 16px; height: 16px;
  border-radius: 50%; border: 1.5px solid currentColor;
  box-shadow: inset -3px 0 0 0 currentColor; }
@keyframes sw-moon-spin { to { transform: rotate(360deg); } }
.theme-toggle .moon.spinning { animation: sw-moon-spin .6s ease; }
@media (prefers-reduced-motion: reduce) { .theme-toggle .moon.spinning { animation: none; } }
.theme-toggle:hover { border-color: var(--crimson); color: var(--crimson); }
:root[data-theme="dark"] .btn { color: #fff; }
:root[data-theme="dark"] .site-foot { background: #180f0d; color: #d8beb6; }
:root[data-theme="dark"] .site-foot a { color: var(--crimson); }
:root[data-theme="dark"] .site-foot .fine { color: #9c837b; }

* { box-sizing: border-box; }

html { font-size: 17px; scroll-behavior: smooth;
  scrollbar-gutter: stable; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 1rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
h1 { font-size: var(--fs-title); }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; color: var(--wine);
  line-height: 1.2; text-wrap: balance; }
a { color: var(--crimson); }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 22px; }

.site-head { background: var(--paper); border-bottom: 1px solid var(--rose);
  position: sticky; top: 0; z-index: 50; }
.site-head .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 14px; padding-bottom: 12px; }
.logo-mark { width: 46px; height: 46px; border-radius: 50%; display: block; }

.brand { display: flex; align-items: center; gap: 12px; }
.wordmark { font-family: Georgia, serif; font-size: var(--fs-section); color: var(--wine);
  text-decoration: none; letter-spacing: .01em; }
.wordmark b { color: var(--crimson); font-weight: 700; }
.site-nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.site-nav a { color: var(--ink-soft); text-decoration: none; font-size: var(--fs-body); }
.site-nav a:hover { color: var(--crimson); }

.hero { background: linear-gradient(160deg, var(--paper) 55%, var(--paper-deep));
  padding: 72px 0 64px; }
.hero .wrap { display: flex; align-items: center; gap: 44px; }
.hero-copy { flex: 1; }
.hero-logo { width: min(var(--hero-size), 90vw); height: auto; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 10px 40px rgba(109, 26, 20, .25); }
@media (max-width: 700px) { .hero .wrap { flex-direction: column-reverse; }
  }
.hero h1 { font-size: clamp(1.9rem, 4.5vw, var(--fs-hero)); margin: 0 0 14px; max-width: 17em; }
.hero .tagline { font-size: var(--fs-sub); color: var(--ink); margin: 0 0 30px; }
.hero .tagline em { color: var(--crimson); font-style: normal; }

.section { padding: 56px 0; }
.section.alt { background: var(--paper-deep); }
.section h2 { font-size: var(--fs-section); margin: 0 0 8px; }
.section .lead { color: var(--ink); margin: 0 0 28px; max-width: 44em; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; }
.card { background: var(--card); border: 1px solid var(--rose); border-radius: 12px;
  padding: 20px 22px; }
.card h3 { margin: 0 0 8px; font-size: var(--fs-sub); }
.card p { margin: 0; color: var(--ink); font-size: var(--fs-body); }

.samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; }
.samples-stack { grid-template-columns: 1fr; max-width: 460px; }
.sample { display: flex; align-items: center; gap: 12px; background: var(--card);
  border: 1px solid var(--rose); border-radius: 10px; padding: 12px 15px;
  text-decoration: none; color: var(--ink); }
.sample:hover { border-color: var(--crimson); }
.sample .num { font-weight: 700; color: var(--crimson); font-variant-numeric: tabular-nums; }
.sample .kind { margin-left: auto; font-size: var(--fs-body); color: var(--ink-soft);
  border: 1px solid var(--rose); border-radius: 5px; padding: 1px 7px; }

button, input, textarea { font-family: inherit; }
.btn { display: inline-block; background: var(--crimson); color: #fff; border: 0;
  border-radius: 8px; padding: 11px 22px; font-size: var(--fs-body); text-decoration: none;
  cursor: pointer; }
.btn:hover { background: var(--wine); }
.sw-sub-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 460px; }
.sw-sub-form input[type=email] { flex: 1; min-width: 220px; padding: 11px 14px;
  border: 1px solid var(--rose); border-radius: 8px; font-size: var(--fs-body);
  background: var(--card); color: var(--ink); }
.sw-note { font-size: var(--fs-body); color: var(--ink-soft); margin-top: 8px; }
.sw-ok { color: var(--wine); font-weight: 600; }

.embed-frame { width: 100%; height: 78vh; border: 0; border-radius: 0;
  background: transparent; display: block; }

.site-foot { background: var(--wine); color: #efdcd6; padding: 40px 0 48px;
  margin-top: 40px; }
.site-foot a { color: #f6c9bd; text-decoration: none; }
.site-foot .socials { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0 0; }
.site-foot .fine { font-size: var(--fs-body); color: #d9b7ad; margin-top: 22px; }

.page-body { padding: 46px 0 20px; }
.page-body .wrap > * { max-width: 46em; }
.page-body .wrap > .embed-frame, .page-body .wrap > .samples { max-width: none; }

@media (max-width: 640px) {
  .hero { padding: 48px 0 40px; }
  .embed-frame { height: 70vh; }
  .site-head .wrap { gap: 10px; }
  .site-nav { flex-basis: 100%; margin-left: 0; gap: 14px; }
  .brand { gap: 8px; flex-wrap: nowrap; }
  .wordmark { font-size: clamp(1rem, 5.5vw, var(--fs-section)); white-space: nowrap; }
  .logo-mark { width: 40px; height: 40px; }
}

.logo-mark, .hero-logo { cursor: pointer; }
@keyframes sw-spin { 0% { transform: rotate(0) scale(1); }
  35% { transform: rotate(-9deg) scale(1.07); }
  70% { transform: rotate(5deg) scale(1.02); }
  100% { transform: rotate(0) scale(1); } }
.sw-spinning { animation: sw-spin .7s ease; }

@keyframes sw-nudge { 0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-2.5deg); }
  40% { transform: rotate(2deg); }
  60% { transform: rotate(-1.2deg); }
  80% { transform: rotate(.6deg); } }
.sw-nudging { animation: sw-nudge .75s ease; }

@keyframes sw-nudge-hard { 0%, 100% { transform: rotate(0) scale(1); }
  15% { transform: rotate(-14deg) scale(1.12); }
  35% { transform: rotate(12deg) scale(1.08); }
  55% { transform: rotate(-9deg) scale(1.05); }
  75% { transform: rotate(5deg) scale(1.02); } }
.logo-mark.sw-nudging { animation: sw-nudge-hard .75s ease; }
@media (prefers-reduced-motion: reduce) { .sw-nudging { animation: none; } }
.sw-whisper { position: fixed; transform: translate(-50%, -50%);
  z-index: 60; background: var(--card); color: var(--ink);
  border: 1px solid var(--rose); border-left: 4px solid var(--crimson);
  border-radius: 12px; padding: 14px 20px; text-align: center;
  width: min(calc(var(--hero-size) + var(--hero-words-offset)), var(--hero-words-max));
  box-shadow: 0 12px 40px rgba(0,0,0,.18); text-decoration: none;
  opacity: 0; font-size: var(--fs-body);

  visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.sw-whisper.on { opacity: 1; visibility: visible;
  transition: opacity .8s ease, visibility 0s; }
.sw-whisper .hdr { display: block; font-weight: 700; color: var(--wine);
  font-size: var(--fs-body); margin-bottom: 2px; }
.sw-whisper .who { color: var(--ink-soft); font-size: var(--fs-body); display: block;
  margin-bottom: 3px; }
.sw-whisper .code { font-family: ui-monospace, Consolas, monospace;
  letter-spacing: .06em;

  white-space: nowrap; }
.sw-whisper { cursor: pointer; }

.sw-dothints { position: fixed; transform: translate(-50%, 0); z-index: 60;

  background: var(--card); color: var(--wine); font-weight: 700;
  border: 1px solid var(--rose);
  border-radius: 8px; padding: 5px 13px; font-size: var(--fs-body); cursor: pointer;
  box-shadow: 0 8px 26px rgba(0,0,0,.14); user-select: none;
  opacity: 0; visibility: hidden;
  transition: opacity .8s ease, visibility 0s linear .8s; }
.sw-dothints.on { opacity: 1; visibility: visible;
  transition: opacity .8s ease, visibility 0s; }
.sw-dothints:hover { border-color: var(--crimson); }
@media (prefers-reduced-motion: reduce) { .sw-spinning { animation: none; } }

.sw-dot { position: fixed; z-index: 55;
  width: var(--hero-hint-flash); height: var(--hero-hint-flash);
  pointer-events: none; transform: translate(-50%, -50%);
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  border: 0; border-radius: 14%; opacity: .9;

  background: #6d1a14; padding: 2px; }
.sw-dot i { background: #a85448; border-radius: 50%;
  width: 68%; height: 68%; place-self: center; }
.sw-dot .pip { background: #d9a514; border-radius: 50%; }
.sw-dot.stay { animation: none; opacity: 1;
  z-index: 65;
  pointer-events: auto; cursor: pointer;
  transition: left .65s cubic-bezier(.3,.8,.3,1), top .65s cubic-bezier(.3,.8,.3,1),
              width .65s ease, height .65s ease, padding .65s ease, opacity .9s ease;
  box-shadow: 0 14px 44px rgba(109,26,20,.45); }
.sw-dot.plain { animation: sw-dot-fade 1.4s ease forwards; }
.sw-dot i { border: 0; }

@keyframes sw-dot-fade {
  0% { opacity: .9; transform: translate(-50%, -50%) scale(.6); }
  25% { opacity: .9; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .sw-dot { animation-duration: .6s; } }

.sw-bento { display: inline-grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);

  width: 1em; height: 1em; background: #6d1a14; border-radius: 5px;
  padding: 2px; margin-right: 11px; flex-shrink: 0;
  transition: width 1.2s cubic-bezier(.25,.7,.3,1), height 1.2s cubic-bezier(.25,.7,.3,1); }

.section h2 { display: flex; align-items: center; min-height: 40px; }

.section h2 .sw-bento { margin-right: 40px; transform-origin: right center;
  transition: transform 1.2s cubic-bezier(.25,.7,.3,1); }
.section.sw-inview h2 .sw-bento { transform: scale(1.47); }
.section h2 .ht { transform-origin: center center; display: inline-block;
  transition: transform 1.2s cubic-bezier(.25,.7,.3,1); }
.section.sw-inview h2 .ht { transform: scale(1.12); }
.sw-bento i { background: #a85448; border-radius: 50%;
  width: 68%; height: 68%; place-self: center; border: 0; }
.sw-bento .pip { background: #d9a514; width: 82%; height: 82%; }

.page-title { display: flex; align-items: center; }
.page-title .sw-bento { margin-right: 18px; flex-shrink: 0; }

.site-nav a { display: inline-flex; align-items: center; }
.site-nav .sw-bento { border-radius: 3px;
  padding: 1.5px; margin-right: 7px; flex-shrink: 0; }
.site-nav .sw-bento i { background: #8a3a30; width: 58%; height: 58%; }
.site-nav .sw-bento .pip { background: #d9a514; width: 86%; height: 86%; }

.sw-spark { position: fixed; z-index: 70; width: 10px; height: 10px;
  background: #d9a514; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 9px 3px rgba(217,165,20,.55);
  transition: left .65s cubic-bezier(.3,.8,.3,1), top .65s cubic-bezier(.3,.8,.3,1); }
.site-nav a.sw-dest-glow .sw-bento { width: 1.45em; height: 1.45em;
  transition: width .4s ease, height .4s ease;
  box-shadow: 0 0 10px 2px rgba(217,165,20,.35); }
.site-nav a.sw-dest-glow .pip { animation: sw-pip-breathe-soft 1.15s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .sw-spark { transition: none; } .site-nav a.sw-dest-glow .pip { animation: none; } }

@keyframes sw-pip-breathe-soft {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217,165,20,.4); }
  50% { transform: scale(1.35); box-shadow: 0 0 5px 2px rgba(217,165,20,.3); } }
.site-nav .nav-here .pip { animation: sw-pip-breathe-soft 1.9s ease-in-out infinite; }
.site-nav .nav-here { color: var(--crimson); }
.site-nav .nav-here .sw-bento { width: 1.25em; height: 1.25em; }
@media (prefers-reduced-motion: reduce) { .site-nav .nav-here .pip { animation: none; } }
.sw-sub-gold { width: 58px; height: 58px; border-radius: 8px; display: block;
  margin: 10px 0 4px; }

@keyframes sw-pip-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217,165,20,.55); }
  50% { transform: scale(1.28); box-shadow: 0 0 18px 6px rgba(217,165,20,.35); } }
.sw-dot.stay .pip { animation: sw-pip-breathe 1.15s ease-in-out infinite .45s; }
@media (prefers-reduced-motion: reduce) { .sw-dot.stay .pip { animation: none; } }