@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,700;0,900;1,400&family=DM+Sans:wght@400;500;600&display=swap');

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

:root {
  --red:    #FF6B6B;
  --orange: #FF9A5C;
  --yellow: #FFD166;
  --pink:   #FF6B9D;
  --purple: #C77DFF;
  --cream:  #FFF8F0;
  --dark:   #2C1810;
  --mid:    #7A5840;
  --light:  #A07060;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--cream); color: var(--dark); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }

/* NAV */
nav { position:sticky; top:0; z-index:100; background:linear-gradient(135deg,var(--red) 0%,var(--orange) 50%,var(--yellow) 100%); padding:0 40px; display:flex; align-items:center; justify-content:space-between; height:64px; box-shadow:0 2px 20px rgba(255,107,107,0.3); }
.nav-logo { font-family:var(--font-display); font-size:20px; font-weight:900; color:white; display:flex; align-items:center; gap:10px; }
.nav-links { display:flex; gap:4px; list-style:none; }
.nav-links a { color:rgba(255,255,255,0.9); font-size:13px; font-weight:500; padding:7px 14px; border-radius:24px; transition:background 0.2s; }
.nav-links a:hover, .nav-links a.active { background:rgba(255,255,255,0.25); color:white; }

/* HERO */
.hero { background:linear-gradient(180deg,#FFF0DC 0%,var(--cream) 100%); padding:80px 40px 64px; text-align:center; position:relative; overflow:hidden; border-bottom:1px solid rgba(255,154,92,0.2); }
.hero-badge { display:inline-flex; align-items:center; gap:6px; background:var(--yellow); color:#7A4F00; font-size:11px; font-weight:600; padding:5px 14px; border-radius:24px; margin-bottom:24px; text-transform:uppercase; letter-spacing:0.8px; }
.hero h1 { font-family:var(--font-display); font-size:clamp(42px,7vw,72px); font-weight:900; line-height:1.05; background:linear-gradient(135deg,var(--red),var(--orange),var(--yellow)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:20px; }
.hero p { font-size:17px; color:var(--mid); max-width:480px; margin:0 auto 32px; line-height:1.7; }
.hero-icons { display:flex; justify-content:center; gap:28px; margin-bottom:36px; }
.hero-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; border-radius:32px; font-size:14px; font-weight:600; cursor:pointer; border:none; transition:transform 0.15s, box-shadow 0.15s; font-family:var(--font-body); }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:linear-gradient(135deg,var(--red),var(--orange)); color:white; box-shadow:0 4px 16px rgba(255,107,107,0.35); }
.btn-primary:hover { box-shadow:0 6px 24px rgba(255,107,107,0.45); }
.btn-secondary { background:white; color:var(--orange); border:1.5px solid var(--orange); }

/* SECTIONS */
.section { padding:64px 40px; }
.section-alt { background:#FFF5EB; }
.section-header { display:flex; align-items:center; gap:10px; margin-bottom:36px; }
.section-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.section-title { font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--dark); }
.section-sub { margin-left:auto; font-size:13px; color:var(--light); font-weight:500; }
.section-sub a { color:var(--orange); }

/* CARDS */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.card { border-radius:16px; padding:20px; border:1px solid; cursor:pointer; transition:transform 0.2s, box-shadow 0.2s; }
.card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.card-story  { background:#FFF0F0; border-color:#FFCDD2; }
.card-art    { background:#FFF8E1; border-color:#FFE082; }
.card-ebook  { background:#F3E5F5; border-color:#CE93D8; }
.card-article{ background:#E8F5E9; border-color:#A5D6A7; }
.card-icon   { margin-bottom:14px; }
.card-name   { font-size:15px; font-weight:600; color:var(--dark); margin-bottom:6px; line-height:1.3; }
.card-desc   { font-size:12px; color:var(--mid); line-height:1.5; }
.card-author { font-size:11px; color:var(--light); margin-top:6px; font-weight:500; }
.card-tag    { display:inline-block; font-size:10px; font-weight:600; padding:3px 10px; border-radius:12px; margin-top:10px; }
.card-thumb  { width:100%; height:140px; border-radius:8px; margin-bottom:12px; background-size:cover; background-position:center; background-color:rgba(255,154,92,0.1); }
.card-thumb-placeholder { background:linear-gradient(135deg,rgba(255,107,107,0.08),rgba(255,209,102,0.12)); }
.tag-story   { background:#FFCDD2; color:#B71C1C; }
.tag-art     { background:#FFE082; color:#7A4F00; }
.tag-ebook   { background:#CE93D8; color:#4A148C; }
.tag-article { background:#A5D6A7; color:#1B5E20; }

/* ART GALLERY */
.art-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.art-card { border-radius:16px; overflow:hidden; background:#FFF8E1; border:1px solid #FFE082; cursor:pointer; transition:transform 0.2s, box-shadow 0.2s; }
.art-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(255,154,92,0.2); }
.art-thumb { width:100%; height:220px; background-size:cover; background-position:center; background-color:rgba(255,209,102,0.15); }
.art-info { padding:14px 16px 4px; }

/* ABOUT */
.about-intro { text-align:center; max-width:620px; margin:0 auto 56px; }
.about-intro h2 { font-family:var(--font-display); font-size:38px; font-weight:900; line-height:1.1; margin-bottom:16px; background:linear-gradient(135deg,var(--red),var(--orange)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.about-intro p { font-size:16px; color:var(--mid); line-height:1.75; }
.about-manifesto { background:linear-gradient(135deg,var(--red),var(--orange),var(--yellow)); border-radius:24px; padding:48px 40px; text-align:center; margin-bottom:56px; position:relative; overflow:hidden; }
.about-manifesto blockquote { font-family:var(--font-display); font-size:clamp(22px,4vw,36px); font-weight:700; font-style:italic; color:white; line-height:1.3; max-width:600px; margin:0 auto 16px; }
.about-manifesto cite { color:rgba(255,255,255,0.8); font-size:13px; font-style:normal; }
.crew-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; }
.crew-card { background:white; border-radius:20px; border:1px solid rgba(255,154,92,0.2); padding:28px 20px; text-align:center; transition:transform 0.2s, box-shadow 0.2s; }
.crew-card:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(255,107,107,0.12); }
.crew-avatar { margin:0 auto 16px; display:block; }
.crew-name { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--dark); margin-bottom:4px; }
.crew-role { font-size:12px; color:var(--orange); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; }
.crew-bio { font-size:12px; color:var(--mid); line-height:1.5; }
.about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; }
.stat-card { background:white; border-radius:16px; border:1px solid rgba(255,154,92,0.2); padding:28px 20px; text-align:center; }
.stat-number { font-family:var(--font-display); font-size:40px; font-weight:900; background:linear-gradient(135deg,var(--red),var(--orange)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; margin-bottom:8px; }
.stat-label { font-size:13px; color:var(--mid); font-weight:500; }

/* FRIENDS */
.friends-box { background:linear-gradient(135deg,#FFF0E6,#FFE4F0); border:2px dashed rgba(255,154,92,0.4); border-radius:24px; padding:40px; text-align:center; }
.friends-box h3 { font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--dark); margin:16px 0 10px; }
.friends-box p { font-size:14px; color:var(--mid); margin-bottom:24px; line-height:1.6; max-width:400px; margin-left:auto; margin-right:auto; }
.submit-form { background:white; border-radius:16px; padding:24px; border:1px solid rgba(255,154,92,0.2); text-align:left; max-width:360px; margin:0 auto; }
.submit-form label { font-size:11px; font-weight:600; color:var(--light); display:block; margin-bottom:5px; margin-top:14px; text-transform:uppercase; letter-spacing:0.5px; }
.submit-form label:first-child { margin-top:0; }
.submit-form input, .submit-form select, .submit-form textarea { width:100%; padding:10px 14px; border-radius:10px; border:1px solid rgba(255,154,92,0.3); font-size:13px; color:var(--dark); background:var(--cream); outline:none; font-family:var(--font-body); transition:border-color 0.2s; }
.submit-form input:focus, .submit-form select:focus, .submit-form textarea:focus { border-color:var(--orange); }
.submit-form textarea { height:80px; resize:none; }
.submit-btn { width:100%; margin-top:16px; background:linear-gradient(135deg,var(--orange),var(--pink)); color:white; border:none; padding:12px; border-radius:24px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font-body); transition:transform 0.15s; }
.submit-btn:hover { transform:translateY(-1px); }

/* PAGE HERO */
.page-hero { background:linear-gradient(180deg,#FFF0DC,var(--cream)); padding:56px 40px 48px; border-bottom:1px solid rgba(255,154,92,0.2); }
.page-hero h1 { font-family:var(--font-display); font-size:clamp(32px,5vw,52px); font-weight:900; line-height:1.1; margin-bottom:12px; background:linear-gradient(135deg,var(--red),var(--orange)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.page-hero p { font-size:16px; color:var(--mid); max-width:500px; line-height:1.65; }

/* READER */
.reader-wrap { max-width:680px; margin:0 auto; padding:48px 24px 80px; }
.reader-header { margin-bottom:40px; border-bottom:1px solid rgba(255,154,92,0.2); padding-bottom:24px; }
.reader-title { font-family:var(--font-display); font-size:clamp(28px,5vw,44px); font-weight:900; line-height:1.1; margin-bottom:12px; background:linear-gradient(135deg,var(--red),var(--orange)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.reader-author { font-size:15px; color:var(--light); font-weight:500; }
.reader-author span { color:var(--orange); font-weight:600; }
.article-body p { font-size:17px; line-height:1.85; color:var(--dark); margin-bottom:1.5em; }
.article-body h2 { font-family:var(--font-display); font-size:24px; font-weight:700; margin:2em 0 0.5em; color:var(--dark); }
.article-body p:first-child::first-letter { font-family:var(--font-display); font-size:4em; font-weight:900; float:left; line-height:0.8; margin:8px 12px 0 0; color:var(--orange); }
.back-btn { display:inline-flex; align-items:center; gap:6px; color:var(--orange); font-size:13px; font-weight:600; margin-bottom:32px; cursor:pointer; text-decoration:none; }

/* DRIVE STATES */
.drive-loading { text-align:center; padding:60px 20px; color:var(--mid); font-size:14px; }
.drive-error   { text-align:center; padding:40px 20px; }

/* FOOTER */
footer { background:linear-gradient(135deg,var(--red) 0%,var(--orange) 50%,var(--yellow) 100%); padding:40px; text-align:center; color:rgba(255,255,255,0.9); font-size:13px; }
footer strong { color:white; font-family:var(--font-display); font-size:16px; font-weight:700; }
.footer-links { display:flex; justify-content:center; gap:20px; margin-bottom:16px; flex-wrap:wrap; }
.footer-links a { color:rgba(255,255,255,0.8); font-size:13px; transition:color 0.2s; }
.footer-links a:hover { color:white; }
.footer-copy { color:rgba(255,255,255,0.7); font-size:12px; margin-top:8px; }

@media (max-width:640px) {
  nav { padding:0 20px; }
  .nav-links { display:none; }
  .hero { padding:56px 24px 48px; }
  .section { padding:48px 24px; }
  .about-stats { grid-template-columns:1fr; }
  .about-manifesto { padding:32px 24px; }
}