
/* salute.nw — Core CSS — Part 1

   R3/R14 compliant — zero hardcoded hex */



*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

img,svg{display:block;max-width:100%;}

button{cursor:pointer;border:none;background:none;font:inherit;}

a{color:inherit;text-decoration:none;}

ul,ol{list-style:none;}

input,textarea,select{font:inherit;}



:root {

    --sal-font-display: 'Playfair Display','Georgia',serif;

    --sal-font-body:    'DM Sans','Helvetica Neue',Arial,sans-serif;

    --sal-font-mono:    'JetBrains Mono','Courier New',monospace;

    --sal-s1:4px; --sal-s2:8px; --sal-s3:12px; --sal-s4:16px;

    --sal-s5:24px; --sal-s6:32px; --sal-s7:48px; --sal-s8:64px;

    --sal-s9:96px; --sal-s10:128px;

    --sal-topbar-h:58px;

    --sal-sidebar-w:220px;

    --sal-sidebar-w-collapsed:58px;

    --sal-content-max:1400px;

    --sal-radius:6px; --sal-radius-lg:12px; --sal-radius-xl:20px;

    --sal-transition:180ms ease;

    --sal-transition-slow:380ms ease;

    --sal-gold:#c9a84c;

    --sal-gold-bright:#e8c56a;

    --sal-gold-dim:#8b6914;

    --sal-gold-glass:rgba(201,168,76,0.12);

    --sal-gold-border:rgba(201,168,76,0.25);

    --sal-shadow-sm:0 1px 3px rgba(0,0,0,0.3);

    --sal-shadow-md:0 4px 16px rgba(0,0,0,0.4);

    --sal-shadow-lg:0 12px 40px rgba(0,0,0,0.5);

    --sal-shadow-xl:0 24px 64px rgba(0,0,0,0.6);

}



html{font-family:var(--sal-font-body);font-size:16px;line-height:1.5;color:var(--sal-t1);background-color:var(--sal-bg);}



.sal-display{font-family:var(--sal-font-display);font-weight:700;line-height:1.1;letter-spacing:-0.02em;}

.sal-display-xl{font-size:clamp(2.5rem,6vw,5rem);}

.sal-display-lg{font-size:clamp(2rem,4vw,3.5rem);}

.sal-display-md{font-size:clamp(1.5rem,3vw,2.25rem);}

.sal-display-sm{font-size:clamp(1.25rem,2vw,1.75rem);}

.sal-h1{font-size:2rem;font-weight:700;line-height:1.2;}

.sal-h2{font-size:1.5rem;font-weight:600;line-height:1.25;}

.sal-h3{font-size:1.25rem;font-weight:600;line-height:1.3;}

.sal-h4{font-size:1rem;font-weight:600;line-height:1.4;}

.sal-body-lg{font-size:1.125rem;line-height:1.7;}

.sal-body{font-size:1rem;line-height:1.65;}

.sal-body-sm{font-size:0.875rem;line-height:1.6;}

.sal-label{font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;}

.sal-mono{font-family:var(--sal-font-mono);font-size:0.875rem;}



body{min-height:100vh;display:grid;

    grid-template-areas:"topbar topbar" "sidebar main";

    grid-template-rows:var(--sal-topbar-h) 1fr;

    grid-template-columns:var(--sal-sidebar-w) 1fr;

    transition:grid-template-columns var(--sal-transition-slow);}

body.sal-sidebar-collapsed{grid-template-columns:var(--sal-sidebar-w-collapsed) 1fr;}



[data-fullscreen="1"] .sal-topbar{height:44px;padding:0 var(--sal-s4);}

[data-fullscreen="1"] body{grid-template-rows:44px 1fr;grid-template-columns:0 1fr;}

[data-fullscreen="1"] .sal-sidebar{transform:translateX(calc(-1 * var(--sal-sidebar-w)));}

[data-fullscreen="1"] .sal-main{padding-left:var(--sal-s5);}

[data-fullscreen="1"] .sal-fs-hint{opacity:1;pointer-events:auto;}



.sal-gold{color:var(--sal-gold);}

.sal-accent{color:var(--sal-accent);}

.sal-t1{color:var(--sal-t1);} .sal-t2{color:var(--sal-t2);} .sal-t3{color:var(--sal-t3);}

