/*
Theme Name: H2O STL — Under Construction
Description: Single-page under-construction theme for h2ostl.com. Renders the same
  page for every request, so nothing is masked and no file conflicts with WordPress.
  Type and color match wrightbuildingsystems.com.
Author: Wright Building Systems
Version: 1.2
*/

/* Two self-hosted fonts, same families used on wrightbuildingsystems.com.
   Body copy intentionally rides the system stack: it keeps the page to two font
   files, which loads faster and renders cleanly on every device. */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/barlow-condensed-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibm-plex-mono-500.woff2') format('woff2')}

/* Wright Building Systems design tokens. */
:root{
  --ink:#15181C;
  --ink-soft:#1B1F24;
  --red:#FB1D1D;
  --line:#353C46;
  --text:#ECEDEE;
  --muted:#9BA3AD;
  --muted-dim:#71767E;

  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --cond:'Barlow Condensed',Oswald,'Arial Narrow',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gutter:clamp(18px,5vw,64px);
}

*{box-sizing:border-box}
html{height:100%}

/* One viewport, never scrolls. Everything below is sized in vmin so the layout
   shrinks on a short laptop and a phone in landscape, not just a narrow one. */
body{
  margin:0;
  height:100svh;
  min-height:100svh;
  overflow:hidden;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
}

/* Red wash off the top left plus a faint diagonal hatch. Square corners only. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 560px at 14% -12%, rgba(251,29,29,.13), transparent 64%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 9px);
}

.wrap{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(14px,3.2vh,40px) var(--gutter);
}

/* ---- eyebrow ---- */
.eyebrow{
  display:flex;
  align-items:center;
  gap:11px;
  font-family:var(--mono);
  font-weight:500;
  font-size:clamp(9.5px,1.35vmin,12px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 clamp(12px,2.2vh,24px);
}
.eyebrow .tick{
  width:clamp(18px,3vmin,30px);
  height:3px;
  background:var(--red);
  flex:none;
}

/* ---- wordmark ---- */
.wordmark{
  font-family:var(--cond);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:.84;
  font-size:clamp(52px,15.5vmin,172px);
  margin:0;
  color:#fff;
  display:flex;
  align-items:baseline;
  gap:.1em;
}
/* True subscript 2, so it reads as H2O rather than H-2-O. */
.wordmark .two{
  font-size:.46em;
  line-height:1;
  transform:translateY(.1em);
  letter-spacing:0;
  color:#fff;
}
.wordmark .stl{color:var(--red)}

/* 3px red tick under the wordmark, the Wright accent. */
.wordmark-rule{
  width:clamp(90px,22vmin,230px);
  height:3px;
  background:var(--red);
  border:0;
  margin:clamp(14px,2.4vh,26px) 0 clamp(12px,2.1vh,22px);
}

/* ---- copy ---- */
.lede{
  font-family:var(--cond);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-size:clamp(18px,3.5vmin,34px);
  line-height:1.1;
  margin:0 0 clamp(8px,1.5vh,16px);
  color:var(--text);
}

.body{
  font-size:clamp(13.5px,1.75vmin,17px);
  color:var(--muted);
  margin:0 0 clamp(16px,2.8vh,30px);
  max-width:48ch;
}

/* ---- actions ---- */
.actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(10px,1.6vmin,16px);
}

.status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  background:var(--ink-soft);
  padding:clamp(9px,1.4vmin,13px) clamp(13px,1.9vmin,19px);
  font-family:var(--mono);
  font-weight:500;
  font-size:clamp(9.5px,1.3vmin,11.5px);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text);
  margin:0;
}
.status .dot{
  width:7px;
  height:7px;
  background:var(--red);
  flex:none;
}

.cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--red);
  color:#fff;
  text-decoration:none;
  padding:clamp(9px,1.4vmin,13px) clamp(15px,2.1vmin,22px);
  font-family:var(--mono);
  font-weight:500;
  font-size:clamp(9.5px,1.3vmin,11.5px);
  letter-spacing:.15em;
  text-transform:uppercase;
  border:1px solid var(--red);
  transition:background .2s,color .2s;
}
.cta:hover,.cta:focus-visible{background:transparent;color:var(--red)}
.cta .arrow{transition:transform .2s}
.cta:hover .arrow,.cta:focus-visible .arrow{transform:translateX(4px)}

.contact{
  margin:clamp(16px,2.8vh,32px) 0 0;
  font-size:clamp(13px,1.6vmin,16px);
  color:var(--muted);
}
.contact a{
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:2px;
  transition:color .2s,border-color .2s;
  overflow-wrap:anywhere;
}
.contact a:hover,.contact a:focus-visible{color:var(--red);border-bottom-color:var(--red)}

/* ---- footer ---- */
.site-footer{
  position:relative;
  flex:none;
  border-top:1px solid rgba(53,60,70,.75);
  padding:clamp(11px,1.6vh,18px) var(--gutter);
}
.site-footer .inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:4px 18px;
  justify-content:space-between;
  align-items:center;
  font-family:var(--mono);
  font-weight:500;
  font-size:clamp(8.5px,1.15vmin,10.5px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-dim);
}
.site-footer a{color:var(--muted);text-decoration:none;transition:color .2s}
.site-footer a:hover,.site-footer a:focus-visible{color:#fff}

/* Tablet and phone. Two problems get fixed here.

   1. Left-aligned editorial layout needs width to look deliberate. Below 760px
      there isn't any, so it just reads as shoved into the left margin. The
      column centers instead.
   2. vmin tracks the SHORTER axis, which on a tall narrow phone is the width,
      so every size collapsed. The scale switches to vw. */
@media (max-width:760px){
  :root{--gutter:20px}

  .wrap{justify-content:center}
  .wrap > div{width:100%;text-align:center}

  .eyebrow{
    justify-content:center;
    font-size:clamp(10px,2.6vw,12.5px);
    margin-bottom:clamp(14px,2.4vh,22px);
  }
  .eyebrow .tick{width:clamp(22px,6vw,32px)}

  .wordmark{
    justify-content:center;
    font-size:clamp(68px,27vw,150px);
  }

  .wordmark-rule{
    width:clamp(104px,30vw,200px);
    margin-left:auto;
    margin-right:auto;
    margin-top:clamp(16px,2.4vh,24px);
    margin-bottom:clamp(13px,2vh,20px);
  }

  .lede{font-size:clamp(21px,6.2vw,36px)}

  .body{
    font-size:clamp(14.5px,3.8vw,18px);
    max-width:36ch;
    margin-left:auto;
    margin-right:auto;
  }

  /* Buttons stack full width, centered, with comfortable tap targets. */
  .actions{
    flex-direction:column;
    align-items:center;
    width:100%;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
    gap:11px;
  }
  .status,.cta{
    justify-content:center;
    width:100%;
    font-size:clamp(10.5px,2.8vw,12.5px);
    padding:14px 16px;
  }

  .contact{font-size:clamp(14px,3.6vw,17px)}

  .site-footer .inner{
    justify-content:center;
    text-align:center;
    gap:2px 14px;
    font-size:clamp(9px,2.2vw,11px);
  }
}

/* Very small phones: pull the wordmark in a touch so it can never clip. */
@media (max-width:360px){
  .wordmark{font-size:clamp(60px,25vw,100px)}
  .body{font-size:14.5px}
}

/* Landscape phones and short windows: drop the body paragraph rather than let
   anything spill out of the single viewport. */
@media (max-height:460px){
  .body{display:none}
  .wordmark-rule{margin:10px 0 10px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}