*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    --color-navy:#1a2332;
    --color-navy-light:#243044;
    --color-graphite:#2c3e50;
    --color-gold:#c8a84e;
    --color-gold-light:#d4b96a;
    --color-gold-muted:#b89a3e;
    --color-white:#ffffff;
    --color-off-white:#f8f9fa;
    --color-bg:#fafbfc;
    --color-gray-50:#f5f6f7;
    --color-gray-100:#ebedf0;
    --color-gray-200:#dde0e4;
    --color-gray-300:#c4c8ce;
    --color-gray-400:#98a0ab;
    --color-gray-500:#6b7685;
    --color-gray-600:#4a5568;
    --color-gray-700:#374151;
    --color-text:#2d3748;
    --color-text-light:#4a5568;
    --color-text-muted:#718096;
    --color-border:#e2e5ea;
    --color-border-light:#eef0f3;
    --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
    --font-serif:Georgia,"Times New Roman",Times,serif;
    --font-mono:"SF Mono","Fira Code","Fira Mono","Roboto Mono",monospace;
    --fs-xs:0.75rem;
    --fs-sm:0.875rem;
    --fs-base:1rem;
    --fs-md:1.125rem;
    --fs-lg:1.25rem;
    --fs-xl:1.5rem;
    --fs-2xl:1.875rem;
    --fs-3xl:2.25rem;
    --fs-4xl:3rem;
    --lh-tight:1.25;
    --lh-normal:1.6;
    --lh-relaxed:1.75;
    --space-1:0.25rem;
    --space-2:0.5rem;
    --space-3:0.75rem;
    --space-4:1rem;
    --space-5:1.25rem;
    --space-6:1.5rem;
    --space-8:2rem;
    --space-10:2.5rem;
    --space-12:3rem;
    --space-16:4rem;
    --space-20:5rem;
    --space-24:6rem;
    --radius-sm:4px;
    --radius-md:8px;
    --radius-lg:12px;
    --shadow-sm:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:0 4px 12px rgba(0,0,0,0.07),0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg:0 10px 30px rgba(0,0,0,0.08),0 4px 8px rgba(0,0,0,0.04);
    --max-width:1140px;
    --transition:0.2s ease;
}

html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.skip-link{position:absolute;top:-100%;left:var(--space-4);background:var(--color-navy);color:var(--color-white);padding:var(--space-2) var(--space-4);z-index:1000;border-radius:0 0 var(--radius-sm) var(--radius-sm);font-size:var(--fs-sm);transition:top var(--transition)}
.skip-link:focus{top:0}

img{max-width:100%;height:auto;display:block}
a{color:var(--color-navy);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--color-gold-muted)}

.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--space-6)}

/* HEADER */
.site-header{background:var(--color-white);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:100;backdrop-filter:blur(8px);background:rgba(255,255,255,0.97)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.site-logo{display:flex;align-items:center;gap:var(--space-3);color:var(--color-navy);text-decoration:none;font-size:var(--fs-md)}
.site-logo:hover{color:var(--color-navy)}
.logo-icon{color:var(--color-gold);flex-shrink:0}
.logo-text{font-weight:400;letter-spacing:-0.01em;white-space:nowrap}
.logo-text strong{font-weight:700}

.menu-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--color-navy);padding:var(--space-2)}

.main-nav .nav-list{display:flex;list-style:none;gap:var(--space-1)}
.main-nav .nav-list a{display:block;padding:var(--space-2) var(--space-3);font-size:var(--fs-sm);color:var(--color-gray-600);border-radius:var(--radius-sm);font-weight:500;transition:all var(--transition)}
.main-nav .nav-list a:hover,.main-nav .nav-list a[aria-current="page"]{color:var(--color-navy);background:var(--color-gray-50)}
.main-nav .nav-list a[aria-current="page"]{color:var(--color-gold-muted);font-weight:600}

