/* =========================================================
   T. A. Witz · Web Renew LLC — main stylesheet
   No outside fonts: everything uses fonts already on the visitor's device,
   so nothing breaks if another company's server goes down.
   Colors come from the logo, softened. Change them once here
   and the whole site updates.
   ========================================================= */

:root {
  --navy: #1B2A41;        /* logo navy — headings */
  --navy-soft: #3A4A63;
  --brown: #4A3226;       /* logo brown — WEB RENEW LLC */
  --rust: #C2643A;        /* logo rust — small accents and dots */
  --rust-button: #A5532F; /* a little darker so white button text is easy to read */
  --sage: #8A9A6B;        /* logo leaves */
  --sage-soft: #EEF1E7;   /* soft green bands */
  --blush: #F7EDE5;       /* soft peach bands */
  --sky: #EAF0F5;         /* soft blue tiles */
  --cream: #FBF8F3;       /* page background */
  --ink: #2E2A27;         /* body text — warm dark grey */
  --muted: #6B625B;       /* small text */
  --line: #E7DED4;
  --white: #ffffff;

  --head: Georgia, "Times New Roman", Times, serif;
  --label: "Helvetica Neue", Arial, system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--cream); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--rust-button); }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--head); color: var(--navy); line-height: 1.2; margin: 0 0 .5em; font-weight: 400; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0 0 1em; max-width: 66ch; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.band { padding-block: clamp(52px, 7vw, 96px); }
.band.sage { background: var(--sage-soft); }
.band.blush { background: var(--blush); }
.lede { font-size: 1.18rem; color: var(--muted); }
.center { text-align: center; }
.center p { margin-inline: auto; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--white); padding: 8px 14px; z-index: 10; }
.skip:focus { left: 8px; }

/* Little vine under section headings, like the one in the logo */
.vine { display: block; width: 120px; height: 18px; margin: -4px 0 18px; color: var(--sage); }
.center .vine { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; font-family: var(--label); font-weight: 700; font-size: .95rem; letter-spacing: .03em;
       padding: .8em 1.4em; border-radius: 999px; text-decoration: none; border: 2px solid transparent; line-height: 1.2; }
