/* ============================================
   WRENCH & LENS — Design System
   Contact-sheet / proof-sheet visual language
   ============================================ */

:root{
  --black:#080808;
  --charcoal:#161616;
  --charcoal-2:#1c1c1c;
  --charcoal-3:#232323;
  --orange:#e8632a;
  --red:#cc2200;
  --cream:#f0ece3;
  --gold:#c9a84c;
  --muted:rgba(240,236,227,.58);
  --muted-2:rgba(240,236,227,.38);
  --line:rgba(240,236,227,.12);
  --line-strong:rgba(240,236,227,.22);
  --radius:4px;
  --max:1240px;
  --font-display:'Bebas Neue',sans-serif;
  --font-body:'Inter',-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--black);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}

::selection{background:var(--orange);color:var(--black)}

*:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:.01em;line-height:.95}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
}

.lead{font-size:19px;line-height:1.6;color:var(--muted);max-width:640px}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--orange);color:var(--black);
  font-family:var(--font-body);font-weight:700;font-size:14px;
  padding:14px 24px;border:0;border-radius:var(--radius);
  text-decoration:none;transition:transform .15s ease, background .15s ease;
}
.btn:hover{background:#ff7a3d;transform:translateY(-1px)}
.btn.secondary{
  background:transparent;color:var(--cream);
  border:1px solid var(--line-strong);
}
.btn.secondary:hover{border-color:var(--orange);color:var(--orange);background:transparent}
.btn.gold{background:var(--gold);color:var(--black)}
.btn.gold:hover{background:#ddc06a}
.btn.small{padding:10px 16px;font-size:13px}

/* ===== nav ===== */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(8,8,8,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--max);margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;
  height:68px;
}
.brand{
  font-family:var(--font-display);font-size:22px;letter-spacing:.02em;
  text-decoration:none;color:var(--cream);
  display:flex;align-items:center;gap:8px;
}
.brand .dot{color:var(--orange)}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{
  font-size:14px;font-weight:600;text-decoration:none;color:var(--muted);
  padding:9px 14px;border-radius:var(--radius);transition:color .15s, background .15s;
}
.nav-links a:hover,.nav-links a.active{color:var(--cream);background:var(--charcoal-2)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-burger{display:none;background:none;border:0;color:var(--cream);font-size:22px}

.nav-links .only-mobile{display:none}
@media(max-width:860px){
  .nav-links{
    display:none;position:absolute;top:68px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--black);padding:10px 20px 18px;border-bottom:1px solid var(--line);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 12px}
  .nav-links .only-mobile{display:block}
  .nav-burger{display:block}
  .nav-cta .btn.secondary{display:none}
}

/* ===== hero / aperture motif ===== */
.hero{
  position:relative;overflow:hidden;
  padding:96px 0 70px;
  border-bottom:1px solid var(--line);
}
.aperture-bg{
  position:absolute;top:50%;right:-10%;
  width:900px;height:900px;
  transform:translateY(-50%);
  background:conic-gradient(from 0deg,
    transparent 0deg 18deg, rgba(232,99,42,.08) 18deg 20deg,
    transparent 20deg 54deg, rgba(232,99,42,.08) 54deg 56deg,
    transparent 56deg 90deg, rgba(232,99,42,.08) 90deg 92deg,
    transparent 92deg 126deg, rgba(232,99,42,.08) 126deg 128deg,
    transparent 128deg 162deg, rgba(232,99,42,.08) 162deg 164deg,
    transparent 164deg 198deg, rgba(232,99,42,.08) 198deg 200deg,
    transparent 200deg 234deg, rgba(232,99,42,.08) 234deg 236deg,
    transparent 236deg 270deg, rgba(232,99,42,.08) 270deg 272deg,
    transparent 272deg 306deg, rgba(232,99,42,.08) 306deg 308deg,
    transparent 308deg 342deg, rgba(232,99,42,.08) 342deg 344deg,
    transparent 344deg 360deg);
  border-radius:50%;
  -webkit-mask:radial-gradient(circle,black 40%,transparent 70%);
  mask:radial-gradient(circle,black 40%,transparent 70%);
  pointer-events:none;
}
/* photo background: starts just right of the headline column so the text stays over calm black */
.hero{min-height:clamp(520px,68vh,720px);display:flex;align-items:center}
.hero > .wrap{width:100%}
.hero-bg{
  position:absolute;top:0;right:0;bottom:0;
  left:calc(max(0px,(100vw - 1200px)/2) + 28px + 380px);
  z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);
  mask-image:linear-gradient(90deg,transparent 0,#000 30%);
}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:100% 50%;display:block}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--black) 0,rgba(8,8,8,0) 26%),linear-gradient(180deg,rgba(8,8,8,.55) 0,rgba(8,8,8,0) 22%);
}
.hero .hero-in{position:relative;z-index:1;max-width:1200px}
.hero-in > *{max-width:640px}