/* HERO */
.hero{background:var(--color-navy);color:var(--color-white);padding:var(--space-20) 0;text-align:center;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(200,168,78,0.08) 0%,transparent 60%)}
.hero h1{font-size:var(--fs-3xl);font-weight:700;line-height:var(--lh-tight);letter-spacing:-0.02em;margin-bottom:var(--space-6);max-width:800px;margin-left:auto;margin-right:auto}
.hero p{font-size:var(--fs-md);color:rgba(255,255,255,0.75);max-width:640px;margin:0 auto;line-height:var(--lh-relaxed)}
.hero-badge{display:inline-block;font-size:var(--fs-xs);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-gold);border:1px solid rgba(200,168,78,0.3);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);margin-bottom:var(--space-6)}

/* SECTIONS */
.section{padding:var(--space-20) 0}
.section--alt{background:var(--color-white)}
.section-header{text-align:center;margin-bottom:var(--space-12)}
.section-header h2{font-size:var(--fs-2xl);font-weight:700;color:var(--color-navy);margin-bottom:var(--space-4);letter-spacing:-0.01em}
.section-header p{font-size:var(--fs-md);color:var(--color-text-muted);max-width:600px;margin:0 auto}
.section-label{display:inline-block;font-size:var(--fs-xs);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-gold-muted);margin-bottom:var(--space-3)}

/* CARDS */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-8)}
.card{background:var(--color-white);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);padding:var(--space-8);transition:all var(--transition)}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border)}
.card-label{font-size:var(--fs-xs);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--color-gold-muted);margin-bottom:var(--space-3)}
.card h3{font-size:var(--fs-lg);font-weight:600;color:var(--color-navy);margin-bottom:var(--space-3);line-height:var(--lh-tight)}
.card h3 a{color:inherit}
.card h3 a:hover{color:var(--color-gold-muted)}
.card p{font-size:var(--fs-sm);color:var(--color-text-light);line-height:var(--lh-relaxed);margin-bottom:var(--space-4)}
.card-meta{display:flex;align-items:center;gap:var(--space-4);font-size:var(--fs-xs);color:var(--color-text-muted)}
.card-meta svg{width:14px;height:14px;flex-shrink:0;opacity:0.5}

/* ARTICLE CONTENT */
.article-header{padding:var(--space-16) 0 var(--space-8);text-align:center}
.article-header h1{font-size:var(--fs-3xl);font-weight:700;color:var(--color-navy);line-height:var(--lh-tight);letter-spacing:-0.02em;max-width:780px;margin:0 auto var(--space-6)}
.article-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-4);font-size:var(--fs-sm);color:var(--color-text-muted)}
.article-meta a{color:var(--color-gold-muted);font-weight:500}

.article-body{max-width:720px;margin:0 auto;padding-bottom:var(--space-16)}
.article-body p{font-size:var(--fs-md);line-height:var(--lh-relaxed);margin-bottom:var(--space-6);color:var(--color-text)}
.article-body h2{font-size:var(--fs-xl);font-weight:700;color:var(--color-navy);margin-top:var(--space-12);margin-bottom:var(--space-6);letter-spacing:-0.01em}
.article-body h3{font-size:var(--fs-lg);font-weight:600;color:var(--color-navy);margin-top:var(--space-8);margin-bottom:var(--space-4)}
.article-body ul,.article-body ol{margin-bottom:var(--space-6);padding-left:var(--space-6)}
.article-body li{font-size:var(--fs-md);line-height:var(--lh-relaxed);margin-bottom:var(--space-2);color:var(--color-text)}
.article-body strong{font-weight:600;color:var(--color-navy)}
.article-body blockquote{border-left:3px solid var(--color-gold);padding:var(--space-4) var(--space-6);margin:var(--space-8) 0;background:var(--color-gray-50);border-radius:0 var(--radius-sm) var(--radius-sm) 0}

.article-references{max-width:720px;margin:0 auto;padding:var(--space-8) 0;border-top:1px solid var(--color-border)}
.article-references h3{font-size:var(--fs-base);font-weight:600;color:var(--color-navy);margin-bottom:var(--space-4)}
.article-references ul{list-style:none;padding:0}
.article-references li{font-size:var(--fs-sm);color:var(--color-text-muted);padding:var(--space-2) 0;border-bottom:1px solid var(--color-border-light)}
.article-references li:last-child{border-bottom:none}

