/* ============================================================
   ALLASPECT — "CYANOTYPE SURVEY"
   The site as a precision engineering drawing of the marketing
   landscape. Blueprint field · drafting grid · survey flare.
   Field #0C1030 · Panel #11163D · Ink #E9EDFF · Flare #FF5A1F
   Trace #7FB4FF · Line rgba(150,170,255,α)
   Display: Archivo Expanded 800 · Body: Archivo · Data: Martian Mono
   ============================================================ */

:root{
  --field:#0C1030; --panel:#11163D; --panel-2:#171D4D;
  --ink:#E9EDFF; --dim:rgba(233,237,255,.64); --faint:rgba(233,237,255,.38);
  --flare:#FF5A1F; --flare-soft:rgba(255,90,31,.14);
  --trace:#7FB4FF; --trace-soft:rgba(127,180,255,.12);
  --line:rgba(150,170,255,.30); --line-soft:rgba(150,170,255,.13);
  --max:1180px;
  --disp:"Archivo",system-ui,sans-serif;
  --body:"Archivo",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;
  --notch:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  background:var(--field);
  color:var(--ink);
  font:400 16.5px/1.7 var(--body);
  -webkit-font-smoothing:antialiased;
  /* drafting grid: minor + major */
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px),
    linear-gradient(rgba(150,170,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,170,255,.05) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
}
a{color:var(--trace);text-decoration:none}
a:hover{color:var(--ink)}
img,svg{max-width:100%;display:block}
::selection{background:var(--flare);color:var(--field)}
:focus-visible{outline:2px solid var(--flare);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* ---- shared vocabulary ---------------------------------- */

/* survey station label: STA 045° ——— NAME */
.sta{
  font:400 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--flare);display:flex;align-items:center;gap:14px;white-space:nowrap
}
.sta::after{content:"";height:1px;flex:0 1 90px;background:linear-gradient(90deg,var(--flare),transparent)}
.sta .dim{color:var(--faint)}

/* display type: expanded, heavy, uppercase */
.disp{
  font-family:var(--disp);font-weight:800;font-stretch:125%;
  text-transform:uppercase;letter-spacing:-.01em;line-height:.98;
}

/* notched instrument button */
.btn{
  --c:var(--ink);
  display:inline-flex;align-items:center;gap:10px;
  font:600 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--c);padding:16px 24px;border:1px solid var(--c);
  clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch));
  transition:background .15s,color .15s;position:relative;background:transparent;cursor:pointer
}
.btn:hover{background:var(--ink);color:var(--field)}
.btn.flare{--c:var(--flare);background:var(--flare);color:var(--field);border-color:var(--flare)}
.btn.flare:hover{background:transparent;color:var(--flare)}
.btn::after{content:"→";font-family:var(--body)}
.btn.noarrow::after{content:none}

/* panel with corner ticks (registration marks) */
.plate{position:relative;border:1px solid var(--line);background:var(--panel);padding:28px}
.plate::before,.plate::after,
.plate>.tick::before,.plate>.tick::after{
  content:"";position:absolute;width:9px;height:9px;border-color:var(--trace);border-style:solid
}
.plate::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
.plate::after{top:-1px;right:-1px;border-width:2px 2px 0 0}
.plate>.tick::before{bottom:-1px;left:-1px;border-width:0 0 2px 2px}
.plate>.tick::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.plate:hover{border-color:rgba(150,170,255,.55)}

