/* Northern Dial Co. — Heritage Brand Layer
   Matches print collateral: forest green, warm cream, muted gold, topo texture,
   compass details, torn-paper transitions, and mountain silhouettes. */
:root{
  --ndc-forest:#102019;
  --ndc-deep:#0b1511;
  --ndc-mid:#15241e;
  --ndc-cream:#eee7da;
  --ndc-paper:#f3ecdf;
  --ndc-gold:#b68a4a;
  --ndc-champagne:#eadfca;
  --ndc-ink:#172019;
}
html{background:var(--ndc-deep)}
body{
  background:var(--ndc-deep)!important;
  color:var(--ndc-cream);
  background-image:
    radial-gradient(circle at 50% 0%,rgba(182,138,74,.035),transparent 35%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23b68a4a' stroke-opacity='.055' stroke-width='.7'%3E%3Cpath d='M-20 43C26 3 63 73 109 35s83 17 131-25'/%3E%3Cpath d='M-16 58c44-39 81 27 125-9s83 20 128-20'/%3E%3Cpath d='M-11 74c40-37 76 23 119-7s80 20 123-16'/%3E%3Cpath d='M-8 103c39-30 68 17 108-9s80 24 126-9'/%3E%3Cpath d='M-15 128c42-30 70 12 111-9s77 27 127-4'/%3E%3Cpath d='M-5 153c42-27 71 15 114-6s78 25 122-2'/%3E%3Cpath d='M-15 181c44-24 74 11 115-4s79 24 130 0'/%3E%3C/g%3E%3C/svg%3E");
}
/* Fine antique-gold frame inspired by the flyers */
body::before{
  content:"";position:fixed;inset:14px;z-index:9999;pointer-events:none;
  border:1px solid rgba(182,138,74,.48);border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(234,223,202,.025);
}
@media(max-width:640px){body::before{inset:7px}}

/* Navigation feels like the business card / flyer masthead */
#site-header{
  background:rgba(11,21,17,.91)!important;
  backdrop-filter:blur(16px)!important;
  border-bottom:1px solid rgba(182,138,74,.2)!important;
}
#site-header .font-display{color:var(--ndc-cream)!important}
#site-header .btn-gold{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#mobile-nav{background:rgba(11,21,17,.985)!important}

/* Print-collateral topographic treatment on dark sections */
section{
  position:relative;
  isolation:isolate;
}
section[style*="background:#0d0f14"],section[style*="background:#111318"],section[style*="background:#0b1511"],section[style*="background: #0d0f14"],footer{
  background-color:var(--ndc-deep)!important;
  background-image:
    radial-gradient(circle at 75% 20%,rgba(182,138,74,.045),transparent 33%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='180' viewBox='0 0 260 180'%3E%3Cg fill='none' stroke='%23b68a4a' stroke-opacity='.065' stroke-width='.65'%3E%3Cpath d='M-12 28c39-31 74 24 117-8s84 17 170-22'/%3E%3Cpath d='M-10 44c42-31 76 23 118-5s82 20 168-18'/%3E%3Cpath d='M-6 61c39-29 72 20 114-3s80 23 164-14'/%3E%3Cpath d='M-5 90c42-26 72 16 112-2s79 26 164-8'/%3E%3Cpath d='M-10 119c46-23 77 15 119 0s78 27 164-4'/%3E%3Cpath d='M-5 147c45-19 76 14 119 3s78 25 158 0'/%3E%3C/g%3E%3C/svg%3E")!important;
}

/* Homepage: alternating cream paper panels like the flyer */
body > #catalog,
body > #sourcing,
body > #contact{
  background:var(--ndc-paper)!important;
  background-image:
    radial-gradient(circle at 15% 20%,rgba(90,64,34,.035),transparent 35%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E")!important;
  color:var(--ndc-ink)!important;
  border-color:rgba(182,138,74,.35)!important;
}
body > #catalog .text-white,body > #sourcing .text-white,body > #contact .text-white,
body > #catalog [class*="text-gray"],body > #sourcing [class*="text-gray"],body > #contact [class*="text-gray"]{color:#263129!important}
body > #catalog .section-label,body > #sourcing .section-label,body > #contact .section-label{color:#9a6d32!important}
body > #catalog .btn-ghost,body > #sourcing .btn-ghost,body > #contact .btn-ghost{color:#5e472c!important;border-color:rgba(122,87,45,.45)!important}
body > #catalog .ndc-input,body > #sourcing .ndc-input,body > #contact .ndc-input{background:rgba(11,21,17,.035)!important;color:#172019!important;border-color:rgba(122,87,45,.33)!important}

/* Torn-paper transition edges */
body > #catalog::before,body > #sourcing::before,body > #contact::before{
  content:"";position:absolute;left:0;right:0;top:-18px;height:22px;z-index:2;
  background:var(--ndc-paper);
  clip-path:polygon(0 48%,3% 63%,7% 38%,12% 70%,17% 43%,22% 64%,28% 34%,34% 66%,39% 39%,45% 72%,51% 43%,57% 65%,63% 36%,69% 69%,75% 40%,81% 64%,87% 35%,93% 68%,100% 46%,100% 100%,0 100%);
}

