/* ARC — American Renewal Corps teaser site */

@font-face{font-family:"CX80";src:url("../assets/fonts/CX80.ttf") format("truetype");font-weight:50 150;font-style:normal;font-display:block}
@font-face{font-family:"Modern Era Mono";src:url("../assets/fonts/ModernEraMono-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}

:root{
  --scrim:.22;
  --ink:#ffffff;
  --paper:#efefef;
  --about-bg:#110803;
  --contact-bg:#062b01;
  --accent:#3df41e;
  --mono:"Modern Era Mono", ui-monospace, monospace;
  --display:"CX80", sans-serif;
  --ease-out:cubic-bezier(.2,.7,.1,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0b0b0b}
body{color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Home ---------- */
.home{position:relative;width:100%;height:100vh;height:100svh;min-height:480px;overflow:hidden;background:#0b0b0b}
.home-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.home-scrim{position:absolute;inset:0;background:rgba(8,8,8,var(--scrim))}

.home-header{position:absolute;top:0;left:0;right:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;padding:max(16px,2.37vw) max(18px,3.07vw) 0;font-size:max(11px,1.042vw);line-height:1}
.nav-left{justify-self:start;margin-top:-.155em}
.nav-right{justify-self:end;margin-top:-.155em}
.home-logo{display:block;line-height:0}
.home-logo img{display:block;width:max(150px,21.72vw);height:auto}

.home-footer{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;padding:0 max(18px,3.07vw) max(12px,calc(2.37vw - .25em));font-size:max(9px,.521vw);line-height:1}
.home-footer small{font-size:inherit;text-align:center}
.home-counter{justify-self:start}
.home-pause{justify-self:end}

/* links with the draw-on underline */
.arc-u{background:linear-gradient(currentColor,currentColor) no-repeat right bottom / 0% 1px;padding-bottom:.28em;transition:background-size .45s cubic-bezier(.6,0,.2,1)}
.arc-nav:hover .arc-u,.arc-nav:focus-visible .arc-u,
.arc-btn:hover .arc-u,.arc-btn:focus-visible .arc-u,
.ct-send:hover .arc-u,.ct-send:focus-visible .arc-u,
a:hover .arc-u,a:focus-visible .arc-u{background-size:100% 1px;background-position:left bottom}

.arc-nav{appearance:none;background:none;border:0;margin:-14px 0;padding:14px 0;color:var(--ink);font:inherit;line-height:1;letter-spacing:inherit;cursor:pointer;display:inline-block}
.arc-nav:focus-visible{outline:none}
.arc-btn{appearance:none;background:none;border:0;padding:0 0 0 12px;min-height:44px;min-width:44px;display:inline-flex;align-items:flex-end;justify-content:flex-end;line-height:1;color:var(--ink);font:inherit;letter-spacing:inherit;cursor:pointer}
.arc-btn:focus-visible{outline:none}

/* cycling headline */
.home-word{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.arc-word{margin:0;display:block;white-space:nowrap;line-height:.725em;height:.7em;color:var(--ink);font-family:var(--display);font-weight:400;font-size:min(30vw,86vh)}
.arc-l{display:inline-block;animation-name:arc-cycle;animation-timing-function:cubic-bezier(.2,.7,.1,1);animation-fill-mode:both;will-change:transform,opacity}
.arc-g{display:inline-block;animation-name:arc-weight;animation-timing-function:cubic-bezier(.3,.6,.1,1);animation-fill-mode:backwards}
.is-static .arc-l,.is-static .arc-g{animation:none}
.is-paused .arc-l,.is-paused .arc-g{animation-play-state:paused}
@keyframes arc-cycle{0%{opacity:0;transform:translateY(14%)}16%{opacity:1;transform:translateY(0)}86%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-10%)}}
@keyframes arc-weight{from{font-weight:50}}

/* ---------- Panels ---------- */
.arc-panel{position:absolute;inset:0;z-index:20;overflow-y:auto;-webkit-overflow-scrolling:touch;color:var(--paper);animation:arc-panel-in .7s cubic-bezier(.7,0,.2,1) both}
.arc-panel[hidden]{display:none}
.arc-panel.is-closing{animation:arc-panel-out .45s cubic-bezier(.6,0,.4,1) both}
@keyframes arc-panel-in{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes arc-panel-out{from{opacity:1}to{opacity:0}}
.panel-about{background:var(--about-bg)}
.panel-contact{background:var(--contact-bg)}
.panel-inner{position:relative;min-height:100%;padding:max(20px,2.28vw) max(20px,2.43vw) max(20px,2.28vw) max(20px,2.28vw)}
.panel-contact .panel-inner{padding:max(20px,2.28vw) max(20px,3.07vw) max(48px,5vw)}
.panel-inner a{color:var(--paper)}
.panel-inner a:hover{color:#fff}

.close-wrap{position:absolute;top:max(14px,calc(3.3vw - 22px));right:max(14px,calc(3.43vw - 22px));z-index:2}
.arc-close{appearance:none;background:none;border:0;padding:0;width:max(44px,2.3vw);height:max(44px,2.3vw);display:flex;align-items:center;justify-content:center;color:var(--paper);cursor:pointer;transition:transform .45s var(--ease-out)}
.arc-close svg{width:max(34px,2vw);height:max(34px,2vw);display:block}
.arc-close:hover{transform:rotate(90deg)}
.arc-close:focus-visible{outline:1px solid var(--paper);outline-offset:4px;border-radius:50%}

.panel-title{margin:0;font-family:var(--display);font-weight:130;line-height:.765;letter-spacing:0;color:var(--paper);text-transform:uppercase}
.panel-title .line{display:block;overflow:hidden;padding-bottom:.04em}
.panel-title .rise{display:block}
.arc-panel:not([hidden]) .rise{animation:p-rise .9s var(--ease-out) both}
.arc-panel:not([hidden]) .ab-fade{animation:p-fade 1.1s var(--ease-out) both}
@keyframes p-rise{from{opacity:0;transform:translateY(40%)}to{opacity:1;transform:none}}
@keyframes p-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* About */
.ab-wrap{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:14.2vw;row-gap:40px}
.ab-img{position:relative;flex:0 0 39.8vw;height:calc(100vh - 2 * max(20px,2.28vw));height:calc(100svh - 2 * max(20px,2.28vw));min-height:420px;overflow:hidden;background:var(--about-bg)}
.arc-panel:not([hidden]) .ab-img-in{animation:p-img-in 2s cubic-bezier(.4,0,.2,1) .1s both}
@keyframes p-img-in{from{opacity:0}to{opacity:1}}
.ab-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 2s cubic-bezier(.45,0,.25,1)}
.ab-photo.is-active{opacity:1}
.ab-copy{flex:1 1 360px;min-width:0;padding-top:max(8px,4.75vw);padding-right:max(0px,4vw)}
.ab-title{font-size:max(48px,6.3vw);white-space:nowrap}
.ab-body{margin-top:max(28px,3.2vw);max-width:34em;font-size:max(14px,1.042vw);line-height:1.1}
.ab-body p{margin:0 0 1.1em}
.ab-body p:last-child{margin:0}

/* Contact */
.ct-wrap{display:flex;flex-wrap:wrap;align-items:stretch;column-gap:6vw;row-gap:48px;padding-top:max(56px,7vw)}
.ct-head{flex:0 0 48vw;min-width:0;display:flex;flex-direction:column}
.ct-title{font-size:max(48px,6.3vw);white-space:nowrap}
.ct-intro{margin-top:auto;padding-top:max(28px,3.4vw);max-width:26em;font-size:max(15px,1.042vw);line-height:1.3}
.ct-intro p{margin:0}
.ct-mail{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;font-size:max(15px,1.042vw)}
.ct-label{display:block;margin-bottom:.9em;font-size:.7em;letter-spacing:.04em;text-transform:uppercase;color:#c9d6c5}
.ct-mail-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:12px}
.ct-addr{font-size:max(20px,1.6vw);line-height:1.3;letter-spacing:.01em;white-space:nowrap}
.ct-addr:focus-visible{outline:none}
.ct-copy{position:relative;appearance:none;background:none;margin:0;display:inline-flex;align-items:center;gap:.5em;height:22px;padding:0 10px 0 9px;border:1px solid rgba(239,239,239,.3);border-radius:999px;color:rgba(239,239,239,.85);font:inherit;font-size:10px;line-height:1;letter-spacing:.08em;cursor:pointer;transition:border-color .3s,color .3s}
.ct-copy::after{content:"";position:absolute;inset:-11px -6px}
.ct-copy svg{width:10px;height:10px;display:block}
.ct-copy:hover{border-color:rgba(239,239,239,.75);color:#fff}
.ct-copy:focus-visible{outline:1px solid var(--paper);outline-offset:3px}
.ct-copy.is-copied{border-color:var(--accent);color:var(--accent)}

@media (max-width:760px){
  .ab-img{flex-basis:100%;height:auto;min-height:0;aspect-ratio:1/1}
  .panel-about .panel-inner{padding-bottom:48px}
  .ab-wrap{row-gap:32px}
  .ct-head{flex-basis:100%}
  .ct-addr{font-size:min(20px,4.6vw)}
}

@media (prefers-reduced-motion:reduce){
  .arc-l,.arc-g,.arc-panel,.arc-panel .rise,.arc-panel .ab-fade,.arc-panel .ab-img-in{animation:none!important}
  .arc-u,.arc-close,.ct-copy,.ab-photo{transition:none}
}