/* Journal pages: the same voice as the homepage and contact page — ink on paper, generous space, blue used sparingly */
:root{--gl:rgba(0,0,0,.09);--ink:#0d0d0d;--paper:#fff;--soft:#f3f3f1;--mid:#6b6b6b;--line:rgba(0,0,0,.12);--or:#0047ff;--g:clamp(18px,2.6vw,52px);--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.76,0,.24,1);--t-s:.45s;--t-b:1.1s;--t-l:1.6s;--stg:.06s}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font:400 16px/1.55 "Pitch Sans",Archivo,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-kerning:normal;font-optical-sizing:auto;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
.label{font:600 12px/1.4 "Pitch Sans",Archivo,sans-serif;font-stretch:125%;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);font-variant-numeric:tabular-nums}
/* the accent: Archivo heavy and fully wide, an echo of the Baggio mark */
.serif{font-family:"Pitch Sans",Archivo,sans-serif;font-weight:720;font-stretch:125%;letter-spacing:-.035em}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty;hanging-punctuation:first allow-end}
/* the hairline grid: five equal columns down the whole page, as on the homepage */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,var(--gl) 1px,transparent 1px) 0 0/20% 100%}
main,.foot2{position:relative;z-index:1}
@media (max-width:800px){body::before{background-size:50% 100%}}
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}}

/* header */
.top{position:fixed;left:0;right:0;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--g)*.7) var(--g);mix-blend-mode:difference;color:#fff}
.brand{display:block;width:clamp(150px,15vw,290px)}
.brand img{display:block;width:100%;height:auto;filter:invert(1)}
.menu{display:flex;gap:clamp(18px,2.4vw,40px);align-items:center}
.menu a{font:400 13px/1 "Pitch Sans",Archivo,sans-serif;letter-spacing:.02em;position:relative}
/* Contact stands on its own at the right; the other links sit a little to its left */
.menu a:last-child{margin-left:clamp(64px,12vw,230px)}
.menu a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor}

main{flex:1;padding:clamp(140px,14vw,240px) var(--g) clamp(72px,8vw,140px)}

/* journal index */
.jhead{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:end;margin-bottom:clamp(56px,7vw,130px)}
.jhead .label{grid-column:1/-1;margin-bottom:clamp(24px,2.6vw,48px)}
.jhead h1{grid-column:1/8;font:420 clamp(56px,9vw,190px)/.92 "Pitch Sans",Archivo,sans-serif;letter-spacing:-.05em}
.jhead p:not(.label){grid-column:9/13;font:300 clamp(18px,1.45vw,26px)/1.4 "Pitch Sans",Archivo,sans-serif;letter-spacing:-.01em;color:#333;max-width:26ch}
.jlist{border-top:1px solid var(--line)}
.jrow{display:grid;grid-template-columns:3fr 9fr 4fr;align-items:baseline;gap:var(--g);padding:clamp(18px,2vw,36px) 0;border-bottom:1px solid var(--line);transition:opacity var(--t-s) var(--ease)}
.jlist:hover .jrow{opacity:.28}.jlist:hover .jrow:hover{opacity:1}
.jrow .date{font:300 13px/1 "Pitch Sans",Archivo,sans-serif;color:var(--mid);font-variant-numeric:tabular-nums;transition:transform var(--t-s) var(--ease),color .4s}
.jrow h2{font:560 clamp(26px,2.9vw,58px)/1.06 "Pitch Sans",Archivo,sans-serif;font-stretch:125%;letter-spacing:-.025em;transition:transform var(--t-s) var(--ease)}
.jrow .cat{font:300 13px/1.4 "Pitch Sans",Archivo,sans-serif;color:var(--mid);text-align:right;transition:transform var(--t-s) var(--ease),color .4s}
.jrow:hover h2{transform:translateX(.6vw)}
.jrow:hover .date{transform:translateX(.9vw);color:var(--or)}
.jrow:hover .cat{transform:translateX(-.6vw);color:var(--ink)}
.jrow .thumb{display:none}
.peek{position:fixed;left:0;top:0;z-index:40;width:clamp(240px,22vw,400px);aspect-ratio:528/288;pointer-events:none;opacity:0;transition:opacity var(--t-s) var(--ease);overflow:hidden}
.peek.on{opacity:1}
.peek i{position:absolute;inset:0;background:url(../assets/bag-atlas.webp?v=9) 0 0/400% 200% no-repeat}

/* image reveal: the frame opens from a slit and the picture settles from a slight zoom */
.reveal{position:relative;display:block;overflow:hidden;clip-path:inset(50% 0 50% 0);transition:clip-path 1.6s var(--ease-io)}
.reveal.in{clip-path:inset(0 0 0 0)}
.reveal .img{position:absolute;inset:0;background:url(../assets/bag-atlas.webp?v=9) 0 0/400% 200% no-repeat;transform:scale(1.3);transition:transform var(--t-l) var(--ease)}
.reveal.in .img{transform:scale(1.04)}

/* article */
.art-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g)}
.art-head .meta{grid-column:1/-1;display:flex;gap:22px;flex-wrap:wrap;margin-bottom:clamp(24px,2.6vw,48px)}
.art-head .meta a:hover{color:var(--ink)}
.art-head h1{grid-column:1/11;font:420 clamp(48px,7.4vw,156px)/.94 "Pitch Sans",Archivo,sans-serif;letter-spacing:-.05em}
.art-head .stand.serif{font-weight:360;font-stretch:100%;letter-spacing:-.012em}
.art-head .stand{grid-column:1/9;margin-top:clamp(24px,2.6vw,48px);font-size:clamp(22px,2.1vw,38px);line-height:1.25;color:#333}
.art-img{margin:clamp(56px,7vw,130px) 0;aspect-ratio:528/288}
.body{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g)}
.body>*{grid-column:4/10}
.body p{font:300 clamp(18px,1.3vw,22px)/1.65 "Pitch Sans",Archivo,sans-serif;letter-spacing:-.005em;color:#222;margin-bottom:1.15em}
.body p:first-child::first-letter{font-family:"Pitch Sans",Archivo,sans-serif;font-weight:720;font-stretch:125%;float:left;font-size:4.3em;line-height:.8;margin:.06em .1em 0 0}
.body h2{font:400 clamp(19px,1.4vw,24px)/1.3 "Pitch Sans",Archivo,sans-serif;font-stretch:125%;letter-spacing:-.01em;margin:1.8em 0 .7em}
.body blockquote{grid-column:2/12;margin:clamp(40px,4vw,80px) 0;font-family:"Pitch Sans",Archivo,sans-serif;font-weight:560;font-stretch:112%;font-size:clamp(30px,3.4vw,64px);line-height:1.12;letter-spacing:-.015em}
.body blockquote::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:var(--or);margin-bottom:.6em}
.next{display:block;margin-top:clamp(80px,9vw,180px);padding-top:28px;border-top:1px solid var(--line)}
.next .label{display:block;margin-bottom:18px}
.next b{display:block;font:300 clamp(40px,6vw,120px)/1 "Pitch Sans",Archivo,sans-serif;letter-spacing:-.045em;transition:transform var(--t-s) var(--ease)}
.next:hover b{transform:translateX(1vw)}
.next i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--or);margin-left:.3em;vertical-align:.5em;transition:transform var(--t-s) var(--ease)}
.next:hover i{transform:scale(1.6)}

