/* kmoosa - shared system for the interior pages.
   Two colours only: #543920 brown, #feeac7 cream. Pixel type, dashed rules,
   scanlines. The homepage keeps its own hero layout on top of this. */

:root{ --bg:#feeac7; --ink:#543920; --scan:rgba(84,57,32,.085); color-scheme:light; }
:root[data-theme="dark"]{ --bg:#543920; --ink:#feeac7; --scan:rgba(254,234,199,.06); color-scheme:dark; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pixelify Sans","Silkscreen",monospace;
  font-size:1.05rem; line-height:1.65;
  transition:background 220ms linear, color 220ms linear;
}

/* ---------------- scanlines ---------------- */
body::before{
  content:""; position:fixed; inset:0; z-index:9; pointer-events:none;
  background:repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 3px);
}

a{color:inherit}
::selection{background:var(--ink); color:var(--bg)}

.skip{
  position:fixed; left:1rem; top:-4rem; z-index:20;
  background:var(--ink); color:var(--bg); padding:.6rem 1rem;
  font-family:"Silkscreen",monospace; font-size:.8rem; text-decoration:none;
  transition:top 140ms linear;
}
.skip:focus{top:1rem}

:focus-visible{outline:2px dashed var(--ink); outline-offset:4px}

/* ---------------- mode ---------------- */
.mode{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:12;
  font-family:"Silkscreen",monospace; font-size:.78rem; letter-spacing:.14em;
  color:var(--ink); background:var(--bg); border:1px dashed var(--ink);
  padding:.55rem .9rem; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.mode:hover{background:var(--ink); color:var(--bg)}

/* ---------------- shell ---------------- */
.wrap{max-width:62rem; margin:0 auto; padding:0 1.5rem 7rem}

/* ---------------- header ---------------- */
.top{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem 2rem; flex-wrap:wrap;
  padding:1.6rem 0 1.1rem; border-bottom:1px dashed var(--ink);
  margin-bottom:2.6rem;
}
.home{
  font-family:"VT323","Cascadia Mono",Consolas,monospace;
  font-size:1.7rem; line-height:1; text-decoration:none; white-space:pre;
  padding:.3rem .4rem; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.home:hover{background:var(--ink); color:var(--bg)}
.home .eye{display:inline-block; width:1ch; text-align:center;
           transition:transform 90ms linear}

.top nav{display:flex; flex-wrap:wrap; gap:.35rem 1.4rem;
         font-family:"Silkscreen",monospace; font-size:.82rem; letter-spacing:.1em}
.top nav a{text-decoration:none; padding:.35rem .2rem}
.top nav a:hover{background:var(--ink); color:var(--bg)}
.top nav a[aria-current="page"]{text-decoration:underline; text-underline-offset:.35em}

/* ---------------- headings + prose ---------------- */
h1{
  font-family:"Pixelify Sans",monospace; font-weight:600;
  font-size:clamp(2rem,5.5vw,3.1rem); line-height:1.05;
  letter-spacing:.14em; text-indent:.14em; margin:0 0 .5rem;
}
.lede{max-width:56ch; margin:0 0 2.4rem; font-size:1.15rem; line-height:1.6}

h2{
  font-family:"Silkscreen",monospace; font-size:.85rem; font-weight:400;
  letter-spacing:.18em; margin:3.2rem 0 1.1rem;
  padding-bottom:.5rem; border-bottom:1px dashed var(--ink);
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
}
h2 .count{opacity:.7}

p{margin:0 0 1rem; max-width:64ch}
.small{font-size:.92rem}

/* ---------------- entries ---------------- */
.entry{padding:1.4rem 0; border-bottom:1px dashed var(--ink)}
.entry:last-child{border-bottom:0}
.entry .hd{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem}
.entry h3{
  margin:0; font-family:"Pixelify Sans",monospace; font-weight:600;
  font-size:1.35rem; line-height:1.2; letter-spacing:.02em;
}
.entry h3 a{text-decoration:none; border-bottom:2px solid var(--ink)}
.entry h3 a:hover{background:var(--ink); color:var(--bg); border-color:transparent}
.entry .when{
  font-family:"Silkscreen",monospace; font-size:.72rem; letter-spacing:.1em;
  opacity:.75; margin-left:auto; white-space:nowrap;
}
.entry .stack{
  font-family:"Silkscreen",monospace; font-size:.68rem; letter-spacing:.08em;
  opacity:.75; margin:.5rem 0 .6rem;
}
.entry p{margin:0; max-width:62ch}
.entry ul{margin:.6rem 0 0; padding-left:1.1rem; max-width:64ch}
.entry li{margin-bottom:.4rem}
.entry li::marker{content:"— "}

/* ---------------- spec table ---------------- */
.spec{width:100%; border-collapse:collapse; margin:0; max-width:64ch}
.spec th,.spec td{
  text-align:left; vertical-align:top; padding:.55rem 1rem .55rem 0;
  border-bottom:1px dashed var(--ink);
}
.spec th{
  font-family:"Silkscreen",monospace; font-size:.68rem; font-weight:400;
  letter-spacing:.1em; white-space:nowrap; width:11rem; opacity:.85;
}

/* ---------------- footer ---------------- */
.foot{
  margin-top:4rem; padding-top:1.2rem; border-top:1px dashed var(--ink);
  font-family:"Silkscreen",monospace; font-size:.68rem; letter-spacing:.1em;
  line-height:2; opacity:.85;
}
.foot a{text-decoration:none; border-bottom:1px dashed var(--ink)}
.foot a:hover{background:var(--ink); color:var(--bg)}

@media (max-width:620px){
  .top{gap:1rem}
  .entry .when{margin-left:0; width:100%}
  .spec th{width:auto; display:block; border-bottom:0; padding-bottom:0}
  .spec td{display:block; padding-top:.15rem}
}

/* ============================================================
   Project detail pages
   ============================================================ */

/* The cat transition in transition.js drives the hand-off between the gallery
   and a project, so the browser's own cross-document animation stays off. */
@view-transition{ navigation:none }

.back{
  display:inline-block; margin:0 0 1.8rem;
  font-family:"Silkscreen",monospace; font-size:.7rem; letter-spacing:.12em;
  text-decoration:none; padding:.5rem .8rem; border:1px dashed var(--ink);
}
.back:hover{background:var(--ink); color:var(--bg)}

.hero{border-bottom:1px dashed var(--ink); padding-bottom:1.4rem; margin-bottom:1.8rem}
.ico-big{
  font-size:2rem; line-height:1.4; margin-bottom:.5rem;
  font-family:"Segoe UI Symbol","Segoe UI Emoji","Yu Gothic UI","Nirmala UI",
              "Segoe UI Historic","Segoe UI",sans-serif;
  color:transparent; text-shadow:0 0 0 var(--ink);
  -webkit-user-select:none; user-select:none;
}
.hero h1{margin:0 0 .5rem}
.hero .meta{
  font-family:"Silkscreen",monospace; font-size:.72rem; letter-spacing:.12em;
}
.hero .stack{
  font-family:"Silkscreen",monospace; font-size:.62rem; letter-spacing:.08em;
  opacity:.75; margin-top:.5rem; line-height:1.8;
}

/* video slot */
.frame{
  border:1px dashed var(--ink); aspect-ratio:16/9; width:100%;
  display:grid; place-items:center; margin-bottom:2.4rem; overflow:hidden;
  background:repeating-linear-gradient(45deg,
    transparent 0 10px, var(--scan) 10px 20px);
}
.frame video{width:100%; height:100%; object-fit:cover; display:block}
.frame img{width:100%; height:100%; object-fit:cover; display:block}
/* a phone screenshot would lose most of itself to a 16:9 cover crop */
.frame img.tall{object-fit:contain}
.no-video{
  font-family:"Silkscreen",monospace; font-size:.85rem; letter-spacing:.14em;
  opacity:.8; text-align:center; padding:1rem;
}

.rant{max-width:62ch}
.rant h2{margin-top:0}
.rant p{margin-bottom:1.1rem}

.btns{display:flex; flex-wrap:wrap; gap:.6rem; margin:2.2rem 0 0}
.btn{
  font-family:"Silkscreen",monospace; font-size:.74rem; letter-spacing:.12em;
  border:1px dashed var(--ink); padding:.85rem 1.2rem; text-decoration:none;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
a.btn:hover,a.btn:focus-visible{background:var(--ink); color:var(--bg)}
.btn.is-off{opacity:.55; cursor:default}

.pager{
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  margin-top:3.5rem; padding-top:1.3rem; border-top:1px dashed var(--ink);
}
.pager a{
  text-decoration:none; font-family:"Pixelify Sans",monospace; font-size:1.05rem;
  max-width:22ch;
}
.pager a span{
  display:block; font-family:"Silkscreen",monospace; font-size:.62rem;
  letter-spacing:.12em; opacity:.7; margin-bottom:.3rem;
}
.pager a:hover{background:var(--ink); color:var(--bg)}
.pager .next{text-align:right; margin-left:auto}

@media (max-width:620px){
  .pager{flex-direction:column; gap:1.2rem}
  .pager .next{text-align:left; margin-left:0}
}


/* ============================================================
   The cat transition
   ============================================================ */

body.is-leaving{overflow:hidden}
body.is-leaving .mode{opacity:0; transition:opacity 160ms linear}

/* the paw swipes up from the bottom of the screen */
.paw{
  position:fixed; left:50%; bottom:0; z-index:40; margin:0; pointer-events:none;
  font-family:"Segoe UI Symbol",Consolas,"DejaVu Sans Mono",monospace;
  font-size:clamp(15px,2.9vw,38px); line-height:.86;
  color:var(--ink);
  animation:paw-swipe 820ms cubic-bezier(.3,.85,.35,1) forwards;
}
.paw .pr{display:block; height:.86em}
.paw i{display:inline-block; width:.66em; font-style:normal}

@keyframes paw-swipe{
  0%  {transform:translate(-50%,105%) rotate(-16deg)}
  32% {transform:translate(-50%,10%)  rotate(-7deg)}
  52% {transform:translate(-50%,2%)   rotate(6deg)}
  70% {transform:translate(-50%,16%)  rotate(12deg)}
  100%{transform:translate(-50%,112%) rotate(18deg)}
}

/* knocked aside - direction set per tile, away from where the paw comes up */
.tile.swept{
  transition:transform 460ms cubic-bezier(.35,0,.9,1), opacity 340ms linear;
  transform:translate(var(--tx,60vw), var(--ty,-70vh)) rotate(var(--rot,14deg));
  opacity:0; pointer-events:none;
}
.swept-soft{
  transition:transform 380ms cubic-bezier(.35,0,.9,1), opacity 280ms linear;
  transform:translateY(-34px); opacity:0; pointer-events:none;
}

/* The one you picked rides above everything and becomes the page. It has to
   out-rank the :hover rule, or it keeps the inverted colours while it grows. */
a.tile.chosen,a.tile.chosen:hover,a.tile.chosen:focus-visible{
  position:relative; z-index:30;
  background:var(--bg); color:var(--ink); border-style:solid;
}
a.tile.chosen .ico{text-shadow:0 0 0 var(--ink)}

/* arriving on the project page: grow in from where the card ended up */
html.growing main,
html.growing .top,
html.growing .foot{
  animation:grow-in 400ms cubic-bezier(.2,.85,.3,1) both;
}
html.growing .top{animation-delay:0ms}
html.growing main{animation-delay:40ms}
html.growing .foot{animation-delay:90ms}
@keyframes grow-in{
  from{opacity:0; transform:scale(.955) translateY(16px)}
  to  {opacity:1; transform:none}
}

@media (prefers-reduced-motion:reduce){
  .paw{display:none}
  .tile.swept,.swept-soft{transition:none; opacity:1; transform:none}
  html.growing main,html.growing .top,html.growing .foot{animation:none}
}