/* ============================================================
Silent to Spoken: The Way — v2 (warmer, more visual)
Shared stylesheet for /blog/the-way and /the-way/thank-you
Rose: #C4566E Ink: #2B2A28 Muted: #8A8079
Hair: #E7DDD4 Cream:#FBF8F3 Body: #4A4643
Blush: #FDF1F4 → #F9E4E9 Arrow: #E8B04A (soft gold)
Body serif: Georgia Label sans: Helvetica
============================================================ */
:root {
--jjw-rose: #C4566E;
--jjw-rose-soft: #E88EA3;
--jjw-rose-wash: #FBEEF1;
--jjw-ink: #2B2A28;
--jjw-muted: #8A8079;
--jjw-hair: #E7DDD4;
--jjw-cream: #FBF8F3;
--jjw-body: #4A4643;
--jjw-blush-1: #FDF1F4;
--jjw-blush-2: #F9E4E9;
--jjw-arrow: #E8B04A;
--jjw-arrow-soft:#F4D68A;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--jjw-cream);
color: var(--jjw-ink);
font-family: Georgia, 'Times New Roman', serif;
font-size: 17px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--jjw-rose); }
a:focus-visible { outline: 2px solid var(--jjw-rose); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; height: auto; display: block; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: 2px solid var(--jjw-rose); outline-offset: 2px;
}
/* ---------- Top banner + nav ---------- */
.tw-top-banner {
padding: 18px 16px; text-align: center;
background: #FFF6EE; border-bottom: 1px solid var(--jjw-hair);
font-family: Helvetica, Arial, sans-serif;
}
.tw-top-banner-label { font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--jjw-ink); }
.tw-top-banner-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 40px; margin-top: 8px; font-family: Georgia, serif; }
.tw-top-banner-num { font-weight: 600; font-size: 28px; color: var(--jjw-ink); }
.tw-top-banner-sub { font-style: italic; font-size: 15px; color: var(--jjw-muted); }
.tw-nav {
background: #fff; border-bottom: 1px solid var(--jjw-hair);
padding: 16px 20px;
position: sticky; top: 0; z-index: 30;
}
.tw-nav-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.tw-nav-brand {
display: inline-flex; align-items: center; gap: 10px;
font-family: Georgia, serif; font-size: 20px; color: var(--jjw-ink); text-decoration: none;
}
.tw-nav-brand em { color: var(--jjw-rose); font-style: italic; font-weight: 400; }
.tw-nav-brand img { width: 34px; height: 34px; border-radius: 999px; }
.tw-nav-links {
list-style: none; margin: 0 0 0 auto; padding: 0;
display: flex; flex-wrap: wrap; gap: 6px 22px;
font-family: Helvetica, Arial, sans-serif; font-size: 13px; letter-spacing: .04em;
}
.tw-nav-links a { color: var(--jjw-ink); text-decoration: none; }
.tw-nav-links a:hover { color: var(--jjw-rose); }
.tw-nav-links a em { color: var(--jjw-rose); font-style: italic; }
@media (max-width: 720px) {
.tw-nav-inner { flex-wrap: wrap; }
.tw-nav-links { width: 100%; margin-left: 0; justify-content: center; padding-top: 8px; }
}
/* ============================================================
HERO — soft rose gradient band at the top of every letter
============================================================ */
.tw-hero {
background:
radial-gradient(900px 480px at 20% 0%, rgba(232,144,163,.22), transparent 60%),
radial-gradient(700px 420px at 90% 100%, rgba(232,144,163,.28), transparent 55%),
linear-gradient(160deg, var(--jjw-blush-1) 0%, var(--jjw-blush-2) 100%);
padding: 4rem 1.5rem 3.6rem;
text-align: center;
border-bottom: 1px solid rgba(232,86,110,.10);
}
.tw-hero__series {
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
font-size: .68rem; font-weight: 700; letter-spacing: .28em;
text-transform: uppercase;
color: var(--jjw-rose);
padding: .35rem .9rem;
background: rgba(255,255,255,.65);
border: 1px solid rgba(196,86,110,.28);
border-radius: 999px;
margin: 0 0 1.4rem;
}
.tw-hero__series a { color: inherit; text-decoration: none; }
.tw-hero__title {
font-family: Georgia, serif; font-weight: 400;
font-size: clamp(2.1rem, 7.8vw, 3.4rem); line-height: 1.1;
color: var(--jjw-ink);
max-width: 30rem; margin: 0 auto .8rem;
letter-spacing: -.005em;
}
.tw-hero__title em {
display: block;
font-style: italic;
color: var(--jjw-rose);
font-weight: 400;
}
.tw-hero__theme {
font-family: Georgia, serif; font-style: italic;
font-size: clamp(1.15rem, 3.6vw, 1.35rem);
color: var(--jjw-body);
max-width: 32rem; margin: 1.2rem auto 0;
line-height: 1.5;
}
.tw-hero__date {
font-family: Helvetica, Arial, sans-serif;
font-size: .7rem; font-weight: 700; letter-spacing: .2em;
text-transform: uppercase; color: var(--jjw-muted);
margin: 2rem 0 0;
}
.tw-hero__date::before, .tw-hero__date::after {
content: "·"; margin: 0 .8rem; color: var(--jjw-rose); font-size: 1.1rem;
}
/* ============================================================
ARTICLE — the reading column
============================================================ */
.tw-article {
max-width: 34rem;
margin: 0 auto;
padding: 3rem 1.5rem 1rem;
color: var(--jjw-body);
}
.tw-article p { margin: 0 0 1.2rem; font-size: 1.06rem; line-height: 1.78; }
/* Lead paragraph with drop cap */
.tw-article p.tw-lead { font-size: 1.2rem; line-height: 1.7; color: var(--jjw-ink); }
.tw-drop {
float: left;
font-family: Georgia, serif;
font-size: 4.2rem;
line-height: .9;
color: var(--jjw-rose);
padding: .35rem .6rem 0 0;
margin: .05rem 0 0;
font-weight: 400;
}
@media (max-width: 460px) { .tw-drop { font-size: 3.4rem; padding-right: .4rem; } }
/* Section headings inside articles */
.tw-article h2 {
font-family: Georgia, serif; font-weight: 400;
font-size: clamp(1.5rem, 4.6vw, 1.85rem); line-height: 1.2;
color: var(--jjw-ink);
margin: 2.8rem 0 1rem;
letter-spacing: -.005em;
}
.tw-article h3 {
font-family: Georgia, serif; font-weight: 400;
font-size: 1.32rem; line-height: 1.3; color: var(--jjw-ink);
margin: 2rem 0 .6rem;
}
.tw-article ul { padding-left: 1.2rem; margin: 1rem 0 1.4rem; }
.tw-article ul li { margin: 0 0 .6rem; font-size: 1.02rem; line-height: 1.75; }
.tw-article ul li::marker { color: var(--jjw-rose); }
/* Camino arrow ornament divider (yellow) */
.tw-arrow {
display: block; margin: 3rem auto; text-align: center;
color: var(--jjw-arrow);
line-height: 0;
}
.tw-arrow svg { width: 44px; height: 22px; display: inline-block; }
/* Section labels above named blocks */
.tw-section-label {
display: flex; align-items: center; gap: .7rem;
font-family: Helvetica, Arial, sans-serif;
font-size: .7rem; font-weight: 700; letter-spacing: .22em;
text-transform: uppercase; color: var(--jjw-rose);
margin: 2.6rem 0 .6rem;
}
.tw-section-label::before {
content: ""; flex: 0 0 24px; height: 2px; background: var(--jjw-rose);
}
/* ============================================================
FEATURE BLOCKS — Camino History / Did You Know / Scripture /
Dig Deeper / Prayer / Reflection / Challenge / Tomorrow
============================================================ */
/* Camino History — cream card with rose left border */
.tw-block-history {
background: #fff;
border: 1px solid var(--jjw-hair);
border-left: 4px solid var(--jjw-rose);
border-radius: 10px;
padding: 1.8rem 1.8rem 1rem;
margin: 2rem 0;
}
.tw-block-history .tw-section-label { margin-top: 0; }
.tw-block-history p { font-size: 1.02rem; }
/* Did You Know — parchment-ish card with dashed border and rose tag */
.tw-didyouknow {
position: relative;
background: linear-gradient(180deg, #FFFDF7 0%, #FDF7E9 100%);
border: 1px dashed rgba(232,176,74,.55);
border-radius: 12px;
padding: 2rem 1.8rem 1.2rem;
margin: 2.2rem 0;
}
.tw-didyouknow::before {
content: "Did You Know";
position: absolute; top: -.65rem; left: 1.4rem;
background: var(--jjw-arrow);
color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
padding: .28rem .7rem .3rem; border-radius: 999px;
}
.tw-didyouknow p { font-size: 1rem; line-height: 1.7; }
.tw-didyouknow p:last-child { margin-bottom: 0; }
.tw-didyouknow .tw-section-label { display: none; }
/* Scripture Study — soft rose-wash card with quote treatment */
.tw-block-scripture {
background: var(--jjw-rose-wash);
border-radius: 12px;
padding: 1.8rem 1.8rem 1.4rem;
margin: 2rem 0;
}
.tw-block-scripture .tw-section-label { margin-top: 0; }
.tw-scripture-ref {
font-family: Helvetica, Arial, sans-serif;
font-weight: 700; font-size: .78rem;
letter-spacing: .16em; text-transform: uppercase;
color: var(--jjw-rose);
margin: 0 0 .6rem;
}
.tw-scripture-passage {
font-family: Georgia, serif;
font-style: italic;
font-size: 1.08rem; line-height: 1.75;
padding: 1rem 1.2rem;
background: #fff;
border-left: 3px solid var(--jjw-rose);
border-radius: 6px;
color: var(--jjw-ink);
margin: 0 0 1.2rem;
}
.tw-block-scripture p { font-size: 1.02rem; }
.tw-block-scripture p:last-child { margin-bottom: 0; }
/* Dig Deeper — muted card */
.tw-block-dig {
background: #FCFAF6;
border: 1px solid var(--jjw-hair);
border-radius: 10px;
padding: 1.6rem 1.8rem 1rem;
margin: 2rem 0;
}
.tw-block-dig .tw-section-label { margin-top: 0; }
/* Prayer — cream card, italic body, rose border, small cross ornament */
.tw-prayer {
background: #fff;
border: 1px solid rgba(196,86,110,.28);
border-radius: 12px;
padding: 2rem 1.9rem;
margin: 2rem 0;
position: relative;
font-style: italic;
color: var(--jjw-body);
line-height: 1.75;
}
.tw-prayer::before {
content: "";
position: absolute; top: -.7rem; left: 50%;
transform: translateX(-50%);
width: 1.6rem; height: 1.6rem;
background: #fff url("data:image/svg+xml;utf8,") center / 60% no-repeat;
border: 1px solid rgba(196,86,110,.35);
border-radius: 999px;
}
.tw-prayer p { margin: 0 0 .7rem; font-size: 1.02rem; }
.tw-prayer p:last-child { margin-bottom: 0; }
.tw-prayer p:first-child, .tw-prayer p:last-child {
font-family: Georgia, serif; font-style: normal;
color: var(--jjw-rose); font-weight: 700;
text-align: center;
font-size: 1rem; letter-spacing: .04em;
}
/* Reflection Questions — numbered circles */
.tw-block-reflect {
margin: 2rem 0;
}
.tw-block-reflect .tw-reflect-intro {
font-style: italic; color: var(--jjw-muted);
font-size: .98rem; margin: 0 0 1.2rem;
}
.tw-article ol.tw-reflect {
list-style: none; counter-reset: refl; padding: 0; margin: 0;
}
.tw-article ol.tw-reflect li {
position: relative;
padding: 1rem 1.1rem 1rem 3.6rem;
margin: 0 0 .8rem;
background: #fff;
border: 1px solid var(--jjw-hair);
border-radius: 10px;
counter-increment: refl;
font-size: 1.02rem;
line-height: 1.65;
color: var(--jjw-ink);
}
.tw-article ol.tw-reflect li::before {
content: counter(refl);
position: absolute;
left: 1rem; top: 50%; transform: translateY(-50%);
width: 1.8rem; height: 1.8rem;
background: var(--jjw-rose); color: #fff;
border-radius: 999px;
font-family: Helvetica, Arial, sans-serif;
font-weight: 700; font-size: .82rem;
display: flex; align-items: center; justify-content: center;
}
/* Camino Challenge — softly bordered box */
.tw-block-challenge {
background: linear-gradient(180deg, #FFFDFA 0%, #FBEEF1 100%);
border: 1px solid rgba(196,86,110,.20);
border-radius: 12px;
padding: 1.8rem 1.9rem 1.2rem;
margin: 2rem 0;
}
.tw-block-challenge .tw-section-label { margin-top: 0; color: var(--jjw-rose); }
/* Tomorrow We'll Walk — dark rose tint, forward-motion */
.tw-block-tomorrow {
background: linear-gradient(160deg, #FDF1F4 0%, #F5D4DC 100%);
border-radius: 12px;
padding: 1.8rem 1.9rem 1.3rem;
margin: 2rem 0;
position: relative;
}
.tw-block-tomorrow .tw-section-label { margin-top: 0; }
.tw-block-tomorrow::after {
content: "";
position: absolute; right: 1.6rem; bottom: 1.4rem;
width: 32px; height: 16px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
opacity: .55;
}
/* ============================================================
PULL QUOTES — centered, italic, warmer
============================================================ */
.tw-pull {
font-family: Georgia, serif; font-style: italic;
font-size: clamp(1.25rem, 3.6vw, 1.45rem); line-height: 1.5;
color: var(--jjw-ink);
text-align: center;
padding: 1.4rem 1rem;
margin: 2rem 0;
position: relative;
max-width: 30rem; margin-left: auto; margin-right: auto;
}
.tw-pull::before, .tw-pull::after {
content: ""; display: block;
width: 60px; height: 1px;
background: var(--jjw-rose);
margin: 0 auto;
opacity: .55;
}
.tw-pull::before { margin-bottom: 1rem; }
.tw-pull::after { margin-top: 1rem; }
.tw-pull-source {
display: block; margin-top: .8rem;
font-family: Helvetica, Arial, sans-serif; font-style: normal;
font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--jjw-muted);
}
/* Standalone big italic centered phrase (in-flow accent) */
.tw-emphasis {
font-family: Georgia, serif; font-style: italic;
font-size: clamp(1.35rem, 4.4vw, 1.65rem);
color: var(--jjw-rose);
text-align: center;
line-height: 1.35;
margin: 2rem 0;
padding: 0 1rem;
}
/* ============================================================
FIGURE (Letter Two photo)
============================================================ */
.tw-figure { margin: 2.4rem 0; text-align: center; }
.tw-figure img { border-radius: 10px; box-shadow: 0 8px 30px rgba(43,42,40,.12); margin: 0 auto; }
.tw-figure figcaption {
font-family: Georgia, serif; font-style: italic; font-size: .95rem;
color: var(--jjw-muted); margin-top: .8rem; line-height: 1.5;
max-width: 26rem; margin-left: auto; margin-right: auto;
}
/* ============================================================
LETTER FOUR — checkbox joke list
============================================================ */
.tw-check-list { list-style: none; padding: 0; margin: 1rem 0 1.4rem; }
.tw-check-list li {
padding: .7rem 1rem .7rem 3rem;
position: relative;
margin: 0 0 .5rem;
background: #fff;
border: 1px solid var(--jjw-hair);
border-radius: 8px;
font-family: Georgia, serif; font-size: 1.02rem; line-height: 1.55;
}
.tw-check-list li::before {
content: ""; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
width: 1.3rem; height: 1.3rem;
border: 1.5px solid var(--jjw-rose); border-radius: 4px;
background: #fff;
}
/* ============================================================
SIGNATURE
============================================================ */
.tw-signoff {
margin: 2.5rem 0 1rem;
padding: 1.4rem 0;
border-top: 1px solid var(--jjw-hair);
border-bottom: 1px solid var(--jjw-hair);
text-align: center;
}
.tw-signoff p { margin: 0 0 .4rem; }
.tw-signoff .tw-signoff-quiet {
font-family: Helvetica, Arial, sans-serif; font-size: .72rem;
letter-spacing: .22em; text-transform: uppercase; color: var(--jjw-muted);
margin: 0 0 .8rem;
}
.tw-signoff .tw-signoff-love {
font-family: Georgia, serif; font-size: 1.1rem; color: var(--jjw-ink);
}
.tw-signoff .tw-signature-name {
font-family: Georgia, serif; font-style: italic;
color: var(--jjw-rose); font-size: 1.6rem; margin-top: .3rem;
}
/* ============================================================
NAV BETWEEN LETTERS
============================================================ */
.tw-nav-letters {
display: grid; gap: .6rem; grid-template-columns: 1fr;
padding: 1.8rem 0 1.5rem;
margin: 2rem 0 0;
}
.tw-nav-letters a {
display: block;
padding: .95rem 1.2rem;
font-family: Helvetica, Arial, sans-serif; font-size: .78rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--jjw-rose); text-decoration: none;
background: #fff; border: 1px solid var(--jjw-hair); border-radius: 999px;
text-align: center;
transition: all .2s ease;
}
.tw-nav-letters a:hover { background: var(--jjw-rose); color: #fff; border-color: var(--jjw-rose); }
.tw-nav-letters .tw-nav-back { color: var(--jjw-muted); }
.tw-nav-letters .tw-nav-all {
background: var(--jjw-rose); color: #fff; border-color: var(--jjw-rose);
}
.tw-nav-letters .tw-nav-all:hover { background: var(--jjw-ink); border-color: var(--jjw-ink); }
/* ============================================================
P.S. + book plug
============================================================ */
.tw-ps {
background: var(--jjw-rose-wash);
border-radius: 12px;
padding: 1.6rem 1.8rem 1.2rem;
margin: 2rem 0 0;
font-size: .98rem; color: var(--jjw-body);
}
.tw-ps p { margin: 0 0 .8rem; font-size: .98rem; line-height: 1.65; }
.tw-ps p:last-child { margin-bottom: 0; }
.tw-ps strong {
color: var(--jjw-rose); font-family: Helvetica, Arial, sans-serif;
font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
}
/* ============================================================
WELCOME LETTER — extra CTA & list treatment
============================================================ */
.tw-welcome-cta {
text-align: center; margin: 3rem 0 1rem;
}
.tw-welcome-cta a {
display: inline-block; padding: 1.1rem 2.6rem;
background: var(--jjw-rose); color: #fff;
font-family: Helvetica, Arial, sans-serif; font-size: .82rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
border-radius: 999px; box-shadow: 0 8px 24px rgba(196,86,110,.28);
transition: transform .2s ease, box-shadow .2s ease;
}
.tw-welcome-cta a:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(196,86,110,.36);
}
/* Featured what-you-get list on the welcome letter */
.tw-feature-list {
display: grid; gap: .8rem; grid-template-columns: 1fr;
list-style: none !important; padding: 0 !important; margin: 1.4rem 0 1.6rem !important;
}
.tw-feature-list li {
background: #fff;
border: 1px solid var(--jjw-hair);
border-left: 3px solid var(--jjw-rose);
border-radius: 8px;
padding: .9rem 1.2rem;
font-size: 1rem; line-height: 1.55;
color: var(--jjw-body);
margin: 0 !important;
}
.tw-feature-list li strong {
color: var(--jjw-ink);
font-family: Georgia, serif;
font-weight: 700;
}
/* ============================================================
BEFORE YOU GO — FAQ
============================================================ */
.tw-faq {
background: #fff;
border-top: 6px solid var(--jjw-rose-wash);
padding: 3rem 1.5rem 3.5rem;
margin: 3rem 0 0;
}
.tw-faq-inner { max-width: 34rem; margin: 0 auto; }
.tw-faq-title {
font-family: Georgia, serif; font-weight: 400;
font-size: clamp(1.6rem, 4.4vw, 1.9rem); line-height: 1.2;
color: var(--jjw-ink); text-align: center; margin: 0 0 .4rem;
}
.tw-faq-title em { color: var(--jjw-rose); font-style: italic; }
.tw-faq-intro {
font-family: Georgia, serif; font-style: italic; text-align: center;
color: var(--jjw-muted); margin: 0 0 1.8rem;
}
.tw-faq details {
border: 1px solid var(--jjw-hair);
border-radius: 10px;
padding: 1rem 1.2rem;
margin: 0 0 .7rem;
background: #FDFBF7;
transition: background .2s ease;
}
.tw-faq details[open] { background: #fff; border-color: rgba(196,86,110,.32); }
.tw-faq summary {
cursor: pointer; list-style: none;
font-family: Georgia, serif; font-size: 1.06rem; line-height: 1.4;
color: var(--jjw-ink); font-weight: 700;
display: flex; justify-content: space-between; align-items: center;
gap: .8rem;
}
.tw-faq summary::-webkit-details-marker { display: none; }
.tw-faq summary::after {
content: "+"; color: var(--jjw-rose); font-weight: 400; font-size: 1.5rem; line-height: 1;
flex: 0 0 auto;
}
.tw-faq details[open] summary::after { content: "−"; }
.tw-faq details p {
margin: .8rem 0 0; font-size: 1rem; line-height: 1.7; color: var(--jjw-body);
}
/* ============================================================
REPLY FORM
============================================================ */
.jjw-reply {
background:
radial-gradient(600px 320px at 20% 20%, rgba(255,255,255,.4), transparent 55%),
linear-gradient(160deg, var(--jjw-blush-1) 0%, var(--jjw-blush-2) 100%);
padding: 3.5rem 1.5rem 3.75rem;
margin: 3rem 0 0;
text-align: center;
}
.jjw-reply__eyebrow {
font-family: Helvetica, Arial, sans-serif; font-size: .7rem; font-weight: 700;
letter-spacing: .22em; text-transform: uppercase; color: var(--jjw-rose); margin: 0 0 .9rem;
}
.jjw-reply__title {
font-family: Georgia, serif; font-weight: 400;
font-size: clamp(1.7rem, 5.5vw, 2.2rem); line-height: 1.2; color: var(--jjw-ink); margin: 0 0 .9rem;
}
.jjw-reply__title em { color: var(--jjw-rose); font-style: italic; }
.jjw-reply__note {
font-family: Georgia, serif; font-size: 1rem; line-height: 1.65; color: var(--jjw-body);
max-width: 28rem; margin: 0 auto 2rem;
}
.jjw-reply__form {
max-width: 30rem; margin: 0 auto; text-align: left;
background: #fff;
padding: 1.8rem 1.6rem;
border-radius: 14px;
box-shadow: 0 10px 40px rgba(43,42,40,.08);
}
.jjw-reply__label {
display: block; font-family: Georgia, serif; font-style: italic;
font-size: 1.02rem; line-height: 1.5; color: var(--jjw-ink); margin: 0 0 .6rem;
}
.jjw-reply__field {
width: 100%; box-sizing: border-box;
font-family: Georgia, serif; font-size: 16px; color: var(--jjw-ink);
background: var(--jjw-cream);
border: 1px solid var(--jjw-hair); border-radius: 10px;
padding: .85rem 1rem; margin: 0 0 1rem;
-webkit-appearance: none;
transition: border-color .15s ease, background .15s ease;
}
.jjw-reply__field:focus { outline: none; border-color: var(--jjw-rose); background: #fff; }
.jjw-reply__field::placeholder { color: #B5ABA2; }
textarea.jjw-reply__field { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.jjw-reply__row { display: flex; gap: .75rem; }
.jjw-reply__row .jjw-reply__field { flex: 1; }
@media (max-width: 460px) { .jjw-reply__row { display: block; } }
.jjw-reply__check {
display: flex; align-items: flex-start; gap: .6rem;
font-family: Georgia, serif; font-size: .92rem; line-height: 1.5;
color: var(--jjw-body); margin: .4rem 0 1.4rem;
}
.jjw-reply__check input { margin-top: .28rem; accent-color: var(--jjw-rose); min-width: 18px; min-height: 18px; }
.jjw-reply__btn {
display: block; width: 100%;
font-family: Helvetica, Arial, sans-serif; font-size: .82rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
color: #fff; background: var(--jjw-rose);
border: none; border-radius: 999px; padding: 1.1rem 2rem;
cursor: pointer; transition: transform .18s ease, box-shadow .18s ease;
min-height: 44px;
box-shadow: 0 6px 18px rgba(196,86,110,.28);
}
.jjw-reply__btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(196,86,110,.36); }
.jjw-reply__fine {
font-family: Helvetica, Arial, sans-serif; font-size: .7rem; line-height: 1.6;
color: var(--jjw-muted); text-align: center; margin: 1.2rem auto 0; max-width: 26rem;
}
.jjw-reply__hp { position: absolute; left: -9999px; }
/* ============================================================
INDEX PAGE
============================================================ */
.jjw-index { background: var(--jjw-cream); padding: 0 0 5rem; }
.jjw-index__hero {
background:
radial-gradient(900px 480px at 20% 0%, rgba(232,144,163,.22), transparent 60%),
linear-gradient(160deg, var(--jjw-blush-1) 0%, var(--jjw-blush-2) 100%);
padding: 4rem 1.5rem 3.5rem;
text-align: center;
border-bottom: 1px solid rgba(232,86,110,.10);
}
.jjw-index__eyebrow {
font-family: Helvetica, Arial, sans-serif;
font-size: .72rem; font-weight: 700; letter-spacing: .22em;
text-transform: uppercase; color: var(--jjw-rose); margin: 0 0 1.1rem;
}
.jjw-index__title {
font-family: Georgia, serif; font-weight: 400;
font-size: clamp(2.1rem, 7.6vw, 3rem); line-height: 1.12;
color: var(--jjw-ink); margin: 0;
}
.jjw-index__title em { display: block; font-style: italic; color: var(--jjw-rose); }
.jjw-index__verse {
font-family: Georgia, serif; font-style: italic;
font-size: clamp(1.05rem, 3.4vw, 1.15rem); line-height: 1.7;
color: var(--jjw-body); max-width: 30rem; margin: 1.8rem auto .5rem;
}
.jjw-index__ref {
font-family: Helvetica, Arial, sans-serif; font-size: .7rem;
letter-spacing: .18em; text-transform: uppercase; color: var(--jjw-muted); margin: 0;
}
.jjw-index__intro {
font-family: Georgia, serif; font-size: 1.06rem; line-height: 1.75;
color: var(--jjw-body); max-width: 34rem; margin: 3rem auto 0; padding: 0 1.5rem;
}
.jjw-index__list { list-style: none; margin: 2.5rem auto 0; padding: 0 1.5rem; max-width: 34rem; }
.jjw-index__item {
border: 1px solid var(--jjw-hair);
border-radius: 12px;
margin: 0 0 .7rem;
background: #fff;
transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.jjw-index__item:hover { border-color: rgba(196,86,110,.35); box-shadow: 0 8px 24px rgba(196,86,110,.10); transform: translateY(-1px); }
.jjw-index__link {
display: block; padding: 1.35rem 1.4rem; text-decoration: none; color: inherit;
}
.jjw-index__link:hover .jjw-index__name { color: var(--jjw-rose); }
.jjw-index__num {
display: block; font-family: Helvetica, Arial, sans-serif;
font-size: .66rem; font-weight: 700; letter-spacing: .2em;
text-transform: uppercase; color: var(--jjw-rose); margin-bottom: .4rem;
}
.jjw-index__name {
font-family: Georgia, serif; font-size: 1.25rem; line-height: 1.35;
color: var(--jjw-ink); margin: 0 0 .3rem; transition: color .2s ease;
}
.jjw-index__theme {
font-family: Georgia, serif; font-style: italic; font-size: .98rem;
line-height: 1.5; color: var(--jjw-muted); margin: 0;
}
.is-locked { background: #FBF9F5; border-style: dashed; }
.is-locked:hover { border-color: var(--jjw-hair); box-shadow: none; transform: none; }
.is-locked .jjw-index__link { cursor: default; }
.is-locked .jjw-index__num { color: #BDB4AB; }
.is-locked .jjw-index__name { color: #A79E96; }
.is-locked .jjw-index__theme { color: #BDB4AB; }
.jjw-index__soon {
font-family: Helvetica, Arial, sans-serif; font-size: .6rem;
letter-spacing: .16em; text-transform: uppercase; color: #BDB4AB;
margin-left: .6rem;
}
.jjw-index__foot {
text-align: center; max-width: 34rem; margin: 3.5rem auto 0; padding: 0 1.5rem;
}
.jjw-index__foot p {
font-family: Georgia, serif; font-size: 1rem; line-height: 1.7; color: var(--jjw-body);
}
.jjw-index__back {
display: inline-block; margin-top: 1.5rem;
font-family: Helvetica, Arial, sans-serif; font-size: .74rem;
font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
color: var(--jjw-rose); text-decoration: none;
}
/* ============================================================
THANK-YOU PAGE
============================================================ */
.jjw-ty {
background:
radial-gradient(700px 400px at 50% 30%, rgba(255,255,255,.55), transparent 60%),
linear-gradient(160deg, var(--jjw-blush-1) 0%, var(--jjw-blush-2) 100%);
min-height: 60vh; display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center; padding: 4rem 1.5rem;
}
.jjw-ty__eyebrow {
font-family: Helvetica, Arial, sans-serif; font-size: .7rem;
font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
color: var(--jjw-rose); margin: 0 0 1rem;
}
.jjw-ty__title {
font-family: Georgia, serif; font-weight: 400;
font-size: clamp(1.9rem, 6.5vw, 2.6rem); line-height: 1.2;
color: var(--jjw-ink); margin: 0 0 1.2rem;
}
.jjw-ty__body {
font-family: Georgia, serif; font-size: 1.05rem; line-height: 1.75;
color: var(--jjw-body); max-width: 30rem; margin: 0 auto .9rem;
}
.jjw-ty__sig {
font-family: Georgia, serif; font-size: 1.15rem; color: var(--jjw-ink);
margin: 1.6rem 0 0;
}
.jjw-ty__link {
display: inline-block; margin-top: 2rem;
font-family: Helvetica, Arial, sans-serif; font-size: .76rem;
font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
color: var(--jjw-rose); text-decoration: none;
background: #fff; padding: .8rem 1.6rem; border-radius: 999px;
border: 1px solid rgba(196,86,110,.32);
}
.jjw-ty__link:hover { background: var(--jjw-rose); color: #fff; border-color: var(--jjw-rose); }
/* ============================================================
FOOTER
============================================================ */
.tw-footer {
background: #fff;
border-top: 1px solid var(--jjw-hair);
padding: 34px 20px 24px;
text-align: center;
color: var(--jjw-muted);
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
margin-top: 0;
}
.tw-footer-brand { font-family: Georgia, serif; font-size: 22px; color: var(--jjw-ink); margin: 0 0 10px; }
.tw-footer-brand em { color: var(--jjw-rose); font-style: italic; font-weight: 400; }
.tw-footer p { margin: 0 0 8px; }
.tw-footer a { color: var(--jjw-rose); text-decoration: none; }
.tw-footer-socials { display: inline-flex; gap: 14px; margin: 10px 0 14px; }
.tw-footer-socials a { display: inline-block; }
.tw-footer-socials svg { width: 22px; height: 22px; fill: var(--jjw-rose); }