/* The master frame supplies two opposite 45-degree cuts; the O supplies one. */
:root{--form-cut-tr:clamp(32px,6vw,100px);--form-cut-bl:clamp(22px,3.6vw,60px);--form-stroke:clamp(4px,.45vw,7px);--form-silhouette:polygon(0 0,calc(100% - var(--form-cut-tr)) 0,100% var(--form-cut-tr),100% 100%,var(--form-cut-bl) 100%,0 calc(100% - var(--form-cut-bl)))}

.home .site-header{height:auto;min-height:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0 var(--gap);padding-bottom:clamp(38px,4vw,76px)}
.home .site-header>.logo{grid-column:1/span 2;grid-row:1;align-self:start}
.home .site-header>.header-links{grid-column:5/-1;grid-row:1;justify-self:end;align-self:start}
.hero-form{position:relative;isolation:isolate;grid-column:1/-1;margin-top:clamp(44px,4.5vw,84px);padding:clamp(32px,4.4vw,80px) clamp(30px,4.6vw,84px);--form-inner-tr:calc(var(--form-cut-tr) - var(--form-stroke) * .585786);--form-inner-bl:calc(var(--form-cut-bl) - var(--form-stroke) * .585786)}
.hero-form::before,.hero-form::after{content:"";position:absolute;pointer-events:none;z-index:-1}
.hero-form::before{inset:0;background:var(--red);clip-path:var(--form-silhouette)}
/* The diagonal inset is measured perpendicular to the 45-degree edge. */
.hero-form::after{inset:var(--form-stroke);background:#fff;clip-path:polygon(0 0,calc(100% - var(--form-inner-tr)) 0,100% var(--form-inner-tr),100% 100%,var(--form-inner-bl) 100%,0 calc(100% - var(--form-inner-bl)))}
.hero-eyebrow{color:var(--muted);font-size:clamp(10px,.83vw,14px);letter-spacing:.06em}
.hero-form h1{font-size:clamp(42px,8.8vw,164px);font-weight:700;line-height:.96;letter-spacing:-.055em;word-spacing:.07em;text-transform:uppercase;margin:clamp(24px,2.7vw,50px) 0 clamp(28px,3.3vw,60px)}
.hero-form h1>span{display:block;white-space:nowrap}
.hero-mobile-break{display:none}
.hero-form h1>span+span{font-size:1em;margin-top:.12em}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero-foot p{max-width:60ch;font-size:clamp(14px,1.3vw,20px);line-height:1.5;letter-spacing:-.01em}
.hero-form .hero-down{position:static;align-self:flex-end;margin-right:-7px;margin-bottom:-8px;flex:none}

.feed-end .all-work-link{border-top:4px solid var(--ink);padding-top:20px}
.footer-invitation{position:relative;isolation:isolate;padding:clamp(32px,4.4vw,80px) clamp(30px,4.6vw,84px);margin-bottom:clamp(44px,6vw,112px)}
.footer-invitation::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red);clip-path:var(--form-silhouette);pointer-events:none}
.footer-invitation>.eyebrow{color:#fff;max-width:70%;font-size:clamp(10px,.83vw,14px)}
.site-footer .footer-invitation .footer-cta{color:#fff;font-size:clamp(44px,8.6vw,160px);font-weight:500;line-height:1.1;gap:24px;margin-top:clamp(24px,3vw,56px)}
.footer-invitation .footer-cta>.brand-arrow{width:.7em;height:.7em}
.footer-cta:focus-visible{outline-offset:8px}

.studio-mark{clip-path:polygon(0 0,calc(100% - var(--form-cut-tr)) 0,100% var(--form-cut-tr),100% 100%,0 100%)}
.load-more{position:relative;isolation:isolate;border:0;padding:16px 28px;color:#fff;background:transparent;font-weight:500}
.load-more::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);transition:background .2s}
.load-more:hover{background:transparent;color:#fff}
.load-more:hover::before{background:var(--red)}

@media(max-width:600px){
  :root{--form-cut-tr:32px;--form-cut-bl:22px;--form-stroke:4px}
  .home .site-header{padding-bottom:36px}
  .home .site-header>.header-links{grid-column:3/-1}
  .hero-form{margin-top:40px;padding:28px 24px 30px}
  .hero-form h1{font-size:clamp(36px,10.7vw,64px);margin:25px 0 30px;letter-spacing:-.055em}
  .hero-form h1>span{white-space:normal}
  .hero-mobile-break{display:block}
  .hero-eyebrow{font-size:10px;letter-spacing:.06em}
  .hero-foot{gap:16px}
  .hero-foot p{font-size:14px}
  .hero-form .hero-down{width:38px;height:38px;margin-right:-7px;margin-bottom:-7px}
  .hero-form .hero-down .brand-arrow{width:26px;height:26px}
  .footer-invitation{padding:30px 24px 36px;margin-bottom:38px}
  .footer-invitation>.eyebrow{font-size:10px;max-width:86%}
  .site-footer .footer-invitation .footer-cta{font-size:10.7vw;gap:10px;margin-top:30px}
  .footer-invitation .footer-cta>.brand-arrow{width:.6em;height:.6em}
}
@media(prefers-reduced-motion:reduce){.load-more::before{transition:none}}
