/* A living paper magazine: one reading column, Claude orange, warm paper and ink. */

:root {
  color-scheme: light;
  --paper: #eeece4;
  --ink: #2b2724;
  --muted: #6a645c;
  --line: #78706449;
  --accent: #d97757;
  --display: "AppleMyungjo", "Noto Serif KR", "Batang", "Nanum Myeongjo", Georgia, serif;
  --tint: #e7e1d6a6;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --z-sticky: 10;
  --z-intro: 30;
  --z-skip: 40;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  background: #d9d3c7;
  scroll-padding-top: 24px;
  scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

body {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.page {
  display: flow-root;
  width: 100%;
  max-width: 400px;
  min-height: 100dvh;
  margin-inline: auto;
  padding-bottom: calc(87px + env(safe-area-inset-bottom));
  background-color: var(--paper);
  background-image: linear-gradient(#eeece4bc, #eeece4bc), url("assets/magazine-paper-v1.webp");
  background-size: auto, 320px;
}

.masthead { padding: 24px 24px 0; }

.cover-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px;
  align-items: start;
  gap: 14px;
  margin: 20px 24px 0;
}

.living-cover {
  min-width: 0;
  margin: 0;
  padding: 4px;
  border: 3px double #7a736aa6;
}

.lecture-frame {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #dcd6cd;
}

.living-cover video, .living-cover img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  filter: saturate(.85) contrast(.98);
}

.living-cover .lecture-still { display: none; }

.countdown {
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: right;
}

.countdown-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
}

.day-mark {
  order: -1;
  font-family: var(--display);
  font-size: 50px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--ink);
  /* A background, not a shadow, so the entrance can draw the mark from the left. */
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 100% 5px;
}

.day-mark.is-date { font-size: 30px; }
.day-mark.is-today, .day-mark.is-started { font-size: 22px; }

.count-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-top: 8px;
}

.count-grid > span {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 7px;
}

.count-grid b {
  display: inline-block;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -1.4px;
  font-variant-numeric: tabular-nums;
}

.count-grid small {
  min-width: 20px;
  text-align: left;
  color: var(--muted);
  font-size: 10px;
}

.poster {
  padding: 40px 24px 50px;
}

h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.6px;
}

/* The title is its own mask: the art rises into it when the page is entered. */
.title-art { overflow: hidden; }

.title-art img {
  display: block;
  width: 100%;
  height: auto;
}

.subscription {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: -.4px;
  word-break: keep-all;
}

/* Each line sits in a mask of its own, which it rises out of when the page is entered. */
.subscription .line { display: block; overflow: hidden; }
.subscription .line > span { display: block; }

/* On a 320px phone the first sentence breaks before this phrase, not inside it. */
.subscription .nowrap { white-space: nowrap; }

.subscription strong {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -1px;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 100% 5px;
  white-space: nowrap;
}

.lead-copy, .practice-copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: -.25px;
  word-break: keep-all;
}

.lead-copy + .lead-copy, .practice-copy {
  margin-top: 24px;
}

.event-list { margin: 0; }
.event-list > div { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 20px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.event-list > div:first-child { padding-top: 0; }
.event-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.event-list dt { color: var(--muted); font-size: 12px; white-space: nowrap; }
.event-list dt::after { content: " :"; }
.event-list dd { margin: 0; font-size: clamp(12px, 3.5vw, 14px); line-height: 1.7; text-align: right; white-space: nowrap; }
.event-list strong { font-weight: 650; }
.event-note { display: inline; color: var(--muted); font-size: .85em; margin-left: 6px; }
.event-steps { display: inline-grid; gap: 3px; margin: 0; padding: 0; list-style: none; counter-reset: step; text-align: left; }
.event-steps li { display: flex; align-items: baseline; counter-increment: step; }
.event-steps li::before { margin-right: 6px; color: var(--muted); content: counter(step) "."; }
.stars { margin-left: auto; padding-left: 14px; letter-spacing: 1px; }
.stars i { color: var(--line); font-style: normal; }
.event-worth { display: block; margin-top: 3px; font-size: .92em; }
.event-worth strong { box-shadow: inset 0 -5px var(--accent); }

/* The venue photo opens the block; the map pin sits beside the venue name. */
.venue-photo { margin: 0 0 26px; }

.venue-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px double var(--line);
  filter: saturate(.6);
}

