/* ============================================================================
   OCTUI JOURNAL — BLOG-ONLY STYLES
   This file is ADDITIVE. It does not edit css/octui.css or the homepage hero.

   QUICK FIND:
     01. Journal design colors / background image
     02. Blog navigation and shared layout
     03. Journal homepage hero
     04. Featured article and article cards
     05. History / timeline / subscribe
     06. Individual article pages
     07. Mobile responsiveness

   ASSET PATHS start in /blog/, because this file lives at /blog/blog.css.
   ============================================================================ */

/* 01 — JOURNAL COLORS & BACKGROUND IMAGE ----------------------------------- */
.blog-site {
  --journal-ocean: #027f91;
  --journal-teal: #079a9b;
  --journal-coral: #ff7867;
  --journal-navy: #143343;
  --journal-muted: #567582;
  --journal-line: #dcece9;
  --journal-sand: #fff4e7;
  --journal-hero-image: url("../assets/hero-underwater.jpg");
  background: #fbfefd;
}

/* 02 — NAVIGATION / GENERAL BLOG STRUCTURE -------------------------------- */
.blog-site .site-header .brand-logo {max-width:100%;}
.blog-site .primary-nav > a.blog-nav-current {color:var(--journal-ocean);}
.blog-site .blog-nav-current {text-decoration:underline; text-decoration-color:var(--journal-coral); text-underline-offset:7px;}
.blog-site .site-footer .brand-logo {width:220px;}
.blog-site .blog-page {overflow:hidden;}
.blog-site .blog-wrap {max-width:1180px;margin-inline:auto;padding-inline:20px;}
.blog-site .blog-eyebrow {display:inline-flex;align-items:center;gap:9px;color:var(--journal-ocean);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:850;}
.blog-site .blog-eyebrow:before {content:"";width:8px;height:8px;border-radius:50%;background:var(--journal-coral);box-shadow:0 0 0 4px rgba(255,120,103,.14);}
.blog-site .blog-button {display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:13px 21px;border-radius:13px;background:var(--journal-coral);color:white!important;font-size:14px;font-weight:790;box-shadow:0 12px 24px rgba(238,100,87,.18);transition:transform .2s ease,background-color .2s ease;}
.blog-site .blog-button:hover {transform:translateY(-2px);background:#ee6457;}
.blog-site .blog-text-link {display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:820;color:var(--journal-ocean);}
.blog-site .blog-text-link:hover {color:#05596d;}
.blog-site .blog-section-head {display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px;}
.blog-site .blog-section-head h2 {font-size:clamp(30px,3.3vw,42px);letter-spacing:-.045em;font-weight:830;line-height:1.2;color:var(--journal-navy);margin:9px 0 0;}
.blog-site .blog-section-head p {margin:10px 0 0;color:var(--journal-muted);max-width:560px;}
.blog-site .blog-tag {display:inline-flex;align-items:center;border-radius:99px;padding:6px 10px;background:#e0f5f0;color:#067e7c;font-size:10px;font-weight:850;letter-spacing:.09em;text-transform:uppercase;}
.blog-site .blog-meta {display:flex;flex-wrap:wrap;gap:12px;align-items:center;color:#66838c;font-size:12px;font-weight:680;}
.blog-site .blog-meta span+span:before {content:"•";margin-right:12px;color:#9bb0b4;}
.blog-site .blog-divider {border:0;border-top:1px solid var(--journal-line);margin:0;}

/* 03 — JOURNAL HERO ------------------------------------------------------- */
.blog-site .blog-hero {
  position:relative; isolation:isolate; overflow:hidden;
  background-image:linear-gradient(90deg,rgba(245,253,253,.93) 0%,rgba(244,251,250,.85) 46%,rgba(228,249,249,.50) 75%,rgba(220,244,246,.35) 100%),var(--journal-hero-image);
  background-size:cover,cover;
  background-position:center,center 22%;
  padding:90px 0 94px;
}
.blog-site .blog-hero:after {content:"";position:absolute;z-index:-1;left:-8%;right:-8%;bottom:-85px;height:140px;border-radius:50% 50% 0 0;background:rgba(255,255,255,.35);pointer-events:none;}
.blog-site .blog-hero-grid {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr);align-items:center;gap:65px;}
.blog-site .blog-hero h1 {color:var(--journal-navy);font-size:clamp(44px,5vw,72px);line-height:1.08;letter-spacing:-.063em;font-weight:850;margin:18px 0 24px;max-width:720px;}
.blog-site .blog-hero h1 em {display:block;color:var(--journal-teal);font-style:normal;}
.blog-site .blog-hero .blog-lead {font-size:18px;line-height:1.8;color:#3f6370;max-width:590px;margin-bottom:29px;}
.blog-site .blog-hero-actions {display:flex;gap:23px;align-items:center;flex-wrap:wrap;}
.blog-site .blog-current-card {border:1px solid rgba(255,255,255,.88);border-radius:26px;padding:27px;background:rgba(255,255,255,.8);box-shadow:0 24px 65px rgba(16,107,119,.13);backdrop-filter:blur(12px);}
.blog-site .blog-current-card h2 {font-size:22px;line-height:1.3;letter-spacing:-.035em;font-weight:820;margin:12px 0 20px;color:#183d4a;}
.blog-site .blog-current-card dl {margin:0;display:grid;gap:0;}
.blog-site .blog-current-card dl>div {padding:13px 0;border-top:1px solid #dceeed;display:flex;gap:20px;align-items:baseline;justify-content:space-between;}
.blog-site .blog-current-card dt {font-size:13px;color:#6b858d;font-weight:650;}
.blog-site .blog-current-card dd {font-size:13px;font-weight:800;text-align:right;margin:0;color:#244958;}
.blog-site .blog-current-card p {color:#6d858b;font-size:12px;line-height:1.6;margin:16px 0 0;}
.blog-site .blog-topics {padding:24px 0;background:#f2fbf9;border-bottom:1px solid #e0f0ed;}
.blog-site .blog-topic-row {display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;}
.blog-site .blog-topic-row a {color:#276473;font-size:13px;font-weight:770;border-radius:99px;border:1px solid #ceeae4;background:white;padding:8px 15px;transition:background .2s;}
.blog-site .blog-topic-row a:hover {background:#d7f3ed;}

/* 04 — FEATURED STORY & LATEST CARDS -------------------------------------- */
.blog-site .blog-stories {padding:90px 0 80px;}
.blog-site .blog-featured {display:grid;grid-template-columns:1.05fr .95fr;border-radius:27px;overflow:hidden;background:white;border:1px solid var(--journal-line);box-shadow:0 14px 44px rgba(29,103,107,.08);}
.blog-site .blog-featured-copy {padding:45px 42px 44px;display:flex;flex-direction:column;align-items:start;justify-content:center;}
.blog-site .blog-featured h3 {font-size:clamp(30px,3.2vw,43px);line-height:1.14;letter-spacing:-.05em;font-weight:830;color:var(--journal-navy);margin:17px 0;}
.blog-site .blog-featured-copy>p {color:var(--journal-muted);font-size:16px;line-height:1.8;max-width:540px;margin:18px 0 21px;}
.blog-site .blog-featured-visual {min-height:360px;background:radial-gradient(circle at 50% 60%,#d4faf1,#86cfcc 58%,#118998);display:grid;place-items:center;padding:38px;overflow:hidden;}
.blog-site .blog-featured-visual img {width:100%;max-width:430px;max-height:340px;object-fit:contain;filter:drop-shadow(0 20px 26px rgba(4,91,106,.17));}
.blog-site .blog-archive-heading {margin-top:72px;}
.blog-site .blog-card-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px;}
.blog-site .blog-card {min-width:0;display:flex;flex-direction:column;border:1px solid #deefed;background:#fff;border-radius:21px;overflow:hidden;box-shadow:0 10px 28px rgba(37,116,125,.045);transition:transform .2s ease,box-shadow .2s ease;}
.blog-site .blog-card:hover {transform:translateY(-4px);box-shadow:0 20px 40px rgba(37,116,125,.12);}
.blog-site .blog-card-media {height:184px;display:grid;place-items:center;overflow:hidden;position:relative;background:linear-gradient(135deg,#e5faf5,#abdeda 58%,#0e98a0);}
.blog-site .blog-card-media--sand {background:linear-gradient(135deg,#ffe9dc,#cbece8 65%,#62c2c7);}
.blog-site .blog-card-media--blue {background:linear-gradient(140deg,#d9faff,#8bcbde 50%,#2e88a9);}
.blog-site .blog-card-media--ocean {background:linear-gradient(140deg,#e2fbf7,#77c5cf 60%,#0b8396);}
.blog-site .blog-card-media img {width:100%;height:100%;object-fit:contain;padding:15px;}
.blog-site .blog-card-media img.blog-media-cover {object-fit:cover;padding:0;}
.blog-site .blog-card-content {padding:25px 24px 27px;flex:1;display:flex;flex-direction:column;align-items:start;}
.blog-site .blog-card h3 {font-size:22px;line-height:1.22;letter-spacing:-.032em;font-weight:815;color:var(--journal-navy);margin:15px 0 13px;}
.blog-site .blog-card p {color:var(--journal-muted);font-size:14px;line-height:1.75;margin:0 0 21px;flex:1;}
.blog-site .blog-card .blog-meta {margin-top:10px;}
.blog-site .blog-card .blog-text-link {margin-top:23px;}

/* 05 — HISTORY TIMELINE / SUBSCRIBE CTA ----------------------------------- */
.blog-site .blog-history-promo {padding:85px 0;background:linear-gradient(180deg,#effaf8,#f9fdfc);border-top:1px solid #e2f1ee;}
.blog-site .blog-history-grid {display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:start;}
.blog-site .blog-history-intro h2 {font-weight:840;font-size:clamp(31px,3.4vw,48px);letter-spacing:-.05em;line-height:1.16;margin:17px 0;color:var(--journal-navy);}
.blog-site .blog-history-intro p {font-size:16px;line-height:1.85;color:var(--journal-muted);max-width:490px;}
.blog-site .blog-timeline {border-left:2px solid #9eddd7;margin:6px 0 0 8px;padding:0 0 0 31px;}
.blog-site .blog-timeline-item {position:relative;padding:0 0 28px;}
.blog-site .blog-timeline-item:last-child {padding-bottom:0;}
.blog-site .blog-timeline-item:before {content:"";position:absolute;left:-40px;top:7px;width:15px;height:15px;border-radius:50%;background:#ff7867;border:4px solid #effaf8;box-shadow:0 0 0 2px #a1dad7;}
.blog-site .blog-timeline time {color:#057f85;letter-spacing:.10em;text-transform:uppercase;font-size:11px;font-weight:840;}
.blog-site .blog-timeline strong {display:block;margin:5px 0;color:#183d4b;font-size:16px;line-height:1.4;}
.blog-site .blog-timeline p {margin:0;color:#5d7883;font-size:13px;line-height:1.6;}
.blog-site .blog-notice {margin-top:25px;color:#6b858b;font-size:12px;line-height:1.65;}
.blog-site .blog-subscribe {position:relative;overflow:hidden;padding:75px 0;background:linear-gradient(115deg,#08435b,#087b87 64%,#13a8a4);color:white;}
.blog-site .blog-subscribe:before {content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 38%,rgba(218,255,239,.17),transparent 37%),radial-gradient(circle at 70% 100%,rgba(255,255,255,.12),transparent 33%);pointer-events:none;}
.blog-site .blog-subscribe-row {position:relative;display:flex;align-items:center;justify-content:space-between;gap:45px;}
.blog-site .blog-subscribe h2 {font-size:clamp(30px,3.6vw,46px);font-weight:830;line-height:1.18;letter-spacing:-.045em;margin:12px 0;}
.blog-site .blog-subscribe p {color:#d9f7f3;margin:0;max-width:630px;}
.blog-site .blog-subscribe .blog-eyebrow {color:#c5f8ea;}
.blog-site .blog-subscribe .blog-button {white-space:nowrap;}

/* 06 — INDIVIDUAL JOURNAL ARTICLES --------------------------------------- */
.blog-site .blog-article-banner {background:linear-gradient(90deg,rgba(242,252,250,.92),rgba(237,251,250,.80)),var(--journal-hero-image);background-position:center,center 25%;background-size:cover;padding:62px 0 60px;}
.blog-site .blog-breadcrumb {display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;color:#63848e;margin-bottom:30px;font-weight:710;}
.blog-site .blog-breadcrumb a {color:#07858f;}
.blog-site .blog-breadcrumb a:hover {text-decoration:underline;}
.blog-site .blog-article-banner h1 {color:#133746;max-width:840px;font-size:clamp(38px,5vw,64px);line-height:1.10;font-weight:850;letter-spacing:-.058em;margin:16px 0 17px;}
.blog-site .blog-article-deck {max-width:750px;color:#426a77;font-size:18px;line-height:1.76;margin:0 0 20px;}
.blog-site .blog-article-shell {display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:74px;padding-top:66px;padding-bottom:80px;}
.blog-site .blog-prose {min-width:0;max-width:750px;}
.blog-site .blog-prose p,.blog-site .blog-prose li {font-size:16px;line-height:1.95;color:#3f5c69;}
.blog-site .blog-prose p {margin:0 0 21px;}
.blog-site .blog-prose h2 {color:#173a47;font-size:clamp(25px,2.6vw,34px);letter-spacing:-.04em;font-weight:810;line-height:1.22;margin:43px 0 19px;}
.blog-site .blog-prose h3 {color:#1a4654;font-size:20px;font-weight:780;letter-spacing:-.02em;margin:30px 0 15px;}
.blog-site .blog-prose ul {padding-left:23px;margin:0 0 23px;}
.blog-site .blog-prose li {padding-left:4px;margin:5px 0;}
.blog-site .blog-prose a {color:#058691;text-decoration:underline;text-underline-offset:2px;}
.blog-site .blog-prose strong {color:#173d49;}
.blog-site .blog-prose blockquote {margin:28px 0;padding:14px 0 14px 22px;border-left:4px solid var(--journal-coral);font-size:20px;font-weight:680;font-style:italic;line-height:1.65;color:#275767;}
.blog-site .blog-article-aside {align-self:start;position:sticky;top:115px;background:#f1faf8;border:1px solid #dbefeb;border-radius:18px;padding:25px;}
.blog-site .blog-article-aside h2 {font-weight:800;font-size:16px;color:#214653;margin:0 0 14px;}
.blog-site .blog-article-aside p {font-size:13px;color:#66838a;line-height:1.8;margin:0 0 18px;}
.blog-site .blog-article-aside a {display:block;color:#078891;font-size:13px;font-weight:790;margin:9px 0;}
.blog-site .blog-article-note {background:#f1fbf9;border-left:3px solid #0ca29b;border-radius:0 13px 13px 0;padding:19px 23px;margin:24px 0 31px;}
.blog-site .blog-article-note strong {display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#137e83;margin-bottom:6px;}
.blog-site .blog-article-note p {font-size:14px;margin:0;line-height:1.75;}
.blog-site .blog-results {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:28px 0 32px;}
.blog-site .blog-results>div {background:#f3fbfa;border:1px solid #daece8;border-radius:14px;padding:18px;}
.blog-site .blog-results b {display:block;color:#087f81;text-transform:uppercase;letter-spacing:.08em;font-size:11px;margin-bottom:8px;}
.blog-site .blog-results span {font-size:13px;line-height:1.65;color:#526d79;}
.blog-site .blog-article-tail {margin-top:56px;padding-top:25px;border-top:1px solid #dcece9;display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;}
.blog-site .blog-article-tail a {color:var(--journal-ocean);font-weight:800;font-size:14px;}
.blog-site .blog-history-page {padding:76px 0 90px;background:#fbfefd;}
.blog-site .blog-history-page h1 {font-size:clamp(42px,5vw,65px);letter-spacing:-.06em;font-weight:840;color:var(--journal-navy);line-height:1.1;margin:20px 0;}
.blog-site .blog-history-page .blog-lead {font-size:18px;max-width:760px;color:var(--journal-muted);margin-bottom:40px;line-height:1.8;}
.blog-site .blog-history-page .blog-timeline {max-width:800px;margin-top:40px;}
.blog-site .blog-history-page .blog-timeline-item {padding-bottom:42px;}
.blog-site .blog-history-page .blog-timeline-item strong {font-size:23px;}
.blog-site .blog-history-page .blog-timeline-item p {font-size:15px;max-width:710px;line-height:1.8;}
.blog-site .blog-history-page .blog-timeline-item a {display:inline-block;margin-top:10px;font-size:13px;font-weight:800;color:#087e88;}

/* 07 — TABLET & MOBILE ---------------------------------------------------- */
@media (max-width:991px) {
  .blog-site .blog-hero-grid {grid-template-columns:1fr;gap:32px;}
  .blog-site .blog-current-card {max-width:570px;}
  .blog-site .blog-card-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .blog-site .blog-history-grid {gap:36px;}
  .blog-site .blog-article-shell {grid-template-columns:1fr;gap:28px;}
  .blog-site .blog-article-aside {position:static;max-width:750px;}
}
@media (max-width:767px) {
  .blog-site .site-header .brand-logo {width:150px;height:auto;}
  .blog-site .blog-wrap {padding-inline:20px;}
  .blog-site .blog-hero {padding:68px 0 72px;background-position:center,center center;}
  .blog-site .blog-hero h1 {font-size:clamp(39px,10vw,52px);}
  .blog-site .blog-hero .blog-lead {font-size:16px;}
  .blog-site .blog-current-card {padding:24px;}
  .blog-site .blog-section-head {align-items:start;flex-direction:column;gap:13px;}
  .blog-site .blog-stories {padding:62px 0 65px;}
  .blog-site .blog-featured {grid-template-columns:1fr;}
  .blog-site .blog-featured-copy {padding:31px 27px 37px;}
  .blog-site .blog-featured-visual {min-height:230px;padding:20px;order:-1;}
  .blog-site .blog-featured-visual img {max-height:225px;}
  .blog-site .blog-archive-heading {margin-top:58px;}
  .blog-site .blog-card-grid {grid-template-columns:1fr;}
  .blog-site .blog-card-media {height:190px;}
  .blog-site .blog-history-grid {grid-template-columns:1fr;gap:34px;}
  .blog-site .blog-history-promo {padding:65px 0;}
  .blog-site .blog-subscribe {padding:63px 0;}
  .blog-site .blog-subscribe-row {flex-direction:column;align-items:start;gap:24px;}
  .blog-site .blog-article-banner {padding:46px 0;}
  .blog-site .blog-article-deck {font-size:16px;}
  .blog-site .blog-article-shell {padding-top:43px;padding-bottom:60px;}
  .blog-site .blog-results {grid-template-columns:1fr;}
  .blog-site .blog-history-page {padding:55px 0 65px;}
}