/* The Desk — a workshop-desk Ghost theme
   Palette + type ported from the "Messy Desk Portfolio v2" design. */

:root{
  --bg-desk:  oklch(0.35 0.018 205);
  --ink:      oklch(0.24 0.012 220);
  --ink-soft: oklch(0.44 0.012 220);
  --ink-mute: oklch(0.50 0.015 220);
  --c-blog:    oklch(0.42 0.045 245);
  --c-project: oklch(0.46 0.075 52);
  --c-idea:    oklch(0.44 0.055 178);
  --c-note:    oklch(0.26 0.015 220);
  --paper:    oklch(0.95 0.008 90);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ height:100%; }
body{
  min-height:100%;
  background:var(--bg-desk);
  background-image:
    repeating-linear-gradient(0deg,  transparent 0 33px, rgba(255,255,255,0.035) 33px 34px),
    repeating-linear-gradient(90deg, transparent 0 33px, rgba(255,255,255,0.035) 33px 34px),
    radial-gradient(circle at 50% 20%, oklch(0.42 0.018 200), oklch(0.33 0.018 205) 78%);
  background-attachment:fixed;
  font-family:'Archivo',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--ink);
}
a{ color:oklch(0.6 0.09 45); text-decoration:none; }
a:hover{ color:oklch(0.52 0.1 45); }
::selection{ background:oklch(0.7 0.06 200); color:oklch(0.15 0.01 220); }
img{ max-width:100%; }

/* ---------- Header ---------- */
.desk-head{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 24px; pointer-events:none;
}
.brand{
  position:absolute; top:22px; left:24px; pointer-events:auto; display:block;
}
.brand:hover{ color:inherit; }
.brand-name{
  display:block; font:800 20px/1 'Archivo'; letter-spacing:-0.02em;
  color:oklch(0.94 0.015 200);
}
.brand-sub{
  display:block; margin-top:7px; max-width:340px;
  font:400 10px/1.5 'Space Mono',monospace; letter-spacing:0.03em;
  color:oklch(0.82 0.02 200); opacity:.8;
}

.tags{
  display:flex; justify-content:center; align-items:center;
  gap:20px; flex-wrap:wrap; pointer-events:none;
}
.tab{
  position:relative; pointer-events:auto; display:inline-block;
  background:oklch(0.95 0.008 90); border:1px solid rgba(40,32,20,0.12);
  border-radius:2px; padding:9px 14px;
  font:700 12px/1 'Space Mono',monospace; letter-spacing:0.1em; text-transform:uppercase;
  color:oklch(0.42 0.015 220);
  box-shadow:0 6px 12px rgba(6,8,8,.3);
  transition:transform .15s, box-shadow .15s, color .15s;
}
.tab:hover{ color:oklch(0.28 0.015 220); }
/* ponytail: paper + tilt cycle by position, so any set of tags looks scattered */
.tab:nth-child(5n+1){ background:oklch(0.95 0.008 90);  transform:rotate(-3deg); }
.tab:nth-child(5n+2){ background:oklch(0.94 0.008 214); transform:rotate(1deg); }
.tab:nth-child(5n+3){ background:oklch(0.89 0.022 76);  transform:rotate(2deg); }
.tab:nth-child(5n+4){ background:oklch(0.92 0.014 150); transform:rotate(-2deg); }
.tab:nth-child(5n+5){ background:oklch(0.93 0.012 84);  transform:rotate(-1deg); }

.tab .tape{
  position:absolute; top:-7px; left:50%;
  transform:translateX(-50%) rotate(-4deg);
  width:42px; height:14px; background:rgba(205,192,150,.5);
  border:1px solid rgba(150,132,86,.28);
  opacity:0; transition:opacity .15s; pointer-events:none;
}

/* active state — .tab--on set server-side, "All" via body_class.
   Must stay after the nth-child block: same specificity, later wins. */
