/* ============================================================
our-story - page styles
Loaded after site.css, so anything here wins for this page
only. Rules identical to site.css were dropped, so the
shared sheet is the one place to change a shared look.
============================================================ */

.story-hero{
position:relative;
text-align:center;
padding:70px 24px 60px;
background:
radial-gradient(ellipse 60% 55% at 50% 40%, rgba(108,63,166,0.3), transparent 70%),
var(--void);
}
.story-hero h1{
font-family:'Pirata One', serif;
font-weight:400;
font-size:clamp(42px, 7vw, 78px);
line-height:1;
text-transform:uppercase;
/* No colour or text-shadow here on purpose. The chrome-lettering rule
   in site.css paints every hero heading, and once the text is
   transparent a text-shadow shows straight through the letters - it
   has to be a drop-shadow on the rendered pixels, which is what the
   shared rule does. Setting either here just cancelled that. */
}
.story-hero .eyebrow{
font-family:'Cinzel', serif;
font-size:12px;
letter-spacing:0.35em;
color:var(--lilac);
margin-bottom:18px;
}
.story-body{
max-width:680px;
margin:0 auto;
padding:10px 24px 20px;
}
.story-body p{
font-size:16px;
line-height:1.9;
color:rgba(231,228,236,0.72);
margin-bottom:22px;
}
.story-body p.lead{
font-size:18px;
color:rgba(231,228,236,0.85);
}
.pull{
text-align:center;
font-family:'Pirata One', serif;
font-size:clamp(24px, 4vw, 34px);
line-height:1.35;
color:var(--lilac);
padding:44px 24px;
max-width:760px;
margin:0 auto;
text-shadow:0 0 22px rgba(108,63,166,0.5);
}
.values{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:26px;
max-width:1000px;
margin:20px auto 0;
padding:0 40px;
}
@media (max-width:800px){ .values{grid-template-columns:1fr; padding:0 24px;} }
.value{
background:linear-gradient(180deg, var(--panel), var(--void));
border:1px solid rgba(201,168,232,0.2);
padding:32px 24px 28px;
text-align:center;
}
.value .crest{
font-family:'Pirata One', serif;
font-size:26px;
color:var(--royal);
margin-bottom:12px;
}
.value h3{
font-family:'Cinzel', serif;
font-size:13px;
letter-spacing:0.12em;
margin-bottom:11px;
}
.value p{
font-size:13px;
line-height:1.7;
color:rgba(231,228,236,0.55);
}
.story-cta{
text-align:center;
padding:60px 24px 90px;
}
.story-cta a{
display:inline-block;
font-family:'Cinzel', serif;
font-size:12px;
letter-spacing:0.2em;
color:var(--void);
background:var(--royal-run);
padding:16px 34px;
text-decoration:none;
border:1px solid var(--royal);
margin:0 8px 12px;
}
.story-cta a.secondary{
background:transparent;
color:var(--lilac);
}
.story-cta a.secondary:hover{background:var(--royal); color:var(--chrome);}