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

    :root {
      --cream: #FAF7F2;
      --warm-white: #FFFDF9;
      --blush: #E8C4B0;
      --dusty-rose: #C8876A;
      --deep-rose: #9B4F3A;
      --bark: #5C3D2E;
      --text: #2E1F17;
      --text-light: #7A5C4E;
      --border: #E2D5CC;
      --gold: #C5A267;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'DM Sans', sans-serif;
      background-color: var(--cream);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* ── HERO ── */
    .hero {
      min-height: 100vh;
      background: linear-gradient(160deg, #2E1F17 0%, #5C3D2E 50%, #8B5A3E 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 24px;
      position: relative;
      overflow: hidden;
      text-align: center;
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      pointer-events: none;
    }

    .hero-logo {
      width: min(340px, 80vw);
      margin-bottom: 40px;
      animation: fadeDown 1s ease both;
    }

    .hero-tagline {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.1rem, 3vw, 1.5rem);
      font-style: italic;
      color: var(--blush);
      max-width: 600px;
      line-height: 1.7;
      animation: fadeUp 1s ease 0.3s both;
    }

    .hero-tagline cite {
      display: block;
      font-style: normal;
      font-size: 0.85em;
      color: var(--gold);
      margin-top: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .hero-scroll {
      position: absolute;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      animation: bounce 2s infinite;
      color: var(--blush);
      opacity: 0.6;
      font-size: 1.5rem;
    }

    /* ── INTRO ── */
    .intro {
      background: var(--warm-white);
      padding: 80px 24px;
    }

    .container {
      max-width: 860px;
      margin: 0 auto;
    }

    .section-label {
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      font-weight: 500;
      margin-bottom: 16px;
    }

    .intro .section-label { color: var(--gold); }
    

    .intro h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 500;
      color: var(--bark);
      margin-bottom: 28px;
      line-height: 1.2;
    }

    .intro p {
      color: var(--text-light);
      max-width: 680px;
      margin-bottom: 18px;
    }

    .payment-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 32px;
      align-items: center;
    }

    .payment-strip span {
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-light);
    }

    .payment-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .pill {
      background: var(--cream);
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 5px 14px;
      font-size: 0.8rem;
      color: var(--bark);
      font-weight: 500;
    }

    .deposit-note {
      margin-top: 28px;
      padding: 18px 24px;
      border-left: 3px solid var(--gold);
      background: #FFF8F0;
      border-radius: 0 8px 8px 0;
      font-size: 0.95rem;
      color: var(--text-light);
    }

    .deposit-note strong { color: var(--bark); }

    .genre-note {
      margin-top: 20px;
      padding: 18px 24px;
      border-left: 3px solid var(--dusty-rose);
      background: #FFF8F5;
      border-radius: 0 8px 8px 0;
      font-size: 0.95rem;
      color: var(--text-light);
    }

    /* ── SERVICES ── */
    .services {
      background: var(--cream);
      padding: 80px 24px;
    }

    .services h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      font-weight: 500;
      color: var(--bark);
      margin-bottom: 48px;
      line-height: 1.2;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 28px;
    }

    .service-card {
      background: var(--warm-white);
      border-radius: 16px;
      padding: 36px 28px;
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .service-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 48px rgba(92,61,46,0.12);
    }

    .service-card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--dusty-rose), var(--gold));
    }

    .service-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 3.5rem;
      font-weight: 300;
      color: var(--border);
      line-height: 1;
      margin-bottom: 16px;
    }

    .service-card h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.6rem;
      font-weight: 600;
      color: var(--bark);
      margin-bottom: 12px;
    }

    .service-card p {
      font-size: 0.92rem;
      color: var(--text-light);
      line-height: 1.65;
      margin-bottom: 18px;
    }

    .turnaround {
      display: inline-block;
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--dusty-rose);
      font-weight: 500;
      border-top: 1px solid var(--border);
      padding-top: 14px;
      width: 100%;
    }

    /* ── EDITORS ── */
    .editors {
      background: linear-gradient(135deg, #2E1F17 0%, #4A2E22 100%);
      padding: 80px 24px;
    }

    .editors h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      font-weight: 500;
      color: var(--cream);
      margin-bottom: 48px;
    }

    .editors-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 36px;
      margin-bottom: 48px;
    }

    .editor-card {
      display: flex;
      gap: 24px;
      align-items: flex-start;
    }

    .editor-img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid var(--gold);
      flex-shrink: 0;
    }

    .editor-info h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.6rem;
      font-weight: 600;
      color: var(--blush);
      margin-bottom: 8px;
    }

    .editor-info p {
      font-size: 0.9rem;
      color: rgba(250,247,242,0.7);
      line-height: 1.65;
    }

    .editors-collab {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(197,162,103,0.3);
      border-radius: 16px;
      padding: 28px 32px;
      font-size: 0.95rem;
      color: rgba(250,247,242,0.75);
      line-height: 1.7;
    }

    /* ── PORTFOLIO ── */
    .portfolio {
      background: var(--warm-white);
      padding: 80px 24px;
    }

    .portfolio h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      font-weight: 500;
      color: var(--bark);
      margin-bottom: 48px;
    }

    .books-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 24px;
    }

    .book-item {
      border-radius: 10px;
      overflow: hidden;
      aspect-ratio: 2/3;
      box-shadow: 0 6px 24px rgba(92,61,46,0.15);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      cursor: pointer;
    }

    .book-item:hover {
      transform: translateY(-6px) rotate(1deg);
      box-shadow: 0 18px 48px rgba(92,61,46,0.22);
    }

    .book-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ── CONTACT ── */
    .contact {
      background: var(--cream);
      padding: 80px 24px;
    }

    .contact h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 5vw, 3.2rem);
      font-weight: 500;
      color: var(--bark);
      margin-bottom: 12px;
    }

    .contact .lead {
      font-size: 1.05rem;
      color: var(--text-light);
      margin-bottom: 40px;
    }

    .contact-form {
      display: grid;
      gap: 20px;
      max-width: 620px;
    }

    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    @media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }

    .form-field {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .form-field label {
      font-size: 0.78rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-light);
      font-weight: 500;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
      background: var(--warm-white);
      border: 1.5px solid var(--border);
      border-radius: 8px;
      padding: 12px 16px;
      font-size: 0.95rem;
      font-family: 'DM Sans', sans-serif;
      color: var(--text);
      transition: border-color 0.2s;
      outline: none;
    }

    .form-field input:focus,
    .form-field select:focus,
    .form-field textarea:focus {
      border-color: var(--dusty-rose);
    }

    .form-field textarea {
      resize: vertical;
      min-height: 140px;
    }

    .submit-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, var(--deep-rose), var(--dusty-rose));
      color: white;
      border: none;
      border-radius: 100px;
      padding: 16px 40px;
      font-size: 0.9rem;
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      transition: opacity 0.2s, transform 0.2s;
      width: fit-content;
    }

    .submit-btn:hover {
      opacity: 0.9;
      transform: translateY(-2px);
    }

    /* ── FOOTER ── */
    footer {
      background: var(--text);
      padding: 32px 24px;
      text-align: center;
      font-size: 0.82rem;
      color: rgba(250,247,242,0.4);
      letter-spacing: 0.06em;
    }

    /* ── DIVIDER ── */
    .ornament {
      text-align: center;
      color: var(--gold);
      font-size: 1.4rem;
      margin: 0 0 40px;
      opacity: 0.5;
    }

    /* ── ANIMATIONS ── */
    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes bounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50%       { transform: translateX(-50%) translateY(8px); }
    }

    /* ── FADE-IN ON SCROLL ── */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }