/* byonestep.com. The page is drawn as a stepwell: flat bands, each one step further in
   from the left, right edges flush, the last one gold. One typeface (Geist) at five sizes;
   square buttons; no photographs, no gradients, no shadows. */

@font-face {
  font-family: "Geist";
  src: url("/fonts/GeistVF.woff") format("woff");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --cream: #f3eee4;
  --ink: #1b1915;
  --wheat: #d9c89d;
  --pine: #111a16;
  --gold: #d9b45b;
  --gold-deep: #8a7238;
  --soft-dark: #cfc8b8;
  --muted: #5f5a50;
  --step: clamp(14px, 6vw, 112px);
  --gap: clamp(8px, 0.9vw, 14px);
  --pad: clamp(22px, 3.4vw, 56px);
  --t1: clamp(64px, 21vw, 330px);
  --t2: clamp(40px, 6vw, 96px);
  --t3: clamp(21px, 2.1vw, 30px);
  --t4: 18px;
  --t5: 15px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--cream); color: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Geist", "PingFang TC", "Hiragino Sans CNS", "Noto Sans CJK TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: var(--t4);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
html:lang(zh-Hans) body { font-family: "Geist", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif; }
:where(body) a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
.on-ink :focus-visible, .on-pine :focus-visible { outline-color: var(--gold); }
h1, h2, p { margin: 0; }

/* The stairs */
.stairs { display: flex; flex-direction: column; gap: var(--gap); padding-top: var(--gap); }
.step { margin-left: calc(var(--step) * var(--i)); padding: var(--pad); }
.step-1 { --i: 0; }
.step-2 { --i: 1; }
.step-3 { --i: 2; }
.step-4 { --i: 3; }
.on-ink { background: var(--ink); color: var(--cream); }
.on-wheat { background: var(--wheat); color: var(--ink); }
.on-pine { background: var(--pine); color: var(--cream); }
.on-gold { background: var(--gold); color: var(--ink); }

