@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,600&display=swap');
:root{
  --bg:#f9fafb; --text:#111; --muted:#6b7280; --link:#1f2937; --border:#e5e7eb;
  --radius:12px; --space:20px; --space-lg:28px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-y: scroll}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Satoshi', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height:1.65; font-feature-settings:'liga' 1,'calt' 1; font-kerning:normal;
}
html, body{overflow-x:hidden; overscroll-behavior-x:none}
.container{max-width:720px; margin:0 auto; padding:20px}
header.site{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space)}
header.site h1{font-weight:600; font-size:clamp(18px,2.2vw,22px); letter-spacing:-0.01em; margin:0; display:flex; align-items:center; gap:8px}
header.site h1 > a{flex:none; min-width:140px}
header.site h1 a{color:inherit; text-decoration:none}
header.site h1 #np-mini{ padding-left:4px }
nav a{color:var(--link); text-decoration:none; margin-left:16px}
nav a:hover{text-decoration:underline; text-underline-offset:3px}
h1{font-size:clamp(28px,5vw,40px); margin:0 0 6px}
h2{font-size:clamp(20px,3.2vw,26px); margin:0 0 8px}
p{margin:8px 0}
.muted{color:var(--muted); font-size:0.95rem}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; overflow-wrap:anywhere; word-break:break-all}
.card{background:#fff; border:.5px solid var(--border); border-radius:var(--radius); padding:var(--space)}
.card + .card{margin-top:var(--space-lg)}
footer.site{margin-top:var(--space-lg); text-align:center; font-size:.8rem; color:var(--muted)}
.writing .container{max-width:1100px; padding-left:max(20px, env(safe-area-inset-left)); padding-right:max(20px, env(safe-area-inset-right))}
.list{display:flex; gap:16px; margin-top:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; scroll-snap-type:x proximity}
.item{
  display:flex; flex-direction:column; gap:10px; align-items:stretch; padding:12px; border-radius:10px;
  border:1px solid var(--border); background:#fff; text-decoration:none; color:inherit;
  border:.5px solid var(--border);
  transition:transform .32s cubic-bezier(0.22,1,0.36,1), box-shadow .32s cubic-bezier(0.22,1,0.36,1), background .2s ease;
  width:280px; scroll-snap-align:start;
}
.item .thumb{width:100%; aspect-ratio:16/10; height:auto; object-fit:cover; border-radius:8px; flex:none}
.item:hover{background:transparent; box-shadow:none}
.item .title{font-weight:600; font-size:clamp(1rem,1.2vw,1.15rem); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.item .summary{color:var(--muted); font-size:.85rem; margin-top:2px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
a:focus-visible{outline:2px solid #111; outline-offset:2px; border-radius:6px}
@media (min-width:768px){ .list{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:20px; overflow:visible; scroll-snap-type:none} .item{width:auto} .item .thumb{aspect-ratio:16/9} }
@media (hover:hover){ .item:hover{transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.10), 0 2px 10px rgba(0,0,0,.06)} }
/* Tablet: prevent nav squeeze by allowing header wrap and capping pill width */
@media (max-width:900px){
  header.site{ flex-wrap:wrap; gap:8px }
  header.site h1 #np-mini{ flex:0 1 49vw !important; max-width:49vw }
}
@media (max-width:640px){ .container{padding:16px} .list{position:relative; gap:14px; padding:2px 2px 10px; scroll-padding-left:2px} .list::after{content:""; position:absolute; right:0; top:0; bottom:0; width:48px; pointer-events:none; background:linear-gradient(to right, rgba(255,255,255,0), #fff)} .item{width:82vw; padding:12px} .item .thumb{aspect-ratio:4/3} .item .title{font-size:1rem; line-height:1.3} .item .summary{font-size:.8rem; line-height:1.35; -webkit-line-clamp:3} .list::-webkit-scrollbar{height:8px} .list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12); border-radius:8px} }

/* Tighten and contain layout on small screens */
@media (max-width:640px){
  .container{ padding-left:22px; padding-right:22px }
  .list{ overscroll-behavior-x: contain; touch-action: pan-y }
}

/* Bring nav closer to title on mobile */
@media (max-width:640px){
  header.site{ flex-direction:column; align-items:flex-start; gap:8px }
  header.site nav{ display:flex; gap:12px }
  header.site nav a:first-child{ margin-left:0 }
  header.site h1{ gap:2px }
  header.site h1 #np-mini{ margin-left:0 !important }
}

@media (prefers-reduced-motion: reduce){ .item{transition:none} }


/* Posts feed (kind 1) */
.posts-feed{display:flex; flex-direction:column; gap:12px; margin-top:12px}
.post-note{padding:10px 0; border-bottom:1px solid var(--border)}
.post-note:last-child{border-bottom:none}
.post-note .meta{color:var(--muted); font-size:.85rem; margin-bottom:4px}
.post-note .body{white-space:pre-wrap}
.button{display:inline-block; padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:#fff; color:inherit; cursor:pointer}
.button:hover{background:#f6f6f6}

/* Short-form tabs and social post layout */
.tabs{display:flex; gap:16px; align-items:center; border-bottom:1px solid var(--border); margin:8px 0 12px}
.tab{appearance:none; background:none; border:0; padding:10px 4px; margin:0; color:var(--muted); font-weight:600; cursor:pointer; position:relative}
.tab.active{color:var(--text)}
.tab.active::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#1f2937; border-radius:2px}
.sf-feed{display:flex; flex-direction:column; gap:16px}
.post-card{display:block; text-decoration:none; color:inherit; padding:12px 0; border-bottom:1px solid var(--border)}
.post-card.thick{padding:16px; border:1px solid var(--border); border-radius:12px; background:#fff}
.post-card:last-child{border-bottom:none}
.post-header{display:flex; align-items:center; gap:10px}
.avatar{width:36px; height:36px; border-radius:999px; object-fit:cover; background:#eee; flex:none}
.author{font-weight:600}
.handle{color:var(--muted); font-size:.9rem; margin-left:0}
.post-body{margin-top:6px; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word}
.post-media{margin-top:8px}
.post-media img{max-width:280px; height:auto; display:block; border-radius:10px}
.post-media video{max-width:280px; height:auto; display:block; border-radius:10px}
.media-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:8px; max-width:600px}
.media-grid img, .media-grid video{width:100%; height:auto; border-radius:10px}
.timestamp{color:var(--muted); font-size:.85rem; margin-top:6px}

/* Inline expand control */
.read-more{ color:var(--link); text-decoration:underline; cursor:pointer }

/* Info link + modal */
#sf-info-btn{ color:var(--muted); }
#sf-info-btn:hover{ text-decoration:underline; text-underline-offset:3px }
#sf-info-modal::backdrop{ background:rgba(0,0,0,.28) }
#sf-info-modal{ border:0; padding:20px; background:transparent }
#sf-info-modal article{ margin: 0 auto; }
#sf-info-modal .card{ padding:24px; }
#sf-info-modal .card > div{ padding-bottom:4px }

/* Header align + spacing on mobile */
@media (max-width:640px){
  #sf-header{ justify-content:flex-start; gap:6px }
  #sf-info-btn{ padding-left:0 }
  #sf-header h3{ margin:8px 0 0 0 }
}

/* Dialog polyfill fallback */
#sf-info-modal.fallback-open{ position:fixed; inset:0; display:block; border:0; padding:20px; background:rgba(0,0,0,.28) }
#sf-info-modal.fallback-open > article{ margin:10vh auto }

/* Photography Portfolio */
.portfolio-header{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  margin-bottom:16px
}
.see-all-link{
  color:var(--muted); 
  text-decoration:none; 
  font-size:.9rem; 
  font-weight:500
}
.see-all-link:hover{
  color:var(--text); 
  text-decoration:underline; 
  text-underline-offset:3px
}
.photo-grid{
  display:grid; 
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); 
  gap:12px; 
  margin-top:8px
}
.photo-item{
  position:relative; 
  overflow:hidden; 
  border-radius:8px; 
  aspect-ratio:4/3; 
  background:#f5f5f5;
  max-width:200px;
  max-height:150px
}
.photo-item img{
  width:100%; 
  height:100%; 
  object-fit:cover; 
  transition:transform .3s ease;
  max-width:200px;
  max-height:150px
}
.photo-item:hover img{
  transform:scale(1.05)
}
@media (min-width:768px){
  .photo-grid{
    grid-template-columns:repeat(3, 1fr); 
    gap:16px
  }
}
@media (max-width:640px){
  .photo-grid{
    grid-template-columns:repeat(2, 1fr); 
    gap:10px
  }
  .portfolio-header{
    flex-direction:column; 
    align-items:flex-start; 
    gap:8px
  }
}

/* Photos page: masonry/collage layout */
#photos .photo-grid{
  display:block;
  column-count:3; 
  column-gap:16px
}
#photos .photo-grid{ content-visibility:auto; contain-intrinsic-size: 1000px 1px }
@media (max-width:900px){ #photos .photo-grid{ column-count:2; column-gap:14px } }
@media (max-width:640px){ #photos .photo-grid{ column-count:1; column-gap:12px } }

#photos .photo-item{
  display:block;
  break-inside:avoid;
  margin-bottom:16px;
  width:100%;
  max-width:none !important;
  max-height:none !important;
  border-radius:0;
  overflow:visible;
  aspect-ratio:auto !important;
  background:transparent
}
#photos .photo-item img{
  width:100%;
  height:auto !important;
  display:block;
  object-fit:cover;
  max-width:100%;
  max-height:none;
  border-radius:10px
}
/* Photography: make layout a single horizontal row (scoped) */
#photography .photo-grid{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  gap:16px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch
}
#photography .photo-item{
  flex:0 0 auto;
  scroll-snap-align:start
}
/* Limit to max 10 images in the scroller */
#photography .photo-item:nth-child(n+11){
  display:none
}

/* Post (note page) typography tightening */
.post{ line-height:1.5 }
.post p{ margin:8px 0 }
.post ul, .post ol{ margin:8px 0 8px 1.25rem; padding-left:1.25rem }
.post li{ margin:4px 0; line-height:1.5 }