/* RAMA · base + components. Uses tokens only (no raw colors). */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-he);font-size:var(--fs-md);line-height:var(--lh);min-height:100dvh;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{line-height:1.15;margin:0 0 var(--space-4);font-weight:700;letter-spacing:-.005em}
h1{font-size:var(--fs-xl)} h2{font-size:var(--fs-lg)} h3{font-size:var(--fs-md)}
p{margin:0 0 var(--space-4)}
.latin{font-family:var(--font-display-latin);direction:ltr;unicode-bidi:isolate}
.script{font-family:var(--font-script);font-size:var(--fs-script);line-height:1;color:var(--brand);direction:ltr;unicode-bidi:isolate;font-weight:400}
.muted{color:var(--text-muted)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* focus + skip link (IS 5568 / WCAG 2.0 AA) */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
[tabindex="-1"]:focus{outline:none}
.skip{position:absolute;inset-inline-start:var(--space-3);top:-60px;background:var(--c-tan);color:var(--c-charcoal);padding:var(--space-2) var(--space-4);z-index:100;text-decoration:none}
.skip:focus{top:var(--space-3)}

/* ---------- layout ---------- */
.page{max-width:var(--page-max);margin:0 auto;padding:var(--space-6) 20px var(--space-7)}
.logo{width:min(200px,56vw);margin:0 auto var(--space-6)}
.logo img{width:100%;height:auto}
.center{text-align:center}
.rule{height:1px;background:var(--line);border:0;margin:var(--space-6) 0}

/* ---------- buttons ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:var(--space-3);width:100%;min-height:54px;padding:var(--space-3) var(--space-5);border-radius:var(--radius);border:1px solid var(--line-strong);background:var(--c-tan);color:var(--c-charcoal);font:inherit;font-weight:700;font-size:var(--fs-md);text-decoration:none;cursor:pointer;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.btn:active{transform:scale(.99)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn--accent{background:var(--accent);border-color:var(--accent);color:var(--c-cream)}   /* the one spot-CTA per view */
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn--quiet{background:transparent;color:var(--text);border-color:var(--line);font-weight:400}
.btn .ico{width:22px;height:22px;flex:none}
.btn .sub{display:block;font-weight:400;font-size:var(--fs-xs);opacity:.85}
.btn-stack{display:grid;gap:var(--space-3)}
.btn-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:var(--space-2)}
.link-quiet{display:inline-block;margin-top:var(--space-4);color:var(--text-muted);font-size:var(--fs-sm)}

/* ---------- frames & cards: thin tan line ---------- */
.card{background:transparent;border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-5)}
.frame{border:1px solid var(--line);padding:var(--space-6) var(--space-5);position:relative}
.tag{display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;padding:2px 10px;border:1px solid var(--line-strong);color:var(--brand)}

/* photo slot: only real RAMA photos go here */
.photo{position:relative;aspect-ratio:4/3;border:1px solid var(--line);overflow:hidden;background:var(--bg-raised);color:var(--text-muted)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo--empty{display:grid;place-items:center;text-align:center;font-size:var(--fs-xs);padding:var(--space-4)}

/* ---------- survey ---------- */
.progress{height:1px;background:var(--line);margin:var(--space-5) 0 var(--space-6);position:relative}
.progress > i{position:absolute;inset-block:-1px;inset-inline-start:0;display:block;height:3px;width:0;background:var(--c-tan);transition:width var(--dur) var(--ease)}
.step{display:none}
.step.is-active{display:block;animation:in var(--dur) var(--ease)}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.visual{display:grid;place-items:center;min-height:150px;margin-bottom:var(--space-5);border:1px solid var(--line);background:var(--bg-inverse);color:var(--text-inverse);overflow:hidden}
.choices{border:0;padding:0;margin:0 0 var(--space-5)}
.choices legend{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--space-4);padding:0}
.choice{display:flex;align-items:center;gap:var(--space-3);min-height:56px;padding:var(--space-3) var(--space-4);margin-bottom:var(--space-2);background:transparent;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.choice input{appearance:none;-webkit-appearance:none;margin:0;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);flex:none;display:grid;place-items:center;background:transparent}
.choice input::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--c-tan);transform:scale(0);transition:transform var(--dur) var(--ease)}
.choice input:checked::after{transform:scale(1)}
.choice:has(input:checked){border-color:var(--line-strong);background:color-mix(in srgb,var(--c-tan) 10%,transparent)}
.choice input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- forms ---------- */
.field{margin-bottom:var(--space-4)}
.field label{display:block;font-weight:700;font-size:var(--fs-sm);margin-bottom:var(--space-2)}
.field .hint{font-weight:400;color:var(--text-muted)}
.input{width:100%;min-height:52px;padding:var(--space-3) var(--space-4);font:inherit;color:var(--text);background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius)}
textarea.input{min-height:96px;resize:vertical}
.input:focus{border-color:var(--line-strong);outline:2px solid var(--focus);outline-offset:2px}
.input[aria-invalid="true"]{border-color:var(--danger)}
.error{color:var(--danger);font-size:var(--fs-xs);margin-top:var(--space-1);min-height:1em}
.consent{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--fs-sm);margin:var(--space-2) 0 var(--space-5)}
.consent input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--c-tan)}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- footer ---------- */
.foot{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--line);text-align:center;font-size:var(--fs-xs);color:var(--text-muted)}
.foot a{color:inherit}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-3)}
.foot button{font:inherit;color:inherit;background:none;border:0;text-decoration:underline;cursor:pointer;padding:0}

/* ---------- cookie banner ---------- */
.cookie{position:fixed;inset-inline:12px;bottom:12px;z-index:50;max-width:420px;margin:0 auto;background:var(--bg-inverse);color:var(--text-inverse);border:1px solid var(--line-strong);padding:var(--space-5);font-size:var(--fs-sm)}
.cookie[hidden]{display:none}
.cookie p{margin-bottom:var(--space-4)}
.cookie a{color:var(--c-tan)}
.cookie .btn-row .btn{min-height:46px;font-size:var(--fs-sm)}

/* ---------- live strip ---------- */
.now{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--line);color:var(--text);font-size:var(--fs-sm);margin-bottom:var(--space-5)}
.now .dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);flex:none}
.now.is-live .dot{background:var(--c-tan);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-tan) 30%,transparent)}
.now b{font-variant-numeric:tabular-nums}

/* ---------- preview bar (remove before launch: delete [data-preview-bar] blocks) ---------- */
.previewbar{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);justify-content:center;align-items:center;padding:var(--space-2) var(--space-4);background:var(--c-tan);color:var(--c-charcoal);font-size:var(--fs-xs)}
.previewbar b{letter-spacing:.06em}
.previewbar a{color:inherit;font-weight:700}