/* JFPhotos Explore: a quiet contact sheet, with photography as the color. */
:root {
  --bg:#101315; --fg:#f3f3ec; --dim:#aeb8bb; --hair:#ffffff24;
  --font:"Avenir Next",Avenir,"Segoe UI",sans-serif;
}
body { background:var(--bg); }
#space { opacity:.1; }
.grain { background:linear-gradient(180deg,#10131533,#101315bb); }
.shell { width:min(1360px,calc(100% - 96px)); }
.nav { height:94px; border-bottom:1px solid var(--hair); }
.logo { display:flex; align-items:baseline; gap:13px; font-size:23px; font-weight:500; letter-spacing:-1px; }
.nav .logo span { display:inline; }
.logo span { margin:0; font-size:11px; letter-spacing:.08em; color:var(--dim); font-weight:400; }
.links { gap:28px; }
.nav-note { font-size:12px; color:var(--dim); }
.links .outline { padding:10px 16px; font-size:12px; border-color:#ffffff38; }
#navChat { display:none; }
.hero { flex:1; min-height:0; display:block; padding:58px 0 36px; text-align:left; }
.explore-intro { display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center; margin-bottom:55px; }
.hero h1 { font-size:clamp(46px,5.8vw,82px); font-weight:400; line-height:1.02; letter-spacing:-.065em; margin:0; }
.search-area { min-width:0; padding-top:10px; }
.hero .search-area>p { max-width:none; margin:0 0 19px; color:#d6dddf; font-size:17px; line-height:1.6; }
.composer { margin:0; width:100%; padding:6px; border:1px solid #65747c; border-radius:7px; background:#1b2429; box-shadow:none; backdrop-filter:none; }
.composer form { gap:4px; }
.composer input { font-size:14px; padding:17px 12px; }
.composer input::placeholder { color:#b0bec4; opacity:1; }
.send { width:auto; height:46px; padding:0 18px; border-radius:4px; font-size:13px; font-weight:600; background:#e5edf0; color:#182025; }
.ideas { justify-content:flex-start; align-items:center; gap:8px; margin-top:15px; }
.ideas>span { color:var(--dim); font-size:12px; margin-right:4px; }
.idea { font-size:12px; padding:6px 11px; border:1px solid #ffffff30; border-radius:4px; background:transparent; color:#d4dfe3; transition:background .15s; }
.idea:hover { transform:none; background:#ffffff0d; border-color:#a3b4bb; }
.discovery-heading { display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:18px; }
.discovery-heading h2 { margin:0; font-size:15px; font-weight:500; letter-spacing:0; }
.hero .discovery-heading p { max-width:none; margin:0; font-size:12px; color:var(--dim); line-height:1.5; }
.discovery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.discovery-card { display:block; min-width:0; }
.discovery-image { position:relative; overflow:hidden; background:#1b2429; aspect-ratio:1.38; }
.discovery-image img { width:100%; height:100%; display:block; object-fit:cover; transition:filter .2s; }
.discovery-card:first-child img { object-position:50% 55%; }
.discovery-action { position:absolute; right:12px; bottom:12px; padding:9px 12px; background:#101315e8; font-size:11px; color:var(--fg); opacity:0; transition:opacity .2s; }
.discovery-card:hover .discovery-action,.discovery-card:focus-visible .discovery-action { opacity:1; }
.discovery-card:hover img { filter:brightness(1.08); }
.discovery-card:focus-visible { outline-offset:6px; }
.discovery-caption { display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; }
.discovery-caption h3 { font-size:21px; font-weight:400; letter-spacing:-.035em; margin:0; }
.discovery-caption>span { color:#bccbd2; font-size:20px; }
.hero .discovery-card>p { color:var(--dim); font-size:12px; line-height:1.7; margin:6px 0 0; max-width:32ch; }
.archive-invitation { display:flex; justify-content:center; align-items:center; gap:14px; padding-top:36px; }
.hero .archive-invitation p { font-size:12px; color:var(--dim); margin:0; }
.archive-invitation .browse-archive { margin:0; padding:8px 0; font-size:12px; color:var(--fg); }
.archive-invitation .browse-archive span { margin-left:5px; }
.foot { border-top:1px solid var(--hair); justify-content:space-between; gap:14px; padding:22px 0 25px; color:var(--dim); font-size:11px; line-height:1.6; }
.foot a { color:#d4dfe3; }
@media(min-width:1500px) {
  .hero { padding-top:72px; }
  .explore-intro { margin-bottom:66px; }
}
@media(max-width:1000px) {
  .shell { width:calc(100% - 56px); }
  .explore-intro { gap:32px; }
  .hero h1 { font-size:60px; }
  .hero .search-area>p { font-size:15px; }
  .composer input { font-size:12px; padding-left:9px; }
  .send { padding:0 12px; }
  .discovery-grid { gap:18px; }
  .discovery-caption h3 { font-size:19px; }
}
@media(max-width:760px) {
  .shell { width:calc(100% - 36px); }
  .nav { height:74px; }
  .logo { font-size:21px; gap:9px; }
  .logo span { font-size:10px; }
  .nav-note { display:none; }
  .links { gap:0; }
  .links .outline { padding:9px 12px; font-size:11px; }
  .hero { padding:34px 0 24px; }
  .explore-intro { grid-template-columns:1fr; gap:22px; margin-bottom:35px; }
  .hero h1 { font-size:clamp(46px,11.6vw,74px); letter-spacing:-.06em; }
  .search-area { padding:0; }
  .hero .search-area>p { font-size:14px; margin-bottom:13px; }
  .composer input { font-size:12px; padding:15px 8px; }
  .send { height:42px; padding:0 13px; }
  .ideas { margin-top:12px; }
  .discovery-heading { display:block; margin-bottom:16px; }
  .discovery-heading h2 { font-size:15px; }
  .hero .discovery-heading p { margin-top:5px; font-size:11px; }
  .discovery-grid { grid-template-columns:1fr; gap:25px; }
  .discovery-card { display:grid; grid-template-columns:42% 1fr; column-gap:17px; align-content:start; }
  .discovery-image { grid-row:1 / 3; aspect-ratio:1.12; }
  .discovery-caption { margin-top:5px; align-self:end; }
  .discovery-caption h3 { font-size:19px; }
  .discovery-caption>span { font-size:17px; }
  .hero .discovery-card>p { font-size:11px; margin-top:5px; line-height:1.6; align-self:start; }
  .discovery-action { display:none; }
  .archive-invitation { padding-top:30px; gap:9px; flex-wrap:wrap; }
  .hero .archive-invitation p,.archive-invitation .browse-archive { font-size:11px; }
  .foot { font-size:10px; padding-top:18px; }
}
@media(max-width:360px) {
  .shell { width:calc(100% - 28px); }
  .logo { font-size:19px; gap:7px; }
  .links .outline { font-size:10px; padding:8px 10px; }
  .composer input { font-size:11px; }
  .send { padding:0 10px; }
  .discovery-card { column-gap:13px; }
  .discovery-caption h3 { font-size:17px; }
}
@media(prefers-reduced-motion:reduce) {
  .discovery-image img,.discovery-action { transition:none; }
}