.hero h1{font-size:clamp(44px,6vw,74px);margin-bottom:20px}
.hero h1 .accent{color:var(--orange)}
.hero .lead{margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.hero-stats{display:flex;gap:40px;flex-wrap:wrap}
.hero-stat b{display:block;font-family:var(--font-display);font-size:32px;color:var(--cream)}
.hero-stat span{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}

/* ===== section basics ===== */
section{padding:76px 0}
.section-head{margin-bottom:40px;max-width:640px}
.section-head h2{font-size:clamp(30px,4vw,44px);margin-top:10px}
.section-head .lead{margin-top:14px;font-size:17px}
.section-split{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ===== categories ===== */
.cat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cat-card{
  background:var(--charcoal);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;text-decoration:none;color:var(--cream);
  transition:border-color .15s, transform .15s;
}
.cat-card:hover{border-color:var(--orange);transform:translateY(-2px)}
.cat-card .num{font-family:var(--font-mono);font-size:11px;color:var(--muted-2);letter-spacing:.1em}
.cat-card h3{font-size:26px;margin:10px 0 6px}
.cat-card p{font-size:13.5px;color:var(--muted)}
@media(max-width:760px){.cat-row{grid-template-columns:1fr}}

/* ===== contact-sheet creator card (signature element) ===== */
.frame-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:22px 18px;
}
.frame{
  position:relative;
  background:var(--charcoal);
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-decoration:none;color:var(--cream);
  transition:border-color .18s ease, transform .18s ease;
  overflow:hidden;
}
.frame:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.frame:hover .frame-photo::before,
.frame:hover .frame-photo::after{opacity:1}

/* sprocket ticks along top edge */
.frame-sprockets{
  display:flex;justify-content:space-between;
  padding:7px 10px;background:var(--black);
}
.frame-sprockets span{width:5px;height:5px;border-radius:1px;background:var(--charcoal-3)}

.frame-photo{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--charcoal-2);
}
.frame-photo img{width:100%;height:100%;object-fit:cover}
/* viewfinder AF-bracket corners, appear on hover */
.frame-photo::before,.frame-photo::after{
  content:"";position:absolute;width:22px;height:22px;opacity:0;
  transition:opacity .18s ease;pointer-events:none;
}
.frame-photo::before{
  top:10px;left:10px;
  border-top:2px solid var(--orange);border-left:2px solid var(--orange);
}
.frame-photo::after{
  bottom:10px;right:10px;
  border-bottom:2px solid var(--orange);border-right:2px solid var(--orange);
}
.frame-number{
  position:absolute;top:10px;right:10px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  background:rgba(8,8,8,.72);color:var(--muted);
  padding:3px 7px;border-radius:2px;
}
.frame-boost{
  position:absolute;top:10px;left:10px;
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:var(--gold);color:var(--black);
  padding:3px 8px;border-radius:2px;
}
.frame-body{padding:16px 16px 18px}
.frame-body h3{font-family:var(--font-body);font-weight:700;font-size:16px;letter-spacing:0;margin-bottom:4px}
.frame-loc{font-size:12.5px;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:5px}
.frame-tags{display:flex;flex-wrap:wrap;gap:6px}
.frame-tag{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);padding:3px 7px;border-radius:2px;
}

/* ===== how it works (real sequence — numbers earn their keep here) ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.step{padding:32px 28px;border-right:1px solid var(--line)}
.step:last-child{border-right:0}
.step .step-num{font-family:var(--font-mono);color:var(--orange);font-size:12px;letter-spacing:.1em;margin-bottom:14px;display:block}
.step h3{font-size:22px;margin-bottom:8px}
.step p{font-size:14px;color:var(--muted)}
@media(max-width:760px){.steps{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}}

/* ===== boost pricing teaser ===== */
.boost-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.boost-card{background:var(--charcoal);border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center}
.boost-card.featured{border-color:var(--gold)}
.boost-card .b-days{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.boost-card .b-price{font-family:var(--font-display);font-size:44px;color:var(--cream);margin:8px 0}
.boost-card .b-price span{font-family:var(--font-body);font-size:14px;color:var(--muted-2)}
@media(max-width:760px){.boost-row{grid-template-columns:1fr}}

/* ===== filter bar (browse) ===== */
.filter-bar{
  background:var(--charcoal);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;margin-bottom:30px;
}
.filter-grid{display:grid;grid-template-columns:1.4fr 1fr .8fr .7fr auto;gap:14px;align-items:end}
.field label{
  display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:7px;
}
.field input,.field select{
  width:100%;background:var(--black);border:1px solid var(--line-strong);color:var(--cream);
  padding:11px 12px;border-radius:var(--radius);font-size:14px;
}
.field input:focus,.field select:focus{border-color:var(--orange)}
.specialty-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pill{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--line-strong);color:var(--muted);padding:7px 12px;border-radius:20px;
  background:transparent;transition:all .15s;
}
.pill{display:inline-block;text-decoration:none}
.pill:hover{border-color:var(--orange);color:var(--orange)}
.pill.active,.pill.active:hover{background:var(--orange);border-color:var(--orange);color:var(--black)}
.pill.clear{border-style:dashed}
.results-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:var(--muted);font-size:13px}
.results-meta select{background:var(--charcoal);border:1px solid var(--line-strong);color:var(--cream);padding:8px 10px;border-radius:var(--radius);font-size:13px}
@media(max-width:860px){.filter-grid{grid-template-columns:1fr 1fr}.filter-grid .field.actions{grid-column:1/-1}.filter-grid .field.actions .btn{width:100%;justify-content:center}}

