/*
Theme Name: Family Heritage
Theme URI: https://mainstreetsiteco.com/
Author: Mainstreet Website Company
Author URI: https://mainstreetsiteco.com/
Description: A warm, elegant WordPress theme built for family reunions, genealogy projects, and family history archives. Lightweight, standalone, and fully customizable via the WordPress Customizer -- no page builders or external frameworks required.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: family-heritage
Tags: custom-colors, custom-logo, custom-menu, featured-images, translation-ready, threaded-comments, one-column, accessibility-ready
*/

/* =========================================================
   TABLE OF CONTENTS
   1.0  CSS Variables (Light / Dark palettes)
   2.0  Reset & Base
   3.0  Typography
   4.0  Layout / Containers
   5.0  Header & Navigation
   6.0  Hero Section
   7.0  Dark Mode Toggle
   8.0  Content / Posts / Pages
   9.0  Family Member Cards (Meet the Family)
   10.0 Family Member Profile
   11.0 Photo Gallery
   12.0 Family History / Timeline
   13.0 Family Tree
   14.0 Widgets & Sidebar
   15.0 Footer
   16.0 Forms & Buttons
   17.0 Comments
   18.0 Accessibility
   19.0 Responsive
   ========================================================= */

/* 1.0 CSS Variables ---------------------------------------- */
:root {
	--fhc-site-bg: #f7f3ec;
	--fhc-content-bg: #ffffff;
	--fhc-primary-text: #2c2620;
	--fhc-secondary-text: #6b6055;
	--fhc-link: #8a5a3c;
	--fhc-accent: #a8703f;
	--fhc-header-bg: #ffffff;
	--fhc-header-text: #2c2620;
	--fhc-footer-bg: #2c2620;
	--fhc-footer-text: #e8e0d5;
	--fhc-nav-bg: #ffffff;
	--fhc-nav-text: #2c2620;
	--fhc-button-bg: #a8703f;
	--fhc-button-text: #ffffff;
	--fhc-gallery-overlay-bg: #2c2620;
	--fhc-gallery-overlay-text: #ffffff;
	--fhc-border-color: #e2d9c9;
	--fhc-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--fhc-font-heading: Georgia, "Times New Roman", serif;
	--fhc-font-decorative: "Playfair Display", Georgia, "Times New Roman", serif;
}

body.fhc-dark-mode {
	--fhc-site-bg: #1b1815;
	--fhc-content-bg: #24211d;
	--fhc-primary-text: #f0ebe2;
	--fhc-secondary-text: #b3a99b;
	--fhc-link: #d9a066;
	--fhc-accent: #d9a066;
	--fhc-header-bg: #1b1815;
	--fhc-header-text: #f0ebe2;
	--fhc-footer-bg: #100e0c;
	--fhc-footer-text: #d8cfc2;
	--fhc-nav-bg: #24211d;
	--fhc-nav-text: #f0ebe2;
	--fhc-button-bg: #d9a066;
	--fhc-button-text: #1b1815;
	--fhc-gallery-overlay-bg: #000000;
	--fhc-gallery-overlay-text: #f0ebe2;
	--fhc-border-color: #3a352d;
}

/* 2.0 Reset & Base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background-color: var(--fhc-site-bg);
	color: var(--fhc-primary-text);
	font-family: var(--fhc-font-body);
	font-size: 17px;
	line-height: 1.7;
	transition: background-color .25s ease, color .25s ease;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--fhc-link); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
ul, ol { padding-left: 1.4em; }
figure { margin: 0; }
hr { border: none; border-top: 1px solid var(--fhc-border-color); margin: 2em 0; }

/* 3.0 Typography --------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--fhc-font-heading);
	color: var(--fhc-primary-text);
	line-height: 1.25;
	font-weight: 700;
	margin: 1.4em 0 .6em;
}
h1 { font-size: 2.2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1.2em; }
.fhc-eyebrow {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .78rem;
	color: var(--fhc-secondary-text);
}

/* 4.0 Layout / Containers -------------------------------------- */
.fhc-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}
.fhc-content-narrow {
	max-width: 720px;
	margin: 0 auto;
}
.site-main {
	padding: 48px 0 64px;
}
.fhc-content-wrap {
	background: var(--fhc-content-bg);
	border-radius: 6px;
}
.fhc-layout { display: block; }
.fhc-layout.fhc-has-sidebar {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 40px;
	align-items: start;
}
.fhc-search-form { display: flex; gap: 8px; max-width: 420px; }
.fhc-search-form .search-field { flex: 1; }

