:root{--paper:#f4ecd8;--paper2:#ebe0c4;--ink:#1a1714;--muted:#5b5248;--wax:#9e1b1b;--wax2:#7a1212;--rule:#1a171433;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--serif);
background-image:radial-gradient(#0000 60%,#8a6a3a14),repeating-linear-gradient(0deg,#0000 0 3px,#7a5a2a05 3px 4px);min-height:100vh}
a{color:var(--wax2)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--wax);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:6px;z-index:9}
.masthead{padding:12px 16px 0;border-bottom:3px double var(--ink);position:sticky;top:0;background:var(--paper);z-index:5}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:bold;letter-spacing:.06em;text-transform:uppercase;font-size:15px}
.brand img{border-radius:50%}
nav{display:flex;gap:4px;overflow-x:auto;padding:8px 0;scrollbar-width:none}
nav a{color:var(--ink);text-decoration:none;padding:6px 7px;font-size:.95rem;font-variant:small-caps;letter-spacing:.05em;white-space:nowrap;border-bottom:2px solid transparent}
nav a[aria-current=page]{border-color:var(--wax);color:var(--wax2)}
main{max-width:720px;margin:0 auto;padding:20px 18px 40px;outline:none}
h1,h2,h3{font-weight:normal;line-height:1.2;letter-spacing:.01em}
h1{font-size:2rem;margin:.3em 0;text-align:center}
h2{font-size:1.35rem;font-variant:small-caps;letter-spacing:.06em;border-bottom:1px solid var(--rule);padding-bottom:4px;margin-top:2em}
.kicker{text-align:center;font-variant:small-caps;letter-spacing:.2em;color:var(--muted);margin:0}
.banner{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.letterhead{border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:4px;padding:20px 18px;margin:18px 4px;background:#fffaf0aa}
.charter ol{padding-left:1.4em}.charter li{margin:.5em 0}
.cols{display:grid;gap:18px}@media(min-width:640px){.cols{grid-template-columns:1.4fr 1fr}}
.column{border-left:3px double var(--ink);padding-left:14px;font-size:.95rem}
.dropcap::first-letter{float:left;font-size:3.4em;line-height:.8;padding:4px 6px 0 0;color:var(--wax)}
.btn{display:inline-block;font:inherit;font-variant:small-caps;letter-spacing:.08em;padding:10px 18px;min-height:44px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;text-decoration:none;border-radius:2px}
.btn.wax{background:var(--wax);border-color:var(--wax2);color:#fff6e6}
.btn.small{padding:4px 10px;min-height:34px;font-size:.9rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
.center{text-align:center}.small{font-size:.8rem;color:var(--muted)}
.seal-sm{width:90px;border-radius:50%;display:block;margin:10px auto}
label{display:block;font-variant:small-caps;letter-spacing:.06em;margin-top:14px}
input[type=text],select{width:100%;font:inherit;padding:10px;border:1px solid var(--ink);background:#fffaf0;border-radius:2px}
.preview{width:96px;height:120px;object-fit:cover;border:1px solid var(--ink);margin-top:8px;display:block}
/* card */
.card-stage{display:flex;flex-direction:column;align-items:center;gap:16px}
.idcard{--cbg:#f8f1de;--cfg:var(--ink);position:relative;width:min(100%,380px);aspect-ratio:1.586/1;background:var(--cbg);color:var(--cfg);border:1.5px solid var(--cfg);border-radius:14px;padding:14px 16px;box-shadow:0 10px 30px #3a2a1033;overflow:hidden;font-size:13px;line-height:1.35}
.idcard .inner{position:absolute;inset:6px;border:1px solid currentColor;border-radius:10px;opacity:.35;pointer-events:none}
.idcard .top{display:flex;gap:10px;align-items:flex-start}
.idcard .photo{width:64px;height:80px;object-fit:cover;border:1px solid currentColor;flex:none;background:#0001}
.idcard .org{font-variant:small-caps;letter-spacing:.12em;font-size:12px}
.idcard .name{font-size:20px;margin:2px 0 0;line-height:1.1}
.idcard .title{font-style:italic;color:var(--wax);font-size:13px}
.idcard .grade{display:inline-block;font-variant:small-caps;letter-spacing:.14em;font-size:11px;border:1px solid currentColor;padding:0 6px;margin-top:4px}
.idcard .bottom{position:absolute;left:16px;right:16px;bottom:12px;display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.idcard .num{font-family:"Courier New",monospace;letter-spacing:.08em;font-size:13px}
.idcard .motto{font-style:italic;font-size:11.5px;line-height:1.2;overflow-wrap:anywhere;max-width:100%}
.idcard .motto.long{font-size:10px}
.idcard .bottom>div{min-width:0}
.idcard .seal{width:62px;height:62px;border-radius:50%;flex:none}
.idcard.silver{border:5px solid transparent;background:linear-gradient(var(--cbg),var(--cbg)) padding-box,linear-gradient(120deg,#8d8d8d,#f4f4f4,#9a9a9a,#ffffff,#7d7d7d) border-box}
.idcard.gold{border:5px solid transparent;background:linear-gradient(var(--cbg),var(--cbg)) padding-box,linear-gradient(120deg,#8a6a1e,#f6e3a1,#b8902f,#fff4c8,#8a6a1e) border-box}
.idcard.platinum{border:5px solid transparent;background:linear-gradient(var(--cbg),var(--cbg)) padding-box,linear-gradient(120deg,#6f7780,#eef2f5,#a7b0b8,#ffffff,#6f7780) border-box}
.idcard.night{--cbg:#17140f;--cfg:#f4ecd8}
.idcard.night .title{color:#e0a19a}
.idcard.sheen::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,#fff0 35%,#ffffff55 50%,#fff0 65%);transform:translateX(-120%);animation:sheen 4.5s ease-in-out infinite;pointer-events:none}
@keyframes sheen{60%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.idcard.sheen::after{animation:none;opacity:0}}
.excuse{border:1px dashed var(--ink);padding:14px;max-width:380px;width:100%;text-align:center;background:#fffaf0aa;min-height:88px}
.excuse p{margin:0 0 10px;font-style:italic}
.row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
/* presented card */
.present-btn,.present-only{display:none}
.ppanel{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.check{display:flex;gap:8px;align-items:center;font-variant:normal;letter-spacing:0;font-size:.9rem;color:var(--muted)}
.check input{width:20px;height:20px;accent-color:var(--wax)}
body.present{overflow:hidden;background:var(--paper);touch-action:manipulation}
body.present .chrome,body.present .hide-present,body.present .ppanel{display:none}
body.present main{position:fixed;inset:0;padding:0;max-width:none}
body.present .idcard{position:fixed;left:50%;top:50%;width:380px;transform-origin:center center;box-shadow:0 18px 50px #3a2a1040;cursor:pointer}
body.present #cardwrap:focus-visible{outline:none}body.present #cardwrap:focus-visible .idcard{outline:3px solid var(--wax);outline-offset:4px}
body.present .present-btn{display:block;position:fixed;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:6;width:44px;height:44px;border-radius:50%;border:1px solid #1a171433;background:#f4ecd8cc;color:var(--ink);font:22px/1 var(--serif);opacity:.55;cursor:pointer}
body.present .present-btn:hover,body.present .present-btn:focus-visible{opacity:1}
body.present.controls .ppanel{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:7;max-height:70vh;overflow:auto;background:var(--paper);border-top:3px double var(--ink);padding:14px 14px max(14px,env(safe-area-inset-bottom));box-shadow:0 -10px 30px #0003}
body.present.controls .present-only{display:inline-block}
body.present.controls .excuse{border-style:dashed}
.hint{font-size:.8rem;color:var(--muted);text-align:center;margin:0}
/* standing */
.tiers{display:grid;gap:14px}
.tier{border:1px solid var(--ink);padding:14px 16px;background:#fffaf0aa;position:relative}
.tier h3{margin:0;font-variant:small-caps;letter-spacing:.1em;font-size:1.2rem}
.tier .price{float:right;font-size:1rem}
.tier ul{padding-left:1.2em;margin:.5em 0}
.tier.current{outline:3px double var(--wax);outline-offset:3px}
.demo{font-size:.75rem;color:var(--muted);margin-top:6px}
.post{border-bottom:1px solid var(--rule);padding:12px 0;display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.post p{margin:0}
.foot{border-top:3px double var(--ink);text-align:center;padding:18px;font-size:.9rem}
.foot p{margin:.3em 0}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:2px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:10}
#toast.on{opacity:1}

.giftcode{margin-top:12px}.code{font-family:"Courier New",monospace;font-size:1.35rem;letter-spacing:.08em;margin:.3em 0;user-select:all}
body.present:has(.idcard.night){background:#0f0d0a}
body.present #cardwrap{position:fixed;inset:0;z-index:1}