/* ═══════════════════════════════════════════════════════════
   Arctic Hare Studio — landing
   Ported from "Arctic Hare Studio.dc.html" (Claude Design).
   No dependencies: HTML + CSS + a single JS file.
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#0A0A0B;
  --snow:#F7F8FA;
  /* the design's accent; picker alternatives: #8FB4C9 · #7FA8B8 · #A7B8C9 */
  --frost:#8FC9B4;
  --muted:#6C7278;
  --muted-dark:#9AA2AB;
  --line:rgba(10,10,11,0.10);
  --line-dark:rgba(247,248,250,0.12);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--snow);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--ink);text-decoration:none;}
a:hover{color:var(--frost);}
img{max-width:100%;}
::selection{background:var(--frost);color:var(--ink);}
:focus-visible{outline:2px solid var(--frost);outline-offset:3px;border-radius:2px;}

.root{width:100%;overflow-x:hidden;}

/* screen readers only */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── keyframes ─────────────────────────────────────────── */
@keyframes scrollPulse{
  0%{transform:translateY(0);opacity:.15;}
  50%{opacity:.9;}
  100%{transform:translateY(18px);opacity:.15;}
}
@keyframes auroraA{
  0%,100%{transform:translate(-8%,8%) scale(1);}
  50%{transform:translate(16%,-6%) scale(1.28);}
}
@keyframes auroraB{
  0%,100%{transform:translate(10%,-4%) scale(1.12);}
  50%{transform:translate(-16%,10%) scale(0.9);}
}
@keyframes footerLine{
  0%{background-position:0% 0;}
  100%{background-position:200% 0;}
}

/* ═══ HERO ═════════════════════════════════════════════════ */
.hero{
  position:relative;
  height:100vh;
  height:100svh;          /* avoids the jump from the mobile browser bar */
  min-height:560px;
  background:var(--ink);
  color:var(--snow);
  overflow:hidden;
}

.hero__ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.blob{position:absolute;display:block;}
.blob--a{
  top:-30%;left:-18%;width:78%;height:105%;
  background:radial-gradient(closest-side,rgba(143,180,201,0.40),transparent 72%);
  filter:blur(34px);animation:auroraA 19s ease-in-out infinite;
}
.blob--b{
  bottom:-34%;right:-14%;width:74%;height:108%;
  background:radial-gradient(closest-side,rgba(108,146,184,0.34),transparent 72%);
  filter:blur(40px);animation:auroraB 24s ease-in-out infinite;
}
.blob--c{
  top:12%;left:26%;width:60%;height:80%;
  background:radial-gradient(closest-side,rgba(126,120,170,0.26),transparent 74%);
  filter:blur(46px);animation:auroraA 30s ease-in-out infinite reverse;
}

.hero__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}

.hero__center{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 24px;
  pointer-events:none;                 /* the hero lets the mouse through to the canvas… */
}
/* this is the page's <h1>: the logo IS the title, with the accessible
   text inside as .sr-only. Hence the margin and font-size reset */
.hero__logo{
  display:block;
  font-size:inherit;font-weight:inherit;
  width:clamp(320px,65vw,800px);
  max-width:100%;              /* below 368px the minimum doesn't fit */
  margin:0 0 30px;
  color:var(--snow);
  opacity:.9;
  transition:filter .55s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1),
             opacity .55s ease;
  will-change:filter,transform;
  pointer-events:auto;                 /* …except the logo, which does listen */
  transform-origin:center;
}
.hero__logo svg{display:block;width:100%;height:auto;overflow:visible;}
.hero__logo [data-star]{transition:filter .3s ease;}

.hero__intro{
  position:absolute;
  left:clamp(20px,5vw,64px);
  bottom:clamp(30px,6vh,52px);
  z-index:3;
  max-width:min(38ch,66vw);
  pointer-events:none;
  text-align:left;
}
.hero__tagline{
  margin:0;
  font-family:'Lora',Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:clamp(13px,1.4vw,16px);
  line-height:1.4;
  color:var(--snow);
}
.hero__blurb{
  margin:10px 0 0;
  font-size:clamp(11.5px,1.1vw,13px);
  line-height:1.55;font-weight:450;
  color:rgba(247,248,250,0.8);
  width:min(340px,52vw);
}

.hero__scroll{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--muted-dark);
  font-family:'Space Grotesk',sans-serif;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
}
.hero__scroll-track{
  width:1px;height:40px;
  background:linear-gradient(var(--frost),transparent);
  position:relative;overflow:hidden;
}
.hero__scroll-pulse{
  position:absolute;top:0;left:0;width:1px;height:14px;
  background:var(--frost);
  animation:scrollPulse 1.8s ease-in-out infinite;
}

/* on mobile the bottom-left text used to eat the scroll indicator:
   it takes the full width and sits above it instead */
@media (max-width:900px){
  .hero__intro{
    left:clamp(20px,5vw,64px);
    right:clamp(20px,5vw,64px);
    bottom:106px;
    max-width:none;
  }
  .hero__blurb{width:auto;}
}

/* landscape phones: with the 560px minimum the logo, centered in a hero
   taller than the screen, landed right on top of the bottom text */
@media (orientation:landscape) and (max-height:520px){
  .hero{min-height:420px;}
  .hero__logo{width:clamp(220px,38vw,420px);margin-bottom:14px;}
  .hero__intro{
    left:clamp(16px,4vw,40px);
    right:auto;
    bottom:14px;
    max-width:min(46ch,62vw);
  }
  .hero__blurb{width:min(360px,56vw);}
  .hero__scroll{display:none;}   /* doesn't fit next to the text and the hero is already short */
}

/* ═══ WORK ═════════════════════════════════════════════════ */
.work{
  position:relative;
  background:var(--ink);
  border-top:1px solid rgba(247,248,250,0.10);
  border-bottom:1px solid rgba(247,248,250,0.10);
}
.work__grid{
  display:flex;flex-wrap:wrap;gap:1px;
  min-height:100vh;
  background:rgba(247,248,250,0.16);   /* the background paints the gap lines */
}

.card{
  position:relative;
  flex:1 1 calc(50% - .5px);
  min-width:min(340px,100%);
  min-height:50vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
  color:var(--snow);
  background:var(--ink);
  transition:opacity .7s ease,transform .7s ease;
}
.card:hover{color:var(--snow);}
.card:focus-visible{outline-offset:-4px;}
.card[aria-disabled="true"]{cursor:default;}

.card__media{position:absolute;inset:0;display:block;background-color:#0d0e11;}
.card__media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
/* The design's gradient was `rgba(10,10,11,0) 32% → 0.88 100%`, tied to
   the card height. Over the near-white Gazette and Duo art the text was
   unreadable, and since card height depends on the viewport, legibility
   came and went (2.1:1 on a 768px-tall laptop).
   Now there are two layers: this one gives the art depth, and
   `.card__body::before` — tied to the text block, not the card — is the
   one that guarantees contrast at any screen proportion. */
.card__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,10,11,0)    0%,
    rgba(10,10,11,0.16) 34%,
    rgba(10,10,11,0.52) 68%,
    rgba(10,10,11,0.70) 100%);
}
.card__ov{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,0),rgba(10,10,11,0.45));
  opacity:.5;transition:opacity .4s ease;
}
.card__bar{
  position:absolute;top:0;left:0;height:3px;width:100%;
  background:var(--frost);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}

.card:hover .card__media img,
.card:focus-visible .card__media img{transform:scale(1.06);}
.card:hover .card__ov,
.card:focus-visible .card__ov{opacity:.82;}
.card:hover .card__bar,
.card:focus-visible .card__bar{transform:scaleX(1);}
.card:hover .card__link,
.card:focus-visible .card__link{color:var(--frost);gap:14px;}

.card__body{
  position:relative;
  isolation:isolate;
  padding:clamp(26px,3.2vw,48px);
  display:flex;flex-direction:column;gap:12px;
}
/* the shade that protects the text is sized against the text block
   itself: it grows with it and overshoots 34% above to fade in */
