/* 00-tokens.css */
/* Design tokens. Source of truth: Figma "Pushuké - Design system v0.14"
   (variable collection "color roles", modes Light / Dark; text styles "landing-web/…").
   Change colours here, never inline in page CSS. */
:root{
  color-scheme: light;
  /* brand constants (same in both modes) */
  --yorange:#F4AF61; --hope:#F4CF61; --twilight:#351A57; --soul:#F0E0E0; --ink:#1C1C1C;
  /* color roles: Light */
  --bg:#F0E0E0;            /* surface/ground  (soul-white) */
  --raised:#FFFFFF;        /* surface/raised  (flat-white) */
  --heading:#351A57;       /* text/heading    (twilight) */
  --body:#165E83;          /* text/body       (pensive-blue 藍色) */
  --muted:#545454;         /* text/secondary  (gray-for-pensive-blue) */
  --rule:rgba(53,26,87,.16);
  --deep:#E8D3D5;          /* image placeholder ground */
  --hover-fill:rgba(244,207,97,.42);
  --footer-bg:#1C1C1C;
  --header-solid:rgba(240,224,224,.92);
  --focus:#165E83;
  --display:"Zen Antique Soft","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --gutter:clamp(16px,4.5vw,72px);
  --shell:1320px;
  --header-h:76px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-ui:cubic-bezier(.23,1,.32,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-pk-theme="light"]){
    color-scheme: dark;
    --bg:#1C1C1C; --raised:#26232A; --heading:#F0E0E0; --body:#A8CDE2; --muted:#C2C2C2;
    --rule:rgba(240,224,224,.14); --deep:#2B2533; --hover-fill:rgba(244,207,97,.14);
    --footer-bg:#26232A; --header-solid:rgba(28,28,28,.9); --focus:#A8CDE2;
  }
}
:root[data-pk-theme="dark"]{
  color-scheme: dark;
  --bg:#1C1C1C; --raised:#26232A; --heading:#F0E0E0; --body:#A8CDE2; --muted:#C2C2C2;
  --rule:rgba(240,224,224,.14); --deep:#2B2533; --hover-fill:rgba(244,207,97,.14);
  --footer-bg:#26232A; --header-solid:rgba(28,28,28,.9); --focus:#A8CDE2;
}

/* 10-base.css */
*{box-sizing:border-box}
html{scrollbar-color:var(--heading) var(--bg);accent-color:var(--heading)}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--sans);font-weight:500;
  font-size:clamp(15px,.4vw + 13.5px,16px);line-height:1.95;-webkit-font-smoothing:antialiased;overflow-x:clip}
html[lang="en"] body{line-height:1.7}
::selection{background:var(--hope);color:var(--twilight)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:4px}
h1,h2,h3,.display{font-family:var(--display);font-weight:400;color:var(--heading);margin:0;text-wrap:balance;word-break:auto-phrase;letter-spacing:.02em}
html[lang="en"] :is(h1,h2,h3,.display){letter-spacing:0}
p{margin:0}
/* short pages still put the footer at the bottom of the screen */
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
main{flex:1 0 auto}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

/* theme swap: colors ease over 300ms, only while switching */
html.theming *:not(.thumb),html.theming *::before,html.theming *::after{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease!important}

/* page-to-page navigation (incl. switching language): a soft crossfade, and the language pill's
   thumb slides across. Browsers without cross-document view transitions simply load the page. */
@view-transition{navigation:auto}
.lang .thumb{view-transition-name:lang-thumb}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
::view-transition-group(lang-thumb){animation-duration:.32s;animation-timing-function:var(--ease-ui)}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:20;left:12px;top:12px;padding:10px 16px;border-radius:999px;background:var(--heading);color:var(--bg);
  font-weight:700;font-size:14px;text-decoration:none;transform:translateY(-200%);transition:transform .2s var(--ease-ui)}
.skip-link:focus-visible{transform:none;outline-offset:2px}

/* 20-header.css */
/* ---------- header ----------
   Over a photo hero (body.has-hero) the header starts transparent with light text and turns
   solid once the hero scrolls away (site.js adds .solid). On every other page it is solid from the start. */
.site-header{position:fixed;inset:0 0 auto;z-index:10;padding-top:env(safe-area-inset-top,0px);
  transition:background-color .35s ease,box-shadow .35s ease,color .35s ease;color:var(--soul)}
