/* ===========================================================
   The Pedagogy of Remembering — book page
   Palette keyed to the book cover (per Jeewan / Brian, 2026-06-25)
   Reuses styles.css for nav, footer, back-to-top, container.
   =========================================================== */

:root {
    --por-parchment:        #e4d3bd;   /* cover paper (band background) */
    --por-parchment-deep:   #e3d3ae;   /* deeper paper */
    --por-parchment-light:  #f4ecda;   /* light parchment (page background) */
    --por-card:             #fbf5e8;   /* card / panel */
    --por-blue:             #256487;   /* REMEMBERING + author name */
    --por-blue-deep:        #1d4f6b;
    --por-brown:            #916a43;   /* "The Pedagogy of" + eyebrow labels */
    --por-text:             #2f5562;   /* body text (spiral dark teal) */
    --por-text-soft:        #4a6b6f;
    --por-amber:            #c8883e;   /* primary CTA */
    --por-gold:             #e3b856;   /* CTA hover / highlight */
    --por-pale:             #eee29b;   /* pale spiral yellow */
    --por-green:            #435937;   /* spiral green */
    --por-teal:             #495e59;   /* spiral teal */
    --por-tan:              #ae7b46;   /* spiral tan */
    --por-line:             rgba(145,106,67,0.22);
}

/* ---------- page base ---------- */
body.por-page {
    background-color: var(--por-parchment-light);
    color: var(--por-text);
    font-family: var(--font-primary);
}

.por-page .container { max-width: 1100px; }

.por-section { padding: 5rem 0; }
.por-section.tight { padding: 3.5rem 0; }
.por-band { background: var(--por-parchment); }
.por-band-deep {
    background: linear-gradient(160deg, var(--por-teal) 0%, var(--por-green) 100%);
    color: #f4ecda;
}

.por-narrow { max-width: 760px; margin: 0 auto; }

/* eyebrow label */
.por-eyebrow {
    font-family: var(--font-secondary);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--por-brown);
    margin-bottom: 1rem;
    display: inline-block;
}
.por-band-deep .por-eyebrow { color: var(--por-pale); }

/* headings */
.por-page h1, .por-page h2, .por-page h3, .por-page h4 {
    font-family: var(--font-primary);
    color: var(--por-blue);
    line-height: 1.25;
    font-weight: 400;
}
.por-h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 1.5rem; }
.por-band-deep .por-h2 { color: #f7efdc; }
.por-h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--por-brown); margin: 1.75rem 0 0.75rem; }

.por-page p {
    font-size: 1.14rem;
    line-height: 1.75;
    margin-bottom: 1.25rem;
    color: var(--por-text);
}
.por-band-deep p { color: #eee1c8; }
.por-lead { font-size: 1.28rem; line-height: 1.7; color: var(--por-text); }
.por-page strong { color: var(--por-blue-deep); font-weight: 600; }
.por-band-deep strong { color: #fff; }

/* litany / stacked short lines */
.por-litany p { margin-bottom: 0.55rem; }

/* ---------- buttons ---------- */
.por-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 1.05rem;
    padding: 0.95rem 1.9rem;
    border-radius: 50px;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition-smooth);
}
.por-btn .por-arrow { transition: transform 0.3s ease; }
.por-btn:hover .por-arrow { transform: translateX(5px); }

.por-btn-primary { background: var(--por-amber); color: #fff; box-shadow: var(--shadow-sm); }
.por-btn-primary:hover { background: var(--por-gold); color: #3a2a12; box-shadow: var(--shadow-md); transform: translateY(-2px); }

.por-btn-secondary { background: transparent; color: var(--por-blue); border-color: var(--por-blue); }
.por-btn-secondary:hover { background: var(--por-blue); color: #f4ecda; }

.por-band-deep .por-btn-secondary { color: #f4ecda; border-color: #f4ecda; }
.por-band-deep .por-btn-secondary:hover { background: #f4ecda; color: var(--por-green); }

.por-btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }

/* ---------- HERO ---------- */
.por-hero {
    position: relative;
    overflow: hidden;
    padding: 8rem 0 5rem;
    background:
        radial-gradient(ellipse at 70% 50%, rgba(227,184,86,0.10), transparent 60%),
        var(--por-parchment-light);
}
.por-hero::before {
    content: "";
    position: absolute;
    right: -8%;
    top: 50%;
    transform: translateY(-50%);
    width: 720px; height: 720px;
    background: url("assets/book/pedagogy-cover-web.jpg") center/contain no-repeat;
    opacity: 0.06;
    filter: blur(2px);
    pointer-events: none;
}
.por-hero .container { position: relative; z-index: 2; }
.por-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3.5rem;
    align-items: center;
}
.por-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.2rem);
    margin: 0.5rem 0 0.5rem;
    color: var(--por-blue);
    letter-spacing: -0.01em;
}
.por-hero h1 .por-of { color: var(--por-brown); font-style: italic; font-size: 0.62em; display: block; }
.por-hero-sub {
    font-size: clamp(1.2rem, 2.6vw, 1.7rem);
    font-style: italic;
    color: var(--por-brown);
    margin-bottom: 1.5rem;
}
.por-hero-text { font-size: 1.22rem; line-height: 1.7; max-width: 34rem; }
.por-formats {
    font-family: var(--font-secondary);
    font-size: 0.92rem;
    color: var(--por-text-soft);
    margin-top: 1.4rem;
}

/* cover + seal */
.por-cover-wrap { position: relative; display: flex; justify-content: center; }
.por-cover {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 340px;
    border-radius: 6px;
    box-shadow: 0 24px 60px rgba(47,85,98,0.35);
    transform: rotate(-2deg);
    transition: transform 0.5s var(--transition-smooth, ease);
}
.por-cover:hover { transform: rotate(0deg) scale(1.02); }
.por-seal {
    position: absolute;
    z-index: 3;
    width: 130px; height: 130px;
    right: -10px; top: -28px;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.25));
    animation: por-seal-in 0.8s var(--transition-bounce, ease) both;
}
@keyframes por-seal-in { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: scale(1) rotate(-8deg); opacity: 1; } }