/* ---- header: instrument bar ------------------------------ */
header.site{
  border-bottom:1px solid var(--line);
  background:rgba(12,16,48,.86);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:50
}
.nav{display:flex;align-items:center;height:66px;gap:32px}
.logo{display:flex;align-items:center;gap:12px;color:var(--ink)}
.logo:hover{color:var(--ink)}
.logo svg{width:30px;height:30px}
.logo .word{font:800 17px/1 var(--disp);font-stretch:125%;text-transform:uppercase;letter-spacing:.02em}
.nav-links{display:flex;gap:26px;align-items:center;margin-left:auto;font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.nav-links a{color:var(--dim)}
.nav-links a:hover{color:var(--ink)}
.nav-links a.cta{color:var(--flare);border:1px solid var(--flare);padding:10px 16px;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.nav-links a.cta:hover{background:var(--flare);color:var(--field)}
.telemetry{font:400 10.5px/1.5 var(--mono);letter-spacing:.08em;color:var(--faint);
  border-left:1px solid var(--line);padding-left:24px;text-transform:uppercase;white-space:nowrap}
.telemetry b{color:var(--trace);font-weight:400}

/* ---- hero: the azimuth dial ------------------------------ */
.hero{padding:96px 0 84px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(46px,6.2vw,86px);margin:26px 0 0}
.hero h1 .fl{color:var(--flare)}
.hero .sub{margin-top:26px;font-size:17.5px;color:var(--dim);max-width:54ch}
.hero .sub b{color:var(--ink);font-weight:600}
.hero-actions{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}

.dial-stage{display:flex;justify-content:center;align-items:center;position:relative}
#dial{width:min(420px,80vw);height:auto}
.sweep{transform-origin:210px 210px;animation:sweep 22s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.dial-readout{
  position:absolute;bottom:6%;left:50%;transform:translateX(-50%);
  font:400 10.5px/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--flare);text-align:center;white-space:nowrap
}

/* ---- sections -------------------------------------------- */
section.band{padding:76px 0;border-top:1px solid var(--line)}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:40px}
.sec-head h2{font-size:clamp(30px,3.8vw,48px);margin-top:18px}
.sec-head .more{font:600 11.5px/1 var(--mono);letter-spacing:.14em;color:var(--flare);white-space:nowrap}
.sec-head .more:hover{color:var(--ink)}

/* insight plates */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plate.post-card{display:flex;flex-direction:column;gap:14px;min-height:230px}
.post-card .idx{font:400 10.5px/1 var(--mono);letter-spacing:.16em;color:var(--faint);text-transform:uppercase;display:flex;justify-content:space-between}
.post-card .idx .cat{color:var(--trace)}
.post-card h3{font:700 19px/1.32 var(--body);letter-spacing:-.01em}
.post-card h3 a{color:var(--ink)}
.post-card h3 a:hover{color:var(--flare)}
.post-card p{font-size:14.5px;color:var(--dim)}
.post-card .meta{margin-top:auto;font:400 11px/1 var(--mono);color:var(--faint);letter-spacing:.08em;text-transform:uppercase}

/* category plates on home */
.plate.cat-card h3{font:800 20px/1.1 var(--disp);font-stretch:118%;text-transform:uppercase}
.plate.cat-card h3 a{color:var(--ink)}
.plate.cat-card h3 a:hover{color:var(--flare)}
.plate.cat-card .count{font:400 10.5px/1 var(--mono);letter-spacing:.16em;color:var(--flare);text-transform:uppercase}
.plate.cat-card p{font-size:14px;color:var(--dim);margin-top:10px}

/* ---- tools: parts schedule ------------------------------- */
.tool-cat{margin-bottom:72px}
.tool-cat>h2{font-size:clamp(26px,3.2vw,40px);margin:16px 0 10px}
.tool-cat>p.catdesc{color:var(--dim);max-width:72ch;margin-bottom:26px;font-size:15px}
.schedule{border:1px solid var(--line)}
.schedule .shead,.tool{
  display:grid;grid-template-columns:56px 220px 1fr 210px;gap:0;align-items:stretch
}
.schedule .shead{
  font:600 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--line);background:var(--panel)
}
.schedule .shead>span{padding:12px 16px;border-right:1px solid var(--line-soft)}
.schedule .shead>span:last-child{border-right:0}
.tool{border-bottom:1px solid var(--line-soft);transition:background .12s}
.tool:last-child{border-bottom:0}
.tool:hover{background:var(--trace-soft)}
.tool>*{padding:16px;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;justify-content:center}
.tool>*:last-child{border-right:0}
.tool .tno{font:400 11px/1 var(--mono);color:var(--faint)}
.tool .tname a{font:700 15.5px/1.3 var(--body);color:var(--ink)}
.tool .tname a:hover{color:var(--flare)}
.tool .tname a::after{content:" ↗";font-size:11px;color:var(--trace)}
.tool .tdesc{font-size:14px;color:var(--dim)}
.tool .tbest{font:400 11px/1.6 var(--mono);color:var(--trace);text-transform:uppercase;letter-spacing:.04em}

/* ---- article: readable long-form on the field ------------ */
article.post{max-width:760px;margin:0 auto;padding:72px 28px 88px}
article.post .sta{margin-bottom:22px}
article.post h1{font-size:clamp(34px,4.6vw,58px);margin-bottom:22px}
article.post .postmeta{
  display:flex;gap:0;border:1px solid var(--line);margin-bottom:48px;
  font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)
}
article.post .postmeta span{padding:12px 18px;border-right:1px solid var(--line)}
article.post .postmeta span:last-child{border-right:0}
article.post h2{font:800 26px/1.15 var(--disp);font-stretch:118%;text-transform:uppercase;margin:52px 0 18px;
  padding-top:20px;border-top:1px solid var(--line)}