/* BREADCRUMBS */
.breadcrumbs{padding:var(--space-4) 0;font-size:var(--fs-sm);color:var(--color-text-muted)}
.breadcrumbs a{color:var(--color-text-muted)}
.breadcrumbs a:hover{color:var(--color-gold-muted)}
.breadcrumbs span{margin:0 var(--space-2);opacity:0.4}

/* PAGE HEADER */
.page-header{background:var(--color-navy);color:var(--color-white);padding:var(--space-16) 0;text-align:center}
.page-header h1{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-0.01em;margin-bottom:var(--space-4)}
.page-header p{font-size:var(--fs-md);color:rgba(255,255,255,0.7);max-width:600px;margin:0 auto}

/* INFO GRID */
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-6)}
.info-card{background:var(--color-white);border:1px solid var(--color-border-light);border-radius:var(--radius-md);padding:var(--space-6)}
.info-card h3{font-size:var(--fs-base);font-weight:600;color:var(--color-navy);margin-bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2)}
.info-card p{font-size:var(--fs-sm);color:var(--color-text-light);line-height:var(--lh-relaxed)}
.info-icon{width:20px;height:20px;color:var(--color-gold)}

/* FAQ */
.faq-list{max-width:720px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--color-border-light)}
.faq-question{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;padding:var(--space-5) 0;font-family:inherit;font-size:var(--fs-base);font-weight:600;color:var(--color-navy);text-align:left;gap:var(--space-4);line-height:var(--lh-normal)}
.faq-question svg{flex-shrink:0;transition:transform var(--transition);color:var(--color-gray-400)}
.faq-question[aria-expanded="true"] svg{transform:rotate(45deg);color:var(--color-gold)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease}
.faq-answer-inner{padding:0 0 var(--space-6);font-size:var(--fs-sm);color:var(--color-text-light);line-height:var(--lh-relaxed)}

/* AUTHOR */
.author-card{display:flex;gap:var(--space-6);align-items:flex-start;background:var(--color-white);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);padding:var(--space-8)}
.author-avatar{width:64px;height:64px;border-radius:50%;background:var(--color-navy);color:var(--color-gold);display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);font-weight:700;flex-shrink:0}
.author-info h3{font-size:var(--fs-lg);font-weight:600;color:var(--color-navy);margin-bottom:var(--space-1)}
.author-info .author-role{font-size:var(--fs-sm);color:var(--color-gold-muted);font-weight:500;margin-bottom:var(--space-3)}
.author-info p{font-size:var(--fs-sm);color:var(--color-text-light);line-height:var(--lh-relaxed)}
.author-meta-detail{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:var(--space-3)}

/* GLOSSARY */
.glossary-list{max-width:720px;margin:0 auto}
.glossary-letter{font-size:var(--fs-xl);font-weight:700;color:var(--color-gold-muted);padding:var(--space-6) 0 var(--space-3);border-bottom:2px solid var(--color-border)}
.glossary-item{padding:var(--space-4) 0;border-bottom:1px solid var(--color-border-light)}
.glossary-term{font-weight:600;color:var(--color-navy);font-size:var(--fs-base);margin-bottom:var(--space-1)}
.glossary-def{font-size:var(--fs-sm);color:var(--color-text-light);line-height:var(--lh-relaxed)}

/* CONTENT PAGE */
.content-page{max-width:720px;margin:0 auto;padding:var(--space-12) var(--space-6) var(--space-20)}
.content-page h1{font-size:var(--fs-2xl);font-weight:700;color:var(--color-navy);margin-bottom:var(--space-8);letter-spacing:-0.01em}
.content-page h2{font-size:var(--fs-xl);font-weight:600;color:var(--color-navy);margin-top:var(--space-10);margin-bottom:var(--space-4)}
.content-page h3{font-size:var(--fs-lg);font-weight:600;color:var(--color-navy);margin-top:var(--space-8);margin-bottom:var(--space-3)}
.content-page p{font-size:var(--fs-base);line-height:var(--lh-relaxed);margin-bottom:var(--space-5);color:var(--color-text)}
.content-page ul,.content-page ol{margin-bottom:var(--space-5);padding-left:var(--space-6)}
.content-page li{font-size:var(--fs-base);line-height:var(--lh-relaxed);margin-bottom:var(--space-2);color:var(--color-text)}
.content-page a{color:var(--color-gold-muted);text-decoration:underline;text-underline-offset:2px}
.content-page a:hover{color:var(--color-navy)}
.content-page strong{color:var(--color-navy)}
.page-updated{font-size:var(--fs-sm);color:var(--color-text-muted);margin-bottom:var(--space-8)}