/* Hero: stronger Northern Dial compass / print-poster character */
#hero{background:var(--ndc-deep)!important}
#hero::after{
  content:"✦";position:absolute;top:17%;left:50%;transform:translateX(-50%);z-index:3;
  color:var(--ndc-gold);font-size:2rem;line-height:1;opacity:.9;text-shadow:0 0 28px rgba(182,138,74,.15);pointer-events:none;
}
#hero h1,.font-display{letter-spacing:.025em}
#hero .btn-gold{border:1px solid #c79a5d}

/* Flyer-style cards, rules, and borders */
.blog-card,.watch-card,[class*="border-white/"],[style*="border:1px solid rgba(200,169,110"]{
  border-color:rgba(182,138,74,.24)!important;
}
.blog-card:hover,.watch-card:hover{border-color:rgba(182,138,74,.58)!important}
.gold-rule{background:linear-gradient(90deg,transparent,var(--ndc-gold),transparent)!important}
.btn-gold{background:var(--ndc-gold)!important;color:var(--ndc-deep)!important}
.btn-gold:hover{background:var(--ndc-champagne)!important}
.section-label{color:var(--ndc-gold)!important}

/* Mountain silhouette/footer cue */
footer{position:relative;overflow:hidden;padding-top:5.5rem!important}
footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:72px;opacity:.48;pointer-events:none;
  background-repeat:repeat-x;background-size:700px 72px;background-position:center bottom;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 72'%3E%3Cpath d='M0 72V61l48-20 28 9 39-31 28 25 24-17 34 29 44-42 34 31 26-15 42 30 51-51 43 41 33-22 38 28 46-36 39 31 28-16 45 37v10z' fill='%23b68a4a' fill-opacity='.23'/%3E%3Cpath d='M0 72V66l61-16 31 7 42-21 31 17 44-12 40 18 55-25 48 20 44-14 51 20 49-17 48 16 45-12 51 20 80-20v35z' fill='%2308100d'/%3E%3C/svg%3E");
}

/* Internal product/journal pages: premium framed content blocks */
body:not(:has(#hero)) main,body:not(:has(#hero)) article{position:relative}
.spec-row{border-color:rgba(182,138,74,.16)!important}

/* Accessible selection */
::selection{background:rgba(182,138,74,.35);color:var(--ndc-cream)}

/* Homepage hero correction — carry the print identity through the first screen */
#hero{
  background-color:var(--ndc-deep)!important;
  background-image:
    radial-gradient(circle at 50% 34%,rgba(182,138,74,.085),transparent 25%),
    linear-gradient(180deg,#0b1511 0%,#102019 58%,#0b1511 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='190' viewBox='0 0 280 190'%3E%3Cg fill='none' stroke='%23b68a4a' stroke-opacity='.09' stroke-width='.7'%3E%3Cpath d='M-12 28c39-31 74 24 117-8s84 17 190-22'/%3E%3Cpath d='M-10 44c42-31 76 23 118-5s82 20 188-18'/%3E%3Cpath d='M-6 61c39-29 72 20 114-3s80 23 184-14'/%3E%3Cpath d='M-5 90c42-26 72 16 112-2s79 26 184-8'/%3E%3Cpath d='M-10 119c46-23 77 15 119 0s78 27 184-4'/%3E%3Cpath d='M-5 147c45-19 76 14 119 3s78 25 178 0'/%3E%3C/g%3E%3C/svg%3E")!important;
}
/* Suppress the old cool-gray photographic wash while retaining a faint mountain cue */
#hero > div.absolute.inset-0.z-0{
  background:linear-gradient(180deg,rgba(11,21,17,.94),rgba(16,32,25,.92) 58%,rgba(11,21,17,.98))!important;
}
#hero > div.absolute.inset-0.z-0 > div{
  opacity:.18!important;
  filter:grayscale(1) sepia(.35) hue-rotate(80deg) saturate(.65) contrast(1.05)!important;
  mix-blend-mode:soft-light!important;
}
/* Warm paper/cream typography and more poster-like hierarchy */
#hero h1{color:var(--ndc-cream)!important;text-shadow:0 2px 24px rgba(0,0,0,.28)}
#hero h1 em{color:#c79a5d!important}
#hero p.text-gray-400{color:rgba(234,223,202,.72)!important}
#hero .text-gray-400{color:rgba(234,223,202,.66)!important}
#hero .text-gray-500{color:rgba(234,223,202,.42)!important}
#hero .border-white\/10{border-color:rgba(182,138,74,.28)!important}
#hero .btn-ghost{background:rgba(11,21,17,.42)!important;color:var(--ndc-champagne)!important;border-color:rgba(182,138,74,.58)!important}
#hero .btn-ghost:hover{background:rgba(182,138,74,.12)!important;border-color:var(--ndc-gold)!important}
/* Decorative bottom mountain band, like the flyers */
#hero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:150px;z-index:1;pointer-events:none;
  background-repeat:repeat-x;background-size:980px 150px;background-position:center bottom;
  opacity:.72;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 980 150'%3E%3Cpath d='M0 150V125l70-42 35 18 53-62 42 48 41-31 57 53 68-78 58 63 46-35 62 52 72-91 60 79 51-42 61 50 73-69 59 58 42-27 70 56v25z' fill='%23b68a4a' fill-opacity='.16'/%3E%3Cpath d='M0 150v-15l88-35 47 16 65-43 53 34 68-26 65 40 79-55 73 49 66-35 72 45 75-40 73 38 70-30 78 43 117-43v57z' fill='%2308110d'/%3E%3C/svg%3E");
}
/* Brand marquee directly under hero */
#hero + div.py-5{
  background:var(--ndc-forest)!important;
  border-color:rgba(182,138,74,.30)!important;
  box-shadow:inset 0 1px 0 rgba(234,223,202,.025),inset 0 -1px 0 rgba(234,223,202,.025);
}
#hero + div.py-5 .font-display{color:rgba(182,138,74,.58)!important}
#hero + div.py-5 .text-xs{color:rgba(182,138,74,.38)!important}

