/* Subsycle holding page · brand kit v2.0 · tokens from design system v3.1 */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-stretch:100% 112%;font-display:swap;src:url("fonts/archivo-400-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-stretch:100% 112%;font-display:swap;src:url("fonts/archivo-400-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light;
  --ground:#FFF1E8; --ink:#1A1A1A; --ink-2:#5A4F48; --ink-3:#6B5E56;
  --link:#B23E14; --focus:#1A1A1A; --rule:#D9C7BB; --field:#FF6B3D;
  --lg-mark:#1A1A1A; --lg-play:#FF6B3D; --lg-sub:#1A1A1A; --lg-sycle:#FF6B3D;
  --ease:cubic-bezier(0,0,0.2,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#1A1A1A; --ink:#FFF1E8; --ink-2:#D9C7BB; --ink-3:#B5A79D;
    --link:#F08A5D; --focus:#FFF1E8; --rule:#3A3633;
    --lg-mark:#FF6B3D; --lg-play:#FFFFFF; --lg-sub:#FF6B3D; --lg-sycle:#FFFFFF;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#1A1A1A; --ink:#FFF1E8; --ink-2:#D9C7BB; --ink-3:#B5A79D;
  --link:#F08A5D; --focus:#FFF1E8; --rule:#3A3633;
  --lg-mark:#FF6B3D; --lg-play:#FFFFFF; --lg-sub:#FF6B3D; --lg-sycle:#FFFFFF;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased;container-type:inline-size}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:0.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.skip{position:absolute;left:12px;top:-100px;z-index:10;padding:12px 16px;background:var(--ink);color:var(--ground);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.skip:focus-visible{outline-color:var(--field)}

.lg-mark{fill:var(--lg-mark)} .lg-play{fill:var(--lg-play)} .lg-sub{fill:var(--lg-sub)} .lg-sycle{fill:var(--lg-sycle)}
.gl-bar{fill:#1A1A1A} .gl-play{fill:#FFF1E8}

.page{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:"head" "field" "main" "foot"}
.head{grid-area:head;padding:24px 20px}
.logo{display:block;height:32px;width:auto}
.field{grid-area:field;background:var(--field);display:grid;place-items:center;height:min(77cqi,42vh);height:min(77cqi,42svh);overflow:hidden}
.glyph{display:block;height:min(40cqi,30vh);height:min(40cqi,30svh);width:auto;animation:fade 1800ms var(--ease) 150ms both}
@keyframes fade{from{opacity:0}to{opacity:1}}

main{grid-area:main;padding:40px 20px 48px;display:flex;flex-direction:column;justify-content:flex-start;gap:16px}
h1{margin:0;font-weight:700;font-stretch:112%;font-size:clamp(52px,14.5cqi,128px);line-height:0.94;letter-spacing:-0.035em;text-wrap:balance}
h1 span{display:block}
.lede{margin:0;max-width:32ch;font-size:17px;line-height:26px;color:var(--ink-2);text-wrap:pretty}
.contact{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-size:17px;font-weight:600;align-self:flex-start}

.foot{grid-area:foot;margin:0 20px;padding:20px 0 24px;border-top:1px solid var(--rule);font-size:13px;line-height:18px;color:var(--ink-3)}
.foot p{margin:0}

@container (min-width:600px){
  .head{padding:32px 40px}
  .logo{height:36px}
  .field{height:min(50cqi,42vh);height:min(50cqi,42svh)}
  .glyph{height:min(24cqi,30vh);height:min(24cqi,30svh)}
  main{padding:56px 40px 64px;gap:20px}
  .lede{font-size:19px;line-height:28px}
  .foot{margin:0 40px}
}
@container (min-width:960px){
  .page{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr auto;grid-template-areas:"head field" "main field" "foot field"}
  .head{padding:48px 64px}
  .logo{height:44px}
  .field{height:auto}
  .glyph{height:min(22cqi,340px)}
  main{padding:48px 64px 72px;gap:24px;justify-content:flex-end}
  h1{font-size:clamp(88px,8.4cqi,136px)}
  .lede{font-size:20px;line-height:30px}
  .contact{font-size:19px}
  .foot{margin:0 64px;padding:24px 0 40px}
}

@media (prefers-reduced-motion:reduce){
  .glyph{animation:none}
}
@media (forced-colors:active){
  .field{border:1px solid CanvasText}
}