.sal-surface{background:var(--sal-surface);} .sal-surface2{background:var(--sal-surface2);}

.sal-border{border:1px solid var(--sal-border);}

.sal-flex{display:flex;} .sal-flex-c{display:flex;align-items:center;}

.sal-flex-cc{display:flex;align-items:center;justify-content:center;}

.sal-flex-sb{display:flex;align-items:center;justify-content:space-between;}

.sal-gap1{gap:var(--sal-s1);} .sal-gap2{gap:var(--sal-s2);} .sal-gap3{gap:var(--sal-s3);}

.sal-gap4{gap:var(--sal-s4);} .sal-gap5{gap:var(--sal-s5);}

.sal-w100{width:100%;} .sal-text-c{text-align:center;} .sal-text-r{text-align:right;}

.sal-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.sal-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}



::-webkit-scrollbar{width:6px;height:6px;}

::-webkit-scrollbar-track{background:var(--sal-surface);}

::-webkit-scrollbar-thumb{background:var(--sal-border);border-radius:3px;}

::-webkit-scrollbar-thumb:hover{background:var(--sal-t3);}

:focus-visible{outline:2px solid var(--sal-gold);outline-offset:2px;border-radius:var(--sal-radius);}

::selection{background:var(--sal-gold-glass);color:var(--sal-t1);}




.sal-divider-gold{height:1px;background:linear-gradient(90deg,transparent,var(--sal-gold-border),transparent);margin:var(--sal-s6) 0;}



.sal-counter{font-family:var(--sal-font-display);font-weight:700;color:var(--sal-gold);font-variant-numeric:tabular-nums;}



.sal-skeleton{background:linear-gradient(90deg,var(--sal-surface2) 25%,var(--sal-border) 50%,var(--sal-surface2) 75%);background-size:200% 100%;animation:sal-shimmer 1.5s infinite;border-radius:var(--sal-radius);}

@keyframes sal-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}



@keyframes sal-fade-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.sal-fade-in{animation:sal-fade-in 0.4s ease both;}

.sal-fade-in-delay-1{animation-delay:0.1s;}

.sal-fade-in-delay-2{animation-delay:0.2s;}

.sal-fade-in-delay-3{animation-delay:0.3s;}



@keyframes sal-gold-pulse{0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,0.4);}50%{box-shadow:0 0 0 8px rgba(201,168,76,0);}}

.sal-gold-pulse{animation:sal-gold-pulse 2.5s ease-in-out infinite;}



@keyframes sal-ken-burns{0%{transform:scale(1.0) translate(0,0);}33%{transform:scale(1.04) translate(-1%,-1%);}66%{transform:scale(1.06) translate(1%,0%);}100%{transform:scale(1.0) translate(0,0);}}

.sal-ken-burns{animation:sal-ken-burns 20s ease-in-out infinite;transform-origin:center center;}



.sal-portrait-wrap{position:relative;overflow:hidden;background:var(--sal-surface2);}

.sal-portrait-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;}

.sal-portrait-wrap:hover img{transform:scale(1.03);}

.sal-portrait-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0.15;}

.sal-portrait-placeholder img{width:60%;height:60%;object-fit:contain;}



.sal-breadcrumb{display:flex;align-items:center;gap:var(--sal-s2);flex-wrap:wrap;padding:var(--sal-s3) 0 var(--sal-s5);}

.sal-bc-link{color:var(--sal-t2);font-size:0.875rem;transition:color var(--sal-transition);}

.sal-bc-link:hover{color:var(--sal-gold);}

.sal-bc-sep{color:var(--sal-t3);font-size:0.75rem;}

.sal-bc-current{color:var(--sal-t1);font-size:0.875rem;}



.sal-page-header{margin-bottom:var(--sal-s7);}

.sal-page-eyebrow{font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--sal-gold);font-weight:700;margin-bottom:var(--sal-s2);}

.sal-page-title{font-family:var(--sal-font-display);font-size:clamp(2rem,4vw,3rem);font-weight:700;color:var(--sal-t1);line-height:1.1;letter-spacing:-0.02em;margin-bottom:var(--sal-s3);}

.sal-page-subtitle{font-size:1.125rem;color:var(--sal-t2);line-height:1.65;max-width:600px;}



