/* A quiet, still chapter after the morning film. Shared with its direct URL. */
.safety-section{position:relative;min-height:100svh;background:var(--home-gradient);color:var(--ink);padding:clamp(112px,12vh,160px) var(--gutter) 48px;outline:none}
.safety-page{min-height:100svh}
.safety-layout{max-width:1440px;margin-inline:auto}
.safety-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'portrait intro' 'portrait principles';column-gap:clamp(40px,6vw,104px);align-items:start}
.safety-intro{grid-area:intro;padding-bottom:32px}
.safety-intro .eyebrow{font-size:11px}
.safety-heading,.closing-copy h2{font:700 clamp(44px,4.3vw,70px)/1.02 var(--f-display);letter-spacing:-.055em;text-wrap:balance}
.safety-section .safety-heading em,.closing-copy h2 em{display:block;margin-top:-.03em;font:italic 340 1.08em/1.02 var(--f-accent);font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 1;letter-spacing:-.025em;font-synthesis:none;font-kerning:normal;font-variant-ligatures:common-ligatures contextual}
.safety-lead{max-width:42ch;margin-top:24px;color:#beb5a8;font:400 clamp(16px,1.15vw,18px)/1.65 var(--f-sans);text-wrap:pretty}
.safety-portrait{grid-area:portrait;position:relative;align-self:start;aspect-ratio:1;overflow:hidden;border-radius:24px;background:#4a4035}
.safety-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 50%}
.safety-portrait video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 180ms cubic-bezier(.23,1,.32,1);pointer-events:none}
.safety-portrait video.is-film-visible{opacity:1}
.safety-portrait video[hidden],.principle-film-toggle[hidden],.principle-film-feedback[hidden]{display:none}
.safety-principles{grid-area:principles}
.safety-principle{position:relative;isolation:isolate;display:grid;grid-template-columns:24px minmax(0,1fr);gap:16px;padding:24px 12px;border-top:1px solid rgb(241 237 230 / 18%)}
.principle-number{padding-top:6px;color:var(--amber);font:400 10px/1.6 var(--f-mono)}
.safety-principle :is(h2,h3){margin-bottom:8px;font:500 clamp(22px,1.8vw,28px)/1.2 var(--f-display);letter-spacing:-.035em;text-wrap:balance}
.safety-principle p{max-width:48ch;color:#beb5a8;font:400 16px/1.6 var(--f-sans);text-wrap:pretty}
/* The row is the preview trigger; there is no visible video-player control. */
.principle-film-toggle{position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;border:0;background:transparent;color:var(--amber);cursor:pointer;text-align:left}
.principle-film-toggle:focus-visible{outline:2px solid var(--amber);outline-offset:-3px;border-radius:4px}
.safety-principle .principle-film-feedback{margin-top:8px;font-size:13px;color:var(--amber)}
.safety-principle:is(.is-film-selected,:focus-within)::before{opacity:1}
.safety-principle:is(.is-film-selected,:focus-within) :is(h2,h3){color:#f5d7aa}
.principle-echo{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:-1;color:var(--amber)}
/* Hover: the footer directory's motion, a light sweeping along the row's hairline, replaces the curved wave (Jesse,
   2026-11-02), so both lists share one gesture. */
.principle-echo{display:none}
.safety-principle::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0 35%,var(--kin-bronze-hi,#ead0b8) 50%,transparent 65% 100%) no-repeat;
  background-size:300% 100%;background-position:130% 0}
.principle-wave{fill:none;stroke:currentColor;stroke-width:1.25;opacity:0;transform-box:view-box;transform-origin:0 50%}
.principle-wave path{vector-effect:non-scaling-stroke}
.principle-wave-soft{stroke-width:24;stroke-opacity:.14}
.safety-principle::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgb(255 193 103 / 7%),rgb(255 193 103 / 0%) 85%);opacity:0;transition:opacity 180ms ease-out}
@media(hover:hover) and (pointer:fine){
  .safety-principle:hover::before{opacity:1}
  .safety-principle:hover :is(h2,h3){color:#f5d7aa}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .safety-principle > :is(.principle-number,div){transition:transform 180ms cubic-bezier(.23,1,.32,1)}
  .safety-principle:hover > :is(.principle-number,div){transform:translateX(4px)}
  .safety-principle:hover::after{background-position:-30% 0;transition:background-position 900ms cubic-bezier(.23,1,.32,1)}
}
@keyframes principle-travel{
  from{transform:translateX(-4%) scaleX(.55)}
  to{transform:translateX(86%) scaleX(1.3)}
}
@keyframes principle-dissolve{
  0%{opacity:0}
  12%{opacity:.48}
  45%{opacity:.25}
  100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .safety-principle::before{transition:none}
  .safety-portrait video{transition:none}
}
.nav a[data-safety-link][aria-current]{color:var(--amber)}
@media(max-width:1000px) and (min-width:761px){
  .safety-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);column-gap:32px}
  .safety-heading,.closing-copy h2{font-size:42px}
  .safety-principle{gap:12px}
}
@media(max-width:760px){
  .safety-section{padding:112px var(--gutter) max(32px,env(safe-area-inset-bottom))}
  .safety-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:'intro' 'portrait' 'principles';gap:32px}
  .safety-intro{padding-bottom:0}
  .safety-heading,.closing-copy h2{font-size:clamp(38px,9.8vw,60px)}
  .safety-lead{margin-top:20px;font-size:16px}
  .safety-portrait{border-radius:18px}
  .safety-principle{grid-template-columns:20px minmax(0,1fr);gap:14px;padding:22px 8px}
  .safety-principle :is(h2,h3){font-size:24px}
  .safety-principle p{font-size:15px}
}