/* ============================================================
   SoCal Decals — shared site styles
   Terracotta "sun" + teal "sea", warm paper, serif display.
   ============================================================ */
:root {
  --paper:#F4F3EE; --card:#FFFFFF; --ink:#1A1815; --muted:#6E6A61;
  --line:#E4E1D8; --sun:#FB6A34; --sun-deep:#C6491C; --sea:#0F6E77;
  --sea-deep:#0A545B;
  --lift: 0 1px 0 rgba(0,0,0,.04), 0 10px 24px -12px rgba(28,22,16,.28), 0 2px 6px -2px rgba(28,22,16,.14);
  --lift-hi: 0 1px 0 rgba(0,0,0,.05), 0 26px 46px -18px rgba(28,22,16,.40), 0 4px 12px -4px rgba(28,22,16,.20);
  --serif: "Iowan Old Style","Palatino Linotype","Palatino","Book Antiqua",Georgia,serif;
  --sans: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono: ui-monospace,"SF Mono","Cascadia Code","Consolas",monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#141310; --card:#1D1B15; --ink:#F1EEE6; --muted:#A39D90;
    --line:#2C2921; --sun:#FF8355; --sun-deep:#FF8355; --sea:#46B4BC; --sea-deep:#46B4BC;
    --lift: 0 1px 0 rgba(0,0,0,.5), 0 12px 26px -12px rgba(0,0,0,.7), 0 2px 6px -2px rgba(0,0,0,.5);
    --lift-hi: 0 1px 0 rgba(0,0,0,.6), 0 28px 50px -18px rgba(0,0,0,.8), 0 4px 12px -4px rgba(0,0,0,.6);
  }
}
:root[data-theme="light"]{
  --paper:#F4F3EE; --card:#FFFFFF; --ink:#1A1815; --muted:#6E6A61;
  --line:#E4E1D8; --sun:#FB6A34; --sun-deep:#C6491C; --sea:#0F6E77; --sea-deep:#0A545B;
  --lift: 0 1px 0 rgba(0,0,0,.04), 0 10px 24px -12px rgba(28,22,16,.28), 0 2px 6px -2px rgba(28,22,16,.14);
  --lift-hi: 0 1px 0 rgba(0,0,0,.05), 0 26px 46px -18px rgba(28,22,16,.40), 0 4px 12px -4px rgba(28,22,16,.20);
}
:root[data-theme="dark"]{
  --paper:#141310; --card:#1D1B15; --ink:#F1EEE6; --muted:#A39D90;
  --line:#2C2921; --sun:#FF8355; --sun-deep:#FF8355; --sea:#46B4BC; --sea-deep:#46B4BC;
  --lift: 0 1px 0 rgba(0,0,0,.5), 0 12px 26px -12px rgba(0,0,0,.7), 0 2px 6px -2px rgba(0,0,0,.5);
  --lift-hi: 0 1px 0 rgba(0,0,0,.6), 0 28px 50px -18px rgba(0,0,0,.8), 0 4px 12px -4px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap { width:100%; max-width:760px; margin:0 auto; padding:0 28px; }
img { max-width:100%; }

/* ---- header / nav ---- */
.site { display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:26px 0 22px; }
.mark { display:inline-flex; align-items:center; gap:11px;
  font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none; }
.chip { display:inline-block; width:15px; height:15px; border-radius:50%;
  background:var(--sun); box-shadow: inset 0 0 0 2.5px var(--paper), 0 0 0 1px var(--sun); }
.site nav { font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); display:flex; gap:18px; flex-wrap:wrap; }
.site nav a { color:var(--muted); text-decoration:none; transition:color .2s; }
.site nav a:hover, .site nav a[aria-current="page"] { color:var(--sun-deep); }

/* ---- hero ---- */
.hero { padding:46px 0 30px; }
.eyebrow { font-family:var(--mono); font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sun-deep); margin:0 0 20px; }
h1 { font-family:var(--serif); font-weight:600; letter-spacing:-.018em;
  font-size:clamp(2.4rem,6.5vw,3.7rem); line-height:1.05; margin:0 0 22px;
  text-wrap:balance; }
h1 .amp { color:var(--sun); }
.lede { font-size:1.24rem; line-height:1.55; color:var(--ink); margin:0;
  max-width:42ch; }

/* ---- rule + section headings ---- */
.rule { height:1px; background:var(--line); border:0; margin:44px 0; }
section h2 { font-family:var(--serif); font-weight:600; letter-spacing:-.01em;
  font-size:1.02rem; margin:0 0 20px; color:var(--muted);
  display:flex; align-items:center; gap:12px; }
section h2::after { content:""; flex:1; height:1px; background:var(--line); }

.prose p { font-size:1.08rem; color:var(--ink); margin:0 0 1em; max-width:62ch; }
.prose p:last-child { margin-bottom:0; }
.prose strong { font-weight:600; }

/* ---- decal cards ---- */
.decks { display:grid; gap:24px; }
@media (min-width:620px){ .decks { grid-template-columns:1fr 1fr; } }
.decal { position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:26px 24px 24px; box-shadow:var(--lift);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  overflow:hidden; text-decoration:none; color:var(--ink); display:block; }
.decal:hover { transform:translateY(-4px) rotate(-.4deg); box-shadow:var(--lift-hi); }
.decal::before { content:""; position:absolute; top:-1px; right:-1px;
  width:34px; height:34px; background:
    linear-gradient(225deg, var(--paper) 0 50%, transparent 50%);
  border-left:1px solid var(--line); border-bottom:1px solid var(--line);
  border-bottom-left-radius:8px;
  transition:width .35s ease, height .35s ease; }
