/* How pctrs works, and the welcome band on the wall. The family's display face
   (Instrument Serif, SIL Open Font License, the face the RFRMD Word Labs sites
   share) for headings only; pctrs's own tokens for colour, so light and dark
   follow the site. Sections rise in as they arrive; reduced motion keeps them still. */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/instrument-serif-normal-latin.woff2") format("woff2"); }

.how-page { --how-serif: "Instrument Serif", Georgia, "Times New Roman", serif; --how-wide: 1080px; }
.how-page h1, .how-page h2, .how-page .how-lead { font-family: var(--how-serif); font-weight: 400; letter-spacing: -0.01em; }

/* The opening: one of John's landscapes, edge to edge, the title over it. */
.how-hero { position: relative; min-height: min(78vh, 720px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.how-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.how-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.62) 100%); }
.how-hero .in { position: relative; z-index: 1; width: 100%; max-width: var(--how-wide); margin: 0 auto; padding: 0 20px 44px; }
.how-hero h1 { font-size: clamp(44px, 8vw, 92px); line-height: .95; margin: 0 0 12px; }
.how-hero p { font-size: clamp(17px, 2.2vw, 21px); max-width: 34em; margin: 0; color: rgba(255,255,255,.88); }

.how-credit { max-width: var(--how-wide); margin: 10px auto 0; padding: 0 20px; font-size: 12px; color: var(--faint); }
.how-credit a { color: inherit; }

.how-sec { max-width: var(--how-wide); margin: 0 auto; padding: 72px 20px 0; }
.how-sec h2 { font-size: clamp(32px, 4.6vw, 48px); line-height: 1.02; margin: 0 0 16px; }
.how-sec p, .how-sec li { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 38em; }
.how-sec p strong, .how-sec li strong { color: var(--text); font-weight: 600; }
.how-sec ul { padding-left: 1.1em; margin: 0; }
.how-sec li + li { margin-top: 6px; }
.how-sec a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Text beside a picture, alternating sides on a wide screen. */
.how-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.how-pair.flip > :first-child { order: 2; }
.how-pair figure { margin: 0; }
.how-pair figure img { width: 100%; height: auto; display: block; border-radius: 4px; }
.how-pair figcaption { font-size: 12px; color: var(--faint); margin-top: 8px; }
.how-pair figcaption a { color: inherit; text-decoration: none; }

/* The four rooms. */
.how-rooms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.how-rooms a { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; border: 1px solid var(--line);
  border-radius: 6px; text-decoration: none; color: var(--text); background: var(--surface); }
.how-rooms a:hover { border-color: var(--accent); }
.how-rooms img { width: 30px; height: 30px; }
html:not(.light) .how-rooms img { filter: invert(1); }
.how-rooms b { font-family: var(--how-serif); font-weight: 400; font-size: 24px; }
.how-rooms span { font-size: 13px; color: var(--muted); }

/* The iPhone, in Apple's bezel; the screen carries the bezel's corner. */
.how-phone { display: grid; grid-template-columns: 1fr 340px; gap: 52px; align-items: center; }
.bz { position: relative; display: block; margin: 0 auto; width: min(100%, 320px); }
.bz > .bezel { position: relative; z-index: 2; display: block; width: 100%; height: auto; pointer-events: none; }
.bz > .scr { position: absolute; z-index: 1; overflow: hidden; background: #000;
  left: 5.102%; top: 2.2%; width: 89.796%; height: 95.6%; border-radius: 14.2% / 6.55%; }
.bz > .scr img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; position: absolute; inset: 0; }
.bz > .scr img.on { opacity: 1; }
.how-phone .tag { text-align: center; font-size: 14px; color: var(--muted); min-height: 1.4em; margin: 14px 0 0; }

/* Apple's badge, as Apple draws it: black on light, white on dark. */
.badge { display: inline-block; line-height: 0; }
.badge img { height: 44px; width: auto; }
.badge .on-dark { display: none; }
html:not(.light) .badge .on-light { display: none; }
html:not(.light) .badge .on-dark { display: inline; }

/* The year of support, as a plain table. */
.how-years { width: 100%; max-width: 640px; border-collapse: collapse; margin: 18px 0 8px; font-size: 15px; }
.how-years th, .how-years td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.how-years th { color: var(--text); font-weight: 600; }
.how-years td:first-child { color: var(--text); }

.how-end { max-width: var(--how-wide); margin: 0 auto; padding: 84px 20px 40px; text-align: center; }
.how-end h2 { font-family: var(--how-serif); font-weight: 400; font-size: clamp(34px, 5vw, 54px); margin: 0 0 18px; }
.how-actions { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }

.rise { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.rise.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .bz > .scr img { transition: none; }
}

@media (max-width: 760px) {
  .how-sec { padding-top: 56px; }
  .how-pair, .how-phone { grid-template-columns: 1fr; gap: 26px; }
  .how-pair.flip > :first-child { order: 0; }
  .how-rooms { grid-template-columns: 1fr 1fr; }
  .how-hero { min-height: 64vh; }
}

/* The welcome band on the wall: signed-out first visits only, one line, dismissible. */
.welcome-band { display: none; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; margin: 0 auto 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: 14px; color: var(--muted); }
.welcome-band.show { display: flex; }
.welcome-band .w-line { color: var(--text); }
.welcome-band a.w-how { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.welcome-band .badge img { height: 34px; }
.welcome-band .w-join { color: var(--accent); font-weight: 600; text-decoration: none; }
.welcome-band .w-close { background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.how-sec a.badge, .how-end a.badge { text-decoration: none; }
.how-years th { white-space: nowrap; }