/* Color variables */
:root{
  --bg: #fdfbf7;
  --dark: #2a251b;
  --gold: #d3ae37;
  --burgundy: #8b3a3a;
  --muted: #c4c1bb;

  --max-width: 1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--dark);
  font-family: 'Sulphur Point', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  position:sticky;top:0;background:rgba(253,251,247,0.95);backdrop-filter: blur(4px);border-bottom:1px solid rgba(42,37,27,0.06);z-index:40;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}

.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--dark);font-weight:700}
.logo svg{display:block}
.logo:hover{text-decoration:none;color:var(--gold)}

.nav{display:flex}
.nav-list{display:flex;gap:28px;align-items:center;list-style:none;margin:0;padding:0}
.nav-list a{color:var(--dark);text-decoration:none;font-weight:600;padding:6px 8px;border-radius:6px}
.nav-list a:hover{color:var(--gold)}


.nav-list .link-icon{display:inline-block;width:14px;height:auto;vertical-align:middle;opacity:0.95}

.nav-toggle{display:none;background:none;border:0;padding:8px}
.hamburger{display:block;width:22px;height:2px;background:var(--dark);position:relative}
.hamburger::after,.hamburger::before{content:'';position:absolute;left:0;right:0;height:2px;background:var(--dark)}
.hamburger::before{top:-7px}
.hamburger::after{bottom:-7px}

/* Hero */
.hero{display:flex;align-items:center;min-height:72vh;padding:80px 0 110px;background:linear-gradient(180deg, rgba(211,174,55,0.02) 0%, transparent 40%)}
.hero-inner{display:flex;align-items:center;gap:0}
.hero__content{max-width:780px}

/* Right-side illustration for hero */
.hero__image{max-width:360px;width:40%;height:auto;margin-left:0;flex-shrink:0;filter:drop-shadow(0 10px 30px rgba(42,37,27,0.08));} 

.hero h1{
  font-family: 'Sulphur Point', 'Playfair Display', serif;
  font-weight:700;
  color:var(--dark);
  margin:0 0 14px 0;
  font-size: clamp(32px, 5vw, 56px);
  line-height:1.02;
  letter-spacing:-0.02em;
}

.sub{
  font-family: 'WindSong','Georgia',serif;
  font-size: clamp(26px, 2.4vw, 22px);
  font-weight:600;
  color:var(--gold);
  margin:0 0 20px;
  position:relative;
  padding-left:36px;
}

.sub::before{
  content: '';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  background-image: url('icons/ink_pen.svg');
  background-repeat: no-repeat;
  background-size: contain;
  opacity:0.95;
  filter: drop-shadow(0 2px 6px rgba(42,37,27,0.08));
}

.lead-note{margin-top:26px;color:var(--muted);font-size:14px}

.cta-row{display:flex;gap:12px;margin-top:18px}
.btn{display:inline-block;padding:12px 18px;border-radius:8px;text-decoration:none;font-weight:600}
.btn.primary{background:var(--burgundy);color:var(--bg);box-shadow:0 8px 30px rgba(42,37,27,0.06)}
.btn.primary:hover{filter:brightness(.98);transform:translateY(-1px)}
.btn.ghost{border:1px solid var(--muted);color:var(--dark);background:transparent}

/* Features - Enhanced with burgundy accents */
.features{padding:60px 0}
.feature-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:18px}
.card{
  background:rgba(42,37,27,0.02);
  padding:24px;
  border-radius:10px;
  border:1px solid rgba(42,37,27,0.03);
  position:relative;
  overflow:hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Alternating colored left borders on feature cards */
.feature-cards .card:nth-child(1){
  border-left:4px solid var(--burgundy);
  background:linear-gradient(135deg, rgba(139,58,58,0.03) 0%, rgba(42,37,27,0.02) 100%);
}
.feature-cards .card:nth-child(2){
  border-left:4px solid var(--gold);
  background:linear-gradient(135deg, rgba(211,174,55,0.04) 0%, rgba(42,37,27,0.02) 100%);
}
.feature-cards .card:nth-child(3){
  border-left:4px solid var(--burgundy);
  background:linear-gradient(135deg, rgba(139,58,58,0.03) 0%, rgba(42,37,27,0.02) 100%);
}
.feature-cards .card:nth-child(4){
  border-left:4px solid var(--gold);
  background:linear-gradient(135deg, rgba(211,174,55,0.04) 0%, rgba(42,37,27,0.02) 100%);
}

.feature-cards .card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(42,37,27,0.08);
}

.card__icon{display:block;width:40px;height:auto;margin:0 0 14px}

.card h3{
  margin:0 0 8px;
  font-family:'Sulphur Point', 'Playfair Display', serif;
}

