
:root{
  color-scheme:light;
  --brand:#A1271F; --action:#A1271F; --action-hover:#82201A; --link:#336E9C; --link-hover:#23527A;
  --ink:#373535; --text:#373535; --muted:#5D5B5B;
  --paper:#FFFFFF; --tint:#F6EAE9; --tint-2:#FCF5F4; --line:#EDE1E0;
  --alert:#A1271F; --alert-tint:#FBEFEE; --ph:#FFF4C2; --ph-ink:#5C4700;
  --blush:#F3E3E2; --mist:#FFFFFF; --band-a:#551F16; --band-b:#34241E; --band-c:#1A2B3B; --band-ink:#F3ECEA; --band-muted:#C5BBB9;
  --serif:"Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:"Roboto", "Helvetica Neue", Helvetica, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius-s:6px; --radius-m:12px;
  --wrap:1180px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--text); font-family:var(--sans); font-size:1.0625rem; line-height:1.55}
img{max-width:100%}
a{color:var(--link); text-underline-offset:.18em}
a:hover{color:var(--link-hover)}
:focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:2px}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:.6rem 1rem; z-index:100}
.skip:focus{left:1rem}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(1rem,4vw,2rem)}

/* prototype + emergency strips */
.proto{background:var(--ph); color:var(--ph-ink); font-size:.875rem; padding:.45rem 0}
.proto a{color:inherit; font-weight:600}
.er{background:var(--alert-tint); border-bottom:1px solid var(--line); font-size:.9rem; padding:.55rem 0; color:var(--text)}
.er strong{color:var(--alert)}
.er a{color:var(--alert); font-weight:600}

/* header */
header.site{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
.hdr{display:flex; align-items:center; gap:1.5rem; min-height:92px}
.logo{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); line-height:1.1; margin-right:auto}
.logo img{display:block; height:60px; width:auto}
.logo .word{font-family:var(--sans); font-weight:400; font-size:2.1rem; letter-spacing:.01em; color:var(--ink)}
.logo .txt{display:flex; flex-direction:column}
.logo b{font-family:var(--serif); font-weight:700; font-size:1.3rem; letter-spacing:-.01em}
.logo .txt span{font-size:.78rem; color:var(--muted); margin-top:.2rem}
nav.main ul{list-style:none; display:flex; gap:1.6rem; margin:0; padding:.7rem 1.6rem; background:var(--tint); border-radius:999px}
nav.main a{white-space:nowrap; color:var(--ink); text-decoration:none; font-weight:400; font-size:1.02rem; padding:.2rem 0}
nav.main a:hover{color:var(--brand)}
nav.main a[aria-current="true"]{color:var(--brand)}
.btn{white-space:nowrap; display:inline-block; background:var(--action); color:#fff; text-decoration:none; font-weight:600; padding:.8rem 1.5rem; border-radius:999px; border:2px solid var(--action); font-size:1rem; line-height:1.2; cursor:pointer; font-family:var(--sans)}
.btn:hover{background:var(--action-hover); border-color:var(--action-hover); color:#fff}
.btn.ghost{background:transparent; color:var(--action)}
.btn.ghost:hover{background:var(--tint); color:var(--action-hover)}
.menu-toggle{display:none; background:none; border:1px solid var(--line); border-radius:var(--radius-s); padding:.5rem .7rem; color:var(--ink); font:inherit; font-weight:600}
@media (max-width:1120px){
  nav.main{display:none; position:absolute; left:0; right:0; top:100%; background:var(--paper); border-bottom:1px solid var(--line)}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column; gap:0; padding:.5rem clamp(1rem,4vw,2rem) 1rem; background:var(--paper); border-radius:0}
  nav.main a{display:block; padding:.7rem 0; border-bottom:1px solid var(--line)}
  .menu-toggle{display:inline-block}
  .hdr .btn{display:none}
}

/* type */
h1,h2,h3{font-family:var(--serif); color:var(--ink); line-height:1.15; letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,4.2vw,3.2rem); font-weight:500; margin:.3em 0 .35em}
h2{font-size:clamp(1.45rem,2.4vw,1.85rem); font-weight:500; margin:1.8em 0 .5em}
h3{font-size:1.2rem; font-weight:600; margin:1.4em 0 .4em}
p{margin:0 0 1em}
.lede{font-size:1.2rem; color:var(--text); max-width:62ch}
.muted{color:var(--muted)}
.ph{background:var(--ph); color:var(--ph-ink); padding:0 .25em; border-radius:3px; font-style:normal; font-weight:500}