/* 5.0 Header & Navigation ---------------------------------------- */
.site-header {
	background-color: var(--fhc-header-bg);
	color: var(--fhc-header-text);
	border-bottom: 1px solid var(--fhc-border-color);
}
.fhc-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 22px 24px;
	max-width: 1100px;
	margin: 0 auto;
	gap: 16px;
}
.site-branding { display: flex; align-items: center; gap: 14px; }
.custom-logo-link img { max-height: 64px; width: auto; }
.site-title {
	font-family: var(--fhc-font-decorative);
	font-size: 1.9rem;
	margin: 0;
	line-height: 1.1;
}
.site-title a { color: var(--fhc-header-text); text-decoration: none; }
.site-description {
	margin: 2px 0 0;
	font-size: .9rem;
	color: var(--fhc-secondary-text);
}
.fhc-header-actions { display: flex; align-items: center; gap: 12px; }

.main-navigation { background-color: var(--fhc-nav-bg); border-bottom: 1px solid var(--fhc-border-color); }
.main-navigation .fhc-container { padding-top: 0; padding-bottom: 0; }
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
.main-navigation li { position: relative; }
.main-navigation a {
	display: block;
	padding: 14px 16px;
	color: var(--fhc-nav-text);
	font-weight: 600;
	font-size: .95rem;
	letter-spacing: .02em;
	text-decoration: none;
}
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a {
	color: var(--fhc-accent);
	text-decoration: none;
}
.main-navigation .sub-menu {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	background: var(--fhc-nav-bg);
	border: 1px solid var(--fhc-border-color);
	min-width: 200px;
	z-index: 50;
	box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu { display: block; }
.main-navigation .sub-menu a { padding: 10px 16px; }

.menu-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--fhc-border-color);
	color: var(--fhc-nav-text);
	padding: 8px 12px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1rem;
}

/* header layout: element order is controlled server-side in header.php,
   so no CSS reordering is needed here. */

/* 6.0 Hero Section ------------------------------------------------ */
.fhc-hero {
	position: relative;
	background-color: var(--fhc-header-bg);
	background-size: cover;
	background-position: center;
	color: #fff;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.fhc-hero .fhc-hero-overlay {
	position: absolute;
	inset: 0;
	background-color: #000;
}
.fhc-hero-content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 24px;
}
.fhc-hero-title {
	font-family: var(--fhc-font-decorative);
	font-size: clamp(2rem, 5vw, 3.4rem);
	margin: 0 0 .3em;
	color: #fff;
}
.fhc-hero-subtitle {
	font-size: 1.15rem;
	color: #f2ede4;
	margin: 0;
}
.fhc-hero-align-left { text-align: left; }
.fhc-hero-align-center { text-align: center; margin-left: auto; margin-right: auto; }
.fhc-hero-align-right { text-align: right; margin-left: auto; }

/* 7.0 Dark Mode Toggle ---------------------------------------------- */
.fhc-mode-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid var(--fhc-border-color);
	color: var(--fhc-header-text);
	border-radius: 999px;
	padding: 6px 14px;
	cursor: pointer;
	font-size: .85rem;
	font-family: var(--fhc-font-body);
}
.fhc-mode-toggle:hover { border-color: var(--fhc-accent); color: var(--fhc-accent); }
.fhc-mode-toggle .fhc-mode-icon { font-size: 1rem; line-height: 1; }