.empty-state{
  text-align:center;padding:70px 20px;border:1px dashed var(--line-strong);border-radius:var(--radius);
}
.empty-state h3{font-size:24px;margin-bottom:8px}
.empty-state p{color:var(--muted);font-size:14px}

/* ===== creator profile ===== */
.profile-hero{border-bottom:1px solid var(--line);padding:44px 0}
.profile-top{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.avatar{
  width:110px;height:110px;border-radius:var(--radius);object-fit:cover;
  border:1px solid var(--line-strong);flex-shrink:0;
}
.profile-name-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.profile-name-row h1{font-size:38px}
.badge-boosted{
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--gold);color:var(--black);padding:4px 9px;border-radius:2px;
}
.profile-loc{color:var(--muted);font-size:14px;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.profile-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.profile-actions{display:flex;gap:12px;margin-top:14px}

.profile-body{display:grid;grid-template-columns:2fr 1fr;gap:48px;padding-top:48px;padding-bottom:48px}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}
.gallery img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line)}
.bio p{color:var(--muted);font-size:15px;margin-bottom:14px}
.spec-list{list-style:none}
.spec-list li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.spec-list li span:first-child{color:var(--muted-2);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.side-card{background:var(--charcoal);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:20px}
.side-card h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
@media(max-width:860px){.profile-body{grid-template-columns:1fr}}

/* ===== contact modal ===== */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:200;background:rgba(8,8,8,.8);
  align-items:center;justify-content:center;padding:20px;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--charcoal);border:1px solid var(--line-strong);border-radius:var(--radius);
  max-width:480px;width:100%;padding:30px;position:relative;
}
.modal-close{position:absolute;top:16px;right:16px;background:none;border:0;color:var(--muted);font-size:20px}
.modal h3{font-size:26px;margin-bottom:6px}
.modal p.sub{color:var(--muted);font-size:13.5px;margin-bottom:20px}
.form-field{margin-bottom:14px}
.form-field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.form-field input,.form-field textarea{
  width:100%;background:var(--black);border:1px solid var(--line-strong);color:var(--cream);
  padding:11px 12px;border-radius:var(--radius);font-size:14px;font-family:inherit;
}
.form-field textarea{min-height:90px;resize:vertical}
.form-note{font-size:11.5px;color:var(--muted-2);margin-top:12px}

/* ===== creator CTA banner ===== */
.creator-cta{
  background:linear-gradient(135deg,var(--charcoal),var(--black));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:52px 44px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
}
.creator-cta h2{font-size:34px;max-width:440px}
@media(max-width:760px){.creator-cta{padding:34px 26px}}

/* ===== footer ===== */
footer{border-top:1px solid var(--line);padding:40px 0;margin-top:20px}
.footer-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.footer-in .brand{font-size:17px}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{font-size:13px;color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--cream)}
.footer-note{font-family:var(--font-mono);font-size:11px;color:var(--muted-2)}

@media(max-width:600px){
  .wrap{padding:0 20px}
  section{padding:56px 0}
  .hero{padding:64px 0 46px}
}


/* ==========================================================
   APP PAGES: forms, accounts, dashboard, admin
   ========================================================== */

