/* ————————————————————————————————
   shared styles for sub-pages
   (visit + events) — builds on styles.css
———————————————————————————————— */

.subhero{
  background:var(--green);color:var(--cream);position:relative;overflow:hidden;
  padding:clamp(3.5rem,7vw,6rem) var(--pad) clamp(3rem,6vw,5rem);
  border-bottom:2px solid var(--green-ink);
}
.subhero::before{
  content:"";position:absolute;inset:0;opacity:.08;pointer-events:none;
  background:repeating-linear-gradient(105deg,transparent 0 26px,var(--cream) 26px 27.5px);
}
.subhero__inner{position:relative;max-width:60rem;margin:0 auto}
.subhero .eyebrow{color:var(--accent-soft)}
.subhero h1{
  font-family:var(--display);font-weight:400;letter-spacing:-.035em;
  font-size:clamp(2.6rem,1.8rem + 4vw,4.6rem);color:var(--cream);line-height:1.02;
}
.subhero h1 em{font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;color:var(--accent-soft)}
.subhero__lede{max-width:44ch;margin-top:1.2rem;font-size:clamp(1.05rem,1rem + .35vw,1.25rem);opacity:.94}

.backlink{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.8rem;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-soft);text-decoration:none;
}
.backlink:hover{color:var(--cream)}

/* photo-backed variant of the sub-hero (events) */
.subhero--photo{border-bottom:none}
.subhero--photo .subhero__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.3;filter:saturate(.75);
}
.subhero--photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--green-ink) 78%,transparent) 0%,
    color-mix(in srgb,var(--green) 62%,transparent) 55%,
    var(--green) 100%);
}
.subhero--photo .subhero__inner{z-index:2}
.subhero--photo::before{z-index:1}

.subwrap{max-width:60rem;margin:0 auto;padding:clamp(3rem,6vw,5rem) var(--pad)}

/* ——— visit page ——— */
.visitcols{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,4rem);align-items:start}
@media(max-width:820px){.visitcols{grid-template-columns:1fr}}
.prose p{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);margin-bottom:1.3rem;max-width:52ch}
.prose strong{font-weight:600;color:var(--green)}
.book-card{
  background:var(--cream-deep);border:2px solid var(--green-ink);border-radius:16px;
  padding:1.8rem 1.7rem;box-shadow:6px 6px 0 color-mix(in srgb,var(--green) 22%,transparent);
  position:sticky;top:6rem;
}
.book-card h3{
  font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--green);margin-bottom:1rem;
}
.book-card .card__table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.95rem;margin-bottom:1.2rem}
.book-card .card__table td{padding:.35em 0;border-bottom:1px dashed color-mix(in srgb,var(--green) 35%,transparent)}
.book-card .card__table td:last-child{text-align:right;font-weight:700}
.book-card .btn{width:100%;text-align:center;margin-bottom:.7rem}
.book-card .tock-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;opacity:.6}
.visit-facts{list-style:none;margin:1.6rem 0 0}
.visit-facts li{padding:.5em 0 .5em 1.4em;position:relative;border-bottom:1px dashed color-mix(in srgb,var(--green) 25%,transparent)}
.visit-facts li::before{content:"✶";position:absolute;left:0;color:var(--accent);font-size:.8em;top:.75em}
.visit-facts b{color:var(--green)}

/* ——— events page layout ——— */
.eventwrap{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:start;max-width:70rem;
}
.eventwrap .form-success{grid-column:1/-1}

.eventside{display:flex;flex-direction:column;gap:1.6rem;position:sticky;top:6rem}
.eventside__photo{border:2px solid var(--green-ink);border-radius:16px;overflow:hidden;background:var(--cream-deep)}
.eventside__photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.eventside__photo figcaption{display:block;padding:.7rem 1rem 1rem;text-align:center;font-size:.95rem}