/* 8.0 Content / Posts / Pages ----------------------------------------- */
.fhc-entry {
	background: var(--fhc-content-bg);
	border-radius: 8px;
	padding: 40px;
	margin-bottom: 32px;
}
.fhc-entry-header { margin-bottom: 1.4em; }
.fhc-entry-title { margin-top: 0; }
.fhc-entry-meta {
	font-size: .85rem;
	color: var(--fhc-secondary-text);
	margin-bottom: 1em;
}
.fhc-entry-meta a { color: var(--fhc-secondary-text); }
.fhc-featured-image { margin-bottom: 1.6em; border-radius: 6px; overflow: hidden; }
.fhc-entry-content > *:last-child { margin-bottom: 0; }
.fhc-page-title-bar { text-align: center; padding: 12px 0 4px; }
.fhc-page-title-bar h1 { margin-bottom: 0.2em; }

.fhc-archive-list .fhc-entry { padding: 32px; }
.fhc-read-more {
	display: inline-block;
	margin-top: .6em;
	font-weight: 600;
}
.fhc-pagination { display: flex; justify-content: center; gap: 8px; margin: 24px 0; }
.fhc-pagination a, .fhc-pagination span {
	padding: 8px 14px;
	border: 1px solid var(--fhc-border-color);
	border-radius: 4px;
	color: var(--fhc-primary-text);
}
.fhc-pagination .current { background: var(--fhc-accent); color: #fff; border-color: var(--fhc-accent); }

/* 9.0 Family Member Cards -------------------------------------------- */
.fhc-family-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fhc-member-card {
	background: var(--fhc-content-bg);
	border-radius: 8px;
	padding: 20px;
	text-align: center;
	transition: transform .18s ease, box-shadow .18s ease;
}
.fhc-member-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.fhc-member-card a { text-decoration: none; color: inherit; }
.fhc-member-photo {
	margin: 0 auto 14px;
	overflow: hidden;
	background: var(--fhc-site-bg);
}
.fhc-member-photo img { width: 100%; height: 100%; object-fit: cover; }
.fhc-shape-rectangle .fhc-member-photo { width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; }
.fhc-shape-square .fhc-member-photo { width: 180px; height: 180px; border-radius: 6px; }
.fhc-shape-circle .fhc-member-photo { width: 160px; height: 160px; border-radius: 50%; }
.fhc-shape-oval .fhc-member-photo { width: 150px; height: 200px; border-radius: 50%; }
.fhc-member-name { margin: .2em 0 0; font-size: 1.15rem; }
.fhc-member-age { color: var(--fhc-secondary-text); font-size: .9rem; margin: .2em 0 0; }

/* 10.0 Family Member Profile ------------------------------------------- */
.fhc-profile-header { margin-bottom: 32px; }
.fhc-profile-photo { border-radius: 8px; overflow: hidden; margin-bottom: 0; }
.fhc-profile-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 40px;
	align-items: start;
}
.fhc-profile-sidebar {
	background: var(--fhc-content-bg);
	border-radius: 8px;
	padding: 24px;
}
.fhc-profile-field { margin-bottom: 14px; }
.fhc-profile-field:last-child { margin-bottom: 0; }
.fhc-profile-field dt {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--fhc-secondary-text);
	margin-bottom: 2px;
}
.fhc-profile-field dd { margin: 0; font-weight: 500; }
.fhc-profile-social { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.fhc-profile-social a {
	border: 1px solid var(--fhc-border-color);
	border-radius: 6px;
	padding: 4px 10px;
	font-size: .85rem;
}
.fhc-profile-main {
	background: var(--fhc-content-bg);
	border-radius: 8px;
	padding: 32px;
}
.fhc-profile-gallery { margin-top: 28px; }

/* 11.0 Photo Gallery ------------------------------------------------------ */
.fhc-gallery-grid {
	display: grid;
	gap: var(--fhc-gallery-spacing, 16px);
	list-style: none;
	margin: 0;
	padding: 0;
	grid-template-columns: repeat(var(--fhc-gallery-columns, 3), 1fr);
}
.fhc-gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: var(--fhc-gallery-radius, 6px);
	background: var(--fhc-content-bg);
}
.fhc-gallery-item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .3s ease;
}
.fhc-gallery-item:hover img { transform: scale(1.04); }
.fhc-gallery-caption-overlay .fhc-gallery-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	background: var(--fhc-gallery-overlay-bg);
	opacity: .88;
	color: var(--fhc-gallery-overlay-text);
	padding: 10px 12px;
	font-size: .85rem;
	transform: translateY(100%);
	transition: transform .25s ease;
}
.fhc-gallery-caption-overlay .fhc-gallery-item:hover .fhc-gallery-caption,
.fhc-gallery-caption-overlay .fhc-gallery-item:focus-within .fhc-gallery-caption { transform: translateY(0); }
.fhc-gallery-caption-below .fhc-gallery-caption {
	padding: 8px 4px 0;
	font-size: .85rem;
	color: var(--fhc-secondary-text);
}
.fhc-gallery-caption-hidden .fhc-gallery-caption { display: none; }
.fhc-gallery-item a,
.fhc-history-images a,
.fhc-ancestor-grid a { display: block; cursor: zoom-in; }
.fhc-gallery-item a:focus-visible img,
.fhc-history-images a:focus-visible img,
.fhc-ancestor-grid a:focus-visible img { outline: 3px solid var(--fhc-accent); outline-offset: 2px; }

