/* =====================================================================
   deepdive.css — deepdive.saltysmiles.net chrome and long-form typography
   Loaded after experience.css on every page. Additive: .dd-* only, plus
   the overlay header variant and the nav call-to-action pill.
   ===================================================================== */

/* ---- header ------------------------------------------------------------ */
.brand__tag { margin-left: 8px; font-family: var(--font-sans); font-size: 10px; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--color-bg); background: var(--color-ink); padding: 4px 8px; border-radius: var(--radius-pill); }
.nav-link--cta { background: var(--color-ink); color: var(--color-bg); font-weight: 700; }
.nav-link--cta:hover { background: #2c1f14; }
.nav-cta { margin-left: 6px; }

/* home: the header floats over the film and turns solid once you are past it */
.site-header--overlay { position: fixed; left: 0; right: 0; top: 0; background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent;
  transition: background .35s ease, border-color .35s ease; }
.site-header--overlay.is-solid { background: rgba(246, 184, 71, 0.92);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); border-bottom-color: var(--hairline); }
body.dd-home #ss-born { --header-h: 0px; }
body.dd-home .ss-born__title { top: clamp(64px, 9vh, 120px); }
@media (max-width: 860px) { .site-header--overlay .site-nav { background: var(--color-bg); } }

/* ---- page hero (every page except home) ---------------------------------- */
.dd-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: 4vw;
  min-height: clamp(360px, 56vh, 760px); padding: clamp(24px, 6vh, 80px) clamp(18px, 7vw, 160px);
  --ss-gloss: 62%; --ss-shadow-s: 1; --ss-shadow-o: .42; --ss-squash: 0; --ss-slosh: 0deg; --ss-wave: .4; }
.dd-hero::before { content: ""; position: absolute; left: 62%; top: 50%; width: 90vmin; height: 90vmin; z-index: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255,246,221,.85), rgba(255,246,221,.4) 40%, rgba(255,246,221,0) 72%); pointer-events: none; }
.dd-hero__text { position: relative; z-index: 1; max-width: 60ch; }
.dd-hero .page-title { font-size: clamp(38px, 6.2vmin, 92px); letter-spacing: -.025em; line-height: 1; margin: 8px 0 14px;
  font-variation-settings: 'SOFT' 30, 'WONK' 1; }
.dd-hero .page-sub { font-family: var(--font-serif); font-style: italic; font-size: clamp(17px, 1.9vmin, 28px); color: var(--color-ink-2); line-height: 1.4; margin: 0; }
.dd-hero__packet { position: relative; z-index: 1; justify-self: center; width: clamp(150px, 22vmin, 360px) !important;
  perspective: 1200px; transform: none !important; }