/* Color the first and third feature card titles with burgundy */
.feature-cards .card:nth-child(1) h3,
.feature-cards .card:nth-child(3) h3{
  color:var(--burgundy);
}

/* Color the second and fourth feature card titles with gold */
.feature-cards .card:nth-child(2) h3,
.feature-cards .card:nth-child(4) h3{
  color:var(--gold);
}

/* What is SammyAI? - This container should not have any padding */
.what-is{padding:0px 0}

/* Who is SammyAI for? - Enhanced with accent colors */
.who{padding:40px 0}
.who h2{margin:0 0 12px;color:var(--burgundy)}
.who-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px}

/* Add decorative corner accent to first card in each row */
.who-cards .card:nth-child(3n+1)::before{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:40px;
  height:40px;
  background:linear-gradient(135deg, var(--burgundy) 0%, transparent 100%);
  opacity:0.15;
  border-radius:0 10px 0 0;
}

.who-cards .card:nth-child(3n+2)::before{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:40px;
  height:40px;
  background:linear-gradient(135deg, var(--gold) 0%, transparent 100%);
  opacity:0.2;
  border-radius:0 10px 0 0;
}

/* Enhanced card title colors */
.who-cards .card:nth-child(1) h3{color:var(--burgundy)}
.who-cards .card:nth-child(2) h3{color:var(--gold)}
.who-cards .card:nth-child(3) h3{color:var(--burgundy)}
.who-cards .card:nth-child(4) h3{color:var(--gold)}
.who-cards .card:nth-child(5) h3{color:var(--burgundy)}
.who-cards .card:nth-child(6) h3{color:var(--gold)}

@media (max-width:880px){
  .who-cards{grid-template-columns:repeat(2,1fr)}
  /* Adjust accent pattern for 2-column layout */
  .who-cards .card:nth-child(3n+1)::before,
  .who-cards .card:nth-child(3n+2)::before{
    display:none;
  }
  .who-cards .card:nth-child(2n+1)::before{
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:40px;
    height:40px;
    background:linear-gradient(135deg, var(--burgundy) 0%, transparent 100%);
    opacity:0.15;
    border-radius:0 10px 0 0;
    display:block;
  }
}
@media (max-width:480px){
  .who-cards{grid-template-columns:1fr}
}

/* Involvement & Contact layout - Enhanced */
.involvement{padding:40px 0;display:flex;gap:28px;align-items:flex-start}
.involvement__left,.involvement__right{
  background:rgba(42,37,27,0.02);
  padding:20px;
  border-radius:10px;
  border:1px solid rgba(42,37,27,0.03);
}
.involvement__left{
  flex:1;
  border-left:4px solid var(--burgundy);
}
.involvement__right{
  width:380px;
  flex-shrink:0;
  border-left:4px solid var(--gold);
}
.involvement h2{margin:0 0 12px;color:var(--burgundy)}
.involvement__right h2{color:var(--gold)}
.involvement h3{margin:12px 0 6px;color:var(--burgundy)}
.involvement-part p{margin:0 0 12px}
.contact-form{display:flex;flex-direction:column;gap:10px}
.contact-form input,.contact-form textarea{padding:10px;border-radius:8px;border:1px solid rgba(42,37,27,0.06);font-size:15px;color:var(--dark)}
.contact-form textarea{min-height:120px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid rgba(211,174,55,0.12);outline-offset:2px}
.contact-form .btn.primary{padding:10px 14px;border-radius:8px;font-weight:700}

/* Contact form status messages */
.form-status{font-size:14px;padding:8px;border-radius:8px;text-align:center}
.form-status.success{background:rgba(211,174,55,0.06);color:var(--dark);border:1px solid rgba(211,174,55,0.12)}
.form-status.error{background:rgba(139,58,58,0.03);color:var(--burgundy);border:1px solid rgba(139,58,58,0.06)}

@media (max-width:880px){
  .involvement{flex-direction:column}
  .involvement__right{width:100%}
}

