/* enjeneer.win homepage. Black page, white type, one accent per app. */

:root{
  --bg:#000;
  --fg:#fff;
  --muted:#b6b6b9;
  --dim:#8a8a90;
  --faint:#6a6a70;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.38);
  --card:rgba(255,255,255,.025);
  --card-hover:rgba(255,255,255,.055);
  --pink:#ff0066;
  --sans:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',
         Roboto,'Helvetica Neue',Arial,sans-serif;
  --display:'Space Grotesk',var(--sans);
  --maxw:920px;
  --gutter:clamp(20px,5vw,40px);
  --ease:cubic-bezier(.22,.68,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.sprite{display:none}

/* A soft wash behind the masthead so the page is not a flat void. */
.glow{
  position:absolute;
  inset:0 0 auto;
  height:620px;
  pointer-events:none;
  background:
    radial-gradient(70% 100% at 50% -10%,rgba(255,255,255,.10),transparent 68%),
    radial-gradient(38% 60% at 78% 4%,rgba(255,0,102,.11),transparent 70%);
}

/* ---------- masthead ---------- */

.masthead{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(64px,13vh,120px) var(--gutter) clamp(40px,6vh,64px);
}

/* The logo is her mark recoloured white so the black strokes survive the black
   page; the pink is hers and is left alone. It carries the tagline itself, so
   there is no separate kicker line and no ".win" set in type beside it. The
   alt text is what gives this heading its words. */
.wordmark{margin:0;line-height:0}
.wordmark .mark{
  display:block;
  width:clamp(250px,58vw,460px);
  max-width:100%;
  height:auto;
}

.intro{
  margin:24px 0 0;
  max-width:46ch;
  font-size:clamp(1rem,2.4vw,1.075rem);
  line-height:1.65;
  color:var(--muted);
}

/* ---------- sections ---------- */

.wrap{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ---------- section heading ---------- */

.section-title{
  display:flex;
  align-items:center;
  gap:18px;
  margin:0 0 26px;
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.24em;
  color:var(--dim);
}
.section-title::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}

/* ---------- app rows ---------- */

/* One accent per app, set on the section so the tagline and gallery hover
   both pick it up. Adding an app means adding a rule here. */
.a-tr4ck  {--accent:#39c46e}
.a-mash   {--accent:#46c7b8}
.a-designs{--accent:#ff0066}
.a-iconic {--accent:#6fb0e0}
.a-drmom  {--accent:#f16563}
.a-reel   {--accent:#3fb8a3}

.app{
  padding:clamp(26px,4vw,34px) 0;
  border-top:1px solid var(--line);
}
.app:first-of-type{border-top:0;padding-top:0}

.app-main{
  display:flex;
  gap:18px;
  align-items:flex-start;
}

/* The icon is a second way into the app, next to the pill below the text. */
.icon-link{
  flex:0 0 auto;
  display:block;
  line-height:0;
  border-radius:17px;
}
.icon-link:focus-visible{outline:2px solid #fff;outline-offset:3px}
.icon-link:hover .icon{filter:none;border-color:var(--accent,var(--line-strong))}

.icon{
  flex:0 0 auto;
  width:64px;
  height:64px;
  border:1px solid var(--line);
  border-radius:17px;
  background:#fff;
  object-fit:cover;
  filter:saturate(.96) brightness(.94);
  transition:filter .22s var(--ease);
}
.app:hover .icon{filter:none}
.icon{border-color:var(--line)}

.app-text{min-width:0}

.name{
  margin:2px 0 0;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.25rem,3.2vw,1.5rem);
  letter-spacing:-.02em;
  line-height:1.2;
}

.tagline{
  margin:7px 0 0;
  font-size:.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.17em;
  color:var(--accent,var(--dim));
}

.desc{
  margin:13px 0 0;
  max-width:64ch;
  font-size:.95rem;
  line-height:1.65;
  color:var(--muted);
}

.visit{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:15px;
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.78rem;
  color:var(--muted);
  text-decoration:none;
  transition:border-color .22s var(--ease),color .22s var(--ease),
             background .22s var(--ease);
}
.visit:hover{
  border-color:var(--line-strong);
  background:rgba(255,255,255,.05);
  color:#fff;
}
.visit:focus-visible{outline:2px solid #fff;outline-offset:2px}

.go{
  width:13px;
  height:13px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .22s var(--ease);
}
.visit:hover .go{transform:translate(2px,-2px)}

/* ---------- screenshot strip ---------- */

.shots{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:12px;
  margin:22px 0 0;
  padding:0;
  list-style:none;
}
/* An app with no screenshots yet collapses completely. The :empty form
   alone is not enough: the <ul> holds whitespace between its tags. */
.shots:empty,
.shots:not(:has(li)){display:none;margin:0}

.shot{
  display:block;
  border:1px solid var(--line);
  border-radius:11px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
  line-height:0;
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.shot img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top center;
  filter:saturate(.96) brightness(.9);
  transition:filter .22s var(--ease);
}
.shot:hover{border-color:var(--accent,var(--line-strong));transform:translateY(-2px)}
.shot:hover img{filter:none}
.shot:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- lightbox ---------- */

.lb{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:clamp(14px,4vw,40px);
  background:rgba(0,0,0,.93);
  backdrop-filter:blur(3px);
}
.lb[hidden]{display:none}

.lb-img{
  max-width:min(100%,1100px);
  max-height:calc(100vh - 150px);
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:10px;
  background:#000;
}

.lb-bar{
  display:flex;
  align-items:center;
  gap:14px;
  max-width:100%;
}
.lb-cap{
  font-size:.82rem;
  color:var(--muted);
  text-align:center;
}
.lb-count{
  font-size:.72rem;
  color:var(--faint);
  white-space:nowrap;
}

.lb-btn{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  transition:border-color .22s var(--ease),background .22s var(--ease);
}
.lb-btn:hover{border-color:var(--line-strong);background:rgba(255,255,255,.1)}
.lb-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb-close{position:absolute;top:clamp(12px,3vw,22px);right:clamp(12px,3vw,22px)}

/* ---------- footer ---------- */

.foot{
  max-width:var(--maxw);
  margin:clamp(40px,7vh,72px) auto 0;
  padding:22px var(--gutter) 48px;
  border-top:1px solid var(--line);
}
.foot p{
  margin:0;
  font-size:.78rem;
  color:var(--faint);
}

@media (max-width:560px){
  .app-main{gap:14px}
  .icon{width:52px;height:52px;border-radius:14px}
  .shots{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .shot:hover{transform:none}
  .visit:hover .go{transform:none}
}

/* ---------- the about page ---------- */

.masthead-sub{padding-bottom:clamp(24px,4vh,36px)}

.back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-.02em;
  color:var(--fg);
  text-decoration:none;
  opacity:.75;
  transition:opacity .22s var(--ease);
}
.back:hover{opacity:1}
/* The wordmark is one flex item, or the row gap splits its letters apart. */
.back .back-mark{display:inline}
.back .dot{color:var(--pink)}
.back .tld{color:var(--faint);font-weight:500}
.back:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}

.page-title{
  margin:22px 0 0;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.1rem,8vw,3.2rem);
  line-height:1;
  letter-spacing:-.04em;
}

.prose{max-width:64ch}
/* Portrait sits beside the opening paragraph, and drops above it on a phone. */
.intro-row{
  display:flex;
  align-items:center;
  gap:clamp(18px,3.5vw,30px);
  margin:0 0 1.6em;
}
.portrait{
  flex:0 0 auto;
  width:clamp(104px,22vw,160px);
  height:auto;
  border-radius:50%;
  border:1px solid var(--line);
  filter:saturate(.96) brightness(.96);
}
.intro-row .lede{margin:0}

@media (max-width:560px){
  .intro-row{flex-direction:column;align-items:flex-start;gap:18px}
}

.prose p{
  margin:0 0 1.15em;
  font-size:1.0rem;
  line-height:1.75;
  color:var(--muted);
}
.prose .lede{
  font-size:clamp(1.08rem,2.6vw,1.2rem);
  line-height:1.65;
  color:var(--fg);
}
.prose h2{
  margin:2em 0 .6em;
  font-family:var(--display);
  font-weight:700;
  font-size:1.2rem;
  letter-spacing:-.02em;
  color:var(--fg);
}
.prose a:not(.visit){color:#fff;text-decoration:underline;text-underline-offset:3px}

.back-row{margin-top:2.2em}

.prose strong{color:var(--fg);font-weight:600}
.prose ul{
  margin:0 0 1.15em;
  padding-left:1.2em;
  color:var(--muted);
  line-height:1.75;
}
.prose li{margin:0 0 .4em}
.prose li::marker{color:var(--pink)}
/* The drawing keeps its own white paper and black lines, rounded into a circle
   and floated so the section's text runs beside it. */
.line-art{
  float:right;
  width:200px;
  margin:.35em 0 1.1em 1.7em;
}
.line-art img{
  display:block;
  width:100%;
  height:auto;
  border-radius:50%;
  border:1px solid var(--line);
}
/* A landscape drawing runs the full width of the column instead of floating. */
.line-art.wide{float:none;width:100%;margin:1.6em 0}
.line-art.wide img{border-radius:18px}

/* Headings must not ride up alongside the float. */
.prose h2{clear:both}

@media (max-width:560px){
  .line-art{float:none;width:170px;margin:1.4em auto}
}

.prose blockquote{
  margin:0 0 1.15em;
  padding:4px 0 4px 20px;
  border-left:2px solid var(--pink);
}
.prose blockquote p{margin:0 0 .5em;color:var(--fg);font-style:italic}
.prose cite{
  font-style:normal;
  font-size:.85rem;
  letter-spacing:.04em;
  color:var(--dim);
}

/* The About link under the homepage intro. */
.about-link{
  display:inline-block;
  margin-top:18px;
  font-size:.95rem;
  font-weight:600;
  color:var(--fg);
  text-decoration:underline;
  text-decoration-color:var(--pink);
  text-underline-offset:4px;
  opacity:.85;
  transition:opacity .22s var(--ease);
}
.about-link:hover{opacity:1}
.about-link:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}