/* My Own Web Developer — the green and blue of the logo on a clean white page. */

:root {
  --mowd-green: #059808;
  --mowd-blue:  #1311aa;
  --mowd-ink:   #14161a;
  --mowd-soft:  #5d6570;
  --mowd-bg:    #ffffff;
  --mowd-panel: #f4f7f5;
  --mowd-line:  #e2e7e4;
  --mowd-plate: #ffffff;
  --mowd-head: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mowd-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Lights down — the logo keeps its white plate so it stays readable. */
:root[data-bs-theme="dark"] {
  --mowd-green: #3fc743;
  --mowd-blue:  #8f8dff;
  --mowd-ink:   #e9ecef;
  --mowd-soft:  #9aa3ae;
  --mowd-bg:    #101316;
  --mowd-panel: #181c20;
  --mowd-line:  #282e34;
}

body {
  background: var(--mowd-bg);
  color: var(--mowd-ink);
  font-family: var(--mowd-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mowd-blue); }
::selection { background: var(--mowd-green); color: #fff; }
:focus-visible { outline: 2px solid var(--mowd-green); outline-offset: 3px; }

/* --- nav ---------------------------------------------------------------- */
.navbar {
  background: var(--mowd-bg);
  border-bottom: 1px solid var(--mowd-line);
  padding: .7rem 0;
}
.navbar-brand { padding: 0; }
/* The logo art is drawn on white, so it rides on a white plate in either theme. */
.brand-logo {
  display: block; height: auto; width: auto;
  background: var(--mowd-plate); border-radius: 6px; padding: 4px 8px;
}
/* The masthead logo is deliberately large — 40% of the window, tall nav and all. */
.navbar .brand-logo { width: 40vw; }
.navbar .nav-link {
  font-family: var(--mowd-head); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--mowd-soft); padding: .5rem .8rem;
}
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--mowd-ink); }
.navbar .nav-link.active { box-shadow: inset 0 -2px 0 var(--mowd-green); }
.navbar-toggler { border-color: var(--mowd-line); }
.theme-toggle {
  border: 1px solid var(--mowd-line); color: var(--mowd-soft);
  border-radius: 999px; padding: .25rem .7rem; line-height: 1.4; font-size: .95rem;
}
.theme-toggle:hover { border-color: var(--mowd-green); }

/* --- shared furniture --------------------------------------------------- */
.section { padding: 4.5rem 0; }
.section + .section { border-top: 1px solid var(--mowd-line); }
.section-panel { background: var(--mowd-panel); }
.section-head { margin-bottom: 2.5rem; }
.section-head h2 {
  font-family: var(--mowd-head); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -.01em; margin: 0 0 .5rem;
}
.section-head p { color: var(--mowd-soft); max-width: 60ch; margin: 0; }
.eyebrow {
  font-family: var(--mowd-head); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: var(--mowd-green);
  margin: 0 0 .6rem;
}
.page-head { padding: 3.5rem 0 2rem; }
.page-head h1 {
  font-family: var(--mowd-head); font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 2.8rem); letter-spacing: -.02em; margin: 0 0 .5rem;
}
.page-sub { color: var(--mowd-soft); margin: 0; max-width: 56ch; }
.crumb { padding-top: 2rem; margin-bottom: 1.25rem; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .12em; }
.crumb a { text-decoration: none; color: var(--mowd-soft); }
.crumb a:hover { color: var(--mowd-ink); }
.muted-note { color: var(--mowd-soft); font-size: .8rem; }

.btn-line {
  display: inline-block; font-family: var(--mowd-head); font-size: .72rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
  padding: .85rem 1.6rem; text-decoration: none; border: 1px solid transparent;
  background: var(--mowd-green); color: #fff;
}
.btn-line:hover { filter: brightness(1.08); color: #fff; }
.btn-line.ghost {
  background: transparent; color: var(--mowd-ink); border-color: var(--mowd-line);
  margin-left: .5rem;
}
.btn-line.ghost:hover { border-color: var(--mowd-green); color: var(--mowd-green); filter: none; }

/* --- home hero ---------------------------------------------------------- */
.hero { border-bottom: 1px solid var(--mowd-line); }
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 3.5rem; align-items: center; padding: 4.5rem 0 3.5rem;
}
.hero-copy h1 {
  font-family: var(--mowd-head); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; margin: 0 0 1.1rem;
}
.hero-copy h1 .accent { color: var(--mowd-green); }
.hero-copy p { color: var(--mowd-soft); max-width: 46ch; margin-bottom: 1.9rem; }
.hero-shot { margin: 0; }
.hero-shot img { display: block; width: 100%; height: auto; border-radius: 4px; }
.hero-credit {
  text-align: right; font-size: .78rem; color: var(--mowd-soft);
  padding-bottom: 1.5rem; margin: 0;
}
.hero-credit a { color: var(--mowd-soft); }

/* --- what we do --------------------------------------------------------- */
.do-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.do-card {
  background: var(--mowd-bg); border: 1px solid var(--mowd-line);
  border-top: 3px solid var(--mowd-green); border-radius: 4px; padding: 1.75rem;
}
.do-card h3 {
  font-family: var(--mowd-head); font-weight: 700; font-size: 1.15rem; margin: 0 0 .6rem;
}
.do-card p { color: var(--mowd-soft); font-size: .95rem; margin: 0; }