article.post h3{font:700 19px/1.35 var(--body);margin:34px 0 12px;color:var(--ink)}
article.post p{margin:0 0 20px;color:rgba(233,237,255,.86)}
article.post ul,article.post ol{margin:0 0 20px 24px;color:rgba(233,237,255,.86)}
article.post li{margin-bottom:10px}
article.post li::marker{color:var(--flare)}
article.post blockquote{border-left:2px solid var(--flare);padding:6px 0 6px 22px;color:var(--dim);margin:0 0 20px}
article.post strong{color:var(--ink);font-weight:700}
article.post a{color:var(--trace);border-bottom:1px solid rgba(127,180,255,.4)}
article.post a:hover{color:var(--ink);border-color:var(--ink)}
article.post table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:14.5px;border:1px solid var(--line)}
article.post th,article.post td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
article.post th{font:600 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;background:var(--panel)}

/* ---- FAQ -------------------------------------------------- */
.faq{border:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq details:last-child{border-bottom:0}
.faq summary{
  font:700 15.5px/1.45 var(--body);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:18px;padding:18px 20px;color:var(--ink)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 20px/1 var(--mono);color:var(--flare);flex:none}
.faq details[open] summary::after{content:"−"}
.faq details[open]{background:var(--panel)}
.faq details p{padding:0 20px 20px;color:var(--dim);font-size:15px;max-width:75ch;margin:0}

/* ---- newsletter: transmission panel ----------------------- */
.news{
  border:1px solid var(--flare);background:linear-gradient(180deg,var(--flare-soft),transparent 65%),var(--panel);
  padding:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;position:relative
}
.news::before{content:"";position:absolute;top:-1px;left:-1px;width:12px;height:12px;border:2px solid var(--flare);border-width:2px 0 0 2px}
.news::after{content:"";position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;border:2px solid var(--flare);border-width:0 2px 2px 0}
.news h2{font-size:clamp(26px,3.4vw,42px);margin-top:16px}
.news h2 .fl{color:var(--flare)}
.news p{color:var(--dim);margin-top:14px;font-size:15px}
.news form{display:flex;gap:0;border:1px solid var(--ink)}
.news input[type=email]{
  flex:1;min-width:0;padding:16px 18px;border:0;background:transparent;color:var(--ink);
  font:400 14px/1 var(--mono)
}
.news input::placeholder{color:var(--faint)}
.news button{
  padding:16px 24px;border:0;background:var(--flare);color:var(--field);
  font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer
}
.news button:hover{background:var(--ink)}

/* ---- page head -------------------------------------------- */
.page-head{padding:72px 0 12px}
.page-head h1{font-size:clamp(38px,5.4vw,72px);margin-top:22px}
.page-head p{margin-top:20px;font-size:17px;color:var(--dim);max-width:64ch}

/* ---- footer: engineering title block ----------------------- */
footer.site{margin-top:88px;border-top:1px solid var(--line)}
.tblock{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.tblock>div{border-right:1px solid var(--line);padding:22px 22px 26px}
.tblock>div:last-child{border-right:0}
.tblock .lbl{font:600 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:12px}
.tblock a{display:block;color:var(--dim);font-size:14px;margin-bottom:8px}
.tblock a:hover{color:var(--ink)}
.tblock .brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.tblock .brand .word{font:800 16px/1 var(--disp);font-stretch:125%;text-transform:uppercase}
.tblock .desc{color:var(--faint);font-size:12.5px;line-height:1.6;margin-top:12px;max-width:36ch}
.tbar{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0;
  font:400 10px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.tbar .fl{color:var(--flare)}

/* ---- 404 --------------------------------------------------- */
.err{padding:120px 0 140px}

/* ---- responsive -------------------------------------------- */
@media (max-width:940px){
  .hero .wrap{grid-template-columns:1fr}
  .dial-stage{order:-1;margin-bottom:-8px}
  #dial{width:min(280px,70vw)}
  .grid3{grid-template-columns:1fr}
  .schedule .shead{display:none}
  .tool{grid-template-columns:1fr;border-bottom:1px solid var(--line)}
  .tool>*{border-right:0;padding:10px 16px}
  .tool .tno{display:none}
  .news{grid-template-columns:1fr;padding:36px 26px}
  .tblock{grid-template-columns:1fr 1fr}
  .tblock>div{border-bottom:1px solid var(--line)}
  .telemetry{display:none}
  .nav-links{gap:16px}
  .nav-links a.hide-m{display:none}
  .hero{padding:56px 0 56px}
}