/* Yasmina Cafe brand (from Yasmina Cafe_Brand_Guidelines_2025.pdf)
   Primary: #382318 (brown, PANTONE 4975 C), #ae6f29 (gold, PANTONE 7572 C), #F5E4D1 (cream)
   Secondary: #8A181A (red), #3D6A3B (green), #D4E9E2 (mint), #E3E1DD (light grey)
   Type: Optima (headings), Creato Display (body). */
@font-face{font-family:"Optima";src:url(/static/assets/Optima-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Optima";src:url(/static/assets/Optima-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Creato Display";src:url(/static/assets/CreatoDisplay-Regular.otf) format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Creato Display";src:url(/static/assets/CreatoDisplay-Bold.otf) format("opentype");font-weight:700;font-display:swap}
:root{--brown:#382318;--gold:#ae6f29;--cream:#F5E4D1;--red:#8A181A;--green:#3D6A3B;--mint:#D4E9E2;--grey:#E3E1DD}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--brown);font:18px/1.55 "Creato Display",Arial,sans-serif}
h1,h2,h3{font-family:"Optima","Optima Nova",Candara,"Segoe UI",sans-serif;line-height:1.2;color:var(--brown)}
h1{font-size:34px;margin:0 0 14px}h2{font-size:27px;margin:0 0 12px}h3{font-size:20px;margin:0 0 8px}
p{margin:12px 0}
a{color:var(--brown)}
/* Decorative pattern bands: real brand patterns, never behind text or the logo */
.band{height:56px;background-size:auto 112px;background-repeat:repeat-x;background-position:center}
.band-brown{background-image:url(/static/assets/pattern-brown.png)}
.band-gold{background-image:url(/static/assets/pattern-gold.png)}
.band-green{background-image:url(/static/assets/pattern-green.png)}
.band-mint{background-image:url(/static/assets/pattern-mint.png)}
.band-cream{background-image:url(/static/assets/pattern-cream.png)}
/* Logo: aspect ratio preserved (height auto); clear space = height of the 'Y' (~30% of logo height) */
header.site{background:#fff;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding:0 16px}
.logo-wrap{padding:24px}
.logo{display:block;width:220px;height:auto;min-width:112px}
.kicker{margin:0 24px 0 0;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);font-weight:700}
.wrap{max-width:760px;margin:0 auto;padding:16px 12px 32px}.wrap.wide{max-width:1100px}
.card{background:#fff;padding:26px 24px;margin:18px 0;border-left:7px solid var(--gold)}
.card.green{border-color:var(--green)}.card.mint{background:var(--mint);border-color:var(--green)}
.notice{background:var(--mint);border-left:5px solid var(--green);padding:14px 16px;margin:16px 0;font-size:16px}
button,.button{font:inherit;font-weight:700;background:var(--green);color:#fff;border:0;padding:14px 22px;min-height:48px;cursor:pointer;display:inline-block;text-decoration:none;border-radius:2px}
button:hover,.button:hover{background:var(--brown)}
button.ghost,.button.ghost{background:transparent;color:var(--brown);border:2px solid var(--brown)}
button.small{padding:8px 12px;min-height:38px;font-size:15px}
button.danger{background:var(--red)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
input[type=text],input[type=password],input:not([type]){font:inherit;width:100%;padding:12px;border:1px solid var(--brown);background:#fff;color:var(--brown);min-height:48px}
input.code-in{text-transform:uppercase;letter-spacing:.12em;font-size:22px}
.stack>*{display:block;margin:10px 0}.row{display:flex;gap:10px;flex-wrap:wrap}.row input{flex:1 1 220px;width:auto}
.inline{display:inline}
fieldset{border:0;border-top:1px solid var(--grey);padding:16px 0 4px;margin:8px 0}
legend{font-family:"Optima",sans-serif;font-weight:700;font-size:20px;padding-top:14px;line-height:1.3}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px;margin:10px 0;background:var(--cream);border-left:4px solid transparent;cursor:pointer}
.opt input{width:22px;height:22px;flex:0 0 22px;margin:2px 0 0;accent-color:var(--green)}
.opt:has(input:checked){background:var(--mint);border-left-color:var(--green)}
.score{font-family:"Optima",sans-serif;font-weight:700;font-size:56px;color:var(--green);margin:4px 0}
.review{background:var(--cream);padding:16px 18px;margin:14px 0;border-left:5px solid var(--green)}
.review.wrong{border-left-color:var(--red)}
.verdict{font-weight:700}.review.wrong .verdict{color:var(--red)}.review .verdict{color:var(--green)}
.error{color:var(--red);font-weight:700}
.muted{font-size:15px;opacity:.85}
.history{padding-left:20px}.history li{margin:6px 0}
.actions form{display:inline-block;margin:2px}
.tag{display:inline-block;font-size:13px;padding:1px 6px;background:var(--grey);border-radius:2px}
.answers{margin:8px 0;padding-left:18px;font-size:15px}.answers li.no .tag{background:#f3d3d3}.answers li.ok .tag{background:var(--mint)}
.code{font-family:ui-monospace,Menlo,monospace;font-size:32px;letter-spacing:.12em;background:var(--cream);padding:12px 16px;display:inline-block}
table.rt{width:100%;border-collapse:collapse;font-size:16px}table.rt th,table.rt td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--grey);vertical-align:top}
table.rt th{font-family:"Optima",sans-serif}
.sr{position:absolute;left:-9999px}
.site-foot{text-align:center;font-size:14px;padding:0 12px 24px}
[hidden]{display:none!important}
@media (max-width:600px){
 body{font-size:17px}h1{font-size:29px}h2{font-size:24px}
 header.site{padding:0 4px}.logo-wrap{padding:20px}.logo{width:180px}.kicker{margin:0 20px 14px}
 .card{padding:20px 16px;margin:14px 0}
 table.rt thead{display:none}table.rt tr{display:block;border-bottom:2px solid var(--grey);padding:8px 0}
 table.rt td{display:block;border:0;padding:4px 0}table.rt td:before{content:attr(data-l) ": ";font-weight:700}
 .band{height:44px;background-size:auto 88px}
}