.factcard{
  background:var(--cream-deep);border:2px solid var(--green-ink);border-radius:16px;
  padding:1.5rem 1.4rem;box-shadow:6px 6px 0 color-mix(in srgb,var(--green) 22%,transparent);
}
.factcard h3{
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--green);margin-bottom:1rem;
}
.factcard .card__table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.88rem}
.factcard .card__table td{padding:.4em 0;border-bottom:1px dashed color-mix(in srgb,var(--green) 35%,transparent)}
.factcard .card__table td:last-child{text-align:right;font-weight:700}
.factcard__note{font-family:var(--mono);font-size:.72rem;opacity:.65;margin-top:1rem;line-height:1.6}
.factcard--quiet{background:transparent;box-shadow:none;border-style:dashed}
.factcard--quiet p{font-size:.98rem;margin-bottom:1.1rem}

/* Stacked layout. On a phone nothing gets to stand between the reader and the
   form — the photo and the facts card drop out, and the "not ready yet" exit
   CTA reorders to *after* the form rather than in front of it. `display:contents`
   lifts the sidebar's children into the page grid so they can be reordered.
   Must sit after .eventside above: media queries add no specificity. */
@media(max-width:900px){
  .eventwrap{grid-template-columns:1fr}
  .eventside{display:contents}
  .eventside__photo{display:none}
  .factcard:not(.factcard--quiet){display:none}
  .form{order:1}
  .factcard--quiet{order:2}
  .form-success{order:3}
}

/* ——— events form ——— */
.form{max-width:44rem;min-width:0}
/* Three tiers, each a different font and a clear size step, so the eye can
   rank them without reading: section heading (display serif) > field label
   (mono caps) > hint (mono, muted). */
.form__section{margin-bottom:3.6rem}
.form__section-label{
  display:flex;align-items:baseline;gap:.85rem;
  font-family:var(--display);font-weight:400;text-transform:none;
  font-size:clamp(1.5rem,1.3rem + .75vw,1.95rem);letter-spacing:-.02em;line-height:1.15;
  color:var(--green);margin-bottom:1.7rem;padding-bottom:.75rem;
  border-bottom:2px solid color-mix(in srgb,var(--green) 32%,transparent);
}
.form__no{
  flex:none;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.18em;
  color:var(--accent);
  border:1.5px solid color-mix(in srgb,var(--accent) 50%,transparent);
  border-radius:999px;padding:.35em .75em;
}
.field{margin-bottom:1.4rem;border:none;min-width:0}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:560px){.field--row{grid-template-columns:1fr}}
/* :not(.pill) — the option chips are <label>s too, and must keep their own type */
.field label:not(.pill),.field legend{
  display:block;font-family:var(--mono);font-size:.73rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  margin-bottom:.55rem;color:color-mix(in srgb,var(--green) 82%,transparent);padding:0;
}
.field legend{margin-bottom:.75rem}
.field label .req,.field legend .req{color:var(--accent)}
.field .opt{font-size:.92em;font-weight:400;opacity:.5;text-transform:none;letter-spacing:.04em}

/* [hidden] must beat the display rules below (grid/flex would otherwise win) */
[hidden]{display:none !important}

/* conditional reveal */
.field--conditional:not([hidden]){animation:fieldIn .28s ease}
@keyframes fieldIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* inline errors */
.field__err{
  font-family:var(--mono);font-size:.74rem;color:var(--accent);
  margin-top:.45rem;display:none;
}
.field__err.is-on{display:block}
.field.has-err input:not([type=radio]):not([type=checkbox]),
.field.has-err select,
.field.has-err textarea{border-color:var(--accent)}
.field.has-err .pill span{border-color:color-mix(in srgb,var(--accent) 70%,transparent)}

/* newsletter / consent line */
.checkline{
  display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;
  font-size:.98rem;line-height:1.5;margin-top:.4rem;
}
.checkline input{
  width:1.15em;height:1.15em;flex:none;margin-top:.25em;accent-color:var(--green);
}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--serif);font-size:1.02rem;color:var(--ink);
  background:#fffdf6;border:1.5px solid color-mix(in srgb,var(--green) 40%,transparent);
  border-radius:9px;padding:.7em .85em;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent);
}
.field textarea{resize:vertical;min-height:110px}
.field__hint{font-family:var(--mono);font-size:.72rem;opacity:.6;margin-top:.5rem;line-height:1.65;max-width:52ch}
.field__hint--above{margin-top:0;margin-bottom:.8rem}