.btn-rust { background: var(--rust-button); color: var(--white); }
.btn-rust:hover { background: #8C4426; color: var(--white); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-soft); color: var(--white); }
.btn-line { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-line:hover { background: var(--navy); color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.center .btn-row { justify-content: center; }

/* ---------- Header ---------- */
.site-header { background: var(--cream); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.brand img { width: 170px; }
.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-nav a { font-family: var(--label); font-weight: 700; letter-spacing: .08em; font-size: .85rem; text-transform: uppercase;
              color: var(--brown); text-decoration: none; padding: 8px 12px; }
.site-nav a:hover { color: var(--rust-button); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--sage); }
.site-nav .btn { margin-left: 8px; padding: .55em 1.1em; color: var(--white); text-transform: none; letter-spacing: .03em; font-size: .92rem; }
.site-nav .btn:hover { color: var(--white); }
@media (max-width: 760px) {
  .site-header { position: static; }
  .site-header .wrap { flex-direction: column; gap: 6px; }
  .brand img { width: 150px; }
  .site-nav { width: 100%; justify-content: center; }
  .site-nav a { padding: 8px 8px; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(44px, 7vw, 96px); background: linear-gradient(var(--cream), var(--blush)); }
.hero .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.stack { position: relative; aspect-ratio: 6 / 5; }
.stack .tile { position: absolute; width: 47%; box-shadow: 0 20px 40px -22px rgba(74, 50, 38, .45); }
.stack .tile:nth-child(1) { top: 4%; left: 1%; transform: rotate(-3deg); }
.stack .tile:nth-child(2) { top: 12%; right: 1%; transform: rotate(3deg); }
.stack .tile:nth-child(3) { bottom: 6%; left: 26%; transform: rotate(-1deg); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .stack { max-width: 520px; } }
@media (max-width: 600px) { .stack { display: none; } }

/* ---------- Facts strip ---------- */
.facts ul { list-style: none; margin: 0; padding: 26px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.facts li { padding-left: 16px; border-left: 3px solid var(--sage); color: var(--muted); font-size: .98rem; }
.facts strong { display: block; color: var(--navy); font-family: var(--head); font-weight: 600; font-size: 1.05rem; }
@media (max-width: 900px) { .facts ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .facts ul { grid-template-columns: 1fr; } }

/* ---------- Planner app cards ---------- */
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.head-row p { margin: 0; color: var(--muted); }
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(22px, 3vw, 34px); }
.app { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.app .art { aspect-ratio: 16 / 10; display: grid; place-items: center; }
.app .art svg { width: 76px; height: 76px; }
.app .body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.app .kind { font-family: var(--label); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); margin: 0 0 4px; }
.app h3 { margin-bottom: 6px; }
.app p { color: var(--muted); font-size: .98rem; }
.app .btn { margin-top: auto; align-self: flex-start; padding: .6em 1.15em; font-size: .92rem; }

/* tile colors — soft, from the logo */
.t-sage  { background: var(--sage-soft); color: #5F6F45; }
.t-blush { background: var(--blush);     color: var(--rust-button); }
.t-sky   { background: var(--sky);       color: var(--navy-soft); }
.t-cream { background: #F4EEE6;          color: var(--brown); }
.tile { border-radius: var(--radius); aspect-ratio: 16 / 10; display: grid; place-items: center; text-align: center; padding: 14px; }
.tile svg { width: 64px; height: 64px; }
.tile span { display: block; margin-top: 8px; font-family: var(--head); font-size: 1.05rem; color: var(--navy); }

/* ---------- Included list ---------- */
.included { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 32px; list-style: none; padding: 0; margin: 0; }
.included li { padding-left: 26px; position: relative; }
.included li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--rust); }
.included strong { color: var(--navy); }

/* ---------- Steps (a real sequence, so numbered) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); counter-reset: step; }
.steps li { counter-increment: step; background: var(--white); border-radius: var(--radius); padding: 24px; }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px;
                    border-radius: 50%; background: var(--sage-soft); font: 700 1.15rem var(--head); color: var(--navy); }
.steps p { color: var(--muted); margin: 0; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Book ---------- */
.book { display: grid; grid-template-columns: minmax(220px, 380px) 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.cover { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; box-shadow: 0 20px 40px -24px rgba(74, 50, 38, .5); object-fit: cover; }
.cover.placeholder { display: grid; place-items: center; text-align: center; padding: 20px; border: 2px dashed var(--line); background: var(--white); color: var(--muted); box-shadow: none; }
.meta { color: var(--muted); font-size: .97rem; }
@media (max-width: 760px) { .book { grid-template-columns: 1fr; } .cover { max-width: 320px; } }
.soon { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 24px; }
.soon article { background: var(--white); border-radius: var(--radius); padding: 22px; }
.soon p { color: var(--muted); margin: 0; }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: 220px 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.portrait { width: 220px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 6px solid var(--white); box-shadow: 0 14px 30px -18px rgba(74, 50, 38, .6); }
@media (max-width: 700px) { .about { grid-template-columns: 1fr; justify-items: center; text-align: center; } .about .btn-row { justify-content: center; } .portrait { width: 170px; } }
.about-grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.about-grid .photo { border-radius: var(--radius); }
.quick { list-style: none; padding: 0; margin: 20px 0 0; font-size: .97rem; color: var(--muted); }
.quick li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.quick strong { display: block; color: var(--navy); }
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } .about-grid .photo { max-width: 300px; } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-family: var(--head); font-weight: 600; color: var(--navy); font-size: 1.08rem; }
.faq details p { margin: 10px 0 0; color: var(--muted); }

/* ---------- Page intro (inner pages) ---------- */
.intro { padding-block: clamp(40px, 6vw, 76px) clamp(20px, 3vw, 36px); }
.crumbs { font-size: .92rem; color: var(--muted); margin-bottom: 12px; }
.crumbs a { color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--sage-soft); padding-block: 48px 28px; font-size: .97rem; }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.site-footer img { width: 220px; margin-bottom: 12px; }
.site-footer h2 { font-size: 1rem; margin-bottom: 10px; font-weight: 600; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer p { color: var(--muted); }
.site-footer .legal { border-top: 1px solid #D9DFCD; margin-top: 32px; padding-top: 18px; color: var(--muted); font-size: .9rem; }
.site-footer .legal p { max-width: none; margin: 0 0 4px; }
@media (max-width: 760px) { .site-footer .cols { grid-template-columns: 1fr; } }

/* Plain text links (only Etsy and Amazon get buttons) */
.links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 22px 0 0; }
.links a, a.more { font-family: var(--label); font-weight: 700; font-size: .95rem; color: var(--navy); text-decoration-color: var(--sage); text-decoration-thickness: 2px; }
.links a::after, a.more::after { content: " →"; }
.links a:hover, a.more:hover { color: var(--rust-button); }
a.more { align-self: center; }
.btn-row { align-items: center; }

/* Planner photos (laptop + phone) */
.app .art { display: block; aspect-ratio: 960 / 506; background: #F4EEE6; border-bottom: 1px solid var(--line); }
.app .art img { width: 100%; height: 100%; object-fit: cover; }
.app .art:hover img { opacity: .92; }
.stack { aspect-ratio: 1 / .78; }
.stack img.tile { position: absolute; width: 74%; aspect-ratio: auto; padding: 0; border-radius: 14px; border: 4px solid var(--white); }
.stack img.tile:nth-child(1) { top: 0; left: 0; transform: rotate(-2deg); }
.stack img.tile:nth-child(2) { top: 26%; right: 0; left: auto; transform: rotate(2deg); }
.stack img.tile:nth-child(3) { top: 52%; bottom: auto; left: 8%; transform: rotate(-1deg); }

/* Orange line under headings (logo orange) */

.head-row > div:first-child { flex: 1; }

/* Soft white header with a thin light line; no line above the footer */
.site-header { background: #FFFDF9; border-bottom: 1px solid var(--line); }
.site-footer { border-top: none; }
/* (no lines on headings) */
.faq summary, .app h3 { width: auto; }

/* Books page: each book on its own row, with a line between books */
.books .book + .book { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); }

/* The vine from the logo, centered under each heading */
main h1, main h2 { width: max-content; max-width: 100%; }
main h1::after, main h2::after { content: ""; display: block; width: 120px; height: 18px; margin: 14px auto 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%2018%22%3E%3Cpath%20d%3D%22M2%2012c14-3%2026%202%2040-1%206-1%2010-4%2014-2M64%209c4-2%208%201%2014%202%2014%203%2026-2%2040%201%22%20fill%3D%22none%22%20stroke%3D%22%237A5A48%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M60%2013c-4-6-10-7-14-6%203%204%208%207%2014%206zM60%2013c4-6%2010-7%2014-6-3%204-8%207-14%206z%22%20fill%3D%22%238A9A6B%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2213%22%20r%3D%222.6%22%20fill%3D%22%23C2643A%22/%3E%3C/svg%3E") no-repeat center / contain; }

/* Home page photo with soft shapes */
.about { grid-template-columns: 200px 1fr; align-items: center; }
.photo-shapes { position: relative; width: 160px; height: 160px; margin: 28px; }
.photo-shapes img { position: relative; width: 160px; height: 160px; object-fit: cover; border-radius: 50%; border: 5px solid var(--white); }
.photo-shapes span { position: absolute; }
.photo-shapes .sq { width: 124px; height: 124px; background: var(--sage-soft); border: 2px solid var(--sage); border-radius: 10px; left: -28px; top: -22px; transform: rotate(12deg); }
.photo-shapes .ci { width: 70px; height: 70px; background: var(--blush); border: 2px solid var(--rust); border-radius: 50%; right: -28px; bottom: -14px; }
.photo-shapes .t1 { width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent; border-bottom: 38px solid var(--rust); right: -6px; top: -16px; transform: rotate(18deg); opacity: .85; }
.photo-shapes .t2 { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 34px solid var(--sage); left: -14px; bottom: -22px; transform: rotate(-16deg); }
@media (max-width: 700px) { .about { grid-template-columns: 1fr; } .photo-shapes { margin: 28px auto; } .about h2 { margin-inline: auto; } }

/* About page: same photo with shapes, centered over the quick facts */
.about-grid .photo-shapes { margin: 30px auto 40px; }

/* How I use AI list */
.ai-list { padding-left: 1.1em; margin: 0 0 1.2em; max-width: 66ch; }
.ai-list li { margin-bottom: 10px; }
.ai-list li::marker { color: var(--sage); }
.site-footer .legal a { color: var(--muted); }

/* Photo with a green border inside a straight soft green square */
.photo-frame { position: relative; width: 160px; margin: 30px; }
.photo-frame::before { content: ""; position: absolute; inset: -18px; background: var(--sage-soft); border: 2px solid var(--sage);
                       border-radius: 8px; }
.photo-frame img { position: relative; display: block; width: 160px; height: 160px; object-fit: cover; border-radius: 8px; border: 5px solid var(--sage); }
.about-grid .photo-frame { margin: 36px auto 44px; }
@media (max-width: 700px) { .photo-frame { margin: 36px auto; } }

/* About page: 'About me' centered over the photo */
main h1.over-photo { margin: 0 auto 6px; text-align: center; }

/* About page: 'About me' sits over the photo; 'Hi, I'm Tracy' starts level with the photo */
.about-grid { grid-template-columns: 300px 1fr; grid-template-rows: auto 1fr; column-gap: clamp(28px, 5vw, 64px); row-gap: 0; }
.about-grid > h1.over-photo { grid-column: 1; grid-row: 1; }
.about-grid > .about-left { grid-column: 1; grid-row: 2; }
.about-grid > .about-right { grid-column: 2; grid-row: 2; padding-top: 18px; }
@media (max-width: 800px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-grid > h1.over-photo, .about-grid > .about-left, .about-grid > .about-right { grid-column: 1; grid-row: auto; }
}

/* About page section headings: navy underline instead of the vine */
.about-right h2::after { display: none; }
.about-right h2 { text-decoration: underline; text-decoration-color: var(--navy); text-decoration-thickness: 2px; text-underline-offset: .25em; }

/* Heading for screen readers and search only (not shown on screen) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Big screens: let the page use more of the width and make everything a bit larger */
@media (min-width: 1600px) {
  :root { --wrap: 1360px; }
  html { font-size: 106.25%; }
  .brand img { width: 190px; }
}
@media (min-width: 2200px) {
  :root { --wrap: 1640px; }
  html { font-size: 125%; }
  .brand img { width: 230px; }
  .photo-frame, .photo-frame img { width: 200px; }
  .photo-frame img { height: 200px; }
  .about-grid { grid-template-columns: 360px 1fr; }
  .about { grid-template-columns: 250px 1fr; }
}

/* Keep the planner cards filling the row on wide screens */
@media (min-width: 1100px) { .band .apps:has(> .app:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1600px) { .apps { grid-template-columns: repeat(4, 1fr); } }