/* Calm Mode for sheltonstrategies.com.
   html.calm is set before first paint (inline head script) from the visitor's saved choice or prefers-reduced-motion.
   Calm changes motion and visual intensity only: same logo, words and layout. */

/* ── the switch ── */
.calm-switch { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 6px 0 14px; border-radius: 4px;
  border: 1px solid rgba(127,127,127,.35); background: transparent; color: inherit; cursor: pointer; white-space: nowrap;
  font: 500 10.5px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase;
  transition: border-color .3s, background-color .3s; -webkit-tap-highlight-color: transparent; }
.calm-switch:hover { border-color: rgba(127,127,127,.7); background: rgba(127,127,127,.08); }
.calm-switch:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.calm-switch__track { position: relative; width: 44px; height: 26px; border-radius: 999px; background: rgba(184,70,46,.14); overflow: hidden; flex: none; }
.calm-switch__track svg { position: absolute; left: 24px; top: 50%; width: 15px; height: 10px; margin-top: -5px; color: var(--accent); overflow: visible; transition: left .5s cubic-bezier(.22,1,.36,1); }
.calm-switch__wave, .calm-switch__flat { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: opacity .45s ease, transform .6s cubic-bezier(.22,1,.36,1); transform-origin: 50% 50%; }
.calm-switch__flat { opacity: 0; transform: scaleX(.3); }
.calm-switch__dot { position: absolute; top: 5px; left: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
  transform: translateX(0); transition: transform .5s cubic-bezier(.22,1,.36,1), background-color .3s; }
