/* ============================================================
   Andrew Dache — link page
   Restyled after the link.me layout: pure black, flat dark
   cards, photo banner with the name overlapping its fade,
   small circular social buttons. Mobile first.
   ============================================================ */

:root{
  --bg:        #000000;
  --card:      #141416;
  --card-hi:   #1d1d20;
  --stroke:    rgba(255,255,255,.08);
  --stroke-hi: rgba(255,255,255,.16);

  --text:      #ffffff;
  --dim:       #a9a9b0;
  --faint:     #6f6f77;

  /* accents for the ebook labels + gate states */
  --sky:       #35b6ff;
  --magenta:   #ff2fb9;

  --r-card:    16px;

  --ease:      cubic-bezier(.2,.7,.3,1);
}

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

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

body{
  margin:0;
  min-height:100svh;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{ background:rgba(255,255,255,.25); }

a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

/* the username input is an exception: its wrapper (.drop__field) already
   lights up its border + glow on focus-within, so the default outline just
   drew an ugly white rectangle on top of the rounded pill */
.drop__input:focus-visible{ outline:none; }

/* ── banner ─────────────────────────────────────────────── */

.banner{
  position:relative;
  width:100%;
  max-width:560px;
  margin-inline:auto;
  height:clamp(240px, 68vw, 340px);
  overflow:hidden;
  /* placeholder until assets/banner.jpg exists — quiet dark gradient */
  background:linear-gradient(160deg, #1b1c20 0%, #101013 55%, #0a0a0c 100%);
}

/* --banner-crop trims that much off the TOP of the gif (there's baked-in
   text up there). The image box is grown by the same amount and anchored
   to the bottom, so the excess is clipped by .banner's overflow:hidden.
   Adjust this one value to cut more or less. */
.banner{ --banner-crop:34px; }

.banner__img{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:calc(100% + var(--banner-crop));
  object-fit:cover;
  object-position:50% 100%;
}
.banner__img.is-missing{ display:none; }

/* photo melts into the black page — the name sits on this fade */
.banner__fade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 35%, rgba(0,0,0,.55) 70%, var(--bg) 98%);
  pointer-events:none;
}

/* ── layout ─────────────────────────────────────────────── */

