@font-face{font-family:'Inter Tight';src:url('fonts/InterTight-Variable.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
*{box-sizing:border-box}
:root{color-scheme:light;--paper:#f8f8f5;--ink:#101010;--muted:#6d6963;--gutter:clamp(20px,2.4vw,40px)}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:'Inter Tight',Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}
.portfolio{margin-left:0;height:100svh;min-height:650px;display:flex;flex-direction:column}
.masthead{min-height:70px;flex-shrink:0;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px}
.masthead p{margin:0;font-size:13px;font-weight:500;letter-spacing:-.01em}.masthead p span{margin:0 10px;color:#666}.masthead .masthead-count{font-size:9px;letter-spacing:.07em}
.projects{position:relative;display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;flex:1;min-height:0;padding:0 var(--gutter);scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.projects::-webkit-scrollbar{display:none}
.project{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;position:relative;padding:16px 4px;scroll-snap-align:start;overflow:hidden}
.project-live{background:var(--paper);color:var(--ink)}
.card-top{display:flex;align-items:center;gap:22px;flex-shrink:0;font-size:10px;font-weight:500;letter-spacing:.09em}
.project-number{font-family:Georgia,'Times New Roman',serif;font-size:42px;line-height:1;letter-spacing:-.06em}
.status{display:flex;align-items:center;gap:7px}.status i{width:5px;height:5px;background:currentColor;border-radius:50%}.category{margin-left:auto;color:var(--muted)}
.wordmark{width:calc(100% + 8px);margin:auto -4px;user-select:none}
.wordmark svg{display:block;width:100%;height:auto;overflow:visible;fill:var(--ink)}
.wordmark text{font-family:'Inter Tight',Arial Black,Arial,Helvetica,sans-serif;font-size:390px;font-weight:900;letter-spacing:-28px}
.card-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-shrink:0;padding-bottom:8px}.project-copy{display:flex;align-items:flex-end;gap:clamp(24px,4vw,64px);min-width:0}
.tagline{font-size:clamp(30px,3.4vw,52px);line-height:1.08;font-weight:550;letter-spacing:-.045em;margin:0}
.description{font-size:13px;line-height:1.5;letter-spacing:-.01em;margin:0;color:var(--muted)}
.app-link{display:flex;align-items:center;gap:40px;min-height:48px;padding:4px 0;font-size:16px;font-weight:500;flex-shrink:0;transition:opacity .2s ease}
.link-domain{display:block;margin-top:6px;font-size:11px;font-weight:400;color:var(--muted)}.link-arrow{font-size:60px;line-height:1;transition:transform .25s ease}.app-link:hover .link-arrow{transform:translate(3px,-3px)}.app-link:hover{opacity:.65}
.project-next{flex-basis:75%;background:var(--paper);color:var(--ink)}.project-next .status{margin-left:auto;color:#666}
.next-title{margin:auto 0}.chapter-label{font-size:9px;letter-spacing:.12em;color:#666}
.next-title h2{font-size:clamp(50px,7vw,110px);font-weight:500;line-height:.98;letter-spacing:-.065em;margin:26px 0}.next-mark{font-size:48px;line-height:1}
.gallery-footer{min-height:64px;flex-shrink:0;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px}
.gallery-footer p{font-size:9px;letter-spacing:.06em;margin:0;color:#666}
.gallery-navigation{display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.07em}.scroll-hint{margin-right:24px;color:#666}
.gallery-navigation button{width:44px;height:44px;background:var(--paper);border:0;color:var(--ink);cursor:pointer;font-size:18px;border-radius:50%}.gallery-navigation button:hover:not(:disabled){background:#eeede8;color:var(--ink)}.gallery-navigation button:disabled{opacity:.3;cursor:default}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:6px}.projects:focus-visible{outline:1px solid var(--ink);outline-offset:-1px}
@media(min-width:1600px){.project{padding:20px 4px}}
@media(max-width:700px){:root{--gutter:20px}.portfolio{height:100svh;min-height:600px}.masthead{min-height:72px}.masthead p{font-size:12px;max-width:210px;line-height:1.5}.masthead p span{margin:0 4px}.masthead-count{display:none}.projects{gap:16px;padding:0 var(--gutter)}.project{flex:0 0 100%;min-height:0;padding:16px 4px}.card-top{gap:18px}.project-number{font-size:35px}.category{display:none}.wordmark{margin:auto -4px}.card-bottom{align-items:stretch;flex-direction:column;gap:24px;padding-bottom:0}.project-copy{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:end}.tagline{font-size:27px}.description{font-size:11px;line-height:1.5}.app-link{width:100%;justify-content:space-between;font-size:15px}.project-next{flex-basis:100%}.project-next .card-bottom{flex-direction:row;align-items:flex-end}.next-title h2{font-size:58px}.gallery-footer{min-height:68px;gap:12px;padding-bottom:env(safe-area-inset-bottom,0px)}.gallery-navigation{gap:8px}.scroll-hint{display:none}}

.context-carousel{min-width:0;max-width:100%;position:relative;top:8px}
.context-slides{display:grid;overflow:hidden;padding:4px 0 8px}
.context-slide{grid-area:1 / 1;opacity:0;transform:translateY(110%);transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .45s ease;pointer-events:none}
.context-slide.is-active{opacity:1;transform:translateY(0)}
.context-slide.is-exiting{opacity:0;transform:translateY(-110%)}
@media(max-width:700px){.context-slide{font-size:clamp(27px,7.4vw,36px);white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.context-slide{transition:none;transform:none}}

#page-indicator{font-variant-numeric:tabular-nums;white-space:nowrap}
@media(min-width:701px) and (max-height:800px){.wordmark svg{max-height:calc(100svh - 280px);min-height:220px}}
@media(max-width:360px){:root{--gutter:16px}.project-copy{gap:12px}.project-copy .description{font-size:10px}.gallery-navigation{gap:4px}}
@media(prefers-reduced-motion:reduce){.app-link,.link-arrow{transition:none}}


.wordmark{flex:1;min-height:0;width:100%;margin:18px 0;display:flex;align-items:center;justify-content:center}
.wordmark .hero-logo{width:100%;height:100%;max-height:560px;color:var(--ink);overflow:visible}
@media(max-width:700px){.wordmark{margin:20px 0}.wordmark .hero-logo{max-height:none;min-height:0}}

/* Mobile shows a close-up of the logo, offset beyond the right edge. */
@media(max-width:700px){
  .project-live{isolation:isolate;overflow:visible;clip-path:inset(-180px calc(-1 * var(--gutter)) -140px calc(-1 * var(--gutter)))}
  .project-live .wordmark{position:static}
  .project-live .hero-logo{position:absolute;left:38px;top:calc(50% - 60px);width:116.8vw;height:auto;max-height:none;min-height:0;transform:translateY(-50%) rotate(-12deg);transform-origin:center;z-index:0;pointer-events:none}
  .project-live .card-top,.project-live .card-bottom{position:relative;z-index:1;mix-blend-mode:difference;color:#fff}
  .project-live .description,.project-live .link-domain{color:#fff;opacity:.72}
  .project-live .app-link:hover{opacity:1}
}

@media(max-width:700px){.projects{margin-top:-120px;padding-top:120px}.masthead{position:relative;z-index:2}}

.logo-halo{opacity:1;transform-origin:99.259px 99.259px;animation:halo-pulse 5s ease-in-out infinite}
@keyframes halo-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.logo-halo{animation:none;opacity:.75}}



@media(max-width:700px){.projects{margin-bottom:-100px;padding-bottom:100px}.gallery-footer{position:relative;z-index:2}}

.logo-inner-glow{animation:inner-glow-pulse 5s ease-in-out infinite}
@keyframes inner-glow-pulse{0%,100%{opacity:.26}50%{opacity:.48}}
@media(prefers-reduced-motion:reduce){.logo-inner-glow{animation:none;opacity:.35}}

@media(max-width:700px){
  .project-live .project-copy{grid-template-columns:1.2fr 1fr;gap:18px}
  .project-live .context-slide{white-space:nowrap}
}

@media(max-width:700px){.project-live .project-copy > .description{justify-self:end;text-align:left;padding-right:8px}}

@media(max-width:700px){.project-live .app-link{position:relative;top:8px}}

@media(max-width:700px){.project-live .project-copy > .description{font-size:12px;line-height:1.5;padding-right:0}}

@media(max-width:700px){
  .project-live .card-top{top:-48px;mix-blend-mode:normal;color:var(--ink)}
  .project-live .context-carousel{top:38px}
  .project-live .app-link{top:24px}
}

@media(max-width:700px){
  .project-live .project-copy{position:relative;top:22px}
  .project-live .project-copy > .description{position:relative;top:30px}
}

@media(max-width:700px){
  .project-live .app-link{align-items:flex-start}
  .project-live .app-link .link-arrow{position:absolute;right:0;top:-12px}
}

/* Keep the copy and call to action in separate rows, without offset overlap. */
@media(max-width:700px){
  .project-live .card-bottom{gap:28px;padding-bottom:0;transform:translateY(20px)}
  .project-live .project-copy{position:static;align-items:end;gap:18px}
  .project-live .context-carousel{position:static}
  .project-live .project-copy > .description{position:static;padding-bottom:8px}
  .project-live .app-link{position:relative;top:0;min-height:56px;align-items:center;padding:0}
  .project-live .app-link .link-arrow{position:static;font-size:60px;line-height:1}
}

@media(max-width:700px){.project-live .project-copy{transform:translateY(16px)}}

/* Desktop carries the same oversized, angled composition as mobile. */
@media(min-width:701px){
  .project-live{isolation:isolate;overflow:hidden;container-type:size}
  .project-live .wordmark{position:static}
  .project-live .hero-logo{position:absolute;left:48%;top:50%;width:min(48vw,780px,calc((100cqh - 32px) / 1.12));height:auto;max-height:none;min-height:0;transform:translateY(-50%) rotate(-12deg);transform-origin:center;z-index:0;pointer-events:none}
  .project-live .card-top,.project-live .card-bottom{position:relative;z-index:1}
  .project-live .card-top{mix-blend-mode:normal;color:var(--ink)}
  .project-live .card-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px;padding-bottom:18px;mix-blend-mode:difference;color:#fff}
  .project-live .project-copy{align-items:end;gap:clamp(32px,5vw,80px)}
  .project-live .context-carousel{position:static}
  .project-live .description,.project-live .link-domain{color:#fff;opacity:.72}
  .project-live .app-link{align-items:center;gap:48px;opacity:1}
  .project-live .app-link .link-arrow{font-size:60px}
}

@media(min-width:701px){
  .project-live .project-copy{flex-direction:column;align-items:flex-start;gap:18px}
  .project-live .project-copy > .description{font-size:14px;line-height:1.5}
}

/* Compact language control and direct LINE support. */
@font-face{font-family:'Noto Sans Thai';src:url('fonts/NotoSansThai-Variable.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
html[lang="th"] body{font-family:'Noto Sans Thai','Inter Tight',sans-serif}
html[lang="th"] .tagline{line-height:1.3;letter-spacing:-.025em}
html[lang="th"] .status,html[lang="th"] .description{letter-spacing:0}
html[lang="th"] .next-title h2{line-height:1.25;letter-spacing:-.04em;font-size:clamp(42px,5.5vw,88px)}
.language-switcher{margin-left:auto;display:flex;gap:4px;align-items:center}
.language-switcher button{border:0;background:transparent;color:var(--muted);padding:8px;min-height:38px;cursor:pointer;font-size:12px;line-height:1.4}
.language-switcher button[aria-pressed="true"]{color:var(--ink);font-weight:650;text-decoration:underline;text-underline-offset:5px}
.support-bubble{position:fixed;right:var(--gutter);bottom:max(10px,env(safe-area-inset-bottom));z-index:10;width:48px;height:48px;border-radius:50%;background:#292929;color:#fff;display:grid;place-items:center;box-shadow:0 4px 20px #0000000c;transition:transform .2s}
.support-bubble:hover{transform:translateY(-2px)}
.gallery-footer{padding-right:calc(var(--gutter) + 66px)}
@media(max-width:700px){.language-switcher{align-self:flex-start;margin-top:10px}.gallery-navigation{gap:2px}.gallery-navigation button{width:32px;height:40px}.gallery-footer{gap:8px}html[lang="th"] .next-title h2{font-size:44px}}
@media(prefers-reduced-motion:reduce){.support-bubble{transition:none}}

/* Align language choices with the project category. */
.project-live .card-top{z-index:3}
.card-top .language-switcher{align-self:center;margin-top:0;gap:0;flex-shrink:0}
.card-top .language-switcher button{font-size:11px;padding:8px 6px;letter-spacing:0}
@media(max-width:700px){.project-live .card-top{gap:12px}.card-top .language-switcher button{font-size:10px;padding:8px 5px}}

/* Give each mobile language choice a comfortable, separate touch target. */
@media(max-width:700px){
  .project-live .card-top{gap:10px}
  .project-live .card-top .status{flex:1;min-width:0;line-height:1.4}
  .card-top .language-switcher{gap:4px}
  .card-top .language-switcher button{min-width:44px;min-height:44px;padding:10px 8px;font-size:12px;touch-action:manipulation}
}

.trial-note{display:table;margin-top:8px;padding:5px 11px;border:1px solid currentColor;border-radius:999px;font-size:12px;font-weight:500;line-height:1.5}
@media(max-width:700px){.trial-note{font-size:11px;margin-top:6px}}

/* The empty mobile masthead must not intercept the language buttons below it. */
@media(max-width:700px){.masthead{pointer-events:none}}

.app-link [data-i18n="try"]{font-size:20px;line-height:1.4}
@media(max-width:700px){.app-link [data-i18n="try"]{font-size:18px}}
@media(max-width:700px){.project-live .card-bottom{transform:translateY(8px)}}

/* Keep the trial's four brand colours vivid rather than inverted by the copy. */
.project-live .card-bottom{mix-blend-mode:normal}
.project-live .project-copy{mix-blend-mode:difference;color:#fff}
.project-live .app-link{color:var(--ink)}
.project-live .app-link .link-domain{color:var(--muted);opacity:1}
.trial-note{
  position:relative;isolation:isolate;overflow:hidden;margin-top:12px;padding:5px 12px;
  border:1px solid transparent;border-radius:999px;font-size:13px;font-weight:500;line-height:1.5;
  background:linear-gradient(var(--paper),var(--paper)) padding-box,
    linear-gradient(110deg,#EF5125,#FCB813,#7FBA42,#349FD9) border-box;
}
.trial-note::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,#EF5125,#FCB813,#7FBA42,#349FD9,#EF5125);
  background-size:250% 100%;filter:blur(7px);opacity:.3;
  animation:trial-halo-drift 8s ease-in-out infinite alternate;
}
@keyframes trial-halo-drift{from{background-position:0% 50%}to{background-position:100% 50%}}
@media(max-width:700px){
  .trial-note{font-size:12px;margin-top:10px;padding:5px 12px}
  .project-live .card-bottom{transform:none;padding-bottom:20px}
}
@media(prefers-reduced-motion:reduce){.trial-note::before{animation:none}}
.project-live .card-bottom{z-index:auto}
.project-live .project-copy,.project-live .app-link{position:relative;z-index:1}

/* A small directional invitation, with a pause between each nudge. */
.app-link .link-arrow{display:inline-block;animation:arrow-invite 3.6s cubic-bezier(.22,1,.36,1) infinite}
@keyframes arrow-invite{
  0%,60%,100%{transform:translate(0,0)}
  76%{transform:translate(5px,-5px)}
  88%{transform:translate(0,0)}
}
@media(prefers-reduced-motion:reduce){.app-link .link-arrow{animation:none}}

/* Restore the lower mobile CTA position while keeping the trial badge clear. */
@media(max-width:700px){.project-live .app-link{transform:translateY(12px)}}

@media(max-width:700px){.project-live .card-bottom{gap:40px}}

@media(max-width:700px){.project-live .card-bottom{transform:none;top:8px}}

/* Give the rotating message the full copy width. */
.project-live .context-slide{font-size:clamp(38px,4.2vw,64px)}
@media(max-width:700px){
  .project-live .project-copy{display:block}
  .project-live .context-slide{font-size:clamp(32px,9.2vw,42px)}
}

/* Desktop atmosphere spans the viewport instead of the clipped project card. */
@media(min-width:701px){
  .portfolio{position:relative;isolation:isolate}
  .portfolio::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(ellipse at 40% 70%,#EF51252b,transparent 66%),
      radial-gradient(ellipse at 57% 23%,#FCB81336,transparent 65%),
      radial-gradient(ellipse at 85% 32%,#7FBA4233,transparent 64%),
      radial-gradient(ellipse at 78% 85%,#349FD935,transparent 68%);
    background-size:140% 140%;
    animation:desktop-halo-drift 12s ease-in-out infinite alternate;
  }
  .project-live,.project-next{background:transparent}
  .project-live .logo-halo{display:none}
  .project-live .project-copy{mix-blend-mode:normal;color:var(--ink)}
}
@keyframes desktop-halo-drift{
  from{background-position:0% 0%,100% 0%,100% 100%,0% 100%;opacity:.8}
  to{background-position:100% 100%,0% 100%,0% 0%,100% 0%;opacity:1}
}
@media(min-width:701px) and (prefers-reduced-motion:reduce){.portfolio::before{animation:none}}

/* Native touch swipes and mouse dragging share the horizontal gallery. */
.projects{touch-action:pan-x pan-y}
@media(hover:hover) and (pointer:fine){.projects{cursor:grab}}
.projects.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.projects.is-dragging a{cursor:grabbing}

@media(min-width:701px){
  .project-live .card-top{position:absolute;top:0;left:4px;right:4px}
}

@media(min-width:701px){
  .masthead{min-height:46px}
  .project-live .hero-logo{top:calc(50% + 12px);width:min(53vw,860px,calc((100cqh - 32px) / 1.12))}
}

.projects.is-settling{scroll-snap-type:none}

/* Language stays outside the moving project track. */
.portfolio > .language-switcher{position:fixed;top:48px;right:calc(var(--gutter) + 4px);z-index:20;margin:0;gap:4px}
.portfolio > .language-switcher button{font-size:11px;padding:8px 6px}
@media(max-width:700px){
  .portfolio > .language-switcher{top:40px}
  .portfolio > .language-switcher button{min-width:44px;min-height:44px;font-size:12px;padding:10px 8px;touch-action:manipulation}
  .card-top{padding-right:96px}
}

/* Larger language controls with separate, comfortable tap areas. */
.portfolio > .language-switcher{gap:6px;top:43px}
.portfolio > .language-switcher button{min-width:48px;min-height:48px;padding:12px 10px;font-size:14px;touch-action:manipulation}
@media(max-width:700px){
  .portfolio > .language-switcher{top:38px}
  .card-top{padding-right:106px}
}

.portfolio > .language-switcher{top:35px}
@media(max-width:700px){.portfolio > .language-switcher{top:30px}}

/* Category introduces the rotating message. */
.project-live .context-carousel > .status{font-size:11px;font-weight:500;letter-spacing:.09em;line-height:1.5;margin-bottom:16px}
@media(max-width:700px){.project-live .context-carousel > .status{font-size:12px;margin-bottom:12px}}

.message-category{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.message-category .status{font-size:11px;font-weight:500;letter-spacing:.09em;line-height:1.5}
@media(max-width:700px){.message-category{gap:14px;margin-bottom:12px}.message-category .status{font-size:12px}}

/* Lift the project content without moving the footer. */
.projects{top:-12px}
.portfolio > .language-switcher{top:23px}
@media(max-width:700px){.portfolio > .language-switcher{top:18px}}