/* ===========================================================
   Perseid Echo Creations — local service pages
   Tokens and primitives are copied verbatim from the homepage
   so the two surfaces cannot drift apart. If a token changes
   in index.html, change it here in the same commit.
   =========================================================== */

:root{
  /* ground: the shop at night */
  --shop:        oklch(0.155 0.018 268);
  --shop-2:      oklch(0.205 0.020 265);
  --shop-3:      oklch(0.258 0.021 264);
  --hair:        oklch(0.98 0.004 260 / 0.13);
  --hair-strong: oklch(0.98 0.004 260 / 0.24);

  /* type on the ground */
  --chalk:       oklch(0.945 0.004 250);
  --steel:       oklch(0.712 0.011 258);
  --steel-dim:   oklch(0.645 0.012 258);

  /* the paper: documents, the bench, the map */
  --paper:       oklch(0.968 0.007 84);
  --paper-2:     oklch(0.936 0.010 82);
  --paper-edge:  oklch(0.855 0.014 80);
  --ink:         oklch(0.205 0.018 265);
  --ink-soft:    oklch(0.435 0.016 262);
  --ink-faint:   oklch(0.515 0.015 261);

  /* the working light */
  --flame:       oklch(0.702 0.191 40.5);
  --flame-deep:  oklch(0.615 0.183 38);
  --lamp:        oklch(0.795 0.112 68);
  --go:          oklch(0.745 0.132 158);

  --ui:   'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, Menlo, monospace;

  --gut:  clamp(20px, 5.2vw, 76px);
  --wide: 1280px;
  --read: 1020px;

  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--shop);
  color:var(--chalk);
  font-family:var(--ui);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

:focus-visible{ outline:2.5px solid var(--flame); outline-offset:3px; border-radius:3px; }
::selection{ background:var(--flame); color:oklch(0.16 0.02 265); }

.wrap{ width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:var(--gut); }
.narrow{ max-width:var(--read); }

/* ---------- shared type ---------- */
.tag{
  font-family:var(--mono);
  font-size:clamp(10.5px,1.05vw,12px);
  font-weight:500;
  letter-spacing:0.19em;
  text-transform:uppercase;
  color:var(--lamp);
}
.tag--ink{ color:oklch(0.52 0.10 55); }

h1,h2,h3,h4{ font-weight:600; letter-spacing:-0.022em; line-height:1.06; }

.h-xl{ font-size:clamp(34px,5.4vw,62px); line-height:1.03; letter-spacing:-0.030em; }
.h-lg{ font-size:clamp(29px,4.1vw,50px); line-height:1.07; letter-spacing:-0.026em; }
.h-md{ font-size:clamp(21px,2.1vw,27px); line-height:1.2;  letter-spacing:-0.016em; }
.h-sm{ font-size:clamp(17px,1.5vw,19px); line-height:1.3;  letter-spacing:-0.01em; }

.lede{ font-size:clamp(17px,1.5vw,21px); line-height:1.55; color:var(--steel); max-width:60ch; }
.lede--ink{ color:var(--ink-soft); }
p{ max-width:68ch; }

.sec{ padding-block:clamp(56px,8vw,116px); }
.sec--paper{ background:var(--paper); color:var(--ink); }
.sec--band{ background:var(--shop-2); }

.rule{ height:1px; background:var(--hair); border:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ui); font-size:16px; font-weight:600; letter-spacing:-0.008em;
  padding:16px 26px; border-radius:2px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; text-align:center;
  transition:background-color .3s var(--e-out), color .3s var(--e-out), border-color .3s var(--e-out), transform .3s var(--e-out);
}
.btn--go{ background:var(--flame); color:oklch(0.16 0.02 265); }
.btn--go:hover{ background:var(--flame-deep); transform:translateY(-1px); }
.btn--line{ background:transparent; color:var(--chalk); border-color:var(--hair-strong); }
.btn--line:hover{ border-color:var(--flame); color:var(--flame); }
.btn--ink{ background:var(--ink); color:var(--paper); }
.btn--ink:hover{ background:oklch(0.30 0.02 265); transform:translateY(-1px); }
.btn--inkline{ background:transparent; color:var(--ink); border-color:oklch(0.205 0.018 265 / 0.28); }
.btn--inkline:hover{ border-color:var(--ink); }

