/* =========================================================
   Bruce DeFonce — Ideas Made Visible
   Single consolidated stylesheet.
   Sections: tokens · base · topbar · hero · stage · work ·
             device viewer · logo design · footer · responsive
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --bg:#0d0d0f;
  --ink:#f6f3ee;
  --muted:#9a9a9f;
  --line:#2a2a2f;

  --pink:#ff8fac;
  --acid:#c8ff3d;
  --blue:#3157ff;
  --orange:#ff745c;

  --font:Arial, Helvetica, sans-serif;
  --font-display:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --font-serif:Georgia, "Times New Roman", serif;

  --ease:cubic-bezier(.2,.75,.2,1);

  /* Chapter-title rhythm: one gap, used above AND below the lettering, for both chapters */
  --title-gap:7vh;

}

/* ---------- Base ---------- */
*{box-sizing:border-box}
[hidden]{display:none !important}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
html{scroll-behavior:smooth; scroll-padding-top:64px}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}

/* ---------- Top bar ---------- */
.topbar{
  position:fixed; inset:0 0 auto 0; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; z-index:50;
  background:rgba(13,13,15,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); color:#fff;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
}
.topbar__nav{display:flex; gap:26px}

/* ---------- Hero ---------- */
.hero{height:100vh; height:100svh; position:relative; padding-top:64px; box-sizing:border-box; background:#000}   /* reel sits below the header; svh = visible height on iOS */
.hero__sticky{
  position:relative; height:100%;
  overflow:hidden; background:#000;
}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; background:#000; display:block; z-index:0;   /* whole frame always visible; black bars vanish on black */
}
.hero__video--portrait{object-fit:cover}   /* the 9:16 cut fills a phone screen edge to edge */
.hero__note{
  position:absolute; bottom:28px; left:28px; z-index:6;
  display:flex; align-items:center; gap:12px;
  font-size:13px; color:#bbb; letter-spacing:.06em; text-transform:uppercase;
}
.hero__note::before{                /* scroll cue: a small line that keeps ticking down */
  content:""; width:1px; height:34px; background:linear-gradient(#fff, transparent);
  animation:cue 1.6s ease-in-out infinite;
}
@keyframes cue{ 0%{transform:translateY(-8px); opacity:0} 40%{opacity:1} 100%{transform:translateY(10px); opacity:0} }

/* ---------- Discipline titles (hand-lettered artwork) ---------- */
.stage-track{position:relative; z-index:20; margin-bottom:calc(-1 * (var(--header, 64px) + 1vh))}   /* cancels the pin's header padding so the gap below the first title = --title-gap */
.stage{position:relative; overflow:visible}
.stage__inner{position:relative}
/* hand-lettered title variant: keyed artwork with the same fade-and-settle reveal as the tiles */
.stage--art{position:relative; top:auto; padding:var(--title-gap) 2vw var(--title-gap)}
.stage--art .stage__inner{padding-top:0}
.stage__art{
  display:block; width:min(980px, 70vw); height:auto; margin:0 auto;
  opacity:0; transform:translateY(34px) scale(.96) rotate(-1.2deg);
  transition:opacity .9s var(--ease), transform 1.1s var(--ease);
}
.stage.is-in .stage__art{opacity:1; transform:none}

/* ---------- Work / projects ---------- */
.work{padding:0 2vw 0; background:var(--bg)}

/* Each project is a tall scroll track. The card pins inside it (sticky) and the
   website scrolls in lockstep with the page while pinned — no wheel hijacking. */
.project{
  position:relative;
  min-height:calc(100vh + var(--travel, 160vh) + var(--stage-h, 0px));   /* --stage-h: words track on project 01 */
  min-height:calc(100svh + var(--travel, 160vh) + var(--stage-h, 0px));
  --header:64px;
}
.project__pin{
  position:sticky; top:0; height:100vh; height:100svh; z-index:1;
  display:flex; flex-direction:column; gap:2.5vh;
  padding:calc(var(--header) + 1vh) 1vw 4vh;
}

.project__topline{
  display:grid; grid-template-columns:1fr minmax(180px,300px);   /* logo flush with the card's left edge, note with its right */
  align-items:end; gap:30px; flex:none;
  width:min(100%, 120vh); align-self:center;   /* tracks the card's width */
  opacity:0; transform:translateY(36px);
  transition:opacity .5s ease, transform .7s var(--ease);
}
.project.is-revealed .project__topline{opacity:1; transform:none}
.project__no{display:none}
.project__kicker{font-size:13px; letter-spacing:.11em; text-transform:uppercase; color:#85858c; margin-bottom:10px}
.project__kicker b, .logos__kicker b{font-weight:400; color:#666; margin-right:.9em}
.project__title{
  margin:0; font-size:clamp(44px,5.6vw,92px);
  line-height:.78; letter-spacing:-.065em; text-transform:uppercase;
}
.project--serif .project__title{
  font-family:var(--font-serif); font-weight:400;
  letter-spacing:-.055em; text-transform:none; line-height:.82;
}
/* Wordmark titles (data.logo in projects.js) */
.project__logo{
  display:inline-flex; align-items:center; gap:.18em;
  font-family:-apple-system, "SF Pro Display", Inter, "Helvetica Neue", Arial, sans-serif;
  font-weight:800; letter-spacing:-.035em; line-height:1;
  font-size:clamp(44px,5.6vw,92px); text-transform:none; color:#fff;
}
.project__logo img{height:1.05em; width:auto; display:block; margin:0 .04em}

/* Stacked lockup: serif monogram + two spaced sans lines (MMG) */
.project__logo--stack{gap:.22em; align-items:center}
.logo__mono{
  font-family:Didot, "Bodoni 72", "Bodoni MT", "Playfair Display", Georgia, serif;
  font-weight:400; font-size:1.55em; line-height:.8; letter-spacing:-.04em;
}
.logo__lines{display:flex; flex-direction:column; gap:.14em; font-size:.42em; line-height:1}
.logo__lines span{font-weight:500; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap}
.logo__lines span + span{font-weight:300; letter-spacing:.3em}
.project__note{justify-self:end; text-align:right; color:#94949a; font-size:13px; line-height:1.55}

/* ---------- Device stage (desktop + phone viewer) ---------- */
.device-stage{
  position:relative; flex:1; min-height:0;
  /* keep a fixed proportion: height comes from the space left under the title,
     width follows from it, so the browser frame never stretches into a letterbox */
  aspect-ratio:16/9.6; width:auto; max-width:100%; align-self:center;
  border-radius:34px; overflow:hidden; isolation:isolate;
  background:#000; border:1px solid #29292e;
  box-shadow:0 50px 130px rgba(0,0,0,.45);
  /* reveal start state (driven by JS) */
  opacity:0; transform:translateY(140px) scale(.78);
  clip-path:inset(42% 42% 42% 42% round 34px);
  filter:blur(18px);
  transition:opacity .45s ease, filter .7s ease;
  will-change:transform,opacity,clip-path,filter;
}
.project.is-revealed .device-stage{opacity:1; filter:blur(0)}

/* colour field that blooms up behind the devices */
.device-stage::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--field,#fff);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .85s var(--ease);
}
.project.is-revealed .device-stage::before{transform:scaleY(1)}

.device-stage__glow{position:absolute; inset:-25%; z-index:-2; filter:blur(70px); opacity:.38}
.device-stage__glow--review{
  background:
    radial-gradient(circle at 32% 42%, rgba(255,69,81,.7), transparent 27%),
    radial-gradient(circle at 68% 50%, rgba(255,128,76,.45), transparent 29%);
}
.device-stage__glow--mmg{
  background:
    radial-gradient(circle at 40% 38%, rgba(238,231,216,.26), transparent 29%),
    radial-gradient(circle at 72% 62%, rgba(255,255,255,.08), transparent 23%);
}
.device-stage__hint{
  position:absolute; left:5%; top:4%; z-index:8;
  color:rgba(0,0,0,.45); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}

/* elements that fade in with the reveal */
.device-stage__hint, .viewer-ui, .scroll-meter, .traffic, .browser-bar__url, .phone__notch{
  opacity:0; transition:opacity .55s ease;
}
.project.is-revealed :is(.device-stage__hint, .viewer-ui, .scroll-meter, .traffic, .browser-bar__url, .phone__notch){opacity:1}

/* desktop frame */
.desktop{
  position:absolute; left:5%; top:8%; width:77%; height:74%; z-index:3;
  background:#0a0a0b; border-radius:18px; overflow:hidden;
  box-shadow:0 0 0 3px #0a0a0b, 0 34px 80px rgba(0,0,0,.45);   /* solid black rim: edges read as bezel, not a light hairline */
  will-change:transform; backface-visibility:hidden;
}
.browser-bar{
  height:38px; display:flex; align-items:center; gap:7px; padding:0 13px;
  background:#171719; color:#aaa; border-bottom:1px solid #27272a;
  transition:background .5s ease, color .5s ease;
}
.browser-bar--light{background:#efefef; color:#555; border-color:#dadada}
.traffic{width:8px; height:8px; border-radius:50%; display:block}
.traffic--r{background:#ff605c}.traffic--y{background:#ffbd44}.traffic--g{background:#00ca4e}
.browser-bar__url{margin:auto; transform:translateX(-22px); font-size:11px; letter-spacing:.02em; opacity:.75}
.viewport{position:relative; overflow:hidden; background:#0a0a0b}
.viewport--desktop{height:calc(100% - 38px)}
.page{
  position:absolute; left:-1px; top:0; width:calc(100% + 2px); height:auto;   /* 1px overscan hides sub-pixel edges */
  will-change:transform,opacity; transform:translate3d(0,0,0);
  opacity:0; filter:brightness(0);
  transition:opacity .5s ease .12s, filter 1.05s var(--ease) .12s;
  backface-visibility:hidden;
}
.project.is-revealed .page{opacity:1; filter:brightness(1)}
.page.is-switching{opacity:0 !important; transition:opacity .18s ease !important}

/* phone frame */
.phone{
  position:absolute; right:4.6%; top:10.5%; z-index:5;
  width:clamp(180px, 15.7vw, 245px); aspect-ratio:9/19.5;
  border-radius:19% / 8.8%; padding:3%;                     /* proportional, so the phone keeps its shape at any size */
  background:linear-gradient(145deg,#2b2b2f,#0b0b0d 58%,#2a2a2d);
  box-shadow:
    0 35px 80px rgba(0,0,0,.58),
    inset 0 0 0 2px rgba(0,0,0,.55);
  transform:rotate(4.5deg);
  will-change:transform;
}
.phone::after{                     /* side buttons */
  content:""; position:absolute; right:-3px; top:29%; width:3px; height:14%;
  border-radius:0 3px 3px 0; background:#4a4a4e; box-shadow:0 34px 0 #4a4a4e; opacity:.8;
}
.phone__notch{
  position:absolute; z-index:9; top:6.5%; left:50%; transform:translateX(-50%);
  width:34%; height:3.6%; border-radius:999px; background:#050506;
}
.viewport--phone{
  position:absolute; left:3.8%; right:3.8%; top:1.754%; bottom:1.754%;   /* equal bezel all round: vertical % × (9/19.5) */
  border-radius:15% / 7%; overflow:hidden; background:#000;             /* black backing: no white fringe on the tilted clip */
}

/* viewer controls */
.viewer-ui{
  position:absolute; z-index:7; left:5%; right:5%; bottom:4%;
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
}
.viewer-ui__arrow{
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  background:rgba(10,10,11,.78); color:#fff; border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px); font-size:21px; transition:.2s ease;
}
.viewer-ui__arrow:hover{background:#111; transform:scale(1.06)}
.viewer-ui__status{
  min-width:190px; display:flex; align-items:baseline; justify-content:center; gap:7px;
  padding:12px 16px; border-radius:999px;
  background:rgba(10,10,11,.7); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px); font-size:12px; letter-spacing:.08em;
}
.viewer-ui__name{margin-left:6px; font-weight:500; text-transform:uppercase; color:#bbb}
.scroll-meter{position:absolute; left:5%; bottom:6%; width:33%; height:2px; background:rgba(0,0,0,.15); z-index:7}
.scroll-meter span{display:block; height:100%; width:0; background:#111; transition:width .08s linear}

/* ---------- Logo Design ---------- */
.logos{padding:0 2vw 10vw; background:var(--bg)}
.stage--inline{padding:var(--title-gap) 2vw var(--title-gap)}
.logos__head{
  display:flex; justify-content:space-between; align-items:end; gap:20px;
}
.logos__head{
  padding:0 1vw 22px; margin-bottom:24px; border-bottom:1px solid var(--line);
  font-size:13px; letter-spacing:.11em; text-transform:uppercase; color:#85858c;
}
.logos__note{text-align:left}
.logos__grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; padding:0 1vw;
}
.logo-tile{
  position:relative; border-radius:22px; overflow:hidden; margin:0;
  grid-column:span var(--span,1);
  aspect-ratio:4/3; background:#fff;
  opacity:0; transform:translateY(40px) scale(.97);
  transition:opacity .8s var(--ease), transform .9s var(--ease);
  transition-delay:var(--stagger,0s);
}
.logo-tile[data-span="2"]{aspect-ratio:8/3}      /* keeps row heights equal across spans */
.logo-tile[data-span="3"]{aspect-ratio:3/1}
.logo-tile.is-in{opacity:1; transform:none}
.logo-tile__marks{position:absolute; inset:0 0 44px; display:flex; align-items:center; justify-content:center}
.logo-tile__slot{position:relative; flex:1; height:100%; display:grid; place-items:center; padding:6%}
/* family: marks share one tile, divided by a hairline that runs the full height of the card */
.logo-tile--family .logo-tile__slot + .logo-tile__slot::before{
  content:""; position:absolute; left:0; top:-100vh; bottom:-100vh; width:1px; background:#e6e6e6;
}
.logo-tile__slot img{
  width:var(--fit,70%); max-height:80%; object-fit:contain; display:block;
  transition:transform .6s var(--ease);
}
.logo-tile:hover img{transform:scale(1.04)}
.logo-tile__cap{
  position:absolute; left:18px; right:18px; bottom:14px;
  display:flex; justify-content:space-between; gap:12px;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#666;
}
.logo-tile__cap b{font-weight:500; color:#111}
.logo-tile__cap span{margin-left:auto; text-align:right; flex-shrink:0}
.logo-tile__cap br{display:none}          /* manual break used on phones only */

/* closing note tile: dark, hairline, points to contact */
.logo-tile--note{
  background:var(--bg); border:1px solid var(--line); color:var(--ink);
  display:flex; flex-direction:column; justify-content:space-between; padding:22px;
  text-decoration:none; transition:border-color .3s ease, opacity .8s var(--ease), transform .9s var(--ease);
}
.logo-tile--note:hover{border-color:#555}
.logo-tile__kicker{font-size:13px; letter-spacing:.11em; text-transform:uppercase; color:#85858c}
.logo-tile__text{
  font-family:var(--font-display); font-size:clamp(26px,2.4vw,40px); line-height:.95;
  letter-spacing:-.02em; text-transform:uppercase; margin:auto 0;
}
.logo-tile__art{width:100%; height:auto; display:block; margin:auto 0; transition:transform .6s var(--ease)}
.logo-tile--note:hover .logo-tile__art{transform:scale(1.03) rotate(-1deg)}
.logo-tile__cta{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#bbb}
.logo-tile--note:hover .logo-tile__cta{color:#fff}

/* ---------- Footer ---------- */
.footer{
  min-height:70vh; padding:9vw 4vw 3vw;
  display:flex; flex-direction:column; justify-content:space-between;
  background:#f2efe8; color:#101010;
}
.footer__art{
  width:min(1100px, 78vw); height:auto; display:block; margin:0 auto 8vh;
  opacity:0; transform:translateY(30px) rotate(-1deg);
  transition:opacity 1s var(--ease), transform 1.1s var(--ease);
}
.footer__art.is-in{opacity:1; transform:none}
.footer__contact{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:24px 6vw;
  border-top:1px solid #aaa; padding:26px 0 30px;
  font-size:clamp(15px, 1.3vw, 19px); letter-spacing:.02em;
}
.footer__who{display:block; margin-bottom:12px; font-weight:600}
.footer__who em{font-style:normal; color:#777; margin-left:.6em}
.footer__statement{
  max-width:36em; margin:0; text-wrap:pretty;
  font-size:clamp(15px, 1.25vw, 18px); line-height:1.5; letter-spacing:0; color:#555;
}
.footer__links{display:flex; flex-direction:column; align-items:flex-end; gap:12px; white-space:nowrap}
.footer__contact a{border-bottom:1px solid rgba(16,16,16,.35); padding-bottom:2px; transition:border-color .2s ease}
.footer__contact a:hover{border-color:#101010}
.footer__bottom{
  display:flex; justify-content:space-between; align-items:end;
  padding-top:6px; font-size:13px; color:#777;
}
@media (max-width:700px){
  .footer__contact{grid-template-columns:1fr; gap:18px}
  .footer__links{align-items:flex-start}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .project__topline{grid-template-columns:1fr}
  .project__note{display:none}
  .project__pin{padding-top:calc(var(--header) + 2vh)}
  .desktop{left:4%; width:78%; height:68%}
  .phone{width:clamp(145px, 24vw, 195px); right:3%; top:22%}
  .viewer-ui{left:4%; right:4%}
  .logos__grid{grid-template-columns:1fr 1fr; gap:12px}
  .logo-tile{grid-column:span 2; aspect-ratio:2/1 !important}
}
/* ---------- Reduced motion ----------
   Reveals appear in place, nothing fades or settles, the hero reel is paused
   by main.js (poster frame stays). The site-scroll viewer still follows the page
   scroll — that's content, not decoration — but without the easing lag. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{transition-duration:0s !important; animation:none !important}
  .device-stage, .project__topline, .page, .desktop, .phone{transition:none}
  .stage__art, .footer__art, .logo-tile, .project__topline, .logo-tile--note{opacity:1 !important; transform:none !important}
  .device-stage__hint{display:none}
}

/* ---------- Phone (≤600px) ---------- */
@media (max-width:600px){
  .topbar{padding:0 18px; font-size:12px}
  .hero{padding-top:64px}
  .hero__note{left:18px; bottom:18px; font-size:12px}

  .stage--art{padding:5vh 4vw 0}
  .stage__art{width:92vw}
  .stage-track{margin-bottom:-52px}        /* title sits tight over the card's header, like Logo Design */

  /* project header + card fill the width */
  .work{padding:0 3vw 8vw}
  .project__pin{padding:calc(var(--header) + 1vh) 0 2vh; gap:1.5vh}
  .project__topline{grid-template-columns:1fr; width:100%; margin-bottom:8px}
  .project__kicker{font-size:12px; margin-bottom:6px}
  .project__title{font-size:clamp(30px, 8.5vw, 44px)}
  .project__logo{font-size:clamp(30px, 8.5vw, 44px)}
  .logo__mono{font-size:1.4em}

  /* portrait card: desktop frame on top, phone bottom-right in proportion */
  .device-stage{aspect-ratio:auto; width:100%; min-height:0; border-radius:22px}
  /* iOS Safari: blur + clip-path + will-change on a sticky card mis-composites (black screen).
     On phones the reveal is opacity + movement only. */
  .device-stage{filter:none !important; clip-path:none !important; will-change:auto; backface-visibility:visible; isolation:auto}
  .device-stage__glow{display:none}
  .desktop, .phone{will-change:auto; backface-visibility:visible}
  .page{backface-visibility:visible; will-change:auto}
  .device-stage__hint{left:5%; top:3%; font-size:10px}
  .desktop{left:4%; top:8%; width:92%; height:56%; border-radius:12px}
  .browser-bar{height:28px; padding:0 10px}
  .browser-bar__url{font-size:10px; transform:none}
  .viewport--desktop{height:calc(100% - 28px)}
  .phone{width:36%; right:4%; top:auto; bottom:12%; transform:rotate(3deg)}
  .viewer-ui{left:5%; right:auto; bottom:4%; gap:8px}
  .viewer-ui__arrow{width:38px; height:38px; font-size:17px}
  .viewer-ui__status{min-width:0; padding:9px 12px; font-size:11px}
  .scroll-meter{display:none}

  /* logos: one tile per screen, swipe sideways, arrows below */
  .logos{padding:0 0 10vw}
  .logos__head{padding:0 4vw 14px; margin:0 0 14px; font-size:12px}
  .logos__grid{
    display:flex; gap:12px; padding:0 4vw;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .logos__grid::-webkit-scrollbar{display:none}
  .logo-tile{
    flex:0 0 88vw; grid-column:auto; aspect-ratio:4/3 !important; min-height:0;
    scroll-snap-align:center; opacity:1; transform:none;      /* no staggered reveal in a swipe row */
  }
  .logo-tile--family .logo-tile__marks{flex-direction:row}
  .logo-tile__slot img{width:var(--fit,70%); max-height:78%}
  .logo-tile__cap br{display:inline}
  .logos__nav{
    display:flex; justify-content:center; align-items:center; gap:14px; margin-top:16px;
    font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#85858c;
  }
  .logos__nav button{
    width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:18px;
    background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.18);
  }

  .footer{padding:12vw 6vw 6vw}
  .footer__art{width:88vw}
}
@media (min-width:601px){ .logos__nav{display:none} }