/* Flash fiction story cards */
.story-cards{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px}
.story-card{background:#fff;padding:20px;display:flex;gap:20px;align-items:flex-start;color:var(--dark);border:1px solid rgba(42,37,27,0.06);box-shadow:0 8px 20px rgba(42,37,27,0.03);transition:transform .18s ease, box-shadow .18s ease}
.story-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(42,37,27,0.06)}
.story-card__body{flex:1;min-width:0}
.story-card__title{margin:0 0 6px;font-size:24px;color:var(--gold);font-weight:700;font-family:'Sulphur Point','Playfair Display', serif}
.story-card__meta{font-size:13px;color:rgba(42,37,27,0.6);margin-bottom:12px;display:block}
.story-card__meta .label{font-weight:600;color:rgba(42,37,27,0.75);margin-right:6px}
.story-card__meta .meta-item{display:block;border-radius:6px}
.story-card__summary{display:block;font-size:15px;line-height:1.6;margin:6px 0 12px;color:var(--dark)}
.story-card__links{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.story-card__links a{display:block;text-decoration:none;color:var(--dark);font-weight:600;background:transparent;padding:0;border:none;transition:color .12s ease}
.story-card__links a .label{font-weight:600;color:rgba(42,37,27,0.75);margin-right:6px}
.story-card__links a .value{font-weight:700;text-transform:uppercase;color:var(--dark);text-decoration:none}
.story-card__links a:hover .value,.story-card__links a:focus .value{text-decoration:underline}
.story-card__links a.read{color:var(--dark)}
.summary-label{color:var(--gold)}
/* accessibility: visible focus ring for link values */
.story-card__links a:focus{outline:2px solid rgba(211,174,55,0.12);outline-offset:3px;border-radius:6px}

@media (max-width:880px){
  .story-cards{grid-template-columns:1fr}
  .story-card{flex-direction:column}
}

/* Footer */
.site-footer{border-top:1px solid rgba(42,37,27,0.06);padding:18px 0;background:transparent}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

/* Accessibility & Helpers */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Responsive */
@media (max-width:880px){
  .nav-list{display:none;position:absolute;right:12px;top:72px;background:var(--bg);padding:12px;border-radius:10px;box-shadow:0 10px 30px rgba(42,37,27,0.06)}
  .nav-list li{padding:8px 0}
  .nav.open .nav-list{display:flex;flex-direction:column;min-width:180px}

  /* Provide breathing room at the edges on small screens */
  .header-inner{padding:18px 12px}
  .logo{padding-left:6px}
  .nav-toggle{display:block;margin-left:auto;padding-right:6px}
  .hero{padding:56px 0}
  /* Stack hero vertically on smaller screens and show illustration above headings */
  .hero-inner{flex-direction:column-reverse;align-items:center;gap:20px}
  .hero__content{width:100%;text-align:center}
  /* Center the decorative sub icon when the content is centered on small screens */
  .hero__content .sub{padding-left:0}
  .hero__content .sub::before{left:50%;transform:translate(-50%,-50%)}
  .hero__image{display:block;max-width:220px;width:60%;height:auto;margin:0 0 20px;filter:drop-shadow(0 10px 30px rgba(42,37,27,0.06));}

  .feature-cards{grid-template-columns:repeat(2,1fr)}
  .footer-inner{flex-direction:column;gap:8px}
}

@media (max-width:480px){
  .hero{padding:44px 0}
  .hero-inner{padding:0 6px}
  .feature-cards{grid-template-columns:1fr}
}

/* faint paper texture overlay */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 10% 10%, rgba(211,174,55,0.02) 0%, transparent 15%),
    radial-gradient(circle at 80% 80%, rgba(42,37,27,0.02) 0%, transparent 18%),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.012) 0px, rgba(0,0,0,0.012) 1px, transparent 1px, transparent 8px);
  background-size: cover;
  opacity: 0.85;
  mix-blend-mode: multiply;
}

/* small decorative accent for an 'old-fashioned' touch */
.header-inner::after{content:'';position:absolute;left:50%;transform:translateX(-50%);height:1px;width:80%;opacity:.02;background:linear-gradient(90deg, transparent, var(--gold), transparent);pointer-events:none}

/* About page sidebar */
.about-layout{display:flex;max-width:var(--max-width);margin:36px auto;padding:0 20px;gap:32px;align-items:flex-start}
/* Remove left padding so menu text aligns with the .logo__text (both sit at the container's left inset) */
/* Remove background color so sidebar sits seamlessly on the page; border removed for a cleaner look */
.sidebar{width:260px;background:transparent;padding:20px 20px 20px 0;border-radius:12px;border:none;color:var(--dark);flex-shrink:0}
.sidebar .menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
/* remove left inset on menu items so their text sits flush with container padding */
.sidebar .menu a{display:block;padding:10px 12px 10px 0;border-radius:8px;color:var(--dark);text-decoration:none;font-weight:600}
/* About is slightly larger; summary items are smaller and indented */
.sidebar .menu > li > a.active{color:var(--gold);font-weight:700;font-size:1.05rem}
.sidebar .menu .summary{list-style:none;margin:6px 0 0;padding-left:14px}
.sidebar .menu .summary a{display:block;padding:6px 0;color:rgba(42,37,27,0.85);font-size:13px;font-weight:500;text-decoration:none}

/* small toggle button (hidden on desktop) */
.summary-toggle{display:none;background:none;border:0;padding:6px;cursor:pointer;color:var(--dark);border-radius:6px}
.summary-toggle .chev{display:inline-block;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease}
.summary-toggle[aria-expanded="true"] .chev{transform:rotate(135deg)}