/* ----- small utilities ----- */
.muted{color:var(--muted)}
.mono{font-family:var(--font-mono);font-size:12px}
.small-note{font-size:13px;color:var(--muted)}
.small-note a,.auth-alt a,.alert a,.hint a{color:var(--orange)}
.inline-form{display:inline}
.linklike{background:none;border:0;color:var(--orange);font-size:inherit;text-decoration:underline;padding:0}
.linklike:hover{color:#ff7a3d}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.opt{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--muted-2);text-transform:none;font-weight:400}
.back-link{font-size:13px;color:var(--muted);text-decoration:none;display:inline-block;margin-bottom:22px}
.back-link:hover{color:var(--cream)}
.actions-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}
.bad{color:#ff7a66}
button:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn.danger,button.danger{background:var(--red);color:var(--cream)}
.btn.danger:hover{background:#e62a00}

/* ----- page frames ----- */
.page-top{padding:44px 0 0}
.page-body{padding:44px 0 76px}
.page-top + .page-body{padding-top:26px}
.page-title{font-size:clamp(34px,4.6vw,52px);margin:10px 0 24px}
.page-title.small{font-size:clamp(28px,3.6vw,38px);margin:0 0 20px}
.wrap.narrow{max-width:760px}
.flash-wrap{padding-top:18px}
@media(max-width:600px){.page-body{padding:30px 0 56px}}

/* ----- alerts ----- */
.alert{border:1px solid var(--line-strong);border-left-width:3px;border-radius:var(--radius);padding:13px 16px;margin:0 0 16px;font-size:14px;background:var(--charcoal);color:var(--cream)}
.alert.success{border-left-color:#4fbf6a}
.alert.error{border-left-color:var(--red)}
.alert.info{border-left-color:var(--gold)}
.form-error{color:#ff7a66;font-size:13px;margin:0 0 12px}

/* ----- cards + forms ----- */
.card{background:var(--charcoal);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.card-title{font-size:26px;margin-bottom:14px}
.form-card .card-title{margin-bottom:18px}
.form-field select{
  width:100%;background:var(--black);border:1px solid var(--line-strong);color:var(--cream);
  padding:11px 12px;border-radius:var(--radius);font-size:14px;
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--orange);outline:none}
.form-field .hint{display:block;font-size:12px;color:var(--muted-2);margin-top:6px}
.field-error{display:block;font-size:12.5px;color:#ff7a66;margin-top:6px}
.form-field legend{font-size:12.5px;color:var(--muted);margin-bottom:8px;padding:0}
fieldset.form-field{border:0;padding:0;margin-left:0;margin-right:0;min-width:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.sub-title{font-family:var(--font-body);font-size:15px;font-weight:700;letter-spacing:0;margin:0 0 6px}

.check-row{display:flex;flex-wrap:wrap;gap:8px}
.check-pill{cursor:pointer}
.check-pill input{position:absolute;opacity:0;pointer-events:none}
.check-pill span{
  display:inline-block;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--line-strong);color:var(--muted);padding:9px 14px;border-radius:20px;transition:all .15s;
}
.check-pill:hover span{border-color:var(--orange);color:var(--orange)}
.check-pill input:checked + span{background:var(--orange);border-color:var(--orange);color:var(--black)}
.check-pill input:focus-visible + span{outline:2px solid var(--orange);outline-offset:3px}

/* ----- auth pages ----- */
.auth-split{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.auth-pitch .page-title{max-width:520px}
.pitch-list{list-style:none;max-width:480px}
.pitch-list li{padding:14px 0 14px 26px;border-top:1px solid var(--line);color:var(--muted);font-size:15px;position:relative}
.pitch-list li::before{content:"";position:absolute;left:0;top:23px;width:10px;height:10px;border:2px solid var(--orange);border-radius:50%}
.auth-card h2{font-size:28px;margin-bottom:18px}
.auth-solo{max-width:440px;margin:0 auto}
.auth-alt{margin-top:18px;font-size:13.5px;color:var(--muted);text-align:center}
@media(max-width:860px){.auth-split{grid-template-columns:1fr;gap:34px}}

/* ----- dashboard ----- */
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.dash-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start}
@media(max-width:860px){.dash-grid{grid-template-columns:1fr}}
.status-pill{
  display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;border-radius:2px;vertical-align:middle;background:var(--charcoal-3);color:var(--muted);
}
.status-approved{background:#1f4d2b;color:#8ee6a3}
.status-pending{background:#4d3f14;color:var(--gold)}
.status-rejected{background:#4d2a14;color:#ffa36b}
.status-suspended{background:#4d1414;color:#ff8d7c}
.checklist{list-style:none;margin:6px 0 4px}
.checklist li{padding:10px 0 10px 32px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--muted);position:relative}
.checklist li::before{content:"";position:absolute;left:0;top:13px;width:16px;height:16px;border:2px solid var(--line-strong);border-radius:50%}
.checklist li.done{color:var(--cream)}
.checklist li.done::before{background:var(--orange);border-color:var(--orange)}
.checklist li.done::after{content:"";position:absolute;left:5px;top:17px;width:6px;height:3px;border-left:2px solid var(--black);border-bottom:2px solid var(--black);transform:rotate(-45deg)}
.boost-card form,form.boost-card{display:block}

/* ----- photo manager ----- */
.photo-block{margin-top:26px}
.avatar-row{display:flex;gap:20px;align-items:center;margin-top:12px}
.avatar-empty{background:var(--charcoal-2)}
.file-btn{cursor:pointer;position:relative}
.file-btn:focus-within{outline:2px solid var(--orange);outline-offset:3px}
.upload-status{font-size:13px;color:var(--muted);margin-top:10px;min-height:1em}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:16px 0}
.photo-item{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--black)}
.photo-item img{aspect-ratio:4/3;width:100%;object-fit:cover}
.cover-tag{position:absolute;top:8px;left:8px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--orange);color:var(--black);padding:3px 7px;border-radius:2px}
.photo-actions{display:flex;justify-content:space-between;gap:6px;padding:8px}
.photo-actions form{display:inline}
.photo-actions button{background:none;border:0;color:var(--muted);font-size:12px;padding:2px 0}
.photo-actions button:hover{color:var(--orange)}
.photo-actions button.danger{background:none;color:#ff8d7c}

/* ----- profile page additions ----- */
.avatar-empty{background:var(--charcoal-2)}
.side-card.gold{border-color:var(--gold)}
.side-rate{font-size:20px;font-family:var(--font-display);letter-spacing:.02em}
.spec-right{text-align:right;max-width:180px}
.preview-bar{background:#4d3f14;color:var(--gold);font-size:13.5px;padding:10px 0}
.preview-bar a{color:var(--cream)}
.gallery a{display:block}
.sent-note{font-size:15px;margin-bottom:18px}

/* ----- tables ----- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);margin-top:14px}
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th{text-align:left;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);padding:11px 14px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
table.data td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.data tr:last-child td{border-bottom:0}
table.data a{color:var(--orange)}
table.data summary{cursor:pointer;color:var(--muted)}
.pager{display:flex;gap:14px;align-items:center;justify-content:center;margin:30px 0 0}

/* ----- admin ----- */
.admin-nav{border-bottom-color:var(--orange)}
.admin-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:var(--orange);color:var(--black);padding:2px 7px;border-radius:2px;margin-left:6px;vertical-align:middle}
.admin-nav .nav-in{height:auto;min-height:68px;flex-wrap:wrap;gap:8px 16px;padding-top:8px;padding-bottom:8px}
.admin-nav .nav-links{position:static;flex-direction:row;flex-wrap:wrap;padding:0;border:0;background:none}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:26px}
.stat{background:var(--charcoal);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.stat b{display:block;font-family:var(--font-display);font-size:34px;font-weight:400;line-height:1.05}
.stat span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.admin-panel{background:var(--charcoal);border-bottom:1px solid var(--line);padding:30px 0}
.admin-panel-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;align-items:start}
@media(max-width:860px){.admin-panel-grid{grid-template-columns:1fr;gap:26px}}
.spec-list.compact li{padding:8px 0;gap:16px}
.spec-list.compact li span:last-child{text-align:right}
.decision .form-field{margin-bottom:12px}
.decision textarea{min-height:70px}
.comp-form{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.comp-form label{font-size:13px;color:var(--muted)}
.comp-form input{width:80px;background:var(--black);border:1px solid var(--line-strong);color:var(--cream);padding:8px 10px;border-radius:var(--radius);font-size:14px}
.danger-card{border-color:#5a1a12}
.admin-filter{grid-template-columns:1.6fr 1fr auto}
.admin-filter .field.actions{display:block}
@media(max-width:860px){.admin-filter{grid-template-columns:1fr 1fr}}

/* ----- import + misc ----- */
.check-line{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--cream);cursor:pointer}
.check-line input{accent-color:var(--orange);width:16px;height:16px}
.warn-text{color:var(--gold)}
.nav-links form.only-mobile{padding:13px 12px}
.nav-links form.only-mobile .linklike{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600}

/* ----- bulk actions ----- */
.bulk-bar{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:14px 16px;margin-top:14px;background:var(--charcoal);border:1px solid var(--line);border-radius:var(--radius)}
.bulk-group{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.bulk-bar .danger-group{margin-left:auto}
.bulk-bar input[name=confirm_delete]{width:130px;background:var(--black);border:1px solid var(--line-strong);color:var(--cream);padding:8px 10px;border-radius:var(--radius);font-size:13px}
.check-col{width:36px}
.check-col input{accent-color:var(--orange);width:16px;height:16px}
.row-actions{white-space:nowrap}
.row-actions .btn+.btn{margin-left:6px}


/* narrower desktops: slimmer text column, photo starts further right */
@media(min-width:861px) and (max-width:1180px){
  .hero-in > *{max-width:500px}
  .hero-bg{left:calc(28px + 470px)}
}

/* hero on phones/tablets: no photo, just the text (it was sitting on its own under the copy) */
@media(max-width:860px){
  .hero-bg{display:none}
  .hero{min-height:0}
}


/* ----- analytics ----- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px;align-items:start}
@media(max-width:860px){.two-col{grid-template-columns:1fr}}
.chart-card svg.chart{width:100%;height:auto;display:block}
.chart-grid{stroke:var(--line);stroke-width:1}
.chart-axis{fill:var(--muted-2);font:11px var(--font-mono)}
.chart-bar{fill:var(--orange);opacity:.85}
.chart-bar:hover{opacity:1}
.chart-line{fill:none;stroke:var(--cream);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart-key{font-family:var(--font-mono);font-size:11px;color:var(--muted-2);margin-top:10px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.key-bar,.key-line{display:inline-block;vertical-align:middle;margin-right:6px}
.key-bar{width:12px;height:12px;background:var(--orange);opacity:.85}
.key-line{width:18px;height:2px;background:var(--cream)}
.minibar{height:3px;background:var(--line);margin-top:6px;border-radius:2px;overflow:hidden}
.minibar span{display:block;height:100%;background:var(--orange)}
table.data .num,table.data th.num{text-align:right;font-family:var(--font-mono);white-space:nowrap}
.range-pills{margin-top:0}

.stat-row-traffic{margin-top:-8px}
.stat-link{text-decoration:none;color:inherit;transition:border-color .15s}
.stat-link:hover{border-color:var(--orange)}
.stat-link b{color:var(--orange)}


/* ==========================================================
   v2 UX/UI PASS: accessibility, touch targets, app-style mobile patterns
   ========================================================== */
:root{
  --muted-2:rgba(240,236,227,.54);            /* was .38: failed contrast (3.2:1). Now 4.7:1 */
  --tap:44px; --tabbar-h:60px; --actionbar-h:72px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px;
  --radius-lg:12px;
  --danger:#b82000;
  --ease:cubic-bezier(.2,.7,.2,1);
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;-webkit-tap-highlight-color:transparent}
a,button,summary,label{touch-action:manipulation}
[id]{scroll-margin-top:84px}
main{display:block}
main:focus{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-80px;z-index:400;background:var(--orange);color:var(--black);padding:12px 18px;border-radius:var(--radius);font-weight:700;text-decoration:none}
.skip-link:focus{top:12px}
.nav{padding-top:var(--safe-t)}

/* buttons: always a comfortable target, tactile press */
.btn{min-height:44px;justify-content:center;line-height:1.2}
.btn.small{min-height:40px}
.btn:active{transform:scale(.98)}
.btn.danger,button.danger.btn{background:var(--danger);color:var(--cream)}
.btn.danger:hover{background:#d42500}
.icon-btn{width:44px;min-width:44px;padding:0}
.icon-btn svg{width:20px;height:20px}
.frame:active,.cat-card:active{transform:scale(.985)}

/* small labels: readable size */
.eyebrow,.hero-stat span,.stat span,.boost-card .b-days,.cat-card .num,.form-note,.form-field .hint,.opt,.frame-tag,.step .step-num,.chart-key{font-size:12px}

/* ----- top bar + bottom tab bar (phones) ----- */
.tabbar{display:none}
.nav-links a[aria-current]{color:var(--cream);background:var(--charcoal-2)}
@media(max-width:860px){
  .nav-links,.nav-burger{display:none!important}
  .nav-in{height:56px;padding:0 16px}
  .nav-cta .btn.secondary,.is-creator .nav-cta{display:none}

  .tabbar{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    height:calc(var(--tabbar-h) + var(--safe-b));padding-bottom:var(--safe-b);
    background:rgba(8,8,8,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
  }
  .tab{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:var(--tap);color:var(--muted);text-decoration:none;font-size:11px;font-weight:600;
  }
  .tab svg{width:24px;height:24px}
  .tab.active{color:var(--orange)}
  .tab.active::before{content:"";position:absolute;top:0;left:32%;right:32%;height:2px;background:var(--orange);border-radius:0 0 2px 2px}
  .tab:active{background:var(--charcoal)}
  body.has-tabbar{padding-bottom:calc(var(--tabbar-h) + var(--safe-b))}
  body.has-actionbar{padding-bottom:calc(var(--actionbar-h) + var(--safe-b))}
  body.has-actionbar .tabbar{display:none}
}

/* ----- forms: 16px text stops iOS zooming in, roomy targets ----- */
@media(max-width:860px){
  input,select,textarea{font-size:16px!important}
  .field input,.field select,.form-field input:not([type=checkbox]):not([type=radio]),.form-field select{min-height:48px}
  .form-field textarea{min-height:120px}
  .pill{min-height:44px;display:inline-flex;align-items:center;padding:0 16px}
  .check-pill span{min-height:44px;display:inline-flex;align-items:center;padding:0 16px}
  .footer-links a,.back-link{display:inline-flex;align-items:center;min-height:44px}
  .card{padding:20px}
  .page-body{padding-bottom:32px}
}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:68px!important}
.pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);min-height:40px;padding:0 12px;background:none;border:0;color:var(--muted);font-size:13px;font-weight:600;border-radius:var(--radius)}
.pw-toggle:hover{color:var(--cream)}
button[aria-busy=true]{opacity:.65;cursor:progress}

/* ----- browse: compact search, collapsible filters, filter chips ----- */
.filter-bar{padding:16px 18px}
.search-row{display:flex;gap:10px;align-items:stretch}
.search-row .field{flex:1;min-width:0}
.search-row .btn{flex:none;padding:0 22px}
.filters{margin-top:8px}
.filters summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;color:var(--muted);font-size:14px;font-weight:600}
.filters summary::-webkit-details-marker{display:none}
.filters summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)}
.filters[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.filters summary .badge{background:var(--orange);color:var(--black);border-radius:10px;font-size:11px;font-weight:800;padding:2px 8px}
.filters-body{padding-top:6px}
.filter-grid{grid-template-columns:1.2fr .9fr .7fr}
.filters-body .specialty-pills{margin-top:14px}
@media(min-width:861px){.js .filters>summary{display:none}}
@media(max-width:600px){
  .filter-grid{grid-template-columns:1fr 1fr}
  .filter-grid .field:first-child{grid-column:1/-1}
}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 6px 0 14px;border:1px solid var(--line-strong);border-radius:20px;background:var(--charcoal-2);font-size:13px;font-weight:600;color:var(--cream);text-decoration:none}
.chip:hover{border-color:var(--orange)}
.chip .x{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;color:var(--muted);font-size:16px;line-height:1}
@media(max-width:860px){.chip{min-height:44px}}
.results-meta{margin-top:20px}

/* cards: two-up grid on phones, like a native list */
@media(max-width:600px){
  .frame-grid{grid-template-columns:1fr 1fr!important;gap:12px}
  .frame-sprockets,.frame-number{display:none}
  .frame-body{padding:12px}
  .frame-body h3{font-size:15px;line-height:1.25}
  .frame-loc{font-size:12px;margin-bottom:8px}
  .frame-boost{top:8px;left:8px;font-size:10px;padding:3px 6px}
}

/* ----- profile: sticky contact bar on phones ----- */
.actionbar{display:none}
@media(max-width:860px){
  .actionbar{
    display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:95;
    padding:10px 16px calc(10px + var(--safe-b));
    background:rgba(8,8,8,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  }
  .actionbar .btn:first-child{flex:1}
  .has-actionbar .profile-actions [data-open-contact]{display:none}
}
.profile-actions .btn{min-height:44px}

/* ----- contact form: bottom sheet on phones ----- */
.modal{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain}
.modal-close{width:44px;height:44px;top:8px;right:8px;display:grid;place-items:center;border-radius:50%}
.modal-close:hover{background:var(--charcoal-3);color:var(--cream)}
@keyframes sheet-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:600px){
  .modal-overlay{align-items:flex-end;padding:0}
  .modal{border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-width:none;max-height:92vh;max-height:92dvh;padding:26px 20px calc(24px + var(--safe-b));animation:sheet-up .28s var(--ease)}
  .modal::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line-strong);margin:-12px auto 16px}
}
.sent-icon{width:52px;height:52px;border-radius:50%;background:rgba(79,191,106,.15);color:#4fbf6a;display:grid;place-items:center;margin:4px auto 14px}
.sent-note{text-align:center}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:32px;background:var(--cream);color:var(--black);padding:12px 20px;border-radius:24px;font-size:14px;font-weight:600;z-index:300;box-shadow:0 8px 30px rgba(0,0,0,.5);max-width:calc(100vw - 32px)}
@media(max-width:860px){
  .toast{bottom:calc(var(--tabbar-h) + var(--safe-b) + 16px)}
  .has-actionbar .toast{bottom:calc(var(--actionbar-h) + var(--safe-b) + 16px)}
}

/* ----- sign-up: form first on phones ----- */
@media(max-width:860px){
  .auth-split{display:flex;flex-direction:column;gap:22px}
  .auth-pitch{display:contents}
  .auth-pitch .page-title{margin-bottom:0}
  .auth-card{order:1}
  .pitch-list{order:2}
}

/* ----- creator dashboard: progress + next step ----- */
.dash-head{align-items:center}
.dash-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dash-title .page-title{margin-bottom:0}
.progress{height:8px;background:var(--charcoal-3);border-radius:4px;overflow:hidden;margin:8px 0 6px}
.progress span{display:block;height:100%;background:var(--orange);border-radius:4px;transition:width .4s var(--ease)}
.progress-label{font-size:13px;color:var(--muted);margin-bottom:6px}
.checklist li{padding:0}
.checklist li>a,.checklist li>span{display:flex;align-items:center;min-height:48px;padding:0 0 0 32px;color:inherit;text-decoration:none}
.checklist li::before{top:16px}
.checklist li.done::after{top:21px}
.checklist li>a:hover{color:var(--orange)}
.checklist li:not(.done)>a::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted-2);border-top:2px solid var(--muted-2);transform:rotate(45deg);margin-right:6px}
.next-step{margin-top:16px}
.hint-line{font-size:13px;color:var(--muted);margin-top:10px}

