/* ── Sunshine Plumbing & Repair — tokens, reset, base type, browser surfaces ── */

:root{
  /* night */
  --night-900:#08172d;
  --night-800:#0d1f3c;
  --night-700:#12294f;
  --night-600:#1b3a6b;
  --night-500:#2a5290;

  /* sunrise */
  --sun-500:#f4771f;
  --sun-600:#e05a0c;
  --sun-400:#fb8f3d;
  /* orange dark enough to carry text on white — 5.3:1 */
  --sun-ink:#b8480a;
  /* near-black used for text sitting on the sunrise band — 4.8:1 on #e05a0c */
  --on-sun:#2a1202;
  --gold-500:#fdb913;
  --gold-400:#ffd15c;

  /* water */
  --water-500:#1f7ae0;

  /* paper — cool white, deliberately not cream */
  --paper:#f4f7fb;
  --paper-2:#e8eef6;
  --white:#fff;

  --ink:var(--night-800);
  --ink-soft:#43536d;

  /* on-night text tinted from the hue, never gray */
  --on-night:#eaf1fb;
  --on-night-soft:#a8bcd8;

  --rule:rgba(255,255,255,.14);
  --rule-ink:rgba(13,31,60,.12);

  --ff-display:'Archivo Black', 'Archivo', system-ui, sans-serif;
  --ff-text:'Archivo', system-ui, -apple-system, Segoe UI, sans-serif;

  --wrap:1200px;
  --pad:clamp(1.15rem, 4vw, 2.5rem);

  --r-sm:6px;
  --r-md:12px;
  --r-lg:20px;

  --shadow-lift:0 14px 28px -14px rgba(8,23,45,.5), 0 3px 9px -5px rgba(8,23,45,.3);
  --shadow-sun:0 10px 22px -12px rgba(126,52,6,.55);

  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 clamp(1rem,.96rem + .2vw,1.09rem)/1.65 var(--ff-text);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
ul{margin:0;padding:0;list-style:none}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:inherit}

h1,h2,h3{
  font-family:var(--ff-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-.035em;
  line-height:.95;
  text-wrap:balance;
  margin:0;
}

.h2{
  font-size:clamp(2rem,1.3rem + 3.1vw,3.5rem);
  margin:0 0 .5em;
}
.h2--big{font-size:clamp(2.4rem,1.4rem + 4.4vw,4.75rem)}
.h2--onsun{color:var(--night-900)}

.lede{
  font-size:clamp(1.06rem,1rem + .45vw,1.3rem);
  color:var(--ink-soft);
  max-width:56ch;
  margin:0 0 2.6rem;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ── browser surfaces: these ship with no design system unless we give them one ── */
::selection{background:var(--gold-500);color:var(--night-900)}
::-moz-selection{background:var(--gold-500);color:var(--night-900)}
html{scrollbar-color:var(--night-600) var(--paper-2);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{
  background:var(--night-600);
  border-radius:99px;
  border:3px solid var(--paper-2);
}
::-webkit-scrollbar-thumb:hover{background:var(--night-700)}

:focus-visible{
  outline:3px solid var(--gold-500);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
:root{caret-color:var(--sun-500)}
a{text-underline-offset:.18em;text-decoration-thickness:.08em}

b,strong{font-weight:700}
.tabnum{font-variant-numeric:tabular-nums}

.skip{
  position:absolute;left:.6rem;top:-4rem;z-index:99;
  background:var(--night-800);color:var(--on-night);
  padding:.7rem 1.1rem;border-radius:var(--r-sm);
  font-weight:600;text-decoration:none;
  transition:top .18s var(--ease-out);
}
.skip:focus{top:.6rem}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}