/* OOYN Core Values Workbook. Recreated from the OptimizePress pages. */
:root {
  --orange: #ffb114;
  --orange-dark: #e89c00;
  --blue: #0088ff;
  --panel: rgba(18, 14, 8, 0.86);
  --text: "Open Sans", system-ui, sans-serif;
  --head: "Lato", "Open Sans", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 400 1rem/1.55 var(--text); color: #fff; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; }

.scene { min-height: 100svh; background: #b8661c url("assets/bg-sunset.jpg") center / cover no-repeat; padding: 40px 20px; display: flex; justify-content: center; }
@media (min-width: 900px) { .scene { background-attachment: fixed; } }

/* Landing panel. */
.panel { width: min(556px, 100%); background: var(--panel); border-radius: 0 0 8px 8px; padding: 22px 36px 26px; text-align: center; align-self: flex-start; }
.panel__cover { width: min(270px, 70%); margin: 0 auto 10px; transform: rotate(-1deg); filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)); }
.panel h1 { font: 700 clamp(1.4rem, 1.1rem + 1vw, 1.7rem)/1.25 var(--text); letter-spacing: -0.01em; margin: 0 0 .7rem; }
.panel__sub { margin: 0 0 1rem; color: #e6e1d8; font-size: .95rem; }
.panel__privacy { margin: 1.1rem 0 0; color: #d9d3c8; font-size: .92rem; }
.panel__privacy b { color: #fff; }
.copy { margin: 1.8rem 0 0; font: 400 1rem/1.4 var(--head); }

.btn-orange {
  display: block; width: 100%; max-width: 400px; margin: 0 auto;
  border: 0; border-radius: 6px; cursor: pointer; text-decoration: none;
  background: linear-gradient(#ffb114, #f7a700); color: #fff;
  font: 700 1.6rem/1.2 var(--text); letter-spacing: -0.5px; text-shadow: 0 1px 0 #cc7a00;
  padding: 1.15rem 1rem;
  transition: filter 120ms ease, transform 120ms ease;
}
.btn-orange:hover { filter: brightness(1.05); }
.btn-orange:active { transform: translateY(1px); }

/* Email popup. */
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .55); }
.modal[hidden] { display: none; }
.modal__box { position: relative; width: min(700px, 100%); background: #fff; color: #111; padding: 38px clamp(20px, 6vw, 45px) 40px; text-align: center; }
.modal__box h2 { font: 700 clamp(1.25rem, 1rem + 1vw, 1.55rem)/1.25 var(--head); margin: 0 0 1.2rem; }
.modal__close { position: absolute; top: -14px; right: -14px; width: 32px; height: 32px; border-radius: 50%; border: 3px solid #fff; background: #111; color: #fff; font: 700 1.1rem/1 var(--text); cursor: pointer; display: grid; place-items: center; }
@media (max-width: 600px) { .modal__close { top: 8px; right: 8px; } }
.form { display: grid; gap: 14px; }
.form input[type=email] { font: 400 1.05rem/1.4 Arial, sans-serif; padding: 13px 15px; border: 2px solid #ddd; background: #eee; color: #111; width: 100%; }
.form input[type=email]:focus { outline: 2px solid var(--orange); border-color: var(--orange); background: #fff; }
.form .btn-orange { max-width: none; font-family: var(--head); font-size: 1.5rem; }
.form__note { margin: 4px 0 0; color: #777; font-size: .92rem; }
.form__err { margin: 0; color: #b42318; font-weight: 600; }
.form__err[hidden] { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Thank-you page. */
.thanks { min-height: 100svh; background: #e3dac2 url("assets/thanks-bg.jpg") center / cover no-repeat; padding: 70px 20px 30px; display: flex; flex-direction: column; align-items: center; color: #222; }
.thanks__box { width: min(940px, 100%); background: rgba(255, 255, 255, 0.86); border-radius: 8px; padding: 60px 20px 70px; text-align: center; }
.thanks__cover { width: 190px; margin: 0 auto 1.4rem; }
.thanks h1 { font: 700 clamp(2.2rem, 1.7rem + 2vw, 2.8rem)/1.1 var(--head); margin: 0 0 .7rem; color: #111; }
.thanks__lead { font: 400 1.2rem/1.45 var(--head); max-width: 36em; margin: 0 auto 2.4rem; color: #333; }
.btn-blue { display: inline-block; background: var(--blue); color: #fff; text-decoration: none; border-radius: 8px; padding: 1.15rem 3.5rem; font: 700 clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem)/1.1 var(--head); }
.btn-blue:hover { filter: brightness(1.08); }
.thanks__psst { margin: 1.2rem 0 0; color: #333; }
.thanks .copy { color: #333; text-shadow: 0 1px 0 rgba(255,255,255,.7); }

/* Subscriber list (admin/). */
.admin { background: #f6f4ef; color: #222; min-height: 100svh; padding: 40px 20px; }
.admin main { max-width: 900px; margin: 0 auto; }
.admin h1 { font: 700 2rem/1.2 var(--head); margin: 0 0 .4rem; }
.admin table { width: 100%; border-collapse: collapse; background: #fff; margin-top: 1.4rem; }
.admin th, .admin td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid #e5e1d8; }
.admin th { background: #222; color: #fff; font-weight: 600; }
.admin .btn-orange { display: inline-block; width: auto; font-size: 1.1rem; padding: .8rem 1.4rem; }
.notice { background: #fff4e5; border: 1px solid #f5b54a; border-radius: 8px; padding: 1rem 1.2rem; }