.card__body::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;top:-34%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,10,11,0)    0%,
    rgba(10,10,11,0.40) 32%,
    rgba(10,10,11,0.74) 62%,
    rgba(10,10,11,0.86) 100%);
}
.card__meta,
.card__tag{
  font-family:'Space Grotesk',sans-serif;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;
  /* the "01" sits highest in the block, where the gradient barely starts;
     at 11.5px a halo beats darkening the whole artwork */
  text-shadow:0 0 2px rgba(10,10,11,1),0 0 6px rgba(10,10,11,.95),0 1px 12px rgba(10,10,11,.8);
}
.card__meta{display:flex;align-items:center;justify-content:space-between;}
.card__tag{
  position:absolute;
  right:clamp(26px,3.2vw,48px);
  bottom:clamp(26px,3.2vw,48px);
}
.card__title{
  margin:0;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;letter-spacing:-.025em;line-height:.96;
  font-size:clamp(36px,4.6vw,64px);
  /* wide soft shadow: invisible over Gossip/Billy, holds the title
     over the near-white Gazette and Duo art */
  text-shadow:0 2px 26px rgba(10,10,11,.6);
}
.card__desc{
  margin:0;
  color:#fff;
  font-size:14px;line-height:1.5;
  text-wrap:pretty;
}
.card__desc--gazette{max-width:39ch;}
.card__desc--duo{max-width:38ch;}
.card__desc--clamp7,
.card__desc--clamp4{
  width:min(560px,100%);
  line-height:1.45;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card__desc--clamp7{-webkit-line-clamp:7;}
.card__desc--clamp4{-webkit-line-clamp:4;}

/* the design's clamps are meant for the wide card; in a single column
   they cut the sentence mid-thought ("no receipts, no…") and there is
   plenty of height, so they show in full */
@media (max-width:680px){
  .card__desc--clamp7,
  .card__desc--clamp4{
    display:block;
    -webkit-line-clamp:none;
    overflow:visible;
  }
}

.card__link{
  display:inline-flex;align-items:center;gap:8px;
  align-self:flex-start;      /* the box hugs the text, not the body width */
  margin-top:6px;
  font-family:'Space Grotesk',sans-serif;
  font-size:14px;font-weight:500;
  color:var(--snow);
  transition:color .3s ease,gap .3s ease;
}

/* ═══ CONTACT ══════════════════════════════════════════════ */
.contact{
  position:relative;
  background:var(--ink);
  color:var(--snow);
  padding:clamp(64px,10vw,120px) clamp(24px,10.9vw,157px);
  border-top:1px solid rgba(247,248,250,0.10);
}
.contact__row{
  display:flex;flex-wrap:nowrap;
  align-items:flex-start;justify-content:space-between;
  gap:clamp(2px,0.3vw,6px);
  padding:0 clamp(0px,3.5vw,50px);
  transition:opacity .7s ease,transform .7s ease;
}
.contact__link{
  color:var(--snow);
  display:inline-flex;flex-direction:column;gap:16px;
  min-width:0;
}
.contact__link:hover{color:var(--snow);}
.contact__link--start{align-items:flex-start;text-align:left;}
.contact__link--center{align-items:center;text-align:center;}
.contact__link--end{align-items:flex-end;text-align:right;}

.roll{
  position:relative;display:block;overflow:hidden;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;letter-spacing:-.03em;line-height:.86;
  /* the design asked for 8.4vw; the 132px cap is the same, but the
     gentler slope keeps the row from overflowing between 1100 and 1600 */
  font-size:clamp(30px,7.2vw,132px);
}
.roll__inner{
  display:block;
  transition:transform .55s cubic-bezier(.19,1,.22,1);
  will-change:transform;
}
.roll__face{display:block;white-space:nowrap;}
.roll__ghost{
  display:block;position:absolute;top:100%;left:0;
  white-space:nowrap;
  color:var(--frost);
}
.contact__cap{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(12px,1.3vw,15px);
  letter-spacing:.02em;
  color:var(--muted-dark);
  opacity:0;transform:translateY(8px);
  transition:opacity .45s ease,transform .45s ease,color .45s ease;
}
.contact__link:hover .roll__inner,
.contact__link:focus-visible .roll__inner{transform:translateY(-100%);}
.contact__link:hover .contact__cap,
.contact__link:focus-visible .contact__cap{
  opacity:1;transform:translateY(0);color:var(--frost);
}

/* the four-word row doesn't fit on mid-size screens:
   it becomes a 2x2 grid, then a column */
@media (max-width:1024px){
  .contact__row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(28px,5vw,56px);
    padding:0;
  }
  .roll{font-size:clamp(34px,8vw,88px);}
  .contact__link--center:nth-of-type(2),
  .contact__link--start{align-items:flex-start;text-align:left;}
  .contact__link--center:nth-of-type(3),
  .contact__link--end{align-items:flex-end;text-align:right;}
}
@media (max-width:560px){
  .contact__row{grid-template-columns:1fr;gap:34px;}
  .contact__link{align-items:flex-start!important;text-align:left!important;}
  .roll{font-size:clamp(38px,13vw,72px);}
}
/* without hover there is no way to discover the email or the handles: on
   touch the captions always show, at any width (an 800px tablet fell into
   the 2x2 grid and left them invisible) */
@media (hover:none){
  .contact__cap{opacity:1;transform:none;}
}

/* ═══ FOOTER ═══════════════════════════════════════════════ */
.footer{
  position:relative;overflow:hidden;
  background:#060607;
  color:var(--muted-dark);
  border-top:1px solid var(--line-dark);
  padding:26px clamp(20px,5vw,64px);
}
.footer__line{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--frost),transparent);
  background-size:200% 100%;
  opacity:.7;
  animation:footerLine 6s linear infinite;
  pointer-events:none;
}
.footer__glow{
  position:absolute;display:block;
  background:radial-gradient(closest-side,var(--frost),transparent 72%);
  pointer-events:none;
}
.footer__glow--l{
  top:-60%;left:-8%;width:52%;height:220%;
  opacity:.30;filter:blur(46px);
  animation:auroraA 15s ease-in-out infinite;
}
.footer__glow--r{
  top:-70%;right:-6%;width:46%;height:220%;
  opacity:.20;filter:blur(52px);
  animation:auroraB 19s ease-in-out infinite;
}
.footer__inner{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px 32px;flex-wrap:wrap;
  text-align:left;
}
.footer__meta{display:flex;flex-direction:column;gap:5px;}
.footer__inner span{font-size:12.5px;letter-spacing:.05em;color:var(--muted-dark);}
/* the legal lines, one step behind the copyright.
   .footer__inner in front to beat the generic rule above */
.footer__inner .footer__legal{font-size:11px;opacity:.72;}
/* the /legal/ button: same language as the hero scroll indicator */
.footer__link{
  display:inline-flex;align-items:center;
  padding:8px 2px;                     /* touch target ≥24px */
  font-family:'Space Grotesk',sans-serif;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted-dark);
}
.footer__link:hover{color:var(--frost);}
@media (max-width:560px){
  .footer__inner{flex-direction:column;align-items:center;text-align:center;}
}

/* ═══ MOTION OFF ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}