/* --- our sites ---------------------------------------------------------- */
.site-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.site-tile {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--mowd-line); border-radius: 4px; overflow: hidden;
  background: var(--mowd-bg); transition: border-color .2s ease, transform .2s ease;
}
.site-tile:hover { border-color: var(--mowd-green); transform: translateY(-2px); }
.site-plate {
  display: flex; align-items: center; justify-content: center;
  height: 130px; padding: 1.5rem; background: #fff;
}
.site-plate img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.site-wordmark {
  font-family: var(--mowd-head); font-weight: 800; font-size: 1.15rem;
  letter-spacing: .02em; color: #1a2228; text-align: center; line-height: 1.3;
}
/* The TODDL sites share one wordmark, in the red and ink they use themselves. */
.wordmark-tl { font-size: 1.7rem; letter-spacing: .03em; white-space: nowrap; }
.wordmark-tl .wm-toddl { color: #9e1015; font-weight: 900; }
.wordmark-tl .wm-rest { color: #263238; font-weight: 600; }
.site-label { padding: 1.1rem 1.25rem; border-top: 1px solid var(--mowd-line); }
.site-name { display: block; font-family: var(--mowd-head); font-weight: 700; font-size: 1rem; }
.site-note { display: block; font-size: .85rem; color: var(--mowd-soft); }

/* --- contact ------------------------------------------------------------ */
/* The Tally form renders on white, so it keeps a white card under it in dark mode. */
.tally-form-wrap {
  background: #fff; border: 1px solid var(--mowd-line); border-radius: 4px;
  padding: .5rem; overflow: hidden;
}
.tally-form-wrap iframe { display: block; }

/* --- notes -------------------------------------------------------------- */
.note-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem; padding-bottom: 1rem;
}
.notes-page .note-grid { padding-bottom: 4rem; }
.note-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--mowd-line); border-radius: 4px; overflow: hidden;
  transition: border-color .2s ease;
}
.note-card:hover { border-color: var(--mowd-green); }
.nc-thumb { display: block; aspect-ratio: 3/2; background: var(--mowd-panel); overflow: hidden; }
.nc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nc-body { display: block; padding: 1.25rem; }
.nc-cat {
  display: block; font-family: var(--mowd-head); font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--mowd-green);
}
.nc-title {
  display: block; font-family: var(--mowd-head); font-weight: 700; font-size: 1.1rem;
  line-height: 1.3; margin: .2rem 0;
}
.nc-date { display: block; font-size: .78rem; color: var(--mowd-soft); margin-bottom: .4rem; }
.nc-sum { display: block; font-size: .9rem; color: var(--mowd-soft); }

/* --- one note ----------------------------------------------------------- */
.post { max-width: 44rem; margin: 0 auto; }
.post-head { margin-bottom: 2rem; }
.post-cat {
  font-family: var(--mowd-head); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--mowd-green); margin: 0 0 .4rem;
}
.post-head h1 {
  font-family: var(--mowd-head); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1.2; margin: 0 0 .5rem;
}
.post-date { color: var(--mowd-soft); font-size: .85rem; margin: 0; }
.post-hero { margin: 0 0 2rem; background: var(--mowd-panel); }
.post-hero img { width: 100%; height: auto; display: block; }
.post-body { font-size: 1.05rem; }
.post-body img { max-width: 100%; height: auto; }
.post-body h2 { font-family: var(--mowd-head); font-weight: 700; font-size: 1.5rem; margin: 2rem 0 .75rem; }

.embed-wrap { position: relative; padding-bottom: 56.25%; height: 0; margin-bottom: 1.5rem; }
.embed-wrap.vertical { padding-bottom: 177.78%; }
.embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.post-nav {
  display: flex; justify-content: space-between; gap: 1.5rem;
  border-top: 1px solid var(--mowd-line); padding: 2rem 0 4rem;
}
.pn { display: block; text-decoration: none; color: var(--mowd-ink); max-width: 22rem; }
.pn-dir {
  display: block; font-family: var(--mowd-head); font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--mowd-soft);
}
.pn-title { display: block; font-family: var(--mowd-head); font-weight: 600; font-size: 1.02rem; }
.pn:hover .pn-title { color: var(--mowd-green); }

/* --- footer ------------------------------------------------------------- */
.tl-footer { background: #1a2228; color: #b0bec5; padding: 3.5rem 0 2rem; }
.tl-footer a { color: #cfd8dc; text-decoration: none; }
.tl-footer a:hover { color: #fff; }
.tl-footer h5 {
  color: #fff; font-family: var(--mowd-head); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; margin-bottom: 1rem;
}
.tl-footer .footer-logo { height: 42px; width: auto; }
.tl-footer .muted-note { color: #8fa3ad; }
.tl-footer .footer-bottom {
  border-top: 1px solid #2b363d; margin-top: 2.5rem; padding-top: 1.5rem;
  font-size: .8rem; color: #8fa3ad;
}

/* --- narrower windows --------------------------------------------------- */
@media (max-width: 991px) {
  /* Next to the hamburger there is less room, so the logo takes a bigger share. */
  .navbar .brand-logo { width: 58vw; }
  .hero-inner { grid-template-columns: 1fr; gap: 2.25rem; padding: 3rem 0 2.5rem; }
  .do-grid, .site-grid, .note-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .do-grid, .site-grid, .note-grid { grid-template-columns: 1fr; }
  .btn-line.ghost { margin-left: 0; margin-top: .5rem; }
  .post-nav { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .site-tile { transition: none; }
}