/* Styling for the static per-project pages in p/.

   These exist for search engines and for anyone landing on a project from Google
   rather than from the gallery. Deliberately plain HTML with no JavaScript:
   whatever else breaks, these still render.

   Tokens track index.html so a visitor arriving here first does not meet a
   different company. */

:root{
  --brand:#ee7e22; --brand-dark:#cf5f03; --brand-deep:#a04a05; --brand-wash:#fff3e6;
  --ink:#1d1d1f; --muted:#515154; --faint:#6e6e73;
  --line:#d2d2d7; --track:#e8e8ed;
  --bg:#ffffff; --band:#f5f5f7;
  --r:18px; --pill:980px;
}
*{box-sizing:border-box}
body{
  margin:0 auto; padding:30px clamp(16px,4vw,32px) 80px; max-width:840px;
  background:var(--bg); color:var(--ink);
  font-family:'Plus Jakarta Sans','Open Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.47; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%; height:auto}

/* ── brand header ── the same bar the wall wears, static because these pages
   carry no JavaScript beyond the deterrent block. */
.pghead{display:flex; align-items:center; gap:14px; margin-bottom:22px}
.pghead .sp{flex:1}
.brand{display:flex; align-items:center; gap:9px; color:inherit; text-decoration:none}
.brand svg{width:24px; height:24px; border-radius:4px; display:block}
.brand b{font-weight:700; font-size:.94rem; letter-spacing:-.012em}
.brand span{color:var(--faint); font-weight:400; font-size:.94rem}
.hcta{
  background:var(--brand); color:#fff; border-radius:var(--pill);
  padding:8px 18px; font-weight:600; font-size:.84rem; text-decoration:none;
  white-space:nowrap;
}
.hcta:hover{background:var(--brand-dark)}
@media (max-width:480px){.brand span{display:none} .hcta{padding:7px 14px; font-size:.8rem}}

.crumbs{font-size:.82rem; color:var(--faint); margin-bottom:20px}
.crumbs a{color:var(--brand-deep); text-decoration:none}
.crumbs a:hover{text-decoration:underline}

.back{
  display:inline-block; margin-bottom:26px; color:var(--brand-deep);
  text-decoration:none; font-weight:600; font-size:.88rem;
}
.back:hover{text-decoration:underline}

h1{
  font-size:clamp(1.9rem,4.6vw,3rem); line-height:1.06; letter-spacing:-.022em;
  font-weight:700; margin:0 0 .3em; text-wrap:balance;
}
.dek{color:var(--muted); margin:0 0 34px; font-size:1.08rem; letter-spacing:-.012em; max-width:60ch}

.specs{
  width:100%; border-collapse:collapse; background:var(--band);
  border-radius:var(--r); overflow:hidden; margin-bottom:38px;
}
.specs th,.specs td{padding:14px 20px; text-align:left; font-size:.94rem}
.specs tr + tr th,.specs tr + tr td{border-top:1px solid var(--track)}
.specs th{color:var(--faint); font-weight:400; width:36%; white-space:nowrap}
.specs td{font-weight:500}

/* ── product box ── the viewer's card, static. The price hierarchy is the
   owner's ruling: supply leads, the installed from-figure sits beneath it,
   smaller and quieter. */
.prod{background:var(--band); border-radius:var(--r); padding:22px 24px; margin-bottom:38px}
.prod .rng{font-size:.76rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--faint)}
.prod h3{margin:2px 0 10px; font-size:1.25rem; font-weight:700; letter-spacing:-.014em; line-height:1.2}
.prod .nolink{margin:0; color:var(--muted)}
.price{font-weight:700; font-size:1.3rem; letter-spacing:-.014em}
.price small{font-size:.8rem; font-weight:500; color:var(--muted)}
.price2{color:var(--muted); font-size:.92rem; font-weight:600; margin-top:2px}
.price2 small{font-size:.78rem; font-weight:400}
.pmore{margin-top:10px; font-size:.88rem; color:var(--muted)}
.pmore summary{cursor:pointer; color:var(--brand-deep); font-weight:600}
.pmore p{margin:8px 0 0}
.prod dl.spec{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:16px 0 0; font-size:.9rem}
.prod dl.spec dt{color:var(--faint)}
.prod dl.spec dd{margin:0; font-weight:500}

.gallery{display:grid; gap:20px}
.gallery figure{margin:0; border-radius:var(--r); overflow:hidden; background:var(--band)}
.gallery img,.gallery video{width:100%}
.gallery video{height:auto}
.gallery figcaption{padding:12px 18px; font-size:.85rem; color:var(--muted)}
.gallery figcaption:empty{display:none}

/* ── the ways forward ── one mid-scroll, one at the end, both measured by
   their utm_campaign. */
.btn{
  display:inline-block; background:var(--brand); color:#fff; text-decoration:none;
  font-weight:600; padding:14px 26px; border-radius:var(--pill); font-size:.95rem;
}
.btn:hover{background:var(--brand-dark)}
.ctablock{text-align:center; background:var(--band); border-radius:var(--r); padding:34px 24px; margin:38px 0}
.ctablock h2{font-size:1.5rem; margin:0 0 6px; letter-spacing:-.018em}
.ctablock p{color:var(--muted); margin:0 0 16px}
.ctablock .pcall{margin:12px 0 0; font-size:.9rem}
.ctablock .pcall a{color:var(--brand-deep); text-decoration:none; font-weight:600}
.ctablock .pcall a:hover{text-decoration:underline}
.ctablock.mid{margin:0; background:var(--brand-wash)}

.related{margin:44px 0 0}
.related h2{font-size:1.3rem; letter-spacing:-.016em; margin:0 0 16px}
.relgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px}
.relgrid a{display:block; color:inherit; text-decoration:none}
.relgrid img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; background:var(--band)}
.relgrid b{display:block; margin-top:8px; font-size:.9rem; letter-spacing:-.01em; line-height:1.25}
.relgrid span{color:var(--faint); font-size:.8rem}
.relgrid a:hover b{color:var(--brand-deep)}

footer{margin-top:56px; border-top:1px solid var(--track); padding-top:26px; font-size:.9rem; color:var(--muted)}
footer p{margin:0 0 .9em}
footer b{color:var(--ink)}
footer a{color:var(--brand-deep); text-decoration:none}
footer a:hover{text-decoration:underline}
footer .fnap{display:flex; flex-direction:column; gap:3px; margin:0 0 .9em}
footer .fnap b{margin-bottom:1px}
footer .fnap span{color:var(--faint)}
footer .back{margin:0}

/* Kept for anything older still floating around a cache. */
.cta{margin-top:44px}
.cta a{
  display:inline-block; background:var(--brand); color:#fff; text-decoration:none;
  font-weight:600; padding:14px 26px; border-radius:var(--pill); font-size:.95rem;
}
.cta a:hover{background:var(--brand-dark)}