.decal:hover::before { width:44px; height:44px; }
.decal .top { display:flex; align-items:center; gap:10px; margin:0 0 14px; }
.dot { width:12px; height:12px; border-radius:50%; flex:none; }
.dot.sun { background:var(--sun); }
.dot.sea { background:var(--sea); }
.decal h3 { font-family:var(--serif); font-weight:600; font-size:1.4rem;
  letter-spacing:-.01em; margin:0; }
.decal p { margin:0 0 18px; font-size:1rem; color:var(--ink); line-height:1.58; }
.decal .tag { font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sea); margin:-2px 0 14px; }
.status { font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); display:inline-flex;
  align-items:center; gap:7px; }
.status::before { content:""; width:6px; height:6px; border-radius:50%;
  background:var(--sun); box-shadow:0 0 0 3px color-mix(in srgb, var(--sun) 22%, transparent); }
.decal.b .status::before, .status.sea::before { background:var(--sea);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sea) 22%, transparent); }
.decal .more { font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--sun-deep); margin-top:2px; display:inline-block; }

/* ---- values / list grid ---- */
.grid3 { display:grid; gap:26px 30px; }
@media (min-width:620px){ .grid3 { grid-template-columns:1fr 1fr; } }
.val h3 { font-family:var(--serif); font-weight:600; font-size:1.12rem;
  margin:0 0 7px; letter-spacing:-.01em; }
.val p { margin:0; font-size:1rem; color:var(--muted); line-height:1.55; max-width:44ch; }

/* ---- feature checklist ---- */
.feat { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.feat li { position:relative; padding-left:30px; font-size:1.05rem; max-width:60ch; }
.feat li::before { content:""; position:absolute; left:0; top:.5em;
  width:10px; height:10px; border-radius:50%; background:var(--sun);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--sun) 20%, transparent); }
.feat li strong { font-weight:600; }

/* ---- page hero (subpages) ---- */
.pagehead { padding:36px 0 8px; }
.pagehead h1 { font-size:clamp(2rem,5.5vw,2.9rem); margin-bottom:16px; }
.crumb { font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin:0 0 20px; }
.crumb a { color:var(--muted); text-decoration:none; }
.crumb a:hover { color:var(--sun-deep); }

/* ---- language pills ---- */
.pills { display:flex; flex-wrap:wrap; gap:9px; margin:4px 0 0; padding:0; list-style:none; }
.pills li { font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  color:var(--sea-deep); background:color-mix(in srgb, var(--sea) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--sea) 30%, transparent);
  border-radius:999px; padding:5px 12px; }

/* ---- badge ---- */
.badge { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px; background:var(--card); }
.badge .d { width:7px; height:7px; border-radius:50%; background:var(--sun); }
.badge.sea .d { background:var(--sea); }

/* ---- legal / long-form prose ---- */
.legal h2 { display:block; font-family:var(--serif); color:var(--ink);
  font-size:1.3rem; margin:34px 0 12px; }
.legal h2::after { display:none; }
.legal p, .legal li { font-size:1.02rem; color:var(--ink); line-height:1.6; max-width:64ch; }
.legal ul { padding-left:22px; margin:0 0 1em; }
.legal li { margin:0 0 .5em; }
.legal .updated { font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  color:var(--muted); margin:0 0 6px; }
.legal a { color:var(--sun-deep); }

/* ---- contact ---- */
.contact .lines { display:grid; gap:2px; margin:0; }
.cline { display:grid; grid-template-columns:88px 1fr; gap:16px;
  padding:13px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.cline:last-child { border-bottom:0; }
.cline dt { font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); }
.cline dd { margin:0; font-size:1.05rem; }
.cline a { color:var(--ink); text-decoration:none;
  background-image:linear-gradient(var(--sun),var(--sun));
  background-size:100% 1.5px; background-repeat:no-repeat;
  background-position:0 100%; padding-bottom:2px; transition:color .2s; }
.cline a:hover { color:var(--sun-deep); }

/* ---- inline text link ---- */
a.link { color:var(--sun-deep); text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:1px; }
a.link:hover { color:var(--sun); }

/* ---- footer ---- */
footer { margin-top:56px; padding:26px 0 40px; border-top:1px solid var(--line); }
footer .row { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  justify-content:space-between; font-size:13px; color:var(--muted); }
footer .legal-line { font-family:var(--mono); letter-spacing:.03em; }
footer .fnav { display:flex; gap:16px; flex-wrap:wrap; }
footer .fnav a { color:var(--muted); text-decoration:none; }
footer .fnav a:hover { color:var(--sun-deep); }

a:focus-visible, nav a:focus-visible { outline:2px solid var(--sun);
  outline-offset:3px; border-radius:3px; }

/* ---- entrance ---- */
.rise { opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.d1{animation-delay:.05s} .d2{animation-delay:.13s} .d3{animation-delay:.21s} .d4{animation-delay:.29s}
@keyframes rise { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  .rise{ animation:none; opacity:1; transform:none; }
  .decal, .decal::before { transition:none; }
  .decal:hover { transform:none; }
}