/* =========================================================================
   kel — kelxyz.com
   No framework, no build step, no JavaScript.
   ========================================================================= */

:root{
  --bg:     #0d0a08;   /* espresso ground */
  --line:   #1e1813;   /* hairline */
  --accent: #c99a80;   /* clay — glyph, hover, focus, selection */

  --ink:    #efe9e2;
  --ink-2:  #b0a498;
  --ink-3:  #8b7f72;
}

:root{
  --w: 720px;
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size:clamp(15px, 0.5vw + 13.6px, 16.5px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
::selection{ background:var(--accent); color:var(--bg); }

.skip{
  position:absolute; left:-9999px;
  background:var(--accent); color:var(--bg); padding:8px 12px; z-index:10;
  font-family:"IBM Plex Mono", monospace; font-size:13px;
}
.skip:focus{ left:12px; top:12px; }

.mono{
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ------------------------------------------------------------- layout --- */

main{ max-width:var(--w); margin:0 auto; padding:0 28px; }

section{ padding-bottom:64px; }

h2{
  margin:0 0 20px;
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
}

/* --------------------------------------------------------------- hero --- */

.hero{ padding:96px 0 72px; }

.glyph{ display:block; color:var(--accent); margin-bottom:22px; }

h1{
  margin:0 0 14px;
  font-size:clamp(44px, 9vw, 76px);
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1;
}
h1 a{ text-decoration:none; transition:color .14s ease; }
h1 a:hover{ color:var(--accent); }

.about{
  margin:0;
  max-width:44ch;
  font-size:clamp(16px, 1.5vw, 18px);
  line-height:1.45;
  color:var(--ink-2);
}

/* ------------------------------------------------------------- theses --- */

.theses{ list-style:none; margin:0; padding:0; }

.theses li{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline; gap:6px 24px;
  padding:15px 0;
  border-top:1px solid var(--line);
}
.theses li:last-child{ border-bottom:1px solid var(--line); }

.t{
  font-size:clamp(16px, 1.6vw, 18.5px);
  font-weight:500;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.t a{ text-decoration:none; transition:color .14s ease; }
.theses li:hover .t a, .theses li:focus-within .t a{ color:var(--accent); }

.y{
  font-family:"Silkscreen", "Courier New", monospace;
  font-size:10px;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

@media (max-width:520px){
  .theses li{ grid-template-columns:1fr; gap:5px; padding:16px 0; }
}

/* -------------------------------------------------------- thesis page --- */

.back{
  display:inline-block;
  padding:40px 0 0;
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px;
  color:var(--ink-3);
  text-decoration:none;
  transition:color .14s ease;
}
.back:hover{ color:var(--accent); }

.post{ padding:52px 0 72px; }

.post h1{
  margin:0 0 14px;
  font-size:clamp(28px, 4.4vw, 42px);
  letter-spacing:-.03em;
  line-height:1.12;
  max-width:22ch;
}

.post .date{
  display:block;
  margin-bottom:40px;
  font-family:"Silkscreen", "Courier New", monospace;
  font-size:10px;
  color:var(--ink-3);
  letter-spacing:.05em;
}

.post .body p{
  margin:0 0 1.25em;
  max-width:62ch;
  font-size:16.5px;
  line-height:1.72;
  color:var(--ink-2);
}
.post .body p:first-child{
  font-size:19px;
  line-height:1.55;
  color:var(--ink);
  margin-bottom:1.5em;
}
.post .body p:last-child{ margin-bottom:0; }

/* inline links in body prose — ink text, clay underline */
.post .body a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .14s ease;
}
.post .body a:hover{ color:var(--accent); }

/* lists — square clay markers, echoing the pixel glyph */
.post .body ul{
  margin:0 0 1.25em;
  padding:0;
  list-style:none;
  max-width:62ch;
}
.post .body li{
  position:relative;
  margin:0 0 1.1em;
  padding-left:22px;
  font-size:16.5px;
  line-height:1.72;
  color:var(--ink-2);
}
.post .body li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:5px; height:5px;
  background:var(--accent);
}
.post .body li:last-child{ margin-bottom:0; }

/* the turn — one highlighted line where the argument pivots */
.post .body .turn{
  margin:1.9em 0;
  max-width:26ch;
  font-size:clamp(20px, 2.2vw, 24px);
  line-height:1.3;
  letter-spacing:-.025em;
  color:var(--ink);
}
.post .body .turn::before{
  content:"";
  display:block;
  width:26px; height:2px;
  background:var(--accent);
  margin-bottom:16px;
}

/* ------------------------------------------------------------ contact --- */

#contact p{ margin:0; }
#contact a{
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  transition:color .14s ease;
}
#contact a:hover{ color:var(--accent); }

/* ------------------------------------------------------------- footer --- */

footer{ max-width:var(--w); margin:0 auto; padding:0 28px 56px; }
footer p{
  margin:0;
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px;
  color:var(--ink-3);
}

/* ------------------------------------------------------- small screens --- */

@media (max-width:640px){
  main{ padding:0 22px; }
  footer{ padding:0 22px 44px; }
  .hero{ padding:64px 0 52px; }
  section{ padding-bottom:48px; }
  .post{ padding:36px 0 56px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}