/* =========================
   101Daily Core (101.css)
   Subdomain-safe base + tokens
   ========================= */

/* Global tokens (safe defaults) */
:root{
  --ink: #0f1f17;                /* main text on light */
  --ink-muted: #2a3b32;          /* secondary text on light */
  --bg: #ffffff;                 /* page bg */
  --card: #ffffff;               /* card bg */
  --ui-quiet: #f6f9f7;           /* soft strip/bg */

  --link: #0f6d4f;               /* link on light */
  --link-hover: #0a5c43;
  --link-visited: #0d5e46;

  --ink-on-dark: #ffffff;        /* text on dark */
  --link-on-dark: #d3f6e7;       /* link on dark */
  --link-on-dark-hover: #ffffff;

  --btn-bg: #2e6f55;             /* primary button */
  --btn-bg-hover: #255a45;
  --btn-ink: #ffffff;

  --hairline: rgba(0,0,0,.08);   /* dividers/borders */

  /* Layout helpers */
  --container: 1100px;
  --radius: 14px;
}

/* Base */
html, body { background: var(--bg); color: var(--ink); margin:0; }
img { max-width:100%; height:auto; display:block; }
* { box-sizing: border-box; }

/* Type */
h1,h2,h3,h4,h5,h6{ color: var(--ink); margin: 0 0 .35em; }
p,li,small{ color: var(--ink); line-height: 1.55; }
.muted{ color: var(--ink-muted); }

/* Containers */
.container{ max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section{ padding: 44px 0; }

/* Cards */
.card{
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
  padding: 18px;
}

/* Grids */
.grid-2{ display:grid; gap:24px; grid-template-columns: repeat(12,1fr); }
.grid-2 > *{ grid-column: span 6; }
@media (max-width:820px){ .grid-2 > *{ grid-column: span 12; } }

.grid-3{ display:grid; gap:18px; grid-template-columns: repeat(12,1fr); }
.grid-3 > *{ grid-column: span 4; }
@media (max-width:900px){ .grid-3 > *{ grid-column: span 6; } }
@media (max-width:620px){ .grid-3 > *{ grid-column: span 12; } }

/* Navbar */
.navbar{ display:flex; align-items:center; justify-content:space-between; padding: 14px 20px; }
.logo{ font-weight: 800; text-decoration:none; color: var(--ink); }
.nav-links{ list-style:none; display:flex; gap:16px; margin:0; padding:0; }
.nav-links a{ text-decoration:none; color: var(--ink); opacity:.9; }
.nav-links a.active{ opacity:1; font-weight:700; }

/* Hero / dark surfaces */
.hero{ position:relative; z-index:0; }
.hero > *{ position:relative; z-index:1; }
.on-dark{ color: var(--ink-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark p, .on-dark small{ color: var(--ink-on-dark); }

/* Links (consistent) */
a{
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: .08em;
}
a:hover{ color: var(--link-hover); text-decoration-thickness: .14em; }
a:visited{ color: var(--link-visited); }

/* Links on dark */
.on-dark a{
  color: var(--link-on-dark);
  text-decoration-color: rgba(255,255,255,.85);
}
.on-dark a:hover{ color: var(--link-on-dark-hover); text-decoration-color: #fff; }

/* Buttons */
.btn, .cta{
  display:inline-block; background: var(--btn-bg); color: var(--btn-ink);
  border-radius: 12px; padding: 12px 20px; font-weight: 700; text-decoration:none;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}
.btn:hover, .cta:hover{ background: var(--btn-bg-hover); transform: translateY(-1px); }

/* Dividers */
.hr, .divider{
  height:2px; width:90px; margin:20px auto 0; background: var(--hairline); border-radius:4px;
}

/* Tile grid + uniform media */
.tiles{ display:grid; gap:18px; grid-template-columns:repeat(12,1fr); }
@media (max-width:1024px){ .tiles{ grid-template-columns:repeat(8,1fr); } }
@media (max-width:680px){ .tiles{ grid-template-columns:repeat(4,1fr); } }

.tile{
  grid-column: span 6;                 /* 2-up desktop, 1-up mobile */
  background: var(--ui-quiet);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: 0 1px 8px rgba(0,0,0,.05);
}

@media (max-width:680px){ .tile{ grid-column: span 4; } }

.tile-media{
  position:relative; width:100%; aspect-ratio:16 / 9;
  overflow:hidden; border-radius:10px; background:#eaf3ef; margin-bottom:10px;
}
.tile-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Footer */
.footer{ padding: 22px 20px; text-align:center; }
.footer p{ margin:6px 0; }
.footer a{ text-decoration: underline; }