/* ==========================================================================
   SiloCrusher.com — hand-built static site
   Rebuilt from the original Canva design for self-hosting on Ionos
   ========================================================================== */

/* ---------- Fonts (self-hosted, GDPR-friendly) ---------- */
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/quicksand-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/quicksand-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/quicksand-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/quicksand-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/caveat-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/caveat-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/caveat-latin-700-normal.woff2') format('woff2');
}

/* ---------- Design tokens ---------- */
:root {
  --brown: #462519;
  --brown-deep: #3a1f14;
  --navy: #2f3a4a;
  --red: #8a1111;
  --cream: #e8ddd4;
  --cream-dim: #d5c8bf;
  --tan: #d9b98c;
  --gold: #d8a437;
  --paper: #bcaba2;
  --paper-ink: #52362a;
  --paper-ink-strong: #3f2418;
  --link-underline: rgba(232, 221, 212, 0.7);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--brown);
  color: var(--cream);
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: 8px 16px; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Hero header ---------- */
.hero {
  position: relative;
  height: clamp(170px, 30vh, 340px);
  background: url('../img/hero-mountains.jpg') center 35% / cover no-repeat;
}
.hero--sub { height: clamp(140px, 24vh, 280px); }
.hero__logo {
  position: absolute;
  top: clamp(10px, 2.2vw, 26px);
  left: clamp(14px, 4.5vw, 64px);
  width: clamp(150px, 19vw, 250px);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}
.hero__logo img { display: block; width: 100%; }
.hero--sub .hero__logo { transform: rotate(-4deg); }

/* small teaser panel inside the articles hero */
.hero__teaser {
  position: absolute;
  top: 58%;
  left: 24%;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero__teaser-panel {
  background: var(--navy);
  border-radius: 8px;
  padding: 10px 26px;
  text-align: center;
  font-size: 15.5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.hero__teaser img { width: 34px; flex: none; }

/* ---------- Layout helpers ---------- */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 4.5%;
}

/* ---------- Home intro ---------- */
.intro { padding-top: clamp(28px, 5vh, 56px); }
.intro__grid {
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: 40px;
  align-items: start;
}
.intro__quote {
  font-family: 'Caveat', cursive;
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.4;
  text-align: center;
  margin: 0 0 30px;
  color: var(--cream);
}
.intro__text {
  font-size: 16.5px;
  color: var(--cream-dim);
  margin: 0;
}
.intro__portrait {
  width: 100%;
  max-width: 230px;
  margin-top: 14px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}

/* ---------- CTA buttons ---------- */
.btn {
  display: block;
  background: var(--navy);
  border: 2px solid var(--red);
  border-radius: 9px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-family: inherit;
  font-size: clamp(16px, 1.9vw, 19.5px);
  font-weight: 500;
  padding: 15px 34px;
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.38);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.btn:hover, .btn:focus-visible { filter: brightness(1.18); transform: translateY(-1px); }
.btn small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  margin-top: 2px;
  color: var(--cream-dim);
}
.cta-row {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 34px 0;
}
.cta-row .btn { flex: 0 1 540px; }
.cta-row__icon { width: 74px; flex: none; }
.cta-row__icon--book { width: 96px; }
.cta-row__icon--podcast { width: 118px; }
.cta-row--indent { padding-left: 12%; }
.cta-row--center { justify-content: center; }