.map-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: 8px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  vertical-align: middle;
  transition: background-color .2s var(--ease-out);
}

/* Widens the tap area to 44px without growing the circle. */
.map-link::after {
  position: absolute;
  inset: -9px;
  content: "";
}

.map-link:hover, .map-link:focus-visible { background: var(--accent); }

.section {
  margin-inline: 24px;
  border-top: 1px solid var(--line);
}

h2 {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -.9px;
  word-break: keep-all;
  text-wrap: balance;
}

.application {
  padding-block: 46px 16px;
  scroll-margin-top: 24px;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
}

input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 45px;
  margin-bottom: 16px;
  padding: 11px 13px;
  border: 1px solid #9a9286;
  border-radius: 0;
  background: #f3f2eccc;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

input::placeholder {
  color: var(--muted);
  opacity: 1;
  font-size: 13px;
}

input:disabled {
  opacity: 1;
  -webkit-text-fill-color: var(--muted);
}

.optional {
  margin-left: 5px;
  color: var(--muted);
  font-size: 11px;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.7;
}

.consent input, .interest-grid input {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--ink);
}

/* Interest topics: any number of them, two to a row. */
.interests { margin-bottom: 18px; }

.interests legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 12px;
}

.interest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.interest-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 8px 11px;
  border: 1px solid #9a9286;
  background: #f3f2eccc;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: -.3px;
  word-break: keep-all;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.interest-grid input { margin: 0; }

.interest-grid label:has(input:checked) {
  border-color: var(--ink);
  background: var(--accent);
}

.interest-grid label:has(input:disabled) {
  color: var(--muted);
  cursor: not-allowed;
}

.consent small {
  color: var(--muted);
  font-size: 11px;
}

/* The submit button shares .cta (sections.css); only the form-specific parts live here. */
#application-form button {
  width: 100%;
  border-radius: 0;
  font-family: inherit;
}

#application-form button:disabled {
  border-color: #9a9286;
  background: transparent;
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
}

/* The notice sits right under the consent box it explains, above the optional topics. */
.privacy {
  margin-bottom: 18px;
}

.privacy summary {
  padding-block: 9px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
}

.privacy dl {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.75;
}

.privacy dl > div {
  margin-bottom: 13px;
}

.privacy dt {
  color: var(--muted);
}

.privacy dd {
  margin: 3px 0 0;
}

.privacy a {
  color: inherit;
  text-underline-offset: 3px;
}

.footer {
  margin: 30px 24px 0;
  padding: 22px 0 12px;
  border-top: 3px double var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}

.footer p {
  margin: 0 0 3px;
}

.footer strong {
  color: var(--ink);
  font-family: var(--display);
}

/* The business name stands a little apart from the lines under it. */
.footer p:first-child {
  margin-bottom: 10px;
}

