/* Greg T and The Artificials: component styles. Load after tokens.css and Google Fonts (Cardo 400; Inter 400, 500, 600). */
.gta-root { background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: 16.8px; line-height: 26.04px; }
.gta-root a { color: var(--ink); text-decoration: none; }
.gta-root :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Announcement bar */
.gta-announce { background: var(--surface-raised); color: var(--ink-bright); text-align: center; padding: 6px var(--space-10); font: 600 13px/20.15px var(--font-body); letter-spacing: 1px; text-transform: uppercase; }

/* Header */
.gta-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); padding: var(--space-20) 0; }
.gta-brand { display: flex; align-items: center; gap: var(--space-20); }
.gta-brand img { width: 60px; height: auto; display: block; }
.gta-site-title { font: 600 16.8px/20.16px var(--font-body); }
.gta-nav { display: flex; gap: var(--space-10); font: 500 16.8px/26.04px var(--font-body); }

/* Buttons */
.gta-btn { display: inline-block; cursor: pointer; font-family: var(--font-body); color: var(--ink); text-decoration: none; }
.gta-btn--solid { background: var(--button-fill); border: 0; border-radius: var(--radius-button); padding: var(--button-pad-y) var(--button-pad-x); font-size: 14.4px; line-height: 22.32px; font-weight: 500; }
.gta-btn--outline { background: transparent; border: 2px solid var(--line); border-radius: var(--radius-none); padding: 0 var(--space-20); font-size: 16.8px; line-height: 26.04px; font-weight: 400; }

/* Signup form */
.gta-signup { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.gta-signup label { font: 400 16.8px/26.04px var(--font-body); }
.gta-signup input { font: 400 14.4px/22.32px var(--font-body); color: var(--surface); background: var(--ink); border: 1px solid var(--logo-graphite); border-radius: var(--radius-none); padding: 4px 8px; }
.gta-signup .gta-btn { align-self: center; margin-top: 8px; }

/* Hero */
.gta-hero { text-align: center; }
.gta-hero h1 { font: 400 40px/46px var(--font-heading); margin: 0 0 var(--space-10); }
.gta-hero p { font: 600 19.2px/29.76px var(--font-body); margin: 0 0 var(--space-10); }

/* Post */
.gta-post h2 { font: 400 40px/48px var(--font-heading); margin: 0 0 var(--space-10); }
.gta-post .gta-meta { font: 400 14.4px/22.32px var(--font-body); color: var(--ink-muted); margin-bottom: var(--space-10); }
.gta-post p { margin: 0 0 var(--space-10); }
.gta-post img { display: block; max-width: 100%; border-radius: var(--radius-none); }

/* Footer */
.gta-footer { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-20); }
.gta-footer h2 { font: 600 16.8px/20.16px var(--font-body); margin: 0 0 var(--space-10); }
.gta-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 400 14.4px/22.32px var(--font-body); }
.gta-copyright { font: 400 14.4px/22.32px var(--font-body); color: var(--ink-muted); margin-top: var(--space-30); }

/* Page title */
.gta-page-title { font: 400 52.32px/60px var(--font-heading); text-align: center; margin: 0; }

/* Quote card */
.gta-quote { background: var(--ink-bright); color: var(--surface); border-radius: var(--radius-quote); padding: var(--quote-pad); margin: 0; }
.gta-quote p { font: italic 400 29.6px/38.48px var(--font-heading); margin: 0; }

/* Member profile: photo beside text, alternating sides */
.gta-member { display: flex; gap: var(--space-10); align-items: flex-start; }
.gta-member img { width: var(--member-photo); height: auto; flex: none; display: block; border-radius: var(--radius-none); }
.gta-member h2 { font: 400 40px/48px var(--font-heading); margin: 0 0 var(--space-10); }
.gta-member p { font: 400 14.4px/22.32px var(--font-body); margin: 0; }
.gta-member--reverse { flex-direction: row-reverse; justify-content: space-between; }
@media (max-width: 600px) { .gta-member, .gta-member--reverse { flex-direction: column; } }