.home-template .tab--all,
.tab.tab--on{
  transform:rotate(1deg) scale(1.12);
  box-shadow:0 10px 18px rgba(6,8,8,.4);
  color:oklch(0.26 0.015 220);
}
.home-template .tab--all .tape,
.tab.tab--on .tape{ opacity:1; }

/* availability chip — same paper recipe as .tab, mirrored off .brand */
.hire{
  position:absolute; top:22px; right:24px; pointer-events:auto;
  display:flex; align-items:center; gap:8px;
  background:oklch(0.95 0.008 90); border:1px solid rgba(40,32,20,0.12);
  border-radius:2px; padding:9px 12px;
  font:700 11px/1 'Space Mono',monospace; letter-spacing:0.1em; text-transform:uppercase;
  color:oklch(0.42 0.015 220); text-decoration:none;
  box-shadow:0 6px 12px rgba(6,8,8,.3); transform:rotate(2deg);
  transition:transform .15s, box-shadow .15s, color .15s;
}
.hire:hover{
  color:oklch(0.26 0.015 220);
  transform:rotate(2deg) scale(1.06);
  box-shadow:0 10px 18px rgba(6,8,8,.4);
}
.hire-dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--c-project); box-shadow:0 0 0 3px oklch(0.46 0.075 52 / .22);
}

/* ---------- Desk surface ---------- */
.site{ position:relative; }
.desk--scatter{ position:relative; width:100%; }

/* ---------- Card ---------- */
.card{
  width:var(--w,320px);
  background:var(--paper);
  border:1px solid rgba(40,32,20,0.10); border-radius:2px;
  padding:20px;
  box-shadow:0 9px 20px rgba(6,8,8,0.34), 0 1px 3px rgba(0,0,0,0.22);
}
.desk--scatter .card{
  position:absolute; left:0; top:0;
  cursor:grab; user-select:none; touch-action:none; will-change:transform;
  transition:box-shadow .18s ease, transform .18s ease;
}
.desk--scatter .card.dragging{
  cursor:grabbing;
  box-shadow:0 26px 46px rgba(6,8,8,0.5), 0 4px 10px rgba(0,0,0,0.3);
  transition:none;
}
.card-link{ display:block; color:inherit; }
.card-link:hover{ color:inherit; }

.card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.stamp{
  display:inline-block; font:700 10px/1 'Space Mono',monospace;
  letter-spacing:0.14em; text-transform:uppercase;
  padding:3px 6px; border:1.5px solid currentColor; border-radius:2px;
  color:var(--c-note);
}
.stamp--blog{ color:var(--c-blog); }
.stamp--project{ color:var(--c-project); }
.stamp--idea{ color:var(--c-idea); }
.card-date{
  font:400 10px/1 'Space Mono',monospace; letter-spacing:0.03em;
  color:var(--ink-mute);
}
.card-thumb{
  margin-top:14px; height:calc(var(--w,320px) * 0.40);
  border-radius:1px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(45,38,26,0.10);
}
.thumb-label{
  font:400 10px/1 'Space Mono',monospace; letter-spacing:0.1em; text-transform:uppercase;
  color:oklch(0.42 0.02 220);
  background:rgba(255,255,255,0.72); padding:3px 6px; border-radius:2px;
}
.card-title{
  margin:14px 0 0; font:700 20px/1.15 'Archivo'; letter-spacing:-0.01em;
  color:var(--ink); text-wrap:pretty;
}
.card-excerpt{
  margin:6px 0 0; font:400 12px/1.45 'Space Mono',monospace;
  color:var(--ink-soft); text-wrap:pretty;
}
.pin{ display:none; }

/* ---------- Rope / clothesline (tag page) ---------- */
.desk--rope{ position:relative; min-height:100vh; padding:104px 0 60px; }
.rope-title{
  text-align:center; margin:0 0 8px;
  font:700 12px/1 'Space Mono',monospace; letter-spacing:0.14em; text-transform:uppercase;
  color:oklch(0.9 0.02 200); opacity:.9;
}
.rope-scroll{
  position:relative; overflow-x:auto; overflow-y:hidden; white-space:nowrap;
  padding:44px 44px 104px;
}
/* ponytail: the sag is a bottom border on an elliptical radius — no SVG, no JS path.
   --rope-sag is duplicated as SAG in desk.js so the cards hang off the curve. */
