:root {
    --color-primary: #005F7A;
    --color-secondary: #00B8C4;
    --color-accent: #FF6B4A;
    --color-background: #F4F6F2;
    --color-surface: #E6D3A3;
    --color-text: #141414;
    --color-muted-text: #666666;
    --color-border: rgba(20,20,20,0.15);
    --font-heading: 'Inter', 'Arial Black', 'Arial', sans-serif;
    --font-body: 'Inter', 'Arial', sans-serif;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 32px;
    --radius-pill: 999px;
    --shadow-card: 0 20px 50px rgba(0,0,0,0.12);
    --shadow-header: 0 12px 30px rgba(0,0,0,0.15);
    --shadow-focus: 0 0 0 0.3rem rgba(0, 95, 122, 0.4);
    --section-y: 6rem;
    --container-width: 1400px;
    --card-padding: 2.5rem;
    --btn-py: 1rem;
    --btn-px: 2rem;
}
body {font-family: var(--font-body); background: var(--color-background); color: var(--color-text); line-height: 1.6;}
h1,h2,h3,h4,h5,h6,.navbar-brand {font-family: var(--font-heading);}
.container, .container-lg, .container-xl {max-width: var(--container-width);}
.site-header {background: var(--color-primary); box-shadow: var(--shadow-header);}
.navbar-brand, .nav-link {color: #fff !important;}
.nav-link {opacity: .9;}
.nav-link:hover {opacity: 1;}
.hero-section {background: linear-gradient(135deg, rgba(0,95,122,0.85), rgba(0,184,196,0.7)); color: white;}
.sf-card, .card, .sidebar-widget {background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--card-padding);}
.widget-title {color: var(--color-primary); margin-bottom: 1rem;}
.btn {border-radius: var(--radius-pill); padding: var(--btn-py) var(--btn-px); font-weight: 600;}
.btn-primary {background: var(--color-secondary); border-color: var(--color-secondary);}
.btn-primary:hover {background: var(--color-primary); border-color: var(--color-primary);}
.btn-outline-primary {color: var(--color-primary); border-color: var(--color-primary);}
.btn-outline-primary:hover {background: var(--color-primary); border-color: var(--color-primary);}
.btn-size-sm {padding: .5rem 1rem; font-size: .9rem;}
.btn-size-md {padding: var(--btn-py) var(--btn-px);}
.btn-size-lg {padding: 1rem 2rem; font-size: 1.05rem;}
.article-meta, .text-muted {color: var(--color-muted-text) !important;}
.tag {background: var(--color-accent); color: var(--color-primary); padding: .25rem .75rem; border-radius: var(--radius-pill); display:inline-block; margin-right:.5rem; margin-bottom:.5rem;}
.page-shell {padding-top: 3rem; padding-bottom: 3rem;}
.site-footer {background: var(--color-primary); color: white; margin-top: 3rem;}
.site-footer a {color: white; text-decoration: none;}
.site-footer a:hover {text-decoration: underline;}
.accordion-button:not(.collapsed) {background: rgba(0,0,0,.03); color: var(--color-primary);}
.accordion-button:focus {box-shadow: var(--shadow-focus);}

/* CARSON SPEC – EXACT BUTTON & IMAGE CARD SYSTEM */

:root {
  --rust: #FF6B4A;
  --sand: #E6D3A3;
  --aqua: #7FF6EE;
  --salt: #F4F6F2;
  --ink: #141414;
  --ocean-deep: #005F7A;
  --caribbean: #00B8C4;
  --sun: #c78643;
  --paper: #F4F6F2;
}

/* ========== BUTTON SYSTEM ========== */

/* 1. Primary Button (Conversion-Button) */
.btn.btn-primary,
.btn-primary,
.btn-primary.btn-size-md,
.btn-primary.btn-size-lg {
  background-color: var(--rust) !important;
  color: white !important;
  border: none !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  padding: 14px 20px !important;
  box-shadow: 10px 10px 0 rgba(0,0,0,0.12) !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1 !important;
}
.btn.btn-primary:hover,
.btn-primary:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 14px 14px 0 rgba(0,0,0,0.15) !important;
}

/* 2. Secondary Button (Glass / Editorial) */
.btn.btn-outline-primary,
.btn-outline-primary,
.btn-outline-primary.btn-size-md {
  background-color: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: var(--salt) !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  padding: 14px 20px !important;
  backdrop-filter: blur(9px) !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1 !important;
}
.btn.btn-outline-primary:hover,
.btn-outline-primary:hover {
  background-color: rgba(255,255,255,0.25) !important;
  border-color: rgba(255,255,255,0.5) !important;
  color: white !important;
}

/* 3. Tertiary Button (Sand / Utility) – custom class */
.btn-tertiary {
  background-color: var(--sand) !important;
  color: #033944 !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  padding: 14px 20px !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1 !important;
}
.btn-tertiary:hover {
  background-color: #d8c28f !important;
}

/* 4. Text Link (Editorial Link) */
.editorial-link {
  color: var(--aqua) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-bottom: 2px solid rgba(127, 246, 238, 0.45) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  padding-bottom: 2px !important;
}
.editorial-link:hover {
  border-bottom-color: var(--aqua) !important;
}

/* Global button reset – ensure no roundness, no gradients */
.btn {
  border-radius: 4px !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1 !important;
}

/* ========== IMAGE CARD SYSTEM ========== */