.sal-panel{background:var(--sal-panel-bg);border:1px solid var(--sal-panel-border);border-radius:var(--sal-radius-lg);overflow:hidden;}

.sal-panel-head{padding:var(--sal-s4) var(--sal-s5);border-bottom:1px solid var(--sal-border);display:flex;align-items:center;justify-content:space-between;gap:var(--sal-s3);}

.sal-panel-title{font-weight:600;font-size:1rem;color:var(--sal-t1);}

.sal-panel-body{padding:var(--sal-s5);}

.sal-panel-footer{padding:var(--sal-s4) var(--sal-s5);border-top:1px solid var(--sal-border);background:var(--sal-surface2);}

.sal-panel--gold{border-left:3px solid var(--sal-gold);}



.sal-btn{display:inline-flex;align-items:center;gap:var(--sal-s2);padding:0 var(--sal-s5);height:40px;border-radius:40px;font-size:0.9rem;font-weight:600;transition:background var(--sal-transition),color var(--sal-transition),border-color var(--sal-transition),box-shadow var(--sal-transition);white-space:nowrap;border:1px solid transparent;cursor:pointer;}

.sal-btn-primary{background:var(--sal-gold);color:#0a0b0d;border-color:var(--sal-gold);}

.sal-btn-primary:hover{background:var(--sal-gold-bright);box-shadow:0 4px 16px var(--sal-gold-glass);}

.sal-btn-secondary{background:var(--sal-btn-bg);color:var(--sal-t1);border-color:var(--sal-btn-border);}

.sal-btn-secondary:hover{background:var(--sal-btn-hover);}

.sal-btn-ghost{background:transparent;color:var(--sal-t1);border-color:var(--sal-border);}

.sal-btn-ghost:hover{background:var(--sal-surface2);}

.sal-btn-gold-outline{background:transparent;color:var(--sal-gold);border-color:var(--sal-gold-border);}

.sal-btn-gold-outline:hover{background:var(--sal-gold-glass);}

.sal-btn-sm{height:32px;padding:0 var(--sal-s4);font-size:0.8rem;}

.sal-btn-lg{height:50px;padding:0 var(--sal-s7);font-size:1rem;}



.sal-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:0.72rem;font-weight:600;letter-spacing:0.03em;white-space:nowrap;}

.sal-badge--moh{background:var(--sal-gold);color:#0a0b0d;}

.sal-badge--gold{background:var(--sal-gold-glass);color:var(--sal-gold);border:1px solid var(--sal-gold-border);}

.sal-badge--gray{background:var(--sal-surface2);color:var(--sal-t2);border:1px solid var(--sal-border);}

.sal-badge--green{background:rgba(72,160,72,0.15);color:#72c072;border:1px solid rgba(72,160,72,0.25);}

.sal-badge--full-circle{background:var(--sal-gold);color:#0a0b0d;font-family:var(--sal-font-display);font-style:italic;}



.sal-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sal-s4);}

.sal-stat-block{background:var(--sal-surface);border:1px solid var(--sal-border);border-radius:var(--sal-radius-lg);padding:var(--sal-s5);text-align:center;}

.sal-stat-number{font-family:var(--sal-font-display);font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;color:var(--sal-gold);line-height:1;margin-bottom:var(--sal-s2);font-variant-numeric:tabular-nums;}

.sal-stat-label{font-size:0.8rem;color:var(--sal-t2);text-transform:uppercase;letter-spacing:0.06em;font-weight:600;}



.sal-building{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:60vh;gap:var(--sal-s4);}

.sal-building-icon{width:64px;height:64px;opacity:0.3;}

.sal-building-title{font-family:var(--sal-font-display);font-size:1.75rem;font-weight:700;color:var(--sal-t1);}

.sal-building-body{font-size:1rem;color:var(--sal-t2);max-width:480px;line-height:1.65;}



.sal-tribute-card{background:var(--sal-surface);border:1px solid var(--sal-border);border-radius:var(--sal-radius-lg);padding:var(--sal-s4) var(--sal-s5);transition:background var(--sal-transition);}

.sal-tribute-card:hover{background:var(--sal-surface2);}

.sal-tribute-head{display:flex;align-items:center;gap:var(--sal-s3);margin-bottom:var(--sal-s3);}

.sal-tribute-avatar{width:36px;height:36px;border-radius:50%;background:var(--sal-surface2);border:1px solid var(--sal-border);display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:700;color:var(--sal-t2);flex-shrink:0;}

.sal-tribute-author{font-weight:600;font-size:0.875rem;color:var(--sal-t1);}

.sal-tribute-meta{font-size:0.75rem;color:var(--sal-t3);}

.sal-tribute-body{font-size:0.9rem;color:var(--sal-t2);line-height:1.65;}

.sal-tribute-veteran{font-size:0.8rem;color:var(--sal-gold);font-weight:600;margin-top:var(--sal-s2);}



.sal-input{width:100%;height:42px;background:var(--sal-input-bg);border:1px solid var(--sal-input-border);border-radius:var(--sal-radius);padding:0 var(--sal-s4);color:var(--sal-t1);font-size:0.9375rem;transition:border-color var(--sal-transition),box-shadow var(--sal-transition);}

.sal-input:focus{outline:none;border-color:var(--sal-gold);box-shadow:0 0 0 3px var(--sal-gold-glass);}

.sal-input::placeholder{color:var(--sal-t3);}



.sal-full-circle-panel{border:1px solid var(--sal-gold-border);border-left:4px solid var(--sal-gold);background:var(--sal-gold-glass);border-radius:var(--sal-radius);padding:var(--sal-s5) var(--sal-s6);}

.sal-full-circle-label{font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--sal-gold);font-weight:700;margin-bottom:var(--sal-s2);}