.page{
  position:relative;
  z-index:1;
  width:100%;
  max-width:480px;
  margin-inline:auto;
  /* pull the header up so the name sits on the banner's fade */
  margin-top:-72px;
  padding:0 16px calc(36px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:26px;
}

/* ── profile ────────────────────────────────────────────── */

.profile{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Climate Crisis is ultra-black and very wide — it needs a smaller size
   than a normal display face to keep the name on one line */
.name{
  margin:0;
  font-family:"Climate Crisis","Inter",sans-serif;
  font-style:normal;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0;
  font-size:clamp(1.15rem, 5.4vw, 1.5rem);
  line-height:1.15;
  text-shadow:0 2px 18px rgba(0,0,0,.8);
}

.handle{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:5px 0 0;
  font-size:.84rem;
  font-weight:500;
  color:var(--dim);
}

.verified{
  width:15px;
  height:15px;
  flex:none;
}

/* small round social buttons, link.me style */
.social-row{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:14px;
}

.social{
  position:relative;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .2s var(--ease), filter .2s var(--ease);
}
.social svg{
  width:20px;
  height:20px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.social:hover{ transform:scale(1.12); filter:brightness(1.08); }
.social:active{ transform:scale(.94); }

.social--yt{ --brand:#ff0000; }
.social--ig{
  --brand:linear-gradient(45deg,#feda75 0%,#fa7e1e 25%,#d62976 55%,#962fbf 80%,#4f5bd5 100%);
}

/* screen-reader-only names */
.social__name{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.bio{
  max-width:320px;
  margin:14px 0 0;
  font-size:.85rem;
  font-weight:400;
  line-height:1.5;
  color:var(--dim);
}

/* ── section heading ────────────────────────────────────── */

.label{
  margin:0 0 10px;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  color:var(--text);
  text-align:left;
}

/* ── ebook cards ────────────────────────────────────────── */

.links{ display:flex; flex-direction:column; gap:12px; }

.ebook{ display:flex; flex-direction:column; }

/* the accent is set on the wrapper so the dropdown inherits it too */
.ebook--sky     { --accent:var(--sky); }
.ebook--magenta { --accent:var(--magenta); }

.card{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:13px;
  padding:13px 14px;
  border-radius:var(--r-card);
  /* accent glow along the whole left edge — linear (not radial) so it's
     even top-to-bottom, and only fades out horizontally toward the text */
  --glow:linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 26%, transparent) 0%,
    color-mix(in srgb, var(--accent) 10%, transparent) 26%,
    transparent 60%);
  background:var(--glow), var(--card);
  /* without these the gradient is sized to the padding box but painted over
     the border box, so it tiles and the strong left stop reappears as a
     thin coloured line down the right border */
  background-origin:border-box;
  background-repeat:no-repeat;
  border:1px solid var(--stroke);
  color:var(--text);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s var(--ease), border-color .2s var(--ease),
             box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card:hover{
  background:var(--glow), var(--card-hi);
  border-color:color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow:0 0 26px -8px color-mix(in srgb, var(--accent) 45%, transparent);
}
.card:active{ transform:scale(.985); }

.row-icon{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:12px;
  flex:none;
}

.card__icon{
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color:var(--accent);
}
.card__icon svg{ width:20px; height:20px; }

.row-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  text-align:left;
}

.row-title{
  font-size:.93rem;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.3;
}

.card__sub{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  margin-top:1px;
  line-height:1.3;
}
.card__sub b{
  color:var(--accent);
  font-weight:700;
  letter-spacing:.08em;
  font-size:.63rem;
}
.card__tag{
  font-size:.74rem;
  font-weight:400;
  color:var(--dim);
}

.chev{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:none;
  color:var(--faint);
  transition:transform .25s var(--ease), color .2s var(--ease);
}
.chev svg{ width:16px; height:16px; }
.card:hover .chev{ color:var(--dim); }

/* ── ebook dropdown (username gate) ─────────────────────── */

/* 0fr → 1fr animates height without a hard-coded max-height */
.drop{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .32s var(--ease);
}
.ebook[data-open] .drop{ grid-template-rows:1fr; }

.drop__inner{ overflow:hidden; }

.drop__body{
  margin-top:8px;
  padding:12px;
  border-radius:var(--r-card);
  background:var(--card);
  border:1px solid var(--stroke);
}

.drop__row{ display:flex; flex-direction:column; gap:8px; }

/* dark inset field so it clearly reads as "type here", not a second button */
.drop__field{
  flex:none;
  width:100%;
  display:flex;
  align-items:center;
  gap:2px;
  height:50px;
  padding:0 18px;
  border-radius:999px;
  background:#0a0a0c;
  border:1px solid #2e2e34;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55);
  transition:box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.drop__field:focus-within{
  border-color:#8b8b95;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55), 0 0 0 3px rgba(255,255,255,.14);
}
.drop__field[data-invalid]{
  border-color:#ff3b52;
  box-shadow:0 0 0 3px rgba(255,59,82,.25);
  animation:shake .3s var(--ease);
}
@keyframes shake{
  25%{ transform:translateX(-5px); }
  60%{ transform:translateX(4px); }
  100%{ transform:none; }
}

.drop__at{
  font-size:.95rem;
  font-weight:600;
  color:var(--faint);
}

.drop__input{
  flex:1;
  min-width:0;
  height:100%;
  border:0;
  outline:0;
  background:none;
  color:var(--text);
  font:inherit;
  font-size:.95rem;
  font-weight:500;
  caret-color:#fff;
}
.drop__input::placeholder{ color:var(--faint); font-weight:400; }

.drop__submit{
  flex:none;
  width:100%;
  height:50px;
  border:0;
  border-radius:999px;
  font:inherit;
  font-size:.92rem;
  font-weight:700;
  color:#000;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  background:#fff;
  transition:transform .2s var(--ease), filter .2s var(--ease), opacity .2s var(--ease);
}
.drop__submit:hover{ filter:brightness(.92); }
.drop__submit:active{ transform:scale(.98); }
.drop__submit:disabled{ opacity:.55; cursor:default; }

.drop__msg{
  margin:9px 4px 1px;
  font-size:.78rem;
  font-weight:500;
  line-height:1.35;
  text-align:left;
  color:#ff8494;
}
.drop__msg[data-kind="ok"]{
  margin:2px;
  color:var(--accent);
  font-weight:600;
  text-align:center;
}
.drop__msg a{ color:var(--accent); text-decoration:underline; }

/* chevron points down while the panel is open */
.ebook[data-open] .chev svg{ transform:rotate(90deg); }
.chev svg{ transition:transform .28s var(--ease); }
.ebook[data-open] > .card{
  background:var(--glow), var(--card-hi);
  border-color:color-mix(in srgb, var(--accent) 34%, transparent);
}

/* ── footer ─────────────────────────────────────────────── */

.foot{
  margin-top:6px;
  text-align:center;
  font-size:.72rem;
  letter-spacing:.02em;
  color:var(--faint);
}

/* ── entrance ───────────────────────────────────────────── */

.reveal{
  opacity:0;
  transform:translateY(12px);
  animation:rise .55s var(--ease) forwards;
  animation-delay:var(--d, 0ms);
}
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ── responsive ─────────────────────────────────────────── */

@media (max-width:359px){
  .page{ padding-inline:13px; gap:22px; }
  .row-title{ font-size:.88rem; }
  .card{ gap:11px; padding:12px; }
}

/* desktop: the whole thing reads as a centred phone column */
@media (min-width:600px){
  .banner{
    margin-top:20px;
    border-radius:24px;
  }
  .page{ max-width:520px; }
}

/* ── accessibility ──────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}