/* ===========================================================
   TOP BAR — same primitive as partners.html
   =========================================================== */
.topbar{
  border-bottom:1px solid var(--hair);
  padding-block:16px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
}
.topbar__in{ display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; align-items:center; }
.topbar a{ color:var(--steel); text-decoration:none; }
.topbar a:hover{ color:var(--flame); }
.topbar__b{ color:var(--chalk); }
/* space-between on a wrapped row strands one item hard right, which reads as
   a mistake. Below the wrap point, pack everything left instead. */
@media (max-width:620px){
  .topbar__in{ justify-content:flex-start; gap:8px 18px; }
  .topbar__b{ flex:1 0 100%; }
}

/* ---------- breadcrumb ---------- */
/* --steel-dim here sat at 4.05:1 over the brighter bench plate at 375px.
   The crumb is small uppercase mono, so it gets the brighter grey. */
.crumb{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--steel); }
.crumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.crumb a{ color:var(--steel); text-decoration:none; }
.crumb a:hover{ color:var(--flame); }
.crumb li + li::before{ content:'/'; margin-right:10px; color:var(--steel-dim); }

/* ===========================================================
   HERO
   =========================================================== */
.hero{ position:relative; isolation:isolate; overflow:hidden; }
/* The photograph has lit signage in it ("Perseid Echo Machine Shop") which
   lands directly behind the H1 at desktop widths and reads as words competing
   with the headline. Same problem partners.html hit. Same fix: the horizontal
   veil stays near-solid across the text column and only opens past ~70%, over
   the machines. The brightness() filter and the veil are tuned together —
   retune both if the art ever changes. */