.calm-switch[aria-checked="true"] .calm-switch__wave { opacity: 0; transform: scaleY(0); }
.calm-switch[aria-checked="true"] .calm-switch__flat { opacity: 1; transform: none; }
.calm-switch[aria-checked="true"] .calm-switch__dot { transform: translateX(18px); background: #e9e3d6; }
.calm-switch[aria-checked="true"] .calm-switch__track { background: rgba(184,70,46,.32); }
.calm-switch[aria-checked="true"] .calm-switch__track svg { left: 6px; }
@media (max-width: 640px) { .calm-switch__label { display: none; } .calm-switch { padding: 0 6px; } }
/* homepage nav: label folds away before the links do; on phones it sits beside the menu button */
@media (max-width: 1240px) { .nav .calm-switch__label { display: none; } .nav .calm-switch { padding: 0 6px; } }
@media (max-width: 980px) { .nav .calm-switch { margin-left: auto; } }

/* inner pages: sit the switch beside the nav without changing the header layout */
.site-header .calm-switch { margin-left: 18px; }
@media (max-width: 1100px) { .site-header .calm-switch { margin-left: auto; margin-right: 12px; } }

/* the brief "settling" veil used when the homepage reloads into or out of calm */
.calm-veil { position: fixed; inset: 0; z-index: 2147483600; background: #f7f5f0; opacity: 0; pointer-events: none; transition: opacity .35s ease;
  display: grid; place-items: center; font: 500 20px/1 'Source Serif 4', Georgia, serif; color: #5d6772; }
.calm-veil.is-on { opacity: 1; }

/* ── calm: muted palette (shared variable names on every page) ── */
html.calm {
  --ink: #2a333e; --ink-2: #313b47; --ink-3: #38434f;
  --paper: #f7f5f0; --paper-2: #efebe3; --white: #fbfaf7;
  --accent: #a8916c; --accent-hi: #cdbb98; --accent-ink: #7e6b4c;
  --text: #2b323b; --muted: #6b727b;
  --on-ink: #ece8e0; --on-ink-dim: rgba(236,232,224,.72); --mist: rgba(236,232,224,.7); --dim: rgba(236,232,224,.45);
  --line-d: rgba(236,232,224,.14); --ink-line: rgba(236,232,224,.12);
}
html.calm, html.calm body { scroll-behavior: auto; }

/* ── calm: motion off ── */
html.calm *, html.calm *::before, html.calm *::after { animation: none !important; }
html.calm *:not(.calm-switch):not(.calm-switch *):not(.calm-veil) {
  transition-property: color, background-color, border-color, opacity !important; transition-duration: .2s !important; }
html.calm .btn:hover, html.calm .svc__card:hover, html.calm .card:hover, html.calm .room:hover { transform: none !important; }
html.calm .js .reveal { opacity: 1 !important; transform: none !important; }
html.calm video { display: none; }
html.calm .about__film figure { background: center / cover no-repeat url('/home/about-porch.webp'); }
html.calm .btn-primary, html.calm .btn.btn-primary { box-shadow: none; }

/* ── calm: more white space and a quieter read ── */
html.calm main > section:not(.hero):not(.banner):not(.work):not(.taps):not(.page-head):not(.band) { padding-top: clamp(120px, 19vh, 230px); padding-bottom: clamp(120px, 19vh, 230px); }
html.calm p, html.calm li { line-height: 1.85; }
html.calm .lede, html.calm .hero__sub { max-width: 34em; }

/* homepage specifics (static versions of the motion sections) */
html.calm .pre { display: none !important; }
html.calm .hero__glow, html.calm .hero__cue { display: none; }
html.calm .wall { opacity: .22; filter: saturate(.4); }
html.calm .nav { background: var(--ink); }
html.calm .nav.is-light { background: var(--white); }
html.calm .site-header .nav { background: none; }
html.calm .nav__cycle i { box-shadow: none; }
html.calm .banner__pin { height: auto; padding: clamp(110px, 16vh, 190px) var(--gut, 24px); display: block; }
html.calm .banner__frame { width: min(1100px, 100%); height: auto; aspect-ratio: 16 / 9.4; margin: 0 auto; border-radius: 8px; }
html.calm .banner__bar { opacity: 1; }
html.calm .banner__slides img { opacity: 0; transform: none; }
html.calm .banner__slides img:first-child { opacity: 1; }
html.calm .banner__copy { position: static; transform: none; width: min(1100px, 100%); margin: 32px auto 0; }
html.calm .work__item { opacity: 1; }
html.calm .work__item p { max-height: none; }
html.calm .work__pin { min-height: 0; padding-top: clamp(120px, 19vh, 230px); padding-bottom: clamp(120px, 19vh, 230px); }
html.calm .taps__pin { min-height: 0; padding-top: clamp(120px, 19vh, 230px); padding-bottom: clamp(120px, 19vh, 230px); }
html.calm .taps__list li { opacity: 1; }
html.calm .marq__run[aria-hidden="true"] { display: none; }
html.calm .marq { white-space: normal; }
html.calm .marq__run { flex-wrap: wrap; justify-content: center; gap: 10px 0; padding: 30px var(--gut, 24px); }
html.calm .chip { display: none; }
html.calm .about__film video, html.calm .about__film img { transform: none; }
html.calm .facts li::before, html.calm .nav__cycle i { background: var(--accent); }

/* calm portfolio: the stacked list with a screenshot under each project (no pinned preview window) */
html.calm .work__pin { grid-template-columns: minmax(0, 760px); justify-content: center; }
html.calm .work__stage { display: none; }
html.calm .work__item { grid-template-columns: 52px 1fr; cursor: default; }
html.calm .work__item p { grid-column: 2; }
html.calm .work__item .thumb { display: block; grid-column: 2; margin-top: 16px; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9.5; }
html.calm .work__item .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
html.calm .marq__run { flex: 1 1 100%; flex-wrap: wrap; white-space: normal; }
html.calm .marq__run span { font-size: clamp(28px, 3.4vw, 48px); padding: 6px 0; }
/* phones: number above the title, text and screenshot full width */
@media (max-width: 600px) {
  html.calm .work__item { grid-template-columns: 1fr; }
  html.calm .work__item p, html.calm .work__item .thumb { grid-column: 1; }
}