/* Levitate Studios — site styles. Order matters: gallery, mobile foundation, design-system tokens, page overrides. */

/* gallery */.lvt-logo{display:block;width:clamp(150px,18vw,205px)!important;height:auto!important}
.campaign-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 32px;margin-bottom:24px}.campaign-grid-home{grid-template-columns:repeat(3,minmax(0,1fr))}.campaign-pool{margin:0;min-width:0}.campaign-images{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;background:var(--color-surface);scrollbar-width:thin}.campaign-images img{display:block;flex:0 0 100%;width:100%;min-width:0;height:auto;aspect-ratio:4/3;object-fit:cover;scroll-snap-align:start;scroll-snap-stop:always}.campaign-controls{display:flex;align-items:center;justify-content:space-between;padding:8px 0}.campaign-controls button{background:transparent;border:1px solid currentColor;border-radius:50%;width:40px;height:40px;cursor:pointer;color:inherit;font-size:20px}.campaign-count{font-size:12px;letter-spacing:.12em}.campaign-headline{margin:3px 0 5px;font-size:22px;line-height:1.2;font-weight:500;letter-spacing:-.02em}.campaign-copy{margin:0;font-size:15px;line-height:1.65;color:var(--color-neutral-700)}.campaign-link{color:var(--color-neutral-700);display:inline-flex;gap:8px;align-self:flex-start;margin-top:10px;font-size:13px;border-bottom:1px solid currentColor;padding-bottom:3px}.campaign-images:focus-visible,.campaign-controls button:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}@media(max-width:760px){.campaign-grid,.campaign-grid-home{grid-template-columns:1fr;gap:38px}.campaign-headline{font-size:21px}}

/* mobile foundation */
*,*::before,*::after{box-sizing:border-box}html{width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{width:100%;margin:0;display:block;overflow-wrap:break-word}.lvt-site{display:block}img{max-width:100%}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}input,select,textarea{max-width:100%;font-size:16px!important}button,.campaign-controls button{min-height:44px;min-width:44px}.campaign-copy{font-size:16px}.campaign-images{touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}.campaign-images img{height:auto;aspect-ratio:4/3;object-fit:cover}.lvt-logo{width:clamp(140px,40vw,205px)!important;height:auto!important;object-fit:contain}[data-reveal]{opacity:1!important;transform:none!important}
@media(max-width:700px){[data-route]>div{padding-left:20px!important;padding-right:20px!important}header>div{gap:16px!important;align-items:flex-start!important}header>div>div{font-size:12px!important;white-space:normal!important;letter-spacing:.08em!important}nav{position:relative!important;gap:14px!important}nav>div{width:100%;gap:8px 18px!important}nav a{display:inline-flex;align-items:center;min-height:44px;font-size:14px!important}nav>.lvt-language-control{margin-left:0!important}h1{font-size:clamp(36px,10vw,64px)!important;line-height:1.08!important;overflow-wrap:anywhere}h2{font-size:clamp(32px,8vw,52px)!important;line-height:1.12!important}div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}div[style*="display:flex"]{min-width:0}section>div[style*="align-items:baseline"]{flex-wrap:wrap;gap:12px!important}.campaign-grid,.campaign-grid-home{grid-template-columns:minmax(0,1fr)}.campaign-pool{min-width:0}.campaign-headline{font-size:22px}.btn{max-width:100%;white-space:normal!important;text-align:center;letter-spacing:.06em!important}.lvt-language-select{width:210px}footer{gap:24px!important;flex-wrap:wrap!important}p{max-width:100%}form{min-width:0}form label{font-size:12px!important}}

/* Broadsheet design-system tokens and the component classes this site uses */
:root { --color-bg: #f3f2f2; --color-surface: #eae9e9; --color-text: #201e1d; --color-accent: #0088b0; --color-accent-2: #d6006c; --color-divider: color-mix(in srgb, #201e1d 16%, transparent); --color-neutral-100: #f8f4f4; --color-neutral-200: #eae7e7; --color-neutral-300: #d7d3d3; --color-neutral-400: #bab6b6; --color-neutral-500: #9b9797; --color-neutral-600: #7d7979; --color-neutral-700: #605d5d; --color-neutral-800: #444141; --color-neutral-900: #2d2b2b; --color-accent-100: #e9f8ff; --color-accent-200: #cbeeff; --color-accent-300: #99e0ff; --color-accent-400: #62c5ee; --color-accent-500: #38a6cf; --color-accent-600: #1186ac; --color-accent-700: #006786; --color-accent-800: #004961; --color-accent-900: #0a303e; --color-accent-2-100: #fff1f4; --color-accent-2-200: #ffdee6; --color-accent-2-300: #ffc0d0; --color-accent-2-400: #ff90b1; --color-accent-2-500: #ff458e; --color-accent-2-600: #d82071; --color-accent-2-700: #aa0b56; --color-accent-2-800: #790e3d; --color-accent-2-900: #4b1528; --color-process-yellow: #edbb00; --font-heading: "Source Serif 4", system-ui, sans-serif; --font-heading-weight: 600; --font-body: "Source Serif 4", system-ui, sans-serif; --space-1: 5.0px; --space-2: 10.0px; --space-3: 15.0px; --space-4: 20.0px; --space-6: 30.0px; --space-8: 40.0px; --radius-sm: 1px; --radius-md: 2px; --radius-lg: 4px; --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent); }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); }
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text);  background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); }
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.input::placeholder { color: color-mix(in srgb, var(--color-text) 65%, transparent); opacity: 1; }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

