/* Inweit — the map at night. One stylesheet for every page. The stage pages (index, invite, friend, 404) live on the app's night map; legal pages are the daylight reading room. */ :root { /* night map world */ --night: #131e37; --night-deep: #0e1730; --ink: #f3f6fc; --muted: #b3c0da; --faint: #8fa1c4; /* category spine (mirrors the app) */ --green: #34c973; --green-hi: #46d886; --green-deep: #1f8a4f; --teal: #4cc4d9; --purple: #8b7cf6; --orange: #ff9f0a; --blue: #3b82f6; /* ambient accent follows the hour (JS sets data-daypart on ) */ --ambient: var(--teal); --ambient-wash: rgba(76, 196, 217, 0.05); --glass: rgba(14, 22, 40, 0.78); --hairline: rgba(158, 186, 245, 0.14); --serif: ui-serif, -apple-system-ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --settle: cubic-bezier(0.22, 0.9, 0.32, 1); } html[data-daypart="night"] { --ambient: var(--purple); --ambient-wash: rgba(139, 124, 246, 0.13); } @media (prefers-color-scheme: light) { :root { --ambient: #1f8fa6; --ambient-wash: rgba(31, 143, 166, 0.07); } html[data-daypart="night"] { --ambient: #6d5ad2; --ambient-wash: rgba(109, 90, 210, 0.1); } } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--sans); line-height: 1.5; -webkit-font-smoothing: antialiased; } img, svg, picture { display: block; max-width: 100%; } a { color: inherit; } button { font: inherit; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--night-deep); color: var(--ink); padding: 10px 16px; border-radius: 0 0 12px 0; z-index: 50; } .skip-link:focus { left: 0; } /* ---------- the night map stage ---------- */ body.stage { /* stage-scoped theme (night by default, daylight under light scheme) */ --s-ink: var(--ink); --s-muted: var(--muted); --s-faint: var(--faint); --s-glass: rgba(14, 22, 40, 0.78); --s-hair: rgba(158, 186, 245, 0.14); --s-hair-soft: rgba(158, 186, 245, 0.1); --s-grabber: rgba(214, 226, 248, 0.28); --s-inset: rgba(8, 13, 26, 0.55); --s-hover-wash: rgba(179, 192, 218, 0.08); --s-skeleton-a: rgba(179, 192, 218, 0.14); --s-skeleton-b: rgba(179, 192, 218, 0.28); --s-sheet-shadow: 0 -20px 70px rgba(4, 8, 18, 0.55); --s-card-shadow: 0 26px 80px rgba(4, 8, 18, 0.6); --s-shade-a: rgba(8, 13, 27, 0.82); --s-shade-b: rgba(9, 15, 31, 0.42); --go-bg: #ffffff; --go-ink: #0c1220; --go-shadow: rgba(4, 8, 18, 0.45); background: var(--night-deep); color: var(--s-ink); min-height: 100svh; overflow-x: hidden; } @media (prefers-color-scheme: light) { body.stage { --s-ink: #1b2334; --s-muted: #46536e; --s-faint: #5d6b87; --s-glass: rgba(252, 253, 250, 0.84); --s-hair: rgba(27, 35, 52, 0.14); --s-hair-soft: rgba(27, 35, 52, 0.1); --s-grabber: rgba(27, 35, 52, 0.22); --s-inset: rgba(27, 35, 52, 0.06); --s-hover-wash: rgba(27, 35, 52, 0.06); --s-skeleton-a: rgba(27, 35, 52, 0.1); --s-skeleton-b: rgba(27, 35, 52, 0.2); --s-sheet-shadow: 0 -18px 60px rgba(60, 70, 60, 0.22); --s-card-shadow: 0 24px 70px rgba(60, 70, 60, 0.26); --s-shade-a: rgba(238, 240, 231, 0.9); --s-shade-b: rgba(240, 242, 235, 0.45); --go-bg: #14181f; --go-ink: #ffffff; --go-shadow: rgba(30, 38, 55, 0.3); background: #edefe6; } } .map { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; user-select: none; -webkit-user-select: none; pointer-events: none; } .map-shade { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(120% 85% at 50% 112%, var(--s-shade-a), transparent 56%), linear-gradient(180deg, var(--s-shade-b), transparent 24%), radial-gradient(95% 70% at 72% -4%, var(--ambient-wash), transparent 62%); } /* wordmark, centered like the app's header */ .stage-mark { position: fixed; top: max(20px, env(safe-area-inset-top)); left: 0; right: 0; display: flex; justify-content: center; z-index: 6; } .stage-mark img { width: auto; height: clamp(38px, 5.4vh, 52px); filter: drop-shadow(0 3px 14px rgba(6, 10, 22, 0.75)); } @media (prefers-color-scheme: light) { .stage-mark img { filter: invert(1) drop-shadow(0 2px 10px rgba(220, 226, 214, 0.8)); } } .stage-mark a { display: block; border-radius: 10px; } /* ---------- activity pins (the app's marker grammar) ---------- */ /* activity pins: solid category circle inside a soft layered glow halo (the dashed ring belongs ONLY to passive spotlight pins, see .pin-sage) */ .pin { --halo: rgba(52, 201, 115, 0.5); position: fixed; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; display: grid; place-items: center; pointer-events: none; color: #fff; background: radial-gradient(120% 120% at 32% 26%, var(--green-hi), #27a75d 74%); box-shadow: 0 0 0 4px rgba(52, 201, 115, 0.16), 0 8px 20px rgba(4, 9, 20, 0.45); animation: pin-in 0.9s var(--settle) var(--d, 0s) both, pin-breathe 6.5s ease-in-out calc(var(--d, 0s) + 1.2s) infinite; } .pin::before { content: ""; position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, var(--halo) 12%, color-mix(in srgb, var(--halo) 45%, transparent) 46%, transparent 74%); z-index: -1; } .pin svg { width: 26px; height: 26px; } .pin-small { width: 44px; height: 44px; margin: -22px 0 0 -22px; } .pin-small svg { width: 21px; height: 21px; } /* passive spotlight pin — frosted sage with the dashed ring */ .pin-sage { background: rgba(158, 189, 170, 0.32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 0 4px rgba(158, 189, 170, 0.12), 0 0 24px rgba(158, 189, 170, 0.3), 0 8px 20px rgba(4, 9, 20, 0.4); } .pin-sage::before { inset: -9px; background: none; border: 2px dashed rgba(190, 214, 199, 0.4); z-index: 0; animation: halo-turn 70s linear infinite; } @media (prefers-color-scheme: light) { .pin-sage { background: rgba(118, 146, 128, 0.66); box-shadow: 0 0 0 4px rgba(118, 146, 128, 0.16), 0 0 24px rgba(118, 146, 128, 0.35), 0 8px 20px rgba(70, 80, 70, 0.25); } .pin-sage::before { border-color: rgba(118, 146, 128, 0.5); } } /* explore spotlight — iOS brown (binoculars) */ .pin-explore { background: rgba(172, 142, 104, 0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 0 4px rgba(172, 142, 104, 0.14), 0 0 24px rgba(172, 142, 104, 0.32), 0 8px 20px rgba(4, 9, 20, 0.4); } .pin-explore::before { inset: -9px; background: none; border: 2px dashed rgba(212, 180, 140, 0.48); z-index: 0; animation: halo-turn 70s linear infinite; } /* study & work spotlight — iOS blue (book) */ .pin-study { background: rgba(52, 106, 228, 0.46); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 0 4px rgba(64, 122, 242, 0.16), 0 0 24px rgba(64, 122, 242, 0.36), 0 8px 20px rgba(4, 9, 20, 0.4); } .pin-study::before { inset: -9px; background: none; border: 2px dashed rgba(130, 172, 250, 0.5); z-index: 0; animation: halo-turn 70s linear infinite; } @media (prefers-color-scheme: light) { .pin-explore { background: rgba(146, 116, 80, 0.72); box-shadow: 0 0 0 4px rgba(146, 116, 80, 0.16), 0 0 24px rgba(146, 116, 80, 0.35), 0 8px 20px rgba(70, 80, 70, 0.25); } .pin-explore::before { border-color: rgba(146, 116, 80, 0.55); } .pin-study { background: rgba(44, 94, 200, 0.78); box-shadow: 0 0 0 4px rgba(44, 94, 200, 0.16), 0 0 24px rgba(44, 94, 200, 0.35), 0 8px 20px rgba(60, 70, 90, 0.25); } .pin-study::before { border-color: rgba(44, 94, 200, 0.55); } } /* events (star.fill) — iOS purple */ .pin-purple { --halo: rgba(191, 90, 242, 0.48); background: radial-gradient(120% 120% at 32% 26%, #ce85f6, #a53ee0 74%); box-shadow: 0 0 0 4px rgba(191, 90, 242, 0.16), 0 8px 20px rgba(4, 9, 20, 0.45); } /* coffee & bites (cup.and.saucer.fill) — iOS orange */ .pin-orange { --halo: rgba(255, 159, 10, 0.5); background: radial-gradient(120% 120% at 32% 26%, #ffb340, #ef8b02 74%); box-shadow: 0 0 0 4px rgba(255, 159, 10, 0.16), 0 8px 20px rgba(4, 9, 20, 0.45); } /* creative (paintbrush.fill) — iOS teal */ .pin-teal { --halo: rgba(76, 196, 217, 0.5); background: radial-gradient(120% 120% at 32% 26%, #5fd6ea, #22a3c0 74%); box-shadow: 0 0 0 4px rgba(76, 196, 217, 0.16), 0 8px 20px rgba(4, 9, 20, 0.45); } /* ---------- friends on the map (presence bubbles) ---------- */ .friend { position: fixed; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; pointer-events: none; border: 2.5px solid rgba(110, 224, 158, 0.9); box-shadow: 0 0 0 4px rgba(52, 201, 115, 0.16), 0 0 26px rgba(52, 201, 115, 0.45), 0 6px 16px rgba(4, 9, 20, 0.4); animation: fade-in 0.9s var(--settle) var(--d, 0s) both, friend-bob 7s ease-in-out calc(var(--d, 0s) + 1s) infinite; } .friend img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .friend::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; background: var(--green); border: 2.5px solid var(--night-deep); } @media (prefers-color-scheme: light) { .friend::after { border-color: #edefe6; } } .friend-small { width: 48px; height: 48px; margin: -24px 0 0 -24px; } @keyframes fade-in { from { opacity: 0; } } @keyframes friend-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* participants riding an activity pin */ .pin-crowd { position: absolute; right: -13px; bottom: -9px; display: flex; } .pin-crowd img { width: 23px; height: 23px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; box-shadow: 0 2px 6px rgba(4, 9, 20, 0.35); } .pin-crowd img + img { margin-left: -9px; } /* the blue "you are here" dot */ .you-dot { position: fixed; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 0 16px rgba(59, 130, 246, 0.65), 0 2px 8px rgba(4, 9, 20, 0.5); pointer-events: none; animation: pin-in 0.9s var(--settle) 0.5s both; } .you-dot::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1.5px solid rgba(96, 155, 250, 0.5); animation: you-pulse 3.2s ease-out 1.6s infinite; } @keyframes pin-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes pin-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes halo-turn { to { transform: rotate(360deg); } } @keyframes you-pulse { 0% { transform: scale(0.55); opacity: 0.9; } 70%, 100% { transform: scale(1.5); opacity: 0; } } /* ---------- the briefing sheet (index) ---------- */ .brief { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(620px, 100%); z-index: 8; background: var(--s-glass); -webkit-backdrop-filter: blur(28px) saturate(1.35); backdrop-filter: blur(28px) saturate(1.35); border: 1px solid var(--s-hair); border-bottom: none; border-radius: 28px 28px 0 0; padding: 11px 28px calc(16px + env(safe-area-inset-bottom)); box-shadow: var(--s-sheet-shadow); animation: sheet-up 0.85s var(--settle) 0.15s both; } @keyframes sheet-up { from { opacity: 0; transform: translate(-50%, 30px); } to { opacity: 1; transform: translate(-50%, 0); } } .grabber { width: 42px; height: 5px; border-radius: 3px; background: var(--s-grabber); margin: 0 auto 14px; } .brief-greeting { font-family: var(--serif); font-weight: 700; font-size: clamp(1.7rem, 3.6vw + 0.8rem, 2.3rem); line-height: 1.12; letter-spacing: -0.01em; } .eyebrow { display: flex; align-items: center; gap: 8px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ambient); margin-top: 10px; } .eyebrow::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ambient); box-shadow: 0 0 10px var(--ambient); } .brief-line { font-family: var(--serif); font-size: clamp(1rem, 1.2vw + 0.72rem, 1.14rem); line-height: 1.5; color: var(--s-muted); margin-top: 10px; max-width: 32em; text-wrap: pretty; } .brief-move { display: flex; align-items: center; gap: 20px; margin-top: 18px; flex-wrap: wrap; } /* the App Store move: white capsule at night, black in daylight */ .go { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: 999px; background: var(--go-bg); color: var(--go-ink); font-weight: 650; font-size: 1.05rem; text-decoration: none; letter-spacing: 0.01em; box-shadow: 0 10px 26px var(--go-shadow); transition: transform 0.35s var(--settle), box-shadow 0.35s var(--settle); } .go:hover { transform: translateY(-2px); box-shadow: 0 14px 32px var(--go-shadow); } .go:active { transform: translateY(0) scale(0.985); } .go .apple-glyph { width: 17px; height: 21px; fill: currentColor; } .brief-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--s-hair-soft); font-size: 0.75rem; color: var(--s-faint); } .brief-foot a { color: var(--s-faint); text-decoration: none; } .brief-foot a:hover { color: var(--s-muted); text-decoration: underline; } /* ---------- invitation cards (invite / friend / 404) ---------- */ .threshold { position: relative; z-index: 8; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top) + 92px) 18px calc(env(safe-area-inset-bottom) + 40px); } .invitation { --accent: var(--teal); --accent-glow: rgba(76, 196, 217, 0.16); width: min(430px, 100%); background: var(--s-glass); -webkit-backdrop-filter: blur(28px) saturate(1.35); backdrop-filter: blur(28px) saturate(1.35); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--s-hair)); border-radius: 28px; padding: 30px 30px 26px; box-shadow: var(--s-card-shadow), 0 0 50px var(--accent-glow); animation: card-in 0.85s var(--settle) 0.1s both; } .invitation[data-accent="green"] { --accent: var(--green); --accent-glow: rgba(52, 201, 115, 0.16); } .invitation[data-accent="neutral"] { --accent: #93a3c4; --accent-glow: rgba(147, 163, 196, 0.1); } @keyframes card-in { from { opacity: 0; transform: translateY(22px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .invitation .eyebrow { margin-top: 0; color: var(--accent); } .invitation .eyebrow::before { background: var(--accent); box-shadow: 0 0 10px var(--accent); } @media (prefers-color-scheme: light) { .invitation .eyebrow { color: color-mix(in srgb, var(--accent) 55%, #1b2334); } } .card-title { font-family: var(--serif); font-weight: 700; font-size: clamp(1.7rem, 4.5vw, 2.05rem); line-height: 1.16; letter-spacing: -0.01em; margin-top: 14px; } .card-body { font-family: var(--serif); font-size: 1.06rem; line-height: 1.55; color: var(--s-muted); margin-top: 12px; text-wrap: pretty; } /* who row */ .who { display: flex; align-items: center; gap: 12px; margin-top: 18px; } .who-avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: #fff; background: radial-gradient(120% 120% at 32% 26%, var(--green-hi), #27a75d 74%); box-shadow: 0 0 18px rgba(52, 201, 115, 0.35); } .who-line { font-weight: 650; font-size: 1.02rem; color: var(--s-ink); } .who-sub { display: block; font-size: 0.9rem; color: var(--s-faint); } .who.loading .who-line { display: inline-block; width: 150px; height: 14px; border-radius: 7px; color: transparent; overflow: hidden; background: linear-gradient(90deg, var(--s-skeleton-a) 25%, var(--s-skeleton-b) 50%, var(--s-skeleton-a) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; } .who.loading .who-avatar { color: transparent; } @keyframes shimmer { to { background-position: -200% 0; } } .card-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 22px; } .primary-action { display: inline-flex; align-items: center; justify-content: center; padding: 15px 26px; border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #000), color-mix(in srgb, var(--accent) 62%, #000)); color: #fff; font-weight: 650; font-size: 1.17rem; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 26px color-mix(in srgb, var(--accent) 30%, transparent); transition: transform 0.35s var(--settle), box-shadow 0.35s var(--settle); } .primary-action:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 32px color-mix(in srgb, var(--accent) 40%, transparent); } .primary-action:active { transform: translateY(0) scale(0.985); } .quiet-action { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 999px; color: var(--s-muted); font-weight: 550; font-size: 0.96rem; text-decoration: none; transition: color 0.25s ease, background 0.25s ease; } .quiet-action:hover { color: var(--s-ink); background: var(--s-hover-wash); } .card-note { font-size: 0.85rem; color: var(--s-faint); text-align: center; margin-top: 12px; } /* fold-away code */ .code-fallback { margin-top: 18px; border-top: 1px solid var(--s-hair-soft); padding-top: 12px; } .code-fallback summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 7px; font-size: 0.9rem; color: var(--s-faint); -webkit-user-select: none; user-select: none; } .code-fallback summary::-webkit-details-marker { display: none; } .code-fallback summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 1.5px solid var(--s-faint); border-bottom: 1.5px solid var(--s-faint); transform: rotate(-45deg); transition: transform 0.3s var(--settle); } .code-fallback[open] summary::before { transform: rotate(45deg); } .code-box { margin-top: 14px; padding: 16px; border-radius: 16px; background: var(--s-inset); border: 1px solid var(--s-hair-soft); text-align: center; } .code-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s-faint); } .code-value { font-family: var(--mono); font-size: 1.35rem; letter-spacing: 0.3em; margin: 8px 0 10px; color: var(--s-ink); } .code-copy { border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--s-ink); padding: 8px 18px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 0.25s ease; } .code-copy:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); } .code-hint { font-size: 0.8rem; color: var(--s-faint); margin-top: 10px; } .threshold-foot { margin-top: 22px; font-size: 0.78rem; color: var(--s-faint); } .threshold-foot a { color: inherit; text-decoration: none; } .threshold-foot a:hover { color: var(--s-muted); } /* ---------- entrance stagger ---------- */ .settle-1, .settle-2, .settle-3, .settle-4, .settle-5 { animation: settle-in 0.8s var(--settle) both; } .settle-1 { animation-delay: 0.05s; } .settle-2 { animation-delay: 0.16s; } .settle-3 { animation-delay: 0.27s; } .settle-4 { animation-delay: 0.38s; } .settle-5 { animation-delay: 0.49s; } @keyframes settle-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---------- the reading room (legal) ---------- */ body.reading { --paper: #f4f5f8; --r-ink: #1d2436; --r-muted: #4c576f; --r-faint: #6b7690; --r-hairline: rgba(29, 36, 54, 0.14); --r-accent: #2b7d92; --r-panel: #eceef3; background: var(--paper); color: var(--r-ink); } @media (prefers-color-scheme: dark) { body.reading { --paper: #101a30; --r-ink: #ecf0f9; --r-muted: #b3c0da; --r-faint: #8fa1c4; --r-hairline: rgba(158, 186, 245, 0.16); --r-accent: #4cc4d9; --r-panel: #16223c; } } .reading-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(20px, 5vw, 48px); border-bottom: 1px solid var(--r-hairline); } .reading-nav .stage-brand img { width: auto; height: 28px; filter: invert(1) opacity(0.85); } @media (prefers-color-scheme: dark) { .reading-nav .stage-brand img { filter: none; } } .reading-nav-links { display: flex; gap: 20px; font-size: 0.92rem; } .reading-nav-links a { color: var(--r-muted); text-decoration: none; } .reading-nav-links a:hover { color: var(--r-ink); } .legal-shell { max-width: 1060px; margin: 0 auto; padding: clamp(40px, 7vw, 84px) clamp(20px, 5vw, 48px) 60px; } .legal-hero { max-width: 800px; padding-bottom: clamp(36px, 6vw, 64px); border-bottom: 1px solid var(--r-hairline); } .legal-hero .eyebrow { margin-top: 0; color: var(--r-accent); } .legal-hero .eyebrow::before { background: var(--r-accent); box-shadow: none; } .legal-title { font-family: var(--serif); font-weight: 700; font-size: clamp(3.2rem, 7.5vw, 5.6rem); line-height: 0.98; letter-spacing: -0.028em; margin-top: 20px; } .legal-deck { font-family: var(--serif); font-size: 1.15rem; line-height: 1.6; color: var(--r-muted); margin-top: 22px; max-width: 650px; } .legal-updated { display: inline-flex; margin-top: 24px; border: 1px solid var(--r-hairline); border-radius: 999px; padding: 8px 14px; background: var(--r-panel); font-size: 0.78rem; font-weight: 650; color: var(--r-faint); } .legal-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); margin-top: clamp(36px, 6vw, 64px); } @media (max-width: 860px) { .legal-layout { grid-template-columns: 1fr; } } .legal-toc { position: sticky; top: 30px; align-self: start; font-size: 0.82rem; } @media (max-width: 860px) { .legal-toc { position: static; border-bottom: 1px solid var(--r-hairline); padding-bottom: 20px; } } .legal-toc-title { font-size: 0.66rem; font-weight: 750; letter-spacing: 0.15em; text-transform: uppercase; color: var(--r-faint); margin-bottom: 13px; } .legal-toc a { display: block; border-left: 1px solid var(--r-hairline); padding: 7px 0 7px 15px; color: var(--r-muted); text-decoration: none; line-height: 1.35; transition: color 0.2s ease, border-color 0.2s ease; } .legal-toc a:hover, .legal-toc a.current { border-color: var(--r-ink); color: var(--r-ink); } .legal-content section { scroll-margin-top: 30px; } .legal-content section + section { margin-top: 48px; } .legal-content h2 { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.008em; padding-top: 8px; } .legal-content h3 { font-size: 1.02rem; font-weight: 650; margin-top: 22px; } .legal-content p { margin-top: 12px; color: var(--r-muted); line-height: 1.65; } .legal-content ul, .legal-content ol { margin-top: 12px; padding-left: 22px; color: var(--r-muted); line-height: 1.65; } .legal-content li + li { margin-top: 6px; } .legal-content a { color: var(--r-accent); } .legal-content strong { color: var(--r-ink); } .legal-callout { margin-top: 18px; padding: 16px 20px; border-radius: 16px; background: var(--r-panel); border: 1px solid var(--r-hairline); } .legal-callout p { margin: 0; } .legal-table { overflow-x: auto; margin-top: 16px; } .legal-table table { border-collapse: collapse; width: 100%; font-size: 0.92rem; } .legal-table th, .legal-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--r-hairline); color: var(--r-muted); vertical-align: top; line-height: 1.5; } .legal-table th { color: var(--r-ink); font-weight: 650; white-space: nowrap; } .reading-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 26px clamp(20px, 5vw, 48px) calc(30px + env(safe-area-inset-bottom)); border-top: 1px solid var(--r-hairline); font-size: 0.85rem; color: var(--r-faint); } .reading-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; } .reading-foot a { color: var(--r-faint); text-decoration: none; } .reading-foot a:hover { color: var(--r-ink); text-decoration: underline; } /* ---------- small viewports ---------- */ @media (max-height: 620px) { .brief { padding-top: 8px; } .grabber { margin-bottom: 10px; } .brief-foot { display: none; } .stage-mark img { height: 34px; } } @media (max-width: 430px) { .brief { padding-left: 24px; padding-right: 24px; } .invitation { padding: 26px 24px 22px; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pin, .friend, .you-dot, .brief, .invitation, .settle-1, .settle-2, .settle-3, .settle-4, .settle-5 { animation: none; } .pin::before { animation: none; } .you-dot::after { animation: none; opacity: 0.4; transform: scale(1); } .who.loading .who-line { animation: none; } .go, .primary-action { transition: none; } }