/* Demo demo34 "Your Cover" — the demo5 language: pale green-grey #e7ece6, deep green #17382b, lime #c8f06a, Schibsted Grotesk up to 900; a live magazine cover beside the form. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { --ground: #e7ece6; --paper: #f5f7f3; --ink: #13261d; --muted: #5d6c63; --green: #17382b; --lime: #c8f06a; --line: rgba(19,38,29,.16); --err: #b3261e;
  --su-pad: 16px; --su-focus: var(--green); --su-meter-on: var(--green); --su-meter-off: rgba(19,38,29,.12);
  background: var(--ground); color: var(--ink); font: 400 16px/1.5 "Schibsted Grotesk", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.yc { display: grid; grid-template-columns: minmax(0, 44vw) minmax(0, 1fr); min-height: 100vh; }

/* the cover */
.yc__cover { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; color: #fff; background: var(--green); display: flex; flex-direction: column; padding: 28px 32px 30px; }
.yc__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: opacity .35s ease, transform 6s ease-out; }
.yc__photo.is-out { opacity: 0; }
.yc__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,24,17,.45) 0%, rgba(10,24,17,0) 26%, rgba(10,24,17,.05) 48%, rgba(10,24,17,.88) 100%); }
.yc__mast, .yc__issue, .yc__lines, .yc__meter { position: relative; }
.yc__mast { margin: 0; font: 900 clamp(88px, 13vw, 200px)/.8 "Schibsted Grotesk", sans-serif; letter-spacing: -.07em; }
.yc__issue { margin: 10px 0 0; font: 700 12px/1 "Schibsted Grotesk", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.yc__lines { margin-top: auto; }
.yc__kicker { display: inline-block; margin: 0 0 12px; padding: 6px 9px; background: var(--lime); color: var(--green); font: 700 12px/1.2 "Schibsted Grotesk", sans-serif; letter-spacing: .1em; text-transform: uppercase; max-width: 100%; }
.yc__name { margin: 0; font: 900 clamp(40px, 5vw, 76px)/.92 "Schibsted Grotesk", sans-serif; letter-spacing: -.05em; overflow-wrap: anywhere; }
.yc__handle { margin: 10px 0 0; font: 500 20px/1.2 "Schibsted Grotesk", sans-serif; overflow-wrap: anywhere; }
.yc__place { margin: 6px 0 0; font: 400 16px/1.3 "Schibsted Grotesk", sans-serif; color: rgba(255,255,255,.82); }
.yc__place::before { content: "● "; color: var(--lime); }
.yc__lines .is-empty { opacity: .55; }
.yc__kicker.is-empty { opacity: .8; }
.yc__meter { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.3); font: 700 12px/1 "Schibsted Grotesk", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.yc__meter b { justify-self: end; font-size: 16px; letter-spacing: 0; }
.yc__meter i { grid-column: 1 / -1; height: 4px; margin-top: 10px; background: linear-gradient(90deg, var(--lime) var(--su-progress, 0%), rgba(255,255,255,.25) var(--su-progress, 0%)); transition: background .4s; }

/* the form */
.yc__main { padding: 26px clamp(20px, 5vw, 72px) 80px; }
.yc__top { display: flex; align-items: center; justify-content: space-between; }
.yc__brand { font: 900 20px/1 "Schibsted Grotesk", sans-serif; letter-spacing: .3em; text-decoration: none; }
.yc__signin { margin: 0; font-size: 14px; color: var(--muted); }
.yc__signin a { color: var(--green); font-weight: 700; }
.yc__form { max-width: 560px; margin: 8vh auto 0; }
.yc__step { display: inline-block; margin: 0 0 16px; padding: 6px 9px; background: var(--lime); color: var(--green); font: 700 12px/1 "Schibsted Grotesk", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.yc__title { margin: 0; font: 900 clamp(44px, 5.2vw, 76px)/.92 "Schibsted Grotesk", sans-serif; letter-spacing: -.05em; }
.yc__lead { margin: 16px 0 30px; font-size: 18px; color: var(--muted); }

.yc__core, .yc__more { display: grid; gap: 20px; }
.su-label, .su-group-label { margin-bottom: 8px; font: 700 13px/1.2 "Schibsted Grotesk", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.su-group .su-label { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.su-num { color: var(--green); background: var(--lime); padding: 2px 5px; font-size: 11px; }
.su-input { height: 54px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font: 500 17px/1 "Schibsted Grotesk", sans-serif; transition: border-color .2s, box-shadow .2s; }
.su-input::placeholder { color: rgba(19,38,29,.38); }
.su-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(200,240,106,.7); }
.is-invalid .su-input { border-color: var(--err); }
.is-valid .su-input { border-color: rgba(23,56,43,.5); }
.su-prefix { color: rgba(19,38,29,.45); font-weight: 700; }
.su-status.is-free { color: #2f7d43; } .su-status.is-taken { color: var(--err); } .su-status.is-checking { color: var(--muted); }
.su-hint { margin-top: 7px; font-size: 13.5px; color: var(--muted); }
.su-error { margin-top: 7px; font-size: 13.5px; color: var(--err); font-weight: 500; }
.su-suggest { color: var(--green); font-weight: 700; }
.su-eye { height: 40px; padding: 0 12px; border-radius: 10px; color: var(--green); font-weight: 700; }
.su-eye:hover { background: var(--ground); }
.su-checks { font-size: 14.5px; }
.su-check input { width: 20px; height: 20px; accent-color: var(--green); }
.su-check a { color: var(--green); font-weight: 700; }
.su-checks.is-invalid .su-check span { color: var(--err); }
.su-quick { height: 60px; border: 0; border-radius: 16px; background: var(--green); color: #fff; font: 700 18px/1 "Schibsted Grotesk", sans-serif; transition: transform .2s, box-shadow .2s; }
.su-quick:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -16px rgba(23,56,43,.8); }
.su-note { margin: 0; font-size: 14px; color: var(--muted); }
.su-more-link { color: var(--green); font: 700 16px/1.2 "Schibsted Grotesk", sans-serif; }
.su-more-link::before { content: "+ "; }
.is-open .su-more-link::before { content: "− "; }

.yc__more { margin-top: 32px; padding-top: 30px; border-top: 2px solid var(--green); }
.su-cc { height: 54px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font: 700 15px/1 "Schibsted Grotesk", sans-serif; }
.su-places { background: #fff; border-radius: 16px; box-shadow: 0 24px 48px -18px rgba(19,38,29,.45); }
.su-place { border-radius: 10px; font-size: 15px; }
.su-place:hover, .su-place.is-active { background: var(--ground); }
.su-place.is-priority .su-place-flag { color: var(--green); opacity: 1; }
.su-place-note, .su-place--none { padding: 8px 10px 4px; font-size: 12.5px; color: var(--muted); }
.su-chip span { min-height: 42px; padding: 0 16px; border-radius: 21px; border: 1.5px solid var(--line); background: #fff; font: 500 14.5px/1 "Schibsted Grotesk", sans-serif; transition: background .2s, border-color .2s; }
.su-chip:hover span { border-color: var(--green); }
.su-chip input:checked + span { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.su-chip input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.su-sub { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.su-full { height: 60px; border: 2px solid var(--green); border-radius: 16px; background: transparent; color: var(--green); font: 700 18px/1 "Schibsted Grotesk", sans-serif; }
[data-su-complete="yes"] .su-full { background: var(--lime); border-color: var(--lime); }

.yc__done { padding-top: 10px; }
.is-done .yc__core, .is-done .yc__more { display: none; }
.su-done-kicker { display: inline-block; margin: 0; padding: 6px 9px; background: var(--lime); color: var(--green); font: 700 12px/1 "Schibsted Grotesk", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.su-done-title { margin: 14px 0 0; font: 900 56px/.92 "Schibsted Grotesk", sans-serif; letter-spacing: -.05em; overflow-wrap: anywhere; }
.su-done-title:focus { outline: none; }
.su-done-text { margin: 14px 0 20px; font-size: 17px; color: var(--muted); }
.su-done-data { margin-bottom: 18px; padding: 12px 14px; border-radius: 14px; background: #fff; }
.su-done-data summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.su-done-data pre { margin: 10px 0 0; overflow-x: auto; font-size: 12.5px; }
.su-again { height: 50px; padding: 0 22px; border-radius: 14px; border: 2px solid var(--green); background: none; color: var(--green); font-weight: 700; }
.yc:has(.is-done) .yc__title, .yc:has(.is-done) .yc__lead, .yc:has(.is-done) .yc__step { display: none; }

@media (max-width: 900px) {
  .yc { grid-template-columns: 1fr; }
  .yc__cover { position: relative; height: 62vh; min-height: 420px; padding: 20px; }
  .yc__mast { font-size: 104px; }
  .yc__form { margin-top: 36px; }
}
@media (max-width: 480px) {
  .yc__main { padding: 20px 16px 64px; }
  .yc__title { font-size: 44px; }
  .yc__cover { height: 56vh; }
}
@media (prefers-reduced-motion: reduce) { .yc__photo, .su-quick { transition: none; } }