/* Forms and the About section. Uses the tokens from index.html. */

/* ---------- forms ---------- */
.lcform {
  position: relative; min-width: 0; width: min(640px, 100%); margin-inline: auto; text-align: left; color-scheme: light; /* native radios, checkboxes and menus on paper */
  background: var(--paper); color: var(--paper-ink); border-radius: 18px;
  padding: 26px clamp(18px, 4cqi, 32px) 28px; box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.4);
  border-top: 14px solid var(--red);
}
.flyer .lcform, .rsvp-panel .lcform { box-shadow: none; border-top: 0; padding: 0; background: transparent; width: 100%; }
.rsvp-panel .lcform { color: var(--chalk); color-scheme: dark; }
.lcform-inner { display: grid; gap: 18px; }
.lcform-head { display: grid; gap: 8px; }
.lcform-head h2, .lcform-head h3 { margin: 0; font: 900 clamp(30px, 5cqi, 42px)/.95 var(--display); font-stretch: 80%; text-transform: uppercase; }
.lcform-head p { margin: 0; color: var(--paper-dim); font-size: 16px; }
.rsvp-panel .lcform-head p { color: var(--chalk-dim); }
.lcform-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.lcf { grid-column: 1 / -1; display: grid; gap: 7px; min-width: 0; }
.lcf[data-half] { grid-column: auto; }
@container (max-width: 520px) { .lcf[data-half] { grid-column: 1 / -1; } }
.lcf-l { font-weight: 800; font-size: 15px; line-height: 1.3; }
.lcf[data-req] > .lcf-l::after { content: " *"; color: var(--red); }
.lcf input:not([type="radio"], [type="checkbox"]), .lcf textarea, .lcf select {
  width: 100%; font: 400 17px/1.4 var(--body); color: var(--paper-ink);
  background: #fffdf8; border: 2px solid #cfc6b4; border-radius: 10px; padding: 12px 14px; min-height: 48px;
}
.lcf textarea { resize: vertical; min-height: 120px; }
.lcf select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.lcf input:focus, .lcf textarea:focus, .lcf select:focus { outline: none; border-color: var(--paper-ink); box-shadow: 0 0 0 3px rgba(200,32,43,.25); }
.lcf-choices { display: grid; gap: 8px; }
.lcf-choice { display: flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer; }
.lcf input[type="radio"], .lcf input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--red); flex: none; }
.lcf.lcf-check { grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.lcf.lcf-check .lcf-l { font-weight: 600; }
.lcform-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lcform-send { cursor: pointer; font-size: clamp(18px, 3cqi, 21px); padding: 16px 26px 15px; }
.lcform-send:disabled { opacity: .6; cursor: default; }
.lcform-msg { margin: 0; min-height: 1.4em; font-weight: 700; font-size: 15px; }
.lcform-msg:empty { display: none; }
.lcform-msg.err { color: var(--red); }
.lcform-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lcform-done { margin: 0; font: 400 26px/1.25 "Gochi Hand", var(--marker); color: #1d3486; }
.rsvp-panel .lcform-done { color: var(--tape); }
html:not(.editing) .lcform:not(.sent) .lcform-done { display: none; }
.lcform.sent .lcform-fields, .lcform.sent .lcform-foot, .lcform.sent .lcform-msg { display: none; }
/* popup forms: a sheet like the story popup */
.lcform-sheet { position: relative; width: min(600px, calc(100% - 24px)); }
.lcform-sheet .lcform { width: 100%; box-shadow: none; border-radius: 0; }
.lcform-x { position: absolute; top: 18px; right: 14px; z-index: 2; color: var(--paper-ink); border-color: rgba(27,24,21,.35); }
.lcform-sheet .lcform-head { padding-right: 46px; }
html:not(.editing) [data-block="form"][data-popup]:not(dialog [data-block="form"]) { display: none; }

/* ---------- About ---------- */
.about { padding-block: 24px 80px; }
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 48px; align-items: start; }
.about-grid.photo-right { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.about-grid.photo-right > .photo { order: 2; }
@container (max-width: 820px) {
  .about-grid, .about-grid.photo-right { grid-template-columns: 1fr; }
  .about-grid > .photo { order: 0; justify-self: center; width: min(340px, 78%); }
}
.photo { margin: 0; position: relative; min-width: 0; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.photo-empty { display: none; }
.photo figcaption { margin: 0; }
/* polaroid (default) */
.photo:not([data-shape]), .photo[data-shape="polaroid"] {
  background: #fbfaf6; padding: 14px 14px 0; transform: rotate(-3deg);
  box-shadow: 0 22px 44px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.4);
}
.photo:not([data-shape])::before, .photo[data-shape="polaroid"]::before {
  content: ""; position: absolute; top: -16px; left: 50%; width: 120px; height: 32px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(230,217,168,.9); box-shadow: 0 2px 4px rgba(0,0,0,.25); z-index: 1;
}
.photo:not([data-shape]) figcaption, .photo[data-shape="polaroid"] figcaption {
  font: 700 clamp(24px, 3.4cqi, 30px)/1.1 Caveat, "Gochi Hand", cursive; color: #2a2622; text-align: center; padding: 12px 6px 18px; min-height: 58px;
}
/* round */
.photo[data-shape="circle"] img { aspect-ratio: 1; border-radius: 50%; border: 10px solid var(--paper); box-shadow: 0 18px 40px rgba(0,0,0,.6); }
.photo[data-shape="circle"] figcaption, .photo[data-shape="plain"] figcaption {
  font: 400 22px/1.25 "Gochi Hand", var(--marker); color: var(--tape); text-align: center; padding-top: 14px; text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
/* plain */
.photo[data-shape="plain"] img { border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.6); }
html:not(.editing) .photo:not(:has(img)) { display: none; }

/* the case-file sheet */
.about-sheet { transform: rotate(.7deg); }
.about-sheet h2 { margin-bottom: 8px; }
.about-facts { margin: 6px 0 22px; display: grid; border-top: 2px solid var(--paper-ink); }
.afact { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 4px 16px; padding: 11px 0 10px; border-bottom: 1px dashed #b9b09e; align-items: baseline; }
.afact dt { font: 500 12px/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.afact dd { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
@container (max-width: 420px) { .afact { grid-template-columns: 1fr; } }

/* rich text (also usable anywhere a rich text block goes) */
.rich { font-size: 18px; line-height: 1.65; max-width: 66ch; }
.rich > :first-child { margin-top: 0; }
.rich > :last-child { margin-bottom: 0; }
.rich p { margin: 0 0 14px; }
.rich h2, .rich h3 { margin: 26px 0 10px; font: 900 clamp(24px, 3.6cqi, 30px)/1 var(--display); font-stretch: 80%; text-transform: uppercase; }
.rich h3 { font-size: clamp(19px, 2.6cqi, 22px); font-stretch: 100%; letter-spacing: .02em; }
.rich ul, .rich ol { margin: 0 0 14px; padding-left: 1.4em; }
.rich li { margin: 4px 0; }
.rich li::marker { color: var(--red); font-weight: 800; }
.rich blockquote { margin: 18px 0; padding: 4px 0 4px 18px; border-left: 5px solid var(--tape); font: 400 24px/1.3 "Gochi Hand", var(--marker); color: #1d3486; }
.rich a { color: inherit; font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- social links ---------- */
/* Each link is <a class="soc" data-net="instagram">; the icon comes from here (the page's saved HTML can't hold SVG). */
.socials { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.socials.soc-left { justify-content: flex-start; }
.socials.soc-right { justify-content: flex-end; }
.soc {
  --h: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: none;
  height: var(--h); min-width: var(--h); padding: 0; border-radius: 999px; text-decoration: none;
  background: var(--b, #3a3530); color: var(--g, #fff); border: 2px solid rgba(255,255,255,.2);
  box-shadow: 0 6px 16px rgba(0,0,0,.45); transition: transform .12s ease;
  font: 800 15px/1 var(--display); letter-spacing: .04em; text-transform: uppercase;
}
.soc:hover { transform: translateY(-2px) rotate(-3deg); }
.soc:focus-visible { outline: 3px solid var(--tape); outline-offset: 3px; }
.soc-ic { width: calc(var(--h) * .48); height: calc(var(--h) * .48); flex: none; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.socials.soc-sm .soc { --h: 40px; font-size: 13px; }
.socials.soc-lg .soc { --h: 62px; font-size: 17px; }
.socials.soc-sq .soc { border-radius: 14px; }
.socials.soc-names .soc { padding: 0 20px 0 14px; }
/* icons only: the name stays for screen readers */
.socials:not(.soc-names) .soc-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* one color for all of them */
.socials.soc-mono .soc[data-net] { --b: var(--sc, var(--paper)); --g: var(--sc-fg, var(--paper-ink)); }
/* not set up yet: hidden on the live site */
html:not(.editing) .soc[href="https://"], html:not(.editing) .soc:not([href]) { display: none; }
@media (prefers-reduced-motion: reduce) { .soc { transition: none; } .soc:hover { transform: none; } }
.soc[data-net="instagram"] { --b: #E1306C; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='4' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.3' fill='%23000'/%3E%3C/svg%3E"); }
.soc[data-net="tiktok"] { --b: #111111; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v11.5a3.5 3.5 0 1 1-3.5-3.5' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M14 3.5c.6 2.6 2.4 4.2 5 4.5' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.soc[data-net="threads"] { --b: #111111; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 11.4c-.4-2.6-2.1-3.9-4.4-3.9-2.4 0-4 1.6-4 3.9 0 2.2 1.5 3.6 3.7 3.6 2.6 0 4.1-1.9 4.1-4.9 0-4.4-2.6-7.1-6.5-7.1C5.6 3 3 6.6 3 12s2.7 9 7.6 9c2.7 0 4.9-1 6.4-2.8' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.soc[data-net="x"] { --b: #111111; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h4.6L20 21h-4.6z' fill='%23000'/%3E%3Cpath d='M19.5 3.5l-6.6 7.4M4.5 20.5l6.6-7.4' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.soc[data-net="facebook"] { --b: #1877F2; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8.5V7c0-.8.4-1.2 1.2-1.2H17V2.3h-2.6C11.6 2.3 10 4 10 6.8v1.7H7.3V12H10v9.7h4V12h2.7l.5-3.5z' fill='%23000'/%3E%3C/svg%3E"); }
.soc[data-net="youtube"] { --b: #FF0000; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6 5h12a4 4 0 0 1 4 4v6a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4zm4 4v6l5.2-3z' fill='%23000'/%3E%3C/svg%3E"); }
.soc[data-net="bluesky"] { --b: #1185FE; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 11C10 7 6.5 4 4 4c-1.5 0-2 1-2 2.5 0 1.5.8 5 2.5 5.8C6.5 13 9 12.5 9 12.5S5 14 6.5 17c1.5 2.5 4 1 5.5-2 1.5 3 4 4.5 5.5 2 1.5-3-2.5-4.5-2.5-4.5s2.5.5 4.5-.2C21.2 11.5 22 8 22 6.5 22 5 21.5 4 20 4c-2.5 0-6 3-8 7z' fill='%23000'/%3E%3C/svg%3E"); }
.soc[data-net="linkedin"] { --b: #0A66C2; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2 7.5V18h2.6v-7.5zm1.3-1.2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM11.5 10.5V18h2.6v-3.9c0-1.1.5-1.8 1.4-1.8.8 0 1.2.6 1.2 1.7V18h2.6v-4.6c0-2.2-1.2-3.2-2.8-3.2-1.2 0-1.9.6-2.4 1.2v-.9z' fill='%23000'/%3E%3C/svg%3E"); }
.soc[data-net="email"] { --b: #C8202B; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.5 6.5l8.5 6.5 8.5-6.5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.soc[data-net="website"] { --b: #3A3530; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }