/* ==========================================================================
   Tenure page (six-years-at-kaluza) — the depth treatment + timeline spine.
   Page-scoped: only six-years-at-kaluza.php and scratch-spine.php link this.
   Everything else on the page is existing kit (case-study.css, typography.css).

   The page is a dive. Each .tn-seg paints one stretch of a single vertical ramp,
   and every segment starts on the stop the previous one ended on, so the water
   reads as one continuous gradient keyed to document position. Pinning stops to
   section boundaries (rather than % of page height) is what guarantees the text
   flip passes AA at every viewport width.
   ========================================================================== */

:root{
  /* The ramp. One line per stop, tune freely. */
  --tn-1:#F3B29E;   /* sunset sky (was #F4A97F) */
  --tn-2:#E58B70;   /* horizon glow */
  --tn-3:#9FD2CF;   /* the waterline, pale aqua */
  --tn-4:#6FB5C4;   /* shallows */
  --tn-5:#3E7393;   /* mid water. Brief proposed #4A86A6 (white 4.00:1, fails AA). #3E7393 is 5.15:1, 4.65:1 under the noise at its brightest */
  --tn-6:#3A5E8C;   /* deeper blue */
  --tn-7:#34406B;   /* indigo */
  --tn-8:#330047;   /* site purple, the exact value .footer and .contact-back use (css/body.css) */

  /* Still water: stretches between indigo and the floor */
  --tn-7a:#342D60;  /* 7 → 8, 30% */
  --tn-7b:#331A55;  /* 7 → 8, 60% */

  /* How tight the waterline blend is (stop 2 → 3) */
  --tn-waterline:180px;
  /* Waterline inset from the bottom of the surface section. Keep in step with
     WATERLINE_INSET in js/tenure.js */
  --tn-line-inset:90px;

  /* Text either side of the one flip */
  --tn-ink-dark:var(--cs-ink);
  --tn-ink-light:#ffffff;
  --tn-ink-light-2:rgba(255,255,255,0.72);   /* cite colour, as .contact-back .cs-quote cite */

  /* Fine noise laid over the water to dither any banding in the long blends */
  --tn-noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Segments ---------- */
.tn-seg{position:relative;overflow:hidden;overflow:clip;}
.tn-seg > *:not(.tn-decor){position:relative;z-index:1;}
.tn-decor{position:absolute;inset:0;z-index:0;pointer-events:none;}

/* Each segment: sRGB first, oklab where supported (cleaner mid-blends, less mud at the waterline) */
.tn-seg--surface{
  /* the waterline sits --tn-line-inset above this section's bottom, at 60% of the screen on
     load; taller content just pushes it down */
  box-sizing:border-box;
  min-height:calc(60vh + var(--tn-line-inset));
  min-height:calc(60svh + var(--tn-line-inset));
  padding-bottom:calc(var(--tn-line-inset) + 32px);   /* min clearance between the stats and the waterline */
  background-image:var(--tn-noise),linear-gradient(to bottom,var(--tn-1) 0,var(--tn-2) calc(100% - var(--tn-waterline)),var(--tn-3) 100%);
  background-image:var(--tn-noise),linear-gradient(in oklab to bottom,var(--tn-1) 0,var(--tn-2) calc(100% - var(--tn-waterline)),var(--tn-3) 100%);
}
.tn-seg--shallows{
  background-image:var(--tn-noise),linear-gradient(to bottom,var(--tn-3),var(--tn-4));
  background-image:var(--tn-noise),linear-gradient(in oklab to bottom,var(--tn-3),var(--tn-4));
}
.tn-seg--practice{
  background-image:var(--tn-noise),linear-gradient(to bottom,var(--tn-5),var(--tn-6));
  background-image:var(--tn-noise),linear-gradient(in oklab to bottom,var(--tn-5),var(--tn-6));
}
.tn-seg--descent{
  background-image:var(--tn-noise),linear-gradient(to bottom,var(--tn-6),var(--tn-7));
  background-image:var(--tn-noise),linear-gradient(in oklab to bottom,var(--tn-6),var(--tn-7));
}
.tn-seg--built{
  background-image:var(--tn-noise),linear-gradient(to bottom,var(--tn-7),var(--tn-7a));
  background-image:var(--tn-noise),linear-gradient(in oklab to bottom,var(--tn-7),var(--tn-7a));
}
.tn-seg--still{
  background-image:var(--tn-noise),linear-gradient(to bottom,var(--tn-7a),var(--tn-7b));
  background-image:var(--tn-noise),linear-gradient(in oklab to bottom,var(--tn-7a),var(--tn-7b));
}
.tn-seg--floor{
  background-image:linear-gradient(to bottom,var(--tn-7b) 0,var(--tn-8) 240px,var(--tn-8) 100%);
  background-image:linear-gradient(in oklab to bottom,var(--tn-7b) 0,var(--tn-8) 240px,var(--tn-8) 100%);
  background-color:var(--tn-8);
}
/* Fallback colour under each gradient, in case gradients fail */
.tn-seg--surface{background-color:var(--tn-1);}
.tn-seg--shallows{background-color:var(--tn-3);}
.tn-seg--practice{background-color:var(--tn-5);}
.tn-seg--descent{background-color:var(--tn-6);}
.tn-seg--built{background-color:var(--tn-7);}
.tn-seg--still{background-color:var(--tn-7a);}

/* Stats sit in the sky, tucked up under the hero */
.tn-seg--surface .hero-img .text-container{padding-bottom:0;}
.tn-stats-band{padding-top:40px;padding-bottom:0;}
/* Phones: 2x2, so the hero and stats fit above the waterline. Figures step down to the
   heading-3 size (typography.css) and may wrap at half width. */
/* Tablets and small laptops (below the 1170px container): 2x2, as four cells do not fit one row there and the default leaves a 3 + 1 orphan */
@media(max-width:1199px){
  .tn-stats-band .cs-stats{grid-template-columns:1fr 1fr;gap:24px 32px;}
}
@media(max-width:600px){
  .tn-stats-band .cs-stats{gap:24px 16px;}
  .tn-stats-band .cs-stat .n{font-size:1.375em;white-space:normal;}
}


/* The smooth ramp (js/tenure.js). The per-segment gradients above are the no-JS
   fallback: straight blends, so the slope jumps at every boundary and reads as steps.
   With JS, one page-height gradient is built with stops eased through every section
   boundary, and each segment shows its own slice of it. */
.tn-ramped .tn-seg,
.tn-ramped .tn-seg--floor{
  background-image:var(--tn-ramp);   /* no noise layer here: the sampled ramp doesn't band, and the noise's slight lift showed as a line wherever it stopped */
  background-size:100% var(--tn-ramp-h);
  background-position:0 var(--tn-off,0px);
  background-repeat:no-repeat;
}

/* ---------- The one text flip ---------- */
.tn-dark .cs-stat .l,
.tn-dark .cs-byline,
.tn-dark .cs-readtime,
.tn-dark .cs-byline-sep{color:var(--tn-ink-dark);}
.tn-dark .cs-readtime .cs-clock circle,
.tn-dark .cs-readtime .cs-clock path{stroke:var(--tn-ink-dark);}
.tn-dark .cs-arrow path{stroke:var(--tn-ink-dark);}   /* bronze is 1.95:1 on the waterline */

.tn-light,
.tn-light h2,.tn-light .heading-3,
.tn-light p,.tn-light li,.tn-light b{color:var(--tn-ink-light);}
.tn-light .cs-quote cite{color:var(--tn-ink-light-2);}

/* Links: the homepage's zig-zag underline (.ink, css/home.css), redrawn in white for
   the deep water. Hover goes to the soft bronze, as bronze itself fails on the blue. */
.tn-light .ink{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath d='M0 5 L3 1 L6 5 L9 1 L12 5' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
}
.tn-light .ink:hover,
.tn-light .ink:focus-visible{
  color:var(--cs-accent-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath d='M0 5 L3 1 L6 5 L9 1 L12 5' fill='none' stroke='%23f6e7d6' stroke-width='1'/%3E%3C/svg%3E");
}

/* Inline bold, as .cs-related b */
.tn-page b{font-family:'HKGrotesk-bold','Helvetica','Arial',sans-serif;font-weight:normal;}

.tn-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ==========================================================================
   The timeline spine (doubles as the depth gauge)
   A solid line that grows with scroll (js/tenure.js sets --grow) over a faint
   track, solid dots, and a ring that ripples out from each dot as the line
   reaches it. Without JS the line is fully drawn; without this CSS it is a
   plain ordered list of paragraphs.
   ========================================================================== */
.tn-spine{list-style:none;margin:28px 0 0;padding:0;max-width:66ch;position:relative;--grow:1;--rail-end:0px;}
.tn-spine:before,
.tn-spine:after{
  content:"";position:absolute;left:5px;top:7px;bottom:var(--rail-end);width:1.5px;
  background:currentColor;transform-origin:top;pointer-events:none;
}
.tn-spine:before{opacity:0.22;}                       /* the track */
.tn-spine:after{transform:scaleY(var(--grow));}       /* the line */

.tn-beat{position:relative;padding:0 0 32px 36px;}
.tn-beat:last-child{padding-bottom:0;}
.tn-beat p{margin:0;}
.tn-beat p + p{margin-top:1em;}

/* node label: the bold date range */
.tn-when{display:block;font-size:0.875em;line-height:1.25;margin-bottom:6px;letter-spacing:0.01em;}

/* dots, all solid, centred on the line (x 6px, y 7px). Role changes are larger. */
.tn-beat:before{
  content:"";position:absolute;left:1px;top:2px;width:10px;height:10px;border-radius:50%;
  background:currentColor;z-index:1;
  transition:transform 0.5s cubic-bezier(.3,1.6,.5,1),opacity 0.4s ease;
}
.tn-beat--role:before{left:-1px;top:0;width:14px;height:14px;}
.tn-motion .tn-beat:not(.is-reached):before{transform:scale(0.55);opacity:0.45;}

/* The ripple: when the line arrives, a ring spreads out from the dot, then pulls back
   into a small bubble that wobbles up the line towards the surface. One element the
   whole way, so the ring visibly becomes the bubble. Sized with width/height rather
   than scale so the rim stays a hairline. Role changes: a bigger, doubled ring and a
   slightly bigger bubble that rises further. Stays on the rail (x 0-12px), clear of text. */
.tn-beat:after{
  content:"";position:absolute;left:6px;top:2px;width:10px;height:10px;border-radius:50%;   /* centred on the dot's top edge, where the line arrives */
  border:1px solid currentColor;opacity:0;pointer-events:none;box-sizing:border-box;
  transform:translate(-50%,-50%);
}
/* Three tracks on the one element, same length:
   - rise:  a single gentle ease-in the whole way, so it never stalls between steps
   - shape: ring spreads (0-20%), then slowly gathers into a bubble (20-72%), fades
   - sway:  a small side to side wobble
   transform holds the centring + sway; the rise uses the separate translate property. */
.tn-beat--role:after{top:0;}                          /* the role dot is 14px, its top edge is at 0 */
.tn-beat.is-reached:after{
  animation:
    tn-rb-shape 5.4s linear 1 both,
    tn-rb-rise  5.4s cubic-bezier(.3,.18,.7,.55) 1 both,
    tn-rb-sway  5.4s ease-in-out 1 both;
}
.tn-beat--role.is-reached:after{
  animation:
    tn-rb-shape-lg 6s linear 1 both,
    tn-rb-rise-lg  6s cubic-bezier(.3,.18,.7,.55) 1 both,
    tn-rb-sway     6s ease-in-out 1 both;
}
@keyframes tn-rb-rise   {from{translate:0 0;}to{translate:0 -220px;}}
@keyframes tn-rb-rise-lg{from{translate:0 0;}to{translate:0 -270px;}}
@keyframes tn-rb-sway{
  0%  {transform:translate(-50%,-50%);}
  40% {transform:translate(calc(-50% + 3px),-50%);}
  72% {transform:translate(calc(-50% - 3px),-50%);}
  100%{transform:translate(calc(-50% + 2px),-50%);}
}
@keyframes tn-rb-shape{
  0%  {width:10px;height:10px;opacity:0.75;
       box-shadow:0 0 0 0 rgba(255,255,255,0),inset 0 0 0 0 rgba(255,255,255,0);animation-timing-function:cubic-bezier(.2,.6,.3,1);}
  20% {width:26px;height:26px;opacity:0.32;
       box-shadow:0 0 0 0 rgba(255,255,255,0),inset 0 0 0 0 rgba(255,255,255,0);animation-timing-function:ease-in-out;}
  72% {width:11px;height:11px;opacity:0.9;
       box-shadow:0 0 0 0 rgba(255,255,255,0),inset 2px 2px 3px -1px rgba(255,255,255,0.75);}
  87% {opacity:0.7;}
  100%{width:9px;height:9px;opacity:0;
       box-shadow:0 0 0 0 rgba(255,255,255,0),inset 2px 2px 3px -1px rgba(255,255,255,0.75);}
}
@keyframes tn-rb-shape-lg{
  0%  {width:14px;height:14px;opacity:0.85;
       box-shadow:0 0 0 0 rgba(255,255,255,0.16),inset 0 0 0 0 rgba(255,255,255,0);animation-timing-function:cubic-bezier(.2,.6,.3,1);}
  20% {width:34px;height:34px;opacity:0.36;
       box-shadow:0 0 0 5px rgba(255,255,255,0.16),inset 0 0 0 0 rgba(255,255,255,0);animation-timing-function:ease-in-out;}
  72% {width:14px;height:14px;opacity:0.95;
       box-shadow:0 0 0 0 rgba(255,255,255,0),inset 2px 2px 4px -1px rgba(255,255,255,0.8);}
  87% {opacity:0.75;}
  100%{width:12px;height:12px;opacity:0;
       box-shadow:0 0 0 0 rgba(255,255,255,0),inset 2px 2px 4px -1px rgba(255,255,255,0.8);}
}

/* Variant B: role changes tagged in the margin at the node (scratch page only) */
.tn-tag{display:none;}
.tn-spine--b .tn-tag{
  display:block;font-family:'HKGrotesk-bold','Helvetica','Arial',sans-serif;
  font-size:0.875em;line-height:1.25;color:var(--cs-accent-soft);margin-bottom:4px;
}
@media(min-width:992px){
  .tn-spine--b .tn-tag{position:absolute;right:calc(100% + 18px);top:0;white-space:nowrap;margin:0;}
}

/* Variant C: no rail, role changes set in the accent inline (scratch page only).
   Bronze #d37731 is 2.04:1 on this water, so this uses the palette's soft bronze (5.48:1+). */
.tn-spine--c .tn-beat{padding-left:0;}
.tn-spine--c:before,.tn-spine--c:after,.tn-spine--c .tn-beat:before,.tn-spine--c .tn-beat:after{display:none;}
.tn-spine--c .tn-role{color:var(--cs-accent-soft);font-family:'HKGrotesk-bold','Helvetica','Arial',sans-serif;}

/* ==========================================================================
   Environment: light rays, bubbles, creatures. All decorative, aria-hidden.
   ========================================================================== */
.tn-rays{
  /* sunlight raking down through the sky: full at the top, gone by the waterline */
  position:absolute;left:-10%;right:-10%;top:0;bottom:var(--tn-line-inset);
  background:repeating-linear-gradient(104deg,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,0.15) 96px,
    rgba(255,255,255,0) 150px,
    rgba(255,255,255,0) 210px,
    rgba(255,255,255,0.09) 236px,
    rgba(255,255,255,0) 262px,
    rgba(255,255,255,0) 340px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,0.5) 45%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,0.5) 45%,transparent 100%);
  animation:tn-shimmer 11s ease-in-out infinite alternate;
}
@keyframes tn-shimmer{from{opacity:0.55;}to{opacity:1;}}

