/* The look lives in these tokens. Swap them to change the whole site.
   From the last two references Ben sent: a museum poster (cream paper, wide black capitals
   whose letters stretch into ruled lines, one thick electric-blue ribbon over the type,
   small magenta labels) and a travel poster (sand ground, concentric orange and red sun,
   blue water with white bridge posts). The ruled card grid stays from his first pick. */
:root{
  --bg:#f4f0e3; --ink:#111; --blue:#2a14ff; --hot:#ff8a1f; --red:#ff3320; --pink:#c312a8;
  --sand:#ead9c9; --sky:#2f9ee6; --muted:#55524a;
  --rule:2px solid var(--ink);
  --font:"Archivo","Helvetica Neue",Arial,sans-serif;
  --bars:linear-gradient(var(--ink),var(--ink)) top/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom/100% 2px no-repeat;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.45}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.skip{position:absolute;left:8px;top:-80px;z-index:10;background:var(--ink);color:#fff;font-weight:600;padding:10px 14px;border-radius:6px}
.skip:focus{top:8px}
main:focus{outline:none}
.nojs{padding:20px}
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:var(--rule);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;padding:14px 20px}
.brand{font-weight:800;font-size:20px;text-decoration:none;letter-spacing:-.01em}
nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--pink)}
nav a{text-decoration:none}nav a:hover{text-decoration:underline}
.hero{border-bottom:var(--rule);padding:clamp(20px,4vw,48px) clamp(16px,4vw,48px);display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
@media (max-width:760px){.hero{grid-template-columns:1fr}}
.hero h1{font-weight:600;font-size:clamp(20px,2.4vw,28px);line-height:1.15;margin:0 0 6px}
.hero mark{background:none;color:var(--pink)}
.hero p{max-width:46ch;margin:0 0 18px}
.stack{position:relative;margin:0 0 26px}
.ribbon{position:absolute;inset:-4% -2%;width:104%;height:108%;pointer-events:none;mix-blend-mode:multiply;z-index:1}
.ribbon path{fill:none;stroke:var(--blue);stroke-width:clamp(14px,3vw,38px);vector-effect:non-scaling-stroke;stroke-linecap:round}
.contents{list-style:none;margin:0;padding:0}
.contents a{display:flex;align-items:baseline;gap:.5em;text-decoration:none;font-size:clamp(30px,4.9vw,70px);line-height:1.08}
.contents .nm{font-weight:500;text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap}
.contents .bars,.group h2::after{content:"";flex:1;min-width:24px;height:.56em;align-self:center;background:var(--bars)}
.contents .num i{font-style:normal}
.contents .num{position:relative;z-index:2;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--pink);white-space:nowrap}
@media (max-width:760px){.contents a{font-size:8.6vw}.contents .num i{display:none}}
.btn{display:inline-block;background:var(--blue);color:#fff;font-weight:600;text-decoration:none;padding:12px 20px;border-radius:99px}
.btn{transition:background .18s,translate .18s,box-shadow .18s}
.sun{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--sand)}
.sun i{position:absolute;left:50%;top:42%;aspect-ratio:1;border-radius:50%;translate:-50% -50%}
.sun .r1{width:90%;background:var(--hot)}.sun .r2{width:62%;background:#ff5a1f}.sun .r3{width:44%;background:var(--red)}
.sun b{position:absolute;top:10px;right:16px;font-weight:800;font-size:clamp(15px,1.8vw,22px);letter-spacing:-.02em}
.sun::after{content:"";position:absolute;left:0;right:0;bottom:0;height:13%;background:repeating-linear-gradient(90deg,#fff 0 5px,transparent 5px 9px) top/100% 40% no-repeat,var(--sky)}
@media (max-width:760px){.sun{aspect-ratio:5/4}.sun .r1{width:60%}.sun .r2{width:41%}.sun .r3{width:29%}}
.group{scroll-margin-top:64px}
.group h2{display:flex;gap:.4em;font-weight:500;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(30px,5.4vw,60px);line-height:1;margin:0;padding:28px 20px 4px;white-space:nowrap}
.group .note{margin:0;padding:0 20px 18px;color:var(--pink);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));border-top:var(--rule);overflow:hidden}
.card{transition:background .18s;display:flex;flex-direction:column;gap:10px;padding:16px;text-decoration:none;border-right:var(--rule);border-bottom:var(--rule);margin-right:-2px;background:var(--bg)}
.card:focus-visible,.card:active{background:var(--hot)}
.card:focus-visible .meta,.card:active .meta{color:var(--ink)}
.ph{aspect-ratio:1;background:#fff;border:var(--rule);display:grid;place-items:center;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover;transition:scale .35s cubic-bezier(.2,.7,.2,1)}
.ph span{font-weight:800;font-size:44px;color:var(--blue)}
.t{font-weight:600;line-height:1.2}
.meta{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted);margin-top:auto}
.meta .tag{background:var(--blue);color:#fff;font-weight:600;padding:0 8px;border-radius:99px}
footer{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center;padding:34px 20px 22px;font-size:14px;font-weight:600;color:var(--ink);background:repeating-linear-gradient(90deg,#fff 0 5px,transparent 5px 9px) top/100% 14px no-repeat,var(--sky)}
footer button{font:inherit;color:inherit;background:none;border:var(--rule);border-radius:99px;padding:6px 14px;cursor:pointer}
footer button:hover{background:var(--ink);color:#fff}

/* Hover only where there is a pointer that hovers: on a phone a hover sticks after the tap. */
@media (hover:hover){
  .contents a:hover .nm{color:var(--red)}
  .btn:hover{background:var(--ink);translate:-2px -2px;box-shadow:4px 4px 0 var(--hot)}
  .card:hover{background:var(--hot)}.card:hover .meta{color:var(--ink)}
  .card:hover .ph img{scale:1.06}
}
.btn:active{background:var(--ink)}

/* Phone: one-row section bar that scrolls sideways, two cards across, thumb-sized targets. */
@media (max-width:600px){
  .top{padding:8px 16px 0;gap:0}
  .brand{padding:4px 0}
  nav{flex-wrap:nowrap;overflow-x:auto;gap:0 20px;width:calc(100% + 32px);margin:0 -16px;padding:0 16px;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav a{padding:13px 0;white-space:nowrap}
  .group{scroll-margin-top:92px}
  .group h2{padding:22px 16px 4px}.group .note{padding:0 16px 14px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{padding:10px;gap:8px}
  .t{font-size:14px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .meta{font-size:12px;flex-wrap:wrap;gap:4px 8px}
  .btn{display:block;text-align:center;padding:14px 20px}
  footer{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  footer a,footer button{min-height:44px;display:inline-flex;align-items:center}
}

/* Motion. Everything below is skipped when the visitor asks for reduced motion. */
html{scroll-behavior:smooth}
::selection{background:var(--blue);color:#fff}
@keyframes rise{from{opacity:0;translate:0 .35em}}
@keyframes stretch{from{scale:0 1}}
@keyframes wipe{from{clip-path:inset(-10% -10% 110% -10%)}to{clip-path:inset(-10%)}}
@keyframes pop{from{scale:0}}
@keyframes breathe{to{scale:1.045}}
@keyframes drift{to{background-position-x:9px,0}}
@keyframes sway{50%{translate:0 -1.2%;rotate:.5deg}}
.hero h1,.hero p,.btn{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.hero p{animation-delay:.08s}.btn{animation-delay:1s}
.contents .nm{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.15s + var(--i,0)*.09s)}
.contents .bars{transform-origin:left;animation:stretch .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.4s + var(--i,0)*.09s)}
.contents .num{animation:rise .5s both;animation-delay:calc(.9s + var(--i,0)*.09s)}
.ribbon{animation:wipe 1.5s .55s cubic-bezier(.65,0,.3,1) both,sway 9s 2.2s ease-in-out infinite}
.sun i{animation:pop .9s cubic-bezier(.2,1.2,.3,1) both,breathe 5s ease-in-out infinite alternate}
.sun .r1{animation-delay:.2s,1.2s}.sun .r2{animation-delay:.35s,1.9s;animation-duration:.9s,6s}.sun .r3{animation-delay:.5s,2.6s;animation-duration:.9s,7s}
.sun::after,footer{animation:drift 2.4s linear infinite}
.js .group h2::after{transform-origin:left;scale:0 1;transition:scale 1s cubic-bezier(.2,.7,.2,1) .1s}
.js .group.in h2::after{scale:1 1}
.js .card .ph,.js .card .t,.js .card .meta{opacity:0;translate:0 16px;transition:opacity .5s,translate .5s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*55ms)}
.js .card.in .ph,.js .card.in .t,.js .card.in .meta{opacity:1;translate:0}
.silk .ribbon{display:none}
.silk-field{position:absolute;inset:-8% -3%;width:106%;height:116%;pointer-events:none;mix-blend-mode:multiply;z-index:1;animation:wipex 1.6s .5s cubic-bezier(.65,0,.3,1) both}
@keyframes wipex{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.paused .ribbon,.paused .sun i,.paused .sun::after,.paused footer{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}