/* ─────────────────────────────────────────────────────────────
   Dryaides — shared minimalist system.
   Calm cream canvas, forest/moss accents, generous whitespace,
   strict alignment. The one flourish: cards lift on hover.
   ───────────────────────────────────────────────────────────── */

/* Monocraft — pixel face, used only for the Meccha wordmark (server-MOTD style) */
@font-face { font-family:'Monocraft'; src:url('/assets/fonts/Monocraft.woff2') format('woff2'); font-weight:400; font-display:swap; }

:root {
  --bark:        #3a2c20;
  --bark-soft:   #6b4f3a;
  --bark-light:  #a98a6b;
  --forest:      #25382d;
  --moss:        #4f7050;
  --sage:        #8fb083;
  --sage-soft:   #cfe0c4;
  --parchment:   #f6f2e9;
  --parchment-2: #efe9db;
  --card:        #fbf9f3;
  --ink:         #2c352c;
  --muted:       #6f685a;
  --line:        rgba(58, 44, 32, 0.12);

  --mono: ui-monospace, 'SF Mono', 'Courier New', monospace;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;

  --radius: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(60% 55% at 12% 4%, rgba(143,176,131,0.14), transparent 60%),
    radial-gradient(55% 50% at 96% 96%, rgba(107,79,58,0.10), transparent 62%),
    radial-gradient(120% 90% at 50% -8%, var(--parchment) 0%, var(--parchment-2) 60%, #e7dfcd 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* ── Layout shell ────────────────────────────────────────────── */
.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 8vw, 80px) 24px 24px;
}
.wrap.wide { max-width: 940px; }

/* ── Header ──────────────────────────────────────────────────── */
.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1;
  color: var(--forest);
  letter-spacing: -0.015em;
  text-decoration: none;
}
.brand .accent { font-style: italic; color: var(--moss); }
.backlink {
  font-size: 13px;
  color: var(--bark-soft);
  text-decoration: none;
  transition: color .18s ease;
}
.backlink:hover { color: var(--moss); }

.intro {
  margin-top: 14px;
  font-size: clamp(15px, 2.4vw, 17px);
  color: var(--muted);
  max-width: 46ch;
}

/* ── Section label ───────────────────────────────────────────── */
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bark-light);
  font-weight: 600;
}
.section { margin-top: clamp(40px, 7vw, 64px); }
.section > .eyebrow { display: block; margin-bottom: 18px; }

/* ── Project cards (stacked rows — always aligned) ───────────── */
.cards { display: flex; flex-direction: column; gap: 16px; }

.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: 0 1px 2px rgba(58,44,32,0.04);
  transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s ease, border-color .26s ease;
}
.card:hover, .card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 22px 40px -26px rgba(58,44,32,0.55);
  border-color: rgba(79,112,80,0.4);
  outline: none;
}
.card:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }

.card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.card .logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  image-rendering: pixelated;
  flex-shrink: 0;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.card:hover .logo, .card:focus-visible .logo { transform: rotate(-5deg) scale(1.06); }

