/* =====================================================================
   the shared look every yubiru page loads: Apple-style (2026-11-14)
   - type: the system font (SF Pro on a Mac), bold tight headlines, 17px body
   - colour: white / #f5f5f7 / black sections, #1d1d1f ink, one blue for actions
   - parts: pill buttons, "learn more ›" links, rounded tiles, quiet footer
   - motion: content fades up as it arrives, big lines light up as you scroll
   The file keeps its old name and the old at-* class names so every page
   keeps working; the drafting marks and paintings of the previous look are
   switched off here.
   ===================================================================== */

@property --at-p { syntax: '<percentage>'; inherits: true; initial-value: 0%; }

:root {
  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Geist", "Helvetica Neue", "Anuphan", "Hiragino Sans", "Noto Sans JP", Arial, sans-serif;
  --ap-bg: #ffffff; --ap-bg-2: #f5f5f7; --ap-bg-3: #fbfbfd;
  --ap-ink: #1d1d1f; --ap-ink-2: #6e6e73; --ap-ink-3: #86868b;
  --ap-line: #d2d2d7; --ap-line-2: rgba(0, 0, 0, .08);
  --ap-blue: #0071e3; --ap-blue-hover: #0077ed; --ap-link: #0066cc;
  --ap-tile: #ffffff;
  /* accent words: one quiet grey, no colour gradient (owner: no blue-purple shade) */
  --ap-grad: linear-gradient(var(--ap-accent), var(--ap-accent)); --ap-accent: #86868b;
  /* the previous look's names, mapped onto this one so older page rules stay sane */
  --at-gold: var(--ap-blue); --at-gold-2: #2997ff; --at-lapis: var(--ap-blue);
  --at-paper: var(--ap-bg-2); --at-night: #000;
  --at-hair: var(--ap-line-2); --at-hair-strong: rgba(0, 0, 0, .18);
  --at-frame: max(20px, calc((100vw - 1320px) / 2));
  --at-mono: var(--ap-font); --at-serif: var(--ap-font);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ap-bg: #000; --ap-bg-2: #161617; --ap-bg-3: #0b0b0c; --ap-ink: #f5f5f7; --ap-ink-2: #a1a1a6; --ap-ink-3: #86868b;
    --ap-line: #424245; --ap-line-2: rgba(255,255,255,.1); --ap-link: #2997ff; --ap-tile: #1d1d1f;
    --at-hair: var(--ap-line-2); --at-hair-strong: rgba(255,255,255,.24);
  }
}
:root[data-theme="dark"] {
  --ap-bg: #000; --ap-bg-2: #161617; --ap-bg-3: #0b0b0c; --ap-ink: #f5f5f7; --ap-ink-2: #a1a1a6; --ap-ink-3: #86868b;
  --ap-line: #424245; --ap-line-2: rgba(255,255,255,.1); --ap-link: #2997ff; --ap-tile: #1d1d1f;
  --at-hair: var(--ap-line-2); --at-hair-strong: rgba(255,255,255,.24);
}

/* ---------- type: one family everywhere, accents are colour, not italics ---------- */
html body { font-family: var(--ap-font); -webkit-font-smoothing: antialiased; letter-spacing: -.011em; }
html body em { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; }
:lang(th) body, :lang(ja) body { letter-spacing: 0; }
:lang(th) em, :lang(ja) em { white-space: normal; }
.ap-grad { background: var(--ap-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- actions ---------- */
.ap-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 980px;
  font: 400 17px/1 var(--ap-font); letter-spacing: -.022em; text-decoration: none; color: #fff; background: var(--ap-blue); border: 0; cursor: pointer;
  transition: background .2s;
}
.ap-btn:hover { background: var(--ap-blue-hover); }
.ap-btn.ghost { color: var(--ap-blue); background: transparent; box-shadow: inset 0 0 0 1px var(--ap-blue); }
.ap-btn.ghost:hover { color: #fff; background: var(--ap-blue); }
.ap-link { color: var(--ap-link); text-decoration: none; font-size: 17px; }
.ap-link::after { content: " \203A"; }
.ap-link:hover { text-decoration: underline; }

/* ---------- the previous look's drafting marks and paintings: off ---------- */
.at-ruler, .at-frame, .at-plus, .at-idx, .at-stamp, .at-time, .at-foot-art, .at-lens { display: none !important; }

/* eyebrow above a headline (was the mono kicker) */
.at-kicker { display: inline-block; font: 600 17px/1.2 var(--ap-font); letter-spacing: -.02em; text-transform: none; color: var(--ap-ink-2); opacity: 1; }
.at-kicker::before { content: none; }
.at-cap { font: 400 14px/1.4 var(--ap-font); letter-spacing: -.01em; text-transform: none; color: var(--ap-ink-3); opacity: 1; }

/* ---------- content fades up as it arrives (was the halftone dots) ---------- */
.at-js .at-dots:not(.at-whole) { opacity: 0; transform: translateY(28px) scale(.985); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1.2s cubic-bezier(.2,.8,.2,1); }
.at-js .at-dots.at-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .at-js .at-dots:not(.at-whole) { opacity: 1; transform: none; } }

/* ---------- a big line that lights up as it scrolls past ---------- */
.at-fill {
  --at-p: 0%;
  color: transparent;
  background: linear-gradient(180deg, var(--at-fill-on, var(--ap-ink)) calc(var(--at-p) - 12%), var(--at-fill-off, color-mix(in srgb, var(--ap-ink) 22%, transparent)) calc(var(--at-p) + 12%));
  -webkit-background-clip: text; background-clip: text;
}
.at-fill em { color: transparent; }
@media (prefers-reduced-motion: reduce) { .at-fill { --at-p: 130%; } }

/* ---------- pictures: rounded, no frames ---------- */
.at-paint { position: relative; overflow: hidden; border-radius: 28px; background: var(--ap-bg-2); }
.at-paint img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- inner-page opening: centred title on white (paintings are switched off) ---------- */
.at-hero { position: relative; display: block; min-height: 0; overflow: visible; border-bottom: 0; text-align: center; }
.at-hero-copy { padding: clamp(110px, 14vh, 150px) 22px 40px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; }
.at-hero-art { display: none; }
.at-display { font-family: var(--ap-font); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(44px, 6.4vw, 80px); margin: 0; color: var(--ap-ink); }
:lang(th) .at-display { line-height: 1.2; letter-spacing: -.01em; font-size: clamp(38px, 5.4vw, 68px); }
:lang(ja) .at-display { line-height: 1.18; letter-spacing: 0; font-size: clamp(34px, 5vw, 64px); }

/* ---------- quiet footer, the Apple way ---------- */
.ap-foot { background: var(--ap-bg-2); color: var(--ap-ink-2); font-size: 12px; line-height: 1.33; letter-spacing: -.01em; }
.ap-foot a { color: inherit; text-decoration: none; }
.ap-foot a:hover { text-decoration: underline; color: var(--ap-ink); }
.ap-foot h4 { color: var(--ap-ink); font-size: 12px; font-weight: 600; letter-spacing: -.01em; text-transform: none; }

/* ---------- off-screen sections pause their looping animations (long pages stay smooth) ---------- */
.at-off, .at-off *, .at-off *::before, .at-off *::after { animation-play-state: paused !important; }