/* Ember & Ink — shared brand stylesheet for RobertRuder.com and IDICDesigns.com
   MASTER COPY: edit here, then run web/sync-css.ps1 to copy into each site's assets/. */

:root{
  --ink:#14202E; --slate:#46515F; --paper:#FAF7F2; --surface:#FFFFFF; --line:#E4DDD2;
  --ember:#B8430F; --ember-hover:#9A370B; --on-ember:#FFFFFF; --gold:#C99A2E;
  --deep:#14202E; --deep-ink:#EDE7DD; --deep-sub:#B8B2A8; --deep-ember:#F08A4B; --deep-gold:#D9B25A; --deep-line:#2E3B4B;
  --radius:12px; --max:1120px; --read:68ch;
  --serif:Fraunces, Georgia, "Times New Roman", serif;
  --sans:Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EDE7DD; --slate:#B8B2A8; --paper:#0F1720; --surface:#18222E; --line:#2A3644;
    --ember:#F08A4B; --ember-hover:#F5A26E; --on-ember:#0F1720; --gold:#D9B25A;
    --deep:#18222E; --deep-line:#2E3B4B;
  }
}
:root[data-theme="dark"]{
  --ink:#EDE7DD; --slate:#B8B2A8; --paper:#0F1720; --surface:#18222E; --line:#2A3644;
  --ember:#F08A4B; --ember-hover:#F5A26E; --on-ember:#0F1720; --gold:#D9B25A;
  --deep:#18222E; --deep-line:#2E3B4B;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--slate);font:17px/1.65 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:var(--ember);text-underline-offset:3px}
a:hover{color:var(--ember-hover)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);line-height:1.15;margin:0 0 .5em;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(34px,5.6vw,58px)}
h2{font-size:clamp(26px,3.6vw,38px)}
h3{font-size:clamp(19px,2.2vw,23px)}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 32px}}
.read{max-width:var(--read)}
.eyebrow{font:600 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin-bottom:12px}
.lede{font-size:clamp(18px,2vw,21px);color:var(--slate)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;background:var(--surface);padding:8px 12px;z-index:10}

/* Header */
.site-header{border-bottom:1px solid var(--line);background:var(--paper)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:600 19px/1 var(--serif)}
.logo:hover{color:var(--ink)}
.logo svg{width:30px;height:30px;flex:none}
.site-nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.site-nav a{color:var(--slate);text-decoration:none;font-size:15px;font-weight:500;padding:4px 0;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ember)}

/* Pillar mark */
.mark .lintel,.mark .base{fill:var(--gold)}
.mark .col{fill:var(--ink)}
.mark .col.lit{fill:var(--ember)}
.deep .mark .col{fill:var(--deep-ink)}
.deep .mark .col.lit{fill:var(--deep-ember)}
.deep .mark .lintel,.deep .mark .base{fill:var(--deep-gold)}

/* Sections */
section{padding:56px 0}
@media (min-width:720px){section{padding:84px 0}}
.band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.deep{background:var(--deep);color:var(--deep-sub)}
.deep h1,.deep h2,.deep h3{color:var(--deep-ink)}
.deep .eyebrow{color:var(--deep-gold)}
.deep .lede,.deep p{color:var(--deep-sub)}
.deep strong{color:var(--deep-ink)}
.deep a{color:var(--deep-ember)}
.deep em.hi{color:var(--deep-ember)}
em.hi{font-style:normal;color:var(--ember)}

/* Hero */
.hero{display:grid;gap:32px;align-items:center}
@media (min-width:880px){.hero{grid-template-columns:1.35fr .65fr}}
.hero h1{margin-bottom:.4em}
.hero .portrait{border-radius:var(--radius);overflow:hidden;max-width:340px;justify-self:center;border:1px solid var(--deep-line)}
.hero .mark{width:min(220px,50vw);justify-self:center}

/* Buttons */
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.btn{display:inline-block;background:var(--ember);color:var(--on-ember);font:600 15px/1 var(--sans);padding:14px 20px;border-radius:8px;text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn:hover{background:var(--ember-hover);color:var(--on-ember)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.deep .btn{background:var(--deep-ember);color:#0F1720}
.deep .btn.ghost{background:transparent;color:var(--deep-ink);border-color:var(--deep-line)}

/* Grids & cards */
.grid{display:grid;gap:16px}
@media (min-width:640px){.grid.two{grid-template-columns:1fr 1fr}}
@media (min-width:640px){.grid.four{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.grid.four{grid-template-columns:repeat(4,1fr)}}
@media (min-width:880px){.grid.three{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.card p:last-child{margin-bottom:0}
.pillar{border-top:3px solid var(--ember)}
.pillar .num{font:700 26px/1 var(--serif);color:var(--ember);display:block;margin-bottom:10px}
.pillar.lit{box-shadow:0 0 0 2px var(--ember) inset}
.split{display:grid;gap:32px}
@media (min-width:880px){.split{grid-template-columns:1fr 1fr;align-items:start}}
.quote{font:500 clamp(22px,3vw,30px)/1.3 var(--serif);color:var(--ink);border-left:4px solid var(--ember);padding-left:20px;margin:0}
.deep .quote{color:var(--deep-ink);border-color:var(--deep-ember)}
.quote cite{display:block;font:500 14px var(--sans);color:var(--slate);margin-top:10px;font-style:normal}
ul.clean{list-style:none;padding:0;margin:0}
ul.clean li{padding:10px 0;border-bottom:1px solid var(--line)}
ul.clean li:last-child{border-bottom:0}
.sup{font-size:.55em;vertical-align:super;color:var(--gold);font-family:var(--sans);font-weight:700;letter-spacing:.02em}

/* Forms */
form.signup{display:grid;gap:10px;max-width:520px}
@media (min-width:560px){form.signup{grid-template-columns:1fr 1fr auto}}
form.stack{display:grid;gap:12px;max-width:560px}
label{font-size:14px;font-weight:500;color:var(--ink)}
input,textarea{font:16px var(--sans);padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);width:100%}
textarea{min-height:130px;resize:vertical}
.deep input{background:#0F1720;border-color:var(--deep-line);color:var(--deep-ink)}
.fine{font-size:13px;color:var(--slate)}
.deep .fine{color:var(--deep-sub)}

/* Review markers — REMOVE before launch (search for class="tbd") */
.tbd{background:#FFF3B0;color:#3A2F00;border-radius:4px;padding:1px 6px;font:600 13px/1.5 var(--sans);font-style:normal}
.tbd::before{content:"TBD: "}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:40px 0;font-size:14px}
.site-footer .wrap{display:grid;gap:20px}
@media (min-width:720px){.site-footer .wrap{grid-template-columns:2fr 1fr 1fr}}
.site-footer h4{font:600 13px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:4px 0}
.site-footer a{color:var(--slate);text-decoration:none}
.site-footer a:hover{color:var(--ember)}
.sister{font:500 15px var(--serif);color:var(--ink)}