/* Tishrei Tent at 770 — brand stylesheet.
   Values transcribed from the design docs, not reinterpreted. */

:root {
  --teal-1:   #2493A8;
  --teal-2:   #16798C;
  --teal-3:   #0E5D6E;
  --teal-4:   #083D49;
  --teal-5:   #04262E;
  --gold:     #DFA32B;
  --gold-lt:  #F0BC4A;
  --gold-dk:  #B98420;
  --klaf-1:   #F6ECD4;
  --klaf-2:   #EBDBAE;
  --klaf-ink: #7A6A3E;
  --klaf-rule:#C9B778;
  --brick-1:  #8C3B2E;
  --brick-2:  #A3442F;
  --sea:      #5E8791;
  --sea-lt:   #E4EEF0;
  --white:    #FFFFFF;

  --tentbg: radial-gradient(ellipse 90% 42% at 50% 8%, #2493A8, #16798C 55%, #0E5D6E);
  --card-shadow: 0 14px 34px rgba(8,61,73,.3);
  --gold-shadow: 0 6px 16px rgba(185,132,32,.45);

  --head: 'Baloo 2', system-ui, sans-serif;
  --body: 'Heebo', system-ui, sans-serif;
  --script: 'Yellowtail', cursive;
}

* { box-sizing: border-box; }
body { margin:0; background:#0E5D6E; font-family:'Heebo',sans-serif; }
a { color:#DFA32B; text-decoration:none; }
input { font-family:'Heebo', system-ui, sans-serif; }
.tent { background:radial-gradient(ellipse 90% 42% at 50% 8%, #2493A8, #16798C 55%, #0E5D6E); min-height:100vh; padding-bottom:50px; }

/* nav */
.navwrap { max-width:1280px; margin:0 auto; padding:18px 32px 0; }
.bh { text-align:right; font-family:'Heebo', system-ui, sans-serif; font-size:12px; color:rgba(255,255,255,.75); }
.navrow { display:flex; justify-content:space-between; align-items:center; margin-top:2px; }
.brand { display:flex; align-items:baseline; gap:10px; }
.brand .b1 { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:23px; color:#FFFFFF; text-shadow:0 2px 8px rgba(8,61,73,.4); }
.brand .b2 { font-family:'Yellowtail', 'Brush Script MT', cursive; font-size:23px; color:#F0BC4A; }
.navlinks { display:flex; gap:26px; align-items:center; font-family:'Baloo 2', system-ui, sans-serif; font-weight:700; font-size:14.5px; color:rgba(255,255,255,.85); }
.navlinks a { color:rgba(255,255,255,.85); white-space:nowrap; }
.navlinks a.cur { color:#FFF; }
.donate { background:#DFA32B; color:#083D49 !important; font-weight:800; padding:9px 26px; border-radius:99px; box-shadow:0 4px 14px rgba(8,61,73,.35); border:none; cursor:pointer; font-family:'Baloo 2', system-ui, sans-serif; font-size:14.5px; }

/* hero */
.hero { text-align:center; padding:26px 32px 0; }
.hero img { position:relative; width:640px; max-width:100%; display:block; margin:0 auto; filter:drop-shadow(0 22px 34px rgba(8,61,73,.45)); }
.h1 { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:62px; line-height:1; color:#FFFFFF; text-shadow:0 3px 12px rgba(8,61,73,.45); margin-top:16px; }
.h2 { font-family:'Yellowtail', 'Brush Script MT', cursive; font-size:50px; color:#F0BC4A; line-height:1.1; margin-top:2px; text-shadow:0 2px 10px rgba(8,61,73,.35); }
.hcopy { font-family:'Heebo', system-ui, sans-serif; font-size:16px; color:rgba(255,255,255,.85); max-width:560px; margin:14px auto 0; line-height:1.6; }
.facts { display:flex; justify-content:center; gap:44px; padding:30px 0 8px; flex-wrap:wrap; }
.fact { text-align:center; }
.fact .n { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:29px; color:#FFFFFF; }
.fact .r { height:9px; width:84px; background:#DFA32B; border-radius:4px; margin:6px auto 0; }
.fact .l { font-family:'Baloo 2', system-ui, sans-serif; font-weight:700; font-size:13.5px; color:rgba(255,255,255,.85); margin-top:8px; }

/* campaign */
.campaign { max-width:900px; margin:34px auto 0; padding:0 32px; }
.ccard { background:#FFFFFF; border-radius:26px; padding:30px 36px; box-shadow:0 14px 34px rgba(8,61,73,.3); }
.crow { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.ctitle { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:20px; color:#0E5D6E; }
.cfig { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:20px; color:#B98420; }
.cfig span { font-weight:700; font-size:14px; color:#5E8791; }
.cbar { height:16px; border-radius:8px; background:#E4EEF0; margin-top:12px; overflow:hidden; }
.cbar i { display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,#DFA32B,#F0BC4A); }
.cmeta { display:flex; justify-content:space-between; gap:12px; margin-top:8px; font-family:'Heebo', system-ui, sans-serif; font-size:13px; color:#5E8791; flex-wrap:wrap; }
.amts { display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.amts .amt { border:2px solid #E4EEF0; border-radius:12px; padding:10px 20px; font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:15px; color:#0E5D6E; cursor:pointer; background:none; }
.amts .amt.on { background:#DFA32B; border-color:#DFA32B; color:#083D49; }
.other { width:110px; border:2px solid #E4EEF0; border-radius:12px; padding:10px 14px; font-family:'Baloo 2', system-ui, sans-serif; font-weight:700; font-size:15px; color:#0E5D6E; outline:none; }
.planrow { display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap; }
.plans { display:flex; background:#E4EEF0; border-radius:99px; padding:4px; }
.plan { padding:8px 18px; border-radius:99px; font-family:'Baloo 2', system-ui, sans-serif; font-weight:700; font-size:13.5px; cursor:pointer; color:#5E8791; white-space:nowrap; border:none; background:none; }
.plan.on { background:#0E5D6E; color:#FFFFFF; }
.gbtn { background:#DFA32B; color:#083D49; font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:17px; padding:13px 40px; border-radius:99px; box-shadow:0 6px 16px rgba(185,132,32,.45); cursor:pointer; border:none; }
.thanks { margin-top:14px; background:#F2F8ED; border:1.5px solid #5B7161; border-radius:12px; padding:10px 16px; font-family:'Heebo', system-ui, sans-serif; font-size:13.5px; color:#3E6B4F; }

/* parnes */
.sect { max-width:1216px; margin:44px auto 0; padding:0 32px; }
.klaf { background:linear-gradient(160deg,#F6ECD4,#EBDBAE); border-radius:22px; padding:32px 36px 36px; box-shadow:0 14px 34px rgba(8,61,73,.3); }
.ph-h { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:29px; color:#0E5D6E; }
.ph-heb { font-family:'Heebo', system-ui, sans-serif; font-weight:800; font-size:22px; color:#B98420; }
.ph-open { font-family:'Heebo', system-ui, sans-serif; font-size:13.5px; color:#7A6A3E; }
.ph-copy { font-family:'Heebo', system-ui, sans-serif; font-size:14.5px; color:#7A6A3E; margin-top:6px; }
.days { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-top:22px; }
.tile { border-radius:14px; padding:13px 14px; display:flex; flex-direction:column; justify-content:space-between; min-height:112px; cursor:pointer; text-align:left; border:none; font-family:'Heebo', system-ui, sans-serif; }
.tile.open { background:#FFFFFF; border:2px dashed #C9B778; }
.tile.taken { background:linear-gradient(180deg,#F0BC4A,#DFA32B); box-shadow:0 5px 12px rgba(8,61,73,.18); }
.tile .top { display:flex; justify-content:space-between; align-items:baseline; }
.tile .heb { font-family:'Heebo', system-ui, sans-serif; font-weight:800; font-size:25px; }
.tile .greg { font-family:'Baloo 2', system-ui, sans-serif; font-weight:700; font-size:10px; letter-spacing:.05em;
  white-space:nowrap; flex:none; }
.tile .lab { font-family:'Baloo 2', system-ui, sans-serif; font-weight:700; font-size:10px; letter-spacing:.07em; min-height:13px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tile .st { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:12.5px; line-height:1.25; margin-top:10px;
  /* MICHALASHVILI FAMILY has no space to break on and was running out of the
     tile. Break inside the word rather than overflow. */
  overflow-wrap:anywhere; word-break:break-word; hyphens:auto; }
.tile .nl { font-family:'Heebo', system-ui, sans-serif; font-size:11px; margin-top:2px; overflow-wrap:anywhere; }
.tile.open .heb { color:#0E5D6E; } .tile.open .greg, .tile.open .lab { color:#9AA6A0; }
.tile.open .st { color:#16798C; } .tile.open .nl { color:#B98420; }
.tile.taken .heb { color:#083D49; } .tile.taken .greg, .tile.taken .lab { color:#7A5A10; }
.tile.taken .st { color:#083D49; } .tile.taken .nl { color:rgba(8,61,73,.72); }

/* seats section */
.s-h { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:38px; color:#FFFFFF; text-shadow:0 3px 12px rgba(8,61,73,.45); }
.s-sub { font-family:'Yellowtail', 'Brush Script MT', cursive; font-size:30px; color:#F0BC4A; margin-top:2px; }
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; }
.tcard { background:#FFFFFF; border-radius:20px; padding:24px 26px; cursor:pointer; box-shadow:0 10px 26px rgba(8,61,73,.28); border:3px solid transparent; display:flex; flex-direction:column; text-align:left; font-family:'Heebo', system-ui, sans-serif; }
.tcard.on { border-color:#DFA32B; }
.tcard .tag { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:13px; letter-spacing:.1em; color:#B98420; }
.tcard .nm { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:24px; color:#0E5D6E; margin-top:4px; }
.tcard .ds { font-family:'Heebo', system-ui, sans-serif; font-size:13.5px; color:#5E8791; margin-top:6px; line-height:1.55; flex:1; }
.tcard .pr { display:flex; align-items:baseline; gap:6px; margin-top:14px; }
.tcard .pr b { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:32px; color:#B98420; }
.tcard .pr span { font-family:'Heebo', system-ui, sans-serif; font-size:12.5px; color:#9AA6A0; }
.tcard .bt { margin-top:16px; text-align:center; font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:14.5px; padding:11px; border-radius:99px; background:#E4EEF0; color:#0E5D6E; }
.tcard.on .bt { background:#DFA32B; color:#083D49; box-shadow:0 5px 14px rgba(185,132,32,.4); }
.pickbtn { display:inline-block; background:#FFFFFF; color:#0E5D6E; font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:15px; padding:12px 34px; border-radius:99px; box-shadow:0 6px 16px rgba(8,61,73,.35); border:none; cursor:pointer; }
.benches { text-align:center; font-family:'Heebo', system-ui, sans-serif; font-size:12.5px; color:rgba(255,255,255,.7); margin-top:12px; }

/* quote */
.quote { display:grid; grid-template-columns:1.05fr .95fr; gap:0; border-radius:22px; overflow:hidden; box-shadow:0 14px 34px rgba(8,61,73,.3); }
.qk { background:linear-gradient(160deg,#F6ECD4,#EBDBAE); padding:40px 44px; }
.qk .lbl { font-family:'Heebo', system-ui, sans-serif; font-weight:800; font-size:14px; letter-spacing:.04em; color:#8A6A1B; }
.qk .txt { font-family:'Heebo', system-ui, sans-serif; font-weight:600; font-size:24px; line-height:1.6; color:#3D2E08; margin-top:12px; }
.qk .txt mark { background:rgba(224,163,46,.35); padding:0 6px; border-radius:4px; color:inherit; }
.qd { background:#0B4A58; padding:40px 44px; display:flex; flex-direction:column; justify-content:center; }
.qd .lbl { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:13px; letter-spacing:.12em; color:#F0BC4A; }
.qd .txt { font-family:'Heebo', system-ui, sans-serif; font-size:18px; line-height:1.65; color:rgba(255,255,255,.92); margin-top:12px; }
.qd .txt i { color:#F0BC4A; }

/* in-tent display preview */
.dlabel { text-align:center; font-family:'Baloo 2', system-ui, sans-serif; font-weight:700; font-size:13px; letter-spacing:.14em; color:rgba(255,255,255,.8); margin-bottom:12px; }
.dbox { background:radial-gradient(ellipse 85% 100% at 50% 120%, #1E8FA4, #0E5D6E 60%, #083D49); border-radius:18px; border:6px solid rgba(255,255,255,.92); padding:44px 40px; text-align:center; box-shadow:0 16px 40px rgba(8,61,73,.4); }
.dbox .t { font-family:'Heebo', system-ui, sans-serif; font-weight:800; font-size:40px; color:#F0BC4A; text-shadow:0 3px 16px rgba(8,61,73,.5); }
.dbox .u { font-family:'Yellowtail', 'Brush Script MT', cursive; font-size:26px; color:rgba(255,255,255,.9); margin-top:6px; }
.dbox .n { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:34px; color:#FFFFFF; margin-top:6px; text-shadow:0 3px 12px rgba(8,61,73,.45); }
.dbox .l { font-family:'Heebo', system-ui, sans-serif; font-weight:600; font-size:15.5px; color:#E8D08E; margin-top:8px; }

/* footer */
.footer { max-width:820px; margin:0 auto; padding:clamp(30px,5vw,44px) 24px clamp(28px,4vw,40px); }

/* Three equal columns so the block is symmetrical whatever the labels say.
   The old row put two long email addresses beside one short phone number and
   centred the lot, which never lined up. */
.paygrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.14); }
@media (max-width:560px) { .paygrid { grid-template-columns:1fr; gap:18px; } }
.pay { display:flex; flex-direction:column; align-items:center; gap:5px;
  text-align:center; min-width:0; }
.pay .badge { width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
  color:#fff; font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:13px; flex:none; }
.pay .k { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:#F0BC4A; }
.pay .v { font-family:'Heebo', system-ui, sans-serif; font-size:13px; color:rgba(255,255,255,.86);
  overflow-wrap:anywhere; line-height:1.4; }
.legal { text-align:center; font-family:'Heebo', system-ui, sans-serif; font-size:12px; color:rgba(255,255,255,.6); margin-top:20px; }

/* modal */
.veil { position:fixed; inset:0; background:rgba(8,61,73,.6); display:flex; align-items:center; justify-content:center; z-index:60; padding:20px; }
.modal { width:100%; max-width:520px; background:#FFFDF7; border-radius:20px; overflow:hidden; box-shadow:0 24px 60px rgba(4,38,46,.55); }
.mhead { background:linear-gradient(160deg,#F6ECD4,#EBDBAE); padding:22px 28px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.mhead .k { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:13px; letter-spacing:.1em; color:#8A6A1B; }
.mhead .d { font-family:'Heebo', system-ui, sans-serif; font-weight:800; font-size:26px; color:#0E5D6E; }
.mhead .d span { font-family:'Baloo 2', system-ui, sans-serif; font-weight:700; font-size:14px; color:#7A6A3E; }
.mx { width:32px; height:32px; border-radius:50%; background:rgba(14,93,110,.14); color:#0E5D6E; display:flex; align-items:center; justify-content:center; font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:16px; cursor:pointer; border:none; flex:none; }
.mbody { padding:24px 28px 28px; display:flex; flex-direction:column; gap:12px; }

/* Paired fields. Used by seats, donate, the dedication panel and checkout.
   The breakpoint is 480 rather than 560 because these sit inside a 620px modal:
   at 560 the pair stayed stacked on exactly the widths where it had room. */
.two { display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:480px) { .two { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.two > * { min-width:0; }
.offers { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.off { border:1px solid #E2D3A4; border-radius:8px; padding:11px 14px; cursor:pointer; color:#0E5D6E; background:rgba(255,255,255,.6); text-align:left; transition:border-color .13s, background .13s; }
.off:hover { border-color:#DFA32B; background:#fff; }
.off.on { background:linear-gradient(120deg,#F6ECD4,#EBDBAE); border-color:#DFA32B; box-shadow:0 3px 10px rgba(185,132,32,.25); }
.off:disabled { opacity:.45; cursor:not-allowed; }
.off b { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:14px; display:block; line-height:1.25; }
.off span { font-family:'Baloo 2', system-ui, sans-serif; font-weight:700; font-size:12.5px; color:#B98420; }
.minput { width:100%; background:rgba(255,255,255,.75); border:1px solid #E2D3A4;
  border-radius:8px; padding:13px 15px; font-family:'Heebo', system-ui, sans-serif; font-weight:500; font-size:15px;
  color:#0E5D6E; outline:none; }
.minput::placeholder { color:#A99B78; font-weight:400; }
.minput:focus { border-color:#DFA32B; background:#fff; box-shadow:0 0 0 3px rgba(223,163,43,.16); }
select.minput { appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B98420' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; }
.mconfirm { background:#DFA32B; color:#083D49; font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:17px; padding:14px; border-radius:99px; text-align:center; box-shadow:0 6px 16px rgba(185,132,32,.45); cursor:pointer; border:none; }
.mnote { text-align:center; font-family:'Heebo', system-ui, sans-serif; font-size:12px; color:#A99B78; }

/* seats page */
.seatgrid { max-width:1216px; margin:28px auto 0; padding:0 32px; display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:start; }
.white22 { background:#FFFFFF; border-radius:22px; padding:28px 30px; box-shadow:0 14px 34px rgba(8,61,73,.3); }
.klaf22 { background:linear-gradient(160deg,#F6ECD4,#EBDBAE); border-radius:22px; padding:26px 28px; box-shadow:0 14px 34px rgba(8,61,73,.3); }
.ph16 { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:16px; color:#0E5D6E; }
.sub13 { font-family:'Heebo', system-ui, sans-serif; font-size:13px; color:#5E8791; margin-top:2px; }
.beis { background:linear-gradient(90deg,#8C3B2E,#A3442F); border-radius:10px; padding:10px; text-align:center; font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:13px; letter-spacing:.2em; color:#F6ECD4; margin-top:18px; }
.secs { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:12px; }
.sec { border:2px solid #E4EEF0; border-radius:14px; padding:14px 16px; cursor:pointer; background:none; text-align:left; font-family:'Heebo', system-ui, sans-serif; }
.sec.on { border-color:#DFA32B; background:#FBF6E7; box-shadow:0 5px 14px rgba(185,132,32,.25); }
.sec { min-width:0; }
.sec b { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:15px; color:#0E5D6E; display:block;
  overflow-wrap:anywhere; }
.sec .s { font-family:'Heebo', system-ui, sans-serif; font-size:11.5px; color:#5E8791; display:block; }
.sec .dots { height:74px; margin-top:10px; border-radius:8px; background-size:13px 13px; display:block; }
.sec .av { font-family:'Baloo 2', system-ui, sans-serif; font-weight:700; font-size:11.5px; margin-top:8px; display:block; }
.wsec { width:100%; margin-top:10px; }
.legend { display:flex; gap:18px; margin-top:16px; font-family:'Heebo', system-ui, sans-serif; font-size:11.5px; color:#5E8791; }
.legend i { width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:6px; }
.trow { border:2px solid #E4EEF0; border-radius:14px; padding:14px 16px; cursor:pointer; background:none; width:100%; text-align:left; font-family:'Heebo', system-ui, sans-serif; }
.trow.on { border-color:#DFA32B; background:#FBF6E7; box-shadow:0 5px 14px rgba(185,132,32,.25); }
.trow .a { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.trow .a b { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:14px; color:#0E5D6E; }
.trow .a span { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:14px; color:#B98420; }
.trow .d { font-family:'Heebo', system-ui, sans-serif; font-size:11.5px; color:#7A6A3E; }
.qtyrow { display:flex; justify-content:space-between; align-items:center; margin-top:16px; }
.qty { display:flex; align-items:center; gap:12px; }
.qty button { width:32px; height:32px; border-radius:50%; background:#FFFFFF; color:#0E5D6E; font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 3px 8px rgba(8,61,73,.15); border:none; }
.qty b { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:20px; color:#0E5D6E; min-width:22px; text-align:center; }
.dash { border-top:2px dashed #C9B778; margin-top:16px; padding-top:14px; }
.dline { display:flex; justify-content:space-between; gap:12px; font-family:'Heebo', system-ui, sans-serif; font-size:13px;
  color:#7A6A3E; min-width:0; }
.dline span:last-child { text-align:right; overflow-wrap:anywhere; }
.dtot { display:flex; justify-content:space-between; align-items:baseline; margin-top:6px; }
.dtot b { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:16px; color:#0E5D6E; }
.dtot span { font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:28px; color:#B98420; }
.contbtn { display:block; width:100%; margin-top:14px; background:#DFA32B; color:#083D49; font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:16px; padding:13px; border-radius:99px; text-align:center; box-shadow:0 6px 16px rgba(185,132,32,.45); border:none; cursor:pointer; }

/* checkout */
.cogrid { max-width:1120px; margin:26px auto 0; padding:0 32px; display:grid; grid-template-columns:1.45fr 1fr; gap:20px; align-items:start; }
.cofields { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.cofields input, .cardrow input { border:2px solid #E4EEF0; border-radius:12px; padding:12px 16px; font-family:'Heebo', system-ui, sans-serif; font-weight:500; font-size:14.5px; color:#0E5D6E; outline:none; width:100%; }
.cofields input.full { grid-column:1 / -1; }
.methods { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.meth { border:2px solid #E4EEF0; border-radius:12px; padding:10px 18px; font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:14px; color:#0E5D6E; cursor:pointer; background:none; }
.meth.on { background:#DFA32B; border-color:#DFA32B; color:#083D49; }
.cardrow { display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; margin-top:14px; }
.alt { margin-top:14px; background:#F6ECD4; border-radius:14px; padding:16px 20px; font-family:'Heebo', system-ui, sans-serif; font-size:14px; color:#7A6A3E; }
.paybtn { margin-top:22px; background:#DFA32B; color:#083D49; font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:17px; padding:14px; border-radius:99px; text-align:center; cursor:pointer; border:none; width:100%; box-shadow:0 6px 16px rgba(185,132,32,.45); }
.taxnote { text-align:center; font-family:'Heebo', system-ui, sans-serif; font-size:12px; color:#9AA6A0; margin-top:10px; }
.gives { display:flex; gap:6px; margin-top:12px; }
.give { border:2px solid #E4EEF0; border-radius:12px; padding:8px 14px; font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:13px; color:#0E5D6E; cursor:pointer; background:none; }
.give.on { background:#DFA32B; border-color:#DFA32B; color:#083D49; }
.quotebox { background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.25); border-radius:18px; padding:16px 20px; font-family:'Heebo', system-ui, sans-serif; font-size:13px; color:rgba(255,255,255,.9); line-height:1.6; }
.secure { display:flex; align-items:center; gap:8px; font-family:'Baloo 2', system-ui, sans-serif; font-weight:700; font-size:13px; color:rgba(255,255,255,.85); }
.secure i { width:9px; height:9px; border-radius:50%; background:#5BD08A; display:inline-block; }
.done { width:100%; max-width:460px; background:#FFFFFF; border-radius:26px; padding:40px 36px; text-align:center; box-shadow:0 24px 60px rgba(8,61,73,.5); }
.doneck { width:74px; height:74px; border-radius:50%; background:linear-gradient(180deg,#F0BC4A,#DFA32B); margin:0 auto; display:flex; align-items:center; justify-content:center; font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:34px; color:#083D49; box-shadow:0 8px 20px rgba(185,132,32,.45); }

/* full-screen tent display */
.fs { height:100vh; display:flex; flex-direction:column; background:radial-gradient(ellipse 85% 100% at 50% 118%, #1E8FA4, #0E5D6E 58%, #083D49); }
.fs .hd { display:flex; justify-content:space-between; align-items:center; padding:26px 44px 0; gap:12px; }
.fs .hd .r { font-family:'Heebo', system-ui, sans-serif; font-weight:600; font-size:17px; color:rgba(255,255,255,.85); }
.fs .mid { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 60px; }
.fs .t { font-family:'Heebo', system-ui, sans-serif; font-weight:800; font-size:74px; color:#F0BC4A; text-shadow:0 4px 30px rgba(8,61,73,.6); line-height:1; }
.fs .u { font-family:'Yellowtail', 'Brush Script MT', cursive; font-size:38px; color:rgba(255,255,255,.9); margin-top:16px; }
.fs .n { overflow-wrap:anywhere; font-family:'Baloo 2', system-ui, sans-serif; font-weight:800; font-size:58px; color:#FFFFFF; margin-top:14px; text-shadow:0 4px 18px rgba(8,61,73,.5); }
.fs .l { overflow-wrap:anywhere; font-family:'Heebo', system-ui, sans-serif; font-weight:600; font-size:24px; color:#E8D08E; margin-top:16px; }
.fs .dots { display:flex; gap:9px; margin-top:44px; }
.fs .dots i { width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.3); }
.fs .dots i.on { background:#F0BC4A; box-shadow:0 0 12px rgba(240,188,74,.7); }
.fs .ft { border-top:1.5px solid rgba(255,255,255,.18); padding:16px 44px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-family:'Baloo 2', system-ui, sans-serif; font-weight:700; font-size:15px; letter-spacing:.08em; color:rgba(255,255,255,.9); }
.fs .ft b { font-weight:800; letter-spacing:.06em; color:#F0BC4A; }
.fs .ft em { color:#F0BC4A; font-style:normal; }
.fade { transition:opacity .6s ease; }

/* --- phone: the only additions. Desktop rendering is untouched. --- */
@media (max-width:900px) {
  .navwrap, .hero, .campaign, .sect, .seatgrid, .cogrid, .footer { padding-left:18px; padding-right:18px; }
  .navlinks { gap:14px; font-size:13px; }
  .navlinks a:not(.donate) { display:none; }
  .h1 { font-size:40px; } .h2 { font-size:32px; }
  .facts { gap:22px 30px; }
  .ccard { padding:22px 20px; } .klaf { padding:24px 20px 28px; }
  .days { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .tiers { grid-template-columns:1fr; }
  .quote { grid-template-columns:1fr; } .qk, .qd { padding:28px 24px; }
  .qk .txt { font-size:20px; } .qd .txt { font-size:16px; }
  .s-h { font-size:28px; } .s-sub { font-size:24px; }
  .seatgrid, .cogrid { grid-template-columns:1fr; }
  .secs { grid-template-columns:1fr; }
  .white22 { padding:22px 20px; } .klaf22 { padding:22px 20px; }
  .cofields { grid-template-columns:1fr; } .cardrow { grid-template-columns:1fr 1fr; }
  .dbox { padding:30px 22px; } .dbox .t { font-size:30px; } .dbox .n { font-size:24px; } .dbox .u { font-size:20px; }
  .fs .t { font-size:44px; } .fs .n { font-size:32px; } .fs .u { font-size:24px; } .fs .l { font-size:16px; }
  .fs .hd, .fs .ft { padding-left:20px; padding-right:20px; } .fs .ft { font-size:11px; }
}

/* ============================================================
   CAMPAIGN

   The page should feel like the tent lit at night on Eastern
   Parkway, not like a fundraising template. Two ideas carry it:

   1. Klaf is the surface that carries a name. Dedications use it,
      so sponsorship opportunities and the donor wall use it too —
      giving and dedicating are the same act here.
   2. The ask never leaves the screen. The total bar sticks to the
      bottom on a phone and to the top on a desktop, so wherever
      somebody is on the page, the number and the button are there.
   ============================================================ */

/* The page-level .tent class carries min-height:100vh, which is right for a
   whole page and catastrophic as a wrapper around just a nav. These two exist
   so the campaign page can have a teal nav and a teal footer without two empty
   screens of gradient in between. */
.c-nav { background: linear-gradient(180deg, var(--teal-2), var(--teal-3)); padding-bottom: 10px; }

.c-foot { background: var(--teal-3); }
.c-foot .footer { padding-top: clamp(34px,5vw,48px); }

/* ---------- hero ---------- */
.c-hero { position: relative; min-height: clamp(380px, 56vw, 560px);
  display: flex; align-items: flex-end; overflow: hidden; background: var(--teal-4); }
.c-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center 62%; }
/* Teal over the photo rather than plain black: the tent is lit from inside. */
.c-hero::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(8,61,73,.30) 0%, rgba(8,61,73,.20) 38%, rgba(8,61,73,.92) 100%),
  radial-gradient(ellipse 70% 50% at 50% 92%, rgba(36,147,168,.45), transparent 70%); }
.c-hero-in { position: relative; z-index: 2; width: 100%; text-align: center;
  padding: 0 clamp(18px,5vw,40px) clamp(26px,5vw,48px); }
.c-kicker { font-family: var(--head); font-weight: 700; font-size: clamp(10px,1.5vw,12.5px);
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 10px; }
.c-title { font-family: var(--head); font-weight: 800; color: #fff;
  font-size: clamp(2rem,7.2vw,4.2rem); line-height: .98; letter-spacing: -.01em;
  text-shadow: 0 4px 26px rgba(4,38,46,.6); }
.c-script { font-family: var(--script); color: var(--gold-lt);
  font-size: clamp(1.4rem,4.4vw,2.6rem); line-height: 1.2; margin-top: 6px;
  text-shadow: 0 3px 18px rgba(4,38,46,.5); }

/* ---------- the ask, always present ---------- */
.c-ask { position: sticky; top: 0; z-index: 60; background: rgba(8,61,73,.97);
  backdrop-filter: blur(10px); border-bottom: 2px solid var(--gold);
  padding: 12px clamp(16px,4vw,40px); }
.c-ask-in { max-width: 1140px; margin: 0 auto; display: grid; gap: 9px 22px;
  grid-template-columns: 1fr auto;
  grid-template-areas: "figs button" "track track";
  align-items: center; }
.c-figs { grid-area: figs; }
.c-track { grid-area: track; }
.c-donate { grid-area: button; }
@media (min-width: 900px) {
  .c-ask-in { grid-template-columns: auto 1fr auto; gap: 26px;
    grid-template-areas: "figs track button"; }
}

.c-figs { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.c-raised { font-family: var(--head); font-weight: 800; color: #fff;
  font-size: clamp(1.6rem,5vw,2.4rem); line-height: 1; letter-spacing: -.01em; }
.c-goal { font-family: var(--body); font-size: clamp(12px,1.6vw,14px); color: rgba(255,255,255,.7);
  line-height: 1.35; }
.c-goal b { color: #fff; font-weight: 600; }
.c-pct { font-family: var(--head); font-weight: 800; color: var(--gold-lt);
  font-size: clamp(1.1rem,3vw,1.6rem); line-height: 1; }

.c-track { height: 8px; border-radius: 99px;
  background: rgba(255,255,255,.16); overflow: hidden; }
@media (min-width: 900px) { .c-track { height: 10px; } }
.c-track i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--gold-dk), var(--gold-lt));
  box-shadow: 0 0 14px rgba(240,188,74,.5); transition: width 1s cubic-bezier(.2,.7,.3,1); }

.c-donate { background: var(--gold); color: var(--teal-4); font-family: var(--head);
  font-weight: 800; font-size: 15px; letter-spacing: .06em; padding: 14px 30px;
  border-radius: 99px; border: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(185,132,32,.45); }
.c-donate:hover { background: var(--gold-lt); }
@media (max-width: 899px) { .c-donate { padding: 14px 22px; font-size: 14px; } }

/* ---------- the story ---------- */
.c-story { background: var(--tentbg); padding: clamp(34px,6vw,60px) clamp(18px,4vw,32px);
  text-align: center; }
.c-story-in { max-width: 980px; margin: 0 auto; }
.c-lede { font-family: var(--body); font-size: clamp(1rem,2.1vw,1.15rem); line-height: 1.7;
  color: rgba(255,255,255,.88); max-width: 54ch; margin: 0 auto; }
.c-facts { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px 16px;
  margin-top: clamp(26px,4vw,38px); }
@media (max-width: 640px) { .c-facts { grid-template-columns: repeat(2,1fr); } }
.c-fact b { display: block; font-family: var(--head); font-weight: 800;
  font-size: clamp(1.5rem,4vw,2.1rem); color: var(--gold-lt); line-height: 1; }
.c-fact span { display: block; font-family: var(--head); font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 7px; }

/* ---------- opportunities, as plaques ---------- */
.c-ops { background: var(--tentbg); padding: clamp(30px,5vw,52px) 0; }
.c-head { text-align: center; margin-bottom: clamp(16px,2.5vw,24px); padding: 0 20px; }
.c-head .k { font-family: var(--head); font-weight: 700; font-size: 12px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold-lt); }
.c-head h2 { font-family: var(--head); font-weight: 800; color: #fff;
  font-size: clamp(1.6rem,4.6vw,2.4rem); margin: 8px 0 0;
  text-shadow: 0 3px 16px rgba(4,38,46,.4); }
.c-head p { font-family: var(--body); font-size: 13.5px; color: rgba(255,255,255,.8);
  max-width: 50ch; margin: 7px auto 0; }
/* The donor wall sits on a pale ground, so its heading stays dark. */
.c-wall .c-head .k { color: var(--gold-dk); }
.c-wall .c-head h2 { color: var(--teal-3); text-shadow: none; }
.c-wall .c-head p { color: var(--klaf-ink); }

/* A price list is not an ask. This is a chooser: pick one, or type your own,
   then one large button that already says what it will do. */
.c-opgrid { display: grid; gap: 8px; grid-template-columns: repeat(3,1fr);
  max-width: 720px; margin: 0 auto; padding: 0 clamp(14px,4vw,32px); }
@media (max-width: 560px) { .c-opgrid { grid-template-columns: repeat(2,1fr); gap: 7px; } }

.c-op { display: block; width: 100%; text-align: center; cursor: pointer; min-width: 0;
  background: rgba(255,255,255,.10); border: 1.5px solid rgba(246,236,212,.32);
  border-radius: 10px; padding: 13px 8px; font-family: var(--body);
  transition: background .14s, border-color .14s, transform .14s; }
.c-op:hover { background: rgba(255,255,255,.17); border-color: var(--gold-lt); }
.c-op .amt { display: block; font-family: var(--head); font-weight: 800;
  color: var(--gold-lt); font-size: clamp(1.15rem,3.4vw,1.4rem); line-height: 1.1; }
.c-op b { display: block; font-family: var(--head); font-weight: 700; color: #fff;
  font-size: clamp(.76rem,2vw,.85rem); line-height: 1.25; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-op .sub { display: none; }
.c-op .icon { display: none; }

/* Chosen: the gold comes forward and the whole thing reads as set. */
.c-op.on { background: var(--gold); border-color: var(--gold); }
.c-op.on .amt { color: var(--teal-4); }
.c-op.on b { color: rgba(8,61,73,.78); }

/* Type your own, in the same row of choices. */
.c-any { max-width: 720px; margin: 8px auto 0; padding: 0 clamp(14px,4vw,32px); }
.c-anyfield { display: flex; align-items: center; gap: 8px; min-width: 0;
  background: rgba(255,255,255,.10); border: 1.5px solid rgba(246,236,212,.32);
  border-radius: 10px; padding: 0 16px; transition: border-color .14s, background .14s; }
.c-anyfield:focus-within { border-color: var(--gold-lt); background: rgba(255,255,255,.17); }
.c-anyfield .cur { font-family: var(--head); font-weight: 800; color: var(--gold-lt);
  font-size: 1.05rem; flex: none; }
.c-anyfield input { flex: 1 1 0; width: 100%; min-width: 0; border: none; background: none;
  padding: 13px 0; font-family: var(--head); font-weight: 700; font-size: 1rem; color: #fff; }
.c-anyfield input:focus { outline: none; }
.c-anyfield input::placeholder { color: rgba(255,255,255,.55); font-weight: 400; }
.c-anyfield input::-webkit-outer-spin-button,
.c-anyfield input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.c-anyfield input[type=number] { -moz-appearance: textfield; }

/* The ask itself. Always live, always says what it will do. */
.c-cta { max-width: 720px; margin: 14px auto 0; padding: 0 clamp(14px,4vw,32px); }
.c-cta button { width: 100%; background: var(--gold); color: var(--teal-4);
  font-family: var(--head); font-weight: 800; font-size: clamp(1rem,2.6vw,1.15rem);
  letter-spacing: .04em; padding: 17px 24px; border-radius: 99px; border: none;
  cursor: pointer; box-shadow: 0 8px 22px rgba(185,132,32,.45); }
.c-cta button:hover { background: var(--gold-lt); }
.c-cta .note { text-align: center; font-size: 12px; color: rgba(255,255,255,.6); margin-top: 10px; }

/* ---------- the wall ---------- */
.c-wall { background: #F4F8F9; padding: clamp(34px,6vw,64px) 0; }
.c-tools { display: flex; gap: 10px; max-width: 1140px; margin: 0 auto clamp(20px,3vw,28px);
  padding: 0 clamp(16px,4vw,32px); flex-wrap: wrap; justify-content: center; }
.c-tools input, .c-tools select { width: auto; flex: 1 1 200px; max-width: 260px;
  border-radius: 99px; border: 1px solid #D5E3E6; background: #fff;
  padding: 11px 18px; font-size: 14px; color: var(--teal-3); font-family: var(--body); }
.c-tools select { appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E8791' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.c-tools input:focus, .c-tools select:focus { outline: none; border-color: var(--gold); }
.c-wallgrid { display: grid; gap: 10px; grid-template-columns: repeat(3,1fr);
  max-width: 1140px; margin: 0 auto; padding: 0 clamp(16px,4vw,32px); }
@media (max-width: 920px) { .c-wallgrid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 580px) { .c-wallgrid { grid-template-columns: 1fr; } }

.c-gift { background: #fff; border-radius: 10px; padding: 15px 17px;
  border-left: 3px solid var(--gold); display: flex; justify-content: space-between;
  align-items: baseline; gap: 14px; min-width: 0; }
.c-gift .who { min-width: 0; }
.c-gift .who b { display: block; font-family: var(--head); font-weight: 800; font-size: 1rem;
  color: var(--teal-3); line-height: 1.25; overflow-wrap: anywhere; }
.c-gift .who time { display: block; font-size: 11.5px; color: #9BB0B5; margin-top: 2px; }
.c-gift .who em { display: block; font-style: normal; font-size: 12.5px; color: var(--klaf-ink);
  margin-top: 6px; overflow-wrap: anywhere; }
.c-gift .amt { font-family: var(--head); font-weight: 800; font-size: 1.15rem;
  color: var(--gold-dk); white-space: nowrap; }
/* An anonymous gift is the same gift. The word Anonymous already says who it
   is from; a greyed edge on top of that just makes $770 look like a lesser
   row than $46. */

.c-more { display: block; margin: clamp(22px,4vw,30px) auto 0; background: none;
  border: 1px solid #CBDDE0; color: var(--teal-3); font-family: var(--head); font-weight: 800;
  font-size: 13px; letter-spacing: .08em; padding: 13px 30px; border-radius: 99px; cursor: pointer; }
.c-more:hover { border-color: var(--gold); color: var(--gold-dk); }
.c-empty { text-align: center; padding: 40px 20px; color: var(--sea); font-size: 14.5px; }

/* ---------- donate panel ---------- */
.c-panel { background: #F7EFDC; border-radius: 12px; padding: 16px; display: grid;
  gap: 12px; grid-template-columns: minmax(0,1fr); }
.c-panel > *, .c-row2 > * { min-width: 0; }
@media (min-width: 560px) { .c-panel .c-row2 { display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 12px; align-items: end; } }
.c-panel .c-row2 > * { min-width: 0; }
.c-lab { font-family: var(--head); font-weight: 800; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-dk); margin-bottom: 7px; }
.c-amtbox { background: #fff; border: 1px solid #E2D3A4; border-radius: 8px;
  padding: 11px 15px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.c-amtbox:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(223,163,43,.16); }
.c-amtbox .cur { font-family: var(--head); font-weight: 800; font-size: 22px; color: var(--gold-dk); }
.c-amtbox input { flex: 1 1 0; width: 100%; min-width: 0; border: none; padding: 0;
  background: none; font-family: var(--head); font-weight: 800; font-size: 28px;
  color: var(--teal-3); text-align: right; }
/* No spinner arrows: they sit badly beside a large right-aligned figure. */
.c-amtbox input::-webkit-outer-spin-button,
.c-amtbox input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.c-amtbox input[type=number] { -moz-appearance: textfield; }
.c-amtbox input:focus { outline: none; }

/* A strip, not a column. Squeezed into a third of the panel the organisation
   name wrapped four times and the figure came out smaller than its own label. */
.c-receive { background: linear-gradient(120deg, var(--teal-3), var(--teal-4));
  border-radius: 8px; padding: 14px 18px; min-width: 0; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.c-receive .org { font-family: var(--body); font-size: 12.5px; color: rgba(255,255,255,.72);
  line-height: 1.35; min-width: 0; }
.c-receive .org b { display: block; font-family: var(--head); font-weight: 800;
  font-size: 14.5px; color: #fff; }
.c-receive .fig { font-family: var(--head); font-weight: 800; font-size: clamp(1.5rem,5vw,1.9rem);
  color: var(--gold-lt); line-height: 1; white-space: nowrap; }
.c-receive .per { font-size: 11.5px; color: rgba(255,255,255,.7); margin-top: 3px; text-align: right; }


.c-anyfield input::-webkit-outer-spin-button,
.c-anyfield input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.c-anyfield input[type=number] { -moz-appearance: textfield; }

/* The last browser-default control in the panel. Gold when ticked, like
   everything else that means yes here. */
.check { display: flex; gap: 10px; align-items: center; margin-top: 4px; cursor: pointer;
  font-family:'Heebo', system-ui, sans-serif; font-size: 14px; color: #7A6A3E; user-select: none; }
.check input { appearance: none; width: 20px; height: 20px; flex: none; margin: 0;
  border: 1px solid #E2D3A4; border-radius: 5px; background: rgba(255,255,255,.75);
  cursor: pointer; display: grid; place-content: center; transition: background .13s, border-color .13s; }
.check input::after { content: ''; width: 11px; height: 6px; border-left: 2.5px solid #083D49;
  border-bottom: 2.5px solid #083D49; transform: rotate(-45deg) scale(0); transform-origin: center;
  transition: transform .13s ease; margin-top: -3px; }
.check input:checked { background: #DFA32B; border-color: #DFA32B; }
.check input:checked::after { transform: rotate(-45deg) scale(1); }
.check input:focus-visible { outline: 2px solid #DFA32B; outline-offset: 2px; }
.check:hover input { border-color: #DFA32B; }

/* ============================================================
   MOTION
   Transform and opacity only. Everything here is inside a
   no-preference query, so a person who has asked their device for
   less movement gets a still page with nothing missing.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* --- reveal on scroll --- */
  .will-reveal { opacity: 0; transform: translateY(14px); }
  .will-reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .55s cubic-bezier(.22,.8,.3,1),
                transform .55s cubic-bezier(.22,.8,.3,1);
    transition-delay: calc(var(--i, 0) * var(--step, 40ms));
  }

  /* --- press: a tap has no hover, so it dips while held --- */
  .is-press { transform: scale(.975) !important; transition: transform .07s ease !important; }
  .c-op.is-press, .trow.is-press, .sec.is-press { transform: scale(.99) translateY(0) !important; }

  /* --- buttons lift --- */
  .btn, .c-donate, .contbtn, .mconfirm, .pickbtn, .cta, .c-any button, .gbtn {
    transition: background .16s ease, transform .16s cubic-bezier(.22,.8,.3,1),
                box-shadow .16s ease; }
  .btn:hover, .c-donate:hover, .contbtn:hover, .mconfirm:hover,
  .pickbtn:hover, .cta:hover, .c-any button:hover:not(:disabled), .gbtn:hover {
    transform: translateY(-2px); }

  /* --- the progress bar fills, and keeps a slow travelling sheen while
         the campaign is open, so the page looks alive on a screen --- */
  .c-track i { transition: width 1.15s cubic-bezier(.16,.84,.34,1); position: relative; overflow: hidden; }
  .c-track i::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: sheen 3.4s cubic-bezier(.4,0,.2,1) 1.4s infinite; }
  @keyframes sheen { to { transform: translateX(220%); } }

  /* --- a figure that just changed --- */
  .is-pulse { animation: pulse .42s cubic-bezier(.3,1.4,.5,1); }
  @keyframes pulse { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }

  /* --- panels come from the middle rather than appearing --- */
  .veil { animation: veilin .22s ease both; }
  .modal { animation: modalin .3s cubic-bezier(.22,1.2,.4,1) both; }
  @keyframes veilin { from { opacity: 0; } }
  @keyframes modalin { from { opacity: 0; transform: translateY(16px) scale(.97); } }

  /* --- day tiles and seat sections arrive in sequence --- */
  .tile, .c-gift, .c-op { transition: transform .14s cubic-bezier(.22,.8,.3,1), box-shadow .14s ease,
                                      border-color .14s ease, background .14s ease; }
  .c-gift:hover { transform: translateX(3px); }
  .tile:hover { transform: translateY(-2px); }

  /* --- the gold on the tent screen breathes --- */
  .fs .t { animation: glow 5.5s ease-in-out infinite; }
  @keyframes glow {
    0%, 100% { text-shadow: 0 4px 30px rgba(8,61,73,.6); }
    50%      { text-shadow: 0 4px 46px rgba(240,188,74,.45), 0 4px 30px rgba(8,61,73,.6); } }

  /* --- toast --- */
  #toast { animation: toastin .26s cubic-bezier(.22,1.2,.4,1) both; }
  @keyframes toastin { from { opacity: 0; transform: translate(-50%, 14px); } }

  /* --- the hero settles as the page opens --- */
  .c-hero img { animation: heroin 1.6s cubic-bezier(.16,.84,.34,1) both; }
  @keyframes heroin { from { transform: scale(1.06); } }
  .c-title, .c-script, .c-kicker { animation: risein .7s cubic-bezier(.22,.8,.3,1) both; }
  .c-kicker { animation-delay: .05s; }
  .c-title  { animation-delay: .12s; }
  .c-script { animation-delay: .2s; }
  @keyframes risein { from { opacity: 0; transform: translateY(12px); } }

  /* --- fields --- */
  .minput, input, select, textarea { transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; }
  .check input { transition: background .14s ease, border-color .14s ease; }
}

/* Focus is never animated away: it has to be instant and obvious. */
.btn:focus-visible, .c-donate:focus-visible, .contbtn:focus-visible,
.mconfirm:focus-visible, .c-op:focus-visible, .obtn:focus-visible {
  outline: 3px solid var(--gold-lt); outline-offset: 3px; }

/* ============================================================
   THINGS THAT WERE MISSING

   These are used by the pages and were never in this stylesheet — the
   same loss that took :root, .two and the amount chip. Kiosk, tables,
   the door screens, and the base element rules the extraction dropped.
   ============================================================ */

/* ---------- base elements ---------- */
h1, h2, h3 { margin: 0 0 .4em; font-family: var(--head); font-weight: 800;
  line-height: 1.15; color: inherit; }
p { margin: 0 0 1em; }
select, textarea { font-family: var(--body); font-size: 16px; color: var(--teal-3); }
button { font-family: var(--head); }
label { display: block; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-family: var(--body);
  font-size: 14.5px; color: var(--teal-3); }
th { text-align: left; font-family: var(--head); font-weight: 700; font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--sea);
  padding: 12px 16px; border-bottom: 1px solid var(--sea-lt); }
td { padding: 14px 16px; border-bottom: 1px solid var(--sea-lt); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tbody tr:last-child td { font-family: var(--head); font-weight: 800; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
  font-family: var(--head); font-weight: 800; color: var(--gold-dk); }

/* ---------- kiosk ----------
   A screen somebody walks up to in a tent. It has one job: get a decision
   out of a person who is standing there for four seconds. So the type is
   large and plain, the actions look like actions, and the primary one is
   gold while the rest are not. The script face is gone from here - it is
   an accent for a headline, not a label on a button. */
.kiosk { min-height: 82vh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px,6vh,64px) clamp(18px,5vw,48px); text-align: center; }
.kiosk .h1 { font-family: var(--head); font-weight: 800; color: #fff;
  font-size: clamp(2.6rem,8vw,5rem) !important; line-height: .95; letter-spacing: -.015em;
  text-shadow: 0 6px 34px rgba(4,38,46,.5); }
.kiosk .h2 { font-family: var(--head) !important; font-weight: 700;
  font-size: clamp(.85rem,2vw,1.05rem) !important; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-lt); margin-top: 16px; }

.kgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  margin-top: clamp(28px,6vh,54px); max-width: 1000px; margin-inline: auto; width: 100%; }

.kbtn { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: clamp(28px,5vh,46px) 22px; border-radius: 20px; text-decoration: none;
  background: rgba(255,255,255,.09); border: 2px solid rgba(246,236,212,.3);
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease; }
.kbtn:hover { transform: translateY(-4px); background: rgba(255,255,255,.15);
  border-color: var(--gold-lt); }
.kbtn b { font-family: var(--head); font-weight: 800; color: #fff;
  font-size: clamp(1.35rem,3.4vw,1.85rem); line-height: 1.1; letter-spacing: -.005em;
  /* PARNES HAYOM wraps and GIVE does not, so the room for two lines is
     reserved on all of them and the cards read as a set. */
  display: flex; align-items: center; justify-content: center; min-height: 2.2em; }
.kbtn em { font-family: var(--body); font-style: normal; font-weight: 500;
  font-size: clamp(.82rem,1.8vw,.95rem); color: rgba(255,255,255,.72); line-height: 1.35;
  display: flex; align-items: center; justify-content: center; min-height: 2.7em;
  max-width: 22ch; }
.kbtn .go { font-family: var(--head); font-weight: 800; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-lt); margin-top: 4px; }

/* Stacked one per row, nothing needs reserving: they already line up, and the
   reserved space just made each card a third of a phone screen tall. */
@media (max-width: 560px) {
  .kbtn { flex-direction: row; flex-wrap: wrap; justify-content: flex-start;
    text-align: left; gap: 2px 12px; padding: 18px 20px; border-radius: 16px; }
  .kbtn b { min-height: 0; display: block; width: 100%; font-size: 1.4rem; }
  .kbtn em { min-height: 0; display: block; max-width: none; width: 100%; }
  .kbtn .go { margin-top: 6px; }
  .kiosk { min-height: auto; padding-top: clamp(24px,5vh,40px); }
}

/* The one we most want pressed does not look like the others. */
.kbtn.primary { background: linear-gradient(160deg, var(--gold-lt), var(--gold));
  border-color: var(--gold-lt); box-shadow: 0 12px 34px rgba(185,132,32,.45); }
.kbtn.primary b { color: var(--teal-4); }
.kbtn.primary em { color: rgba(8,61,73,.72); }
.kbtn.primary .go { color: rgba(8,61,73,.8); }
.kbtn.primary:hover { background: linear-gradient(160deg,#F7CB6A, var(--gold-lt)); }

/* ---------- the door ---------- */
.door { max-width: 560px; margin: 0 auto; padding: 22px 18px 70px; }
.big-ok, .big-no { text-align: center; padding: clamp(24px,5vw,34px) 18px;
  border-radius: 16px; margin-top: 14px; }
.big-ok { background: #E3F0E8; border: 2px solid #2E6B47; }
.big-no { background: #FBE9E6; border: 2px solid #A3442F; }
.big-ok h2, .big-no h2 { font-family: var(--head); font-weight: 800; color: var(--teal-3);
  font-size: clamp(1.3rem,4vw,1.7rem); margin: 0 0 4px; }
.att { margin-bottom: 8px; }

/* Something re-rendered that has already made its entrance: show it, do not
   play it again. */
.no-anim, .no-anim * { animation: none !important; }
.no-anim .will-reveal, .no-anim [data-reveal] { transition: none !important;
  opacity: 1 !important; transform: none !important; }

/* ============================================================
   LIVING GRAPHICS
   ============================================================ */

/* --- drifting light in the dark bands --- */
.motes { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; }
.c-story, .c-ops, .c-hero { position: relative; }
.c-story > *:not(.motes), .c-ops > *:not(.motes) { position: relative; z-index: 1; }
.motes { position: absolute !important; }

/* --- a glow that follows the pointer --- */
.has-glow { position: relative; }
.has-glow::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),
    rgba(240,188,74,.13), transparent 62%);
  opacity: 0; transition: opacity .35s ease; z-index: 0; }
.has-glow:hover::before { opacity: 1; }

/* --- the tent --- */
.tentgfx { max-width: 760px; margin: clamp(20px,4vw,34px) auto 0; padding: 0 18px; }
.tentgfx svg { width: 100%; height: auto; display: block; overflow: visible; }
.tentgfx .bay rect { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.22); stroke-width: 1; }
.tentgfx .bay line { stroke: rgba(255,255,255,.18); stroke-width: 1; }
.tentgfx .bay.on rect { fill: url(#glassOn); stroke: rgba(255,227,161,.75); }
.tentgfx .bay.on line { stroke: rgba(255,227,161,.45); }

@media (prefers-reduced-motion: no-preference) {
  /* Panels light in sequence, left to right, as if being switched on. */
  .tentgfx .bay.on rect { animation: bayon .5s ease both; animation-delay: var(--d,0ms); }
  @keyframes bayon { from { fill-opacity: 0; } to { fill-opacity: 1; } }
  /* And then breathe, very slightly, so the drawing is never still. */
  .tentgfx .bay.on { animation: baybreathe 4.5s ease-in-out infinite;
    animation-delay: calc(var(--d,0ms) * 2); transform-origin: center; }
  @keyframes baybreathe { 0%,100% { opacity: .88; } 50% { opacity: 1; } }
  .tentgfx .bay { cursor: pointer; transition: filter .2s ease; }
  .tentgfx .bay.flare { filter: url(#soft) brightness(1.5); }
  .tentgfx .roof { stroke-dasharray: 1200; stroke-dashoffset: 1200;
    animation: draw 1.5s cubic-bezier(.22,.8,.3,1) .2s both; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}
.tentgfx .bay.instant rect { animation: none; }
.tentgfx-cap { text-align: center; font-family: var(--head); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 12px; }

/* --- recent gifts, cycling --- */
.tickwrap { text-align: center; margin-top: clamp(16px,3vw,24px); min-height: 24px; }
.tickwrap b { font-family: var(--head); font-weight: 800; color: #fff; }
.tickwrap em { font-style: normal; font-family: var(--head); font-weight: 800; color: var(--gold-lt); }
.tickwrap .ago { color: rgba(255,255,255,.45); font-size: 12px; }
.tickwrap span { font-family: var(--body); font-size: 14px; color: rgba(255,255,255,.72); }
@media (prefers-reduced-motion: no-preference) {
  .tick-in { display: inline-block; animation: tickin .5s cubic-bezier(.22,.8,.3,1) both; }
  @keyframes tickin { from { opacity: 0; transform: translateY(8px); } }
}

/* --- the chosen amount sweeps gold --- */
@media (prefers-reduced-motion: no-preference) {
  .c-op { position: relative; overflow: hidden; }
  .c-op.on::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.45) 50%, transparent 75%);
    transform: translateX(-100%); animation: sweep .65s ease both; }
  @keyframes sweep { to { transform: translateX(120%); } }
}

/* --- share --- */
.c-share { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: #25D366; color: #06331A; border: none; border-radius: 99px;
  font-family: var(--head); font-weight: 800; font-size: 14px; letter-spacing: .02em;
  padding: 13px 26px; cursor: pointer; margin: 14px auto 0;
  box-shadow: 0 6px 18px rgba(37,211,102,.32); }
.c-share:hover { background: #2EE578; }
.c-cta .c-share, .c-share { display: inline-flex; width: auto; background: #25D366;
  color: #06331A; box-shadow: 0 6px 18px rgba(37,211,102,.32); }
.c-cta .c-share { display: flex; margin: 14px auto 0; }
.c-cta .c-share:hover, .c-share:hover { background: #2EE578; }


/* ============================================================
   THE THIRTY DAYS ON A PHONE

   The names are the point. Somebody scrolls this looking for their own
   family, or to see who has taken what - a grid of bare numerals is a
   date picker, not a Parnes Hayom board.

   So: three across, and everything that is not a name gives up its room.
   The yom tov label, the Gregorian date and the Ner LaMaor line all
   shrink or go; the sponsor stays, at a size that can be read, wrapping
   to three lines before it truncates.
   ============================================================ */
@media (max-width: 620px) {
  .days { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
  .tile { min-height: 0; padding: 9px 8px 10px; border-radius: 11px; }
  .tile .top { gap: 4px; }
  .tile .heb { font-size: 19px; line-height: 1; }
  .tile .greg { font-size: 8.5px; letter-spacing: 0; }
  .tile .lab { font-size: 8px; letter-spacing: .04em; min-height: 0;
    margin-top: 2px; opacity: .8; }
  .tile .st { font-size: 10.5px; line-height: 1.25; margin-top: 7px;
    /* Break at the space first. Only split inside a word when the word alone
       is wider than the tile, which MICHALASHVILI is and most names are not. */
    overflow-wrap: break-word; word-break: normal; hyphens: auto;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; }
  /* Ner LaMaor becomes a mark rather than a sentence: there is no room for
     "Ner LaMaor open — $1,800" beside a family name. */
  .tile .nl { font-size: 0; margin-top: 5px; display: block; }
  .tile .nl::before { content: 'נר'; font-family: 'Heebo', system-ui, sans-serif;
    font-weight: 800; font-size: 9.5px; letter-spacing: .04em;
    padding: 1px 5px; border-radius: 4px; }
  .tile .nl[data-ner="open"]::before { background: rgba(185,132,32,.13); color: #B98420; }
  .tile .nl[data-ner="taken"]::before { content: 'נר ✓'; background: #B98420; color: #fff; }
  .tile.taken .nl[data-ner="open"]::before { background: rgba(8,61,73,.15); color: #083D49; }
}
@media (max-width: 360px) {
  .tile .greg { display: none; }
  .tile .st { font-size: 10px; }
}

/* The plan toggle sat in a row that could not shrink: "10 monthly payments"
   alone is wider than a 320px phone once the other button is beside it. */
@media (max-width: 420px) {
  .planrow { flex-direction: column; align-items: stretch; gap: 10px; }
  .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; min-width: 0; }
  .plan { width: 100%; min-width: 0; text-align: center; padding: 10px 6px;
    font-size: 12px; line-height: 1.25; white-space: normal; }
  .gbtn { width: 100%; text-align: center; }
}

/* --- the match and the clock, beside the ask rather than in a story --- */
.c-match, .c-count-down { max-width: 720px; margin: 0 auto clamp(12px,2vw,16px);
  padding: 11px 18px; border-radius: 10px; text-align: center;
  background: rgba(255,255,255,.10); border: 1px solid rgba(246,236,212,.28); }
.c-match b, .c-count-down b { display: block; font-family: var(--head); font-weight: 800;
  font-size: clamp(.95rem,2.4vw,1.1rem); color: var(--gold-lt); }
.c-match span { display: block; font-family: var(--body); font-size: 12.5px;
  color: rgba(255,255,255,.7); margin-top: 2px; }
.c-count-down .k { font-family: var(--head); font-weight: 700; font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.c-count-down b { font-variant-numeric: tabular-nums; margin-top: 2px; }

/* --- the match and the clock, under the total, since they are reasons to
       give now rather than background --- */
.c-urgent { background: var(--tentbg); padding: clamp(16px,3vw,24px) clamp(16px,4vw,32px);
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.c-urgent > * { margin: 0; flex: 0 1 340px; }

/* --- the wall closes with the ask, since that is the moment to join it --- */
.c-wallcta { display: flex; gap: 10px; justify-content: center; align-items: center;
  flex-wrap: wrap; margin-top: clamp(24px,4vw,34px); padding: 0 clamp(16px,4vw,32px); }
.c-wallcta .c-donate { padding: 15px 40px; }
.c-wallcta .c-share { margin: 0; }

/* --- the way into the call list, from a fundraiser's own page --- */
.callcta { display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: #25D366; color: #06331A; border-radius: 16px; padding: 16px 18px;
  margin: 14px 0 4px; box-shadow: 0 8px 22px rgba(37,211,102,.35);
  transition: transform .14s ease, box-shadow .14s ease; }
.callcta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37,211,102,.45); }
.callcta .ic { font-size: 24px; line-height: 1; flex: none; }
.callcta .tx { flex: 1; min-width: 0; }
.callcta .tx b { display: block; font-family: var(--head); font-weight: 800; font-size: 1.15rem; }
.callcta .tx span { display: block; font-family: var(--body); font-size: 13px; color: rgba(6,51,26,.75); }
.callcta .go { font-family: var(--head); font-weight: 800; font-size: 26px; flex: none; opacity: .5; }

/* The calendar spans two months now, so the Elul days say so. */
.tile .heb .mo { font-family: 'Heebo', system-ui, sans-serif; font-style: normal;
  font-weight: 600; font-size: 9.5px; letter-spacing: .04em; opacity: .6;
  display: block; line-height: 1; margin-top: 1px; }

/* ============================================================
   A RECEIPT

   Not a ticket. The subject of a receipt is the amount, so the
   amount is the biggest thing on it and everything else is a
   detail sized like one. On klaf, because that is the surface
   this brand puts a record on, and because it prints.
   ============================================================ */
.rc { background: linear-gradient(160deg, var(--klaf-1), var(--klaf-2));
  border-radius: 18px; padding: clamp(26px,6vw,40px) clamp(20px,5vw,34px);
  text-align: center; box-shadow: 0 14px 34px rgba(4,38,46,.3); }

.rc-tick { width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--gold); color: var(--teal-4); font-size: 24px; line-height: 46px;
  font-weight: 700; }

.rc h1 { font-family: var(--head); font-weight: 800; color: var(--teal-3);
  font-size: clamp(1.6rem,5.5vw,2.1rem); line-height: 1.15; margin: 0; }
.rc-lede { font-family: var(--body); font-size: 14.5px; line-height: 1.55;
  color: var(--klaf-ink); margin: 8px 0 0; }

/* The figure, and the one line that qualifies it. */
.rc-amount { margin: clamp(22px,5vw,30px) 0 0; padding: clamp(18px,4vw,24px) 0;
  border-top: 1px solid rgba(122,106,62,.22); border-bottom: 1px solid rgba(122,106,62,.22); }
.rc-fig { display: block; font-family: var(--head); font-weight: 800;
  font-size: clamp(2.6rem,11vw,3.6rem); line-height: 1; color: var(--gold-dk);
  letter-spacing: -.02em; }
.rc-when { display: block; font-family: var(--body); font-size: 13px;
  color: var(--klaf-ink); margin-top: 8px; }

.rc-meta { margin: 20px 0 0; padding: 0; text-align: left; }
.rc-meta > div { display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(122,106,62,.14); }
.rc-meta > div:last-child { border-bottom: none; }
.rc-meta dt { font-family: var(--body); font-size: 13px; color: var(--klaf-ink); margin: 0; }
.rc-meta dd { font-family: var(--head); font-weight: 800; font-size: 14.5px;
  color: var(--teal-3); margin: 0; text-align: right;
  overflow-wrap: break-word; min-width: 0; }

.rc-legal { font-family: var(--body); font-size: 11.5px; line-height: 1.6;
  color: rgba(122,106,62,.85); margin: 22px 0 0; }

/* Printed, it should be a plain document on white. */
@media print {
  .navrow, .c-foot, .footer, .c-share, .pickbtn, .warnbox { display: none !important; }
  body, .tent { background: #fff !important; }
  .rc { box-shadow: none; border: 1px solid #C9B77E; background: #fff !important; }
}

/* One row that stays one row: three buttons wrapping two-then-one looked
   like a mistake rather than a choice. */
.rc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
.rc-acts .c-share { margin: 0; width: 100%; white-space: nowrap; padding: 14px 12px; font-size: 13.5px; }
.rc-acts .pickbtn { width: 100%; text-align: center; margin: 0; }
.rc-acts a.pickbtn { grid-column: 1 / -1; }
@media (max-width: 380px) { .rc-acts { grid-template-columns: 1fr; } }

/* The wordmark was breaking across two lines once the donate pill was beside
   it on a narrow screen. */
.navrow .brand { white-space: nowrap; }
@media (max-width: 420px) {
  .navrow .brand .b1 { font-size: 1.05rem; }
  .navrow .brand .b2 { font-size: .95rem; }
}

/* A day nobody has been told about. Quieter than open, and deliberately not
   gold: gold means taken, and an ungiven day must not borrow that. */
.tile.ask { background: rgba(255,255,255,.9); border: 1.5px dashed rgba(122,106,62,.35); }
.tile.ask .st { display: inline-block; font-family: var(--head); font-weight: 800;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dk);
  background: rgba(223,163,43,.14); border-radius: 5px; padding: 3px 9px; }
.tile.ask:hover { border-style: solid; border-color: var(--gold); background: #fff; }
@media (max-width: 620px) {
  .tile.ask .st { font-size: 9.5px; letter-spacing: .08em; padding: 2px 7px; }
}

/* The night a day begins on. Said in full where there is room, because
   somebody sponsoring 1 Tishrei is sponsoring from Friday evening. */
.mhead .dspan { font-family: var(--body); font-size: 12.5px; line-height: 1.45;
  color: var(--klaf-ink); margin-top: 4px; max-width: 34ch; }

/* ============================================================
   THE CALENDAR AS A CALENDAR

   Seven columns, Sunday first, every day under its weekday. A tent
   runs on the week: people say "the Sunday of Chol Hamoed", not
   "the eighteenth".
   ============================================================ */
.daygrid { margin-top: 22px; }
.dow { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 10px;
  margin-bottom: 8px; }
.dow span { text-align: center; font-family: var(--head); font-weight: 800;
  font-size: 10.5px; letter-spacing: .12em; color: var(--klaf-ink); opacity: .75; }
.dow .sh { color: var(--gold-dk); opacity: 1; }

.days { grid-template-columns: repeat(7, minmax(0,1fr)) !important; }
.tile.blank { background: none; border: none; box-shadow: none; pointer-events: none; }

/* Shabbos reads differently from a weekday, the way it does in a luach. */
.tile.shabbos { background: linear-gradient(160deg, #FFFDF7, #F6ECD4); }
.tile.shabbos .lab { color: var(--gold-dk); font-weight: 800; }
/* A parsha name is longer than a cell. Let it wrap to two lines rather than
   run out of the tile, and never let a long one stretch the column. */
.tile { min-width: 0; overflow: hidden; }
.tile .lab { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: break-word; }
.tile .st, .tile .nl { overflow-wrap: break-word; }

@media (max-width: 620px) {
  .daygrid { margin-top: 16px; }
  .dow { gap: 5px; margin-bottom: 5px; }
  .dow span { font-size: 8px; letter-spacing: .02em; }
  .days { gap: 5px !important; }
  .tile { padding: 6px 4px; border-radius: 8px; }
  .tile .heb { font-size: 15px; }
  .tile .greg { display: none; }
  .tile .lab { font-size: 7px; letter-spacing: 0; line-height: 1.15;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tile .st { font-size: 7.5px !important; padding: 1px 4px !important; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tile .nl { display: none; }
}

/* --- the same weeks, where seven columns will not fit --- */
.dayweeks { display: none; }
.dweek { margin-top: 16px; }
.dweek-h { font-family: var(--head); font-weight: 800; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--klaf-ink);
  opacity: .8; padding: 0 2px 6px; border-bottom: 1px solid rgba(122,106,62,.2); }

.drow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; background: #fff; border: 1.5px solid rgba(122,106,62,.2);
  border-radius: 10px; padding: 10px 13px; margin-top: 6px; cursor: pointer; min-width: 0; }
.drow.taken { background: linear-gradient(150deg, var(--gold-lt), var(--gold)); border-color: var(--gold); }
.drow.ask { border-style: dashed; }
.drow.shabbos { background: linear-gradient(150deg, #FFFDF7, #F6ECD4); }
.drow.taken.shabbos { background: linear-gradient(150deg, var(--gold-lt), var(--gold)); }

.drow-when { min-width: 0; }
.drow-when b { display: block; font-family: var(--head); font-weight: 800; font-size: 14.5px;
  color: var(--teal-3); line-height: 1.15; }
.drow-when > span { display: block; font-family: var(--body); font-size: 12px;
  color: var(--klaf-ink); }
.drow-when em { display: block; font-family: var(--head); font-style: normal; font-weight: 800;
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dk);
  margin-top: 2px; }
.drow.taken .drow-when b, .drow.taken .drow-when > span, .drow.taken .drow-when em { color: var(--teal-4); }

.drow-st { flex: 0 1 44%; text-align: right; font-family: var(--head); font-weight: 800;
  font-size: 12.5px; line-height: 1.25; color: var(--teal-3); overflow-wrap: break-word; min-width: 0; }
.drow.ask .drow-st { font-size: 10px; letter-spacing: .1em; color: var(--gold-dk); }
.drow.taken .drow-st { color: var(--teal-4); }
.drow-st em { display: block; font-style: normal; font-weight: 600; font-size: 10.5px;
  opacity: .75; margin-top: 2px; }

@media (max-width: 620px) {
  .daygrid { display: none; }
  .dayweeks { display: block; }
}

/* A Hebrew day name is not an English label in Hebrew letters: it has no
   uppercase, and letterspacing pulls the letters apart. */
.tile .lab.heb, .drow-when em.heb {
  font-family: 'Heebo', system-ui, sans-serif; font-weight: 700;
  text-transform: none; letter-spacing: 0; color: var(--gold-dk);
  font-size: 11px; direction: rtl; }
@media (max-width: 620px) {
  .tile .lab.heb { font-size: 9px; }
  .drow-when em.heb { font-size: 12px; }
}