/* Base card container – style the existing .sf-card as photo‑card */
.sf-card,
.card {
  background: var(--salt) !important;
  padding: 14px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
  position: relative !important;
  transform: rotate(var(--rot, 0deg)) !important;
  margin: 2rem 1rem !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  break-inside: avoid !important;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

/* Variant A – Clean Print (white) */
.sf-card:nth-child(3n+1),
.card:nth-child(3n+1) {
  background: var(--salt) !important;
  color: var(--ink) !important;
  --rot: -2deg;
}

/* Variant B – Dark Editorial */
.sf-card:nth-child(3n+2),
.card:nth-child(3n+2) {
  background: #0e2f35 !important;
  color: var(--salt) !important;
  --rot: 3deg;
}

/* Variant C – Sand / Washed */
.sf-card:nth-child(3n+3),
.card:nth-child(3n+3) {
  background: var(--sand) !important;
  color: #033944 !important;
  --rot: -5deg;
}

/* Image layer – each card gets a different background image */
.sf-card::before,
.card::before {
  content: '';
  display: block;
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
  margin-bottom: 12px;
  position: relative;
}
.sf-card:nth-child(3n+1)::before,
.card:nth-child(3n+1)::before {
  background-image: url('https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80');
}
.sf-card:nth-child(3n+2)::before,
.card:nth-child(3n+2)::before {
  background-image: url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80');
}
.sf-card:nth-child(3n+3)::before,
.card:nth-child(3n+3)::before {
  background-image: url('https://images.unsplash.com/photo-1511994717241-8e4e484dfa8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80');
}

/* Overlay on image */
.sf-card::after,
.card::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  bottom: calc(100% - 14px - (100% - 14px) * 5/9); /* match aspect ratio */
  background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2));
  pointer-events: none;
}

/* Caption – style title and text */
.sf-card .card-title,
.card .card-title {
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 0.5rem !important;
  color: inherit !important;
}
.sf-card .card-text,
.card .card-text {
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-weight: 600 !important;
  color: inherit !important;
  opacity: 0.9 !important;
  margin-bottom: 1rem !important;
}

/* Card button – tertiary style */
.sf-card .btn,
.card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Grid for photo cards – broken, not aligned */
.photo-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 2.5rem !important;
  align-items: start !important;
  justify-items: start !important;
  margin: 4rem 0 !important;
}

/* Carson layer elements */
.tape {
  position: absolute;
  width: 60px;
  height: 20px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  transform: rotate(15deg);
  z-index: 2;
}
.label {
  position: absolute;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 4px 8px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 2;
}
.faded-word {
  position: absolute;
  font-size: 4rem;
  font-weight: 900;
  opacity: 0.08;
  color: var(--ink);
  z-index: 0;
  pointer-events: none;
}

/* ========== HERO & LAYOUT ========== */

/* Hero – chaos / collage */
.hero-section {
  background:
    linear-gradient(145deg, rgba(0,95,122,0.9), rgba(0,184,196,0.75)),
    url('https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80') center/cover;
  border: 12px solid var(--sand);
  border-image: repeating-linear-gradient(45deg, var(--sand), var(--rust) 10px) 12;
  box-shadow: 0 40px 80px rgba(0,0,0,0.25);
  padding: 5rem 4rem;
  margin: 5rem auto;
  position: relative;
  transform: rotate(-1.5deg);
  overflow: hidden;
}
.hero-section::before {
  content: "ATLANTIC DRIFT";
  position: absolute;
  right: -2rem;
  top: 2.5rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.9rem;
  letter-spacing: 0.6rem;
  color: var(--aqua);
  opacity: 0.7;
  font-weight: 800;
  text-transform: uppercase;
}
.hero-section .eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.4rem;
  text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: 2rem;
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: rgba(0,0,0,0.3);
  border-left: 4px solid var(--rust);
}
.hero-section .display-3 {
  font-size: clamp(5rem, 14vw, 12rem);
  font-weight: 900;
  letter-spacing: -0.12em;
  line-height: 0.8;
  text-transform: uppercase;
  color: var(--salt);
  text-shadow: 6px 6px 0 var(--ocean-deep);
  margin-bottom: 0.5rem;
}
.hero-section .lead {
  font-size: 1.4rem;
  font-weight: 500;
  max-width: 40rem;
  color: var(--salt);
  font-style: italic;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

/* Noise texture overlay */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj4KICAgIDxmZVR1cmJ1bGVuY2UgYmFzZUZyZXF1ZW5jeT0iLjAxIiBudW1PY2N0YXZlcz0iNCIgc2VlZD0iMCI+PC9mZVR1cmJ1bGVuY2U+CiAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDEgMCI+PC9mZUNvbG9yTWF0cml4PgogIDwvZmlsdGVyPgogIDxyZWN0IHdpZHRoPSI2MDAiIGhlaWdodD0iNjAwIiBmaWx0ZXI9InVybCgjYSkiIG9wYWNpdHk9Ii4yIj48L3JlY3Q+Cjwvc3ZnPg==');
  opacity: 0.25;
  pointer-events: none;
  z-index: -1;
}

/* Responsive */
@media (max-width: 992px) {
  .hero-section {
    transform: none;
    margin: 3rem auto;
    padding: 3rem 2rem;
  }
  .photo-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .sf-card,
  .card {
    margin: 1.5rem 0 !important;
    transform: none !important;
  }
}