/* ====================================
   ARA'S HOMEPAGE - UNIFIED STYLESHEET
   2000s Web Aesthetic + Macross Theme
   No JavaScript, Pure CSS Glory!
   ====================================
   
   TABLE OF CONTENTS:
   ------------------
   1. Reset & Base Styles
   2. Typography
   3. Layout & Container
   4. Header & Navigation
   5. Footer
   6. Common Components
   7. Homepage Specific
   8. Blog Styles
   9. Music Page
   10. Links Page
   11. Contact Page
   12. Sheryl DD Page
   13. Utilities & Animations
   ==================================== */

/* ====================================
   1. RESET & BASE STYLES
   ==================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "MS PGothic", "Hiragino Kaku Gothic Pro", Verdana, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #2a2a2a;
    background: linear-gradient(to bottom, #e8e8ff 0%, #ffffff 50%, #ffe8ff 100%);
    background-attachment: fixed;
    padding: 10px;
}

/* ====================================
   2. TYPOGRAPHY
   ==================================== */
h1 {
    font-size: 24px;
    color: #4444aa;
    text-shadow: 2px 2px 0 #ffffff;
    margin-bottom: 10px;
}

h2 {
    font-size: 18px;
    color: #6666cc;
    border-bottom: 2px dotted #ccccff;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

h3 {
    font-size: 16px;
    color: #8888cc;
    margin: 15px 0 10px;
}

p {
    margin: 10px 0;
}

/* Links */
a {
    color: #6666cc;
}

a:visited {
    color: #9966cc;
}

a:hover {
    color: #ff66cc;
    text-decoration: underline;
}

/* Language styling */
.ja {
    font-family: "MS PGothic", "Hiragino Kaku Gothic Pro", sans-serif;
}

.mixed-text {
    margin: 10px 0;
}

/* ====================================
   3. LAYOUT & CONTAINER
   ==================================== */
.container {
    max-width: 760px;
    margin: 0 auto;
    background: #ffffff;
    border: 2px ridge #8888ff;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}

/* Wide container for special pages */
.container-wide {
    max-width: 900px;
}

/* ====================================
   4. HEADER & NAVIGATION
   ==================================== */
header {
    background: linear-gradient(135deg, #ffccff 0%, #ccccff 50%, #ccffff 100%);
    padding: 20px;
    text-align: center;
    border-bottom: 2px groove #8888ff;
}

.ascii-decoration {
    color: #8888ff;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.2;
}

/* Navigation */
nav {
    background: #f0f0ff;
    padding: 8px;
    border-bottom: 1px dotted #8888ff;
    text-align: center;
}

nav ul {
    list-style: none;
}

nav li {
    display: inline;
    margin-right: 20px;
}

nav a {
    color: #4444aa;
    text-decoration: none;
    padding: 4px 12px;
    margin: 0 4px;
    background: linear-gradient(to bottom, #ffffff, #e8e8ff);
    border: 1px solid #aaaaff;
    display: inline-block;
}

nav a:hover, nav a.current {
    background: linear-gradient(to bottom, #ffffcc, #ffccff);
    border-color: #ff88ff;
}

/* ====================================
   5. FOOTER
   ==================================== */
footer {
    background: #f0f0ff;
    padding: 15px;
    text-align: center;
    border-top: 2px groove #8888ff;
    font-size: 12px;
}

/* ====================================
   6. COMMON COMPONENTS
   ==================================== */

/* Sections */
.section {
    margin-bottom: 30px;
    padding: 15px;
    background: #fcfcff;
    border: 1px dashed #ccccff;
}

/* Welcome Box */
.welcome-box {
    background: linear-gradient(135deg, #fff8ff 0%, #f8f8ff 100%);
    border: 2px double #ff88ff;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
}

/* Info Box */
.info-box {
    background: #ffffee;
    border: 1px solid #cccc88;
    padding: 15px;
    margin: 20px 0;
}

.info-box h3 {
    font-size: 16px;
    color: #8888cc;
    margin-bottom: 10px;
}

.info-box dl {
    font-size: 13px;
}

.info-box dt {
    font-weight: bold;
    display: inline-block;
    width: 100px;
    vertical-align: top;
}

.info-box dd {
    display: inline-block;
    margin: 0 0 5px 0;
}

/* Highlight Box */
.highlight-box {
    background: linear-gradient(135deg, #ffffcc 0%, #ffeecc 100%);
    border: 2px double #ffaa88;
    padding: 15px;
    margin: 20px 0;
    text-align: center;
}

/* Lists with custom bullets */
ul {
    list-style: none;
    padding-left: 20px;
}

ul li:before {
    content: "♪ ";
    color: #ff88cc;
    font-weight: bold;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px;
    background: #ffccff;
    border: 1px solid #cc88cc;
    font-size: 11px;
    font-family: monospace;
}

/* Banner */
.banner {
    background: #2a2a2a;
    color: #00ff00;
    padding: 5px;
    text-align: center;
    font-family: monospace;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
}

/* Web Ring Box */
.webring-box {
    margin: 20px 0;
    padding: 10px;
    background: #ffffee;
    border: 1px solid #cccc88;
    text-align: center;
    font-size: 12px;
}

/* ====================================
   7. HOMEPAGE SPECIFIC
   ==================================== */
.music-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
}

.music-item {
    background: linear-gradient(to bottom, #ffeeff, #eeffff);
    border: 1px solid #ccaacc;
    padding: 8px 12px;
    flex: 0 1 auto;
}

.music-item:hover {
    background: linear-gradient(to bottom, #ffccff, #ccffff);
    transform: translateY(-2px);
}

/* VF decoration */
.vf-decoration {
    color: #ff88cc;
    font-family: monospace;
    font-size: 11px;
}

.deculture {
    color: #ff88cc;
    font-weight: bold;
}

/* ====================================
   8. BLOG STYLES
   ==================================== */

/* Blog Entry */
.blog-entry {
    margin-bottom: 25px;
    padding: 15px;
    background: #fcfcff;
    border: 1px dashed #ccccff;
    position: relative;
}

.blog-entry:hover {
    background: linear-gradient(to bottom, #ffffff, #f8f8ff);
    border-color: #aaaaff;
}

.date-stamp {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ffccff;
    padding: 2px 8px;
    font-size: 11px;
    font-family: monospace;
    border: 1px solid #cc88cc;
}

.blog-title {
    font-size: 18px;
    margin-bottom: 8px;
}

.blog-title a {
    color: #6666cc;
    text-decoration: none;
}

.blog-title a:hover {
    color: #ff66cc;
    text-decoration: underline;
}

.blog-meta {
    font-size: 12px;
    color: #888888;
    margin-bottom: 10px;
}

.blog-tags {
    margin-top: 10px;
}

.tag {
    display: inline-block;
    background: linear-gradient(to bottom, #ffeeff, #eeffff);
    border: 1px solid #ccaacc;
    padding: 2px 8px;
    margin: 2px;
    font-size: 12px;
    text-decoration: none;
    color: #666666;
}

.tag:hover {
    background: linear-gradient(to bottom, #ffccff, #ccffff);
    color: #4444aa;
}

/* Archive Section */
.archive-section {
    margin: 30px 0;
    padding: 15px;
    background: #ffffee;
    border: 1px solid #cccc88;
}

.archive-section h2 {
    font-size: 16px;
    color: #8888cc;
    border-bottom: 2px dotted #ccccff;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.archive-list {
    list-style: none;
    padding: 0;
}

.archive-list li {
    padding: 3px 0;
}

.archive-list li:before {
    content: "▸ ";
    color: #ff88cc;
}

.archive-list a {
    color: #6666cc;
    text-decoration: none;
}

.archive-list a:hover {
    color: #ff66cc;
    text-decoration: underline;
}

/* Category Cloud */
.category-cloud {
    margin: 20px 0;
    padding: 15px;
    background: #f8f8ff;
    border: 1px dotted #aaaaff;
    text-align: center;
}

/* Pagination */
.pagination {
    text-align: center;
    margin: 30px 0;
    padding: 15px;
    background: #fcfcff;
    border-top: 1px dotted #ccccff;
    border-bottom: 1px dotted #ccccff;
}

.pagination a, .pagination span {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 3px;
    background: #ffffff;
    border: 1px solid #ccccff;
    text-decoration: none;
    color: #6666cc;
}

.pagination .current {
    background: #ffccff;
    border-color: #ff88cc;
    font-weight: bold;
}

.pagination a:hover {
    background: #ffffcc;
    border-color: #ff88ff;
}

.read-more {
    color: #ff66cc;
    text-decoration: none;
    font-weight: bold;
}

.read-more:hover {
    text-decoration: underline;
}

.new-badge {
    display: inline-block;
    background: #ff6666;
    color: #ffffff;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: bold;
    margin-left: 5px;
    vertical-align: top;
}

/* Blog Post Styles */
article {
    padding: 30px;
    background: #fcfcff;
    margin: 20px;
    border: 1px dashed #ccccff;
}

.post-header {
    border-bottom: 2px dotted #ccccff;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.post-title {
    font-size: 24px;
    color: #6666cc;
    margin-bottom: 10px;
}

.post-meta {
    font-size: 12px;
    color: #888888;
}

.post-meta span {
    margin-right: 15px;
}

.post-content {
    margin: 20px 0;
}

.post-content h2 {
    font-size: 20px;
    color: #8888cc;
    margin: 25px 0 15px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #ccccff;
}

.post-content h3 {
    font-size: 18px;
    color: #9999cc;
    margin: 20px 0 10px;
}

.post-content p {
    margin: 15px 0;
    text-align: justify;
}

.post-content ul, .post-content ol {
    margin: 15px 0;
    padding-left: 30px;
}

.post-content li {
    margin: 5px 0;
}

/* Blockquote */
blockquote {
    margin: 20px 0;
    padding: 15px;
    background: linear-gradient(135deg, #fff8ff 0%, #f8f8ff 100%);
    border-left: 4px solid #ff88cc;
    font-style: italic;
}

blockquote .source {
    display: block;
    text-align: right;
    margin-top: 10px;
    font-size: 12px;
    color: #888888;
    font-style: normal;
}

/* Post Image */
.post-image {
    margin: 20px 0;
    text-align: center;
}

.post-image img {
    max-width: 100%;
    height: auto;
    border: 2px ridge #aaaaff;
}

.post-image .caption {
    font-size: 12px;
    color: #666666;
    margin-top: 5px;
    font-style: italic;
}

/* Post Tags */
.post-tags {
    margin: 30px 0 20px;
    padding-top: 20px;
    border-top: 1px dotted #ccccff;
}

/* Post Navigation */
.post-nav {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background: #f8f8ff;
    border-top: 1px dotted #ccccff;
    font-size: 13px;
}

.post-nav a {
    color: #6666cc;
    text-decoration: none;
    max-width: 45%;
}

.post-nav a:hover {
    color: #ff66cc;
    text-decoration: underline;
}

.post-nav .prev:before {
    content: "← ";
}

.post-nav .next:after {
    content: " →";
}

/* Comments Section */
.comments-section {
    margin: 20px;
    padding: 20px;
    background: #fcfcff;
    border: 1px dashed #ccccff;
}

.comments-section h2 {
    font-size: 18px;
    color: #8888cc;
    border-bottom: 2px dotted #ccccff;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Back to Top */
.back-to-top {
    text-align: right;
    padding: 10px 20px;
}

.back-to-top a {
    color: #8888cc;
    text-decoration: none;
    font-size: 12px;
}

.back-to-top a:hover {
    color: #ff66cc;
    text-decoration: underline;
}

/* ====================================
   9. MUSIC PAGE
   ==================================== */

/* Shrine Sections */
.shrine-section {
    margin-bottom: 30px;
    padding: 20px;
    background: #fcfcff;
    border: 2px dashed #ccccff;
    position: relative;
}

.shrine-special {
    background: linear-gradient(135deg, #fff0ff 0%, #f0f0ff 50%, #f0ffff 100%);
    border: 3px double #ff88cc;
}

/* Character Shrines */
.character-shrine {
    background: linear-gradient(to bottom, #fff8ff, #f8f8ff);
    border: 2px ridge #ff88cc;
    padding: 15px;
    margin: 15px 0;
}

.sheryl-shrine {
    background: linear-gradient(135deg, #ffccff 0%, #ffffff 100%);
    border-color: #ff66cc;
}

.walkure-shrine {
    background: linear-gradient(135deg, #ccccff 0%, #ffffff 100%);
    border-color: #9966ff;
}

/* Artist Grid */
.artist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.artist-card {
    background: linear-gradient(to bottom, #ffffff, #f0f0ff);
    border: 1px solid #ccccff;
    padding: 10px;
    text-align: center;
    transition: transform 0.2s;
}

.artist-card:hover {
    transform: translateY(-3px);
    background: linear-gradient(to bottom, #ffffcc, #ffccff);
    border-color: #ff88cc;
}

.artist-name {
    font-weight: bold;
    color: #6666cc;
    margin-bottom: 5px;
}

.artist-info {
    font-size: 12px;
    color: #888888;
}

/* Song List */
.song-list {
    background: #ffffee;
    border: 1px solid #cccc88;
    padding: 15px;
    margin: 15px 0;
}

.song-list ul {
    list-style: none;
    padding: 0;
}

.song-list li {
    padding: 5px 0;
    border-bottom: 1px dotted #dddddd;
}

.song-list li:before {
    content: "♫ ";
    color: #ff88cc;
    font-weight: bold;
}

/* Album Showcase */
.album-showcase {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
    justify-content: center;
}

.album-box {
    width: 200px;
    text-align: center;
    padding: 10px;
    background: #f8f8ff;
    border: 1px solid #ccccff;
}

.album-box:hover {
    background: linear-gradient(to bottom, #ffffff, #ffeeee);
}

.album-cover {
    width: 100px;
    height: 100px;
    margin: 0 auto 10px;
    background: linear-gradient(45deg, #ffccff, #ccffff);
    border: 2px ridge #aaaaff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #ffffff;
}

.album-title {
    font-weight: bold;
    font-size: 13px;
    color: #6666cc;
    margin-bottom: 3px;
}

.album-artist {
    font-size: 12px;
    color: #888888;
}

/* Now Playing */
.now-playing {
    background: #2a2a2a;
    color: #00ff00;
    padding: 15px;
    margin: 20px 0;
    font-family: monospace;
    font-size: 12px;
    border: 2px ridge #00ff00;
}

.now-playing-title {
    color: #00ffff;
    margin-bottom: 10px;
}

/* Rating */
.rating {
    color: #ffcc00;
    font-size: 14px;
}

/* Concert Memory */
.concert-memory {
    background: #fff8f8;
    border-left: 4px solid #ff88cc;
    padding: 10px 15px;
    margin: 10px 0;
}

.concert-date {
    font-weight: bold;
    color: #8888cc;
}

/* Lyric Quote */
.lyric-quote {
    text-align: center;
    font-style: italic;
    color: #9966cc;
    padding: 20px;
    background: linear-gradient(to right, transparent, #f8f8ff, transparent);
    margin: 20px 0;
}

/* Stats Box */
.stats-box {
    display: flex;
    justify-content: space-around;
    background: #f0f0ff;
    padding: 15px;
    margin: 20px 0;
    border: 1px dotted #8888ff;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #ff66cc;
}

.stat-label {
    font-size: 12px;
    color: #666666;
}

/* ====================================
   10. LINKS PAGE
   ==================================== */

/* Link Section */
.link-section {
    margin-bottom: 30px;
    padding: 15px;
    background: #fcfcff;
    border: 1px dashed #ccccff;
}

/* Link List */
.link-list {
    margin: 10px 0;
    padding-left: 20px;
}

.link-list li {
    list-style: none;
    margin: 8px 0;
    padding: 5px;
    background: linear-gradient(to right, #ffffff, transparent);
}

.link-list li:before {
    content: "→ ";
    color: #ff88cc;
    font-weight: bold;
}

.link-list a {
    color: #6666cc;
    text-decoration: none;
    font-weight: bold;
}

.link-list a:hover {
    color: #ff66cc;
    text-decoration: underline;
}

.link-list .description {
    font-size: 12px;
    color: #666666;
    margin-left: 20px;
    font-style: italic;
}

/* Button Collection */
.button-collection {
    background: #ffffee;
    border: 1px solid #cccc88;
    padding: 15px;
    margin: 20px 0;
    text-align: center;
}

.button-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    margin-top: 10px;
}

.link-button {
    width: 88px;
    height: 31px;
    border: 1px solid #888888;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    text-decoration: none;
    color: #333333;
}

.link-button:hover {
    border-color: #ff88cc;
    background: #fff0ff;
}

/* Web Ring Section */
.webring-section {
    background: linear-gradient(135deg, #fff8ff 0%, #f8f8ff 100%);
    border: 2px double #ff88ff;
    padding: 15px;
    margin: 20px 0;
    text-align: center;
}

/* Link Me Section */
.link-me-section {
    background: #f0f0ff;
    border: 2px ridge #8888ff;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.link-code {
    background: #2a2a2a;
    color: #00ff00;
    padding: 10px;
    margin: 10px 0;
    font-family: monospace;
    font-size: 11px;
    text-align: left;
    overflow-x: auto;
    border: 1px solid #00ff00;
}

/* Cool Sites */
.cool-sites {
    background: linear-gradient(to bottom, #ffffff, #f8f8ff);
    border: 1px dotted #aaaaff;
    padding: 15px;
}

.cool-badge {
    display: inline-block;
    background: linear-gradient(45deg, #ffccff, #ccffff);
    padding: 2px 8px;
    margin: 2px;
    border: 1px solid #8888cc;
    font-size: 11px;
    font-weight: bold;
}

/* Resource Grid */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 15px 0;
}

.resource-card {
    background: #fff8f8;
    border: 1px solid #ffcccc;
    padding: 10px;
}

.resource-card:hover {
    background: #ffffee;
    border-color: #ff88cc;
}

/* Friends List */
.friends-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 15px 0;
}

.friend-link {
    padding: 5px 15px;
    background: linear-gradient(to bottom, #ffeeff, #eeffff);
    border: 1px solid #ccaacc;
    text-decoration: none;
    color: #666666;
}

.friend-link:hover {
    background: linear-gradient(to bottom, #ffccff, #ccffff);
    color: #4444aa;
}

/* Link Status */
.new-link {
    color: #ff0000;
    font-size: 10px;
    font-weight: bold;
    vertical-align: super;
}

.dead-link {
    opacity: 0.5;
    text-decoration: line-through;
}

/* ====================================
   11. CONTACT PAGE
   ==================================== */

/* Contact Section */
.contact-section {
    margin-bottom: 30px;
    padding: 20px;
    background: #fcfcff;
    border: 1px dashed #ccccff;
}

/* Email Box */
.email-box {
    background: linear-gradient(135deg, #fff8ff 0%, #f8f8ff 100%);
    border: 2px double #ff88ff;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.email-instructions {
    background: #ffffee;
    border: 1px solid #cccc88;
    padding: 15px;
    margin: 20px 0;
    font-family: monospace;
    font-size: 13px;
}

.email-art {
    font-family: monospace;
    font-size: 12px;
    line-height: 1.2;
    color: #8888cc;
    white-space: pre;
    margin: 20px 0;
}

/* Social Links */
.social-links {
    margin: 20px 0;
    padding: 15px;
    background: #f8f8ff;
    border: 1px dotted #aaaaff;
    text-align: center;
}

.social-links a {
    display: inline-block;
    margin: 5px;
    padding: 8px 15px;
    background: linear-gradient(to bottom, #ffffff, #f0f0ff);
    border: 1px solid #ccccff;
    text-decoration: none;
    color: #6666cc;
}

.social-links a:hover {
    background: linear-gradient(to bottom, #ffccff, #ccffff);
    border-color: #ff88cc;
}

/* Message Ideas */
.message-ideas {
    background: #fcfcff;
    border: 1px dashed #ccccff;
    padding: 15px;
    margin: 20px 0;
}

.message-ideas ul {
    list-style: none;
    padding-left: 20px;
}

.message-ideas li:before {
    content: "♪ ";
    color: #ff88cc;
    font-weight: bold;
}

/* Warning Box */
.warning-box {
    background: #fff0f0;
    border: 1px solid #ffaaaa;
    padding: 15px;
    margin: 20px 0;
    font-size: 12px;
}

/* Friend Banner */
.friend-banner {
    text-align: center;
    margin: 30px 0;
    padding: 20px;
    background: linear-gradient(to right, #ffeeee, #eeeeff, #eeffee);
    border: 2px ridge #aaaaff;
}

.email-reveal {
    display: inline-block;
    padding: 10px 20px;
    background: #ffccff;
    border: 2px solid #ff88cc;
    color: #6666cc;
    text-decoration: none;
    font-weight: bold;
    margin: 10px;
}

.email-reveal:hover {
    background: #ffddff;
    transform: translateY(-2px);
}

/* ====================================
   12. SHERYL DD PAGE
   ==================================== */

/* Sheryl Page Specific Container */
.sheryl-page .container {
    border: 3px double #ff66cc;
    box-shadow: 3px 3px 0 rgba(255,102,204,0.2);
}

/* Sheryl Page Header */
.sheryl-page header {
    background: linear-gradient(135deg, #ff99cc 0%, #ffccff 50%, #ffddee 100%);
    padding: 30px 20px;
    border-bottom: 3px groove #ff66cc;
}

.sheryl-page h1 {
    font-size: 28px;
    color: #ff3399;
    text-shadow: 2px 2px 0 #ffffff, 3px 3px 0 #ffccff;
}

.sheryl-page .subtitle {
    color: #ff66cc;
    font-style: italic;
    font-size: 16px;
}

.sheryl-page .ascii-decoration {
    color: #ff99cc;
}

/* Sheryl Nav */
.sheryl-page nav {
    background: #fff0fa;
    border-bottom: 1px dotted #ff99cc;
}

.sheryl-page nav a {
    color: #ff3399;
    background: linear-gradient(to bottom, #ffffff, #ffe8ff);
    border: 1px solid #ffaacc;
}

.sheryl-page nav a:hover {
    background: linear-gradient(to bottom, #ffddff, #ffccff);
    border-color: #ff66cc;
}

/* Sheryl Intro */
.sheryl-intro {
    background: linear-gradient(135deg, #fff8ff 0%, #fff0fa 100%);
    border: 3px double #ff66cc;
    padding: 20px;
    margin-bottom: 30px;
    text-align: center;
}

/* Gallery Section */
.gallery-section {
    margin-bottom: 40px;
    padding: 20px;
    background: #fffafa;
    border: 2px dashed #ffccdd;
}

.gallery-title {
    font-size: 20px;
    color: #ff3399;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px dotted #ffaacc;
}

/* Main Photo */
.main-photo {
    text-align: center;
    margin: 30px 0;
    padding: 20px;
    background: linear-gradient(to bottom, #ffffff, #fff8ff);
    border: 3px ridge #ff99cc;
}

.main-photo img {
    max-width: 600px;
    width: 100%;
    height: auto;
    border: 5px solid #ffffff;
    box-shadow: 0 0 20px rgba(255,102,204,0.3);
}

.photo-caption {
    margin-top: 15px;
    font-style: italic;
    color: #ff66cc;
}

/* Photo Grid */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.photo-box {
    background: #ffffff;
    padding: 10px;
    border: 2px solid #ffccdd;
    text-align: center;
    transition: transform 0.2s;
}

.photo-box:hover {
    transform: scale(1.05);
    border-color: #ff66cc;
    box-shadow: 0 5px 15px rgba(255,102,204,0.3);
}

.photo-box img {
    width: 100%;
    height: auto;
    border: 1px solid #ffddee;
}

.photo-label {
    margin-top: 8px;
    font-size: 12px;
    color: #ff3399;
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.info-card {
    background: linear-gradient(135deg, #fff0fa 0%, #ffffff 100%);
    border: 2px solid #ffaacc;
    padding: 15px;
}

.info-card h3 {
    color: #ff3399;
    font-size: 16px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #ffccdd;
}

/* Sheryl Quote */
.sheryl-quote {
    background: linear-gradient(90deg, transparent, #fff0fa, transparent);
    padding: 20px;
    margin: 30px 0;
    text-align: center;
    font-size: 18px;
    color: #ff3399;
    font-style: italic;
    position: relative;
}

.sheryl-quote:before,
.sheryl-quote:after {
    content: "♥";
    font-size: 24px;
    color: #ffaacc;
    position: absolute;
}

.sheryl-quote:before {
    left: 20px;
}

.sheryl-quote:after {
    right: 20px;
}

/* Accessories List */
.accessories-list {
    background: #fffff0;
    border: 1px solid #ffcc99;
    padding: 15px;
    margin: 20px 0;
}

.accessories-list ul {
    list-style: none;
    padding: 0;
}

.accessories-list li {
    padding: 5px 0;
    padding-left: 20px;
}

.accessories-list li:before {
    content: "★ ";
    color: #ff66cc;
    margin-left: -20px;
    display: inline-block;
    width: 20px;
}

/* Care Tips */
.care-tips {
    background: #f0f8ff;
    border: 2px solid #99ccff;
    padding: 20px;
    margin: 30px 0;
}

.care-tips h3 {
    color: #6699cc;
    margin-bottom: 10px;
}

/* Hearts Border */
.hearts-border {
    text-align: center;
    font-size: 20px;
    color: #ffaacc;
    margin: 20px 0;
    letter-spacing: 10px;
}

/* Sheryl Page Info Cards - Enhanced */
.sheryl-page .info-card h3 {
    color: #ff3399;
    font-size: 16px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #ffccdd;
    text-align: center;  /* Center the hearts and title */
}

.sheryl-page .info-card {
    background: linear-gradient(135deg, #fff0fa 0%, #ffffff 100%);
    border: 2px solid #ffaacc;
    padding: 15px;
}

.sheryl-page .info-card dl {
    font-size: 13px;
}

.sheryl-page .info-card dt {
    font-weight: bold;
    color: #ff66cc;  /* Pink color for labels */
    margin-top: 5px;
}

.sheryl-page .info-card dd {
    margin-left: 15px;
    margin-bottom: 5px;
    color: #666666;
}

/* Sheryl Page Main Content Spacing */
.sheryl-page main {
    padding: 20px;  /* More padding than default pages - now same; consider 30 if want special */
}

.sheryl-page .gallery-section {
    margin-bottom: 40px;
    padding: 20px;
    background: #fffafa;
    border: 2px dashed #ffccdd;
}

.sheryl-page .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;  /* Space above and below */
}

.sheryl-page .sheryl-intro {
    background: linear-gradient(135deg, #fff8ff 0%, #fff0fa 100%);
    border: 3px double #ff66cc;
    padding: 20px;
    margin-bottom: 30px;  /* Space below */
    text-align: center;
}

/* Ensure all boxes have proper spacing from container edges */
.sheryl-page article,
.sheryl-page .main-photo,
.sheryl-page .accessories-list,
.sheryl-page .care-tips {
    margin-left: 0;
    margin-right: 0;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Photo Placeholder */
.photo-placeholder {
    width: 100%;
    height: 300px;
    background: linear-gradient(45deg, #ffeeee 25%, #fff0ff 25%, #fff0ff 50%, #ffeeee 50%, #ffeeee 75%, #fff0ff 75%, #fff0ff);
    background-size: 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffaacc;
    font-style: italic;
    border: 2px dashed #ffccdd;
}

/* Sheryl Footer */
.sheryl-page footer {
    background: linear-gradient(to bottom, #fff0fa, #ffddee);
    padding: 20px;
    border-top: 3px groove #ff66cc;
}

/* ====================================
   13. UTILITIES & ANIMATIONS
   ==================================== */

/* Skip Link (Accessibility) */
.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    position: static;
}

/* Sparkle Animation */
.sparkle {
    animation: sparkle 2s infinite;
}

.sparkle-text {
    display: inline-block;
    background: linear-gradient(45deg, #ff66cc, #ffaadd, #ff66cc);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: sparkle 3s linear infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes sparkle {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Blink Animation */
.blink {
    animation: blink 1s step-start infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Image Defaults */
img {
    max-width: 100%;
    height: auto;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .container {
        margin: 0 5px;
    }
    
    .photo-grid {
        grid-template-columns: 1fr;
    }
    
    .artist-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .resource-grid {
        grid-template-columns: 1fr;
    }
}

/* Print Styles */
@media print {
    body {
        background: white;
    }
    
    .banner,
    nav,
    .webring-box,
    .social-links {
        display: none;
    }
}