.hero__art{
  position:absolute; inset:0; z-index:-2;
  background:url('../../art/ind-street.webp') center 42% / cover no-repeat;
  filter:brightness(0.68);
}
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom, oklch(0.155 0.018 268 / 0.80) 0%, oklch(0.155 0.018 268 / 0.56) 36%, oklch(0.155 0.018 268 / 0.86) 80%, var(--shop) 100%),
    linear-gradient(to right, oklch(0.155 0.018 268 / 0.93) 0%, oklch(0.155 0.018 268 / 0.90) 48%, oklch(0.155 0.018 268 / 0.42) 74%, oklch(0.155 0.018 268 / 0.60) 100%);
}
.hero__inner{
  padding-block:clamp(34px,6vw,72px) clamp(30px,5vw,64px);
  display:grid; gap:clamp(16px,2.2vw,28px);
}
.hero__head{ max-width:21ch; }
.hero__head em{ font-style:normal; color:var(--flame); }
.hero__sub{ max-width:56ch; color:oklch(0.88 0.008 250); font-size:clamp(16.5px,1.5vw,21px); line-height:1.5; }
.hero__acts{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
@media (max-width:560px){
  .hero__acts{ display:grid; grid-template-columns:1fr; gap:9px; }
  .hero__acts .btn{ width:100%; }
}
.hero__note{
  font-family:var(--mono); font-size:12.5px; color:var(--steel);
  display:flex; align-items:flex-start; gap:9px; letter-spacing:-0.005em; line-height:1.5;
}
.hero__note svg{ flex:none; color:var(--go); margin-top:3px; }

/* ===========================================================
   WORK ORDERS — the paper cards
   =========================================================== */
.cards{ display:grid; gap:16px; margin-top:clamp(26px,3.4vw,40px); }
@media (min-width:760px){ .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.card{
  background:var(--paper-2);
  border:1px solid var(--paper-edge);
  border-radius:2px;
  padding:clamp(20px,2.2vw,26px);
  color:var(--ink);
  display:grid; gap:9px; align-content:start;
}
.card__n{ font-family:var(--mono); font-size:11px; letter-spacing:0.19em; text-transform:uppercase; color:oklch(0.52 0.10 55); }
.card p{ color:var(--ink-soft); font-size:15.5px; max-width:none; }

/* ---------- the staircase, condensed ---------- */
.steps{ display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:2px; margin-top:clamp(24px,3vw,36px); }
.step{ background:var(--shop); padding:clamp(18px,2vw,24px); display:grid; gap:7px; }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.step__n{ font-family:var(--mono); font-size:11px; letter-spacing:0.19em; text-transform:uppercase; color:var(--lamp); }
.step__p{ font-family:var(--mono); font-size:13px; color:var(--go); }
.step p{ color:var(--steel); font-size:15px; max-width:none; }

/* ---------- workflow pages: the bench, not the street ----------
   Different photograph so a visitor who lands on a workflow page and then a
   city page can tell they are in two different parts of the site. Same veil
   treatment and the same reason: ind-bench.webp has lit surfaces in it. */
.hero--bench .hero__art{
  background-image:url('../../art/ind-bench.webp');
  background-position:center 46%;
  /* ind-bench is a much darker plate than ind-street, so the 0.68 tuned for
     the street shot flattens it to near-black. Lifted here, and the veil
     below is eased to match — the pair is always tuned together. */
  filter:brightness(0.92);
}
.hero--bench .hero__scrim{
  background:
    linear-gradient(to bottom, oklch(0.155 0.018 268 / 0.76) 0%, oklch(0.155 0.018 268 / 0.54) 36%, oklch(0.155 0.018 268 / 0.84) 80%, var(--shop) 100%),
    linear-gradient(to right, oklch(0.155 0.018 268 / 0.92) 0%, oklch(0.155 0.018 268 / 0.89) 48%, oklch(0.155 0.018 268 / 0.38) 76%, oklch(0.155 0.018 268 / 0.58) 100%);
}

/* ---------- numbered steps on paper ----------
   These are instructions the reader is meant to act on, so the number has to
   carry weight — a 12px mono label reads as chrome and gets skipped. Cards
   sit on --paper-2 against the section's --paper so the edge is visible
   without a heavy border. */
.steps--ink{
  list-style:none;
  background:transparent; border:0;
  gap:14px;
  margin-top:clamp(20px,2.6vw,30px);
}
@media (min-width:820px){ .steps--ink{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.steps--ink .step{
  background:var(--paper-2);
  border:1px solid var(--paper-edge);
  border-radius:2px;
  align-content:start;
  gap:10px;
}
.steps--ink .step p{ color:var(--ink-soft); font-size:15.5px; max-width:none; }
.steps--ink .step__n{
  font-family:var(--mono);
  font-size:26px; line-height:1;
  font-weight:600; letter-spacing:-0.02em;
  color:oklch(0.475 0.145 42);
  text-transform:none;
}

/* ---------- the buy/build decision ---------- */
.duo{ display:grid; gap:18px; margin-top:clamp(22px,2.8vw,32px); }
@media (min-width:820px){ .duo{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 40px; } }
.duo__col{
  border:1px solid var(--hair-strong); border-radius:2px;
  padding:clamp(20px,2.2vw,26px);
}
.duo__h{ margin-bottom:13px; }
.ticks{ list-style:none; display:grid; gap:11px; }
.ticks li{
  position:relative; padding-left:26px;
  color:var(--steel); font-size:15.5px; line-height:1.5;
}
.ticks li::before{
  content:''; position:absolute; left:2px; top:0.55em;
  width:9px; height:9px; border-radius:50%;
  background:var(--steel-dim);
}
.ticks--flame li::before{ background:var(--flame); }

/* ---------- copyable link / message (referral page) ---------- */
.copybox{
  margin-top:clamp(22px,2.8vw,32px);
  background:var(--paper-2);
  border:1px solid var(--paper-edge);
  border-radius:2px;
  padding:clamp(18px,2vw,24px);
}
.copybox__label{
  font-family:var(--mono); font-size:11px; letter-spacing:0.19em;
  text-transform:uppercase; color:oklch(0.52 0.10 55); margin-bottom:11px;
}
.copybox__row{ display:grid; gap:10px; }
@media (min-width:660px){
  .copybox__row{ grid-template-columns:minmax(0,1fr) auto; align-items:stretch; }
  .copybox__row--stack{ grid-template-columns:minmax(0,1fr); }
  .copybox__row--stack .btn{ justify-self:start; }
}
.copybox__in{
  width:100%;
  font-family:var(--mono); font-size:14px; line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--paper-edge); border-radius:2px;
  padding:14px 15px;
}
/* tall enough for the whole suggested message: a clipped box reads as
   broken and nobody scrolls a textarea to check what they are copying */
.copybox__in--ta{ resize:vertical; min-height:186px; }
.copybox__in:focus-visible{ outline:2.5px solid var(--flame); outline-offset:2px; }
.copybox__note{
  margin-top:11px; font-size:13.5px; color:var(--ink-faint); max-width:64ch;
}

/* ---------- do not build this yet ---------- */
.notyet{
  border-left:3px solid var(--lamp);
  padding:clamp(18px,2vw,24px) clamp(18px,2.2vw,28px);
  background:var(--shop-2);
  border-radius:0 2px 2px 0;
}
.notyet p:not(.tag){ color:var(--steel); font-size:16px; }

/* ink-surface variant of the pill links */
.near--ink{
  border-color:oklch(0.205 0.018 265 / 0.28) !important;
  color:var(--ink-soft) !important;
}
.near--ink:hover{ border-color:var(--ink) !important; color:var(--ink) !important; }

/* ---------- local strip ---------- */
.here{ display:grid; gap:14px; }
@media (min-width:880px){ .here{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px 48px; } }
.here p{ color:var(--steel); }

/* ---------- nearby links ---------- */
.near{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.near a{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em;
  border:1px solid var(--hair-strong); border-radius:2px;
  padding:9px 14px; text-decoration:none; color:var(--steel);
  transition:border-color .3s var(--e-out), color .3s var(--e-out);
}
.near a:hover{ border-color:var(--flame); color:var(--flame); }

/* ---------- FAQ ---------- */
.faq{ margin-top:clamp(24px,3vw,36px); border-top:1px solid var(--hair); }
.faq details{ border-bottom:1px solid var(--hair); }
.faq summary{
  cursor:pointer; list-style:none; padding:19px 44px 19px 0; position:relative;
  font-weight:600; font-size:clamp(16.5px,1.4vw,18.5px); letter-spacing:-0.014em;
  transition:color .3s var(--e-out);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; position:absolute; right:6px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--steel); border-bottom:2px solid var(--steel);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--e-out);
}
.faq details[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.faq summary:hover{ color:var(--flame); }
.faq__a{ padding:0 0 22px; }
.faq__a p{ color:var(--steel); font-size:16px; }
.faq__a p + p{ margin-top:11px; }
.faq__a a{ color:var(--lamp); }

/* ---------- close + footer ---------- */
.close{ text-align:left; }
.close__acts{ margin-top:clamp(24px,3vw,34px); display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:560px){
  .close__acts{ display:grid; grid-template-columns:1fr; gap:9px; }
  .close__acts .btn{ width:100%; }
}

.foot{ border-top:1px solid var(--hair); padding-block:38px 44px; }
.foot__in{ display:flex; flex-wrap:wrap; gap:18px 34px; justify-content:space-between; align-items:baseline; }
.foot__b{ font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--steel); }
.foot__nav{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14.5px; }
.foot__nav a{ color:var(--steel); text-decoration:none; }
.foot__nav a:hover{ color:var(--flame); }
.foot__fine{ margin-top:22px; font-size:13px; color:var(--steel-dim); max-width:74ch; }

/* ---------- hub index ---------- */
.hub{ display:grid; gap:16px; margin-top:clamp(26px,3.4vw,40px); }
@media (min-width:700px){ .hub{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1060px){ .hub{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.hub__a{
  border:1px solid var(--hair-strong); border-radius:2px;
  padding:clamp(20px,2.2vw,26px); text-decoration:none;
  display:grid; gap:8px; align-content:start;
  transition:border-color .3s var(--e-out), background-color .3s var(--e-out), transform .3s var(--e-out);
}
.hub__a:hover{ border-color:var(--flame); background:var(--shop-2); transform:translateY(-2px); }
.hub__a p{ color:var(--steel); font-size:15px; max-width:none; }
.hub__a .go{ font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--flame); }

/* ---------- reveal ---------- */
.rise{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--e-out), transform .8s var(--e-out); }
.rise.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .rise{ opacity:1; transform:none; }
}