/* AOK in Action: shared look for the newer pages (Commons, Events, AOK Man, Hidden Heroes, Skit Contest).
   Cream paper, burgundy, gold. No brown bands. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&family=DM+Mono:wght@400;500&family=Caveat:wght@600&display=swap');
:root{--burgundy:#5A1828;--burgundy-d:#3F0F1B;--gold:#E8B93C;--honey:#D9A441;--dark:#3A2416;--warm:#6B4A2E;
  --cream:#FAF3E8;--cream-m:#F1E3CE;--paper:#FFFDF8;--text:#4A3320;--muted:#9A8A78;
  --serif:'Playfair Display',Georgia,serif;--body:'Crimson Pro',Georgia,serif;--mono:'DM Mono',ui-monospace,monospace;--hand:'Caveat','Bradley Hand',cursive}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--text);font-family:var(--body);font-size:1.12rem;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.3rem}
.eyebrow{font:500 .74rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--burgundy)}
.eyebrow.light{color:var(--gold)}
h1,h2,h3{font-family:var(--serif);color:var(--dark);line-height:1.06}
h1{font-weight:900;font-size:clamp(2.2rem,5vw,3.6rem);margin:.45rem 0 .8rem}
h1 i,h2 i{color:var(--burgundy)}
h2{font-weight:900;font-size:clamp(1.7rem,3.4vw,2.5rem);margin:.4rem 0 .7rem}
h3{font-weight:700;font-size:1.3rem}
.lede{font-size:1.22rem;color:var(--warm);max-width:44rem}
.hand{font-family:var(--hand);color:var(--burgundy);font-size:1.6rem;line-height:1.1}

/* hero */
.hero{background:linear-gradient(165deg,#FDF8EF 0%,#F4E6CC 100%);border-bottom:1px solid rgba(58,36,22,.1)}
.hero .wrap{padding-top:3.2rem;padding-bottom:3rem}
.hero.dark{background:var(--burgundy);color:#F6E6E3;border:0}
.hero.dark h1{color:#fff}.hero.dark h1 i{color:var(--gold)}.hero.dark .lede{color:#F1DCD6}

/* buttons */
.btn{display:inline-block;font:500 .86rem var(--mono);letter-spacing:.04em;text-decoration:none;padding:.85rem 1.25rem;border:2px solid var(--dark);background:var(--dark);color:var(--cream);transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--burgundy);border-color:var(--burgundy)}
.btn.ghost{background:transparent;color:var(--dark)}.btn.ghost:hover{background:var(--dark);color:var(--cream)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--burgundy-d)}.btn.gold:hover{background:#fff;border-color:#fff}
.ctas{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.3rem}

/* sections */
.sec{padding:3.6rem 0}
.sec.tint{background:var(--cream-m)}
.sec.wine{background:var(--burgundy);color:#F6E6E3}.sec.wine h2,.sec.wine h3{color:#fff}.sec.wine h2 i{color:var(--gold)}.sec.wine .lede{color:#F1DCD6}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:1rem;margin-top:1.6rem}
.tile{position:relative;display:flex;flex-direction:column;gap:.35rem;background:var(--paper);border:1px solid rgba(58,36,22,.12);border-top:5px solid var(--c,var(--burgundy));
  padding:1.15rem 1.2rem 1.25rem;text-decoration:none;color:var(--text);box-shadow:0 8px 20px -14px rgba(58,36,22,.45);transition:transform .18s,box-shadow .18s}
.tile:hover{transform:translateY(-3px);box-shadow:0 14px 28px -14px rgba(58,36,22,.55)}
.tile .k{font:500 .66rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c,var(--burgundy))}
.tile h3{font-size:1.28rem}
.tile p{font-size:1rem;color:var(--warm)}
.tile .go{margin-top:auto;padding-top:.5rem;font:500 .74rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--burgundy)}
.tile .out{font-size:.8em}
.tile.photo{padding:0}.tile.photo img{width:100%;aspect-ratio:4/3;object-fit:cover}.tile.photo .tb{padding:1rem 1.15rem 1.15rem;display:flex;flex-direction:column;gap:.35rem;flex:1}

/* photo gallery (polaroid-ish, on cork-free paper) */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.4rem 1.1rem;margin-top:1.6rem}
.shot{margin:0;background:#fff;padding:.6rem .6rem .8rem;box-shadow:0 10px 22px -14px rgba(40,20,5,.6);transform:rotate(var(--r,0deg));transition:transform .2s}
.shot:hover{transform:rotate(0) scale(1.02)}
.shot button{all:unset;cursor:zoom-in;display:block;width:100%}
.shot img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:var(--pos,50% 35%)}
.shot figcaption{font-family:var(--hand);font-size:1.32rem;line-height:1.1;color:var(--dark);padding:.55rem .2rem 0}
.shot figcaption small{display:block;font:500 .64rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
.studio .shot{background:#1d1015}.studio .shot figcaption{color:#F6E6E3}.studio .shot figcaption small{color:#C9A8AE}

/* lightbox */
.lb{position:fixed;inset:0;z-index:2147483100;background:rgba(20,8,12,.9);display:none;align-items:center;justify-content:center;padding:4.5rem 1rem 2rem}
.lb.on{display:flex}
.lb figure{max-width:min(92vw,1200px);max-height:100%;display:flex;flex-direction:column;align-items:center}
.lb img{max-height:78vh;width:auto;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.lb figcaption{color:#F6E6E3;font-family:var(--hand);font-size:1.6rem;margin-top:.7rem;text-align:center}
.lb .x{position:absolute;top:4.6rem;right:1rem;font:500 .8rem var(--mono);background:#fff;color:var(--dark);border:0;padding:.55rem .8rem;cursor:pointer}

/* note card (quotes) */
.note{background:var(--paper);border:1px solid rgba(58,36,22,.12);border-left:5px solid var(--gold);padding:1.4rem 1.6rem;max-width:46rem;box-shadow:0 8px 20px -16px rgba(58,36,22,.5)}
.note p{font-style:italic;font-size:1.15rem}
.note .by{margin-top:.7rem;font:500 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--burgundy)}

/* phone block */
.phone{background:var(--burgundy);color:#F6E6E3;text-align:center;padding:2rem 1.4rem;margin:2.4rem 0}
.phone .k{font:500 .7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.phone a{display:block;font:900 clamp(1.8rem,4vw,2.6rem) var(--serif);color:#fff;text-decoration:none;margin:.3rem 0}
.phone p{max-width:30rem;margin:0 auto;color:#F1DCD6}

/* chips & tabs */
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.2rem 0}
.chips button{all:unset;cursor:pointer;font:500 .74rem var(--mono);letter-spacing:.04em;padding:.42rem .75rem;border:1px solid rgba(58,36,22,.25);border-radius:999px;background:#fff;color:var(--warm)}
.chips button[aria-pressed="true"]{background:var(--burgundy);border-color:var(--burgundy);color:#fff}
.tabs{display:flex;gap:0;border-bottom:2px solid var(--dark);margin-top:1.6rem}
.tabs button{all:unset;cursor:pointer;font:700 1.15rem var(--serif);padding:.7rem 1.2rem;color:var(--warm);border:2px solid transparent;border-bottom:0;margin-bottom:-2px}
.tabs button[aria-selected="true"]{color:var(--dark);background:var(--paper);border-color:var(--dark)}
.tabs button .n{font:500 .7rem var(--mono);color:var(--muted);margin-left:.35rem}

/* ticket rows (events) */
.tickets{display:flex;flex-direction:column;gap:.8rem;margin-top:1.2rem}
.ticket{display:flex;background:var(--paper);border:2px solid var(--dark);text-decoration:none;color:var(--text)}
.ticket .stub{flex:0 0 6.4rem;background:var(--burgundy);color:#fff;text-align:center;padding:1rem .5rem;border-right:2px dashed var(--cream);font:500 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ticket .stub b{display:block;font:900 2.2rem/1 var(--serif);margin:.2rem 0;letter-spacing:0}
.ticket .stub.standing{background:var(--burgundy-d)}.ticket .stub.standing b{font-size:1.15rem;line-height:1.15;margin:.35rem 0}
.ticket .tk{padding:1rem 1.2rem;flex:1;min-width:0}
.ticket .tk .k{font:500 .66rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--burgundy)}
.ticket .tk h3{font-size:1.3rem;margin:.15rem 0 .25rem}
.ticket .tk p{font-size:1rem;color:var(--warm)}
.ticket .tk .links{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.55rem;font:500 .74rem var(--mono);letter-spacing:.04em}
.ticket .tk .links a{color:var(--burgundy)}
.ticket .tk .src{font:500 .64rem var(--mono);color:var(--muted);margin-top:.4rem;letter-spacing:.04em}
.ticket.vol .stub{background:#2E6B33}
@media(max-width:560px){.ticket{flex-direction:column}.ticket .stub{flex:none;border-right:0;border-bottom:2px dashed var(--cream);display:flex;gap:.6rem;align-items:baseline;justify-content:center;padding:.6rem}.ticket .stub b{font-size:1.5rem;margin:0}}

.empty{background:var(--paper);border:1px dashed rgba(58,36,22,.35);padding:1.4rem 1.5rem;margin-top:1.2rem;color:var(--warm)}
.empty b{color:var(--dark)}
.preview{margin:1rem 0 0;padding:.6rem .9rem;border:1px dashed var(--burgundy);font:500 .78rem var(--mono);color:var(--burgundy);background:#fff}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin-top:1.4rem;counter-reset:s}
.step{background:var(--paper);border:1px solid rgba(58,36,22,.12);padding:1.2rem;counter-increment:s}
.step::before{content:counter(s);display:block;font:900 2.2rem/1 var(--serif);color:var(--gold);margin-bottom:.4rem}
.step h3{font-size:1.15rem;margin-bottom:.3rem}
.step p{font-size:1rem;color:var(--warm)}

/* meter */
.meter{display:flex;gap:4px;margin:.8rem 0 .4rem}
.meter i{flex:1;height:14px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35)}
.meter i.on{background:var(--gold);border-color:var(--gold)}

/* footer */
.pfoot{background:var(--cream-m);border-top:1px solid rgba(58,36,22,.15);margin-top:0}
.pfoot .wrap{padding:2.2rem 1.3rem 2.6rem;display:flex;gap:2rem;flex-wrap:wrap;justify-content:space-between;font-size:1rem}
.pfoot h4{font:500 .7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.pfoot a{display:block;text-decoration:none;color:var(--warm);margin-bottom:.2rem}.pfoot a:hover{color:var(--dark);text-decoration:underline}
.pfoot .tel{font:700 1.35rem var(--serif);color:var(--dark)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.shot,.tile{transition:none}}