/*
Theme Name: Matt and Lana
Theme URI: https://mattandlana.com
Author: Matt Shaw
Description: Simple, clean, timeless. One typeface, one column, one accent.
Version: 0.2.2
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mattandlana
*/

/* ══════════════════════════════════════════════════════════════════════
   Simple. Clean. Timeless.

   ONE typeface — Source Serif 4, a transitional serif that is modern
   without being fashionable and reads well at length. Every word on the
   site is set in it. All hierarchy comes from size, weight and space.
   A second family would be the first step back toward busy.

   ONE column — everything obeys the same 34rem measure, including
   photographs. About 68 characters per line, where prose reads easiest.

   ONE accent — #16324F on links only. Nothing else is coloured.

   MEASURED on paper #FDFCFB:
     ink     #1A1A1A  16.98:1
     soft    #5A5651   7.10:1   AAA even at normal size
     accent  #16324F  12.78:1
     rule    #E4E0DB   1.28:1   hairline only, never text
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#FDFCFB; --ink:#1A1A1A; --soft:#5A5651; --rule:#E4E0DB; --accent:#16324F;
  --measure:34rem;
}

body{ -webkit-font-smoothing:antialiased; font-optical-sizing:auto; }
img{ max-width:100%; height:auto; display:block; }

/* The column. ⚠ Anything that sets vertical padding must use padding-block:
   the `padding` shorthand silently wipes this inset, which put the masthead,
   opening and footer 24px out of alignment with everything else. */
.page{ max-width:var(--measure); margin-inline:auto; padding-inline:24px; }

a{ color:var(--accent); text-decoration:none;
   border-bottom:1px solid rgba(22,50,79,.32); }
a:hover{ border-bottom-color:var(--accent); }

/* ── masthead ────────────────────────────────────────────── */
.ml-mast{ padding-block:40px 0; }
.ml-mast .ml-name{
  font-size:1.32rem; font-weight:600; letter-spacing:-.005em;
  color:var(--ink); border:0; display:inline-block; }
.ml-nav{ margin-top:14px; display:flex; flex-wrap:wrap; gap:22px;
  font-size:.94rem; padding-bottom:20px; border-bottom:1px solid var(--rule); }
.ml-nav a{ color:var(--soft); border:0; }
.ml-nav a:hover{ color:var(--ink); }

/* Current page marking. WordPress emits `page-id-N` but no slug class, so
   functions.php adds `ml-page-{slug}`; the masthead then stays plain HTML
   and needs no PHP of its own. */
body.home                  .ml-nav a[data-nav="home"],
body.ml-page-our-work      .ml-nav a[data-nav="work"],
body.ml-page-timeline      .ml-nav a[data-nav="timeline"],
body.ml-page-contact       .ml-nav a[data-nav="contact"],
body.single-moment         .ml-nav a[data-nav="timeline"]{ color:var(--ink); }

/* ── the opening ─────────────────────────────────────────── */
.ml-open{ padding-block:46px 6px; }
.ml-open p{ margin-top:22px; color:var(--soft); }

figure{ margin-block:38px; }
figcaption{ margin-top:10px; font-size:.9rem; font-style:italic; color:var(--soft); }
.wp-block-image{ margin-block:38px; }
.wp-block-image figcaption{ margin-top:10px; font-size:.9rem; font-style:italic; color:var(--soft); }

/* ── sections ────────────────────────────────────────────── */
.ml-sec{ padding-block:38px; }
.ml-sec + .ml-sec{ border-top:1px solid var(--rule); }
.ml-sec h2{ margin-bottom:26px; }
p + p{ margin-top:18px; }

/* ── a list of writing ───────────────────────────────────── */
.ml-item{ display:block; padding-block:12px; border:0; }
.ml-item + .ml-item{ border-top:1px solid var(--rule); }
.ml-item .t{ display:block; font-size:1.06rem; line-height:1.35; color:var(--ink); }
.ml-item .m{ display:block; margin-top:4px; font-size:.9rem; font-style:italic; color:var(--soft); }
.ml-item:hover .t{ color:var(--accent); }
.ml-empty{ color:var(--soft); font-style:italic; }

/* ── the timeline ────────────────────────────────────────────
   Moments read oldest-first, because a story reads forwards. The year sits
   above its entry rather than in a margin rail — one column, no apparatus. */
.ml-moment{ padding-block:26px; }
.ml-moment + .ml-moment{ border-top:1px solid var(--rule); }
.ml-when{ display:block; font-size:.9rem; font-style:italic; color:var(--soft); margin-bottom:6px; }
.ml-moment h3{ font-size:1.12rem; font-weight:600; margin-bottom:10px; }
.ml-moment img{ margin-block:16px; }

/* ── the two invitations ─────────────────────────────────── */
.ml-ask + .ml-ask{ margin-top:34px; }
.ml-ask h3{ font-size:1.06rem; font-weight:600; margin-bottom:10px; }
.ml-ask p{ color:var(--soft); }
.ml-ask .go{ display:inline-block; margin-top:14px; color:var(--accent); }

/* ── the work list ───────────────────────────────────────── */
.ml-work{ display:block; padding-block:18px; border:0; }
.ml-work + .ml-work{ border-top:1px solid var(--rule); }
.ml-work .t{ display:block; font-size:1.12rem; font-weight:600; color:var(--ink); }
.ml-work .d{ display:block; margin-top:5px; color:var(--soft); font-size:.98rem; }
.ml-work:hover .t{ color:var(--accent); }

/* ── footer ──────────────────────────────────────────────── */
.ml-foot{ padding-block:34px 60px; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:10px 22px; font-size:.9rem; }
.ml-foot a{ color:var(--soft); border:0; }
.ml-foot a:hover{ color:var(--ink); }

:where(a, button, input, textarea):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; }

@media (max-width:40rem){
  body{ font-size:18px; }
  .ml-open{ padding-block:34px 6px; }
  .ml-sec{ padding-block:32px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}