.tn-bub{
  position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);
  border-radius:50%;border:1px solid rgba(255,255,255,0.6);
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,0.55),rgba(255,255,255,0) 60%);
  opacity:0;will-change:transform,opacity;
  animation:tn-rise var(--d) linear var(--delay) infinite;
}
@keyframes tn-rise{
  0%  {transform:translate3d(0,0,0);opacity:0;}
  12% {opacity:0.85;}
  85% {opacity:0.6;}
  100%{transform:translate3d(var(--wob),calc(var(--rise) * -1),0);opacity:0;}
}
/* pause anything that's well offscreen (JS marks segments near the viewport) */
.tn-js .tn-seg:not(.is-near) .tn-bub,
.tn-js .tn-seg:not(.is-near) .tn-rays,
.tn-js .tn-seg:not(.is-near) .tn-creature{animation-play-state:paused;}

/* Creatures live in the empty left column, so they can never cross a text column. They
   float (absolute, --depth from the top of the column) rather than sit in the flow, so they
   never make a section taller than its text. Below 992px the columns stack and they're hidden. */
.tn-creature{display:none;}
@media(min-width:992px){
  .tn-creature{display:block;position:absolute;left:15px;top:var(--depth,120px);will-change:transform;}
}
.tn-creature svg{display:block;width:100%;height:auto;}
.tn-fish{width:220px;animation:tn-drift-x 19s ease-in-out infinite alternate;}
.tn-fish path{fill:var(--tn-6);opacity:0.42;}
.tn-jelly{width:96px;margin-left:40px;animation:tn-drift-y 15s ease-in-out infinite alternate;}
.tn-jelly .bell{fill:rgba(255,255,255,0.16);}
.tn-jelly .tent{fill:none;stroke:rgba(255,255,255,0.16);stroke-width:2;stroke-linecap:round;}
.tn-ray{width:200px;animation:tn-drift-x 34s ease-in-out infinite alternate;}
.tn-ray path{fill:rgba(255,255,255,0.06);}

