/* The Painting Perfectionists — coming-soon holding page
   WL00012_TPP · 2026-07-27 · BRIGHT REBUILD

   Client directive, verbatim: "No, I want bright colors. I don't want black
   on it at all. I want bright vivid colors."  Nothing in this file is black.
   The darkest ink is a saturated cobalt. Mobile-first: nearly all traffic
   here arrives from a QR scan on a phone. */

:root{
  /* bright ground */
  --paper:      #FFFFFF;
  --paper-2:    #F2F8FF;
  --wash-a:     rgba(14,165,233,.16);   /* sky wash, top-left  */
  --wash-b:     rgba(124,58,237,.13);   /* violet wash, top-right */
  --wash-c:     rgba(250,204,21,.15);   /* sun wash, lower     */

  /* vivid type — cobalt stands in for black, contrast 8.6:1 on white */
  --ink:        #1240C0;
  --ink-soft:   #3F4B60;
  --ink-faint:  #6B7688;

  /* vivid accents */
  --flame:      #D2410A;   /* eyebrow, 5.9:1 on white */
  --hair:       rgba(18,64,192,.14);

  /* two colours, sampled off Mark's own sign (green panel -> gold panel).
     A full spectrum was built first and pulled: too rainbow. These two are
     adjacent hues, so they blend clean with no muddy midpoint. */
  --paint-a:  #7FB53F;   /* his green */
  --paint-b:  #F0D42E;   /* his gold  */

  --measure:    40rem;
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  /* three soft colour washes — the page reads bright and colourful without
     any large flat block of colour fighting the type */
  background-image:
    radial-gradient(58% 44% at 12% -6%,  var(--wash-a) 0%, transparent 70%),
    radial-gradient(52% 40% at 92% 2%,   var(--wash-b) 0%, transparent 72%),
    radial-gradient(70% 46% at 50% 108%, var(--wash-c) 0%, transparent 68%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  background-attachment:fixed;
  color:var(--ink-soft);
  /* System stack only: no webfont request. This page is reached by QR scan on
     mobile data at a job site - every external request is a chance to fail, and
     SF Pro / Roboto / Segoe already render this treatment beautifully. */
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI',
              Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:#fff;
  padding:.7rem 1.1rem; border-radius:0 0 8px 0;
  font-weight:700; text-decoration:none; z-index:10;
}
.skip:focus{ left:0; }

/* ---- layout ---- */

.stage{
  flex:1 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(2rem, 8vw, 5rem) 1.5rem;
  padding-top:max(clamp(2rem,8vw,5rem), env(safe-area-inset-top));
}

.card{
  width:100%;
  max-width:var(--measure);
  text-align:center;
}

/* ---- type ---- */

.eyebrow{
  margin:0 0 clamp(1.4rem, 4vw, 2rem);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--flame);
}

.wordmark{
  margin:0;
  color:var(--ink);
  font-weight:800;
  line-height:1.04;
  letter-spacing:.02em;
  text-transform:uppercase;
  /* measured, not guessed: "PERFECTIONISTS" is the longest word and this
     clamp holds it at 84-90% of the content box from 320px to 1440px.
     Re-measure if the wordmark text or the font stack ever changes. */
  font-size:clamp(1.7rem, 8.7vw, 4rem);
}

.wordmark .the{
  display:block;
  font-size:.34em;
  font-weight:700;
  letter-spacing:.36em;
  text-indent:.36em;      /* optically re-centre the tracked text */
  color:var(--ink-faint);
  margin-bottom:.5em;
}

.wordmark .line{ display:block; }

/* ---- the paint stroke: a painter's cut-in edge, in full colour ---- */

.stroke{
  position:relative;
  width:min(100%, 23rem);
  height:7px;
  margin:clamp(1.6rem, 5vw, 2.3rem) auto clamp(1.5rem, 5vw, 2.1rem);
  border-radius:99px;
  background:rgba(18,64,192,.07);
  overflow:hidden;
}

.stroke-fill{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--paint-a) 0%, var(--paint-b) 100%);
  transform-origin:left center;
  animation:cut-in 1.05s cubic-bezier(.22,.75,.2,1) .18s both;
}

@keyframes cut-in{
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}

.lede{
  margin:0 auto;
  max-width:27rem;
  color:var(--ink-soft);
  font-size:clamp(1rem, 3.6vw, 1.09rem);
  line-height:1.65;
  text-wrap:pretty;
}

/* ---- footer ---- */

.foot{
  flex-shrink:0;
  padding:1.5rem 1.5rem calc(1.6rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--hair);
  text-align:center;
}

.foot p{
  margin:0;
  font-size:.78rem;
  letter-spacing:.02em;
  color:var(--ink-faint);
}

/* ---- entrance ---- */

.card > *:not(.stroke){
  animation:rise .8s cubic-bezier(.22,.75,.2,1) both;
}
.card > .eyebrow { animation-delay:.02s; }
.card > .wordmark{ animation-delay:.08s; }
.card > .lede    { animation-delay:.42s; }

@keyframes rise{
  from{ opacity:0; transform:translateY(9px); }
  to  { opacity:1; transform:none; }
}

/* ---- 404 ---- */

.notfound .code{
  display:block;
  font-size:clamp(3rem, 16vw, 5.5rem);
  font-weight:800;
  letter-spacing:.04em;
  line-height:1;
  margin:0 0 .25em;
  /* solid, not a gradient: his two paint colours are both too light to carry
     a numeral on white, and a multi-hue fill would reintroduce the rainbow */
  color:var(--ink);
}

.back{
  display:inline-block;
  margin-top:1.9rem;
  padding:.85rem 1.6rem;
  border-radius:99px;
  background:var(--ink);
  color:#fff;
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.03em;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:0 6px 18px rgba(18,64,192,.24);
}
.back:hover,
.back:focus-visible{
  background:#0E34A0;
  transform:translateY(-1px);
  box-shadow:0 9px 24px rgba(18,64,192,.32);
  outline:none;
}
.back:focus-visible{ outline:3px solid var(--paint-a); outline-offset:3px; }

/* ---- respect user preferences ---- */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .stroke-fill{ transform:none; }
}

@media (prefers-contrast: more){
  .lede{ color:#2A3446; }
  .foot p{ color:#4A5566; }
}

/* This page is deliberately light. Honouring the OS dark preference would
   hand back the dark treatment the client explicitly rejected, so the only
   concession is easing pure white slightly. */
@media (prefers-color-scheme: dark){
  body{ background-color:#FBFDFF; }
}

/* very small phones */
@media (max-width:360px){
  .wordmark{ letter-spacing:0; }
  .wordmark .the{ letter-spacing:.28em; text-indent:.28em; }
}