/* San Joaquin Valley Swiss Club, concept site
   Graphic-led: type, flat colour and heraldry carry the pages.
   Six photographs exist, so they punctuate rather than lead. */
:root{
  --red:#C8102E; --red-dark:#9E0C24; --red-deep:#6E0817;
  --cream:#F7F1E4; --cream-2:#EFE5D2; --cream-3:#E3D5BB; --white:#fff;
  --ink:#1A1613; --ink-2:#4A413A; --ink-soft:#6E635A;
  --gold:#B8912F; --line:#D8C8AA; --line-dark:#3A322C;
  --display:"Fraunces",Georgia,serif;
  --ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cross:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%);
  /* "only light", not "light". Chrome on Android offers to darken web
     pages that do not have a dark theme of their own, and a phone with
     that on repaints this site: the cream goes to brown, the ink goes
     pale, and most of the page survives it. Inline SVG does not. The
     browser recolours CSS backgrounds and text but leaves an SVG fill
     where it found it, so on the other-clubs map the club names stayed
     near-black on a background that had just turned near-black, and
     disappeared. The same would happen to any drawing we add later.

     Plain "light" does not opt out of that -- it is what tells the
     browser the page is a light page, which is precisely what it offers
     to darken. "only light" is the one that declines. The club's
     identity is cream and red, printed; it is not a theme the browser
     should be inventing a second version of. A dark theme of our own,
     if it is ever wanted, is a real piece of work and goes here. */
  color-scheme:only light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--ui);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
img{max-width:100%;height:auto;display:block}
a{color:var(--red)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0;line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
p,ul,ol,table,figure{margin:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--white);padding:10px 16px}
.wrap{width:100%;max-width:1180px;margin-inline:auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:780px}
.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.muted{color:var(--ink-soft);font-size:.88rem}
.scroll{overflow-x:auto}

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--ink);color:var(--cream)}
/* The bar runs the full width of the window, so the brand sits near the left
   edge and the navigation near the right whatever the screen. Pinning it to
   the page's 1180px column left both stranded in the middle on a wide one. */
.hdr .wrap{max-width:none;
  padding-left:max(clamp(20px,3.5vw,56px),env(safe-area-inset-left,0px));
  padding-right:max(clamp(20px,3.5vw,56px),env(safe-area-inset-right,0px))}
.hdr-in{display:flex;align-items:center;gap:clamp(16px,2.5vw,40px);padding-block:13px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:0 0 auto}
.brand svg{width:28px;height:30px;flex:0 0 auto}
.brand b{font-family:var(--display);font-size:1rem;display:block;line-height:1.15}
.brand i{font-style:normal;font-size:.63rem;letter-spacing:.17em;text-transform:uppercase;color:#9C9086;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(16px,1.8vw,30px)}
.nav a{font-size:.86rem;font-weight:500;text-decoration:none;color:var(--cream);padding-bottom:7px;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--red);transition:right .28s cubic-bezier(.22,.7,.3,1)}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.navtoggle{display:none;margin-left:auto;background:none;border:2px solid rgba(247,241,228,.4);
  color:var(--cream);padding:8px 13px;font-family:var(--ui);font-weight:600;font-size:.84rem;cursor:pointer}
.navpanel{background:var(--ink);border-top:1px solid var(--line-dark)}
.navpanel ul{list-style:none;padding:6px 0 16px;display:grid}
.navpanel a{display:block;padding:11px 0;text-decoration:none;color:var(--cream);font-weight:500;border-bottom:1px solid var(--line-dark)}
@media(max-width:760px){.nav{display:none}.navtoggle{display:block}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--ui);
  font-size:.86rem;font-weight:700;letter-spacing:.04em;padding:13px 24px;text-decoration:none;
  border:2px solid transparent;cursor:pointer;border-radius:0;transition:transform .2s,background .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red);color:var(--white);border-color:var(--red)}
