/* Joey Chalita — Digital Home v2
   Max Marchione-inspired: dark sidebar, warm cream, two-column blocks.
   v2 adds a terracotta accent, generous spacing, and soft micro-motion.
*/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{scroll-behavior:smooth}

:root{
  --sidebar-bg:#141414;
  --sidebar-fg:#ebe4d4;
  --sidebar-fg-dim:#8a857a;
  --main-bg:#efe8d9;            /* warm cream */
  --ink:#141414;                /* deep near-black for keywords & headings */
  --ink-muted:#857c71;          /* body copy */
  --rule:#d6cdb9;
  --accent:#b8532e;             /* terracotta / clay */
  --accent-soft:#d68258;
  --accent-glow:rgba(184,83,46,.14);
}

body{
  background:var(--main-bg);
  color:var(--ink-muted);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  min-height:100vh;
  overflow-x:hidden;
}

::selection{background:var(--accent-glow);color:var(--ink)}

/* --- subtle stagger on first load --- */
main>*{
  opacity:0;
  transform:translateY(10px);
  animation:rise .7s cubic-bezier(.22,.61,.36,1) forwards;
}
main>*:nth-child(1){animation-delay:.05s}
main>*:nth-child(2){animation-delay:.14s}
main>*:nth-child(3){animation-delay:.22s}
main>*:nth-child(4){animation-delay:.30s}
main>*:nth-child(5){animation-delay:.38s}
main>*:nth-child(6){animation-delay:.46s}
main>*:nth-child(7){animation-delay:.54s}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  main>*{animation:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* --- progressive enhancement: scroll-driven reveal where supported --- */
@supports (animation-timeline:view()){
  .block{
    animation:rise linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 25%;
  }
}

/* ---------- Sidebar ---------- */
aside.sidebar{
  background:var(--sidebar-bg);
  color:var(--sidebar-fg);
  width:248px;
  flex:0 0 248px;
  min-height:100vh;
  padding:44px 30px 56px;
  font-size:13px;
  line-height:2;
  position:sticky;
  top:0;
  align-self:flex-start;
}
aside.sidebar .brand{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--sidebar-fg-dim);
  margin-bottom:40px;
  position:relative;
  padding-bottom:22px;
}
aside.sidebar .brand::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:28px;height:1px;
  background:var(--accent);
}
aside.sidebar a{
  color:var(--sidebar-fg);
  text-decoration:none;
  display:inline-block;
  position:relative;
  transition:color .2s ease, transform .2s ease, padding-left .2s ease;
}
aside.sidebar a:hover{color:#fff}
aside.sidebar .group{margin-bottom:20px}
aside.sidebar .group-title{font-weight:500}
aside.sidebar .group-title:hover{transform:translateX(2px)}
aside.sidebar .sub a{color:var(--sidebar-fg-dim);padding-left:14px}
aside.sidebar .sub a:hover{color:var(--sidebar-fg);padding-left:17px}

/* active page marker — small accent dot */
aside.sidebar .group-title.active{color:#fff}
aside.sidebar .group-title.active::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
  margin-right:9px;
  vertical-align:middle;
  transform:translateY(-1px);
  box-shadow:0 0 0 4px var(--accent-glow);
}
aside.sidebar .sub a.active{color:#fff}

/* ---------- Main ---------- */
main{
  flex:1;
  padding:108px 104px 160px;
  max-width:1080px;
  counter-reset:block;
}

.block{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:72px;
  margin-bottom:132px;
  counter-increment:block;
  position:relative;
  transition:transform .5s ease;
}
.block:first-of-type{margin-top:12px}

/* numbered prefix in accent above the label */
.block h2{
  font-size:18px;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ink);
  line-height:1.25;
  padding-top:4px;
  position:relative;
  transition:color .25s ease;
}
.block h2::before{
  content:counter(block,decimal-leading-zero);
  display:block;
  font-size:11px;
  letter-spacing:.24em;
  color:var(--accent);
  font-weight:500;
  margin-bottom:12px;
}
.block:hover h2{color:var(--accent)}

.block .body{max-width:640px}
.block p,.block li{color:var(--ink-muted);font-size:15.5px;line-height:1.88}
.block p + p{margin-top:1.2em}
.block strong{
  color:var(--ink);
  font-weight:600;
  transition:color .2s ease;
}
.block p:hover strong{color:var(--ink)}

/* Inline links — animated underline */
.block a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--rule);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color .2s ease, text-decoration-color .2s ease, text-underline-offset .2s ease;
}
.block a:hover{
  color:var(--accent);
  text-decoration-color:var(--accent);
  text-underline-offset:6px;
}

/* Ordered list — accent-colored numerals */
.block ol{list-style:none;padding-left:0;counter-reset:dream}
.block ol li{
  counter-increment:dream;
  padding-left:44px;
  margin-bottom:14px;
  position:relative;
}
.block ol li::before{
  content:counter(dream,decimal-leading-zero);
  position:absolute;
  left:0;
  top:2px;
  color:var(--accent);
  font-weight:500;
  font-size:12px;
  letter-spacing:.16em;
}

/* "mini" entries — small title + body, with hover dot */
.mini{margin-bottom:30px;position:relative;padding-left:0;transition:padding-left .28s ease}
.mini:last-child{margin-bottom:0}
.mini-title{
  color:var(--ink);
  font-weight:600;
  margin-bottom:4px;
  position:relative;
  transition:color .2s ease;
}
.mini:hover .mini-title{color:var(--accent)}
.mini-body{color:var(--ink-muted)}

/* footer */
footer.foot{
  grid-column:1/-1;
  padding-top:48px;
  border-top:1px solid var(--rule);
  font-size:12px;
  color:var(--ink-muted);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
footer.foot a{
  color:var(--ink-muted);
  text-decoration:none;
  border-bottom:1px dotted var(--rule);
  padding-bottom:1px;
  transition:color .2s ease, border-color .2s ease;
}
footer.foot a:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  body{flex-direction:column}
  aside.sidebar{
    width:100%;
    flex:0 0 auto;
    min-height:auto;
    position:static;
    padding:32px 24px;
  }
  main{padding:72px 28px 104px;max-width:100%}
  .block{grid-template-columns:1fr;gap:18px;margin-bottom:80px}
  .block h2{font-size:14px}
  .block h2::before{font-size:10px;margin-bottom:8px}
}