.footer .copyright {
  margin-top: 20px;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

/* The intro overlay only exists while intro.css has taken it over. */
.intro {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: -10000px;
  z-index: var(--z-skip);
  padding: 10px 16px;
  background: var(--paper);
  color: var(--ink);
}

.skip-link:focus {
  left: 8px;
}

.reveal-ready {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease, transform .55s ease;
}

.reveal-ready.is-visible {
  opacity: 1;
  transform: none;
}

/* Entering the page. The first screen settles the way the intro's lines do: the title and the opening lines
   rise out of their masks, the orange marks are drawn from the left, the button's bar is wiped in and the
   countdown lands row by row, 1.1s in all. --at is when a piece starts. --enter is the wait before any of them:
   intro.css sets it while the intro covers the page, and the pieces must be done 1.15s after it, when intro.js
   lets go of the page. The hidden states exist only inside the keyframes, so a browser that cannot run one
   shows that piece at once. The numbers ([data-unit]) are left alone: motion.js cancels their animations.
   The countdown rows do not wait for --enter. They are only shown once motion.js has filled them in and their
   clock starts then, however late: waiting would leave them hidden after the rest has arrived. Under the intro
   they settle unseen and come in with their block. */
@media (prefers-reduced-motion: no-preference) {
  .title-art img, .subscription .line > span { animation: enter-rise .9s var(--ease-out) calc(var(--enter, 0s) + var(--at, 0s)) backwards; }
  .day-mark, .subscription strong { animation: enter-mark .45s var(--ease-out) calc(var(--enter, 0s) + var(--at, 0s)) backwards; }
  .countdown-heading, .hero-cta .cta > span { animation: enter-fade .5s var(--ease-out) calc(var(--enter, 0s) + var(--at, 0s)) backwards; }
  .count-grid > span { animation: enter-fade .5s var(--ease-out) var(--at) backwards; }
  .hero-cta .cta { animation: enter-wipe .55s var(--ease-out) calc(var(--enter, 0s) + .25s) backwards; }

  .countdown-heading { --at: .2s; }
  .day-mark { --at: .45s; }
  .count-grid > span:nth-child(1) { --at: .28s; }
  .count-grid > span:nth-child(2) { --at: .34s; }
  .count-grid > span:nth-child(3) { --at: .4s; }
  .count-grid > span:nth-child(4) { --at: .46s; }
  .hero-cta .cta > span { --at: .45s; }
  .subscription .line > span { animation-duration: .5s; }
  .subscription .line:nth-child(1) > span { --at: .4s; }
  .subscription .line:nth-child(2) > span { --at: .48s; }
  .subscription .line:nth-child(3) > span { --at: .56s; }
  .subscription strong { --at: .65s; }
}

@keyframes enter-rise { from { transform: translateY(105%); } }
@keyframes enter-mark { from { background-size: 0 5px; } }
@keyframes enter-fade { from { opacity: 0; transform: translateY(8px); } }
@keyframes enter-wipe { from { clip-path: inset(0 100% 0 0); } }

@media (min-width: 640px) {
  .page {
    margin-block: 20px;
    min-height: calc(100dvh - 40px);
  }
}

@media (max-width: 350px) {
  .masthead { padding-inline: 22px; }
  .cover-spread { margin-inline: 22px; grid-template-columns: minmax(0, 1fr) 80px; gap: 12px; }
  .poster {
    padding-inline: 22px;
  }
  .section, .footer {
    margin-inline: 22px;
  }
  .count-grid {
    gap: 3px;
  }
  .count-grid b {
    font-size: 26px;
  }
  .day-mark { font-size: 38px; }
  .subscription strong {
    font-size: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .living-cover video { display: none; }
  .living-cover .lecture-still { display: block; }
  .reveal-ready {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.application-status, .application-success { margin: 20px 0; font-size: 14px; }
/* The confirmation is set as an invitation card: a double rule with a hairline inside it, everything centred. */
.application-success { position: relative; padding: 38px 22px 24px; border: 3px double #7a736aa6; background: #f3f2ec99; line-height: 1.75; text-align: center; }
.application-success::before { position: absolute; inset: 5px; border: 1px solid var(--line); content: ""; pointer-events: none; }
.application-success p { margin: 0 0 16px; word-break: keep-all; }
.application-success a { display: inline-block; margin-bottom: 12px; color: var(--ink); text-underline-offset: 4px; }
.application-success .success-when { margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.success-title { font-family: var(--display); font-size: clamp(20px, 6vw, 22px); font-weight: 600; line-height: 1.4; letter-spacing: -.7px; }
.success-title::after { display: block; width: 28px; height: 5px; margin: 16px auto 0; background: var(--accent); content: ""; }
.application-success .success-account { margin-block: 20px; padding-block: 14px; border-block: 1px solid var(--line); }
.success-account span { display: block; color: var(--muted); font-size: 12px; }
.success-account strong { display: block; font-size: clamp(13px, 4.1vw, 16px); font-weight: 650; text-wrap: balance; }
#application-form button:not(:disabled) { cursor: pointer; }