.rope-line{
  --rope-sag:40px;
  position:absolute; top:44px; left:0; height:var(--rope-sag);
  border-bottom:5px solid oklch(0.55 0.04 70);
  border-radius:0 0 50% 50% / 0 0 var(--rope-sag) var(--rope-sag);
  z-index:0;
}
.rope-line::after{
  content:""; position:absolute; inset:0 0 1.5px 0;
  border-bottom:1.6px dashed oklch(0.7 0.04 82);
  border-radius:inherit;
}
.card--rope{
  position:relative; z-index:1; display:inline-flex; flex-direction:column;
  vertical-align:top; white-space:normal; width:280px; margin-right:34px;
  transform-origin:top center; cursor:pointer;
  box-shadow:0 14px 24px rgba(6,8,8,0.5), 0 2px 5px rgba(0,0,0,0.28);
}
.card--rope:last-child{ margin-right:0; }
.card--rope .pin{
  display:block; position:absolute; top:-15px; left:50%;
  transform:translateX(-50%); width:10px; height:26px; border-radius:3px;
  background:linear-gradient(90deg, oklch(0.68 0.05 68), oklch(0.78 0.045 78) 45%, oklch(0.62 0.05 64));
  box-shadow:0 2px 3px rgba(0,0,0,0.3); z-index:3;
}
.card--rope .card-thumb{ height:calc(280px * 0.5); }

/* ---------- Pagination ---------- */
.pagination{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:20px 20px 48px;
  font:700 11px/1 'Space Mono',monospace; letter-spacing:0.08em; text-transform:uppercase;
}
.pagination a{
  background:var(--paper); color:var(--ink);
  padding:9px 14px; border:1px solid rgba(40,32,20,0.12); border-radius:2px;
  box-shadow:0 3px 10px rgba(6,8,8,0.4);
}
.pagination a:hover{ color:var(--ink); transform:rotate(-1deg); }
.pagination .page-number{ color:oklch(0.72 0.02 200); }
/* the sheet already sits on white — drop the paper-on-paper effect there */
.paper .pagination{ padding:24px 0 0; }
.paper .pagination a{ box-shadow:none; }

/* ---------- Post / page (paper sheet) ---------- */
.desk--post{ display:flex; justify-content:center; padding:96px 20px 64px; }
/* clicking the desk around the sheet goes back — hint it */
.post-template, .page-template, .author-template, .error-template{ cursor:zoom-out; }
.paper.post{ cursor:auto; }
.paper.post{
  width:min(680px,100%);
  background:oklch(0.96 0.006 90);
  border:1px solid rgba(0,0,0,0.08); border-radius:4px;
  box-shadow:0 30px 70px rgba(6,8,8,0.55);
  padding:40px;
}
.back{
  display:inline-block; margin-bottom:22px;
  font:400 12px/1 'Space Mono',monospace; letter-spacing:0.04em;
}
.post-title{
  margin:12px 0 0; font:800 clamp(28px,5vw,40px)/1.1 'Archivo'; letter-spacing:-0.02em;
  color:oklch(0.20 0.015 220); text-wrap:pretty;
}
.post-sub{
  margin:10px 0 0; font:400 14px/1.55 'Space Mono',monospace;
  color:oklch(0.44 0.015 220); text-wrap:pretty;
}
.post-hero{ width:100%; margin-top:22px; border-radius:2px; }

