/* Honors layout based on gabrielbeaugonin.com; Inter is the available local substitute. */
@font-face{font-family:"Inter";src:url("/fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"tiktok";src:url("/fonts/TikTokSans.ttf") format("truetype");font-weight:100 900;font-display:swap;}
@font-face{font-family:"tronica-mono";src:url("/fonts/DepartureMono-Regular.otf") format("opentype");font-weight:400;font-display:swap;}

.honors-page{
  --font-replica:"Inter",'Helvetica Neue','PingFang SC',sans-serif;
  --font-mono-2:"tronica-mono",monospace;
  --ink:#1A1A1A;          /* reference "light-black" */
  --ink-soft:#9F9F9F;     /* reference secondary text */
  margin:0;
  background:#FBFAF4;     /* homepage background-1 */
  color:var(--ink);
  font-family:var(--font-replica);
}

/* unlock page scroll — the mirrored Next bundle locks html,body to height:100%;overflow:hidden */
html{height:auto!important;overflow:visible!important;}
body.honors-page{min-height:100vh!important;height:auto!important;overflow:visible!important;overflow-y:auto!important;scrollbar-width:thin;}

/* Same header proportions and navigation treatment as the homepage. */
.shell-header{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--font-mono-2);font-size:16px;color:#000;pointer-events:none;}
.shell-header__top,.shell-header__bottom{display:flex;justify-content:space-between;align-items:center;padding:28px 56px;}
.shell-header a{pointer-events:auto;color:inherit;text-decoration:none;padding:8px;text-transform:uppercase;}
.shell-header a:focus-visible{outline:2px dotted currentColor;outline-offset:2px;}
.shell-brand,.shell-nav a{position:relative;}
.shell-brand::before,.shell-nav a::before{content:"";position:absolute;inset:0;border:2px dotted transparent;pointer-events:none;transition:border-color .2s;}
.shell-brand{font-family:"tiktok",'Helvetica Neue','PingFang SC',sans-serif;font-weight:700;font-variation-settings:"wght" 700,"wdth" 120;}
.shell-nav{display:flex;flex:0 0 50%;flex-wrap:wrap;justify-content:space-between;align-items:center;column-gap:12px;row-gap:8px;pointer-events:auto;}
.shell-nav a{font-family:var(--font-mono-2);font-size:16px;line-height:24px;}
.shell-header__bottom{font-size:16px;text-transform:uppercase;}
.shell-clock{padding:8px;font-style:normal;}
@media (hover:hover) and (min-width:1024px){
  .shell-brand:hover::before,.shell-nav a:hover::before{border-color:currentColor;}
}
@media (min-width:1280px){.shell-nav{flex-basis:33.333333%;}}
@media (max-width:1023px){
  .shell-header__top,.shell-header__bottom{padding:16px;}
  .shell-nav{display:none;}
}

/* ============ desktop stage (≥1024px) — 1:1 replica ============ */
.honors-stage{position:relative;height:100vh;height:100dvh;overflow:hidden;}
.honors-grid{position:fixed;inset:0;z-index:0;width:100%;height:100vh;height:100dvh;pointer-events:none;}
.honors-grid svg{display:block;width:100%;height:100%;shape-rendering:crispEdges;}

/* Reference layout uses a 10px root at 1440px and scales with viewport width. */
.honors-intro{
  position:absolute;z-index:1;left:17.85vw;top:50%;transform:translateY(calc(-50% - 18px));
  user-select:none;
}
.honors-title{
  margin:0;
  font-family:var(--font-replica);
  font-size:clamp(26px,2.222vw,38px);font-weight:400;line-height:1;
  letter-spacing:0;
  color:var(--ink);
}
.honors-sub{
  margin:8px 0 0;
  font-size:clamp(26px,2.222vw,38px);font-weight:400;line-height:1;
  color:var(--ink-soft);
}
/* counter sits below the text group (where the reference has its social buttons) */
.honors-counter{
  margin:52px 0 0;
  font-family:var(--font-mono-2);font-size:13px;letter-spacing:.12em;
  color:var(--ink-soft);
}

/* The reference stack sits in its own 1500px perspective space. */
.honors-deck{
  position:absolute;z-index:1;top:0;bottom:0;right:17.85vw;
  width:clamp(280px,23.264vw,380px);
  perspective:1500px;transform-style:preserve-3d;pointer-events:none;
}
.honors-card{
  position:absolute;top:50%;left:0;
  width:100%;height:clamp(287px,23.889vw,390px);
  margin-top:clamp(-195px,-11.9445vw,-143.5px);
  transform-origin:center;
  transition:transform .68s cubic-bezier(.22,1,.36,1),opacity .68s cubic-bezier(.22,1,.36,1);
  will-change:transform,opacity;
}
.honors-deck:not(.is-ready) .honors-card,.honors-card.no-transition{transition:none;}
.honors-card__float{
  position:absolute;inset:0;background:#EAEAEA;border-radius:32px;overflow:hidden;
  transform:translate3d(var(--hover-x,0px),var(--hover-y,0px),0);
  transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.honors-card__face{
  position:absolute;inset:0;background:var(--card-bg,#EAEAEA);
  opacity:0;transition:opacity .68s cubic-bezier(.22,1,.36,1);
}
.honors-card.is-active .honors-card__face{opacity:1;transition-delay:.14s;}
.honors-card__media{
  position:absolute;inset:24px 24px 64px;
}
.honors-card__media img{
  display:block;width:100%;height:100%;object-fit:contain;
}
.honors-card__label{
  position:absolute;left:28px;bottom:32px;margin:0;
  font-size:16px;font-weight:400;line-height:16px;
  color:var(--card-ink,#1A1A1A);
}

/* dots — 3x3px, right 81px, vertically centered */
.honors-dots{
  position:absolute;right:5.625vw;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:8px;z-index:20;
}
.honors-dot{
  width:3px;height:3px;border-radius:50%;
  border:0;background:var(--ink);
  opacity:.2;
  padding:0;cursor:pointer;
  transition:opacity .3s;
}
.honors-dot:hover{opacity:.5;}
.honors-dot.is-active{opacity:1;}
.honors-dot:focus-visible{outline:2px solid var(--selection-bg);outline-offset:2px;}

/* ============ mobile (<1024px): vertical card flow (approved earlier) ============ */
@media (max-width:1023px){
  .honors-stage{height:auto;overflow:visible;padding:6.5rem 1.25rem 4rem;}
  .honors-intro{position:relative;left:auto;top:auto;transform:none;margin-bottom:2.5rem;}
  .honors-counter{display:none;}
  .honors-deck{position:static;width:auto;perspective:none;pointer-events:auto;display:flex;flex-direction:column;gap:2rem;}
  .honors-card{
    position:relative;top:auto;right:auto;
    width:min(100%,335px);height:auto;aspect-ratio:335/344;margin:0 auto;
    transition:none;
  }
  .honors-card__float{transform:none;transition:none;}
  .honors-card__face{opacity:1;transition:none;}
  .honors-dots{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .honors-card,.honors-card__float,.honors-card__face,.honors-dot{transition:none!important;}
}