/* Shared styles for every page. Page-specific styles stay in each page's <style>. */

/* Accent flips with the theme: deep violet on light, lilac on dark. */
:root { --accent: 31 75 83; --accent-light: 76 114 117; --on-accent: 255 255 255; }
.dark, .on-dark { --accent: 134 185 176; --accent-light: 169 211 203; --on-accent: 4 20 33; }

*, *::before, *::after { box-sizing: border-box; }
html, body { font-family: 'DM Sans', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'PT Sans', sans-serif; }
body { transition: background-color .3s, color .3s; }

/* film grain, very faint */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dark body::before { mix-blend-mode: screen; opacity: .05; }

::selection { background: #A9D3CB; color: #061019; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--accent)); border-radius: 99px; }

/* nav underline */
.nl { position: relative; }
.nl::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 100%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.nl:hover::after, .nl[aria-current="page"]::after { transform: scaleX(1); }

/* outlined display type */
.stroke-text { color: transparent; -webkit-text-stroke: 2px #1F4B53; }
.dark .stroke-text { -webkit-text-stroke-color: #86B9B0; }

/* "available" pulse */
.pulse { position: relative; }
.pulse::after { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: inherit; animation: ping 2.2s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

/* photos come to life on hover */
.alive { filter: grayscale(1); transition: filter .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.group:hover .alive { filter: grayscale(0); }

/* page-load fade */
.fade-in { opacity: 0; animation: fade .9s ease forwards; }
@keyframes fade { to { opacity: 1; } }

/* headline lines rise into place */
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line > span { display: inline-block; transform: translateY(110%); animation: rise .95s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes rise { to { transform: none; } }

section[id] { scroll-margin-top: 80px; }
a:focus-visible, button:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  html.scroll-smooth { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .line > span { transform: none; }
  .fade-in { opacity: 1; }
}
[x-cloak] { display: none !important; }

/* ── Long-form text: blog posts and the case study ── */
.prose-j { color: #1E2E33; font-size: 1.0625rem; line-height: 1.8; }
.dark .prose-j { color: #D3DEDE; }
.prose-j > :first-child { margin-top: 0; }
.prose-j h2 { font-family: 'PT Sans', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.15rem); letter-spacing: -.02em; line-height: 1.15; margin: 3.25rem 0 1rem; color: #061019; }
.dark .prose-j h2 { color: #fff; }
.prose-j h3 { font-family: 'PT Sans', sans-serif; font-weight: 700; font-size: 1.3rem; margin: 2.25rem 0 .6rem; color: #052530; }
.dark .prose-j h3 { color: #86B9B0; }
.prose-j p { margin: 0 0 1.35rem; }
.prose-j ul { margin: 0 0 1.6rem; padding: 0; list-style: none; }
.prose-j li { position: relative; padding-left: 1.7rem; margin-bottom: .65rem; }
.prose-j li::before { content: ''; position: absolute; left: 0; top: .6em; width: .65rem; height: .65rem; border-radius: 3px; background: #4C7275; transform: rotate(8deg); }
.prose-j li:nth-child(3n+2)::before { background: #A9D3CB; transform: rotate(-6deg); }
.prose-j li:nth-child(3n)::before { background: #052530; }
.dark .prose-j li:nth-child(3n)::before { background: #86B9B0; }
.prose-j strong { color: #061019; font-weight: 600; }
.dark .prose-j strong { color: #fff; }
.prose-j a { color: #052530; text-decoration: underline; text-decoration-color: #86B9B0; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color .2s; }
.prose-j a:hover { text-decoration-color: #A9D3CB; }
.dark .prose-j a { color: #DDE6E4; text-decoration-color: #1F4B53; }
.prose-j blockquote { margin: 2.25rem 0; padding: 1.6rem 1.8rem; border-radius: 22px; background: #DDE6E4; color: #041421; font-family: 'PT Sans', sans-serif; font-weight: 700; font-size: 1.35rem; line-height: 1.35; }
.dark .prose-j blockquote { background: #041421; color: #E6ECEC; }
.prose-j blockquote p { margin: 0; }
.prose-j hr { border: 0; height: 6px; border-radius: 99px; margin: 3rem 0; background: linear-gradient(90deg, #041421, #052530, #1F4B53, #4C7275, #86B9B0, #DDE6E4, #A9D3CB); }
.prose-j em { color: #4E6266; }
.dark .prose-j em { color: #9FB5B6; }
.prose-j code { font-size: .9em; padding: .1em .4em; border-radius: 6px; background: #DDE6E4; color: #052530; }
.dark .prose-j code { background: #041421; color: #DDE6E4; }

/* reading progress bar */
.read-progress { position: fixed; top: 0; left: 0; height: 4px; width: 100%; z-index: 70; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, #052530, #4C7275, #A9D3CB); }