/* Parallax (desktop, motion allowed): js/tenure.js sets --tn-par (px of the element's
   offset from the middle of the screen) and each layer moves by --pz of it. Positive pz
   is nearer than the page (bigger bubbles), negative is further back (the creatures).
   Uses the translate property so it stacks with the drift/rise transform animations. */
.tn-parallax .tn-bub,
.tn-parallax .tn-creature{translate:0 calc(var(--tn-par, 0) * var(--pz, 0) * 1px);}
/* every sea creature drifts at the same depth, a little nearer than the page (bubbles set
   their own --pz by size). New creatures get this automatically; override with --pz inline. */
.tn-creature{--pz:0.13;}
@keyframes tn-drift-x{from{transform:translate3d(-14px,0,0);}to{transform:translate3d(14px,-6px,0);}}
@keyframes tn-drift-y{from{transform:translate3d(0,-10px,0);}to{transform:translate3d(6px,10px,0);}}

/* ---------- Rise: underwater text drifts up and fades in as it scrolls into view on the way
   down, and stays put when it scrolls off the top. Scroll back up until it's below the
   screen and it quietly resets (no fade out), so it rises in again on the next pass down.
   Nothing above the waterline moves. js/tenure.js adds .tn-floaty (motion allowed +
   IntersectionObserver), marks elements .tn-float, and toggles .is-in. ---------- */