/* CONTACT FORM */
.contact-form{max-width:540px}
.form-group{margin-bottom:var(--space-5)}
.form-group label{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--color-navy);margin-bottom:var(--space-2)}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:inherit;font-size:var(--fs-base);color:var(--color-text);background:var(--color-white);transition:border-color var(--transition)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--color-gold)}
.form-group textarea{resize:vertical;min-height:120px}
.form-submit{display:inline-block;padding:var(--space-3) var(--space-8);background:var(--color-navy);color:var(--color-white);border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:var(--fs-base);font-weight:500;cursor:pointer;transition:background var(--transition)}
.form-submit:hover{background:var(--color-navy-light)}

/* RELATED ARTICLES */
.related-section{max-width:720px;margin:0 auto;padding:var(--space-12) 0;border-top:1px solid var(--color-border)}
.related-section h3{font-size:var(--fs-lg);font-weight:600;color:var(--color-navy);margin-bottom:var(--space-6)}
.related-list{list-style:none;padding:0}
.related-list li{padding:var(--space-3) 0;border-bottom:1px solid var(--color-border-light)}
.related-list li:last-child{border-bottom:none}
.related-list a{font-size:var(--fs-base);color:var(--color-text);font-weight:500;display:flex;align-items:center;gap:var(--space-2)}
.related-list a:hover{color:var(--color-gold-muted)}
.related-list a::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--color-gold);flex-shrink:0}

/* NOTICE BOX */
.notice-box{background:var(--color-gray-50);border:1px solid var(--color-border);border-left:3px solid var(--color-gold);border-radius:var(--radius-sm);padding:var(--space-6);margin:var(--space-8) 0}
.notice-box h3{font-size:var(--fs-base);font-weight:600;color:var(--color-navy);margin-bottom:var(--space-3)}
.notice-box p{font-size:var(--fs-sm);color:var(--color-text-light);line-height:var(--lh-relaxed);margin:0}

/* AGE BADGE */
.age-badge{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:2px solid var(--color-gold);border-radius:50%;font-size:var(--fs-sm);font-weight:700;color:var(--color-gold);margin-top:var(--space-4)}

/* FEATURES LIST */
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-6)}
.feature-item{display:flex;gap:var(--space-4);align-items:flex-start}
.feature-icon{width:40px;height:40px;border-radius:var(--radius-md);background:var(--color-gray-50);border:1px solid var(--color-border-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--color-gold)}
.feature-item h3{font-size:var(--fs-sm);font-weight:600;color:var(--color-navy);margin-bottom:var(--space-1)}
.feature-item p{font-size:var(--fs-xs);color:var(--color-text-muted);line-height:var(--lh-relaxed)}

/* CATEGORY ARTICLE LIST */
.article-list{list-style:none;padding:0;max-width:720px;margin:0 auto}
.article-list-item{padding:var(--space-6) 0;border-bottom:1px solid var(--color-border-light)}
.article-list-item:last-child{border-bottom:none}
.article-list-item h3{margin-bottom:var(--space-2)}
.article-list-item h3 a{font-size:var(--fs-lg);color:var(--color-navy);font-weight:600}
.article-list-item h3 a:hover{color:var(--color-gold-muted)}
.article-list-item p{font-size:var(--fs-sm);color:var(--color-text-light);margin-bottom:var(--space-3);line-height:var(--lh-relaxed)}
.article-list-meta{font-size:var(--fs-xs);color:var(--color-text-muted);display:flex;gap:var(--space-4);flex-wrap:wrap}