/* ----- editor: sticky save bar ----- */
.savebar{position:sticky;bottom:0;z-index:20;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:26px -28px -28px;padding:16px 28px;background:linear-gradient(180deg,rgba(22,22,22,0),var(--charcoal) 38%);border-radius:0 0 var(--radius) var(--radius)}
@media(max-width:860px){
  .savebar{bottom:calc(var(--tabbar-h) + var(--safe-b));margin:22px -20px -20px;padding:14px 20px}
}

/* ----- admin on a phone: one scrolling nav row, denser stats ----- */
@media(max-width:860px){
  .admin-nav .nav-in{height:auto;flex-wrap:wrap;padding:8px 16px;gap:6px 12px}
  .admin-nav .nav-links{display:flex!important;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;width:100%;order:3;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .admin-nav .nav-links::-webkit-scrollbar{display:none}
  .admin-nav .nav-links a{padding:10px 12px}
  .admin-nav .nav-cta,.admin-nav .nav-cta .btn.secondary{display:inline-flex!important}
  .stat-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat{padding:14px}
  .stat b{font-size:28px}
}

/* ----- account page log-out card ----- */
.logout-card{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}

/* fix: visually-hidden checkboxes in pills must not be card-wide (caused horizontal scroll on phones) */
.check-pill{position:relative;display:inline-block}
.check-pill input{position:absolute;left:0;top:0;width:1px!important;height:1px!important;min-height:0!important;opacity:0;pointer-events:none}

/* phones: one specialty tag on a card, plus a +N count */
.frame-more{display:none;font-family:var(--font-mono);font-size:12px;color:var(--muted);align-items:center;padding:0 2px}
@media(max-width:600px){
  .frame-tag.extra{display:none}
  .frame-more{display:inline-flex}
  .has-actionbar .profile-actions [data-share]{display:none}
}

/* touch targets: close the remaining gaps found in the phone audit */
.brand{min-height:44px}
.pw-toggle{min-height:44px}
@media(max-width:860px){
  .btn.small{min-height:44px}
  .auth-alt a,.small-note a,.hint a{display:inline-flex;align-items:center;min-height:44px}
  .footer-note a{display:inline-block;padding:14px 3px;margin:-14px 0}
}
.avatar-row{flex-wrap:wrap}

/* desktop shows the filter controls, so only keep the "Clear all" chip there */
@media(min-width:861px){.js .chip:not(.chip-clear){display:none}.js .chips{margin-top:6px}}


/* ==========================================================
   v3: new display typeface (Fraunces, an expressive serif) + profile cover
   ========================================================== */
:root{--font-display:'Fraunces',Georgia,'Times New Roman',serif}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.015em;line-height:1.1;font-optical-sizing:auto}
.brand{font-size:22px;font-weight:700;letter-spacing:-.015em}
.brand .dot{font-style:italic;font-weight:500}
.hero h1{font-size:clamp(38px,5.2vw,64px);line-height:1.04;letter-spacing:-.025em}
.hero h1 .accent{font-style:italic;font-weight:500}
.hero-stat b,.stat b{font-size:30px;font-weight:600;line-height:1.1}
.boost-card .b-price{font-size:38px;font-weight:600}
.side-rate{font-size:19px;font-weight:600;letter-spacing:0}
.page-title{font-size:clamp(30px,4.2vw,48px);line-height:1.08}
.page-title.small{font-size:clamp(26px,3.2vw,34px)}
.section-head h2{font-size:clamp(28px,3.4vw,40px);line-height:1.1}
.card-title{font-size:22px;line-height:1.15}
.cat-card h3{font-size:24px}
.step h3{font-size:21px}
.modal h3,.auth-card h2,.empty-state h3{font-size:24px}
.profile-name-row h1{font-size:clamp(30px,4.4vw,44px);line-height:1.05}