.site-header .bar{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
:is(.site-header.solid, body:not(.has-hero) .site-header){background:var(--header-solid);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 1px 0 var(--rule);color:var(--heading)}
body:not(.has-hero) main{padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px))}
.brand{display:block;flex-shrink:0;width:clamp(124px,12.2vw,176px)}
.brand img{width:100%;height:auto}
.tools{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px)}

/* segmented pills: theme switch (one button) and language (two links) */
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;border-radius:999px;padding:3px;
  box-shadow:inset 0 0 0 1px currentColor;font-size:13px;line-height:1;isolation:isolate}
.seg .thumb{position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:currentColor;transition:transform .32s var(--ease-ui)}

.lang a{all:unset;cursor:pointer;display:grid;place-items:center;text-align:center;padding:8px 14px;min-width:3.6em;border-radius:999px;
  font-weight:700;letter-spacing:.04em;white-space:nowrap;transition:color .25s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.lang a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.lang a[aria-current="true"]{color:var(--twilight);cursor:default}
:is(.site-header.solid, body:not(.has-hero) .site-header) .lang a[aria-current="true"]{color:var(--bg)}
html[lang="en"] .lang .thumb{transform:translateX(100%)}

button.seg{appearance:none;-webkit-appearance:none;margin:0;border:0;background:none;color:inherit;font-family:inherit;font-size:13px;line-height:1;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
button.seg:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* the whole pill is one switch; an invisible pad widens the touch area to about Apple's 44pt */
.theme::after{content:"";position:absolute;inset:-7px -5px}
.theme .opt{display:grid;place-items:center;padding:7px 10px;transition:color .25s ease}
.theme svg{width:16px;height:16px;display:block}
.theme[data-effective="dark"] .thumb{transform:translateX(100%)}
.theme[data-effective="light"] .opt-light,.theme[data-effective="dark"] .opt-dark{color:var(--twilight)}
:is(.site-header.solid, body:not(.has-hero) .site-header) :is(.theme[data-effective="light"] .opt-light,.theme[data-effective="dark"] .opt-dark){color:var(--bg)}
@media (hover:hover) and (pointer:fine){.theme:hover{box-shadow:inset 0 0 0 1px currentColor,0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}}

@media (pointer:coarse){.theme .opt{padding:9px 12px}.lang a{padding-block:10px}}
@media (max-width:420px){.site-header .bar{gap:10px}.site-header .brand{width:112px}.tools{gap:8px}.theme .opt{padding-inline:9px}.lang a{min-width:0;padding-inline:10px}}
@media (max-width:370px){.site-header .brand{width:96px}}
@media (max-width:340px){.site-header .brand{width:82px}.theme .opt{padding-inline:7px}.lang a{padding-inline:8px}}

.icon-link{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;transition:background-color .2s ease}
.icon-link svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){.icon-link:hover{background:color-mix(in srgb,currentColor 12%,transparent)}}
.social{display:flex;gap:6px}
@media (max-width:640px){.site-header .social{display:none}}

/* 30-components.css */
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;font-weight:700;font-size:14.5px;letter-spacing:.03em;
  padding:14px 22px;border-radius:999px;transition:transform .16s var(--ease-ui),background-color .2s ease,color .2s ease}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--yorange);color:var(--twilight)}
.btn--ghost{box-shadow:inset 0 0 0 1px rgba(240,224,224,.7);color:var(--soul)}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{background:var(--hope)}
  .btn--ghost:hover{background:rgba(240,224,224,.12)}
}
/* the same pill on light/dark page grounds (not over a photo) */
.btn--solid{background:var(--heading);color:var(--bg)}
@media (hover:hover) and (pointer:fine){.btn--solid:hover{background:var(--body)}}

/* 40-footer.css */
/* ---------- footer ---------- */
.site-footer{background:var(--footer-bg);color:var(--soul);padding-block:clamp(48px,5vw,72px) calc(env(safe-area-inset-bottom,0px) + 36px)}
.site-footer .shell{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px 40px}
.site-footer .brand{width:clamp(150px,12.5vw,180px)}
.site-footer small{font-size:12.5px;color:rgba(240,224,224,.75);letter-spacing:.06em;text-align:center}
.site-footer .social{justify-self:end}
@media (max-width:640px){
  .site-footer .shell{grid-template-columns:1fr;justify-items:start}
  .site-footer .social{justify-self:start;order:2}
  .site-footer small{order:3;text-align:left}
}

/* 90-reduced-motion.css */
@media (prefers-reduced-motion:reduce){
  .seg .thumb{transition:none}
  html.theming *{transition:none!important}
  @view-transition{navigation:none}
}