/* page */:root {
  --color-accent: #4635b1;
  --color-accent-600: #3d2f9c;
  --color-accent-700: #372a8c;
  --lvt-lime: #93c94d;
}
html { -webkit-font-smoothing: antialiased; }
body { margin:0; background:var(--color-bg); color:var(--color-text); font-family:"Source Serif 4", Georgia, serif; font-size:16px; line-height:1.55; text-wrap:pretty; }
a { color:var(--color-accent); text-decoration:none; }
a:hover { color:var(--color-accent-700); }
::selection { background:#dff3c9; }
:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }
input[type=range]{accent-color:var(--color-accent);}
@keyframes lvt-ticker-a { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes lvt-ticker-b { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { [style*="lvt-ticker"] { animation: none !important; } }

.portfolio-byline{display:flex;flex-direction:column;gap:6px;margin-top:14px;line-height:1.45}
.portfolio-client{font-size:14px;font-weight:600;color:var(--color-text)}
.portfolio-description{font-size:16px;color:var(--color-neutral-700)}
.portfolio-instruction{font-size:14px;color:var(--color-neutral-700);margin-top:4px}

.lvt-language-control{display:flex;align-items:center;gap:8px;font-size:14px;letter-spacing:0;white-space:nowrap}
.lvt-language-select{font:inherit;color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-divider);border-radius:2px;padding:8px;min-height:44px;max-width:100%}
.lvt-language-select:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
html[lang="zh-Hans"] body{font-family:"Noto Serif CJK SC","Songti SC",SimSun,serif}
html[lang="zh-Hans"] h1,html[lang="zh-Hans"] h2,html[lang="zh-Hans"] h3,html[lang="zh-Hans"] h4{font-family:inherit;line-height:1.2!important;letter-spacing:0!important}
html[lang="zh-Hans"] p{line-height:1.65!important;letter-spacing:0!important;font-style:normal!important}
html[lang="da"] h1,html[lang="da"] h2,html[lang="da"] h3{overflow-wrap:anywhere;hyphens:auto;line-height:1.08!important}
@media(max-width:600px){nav{gap:12px!important}nav>div{gap:12px!important}nav a{white-space:normal!important}html[lang="da"] .btn{white-space:normal!important}}

.credentials-lines{display:flex;flex-direction:column;gap:clamp(16px,2vw,28px);margin-top:24px;max-width:100%;overflow:hidden}
.credentials-row{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.credentials-track{display:flex;width:max-content;animation:lvt-credentials 60s linear infinite}
.credentials-group{display:flex;flex-shrink:0;align-items:center;gap:clamp(16px,2vw,28px);padding-right:clamp(16px,2vw,28px)}
.credentials-name,.credentials-dot{font-size:clamp(19px,2vw,30px);line-height:1.4;white-space:nowrap}
.credentials-dot{color:var(--lvt-lime)}
.credentials-pause{width:18px;height:18px;vertical-align:middle;margin-right:8px;accent-color:var(--color-text)}
.credentials-pause-label{font-size:14px;cursor:pointer;vertical-align:middle}
.credentials-pause:checked~.credentials-lines .credentials-track,.credentials-lines:hover .credentials-track,.credentials-lines:focus-within .credentials-track{animation-play-state:paused}
.credentials-pause:checked~.credentials-lines .credentials-row,.credentials-row:focus{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
.credentials-pause:checked~.credentials-lines .credentials-track,.credentials-row:focus .credentials-track{animation:none}
.credentials-pause:checked~.credentials-lines .credentials-copy,.credentials-row:focus .credentials-copy{display:none}
.credentials-row:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}
@keyframes lvt-credentials{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.credentials-track{animation:none!important}.credentials-row{overflow-x:auto;mask-image:none;-webkit-mask-image:none}.credentials-copy{display:none}}

.lvt-language-control{max-width:100%;gap:8px;flex-shrink:0}.lvt-language-globe{flex:none}.lvt-language-select{max-width:min(230px,70vw)}
html[lang="ja"] body{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
html[lang="ko"] body{font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;word-break:keep-all}
html[lang="th"] body{font-family:"Noto Sans Thai",Thonburi,Tahoma,sans-serif}
html[lang="yue-Hant"] body{font-family:"Noto Serif CJK TC","Songti TC","PMingLiU",serif}
html:is([lang="ja"],[lang="ko"],[lang="th"],[lang="yue-Hant"]) :is(h1,h2,h3,h4){font-family:inherit;line-height:1.3!important;letter-spacing:0!important}
html:is([lang="ja"],[lang="ko"],[lang="th"],[lang="yue-Hant"]) p{line-height:1.65!important;letter-spacing:0!important;font-style:normal!important}
html:not([lang="en"]) :is(h1,h2,h3,h4){overflow-wrap:anywhere;hyphens:auto}
html:not([lang="en"]) .btn{white-space:normal!important}
@media(max-width:640px){nav{position:relative!important}nav>div{gap:10px 16px!important}nav a{white-space:normal!important}nav>.lvt-language-control{margin-left:auto}html:not([lang="en"]) .btn{max-width:100%;line-height:1.4}}