/* aelfred.ai — the house's own look. Tokens from the app's base.css: chamber black, gold for rank,
   Cinzel for ceremony, EB Garamond for his voice, Share Tech Mono for labels. No framework, no cookies. */
@import url("/fonts/fonts.css");

:root {
  --black: #030608; --black-2: #050b0e; --black-3: #020406; --black-4: #0a1510;
  --white: #f0f4f0; --white-dim: rgba(240,244,240,.72); --white-mute: rgba(240,244,240,.5);
  --gold: #DAB542; --gold-light: #F0CC55;
  --gold-line: rgba(212,175,55,.16); --gold-line-2: rgba(212,175,55,.28);
  --font-title: 'Cinzel', 'Trajan Pro', serif;
  --font-body: 'EB Garamond', 'Garamond', Georgia, serif;
  --font-mono: 'Share Tech Mono', 'Courier New', monospace;
  --ease: cubic-bezier(.22,1,.36,1);
  --gutter: clamp(20px, 5vw, 64px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--black); color: var(--white); font-family: var(--font-body); line-height: 1.55; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; }
a { color: var(--gold); text-decoration-color: rgba(212,175,55,.35); text-underline-offset: 3px; }
a:hover { color: var(--gold-light); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
img { display: block; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* type */
.eyebrow { margin: 0; font-family: var(--font-title); font-weight: 500; font-size: 13px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.small { margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; line-height: 1.9; color: rgba(240,244,240,.6); }
.small a { color: rgba(240,244,240,.78); }
.lede { margin: 0; font-size: clamp(26px, 3vw, 40px); line-height: 1.2; color: var(--white); text-wrap: balance; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 17px 26px; border-radius: 2px; border: 1px solid var(--gold); background: var(--gold); color: var(--black); font-family: var(--font-mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; cursor: pointer; appearance: none; box-shadow: 0 10px 36px rgba(218,181,66,.18); transition: background 180ms var(--ease), transform 180ms var(--ease); }
.btn:hover, .btn:focus-visible { background: var(--gold-light); color: var(--black); transform: translateY(-1px); }
.btn-ghost { display: inline-flex; align-items: center; padding: 17px 26px; border-radius: 2px; border: 1px solid rgba(240,244,240,.28); color: var(--white); font-family: var(--font-mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: border-color 180ms var(--ease), color 180ms var(--ease); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--gold); color: var(--gold-light); }
.signin { padding: 10px 16px; border: 1px solid var(--gold-line-2); border-radius: 2px; color: var(--white); text-decoration: none; background: rgba(3,6,8,.35); backdrop-filter: blur(8px); transition: border-color 180ms var(--ease), color 180ms var(--ease); }
.signin:hover, .signin:focus-visible { border-color: var(--gold); color: var(--gold-light); }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: clamp(18px, 3vw, 30px); padding-bottom: clamp(18px, 3vw, 30px); }
.top.over { position: absolute; top: 0; left: 0; right: 0; z-index: 3; }
.brand img { height: clamp(26px, 3vw, 34px); width: auto; opacity: .96; }
.top.sticky { position: sticky; top: 0; z-index: 5; background: rgba(3,6,8,.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gold-line); padding: 0; max-width: none; }
.top.sticky .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.top.sticky .brand img { height: clamp(22px, 2.6vw, 28px); }

/* hero (home, 404) */
.hero { position: relative; min-height: clamp(620px, 92vh, 980px); display: grid; align-items: end; overflow: hidden; background: var(--black); }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 28%; animation: settle 1.8s var(--ease) both; }
.hero .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,6,8,.97) 0%, rgba(3,6,8,.86) 28%, rgba(3,6,8,.45) 55%, rgba(3,6,8,.08) 80%, rgba(3,6,8,0) 100%), linear-gradient(180deg, rgba(3,6,8,.55) 0%, rgba(3,6,8,0) 28%, rgba(3,6,8,.1) 62%, var(--black) 100%); }
.hero .rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(212,175,55,0), rgba(212,175,55,.45) 30%, rgba(212,175,55,.45) 70%, rgba(212,175,55,0)); }
.hero .copy { position: relative; z-index: 2; padding-top: 140px; padding-bottom: clamp(64px, 10vh, 120px); display: grid; gap: clamp(18px, 2.4vw, 28px); animation: rise 900ms 200ms var(--ease) both; }
.hero .kicker { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.hero h1 { margin: 0; font-family: var(--font-title); font-weight: 500; font-size: clamp(48px, 7.4vw, 104px); line-height: .98; letter-spacing: .04em; color: var(--white); text-wrap: balance; max-width: 11ch; }
.hero .sub { margin: 0; font-size: clamp(20px, 2.1vw, 27px); line-height: 1.4; color: rgba(240,244,240,.84); max-width: 34ch; text-wrap: pretty; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }

/* sections */
.section { padding-top: clamp(72px, 10vw, 128px); padding-bottom: clamp(56px, 8vw, 96px); display: grid; gap: clamp(36px, 5vw, 56px); }
.section-head { display: grid; gap: 14px; max-width: 62ch; }

/* film plate */
.film { padding-top: clamp(56px, 8vw, 96px); padding-bottom: 0; display: grid; gap: clamp(22px, 3vw, 32px); }
.film-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.film-head .small { letter-spacing: .14em; text-transform: uppercase; color: var(--white-mute); }
.plate { position: relative; aspect-ratio: 16/9; border: 1px solid var(--gold-line-2); border-radius: 3px; overflow: hidden; background: var(--black-2); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.plate video, .plate > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plate > img { object-position: 50% 30%; opacity: .5; filter: saturate(.85); }
.plate .shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(3,6,8,.1), rgba(3,6,8,.72) 75%); }
.plate .centre { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 22px; text-align: center; padding: 24px; }
.medallion { width: clamp(72px, 9vw, 104px); height: clamp(72px, 9vw, 104px); border-radius: 50%; border: 1px solid var(--gold); background: radial-gradient(circle at 50% 30%, #1a2824, #050908 76%); box-shadow: 0 0 0 4px var(--black), 0 0 0 5px rgba(212,175,55,.35), 0 18px 40px rgba(0,0,0,.6); display: grid; place-items: center; }
.medallion svg { width: 34%; height: 34%; }
.plate .caption { margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(240,244,240,.62); }
.plate .rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(212,175,55,0), rgba(212,175,55,.5) 30%, rgba(212,175,55,.5) 70%, rgba(212,175,55,0)); }
.plate.has-video > img, .plate.has-video .shade, .plate.has-video .centre { display: none; }

