/* Daftar Cepat: visual language of the supplied Open House flyer. */
@font-face { font-family: "OH Anton"; src: url("../assets/fonts/open-house/Anton-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "OH Caveat"; src: url("../assets/fonts/open-house/Caveat-Variable.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; }
body[data-design="direct"] {
  --oh-paper: #fafaf8; --oh-white: #fff; --oh-ink: #214586;
  --oh-muted: #52617b; --oh-line: #ced8e9; --oh-soft: #edf3fd;
  --oh-action: #214586; --oh-action-ink: #fff; --oh-accent: #ff681e;
  background-image: radial-gradient(#21458609 .6px, transparent .6px);
  background-size: 4px 4px;
}
body[data-design="direct"] :focus-visible { outline-color: #e45a16; }
body[data-design="direct"] ::selection { background: #ffcfb4; color: #14346b; }
body[data-design="direct"] .oh-header {
  max-width: none; min-height: 76px; background: #214586; color: white; border: 0;
  padding: 16px max(var(--oh-gutter), calc((100vw - var(--oh-width)) / 2 + var(--oh-gutter)));
}
body[data-design="direct"] .oh-brand { flex: 1; }
body[data-design="direct"] .oh-brand > .oh-web-logo { width: min(180px, 100%); height: auto; max-height: 36px; object-fit: contain; object-position: left; }
body[data-design="direct"] .oh-header-link { border: 0; font-weight: 700; background: #fff; color: #214586; border-radius: 99px; padding: 0 13px; }
body[data-design="direct"] .oh-hero {
  display: grid; grid-template-columns: minmax(0,1fr); gap: 0;
  padding: 28px var(--oh-gutter) 26px; text-align: center; overflow: hidden;
  background: var(--oh-paper);
}
body[data-design="direct"] .oh-hero-copy { order: 0; grid-area: auto; }
body[data-design="direct"] .oh-flyer-invite {
  --pesat-font-family: "OH Caveat", cursive;
  font-family: "OH Caveat", cursive; font-size: 35px; font-weight: 600;
  line-height: 1.1; transform: rotate(-3deg); margin: 0 auto 9px; width: fit-content;
}
body[data-design="direct"] .oh-hero h1 {
  --pesat-font-family: "OH Anton", Impact, "Arial Narrow", sans-serif;
  font-family: "OH Anton", Impact, "Arial Narrow", sans-serif; font-weight: 400;
  font-size: clamp(58px, 17.6vw, 78px); line-height: 1.06; letter-spacing: -.02em;
  max-width: none; white-space: nowrap; color: #214586;
  text-shadow: 1px 2px 0 #dce3ee; -webkit-text-stroke: 1px #fff; paint-order: stroke fill;
}
body[data-design="direct"] .oh-hero h1 span { display: block; font-size: .58em; line-height: 1.2; color: #f7641b; margin-top: 4px; letter-spacing: -.01em; }
body[data-design="direct"] .oh-lead { font-size: 13px; margin: 12px auto 0 !important; line-height: 1.65; max-width: 40ch; }
body[data-design="direct"] .oh-flyer-spark {
  display: none;
}
body[data-design="direct"] .oh-flyer-cast {
  position: relative; order: 1; aspect-ratio: 1.9; overflow: hidden;
  margin: 14px calc(-1 * var(--oh-gutter)) -10px;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 clamp(7px, 2vw, 12px), #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 clamp(7px, 2vw, 12px), #000 calc(100% - 32px), transparent);
}
body[data-design="direct"] .oh-flyer-cast img {
  position: absolute; width: 100%; max-width: none; height: auto; left: 0; top: -81.8%;
}
body[data-design="direct"] .oh-flyer-registration { order: 2; margin-top: 24px; }
body[data-design="direct"] .oh-flyer-save {
  position: relative; z-index: 1; background: var(--oh-paper); width: fit-content;
  margin: 0 auto -12px; padding: 0 12px; font-size: 18px; font-weight: 800; font-style: italic; line-height: 24px;
}
body[data-design="direct"] .oh-flyer-registration .oh-event-card {
  border: 2px solid #214586; border-radius: 16px; padding: 22px 13px 16px;
  gap: 12px; text-align: left; background: #ffffff70;
}
body[data-design="direct"] .oh-date { min-width: 48px; }
body[data-design="direct"] .oh-date strong { font-size: 40px; font-weight: 750; }
body[data-design="direct"] .oh-date span { font-size: 8px; letter-spacing: .12em; }
body[data-design="direct"] .oh-event-copy { padding-left: 12px; }
body[data-design="direct"] .oh-event-copy strong { font-size: 13px; font-weight: 750; }
body[data-design="direct"] .oh-event-copy p { font-size: 11px; line-height: 1.65; }
body[data-design="direct"] .oh-primary { border-radius: 99px; background: #ff681e; color: #172e5b; font-weight: 800; }
body[data-design="direct"] .oh-flyer-registration > .oh-primary { width: 100%; margin-top: 17px; font-size: 15px; box-shadow: 0 3px 0 #c8460a; }
body[data-design="direct"] .oh-flyer-registration > .oh-secondary { margin-top: 6px; width: 100%; font-size: 11px; }
body[data-design="direct"] .oh-kicker { color: #476697; letter-spacing: .13em; }
body[data-design="direct"] .oh-section { padding-block: 42px; }
body[data-design="direct"] .oh-section-title { font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -.035em; }
body[data-design="direct"] .oh-section-head > .oh-kicker::before { content: ""; display: inline-block; width: 17px; height: 4px; background: #ff681e; vertical-align: middle; margin-right: 8px; }
body[data-design="direct"] .oh-unit-tabs [role="tab"] { background: #fff; border-radius: 13px; border-width: 2px; }
body[data-design="direct"] .oh-unit-tabs [role="tab"][aria-selected="true"] { border-color: #214586; background: #edf3fd; }
body[data-design="direct"] .oh-unit-tabs [role="tab"][aria-selected="true"]::after { background: #ff681e; bottom: -2px; height: 4px; }
body[data-design="direct"] .oh-unit-panel { border-radius: 17px; }
body[data-design="direct"] .oh-unit-copy h3 { font-weight: 800; }
body[data-design="direct"] .oh-values { background: #214586; --oh-ink: #fff; --oh-muted: #dde7fc; --oh-line: #ffffff36; color: white; }
body[data-design="direct"] .oh-values .oh-kicker { color: #fbc898; }
body[data-design="direct"] .oh-pillars article > svg { color: #ff9d59; }
body[data-design="direct"] .oh-section:has(.oh-testimonial) { background: #edf3fd; }
body[data-design="direct"] .oh-testimonial::before { color: #f7641b; font-weight: 800; }
body[data-design="direct"] .oh-testimonial blockquote > p { font-weight: 600; }
body[data-design="direct"] .oh-avatar { background: #dbe7fc; }
body[data-design="direct"] .oh-event-details { border: 2px solid #214586; border-radius: 17px; padding: 0 16px 5px; }
body[data-design="direct"] .oh-event-details dl > div:first-child { border-top: 0; }
body[data-design="direct"] .oh-venue-photo { border-radius: 17px; }
body[data-design="direct"] .oh-faq summary { font-weight: 700; }
body[data-design="direct"] .oh-final { background: #214586; color: #fff; }
body[data-design="direct"] .oh-final > .oh-kicker { color: #ffc19b; }
body[data-design="direct"] .oh-final > p:not(.oh-kicker) { color: #e3ebfd; }
body[data-design="direct"] .oh-final h2 { font-weight: 800; }
body[data-design="direct"] .oh-final .oh-primary { background: #ff681e; color: #172e5b; }
body[data-design="direct"] .oh-sticky { background: #214586; color: #fff; border-color: #ffffff26; box-shadow: 0 -3px 18px #16397418; }
body[data-design="direct"] .oh-sticky > div > span { color: #dbe6fc; }
body[data-design="direct"] .oh-register-dialog { background: #fafaf8; }
body[data-design="direct"] .oh-register-dialog::backdrop { background: #0b214ca8; }
body[data-design="direct"] .oh-preview-tag::before { background: #ff681e; }
body[data-design="direct"] .oh-form-progress span.active { background: #ff681e; }
body[data-design="direct"] .oh-form-intro h2 { font-weight: 800; }
body[data-design="direct"] .oh-field input { border-color: #becce4; border-radius: 10px; }
body[data-design="direct"] .oh-form-units input:focus-visible + span { outline-color: #ff681e; }
@media (min-width: 600px) {
  body[data-design="direct"] .oh-hero { max-width: 760px; padding-inline: 48px; }
  body[data-design="direct"] .oh-flyer-invite { font-size: 44px; }
  body[data-design="direct"] .oh-hero h1 { font-size: 106px; }
  body[data-design="direct"] .oh-lead { font-size: 15px; }
  body[data-design="direct"] .oh-flyer-cast { margin-inline: -48px; }
  body[data-design="direct"] .oh-flyer-registration { width: 100%; max-width: 480px; margin-inline: auto; }
  body[data-design="direct"] .oh-flyer-registration > .oh-primary { max-width: none; }
  body[data-design="direct"] .oh-section { padding-block: 64px; }
  body[data-design="direct"] .oh-section-title { font-size: 40px; }
}
@media (min-width: 1000px) {
  body[data-design="direct"] .oh-hero { max-width: var(--oh-width); padding: 48px 40px; grid-template-columns: 1fr 1fr; gap: 24px 44px; align-items: center; }
  body[data-design="direct"] .oh-hero-copy { grid-column: 1; grid-row: 1; }
  body[data-design="direct"] .oh-hero h1 { font-size: 90px; }
  body[data-design="direct"] .oh-flyer-invite { font-size: 38px; }
  body[data-design="direct"] .oh-flyer-cast { grid-column: 2; grid-row: 1 / 3; width: 100%; margin: 0; align-self: center; border-radius: 0; transform: none; box-shadow: none; }
  body[data-design="direct"] .oh-flyer-registration { grid-column: 1; grid-row: 2; margin-top: 0; }
  body[data-design="direct"] .oh-flyer-spark { right: -3px; }
}
@media (max-width: 359px) {
  body[data-design="direct"] .oh-header { min-height: 69px; padding-block: 13px; }
  body[data-design="direct"] .oh-brand > .oh-web-logo { width: 155px; }
  body[data-design="direct"] .oh-header-link { padding-inline: 10px; }
  body[data-design="direct"] .oh-hero { padding-top: 22px; }
  body[data-design="direct"] .oh-flyer-invite { font-size: 30px; }
  body[data-design="direct"] .oh-hero h1 { font-size: 56px; }
  body[data-design="direct"] .oh-lead { font-size: 12px; }
  body[data-design="direct"] .oh-flyer-registration .oh-event-card { padding-inline: 10px; gap: 8px; }
  body[data-design="direct"] .oh-event-copy { padding-left: 9px; }
  body[data-design="direct"] .oh-event-copy strong { font-size: 11px; }
  body[data-design="direct"] .oh-event-copy p { font-size: 10px; }
  body[data-design="direct"] .oh-section-title { font-size: 28px; }
}

/* Recovery remains visible without keeping family form values in browser storage. */
.oh-recovery { margin: 20px auto; padding: 20px; max-width: 1100px; border: 1px solid #b9c8df; border-radius: 16px; background: #edf3fc; color: #214586; }
.oh-recovery p { margin: 0 0 12px; line-height: 1.6; }
.oh-form-intro > a { display: inline-block; margin-top: 14px; color: #214586; font-size: 13px; text-underline-offset: 3px; }