/* UPDATES BLOCK */
.updates-list{list-style:none;padding:0}
.updates-list li{display:flex;gap:var(--space-4);align-items:baseline;padding:var(--space-3) 0;border-bottom:1px solid var(--color-border-light);font-size:var(--fs-sm)}
.updates-list li:last-child{border-bottom:none}
.update-date{font-size:var(--fs-xs);color:var(--color-text-muted);white-space:nowrap;min-width:80px}
.updates-list a{color:var(--color-text);font-weight:500}
.updates-list a:hover{color:var(--color-gold-muted)}

/* FOOTER */
.site-footer{background:var(--color-navy);color:rgba(255,255,255,0.7);padding:var(--space-16) 0 var(--space-8)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-8);margin-bottom:var(--space-12)}
.footer-col h3{font-size:var(--fs-sm);font-weight:600;color:var(--color-white);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--space-4)}
.footer-col p{font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
.footer-col ul{list-style:none;padding:0}
.footer-col li{margin-bottom:var(--space-2)}
.footer-col a{font-size:var(--fs-sm);color:rgba(255,255,255,0.6);transition:color var(--transition)}
.footer-col a:hover{color:var(--color-gold)}
.footer-disclaimer{border-top:1px solid rgba(255,255,255,0.1);padding:var(--space-6) 0;margin-bottom:var(--space-6)}
.footer-disclaimer p{font-size:var(--fs-sm);color:rgba(255,255,255,0.5);text-align:center;max-width:700px;margin:0 auto;line-height:var(--lh-relaxed);font-style:italic}
.footer-bottom{text-align:center}
.footer-bottom p{font-size:var(--fs-xs);color:rgba(255,255,255,0.35)}

/* ERROR PAGE */
.error-page{text-align:center;padding:var(--space-24) var(--space-6)}
.error-page h1{font-size:var(--fs-4xl);color:var(--color-navy);font-weight:700;margin-bottom:var(--space-4)}
.error-page p{font-size:var(--fs-md);color:var(--color-text-muted);margin-bottom:var(--space-8)}
.error-page a{display:inline-block;padding:var(--space-3) var(--space-8);background:var(--color-navy);color:var(--color-white);border-radius:var(--radius-sm);font-weight:500;transition:background var(--transition)}
.error-page a:hover{background:var(--color-navy-light);color:var(--color-white)}

/* RESPONSIBLE PLAY BANNER */
.rp-banner{background:var(--color-navy-light);border-radius:var(--radius-lg);padding:var(--space-8);text-align:center;margin:var(--space-8) 0}
.rp-banner h3{color:var(--color-white);font-size:var(--fs-lg);margin-bottom:var(--space-3)}
.rp-banner p{color:rgba(255,255,255,0.7);font-size:var(--fs-sm);line-height:var(--lh-relaxed);max-width:560px;margin:0 auto}

/* MOBILE */
@media(max-width:768px){
    .menu-toggle{display:block}
    .main-nav{position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--color-white);z-index:99;transform:translateX(100%);transition:transform 0.3s ease;overflow-y:auto;border-top:1px solid var(--color-border)}
    .main-nav.is-open{transform:translateX(0)}
    .main-nav .nav-list{flex-direction:column;padding:var(--space-4);gap:0}
    .main-nav .nav-list a{padding:var(--space-4);font-size:var(--fs-base);border-radius:var(--radius-sm)}
    .hero{padding:var(--space-12) 0}
    .hero h1{font-size:var(--fs-2xl)}
    .section{padding:var(--space-12) 0}
    .section-header{margin-bottom:var(--space-8)}
    .card-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr 1fr}
    .article-header{padding:var(--space-8) 0 var(--space-4)}
    .article-header h1{font-size:var(--fs-2xl)}
    .page-header{padding:var(--space-10) 0}
    .page-header h1{font-size:var(--fs-xl)}
    .author-card{flex-direction:column;text-align:center;align-items:center}
    .info-grid{grid-template-columns:1fr}
    .features-grid{grid-template-columns:1fr}
    .container{padding:0 var(--space-4)}
    .content-page{padding:var(--space-8) var(--space-4) var(--space-12)}
}

@media(max-width:480px){
    .footer-grid{grid-template-columns:1fr}
    .article-meta{flex-direction:column;gap:var(--space-2)}
}