/* =============================================================
   Civic Arts — Website mock (page layout)
   Layered on top of ../colors_and_type.css tokens.
   ============================================================= */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ca-paper);color:var(--ca-body)}
img{max-width:100%;display:block}

.wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--sp-8)}

/* ---------- Header ---------- */
.hd{
  position:sticky;top:0;z-index:40;
  background:color-mix(in oklab, var(--ca-paper) 88%, transparent);
  backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid var(--rule);
}
.hd__in{display:flex;align-items:center;gap:var(--sp-8);height:72px;max-width:var(--content-max);margin:0 auto;padding:0 var(--sp-8)}
.hd__brand{display:flex;align-items:center}
.hd__brand img{height:30px;width:auto}
.hd__nav{display:flex;gap:var(--sp-6);margin-left:auto}
.hd__nav a{
  font-family:var(--font-sans);font-weight:500;font-size:var(--fs-14);
  color:var(--ca-ink-800);text-decoration:none;letter-spacing:0;
}
.hd__nav a:hover{color:var(--ca-tide-700)}
.hd__nav a.is-active{color:var(--ca-ink-900);font-weight:600}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-sans);font-weight:600;font-size:var(--fs-14);
  border-radius:var(--r-md);padding:10px 18px;cursor:pointer;border:1px solid transparent;
  text-decoration:none;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
}
.btn--accent{background:var(--ca-tide-600);color:#fff}
.btn--accent:hover{background:var(--ca-tide-700);color:#fff}
.btn--primary{background:var(--ca-ink-900);color:var(--ca-cream)}
.btn--primary:hover{background:var(--ca-ink-800)}
.btn--ghost{background:transparent;color:var(--ca-ink-900);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--ca-ink-900)}
.btn--on-ink{}
.btn--ghost.btn--on-ink{color:var(--ca-cream);border-color:rgba(244,240,232,.4)}
.btn--ghost.btn--on-ink:hover{border-color:var(--ca-cream)}

/* ---------- Section scaffolding ---------- */
.sec{padding:var(--sp-24) 0}

/* Full-bleed hero image — the one photographic moment below the banner.
   Empty-state prompt is dark-on-light (component default), so keep a light
   backdrop until a photo is dropped; the photo then covers the full bleed. */
.heroimg{width:100%;background:var(--ca-cream)}
.heroimg__slot{
  display:block;width:100%;height:clamp(360px,58vh,660px);
}
.sec--cream{background:var(--ca-cream)}
.sec--sand{background:var(--ca-sand)}
.sec--ink{background:var(--ca-ink-900);color:var(--ca-cream)}
.sec--plum{background:var(--ca-plum);color:var(--ca-cream)}
.sec--citron{background:var(--ca-citron);color:var(--ca-ink-900)}

/* Plum sections = editorial / people. Invert text onto the deep mauve. */
.sec--plum .eyebrow,.sec--plum .eyebrow--inv{color:var(--ca-tide-400)}
.sec--plum .sec__title,.sec--plum .sec__title--inv{color:#fff}
.sec--plum .about__lead{color:var(--ca-citron)}
.sec--plum .about__lead em{color:var(--ca-citron)}
.sec--plum .prose p{color:color-mix(in oklab,var(--ca-cream) 88%, transparent)}
.sec--plum .founder{border-top-color:rgba(244,240,232,.2)}
.sec--plum .founder__name{color:#fff}
.sec--plum .founder__role{color:var(--ca-tide-400)}
.sec--plum .founder p{color:color-mix(in oklab,var(--ca-cream) 88%, transparent)}

/* Citron sections = let's discuss / work together. Dark ink text on the bright ground. */
.sec--citron .eyebrow,.sec--citron .eyebrow--inv{color:var(--ca-ink-700)}
.sec--citron .sec__title,.sec--citron .sec__title--inv{color:var(--ca-ink-900)}
.sec--citron .approach__lead{color:var(--ca-ink-800)}
.sec--citron .contact h2{color:var(--ca-ink-900)}
.sec--citron .contact h2 em,.sec--citron .sec__title em{color:var(--ca-ink-900)}
.sec--citron .contact p{color:var(--ca-ink-800)}
.sec--citron .contact__email{color:var(--ca-ink-900)}
.sec--citron .field span{color:var(--ca-ink-700)}
.sec--citron .field input,.sec--citron .field select,.sec--citron .field textarea{color:var(--ca-ink-900);background:rgba(255,255,255,.5);border-color:rgba(19,41,61,.28)}
.sec--citron .field input::placeholder,.sec--citron .field textarea::placeholder{color:rgba(19,41,61,.5)}
.sec--tight{padding:var(--sp-16) 0}
.eyebrow{
  font-family:var(--font-sans);font-weight:600;font-size:var(--fs-12);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ca-tide-700);
  display:block;margin:0 0 var(--sp-4);
}
.eyebrow--inv{color:var(--ca-tide-400)}
.sec__title{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-40);line-height:var(--lh-tight);letter-spacing:var(--ls-display);color:var(--ca-ink-900);margin:0 0 var(--sp-5);text-wrap:balance}
.sec__title--inv{color:#fff}
.sec__title em,.lede em,h2 em{font-style:italic;color:var(--ca-coral);font-weight:inherit}
.sec--ink .sec__title em{color:var(--ca-citron)}
.sec--plum .sec__title em{color:var(--ca-citron)}
.lede{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:var(--fs-24);line-height:var(--lh-prose);color:var(--ca-ink-800);max-width:46ch;text-wrap:pretty;margin:0}
.lede--inv{color:color-mix(in oklab,var(--ca-cream) 88%, transparent)}

.grid2{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:var(--sp-16);align-items:start}
.prose p{font-size:var(--fs-18);line-height:var(--lh-prose);color:var(--fg);margin:0 0 var(--sp-5);max-width:60ch}
.prose p:last-child{margin-bottom:0}

/* ---------- Hero (editorial plate) ---------- */
.hero{background:var(--ca-ink-900);color:var(--ca-cream);border-bottom:6px solid var(--ca-citron)}
.hero__in{max-width:var(--content-max);margin:0 auto;padding:var(--sp-16) var(--sp-8) var(--sp-20)}
.hero__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4)}
.hero__issue{font-family:var(--font-serif);font-style:italic;font-size:var(--fs-20);color:var(--ca-citron)}
.hero__date{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-12);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ca-tide-400)}
.hero__cit{height:3px;background:var(--ca-citron);margin:var(--sp-4) 0 var(--sp-12)}
.hero__kicker{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-12);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ca-citron);display:block;margin:0 0 var(--sp-5)}
.hero__title{font-family:var(--font-serif);font-weight:500;font-size:clamp(var(--fs-40),5.2vw,var(--fs-64));line-height:1.04;letter-spacing:var(--ls-display);color:#fff;margin:0;max-width:18ch;text-wrap:balance}
.hero__title em{font-style:italic;color:var(--ca-citron)}
.hero__foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--sp-10);margin-top:var(--sp-16);padding-top:var(--sp-8);border-top:1px solid rgba(244,240,232,.18)}
.hero__label{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-12);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ca-tide-400);display:block;margin:0 0 var(--sp-3)}
.hero__foot p{font-size:var(--fs-14);line-height:var(--lh-normal);color:color-mix(in oklab,var(--ca-cream) 85%, transparent);margin:0;max-width:34ch}
.hero__toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.hero__toc li{display:flex;gap:var(--sp-3);font-size:var(--fs-14);color:var(--ca-cream);align-items:baseline}
.hero__toc span{font-family:var(--font-serif);font-style:italic;color:var(--ca-citron);min-width:1.6em}
.hero__ctas{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start}
.hero__lead{font-size:var(--fs-18);line-height:var(--lh-prose);color:color-mix(in oklab,var(--ca-cream) 88%, transparent);max-width:62ch;margin:var(--sp-6) 0 0}
.hero__actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-8);flex-wrap:wrap}
.approach__lead{font-size:var(--fs-20);line-height:var(--lh-prose);color:color-mix(in oklab,var(--ca-cream) 90%, transparent);max-width:64ch;margin:0 0 var(--sp-8);text-wrap:pretty}

