/* How: the "how it works" place on the home page, under a look. js/how.js decides which block a visitor has and writes it on <html data-how>.
   Each block is at most about one phone screen, holds nothing back behind scrolling, and nothing in it has to be waited for.
   What only one arm shows is written into the page with display:none, so a missing stylesheet can never show it to everyone. */
html[data-how="a1"] main .how-a1, html[data-how="a3"] main .how-a3 { display: grid !important; }
html[data-how="a2"] main .how-a2 { display: grid !important; }
html[data-how]:not([data-how="steps"]) main#top > .lk-steps { display: none !important; }   /* one of these takes the steps' place; "none" leaves it empty */
html[data-how="a2"] main#top > #feel { display: none !important; }                           /* the press is the buzz band, so the band below is not shown twice */

.how { padding: clamp(44px, 7vw, 110px) var(--gut); color: var(--bone); }
.how h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.02em; }
html[data-look="w"] .how h2 { font-size: clamp(40px, 5vw, 76px); line-height: 1.02; letter-spacing: -.012em; }
html[data-look="o"] .how h2 { font-size: clamp(31px, 3.6vw, 50px); line-height: 1.1; }

/* a1 and a3: one photograph and a few words. Side by side on a wide screen; on a phone the photograph, then the words. */
.how-a1, .how-a3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 5vw, 88px); align-items: center; max-width: 1376px; margin: 0 auto; width: 100%; }
.how-pic { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 1 / .96; background: var(--panel); }
.how-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.how-c .btn { margin-top: clamp(22px, 2.6vw, 34px); }
.how-c > p { margin-top: 16px; color: var(--soft); font-size: clamp(17px, 1.4vw, 21px); max-width: 30em; }

/* The buzz, drawn on the wearable in the photograph: two rings and the word. how.js sets where. */
.how-buzz { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.how-buzz b { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--ember); opacity: 0; animation: howRing 2.6s ease-out infinite; }
.how-buzz b + b { animation-delay: .32s; }
.how-buzz span { position: absolute; left: 30px; top: -15px; padding: 7px 12px 6px; border-radius: 99px; background: var(--ember); color: #0a0b0b; font: 600 14px/1 var(--display); letter-spacing: .01em; white-space: nowrap; font-style: normal; }
.how-buzz.left span { left: auto; right: 30px; }
@keyframes howRing { 0% { opacity: .95; transform: scale(.55); } 70%, 100% { opacity: 0; transform: scale(3.4); } }
/* Still for anyone who asks for less motion, and in the look where nothing moves by itself: one ring, drawn. */
@media (prefers-reduced-motion: reduce) { .how-buzz b { animation: none; opacity: .9; transform: scale(1.5); } .how-buzz b + b { transform: scale(2.4); opacity: .45; } }
html[data-look="o"] .how-buzz b { animation: none; opacity: .9; transform: scale(1.5); }
html[data-look="o"] .how-buzz b + b { transform: scale(2.4); opacity: .45; }

/* a1: the three beats. */
.how-3 { list-style: none; margin: clamp(18px, 2vw, 28px) 0 0; padding: 0; counter-reset: how; display: grid; gap: 14px; }
.how-3 li { counter-increment: how; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; }
.how-3 li::before { content: counter(how); grid-row: 1 / 3; align-self: start; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); font: 500 14px/1 var(--body); color: var(--soft); }
.how-3 b { font: 500 clamp(20px, 1.7vw, 25px)/1.2 var(--display); letter-spacing: -.01em; }
.how-3 span { color: var(--soft); font-size: clamp(16px, 1.2vw, 18px); }
html[data-look="w"] .how-3 b { font-family: var(--lk-serif); font-weight: 400; font-size: clamp(25px, 2.2vw, 31px); line-height: 1.1; }
html[data-look="o"] .how-3 b { font-weight: 600; font-size: 22px; }
html[data-look="o"] .how-3 span { font-size: 19px; }
html[data-look="o"] .how-3 li { grid-template-columns: 40px minmax(0, 1fr); }
html[data-look="o"] .how-3 li::before { width: 40px; height: 40px; background: var(--lk-text); color: #fff; box-shadow: none; font: 600 19px/1 var(--body); }

/* a2: something to do. The page's ember band, with the press in the middle of it. */
.how-a2 { overflow: hidden; overflow: clip; justify-items: center; text-align: center; gap: clamp(20px, 2.4vw, 30px); background: var(--ember); color: #0a0b0b; }
.how-a2 h2 { max-width: 12em; }
.how-beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; justify-items: start; text-align: left; font: 500 clamp(20px, 1.7vw, 25px)/1.2 var(--display); }
.how-beats li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.how-beats li::before { content: ""; width: 14px; height: 14px; margin-left: 4px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; transition: background .18s, transform .18s; }
.how-beats li.on::before { background: currentColor; transform: scale(1.25); }
.how-fine { font-size: 15px; opacity: .8; min-height: 1.5em; }
.how-a2 .btn { background: #0a0b0b; color: #f2efe8; }
html[data-look="w"] .how-a2 { background: #f2d6c3; color: var(--lk-text); }
html[data-look="w"] .how-a2 .btn, html[data-look="o"] .how-a2 .btn { background: var(--btn-bg); color: var(--btn-fg); }
html[data-look="w"] .how-beats { font-family: var(--lk-serif); font-weight: 400; font-size: clamp(25px, 2.2vw, 31px); }
html[data-look="o"] .how-a2 { background: var(--lk-alt); color: var(--lk-text); }
html[data-look="o"] .how-beats { font: 600 22px/1.25 var(--body); }
html[data-look="o"] .how-fine { font-size: 19px; opacity: 1; }
html[data-look="o"] .how-a2 .buzz-btn { width: 164px; height: 164px; font-size: 19px; }

/* a3: today's catches, the way the app lists them, on the photograph. The card keeps its dark ground under every look. */
.how-a3 .how-pic { aspect-ratio: 1 / 1.08; }
.how-card { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 0; padding: 12px 16px 6px; border-radius: 16px; background: rgba(10, 11, 11, .86); color: #f2efe8; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 400 15px/1.2 var(--body); }
.how-card small { font-size: 12.5px; color: #9da09a; padding-bottom: 4px; }
.how-card > span { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(242, 239, 232, .13); }
.how-card i { font-style: normal; color: #c9c8c2; font-variant-numeric: tabular-nums; }
.how-card em { font-style: normal; }
.how-card b { font-weight: 500; color: #9da09a; }
.how-card .now b { padding: 5px 10px 4px; border-radius: 99px; background: var(--ember); color: #0a0b0b; font: 600 13px/1 var(--display); }
html[data-look="o"] .how-card { font-size: 17px; }
html[data-look="o"] .how-card small { font-size: 15px; color: #c9c8c2; }
html[data-look="o"] .how-card b { color: #c9c8c2; }

@media (max-width: 960px) {
  .how-a1, .how-a3 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .how-pic { aspect-ratio: 1 / .84; }
  .how-a3 .how-pic { aspect-ratio: 1 / 1.02; }
  .how .btn { width: 100%; }
  .how-a2 .btn { width: 100%; }
}
@media (min-width: 961px) { .how-card { left: 18px; right: auto; bottom: 18px; width: min(430px, calc(100% - 36px)); } }