/* First step: the name */
.step-1 { display: flex; flex-direction: column; min-height: calc(100svh - var(--gap)); }
.step-1 > .top, .step-1 > .mini { order: 0; }
.top { display: flex; justify-content: flex-end; }
/* The mini staircase: the page's map and its navigation */
.mini { display: flex; flex-direction: column; gap: 8px; width: min(100%, 520px); margin: clamp(24px, 6vh, 72px) 0 0 auto; --mini: 17%; }
.mini-step {
  display: flex; align-items: center; min-height: 56px; padding: 0 18px; font-size: var(--t5); font-weight: 500; text-decoration: none;
  transition: transform 0.25s var(--ease), background-color 0.2s;
}
.mini-1 { margin-left: 0; background: var(--cream); color: var(--ink); }
.mini-2 { margin-left: var(--mini); background: var(--wheat); color: var(--ink); }
.mini-3 { margin-left: calc(var(--mini) * 2); background: #263a30; color: var(--cream); }
.mini-4 { align-self: flex-end; justify-content: center; width: 56px; padding: 0; background: var(--gold); color: var(--ink); font-size: var(--t3); }
a.mini-step:hover { transform: translateX(-6px); }
a.mini-step:active { transform: translateX(-6px) scale(0.98); }
.languages { display: flex; gap: 4px; }
.languages button {
  min-width: 44px; min-height: 40px; padding: 0 10px; border: 0; background: transparent; color: var(--soft-dark);
  font: inherit; font-size: var(--t5); font-weight: 500; cursor: pointer; transition: background-color 0.2s, color 0.2s;
}
.languages button:hover { color: var(--cream); background: rgba(243, 238, 228, 0.1); }
.languages button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
.name {
  order: 2; margin: 0 0 -0.05em -0.04em; font-size: var(--t1); font-weight: 300; line-height: 1; letter-spacing: -0.065em; white-space: nowrap;
}
.lead { order: 1; margin-top: auto; margin-bottom: clamp(16px, 2.4vw, 40px); max-width: 26em; font-size: var(--t3); line-height: 1.3; }
html:lang(zh-Hant) .lead, html:lang(zh-Hans) .lead { line-height: 1.45; }

/* Products: words on one side, the drawing on the other */
.product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--pad); min-height: 78svh; }
.product--flip .product-text { order: 2; }
.product-name { font-size: var(--t2); font-weight: 400; line-height: 1; letter-spacing: -0.035em; }
.product-line { margin-top: 18px; font-size: var(--t3); line-height: 1.25; }
.product-body { margin-top: 18px; max-width: 34em; }
.on-pine .product-body { color: var(--soft-dark); }
.button {
  display: inline-flex; align-items: center; min-height: 56px; margin-top: 32px; padding: 0 26px;
  font-weight: 500; text-decoration: none; white-space: nowrap; transition: transform 0.15s var(--ease), background-color 0.2s;
}
.button:active { transform: scale(0.97); }
.button-ink { background: var(--ink); color: var(--cream); }
.button-ink:hover { background: #2e2a23; }
.button-cream { background: var(--cream); color: var(--pine); }
.button-cream:hover { background: #fffaf0; }
.product-art { display: flex; justify-content: center; }

/* StepClients as a route map */
.map { display: block; width: 100%; max-width: 640px; height: auto; overflow: visible; }
.map-line { fill: none; stroke: var(--ink); }
.map-hub, .map-stop { fill: var(--wheat); stroke: var(--ink); }
.map-end { fill: var(--gold-deep); stroke: var(--ink); }
.map-badge { fill: var(--ink); }
.map-icon { color: var(--wheat); }
.map-train { fill: var(--wheat); stroke: var(--ink); stroke-width: 2; }
.map-train--quote { fill: var(--gold); stroke: none; }

/* Stepwell's bars stepping down to the water */
.well { display: block; width: min(100%, 440px); height: auto; overflow: visible; }
.well-bar { fill: var(--cream); }
.well-water { fill: var(--gold); }
.well-ripple { fill: none; stroke: var(--gold); stroke-width: 0.6; transform-box: fill-box; transform-origin: center; animation: ripple 5s ease-out infinite; }

/* Last step: the gold square */
.hello { display: flex; flex-direction: column; justify-content: flex-end; min-height: 62svh; }
.hello-title { font-size: var(--t2); font-weight: 400; line-height: 1; letter-spacing: -0.035em; }
.hello-body { margin-top: 18px; max-width: 30em; font-size: var(--t3); line-height: 1.3; }
.mail {
  align-self: flex-start; margin-top: clamp(28px, 4vw, 56px); font-size: clamp(26px, 4.6vw, 72px); font-weight: 400; line-height: 1.1;
  letter-spacing: -0.03em; text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; overflow-wrap: anywhere;
  transition: color 0.2s;
}
.mail:hover { color: #3b2f12; }

.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  margin-left: calc(var(--step) * 3); padding: 28px var(--pad) 40px; font-size: var(--t5); color: var(--muted);
}
.foot ul { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; padding: 0; list-style: none; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Entrances (only when the script runs): each step slides into place; the drawings draw themselves */
.js .step.pre { opacity: 0; transform: translateX(48px); }
.js .step.in { opacity: 1; transform: none; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .map .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .map.in .draw { animation: draw 1.1s var(--ease) forwards; }
.js .map .map-train { opacity: 0; }
.js .map.in .map-train { animation: appear 0.5s 1.4s forwards; }
.js .well .well-bar, .js .well .well-water { opacity: 0; transform: translateX(18px); transform-box: fill-box; }
.js .well.in .well-bar, .js .well.in .well-water { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-delay="1"] { animation-delay: 0.12s !important; transition-delay: 0.12s !important; }
[data-delay="2"] { animation-delay: 0.24s !important; transition-delay: 0.24s !important; }
[data-delay="3"] { animation-delay: 0.36s !important; transition-delay: 0.36s !important; }
[data-delay="4"] { animation-delay: 0.55s !important; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@keyframes ripple { 0% { transform: scale(1); opacity: 0.9; } 70%, 100% { transform: scale(2.8); opacity: 0; } }

/* Tablets and phones: the drawing follows the words; the stairs keep stepping */
@media (max-width: 820px) {
  .product { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .product--flip .product-text { order: 0; }
  .product-art { justify-content: flex-start; }
  .well { width: min(70%, 320px); }
  .hello { min-height: 48svh; }
  .step-1 { min-height: 0; }
  .lead { margin-top: 36px; }
  .mini { width: 100%; --mini: 14%; }
  .mini-step { min-height: 48px; }
  .mini-4 { width: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .step.pre, .js .well .well-bar, .js .well .well-water { opacity: 1; transform: none; }
  .js .map .draw { stroke-dashoffset: 0; }
  .js .map.in .draw, .js .map.in .map-train { animation: none; }
  .map-train, .well-ripple { display: none; }
  .button, .languages button, .mail, .mini-step { transition: none; }
}