.post-content{ margin-top:26px; font:400 16px/1.72 'Archivo'; color:oklch(0.28 0.012 220); }
.post-content > *:first-child{ margin-top:0; }
.post-content p{ margin:0 0 1.15em; text-wrap:pretty; }
.post-content h2{ font:700 26px/1.25 'Archivo'; letter-spacing:-0.01em; margin:1.6em 0 .5em; color:var(--ink); }
.post-content h3{ font:700 20px/1.3 'Archivo'; margin:1.4em 0 .4em; color:var(--ink); }
.post-content ul,.post-content ol{ margin:0 0 1.15em; padding-left:1.3em; }
.post-content li{ margin:.3em 0; }
.post-content img{ border-radius:2px; margin:1em 0; }
.sheet-list{ list-style:none; margin:0; padding:0; }
.sheet-list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:.55em 0; border-bottom:1px dashed rgba(40,32,20,0.16);
}
.sheet-list time{
  font:400 11px/1 'Space Mono',monospace; color:var(--ink-mute); white-space:nowrap;
}
.post-content blockquote{
  margin:1.3em 0; padding:.4em 0 .4em 1.1em;
  border-left:3px solid oklch(0.7 0.04 70);
  color:oklch(0.4 0.012 220); font-style:italic;
}
.post-content code{
  font:400 90%/1.4 'Space Mono',monospace;
  background:oklch(0.90 0.008 80); padding:.12em .35em; border-radius:2px;
}
.post-content pre{
  background:oklch(0.22 0.015 220); color:oklch(0.9 0.01 200);
  padding:16px 18px; border-radius:3px; overflow-x:auto;
  font:400 13px/1.6 'Space Mono',monospace;
}
.post-content pre code{ background:none; padding:0; color:inherit; }
.post-content a{ text-decoration:underline; text-underline-offset:2px; }

/* Koenig cards break out of the 680px sheet */
.post-content .kg-width-wide{ width:calc(100% + 60px); margin-left:-30px; max-width:none; }
.post-content .kg-width-full{ width:calc(100% + 80px); margin-left:-40px; max-width:none; }
@media (max-width:620px){
  .post-content .kg-width-wide,
  .post-content .kg-width-full{ width:calc(100% + 40px); margin-left:-20px; }
}

.post-foot{ margin-top:30px; display:flex; gap:10px; flex-wrap:wrap; }
.post-foot .stamp{ text-decoration:none; }

/* ---------- Misc ---------- */
.empty{
  position:absolute; top:44%; left:0; right:0; text-align:center;
  font:400 13px/1.5 'Space Mono',monospace; letter-spacing:0.04em;
  color:oklch(0.82 0.02 200); opacity:.8;
}

@media (max-width:620px){
  .brand-sub{ display:none; }
  /* right-aligned so the tabs can't run into the site title */
  .tags{ gap:8px; padding:0 0 0 8px; justify-content:flex-end; }
  .tab{ padding:7px 10px; font-size:10px; }
  .desk-head{ padding:16px; }
  .brand{ top:16px; left:16px; }
  .brand-name{ font-size:17px; }
  /* tabs claim the right edge here, so the chip drops under the title instead */
  .hire{ top:44px; left:16px; right:auto; padding:6px 9px; font-size:10px; }
  .paper.post{ padding:26px 20px; }
  /* No room to swing a clothesline on a phone — stack the cards instead.
     desk.js drops the rope line and its transforms below this same 620px. */
  .desk--rope{ min-height:0; padding:96px 0 40px; }
  .rope-scroll{
    overflow:visible; white-space:normal;
    display:flex; flex-direction:column; gap:14px;
    padding:12px 14px 40px;
  }
  .card--rope{
    display:block; width:100%; margin-right:0; text-align:center;
    box-shadow:0 10px 20px rgba(6,8,8,0.38), 0 1px 3px rgba(0,0,0,0.24);
  }
  /* a little off-square so it still reads as paper, not a feed.
     desk.js clears its inline transform below 620px, so these win. */
  .card--rope:nth-child(3n+1){ transform:rotate(-1.4deg); }
  .card--rope:nth-child(3n+2){ transform:rotate(1.1deg); }
  .card--rope:nth-child(3n+3){ transform:rotate(-0.6deg); }
  .card--rope .pin{ display:none; }
  .card--rope .card-head{ text-align:left; }
  .card--rope .card-thumb{ height:52vw; }
}