.btn-red:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn-ink{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-ink:hover{background:#000;border-color:#000}
.btn-line{background:none;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--cream)}
.btn-cream{background:var(--cream);color:var(--red-deep);border-color:var(--cream)}
.btn-ghost{background:none;color:var(--cream);border-color:rgba(247,241,228,.5)}
.btn-ghost:hover{background:rgba(247,241,228,.12);border-color:var(--cream)}

/* masthead */
.phead{background:var(--red);color:var(--cream);position:relative;overflow:hidden;padding-block:64px 58px}
.phead::after{content:"";position:absolute;right:-70px;top:50%;transform:translateY(-50%);
  width:clamp(220px,30vw,360px);aspect-ratio:1;background:rgba(255,255,255,.08);clip-path:var(--cross);pointer-events:none}
.phead .wrap{position:relative;z-index:1}
.phead h1{font-size:clamp(2.7rem,7.4vw,5.2rem);line-height:.94;letter-spacing:-.045em;color:#fff;margin-top:12px;max-width:16ch}
.phead p{margin-top:20px;max-width:46ch;font-size:1.06rem;color:#FBE4E7}
.phead .eyebrow{color:#F2BDC4}
.crumb{font-size:.76rem;color:#EBA9B2;letter-spacing:.04em}
.crumb a{color:#EBA9B2}
.phead.ink{background:var(--ink)}
.phead.ink::after{background:rgba(247,241,228,.055)}
.phead.ink .eyebrow{color:var(--gold)}
.phead.ink p{color:#BFB4A8}
.phead.ink .crumb,.phead.ink .crumb a{color:#8E8277}

/* hero */
.hero{background:var(--red);color:var(--cream);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M23 14h6v9h9v6h-9v9h-6v-9h-9v-6h9z' fill='%23fff' fill-opacity='.055'/%3E%3C/svg%3E")}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.18fr .82fr;gap:56px;align-items:center;padding-block:74px 78px}
.hero h1{font-size:clamp(3rem,8.4vw,6.4rem);line-height:.9;letter-spacing:-.05em;color:#fff}
.hero .eyebrow{color:#F2BDC4}
.hero p{margin-top:24px;font-size:1.16rem;max-width:36ch;color:#FBE4E7}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
.frame{position:relative}
.frame img{border:10px solid var(--cream);box-shadow:0 22px 50px rgba(60,4,14,.4);transition:transform .5s cubic-bezier(.22,.7,.3,1)}
.frame:hover img{transform:scale(1.02)}

/* bands and sections */
.sec{padding-block:72px}
.sec-sm{padding-block:46px}
.band-white{background:var(--white)}
.band-cream2{background:var(--cream-2)}
.band-ink{background:var(--ink);color:var(--cream)}
.band-red{background:var(--red);color:var(--cream)}
.band-ink h2,.band-ink h3,.band-red h2,.band-red h3{color:#fff}
.band-ink p,.band-ink .lead{color:#BFB4A8}
.band-red p,.band-red .lead{color:#FBE4E7}
.shead{border-top:3px solid var(--ink);padding-top:18px;margin-bottom:34px;display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 22px}
.shead .eyebrow{color:var(--red);flex:0 0 auto}
.shead h2{flex:1 1 320px;min-width:0}
.shead .more{margin-left:auto;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red);text-decoration:none;white-space:nowrap}
.shead .more:hover{text-decoration:underline}
.band-ink .shead{border-top-color:var(--gold)}
.band-ink .shead .eyebrow,.band-ink .shead .more{color:var(--gold)}
.band-red .shead{border-top-color:rgba(255,255,255,.55)}
.band-red .shead .eyebrow,.band-red .shead .more{color:#fff}
h2{font-size:clamp(1.85rem,3.9vw,2.7rem);letter-spacing:-.03em}
h3{font-size:1.28rem}
.lead{font-size:1.08rem;color:var(--ink-2);max-width:62ch}
.prose{max-width:66ch}
.prose p+p{margin-top:16px}
.prose h2{margin-top:40px;margin-bottom:14px}
.prose h3{margin-top:28px;margin-bottom:8px}
.prose ul{margin-top:12px;padding-left:20px}
.prose li{margin-top:7px}

/* grids */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.split{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:start}
@media(max-width:900px){
  .hero-in,.g2,.g3,.split{grid-template-columns:1fr;gap:34px}
  .hero-in{padding-block:52px 58px}
  .frame{order:-1;max-width:380px}
  .sec{padding-block:50px}
  .phead{padding-block:44px 40px}
}

/* cards and tiles */
.card{background:var(--white);border:1px solid var(--line);padding:26px 24px;transition:transform .28s,box-shadow .28s}
.card h3{margin-bottom:9px}
.card p{font-size:.95rem;color:var(--ink-2)}
.g3 .card{border-top:4px solid var(--red)}
.g3 .card:hover{transform:translateY(-5px);box-shadow:0 18px 34px rgba(26,22,19,.13)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tile{background:var(--white);padding:28px 26px 30px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:9px;transition:background .25s}
.tile:hover{background:var(--cream)}
.tile h3{font-size:1.18rem}
.tile p{font-size:.93rem;color:var(--ink-2)}
.tile .go{margin-top:auto;padding-top:12px;font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--red)}

/* event rows */
.evt{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;align-items:start}
.evt:first-child{border-top:1px solid var(--line)}
a.evt:hover h3{color:var(--red)}
.evt .dt{text-align:center;border:1.5px solid var(--ink);padding:7px 2px;background:var(--white);transition:background .28s,border-color .28s}
.evt .dt b{display:block;font-family:var(--display);font-size:1.7rem;line-height:1;color:var(--ink);transition:color .28s}
.evt .dt span{display:block;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px;transition:color .28s}
a.evt:hover .dt{background:var(--red);border-color:var(--red)}
a.evt:hover .dt b,a.evt:hover .dt span{color:#fff}
.evt h3{font-size:1.16rem}
.evt p{font-size:.93rem;color:var(--ink-2);margin-top:5px}
.evt .meta{font-size:.8rem;color:var(--ink-soft);margin-top:5px;letter-spacing:.03em}

/* year calendar */
.cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.mo{background:var(--white);padding:18px 18px 20px;min-height:152px;display:flex;flex-direction:column}
.mo > h3{font-family:var(--ui);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:13px;padding-bottom:9px;border-bottom:1px solid var(--line)}
/* a month with nothing on it: the name, and the quiet of the rest of it */
.mo.quiet{background:var(--cream-2)}
.mo.quiet > h3{margin-bottom:0;padding-bottom:0;border-bottom:0}
.mo .ev{display:block;text-decoration:none;color:inherit;padding:6px 0}
.mo .ev + .ev{border-top:1px dotted var(--line)}
.mo .ev b{font-family:var(--display);font-size:.98rem;font-weight:700;display:block;line-height:1.25}
.mo .ev:hover b{color:var(--red)}
.mo .ev span{font-size:.75rem;color:var(--ink-soft);letter-spacing:.04em}
.mo .tagline{margin-top:auto;padding-top:10px;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}

/* On a phone the twelve months stack, and a month with nothing on it does
   not deserve a card of its own height: it folds onto one line so the
   months that do have something are a short scroll away rather than a long
   one. */
@media(max-width:620px){
  .mo{min-height:0;padding:14px 16px 16px}
  .mo.quiet{padding:11px 16px}
}

/* timeline, horizontal */
.tlh-bar{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.tlh-years{display:flex;gap:8px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none}
.tlh-years::-webkit-scrollbar{display:none}
.tlh-years button{flex:0 0 auto;font-family:var(--ui);font-size:.72rem;font-weight:700;letter-spacing:.12em;
  padding:8px 13px;border:1.5px solid var(--line-dark);background:none;color:#8E8277;cursor:pointer;
  transition:background .22s,color .22s,border-color .22s}
.tlh-years button:hover{color:var(--cream);border-color:#5C5048}
.tlh-years button[aria-current="true"]{background:var(--red);border-color:var(--red);color:#fff}
.tlh-nav{flex:0 0 auto;width:40px;height:40px;border:1.5px solid var(--line-dark);background:none;
  color:var(--cream);cursor:pointer;font-size:1.05rem;line-height:1;display:grid;place-items:center;
  transition:background .22s,border-color .22s}
.tlh-nav:hover:not([disabled]){background:rgba(247,241,228,.12);border-color:#5C5048}
.tlh-nav[disabled]{opacity:.28;cursor:default}
.tlh-track{display:flex;overflow-x:auto;
  scrollbar-width:none;border-top:2px solid var(--line-dark);outline-offset:4px}
.tlh-track::-webkit-scrollbar{display:none}
.tlh-item{flex:0 0 clamp(248px,31%,320px);padding:32px 30px 30px 0;position:relative}
.tlh-item::before{content:"";position:absolute;left:0;top:-9px;width:16px;height:16px;
  background:#5C5048;clip-path:var(--cross);transition:background .28s,transform .28s}
.tlh-item.on::before{background:var(--red);transform:scale(1.3)}
.tlh-item .yr{font-family:var(--display);font-size:1.85rem;font-weight:800;color:var(--gold);
  line-height:1;display:block;margin-bottom:11px;transition:color .28s}
.tlh-item.on .yr{color:#fff}
.tlh-item p{font-size:.94rem;color:#A99E93;transition:color .28s}
.tlh-item.on p{color:#D8CDC2}
@media(max-width:620px){.tlh-item{flex:0 0 82%}}


/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:.94rem;margin-top:20px}
.tbl caption{text-align:left;font-size:.78rem;color:var(--ink-soft);padding-bottom:10px}
.tbl th.num,.tbl td.num{text-align:right;white-space:nowrap}
.tbl th,.tbl td{text-align:left;padding:12px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-family:var(--ui);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);background:var(--ink)}
.tbl tbody tr:hover td{background:var(--cream-2)}
.band-white .tbl tbody tr:hover td{background:var(--cream)}

/* definition rows */
.rows{list-style:none;padding:0;border-top:2px solid var(--ink)}
.rows li{display:flex;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.rows b{font-family:var(--ui);font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);min-width:116px;padding-top:4px;flex:0 0 auto}
.band-ink .rows{border-top-color:var(--gold)}
.band-ink .rows li{border-bottom-color:var(--line-dark)}
.band-ink .rows b{color:var(--gold)}

/* quote builder */
.chk{background:var(--cream-2);border:1px solid var(--line);border-left:5px solid var(--red);padding:24px}
.fields{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin-top:14px}
/* flex-end used to bottom-align these, so a hint under one box dragged the
   box beside it down the page and the two labels no longer lined up. */
.field{display:flex;flex-direction:column;gap:6px;flex:1 1 150px;min-width:0}
.field label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.field input,.field select,.field textarea{font-family:var(--ui);font-size:.94rem;padding:11px 12px;border:1.5px solid var(--line);background:var(--white);color:var(--ink);width:100%;min-width:0;border-radius:0}
.field input:focus,.field select:focus{border-color:var(--ink)}
.result{margin-top:15px;font-size:.93rem;padding:13px 15px;display:none;line-height:1.5}
.result.open{display:block;background:#EAF3EA;border:1px solid #BBD5BB;border-left:4px solid #2E6B33;color:#1F4722}
.result.taken{display:block;background:#FBEAEC;border:1px solid #E8BFC5;border-left:4px solid var(--red);color:#8A1226}
.callout{background:var(--cream-2);border-left:5px solid var(--gold);padding:17px 19px;font-size:.92rem;color:var(--ink-2)}
.band-ink .callout{background:#241F1A;color:#BFB4A8}
.tag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--red);color:#fff;padding:4px 9px}

/* cantonal arms */
.shields{background:var(--ink);overflow:hidden;padding-block:30px;position:relative}
.shields::before,.shields::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.shields::before{left:0;background:linear-gradient(90deg,var(--ink),rgba(26,22,19,0))}
.shields::after{right:0;background:linear-gradient(270deg,var(--ink),rgba(26,22,19,0))}
.shield-track{display:flex;width:max-content;animation:march 125s linear infinite}
.shield{display:flex;flex-direction:column;align-items:center;gap:9px;flex:0 0 auto;margin-right:46px}
.shield img{width:42px;height:48px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45));transition:transform .3s cubic-bezier(.22,.7,.3,1)}
.shield:hover img{transform:translateY(-6px) scale(1.1)}
.shield span{font-size:.58rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8E8277;white-space:nowrap}
@keyframes march{to{transform:translateX(-50%)}}

/* edelweiss divider */
.ediv{display:flex;align-items:center;gap:18px;color:var(--red);margin-bottom:38px}
.ediv .rule{height:1px;background:var(--line);flex:1}
.ediv svg{width:26px;height:26px;flex:0 0 auto}
.band-ink .ediv{color:var(--gold)}
.band-ink .ediv .rule{background:var(--line-dark)}

/* admin placeholders */
.ph{border:1.5px dashed var(--line);background:rgba(26,22,19,.018);padding:22px 20px}
.ph+.ph{margin-top:18px}
.ph-label{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;display:flex;align-items:center;gap:9px}
.ph-label::before{content:"";width:8px;height:8px;background:var(--red);flex:0 0 auto;clip-path:var(--cross)}
.ph-line{height:10px;background:var(--line);margin-bottom:10px;opacity:.6}
.ph-line:last-child{margin-bottom:0}
.ph-img{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.ph-rows{display:grid;gap:11px}
.ph-row{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center}
.ph-row .ph-line{margin:0}

/* footer */
.ftr{background:var(--ink);color:#B4A99E;padding-block:56px 30px}
.ftr-grid{display:grid;grid-template-columns:1.2fr .9fr 1.4fr;gap:34px}
.ftr h4{font-family:var(--ui);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:15px}
.ftr ul{list-style:none;padding:0;display:grid;gap:8px;font-size:.92rem}
.ftr a{color:#B4A99E;text-decoration:none}
.ftr a:hover{color:var(--cream);text-decoration:underline}
.ftr-note{margin-top:42px;padding-top:22px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.79rem}
/* the way in for the board. Quiet, and the only one on the public site. */
.ftr-admin{color:#9C9086;text-decoration:none;border:1px solid var(--line-dark);
  padding:5px 12px;white-space:nowrap}
.ftr-admin:hover{color:var(--cream);border-color:var(--cream)}
@media(max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ftr-grid{grid-template-columns:1fr}body{font-size:16px}}

/* motion */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rv{animation:rise .62s cubic-bezier(.22,.7,.3,1) both;animation-delay:var(--d,0s)}
@media(prefers-reduced-motion:reduce){
  .rv{animation:none}
  .shield-track{animation:none}
  .btn:hover,.g3 .card:hover,.shield:hover img,.frame:hover img{transform:none}
  *{transition-duration:.01ms!important}
}

/* break the address at the dot or the @, never mid-word */
.ftr .email{font-size:.86rem;overflow-wrap:break-word}

/* social marks in the header, beside the nav */
.nav .nav-social{display:inline-flex;align-items:center;gap:13px;margin-left:10px}
.nav .nav-social a{padding:0;color:#fff;display:grid;place-items:center;width:26px;height:26px;
  opacity:.88;transition:opacity .2s}
.nav .nav-social a::after{content:none}
.nav .nav-social a:hover{opacity:1}
.nav .nav-social svg{width:17px;height:17px;display:block}

/* and in the mobile panel, so they survive on a phone */
.panel-social{display:flex;align-items:center;gap:14px;padding-top:18px}
.navpanel .panel-social a{display:grid;place-items:center;width:38px;height:38px;padding:0;
  color:#fff;border:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.navpanel .panel-social a:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.panel-social svg{width:18px;height:18px;display:block}

/* the way into the rest of the site: a ruled index */
.shead .count{margin-left:auto;font-size:.78rem;letter-spacing:.09em;color:var(--ink-soft);
  font-variant-numeric:tabular-nums}
.dx{columns:5 190px;column-gap:34px;column-rule:1px solid var(--line)}
.dxi{display:flex;align-items:center;gap:12px;min-height:40px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line);break-inside:avoid;transition:border-color .18s;outline:none}
.dxn{flex:0 0 auto;font-size:.69rem;color:#BDB7AD;font-variant-numeric:tabular-nums;
  transition:color .18s}
.dxt{font-family:var(--display);font-size:1rem;font-weight:600;line-height:1.25;
  letter-spacing:-.01em;white-space:nowrap;transition:color .18s}
.dxi:hover,.dxi:focus-visible{border-bottom-color:var(--red)}
.dxi:hover .dxt,.dxi:focus-visible .dxt,
.dxi:hover .dxn,.dxi:focus-visible .dxn{color:var(--red)}
@media(max-width:560px){
  .dx{columns:2;column-gap:18px}
  .dxi{min-height:36px;gap:9px}
  .dxt{font-size:.9rem}
}

/* the West Coast map: states projected to a static path, no map library.
   Two arrangements of the same data. See .swnarrow for the phone. */
.swmap{margin:0}
.swmap svg{display:block;width:100%;height:auto;margin-inline:auto}
.swmap .swwide{display:block;max-height:84vh}
.swmap .swnarrow{display:none}
.swland path,.swnarrow>g path{fill:var(--cream-2);stroke:var(--line);stroke-width:1.5;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.swc{cursor:pointer}
.swlead{stroke:#C2B092;stroke-width:1.6;vector-effect:non-scaling-stroke;
  transition:stroke .18s}
.swpin{fill:var(--red);transition:fill .18s}
.swc-home .swpin{fill:var(--ink)}
.swc text{font-family:var(--ui);fill:var(--ink)}
.swn{font-family:var(--display);font-size:25px;font-weight:600;letter-spacing:-.01em}
.swt{font-size:18px;fill:var(--ink-soft)}
.swnarrow .swn{font-size:44px}
.swnarrow .swt{font-size:32px}
.swc a{text-decoration:none}
.swc:hover .swlead{stroke:var(--red)}
.swc:hover .swpin{fill:var(--red-deep)}
.swc:hover .swn,.swc a:focus-visible .swn{fill:var(--red)}
.swc a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.swlist{padding-left:1.3em}
.swlist li{margin-bottom:6px}
@media(max-width:760px){
  .swmap .swwide{display:none}
  .swmap .swnarrow{display:block}
  .swmap{margin:0 -6px}
}

/* ------------------------------------------------------------------ */
/* Hall rental calendar. Which days are free, at a glance, next to the */
/* form that quotes them.                                             */

.rcal{padding:22px 24px 20px}
.rcal-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.rcal-top h3{flex:1 1 auto;text-align:center;font-size:1.3rem;margin:0}
.rcal-arrow{flex:0 0 auto;width:46px;height:46px;font-size:1.1rem;line-height:1;
  background:var(--white);border:1px solid var(--line);color:var(--ink);
  font-family:var(--ui);cursor:pointer}
.rcal-arrow:hover:not(:disabled){background:var(--cream-2);border-color:var(--ink)}
.rcal-arrow:disabled{color:var(--line);cursor:default}

.rcal-days,.rcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.rcal-days{margin-bottom:5px}
.rcal-days span{text-align:center;font-size:.7rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);padding-bottom:4px}

.rcal-cell{display:flex;align-items:center;justify-content:center;
  min-height:52px;font-family:var(--ui);font-size:1rem;
  font-weight:600;font-variant-numeric:tabular-nums;border:1px solid var(--line);
  background:var(--white);color:var(--ink);padding:0}
.rcal-out{border-color:transparent;background:none}
.rcal-past{color:var(--line);background:var(--cream);border-color:var(--cream-2)}
.rcal-shut{background:#FBEAEC;border-color:#E8BFC5;color:#8A1226}
.rcal-open{cursor:pointer;background:#EAF3EA;border-color:#BBD5BB;color:#1F4722}
.rcal-open:hover{background:#D8E9D8;border-color:#2E6B33}
.rcal-on{outline:3px solid var(--ink);outline-offset:-3px}

.rcal-key{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:10px 22px;font-size:.88rem;color:var(--ink-2)}
.rcal-key li{display:flex;align-items:center;gap:8px}
.rcal-key .rcal-sw{width:17px;height:17px;flex:0 0 auto;border:1px solid var(--line)}
.rcal-key .rcal-sw-open{background:#EAF3EA;border-color:#BBD5BB}
.rcal-key .rcal-sw-shut{background:#FBEAEC;border-color:#E8BFC5}
.rcal-key .rcal-sw-past{background:var(--cream);border-color:var(--cream-2)}

@media(max-width:560px){
  .rcal{padding:18px 15px 16px}
  .rcal-days,.rcal-grid{gap:3px}
  .rcal-cell{min-height:44px;font-size:.92rem}
  .rcal-days span{font-size:.62rem;letter-spacing:.06em}
}

/* ------------------------------------------------------------------ */
/* What an event adds to the page it is tied to. It takes the place of  */
/* that page's hand-written Details card, in the same card and rows, so */
/* a page with two events being advertised carries two of them.         */

/* The event sits across the top of the page it is tied to, not down the side
   of it. It is the only thing on these pages that changes, so it gets the
   full width and the headings run side by side instead of stacking. */
.eslot{margin:38px 0 0}
.ecard{background:var(--white);border:1px solid var(--line);border-left:5px solid var(--red);
  padding:26px 30px;margin-bottom:16px}
.ecard:last-child{margin-bottom:0}
.ecard-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px}
.ecard h3{font-family:var(--display);font-size:1.65rem;font-weight:600;line-height:1.15;
  margin:0;flex:1 1 auto}
/* shrinks and wraps rather than spilling past the card on a narrow screen */
.ecard-when{margin:0;flex:0 1 auto;min-width:0;font-size:.82rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--red)}
.ecard-body{margin-top:16px}
.ecard-body.both{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:0 40px;align-items:start}
.ecard-desc{margin:0;color:var(--ink-2);line-height:1.65;white-space:pre-line}
.erows{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:2px solid var(--ink);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px 34px}
/* beside a description the headings run down one column, ruled off the prose
   rather than off the card */
.ecard-body.both .erows{margin:0;padding:2px 0 2px 28px;border-top:0;
  border-left:2px solid var(--ink);grid-template-columns:1fr;gap:18px}
.erows li{display:block;min-width:0}
.erows b{display:block;font-family:var(--ui);font-size:.68rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.erows span{display:block;line-height:1.55;overflow-wrap:anywhere}

/* What happens through the day. It takes the whole width of the row grid
   rather than one 210px column of it, because a schedule is only worth
   having if the times line up, and they cannot line up in a column that
   narrow. The time keeps its own column, sized to the longest one there,
   so "Saturday 11am" and "noon" still start in the same place. */
.erow-sked{grid-column:1/-1}
.esked{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px}
.esked-at{font-family:var(--ui);font-weight:700;font-size:.84rem;
  line-height:1.6;white-space:nowrap}
.esked-what{line-height:1.6;overflow-wrap:anywhere}

@media(max-width:520px){
  /* a phone cannot hold a time column and a sentence beside it without
     squeezing the sentence to two words a line */
  .esked{grid-template-columns:1fr;gap:0}
  .esked-at{margin-top:11px}
  .esked-at:first-child{margin-top:0}
}

@media(max-width:860px){
  /* on a narrow screen they stack, and the headings take the rule back */
  .ecard-body.both{grid-template-columns:1fr;gap:0}
  .ecard-body.both .erows{margin-top:22px;padding:20px 0 0;border-left:0;
    border-top:2px solid var(--ink);
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px 34px}
}
@media(max-width:620px){
  .ecard{padding:22px 18px}
  .ecard h3{font-size:1.4rem}
  .ecard-when{font-size:.72rem;letter-spacing:.06em}
  .erows,.ecard-body.both .erows{grid-template-columns:1fr;gap:16px}
}
.evt .meta{display:inline}
.evt-price{display:inline-block;vertical-align:baseline;margin-left:11px;
  font-family:var(--ui);font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--red);border:1.5px solid var(--red);padding:1px 8px}

/* ------------------------------------------------------------------ */
/* The galleries. Bands running the full width of the window, which    */
/* nothing else here does, travelling opposite ways as the page goes   */
/* by. Six photographs to a band, so more pictures mean another band   */
/* rather than smaller pictures.                                       */

.gsec{padding-bottom:58px}
.gsec[hidden]{display:none}
.gbands{display:grid;gap:7px}
.gband{height:clamp(200px,24vw,420px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.gband::-webkit-scrollbar{display:none}
.gb-run{display:flex;gap:7px;width:max-content;height:100%}
/* a generous fixed width rather than each picture's own, so three of them
   already run past the edge and the band has somewhere to travel. The whole
   frame is there in the viewer. */
/* 40vw, so three tiles are 120vw and always wider than the window whatever
   the screen. That is what guarantees a band of three or more can travel, and
   that no photograph is ever on screen beside its own copy. */
.gb-shot{flex:0 0 auto;padding:0;border:0;background:none;cursor:pointer;display:block;
  line-height:0;height:100%;width:max(260px,40vw)}
.gb-shot img{height:100%;width:100%;object-fit:cover;display:block;
  transition:filter .3s,transform .4s cubic-bezier(.22,.7,.3,1)}
/* a band whose own pictures do not reach the edge fills the width instead of
   repeating itself */
/* a single photograph: its own shape, in the middle, going nowhere */
.gb-one .gb-run{width:100%;justify-content:center}
.gb-one .gb-shot{flex:0 0 auto;width:auto;max-width:92vw;cursor:zoom-in}
.gb-one .gb-shot img{width:auto;height:100%;object-fit:contain}
.gb-shot:hover img,.gb-shot:focus-visible img{filter:none;transform:scale(1.04)}
.gb-shot:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

/* the viewer it opens into */
html.gv-open,html.gv-open body{overflow:hidden}
.gview{position:fixed;inset:0;z-index:200;background:rgba(14,12,11,.97);
  display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr auto;
  align-items:center;gap:10px;padding:18px}
.gview[hidden]{display:none}
.gv-stage{grid-column:2;grid-row:1;margin:0;min-width:0;min-height:0;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:14px}
.gv-stage img{max-width:100%;max-height:70vh;width:auto;height:auto;display:block;
  border:1px solid rgba(247,241,228,.25)}
.gv-stage figcaption{color:#E7DCC9;font-family:var(--ui);font-size:.92rem;text-align:center;
  max-width:70ch}
.gv-shut{position:absolute;top:18px;right:18px;z-index:2;font-family:var(--ui);font-size:.82rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);
  background:none;border:1.5px solid rgba(247,241,228,.5);padding:11px 17px;cursor:pointer}
.gv-shut:hover{border-color:var(--cream);background:rgba(247,241,228,.1)}
.gv-step{grid-row:1;background:none;border:0;color:var(--cream);font-size:2rem;line-height:1;
  padding:18px 10px;cursor:pointer;opacity:.75}
.gv-step:hover{opacity:1}
.gv-prev{grid-column:1}
.gv-next{grid-column:3}
.gv-rail{grid-column:1/-1;grid-row:2;display:flex;gap:6px;overflow-x:auto;padding:4px 2px;
  justify-content:safe center;scrollbar-width:none}
.gv-rail::-webkit-scrollbar{display:none}
.gv-rail button{flex:0 0 auto;width:74px;height:50px;padding:0;cursor:pointer;
  background-size:cover;background-position:center;border:1px solid rgba(247,241,228,.3);
  opacity:.45;transition:opacity .25s,border-color .25s}
.gv-rail button:hover{opacity:.85}
.gv-rail button[aria-current]{opacity:1;border-color:var(--red);border-width:2px}

@media(max-width:700px){
  .gband{height:170px}
  .gv-stage img{max-height:58vh}
  .gv-step{font-size:1.5rem;padding:12px 4px}
  .gv-rail button{width:58px;height:40px}
  .gview{padding:12px}
  .gv-shut{top:12px;right:12px;padding:9px 13px;font-size:.74rem}
}
@media(prefers-reduced-motion:reduce){
  .gb-shot img{transition:none}
  .gb-shot:hover img,.gb-shot:focus-visible img{transform:none}
}
/* The year on the Calendar page: twelve months, each listing what is on in
   it, drawn from data/events.json. The grid itself is the .cal/.mo block
   above, which this page has used since the beginning. */
.yr{margin-top:20px}
.yr-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.yr-top h3{flex:1 1 auto;text-align:center;margin:0;font-family:var(--display);
  font-size:1.45rem;font-weight:600}
.yr-step{flex:0 0 auto;background:var(--white);border:2px solid var(--line);
  border-radius:5px;padding:9px 15px;font:inherit;font-family:var(--ui);font-weight:600;
  color:var(--ink);cursor:pointer;line-height:1}
.yr-step:hover{border-color:var(--ink)}

/* an event that cannot be opened yet is a button, so it needs a button's
   defaults taken off it, and it must not light up like one that can */
.mo button.ev{width:100%;text-align:left;background:none;border:0;font:inherit;
  font-family:inherit;color:inherit;cursor:pointer;padding:6px 0}
.mo .ev:hover b{color:inherit}
.mo a.ev:hover b,.mo button.ev:hover b{color:var(--red)}
.mo .ev-soon span{color:var(--ink-2)}

/* what a day says when its event is not being advertised yet */
.mcalpop{position:fixed;inset:0;z-index:200;background:rgba(26,22,19,.55);
  display:flex;align-items:center;justify-content:center;padding:24px}
.mcalpop[hidden]{display:none}
.mcalpop-box{background:var(--white);border:1px solid var(--line);
  border-left:5px solid var(--red);border-radius:6px;padding:28px 26px;
  max-width:420px;width:100%;text-align:left}
.mcalpop-box h3{margin:0;font-family:var(--display);font-size:1.45rem;font-weight:600;
  line-height:1.2}
.mcalpop-when{margin:8px 0 0;font-size:.82rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft)}
.mcalpop-say{margin:16px 0 0;color:var(--ink-2);line-height:1.6}
.mcalpop-box .btn{margin-top:22px}
html.mcalpop-open{overflow:hidden}

/* Seven columns on a phone leaves about forty pixels a day, which breaks a
   title into pieces of two letters. The day carries a mark instead, and
   pressing it names the event: on the page it opens, or in the panel. */
@media(max-width:700px){
  .mcal-days span{font-size:.6rem;letter-spacing:.04em}
  .mcal-cell{min-height:54px;padding:5px 4px;text-align:center}
  .mcal-cell b{font-size:.86rem}
  .mcal-cell span{display:none}
  .mcal-on::after{content:"";display:block;width:7px;height:7px;border-radius:50%;
    background:var(--red);margin:5px auto 0}
  .mcal-soon::after{background:var(--ink-2)}
  .mcal-days,.mcal-grid{gap:4px}
}

/* An event that carries a photograph of itself. The picture takes a column
   of its own beside the words, upright or not, and goes above them on a
   phone where there is only ever one column. */
.ecard-shot{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:26px 30px;align-items:start}
.ecard-shot .ecard-head{grid-column:1/-1}
.ecard-pic{margin:0;min-width:0}
.ecard-pic img{display:block;width:100%;height:auto;border:1px solid var(--line)}
/* the picture opens itself, full size, on a page of its own */
.ecard-open{display:block;text-decoration:none;color:var(--red)}
.ecard-open img{transition:border-color .2s}
.ecard-open:hover img{border-color:var(--red)}
.ecard-open-say{display:block;margin-top:9px;font-family:var(--ui);font-size:.7rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ecard-open:hover .ecard-open-say{text-decoration:underline;text-underline-offset:3px}
/* every other picture attached, each opening itself the same way */
.ecard-more{margin-top:15px;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.ecard-more-one{display:block;text-decoration:none;color:var(--ink-soft)}
.ecard-more-one img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;
  border:1px solid var(--line);transition:border-color .2s}
.ecard-more-one:hover img{border-color:var(--red)}
.ecard-more-one span{display:block;margin-top:5px;font-family:var(--ui);font-size:.68rem;
  line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecard-more-one:hover span{color:var(--red)}
.ecard-shot .ecard-said{min-width:0}
.ecard-shot .ecard-body{margin-top:0}
@media(max-width:760px){
  .ecard-shot{grid-template-columns:1fr;gap:18px}
  .ecard-open img{max-height:62vh;width:auto;max-width:100%;margin:0 auto}
}

.ecard-file{color:var(--red);text-underline-offset:3px}
.ecard-file:hover{text-decoration:none}

/* ---- the quote form -------------------------------------------------- */
.qsub{margin-top:22px;font-family:var(--ui);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft)}
.qchecks{margin-top:10px;display:grid;gap:9px;font-size:.94rem}
.qchecks label{display:flex;align-items:flex-start;gap:8px;line-height:1.45}
.field .hint{margin:6px 0 0;font-size:.85rem;color:var(--ink-soft);line-height:1.45}

/* One list shape for What's included and House rules. Short lines in a
   single column: these are scanned, not read, and the paragraphs they
   replaced were hard going. */
.rlist{list-style:none;margin:16px 0 0;padding:0;max-width:60ch}
.rlist li{position:relative;padding:0 0 0 26px;margin-top:9px;line-height:1.5}
.rlist li span{display:block;font-size:.88rem;color:var(--ink-soft);margin-top:1px}

.rlist.ticks li::before{content:'';position:absolute;left:3px;top:.42em;width:11px;
  height:6px;border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);
  transform:rotate(-45deg)}
.rlist.rules li::before{content:'';position:absolute;left:3px;top:.62em;width:11px;
  height:2px;background:var(--red)}

/* the terms are reference, not persuasion, so they fold away */
.terms{margin-top:38px;border-top:1px solid var(--line);padding-top:18px}
.terms summary{cursor:pointer;font-family:var(--ui);font-weight:600;font-size:.95rem;
  color:var(--ink-2)}
.terms summary:hover{color:var(--ink)}
.terms[open] summary{margin-bottom:22px}
.termgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}
.termcol h4{font-size:.74rem;font-family:var(--ui);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px}
.termcol ul{margin:0;padding-left:18px;line-height:1.6;color:var(--ink-2);font-size:.93rem}
.termcol li{margin-top:8px}

/* said plainly, where somebody is about to press the button */
.notabooking{padding:20px 22px;border-top:1px solid var(--line);background:var(--cream-2)}
.notabooking p{margin:0}
.notabooking p + p{margin-top:8px}


/* ---- the flyer that stands all year ---------------------------------

   The poster is a tall portrait sheet. It suits a phone and makes a
   skyscraper of a desktop screen, so it never goes in the flow of the
   home page: a short band does, cut from the poster's own artwork, and
   clicking it opens the sheet on a page of its own. The band is the same
   height whatever shape the poster is, because it is a crop. */
.flyersec{padding-top:0}
.flyer{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;
  text-decoration:none;color:inherit;border:1.5px solid var(--line);border-radius:10px;
  overflow:hidden;background:var(--white);transition:border-color .15s,transform .15s}
.flyer:hover{border-color:var(--red);transform:translateY(-2px)}
.flyer-art{display:block;min-height:132px;background-size:cover;
  background-repeat:no-repeat;background-color:var(--cream-2)}
.flyer-said{display:block;padding:20px 22px}
.flyer-said b{display:block;font-family:var(--display);
  font-size:clamp(1.35rem,3.4vw,1.85rem);line-height:1.15;margin-top:6px}
.flyer-when{display:block;margin-top:8px;color:var(--ink-2)}
.flyer-note{display:block;margin-top:4px;color:var(--ink-soft);font-size:.95rem}
.flyer-go{display:block;padding:0 22px 20px;font-family:var(--ui);font-weight:600;
  color:var(--red)}

@media (min-width:760px){
  .flyer{grid-template-columns:minmax(260px,34%) 1fr auto;align-items:center}
  .flyer-art{height:100%;min-height:168px}
  .flyer-said{padding:24px 26px}
  .flyer-go{padding:0 26px 0 0;white-space:nowrap}
}

/* the sheet itself, on its own page */
.flyer-sheet{margin:26px 0 0}
.flyer-sheet img{display:block;width:100%;height:auto;border:1px solid var(--line);
  border-radius:8px}
.flyer-acts{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}

/* a band with no artwork, when the flyer is a document and no cover was given */
.flyer-plain .flyer-art-none{background:var(--ink);min-height:84px}
@media (min-width:760px){
  .flyer-plain{grid-template-columns:12px 1fr auto}
  .flyer-plain .flyer-art-none{min-height:100%}
}


/* the flyer's pages, laid out as pages rather than inside a viewer */
.flyer-pages{margin-top:26px;display:grid;gap:22px}
.flyer-page{margin:0;position:relative}
.flyer-page img{display:block;width:100%;height:auto;border:1px solid var(--line);
  border-radius:6px;background:#fff}
.flyer-page figcaption{margin-top:8px;font-family:var(--ui);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-align:right}


/* the Jass table, on the Jass page --------------------------------
   The game is a dark full-screen thing of its own, so the page sets a
   dark board down in the middle of the cream and lets the game be
   itself inside it. On a phone the button is a plain link to the
   game's own page: one tap in, the arrow at the top left back out. */
.jset{background:radial-gradient(130% 95% at 50% 0%,#20304A 0%,rgba(32,48,74,0) 62%),#141B27;
  border:1px solid #2A3647;padding:32px 26px;display:grid;gap:18px;justify-items:start}
.jset p{color:#C3BAAE;max-width:58ch;font-size:.97rem}
.jset .jsmall{color:#8C8378;font-size:.86rem}
.jset .btn-cream:hover{background:#fff;border-color:#fff}
/* 740px is what the table, the three fans and the hand need before the
   game starts squeezing them into each other. Below that the page sends
   you to the game's own screen instead, so this height is not a guess
   to be trimmed. */
.jframe{display:block;width:100%;height:740px;border:0;background:#0B0F15}
.jbar{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px 20px}
.jbar .btn{padding:10px 18px;font-size:.8rem}
@media (max-width:620px){
  .jset{padding:24px 18px}
  .jset .btn{width:100%}
}