/* Shared styles for the PewToYou pages (index, about, accessibility).
   Layout: site header with logo + nav, then one centred reading column. */
:root{
  --bg:#f2f4ef; --surface:#ffffff; --ink:#17221c; --muted:#56635b; --line:#d6ddd4;
  --moss:#24443a; --oak:#8a5a2b; --oak-soft:#f1e6d8; --glass:#2a56c6; --field:#7d8a81;
  --display:"Young Serif",Georgia,"Times New Roman",serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111814; --surface:#18221c; --ink:#e8ede6; --muted:#a3b0a7; --line:#2c3a31;
  --moss:#8fc0aa; --oak:#d9a66f; --oak-soft:#2a2118; --glass:#8eaaf5; --field:#6e8577; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111814; --surface:#18221c; --ink:#e8ede6; --muted:#a3b0a7; --line:#2c3a31;
  --moss:#8fc0aa; --oak:#d9a66f; --oak-soft:#2a2118; --glass:#8eaaf5; --field:#6e8577; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.125rem/1.6 var(--body);padding-inline:20px}
h1,h2{font-family:var(--display);font-weight:400;line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(2rem,6vw,2.9rem)}
h2{font-size:1.6rem}
p,ul{margin:0}
a{color:var(--glass)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--glass);outline-offset:2px}

/* Skip link: hidden until a keyboard user tabs to it. */
.skip{position:absolute;left:-9999px;top:8px;z-index:10;background:var(--surface);color:var(--ink);padding:12px 18px;border-radius:8px;font-weight:700}
.skip:focus{left:16px}

/* Site header: logo left, nav right; wraps to two rows on narrow phones. */
header.site{max-width:720px;margin-inline:auto;display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;padding-block:18px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.brand img{width:48px;height:48px;border-radius:12px}
.brand span{font-family:var(--display);font-size:1.5rem}
.brand b{font-weight:400;color:var(--oak)}
header.site nav{display:flex;gap:4px 22px;flex-wrap:wrap}
header.site nav a{color:var(--muted);text-decoration:none;font-weight:700;padding-block:8px;border-bottom:3px solid transparent}
header.site nav a:hover{color:var(--ink)}
header.site nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--oak)}

main{max-width:720px;margin-inline:auto;padding-block:40px 32px;display:grid;gap:22px}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--oak)}
.lede{color:var(--muted);font-size:1.2rem}
section{display:grid;gap:14px;padding-top:22px;border-top:1px solid var(--line)}
section > p{color:var(--muted)}

/* Offer boxes */
.status{background:var(--oak-soft);border-left:5px solid var(--oak);border-radius:10px;padding:18px 20px;display:grid;gap:6px}
.status .tag{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--oak)}
.status p{color:var(--ink)}
.status .big{font-family:var(--display);font-size:1.45rem;line-height:1.2}
.status.alt{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--moss)}
.status.alt .tag{color:var(--moss)}
.status a{color:var(--glass)}

/* "Meet Cary" strip on the homepage */
.meet{display:flex;align-items:center;gap:18px}
.meet img{flex:none;width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 30%}
.meet p{color:var(--muted)}

/* Buttons and form */
.btn,button{display:inline-block;justify-self:start;padding:14px 22px;border-radius:6px;font:700 1rem var(--body);border:2px solid var(--moss);background:var(--moss);color:var(--bg);cursor:pointer;text-decoration:none}
.btn:hover,button:hover{filter:brightness(1.1)}
form{display:grid;gap:14px}
label{display:grid;gap:6px;font-weight:700;font-size:.95rem}
input,textarea{font:inherit;padding:12px 14px;border:2px solid var(--field);border-radius:6px;background:var(--surface);color:var(--ink)}
textarea{min-height:110px;resize:vertical}
::placeholder{color:var(--muted);opacity:1}
label .opt{font-weight:400;color:var(--muted)}
label.check{display:flex;gap:12px;align-items:flex-start;padding-block:4px}
label.check input{flex:none;width:24px;height:24px;margin:2px 0 0;padding:0;accent-color:var(--moss)}
fieldset{display:grid;gap:6px;min-width:0;margin:0;padding:0;border:0}
legend{padding:0;margin-bottom:4px;font-weight:700;font-size:.95rem}
legend .opt{font-weight:400;color:var(--muted)}
.form-note{font-size:.95rem}

/* About page */
.about{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}
.about img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:10px;border:6px solid var(--surface);box-shadow:0 0 0 1px var(--line),0 12px 30px #0000001f}
.prose{display:grid;gap:16px}
.prose p{color:var(--muted)}
.prose .sign{color:var(--ink);font-weight:700}
.prose ul{padding-left:1.2em;display:grid;gap:6px;color:var(--muted)}
.prose h2{font-size:1.4rem;margin-top:10px}

/* Tables (privacy page): scroll inside their own box on narrow phones, never the whole page. */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--line)}
thead th{font-size:.9rem;color:var(--muted);background:var(--bg)}
tbody th{font-weight:700;color:var(--ink)}
td{color:var(--muted)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.table-wrap:focus-visible{outline:3px solid var(--glass);outline-offset:2px}

footer{max-width:720px;margin-inline:auto;padding-block:20px 40px;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line);display:grid;gap:8px}
footer a{color:inherit;display:inline-block;padding-block:4px}

@media (max-width:560px){
  .about{grid-template-columns:1fr}
  .about img{max-width:200px}
}