/* ================= inspomusicgroup.com — the front page =================
 * On the network's tokens (network-tokens.css) and chrome (network-chrome.css), loaded first.
 * Light by default, dark under [data-theme="dark"], the portfolio's own switch (front.js).
 * Colour comes only from the art: each door glows in the colours of one picture on the
 * network. The ink is the accent. Phone first; the doors go three across from 820px.
 * Relative addresses here resolve under /pub/app/, beside the tokens: assets/fonts/... */

/* Inter Display's two headline cuts, as catalog-shelf.css declares them (that file is the portfolio's
   whole stylesheet, too much to load for a headline). */
@font-face{font-family:"Inter Display";src:url(assets/fonts/InterDisplay-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Display";src:url(assets/fonts/InterDisplay-ExtraBold.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--color-bg);color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--color-bg);color:var(--color-ink);
  font:400 16px/1.5 var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
p{margin:0}

.fp-wrap{width:100%;max-width:1120px;margin:0 auto;
  padding-left:max(var(--space-4),env(safe-area-inset-left));padding-right:max(var(--space-4),env(safe-area-inset-right))}
@media (min-width:820px){.fp-wrap{padding-left:max(var(--space-6),env(safe-area-inset-left));padding-right:max(var(--space-6),env(safe-area-inset-right))}}

/* ---- the bar: the network's mark with this room's name, and the theme switch ---- */
.fp-head{padding-top:env(safe-area-inset-top)}
.fp-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:64px}
.fp-theme{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:1px solid var(--color-line-strong);border-radius:var(--radius-round);
  background:transparent;color:var(--color-ink);cursor:pointer}
.fp-theme[hidden]{display:none}
@media (hover:hover){.fp-theme:hover{background:var(--color-surface-2)}}
.fp-moon{display:none}
.fp-theme[aria-pressed="true"] .fp-sun{display:none}
.fp-theme[aria-pressed="true"] .fp-moon{display:block}

/* ---- the opening ---- */
.fp-hero{padding:var(--space-7) 0 var(--space-6)}
@media (min-width:820px){.fp-hero{padding:96px 0 56px}}
.fp-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 var(--space-4);color:var(--color-muted);
  font:600 11.5px/1 var(--font-sans);letter-spacing:.22em;text-transform:uppercase}
/* the signal dot: the network is live. The one place the accent shows. */
.fp-dot{width:7px;height:7px;border-radius:var(--radius-round);background:var(--color-accent);box-shadow:var(--glow-state);animation:fp-pulse 2.8s ease-in-out infinite}
.fp-title{margin:0;max-width:11ch;font:800 clamp(42px,12vw,92px)/.98 var(--font-display);letter-spacing:-.035em;text-wrap:balance}
.fp-lede{max-width:34ch;margin-top:var(--space-4);color:var(--color-muted);font-size:17px;line-height:1.5}
.fp-lede + .fp-lede{margin-top:var(--space-3)}
@media (min-width:820px){.fp-lede{font-size:19px;max-width:40ch}.fp-title + .fp-lede{margin-top:var(--space-5)}}

/* ---- the three doors: cards that glow from inside in the colours of one picture each ---- */
.fp-doors{display:grid;grid-template-columns:1fr;gap:var(--space-3);margin:0 0 var(--space-7)}
@media (min-width:820px){.fp-doors{grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-bottom:80px}}
.fp-door{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:6px;min-height:168px;padding:var(--space-5) 20px 20px;
  border-radius:var(--radius-card);background:var(--color-surface);color:var(--color-ink);text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease}
@media (min-width:820px){.fp-door{min-height:232px;padding:var(--space-6) var(--space-5) var(--space-5)}}
/* --glow-card and --glow-shadow are resolved on :root, so a door's own --glow-1/--glow-2 would not reach them:
   the same gradient and shadow are spelled out here, on the door, where its colours are set. */