/* breadcrumbs */
.crumbs{font-size:.88rem; color:var(--muted); margin-top:1.6rem}
.crumbs a{color:var(--muted)}
.crumbs span[aria-hidden]{margin:0 .4rem}

/* article layout */
.article{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(2rem,5vw,4.5rem); padding-bottom:4rem}
@media (max-width:980px){.article{grid-template-columns:1fr}}
.prose{max-width:68ch}
.prose .body{font-family:var(--sans); font-size:1.08rem; line-height:1.7}
.prose .body h2{font-size:1.55rem}
.prose .body ul,.prose .body ol{padding-left:1.3rem; margin:0 0 1.1em}
.prose .body li{margin:.35em 0}
.prose .body table{font-family:var(--sans)}
.meta{display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; font-size:.88rem; color:var(--muted); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:.7rem 0; margin:1.2rem 0 1.6rem}
.meta b{color:var(--text); font-weight:600}
.review{color:var(--ph-ink); background:var(--ph); padding:0 .35em; border-radius:3px}
.aside{position:relative}
.aside-inner{position:sticky; top:96px; display:flex; flex-direction:column; gap:1.25rem; padding-top:2.2rem}
.care{background:var(--tint); border-radius:var(--radius-m); padding:1.3rem 1.3rem 1.4rem; border-top:4px solid var(--brand)}
.care h3{margin:0 0 .5rem; font-size:1.2rem}
.care p{font-size:.95rem; margin-bottom:1rem}
.care .btn{width:100%; text-align:center}
.care .tel{display:block; text-align:center; margin-top:.7rem; font-size:.93rem}
.toc{font-size:.93rem}
.toc h4{font-family:var(--sans); font-size:.85rem; font-weight:600; color:var(--muted); margin:0 0 .5rem}
.toc ol{list-style:none; margin:0; padding:0 0 0 .8rem; border-left:2px solid var(--line)}
.toc li{margin:.35rem 0}
.toc a{text-decoration:none; color:var(--text)}
.toc a:hover{color:var(--link)}
.sources{font-family:var(--sans); font-size:.9rem; color:var(--muted); border-top:1px solid var(--line); margin-top:2.5rem; padding-top:1rem}
.sources h2{font-size:1.1rem; margin-top:.4rem}
.sources ol{padding-left:1.2rem}
.related{margin-top:2rem; font-family:var(--sans)}
.related h2{font-size:1.1rem}
.related ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem}
.related a{display:inline-block; border:1px solid var(--line); border-radius:999px; padding:.35rem .85rem; text-decoration:none; font-size:.93rem}
.related a:hover{border-color:var(--action); background:var(--tint-2)}
.callout{border-left:4px solid var(--brand); background:var(--tint-2); padding:.9rem 1.1rem; margin:1.4rem 0; font-family:var(--sans); font-size:1rem}
.callout.alert{border-left-color:var(--alert); background:var(--alert-tint)}
.callout p:last-child{margin:0}
.callout strong{color:var(--ink)}
.callout.alert strong{color:var(--alert)}

/* tables */
.tbl{overflow-x:auto; margin:1.2rem 0 1.6rem; border:1px solid var(--line); border-radius:var(--radius-s)}
table{border-collapse:collapse; width:100%; font-size:.95rem; min-width:520px}
th,td{text-align:left; vertical-align:top; padding:.65rem .8rem; border-bottom:1px solid var(--line)}
th{background:var(--tint-2); font-weight:600; color:var(--ink)}
tr:last-child td{border-bottom:none}

