/* Casa Vini Events design system.
   Tokens first, then components, then screens. No arbitrary sizes on individual components: use a token.
   Brand: wine #7A3030, gold #D0B676, cream #FFFBF4, green #495B49, ink #282828, teal #80BFB6, stone #8a7d6c, sand #F6EFE4.
   Plus Jakarta Sans (self-hosted, OFL). Public page: cream card on a wine header. No alarm colours anywhere. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(/static/fonts/PlusJakartaSans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(/static/fonts/PlusJakartaSans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
 --wine:#7A3030;--gold:#D0B676;--cream:#FFFBF4;--green:#495B49;--ink:#282828;--teal:#80BFB6;--stone:#8a7d6c;
 --sand:#F6EFE4;--gold-ink:#7a5f1a;--mute:#6b6256;--on-wine:#e8d9c8;--line:rgba(40,40,40,.1);--line-strong:rgba(40,40,40,.28);
 --f:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
 /* spacing, 4px base */
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;
 /* type scale */
 --t-display:32px;--t-stat:24px;--t-title:24px;--t-section:18px;--t-card:16px;--t-body:14px;--t-small:12px;--t-micro:11px;
 /* shape */
 --r-card:16px;--r-ctl:12px;--r-pill:999px;--h-ctl:44px;--h-tab:44px;--h-chip:28px;
 --hero-bg:radial-gradient(circle at 78% 30%,rgba(208,182,118,.5),transparent 42%),radial-gradient(circle at 15% 90%,rgba(73,91,73,.65),transparent 50%),linear-gradient(165deg,#2a1416 0%,var(--wine) 55%,#8b5a3c 100%);
 --shadow:0 1px 2px rgba(40,40,40,.05),0 8px 24px rgba(40,40,40,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 var(--t-body)/1.5 var(--f)}
h1,h2,h3,.ref{font-family:var(--f);margin:0;letter-spacing:-.01em}
h1{font-size:var(--t-title);line-height:1.25;font-weight:700}
h2{font-size:var(--t-section);line-height:1.3;font-weight:600}
h3{font-size:var(--t-card);line-height:1.35;font-weight:600}
p{margin:0}
a{color:inherit}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:var(--t-micro);font-weight:600;margin:0}
small,.small,.help{font-size:var(--t-small);line-height:1.5}
.help{margin-top:var(--s3)}
.hidden{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- forms ---------- */
.stack{display:flex;flex-direction:column;gap:var(--s4)}.stack.row{flex-direction:row;flex-wrap:wrap;align-items:flex-end}
.field,label{display:flex;flex-direction:column;gap:var(--s2);font-size:var(--t-body);font-weight:500}
label.check{flex-direction:row;align-items:center;gap:var(--s3);font-weight:400;min-height:var(--h-ctl)}
input[type=checkbox],input[type=radio]{accent-color:var(--wine);width:20px;height:20px;margin:0;flex:none}
input,select,textarea{font:400 var(--t-body)/1.4 var(--f);padding:var(--s3) var(--s4);border-radius:var(--r-ctl);border:1px solid var(--line-strong);background:#fff;color:var(--ink);width:100%}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select{min-height:var(--h-ctl)}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,button:focus,a:focus-visible,textarea:focus{outline:2px solid var(--wine);outline-offset:2px}
.short{width:96px}
.inline{display:inline-flex;gap:var(--s2);align-items:flex-end;margin:0 var(--s3) var(--s3) 0}
.inline input,.stack.row input{width:auto}
.actions{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--h-ctl);padding:0 var(--s4);background:var(--wine);color:var(--cream);border:1px solid var(--wine);border-radius:var(--r-ctl);font:600 var(--t-body)/1 var(--f);cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--green);border-color:var(--green)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn.block{display:flex;width:100%}
button.link{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;min-height:var(--h-ctl);padding:0 var(--s2)}
.backlink{display:inline-flex;align-items:center;min-height:var(--h-ctl);font-weight:500;text-decoration:none;color:var(--wine)}
.backlink:hover{text-decoration:underline}

/* ---------- tables, lists ---------- */
table{width:100%;border-collapse:collapse;font-size:var(--t-body)}
th,td{text-align:left;padding:var(--s3) var(--s2);vertical-align:top}
th{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.12em;font-weight:600}
dl{display:grid;grid-template-columns:max-content 1fr;gap:var(--s2) var(--s6);margin:0}dd{margin:0}
.draft{white-space:pre-wrap;padding:var(--s3);border-radius:var(--r-ctl);font-family:inherit}
.notice{padding:var(--s3) var(--s4);border-radius:var(--r-ctl);border-left:6px solid var(--gold);margin:var(--s4) 0}
.notice.ok{border-left-color:var(--green)}
.qr{width:224px;max-width:100%;margin:var(--s4) auto;padding:var(--s2);background:#fff;border:1px solid var(--line);border-radius:var(--r-ctl)}.qr svg{display:block;width:100%;height:auto}
.foot{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-align:center;font-size:var(--t-small);padding:var(--s8) var(--s4) var(--s12)}
.footlogo{height:32px;width:auto;display:block}.footplace{font:500 var(--t-micro)/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.brand{display:flex;align-items:center;min-height:var(--h-ctl);line-height:0}.brand img{height:40px;margin:0;width:auto;max-width:100%;display:block}

/* ---------- public: cream card on a wine header ---------- */
body.public{background:var(--cream);color:var(--ink)}
body.public .top{background:var(--green);color:var(--cream);padding:var(--s1) var(--s4);display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--gold)}
body.public h1,body.public h2,body.public h3,body.public .ref{color:var(--wine)}
body.public main{max-width:640px;margin:0 auto;padding:var(--s4)}
body.public .card{background:#fff;border:1px solid var(--gold);border-radius:var(--r-card);padding:var(--s4);margin:var(--s4) 0}
body.public .eyebrow{color:var(--green)}body.public .small{color:#555}
body.public .when{font-weight:500}.price{font-size:var(--t-section);font-weight:600;color:var(--green)}
body.public .status{font-size:var(--t-card);color:var(--green);font-weight:600}.ref{font-size:var(--t-stat);font-weight:700;letter-spacing:.04em}
body.public .art{width:100%;height:auto;border-radius:var(--r-ctl);margin-bottom:var(--s4)}
body.public .notice{border:1px solid var(--wine);background:var(--cream);color:var(--wine)}
body.public th,body.public dt{color:var(--green)}
body.public .foot{color:#6b6b6b}

/* ---------- staff: warm sand ---------- */
body.staff{color:var(--ink);background:var(--sand);min-height:100vh}
body.staff .top{display:flex;justify-content:space-between;align-items:center;padding:var(--s1) var(--s4);background:var(--green);color:var(--cream);border-bottom:3px solid var(--gold)}
body.staff .top .who{font-size:var(--t-small);color:var(--on-wine)}body.staff .top button.link{color:var(--cream)}
body.staff main{max-width:1120px;margin:0 auto;padding:var(--s4) var(--s4) 112px}
body.staff h1,body.staff h2{color:var(--ink)}
body.staff h3{margin-top:var(--s6)}
body.staff .eyebrow{color:var(--gold-ink)}
body.staff .hero .eyebrow,body.staff .hero h1,body.staff .cardbtn{color:var(--cream)}
body.staff .hero .who,body.staff .hero .who small{color:var(--cream)}
body.staff .small,body.staff .help,body.staff dt,body.staff th{color:var(--mute)}
body.staff .foot{color:var(--mute)}
.card,.glass{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s4);margin:var(--s4) 0;box-shadow:var(--shadow)}
.card>h2{margin-bottom:var(--s4)}
.card.narrow{max-width:560px;margin:var(--s4) auto}
.narrowhead{max-width:560px;margin:var(--s8) auto 0}
body.staff th,body.staff td{border-bottom:1px solid var(--line)}
body.staff input::placeholder{color:var(--mute)}
body.staff .notice{background:rgba(208,182,118,.2);color:var(--ink)}
body.staff .draft{background:rgba(40,40,40,.04);border:1px solid var(--line)}
body.staff .btn.ghost{color:var(--wine)}
body.staff .btn.ghost:hover{background:rgba(122,48,48,.08);border-color:var(--wine)}
.row2{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);flex-wrap:wrap}
.pagehead{margin:var(--s2) 0 var(--s4)}.pagehead .eyebrow{margin-bottom:var(--s1)}
:is(body.staff,body.public) .pagehead{background:radial-gradient(circle at 94% 18%,rgba(208,182,118,.28),transparent 38%),linear-gradient(165deg,#2a1416 0%,var(--wine) 62%,#7a4a38 100%);border-radius:var(--r-card);padding:var(--s6) var(--s6);box-shadow:0 14px 30px rgba(55,22,22,.28)}
:is(body.staff,body.public) .pagehead h1{color:var(--cream)}
:is(body.staff,body.public) .pagehead p,:is(body.staff,body.public) .pagehead .small{color:var(--cream)}:is(body.staff,body.public) .pagehead .eyebrow{color:var(--gold)}
:is(body.staff,body.public) .pagehead .btn{background:var(--gold);color:var(--ink);border-color:var(--gold)}
:is(body.staff,body.public) .pagehead .btn.ghost{background:transparent;color:var(--cream);border-color:rgba(255,251,244,.6)}
:is(body.staff,body.public) .pagehead :focus,:is(body.staff,body.public) .pagehead :focus-visible{outline-color:var(--cream)}
:is(body.staff,body.public) .pagehead .btn:not(.ghost):hover{background:var(--cream);border-color:var(--cream)}:is(body.staff,body.public) .pagehead .btn.ghost:hover{background:rgba(255,251,244,.12);border-color:var(--cream)}
.section{margin-top:var(--s8)}
.gap-top{margin-top:var(--s3)}.more{margin-top:var(--s3)}.formgap{margin-top:var(--s3)}.left{text-align:left}
summary{min-height:var(--h-ctl);display:flex;align-items:center;cursor:pointer}

/* ---------- profile card (guest) ---------- */
.profile{display:flex;flex-direction:column;gap:var(--s4)}
.profile .ident{display:flex;align-items:center;gap:var(--s4)}
.profile .ident .avatar{width:56px;height:56px;font-size:var(--t-card)}
.profile .ident h1{overflow-wrap:anywhere}
.profile .phone{font-size:var(--t-body);color:var(--mute);margin-top:var(--s1)}
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}.badges .chip{margin:0}
.meta{display:block;border-top:1px solid var(--line);margin:0}
.meta>div{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:var(--h-ctl);border-bottom:1px solid var(--line)}
.meta>div:last-child{border-bottom:0}
.meta dt{font-size:var(--t-body);white-space:nowrap}.meta dd{font-weight:600;text-align:right}

/* group rows (one reusable pattern) */
.rows{display:flex;flex-direction:column}
.grouprow{display:flex;flex-direction:row;align-items:center;gap:var(--s3);min-height:var(--h-ctl);padding:var(--s1) 0;border-bottom:1px solid var(--line);font-weight:400}
.grouprow:last-of-type{border-bottom:0}
.grouprow .chip{min-width:96px;justify-content:center;margin:0}

.inv{padding:var(--s3) 0 var(--s2);border-top:1px solid var(--line)}.inv:first-child{border-top:0}.inv small{display:block;margin-top:var(--s1);color:var(--mute);font-size:var(--t-small)}
.invact{flex-direction:row;flex-wrap:wrap;margin-top:var(--s3)}.invact>*{flex:1 1 auto;min-width:140px}.invact .btn,.invact form{width:100%;margin:0}.inv+.draft{margin:var(--s2) 0 var(--s3);overflow-wrap:anywhere;font-size:var(--t-small)}
/* hero (home) */
.hero .supplier{position:absolute;top:var(--s6);right:var(--s6);width:auto;height:64px;opacity:.95}
.hero .edition{font:600 var(--t-section)/1.3 var(--f);color:var(--gold);margin-top:var(--s1)}
.hero .night{margin-top:var(--s4)}.hero .night summary{display:flex;align-items:center;justify-content:space-between;min-height:var(--h-ctl);cursor:pointer;list-style:none;font:600 var(--t-body)/1 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border-top:1px solid rgba(255,251,244,.22)}
.hero .night summary::-webkit-details-marker{display:none}.hero .night summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .15s}
.hero .night[open] summary::after{transform:rotate(-135deg)}
.hero .nightbody{margin-top:var(--s2);padding:var(--s4) var(--s4) var(--s2);background:rgba(34,14,16,.62);border-radius:var(--r-ctl);margin-bottom:var(--s6)}.hero .nightbody .fact{margin:0 0 var(--s3);font-size:var(--t-body);color:var(--cream)}.hero .nightbody a{color:var(--gold)}
.about{white-space:pre-line;font-size:var(--t-body);line-height:1.6}.hero .about{color:var(--cream);margin-bottom:var(--s4);max-height:none}
/* partner lockup: Casa Vini (stacked) left, 'in partnership with' centred, partner logo right, same height */
.partner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s4);margin:var(--s6) 0 var(--s4);padding:var(--s6) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.partner .plogo,.partner .plogo2{height:104px;width:auto;display:block}.partner .plogo{justify-self:start}.partner .plogo2{justify-self:end}
.partner .pwith{max-width:88px;text-align:center;font:500 var(--t-micro)/1.6 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
@media (max-width:380px){.partner{gap:var(--s2)}.partner .plogo,.partner .plogo2{height:80px}.partner .pwith{max-width:64px;letter-spacing:.08em}}

.hero{position:relative;overflow:hidden;border-radius:28px;padding:var(--s6) var(--s6) 72px;margin-top:var(--s1);
 background:var(--hero-bg)}
.hero .who{display:flex;align-items:center;gap:var(--s3);color:var(--cream)}.hero .who small{display:block;font-size:var(--t-small)}
.avatar{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:600 var(--t-body) var(--f);flex:none;background:var(--c,var(--gold));color:var(--t,var(--ink))}
.hero .k{margin:var(--s6) 0 0;font-size:var(--t-small);color:var(--on-wine);max-width:240px}
.hero h1{font-size:var(--t-display);line-height:1.15;margin-top:var(--s2);max-width:280px;font-weight:700}
body.staff .hero .gold{color:var(--gold)}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:-48px var(--s2) 0;position:relative}
.cardbtn{display:flex;flex-direction:column;border-radius:var(--r-card);padding:var(--s4);min-height:144px;text-decoration:none;color:var(--cream)}
.cardbtn.green{background:linear-gradient(150deg,#5d7560,#2f3d30);box-shadow:0 14px 30px rgba(30,45,32,.45)}
.cardbtn.green .plus{width:36px;height:36px;border-radius:50%;background:var(--cream);color:var(--green);display:flex;align-items:center;justify-content:center;font:400 var(--t-stat)/1 var(--f)}
.cardbtn.green small{margin-top:var(--s2);font-size:var(--t-small);color:#f4f8f2}.cardbtn.green b{margin-top:auto;font:700 var(--t-stat)/1.2 var(--f)}.cardbtn.green span{font-size:var(--t-small);color:#f4f8f2}
.cardbtn.wine{background:linear-gradient(150deg,#915555,#371616);box-shadow:0 14px 30px rgba(55,22,22,.45);justify-content:space-around;padding:0 var(--s4)}
.cardbtn.wine a{display:flex;justify-content:space-between;align-items:center;min-height:var(--h-ctl);border-bottom:1px solid rgba(255,251,244,.16);text-decoration:none;font-size:var(--t-body);font-weight:500}
.cardbtn.wine a:last-child{border:0}.cardbtn.wine em{font-style:normal;color:var(--gold)}
.collect{display:flex;align-items:center;gap:var(--s4);background:var(--cream);color:var(--ink);border-radius:var(--r-card);padding:var(--s4);margin:var(--s4) var(--s2);box-shadow:var(--shadow)}
.collect small{display:block;color:#6b6256;font-size:var(--t-small)}.collect b{font:700 var(--t-stat)/1.2 var(--f)}.collect .ok{display:block;color:var(--green);font-size:var(--t-small)}
.collect svg{margin-left:auto}

/* rings */
.ring{display:block}.ring .bg{fill:none;stroke:rgba(40,40,40,.1)}.ring .fg{fill:none;stroke:var(--gold);stroke-linecap:round}
.ring.green .fg{stroke:var(--green)}.collect .ring .bg{stroke:#ece4d4}
.bigring{position:relative;width:176px;height:176px;margin:var(--s2) auto var(--s4)}.bigring svg{width:100%;height:100%}
.bigring div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.bigring b{font:700 40px/1 var(--f)}.bigring span{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin-top:var(--s1)}
.smallring{position:relative;width:88px;height:88px}.smallring svg{width:100%;height:100%}
.smallring div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 var(--t-card) var(--f)}

/* stat rows and tiles */
.three{display:flex;justify-content:space-around;text-align:center}
.three b,.stat b,.tiles b{display:block;font:700 var(--t-stat)/1.2 var(--f)}.three span,.stat span,.tiles span{display:block;font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:500;margin-top:var(--s1)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:var(--s3);margin:var(--s4) 0}
.tiles div{border:1px solid var(--line);border-radius:var(--r-ctl);padding:var(--s3);text-align:center;background:var(--cream);display:flex;flex-direction:column;justify-content:center;min-height:80px}
.gold{color:var(--gold-ink)}.teal{color:var(--green)}
.grid3{display:grid;grid-template-columns:1fr;gap:var(--s4)}
.grid2{display:grid;grid-template-columns:1fr;gap:var(--s4)}.grid2>.card{margin:0}
.ecard{display:block;text-decoration:none;color:var(--ink);margin:0}
.ecard h3{margin:var(--s2) 0}.ecard .strip{display:flex;justify-content:space-between;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);font-size:var(--t-small)}
.ecard .strip b{display:block;font:600 var(--t-card) var(--f)}
.ecard.new{border:1.5px dashed rgba(122,95,26,.5);background:transparent;box-shadow:none;text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:192px}

/* status badges, one component */
.tag{display:inline-flex;align-items:center;min-height:24px;font:600 var(--t-micro)/1 var(--f);letter-spacing:.08em;text-transform:uppercase;padding:0 var(--s3);border-radius:var(--r-pill);background:rgba(40,40,40,.08);color:var(--ink)}
.tag.open,.tag.confirmed{background:var(--green);color:var(--cream)}.tag.held,.tag.draft,.tag.review{background:var(--gold);color:var(--ink)}
.tag.outline{background:transparent;border:1px solid var(--mute);color:var(--mute)}

/* tabs */
.tabs{display:flex;gap:var(--s2);overflow-x:auto;margin:var(--s4) 0;padding-bottom:var(--s1)}
.tabs a{white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;min-height:var(--h-tab);font:500 var(--t-small)/1 var(--f);letter-spacing:.08em;text-transform:uppercase;padding:0 var(--s4);border-radius:var(--r-pill);border:1px solid var(--line-strong);color:var(--mute)}
.tabs a.on{background:var(--wine);color:var(--cream);border-color:var(--wine)}

/* timeline */
.tl p{margin:0;padding:var(--s3) 0 var(--s3) var(--s4);position:relative;border-bottom:1px solid var(--line);font-size:var(--t-body);font-weight:400}
.tl p:last-child{border:0}.tl p:before{content:"";position:absolute;left:0;top:19px;width:8px;height:8px;border-radius:50%;background:var(--stone)}
.tl p.ok:before{background:var(--green)}.tl p.hold:before{background:var(--gold)}.tl p.new:before{background:var(--teal)}
.tl small{display:block;color:var(--mute);font-size:var(--t-small)}
.bars{display:flex;align-items:flex-end;gap:var(--s1);height:72px}.chart rect{fill:var(--gold-ink)}.chart text{fill:var(--mute);font-size:7px}

/* group chips (one component) and guest rows */
.c-wine{--c:var(--wine);--t:#FFFBF4}.c-green{--c:#495B49;--t:#FFFBF4}.c-gold{--c:#D0B676;--t:#282828}
.c-teal{--c:#80BFB6;--t:#282828}.c-ink{--c:#282828;--t:#FFFBF4}.c-stone{--c:#6f6354;--t:#FFFBF4}
.chip{display:inline-flex;align-items:center;min-height:var(--h-chip);font:600 var(--t-micro)/1 var(--f);letter-spacing:.08em;text-transform:uppercase;padding:0 var(--s3);border-radius:var(--r-pill);background:var(--c);color:var(--t);border:1px solid var(--line);text-decoration:none;margin:0 var(--s1) var(--s1) 0}
.chip.all{background:var(--wine);color:var(--cream)}.chip.off{background:transparent;color:var(--mute);border-color:var(--line-strong)}
.rail{display:flex;flex-wrap:wrap;gap:var(--s1)}
.guestlayout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4)}.guestlayout>*{min-width:0}.scroll{overflow-x:auto}
.wide{display:none}h2.sect{margin-top:var(--s8)}
.swatches{display:flex;gap:var(--s3);flex-wrap:wrap}.swatches label{flex-direction:row;align-items:center;gap:var(--s2);min-height:var(--h-ctl);font-weight:400}
.swatch{width:20px;height:20px;border-radius:50%;background:var(--c);border:1px solid var(--line-strong);display:inline-block}
.gname{display:flex;align-items:center;gap:var(--s3);text-decoration:none}.gname b{font:600 var(--t-card) var(--f)}.gname small{display:block;color:var(--mute);font-size:var(--t-small)}
.stepper{display:flex;gap:var(--s2);margin:0}.stepper span{flex:1;text-align:center;font:500 var(--t-micro)/1 var(--f);letter-spacing:.08em;text-transform:uppercase;padding:var(--s3) 0;border-radius:var(--r-pill);border:1px solid var(--line-strong);color:var(--mute)}
.stepper span.done{background:var(--green);color:var(--cream);border-color:var(--green)}.stepper span.now{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.tick{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.tick .btn{min-width:112px}
a.chip{min-height:44px}
.btn.xl{min-height:64px;font-size:var(--t-section)}
.top :focus-visible,.tnav :focus-visible,.hero :focus-visible,.cardbtn:focus-visible{outline-color:var(--cream)}
.refuse{font:700 var(--t-title)/1.3 var(--f);text-align:center;padding:var(--s4);border-radius:var(--r-ctl);background:var(--wine);color:var(--cream);margin:var(--s4) 0}.tick.in b{color:var(--green)}
.danger{border:1px solid var(--stone);border-radius:var(--r-ctl);padding:var(--s4);margin-top:var(--s4)}

/* bottom navigation: four equal cells, identical layout for every item */
.bnav{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);padding:var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom));background:rgba(255,251,244,.96);border-top:1px solid var(--line);backdrop-filter:blur(10px);z-index:5}
.bnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);min-height:56px;text-decoration:none;color:var(--mute);font:500 var(--t-micro)/1 var(--f);letter-spacing:.02em}
.bnav .ic{display:flex;align-items:center;justify-content:center;width:56px;height:32px;border-radius:var(--r-pill)}
.bnav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.bnav a.on{color:var(--wine);font-weight:600}.bnav a.on .ic{background:radial-gradient(circle at 35% 30%,#e6d39a,var(--gold) 60%,#a98a45);color:var(--wine);width:44px;height:44px;margin-top:-20px;box-shadow:0 6px 16px rgba(122,48,48,.35);border-radius:50%}
.bnav a{min-height:56px}
.bnav form{grid-column:1/-1;text-align:center}
.tnav{display:none}

/* tablet and up: top navigation, wider grids */
@media (min-width:860px){
 .grid3{grid-template-columns:repeat(3,1fr)}.grid2{grid-template-columns:1fr 1fr;align-items:stretch}
 .guestlayout{grid-template-columns:240px minmax(0,1fr)}.wide{display:table-cell}
 .bnav{display:none}.tnav{display:flex;gap:var(--s6);align-items:center}
 .tnav a{display:inline-flex;align-items:center;min-height:var(--h-ctl);box-sizing:border-box;text-decoration:none;color:var(--on-wine);font:500 var(--t-small)/1 var(--f);letter-spacing:.12em;text-transform:uppercase;padding:0;border-bottom:2px solid transparent}
 .tnav a.on{color:var(--cream);border-bottom-color:var(--gold)}
 body.staff main{padding-bottom:var(--s8)}.foot{padding-bottom:var(--s8)}.cards2{max-width:544px}.hero{padding-bottom:80px}
 .card,.glass{padding:var(--s6)}.profile{gap:var(--s6)}
}
@media (max-width:859px){table{display:block;overflow-x:auto;max-width:100%}
 .actions{flex-direction:column}.inline{flex-direction:column;align-items:stretch;width:100%;margin:0 0 var(--s2)}.actions .inline{margin:0}
 .inline .btn,.stack .btn{width:100%}.inline input:not([type=checkbox]),.inline label,.stack.row input:not([type=checkbox]){width:100%}
 .stack.row{flex-direction:column;align-items:stretch}.stack.row label{min-width:0;width:100%}.stack.row select,.stack.row .short{width:100%}}
@media (max-width:600px){table{font-size:var(--t-small)}.hero h1{font-size:28px}}

/* Green accents (Martin, 9 Nov 2026): the green ribbon is on every page; secondary actions, links and section rules echo it. Colour only. */
body.staff .btn.ghost,body.public .btn.ghost{color:var(--green);border-color:var(--green)}
body.staff .btn.ghost:hover,body.public .btn.ghost:hover{background:rgba(73,91,73,.1);border-color:var(--green)}
.backlink{color:var(--green)}
.tick.in{box-shadow:inset 4px 0 0 var(--green)}
.card h2{background:linear-gradient(rgba(73,91,73,.3),rgba(73,91,73,.3)) bottom/100% 1px no-repeat}