/* bestseller inline pill */
.por-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--por-blue);
    color: #f4ecda;
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    padding: 0.45rem 1rem;
    border-radius: 50px;
}
.por-pill::before { content: "★"; color: var(--por-gold); }

/* ---------- AT A GLANCE ---------- */
.por-glance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.por-glance-card {
    background: var(--por-card);
    border: 1px solid var(--por-line);
    border-radius: 12px;
    padding: 1.5rem;
}
.por-glance-card .k {
    font-family: var(--font-secondary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--por-brown);
    margin-bottom: 0.5rem;
}
.por-glance-card .v { font-size: 1.05rem; color: var(--por-text); line-height: 1.5; }
.por-glance-card.themes { grid-column: 1 / -1; }
.por-theme-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.por-theme-tags span {
    font-family: var(--font-secondary);
    font-size: 0.85rem;
    background: var(--por-parchment);
    color: var(--por-text);
    padding: 0.35rem 0.8rem;
    border-radius: 50px;
    border: 1px solid var(--por-line);
}

/* ---------- QUOTE CAROUSEL ---------- */
.por-carousel { position: relative; max-width: 820px; margin: 2rem auto 0; }
.por-quotes { position: relative; min-height: 180px; }
.por-quote {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    opacity: 0; transition: opacity 0.6s ease;
    pointer-events: none;
}
.por-quote.active { opacity: 1; pointer-events: auto; position: relative; }
.por-quote p {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-style: italic;
    color: #f7efdc;
    line-height: 1.5;
    max-width: 38rem;
    margin: 0;
}
.por-quote p::before { content: "\201C"; }
.por-quote p::after  { content: "\201D"; }
.por-carousel-dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; }
.por-dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: rgba(244,236,218,0.35); border: none; cursor: pointer; padding: 0;
    transition: background 0.3s ease, transform 0.3s ease;
}
.por-dot.active { background: var(--por-gold); transform: scale(1.2); }

/* ---------- ORDER ---------- */
.por-order-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.por-order-card {
    background: var(--por-card);
    border: 1px solid var(--por-line);
    border-radius: 14px;
    padding: 2rem 1.5rem;
    text-align: center;
}
.por-order-card h3 { color: var(--por-blue); margin: 0 0 0.5rem; }
.por-order-card .status { font-family: var(--font-secondary); font-size: 0.95rem; color: var(--por-text-soft); margin-bottom: 1.25rem; }
.por-order-card.live { border-color: var(--por-amber); box-shadow: var(--shadow-sm); }

/* ---------- COMMUNITY FORM ---------- */
.por-form { max-width: 520px; margin: 2rem auto 0; }
.por-form .field { margin-bottom: 1.25rem; text-align: left; }
.por-form label {
    display: block;
    font-family: var(--font-secondary);
    font-weight: 600; font-size: 0.9rem;
    color: #f4ecda; margin-bottom: 0.4rem;
}
.por-form input {
    width: 100%;
    padding: 0.9rem 1.1rem;
    border-radius: 10px;
    border: 1px solid rgba(244,236,218,0.4);
    background: rgba(255,255,255,0.95);
    font-family: var(--font-secondary);
    font-size: 1rem;
    color: #2f5562;
}
.por-form input:focus { outline: 2px solid var(--por-gold); border-color: var(--por-gold); }
.por-form .por-btn { width: 100%; justify-content: center; margin-top: 0.5rem; }
.por-form-privacy { font-family: var(--font-secondary); font-size: 0.82rem; color: #d9cdb0; margin-top: 1rem; text-align: center; }

/* ---------- FAQ ACCORDION ---------- */
.por-faq { max-width: 800px; margin: 2rem auto 0; }
.por-faq-item { border-bottom: 1px solid var(--por-line); }
.por-faq-q {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    font-family: var(--font-primary); font-size: 1.18rem; color: var(--por-blue);
    padding: 1.4rem 2.5rem 1.4rem 0; position: relative;
}
.por-faq-q::after {
    content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
    font-size: 1.6rem; color: var(--por-brown); transition: transform 0.3s ease;
}
.por-faq-item.open .por-faq-q::after { transform: translateY(-50%) rotate(45deg); }
.por-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.por-faq-a-inner { padding: 0 0 1.4rem; }
.por-faq-a p { margin-bottom: 0.75rem; }

/* ---------- CLOSING BLESSING ---------- */
.por-blessing {
    font-style: italic;
    font-size: clamp(1.2rem, 2.6vw, 1.55rem);
    color: var(--por-pale);
    text-align: center;
    max-width: 40rem;
    margin: 2.5rem auto 0;
    line-height: 1.6;
}

/* ---------- nav tweak for book page (keeps site shell) ---------- */
.por-page .nav-cta { background: var(--por-amber); }
.por-page .nav-cta:hover { background: var(--por-gold); color: #3a2a12; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
    .por-hero { padding: 7rem 0 3.5rem; }
    .por-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
    .por-hero-text { margin: 0 auto; }
    .por-btn-row { justify-content: center; }
    .por-cover-wrap { order: -1; }
    .por-seal { width: 100px; height: 100px; right: 4%; top: -22px; }
    .por-hero::before { display: none; }
}
@media (max-width: 600px) {
    .por-section { padding: 3.5rem 0; }
    .por-btn { width: 100%; justify-content: center; }
}