/* Decoloris site theme: Aurora daylight with oxblood accents, plus the film touches.
   Loaded after each page's own styles. Fonts are self-hosted (SIL OFL, licenses alongside). */
@font-face { font-family: Figtree; src: url(/assets/fonts/figtree.woff2) format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: Figtree; src: url(/assets/fonts/figtree-italic.woff2) format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: Newsreader; src: url(/assets/fonts/newsreader.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root { color-scheme: light; --hairline: #D9D7C8; --display: Newsreader, Georgia, "Times New Roman", serif; --sans: Figtree, "Segoe UI", Arial, sans-serif; }
body { font-family: var(--sans); }
p, li, td, .note, .about, .consent label { letter-spacing: 0; }
strong, th { font-weight: 600; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* header */
.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 2rem; margin-bottom: 3rem; }
.site-head .home { margin: 0; border: 0; }
.site-head .home span { font-family: var(--display); font-size: 1.2rem; letter-spacing: 0.3em; color: var(--cream); }
.site-head .home svg { width: 52px; filter: drop-shadow(0 0 5px rgba(199, 72, 45, 0.28)); }
.site-nav { display: flex; flex-wrap: wrap; gap: 0.2rem 1.6rem; font-size: 0.94rem; font-weight: 500; }
.site-nav a { color: var(--cream); border: 0; padding: 0.6rem 0; }
.site-nav a:hover { color: var(--gold); }

/* type */
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.3rem, 5.4vw, 3.5rem); line-height: 1.08; letter-spacing: -0.012em; text-wrap: balance; margin-bottom: 0.8rem; }
h2 { font-family: var(--display); font-weight: 500; font-size: 1.65rem; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--cream); }
h3 { font-weight: 600; letter-spacing: 0; }
.meta { font-size: 1.05rem; letter-spacing: 0; }
.rule { display: none; }
.card h2 { font-size: 1.65rem; letter-spacing: 0; text-transform: none; }
.card .sub, .terms { font-size: 0.92rem; letter-spacing: 0; line-height: 1.6; }
.terms + .terms { margin-top: 0.5rem; }
.price { font-family: var(--display); font-size: clamp(2.3rem, 9vw, 3.1rem); line-height: 1.1; }
.cards > .card { min-width: 0; }
.price .launch { display: block; margin-top: 0.3rem; font-family: var(--sans); font-size: 0.94rem; line-height: 1.5; font-weight: 500; letter-spacing: 0; }
.card { background: #FFFEFA; }
.note { font-size: 1rem; line-height: 1.7; }
footer { letter-spacing: 0; font-size: 0.86rem; }
a { color: var(--gold); border-bottom-color: rgba(126, 42, 26, 0.35); }
a:hover { color: var(--cream); }
.dl .btn, .buy-btn { border-radius: 3px; font-family: var(--sans); font-weight: 600; letter-spacing: 0; text-transform: none; }
.dl .btn, .dl .btn:hover { color: var(--bg); border-bottom: 0; opacity: 1; }
.dl .btn:hover, .buy-btn:not(:disabled):hover { background: #5E1E12; color: var(--bg); }
.buy-btn { font-size: 1rem; min-height: 3.25rem; }
.buy-btn:disabled { opacity: 0.45; }
.consent label { font-size: 0.94rem; color: var(--cream); }
.buy-status { color: var(--cream-faint); }

/* the density-step wedge */
.wedge { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); height: 1.1rem; border: 1px solid var(--hairline); }
.wedge i:nth-child(1) { background: #FBFAF4; } .wedge i:nth-child(2) { background: #E8E7D9; } .wedge i:nth-child(3) { background: #D2D2C2; }
.wedge i:nth-child(4) { background: #B9BAAC; } .wedge i:nth-child(5) { background: #9C9E91; } .wedge i:nth-child(6) { background: #7F7E70; }
.wedge i:nth-child(7) { background: #666755; } .wedge i:nth-child(8) { background: #4F5341; } .wedge i:nth-child(9) { background: #3A4231; }
.wedge i:nth-child(10) { background: #27301F; } .wedge i:nth-child(11) { background: #141A10; }

/* home */
body.page-home { display: block; text-align: left; height: auto; padding: 2rem clamp(1rem, 5vw, 4.5rem) 2.5rem; font-size: 1.06rem; line-height: 1.65; }
html.page-home-root { height: auto; }
.home-wrap { max-width: 71rem; margin: 0 auto; }
.home-hero { display: grid; gap: 2rem; margin-bottom: 3.5rem; }
.home-hero h1 { margin: 0; max-width: 17em; font-size: clamp(2.4rem, 5.6vw, 4.25rem); }
.catch { margin: -0.9rem 0 0; max-width: 36em; font-family: var(--display); font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.35; color: var(--cream-dim); }
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr)); gap: 3.5rem 4.5rem; }
.product { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.product h2 { margin: 0; padding: 0; border: 0; font-size: 1.9rem; }
.product .sub { font-size: 0.94rem; font-weight: 500; color: var(--cream-faint); }
.product p { color: var(--cream-dim); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.6rem; }
.action { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.5rem; border-radius: 3px; border: 1px solid var(--gold); font-size: 0.94rem; font-weight: 600; color: var(--gold); }
.action:hover { background: rgba(126, 42, 26, 0.07); color: var(--gold); border-bottom-color: var(--gold); }
.action.primary, .action.primary:hover { background: var(--gold); color: var(--bg); }
.action.primary:hover { background: #5E1E12; border-color: #5E1E12; }
.action.quiet { border: 0; padding: 0 0.5rem; font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }
.action.quiet:hover { background: none; }
.page-home footer { margin-top: 3.5rem; border-top: 1px solid var(--hairline); text-align: left; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 2rem; line-height: 1.8; }

/* buy */
.page-buy .wrap { max-width: 71rem; }
.buy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 2.5rem 4.5rem; align-items: start; }
.buy-intro { display: grid; gap: 1.3rem; min-width: 0; }
.buy-intro h1, .buy-intro .meta, .buy-intro .note { margin: 0; }
.page-buy .card { min-width: 0; }

/* Film touches. Titles: halation (light bleeding warm-red into dark edges) that settles on load,
   and a gate weave of about a pixel, held per frame. Page: fine grain, a new position every frame at 24 fps; print dirt from site.js. */
h1 {
  text-shadow: 0 0 1px rgba(199, 72, 45, 0.28), 0 0 6px rgba(199, 72, 45, 0.13), 0 0 16px rgba(216, 130, 47, 0.09);
  will-change: transform;
  animation: gate-weave 6s step-end infinite, halation-settle 1.6s ease-out 1;
}
@keyframes halation-settle {
  from { text-shadow: 0 0 2px rgba(199, 72, 45, 0.5), 0 0 12px rgba(199, 72, 45, 0.3), 0 0 32px rgba(216, 130, 47, 0.26); }
}
body::after {
  content: ""; position: fixed; inset: -128px; z-index: 99990; pointer-events: none;
  background: url(/assets/grain.png) 0 0 / 256px 256px;
  will-change: transform; animation: grain-frames 2s step-end infinite;
}
@keyframes grain-frames {
  0.000% { transform: translate(-76px, 47px); }
  2.083% { transform: translate(69px, 20px); }
  4.167% { transform: translate(-22px, -62px); }
  6.250% { transform: translate(109px, -122px); }
  8.333% { transform: translate(-87px, 120px); }
  10.417% { transform: translate(-61px, -78px); }
  12.500% { transform: translate(19px, 32px); }
  14.583% { transform: translate(-36px, -31px); }
  16.667% { transform: translate(-103px, 6px); }
  18.750% { transform: translate(-112px, 22px); }
  20.833% { transform: translate(67px, 6px); }
  22.917% { transform: translate(119px, -115px); }
  25.000% { transform: translate(-7px, -25px); }
  27.083% { transform: translate(32px, 60px); }
  29.167% { transform: translate(-29px, -54px); }
  31.250% { transform: translate(-58px, -85px); }
  33.333% { transform: translate(-42px, 93px); }
  35.417% { transform: translate(35px, -98px); }
  37.500% { transform: translate(120px, 95px); }
  39.583% { transform: translate(-54px, -29px); }
  41.667% { transform: translate(28px, -76px); }
  43.750% { transform: translate(88px, -99px); }
  45.833% { transform: translate(33px, -53px); }
  47.917% { transform: translate(12px, -124px); }
  50.000% { transform: translate(59px, 111px); }
  52.083% { transform: translate(-102px, -112px); }
  54.167% { transform: translate(31px, 28px); }
  56.250% { transform: translate(90px, -74px); }
  58.333% { transform: translate(4px, 85px); }
  60.417% { transform: translate(55px, -60px); }
  62.500% { transform: translate(5px, 56px); }
  64.583% { transform: translate(-32px, -16px); }
  66.667% { transform: translate(-47px, 47px); }
  68.750% { transform: translate(-86px, 82px); }
  70.833% { transform: translate(-97px, -69px); }
  72.917% { transform: translate(-14px, 95px); }
  75.000% { transform: translate(11px, 15px); }
  77.083% { transform: translate(126px, 42px); }
  79.167% { transform: translate(-31px, -113px); }
  81.250% { transform: translate(-73px, -35px); }
  83.333% { transform: translate(-34px, -52px); }
  85.417% { transform: translate(-58px, -47px); }
  87.500% { transform: translate(38px, -2px); }
  89.583% { transform: translate(-93px, -50px); }
  91.667% { transform: translate(33px, -116px); }
  93.750% { transform: translate(91px, 35px); }
  95.833% { transform: translate(-117px, -4px); }
  97.917% { transform: translate(38px, 97px); }
}
@media (prefers-reduced-motion: reduce) {
  h1, body::after { animation: none; }
}
@media print {
  body::after { display: none; }
  h1 { text-shadow: none; animation: none; }
}

@keyframes gate-weave {
  0.00% { transform: translate(-0.11px, 0.68px); }
  1.39% { transform: translate(-0.04px, 0.77px); }
  2.78% { transform: translate(0.00px, 0.81px); }
  4.17% { transform: translate(0.04px, 0.77px); }
  5.56% { transform: translate(0.09px, 0.68px); }
  6.94% { transform: translate(0.13px, 0.55px); }
  8.33% { transform: translate(0.20px, 0.37px); }
  9.72% { transform: translate(0.26px, 0.18px); }
  11.11% { transform: translate(0.33px, -0.02px); }
  12.50% { transform: translate(0.37px, -0.20px); }
  13.89% { transform: translate(0.40px, -0.31px); }
  15.28% { transform: translate(0.40px, -0.40px); }
  16.67% { transform: translate(0.37px, -0.42px); }
  18.06% { transform: translate(0.29px, -0.40px); }
  19.44% { transform: translate(0.18px, -0.33px); }
  20.83% { transform: translate(0.07px, -0.26px); }
  22.22% { transform: translate(-0.04px, -0.18px); }
  23.61% { transform: translate(-0.15px, -0.11px); }
  25.00% { transform: translate(-0.20px, -0.07px); }
  26.39% { transform: translate(-0.22px, -0.04px); }
  27.78% { transform: translate(-0.20px, -0.07px); }
  29.17% { transform: translate(-0.13px, -0.09px); }
  30.56% { transform: translate(-0.02px, -0.11px); }
  31.94% { transform: translate(0.07px, -0.13px); }
  33.33% { transform: translate(0.11px, -0.13px); }
  34.72% { transform: translate(0.13px, -0.13px); }
  36.11% { transform: translate(0.09px, -0.09px); }
  37.50% { transform: translate(-0.02px, -0.04px); }
  38.89% { transform: translate(-0.20px, 0.02px); }
  40.28% { transform: translate(-0.40px, 0.07px); }
  41.67% { transform: translate(-0.62px, 0.11px); }
  43.06% { transform: translate(-0.79px, 0.09px); }
  44.44% { transform: translate(-0.92px, 0.04px); }
  45.83% { transform: translate(-0.97px, -0.04px); }
  47.22% { transform: translate(-0.90px, -0.18px); }
  48.61% { transform: translate(-0.73px, -0.33px); }
  50.00% { transform: translate(-0.46px, -0.48px); }
  51.39% { transform: translate(-0.13px, -0.64px); }
  52.78% { transform: translate(0.24px, -0.75px); }
  54.17% { transform: translate(0.59px, -0.81px); }
  55.56% { transform: translate(0.88px, -0.84px); }
  56.94% { transform: translate(1.10px, -0.79px); }
  58.33% { transform: translate(1.21px, -0.73px); }
  59.72% { transform: translate(1.21px, -0.59px); }
  61.11% { transform: translate(1.10px, -0.46px); }
  62.50% { transform: translate(0.92px, -0.33px); }
  63.89% { transform: translate(0.70px, -0.22px); }
  65.28% { transform: translate(0.48px, -0.13px); }
  66.67% { transform: translate(0.29px, -0.09px); }
  68.06% { transform: translate(0.13px, -0.07px); }
  69.44% { transform: translate(0.07px, -0.09px); }
  70.83% { transform: translate(0.07px, -0.13px); }
  72.22% { transform: translate(0.13px, -0.18px); }
  73.61% { transform: translate(0.24px, -0.24px); }
  75.00% { transform: translate(0.37px, -0.29px); }
  76.39% { transform: translate(0.46px, -0.31px); }
  77.78% { transform: translate(0.51px, -0.33px); }
  79.17% { transform: translate(0.51px, -0.33px); }
  80.56% { transform: translate(0.44px, -0.33px); }
  81.94% { transform: translate(0.31px, -0.31px); }
  83.33% { transform: translate(0.11px, -0.31px); }
  84.72% { transform: translate(-0.09px, -0.31px); }
  86.11% { transform: translate(-0.29px, -0.29px); }
  87.50% { transform: translate(-0.44px, -0.29px); }
  88.89% { transform: translate(-0.57px, -0.26px); }
  90.28% { transform: translate(-0.64px, -0.22px); }
  91.67% { transform: translate(-0.64px, -0.15px); }
  93.06% { transform: translate(-0.59px, -0.04px); }
  94.44% { transform: translate(-0.51px, 0.09px); }
  95.83% { transform: translate(-0.40px, 0.22px); }
  97.22% { transform: translate(-0.29px, 0.40px); }
  98.61% { transform: translate(-0.20px, 0.55px); }
  100% { transform: translate(-0.11px, 0.68px); }
}

/* Cursor halation (site.js adds the element) and a warm bloom on what can be clicked. */
.cursor-halation {
  position: fixed; left: -110px; top: -110px; width: 220px; height: 220px; z-index: 99980; pointer-events: none;
  background: radial-gradient(closest-side, rgba(226, 134, 64, 0.2), rgba(199, 72, 45, 0.09) 42%, rgba(199, 72, 45, 0) 100%);
  mix-blend-mode: multiply; will-change: transform; opacity: 0; transition: opacity 0.5s ease-out;
}
.cursor-halation.on { opacity: 1; }
@media (hover: hover) {
  a { transition: text-shadow 0.25s ease-out; }
  a:hover { text-shadow: 0 0 1px rgba(199, 72, 45, 0.3), 0 0 9px rgba(199, 72, 45, 0.32); }
  .action.primary, .dl .btn, .buy-btn { transition: box-shadow 0.25s ease-out, background 0.25s ease-out; }
  .action.primary:hover, .dl .btn:hover, .buy-btn:not(:disabled):hover { text-shadow: none; box-shadow: 0 0 2px rgba(199, 72, 45, 0.5), 0 0 18px rgba(216, 110, 50, 0.42); }
}
@media print { .cursor-halation { display: none; } }

/* Print dirt: specks and hairs that last a frame or two. Stays below the Paddle checkout. */
.print-dirt { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 99991; pointer-events: none; }
@media print { .print-dirt { display: none; } }

/* Vignette: the plugin's own, preset "Subtle" (strength 0.25, outer radius 2.5, inner falloff 0.45,
   cos^4 falloff), measured from the short side of the window as the plugin measures from the frame.
   Black at this alpha multiplies what's under it, matching the plugin's gain in linear light. */
.print-vignette { position: fixed; inset: 0; z-index: 99970; pointer-events: none;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.0000) 56.25vmin, rgba(0, 0, 0, 0.0021) 60.55vmin, rgba(0, 0, 0, 0.0083) 64.84vmin, rgba(0, 0, 0, 0.0180) 69.14vmin, rgba(0, 0, 0, 0.0305) 73.44vmin, rgba(0, 0, 0, 0.0448) 77.73vmin, rgba(0, 0, 0, 0.0598) 82.03vmin, rgba(0, 0, 0, 0.0744) 86.33vmin, rgba(0, 0, 0, 0.0876) 90.62vmin, rgba(0, 0, 0, 0.0987) 94.92vmin, rgba(0, 0, 0, 0.1071) 99.22vmin, rgba(0, 0, 0, 0.1130) 103.52vmin, rgba(0, 0, 0, 0.1166) 107.81vmin, rgba(0, 0, 0, 0.1185) 112.11vmin, rgba(0, 0, 0, 0.1192) 116.41vmin, rgba(0, 0, 0, 0.1194) 120.70vmin, rgba(0, 0, 0, 0.1194) 125.00vmin); }
@media print { .print-vignette { display: none; } }

/* The plugin's six stages, under the wedge on the home page. */
.workflow { margin-bottom: 4rem; }
.workflow h2 { margin: 0 0 1.75rem; padding: 0; border: 0; font-size: 1.9rem; }
.workflow ol { list-style: none; margin: 0; display: grid; grid-template-columns: 1fr; }
.workflow li { position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 1rem; padding-bottom: 1.5rem; }
.workflow li:last-child { padding-bottom: 0; }
.workflow li::before { content: ""; position: absolute; left: 1.625rem; top: 0; bottom: 0; width: 1px; background: var(--gold); opacity: 0.45; }
.workflow li:last-child::before { bottom: auto; height: 1rem; }
.step-icon { position: relative; grid-row: 1 / span 2; width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border: 1px solid rgba(126, 42, 26, 0.55); border-radius: 50%; background: var(--bg); color: var(--gold); }
.step-icon svg { width: 1.75rem; height: 1.75rem; display: block; }
.workflow h3 { margin: 0.1rem 0 0.15rem; font-family: var(--display); font-weight: 500; font-size: 1.25rem; line-height: 1.25; color: var(--cream); }
.workflow li p { font-size: 0.94rem; line-height: 1.5; color: var(--cream-dim); }
.workflow-more { margin-top: 1.5rem; font-size: 0.94rem; font-weight: 500; }
.workflow-more a { text-decoration: underline; text-underline-offset: 0.2em; }
@media (min-width: 60rem) {
  .workflow ol { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 1.5rem; }
  .workflow li { display: block; padding-bottom: 0; }
  .workflow li::before { left: 0; right: -1.5rem; top: 1.625rem; bottom: auto; width: auto; height: 1px; }
  .workflow li:last-child::before { right: 0; bottom: auto; height: 1px; }
  .workflow h3 { margin: 0.9rem 0 0.3rem; }
}

/* Workflow icons: a 3 s loop, moving for 2 s and resting for 1 s. Each stage starts half a second after
   the last, so the glow runs along the line without a gap. Each grain dot has its own wiggle path. */
.workflow li:nth-child(1) { --turn: 0s; } .workflow li:nth-child(2) { --turn: 0.5s; } .workflow li:nth-child(3) { --turn: 1s; }
.workflow li:nth-child(4) { --turn: 1.5s; } .workflow li:nth-child(5) { --turn: 2s; } .workflow li:nth-child(6) { --turn: 2.5s; }
.workflow .step-icon, .workflow .step-icon svg * { animation-duration: 3s; animation-delay: var(--turn); animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.section-icon.play, .section-icon.play svg * { animation-duration: 3s; animation-iteration-count: 1; animation-timing-function: ease-in-out; }
.step-icon svg * { transform-box: fill-box; transform-origin: center; }
.step-icon { animation-name: step-glow; }
.a-lens { animation-name: icon-focus; }
.a-knob-a { animation-name: icon-knob-a; }
.a-knob-b { animation-name: icon-knob-b; }
.a-perfs { stroke-dasharray: 0.01 3.99; animation-name: icon-perfs; }
.a-reel { animation-name: icon-reel; }
.a-picture { opacity: 0; transform-origin: left center; animation-name: icon-picture; }
.a-grain path:nth-child(1) { animation-name: dot-1; }
.a-grain path:nth-child(2) { animation-name: dot-2; }
.a-grain path:nth-child(3) { animation-name: dot-3; }
.a-grain path:nth-child(4) { animation-name: dot-4; }
.a-grain path:nth-child(5) { animation-name: dot-5; }
.a-grain path:nth-child(6) { animation-name: dot-6; }
.a-grain path:nth-child(7) { animation-name: dot-7; }
.a-grain path:nth-child(8) { animation-name: dot-8; }
.a-grain path:nth-child(9) { animation-name: dot-9; }
.a-grain path:nth-child(10) { animation-name: dot-10; }
.a-grain path:nth-child(11) { animation-name: dot-11; }
.a-grain path:nth-child(12) { animation-name: dot-12; }
@keyframes step-glow { 0%, 33.4%, 100% { box-shadow: 0 0 0 rgba(199, 72, 45, 0); } 16.7% { box-shadow: 0 0 2px rgba(199, 72, 45, 0.35), 0 0 16px rgba(216, 110, 50, 0.38); } }
@keyframes icon-focus { 0%, 66.7%, 100% { transform: scale(1); } 24% { transform: scale(0.72); } 44% { transform: scale(1.08); } }
@keyframes icon-knob-a { 0%, 66.7%, 100% { transform: translateX(0); } 32% { transform: translateX(-8px); } }
@keyframes icon-knob-b { 0%, 66.7%, 100% { transform: translateX(0); } 32% { transform: translateX(9px); } }
@keyframes icon-perfs { 0% { stroke-dashoffset: 0; } 66.7%, 100% { stroke-dashoffset: -12; } }
@keyframes icon-reel { 0% { transform: rotate(0deg); } 66.7%, 100% { transform: rotate(180deg); } }
@keyframes icon-picture { 0% { opacity: 0.2; transform: scaleX(0); } 36%, 52% { opacity: 0.2; transform: scaleX(1); } 66.7%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes dot-1 { 0%, 66.7%, 100% { transform: translate(0, 0); } 8% { transform: translate(-0.3px, -1.0px); } 16% { transform: translate(-0.2px, 0.1px); } 24% { transform: translate(-0.6px, 0.6px); } 32% { transform: translate(-0.6px, 0.8px); } 40% { transform: translate(1.1px, 0.9px); } 48% { transform: translate(-0.7px, 1.2px); } 56% { transform: translate(0.0px, -0.1px); } }
@keyframes dot-2 { 0%, 66.7%, 100% { transform: translate(0, 0); } 8% { transform: translate(-0.3px, 0.6px); } 16% { transform: translate(1.0px, -1.3px); } 24% { transform: translate(0.5px, 0.9px); } 32% { transform: translate(-0.7px, 1.5px); } 40% { transform: translate(-0.4px, 0.8px); } 48% { transform: translate(-0.5px, 1.2px); } 56% { transform: translate(-0.6px, -1.2px); } }
@keyframes dot-3 { 0%, 66.7%, 100% { transform: translate(0, 0); } 8% { transform: translate(-0.2px, -0.2px); } 16% { transform: translate(-0.0px, 0.6px); } 24% { transform: translate(-0.3px, -1.1px); } 32% { transform: translate(1.5px, 1.4px); } 40% { transform: translate(0.6px, -1.3px); } 48% { transform: translate(1.0px, 0.1px); } 56% { transform: translate(-0.2px, -1.2px); } }
@keyframes dot-4 { 0%, 66.7%, 100% { transform: translate(0, 0); } 8% { transform: translate(-0.0px, 1.0px); } 16% { transform: translate(0.8px, 0.5px); } 24% { transform: translate(1.2px, -0.3px); } 32% { transform: translate(1.4px, -0.9px); } 40% { transform: translate(0.5px, 0.0px); } 48% { transform: translate(-0.4px, 0.4px); } 56% { transform: translate(0.7px, 0.4px); } }
@keyframes dot-5 { 0%, 66.7%, 100% { transform: translate(0, 0); } 8% { transform: translate(1.5px, -1.4px); } 16% { transform: translate(1.2px, -0.1px); } 24% { transform: translate(-0.5px, -0.5px); } 32% { transform: translate(-0.4px, 0.7px); } 40% { transform: translate(1.1px, 0.8px); } 48% { transform: translate(-0.6px, 1.2px); } 56% { transform: translate(0.9px, 0.3px); } }
@keyframes dot-6 { 0%, 66.7%, 100% { transform: translate(0, 0); } 8% { transform: translate(-0.7px, 0.3px); } 16% { transform: translate(0.7px, 0.2px); } 24% { transform: translate(0.4px, -0.0px); } 32% { transform: translate(1.1px, 1.2px); } 40% { transform: translate(-0.8px, 1.2px); } 48% { transform: translate(-0.5px, 1.0px); } 56% { transform: translate(1.3px, -1.4px); } }
@keyframes dot-7 { 0%, 66.7%, 100% { transform: translate(0, 0); } 8% { transform: translate(-1.4px, 0.2px); } 16% { transform: translate(1.3px, 0.1px); } 24% { transform: translate(-0.1px, -0.6px); } 32% { transform: translate(0.0px, 0.3px); } 40% { transform: translate(-0.4px, -1.4px); } 48% { transform: translate(1.2px, 0.1px); } 56% { transform: translate(-0.7px, 0.3px); } }
@keyframes dot-8 { 0%, 66.7%, 100% { transform: translate(0, 0); } 8% { transform: translate(0.3px, 0.2px); } 16% { transform: translate(0.9px, -0.1px); } 24% { transform: translate(0.5px, 1.1px); } 32% { transform: translate(1.1px, 1.2px); } 40% { transform: translate(0.9px, 1.5px); } 48% { transform: translate(-0.3px, 1.4px); } 56% { transform: translate(-1.2px, -0.2px); } }
@keyframes dot-9 { 0%, 66.7%, 100% { transform: translate(0, 0); } 8% { transform: translate(0.4px, -1.3px); } 16% { transform: translate(1.4px, 1.0px); } 24% { transform: translate(0.4px, 0.8px); } 32% { transform: translate(0.3px, 0.5px); } 40% { transform: translate(0.2px, -0.6px); } 48% { transform: translate(-0.5px, 0.5px); } 56% { transform: translate(0.0px, -1.3px); } }
@keyframes dot-10 { 0%, 66.7%, 100% { transform: translate(0, 0); } 8% { transform: translate(0.1px, 0.7px); } 16% { transform: translate(-1.3px, 1.4px); } 24% { transform: translate(0.5px, -1.0px); } 32% { transform: translate(-1.4px, 0.2px); } 40% { transform: translate(-0.9px, 0.0px); } 48% { transform: translate(0.5px, 0.4px); } 56% { transform: translate(-1.5px, 1.4px); } }
@keyframes dot-11 { 0%, 66.7%, 100% { transform: translate(0, 0); } 8% { transform: translate(-1.1px, 1.4px); } 16% { transform: translate(-1.3px, -1.2px); } 24% { transform: translate(0.6px, -1.2px); } 32% { transform: translate(0.5px, -0.9px); } 40% { transform: translate(-1.4px, -1.0px); } 48% { transform: translate(-1.1px, -0.3px); } 56% { transform: translate(0.2px, -1.2px); } }
@keyframes dot-12 { 0%, 66.7%, 100% { transform: translate(0, 0); } 8% { transform: translate(-0.8px, 1.2px); } 16% { transform: translate(-0.2px, 1.3px); } 24% { transform: translate(0.3px, 0.1px); } 32% { transform: translate(1.0px, 1.3px); } 40% { transform: translate(0.4px, 0.5px); } 48% { transform: translate(0.2px, 0.6px); } 56% { transform: translate(0.2px, 0.9px); } }
.a-sway { animation-name: icon-sway; }
.a-flick { animation-name: icon-flick; }
.a-playhead { animation-name: icon-playhead; }
@keyframes icon-playhead { 0%, 66.7%, 100% { transform: translateX(0); } 45% { transform: translateX(14px); } }
@keyframes icon-sway { 0%, 66.7%, 100% { transform: translate(0, 0); } 16% { transform: translate(1.5px, -1px); } 32% { transform: translate(-1px, 1.5px); } 48% { transform: translate(1px, 1px); } }
@keyframes icon-flick { 0%, 66.7%, 100% { opacity: 1; } 10% { opacity: 0.3; } 20% { opacity: 1; } 30% { opacity: 0.5; } 42% { opacity: 1; } 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) {
  .step-icon, .step-icon svg * { animation: none; }
}

/* Inner pages: an icon on each section heading that plays once as it scrolls into view, and the wedge under the title. */
.wrap > .wedge { margin: 0 0 2.2rem; }
h2:has(> .section-icon) { display: flex; align-items: center; gap: 0.85rem; }
.section-icon { flex: none; width: 2.6rem; height: 2.6rem; }
.section-icon svg { width: 1.45rem; height: 1.45rem; }
.workflow.compact { margin: 1.5rem 0; }
.workflow.compact h3 { font-size: 1.1rem; margin: 0.1rem 0 0.1rem; }
@media (min-width: 60rem) {
  .workflow.compact ol { grid-template-columns: 1fr; }
  .workflow.compact li { display: grid; padding-bottom: 1.5rem; }
  .workflow.compact li:last-child { padding-bottom: 0; }
  .workflow.compact li::before { left: 1.625rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .workflow.compact li:last-child::before { right: auto; bottom: auto; height: 1rem; }
}

/* Edge lettering: printed down the left margin like a film's edge. Own mark only, never a stock name. */
body { position: relative; }
.edge-print { display: none; }
@media (min-width: 48rem) {
  .edge-print {
    display: block; position: absolute; top: 0; bottom: 0; left: 0.55rem; width: 1rem; overflow: hidden; pointer-events: none; user-select: none;
    writing-mode: vertical-rl; white-space: nowrap; text-align: left;
    font-family: Consolas, Menlo, "DejaVu Sans Mono", monospace; font-size: 0.66rem; line-height: 1rem; letter-spacing: 0.16em; color: rgba(126, 42, 26, 0.62);
  }
  .edge-print span { display: inline-block; height: 180px; }
}
@media print { .edge-print { display: none; } }

/* Film stocks page. A frame from the sizzle reels can join each entry later. */
.stock-group { margin-top: 2.6rem; }
.stock-group h2 { margin: 0 0 1rem; padding: 0; border: 0; }
.stock-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.9rem; }
.stock { background: #FFFEFA; border: 1px solid var(--hairline); border-radius: 4px; padding: 1rem 1.1rem; }
.stock h3 { margin: 0 0 0.25rem; font-family: var(--display); font-weight: 500; font-size: 1.3rem; line-height: 1.25; color: var(--cream); }
.stock p { margin: 0; font-size: 0.94rem; line-height: 1.5; color: var(--cream-dim); }
.stock-group ~ .note, .wedge + p { line-height: 1.7; }

/* Every page uses the home page's width. Titles, cards and grids fill it; running text stays at a comfortable line length. */
body { padding-left: clamp(1rem, 5vw, 4.5rem); padding-right: clamp(1rem, 5vw, 4.5rem); }
.wrap, .page-buy .wrap { max-width: 71rem; }
.wrap > :not(.site-head, h1, .wedge, .cards, .buy-grid, .tools, .dl-grid, .stock-group) { max-width: 46rem; }
.wrap > .wedge { width: 100%; }
.cards { max-width: none; }
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0.5rem 4.5rem; align-items: start; }
.tool h2 { margin-top: 2rem; }
.tool:last-child { grid-column: 1 / -1; max-width: 46rem; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; align-items: start; }
.dl-grid .dl { margin: 0; min-width: 0; }
.stock-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

/* The same top, header and footer position on every page, home included. */
body { padding-top: 2rem; padding-bottom: 2.5rem; }
.site-head { min-height: 2.75rem; line-height: 1.65; }
.site-head .home { display: flex; align-items: center; gap: 0.9rem; }
footer { width: 100%; max-width: 71rem; margin: 3.5rem auto 0; padding-top: 1.4rem; border-top: 1px solid var(--hairline); text-align: left; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 2rem; line-height: 1.8; font-size: 0.86rem; }

/* Logo: each ring grows to the next ring's size and color, so every band moves outward while the mark at the end of a cycle is the mark it started as. The 50% stops keep the red band from washing out mid-cycle. */
.mark-flow circle:not(:last-child) { transform-origin: 100px 126px; animation: 3s steps(72) infinite; }
.mark-flow circle:nth-child(1) { animation-name: ring-1; }
@keyframes ring-1 { to { transform: scale(1.087); opacity: 0; } }
.mark-flow circle:nth-child(2) { animation-name: ring-2; }
@keyframes ring-2 { to { transform: scale(1.2105); fill: #F4E8D2; } }
.mark-flow circle:nth-child(3) { animation-name: ring-3; }
@keyframes ring-3 { to { transform: scale(1.2459); fill: #EFD6B8; } }
.mark-flow circle:nth-child(4) { animation-name: ring-4; }
@keyframes ring-4 { 50% { fill: #CF6243; } to { transform: scale(1.2842); fill: #E7AE86; } }
.mark-flow circle:nth-child(5) { animation-name: ring-5; }
@keyframes ring-5 { 50% { fill: #CB572E; } to { transform: scale(1.338); fill: #C7482D; } }
.mark-flow circle:nth-child(6) { animation-name: ring-6; }
@keyframes ring-6 { to { transform: scale(1.449); fill: #D8822F; } }
.mark-flow circle:nth-child(7) { animation-name: ring-7; }
@keyframes ring-7 { to { transform: scale(1.75); fill: #DFAF5B; } }
@media (prefers-reduced-motion: reduce) {
  .mark-flow circle { animation: none; }
}