/* ---------- Podcast page ---------- */
.podcast-hub {
  display: flex;
  align-items: center;
  gap: 44px;
  padding: clamp(36px, 7vh, 70px) 0 10px;
}
.podcast-hub__icon { width: clamp(150px, 21vw, 220px); flex: none; }
.panel {
  background: var(--navy);
  border: 6px solid var(--red);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  padding: 24px 38px;
}
.podcast-hub .panel {
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.65;
  text-align: center;
}
.panel a { color: #fff; text-decoration-color: var(--link-underline); text-underline-offset: 3px; }
.panel a:hover { color: var(--gold); }

/* ---------- Episode guide & episode pages ---------- */
.stage {
  position: relative;
  margin: clamp(28px, 5vh, 52px) 0;
  padding: 30px 0;
}
.stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/brush-frame.png') center / 100% 100% no-repeat;
  opacity: 0.9;
  pointer-events: none;
}
.stage > * { position: relative; }
.episode-list-panel {
  border-width: 3px;
  max-width: 660px;
  margin: 0 auto;
  padding: 20px 30px 16px;
}
.episode-list-panel p { margin: 0 0 10px; font-size: 15.5px; }
.episode-list-panel ol {
  margin: 0 0 56px;
  padding-left: 34px;
  font-size: clamp(16px, 1.9vw, 18.5px);
  line-height: 1.65;
}
.episode-list-panel ol a { color: var(--cream); text-decoration: none; }
.episode-list-panel ol a:hover { color: var(--gold); text-decoration: underline; }
.episode-list-panel .register-note { font-size: 14.5px; margin: 0; }
.episode-list-panel .register-note a { color: #fff; }

.video-frame {
  max-width: 680px;
  margin: 0 auto;
  background: #000;
  border-radius: 4px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}
.video-frame .ratio {
  position: relative;
  padding-top: 56.25%;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 4px;
}
.episode-title {
  max-width: 680px;
  margin: 0 auto 14px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600;
  color: var(--cream);
}

/* ---------- Articles (inspirations) ---------- */
.paper {
  background: var(--paper);
  border-radius: 12px;
  color: var(--paper-ink);
  max-width: 800px;
  margin: clamp(30px, 6vh, 60px) auto;
  padding: clamp(22px, 4vw, 40px) clamp(20px, 3.5vw, 34px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  font-size: 15.5px;
  line-height: 1.6;
}
.paper h2 {
  color: var(--paper-ink-strong);
  font-size: 21px;
  font-weight: 700;
  margin: 0 0 16px;
}
.paper h3 {
  color: var(--paper-ink-strong);
  font-size: 17px;
  font-weight: 700;
  margin: 34px 0 14px;
}
.paper p { margin: 0 0 16px; }
.paper b, .paper strong { color: var(--paper-ink-strong); }
.paper a { color: var(--paper-ink-strong); }
.paper ol { margin: 0 0 16px; padding-left: 26px; }
.paper .divider {
  margin: 44px 0;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--paper-ink);
  overflow-wrap: break-word;
}
.paper * + h2 { margin-top: 44px; }

/* ---------- Footer ---------- */
.footer { margin-top: clamp(40px, 8vh, 90px); }
.footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 10px 4.5% 12px;
  font-size: 12.5px;
  color: var(--cream-dim);
  flex-wrap: wrap;
}
.footer__bar--right { justify-content: flex-end; }
.nav-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.nav-links a {
  color: var(--cream);
  font-size: 12.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--link-underline);
}
.nav-links a:hover { color: var(--gold); }
.footer__ocean {
  display: block;
  width: 100%;
  height: clamp(180px, 42vh, 420px);
  object-fit: cover;
}