/* ---------- Service tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);margin-top:var(--sp-10)}
.tile{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-8);transition:border-color var(--dur-fast) var(--ease-standard)}
.tile:hover{border-color:var(--border-strong)}
.tile__num{font-family:var(--font-serif);font-style:italic;font-size:var(--fs-32);color:var(--ca-coral);display:block;margin-bottom:var(--sp-4)}
.tile__title{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-24);color:var(--ca-ink-900);margin:0 0 var(--sp-3)}
.tile__body{font-size:var(--fs-16);line-height:var(--lh-normal);color:var(--fg);margin:0 0 var(--sp-5)}
.tile__more{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-14);color:var(--ca-tide-700);text-decoration:none}

/* ---------- Practice of Place principles ---------- */
.principles{list-style:none;margin:var(--sp-10) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-6)}
.principle{border-top:2px solid var(--ca-citron);padding-top:var(--sp-4)}
.principle__n{font-family:var(--font-serif);font-style:italic;font-size:var(--fs-28);color:var(--ca-citron);display:block;margin-bottom:var(--sp-3)}
.principle__name{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-16);color:#fff;margin:0 0 var(--sp-2);line-height:var(--lh-snug)}
.principle__copy{font-size:var(--fs-14);line-height:var(--lh-normal);color:color-mix(in oklab,var(--ca-cream) 80%, transparent);margin:0}