.sal-full-circle-title{font-family:var(--sal-font-display);font-size:1.5rem;font-weight:700;color:var(--sal-gold-bright);margin-bottom:var(--sal-s3);}

.sal-full-circle-body{color:var(--sal-t2);font-size:0.9375rem;line-height:1.65;margin-bottom:var(--sal-s4);}



.sal-moh-panel{background:var(--sal-moh-bg);border-left:3px solid var(--sal-gold);border-radius:var(--sal-radius);}

.sal-moh-citation{font-family:var(--sal-font-display);font-style:italic;font-size:1.05rem;line-height:1.8;color:var(--sal-t1);border-left:3px solid var(--sal-gold-border);padding-left:var(--sal-s5);margin:var(--sal-s5) 0;}



.sal-card{background:var(--sal-card-bg);border:1px solid var(--sal-card-border);border-radius:var(--sal-radius-lg);transition:background var(--sal-transition),border-color var(--sal-transition),transform var(--sal-transition),box-shadow var(--sal-transition);overflow:hidden;cursor:pointer;}

.sal-card:hover{background:var(--sal-card-hover);border-color:var(--sal-border2);transform:translateY(-2px);box-shadow:var(--sal-shadow-md);}

.sal-vet-card{aspect-ratio:3/4;display:flex;flex-direction:column;}

.sal-vet-card-portrait{flex:1;position:relative;overflow:hidden;background:var(--sal-surface2);}

.sal-vet-card-portrait img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;}

.sal-vet-card:hover .sal-vet-card-portrait img{transform:scale(1.06);}

.sal-vet-card-branch-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--sal-branch-accent,var(--sal-gold));}

.sal-vet-card-meta{padding:var(--sal-s3) var(--sal-s3) var(--sal-s4);background:linear-gradient(180deg,var(--sal-surface) 0%,var(--sal-surface2) 100%);}

.sal-vet-card-name{font-weight:700;font-size:0.875rem;color:var(--sal-t1);line-height:1.3;margin-bottom:3px;}

.sal-vet-card-service{font-size:0.75rem;color:var(--sal-t2);}

.sal-vet-card-moh{position:absolute;top:var(--sal-s2);right:var(--sal-s2);background:var(--sal-gold);color:#0a0b0d;font-size:0.65rem;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:0.04em;}



.sal-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sal-s4);}

.sal-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sal-s5);}

.sal-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sal-s5);}

@media(max-width:1200px){.sal-grid-4{grid-template-columns:repeat(3,1fr);}}

@media(max-width:900px){.sal-grid-4{grid-template-columns:repeat(2,1fr);}.sal-grid-3{grid-template-columns:repeat(2,1fr);}}

@media(max-width:600px){.sal-grid-4,.sal-grid-3,.sal-grid-2{grid-template-columns:1fr;}}