/* 2026-08-08 — Homepage hero: restore the original photographic composition,
   recolored into the Northern Dial forest-green palette. */
#hero{
  background:#08110d!important;
  background-image:linear-gradient(180deg,#08110d 0%,#0b1711 46%,#102019 72%,#08110d 100%)!important;
}
/* Remove the later poster-only additions so the hero keeps its original clean view. */
#hero::before,#hero::after{content:none!important;display:none!important;}

/* Original mountain-photo stage, now green instead of charcoal-blue. */
#hero > div.absolute.inset-0.z-0{
  background:#08110d!important;
  background-image:none!important;
}
/* Photo layer: keep it visible and preserve the old lower-third composition. */
#hero > div.absolute.inset-0.z-0 > div:first-child{
  opacity:.56!important;
  filter:grayscale(.72) sepia(.18) hue-rotate(78deg) saturate(1.10) brightness(.62) contrast(1.12)!important;
  mix-blend-mode:normal!important;
}
/* Replace the old charcoal fade with layered forest greens while retaining the same reveal. */
#hero > div.absolute.inset-0.z-0 > div:nth-child(2){
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  background:linear-gradient(to bottom,
    rgba(8,17,13,1) 0%,
    rgba(8,17,13,.99) 27%,
    rgba(10,24,17,.72) 48%,
    rgba(14,35,25,.36) 62%,
    rgba(10,25,18,.70) 79%,
    rgba(8,17,13,.96) 93%,
    rgba(8,17,13,1) 100%)!important;
}
/* Keep the original center glow, just warm/green. */
#hero > div.absolute.inset-0.pointer-events-none:not(.flex){
  background:radial-gradient(ellipse 60% 40% at 50% 38%,rgba(182,138,74,.07) 0%,rgba(21,52,37,.055) 38%,transparent 67%)!important;
}
/* Restore the original grain overlay rather than topo lines across the hero. */
#hero > div.absolute.inset-0.opacity-20.pointer-events-none{
  opacity:.16!important;
}
/* The dial watermark remains the central visual element from the old homepage. */
#hero > div.absolute.inset-0.pointer-events-none.flex svg{
  opacity:.075!important;
}
#hero h1{color:#eee7da!important;}
#hero h1 em{color:#c39a5d!important;}
#hero p.text-gray-400,#hero .text-gray-400{color:rgba(234,223,202,.69)!important;}
#hero .text-gray-500{color:rgba(234,223,202,.34)!important;}
#hero .border-white\/10{border-color:rgba(182,138,74,.25)!important;}
#hero .btn-ghost{
  background:rgba(8,17,13,.34)!important;
  color:#eadfca!important;
  border-color:rgba(182,138,74,.52)!important;
}
#hero .btn-ghost:hover{background:rgba(21,52,37,.62)!important;border-color:#b68a4a!important;}
/* Green the marquee under the hero, but keep its original slim, understated treatment. */
#hero + div.py-5{
  background:#09130f!important;
  border-top:1px solid rgba(182,138,74,.18)!important;
  border-bottom:1px solid rgba(182,138,74,.18)!important;
}