/* ---------- Who we serve / partners ---------- */
.dl{margin:0;border-top:1px solid var(--rule)}
.dl__row{display:grid;grid-template-columns:minmax(0,0.5fr) minmax(0,1fr);gap:var(--sp-6);padding:var(--sp-6) 0;border-bottom:1px solid var(--rule)}
.dl__row dt{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-20);color:var(--ca-ink-900);margin:0}
.dl__row dd{margin:0;font-size:var(--fs-16);line-height:var(--lh-normal);color:var(--fg)}
.partners__intro{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-12);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ca-tide-700);margin:0 0 var(--sp-5)}
.partners__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.partners__list li{font-family:var(--font-serif);font-size:var(--fs-20);line-height:var(--lh-snug);color:var(--ca-ink-900);padding:var(--sp-5) 0;border-bottom:1px solid var(--rule)}
.partners__list li:first-child{border-top:1px solid var(--rule)}
.partners__close{font-size:var(--fs-16);line-height:var(--lh-prose);color:var(--fg);margin:var(--sp-6) 0 0;max-width:60ch}

/* ---------- About ---------- */
.about__lead{font-family:var(--font-serif);font-style:italic;font-size:var(--fs-28);line-height:var(--lh-snug);color:var(--ca-ink-900);max-width:20ch;margin:0}
.about__lead em{color:var(--ca-coral);font-style:italic}
.founder{display:grid;grid-template-columns:200px 1fr;gap:var(--sp-8);align-items:start;margin-top:var(--sp-12);padding-top:var(--sp-10);border-top:1px solid var(--rule)}
.founder__photo{aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;background:var(--ca-cream)}
.founder__photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.founder__photo span{font-family:var(--font-mono);font-size:11px;color:var(--ca-shadow);background:var(--ca-paper);padding:2px 6px;border-radius:3px}
.founder__name{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-24);color:var(--ca-ink-900);margin:0 0 2px}
.founder__role{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-12);letter-spacing:.08em;text-transform:uppercase;color:var(--ca-tide-700);margin:0 0 var(--sp-5)}
.founder p{font-size:var(--fs-16);line-height:var(--lh-prose);margin:0 0 var(--sp-4);max-width:62ch}

