/* Grace Plastering and Stucco — coming-soon holding page
   WL00011_GPS · 2026-07-27

   Client read: a 25-year plaster and stucco man in Alabama who is not
   remotely technology-minded and does good, honest work. So: warm, plain,
   material-true. Nothing slick, nothing that looks like a tech startup.
   The palette is lime plaster and clay; the type is a serif, because
   twenty-five years is the whole pitch and a serif carries it. */

:root{
  /* lime plaster ground */
  --plaster:    #FBF8F2;
  --plaster-2:  #F2EBDF;

  /* warm ink — never pure black, which reads cold against plaster */
  --ink:        #33291E;
  --stone:      #635749;
  --stone-lt:   #736758;   /* 4.65:1 on the darkest plaster - #8A7E70 failed AA at 3.34 */

  /* clay / terracotta accent, off the tan stucco in his own job photos */
  --clay:       #A44E2C;
  --clay-dk:    #8A3F22;

  --hair:       rgba(51,41,30,.13);
  --measure:    38rem;
}

*,*::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(--plaster);
  background-image:linear-gradient(178deg, var(--plaster) 0%, var(--plaster-2) 100%);
  color:var(--stone);
  /* System stack only — no webfont request, nothing external to fail. */
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
              'Helvetica Neue', Arial, system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
}

/* Plaster grain. Generated in-page by SVG turbulence, so it costs one small
   data URI and no network request. Kept very faint - it should read as the
   tooth of a troweled wall, never as visible noise. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}

.stage, .foot{ position:relative; z-index:1; }

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--clay); color:#fff;
  padding:.7rem 1.1rem; border-radius:0 0 6px 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, 4.5rem) 1.5rem;
  padding-top:max(clamp(2rem,8vw,4.5rem), env(safe-area-inset-top));
}

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

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

.eyebrow{
  margin:0 0 clamp(1.5rem, 4.5vw, 2.2rem);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--clay);
}

.wordmark{ margin:0; }

.name{
  display:block;
  font-family:ui-serif, Georgia, 'Iowan Old Style', 'Palatino Linotype',
              'Times New Roman', serif;
  font-weight:400;
  color:var(--ink);
  line-height:1;
  letter-spacing:.005em;
  /* measured, not guessed - see the note on .trade */
  font-size:clamp(3.1rem, 17vw, 6.4rem);
}

.trade{
  display:block;
  margin-top:.62em;
  font-family:ui-serif, Georgia, 'Iowan Old Style', 'Palatino Linotype',
              'Times New Roman', serif;
  font-weight:400;
  color:var(--stone);
  text-transform:uppercase;
  /* "PLASTERING AND STUCCO" is the longest line on the page. This clamp
     holds it inside the content box from 320px up. Re-measure if the
     business name or the font stack ever changes. */
  font-size:clamp(.78rem, 3.5vw, 1.22rem);
  letter-spacing:.2em;
  text-indent:.2em;          /* optically re-centre the tracked caps */
  line-height:1.4;
}

/* ---- the troweled rule ---- */

.rule{
  width:min(100%, 12rem);
  height:2px;
  margin:clamp(1.7rem, 5vw, 2.4rem) auto clamp(1.6rem, 4.5vw, 2.2rem);
  border:0;
  border-radius:2px;
  background:linear-gradient(90deg,
      rgba(164,78,44,0) 0%, var(--clay) 22%, var(--clay) 78%, rgba(164,78,44,0) 100%);
}

/* ---- the two facts Hubert asked for, in his own words ---- */

.credential{
  margin:0 auto .5rem;
  max-width:24rem;
  font-family:ui-serif, Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-size:clamp(1.18rem, 4.6vw, 1.55rem);
  line-height:1.45;
  color:var(--ink);
  text-wrap:balance;
}

.credential strong{ font-weight:700; }

.area{
  margin:0 auto;
  max-width:24rem;
  font-size:clamp(.92rem, 3.4vw, 1rem);
  line-height:1.6;
  color:var(--stone);
  text-wrap:balance;
}

.note{
  margin:clamp(1.6rem, 5vw, 2.1rem) auto 0;
  max-width:23rem;
  font-size:clamp(.88rem, 3.2vw, .95rem);
  line-height:1.65;
  color:var(--stone-lt);
  text-wrap:pretty;
}

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

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

.foot p{
  margin:0;
  font-size:.76rem;
  letter-spacing:.02em;
  color:var(--stone-lt);
}

/* ---- entrance: slow and settled, not bouncy ---- */

.card > *{ animation:settle .9s cubic-bezier(.22,.72,.24,1) both; }
.card > .eyebrow   { animation-delay:.02s; }
.card > .wordmark  { animation-delay:.10s; }
.card > .rule      { animation-delay:.34s; }
.card > .credential{ animation-delay:.42s; }
.card > .area      { animation-delay:.50s; }
.card > .note      { animation-delay:.58s; }

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

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

.notfound .code{
  display:block;
  font-family:ui-serif, Georgia, 'Times New Roman', serif;
  font-size:clamp(3.4rem, 17vw, 5.6rem);
  font-weight:400;
  line-height:1;
  color:var(--clay);
  margin:0 0 .18em;
}

.back{
  display:inline-block;
  margin-top:1.8rem;
  padding:.82rem 1.7rem;
  border-radius:4px;
  background:var(--clay);
  color:#fff;
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.03em;
  text-decoration:none;
  transition:background .18s ease, box-shadow .18s ease;
  box-shadow:0 2px 10px rgba(51,41,30,.14);
}
.back:hover,
.back:focus-visible{ background:var(--clay-dk); box-shadow:0 4px 14px rgba(51,41,30,.2); }
.back:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

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

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

@media (prefers-contrast: more){
  .area,.note{ color:#4A4034; }
  body::before{ opacity:.2; }
}

/* Deliberately light in both schemes: plaster is the point. */
@media (prefers-color-scheme: dark){
  body{ background-color:#FBF8F2; }
}

@media (max-width:360px){
  .trade{ letter-spacing:.15em; text-indent:.15em; }
}