/* Mountain Smoke Old Style — visual layer over the identical current site. */
:root {
  --old-typewriter: "American Typewriter", "Courier New", Courier, monospace;
  --old-ink: #28180f;
  --old-brown: #4b2e1a;
  --old-paper: #cdb486;
  --old-paper-light: #ddc99f;
  --old-cream: #f0dfb8;
  --old-brass: #c09555;
  --old-line: rgba(76, 46, 26, .42);
  --bg: var(--old-paper);
  --panel: rgba(225, 205, 165, .88);
  --panel2: rgba(91, 56, 30, .08);
  --gold: var(--old-brass);
  --copper: #77451f;
  --ms-gold: #3b2112;
  --ms-accent: #4a2815;
  --text: var(--old-ink);
  --muted: #6d5038;
  --line: var(--old-line);
  --shadow: 0 24px 60px rgba(52, 31, 17, .22);
}

body {
  background:
    radial-gradient(circle at 15% 8%, rgba(255,244,211,.52), transparent 32rem),
    radial-gradient(circle at 85% 62%, rgba(100,60,31,.12), transparent 34rem),
    repeating-linear-gradient(7deg, rgba(71,43,24,.026) 0 1px, transparent 1px 5px),
    var(--old-paper) !important;
  color: var(--old-ink) !important;
  font-family: var(--old-typewriter) !important;
}

body,
body button,
body input,
body select,
body textarea,
body a,
body p,
body li,
body span,
body strong {
  font-family: var(--old-typewriter) !important;
}

body::before {
  position: fixed;
  z-index: 9999;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,246,214,.12), transparent 22%),
    radial-gradient(circle at 80% 70%, rgba(55,31,16,.1), transparent 30%);
  content: "";
  pointer-events: none;
  mix-blend-mode: screen;
}

.site-header {
  border-bottom: 1px solid var(--old-line) !important;
  background: rgba(20, 12, 7, .96) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.38) !important;
}

.page-title,
.section-title,
h1, h2, h3 {
  background: none !important;
  color: var(--old-ink) !important;
  font-family: var(--old-typewriter) !important;
  font-weight: 700 !important;
  letter-spacing: .025em !important;
  text-shadow: 0 1px 0 rgba(255,244,212,.65) !important;
  -webkit-text-fill-color: var(--old-ink) !important;
}

.brand span,
.main-nav a,
.credits-top-link {
  color: var(--old-cream) !important;
  font-family: var(--old-typewriter) !important;
  -webkit-text-fill-color: currentColor !important;
}