/* ---------- Work / projects ---------- */
.work__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-8);flex-wrap:wrap}
.work__filters{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-8)}
.chip{font-family:var(--font-sans);font-weight:500;font-size:var(--fs-12);letter-spacing:.04em;color:var(--ca-ink-800);background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);padding:6px 14px}
.chip--on{background:var(--ca-ink-900);color:var(--ca-cream);border-color:var(--ca-ink-900)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);margin-top:var(--sp-10)}
.work__all{margin-top:var(--sp-10);display:flex;justify-content:center}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:border-color var(--dur-fast) var(--ease-standard)}
.card:hover{border-color:var(--border-strong)}
.card__thumb{aspect-ratio:5/3;position:relative}
.card__thumb span{position:absolute;left:12px;bottom:12px;font-family:var(--font-sans);font-weight:600;font-size:var(--fs-12);letter-spacing:.04em;color:#fff;background:rgba(19,41,61,.32);padding:3px 9px;border-radius:var(--r-pill);backdrop-filter:none}
.card__body{padding:var(--sp-6);display:flex;flex-direction:column;flex:1}
.card__meta{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-12);letter-spacing:.08em;text-transform:uppercase;color:var(--ca-tide-700);margin:0 0 var(--sp-2)}
.card__title{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-20);line-height:var(--lh-snug);color:var(--ca-ink-900);margin:0 0 var(--sp-3)}
.card__sum{font-size:var(--fs-14);line-height:var(--lh-normal);color:var(--fg-muted);margin:0 0 var(--sp-5)}
.card__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--rule)}
.card__loc{font-size:var(--fs-12);color:var(--fg-soft)}
.card__more{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-12);color:var(--ca-tide-700);text-decoration:none}

/* thumb palette fills */
.t-umber{background:var(--ca-umber)}.t-brass{background:var(--ca-brass)}.t-plum{background:var(--ca-plum)}
.t-tide{background:var(--ca-tide-600)}.t-teal{background:var(--ca-teal)}.t-slate{background:var(--ca-slate)}
.t-sage{background:var(--ca-sage)}.t-coral{background:var(--ca-coral)}.t-ink{background:var(--ca-ink-800)}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16);align-items:start}
.contact h2{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-32);color:#fff;margin:0 0 var(--sp-4)}
.contact h2 em{font-style:italic;color:var(--ca-citron)}
.contact p{color:color-mix(in oklab,var(--ca-cream) 85%, transparent);font-size:var(--fs-16);line-height:var(--lh-prose);margin:0 0 var(--sp-4)}
.contact__email{font-family:var(--font-serif);font-style:italic;font-size:var(--fs-24);color:var(--ca-citron)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1 / -1}
.field span{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-12);letter-spacing:.06em;text-transform:uppercase;color:var(--ca-tide-400)}
.field input,.field select,.field textarea{font-family:var(--font-sans);font-size:var(--fs-16);color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(244,240,232,.22);border-radius:var(--r-md);padding:11px 13px}
.field input::placeholder,.field textarea::placeholder{color:rgba(244,240,232,.4)}

/* ---------- Footer ---------- */
.ft{background:var(--ca-ink-900);color:var(--ca-cream);padding:var(--sp-16) 0 var(--sp-8)}
.ft__cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-10)}
.ft__brand img{height:34px;margin-bottom:var(--sp-4)}
.ft__brand p{font-size:var(--fs-14);color:color-mix(in oklab,var(--ca-cream) 70%, transparent);max-width:30ch;line-height:var(--lh-normal)}
.ft h5{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-12);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ca-tide-400);margin:0 0 var(--sp-4)}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.ft ul li{font-size:var(--fs-14);color:color-mix(in oklab,var(--ca-cream) 82%, transparent)}
.ft ul li a{color:inherit;text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
.ft ul li a:hover{color:var(--ca-cream)}
.ft__bar{display:flex;justify-content:space-between;gap:var(--sp-4);margin-top:var(--sp-12);padding-top:var(--sp-6);border-top:1px solid rgba(244,240,232,.16);font-size:var(--fs-12);color:color-mix(in oklab,var(--ca-cream) 60%, transparent)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hd__nav{display:none}
  .grid2,.contact{grid-template-columns:1fr;gap:var(--sp-8)}
  .tiles,.cards{grid-template-columns:1fr 1fr}
  .principles{grid-template-columns:1fr 1fr}
  .hero__foot{grid-template-columns:1fr;gap:var(--sp-6)}
  .founder{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}
@media (max-width:600px){
  .tiles,.cards,.principles{grid-template-columns:1fr}
}

/* ---------- Annotation banner (mock only) ---------- */
.mockbar{background:var(--ca-citron);color:var(--ca-ink-900);font-family:var(--font-sans);font-weight:600;font-size:var(--fs-12);letter-spacing:.04em;text-align:center;padding:8px 16px}
.mockbar b{font-weight:700}