.foot2{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin:0 var(--g);padding:28px 0 calc(var(--g)*.9);border-top:1px solid var(--line);font:300 13px/1 "Pitch Sans",Archivo,sans-serif;color:var(--mid)}
.foot2 a:hover{color:var(--ink)}

/* links roll up to a copy of themselves */
.menu a .roll,.foot2 a .roll,.meta a .roll{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.15;height:1.15em}
.roll>span{display:block;transition:transform var(--t-s) var(--ease)}
a:hover>.roll>span,a:focus-visible>.roll>span{transform:translateY(-100%)}

/* entrances */
.mw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .14em;margin:0 -.02em -.14em}
.mw>span{display:inline-block;transform:translate3d(0,112%,0);transition:transform var(--t-b) var(--ease)}
.in .mw>span{transform:none}
.up{opacity:0;transform:translateY(24px);transition:opacity var(--t-b) var(--ease),transform var(--t-b) var(--ease)}
.up.in{opacity:1;transform:none}
.jrow .date,.jrow .cat{opacity:0}.jrow.in .date,.jrow.in .cat{opacity:1}

/* pointer */
.cdot{position:fixed;left:0;top:0;z-index:300;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.7);pointer-events:none;opacity:0;transition:width var(--t-s) var(--ease),height var(--t-s) var(--ease),margin var(--t-s) var(--ease),opacity .2s}
.cdot.on{opacity:1}
.cdot.big{width:18px;height:18px;margin:-9px 0 0 -9px}
/* the black dot is the pointer: hide the system one while it is showing */
html.cur,html.cur *{cursor:none!important}
@media (hover:none),(pointer:coarse){.cdot,.peek{display:none}}

@media (max-width:800px){
  main{padding-top:120px}
  .jhead h1,.jhead p:not(.label){grid-column:1/-1}
  .jhead p:not(.label){margin-top:24px}
  .jrow{grid-template-columns:1fr auto;gap:10px}
  .jrow .date{grid-column:1/-1;order:-1}
  .jrow .thumb{display:block;grid-column:1/-1;order:-2;aspect-ratio:528/288;margin-bottom:8px}
  .jlist:hover .jrow{opacity:1}
  .art-head h1,.art-head .stand,.body>*,.body blockquote{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.mw>span{transform:none}.up{opacity:1;transform:none}.reveal{clip-path:none}}