/*
Theme Name: DayOneToday
Theme URI: https://dayonetoday.com
Author: IOMartinC
Description: Every day is day one. Clean, light, editorial. The opposite energy of ceremony.
Version: 1.2
*/

:root {
    --paper: #FAF8F4;
    --ink: #1A1A1A;
    --soft: #6B6560;
    --sunrise: #E8853D;
    --line: #E5E0D8;
    --serif: 'Newsreader', Georgia, serif;
    --sans: -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--sunrise); transition: color .15s; }
a:hover { color: var(--sunrise); }

.wrap { max-width: 640px; margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
.site-head { padding: 40px 0 32px; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; }
.mark { display: flex; align-items: center; gap: 12px; border: none; }
.mark svg { display: block; }
.mark-word { font-family: var(--serif); font-size: 1.15em; font-weight: 500; letter-spacing: .01em; }
.head-nav a { border: none; margin-left: 22px; font-size: .92em; color: var(--soft); }
.head-nav a:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero { padding: 72px 0 56px; text-align: left; }
.hero h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.4em, 7vw, 3.6em);
    line-height: 1.15;
    letter-spacing: -0.015em;
}
.hero h1 em { font-style: italic; color: var(--sunrise); }
.hero .sub { margin-top: 20px; color: var(--soft); font-size: 1.05em; max-width: 480px; }

/* ---------- horizon rule ---------- */
.horizon { border: none; height: 1px; background: var(--line); position: relative; margin: 0; }
.horizon::after {
    content: ''; position: absolute; left: 24px; top: -4px;
    width: 9px; height: 9px; border-radius: 50%; background: var(--sunrise);
}

/* ---------- today ---------- */
.today { padding: 56px 0; }
.kicker { font-size: .78em; letter-spacing: .18em; text-transform: uppercase; color: var(--sunrise); font-weight: 600; }
.today-date { color: var(--soft); font-size: .9em; margin-top: 6px; }
.today h2 { font-family: var(--serif); font-weight: 400; font-size: 1.7em; margin-top: 14px; line-height: 1.35; }
.today h2 a { border: none; }
.today .excerpt { margin-top: 14px; color: var(--soft); }

/* ---------- embed ---------- */
.embed { padding: 8px 0 56px; }
.embed-frame { border: 1px solid var(--line); background: #fff; padding: 8px; }
.embed-frame iframe { width: 100%; display: block; border: 0; }

/* ---------- email ---------- */
.signup { padding: 56px 0; }
.signup h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5em; }
.signup p { color: var(--soft); margin-top: 8px; }
.signup .form-slot { margin-top: 22px; }
.signup input[type=email] {
    width: 100%; max-width: 360px; padding: 13px 16px; font-size: 1em;
    border: 1px solid var(--line); background: #fff; font-family: var(--sans);
}
.signup button, .btn {
    display: inline-block; margin-top: 12px; padding: 13px 30px;
    background: var(--ink); color: var(--paper); border: none; font-size: .95em;
    cursor: pointer; font-family: var(--sans);
}
.signup button:hover, .btn:hover { background: var(--sunrise); }

