/* =========================
   styles.css — shared minimal stylesheet
   ========================= */
:root {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --muted: #666666;
  --line: #eaeaea;
  --max: 880px;
  --radius: 12px;
  /* tier palette: progressively deeper, still soft blues */
  --tier1: #eef6ff; /* lightest */
  --tier2: #dceeff; /* medium-light */
  --tier3: #c9e2ff; /* deepest (still soft) */
}

/* Reset (light) */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 3px; }

/* Layout */
header, main, footer { max-width: var(--max); margin: 0 auto; padding: 24px; }
header { display: flex; gap: 16px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { letter-spacing: .5px; font-weight: 600; }
.muted { color: var(--muted); }
main { padding-top: 80px; padding-bottom: 80px; }

/* Focus states for a11y */
:focus-visible { outline: 2px solid #222; outline-offset: 2px; border-radius: 6px; }

/* Nav hovers (desktop only) */
nav a { padding: 6px 8px; border-radius: 6px; text-decoration: none; }
@media (hover:hover) and (pointer:fine) {
  nav a { position: relative; }
  nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--ink); transition: width .18s ease; }
  nav a:hover::after { width: 100%; }
}

/* Section divider utility */
.section-divider { border-top: 1px solid var(--line); margin: 60px 0; }

/* Pricing cards */
.tiers { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
@media (min-width: 760px) { .tiers { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 20px 20px; transition: transform .18s ease, border-color .18s ease; background: #fff; display: flex; flex-direction: column; min-height: 420px; }
.card .bar { height: 10px; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); margin: 0 -20px 16px; }
.card.tier1 .bar { background: var(--tier1); }
.card.tier2 .bar { background: var(--tier2); }
.card.tier3 .bar { background: var(--tier3); }
.kicker { font-size: .9rem; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }

h1 { margin: 8px 0 6px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.2; }
h2 { margin: 0 0 18px; font-size: clamp(18px, 2.2vw, 22px); color: var(--muted); font-weight: 500; }
h3 { margin: 6px 0 6px; }

@media (hover:hover) and (pointer:fine) {
  .card:hover { transform: scale(1.02); border-color: #dcdcdc; }
  .card h3 { position: relative; }
  .card h3::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--ink); transition: width .18s ease; }
  .card:hover h3::after { width: 100%; }
}

/* Structured highlights and footer strip within cards */
.highlights { list-style: none; padding: 0; margin: 10px 0 12px; display: grid; gap: 8px; }
.highlights li { margin: 0; }
.highlights li::before { content: "— "; }
.best-for { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-style: italic; }

/* Projects grid */
.grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
@media (min-width: 760px) { .grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; transition: transform .18s ease, border-color .18s ease; }
.tile .kicker { font-size: .85rem; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
@media (hover:hover) and (pointer:fine) {
  .tile:hover { transform: scale(1.02); border-color: #dcdcdc; }
  .tile h2 { position: relative; }
  .tile h2::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--ink); transition: width .18s ease; }
  .tile:hover h2::after { width: 100%; }
}

/* About page */
.about { padding-top: 8px; padding-bottom: 8px; }
.tag { font-size: clamp(16px, 2.2vw, 20px); color: var(--muted); }
.signature { margin-top: 24px; text-align: center; }
.signature-name { font-family: 'Segoe Script','Lucida Handwriting','Brush Script MT',cursive; font-size: 34px; line-height: 1.1; }
.signature-role { margin-top: 4px; letter-spacing: .02em; }

/* Contact page */
.form { max-width: 680px; margin-top: 12px; }
label { display:block; font-weight:600; margin:14px 0 6px; }
input[type="text"], input[type="email"], textarea { width:100%; padding:16px; border:1px solid var(--line); border-radius: var(--radius); font: inherit; }
textarea { min-height: 180px; resize: vertical; }
button { margin-top:18px; padding:12px 18px; border:1px solid var(--line); border-radius: 10px; background:#fff; font: inherit; cursor:pointer; }
@media (hover:hover) and (pointer:fine) { button:hover { border-color:#cfcfcf; } }

footer { border-top: 1px solid var(--line); color: var(--muted); margin-top: 36px; }