@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap");

/*
 * The blog is deliberately isolated from the shared Tailwind/base styles.
 * :has() lets the page adopt the editorial chrome (including the shared
 * header and footer) without changing those shared templates.
 */
:root {
  --blog-paper: #f3f0e7;
  --blog-panel: #faf8f1;
  --blog-ink: #1b3730;
  --blog-muted: #66766e;
  --blog-line: #d7ded5;
  --blog-moss: #2b594b;
  --blog-rust: #a95334;
  --blog-sun: #e4bd73;
}

html:has(.blog-editorial) { background: var(--blog-paper) !important; }
body:has(.blog-editorial) {
  background: var(--blog-paper) !important;
  color: var(--blog-ink) !important;
  font-family: "DM Sans", sans-serif !important;
}
body:has(.blog-editorial) main { background: var(--blog-paper) !important; }
body:has(.blog-editorial) h1,
body:has(.blog-editorial) h2,
body:has(.blog-editorial) h3,
body:has(.blog-editorial) h4,
body:has(.blog-editorial) .font-serif {
  font-family: Fraunces, Georgia, serif !important;
  color: var(--blog-ink) !important;
  letter-spacing: -.045em;
}
body:has(.blog-editorial) .site-header {
  background: var(--blog-paper) !important;
  color: var(--blog-ink) !important;
  border-bottom: 1px solid var(--blog-line);
  box-shadow: none !important;
}
body:has(.blog-editorial) .site-header a,
body:has(.blog-editorial) .site-header summary,
body:has(.blog-editorial) .site-header button { color: var(--blog-ink) !important; }
body:has(.blog-editorial) .site-header [class~="text-white/60"] {
  color: var(--blog-muted) !important;
}
body:has(.blog-editorial) .site-header a:hover,
body:has(.blog-editorial) .site-header summary:hover { color: var(--blog-rust) !important; }
body:has(.blog-editorial) .site-header .bg-golf-green {
  background: var(--blog-moss) !important;
  border-radius: 0 !important;
  color: #f7f5ed !important;
}
body:has(.blog-editorial) .site-explore-menu {
  background: var(--blog-panel) !important;
  border-color: var(--blog-line) !important;
  box-shadow: 0 10px 24px rgba(27,55,48,.1) !important;
}
body:has(.blog-editorial) .mobile-menu { background: var(--blog-ink) !important; }

.blog-editorial > section:first-child {
  height: auto !important;
  min-height: 360px;
  padding: clamp(72px, 9vw, 122px) 24px clamp(64px, 8vw, 106px) !important;
  display: flex;
  align-items: center;
  background: var(--blog-paper) !important;
  border-bottom: 1px solid var(--blog-line);
  position: relative;
  overflow: hidden;
}
.blog-editorial > section:first-child::before {
  content: "THE JOURNAL  /  SCOTLAND";
  position: absolute;
  top: 27px;
  left: max(24px, calc((100% - 1152px) / 2));
  color: var(--blog-rust);
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: .16em;
}
.blog-editorial > section:first-child::after {
  content: "G.I.S.  /  01";
  position: absolute;
  top: 27px;
  right: max(24px, calc((100% - 1152px) / 2));
  color: var(--blog-muted);
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: .12em;
}
.blog-editorial > section:first-child > div {
  position: static !important;
  width: 100%;
}
.blog-editorial > section:first-child .max-w-5xl {
  max-width: 1152px !important;
  text-align: left !important;
  margin: 0 auto !important;
}
.blog-editorial > section:first-child h1 {
  max-width: 760px;
  margin: 0 0 20px !important;
  font-size: clamp(52px, 8vw, 112px) !important;
  line-height: .86 !important;
  font-weight: 600 !important;
}
.blog-editorial > section:first-child p {
  max-width: 520px;
  margin: 0 !important;
  color: var(--blog-muted) !important;
  font-size: clamp(16px, 1.65vw, 21px) !important;
  line-height: 1.48 !important;
}