/* Lightbox ------------------------------------------------------------- */
body.fhc-lightbox-open { overflow: hidden; }
.fhc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fhc-lightbox[hidden] { display: none; }
.fhc-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.9);
}
.fhc-lightbox-dialog {
	position: relative;
	z-index: 1;
	max-width: 92vw;
	max-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fhc-lightbox-figure {
	margin: 0;
	max-width: 88vw;
	max-height: 88vh;
	text-align: center;
}
.fhc-lightbox-image {
	max-width: 88vw;
	max-height: 80vh;
	width: auto;
	height: auto;
	border-radius: 4px;
	display: block;
	margin: 0 auto;
}
.fhc-lightbox-caption {
	color: #f2ede4;
	font-size: .9rem;
	margin-top: 12px;
}
.fhc-lightbox-close,
.fhc-lightbox-prev,
.fhc-lightbox-next {
	position: absolute;
	background: rgba(255,255,255,.12);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	line-height: 1;
}
.fhc-lightbox-close:hover,
.fhc-lightbox-prev:hover,
.fhc-lightbox-next:hover { background: rgba(255,255,255,.25); }
.fhc-lightbox-close {
	top: -48px;
	right: 0;
	width: 40px;
	height: 40px;
	font-size: 1.6rem;
}
.fhc-lightbox-prev,
.fhc-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	font-size: 2rem;
}
.fhc-lightbox-prev { left: -8px; }
.fhc-lightbox-next { right: -8px; }
.fhc-lightbox-counter {
	position: absolute;
	bottom: -36px;
	left: 50%;
	transform: translateX(-50%);
	color: #cfc7ba;
	font-size: .82rem;
}
@media (max-width: 600px) {
	.fhc-lightbox-close { top: -44px; right: 4px; }
	.fhc-lightbox-prev { left: 4px; }
	.fhc-lightbox-next { right: 4px; }
	.fhc-lightbox-prev, .fhc-lightbox-next { width: 40px; height: 40px; font-size: 1.6rem; }
}

/* 12.0 Family History / Timeline ------------------------------------------- */
.fhc-timeline { position: relative; margin: 32px 0; padding-left: 28px; border-left: 2px solid var(--fhc-border-color); }
.fhc-timeline-item { position: relative; margin-bottom: 28px; }
.fhc-timeline-item::before {
	content: "";
	position: absolute;
	left: -34px;
	top: 4px;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--fhc-accent);
}
.fhc-timeline-year { font-weight: 700; color: var(--fhc-accent); font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }
.fhc-timeline-title { margin: .2em 0 .3em; }
.fhc-history-images {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 18px;
	margin: 28px 0;
}
.fhc-history-images figure img { border-radius: 6px; }
.fhc-history-images figcaption { font-size: .82rem; color: var(--fhc-secondary-text); margin-top: 6px; }

/* 13.0 Family Tree ---------------------------------------------------------- */
.fhc-tree-image { margin: 28px 0; text-align: center; }
.fhc-tree-image img { border-radius: 8px; margin: 0 auto; }
.fhc-ancestor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 18px;
	margin-top: 24px;
}
.fhc-ancestor-grid figure { text-align: center; margin: 0; }
.fhc-ancestor-grid img { border-radius: 6px; aspect-ratio: 1/1; object-fit: cover; }
.fhc-ancestor-grid figcaption { font-size: .8rem; color: var(--fhc-secondary-text); margin-top: 6px; }