.tn-floaty .tn-float{opacity:0;transform:translate3d(0,28px,0);}
.tn-floaty .tn-float.is-in{
  opacity:1;transform:none;
  transition:opacity 1s ease var(--fd,0s),transform 1.2s cubic-bezier(.22,.61,.36,1) var(--fd,0s);
}

/* ---------- Reduced motion: the gradient stays, everything else holds still ---------- */
@media (prefers-reduced-motion: reduce){
  .tn-bub{display:none;}
  .tn-rays,.tn-creature{animation:none;}
  .tn-beat:after{animation:none !important;}
  .tn-float{animation:none !important;transition:none !important;opacity:1 !important;transform:none !important;}
  .tn-float:before,.tn-float:after{display:none !important;}
}

/* ==========================================================================
   Scratch page only (scratch-spine.php)
   ========================================================================== */
.tn-scratch-label{font-family:'HKGrotesk-bold','Helvetica','Arial',sans-serif;font-size:0.875em;line-height:1.25;color:var(--cs-accent-soft);margin:0 0 8px;}
.tn-ramp{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:760px;}
.tn-ramp-stops{display:flex;flex-direction:column;}
.tn-swatch{min-height:150px;padding:14px 16px;font-size:0.875em;line-height:1.35;display:flex;flex-direction:column;justify-content:flex-end;}
.tn-swatch b{font-size:1.125em;}
.tn-swatch code{font-family:var(--cs-mono);font-size:0.875em;}
.tn-ramp-strip{
  background-image:linear-gradient(to bottom,var(--tn-1) 0%,var(--tn-2) 9%,var(--tn-3) 12.5%,var(--tn-4) 25%,var(--tn-5) 37.5%,var(--tn-6) 50%,var(--tn-7) 62.5%,var(--tn-7a) 75%,var(--tn-7b) 87.5%,var(--tn-8) 100%);
  background-image:linear-gradient(in oklab to bottom,var(--tn-1) 0%,var(--tn-2) 9%,var(--tn-3) 12.5%,var(--tn-4) 25%,var(--tn-5) 37.5%,var(--tn-6) 50%,var(--tn-7) 62.5%,var(--tn-7a) 75%,var(--tn-7b) 87.5%,var(--tn-8) 100%);
}
@media(max-width:600px){.tn-ramp{grid-template-columns:1fr;}.tn-ramp-strip{min-height:400px;}}

