/* Détente's site: static pages for S3 + CloudFront (site/README.md). No JavaScript, cookies or analytics. */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/BricolageGrotesque-Latin.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Tring";src:url("fonts/Tring-Regular.woff2") format("woff2");font-display:swap}
:root{--bg:#0e1a24;--bg2:#15242f;--card:#1a2a36;--on:#f3efe4;--on2:#b6c4cd;--edge:rgba(255,255,255,.1);--sea:#1f7a8c;--gold:#f2c14e;
 --guild:#D85A30;--council:#378ADD;--order:#7F77DD;--display:"Bricolage Grotesque",-apple-system,system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#24425a,var(--bg) 60%) fixed,var(--bg);color:var(--on);font:17px/1.55 -apple-system,system-ui,sans-serif}
a{color:#8fd3df}a:hover{color:#bfe7ee}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header.top{display:flex;align-items:center;gap:12px;padding:18px 0}
header.top img{width:40px;height:40px;border-radius:10px}
header.top b{font:700 20px var(--display)}
header.top nav{margin-left:auto;display:flex;gap:18px;font-size:15px}
header.top nav a{color:var(--on2);text-decoration:none}header.top nav a:hover{color:var(--on)}
.hero{text-align:center;padding:32px 0 48px}.hero .mark{margin:0 auto}.hero .lead{margin:0 auto}
.mark{display:block;width:min(100%,520px);height:auto}
.tag{font:600 26px var(--display);margin:6px 0 18px;color:var(--on)}
.lead{font-size:19px;color:var(--on2);max-width:34em}
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:14px 22px;border-radius:16px;background:linear-gradient(#ffe8a0,#e9a92b);color:#3a2400;font:800 17px var(--display);text-decoration:none}
.cta small{font-weight:600;opacity:.8}
/* screenshots keep their ratio (width and height attributes give the ratio; height:auto keeps it) */
.ipad{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:22px;border:10px solid #05090c;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.hero-shot{max-width:960px;margin:40px auto 0}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:8px 0 48px}
.f{background:var(--card);border:1px solid var(--edge);border-radius:20px;padding:20px}
.f h3{font:700 19px var(--display);margin:0 0 6px}.f p{margin:0;color:var(--on2);font-size:15px}
.dots{display:flex;gap:6px;margin-bottom:12px}.dots i{width:14px;height:14px;border-radius:50%;display:block}.dots .guild{background:var(--guild)}.dots .council{background:var(--council)}.dots .order{background:var(--order)}
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;padding:0 0 64px}
.shots figure{margin:0}.shots .ipad{border-width:7px;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.shots figcaption{font:600 16px var(--display);color:var(--on);margin-top:12px;text-align:center}
/* the theme carousel: a CSS cross-fade (the site runs no scripts); with Reduce Motion it is a strip you swipe */
.themes{padding:8px 0 56px;text-align:center}.themes h2{font:700 30px var(--display);margin:0 0 6px}.themes .sub{color:var(--on2);margin:0 0 22px}
.carousel{position:relative;max-width:960px;margin:0 auto;aspect-ratio:4/3;border-radius:22px;border:10px solid #05090c;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55);background:#05090c}
.carousel figure{position:absolute;inset:0;margin:0;opacity:0;animation:fade 36s infinite}
/* 6 s a slide; every delay starts 1.08 s early (the 3% fade-in), so the page opens on a full first slide */
.carousel figure:nth-child(1){animation-delay:-1.08s}.carousel figure:nth-child(2){animation-delay:4.92s}.carousel figure:nth-child(3){animation-delay:10.92s}
.carousel figure:nth-child(4){animation-delay:16.92s}.carousel figure:nth-child(5){animation-delay:22.92s}.carousel figure:nth-child(6){animation-delay:28.92s}
.carousel img{width:100%;height:100%;object-fit:cover;display:block}
.carousel figcaption{position:absolute;left:14px;top:14px;padding:8px 14px;border-radius:12px;background:rgba(5,9,12,.72);font-size:15px;color:var(--on2);text-align:left}
.carousel figcaption b{font:700 17px var(--display);color:var(--on);margin-right:6px}
@keyframes fade{0%{opacity:0}3%{opacity:1}16.7%{opacity:1}19.7%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;aspect-ratio:auto}
 .carousel figure{position:relative;flex:0 0 100%;opacity:1;animation:none;scroll-snap-align:start;aspect-ratio:4/3}}
.page{max-width:760px;padding:20px 0 64px}
.page h1{font:700 34px var(--display);margin:10px 0 6px}.page h2{font:700 22px var(--display);margin:30px 0 8px}
.page p,.page li{color:var(--on2)}.page strong{color:var(--on)}
.updated{font-size:14px;color:var(--on2)}
.note{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:14px 16px;font-size:15px;color:var(--on2)}
footer{border-top:1px solid var(--edge);padding:24px 0 40px;font-size:14px;color:var(--on2)}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}footer a{color:var(--on2)}footer span{margin-left:auto}
@media (max-width:800px){.hero{grid-template-columns:1fr;padding-top:16px;text-align:center}.lead{margin:0 auto}.mark{margin:0 auto}
 .features,.shots{grid-template-columns:1fr}.ipad,.carousel{border-width:6px;border-radius:16px}.carousel figcaption{left:8px;top:8px;padding:4px 10px}.carousel figcaption span{display:none}header.top nav{gap:12px;font-size:14px}footer span{margin-left:0}}
@media (prefers-reduced-motion:no-preference){.cta{transition:transform .15s}.cta:hover{transform:translateY(-2px)}}
.summary{background:rgba(233,169,43,.08);border-left:3px solid var(--gold,#e9a92b);padding:12px 16px;border-radius:8px;margin:14px 0}