/* HTA holding page. Every value from the HTA Design System (claude.ai/artifact/4E9svtNk2BD8gwjirZGpGL): black / white / HTA Orange, Cooper Hewitt + Montserrat, sharp corners, 2px rules, no gradients, no shadows, 120-200ms motion. */
@font-face{font-family:"Cooper Hewitt";src:url(fonts/cooper-hewitt-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Cooper Hewitt";src:url(fonts/cooper-hewitt-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(fonts/montserrat-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(fonts/montserrat-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(fonts/montserrat-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --black:#000000;--white:#ffffff;--orange:#E44715;--orange-600:#CD3F13;--orange-100:#F5A78F;
  --display:"Cooper Hewitt","Montserrat",system-ui,sans-serif;
  --body:"Montserrat",system-ui,sans-serif;
  --ease:cubic-bezier(.2,0,0,1);--fast:120ms;--base:200ms;
}
html[data-theme="black"]{--bg:var(--black);--ink:var(--white);--rule:var(--white);--accent:var(--orange);--accent-hover:var(--orange-100)}
html[data-theme="orange"]{--bg:var(--orange);--ink:var(--black);--rule:var(--black);--accent:var(--black);--accent-hover:var(--white)}
html[data-theme="white"]{--bg:var(--white);--ink:var(--black);--rule:var(--black);--accent:var(--black);--accent-hover:var(--orange-600)}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:18px;line-height:1.5;min-height:100dvh;display:flex;flex-direction:column;padding:40px 64px 40px}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
img{display:block;max-width:100%}

.label{font-family:var(--body);font-weight:700;font-size:12px;line-height:1.2;letter-spacing:.2em;text-transform:uppercase}

.top{display:flex;justify-content:space-between;align-items:center}
.lockup{display:block;line-height:0}
.lockup svg{height:60px;width:auto;display:block;fill:var(--ink)}

main{flex:1}
.hero{padding:128px 0 112px;max-width:75%}
h1{font-family:var(--display);font-weight:800;font-size:clamp(44px,7.4vw,112px);line-height:1.02;letter-spacing:-.01em;text-transform:uppercase}
.eyebrow{margin-bottom:28px}
.lede{margin-top:36px;font-size:clamp(18px,1.6vw,23px);line-height:1.45;max-width:38ch}

.talent{border-top:2px solid var(--rule);padding-top:28px}
.talent ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,440px));gap:48px;margin-top:36px}
.talent img{width:100%;aspect-ratio:1/1;object-fit:cover;height:auto}
.talent h3{font-family:var(--display);font-weight:800;font-size:34px;line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;margin-top:22px}
.talent li p{margin-top:6px;font-size:16px;font-weight:600}

.contact{border-top:2px solid var(--rule);margin-top:112px;padding-top:28px}
.email{display:inline-block;margin-top:20px;font-family:var(--display);font-weight:800;font-size:clamp(28px,4.8vw,76px);line-height:1.1;letter-spacing:-.01em;text-decoration:none;border-bottom:4px solid var(--accent);padding-bottom:2px;transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.email:hover{color:var(--accent);border-color:var(--accent-hover)}
.email:active{transform:translateY(1px)}

footer{margin-top:112px;display:flex;align-items:baseline;justify-content:space-between;gap:24px}
footer .mark{align-self:flex-end}
footer .mark svg{height:40px;width:auto;display:block;fill:var(--ink)}
footer .mantra{font-weight:600;font-size:15px;line-height:1.2}

@media (max-width:720px){
  body{padding:20px 20px 28px;font-size:16px}
  .lockup svg{height:44px}
  .hero{padding:56px 0 56px;max-width:100%}
  .eyebrow{margin-bottom:20px}
  h1{font-size:clamp(40px,12.2vw,56px);line-height:1.04}
  .lede{margin-top:24px;font-size:17px}
  .talent{padding-top:20px}
  .talent ul{grid-template-columns:1fr;gap:40px;margin-top:28px}
  .talent h3{font-size:30px;margin-top:16px}
  .contact{margin-top:64px;padding-top:20px}
  .email{font-size:clamp(26px,7.8vw,34px);border-bottom-width:3px;margin-top:16px}
  footer{margin-top:64px;flex-direction:column;align-items:flex-start;gap:12px}
  footer .mark{align-self:flex-start}
}

/* Wide screens (Will, 11 Oct: "a massive wall of text" on his desktop): the roster sits beside the headline from 1600px up; 1440 and phone unchanged */
body{max-width:1920px;margin:0 auto}
@media (min-width:1180px){
  main{display:grid;grid-template-columns:7fr 5fr;column-gap:96px;align-items:start}
  .hero{grid-column:1;padding:40px 0 48px;max-width:100%}
  h1{font-size:clamp(44px,5.8vw,96px)}
  .eyebrow{margin-bottom:20px}
  .lede{margin-top:28px}
  .talent{grid-column:2;border-top:0;padding-top:40px}
  .talent ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:24px}
  .talent h3{font-size:28px}
  .contact{grid-column:1/-1;margin-top:48px}
}