.main-nav a,
.eyebrow,
.player-label,
.club-audio-status,
button,
label {
  letter-spacing: .055em !important;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.active,
.credits-top-link:hover,
.credits-top-link:focus-visible,
a:not(.brand):hover {
  color: var(--old-brass) !important;
}

.glass-card,
.knowledge-teaser-item,
.member-card,
.format-card,
.history-card,
.storage-card,
.making-card,
.gallery-item,
.jar-card {
  border-color: var(--old-line) !important;
  border-radius: 2px !important;
  background:
    repeating-linear-gradient(4deg, rgba(70,42,23,.025) 0 1px, transparent 1px 5px),
    linear-gradient(rgba(224,204,163,.96), rgba(199,173,125,.96)),
    var(--old-paper-light) !important;
  color: var(--old-ink) !important;
  box-shadow:
    inset 0 0 0 3px rgba(66,39,20,.04),
    0 16px 42px rgba(53,31,16,.2) !important;
  backdrop-filter: none !important;
}

.glass-card::before,
.knowledge-teaser-item::before {
  border-color: rgba(76,46,26,.2) !important;
}

.glass-card p,
.glass-card li,
.glass-card strong,
.knowledge-teaser-item strong,
.knowledge-teaser-item span,
.member-card strong,
.member-info,
.intro-text,
main p,
main li {
  color: var(--old-ink) !important;
}

.mosaic {
  padding: .55rem !important;
  border: 1px solid var(--old-line) !important;
  border-radius: 2px !important;
  background: #51341f !important;
  box-shadow: 0 22px 55px rgba(52,30,15,.3) !important;
}

.mosaic img,
.gallery-grid img,
.member-card img,
.history-page img,
.making-page img,
.storage-page img,
.club-cigar-page img {
  border-radius: 0 !important;
  filter: sepia(.76) saturate(.62) contrast(1.08) brightness(.87) !important;
}

.mosaic img:hover,
.gallery-grid a:hover img {
  filter: sepia(.5) saturate(.78) contrast(1.04) brightness(.96) !important;
}

.club-audio-disc,
.club-audio-art,
.club-audio-progress,
.club-audio-volume {
  accent-color: var(--old-brass) !important;
}

.club-audio-badge,
.club-audio-disc-label,
.number,
.eyebrow,
.club-home-note,
.innovation-quote {
  color: var(--old-brass) !important;
}

.club-audio-time,
.club-audio-time-separator {
  color: var(--old-ink) !important;
}

.club-audio-mute {
  border-color: rgba(59,33,18,.45) !important;
  background: rgba(239,220,176,.32) !important;
  color: var(--old-ink) !important;
}

.eyebrow,
.player-label,
.club-audio-status,
.role,
main a {
  color: #3b2112 !important;
}

.page-subtitle,
.hero .eyebrow,
.hero .kicker,
.disclaimer-hero .eyebrow,
.section-kicker,
.library-hero-overlay .eyebrow,
main .player-subtitle {
  color: #3b2112 !important;
  -webkit-text-fill-color: #3b2112 !important;
  text-shadow: none !important;
}

.smoke { display: none !important; }

/* Remove the modern orange from every logo used by Old Style. */
img[src$="logo.png"] {
  filter: grayscale(1) sepia(1) saturate(1.5) brightness(.58) contrast(1.35) !important;
}

.brand img,
.credits-page .logo,
.credits-page .watermark,
.jar-preloader img,
.members-loader-logo {
  filter: grayscale(1) sepia(1) saturate(1.15) brightness(1.35) contrast(.88) !important;
}

.brand img {
  opacity: .92;
  filter: grayscale(1) sepia(1) saturate(1.15) brightness(1.5) contrast(.9)
    drop-shadow(0 0 10px rgba(192,149,85,.24)) !important;
}

/* Pictures: aged prints laid out like photographs from an old archive. */
.gallery-page .gallery-lounge {
  padding: clamp(1.2rem, 3vw, 2rem) !important;
  border: 1px solid rgba(65, 37, 19, .45) !important;
  border-radius: 2px !important;
  background:
    repeating-linear-gradient(5deg, rgba(62,35,18,.025) 0 1px, transparent 1px 6px),
    #bfa474 !important;
  box-shadow: inset 0 0 45px rgba(67,39,20,.18), 0 24px 55px rgba(53,31,16,.22) !important;
  backdrop-filter: none !important;
}

.gallery-page .gallery-lounge-grid {
  gap: clamp(1rem, 2.2vw, 1.75rem) !important;
}

.gallery-page .gallery-lounge-item {
  padding: 7px 7px 34px !important;
  overflow: visible !important;
  border: 1px solid rgba(59,32,16,.45) !important;
  border-radius: 1px !important;
  background: #d8c49b !important;
  box-shadow: 2px 8px 17px rgba(54,31,16,.3) !important;
  transform: rotate(-1.2deg) !important;
}

.gallery-page .gallery-lounge-item:nth-child(3n) { transform: rotate(1.1deg) !important; }
.gallery-page .gallery-lounge-item:nth-child(4n) { transform: rotate(-.45deg) !important; }
.gallery-page .gallery-lounge-item:nth-child(5n) { transform: rotate(1.7deg) !important; }

.gallery-page .gallery-lounge-item::after {
  inset: 7px 7px 34px !important;
  background:
    repeating-linear-gradient(103deg, transparent 0 18px, rgba(255,245,215,.09) 19px, transparent 20px 43px),
    radial-gradient(circle at 18% 12%, rgba(255,246,216,.18), transparent 24%),
    linear-gradient(180deg, transparent 60%, rgba(44,25,13,.2)) !important;
  opacity: 1 !important;
  mix-blend-mode: screen;
}

.gallery-page .gallery-lounge-item img {
  border: 1px solid rgba(49,28,15,.35) !important;
  border-radius: 0 !important;
  filter: grayscale(.78) sepia(.9) saturate(.58) contrast(1.12) brightness(.88) !important;
  transform: none !important;
}

.gallery-page .gallery-lounge-grid:hover .gallery-lounge-item:not(:hover) {
  filter: none !important;
}

.gallery-page .gallery-lounge-item:hover,
.gallery-page .gallery-lounge-item:nth-child(n):hover {
  z-index: 5;
  border-color: #4b2a16 !important;
  box-shadow: 4px 16px 30px rgba(51,29,14,.38) !important;
  transform: translateY(-5px) rotate(0) scale(1.035) !important;
}

.gallery-page .gallery-lounge-item:hover img {
  filter: grayscale(.56) sepia(.82) saturate(.65) contrast(1.08) brightness(.95) !important;
  transform: none !important;
}

.gallery-page .gallery-lounge-caption {
  right: .45rem !important;
  bottom: .55rem !important;
  left: .45rem !important;
  overflow: hidden;
  color: #3b2112 !important;
  font-size: .62rem !important;
  letter-spacing: .02em !important;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: none !important;
  white-space: nowrap;
  opacity: .82 !important;
  transform: none !important;
}

.gallery-page .ms-lightbox-img {
  border: 10px solid #d8c49b !important;
  filter: grayscale(.72) sepia(.88) saturate(.6) contrast(1.1) brightness(.9) !important;
}

/* Downloads keep the same structure, but read like an old mail-order catalogue. */
.downloads-page .downloads-hero {
  padding: 9px 9px 34px !important;
  border-radius: 1px !important;
  background: #d8c49b !important;
  box-shadow: 3px 13px 32px rgba(54,31,16,.3) !important;
  transform: rotate(-.35deg);
}

.downloads-page .downloads-hero img {
  border-radius: 0 !important;
  filter: grayscale(.7) sepia(.9) saturate(.6) contrast(1.08) brightness(.9) !important;
}

.downloads-page .downloads-hero figcaption {
  border: 1px solid rgba(59,33,18,.65) !important;
  background: rgba(239,222,181,.94) !important;
  color: #2b160b !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.5) !important;
  backdrop-filter: none !important;
}

.downloads-page .iphone-guide {
  border-color: var(--old-line) !important;
  border-radius: 2px !important;
  background: linear-gradient(rgba(224,204,163,.97),rgba(199,173,125,.97)) !important;
  color: var(--old-ink) !important;
  box-shadow: 2px 12px 28px rgba(53,31,16,.2) !important;
}

.downloads-page .iphone-guide h2,
.downloads-page .iphone-guide li,
.downloads-page .iphone-guide li strong,
.downloads-page .iphone-guide-help { color: var(--old-ink) !important; }
.downloads-page .iphone-guide li::before { border-color: var(--old-ink) !important; color: var(--old-ink) !important; }
.downloads-page .iphone-guide-help { border-color: var(--old-line) !important; }
.downloads-page .iphone-guide-help a { color: #502916 !important; }

/* Search page as a vintage library catalogue. */
.search-page .search-hero > p:last-child,
.search-page .search-hint,
.search-page .search-results-heading span,
.search-page .search-result p,
.search-page .search-empty { color: var(--old-ink) !important; }
.search-page .search-panel,
.search-page .search-result,
.search-page .search-empty {
  border-color: var(--old-line) !important;
  border-radius: 2px !important;
  background: linear-gradient(rgba(224,204,163,.97),rgba(199,173,125,.97)) !important;
  box-shadow: 2px 12px 28px rgba(53,31,16,.2) !important;
}
.search-page .search-field {
  border-color: rgba(59,33,18,.55) !important;
  border-radius: 2px !important;
  background: rgba(239,220,176,.45) !important;
}
.search-page .search-field input,
.search-page .search-field input::placeholder,
.search-page .search-field > span,
.search-page .search-field button,
.search-page .search-panel > label,
.search-page .search-result h3,
.search-page .search-result-type,
.search-page .search-empty strong { color: var(--old-ink) !important; }
.search-page .search-result mark { background: #5b341d !important; color: #f0dfb8 !important; }

/* Tobacco map as an old explorer's chart. */
.tobacco-map-page .map-hero > p:last-child,
.tobacco-map-page .country-summary,
.tobacco-map-page .country-story p,
.tobacco-map-page .map-note p,
.tobacco-map-page .map-credit,
.tobacco-map-page .map-legend { color: var(--old-ink) !important; }
.tobacco-map-page .world-map-wrap,
.tobacco-map-page .country-detail {
  border-color: var(--old-line) !important;
  border-radius: 2px !important;
  background: linear-gradient(rgba(224,204,163,.97),rgba(199,173,125,.97)) !important;
  box-shadow: 2px 12px 28px rgba(53,31,16,.22) !important;
}
.tobacco-map-page .world-map-wrap img { opacity: .9 !important; filter: saturate(.72) brightness(.84) contrast(1.12) drop-shadow(0 2px 12px rgba(48,31,13,.5)) !important; }
.tobacco-map-page .country-tabs button,
.tobacco-map-page .flavour-tags span { border-radius: 2px !important; border-color: var(--old-line) !important; color: var(--old-ink) !important; background: rgba(239,220,176,.28) !important; }
.tobacco-map-page .country-tabs button.active { background: var(--old-ink) !important; color: #ead9b1 !important; }
.tobacco-map-page .country-code,
.tobacco-map-page .country-kicker,
.tobacco-map-page .country-facts dt,
.tobacco-map-page .country-facts dd,
.tobacco-map-page .country-story h3,
.tobacco-map-page .country-source { color: var(--old-ink) !important; border-color: var(--old-ink) !important; }
.tobacco-map-page .map-note { border-color: var(--old-ink) !important; background: rgba(224,204,163,.62) !important; }

.downloads-page .ringtone-card {
  border-color: var(--old-line) !important;
  border-radius: 2px !important;
  background:
    repeating-linear-gradient(4deg, rgba(70,42,23,.025) 0 1px, transparent 1px 5px),
    linear-gradient(rgba(224,204,163,.96), rgba(199,173,125,.96)) !important;
  box-shadow: 2px 12px 28px rgba(53,31,16,.2) !important;
}

.downloads-page .ringtone-copy h2,
.downloads-page .ringtone-copy p,
.downloads-page .ringtone-meta,
.downloads-page .ringtone-note,
.downloads-page .ringtone-note strong {
  color: var(--old-ink) !important;
}

.downloads-page .ringtone-play {
  border-color: #4b2a16 !important;
  background: radial-gradient(circle,#b99b6a 0 22%,#382216 23% 55%,#826038 56%) !important;
  color: #f0dfb8 !important;
}

.downloads-page .download-actions a {
  border-radius: 1px !important;
  background: rgba(75,42,22,.08) !important;
  color: #3b2112 !important;
}

.downloads-page .download-actions a:hover,
.downloads-page .download-actions a:focus-visible {
  background: #3b2112 !important;
  color: #f0dfb8 !important;
}

@media (max-width: 760px) {
  .gallery-page .gallery-lounge-item { padding: 5px 5px 30px !important; }
  .gallery-page .gallery-lounge-item::after { inset: 5px 5px 30px !important; }
}

.knowledge-teaser-item,
.cta,
button,
.back-to-top {
  border-color: var(--old-line) !important;
}

.site-footer {
  border-top: 1px solid var(--old-line) !important;
  background: #100a06 !important;
  color: #af9871 !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Contrast pass: stronger ink, darker parchment and clearly readable controls. */
:root {
  --old-ink: #1d0f08;
  --old-paper: #b99b68;
  --old-paper-light: #cfb27b;
  --old-brass: #9a642b;
  --old-line: rgba(45, 24, 12, .58);
  --muted: #4c321f;
}

body {
  background:
    linear-gradient(rgba(92,55,25,.08), rgba(76,42,18,.18)),
    url("../images/backgrounds/vintage-parchment.png") center top / cover fixed no-repeat,
    #b9975d !important;
}

.glass-card,
.knowledge-teaser-item,
.member-card,
.format-card,
.history-card,
.storage-card,
.making-card,
.jar-card,
.basis-card,
.detail-card,
.detail-toc,
.format-filter-panel,
.format-abhandlung-link {
  border-color: rgba(45,24,12,.58) !important;
  background:
    repeating-linear-gradient(4deg, rgba(48,27,14,.035) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #d2b980, #b99a66) !important;
  box-shadow: inset 0 0 0 2px rgba(255,239,198,.12), 0 16px 38px rgba(44,24,12,.28) !important;
}

body select,
.country-select-wrap select,
.format-filter-panel select {
  border-color: #7b4d20 !important;
  background-color: #1b110b !important;
  color: #fff0c8 !important;
  -webkit-text-fill-color: #fff0c8 !important;
  box-shadow: inset 0 0 0 1px rgba(230,190,113,.12) !important;
}

body select option {
  background: #1b110b !important;
  color: #fff0c8 !important;
}

.country-select-wrap > span,
.format-filter-panel label,
.format-filter-panel .filter-label,
.format-specs span,
.detail-specs span {
  color: #3b2112 !important;
  -webkit-text-fill-color: #3b2112 !important;
  font-weight: 900 !important;
}

.format-specs div,
.detail-specs div {
  border-color: rgba(39,21,11,.68) !important;
  background: #705837 !important;
}

.format-specs span,
.detail-specs span {
  color: #f1d9a7 !important;
  -webkit-text-fill-color: #f1d9a7 !important;
}

.format-specs strong,
.detail-specs strong {
  color: #fff7e4 !important;
  -webkit-text-fill-color: #fff7e4 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.45) !important;
}

.format-duration,
.format-reset {
  border-color: #71451f !important;
  background: rgba(239,214,161,.38) !important;
  color: #3a2011 !important;
  -webkit-text-fill-color: #3a2011 !important;
}

.tobacco-map-page .country-detail {
  background:
    repeating-linear-gradient(4deg, rgba(48,27,14,.035) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #d3bb84, #b99a64) !important;
}

.tobacco-map-page .country-facts div,
.tobacco-map-page .country-industry,
.tobacco-map-page .country-industry > div {
  border-color: rgba(50,27,13,.34) !important;
}

.tobacco-map-page .country-industry > div,
.tobacco-map-page .flavour-tags span {
  background: rgba(255,235,188,.28) !important;
}

@media (max-width: 760px) {
  body { background-attachment: scroll, scroll, scroll !important; }
}

/* Typewriter text reads best at regular weight; hierarchy stays deliberately bold. */
body,
main p,
main li,
main dd,
.intro-text,
.page-subtitle,
.country-summary,
.country-story p,
.format-card p,
.detail-card p,
.history-card p,
.storage-card p,
.making-card p,
.jar-card p {
  font-weight: 400 !important;
}

main strong,
main dt,
main h1,
main h2,
main h3,
button,
label,
.eyebrow,
.format-name,
.format-specs strong,
.detail-specs strong {
  font-weight: 700 !important;
}

/* The compact navigation needs a cleaner typewriter face than display copy. */
.main-nav a {
  color: #f5e5bf !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: .86rem !important;
  font-weight: 400 !important;
  letter-spacing: .035em !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
}

.main-nav .nav-group-title {
  color: #d59a4d !important;
  font-family: "Courier New", Courier, monospace !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .11em !important;
  text-shadow: none !important;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.active,
.main-nav a[aria-current="page"] {
  color: #ffe8ad !important;
  background: rgba(184,126,47,.16) !important;
}
