/* Fonts are loaded via in each page
(an @import here would chain-block rendering behind this file). */
/* ============================================================
LEGIANO JEUX — "Brutal Ledger"
Concrete-and-gold daylight brutalism. Full-bleed strips,
hard 2px ink outlines, 6px offset gold shadow (no blur).
============================================================ */
:root{
/* palette */
--bg-main:#F2F0EA;
--bg-alt:#E8E4DA;
--bg-card:#FBFAF6;
--accent:#C8A24C;
--accent-2:#2A1E7A;
--text-main:#0D0C0C;
--text-muted:#4A4640;
--border:#0D0C0C;
/* derived */
--ink-soft:rgba(13,12,12,.12);
--glass:rgba(255,255,255,.55);
--wash:linear-gradient(135deg,rgba(200,162,76,.55) 0%,rgba(42,30,122,.45) 100%);
/* type */
--font-head:'Zilla Slab',Georgia,'Times New Roman',serif;
--font-body:'Jost',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
/* geometry — SHAPE: moderate */
--r:8px;
--r-sm:6px;
--hard:2px solid var(--border);
--pop:6px 6px 0 0 var(--accent);
--pop-ink:6px 6px 0 0 var(--border);
/* rhythm — DENSITY: airy */
--wrap:1300px;
--gutter:clamp(1.15rem,4vw,2.5rem);
--sec-pad:clamp(3.75rem,7vw,6.5rem);
--stack:clamp(1.15rem,2.4vw,1.9rem);
--rail-w:0px;
}
/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
overflow-x:hidden;
background:var(--bg-main);
color:var(--text-main);
font-family:var(--font-body);
font-size:clamp(1rem,.96rem + .2vw,1.09rem);
font-weight:400;
line-height:1.72;
letter-spacing:.005em;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
p{margin:0 0 1.05em;overflow-wrap:break-word}
ul,ol{margin:0 0 1.15em;padding-inline-start:1.35em}
li{margin-bottom:.5em}
strong{font-weight:600}
:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}
/* sticky header compensation for cross-page anchors (/page/#id) — the JS
smooth-scroll only handles same-page clicks */
:where(main) :where([id]),main[id]{scroll-margin-top:88px}
/* the skip link moves focus here; the visible link already gave the feedback */
main[tabindex="-1"]:focus{outline:none}
h1,h2,h3,h4,h5{
font-family:var(--font-head);
font-weight:700;
line-height:1.08;
letter-spacing:-.015em;
margin:0 0 .55em;
text-wrap:balance;
}
h1{font-size:clamp(2.1rem,1.4rem + 3.4vw,3.6rem)}
h2{font-size:clamp(1.65rem,1.2rem + 2.1vw,2.55rem)}
h3{font-size:clamp(1.22rem,1.05rem + .8vw,1.6rem)}
h4{font-size:clamp(1.05rem,1rem + .35vw,1.22rem)}
/* ---------- container & strips (LAYOUT: strips) ---------- */
.frg-container{
width:100%;
max-width:var(--wrap);
margin-inline:auto;
padding-inline:var(--gutter);
min-width:0;
}
.frg-section{
position:relative;
padding-block:var(--sec-pad);
background:var(--bg-main);
border-top:var(--hard);
}
.frg-section--alt{background:var(--bg-alt)}
.frg-section--ink{background:var(--accent-2);color:#F4F2EC;border-top:var(--hard)}
.frg-section--ink h2,.frg-section--ink h3{color:#fff}
.frg-section--ink a{color:var(--accent)}
.frg-section:first-of-type{border-top:0}
/* oversized ordinal stamp bleeding off the left edge */
.frg-section[data-ord]::before{
content:attr(data-ord);
position:absolute;
inset-block-start:-.14em;
inset-inline-start:-.06em;
font-family:var(--font-head);
font-weight:700;
font-size:clamp(7rem,17vw,15rem);
line-height:.78;
color:var(--accent-2);
opacity:.07;
pointer-events:none;
user-select:none;
z-index:0;
}
.frg-section > .frg-container{position:relative;z-index:1}
/* below 600px the 17vw clamp bottoms out at 7rem while --sec-pad is only 60px,
so the stamp sat straight on the eyebrow and the H2 */
@media (max-width:599px){
.frg-section[data-ord]::before{font-size:clamp(4.5rem,15vw,7rem);inset-block-start:0;opacity:.05}
}
.frg-eyebrow{
display:inline-block;
font-family:var(--font-body);
font-weight:600;
font-size:.735rem;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--accent-2);
margin:0 0 .9rem;
padding-bottom:.3rem;
border-bottom:2px solid var(--accent);
}
.frg-lead{font-size:clamp(1.08rem,1rem + .45vw,1.28rem);color:var(--text-muted);line-height:1.62}
.frg-muted{color:var(--text-muted)}
.frg-fine{font-size:.85rem;line-height:1.6;color:var(--text-muted)}
/* ---------- buttons ---------- */
.frg-btn{
display:inline-block;
font-family:var(--font-head);
font-weight:700;
font-size:.95rem;
letter-spacing:.06em;
text-transform:uppercase;
text-decoration:none;
padding:.85rem 1.6rem;
border:var(--hard);
border-radius:var(--r-sm);
background:var(--accent);
color:var(--text-main);
box-shadow:var(--pop-ink);
transition:transform .12s ease,box-shadow .12s ease;
cursor:pointer;
}
.frg-btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 0 var(--border);text-decoration:none}
.frg-btn:active{transform:translate(6px,6px);box-shadow:0 0 0 0 var(--border)}
.frg-btn--ghost{
background:transparent;
color:var(--text-main);
box-shadow:none;
}
.frg-btn--ghost:hover{background:var(--bg-card);transform:none;box-shadow:var(--pop-ink)}
.frg-btn--ink{background:var(--accent-2);color:#fff;box-shadow:6px 6px 0 0 var(--accent)}
.frg-btn--ink:hover{box-shadow:8px 8px 0 0 var(--accent)}
.frg-btn--lg{font-size:1.05rem;padding:1.05rem 2.1rem}
.frg-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
/* ---------- icons ---------- */
.frg-icon{
width:1.5em;height:1.5em;
display:inline-block;
vertical-align:middle;
flex-shrink:0;
stroke:currentColor;
fill:none;
color:var(--accent-2);
}
.frg-icon--lg{width:2rem;height:2rem}
/* ============================================================
HEADER
============================================================ */
.frg-header{
position:sticky;
top:0;
z-index:900;
background:var(--bg-card);
border-bottom:var(--hard);
}
.frg-header__bar{
max-width:var(--wrap);
margin-inline:auto;
padding:.7rem var(--gutter);
display:flex;
align-items:center;
gap:clamp(.6rem,2vw,2rem);
min-width:0;
}
.frg-logo{
display:flex;
align-items:center;
flex-shrink:0;
text-decoration:none;
font-family:var(--font-head);
font-weight:700;
font-size:1.3rem;
letter-spacing:-.02em;
color:var(--text-main);
min-width:0;
}
.frg-logo:hover{text-decoration:none}
.frg-logo__mark{
display:inline-block;
background:var(--accent-2);
color:#fff;
padding:.28rem .55rem;
border-radius:var(--r-sm);
border:var(--hard);
margin-inline-end:.5rem;
}
.frg-logo__img{
display:block;
height:40px;
width:auto;
object-fit:contain;
}
/* nav */
.frg-nav{
display:flex;
align-items:center;
gap:clamp(.4rem,1.4vw,1.4rem);
margin-inline-start:auto;
min-width:0;
}
.frg-nav ul{
display:flex;
align-items:center;
gap:clamp(.3rem,1.2vw,1.15rem);
list-style:none;
margin:0;
padding:0;
}
.frg-nav li{margin:0}
.frg-nav a:not(.frg-btn){
display:block;
font-family:var(--font-body);
font-weight:500;
font-size:.94rem;
letter-spacing:.01em;
color:var(--text-main);
text-decoration:none;
padding:.5rem .3rem;
border-bottom:2px solid transparent;
white-space:nowrap;
}
.frg-nav a:not(.frg-btn):hover,
.frg-nav a:not(.frg-btn):focus-visible{
border-bottom-color:var(--accent);
color:var(--accent-2);
text-decoration:none;
}
.frg-nav a:not(.frg-btn)[aria-current="page"]:not(.frg-btn){border-bottom-color:var(--accent-2)}
/* header CTA — single, standalone, outside