.dd-hero__packet .ss-packet { transform: rotateX(-4deg) rotateY(-16deg) translateZ(0); }
.dd-hero__packet--empty .ss-packet { transform: rotateX(8deg) rotateY(-22deg); }
.dd-hero__packet--born .ss-packet { transform: rotateX(-6deg) rotateY(10deg); }
.dd-hero__packet .ss-packet__seal { transform: scaleY(1); }
.dd-hero__packet--empty .ss-packet__seal, .dd-hero__packet--fill .ss-packet__seal { transform: scaleY(0); }
.dd-strata { position: absolute; left: 0; right: 0; bottom: 0; height: 70%; z-index: 1;
  background:
    linear-gradient(#FFFFFF, #FFF6DD) top / 100% 3% no-repeat,                                                      /* the pinch      */
    repeating-linear-gradient(45deg, #FFF6DD 0 9px, #8C6A4B 9px 16px, #2F8F57 16px 23px, #F4D03F 23px 29px) top 3% left 0 / 100% 34.1% no-repeat, /* the real deal */
    linear-gradient(to top, #E0312E 0 45.5%, #E0A12B 45.5% 100%) bottom / 100% 62.9% no-repeat;                     /* fruit, honey   */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.dd-hero__packet--empty .dd-strata { height: 0; }
.dd-hero__packet--fill .dd-strata { height: 40%; background-size: 14px 14px, 100% 180%; background-position: bottom; }
@media (max-width: 760px) {
  .dd-hero { grid-template-columns: 1fr; gap: 18px; min-height: 0; padding-top: 28px; }
  .dd-hero__packet { width: clamp(130px, 38vw, 180px) !important; order: -1; }
  .dd-hero .ss-packet { -webkit-box-reflect: below 0 linear-gradient(transparent, transparent); }
}

/* ---- long-form typography -------------------------------------------------- */
.dd-section { margin-bottom: var(--space-4); }
.dd-h2 { font-size: clamp(26px, 3.4vmin, 44px); letter-spacing: -.02em; margin: 0 0 14px; font-variation-settings: 'SOFT' 30, 'WONK' 1; scroll-margin-top: 80px; }
.dd-h3 { font-size: clamp(19px, 2.1vmin, 26px); margin: 22px 0 8px; }
.dd-prose p, .dd-prose li { font-size: clamp(15.5px, 1.3vmin, 19px); line-height: 1.7; }
.dd-prose p { max-width: 72ch; }
.dd-prose ul, .dd-prose ol { padding-left: 1.3em; margin: 0 0 var(--space-3); max-width: 72ch; }
.dd-prose li { margin-bottom: .45em; }
.dd-prose b { font-weight: 700; }
.dd-lead { font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 2vmin, 26px); line-height: 1.5; color: var(--color-ink); max-width: 62ch; margin: 0 0 var(--space-4); }
.dd-kicker { font-family: var(--font-serif); font-weight: 600; font-size: clamp(22px, 3vmin, 40px); line-height: 1.15; letter-spacing: -.02em; max-width: 30ch; margin: 0 0 var(--space-4); font-variation-settings: 'SOFT' 30, 'WONK' 1; }
.dd-callout { background: var(--color-cream); border-left: 4px solid var(--color-ink); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px; margin: var(--space-3) 0 var(--space-4); max-width: 72ch; }
.dd-callout p { margin: 0; }
.dd-callout--warn { border-left-color: var(--color-red); }
.dd-notrec { border: 2px solid var(--color-red); background: rgba(224,49,46,.06); }
.dd-flag { display: inline-block; font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: #fff; background: var(--color-red); padding: 6px 12px; border-radius: 6px; margin: 0 0 14px; }
.dd-callout--quote { border-left-color: var(--color-yellow-d); font-family: var(--font-serif); font-style: italic; }
sup.ref { font-size: .62em; line-height: 0; vertical-align: super; margin-left: 1px; }
sup.ref a { text-decoration: none; font-weight: 700; color: var(--color-ink); background: var(--tint); padding: 1px 5px; border-radius: 6px; }
sup.ref a:hover { background: var(--color-ink); color: var(--color-bg); }

/* on-this-page */
.dd-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.dd-toc li a { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: var(--radius-pill);
  background: var(--tint); text-decoration: none; }
.dd-toc li a:hover { background: var(--color-ink); color: var(--color-bg); }

/* figure tiles and tables */
.dd-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.dd-figs li { background: var(--tint); border-radius: var(--radius-sm); padding: 14px 12px; }
.dd-figs b { display: block; font-family: var(--font-mono); font-weight: 700; font-size: clamp(17px, 1.7vmin, 24px); line-height: 1.1; }
.dd-figs span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.35; color: var(--color-ink-2); }
.dd-table-wrap { overflow-x: auto; margin: 0 0 var(--space-4); border-radius: var(--radius-sm); }
.dd-table { width: 100%; border-collapse: collapse; font-size: clamp(14px, 1.15vmin, 17px); min-width: 520px; }
.dd-table th, .dd-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.dd-table th { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-ink-2); font-weight: 700; }
.dd-table td b { font-family: var(--font-mono); white-space: nowrap; }
.dd-table tr:last-child td { border-bottom: 0; }

/* references */
.refs__list { padding-left: 1.6em; margin: 0 0 var(--space-3); }
.refs__list li { font-size: 13.5px; line-height: 1.55; margin-bottom: .55em; scroll-margin-top: 80px; }
.refs__list li:target { background: var(--color-cream); border-radius: 6px; }
.refs__a { font-weight: 700; }
.refs__j { color: var(--color-ink-2); font-style: italic; }
.refs__list a { color: var(--color-ink); }
.refs__list--library li { font-size: 15px; margin-bottom: .8em; }

/* home: chapter cards */
.dd-chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; margin: var(--space-3) 0 var(--space-4); }
.dd-chapter { display: flex; flex-direction: column; gap: 6px; text-decoration: none; background: rgba(255,246,221,.55);
  border: 1px solid var(--hairline); border-radius: var(--radius); padding: 20px 20px 18px; min-height: 150px;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
.dd-chapter:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(58,42,28,.7); background: rgba(255,246,221,.8); }
.dd-chapter__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--color-ink-2); }
.dd-chapter__t { font-family: var(--font-serif); font-weight: 600; font-size: clamp(20px, 2.1vmin, 27px); letter-spacing: -.015em; line-height: 1.1; }
.dd-chapter__s { font-size: 14px; color: var(--color-ink-2); line-height: 1.5; margin: 0; }
.dd-chapter__go { margin-top: auto; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.dd-chapter:hover .dd-chapter__go { text-decoration: underline; }

/* footer lead */
.site-footer__lead { font-family: var(--font-serif); font-style: italic; font-size: 16px; margin: 0 0 14px; }
.site-footer__lead a { font-weight: 700; }

/* shop links inside bulk rows */
.shop-link { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; }

/* wide screens: give prose more air, keep measure */
@media (min-width: 2000px) {
  .dd-prose p { max-width: 76ch; }
  .panel { padding: 34px; }
}