@font-face{font-family:Playfair;src:url('/fonts/playfair-latin.woff2') format('woff2');font-style:normal;font-weight:400 900;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/inter-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--navy:#1a2b3c;--cream:#f5f2e9;--orange:#d4652f;--gray:#374151;--light-gray:#4b5563}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:#111827;background:#fff;font-family:Inter,Arial,sans-serif;line-height:1.5}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.container{width:min(100% - 3rem,80rem);margin-inline:auto}
h1,h2,h3,.brand{font-family:Playfair,Georgia,serif}
.site-header{background:#fff;padding:1rem 0;box-shadow:0 1px 3px #00000018;position:relative;z-index:5}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{color:var(--navy);font-size:1.5rem;font-weight:700}
.nav-links{display:flex;gap:1.5rem;color:var(--navy)}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--orange)}
.hero{background:linear-gradient(to bottom,var(--cream),#fff)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem;padding-block:5rem}
h1{color:var(--navy);font-size:3rem;line-height:1.15;margin:0;font-weight:700}
h1 span{display:block}
.lede{font-size:1.25rem;color:var(--gray);margin:2rem 0}
.user-stories>h2{display:inline-block;color:var(--orange);font:normal .875rem Inter,Arial,sans-serif;border-bottom:2px solid #d4652f4d;padding-bottom:.25rem;margin:0 0 1rem}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.quotes blockquote{margin:0;padding:1.25rem;border-radius:.75rem;background:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;transition:transform .2s,box-shadow .2s}
.quotes blockquote:hover{transform:translateY(-.25rem);box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}
.quotes blockquote:last-child{grid-column:1/-1}
.quotes em{color:#d4652fcc;font-size:.875rem;font-family:Playfair,Georgia,serif}
.quotes p{font-size:1.125rem;color:var(--gray);margin:.75rem 0 0}
.reader-gallery{position:relative}
.hero-photo{height:400px;border:4px solid #fff;border-radius:.75rem;overflow:hidden;box-shadow:0 20px 25px -5px #0000001a}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.reader-thumbs{display:flex;justify-content:center;gap:1rem;margin-top:1.5rem}
.reader-thumbs img{width:9rem;height:15rem;object-fit:cover;border:2px solid #fff;border-radius:.5rem;box-shadow:0 10px 15px -3px #0000001a}
.library{background:var(--cream);padding:4rem 0}
.library h2,.how>div>h2,.cta h2{text-align:center;color:var(--navy);font-size:1.875rem;margin:0 0 1rem}
.section-intro{max-width:42rem;text-align:center;color:var(--gray);margin:0 auto 3rem}
.story-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.story-card{appearance:none;border:0;padding:0;background:none;text-align:left;cursor:pointer;border-radius:.5rem;transition:transform .2s}
.story-card:hover,.story-card:focus-visible{transform:scale(1.05);outline:3px solid var(--orange);outline-offset:3px}
.cover{display:block;aspect-ratio:5/8;border-radius:.5rem;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;background:#ddd}
.cover img{width:100%;height:100%;object-fit:cover}
.how{padding:4rem 0}
.how>div>h2{margin-bottom:3rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;position:relative;text-align:center}
.steps:before{content:"";position:absolute;top:2rem;left:10%;right:10%;height:2px;background:#d4652f33}
.steps article{position:relative}
.steps article>span{display:flex;width:3.5rem;height:3.5rem;align-items:center;justify-content:center;margin:0 auto 1.5rem;border-radius:50%;background:#fbedE7;color:var(--orange);font-size:1.5rem;box-shadow:0 0 0 .25rem #fff;position:relative;z-index:1}
.steps h3{font-size:1.25rem;margin:0 0 .75rem}
.steps p{max-width:20rem;color:var(--light-gray);margin:auto}
.integrity{background:var(--navy);color:#fff;padding:4rem 0}
.integrity-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.integrity h2{font-size:1.875rem;margin:0 0 1.5rem}
.integrity-grid>div:first-child p{font-size:1.125rem}
.principles{display:grid;gap:1.5rem}
.principles article{background:#ffffff1a;border-radius:.5rem;padding:1.5rem}
.principles h3{font-size:1.25rem;margin:0 0 .5rem}
.principles p{margin:0}
.cta{padding:4rem 0;text-align:center}
.cta p{font-size:1.125rem;color:var(--gray);margin:0 0 2rem}
.cta a,.not-found a{display:inline-block;color:#fff;background:var(--orange);border-radius:.5rem;padding:1rem 2rem;transition:filter .2s}
.cta a:hover,.cta a:focus-visible,.not-found a:hover{filter:brightness(.92)}
.story-dialog{width:min(90%,28rem);border:0;border-radius:.5rem;padding:1.5rem;box-shadow:0 20px 25px -5px #00000033;overflow:visible}
.story-dialog::backdrop{background:#0003;backdrop-filter:blur(2px)}
.dialog-close{position:absolute;right:1rem;top:.75rem;border:0;background:none;color:#6b7280;font-size:1.75rem;cursor:pointer}
.story-dialog h2{font-size:1.25rem;margin:0;padding-right:2rem}
.dialog-author,.dialog-pages{color:#4b5563;font-size:.875rem}
.dialog-author{margin:.25rem 0 0}.dialog-blurb{margin:1rem 0 0}.dialog-pages{margin:.5rem 0 0}
.dialog-preview{display:inline-block;color:var(--orange);margin-top:1rem}.dialog-preview:hover{text-decoration:underline}
.not-found{min-height:100vh;display:grid;place-items:center;text-align:center;background:var(--cream);padding:2rem}.not-found h1{font-size:3rem}.not-found p{margin-bottom:2rem}
@media(max-width:1023px){.story-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.reader-thumbs{gap:.5rem}.reader-thumbs img{width:23%;height:auto;aspect-ratio:3/5}}
@media(max-width:767px){.container{width:min(100% - 2rem,80rem)}.hero-grid,.integrity-grid{grid-template-columns:1fr}.hero-grid{padding-block:3rem}.story-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.steps{grid-template-columns:1fr;gap:3rem}.steps:before{display:none}h1{font-size:2.5rem}.nav-links{gap:1rem;font-size:.9rem}.quotes{grid-template-columns:1fr}.quotes blockquote:last-child{grid-column:auto}}
@media(max-width:420px){.nav{align-items:flex-start}.nav-links{flex-direction:column;gap:.25rem;text-align:right}.hero-photo{height:330px}.story-grid{gap:1rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}