/* ==========================================================================
   techlashed.org — stylesheet
   Replaces the Tailwind Play CDN (407KB of runtime JS) with the ~140 utility
   classes the site actually uses, reproduced by hand at their Tailwind v3
   values. Class names are unchanged so the page JS, which adds and removes
   utilities at runtime, keeps working as-is.
   Sections: 1 preflight · 2 utilities · 3 responsive · 4 site components
   ========================================================================== */

/* --- 1. Preflight (the subset of Tailwind's reset the layout depends on) --- */

*, ::before, ::after { box-sizing: border-box; border: 0 solid #e5e7eb; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
               sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

body { line-height: inherit; }
hr { height: 0; color: inherit; border-top-width: 1px; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button, select { text-transform: none; }
button, [type="button"], [type="submit"] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
:-moz-focusring { outline: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

ol, ul, menu { list-style: none; margin: 0; padding: 0; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }
button, [role="button"] { cursor: pointer; }
:disabled { cursor: default; }

/* --- 2. Utilities --------------------------------------------------------- */

/* display & position */
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.top-2 { top: 0.5rem; }
.top-4 { top: 1rem; }
.top-16 { top: 4rem; }
.right-2 { right: 0.5rem; }
.right-4 { right: 1rem; }
.right-5 { right: 1.25rem; }
.bottom-5 { bottom: 1.25rem; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* flexbox */
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-shrink-0 { flex-shrink: 0; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.gap-6 { gap: 1.5rem; }

/* sizing */
.w-2 { width: 0.5rem; }
.w-4 { width: 1rem; }
.w-72 { width: 18rem; }
.h-2 { height: 0.5rem; }
.h-4 { height: 1rem; }
.h-screen { height: 100vh; }
.max-w-6xl { max-width: 72rem; }
.max-w-md { max-width: 28rem; }
.max-w-none { max-width: none; }
.max-h-\[80vh\] { max-height: 80vh; }

/* spacing */
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-2 { margin-left: 0.5rem; }
.mr-1 { margin-right: 0.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-6 { padding: 1.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-8 { padding-left: 2rem; }

.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }

.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.space-y-12 > * + * { margin-top: 3rem; }
.space-x-3 > * + * { margin-left: 0.75rem; }

/* typography */
.text-\[10px\] { font-size: 10px; line-height: 1.2; }
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.leading-tight { line-height: 1.25; }
.italic { font-style: italic; }
.text-left   { text-align: left; }
.text-center { text-align: center; }
.underline   { text-decoration-line: underline; }
.list-disc   { list-style-type: disc; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* colour */
.text-slate-400   { color: #94a3b8; }
.text-slate-500   { color: #64748b; }
.text-slate-600   { color: #475569; }
.text-slate-700   { color: #334155; }
.text-slate-800   { color: #1e293b; }
.text-indigo-600  { color: #4f46e5; }
.text-indigo-900  { color: #312e81; }
.text-emerald-900 { color: #064e3b; }
.text-red-600     { color: #dc2626; }

.bg-transparent   { background-color: transparent; }
.bg-black         { background-color: #000; }
.bg-slate-200     { background-color: #e2e8f0; }
.bg-slate-400     { background-color: #94a3b8; }
.bg-stone-100     { background-color: #f5f5f4; }
.bg-stone-100\/90 { background-color: rgb(245 245 244 / 0.9); }
.bg-emerald-100   { background-color: #d1fae5; }
.bg-opacity-50    { --tw-bg-opacity: 0.5; background-color: rgb(0 0 0 / 0.5); }

.border            { border-width: 1px; }
.border-slate-300  { border-color: #cbd5e1; }
.border-stone-300  { border-color: #d6d3d1; }
.border-emerald-400{ border-color: #34d399; }

/* borders, shadows, effects */
.rounded      { border-radius: 0.25rem; }
.rounded-md   { border-radius: 0.375rem; }
.rounded-full { border-radius: 9999px; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.opacity-0 { opacity: 0; }
.pointer-events-none { pointer-events: none; }
.overflow-y-auto { overflow-y: auto; }
.scroll-mt-6 { scroll-margin-top: 1.5rem; }
.snap-start { scroll-snap-align: start; }
.ring-2 { box-shadow: 0 0 0 2px var(--ring-color, #4f46e5); }
.ring-indigo-600 { --ring-color: #4f46e5; }
.transition-opacity { transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.transition-colors  { transition: color, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.duration-300 { transition-duration: 300ms; }

/* interaction states */
.hover\:shadow-lg:hover      { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.hover\:bg-stone-200:hover   { background-color: #e7e5e4; }
.hover\:bg-slate-200:hover   { background-color: #e2e8f0; }
.hover\:text-slate-700:hover { color: #334155; }
.hover\:text-slate-900:hover { color: #0f172a; }
.hover\:text-indigo-600:hover{ color: #4f46e5; }
.hover\:text-indigo-800:hover{ color: #3730a3; }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--ring-color, #6366f1); }
.focus\:ring-indigo-500:focus { --ring-color: #6366f1; }

/* group-hover, used for the permalink icon revealed on card hover */
.group\/card:hover .group-hover\/card\:opacity-100 { opacity: 1; }

/* --- 3. Responsive -------------------------------------------------------- */

@media (min-width: 640px) {
  .sm\:flex-row  { flex-direction: row; }
  .sm\:items-end { align-items: flex-end; }
  .sm\:pt-6      { padding-top: 1.5rem; }
}

@media (min-width: 768px) {
  .md\:block       { display: block; }
  .md\:hidden      { display: none; }
  .md\:flex-row    { flex-direction: row; }
  .md\:w-1\/5      { width: 20%; }
  .md\:w-5         { width: 1.25rem; }
  .md\:h-5         { height: 1.25rem; }
  .md\:p-3         { padding: 0.75rem; }
  .md\:pt-6        { padding-top: 1.5rem; }
  .md\:top-4       { top: 1rem; }
  .md\:right-4     { right: 1rem; }
  .md\:bottom-auto { bottom: auto; }
  .md\:left-auto   { left: auto; }
  .md\:text-2xl    { font-size: 1.5rem; line-height: 2rem; }
  .md\:text-left   { text-align: left; }
  .md\:justify-start { justify-content: flex-start; }
}

/* --- 4. Site components --------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
  background-color: #f4ecd8;
  background-image: url('paper-fibers.png');
}

.timeline-line {
  position: absolute;
  top: 0; bottom: 0; left: 1rem;
  width: 1px;
  background-color: #9ca3af;
}

.paper-card {
  background-color: #faf0dc;
  /* v2.0 set a background-image here pointing at a paper texture on
     transparenttextures.com, but that file 404s and always has — the cards have
     only ever rendered flat. Dropping the rule keeps the appearance identical and
     removes a failing request on every page load. */
  border: 1px solid #e0d7b7;
  border-radius: 1.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 0;
}

.mobile-nav {
  background-color: #f4ecd8;
  position: sticky;
  top: 0;
  z-index: 20;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.75rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.mobile-nav ul { display: flex; gap: 1.5rem; padding-left: 1rem; }
.mobile-nav::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 2rem;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to left, rgba(244, 236, 216, 1), rgba(244, 236, 216, 0));
}
.mobile-nav::-webkit-scrollbar { display: none; }

/* About button emoji */
#about-btn span {
  display: inline-block;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, text-shadow 0.3s ease, filter 0.3s ease;
  filter: brightness(1.1);
}
#about-btn:hover span {
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
  transform: scale(3) rotate(20deg);
  filter: brightness(1.3);
}

/* Card body text set by mdToHtml. This was .prose on the CDN build, which never
   did anything because the Tailwind Typography plugin was not loaded — so the
   text takes its metrics from .text-sm. Left deliberately unstyled to keep the
   rendering identical to v2.0; adding `line-height: 1.65` here would open the
   body copy up, which is a readability improvement but a visible change. */
.entry-body { }

/* "Read the full case" link on each timeline card. Gives every entry page a
   descriptive inbound anchor, and gives touch users a visible route to it — the
   hover-revealed permalink icon alone is unreachable on a phone. */
.card-more { margin: 0 0 1rem; font-size: 0.875rem; }
.card-more a { color: #4f46e5; font-weight: 500; text-decoration: underline; }
.card-more a:hover { color: #3730a3; }
.card-more a:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

/* Share row */
.share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.share-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  margin-right: 0.125rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #334155;
  background-color: #f5f5f4;
  border: 1px solid #d6d3d1;
  border-radius: 0.375rem;
  transition: background-color 150ms, border-color 150ms, color 150ms;
}
.share-btn:hover { background-color: #e7e5e4; color: #0f172a; }
.share-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.share-btn svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.share-btn.is-copied {
  background-color: #d1fae5;
  border-color: #34d399;
  color: #064e3b;
}

/* --- Entry pages ---------------------------------------------------------- */

.entry-page { max-width: 46rem; margin: 0 auto; padding: 1.5rem; }
.entry-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 1.5rem;
}
.entry-nav a { color: #4f46e5; text-decoration: underline; }
.entry-nav a:hover { color: #3730a3; }
.entry-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.5rem;
}
.entry-title { font-size: 2rem; line-height: 1.2; font-weight: 700; margin-bottom: 0.5rem; }
.entry-sub { font-size: 1rem; color: #475569; margin-bottom: 0.75rem; }
.entry-byline { font-size: 0.8125rem; color: #64748b; margin-bottom: 1.5rem; }
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  font-size: 0.8125rem;
  color: #64748b;
  border-top: 1px solid #e0d7b7;
  border-bottom: 1px solid #e0d7b7;
  padding: 0.75rem 0;
  margin-bottom: 1.5rem;
}
.entry-meta b { font-weight: 600; color: #334155; }
.entry-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 1.25rem 0; }
.entry-tag {
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #64748b;
  background-color: rgba(224, 215, 183, 0.45);
  border: 1px solid #e0d7b7;
  border-radius: 9999px;
  padding: 0.1875rem 0.5rem;
}
.entry-adjacent {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e0d7b7;
  font-size: 0.875rem;
}
.entry-adjacent a { color: #4f46e5; text-decoration: underline; }
.entry-adjacent a:hover { color: #3730a3; }
.entry-adjacent .next { text-align: right; margin-left: auto; }

/* --- Print ---------------------------------------------------------------- */

@media print {
  body { background: white !important; background-image: none !important; color: #000; }
  aside, .mobile-nav, #about-btn, #back-to-top, .copy-prompt-btn, header .search-controls,
  .permalink, .share-row, .entry-nav, .entry-adjacent { display: none !important; }
  .max-w-6xl { max-width: none !important; }
  main { padding: 0 !important; }
  .paper-card {
    background: white !important;
    background-image: none !important;
    border: 1px solid #999 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 1rem !important;
  }
  a { color: #000 !important; text-decoration: underline; }
  footer { border-top: 1px solid #ccc; margin-top: 2rem; }
}