/* what he does */
.does { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1px; background: var(--black); border: 1px solid var(--gold-line); border-radius: 3px; overflow: hidden; }
.does article { display: grid; gap: 18px; align-content: start; padding: clamp(24px, 3vw, 36px) clamp(20px, 2.4vw, 30px) clamp(28px, 3vw, 40px); outline: 1px solid var(--gold-line); background: linear-gradient(180deg, var(--black-4) 0%, var(--black-2) 100%); transition: background 180ms var(--ease); }
.does article:hover { background: linear-gradient(180deg, #0e1c15 0%, #07100f 100%); }
.does img { width: 84px; height: 84px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)); }
.does h3 { margin: 8px 0 0; font-size: 24px; font-weight: 600; line-height: 1.15; color: var(--white); }
.does p { margin: 0; font-size: 17.5px; color: rgba(240,244,240,.7); text-wrap: pretty; }

/* plainly */
.plainly { position: relative; overflow: hidden; background: var(--black); border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); }
.plainly > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; opacity: .55; }
.plainly .shade { position: absolute; inset: 0; background: linear-gradient(180deg, var(--black) 0%, rgba(3,6,8,.35) 30%, rgba(3,6,8,.35) 70%, var(--black) 100%), radial-gradient(ellipse at 50% 50%, rgba(3,6,8,.1), rgba(3,6,8,.75) 70%); }
.plainly .copy { position: relative; z-index: 2; padding-top: clamp(120px, 16vw, 200px); padding-bottom: clamp(120px, 16vw, 200px); display: grid; justify-items: center; text-align: center; gap: 22px; }
.plainly p { margin: 0; font-style: italic; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.35; color: var(--white); max-width: 30ch; text-wrap: balance; text-shadow: 0 2px 24px rgba(3,6,8,.9); }

