/* LIKE ME hub · Set look (locked by Josh, 27 Sep 2026) */
@font-face { font-family: "Plex Mono"; src: url(fonts/ibm-plex-mono-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fonts/ibm-plex-mono-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

.lmh {
  --paper: #EEEFEC; --night: #0A0B0D; --soft: rgba(238, 239, 236, .68);
  --mono: "Plex Mono", ui-monospace, Menlo, monospace;
  --lag: 319ms;               /* half a beat at 94 BPM */
  --shift: -3.4vw;            /* where the late copy stands */
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  background: var(--night); color: var(--paper); font-family: var(--mono); -webkit-font-smoothing: antialiased;
}
.lmh *, .lmh *::before, .lmh *::after { box-sizing: border-box; margin: 0; padding: 0; }
.lmh a { color: inherit; text-decoration: none; }
.lmh ul { list-style: none; }
.lmh :focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.lmh .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the photograph */
.lmh-photo { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.lmh-plate { position: absolute; inset: 0; animation: lmh-arrive 1.2s ease-out both; }
.lmh-plate img {
  position: absolute; display: block; left: 0; width: 140vw; max-width: none; height: auto;
  top: calc(37vh - .33 * 93.5vw); top: calc(37svh - .33 * 93.5vw);   /* he is dead centre in the frame, so the frame runs off the right edge */
  filter: contrast(1.04) brightness(1.08);
}
.lmh-photo::after {             /* room light falls away toward the type, as it does in the frame itself */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,11,13,.45) 0%, rgba(10,11,13,0) 50%), linear-gradient(0deg, rgba(10,11,13,.5) 0%, rgba(10,11,13,0) 26%);
}
@keyframes lmh-arrive { from { opacity: 0; } to { opacity: 1; } }

/* a copy lands half a beat late, stands beside him, then falls into sync */
.lmh-plate.is-copy { mix-blend-mode: lighten; opacity: 0; animation: lmh-copy 2.8s var(--lag) cubic-bezier(.2,.7,.2,1) both; }
@keyframes lmh-copy {
  0% { opacity: 0; transform: translateX(var(--shift)); }
  12%, 60% { opacity: .42; transform: translateX(var(--shift)); }
  88% { opacity: .24; transform: none; }
  100% { opacity: 0; transform: none; }
}
.lmh-wm .is-copy { opacity: 0; animation: lmh-wcopy 2.8s var(--lag) cubic-bezier(.2,.7,.2,1) both; }
@keyframes lmh-wcopy {
  0% { opacity: 0; transform: translateX(-1.3vw); } 12%, 60% { opacity: .45; transform: translateX(-1.3vw); }
  88% { opacity: .2; transform: none; } 100% { opacity: 0; transform: none; }
}
.lmh.is-held .lmh-plate.is-copy { animation: none; opacity: .42; transform: translateX(var(--shift)); }
.lmh.is-held .lmh-wm .is-copy { animation: none; opacity: .45; transform: translateX(-1.3vw); }
@media (prefers-reduced-motion: reduce) {
  .lmh-plate, .lmh-plate.is-copy, .lmh-wm .is-copy { animation: none; }
  .lmh-plate.is-copy, .lmh-wm .is-copy { opacity: 0; }
}

.lmh-grain {
  position: fixed; inset: 0; z-index: 9; pointer-events: none; mix-blend-mode: overlay; opacity: .5;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* chrome */
.lmh-head { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 28px 40px; }
.lmh-mark { height: 44px; width: auto; display: block; }
.lmh-nav ul { display: flex; gap: 38px; font-size: 12.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.lmh-nav a, .lmh-follow a { display: block; transition: opacity .3s; }
.lmh-nav a:hover, .lmh-follow a:hover { opacity: .5; }
.lmh-ico { display: block; width: 18px; height: 18px; fill: currentColor; }

/* the column */
.lmh-main { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: 110px 0 0 11vw; }
.lmh-col { width: min(500px, max(36vw, 340px)); margin: auto 0; }
.lmh-wm { position: relative; width: 116%; margin: 0 0 34px -4%; aspect-ratio: 2384 / 462; }
.lmh-wm img { position: absolute; inset: 0; width: 100%; height: 100%; }

.lmh-ctas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.lmh-ctas > li { grid-column: span 3; }
.lmh-ctas > li.is-dsp { grid-column: span 2; }
.lmh-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border: 1px solid var(--paper);
  font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; transition: background .3s, color .3s;
}
.is-dsp .lmh-btn { font-size: 11px; letter-spacing: .13em; }
.lmh-btn .lmh-ico { width: 15px; height: 15px; }
.lmh-btn:hover, .lmh-btn:active { background: var(--paper); color: var(--night); }

.lmh-signup { margin-top: 22px; }
.lmh-signup label { display: block; font-size: 12.5px; letter-spacing: .04em; margin-bottom: 10px; }
.lmh-field { display: flex; height: 50px; border: 1px solid var(--paper); }
.lmh-field input {
  flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; color: var(--paper);
  font: 400 16px var(--mono); letter-spacing: .02em; padding: 0 16px; outline-offset: -4px;   /* 16px stops iOS zooming the page on focus */
}
.lmh-field input::placeholder { color: var(--soft); }
.lmh-field button {
  border: 0; border-radius: 0; background: var(--paper); color: var(--night); cursor: pointer;
  font: 500 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; padding: 0 22px;
}
.lmh-check { margin-top: 10px; }
.lmh-check:empty { margin: 0; }
.lmh-note { font-size: 10.5px; line-height: 1.6; color: var(--soft); margin-top: 10px; letter-spacing: .02em; }
.lmh-note a { text-decoration: underline; text-underline-offset: 2px; }
.lmh-done, .lmh-error { font-size: 12.5px; line-height: 48px; text-align: center; border: 1px solid var(--paper); }
.lmh-error { line-height: 1.5; padding: 10px 14px; margin-bottom: 10px; text-align: left; }

.lmh-field button:disabled { opacity: .6; cursor: default; }
[hidden] { display: none !important; }

/* plain pages: privacy, sign-up result */
.lmh-text { position: relative; z-index: 2; max-width: 620px; padding: 140px 24px 80px 11vw; font-size: 14px; line-height: 1.7; }
.lmh-text h1 { font-size: 22px; font-weight: 500; letter-spacing: .04em; margin-bottom: 22px; }
.lmh-text h2 { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; margin: 30px 0 8px; color: var(--soft); }
.lmh-text p { margin-bottom: 14px; }
.lmh-text a { text-decoration: underline; text-underline-offset: 3px; }
.lmh-text .lmh-back { display: inline-block; margin-top: 26px; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--paper); padding: 16px 22px; }
.lmh-text .lmh-back:hover { background: var(--paper); color: var(--night); }

.lmh-follow { position: fixed; left: 32px; bottom: 32px; z-index: 5; display: flex; flex-direction: column; gap: 2px; }
.lmh-follow a { padding: 8px; }                   /* 34px target */
.lmh-foot { padding: 28px 0 38px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--soft); }
.lmh-foot a { margin-left: 14px; }