/* ----- profile cover (header image) ----- */
.profile-cover-wrap{position:relative}
.profile-cover{position:relative;height:clamp(180px,21vw,290px);overflow:hidden;background:var(--charcoal)}
.profile-cover img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.profile-cover.is-default img{object-position:80% 46%}
.profile-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,.55) 0,rgba(8,8,8,0) 30%),linear-gradient(0deg,var(--black) 0,rgba(8,8,8,.75) 22%,rgba(8,8,8,0) 62%)}
.cover-nav{position:absolute;top:14px;left:0;right:0;z-index:3}
.cover-back{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:22px;background:rgba(8,8,8,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--cream);font-size:13.5px;font-weight:600;text-decoration:none;border:1px solid var(--line)}
.cover-back:hover{border-color:var(--orange);color:var(--orange)}
.profile-hero{padding:0 0 34px}
.profile-top{position:relative;z-index:2;margin-top:-64px;align-items:flex-start}
.profile-top .avatar{width:128px;height:128px;object-fit:cover;background:var(--charcoal);box-shadow:0 0 0 4px var(--black)}
.profile-top>div{margin-top:72px}
@media(max-width:860px){
  .profile-cover{height:clamp(150px,40vw,230px)}
  .profile-top{margin-top:-48px;flex-direction:column;gap:14px}
  .profile-top .avatar{width:96px;height:96px}
  .profile-top>div{margin-top:0}
}
.cover-preview{position:relative;height:130px;max-width:520px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--black)}
.cover-preview img{width:100%;height:100%;object-fit:cover;object-position:80% 46%}

