@font-face { font-family:"Inter"; src:url("assets/fonts/Inter-Latin-400-500.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:"Inter"; src:url("assets/fonts/Inter-Latin-400-500.woff2") format("woff2"); font-style:normal; font-weight:500; font-display:swap; }
@font-face { font-family:"Picks Mono"; src:url("assets/featured-work/IBMPlexMono-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }

:root { --ink:#211715; --gold:#c89b52; --paper:#eee9df; --white:#fff; --muted:#716b66; --line:rgb(33 23 21 / 18%); --page:min(1460px,calc(100vw - 72px)); color:var(--ink); background:var(--paper); font-family:"Inter","Helvetica Neue","Noto Sans JP","Yu Gothic",sans-serif; font-synthesis:none; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--paper); }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
img { display:block; width:100%; }
[hidden] { display:none !important; }
.skip-link { position:fixed; top:10px; left:10px; z-index:100; padding:10px 14px; color:var(--white); background:var(--ink); transform:translateY(-180%); }
.skip-link:focus { transform:none; }

.picks-header { position:fixed; inset:0 0 auto; z-index:30; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:92px; padding:0 36px; background:rgb(238 233 223 / 88%); backdrop-filter:blur(18px); transition:height .3s ease,box-shadow .3s ease; }
.picks-header.is-scrolled { height:72px; box-shadow:0 1px 0 var(--line); }
.picks-brand { width:150px; }
.picks-header nav { display:flex; gap:32px; font:9px/1 "Picks Mono",monospace; letter-spacing:.14em; }
.picks-back { justify-self:end; font:9px/1 "Picks Mono",monospace; letter-spacing:.14em; }

.picks-hero { padding:160px max(36px,calc((100vw - 1460px)/2)) 0; }
.picks-hero-copy { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(290px,.6fr); gap:7vw; align-items:end; width:var(--page); margin:0 auto 70px; }
.picks-eyebrow { grid-column:1/-1; margin:0 0 20px; color:var(--gold); font:9px/1 "Picks Mono",monospace; letter-spacing:.18em; }
.picks-hero h1 { margin:0; font-size:clamp(88px,12.5vw,190px); font-weight:400; line-height:.72; letter-spacing:-.085em; }
.picks-hero h1 span { display:block; white-space:nowrap; }
.picks-hero h1 span:last-child { color:var(--gold); }
.picks-intro { padding-bottom:2px; }
.picks-intro p { margin:0; }
.picks-intro p:first-child { margin-bottom:25px; font-size:clamp(22px,2vw,30px); line-height:1.35; letter-spacing:-.04em; }
.picks-intro p:last-child { color:var(--muted); font-size:13px; line-height:1.9; }

.picks-hero-image { position:relative; width:var(--page); aspect-ratio:1.92/1; margin:0 auto; overflow:hidden; background:#d9d1c3; }
.picks-hero-image::after { position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgb(15 9 7 / 58%)); content:""; }
.picks-hero-image img { height:100%; object-fit:cover; object-position:center 48%; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.picks-hero-image:hover img { transform:scale(1.018); }
.picks-hero-image figcaption { position:absolute; left:35px; bottom:30px; z-index:1; color:var(--white); font:9px/1 "Picks Mono",monospace; letter-spacing:.15em; }
.picks-section { padding:clamp(110px,12vw,190px) max(36px,calc((100vw - 1460px)/2)); background:var(--white); }
.picks-section-head { display:grid; grid-template-columns:.7fr 1.8fr; gap:6vw; align-items:end; width:var(--page); margin:0 auto clamp(70px,8vw,120px); }
.picks-section-head > div p { margin:0 0 26px; font:9px/1 "Picks Mono",monospace; letter-spacing:.15em; }
.picks-section-head > div span { color:var(--muted); font-size:11px; line-height:1.7; }
.picks-section-head h2 { margin:0; font-size:clamp(55px,6.3vw,96px); font-weight:400; line-height:.91; letter-spacing:-.07em; }
.picks-section-head h2 span { display:block; white-space:nowrap; }
.picks-filters { display:flex; flex-wrap:wrap; gap:9px; width:var(--page); margin:0 auto 48px; }
.picks-filters button { padding:12px 18px 11px; border:1px solid var(--line); border-radius:999px; background:transparent; font:9px/1 "Picks Mono",monospace; letter-spacing:.08em; cursor:pointer; transition:color .25s ease,background .25s ease,border-color .25s ease; }
.picks-filters button:hover,.picks-filters button:focus-visible,.picks-filters button.is-active { color:var(--white); border-color:var(--ink); background:var(--ink); }

.pick-list { width:var(--page); margin:0 auto; border-bottom:1px solid var(--line); }
.pick-card { display:grid; grid-template-columns:44px repeat(11,minmax(0,1fr)); gap:clamp(18px,2.4vw,34px); align-items:start; min-height:390px; padding:48px 0; border-top:1px solid var(--line); }
.pick-number { align-self:start; padding-top:5px; color:var(--muted); font:9px/1 "Picks Mono",monospace; }
.pick-image { grid-column:2/6; grid-row:1/3; width:100%; aspect-ratio:20/13; margin:0; overflow:hidden; background:#e1ddd5; }
.pick-image img { height:100%; object-fit:cover; }
.pick-main { grid-column:6/10; }
.pick-main > p { margin:0 0 15px; color:var(--gold); font:8px/1 "Picks Mono",monospace; letter-spacing:.14em; }
.pick-main h3 { margin:0 0 18px; font-size:clamp(29px,2.65vw,43px); font-weight:400; line-height:1.04; letter-spacing:-.055em; }
.pick-main > span { display:block; max-width:560px; color:var(--muted); font-size:12px; line-height:1.9; }
.pick-meta { grid-column:10/13; margin:0; border-top:1px solid var(--line); }
.pick-meta div { display:grid; grid-template-columns:82px 1fr; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.pick-meta dt { color:var(--muted); font-size:9px; }
.pick-meta dd { margin:0; font-size:11px; }
.pick-time { grid-column:6/8; grid-row:2; align-self:end; display:grid; grid-template-columns:auto auto; align-items:end; justify-content:start; padding-top:24px; }
.pick-time > span { grid-column:1/-1; margin-bottom:21px; color:var(--muted); font-size:9px; }
.pick-time strong { font-size:clamp(72px,7vw,104px); font-weight:400; line-height:.65; letter-spacing:-.08em; }
.pick-time b { margin:0 0 7px 7px; font-size:11px; font-weight:400; }
.pick-time small { grid-column:1/-1; margin-top:18px; color:var(--muted); font-size:9px; }
.pick-actions { grid-column:9/13; grid-row:2; display:grid; gap:8px; align-self:end; }
.pick-actions a { display:flex; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--ink); font-size:10px; transition:padding .25s ease,color .25s ease; }
.pick-actions a:hover,.pick-actions a:focus-visible { padding-left:6px; color:var(--gold); }
.filter-empty { width:var(--page); margin:35px auto 0; color:var(--muted); }
.photo-credits { width:var(--page); margin:42px auto 0; padding-top:24px; color:var(--muted); border-top:1px solid var(--line); font-size:10px; line-height:1.75; }
.photo-credits summary { color:var(--ink); font:9px/1 "Picks Mono",monospace; letter-spacing:.12em; cursor:pointer; }
.photo-credits p { max-width:760px; margin:20px 0; }
.photo-credits ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 28px; margin:0; padding:0; list-style:none; }
.photo-credits a { border-bottom:1px solid var(--line); }

.picks-plan { display:grid; grid-template-columns:1.35fr .65fr; gap:7vw; padding:clamp(110px,12vw,190px) max(36px,calc((100vw - 1460px)/2)); color:var(--white); background:var(--ink); }
.picks-plan-title p { margin:0 0 55px; color:var(--gold); font:9px/1 "Picks Mono",monospace; letter-spacing:.15em; }
.picks-plan-title h2 { margin:0; font-size:clamp(56px,7vw,105px); font-weight:400; line-height:.9; letter-spacing:-.07em; }
.picks-plan-title h2 span { display:block; white-space:nowrap; }
.picks-plan-copy { align-self:end; max-width:570px; }
.picks-plan-copy > p { margin:0 0 42px; color:rgb(255 255 255 / 72%); font-size:15px; line-height:2; }
.picks-plan-copy > div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.picks-plan-copy a { display:flex; justify-content:space-between; gap:20px; padding:18px; color:var(--ink); background:var(--white); font:9px/1 "Picks Mono",monospace; letter-spacing:.08em; }
.picks-plan-copy a:first-child { background:var(--gold); }
.picks-plan-copy small { display:block; margin-top:24px; color:rgb(255 255 255 / 52%); font-size:9px; }

.picks-footer { display:grid; grid-template-columns:1fr auto auto; gap:70px; align-items:end; padding:70px 36px 28px; background:var(--white); }
.picks-footer img { width:230px; }
.picks-footer nav { display:flex; gap:28px; font:9px/1 "Picks Mono",monospace; }
.picks-footer p { margin:0; font:9px/1 "Picks Mono",monospace; }
.reveal { opacity:0; transform:translateY(38px); transition:opacity .85s ease,transform .85s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width:1120px) {
  .pick-card { grid-template-columns:38px repeat(7,minmax(0,1fr)); min-height:440px; }
  .pick-image { grid-column:2/5; grid-row:1/3; }
  .pick-main { grid-column:5/9; }
  .pick-meta { grid-column:5/9; grid-row:2; align-self:end; }
  .pick-time { grid-column:2/4; grid-row:3; }
  .pick-actions { grid-column:5/9; grid-row:3; grid-template-columns:repeat(2,minmax(0,1fr)); justify-self:stretch; width:auto; }
}

@media (max-width:800px) {
  :root { --page:calc(100vw - 36px); }
  .picks-header { height:72px; padding:0 18px; grid-template-columns:1fr auto; }
  .picks-header nav { display:none; }
  .picks-brand { width:132px; }
  .picks-hero { padding:120px 18px 0; }
  .picks-hero-copy { grid-template-columns:1fr; gap:42px; }
  .picks-eyebrow { margin-bottom:0; }
  .picks-hero h1 { font-size:clamp(70px,20vw,140px); }
  .picks-intro { max-width:600px; }
  .picks-hero-image { aspect-ratio:1.15/1; }
  .picks-hero-image figcaption { left:20px; bottom:20px; }
  .picks-section { padding-right:18px; padding-left:18px; }
  .picks-section-head { grid-template-columns:1fr; gap:34px; }
  .picks-section-head h2 { font-size:clamp(48px,11.5vw,82px); }
  .pick-card { grid-template-columns:34px 1fr; gap:18px; padding:45px 0; }
  .pick-image,.pick-main,.pick-meta,.pick-time,.pick-actions { grid-column:2; grid-row:auto; }
  .pick-image { margin-bottom:12px; }
  .pick-meta { margin-top:12px; }
  .pick-time { margin:22px 0; }
  .pick-actions { grid-template-columns:repeat(2,minmax(0,1fr)); justify-self:stretch; width:auto; }
  .photo-credits ul { grid-template-columns:1fr; }
  .picks-plan { grid-template-columns:1fr; gap:65px; padding-right:18px; padding-left:18px; }
  .picks-footer { grid-template-columns:1fr; gap:38px; padding-right:18px; padding-left:18px; }
  .picks-footer nav { flex-wrap:wrap; }
}

@media (max-width:520px) {
  .picks-hero h1 { font-size:20vw; }
  .picks-hero-image { aspect-ratio:.9/1; }
  .picks-section-head h2 { font-size:11.2vw; }
  .pick-main h3 { font-size:10vw; }
  .pick-actions { grid-template-columns:1fr; }
  .picks-plan-title h2 { font-size:10.3vw; }
  .picks-plan-copy > div { grid-template-columns:1fr; }
  .picks-footer img { width:190px; }
}

@media (max-width:520px) {
  .picks-hero { padding:104px 18px 0; }
  .picks-hero-copy { gap:24px; margin-bottom:42px; }
  .picks-hero h1 { font-size:17vw; }
  .picks-intro p:first-child { margin-bottom:14px; font-size:20px; }
  .picks-hero-image { aspect-ratio:1.2/1; }
  .picks-section { padding:70px 18px 80px; }
  .picks-section-head { gap:24px; margin-bottom:42px; }
  .picks-section-head h2 { font-size:10.2vw; }
  .picks-filters { gap:7px; margin-bottom:32px; }
  .picks-filters button { padding:10px 13px 9px; }
  .pick-card { gap:14px; min-height:0; padding:28px 0; }
  .pick-image { margin-bottom:6px; }
  .pick-main h3 { margin-bottom:12px; font-size:8.8vw; }
  .pick-main>span { line-height:1.65; }
  .pick-meta { margin-top:8px; }
  .pick-meta div { padding:10px 0; }
  .pick-time { margin:14px 0; padding-top:0; }
  .pick-time>span { margin-bottom:14px; }
  .pick-time strong { font-size:62px; }
  .pick-time small { margin-top:12px; }
  .pick-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .photo-credits { margin-top:28px; padding-top:18px; }
  .picks-plan { gap:40px; padding:70px 18px; }
  .picks-plan-title p { margin-bottom:28px; }
  .picks-plan-title h2 { font-size:9.5vw; }
  .picks-plan-copy>p { margin-bottom:24px; font-size:13px; line-height:1.75; }
  .picks-plan-copy a { padding:14px; }
  .picks-plan-copy small { margin-top:16px; }
  .picks-footer { gap:24px; padding:46px 18px 22px; }
  .picks-footer img { width:170px; }
  .pick-card { grid-template-columns:26px minmax(0,1fr) 116px; column-gap:12px; }
  .pick-image, .pick-main, .pick-meta { grid-column:2 / 4; }
  .pick-time { grid-column:2; align-self:end; margin:14px 0 0; }
  .pick-actions { grid-column:3; grid-template-columns:1fr; align-self:end; gap:0; }
  .pick-actions a { padding:11px 0; font-size:9px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .picks-hero-image img { transition:none; }
}