/* small laptop windows: the column is narrow, so the long label shortens */
@media (max-width: 1100px) { .lmh-full { display: none; } }

/* phones, and any screen taller than it is wide */
@media (max-width: 760px), (max-aspect-ratio: 21/20) {
  .lmh { --shift: -7vw; }
  .lmh-head { padding: 14px; }
  .lmh-head > a { padding: 6px; }
  .lmh-mark { height: 36px; }
  .lmh-nav { display: none; }
  .lmh-photo { position: absolute; height: 100vh; height: 100svh; }
  .lmh-plate img { left: 50%; top: -6vh; top: -6svh; width: auto; height: 108vh; height: 108svh; transform: translateX(-50%); }
  .lmh-photo::after { background: linear-gradient(0deg, rgba(10,11,13,.94) 0%, rgba(10,11,13,.8) 30%, rgba(10,11,13,0) 62%); }
  .lmh-text { padding: 110px 20px 60px; }
  .lmh-main { padding: 0 20px; }
  .lmh-col { width: 100%; max-width: 520px; margin: auto auto 0; }
  .lmh-wm { width: 100%; margin: 0 0 22px; }
  .lmh-ctas { gap: 9px; }
  .is-dsp .lmh-btn { font-size: 10px; letter-spacing: .08em; gap: 7px; }
  .lmh-full { display: none; }
  .lmh-signup { margin-top: 12px; }
  .lmh-signup label, .lmh-note { text-align: center; }
  .lmh-follow { position: static; flex-direction: row; justify-content: center; gap: 10px; margin-top: 12px; }
  .lmh-follow a { padding: 10px; }                /* 40px touch target */
  .lmh-follow .lmh-ico { width: 20px; height: 20px; }
  .lmh-foot { text-align: center; padding: 14px 0 22px; }
}