/* hero: serif headline is wider than the old condensed one, so tighten the text column and move the photo right */
.hero h1{font-size:clamp(36px,4.4vw,56px)}
.hero-in > *{max-width:560px}
.hero-bg{left:calc(max(0px,(100vw - 1200px)/2) + 28px + 430px)}
@media(min-width:861px) and (max-width:1180px){
  .hero-in > *{max-width:480px}
  .hero-bg{left:calc(28px + 470px)}
  .hero h1{font-size:clamp(34px,4.6vw,46px)}
}
@media(max-width:860px){.hero h1{font-size:clamp(34px,9vw,46px)}}

[hidden]{display:none!important}

@media(max-width:860px){.linklike{min-height:44px;padding:0 8px}}

/* ----- homepage film-strip: thin visual under the top bar, phones only ----- */
.filmstrip{display:none}
@media(max-width:860px){
  .filmstrip{display:block;line-height:0;background:var(--black);min-height:1px}
  .filmstrip picture,.filmstrip img{display:block}
  .filmstrip img{width:100%;height:auto;max-height:110px;object-fit:cover}
}

/* ----- sortable table headers ----- */
table.data th a.sortable{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:3px}
table.data th a.sortable:hover{color:var(--orange)}
table.data th a.sortable.active{color:var(--orange)}

/* ----- cover photo repositioning ----- */
.cover-reposition-toggle{margin-top:14px}
.cover-reposition-toggle summary{cursor:pointer;color:var(--muted);font-size:13.5px;font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:36px}
.cover-reposition-toggle summary::-webkit-details-marker{display:none}
.cover-reposition-toggle summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .2s var(--ease)}
.cover-reposition-toggle[open] summary::before{transform:rotate(45deg)}
.cover-reposition-toggle summary:hover{color:var(--orange)}
.cover-reposition{margin-top:14px;max-width:560px}
.cover-reposition-stage{position:relative;height:280px;max-height:50vh;background:#000;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;touch-action:none}
.cover-reposition-img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
.cover-reposition-dot{position:absolute;width:22px;height:22px;margin-left:-11px;margin-top:-11px;border-radius:50%;border:2px solid var(--cream);background:var(--orange);box-shadow:0 0 0 2px rgba(0,0,0,.5);pointer-events:none}
.cover-reposition-preview{height:70px;border-radius:var(--radius);overflow:hidden;margin-top:10px;border:1px solid var(--line)}
.cover-reposition-preview img{width:100%;height:100%;object-fit:cover;display:block}