/* Guest-facing continuation of the exact TIRHAB brand. */
@font-face{font-family:Alexandria;src:url('./fonts/alexandria.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--ink:#111317;--paper:#F3F1EA;--accent:#FF5A3C;--mist:#D7DFDA;--card:#FCFBF7;--muted:#6D706F;--success:#176B51;--danger:#B8443D;--line:#E1DED5;--shadow:0 14px 38px #1113170D}
html{font-family:Alexandria,Tahoma,Arial,sans-serif;font-synthesis:none;line-height:1.65;scroll-behavior:smooth;scroll-padding-top:18px}
body{background:var(--paper);color:var(--ink)}
.shell{max-width:680px;padding:calc(18px + env(safe-area-inset-top)) 18px calc(40px + env(safe-area-inset-bottom))}
.topbar{margin:0 0 20px;border-bottom:1px solid #11131716;padding:5px 0 16px}
.guest-logo-lockup{display:flex;align-items:center;gap:10px}
.guest-logo-lockup img{height:44px;width:44px;object-fit:contain}
.topbar h1{font-size:1.32rem;font-weight:850;line-height:1.45;margin:0}
.eyebrow{font-size:.72rem;font-weight:720;letter-spacing:.03em}
.eyebrow.brand{font:700 .65rem/1.3 Arial,sans-serif;letter-spacing:.18em;margin-top:5px}
.eyebrow.light{color:#F3F1EAB8}
.connection{border-radius:12px;background:var(--card);border-color:var(--line);font-size:.75rem;font-weight:650;padding:10px 12px}
.connection i{width:8px;height:8px}
.hero-card{border-radius:26px;min-height:272px;padding:27px 26px 24px;box-shadow:0 18px 34px #11131714;background:linear-gradient(138deg,#25292C 0%,#111317 75%);gap:0}
.hero-card:before{inset:18px 18px auto auto;width:32px;height:3px;background:var(--accent);border:0;border-radius:3px}
.hero-card:after{display:none}
.hero-card h2{font-size:clamp(2rem,6vw,3rem);line-height:1.42;letter-spacing:-.02em;font-weight:800;max-width:100%;margin:8px 0}
.hero-card>p{font-size:1rem;color:#FFFFFFCB;margin:0 0 24px}
.event-meta{gap:12px;padding-top:20px}
.event-meta div{gap:5px}
.event-meta span{font-size:.78rem;color:#F3F1EAA6}
.event-meta strong{font-size:.91rem;font-weight:700;line-height:1.65}
.invitation-artwork{border-radius:20px;overflow:hidden;margin-bottom:18px}
.invitation-artwork canvas{width:100%;height:auto}
.invitation-response-link{display:block;padding:15px 20px;background:var(--accent);color:var(--ink);font-weight:800;min-height:50px;text-align:center;border-radius:0 0 16px 16px}
.journey-strip{margin-block:24px}
.journey-step{font-size:.68rem}
.journey-step b{border-radius:10px;width:31px;height:31px}
.card{border:1px solid #11131713;background:var(--card);border-radius:22px;box-shadow:none;margin-bottom:14px;padding:23px}
.card h3{font-size:1.35rem;line-height:1.52;letter-spacing:-.01em;font-weight:800;margin:3px 0}
.section-head{gap:10px}
.rsvp-card{border:1px solid #11131725}
.rsvp-card .eyebrow{color:#AC3823}
.rsvp-card>.muted{color:#5C6360;font-size:.9rem;line-height:1.9}
.state-pill{font-weight:700;padding:8px 10px;line-height:1.35}
.action-grid{gap:11px}
.action-grid>button{min-height:54px;font-size:.95rem;transition:transform .12s,box-shadow .12s;border:1px solid transparent}
.action-grid>button:active{transform:scale(.98)}
.primary,.pass-button{background:var(--accent);color:var(--ink);border-radius:13px;font-weight:800}
.secondary{background:#E7EAE5;color:var(--ink);border-radius:13px;font-weight:750}
.action-grid .secondary{border:1px solid #11131718}
.stepper{gap:12px}
.stepper button{min-height:44px;min-width:44px;background:var(--card);font-weight:800}
.state-line{font-size:.9rem;font-weight:700}
.pass-card{border-radius:23px;background:#111317;color:var(--paper);grid-template-columns:minmax(0,1fr) 138px;gap:14px;padding:22px}
.pass-card .eyebrow{color:#FF8D77}
.pass-copy h3{font-size:1.4rem;line-height:1.5;font-weight:800}
.pass-copy p{color:#F3F1EABB;font-size:.85rem}
.group-size{background:#FCFBF71A}
.group-size span{color:#F3F1EABE}
.qr{background:white;border:5px solid white;border-radius:17px;padding:6px}
.pass-button{min-height:52px}
.token-line{font-size:.59rem;color:#F3F1EA8A;letter-spacing:0;overflow-wrap:anywhere}
.quick-actions{gap:11px}
.quick{border-radius:17px;min-height:106px;gap:6px;background:var(--card);border:1px solid #11131717}
.quick svg{width:23px;height:23px;stroke:var(--ink);stroke-width:1.8}
.quick strong{font-size:.85rem;font-weight:780}
.quick small{font-size:.67rem}
.info-card{box-shadow:none}
.info-row{min-height:48px}
footer{color:var(--muted);font-size:.76rem;line-height:2}
.pass-overlay{background:#111317}
.full-pass{gap:16px}
.full-pass .eyebrow{letter-spacing:.04em}
.full-pass h2{font-weight:850;line-height:1.5}
.qr.large{border-width:10px}
.notice{background:#F3F1EA;border:1px solid var(--line);border-radius:13px;font-weight:650}
button:focus-visible,a:focus-visible{outline:3px solid #D84125;outline-offset:4px}
@media(max-width:520px){
 .shell{padding-inline:16px}
 .hero-card{padding:23px 21px;min-height:250px}
 .hero-card h2{font-size:clamp(1.85rem,7.2vw,2.6rem)}
 .event-meta{grid-template-columns:1fr;gap:12px}
 .card{padding:19px;border-radius:20px}
 .rsvp-card>.muted{font-size:.84rem}
 .pass-card{grid-template-columns:minmax(0,1fr) 112px;padding:17px}
 .quick-actions{gap:8px}
 .quick{padding:13px 4px;min-height:101px}
}
@media(max-width:370px){
 .guest-logo-lockup img{height:38px;width:38px}
 .connection{padding:8px 9px}
 .pass-card{grid-template-columns:1fr}
 .qr-wrap{width:150px;justify-self:center}
 .section-head{flex-direction:column}
 .state-pill{align-self:flex-start}
 .quick small{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* TIRHAB Signature Guest Experience 2026 — one invitation, one RSVP, one pass.
   Mobile-first; accents never reduce QR contrast or interfere with live data. */
body{
  background-color:#F3F1EA;
  background-image:
    radial-gradient(circle at 5% 10%,rgba(255,90,60,.06),transparent 25rem),
    radial-gradient(circle at 110% 55%,rgba(215,223,218,.35),transparent 28rem),
    var(--paper);
}
.shell{max-width:690px;padding-inline:clamp(16px,4vw,28px)}
.topbar{padding-block:10px 18px;margin-bottom:0;border-bottom:0}
.guest-logo-lockup img{width:48px;height:48px}
.guest-logo-lockup h1{font-size:1.5rem}
.guest-intro{padding:26px 5px 20px;display:flex;flex-direction:column;gap:9px}
.guest-intro-kicker{display:flex;align-items:center;gap:12px;direction:ltr;justify-content:flex-end;font:800 .64rem/1.4 system-ui,sans-serif;letter-spacing:.18em;color:#9B3E2C}
.guest-intro-line{display:block;width:35px;height:2px;border-radius:2px;background:var(--accent)}
.guest-intro p{margin:0;text-align:right;font-size:clamp(1.22rem,4vw,1.65rem);font-weight:850;letter-spacing:-.025em;line-height:1.7}
.invitation-artwork{border:1px solid #11131721;border-radius:28px;background:#FCFBF7;padding:7px 7px 0;margin-bottom:20px;box-shadow:0 20px 44px #1113170C}
.invitation-artwork canvas{border-radius:20px 20px 8px 8px}
.invitation-response-link{margin:7px 0 0;border-radius:0 0 21px 21px;font-size:.9rem;min-height:56px}
.hero-card{border-radius:30px;min-height:332px;padding:30px 28px 23px;background:linear-gradient(140deg,#222629 0%,#111317 75%);border:1px solid #111317;box-shadow:0 23px 48px #11131718;isolation:isolate}
.hero-card:before{content:"";position:absolute;inset:auto -96px -167px auto;width:350px;height:350px;border:1px solid #FFFFFF17;border-radius:50%;background:transparent;pointer-events:none}
.hero-card:after{content:"";position:absolute;inset:auto auto 74px -108px;display:block;width:240px;height:240px;border:1px solid #FF5A3C3A;border-radius:50%;pointer-events:none}
.invitation-seal{display:flex;align-items:center;gap:9px;margin-bottom:10px;align-self:flex-start;max-width:max-content;background:#FFFFFF12;border:1px solid #FFFFFF20;padding:7px 13px 7px 8px;border-radius:14px;color:#FFF5E9;font-size:.76rem;font-weight:740}
.invitation-seal img{display:block;width:34px;height:34px}
.hero-card h2{font-size:clamp(2.25rem,7.4vw,3.45rem);font-weight:900;letter-spacing:-.035em;line-height:1.35;margin:8px 0 5px}
.hero-card>p{font-size:1.1rem;color:#F3F1EACD;margin-bottom:26px}
.event-meta{margin-top:auto;padding-top:22px;border-top:1px dashed #FFFFFF42;gap:16px}
.event-meta div{border-radius:14px;padding:0}
.event-meta span{font-size:.78rem;letter-spacing:0}
.event-meta strong{font-size:.98rem;line-height:1.7}
.hero-rsvp-link{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:23px;color:#111317!important;background:var(--accent);min-height:54px;border-radius:14px;padding:12px 18px;text-decoration:none;font-weight:850;font-size:.9rem}
.hero-rsvp-link span{font:800 1.2rem/1 sans-serif;direction:ltr}
.journey-strip{margin-block:25px 28px;gap:8px}
.journey-step{min-width:74px;font-size:.72rem}
.journey-step b{width:36px;height:36px;border:1px solid #11131714;border-radius:50%;font-size:.78rem}
.journey-step.active b{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.journey-line{margin-bottom:23px;max-width:100px}
.rsvp-card{padding:25px;border:1px solid #11131720;border-radius:25px;background:#FFFFFF;box-shadow:0 13px 34px #1113170A;scroll-margin-top:18px}
.rsvp-card .eyebrow{font-size:.73rem;color:#B34833}
.rsvp-card .muted{margin-top:8px;margin-bottom:20px;color:#515B58}
.action-grid button{min-height:58px;font-size:1rem;border-radius:15px}
.action-grid button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--ink);font-weight:900}
.action-grid button:focus-visible,.hero-rsvp-link:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.companions{background:#F3F1EA;border:1px solid #11131712;border-radius:18px;padding:15px 13px;margin-top:17px}
.stepper{background:#FFF;border:1px solid #11131716}
.pass-card{position:relative;border:0;border-radius:28px;padding:24px;background:linear-gradient(135deg,#25282A,#111317 80%);box-shadow:0 18px 38px #11131716;overflow:hidden}
.pass-card:before{content:"";position:absolute;inset:12px;pointer-events:none;border:1px dashed #FFFFFF25;border-radius:20px}
.pass-card>*{position:relative}
.pass-card .eyebrow{color:#FFA18D}
.pass-copy h3{font-size:1.55rem}
.pass-copy p{color:#F3F1EACB}
.pass-card .qr{border-radius:15px}
.pass-button{font-weight:900;min-height:56px}
.quick-actions{gap:11px}
.quick{border:1px solid #11131715;border-radius:19px;min-height:110px;box-shadow:0 7px 20px #11131708}
.quick strong{font-size:.9rem}
.quick small{font-size:.71rem}
.info-card{border-radius:21px}
.pass-overlay{background:linear-gradient(160deg,#26292B 0%,#111317 70%);padding-top:calc(32px + env(safe-area-inset-top))}
.full-pass{border-radius:24px;border:1px solid #FFFFFF25;padding:30px 14px;background:#FFFFFF0A}
.full-pass-brand{display:flex;align-items:center;justify-content:center;gap:10px;font-size:.85rem;font-weight:750;color:#FFFFFF}
.full-pass-brand img{width:40px;height:40px}
.full-pass p{color:#F3F1EAD5}
.qr.large{border-radius:22px;margin:14px 0;background:white}
.guest-footer{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;border-top:1px solid #1113171C}
.guest-footer img{width:27px;height:27px}
@media(max-width:520px){
  .shell{padding-inline:16px}
  .hero-card{padding:23px 20px;min-height:320px}
  .hero-card h2{font-size:clamp(2rem,8vw,2.85rem)}
  .guest-intro{padding-top:16px;padding-bottom:16px}
  .event-meta{gap:12px}
  .rsvp-card{padding:19px}
  .pass-card{padding:20px}
}
@media(max-width:370px){
  .hero-card{min-height:310px}
  .hero-card h2{font-size:1.95rem}
  .pass-card{grid-template-columns:1fr}
  .qr-wrap{width:165px;justify-self:center}
  .journey-step{min-width:60px}
  .connection{font-size:.68rem}
  .full-pass{padding:22px 12px}
}
@media(prefers-reduced-motion:reduce){.hero-rsvp-link,.action-grid button{transition:none!important}}


/* Guest-first editorial refinement: artwork is the hero, not a second headline.
 * Keep event metadata accessible even when organizer artwork is loaded.
 * Offline status and destructive local controls never compete with RSVP. */
.topbar .connection:not(.offline){
  background:transparent;border-color:transparent;box-shadow:none;
  padding:7px 3px;color:var(--muted);font-size:.68rem;
}
.guest-intro{padding-block:20px 14px}
.guest-intro-kicker{
  direction:rtl;justify-content:flex-start;letter-spacing:.02em;
  color:#A63D29;font:800 .76rem/1.6 Alexandria,Tahoma,sans-serif;
}
.guest-intro p{font-size:clamp(1.15rem,3.9vw,1.43rem);line-height:1.7;letter-spacing:-.01em}
.invitation-artwork{margin-bottom:12px}
.invitation-response-link{text-decoration:none;border-radius:0 0 18px 18px}
.artwork-loaded .hero-card{
  background:var(--card);color:var(--ink);border:1px solid #11131715;
  min-height:0;box-shadow:none;border-radius:19px;padding:14px 19px;
  isolation:auto;margin-bottom:9px;
}
.artwork-loaded .hero-card:before,.artwork-loaded .hero-card:after,
.artwork-loaded .hero-card .invitation-seal,.artwork-loaded .hero-card h2,
.artwork-loaded .hero-card>p,.artwork-loaded .hero-rsvp-link{display:none}
.artwork-loaded .hero-card .event-meta{
  margin:0;padding:0;border:0;display:grid;grid-template-columns:1fr 1fr;
  gap:10px 18px;
}
.artwork-loaded .hero-card .event-meta div{gap:3px}
.artwork-loaded .hero-card .event-meta span{color:#606562;font-size:.7rem}
.artwork-loaded .hero-card .event-meta strong{
  color:var(--ink);font-size:.85rem;line-height:1.65;
}
.artwork-loaded .journey-strip{display:none}
.rsvp-card{border-color:#11131724}
.info-card{border:1px solid #11131713;background:transparent;padding:0 18px}
.info-card summary{
  min-height:58px;display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;list-style:none;font-size:.88rem;font-weight:800;
}
.info-card summary::-webkit-details-marker{display:none}
.info-card summary::after{content:"＋";font:700 1rem/1 system-ui,sans-serif;color:var(--muted)}
.info-card details[open] summary::after{content:"−"}
.info-card details[open] .info-row{padding-inline:4px}
#forgetInvitation{
  display:block;margin:15px auto 0;border:0;background:transparent;
  box-shadow:none;padding:8px 10px;min-height:44px;
  font-size:.71rem;color:#545A57;font-weight:650;text-decoration:underline;
  text-underline-offset:3px;
}
#forgetInvitation[hidden]{display:none}
@media(max-width:520px){
  .artwork-loaded .hero-card{padding:13px 14px}
  .artwork-loaded .hero-card .event-meta{grid-template-columns:1fr}
  .artwork-loaded .hero-card .event-meta strong{font-size:.83rem}
  .guest-intro{padding-top:13px}
}


/* TIRHAB SIGNATURE — guest-facing companion to the new site and Organizer.
   Keep artwork dominant, RSVP the one primary action and QR server-confirmed. */
body{
  background-color:#F3F1EA;
  background-image:
    radial-gradient(circle at 10% 0,rgba(255,90,60,.055),transparent 24rem),
    linear-gradient(180deg,#F7F4EC 0%,#F3F1EA 55%);
}
.shell{max-width:665px;padding-inline:clamp(16px,4vw,26px)}
.topbar{
  margin-block-end:12px;padding:11px 0 18px;border-bottom:1px solid #11131715;
}
.guest-logo-lockup{gap:13px}
.guest-logo-lockup>img{width:49px;height:49px;background:#FFE7E1;border-radius:14px;padding:6px}
.topbar h1{font-size:1.46rem;font-weight:900;letter-spacing:-.06em}
.eyebrow.brand{font-size:.64rem;color:#6D706F;letter-spacing:.2em}
.topbar .connection{border-radius:999px}
.guest-intro{padding-block:18px 21px}
.guest-intro-kicker{color:#A43825;font-weight:850;font-size:.72rem}
.guest-intro p{
  font-weight:850;font-size:clamp(1.24rem,4.3vw,1.64rem);
  letter-spacing:-.035em;line-height:1.6;margin:9px 0 0;
}
.invitation-artwork{
  overflow:hidden;border:1px solid #A88B653D;background:#FCFBF7;
  border-radius:25px;box-shadow:0 18px 50px #11131716;margin-bottom:17px;
}
.invitation-artwork canvas{display:block;max-width:100%;height:auto}
.invitation-response-link,.hero-rsvp-link{
  min-height:56px;display:flex;align-items:center;justify-content:center;
  background:#FF5A3C;color:#111317;border:0;
  font-weight:900;text-decoration:none;line-height:1.6;
  transition:background .2s ease;
}
.invitation-response-link:hover,.hero-rsvp-link:hover{background:#FF735A}
.hero-card{
  border-radius:29px;background:linear-gradient(140deg,#29322F,#111317 80%);
  border:1px solid #FFFFFF20;padding:30px;box-shadow:0 22px 52px #11131722;
}
.hero-card:before{background:#FF5A3C;width:41px}
.hero-card h2{font-size:clamp(2.2rem,7vw,3.25rem);line-height:1.4}
.event-meta{border-color:#F3F1EA25}
.artwork-loaded .hero-card{
  border:1px solid #11131713;border-radius:20px;
  background:#FCFBF7;box-shadow:0 8px 25px #11131708;
}
.artwork-loaded .hero-card .event-meta{gap:9px 21px}
.journey-strip{margin-block:27px}
.journey-step b{width:34px;height:34px;border-radius:13px}
.card{border:1px solid #11131712;border-radius:25px;padding:25px;background:#FCFBF7}
.rsvp-card{
  position:relative;border:1px solid #11131717;
  box-shadow:0 15px 46px #1113170C;
  overflow:hidden;padding-block-start:29px;
}
.rsvp-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:#FF5A3C}
.rsvp-card .eyebrow{font-weight:850;letter-spacing:.01em}
.card h3{letter-spacing:-.03em;font-size:clamp(1.35rem,4.5vw,1.65rem)}
.rsvp-card>.muted{font-size:.87rem;color:#5C625D;line-height:1.95}
.action-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.action-grid button,.primary,.secondary,.pass-button{
  min-height:55px;border-radius:16px;font-weight:900;
  font-family:Alexandria,Tahoma,Arial,sans-serif;
  transition:background .2s ease,transform .2s ease;
}
.action-grid button:hover,.pass-button:hover{transform:translateY(-1px)}
.action-grid #confirmButton,.primary{
  color:#111317;background:#FF5A3C;border:1px solid #FF5A3C;
  box-shadow:none;
}
.action-grid #confirmButton:hover{background:#FF735A}
.action-grid #declineButton,.secondary{border:1px solid #11131720;background:#F6F5F1;color:#262B29}
.action-grid button:focus-visible,.quick:focus-visible,.pass-button:focus-visible{
  outline:3px solid #FF5A3C;outline-offset:4px
}
.companions{border:1px solid #1113170E;border-radius:17px;background:#F4F4EF;padding:16px}
.stepper{background:#FCFBF7;border:1px solid #11131714;border-radius:14px}
.state-pill{border-radius:999px;padding:7px 12px;font-size:.7rem}
.pass-card{
  background:linear-gradient(155deg,#252F2D 0%,#111317 85%);
  color:#F3F1EA;border-color:#FFFFFF14;box-shadow:0 16px 35px #11131713
}
.pass-card .eyebrow{color:#FFAC97}
.pass-card h3,.pass-card p,.pass-card .group-size{color:#F3F1EA}
.pass-card .pass-button{background:#FF5A3C;color:#111317;border:0}
.pass-card .qr-wrap{background:#FFF;border-radius:21px;padding:17px}
.quick-actions{gap:10px}
.quick{
  background:#FCFBF7;border:1px solid #11131713;border-radius:20px;
  min-height:119px;padding:14px 10px;box-shadow:0 8px 26px #11131706;
}
.quick svg{width:25px;height:25px;color:#111317}
.quick strong{font-size:.78rem;color:#111317}
.quick small{font-size:.63rem;color:#6D706F}
.info-card{border-radius:19px;background:transparent;box-shadow:none;border:1px solid #11131718}
.info-card summary{font-weight:780}
.guest-footer{opacity:.83}
@media(max-width:520px){
  .topbar h1{font-size:1.28rem}
  .hero-card{padding:22px}
  .rsvp-card{padding:21px 17px}
  .action-grid{grid-template-columns:1.12fr 1fr;gap:8px}
  .action-grid button{padding-inline:9px;min-height:53px;font-size:.86rem}
  .quick{border-radius:16px;min-height:103px}
  .quick strong{font-size:.7rem}
  .quick small{font-size:.59rem}
  .artwork-loaded .hero-card{padding:15px}
}
@media(max-width:370px){
  .action-grid{grid-template-columns:1fr}
  .quick-actions{gap:6px}
  .quick{padding-inline:6px}
  .quick small{font-size:.56rem}
}
@media(prefers-reduced-motion:reduce){
  .action-grid button,.pass-button,.invitation-response-link,.hero-rsvp-link{transition:none!important}
  .action-grid button:hover,.pass-button:hover{transform:none!important}
}