/* hub lists */
.hub{padding-bottom:4rem}
.hub-list{list-style:none; padding:0; margin:2rem 0 0; border-top:1px solid var(--line)}
.hub-list li{border-bottom:1px solid var(--line)}
.hub-list a{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; align-items:baseline; padding:1.1rem .2rem; text-decoration:none; color:var(--text)}
.hub-list a:hover{background:var(--tint-2)}
.hub-list b{font-family:var(--serif); font-size:1.3rem; color:var(--ink); font-weight:600; display:block; margin-bottom:.15rem}
.hub-list span.d{color:var(--muted); font-size:.98rem}
.hub-list .pm{display:block; font-size:.85rem; color:var(--muted); margin-top:.3rem}
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4rem; margin-top:1.6rem}
@media (max-width:860px){.cards{grid-template-columns:1fr}}
.card{display:flex; flex-direction:column; gap:.5rem; padding:1.3rem; border:1px solid var(--line); border-radius:16px; text-decoration:none; color:var(--text); background:var(--paper)}
.card:hover{border-color:var(--brand)}
.card .c{font-size:.82rem; color:var(--brand); font-weight:500}
.card b{color:var(--ink); font-weight:500; font-size:1.12rem; line-height:1.3}
.card span.d{font-size:.95rem; color:var(--muted)}
.hub-list .go{color:var(--action); font-weight:600; font-size:.9rem; white-space:nowrap}

/* home */
.hero{background:linear-gradient(110deg,var(--paper) 0%,var(--paper) 42%,var(--blush) 100%); border-radius:0 0 56px 56px; padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2.5rem,6vw,4.5rem); overflow:hidden}
.hero-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-art{max-width:420px}}
.hero h1 .accent{color:var(--brand)}
.hero-art{position:relative; aspect-ratio:1/1; width:100%}
.hero-art svg.blob{position:absolute; inset:0; width:100%; height:100%}
.hero-card{position:absolute; left:8%; right:8%; bottom:10%; background:var(--paper); border-radius:20px; padding:1.2rem 1.3rem; box-shadow:0 18px 40px rgba(55,53,53,.18)}
.hero-card b{display:block; color:var(--ink); font-weight:500; font-size:1.05rem; margin-bottom:.6rem}
.hero-card ul{list-style:none; margin:0; padding:0; font-size:.97rem}
.hero-card li{padding:.4rem 0 .4rem 1.6rem; position:relative; border-top:1px solid var(--line)}
.hero-card li::before{content:""; position:absolute; left:.2rem; top:.85rem; width:.6rem; height:.6rem; border-radius:50%; background:var(--brand)}
.hero-letters{position:absolute; top:14%; left:0; right:0; text-align:center; font-weight:300; font-size:clamp(3.2rem,9vw,6.5rem); letter-spacing:.04em; color:#fff; line-height:1}
.hero h1{font-size:clamp(2.4rem,5.2vw,4.1rem); font-weight:400; max-width:18ch; margin-top:0; line-height:1.12}
.hero .lede{font-size:clamp(1.12rem,1.8vw,1.3rem); max-width:56ch}
.ctas{display:flex; flex-wrap:wrap; gap:.8rem; margin:1.8rem 0 1.2rem}
.hero .fine{font-size:.92rem; color:var(--muted)}
section.band{padding:clamp(2.5rem,6vw,4.5rem) 0; border-top:1px solid var(--line)}
section.band.tint{background:var(--tint-2)}
.band h2{margin-top:0}
.two{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,4rem)}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.sym{list-style:none; padding:0; margin:0; border-top:1px solid var(--line)}
.sym li{border-bottom:1px solid var(--line)}
.sym a{display:flex; justify-content:space-between; gap:1rem; padding:.95rem .2rem; text-decoration:none; color:var(--ink); font-weight:500; font-size:1.08rem}
.sym a span{color:var(--muted); font-weight:400; font-size:.95rem; text-align:right; max-width:60%}
.sym a:hover{background:var(--paper)}
@media (max-width:600px){.sym a{flex-direction:column; gap:.1rem}.sym a span{text-align:left; max-width:none}}