/* ==========================================================================
   The dive (js/tenure-water.js). A fixed WebGL canvas behind the top three
   segments. html.tn-gl is only set once it has drawn a frame; until then (or
   without WebGL / with reduced motion) the CSS gradients above are the page.
   ========================================================================== */
/* The canvas lives in the page (absolute, sized to the dive zone by js/tenure-water.js),
   not fixed to the screen: the browser then scrolls it with the text on the compositor, so
   the waterline can never lag behind the copy (fixed + redraw-on-scroll was steppy on iOS). */
.tn-gl-canvas{position:absolute;left:0;top:0;width:100%;height:0;z-index:-1;pointer-events:none;display:block;visibility:hidden;}
.tn-gl .tn-gl-canvas{visibility:visible;}
.tn-gl .tn-seg--surface,
.tn-gl .tn-seg--shallows{background:transparent;}

/* Handover fade. Before the dive the canvas shows the sunlit surface right down to where it
   ends, so a hard edge met the CSS water. Now the practice section's water fades in from
   transparent over --tn-fade, with the canvas extended underneath (js/tenure-water.js reads
   the same variable), so whatever the canvas is showing blends through. */
:root{--tn-fade:400px;}
.tn-gl .tn-seg--practice{background:transparent;}
.tn-gl .tn-seg--practice:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--tn-ramp);background-size:100% var(--tn-ramp-h);
  background-position:0 var(--tn-off,0px);background-repeat:no-repeat;
  /* eased: stays nearly clear for the first stretch, then firms up slowly */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,0.06) calc(var(--tn-fade) * 0.25),rgba(0,0,0,0.25) calc(var(--tn-fade) * 0.5),rgba(0,0,0,0.6) calc(var(--tn-fade) * 0.75),#000 var(--tn-fade));
          mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,0.06) calc(var(--tn-fade) * 0.25),rgba(0,0,0,0.25) calc(var(--tn-fade) * 0.5),rgba(0,0,0,0.6) calc(var(--tn-fade) * 0.75),#000 var(--tn-fade));
}

/* Spacing around the handover: tighter under the plunge, more room above the practice
   (the fade lives in that room) */
#plunge{padding-bottom:15px;}
#practice{padding-top:100px;}
@media(min-width:992px){
  #plunge{padding-bottom:20px;}
  #practice{padding-top:140px;}
}

/* The deep: with the quote gone, the last section is one line, so give the ray room
   to float under "The detail." without being clipped (desktop, where creatures show) */
@media(min-width:992px){#detail{padding-bottom:140px;}}