/* layout for about header */
.about-header{display:flex;align-items:center;gap:8px;justify-content:space-between}
.features-header{display:flex;align-items:center;gap:8px;justify-content:space-between}
.models-header{display:flex;align-items:center;gap:8px;justify-content:space-between}
.stories-header{display:flex;align-items:center;gap:8px;justify-content:space-between} 

/* mobile: show toggle, collapse summary by default */
@media (max-width:880px){
  .summary-toggle{display:inline-flex}
  .sidebar .menu{flex-direction:row;gap:12px}
  .sidebar .menu .summary{display:none;position:relative;background:transparent;padding-left:0;margin-top:8px}
  .toc-about.expanded .summary{display:block}
  .toc-features.expanded .summary{display:block}
  .toc-models.expanded .summary{display:block}
  .toc-stories.expanded .summary{display:block} 
  .sidebar .menu .summary a{padding:8px 12px;border-radius:8px}
  .sidebar .menu{align-items:flex-start}
  .about-header{width:100%}
  .stories-header{width:100%}
} 
.sidebar .menu a:hover,.sidebar .menu a:focus{color:var(--gold);background:transparent;outline:none}
/* keyboard focus visible support */
.sidebar .menu a:focus-visible{outline:2px solid rgba(211,174,55,0.14);outline-offset:3px;border-radius:6px}
.about-content{flex:1;background:transparent;padding:8px 0}

/* Paragraph sizing for About & Features — increase for readability (smaller than H2, larger than previous)
   Note: This affects all <p> inside .about-content */
.about-content p{
  font-size:17px;
  line-height:1.75;
  color:inherit;
  margin-bottom:12px;
}

/* Heading separators in About page — insert a thin rule after the last paragraph of each section */
.about-content .heading-separator{
  height:1px;
  background: linear-gradient(90deg, rgba(211,174,55,0.06), rgba(139,58,58,0.04));
  margin: 18px 0;
  pointer-events: none;
}

/* About page H2 headings with icons */
.about-content h2{
  display:flex;
  align-items:center;
  gap:12px;
  font-family: 'Sulphur Point', 'Playfair Display', serif;
  font-size: clamp(20px, 2.2vw, 28px);
  margin:18px 0 8px;
  color:var(--gold);
  position:relative;
  font-weight:700;
}

/* Model icon sizing and alignment */
.model-icon{
  width:40px;
  height:auto;
  flex:0 0 40px;
  display:block;
}
.about-content h2::after{
  content: '';
  position:absolute;
  left:0;
  bottom:-10px;
  width:44px;
  height:6px;
  background: currentColor;
  opacity:0.12;
  border-radius:3px;
}
/* Alternate accent for specific sections */
#privacy, #best-practices, #rag, #multi-modal-chat, #deepseek, #gemini{
  color:var(--burgundy);
}

.about-content h2 .h2-icon,
.about-content h2 img.h2-icon{
  width:1.25em;
  height:1.25em;
  display:inline-block;
  vertical-align:middle;
  filter: drop-shadow(0 2px 6px rgba(42,37,27,0.06));
  opacity:0.98;
  mix-blend-mode: multiply;
}

/* Links & inline accents in About content */
.about-content a{
  color:var(--gold);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color: rgba(211,174,55,0.14);
}
.about-content a:hover, .about-content a:focus{
  color:var(--burgundy);
  text-decoration-color: rgba(139,58,58,0.14);
}

/* Lead note accent */
.lead-note{
  color:var(--burgundy);
  background: linear-gradient(90deg, rgba(139,58,58,0.03), transparent);
  padding:10px;
  border-radius:8px;
  display:inline-block;
  margin-top:12px;
}

/* Small accent for the intro paragraph */
.about-content > p:first-of-type{
  border-left:4px solid rgba(211,174,55,0.14);
  padding-left:14px;
  margin-left:0;
  border-radius:4px;
  background: rgba(211,174,55,0.01);
}

@media (max-width:880px){
  .about-layout{flex-direction:column;padding:0 12px}
  .sidebar{width:100%;display:flex;overflow:auto}
  .sidebar .menu{flex-direction:row;gap:12px;align-items:flex-start}
  /* summary hidden by default on mobile, revealed when expanded */
  .toc-about .summary{display:none}
  .toc-features .summary{display:none}
  .toc-models .summary{display:none}
  .toc-stories .summary{display:none}
  .toc-about.expanded .summary{display:block}
  .toc-features.expanded .summary{display:block}
  .toc-models.expanded .summary{display:block}
  .toc-stories.expanded .summary{display:block}
  /* restore comfortable horizontal padding for touch on narrow screens */
  .sidebar .menu a{white-space:nowrap;padding:10px 12px}
}