:root {
  --ink: #131836;
  --blue: #0039d9;
  --muted: #52596a;
  --peach: #ffefea;
  --line: #dfe3ec;
  --heading: Cardo, Georgia, serif;
  --body: "DM Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--peach); color: var(--ink); font: 16px/1.5 var(--body); }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; }
a { color: var(--blue); text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.landing { width: min(960px, calc(100% - 40px)); margin-inline: auto; }
.brand { padding-block: 24px 30px; }
.logo { width: 145px; }
.layout { display: grid; gap: 24px; }
.intro, .card { min-width: 0; }
.eyebrow { margin: 0 0 6px; color: var(--blue); font-size: .75rem; font-weight: 700; letter-spacing: .14em; }
h1, h2 { margin: 0; font-family: var(--heading); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; }
h1 { font-size: clamp(2.45rem, 8.5vw, 4.65rem); }
h1 em { color: var(--blue); font-style: normal; }
h2 { font-size: clamp(1.65rem, 4vw, 2.4rem); }
.date { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: .95rem; font-weight: 700; }
.date svg { flex: 0 0 20px; color: var(--blue); }
.lead { max-width: 40ch; margin: 9px 0 0; color: var(--muted); }
.workshop-details { display: grid; gap: 6px; margin: 12px 0 0; font-size: .9rem; }
.workshop-details > div { display: grid; grid-template-columns: 5rem 1fr; gap: 8px; }
.workshop-details dt { font-weight: 700; }
.workshop-details dd { margin: 0; overflow-wrap: anywhere; }
.workshop-photo { display: none; }

.card { padding: clamp(18px, 4vw, 34px); border: 1px solid #e4dcd9; border-radius: 12px; background: white; box-shadow: 0 10px 25px #1318360b; }
fieldset { min-width: 0; display: grid; gap: 12px; margin: 16px 0 0; padding: 0; border: 0; }
label { display: grid; gap: 4px; font-size: .9rem; font-weight: 700; }
input { width: 100%; min-height: 49px; padding: 10px 12px; border: 1px solid #aeb7c8; border-radius: 6px; background: white; color: var(--ink); font-size: 1rem; font-weight: 400; }
input::placeholder { color: #656d7e; }
button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 10px; border: 0; border-radius: 6px; background: var(--blue); color: white; font-weight: 700; cursor: pointer; }
button:hover { background: #002caf; }
button:disabled { opacity: .7; cursor: default; }
.fine-print, .status { margin: 9px 0 0; font-size: .81rem; }
.fine-print { color: var(--muted); }
.status:empty { margin: 0; }
.status:not(:empty) { padding: 8px 10px; border-radius: 5px; background: #eff4ff; }
.status[data-state="success"] { background: #e8f7ed; color: #14552c; }
.status[data-state="error"] { background: var(--peach); color: #832c22; }

footer { display: flex; flex-wrap: wrap; gap: 0 20px; padding-block: 6px 16px; font-size: .82rem; }
footer a { display: inline-flex; min-height: 44px; align-items: center; }

@media (min-width: 720px) {
  .landing { width: min(960px, calc(100% - 64px)); }
  .brand { padding-block: 32px 42px; }
  .layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(26px, 5vw, 64px); }
  h1 { font-size: clamp(3.25rem, 6.2vw, 4.65rem); }
  .date { margin-top: 17px; }
  .workshop-photo { display: block; margin-top: 20px; }
  .workshop-photo img { width: 100%; height: clamp(105px, 15vw, 155px); object-fit: cover; object-position: center 32%; border-radius: 8px; }
  fieldset { gap: 16px; margin-top: 22px; }
  footer { justify-content: flex-end; }
}

@media (max-width: 350px) {
  .landing { width: calc(100% - 32px); }
  .brand { padding-block: 16px 22px; }
  .layout { gap: 18px; }
}

.benefits { margin-top: 24px; padding-block: 18px 8px; border-top: 1px solid #e4dcd9; }
.benefits h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.benefit-list { display: grid; gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }
.benefit-list li { padding-left: 12px; border-left: 2px solid var(--blue); }
.benefit-list p { margin: 3px 0 0; color: var(--muted); font-size: .9rem; }

@media (min-width: 720px) {
  .benefit-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}