/* the PALM-COEIN band: kept from the existing site's maroon-to-navy band */
section.band.dark{background:linear-gradient(100deg,var(--band-a) 0%,var(--band-b) 50%,var(--band-c) 100%); border-top:none; color:var(--band-ink)}
section.band.dark h2{color:#fff}
section.band.dark p{color:var(--band-ink)}
section.band.dark .group-label{color:var(--band-muted); border-top-color:var(--band-ink)}
section.band.dark .group-label b{color:#fff}
section.band.dark .lrow a{color:#fff}
section.band.dark .lrow a:hover{background:rgba(255,255,255,.08)}
section.band.dark .lrow .L{color:var(--band-ink)}
section.band.dark .group.non .lrow .L{color:transparent; -webkit-text-stroke:2px var(--band-ink)}
section.band.dark .lrow .n{color:var(--band-muted)}
section.band.dark :focus-visible{outline-color:#fff}
.letters{display:grid; grid-template-columns:4fr 5fr; gap:clamp(1rem,3vw,2.5rem); margin-top:2.2rem}
@media (max-width:860px){.letters{grid-template-columns:1fr}}
.group-label{font-size:.95rem; color:var(--muted); border-top:3px solid var(--brand); padding-top:.6rem; margin-bottom:.6rem}
.group-label b{color:var(--ink)}
.group.non .group-label{border-top-style:dashed}
.lrow{display:grid; gap:.25rem}
.group.st .lrow{grid-template-columns:repeat(4,1fr)}
.group.non .lrow{grid-template-columns:repeat(5,1fr)}
.lrow a{display:flex; flex-direction:column; text-decoration:none; color:var(--ink); padding:.4rem .4rem .8rem; border-radius:var(--radius-s)}
.lrow a:hover{background:var(--tint)}
.lrow .L{font-family:var(--serif); font-weight:700; font-size:clamp(3.4rem,8.5vw,6.5rem); line-height:.95; color:var(--brand); letter-spacing:-.03em}
.group.non .lrow .L{color:transparent; -webkit-text-stroke:2px var(--brand)}
@supports not (-webkit-text-stroke:2px black){.group.non .lrow .L{color:var(--brand)}}
.lrow .n{font-size:.9rem; font-weight:600; margin-top:.35rem; line-height:1.25}
@media (max-width:520px){.group.non .lrow{grid-template-columns:repeat(3,1fr)}.group.st .lrow{grid-template-columns:repeat(2,1fr)}}

.steps{list-style:none; padding:0; margin:1.6rem 0 0; counter-reset:s; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.6rem}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s; border-top:1px solid var(--ink); padding-top:.8rem}
.steps li::before{content:counter(s); font-family:var(--serif); font-weight:700; font-size:1.6rem; color:var(--brand); display:block; margin-bottom:.3rem}
.steps b{display:block; color:var(--ink); margin-bottom:.3rem}
.steps p{font-size:.97rem; margin:0}

.docs{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.6rem; margin-top:1.6rem}
.doc{display:flex; gap:1rem; align-items:flex-start}
.mono{flex:0 0 64px; height:64px; border-radius:50%; background:var(--tint); color:var(--action); display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:1.35rem}
.doc b{display:block; color:var(--ink); font-family:var(--serif); font-size:1.12rem}
.doc span{font-size:.93rem; color:var(--muted)}
.bio{border-top:1px solid var(--line); padding:1.6rem 0; display:flex; gap:1.3rem}
.bio .mono{flex-basis:88px; height:88px; font-size:1.7rem}
.bio h2{margin:0 0 .2rem; font-size:1.45rem}
.bio .cred{color:var(--muted); font-size:.95rem; margin-bottom:.7rem}
@media (max-width:560px){.bio{flex-direction:column}}

/* footer */
footer.site{background:#1A2B3B; color:#D9DEE3; padding:3rem 0 2rem; font-size:.93rem}
footer.site a{color:#FFFFFF}
.fgrid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}
.fgrid h4{color:#fff; font-size:.95rem; margin:0 0 .6rem}
.fgrid ul{list-style:none; padding:0; margin:0}
.fgrid li{margin:.35rem 0}
.disclose{border-top:1px solid rgba(255,255,255,.18); margin-top:2.2rem; padding-top:1.3rem; color:#B9C8D2; font-size:.87rem; max-width:90ch}
.disclose p{margin:.4rem 0}

/* tracker print */
.track td{height:2.2rem}
@media print{
  .proto,.er,header.site,footer.site,.aside,.crumbs,.related,.noprint{display:none!important}
  .article{display:block}
  body{font-size:11pt}
}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important; transition:none!important}}