/* the scroll-reward easter egg */
.easter-egg {
  padding: 38vh 0 0;
  text-align: center;
}
.easter-egg__inner {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  text-align: left;
}
.easter-egg p { margin: 6px 0; font-size: 15px; color: #c99a63; }
.easter-egg a { color: #c99a63; text-underline-offset: 3px; }
.easter-egg a:hover { color: var(--gold); }
.easter-egg img { width: 64px; flex: none; }
.copyright {
  text-align: center;
  font-size: 12.5px;
  color: #b08d6a;
  padding: 26vh 0 18px;
  margin: 0;
}
.copyright--tight { padding-top: 40px; }

/* ---------- Split pages (connect / imprint / privacy top) ---------- */
.split {
  display: grid;
  grid-template-columns: 44.5% 55.5%;
  min-height: 100vh;
  background: #fff;
}
.split--connect { grid-template-columns: 44.5% 55.5%; }
.split__pane { position: relative; }
.split__pane--photo {
  background: url('../img/ocean-connect.jpg') center / cover no-repeat;
}
.split__logo {
  position: absolute;
  top: 34px;
  right: 6%;
  width: clamp(160px, 19vw, 230px);
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5));
}
.handwriting-flip {
  font-family: 'Caveat', cursive;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.25;
  color: #b39280;
  transform: rotate(180deg);
  text-align: center;
  margin: 0;
}
.connect__content {
  padding: 7vh 9% 0;
  color: var(--brown);
}
.connect__content .handwriting-flip { margin-bottom: 7vh; }
.connect__content .btn { max-width: 360px; margin: 0 auto 22px; }
.connect__arrow {
  display: block;
  width: clamp(160px, 22vw, 250px);
  margin: 24px auto 0;
}
.mini-nav {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 5;
}
.mini-nav .nav-links a { font-size: 11.5px; }
.mini-nav--dark .nav-links a { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* ---------- Form pages (contact / signup) ---------- */
.form-page {
  position: relative;
  min-height: 100vh;
  background: url('../img/ocean-contact.jpg') center / cover no-repeat;
  padding: 6px 0;
}
.form-page--signup { background-image: url('../img/ocean-signup.jpg'); }
.form-page .handwriting-flip {
  position: absolute;
  top: 40px;
  left: 46%;
  color: #efe3d5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.form-page__icons {
  position: absolute;
  top: 22px;
  left: 47%;
  display: flex;
  gap: 18px;
}
.form-page__icons img { width: 86px; }
.form-embed {
  position: relative;
  margin: 0.8vh 0 0.8vh 2%;
  width: min(420px, 90%);
  height: 96vh;
  min-height: 560px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  background: #f3f2ee;
}
.form-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Imprint / privacy ---------- */
.split__pane--gold {
  background: linear-gradient(90deg, #000 0%, #2b1c02 30%, #a4770e 78%, #c8940f 100%);
}
.legal-block {
  padding: 34vh 0 0 15%;
  max-width: 420px;
  color: #a85a20;
  font-size: 14px;
  line-height: 1.5;
}
.legal-block--top { padding-top: 16vh; }
.legal-block h1, .legal-block h2 {
  font-size: 14px;
  font-weight: 700;
  color: #8c4a18;
  margin: 0 0 4px;
}
.legal-block section { margin-bottom: 40px; }
.legal-block p { margin: 0 0 8px; }
.legal-block a { color: #8c4a18; }

.legal-long {
  background: #fff;
  color: #4a4a4a;
  font-size: 13px;
  line-height: 1.55;
  padding: 50px 6% 70px;
}
.legal-long h2 { font-size: 15px; color: #333; margin: 30px 0 8px; }
.legal-long h3 { font-size: 13.5px; color: #333; margin: 20px 0 6px; }
.legal-long ul { margin: 0 0 12px; padding-left: 22px; }
.legal-long p { margin: 0 0 10px; }
.legal-long a { color: #6b431f; }

/* ---------- Placeholder notice (only visible while embeds are pending) ---------- */
.embed-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 30px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .intro__grid { grid-template-columns: 1fr; }
  .intro__portrait { margin: 0 auto; display: block; }
  .cta-row { flex-direction: column; gap: 14px; }
  .cta-row--indent { padding-left: 0; }
  .cta-row .btn { flex: none; width: 100%; max-width: 540px; }
  .cta-row__icon { display: none; }
  .podcast-hub { flex-direction: column; }
  .split, .split--connect { grid-template-columns: 1fr; }
  .split__pane--photo { min-height: 44vh; }
  .connect__content { padding: 40px 8%; }
  .legal-block { padding: 60px 8% 40px; max-width: none; }
  .form-page__icons, .form-page .handwriting-flip { display: none; }
  .form-embed { margin: 12px auto; width: min(560px, 94%); height: 88vh; }
  .hero__teaser { position: static; padding: 12px 4.5% 0; }
  .hero__teaser-panel { font-size: 14px; }
  .easter-egg { padding-top: 24vh; }
  .easter-egg__inner { flex-direction: column; text-align: center; }
  .copyright { padding-top: 12vh; }
}

/* ---------- Native sleek forms (v2) ---------- */
.form-card {
  position: relative;
  width: min(440px, 92%);
  margin: 5vh 0 5vh 4%;
  background: #faf8f5;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  padding: 30px 32px 26px;
  color: var(--brown);
}
.form-card h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--brown);
}
.form-card .form-sub {
  font-size: 13.5px;
  color: #7a6a5f;
  margin: 0 0 20px;
}
.form-card label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin: 14px 0 5px;
  color: #503528;
}
.form-card label .req { color: var(--red); }
.form-card input[type="text"],
.form-card input[type="email"],
.form-card textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--brown);
  background: #fff;
  border: 1.5px solid #d8cec6;
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-card input:focus, .form-card textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(47, 58, 74, 0.15);
}
.form-card textarea { min-height: 120px; resize: vertical; }
.form-card .btn {
  width: 100%;
  margin-top: 22px;
  border-radius: 8px;
  font-size: 16.5px;
  padding: 12px 20px;
  cursor: pointer;
}
.form-card .form-note {
  font-size: 11.5px;
  color: #8a7a6e;
  margin: 14px 0 0;
  text-align: center;
}
.form-card .form-note a { color: #6b4a34; }
/* honeypot — visually hidden but present for bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}
.form-status {
  display: none;
  margin: 16px 0 0;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 14px;
}
.form-status--ok { display: block; background: #e7f2e4; color: #2e5e2a; border: 1px solid #b9d8b2; }
.form-status--err { display: block; background: #f7e7e4; color: #7a2016; border: 1px solid #e0b8b0; }
@media (max-width: 820px) {
  .form-card { margin: 20px auto; }
}