/* ---------- archive ---------- */
.archive-list { padding: 40px 0 72px; }
.entry { padding: 30px 0; border-bottom: 1px solid var(--line); }
.entry-date { font-size: .82em; color: var(--sunrise); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.entry h2 { font-family: var(--serif); font-weight: 400; font-size: 1.45em; margin-top: 8px; line-height: 1.35; }
.entry h2 a { border: none; }
.entry .entry-excerpt { margin-top: 8px; color: var(--soft); font-size: .97em; }

/* ---------- single / concept ---------- */
.single-post { padding: 48px 0 80px; }
.single-post .entry-date { margin-bottom: 10px; }
.single-post h1 { font-family: var(--serif); font-weight: 400; font-size: 2.1em; line-height: 1.25; margin-bottom: 26px; }
.single-post .content p { margin-bottom: 1.3em; }
.single-post .content em { color: var(--sunrise); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); padding: 44px 0 56px; margin-top: 40px; }
.socials { display: flex; gap: 20px; }
.socials a { border: none; color: var(--soft); font-size: .92em; }
.socials a:hover { color: var(--sunrise); }
.foot-ad { margin-top: 30px; font-size: .9em; color: var(--soft); }
.foot-ad a { color: var(--soft); border-bottom-color: var(--line); }
.foot-ad a:hover { color: var(--sunrise); }
.foot-fine { margin-top: 22px; font-size: .8em; color: #A8A29B; }

@media (max-width: 560px) {
    .hero { padding: 48px 0 40px; }
    .head-nav a { margin-left: 14px; }
}

/* ============================================================
   v1.1 — Affiliate shelves, shop, theme filter, founder
   ============================================================ */

/* --- Nav: Go Deeper (Substack) --- */
.head-nav a.nav-deeper { color: var(--sunrise); font-weight: 600; }
.head-nav a.nav-deeper:hover { color: var(--ink); }

/* --- Theme filter on the archive --- */
.theme-filter { display: flex; flex-wrap: wrap; gap: 16px; margin: 20px 0 4px; }
.theme-filter a {
    border: none; font-size: .86em; color: var(--soft);
    letter-spacing: .04em; padding-bottom: 2px;
}
.theme-filter a:hover { color: var(--ink); }
.theme-filter a.on { color: var(--ink); border-bottom: 1px solid var(--sunrise); }

/* --- Affiliate shelves --- */
.aff-shelf { padding: 46px 0; border-top: 1px solid var(--line); }
.aff-intro { margin-top: 10px; color: var(--soft); font-size: .97em; }
.aff-note { margin-top: 14px; font-size: .8em; color: #A8A29B; font-style: italic; }
.aff-note a { border-bottom: 1px solid var(--line); color: #A8A29B; }
.aff-note a:hover { color: var(--soft); }

.aff-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px; margin-top: 22px;
}
.aff-card {
    display: flex; flex-direction: column; border: 1px solid var(--line);
    padding: 20px; background: #fff; transition: border-color .15s;
}
.aff-card:hover { border-color: var(--sunrise); }
.aff-card-title { font-family: var(--serif); font-size: 1.12em; line-height: 1.3; }
.aff-card-author { font-size: .86em; color: var(--soft); margin-top: 3px; font-style: italic; }
.aff-card-note { font-size: .92em; color: var(--soft); margin-top: 10px; line-height: 1.6; }
.aff-card-go { font-size: .82em; color: var(--sunrise); margin-top: 14px; font-weight: 600; }

.aff-list { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.aff-row {
    display: block; border: none; border-left: 2px solid var(--sunrise);
    padding: 14px 18px; background: #fff;
}
.aff-row-name { display: block; font-family: var(--serif); font-size: 1.08em; }
.aff-row-note { display: block; font-size: .92em; color: var(--soft); margin-top: 3px; line-height: 1.6; }

/* --- Shop --- */
.shop-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px; margin-top: 28px;
}
.shop-card {
    display: flex; flex-direction: column; border: 1px solid var(--line);
    padding: 24px; background: #fff; transition: border-color .15s;
}
.shop-card:hover { border-color: var(--sunrise); }
.shop-name { font-family: var(--serif); font-size: 1.25em; }
.shop-price { font-size: .88em; color: var(--sunrise); margin-top: 4px; font-weight: 600; }
.shop-note { font-size: .93em; color: var(--soft); margin-top: 12px; line-height: 1.6; }
.shop-go { font-size: .82em; color: var(--sunrise); margin-top: 16px; font-weight: 600; }

/* --- Founder signature --- */
.sig { margin-top: 28px; color: var(--soft); font-style: italic; }

/* --- Masthead (First Light) --- */
.masthead { line-height: 0; }
.masthead svg { display: block; width: 100%; height: auto; }
.issue-line {
    display: flex; justify-content: center; align-items: center; gap: 12px;
    flex-wrap: wrap; padding: 13px 24px;
    border-bottom: 1px solid var(--line);
    font-size: .76em; letter-spacing: .16em; text-transform: uppercase;
    color: var(--soft);
}
.issue-line b { color: var(--ink); font-weight: 600; }

/* Hero sits tighter under the masthead than it did standing alone */
.masthead + .issue-line + .hero { padding-top: 44px; }

@media (max-width: 560px) {
    /* Crop the banner to its centre on phones so the wordmark stays legible */
    .masthead { max-height: 190px; overflow: hidden; }
    .masthead svg { min-height: 190px; object-fit: cover; }
    .issue-line { font-size: .68em; letter-spacing: .12em; gap: 8px; }
}