/* two-cell plates (membership, contact) */
.plate2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1px; background: rgba(212,175,55,.2); border: 1px solid rgba(212,175,55,.2); border-radius: 3px; overflow: hidden; }
.plate2 > * { padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px); }
.plate2 .lacquer { display: grid; gap: 10px; align-content: center; background: linear-gradient(135deg, var(--black-4) 0%, var(--black-2) 100%); }
.plate2 .dark { display: grid; gap: 26px; align-content: center; background: var(--black-2); }
.price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.price strong { font-family: var(--font-title); font-weight: 500; font-size: clamp(64px, 8vw, 104px); line-height: 1; letter-spacing: .02em; color: var(--white); }
.price span { font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(240,244,240,.62); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(240,244,240,.74); }
.ticks li { display: flex; align-items: center; gap: 14px; }
.ticks li::before { content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex: none; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.quiet-link { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(240,244,240,.74); text-decoration: none; padding: 17px 6px; transition: color 180ms var(--ease); }
.quiet-link:hover { color: var(--gold-light); }

/* contact form */
.form { display: grid; gap: 22px; }
.form .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 22px; }
.form label { display: grid; gap: 8px; }
.form label span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.form input, .form select, .form textarea { appearance: none; width: 100%; margin: 0; padding: 14px 16px; background: var(--black); color: var(--white); border: 1px solid var(--gold-line-2); border-radius: 2px; font-family: var(--font-body); font-size: 19px; line-height: 1.3; outline: none; transition: border-color 180ms var(--ease); }
.form textarea { line-height: 1.45; resize: vertical; min-height: 150px; }
.form select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23DAB542' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--gold); }
.form .gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 4px; }
.received { display: none; gap: 18px; justify-items: start; padding: 12px 0; }
.received img { width: 64px; height: 64px; }
.received h2 { margin: 0; font-family: var(--font-title); font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: .04em; color: var(--white); }
.received p { margin: 0; font-size: 19px; color: var(--white-dim); max-width: 34ch; text-wrap: pretty; }
.is-sent .form { display: none; }
.is-sent .received { display: grid; }

/* footer */
footer { margin-top: auto; border-top: 1px solid var(--gold-line); background: var(--black-3); }
footer .wrap { padding-top: clamp(36px, 5vw, 56px); padding-bottom: clamp(44px, 6vw, 72px); display: grid; gap: 28px; }
footer .line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
footer .line img { height: 24px; width: auto; opacity: .8; }
footer nav { display: flex; flex-wrap: wrap; gap: 12px 26px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
footer nav a { color: rgba(240,244,240,.66); text-decoration: none; transition: color 180ms var(--ease); }
footer nav a:hover { color: var(--gold); }
footer .company { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; line-height: 1.9; color: var(--white-mute); }

/* 404 */
.lost { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.lost > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 20%; opacity: .6; animation: settle 1.8s var(--ease) both; }
.lost .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,6,8,.96) 0%, rgba(3,6,8,.82) 30%, rgba(3,6,8,.35) 58%, rgba(3,6,8,.05) 85%, rgba(3,6,8,0) 100%), linear-gradient(180deg, rgba(3,6,8,.6) 0%, rgba(3,6,8,0) 30%, rgba(3,6,8,.15) 65%, var(--black) 100%); }
.lost .top, .lost main, .lost footer { position: relative; z-index: 2; }
.lost main { flex: 1; display: grid; justify-items: start; align-content: end; gap: clamp(18px, 2.4vw, 28px); padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(96px, 14vw, 160px); animation: rise 900ms 200ms var(--ease) both; }
.lost h1 { margin: 0; font-family: var(--font-title); font-weight: 500; font-size: clamp(40px, 6.4vw, 88px); line-height: 1; letter-spacing: .06em; color: var(--white); text-shadow: 0 2px 24px rgba(3,6,8,.9); }
.lost .sub { margin: 0; font-style: italic; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.4; color: rgba(240,244,240,.84); max-width: 30ch; text-wrap: balance; text-shadow: 0 2px 24px rgba(3,6,8,.9); }
.lost footer { background: transparent; }
.lost footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; padding-top: clamp(24px, 3vw, 36px); padding-bottom: clamp(24px, 3vw, 36px); }