/* 2026-08-08 — Readability / contrast refinement
   Softer heritage palette, higher text contrast, and cleaner typography. */
:root{
  --ndc-deep:#07120d;
  --ndc-forest:#0d2118;
  --ndc-mid:#163126;
  --ndc-card:#10271d;
  --ndc-cream:#f1eadf;
  --ndc-paper:#f4eee3;
  --ndc-gold:#c39a56;
  --ndc-champagne:#e9ddc8;
  --ndc-ink:#18251e;
  --ndc-muted-dark:#526158;
  --ndc-muted-light:#c8c1b5;
}
body{
  color:var(--ndc-cream)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Body copy: slightly warmer and easier to read than cool gray. */
p,li,a,button,input,textarea,select{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;}
p,li{line-height:1.7;}

/* Dark sections get warm, high-contrast secondary text. */
section[style*="background:#0d0f14"] .text-gray-400,
section[style*="background:#111318"] .text-gray-400,
section[style*="background:#0b1511"] .text-gray-400,
section[style*="background: #0d0f14"] .text-gray-400,
footer .text-gray-400{color:rgba(241,234,223,.74)!important;}
section[style*="background:#0d0f14"] .text-gray-500,
section[style*="background:#111318"] .text-gray-500,
section[style*="background:#0b1511"] .text-gray-500,
footer .text-gray-500{color:rgba(241,234,223,.52)!important;}

/* Paper sections: dark green copy instead of washed gray. */
body > #catalog [class*="text-gray"],
body > #sourcing [class*="text-gray"],
body > #contact [class*="text-gray"]{color:#425047!important;}
body > #catalog p,body > #sourcing p,body > #contact p{font-weight:400;}

/* Sourcing category cards — this was the lowest-contrast area. */
body > #sourcing .grid.grid-cols-1 > div{
  background:linear-gradient(145deg,#10271d 0%,#0b1c15 100%)!important;
  border:1px solid rgba(195,154,86,.42)!important;
  box-shadow:0 12px 34px rgba(7,18,13,.12), inset 0 1px 0 rgba(255,255,255,.025);
  padding:1.65rem!important;
}
body > #sourcing .grid.grid-cols-1 > div .section-label{
  color:#d4a85c!important;
  font-size:.68rem!important;
  font-weight:700!important;
  letter-spacing:.22em!important;
  margin-bottom:1rem!important;
}
body > #sourcing .grid.grid-cols-1 > div ul,
body > #sourcing .grid.grid-cols-1 > div li{
  color:#e8e0d3!important;
  font-size:.91rem!important;
  line-height:1.62!important;
  font-weight:400!important;
}
body > #sourcing .grid.grid-cols-1 > div li + li{margin-top:.28rem!important;}
body > #sourcing .grid.grid-cols-1 > div:hover{
  border-color:rgba(195,154,86,.72)!important;
  transform:translateY(-2px);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow:0 16px 38px rgba(7,18,13,.17), inset 0 1px 0 rgba(255,255,255,.035);
}

/* Stronger paper-section headings and buttons. */
body > #catalog h2,body > #sourcing h2,body > #contact h2{color:#17271f!important;}
body > #catalog h2 em,body > #sourcing h2 em,body > #contact h2 em{color:#a97735!important;}
body > #sourcing .btn-gold,body > #catalog .btn-gold,body > #contact .btn-gold{
  background:#b98a44!important;
  color:#09140f!important;
  border:1px solid #9d7339!important;
  font-weight:700!important;
}
body > #sourcing .btn-gold:hover,body > #catalog .btn-gold:hover,body > #contact .btn-gold:hover{
  background:#d5b273!important;
}

/* Table/list rows on paper: stronger typography and clearer hover target. */
body > #catalog a.group{color:#18251e!important;}
body > #catalog a.group:hover{background:rgba(16,39,29,.045)!important;}
body > #catalog a.group .font-display{color:#18251e!important;font-weight:500!important;}

/* Keep display type elegant, but avoid ultra-thin text at small sizes. */
.font-display{font-weight:400;}
@media (max-width:640px){
  body > #sourcing .grid.grid-cols-1 > div{padding:1.35rem!important;}
  body > #sourcing .grid.grid-cols-1 > div ul,
  body > #sourcing .grid.grid-cols-1 > div li{font-size:.95rem!important;}
}