/* multi-date chips */
.datechips{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.8rem}
.datechip{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--green);color:var(--cream);border-radius:999px;
  padding:.4em .5em .4em .9em;font-family:var(--mono);font-size:.82rem;
}
.datechip button{
  background:var(--accent);color:var(--green-ink);border:none;border-radius:50%;
  width:1.3em;height:1.3em;line-height:1;cursor:pointer;font-size:.9em;font-weight:700;
  display:grid;place-items:center;
}
.date-add{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap}
.date-add .field{flex:1;min-width:180px;margin-bottom:0}
.btn--outline{
  background:transparent;color:var(--green);border:1.5px solid var(--green);
  box-shadow:2px 2px 0 color-mix(in srgb,var(--green) 30%,transparent);white-space:nowrap;
}

/* event-type pills */
.pillgroup{display:flex;flex-wrap:wrap;gap:.7rem}
.pill{position:relative}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill span{
  display:inline-block;border:1.5px solid color-mix(in srgb,var(--green) 40%,transparent);
  border-radius:999px;padding:.55em 1.1em;font-family:var(--mono);font-size:.82rem;
  cursor:pointer;transition:all .15s;background:#fffdf6;
}
.pill input:checked + span{background:var(--green);color:var(--cream);border-color:var(--green-ink)}
.pill input:focus-visible + span{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}

.form__submit{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:1rem}
.form__note{font-family:var(--mono);font-size:.75rem;opacity:.65;max-width:26ch}

.form-success{
  display:none;background:var(--green);color:var(--cream);border:2px solid var(--green-ink);
  border-radius:16px;padding:clamp(1.8rem,4vw,2.6rem);text-align:center;box-shadow:6px 6px 0 var(--accent);
}
.form-success h3{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,1.4rem + 1vw,2.2rem);color:var(--cream);margin-bottom:.6rem}
.form-success p{opacity:.9}
.form-success .scrawl{color:var(--accent-soft);font-size:1.1rem;margin-top:1.6rem}

.success__summary{
  display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;
  max-width:26rem;margin:1.8rem auto;text-align:left;
  font-family:var(--mono);font-size:.82rem;
  border-top:1px dashed color-mix(in srgb,var(--cream) 35%,transparent);
  border-bottom:1px dashed color-mix(in srgb,var(--cream) 35%,transparent);
  padding:1.1rem 0;
}
.success__summary dt{color:var(--accent-soft);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;align-self:center}
.success__summary dd{font-weight:700}

.success__steps{
  list-style:none;counter-reset:step;max-width:34rem;margin:0 auto;
  text-align:left;display:grid;gap:.9rem;
}
.success__steps li{counter-increment:step;position:relative;padding-left:2.4rem;font-size:.98rem;opacity:.92}
.success__steps li::before{
  content:counter(step,decimal-leading-zero);position:absolute;left:0;top:.05em;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--accent-soft);
  border:1.5px solid color-mix(in srgb,var(--accent-soft) 55%,transparent);
  border-radius:999px;padding:.2em .55em;
}
.success__steps b{color:var(--cream)}

/* ——— faq ——— */
.faq{background:var(--cream-deep);border-top:2px solid var(--green-ink);padding:clamp(3rem,6vw,5rem) var(--pad)}
.faq__inner{max-width:52rem;margin:0 auto}
.faq h2{color:var(--green);margin-bottom:2.2rem}
.faq__list{display:grid;gap:0;border-top:1.5px solid color-mix(in srgb,var(--green) 25%,transparent)}
.faq details{border-bottom:1.5px solid color-mix(in srgb,var(--green) 25%,transparent)}
.faq summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding:1.1rem .2rem;cursor:pointer;list-style:none;color:var(--green);
  font-size:1.05rem;font-weight:500;transition:color .15s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:1.3rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--accent)}
.faq details p{padding:0 3rem 1.3rem .2rem;max-width:60ch;opacity:.85}

.subpage-foot{
  background:var(--green-ink);color:var(--cream);text-align:center;padding:2.5rem var(--pad);
  font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;
}
.subpage-foot a{color:var(--accent-soft)}