/* motion */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* Welcome page: the letter's paragraphs sit close, as one note. */
.plate2 .dark > div > p { margin: 0; }

/* Up to a laptop width the hero is picture-then-words: his face is never under the type (Louis, 16 Oct 15:18). */
@media (max-width: 1100px) {
  .hero { min-height: 0; display: block; }
  .hero > img { position: relative; inset: auto; display: block; width: 100%; height: 70vh; min-height: 380px; max-height: 720px; object-position: 62% 18%; }
  .hero .shade { background: linear-gradient(180deg, rgba(3,6,8,.55) 0%, rgba(3,6,8,0) 22%, rgba(3,6,8,0) 52%, var(--black) 64%); }
  .hero .copy { margin-top: -96px; padding-top: 0; padding-bottom: 64px; gap: 20px; }
}

/* ── Phones (co-work, 16 Oct, Louis: "on mobile it looks really cramped") ──────────────────────────
   The hero becomes picture-then-words: his face shown clear at the top, the words below on black,
   never on his face. One Join button the full width; Sign in stays in the top bar only. Small print
   in Garamond, not tiny spaced capitals. The five plates become compact rows. */
@media (max-width: 640px) {
  .hero h1 { font-size: 46px; }
  .hero .sub { font-size: 20px; }
  .hero .actions { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 8px; }
  .hero .actions .btn { justify-content: center; width: 100%; padding-top: 18px; padding-bottom: 18px; }
  .hero .actions .btn-ghost { display: none; }
  .small { font-family: var(--font-body); font-size: 15px; letter-spacing: 0; line-height: 1.55; }
  .hero .small { text-align: center; }
  .plate .caption, .film-head .small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; }

  .does article { grid-template-columns: 56px 1fr; column-gap: 18px; row-gap: 4px; align-items: start; padding: 22px 20px; }
  .does img { width: 56px; height: 56px; grid-row: span 2; }
  .does h3 { margin: 2px 0 0; font-size: 21px; }
  .does p { font-size: 16.5px; }

  .plate2 .dark .row { display: grid; gap: 14px; }
  .plate2 .dark .row .btn { justify-content: center; width: 100%; }
  footer nav { row-gap: 14px; }
}

/* 16 Oct 15:30 (Louis): a readable Join, fewer words. */
.btn { font-family: var(--font-title); font-weight: 600; font-size: 17px; letter-spacing: .08em; padding: 18px 30px; }
.note { margin: 0; display: flex; align-items: center; gap: 14px; font-size: 19px; font-style: italic; color: var(--white-dim); }
.note img { width: 40px; height: 40px; }
.plate2.single { max-width: 560px; margin: 0 auto; }
.plate2.single .lacquer { justify-items: center; text-align: center; }
.plate2.single .price { justify-content: center; }
footer .company a { color: rgba(240,244,240,.7); }
.plainly .ae { margin: 0; font-family: var(--font-title); font-weight: 500; font-size: clamp(56px, 9vw, 120px); line-height: 1; letter-spacing: .04em; color: var(--gold); text-shadow: 0 2px 30px rgba(3,6,8,.9); }