/* Meccha card — wears its own colours (dark, chameleon accents) */
.card.meccha {
  background: linear-gradient(180deg, #26201a, #1b1712);
  border-color: rgba(255, 240, 210, 0.12);
}
.card.meccha:hover, .card.meccha:focus-visible {
  border-color: rgba(167, 224, 90, 0.45);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.7);
}
.card.meccha .card-title {
  color: #f4ecdd;
  font-family: 'Monocraft', ui-monospace, monospace;
  font-weight: 400;
  font-size: clamp(16px, 2.9vw, 22px);
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}
.card.meccha .card-title .accent { color: #a7e05a; font-style: normal; }
.card.meccha .card-desc { color: #b6ac95; }
.card.meccha .card-desc em { color: #d9d0ba; }
.card.meccha .pill.dev { color: #f16436; background: rgba(241, 100, 54, 0.16); }
.card.meccha .card-cta { background: #f16436; color: #fff; }
.card.meccha .arrow { color: #f16436; }
.card.meccha:hover .arrow { color: #f16436; }

/* Arcadia card — gunmetal grey + brass, steampunk */
.card.arcadia {
  background: linear-gradient(160deg, #34373d 0%, #232428 100%);
  border-color: rgba(206, 170, 92, 0.28);
}
.card.arcadia:hover, .card.arcadia:focus-visible {
  border-color: rgba(206, 170, 92, 0.6);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.72);
}
.card.arcadia .card-title { color: #e8e3d6; }
.card.arcadia .card-title .accent { color: #d4af5f; font-style: italic; }
.card.arcadia .card-desc { color: #a8a498; }
.card.arcadia .card-desc em { color: #d8cfae; }
.card.arcadia .arrow { color: #d4af5f; }
.card.arcadia:hover .arrow { color: #e6c87c; }
.card.arcadia .logo { border-radius: 0; }
.card.arcadia .card-cta {
  background: linear-gradient(180deg, #dcb968, #b6913a);
  color: #211d15;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.card.arcadia:hover .card-cta, .card.arcadia:focus-visible .card-cta {
  box-shadow: 0 5px 14px rgba(182, 145, 58, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Drawdle card — white surface, grey name, green + yellow accents (Wordle) */
.card.drawdle {
  background: #ffffff;
  border-color: rgba(120, 124, 126, 0.28);
}
.card.drawdle:hover, .card.drawdle:focus-visible {
  border-color: rgba(106, 170, 100, 0.6);
  box-shadow: 0 22px 40px -26px rgba(58, 44, 32, 0.5);
}
.card.drawdle .card-title {
  color: #52565a;
  font-family: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.card.drawdle .card-title .accent { color: #6aaa64; font-style: normal; }
.card.drawdle .card-desc { color: #6b7075; }
.card.drawdle .card-desc em { color: #3a3a3c; }
.card.drawdle .pill.live { color: #10240e; background: rgba(106, 170, 100, 0.18); }
.card.drawdle .card-cta { background: #6aaa64; color: #10240e; }
.card.drawdle .arrow { color: #6aaa64; }
.card.drawdle:hover .arrow { color: #7bb875; }
.card.drawdle .logo { border-radius: 0; }
.card.drawdle:hover .logo { transform: rotate(-4deg) scale(1.05); }
.card.drawdle .logo { transition: transform .26s cubic-bezier(.2,.7,.2,1); }

/* Polymorph+ — grey mod, its own muted DA */
.card.polymorph { background: linear-gradient(180deg, #2a2c30, #1e2023); border-color: rgba(196,196,196,0.22); }
.card.polymorph:hover, .card.polymorph:focus-visible { border-color: rgba(196,196,196,0.5); box-shadow: 0 22px 44px -26px rgba(0,0,0,0.7); }
.card.polymorph .card-title { color: #e8e8ea; }
.card.polymorph .card-title .accent { color: #c0c0c0; font-style: normal; }
.card.polymorph .card-desc { color: #a7a7ac; }
.card.polymorph .card-desc em { color: #d6d6da; }
.card.polymorph .arrow { color: #c0c0c0; }
.card.polymorph:hover .arrow { color: #dcdce0; }
.card.polymorph .card-cta { background: #c0c0c0; color: #1e2023; }

/* Item Ping — Hytale mod, neon cyan on navy */
.card.itemping { background: linear-gradient(180deg, #141a2e, #0d1120); border-color: rgba(88,200,245,0.24); }
.card.itemping:hover, .card.itemping:focus-visible { border-color: rgba(88,200,245,0.55); box-shadow: 0 22px 44px -26px rgba(0,0,0,0.75); }
.card.itemping .card-title { color: #eaf2ff; }
.card.itemping .card-title .accent { color: #58c8f5; font-style: normal; }
.card.itemping .card-desc { color: #9fb0c8; }
.card.itemping .card-desc em { color: #cfe0f5; }
.card.itemping .arrow { color: #58c8f5; }
.card.itemping:hover .arrow { color: #8bdcff; }
.card.itemping .card-cta { background: #58c8f5; color: #08121f; }

/* Image2Pixel — Hytale mod, earthy block tone */
.card.image2pixel { background: linear-gradient(180deg, #241d16, #181310); border-color: rgba(207,155,82,0.26); }
.card.image2pixel:hover, .card.image2pixel:focus-visible { border-color: rgba(207,155,82,0.55); box-shadow: 0 22px 44px -26px rgba(0,0,0,0.72); }
.card.image2pixel .card-title { color: #efe6da; }
.card.image2pixel .card-title .accent { color: #cf9b52; font-style: normal; }
.card.image2pixel .card-desc { color: #b0a494; }
.card.image2pixel .card-desc em { color: #e0d3bf; }
.card.image2pixel .arrow { color: #cf9b52; }
.card.image2pixel:hover .arrow { color: #e6b76c; }
.card.image2pixel .card-cta { background: #cf9b52; color: #1a140d; }

.card-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 3.6vw, 28px);
  color: var(--forest);
  line-height: 1.1;
}
.card-title .accent { font-style: italic; color: var(--moss); }
.card-head .spacer { flex: 1; }
.card .arrow {
  color: var(--bark-light);
  transition: transform .26s cubic-bezier(.2,.7,.2,1), color .26s ease;
  flex-shrink: 0;
}
.card:hover .arrow { transform: translateX(5px); color: var(--moss); }

.card-desc {
  margin-top: 10px;
  font-size: 15px;
  color: var(--muted);
  max-width: 60ch;
}
.card-desc em { font-style: italic; color: var(--bark-soft); }

/* status pill */
.pill {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill.dev  { color: var(--bark-soft); background: rgba(169,138,107,0.16); }
.pill.live { color: var(--moss);      background: rgba(143,176,131,0.20); }
.pill.soon { color: var(--bark-light); background: rgba(169,138,107,0.10); }

/* CTA on a project card (e.g. "Jouer") — reads as the action, not a status */
.card-cta {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--moss);
  padding: 6px 15px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .2s ease, transform .2s ease;
}
.card:hover .card-cta, .card:focus-visible .card-cta { transform: scale(1.05); box-shadow: 0 4px 12px rgba(79, 112, 80, 0.35); }

/* ── Timeline rail (left of the cards) ───────────────────────── */
/* Cards are listed newest-first, so the rail reads top = most recent.
   The dot wears each project's own accent, and a parchment halo masks
   the rail behind it so the line appears to pass under the dot. */
.timeline {
  --rail-col: 88px;             /* width of the date column */
  --rail-gap: 28px;             /* gutter the rail runs down */
  --rail-x: calc(var(--rail-col) + var(--rail-gap) / 2);
  --dot-y: 50px;                /* lines the dot up with the card logo */
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: var(--rail-x);
  top: 10px;
  bottom: 10px;
  width: 2px;
  transform: translateX(-1px);
  border-radius: 2px;
  background: linear-gradient(180deg,
    var(--sage) 0%,
    rgba(143, 176, 131, 0.45) 55%,
    rgba(169, 138, 107, 0.22) 100%);
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail-col) 1fr;
  column-gap: var(--rail-gap);
  align-items: start;
}
.tl-item::before {                /* the node on the rail */
  content: '';
  position: absolute;
  left: var(--rail-x);
  top: var(--dot-y);
  width: 11px;
  height: 11px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 4px var(--parchment);
  transition: transform .26s cubic-bezier(.2,.7,.2,1);
}
.tl-item:hover::before { transform: scale(1.35); }
.tl-item.meccha::before      { background: #a7e05a; }
.tl-item.drawdle::before     { background: #6aaa64; }
.tl-item.arcadia::before     { background: #d4af5f; }
.tl-item.polymorph::before   { background: #c0c0c0; }
.tl-item.itemping::before    { background: #58c8f5; }
.tl-item.image2pixel::before { background: #cf9b52; }

.tl-when {
  padding-top: calc(var(--dot-y) - 9px);   /* date sits level with its dot */
  text-align: right;
}
.tl-date {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--bark-light);
  white-space: nowrap;
}
.tl-item:hover .tl-date { color: var(--moss); }

/* Narrow screens: no room for a date column, so the rail runs down the
   left gutter and the date moves on top of its card. Cards, dates and the
   dots' rows all sit flush with the section labels and roadmap — one edge. */
@media (max-width: 640px) {
  .timeline { --rail-x: -13px; --dot-y: 9px; }
  .tl-item { grid-template-columns: 1fr; }
  .tl-when { padding-top: 0; margin-bottom: 7px; text-align: left; }
}

/* ── Roadmap (quiet list) ────────────────────────────────────── */
.soon-list { display: flex; flex-direction: column; }
.soon-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-top: 1px solid var(--line);
}
.soon-row:last-child { border-bottom: 1px solid var(--line); }
.soon-name { font-family: var(--serif); font-size: 18px; color: var(--bark); }
.soon-note { font-size: 13.5px; color: var(--muted); }
.soon-row .spacer { flex: 1; }
a.soon-row { text-decoration: none; transition: background .18s ease; }
a.soon-row:hover { background: rgba(79, 112, 80, 0.06); }
a.soon-row:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; border-radius: 6px; }
.soon-logo { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
a.soon-row .arrow { color: var(--bark-soft); flex-shrink: 0; transition: transform .26s cubic-bezier(.2,.7,.2,1), color .26s ease; }
a.soon-row:hover .arrow { transform: translateX(5px); color: var(--moss); }
a.soon-row:hover .soon-name { color: var(--moss); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  border: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-solid {
  color: var(--parchment);
  background: var(--forest);
  box-shadow: 0 10px 22px -12px rgba(37,56,45,0.7);
}
.btn-solid:hover { transform: translateY(-2px); background: var(--moss); }
.btn-ghost {
  color: var(--forest);
  background: transparent;
  border: 1px solid rgba(79,112,80,0.35);
}
.btn-ghost:hover { transform: translateY(-2px); background: rgba(143,176,131,0.14); }

/* ── Footer ──────────────────────────────────────────────────── */
.foot {
  max-width: 760px;
  margin: clamp(48px, 9vw, 80px) auto 0;
  padding: 22px 24px 40px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.foot.wide { max-width: 940px; }
.foot a { color: var(--bark-soft); text-decoration: none; }
.foot a:hover { color: var(--moss); }

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