/* 14.0 Widgets & Sidebar ------------------------------------------------------ */
.widget { margin-bottom: 32px; }
.widget-title { font-size: 1.1rem; margin-top: 0; margin-bottom: .8em; }
.widget ul { list-style: none; padding-left: 0; margin: 0; }
.widget li { padding: 6px 0; border-bottom: 1px solid var(--fhc-border-color); }
.sidebar .widget { background: var(--fhc-content-bg); padding: 24px; border-radius: 8px; }

/* 15.0 Footer ------------------------------------------------------------------ */
.site-footer { background: var(--fhc-footer-bg); color: var(--fhc-footer-text); margin-top: 40px; }
.fhc-footer-widgets {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	padding: 48px 24px;
	max-width: 1100px;
	margin: 0 auto;
}
.fhc-footer-widgets .widget-title { color: var(--fhc-footer-text); }
.fhc-footer-widgets a { color: var(--fhc-footer-text); opacity: .85; }
.fhc-footer-widgets a:hover { opacity: 1; }
.fhc-footer-widgets li { border-bottom-color: rgba(255,255,255,.12); }

.fhc-footer-credit {
	border-top: 1px solid rgba(255,255,255,.12);
	padding: 16px 24px;
}
.fhc-footer-credit-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: .8rem;
	opacity: .8;
}
.fhc-footer-credit-inner img { max-height: 22px; width: auto; opacity: .9; }
.fhc-footer-credit-inner a { color: var(--fhc-footer-text); }

/* 16.0 Forms & Buttons ---------------------------------------------------------- */
input[type=text], input[type=email], input[type=url], input[type=search], input[type=tel], input[type=number], textarea, select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--fhc-border-color);
	border-radius: 4px;
	background: var(--fhc-content-bg);
	color: var(--fhc-primary-text);
	font-family: inherit;
	font-size: 1rem;
}
.fhc-btn, button, input[type=submit], .wp-block-button__link {
	display: inline-block;
	background-color: var(--fhc-button-bg);
	color: var(--fhc-button-text);
	border: none;
	padding: 12px 22px;
	border-radius: 4px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	font-size: .95rem;
}
.fhc-btn:hover, button:hover, input[type=submit]:hover { filter: brightness(0.92); color: var(--fhc-button-text); text-decoration: none; }

/* 17.0 Comments --------------------------------------------------------------------- */
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list .comment { background: var(--fhc-content-bg); border-radius: 8px; padding: 20px; margin-bottom: 16px; }
.comment-list .children { list-style: none; padding-left: 24px; }
.comment-meta { font-size: .85rem; color: var(--fhc-secondary-text); margin-bottom: 6px; }
.comment-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.comment-form p { margin-bottom: 16px; }

/* 18.0 Accessibility ------------------------------------------------------------------- */
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
	width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: #fff; color: #111; clip-path: none; display: block;
	height: auto; left: 8px; top: 8px; padding: 12px 16px; width: auto; z-index: 999999;
	text-decoration: none; border-radius: 4px;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 3px solid var(--fhc-accent);
	outline-offset: 2px;
}
.skip-link { position: absolute; top: -100px; left: 0; }

/* 19.0 Responsive ---------------------------------------------------------------------- */
@media (max-width: 782px) {
	.fhc-profile-layout { grid-template-columns: 1fr; }
	.fhc-footer-widgets { grid-template-columns: repeat(2, 1fr); }
	.fhc-layout.fhc-has-sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.menu-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
	.main-navigation ul { display: none; flex-direction: column; width: 100%; }
	.main-navigation.fhc-nav-open ul { display: flex; }
	.main-navigation .sub-menu { position: static; border: none; box-shadow: none; }
	.fhc-entry { padding: 24px; }
	.fhc-footer-widgets { grid-template-columns: 1fr; padding: 32px 24px; }
	.fhc-header-inner { padding: 16px; }
	h1 { font-size: 1.7rem; }
}