/* ==========================================================================
   Misideal — about page (lives inside the .win window frame, same frame
   and cursor-reactive colour-gradient background as the homepage, but a
   single always-on loop instead of a carousel, and real scrollable
   content instead of carousel controls)
   ========================================================================== */

@property --g1{syntax:'<color>';inherits:true;initial-value:#141414;}
@property --g2{syntax:'<color>';inherits:true;initial-value:#141414;}
@property --g3{syntax:'<color>';inherits:true;initial-value:#141414;}

/* Live values set by about.js (documentElement.style.setProperty). Declared
   on :root only — see home.css for why body can't hold these directly. */
:root{
  --gx:50%; --gy:50%;
  --g1:#3a3530; --g2:#2a3336; --g3:#33282c;
}

body{
  background:
    radial-gradient(85vmax 85vmax at var(--gx) var(--gy), var(--g1) 0%, transparent 60%),
    radial-gradient(65vmax 65vmax at calc(var(--gx) + 16vw) calc(var(--gy) - 12vh), var(--g2) 0%, transparent 58%),
    radial-gradient(75vmax 75vmax at calc(var(--gx) - 14vw) calc(var(--gy) + 14vh), var(--g3) 0%, transparent 58%),
    #141414;
  background-blend-mode:screen;
  transition:--g1 1.1s ease,--g2 1.1s ease,--g3 1.1s ease;
}

.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");}

/* the loop sits fixed behind the scrollable content — it never scrolls
   with the page, it's a constant backdrop like the homepage's stage */
.bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.about-wrap{
  min-height:100%;
  display:flex;flex-direction:column;
  padding:150px 60px 0;
}

/* title/subtitle/contact float in the free space above the team row,
   centred as a group rather than pinned to the very top. The block itself
   sits centred on the page (margin:auto) while the text inside it stays
   left-aligned — the container is centred, not the copy. */
.about-copy{
  flex:1 0 auto;
  display:flex;flex-direction:column;justify-content:center;
  width:100%;max-width:1200px;
  margin:0 auto;
  padding:50px 0;
}
.about-copy .ttl{font-family:var(--sans);font-weight:700;
  text-transform:uppercase;
  font-size:clamp(24px,3.6vw,44px);letter-spacing:-.02em;line-height:1.14;
  text-shadow:0 2px 40px rgba(0,0,0,.55);}
/* same width as the title — no separate narrower cap, both wrap at the
   same right edge since neither has its own max-width beyond .about-copy */
.about-copy .sub{font-family:var(--mono);font-weight:400;font-size:15px;line-height:1.75;
  color:rgba(240,238,233,.85);margin-top:24px;
  text-shadow:0 2px 30px rgba(0,0,0,.5);}

.contact-row{width:100%;margin-top:38px;}
/* plain, inert, selectable text — no click-to-copy, no link/button
   affordance of any kind, just there to be read and copied by hand. Pill
   styling borrowed from .site-nav so it reads as the same visual language.
   The box now spans the same width as the title/subtitle above it — the
   text itself stays the same size, the extra width is just more
   left/right breathing room (padding), not a bigger font. */
.about-copy .contact{font-family:var(--sans);font-weight:700;
  text-transform:uppercase;text-align:center;
  font-size:clamp(18px,2.2vw,26px);letter-spacing:-.01em;line-height:1.3;
  width:100%;
  padding:22px 60px;border-radius:999px;
  background:rgba(255,255,255,.07);backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16);
  text-shadow:none;}

/* full-bleed to the actual window edge — breaks out of .about-wrap's own
   side padding with matching negative margins at each breakpoint, unlike
   the copy/team blocks which stay capped at 1200px and padded in */
.divider{height:1px;background:rgba(255,255,255,.16);
  margin:36px -60px;width:calc(100% + 120px);}

/* team row — sits underneath the divider, sharing the copy's width and
   centring so both blocks line up */
.team{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  width:100%;max-width:1200px;
  margin:0 auto;
  padding:0 0 90px;
}
.team .role{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);}
.team .name{font-family:var(--sans);font-weight:700;
  text-transform:uppercase;
  font-size:clamp(16px,1.8vw,22px);letter-spacing:-.015em;margin-top:8px;}
.team .mail{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;
  margin-top:8px;opacity:.82;width:fit-content;}

@media(max-width:820px){
  .about-wrap{padding:130px 26px 0;}
  .divider{margin:36px -26px;width:calc(100% + 52px);}
  .team{grid-template-columns:1fr;gap:26px;padding-bottom:70px;}
}
@media(max-width:480px){
  .about-wrap{padding:110px 20px 0;}
  .divider{margin:36px -20px;width:calc(100% + 40px);}
  /* "hello@misideal.com" has no space to wrap at, so on a narrow phone
     it can sit right at (or past) the pill's edge with zero room to
     spare. Force it onto its own line and free up some padding so
     there's real breathing room either side, instead of an exact fit. */
  .about-copy .contact{padding:18px 28px;}
  .about-copy .contact .addr-line{display:block;margin-top:4px;}
}