.fp-door{box-shadow:0 0 0 1px var(--color-line),0 18px 50px color-mix(in srgb,var(--glow-1) 14%,transparent)}
.fp-door::before{content:"";position:absolute;inset:-20%;z-index:-1;opacity:.5;
  background:radial-gradient(60% 70% at 18% 8%,color-mix(in srgb,var(--glow-1) 62%,transparent) 0%,transparent 70%),
             radial-gradient(55% 65% at 92% 100%,color-mix(in srgb,var(--glow-2) 55%,transparent) 0%,transparent 72%);
  animation:fp-breathe 9s ease-in-out infinite;transition:opacity .25s ease}
[data-theme="dark"] .fp-door::before{opacity:.8}
.fp-door:focus-visible{outline-offset:2px}
@media (hover:hover){
  .fp-door:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--color-line-strong),0 22px 60px color-mix(in srgb,var(--glow-1) 24%,transparent)}
  .fp-door:hover::before{animation-play-state:paused;opacity:.75}
  [data-theme="dark"] .fp-door:hover::before{opacity:1}
}
/* the art each door glows with: the map in the blue of "Cancer", search in the green of "NEO",
   the example page in the warm tones of the owner's own portrait. */
.fp-door--map{--glow-1:#5776b8;--glow-2:#203771}
.fp-door--search{--glow-1:#11ad5e;--glow-2:#0a5a33}
.fp-door--page{--glow-1:#c4a596;--glow-2:#7f6a62}
.fp-door--search::before{animation-delay:-3s}
.fp-door--page::before{animation-delay:-6s}

.fp-door-kicker{margin-bottom:var(--space-2);color:var(--color-muted);font:600 11px/1 var(--font-sans);letter-spacing:.2em;text-transform:uppercase}
.fp-door-title{font:600 24px/1.15 var(--font-display);letter-spacing:-.015em}
.fp-door-text{max-width:30ch;color:var(--color-muted);font-size:15px;line-height:1.45}
.fp-door-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:var(--space-4);color:var(--color-ink);font:500 13px/1 var(--font-sans);
  overflow-wrap:anywhere}
.fp-door-go::after{content:"\2192";transition:transform .25s ease}
@media (hover:hover){.fp-door:hover .fp-door-go::after{transform:translateX(3px)}}
.fp-door-who{display:flex;align-items:center;gap:var(--space-3)}
.fp-face{flex:none;width:44px;height:44px;border-radius:var(--radius-round);object-fit:cover;object-position:50% 14%;background:var(--color-surface-2)}

/* ---- the notes: what a portfolio is, and how to reach us ---- */
.fp-note{display:grid;gap:var(--space-3);padding:var(--space-6) 0;border-top:1px solid var(--color-line-strong)}
.fp-note p{max-width:52ch;color:var(--color-muted);font-size:16px;line-height:1.55}
@media (min-width:820px){
  .fp-note{grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:var(--space-6);padding:var(--space-7) 0}
  .fp-note > :not(.fp-h2){grid-column:2}
  .fp-note .fp-h2{grid-row:1 / span 3}
  .fp-note p{font-size:17px}
}
.fp-h2{margin:0;font:600 22px/1.2 var(--font-display);letter-spacing:-.01em}
.fp-contact{padding-bottom:var(--space-7)}
.fp-pill{justify-self:start;display:inline-flex;align-items:center;min-height:44px;max-width:100%;margin-top:var(--space-2);padding:0 20px;
  border:1px solid var(--color-line-strong);border-radius:var(--radius-pill);color:var(--color-ink);font:600 15px/1.2 var(--font-sans);text-decoration:none;
  overflow-wrap:anywhere}
@media (hover:hover){.fp-pill:hover{background:var(--color-surface-2)}}

/* ---- the footer ---- */
.fp-foot{margin-top:auto;border-top:1px solid var(--color-line);color:var(--color-muted);font-size:13px}
.fp-foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-5);
  padding-top:var(--space-5);padding-bottom:max(var(--space-5),env(safe-area-inset-bottom))}
.fp-foot-links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
.fp-foot-links a{text-decoration:none}
@media (hover:hover){.fp-foot-links a:hover{color:var(--color-ink)}}

@keyframes fp-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06) translate(1.5%,-1.5%)}}
@keyframes fp-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){
  .fp-door::before,.fp-dot{animation:none}
  .fp-door,.fp-door::before,.fp-door-go::after{transition:none}
  .fp-door:hover{transform:none}
}