.blog-editorial > .bg-gray-50 {
  background: #e9eee7 !important;
  border-color: var(--blog-line) !important;
  padding: 18px 0 !important;
}
.blog-editorial > .bg-gray-50 .rounded-lg { border-radius: 0 !important; }
.blog-editorial > .max-w-6xl {
  max-width: 1152px !important;
  padding-top: clamp(54px, 7vw, 88px) !important;
  padding-bottom: clamp(64px, 8vw, 112px) !important;
}
.blog-editorial > .max-w-6xl::before {
  content: "LATEST DISPATCHES";
  display: block;
  margin-bottom: 22px;
  color: var(--blog-rust);
  font: 500 10px/1 "DM Mono", monospace;
  letter-spacing: .16em;
}
.blog-editorial > .max-w-6xl > .grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) !important;
  gap: 1px !important;
  background: var(--blog-line);
  border: 1px solid var(--blog-line);
  margin-bottom: 52px !important;
}
.blog-editorial > .max-w-6xl article {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--blog-panel) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.blog-editorial > .max-w-6xl article:first-child { grid-row: span 2; }
.blog-editorial > .max-w-6xl article:hover {
  transform: none !important;
  box-shadow: inset 0 0 0 2px var(--blog-moss) !important;
}
.blog-editorial > .max-w-6xl article > .relative { height: clamp(235px, 26vw, 360px) !important; }
.blog-editorial > .max-w-6xl article:first-child > .relative { height: clamp(310px, 38vw, 500px) !important; }
.blog-editorial > .max-w-6xl article > .relative img { transition: transform .6s ease !important; }
.blog-editorial > .max-w-6xl article:hover img { transform: scale(1.03) !important; }
.blog-editorial > .max-w-6xl article > .relative > .absolute {
  background: linear-gradient(0deg, rgba(27,55,48,.44), transparent 62%) !important;
}
.blog-editorial > .max-w-6xl article > .p-6 {
  padding: 25px 27px 29px !important;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
}
.blog-editorial > .max-w-6xl article .text-sm {
  color: var(--blog-muted) !important;
  font: 500 10px/1.2 "DM Mono", monospace !important;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.blog-editorial > .max-w-6xl article h2 {
  font-size: clamp(25px, 2.5vw, 39px) !important;
  line-height: .98 !important;
  font-weight: 600 !important;
  margin: 15px 0 12px !important;
}
.blog-editorial > .max-w-6xl article:not(:first-child) h2 { font-size: clamp(24px, 2.1vw, 31px) !important; }
.blog-editorial > .max-w-6xl article h2.group-hover\:text-golf-blue { color: var(--blog-ink) !important; }
.blog-editorial > .max-w-6xl article p {
  color: var(--blog-muted) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin-bottom: 22px !important;
}
.blog-editorial > .max-w-6xl article a {
  margin-top: auto;
  color: var(--blog-rust) !important;
  font: 500 11px/1 "DM Mono", monospace !important;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.blog-editorial > .max-w-6xl article a svg { transition: transform .2s ease; }
.blog-editorial > .max-w-6xl article a:hover svg { transform: translateX(4px); }

.blog-editorial > .max-w-6xl > .flex.justify-center { gap: 8px !important; }
.blog-editorial > .max-w-6xl > .flex.justify-center a,
.blog-editorial > .max-w-6xl > .flex.justify-center span {
  min-width: 40px;
  padding: 12px 14px !important;
  border-radius: 0 !important;
  border-color: var(--blog-line) !important;
  background: var(--blog-panel) !important;
  color: var(--blog-ink) !important;
  text-align: center;
  font: 500 11px "DM Mono", monospace;
}
.blog-editorial > .max-w-6xl > .flex.justify-center span.bg-golf-blue {
  background: var(--blog-moss) !important;
  color: #f7f5ed !important;
  border-color: var(--blog-moss) !important;
}

.blog-editorial > section:last-of-type {
  padding: 84px 24px !important;
  background: var(--blog-ink) !important;
  border-top: 1px solid var(--blog-ink) !important;
}
.blog-editorial > section:last-of-type > div { max-width: 1152px !important; }
.blog-editorial > section:last-of-type > div > div {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}
.blog-editorial > section:last-of-type h2 {
  max-width: 640px;
  color: #f3f0e7 !important;
  font-size: clamp(42px, 6vw, 76px) !important;
  line-height: .9 !important;
  font-weight: 500 !important;
}
.blog-editorial > section:last-of-type p { max-width: 470px; color: #c5d1c7 !important; font-size: 16px !important; line-height: 1.55; }
.blog-editorial > section:last-of-type a {
  border-radius: 0 !important;
  background: var(--blog-sun) !important;
  color: var(--blog-ink) !important;
  box-shadow: none !important;
  font: 700 11px "DM Mono", monospace !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body:has(.blog-editorial) footer { background: #142b26 !important; }
body:has(.blog-editorial) .rounded,
body:has(.blog-editorial) .rounded-lg,
body:has(.blog-editorial) .rounded-xl,
body:has(.blog-editorial) .rounded-2xl,
body:has(.blog-editorial) .rounded-full { border-radius: 0 !important; }

@media (max-width: 767px) {
  .blog-editorial > section:first-child { min-height: 330px; padding: 92px 22px 62px !important; }
  .blog-editorial > section:first-child::before { left: 22px; }
  .blog-editorial > section:first-child::after { right: 22px; }
  /* Keep the unbroken site name inside the narrow masthead viewport. */
  .blog-editorial > section:first-child h1 { font-size: clamp(40px, 10.5vw, 76px) !important; }
  .blog-editorial > .max-w-6xl { padding: 54px 22px 70px !important; }
  .blog-editorial > .max-w-6xl > .grid { display: block !important; }
  .blog-editorial > .max-w-6xl article { margin-bottom: 1px; }
  .blog-editorial > .max-w-6xl article:first-child > .relative { height: 290px !important; }
  .blog-editorial > .max-w-6xl article > .relative { height: 230px !important; }
  .blog-editorial > section:last-of-type { padding: 62px 22px !important; }
}