/* haru.news — a dreamy, candle-lit dispatch */

:root {
    --cream: #f4ecd8;        /* parchment cream — page background */
    --candle: #e8b04a;       /* candle-gold — triadic anchor */
    --candle-mid: #f4d489;   /* softer mid-flame gold */
    --dusk: #6b5b95;         /* dusk-violet — body text, field */
    --sage: #7a9b76;         /* parchment-sage — labels, whisper */
    --ink: #2d2440;          /* deeper dusk-violet — masthead, headlines */
    --wax-shadow: rgba(107, 91, 149, 0.12);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--cream);
    color: var(--dusk);
    font-family: 'Cormorant Garamond', Georgia, serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 1.6rem 8rem;
    min-height: 100vh;
}

/* ---------- The Candle Header ---------- */

.candle-wrap {
    position: relative;
    margin: 0 auto 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.candle {
    display: block;
    filter: drop-shadow(0 14px 18px var(--wax-shadow));
    overflow: visible;
}

.candle-base { fill: var(--ink); }

.candle-stick {
    fill: #f7f0dd;
    stroke: rgba(45, 36, 64, 0.10);
    stroke-width: 1;
}

.candle-wick {
    stroke: #4a3d2a;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.flame { transform-origin: 32px 48px; }

.flame-halo {
    fill: var(--candle);
    opacity: 0.22;
    filter: blur(6px);
    mix-blend-mode: screen;
    transform-origin: 32px 40px;
    animation: flame-flicker-c 1.9s ease-in-out infinite alternate;
}

.flame-mid {
    fill: var(--candle-mid);
    mix-blend-mode: screen;
    transform-origin: 32px 44px;
    animation: flame-flicker-b 2.3s ease-in-out infinite alternate;
}

.flame-core {
    fill: var(--candle);
    mix-blend-mode: screen;
    transform-origin: 32px 44px;
    animation: flame-flicker-a 1.7s ease-in-out infinite alternate;
}

@keyframes flame-flicker-a {
    0%   { transform: scale(0.94) translateX(-0.5px) rotate(-1deg); }
    100% { transform: scale(1.06) translateX(0.5px) rotate(1deg); }
}
@keyframes flame-flicker-b {
    0%   { transform: scale(1.04) translateX(0.5px) rotate(1deg); }
    100% { transform: scale(0.92) translateX(-0.5px) rotate(-1deg); }
}
@keyframes flame-flicker-c {
    0%   { transform: scale(0.96) translateX(-0.4px); opacity: 0.16; }
    100% { transform: scale(1.05) translateX(0.4px); opacity: 0.28; }
}

.date-line {
    margin: 1.4rem 0 0;
    font-family: 'Cormorant SC', 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--sage);
    text-align: center;
}

/* ---------- The Masthead ---------- */

.masthead-block {
    text-align: center;
    margin-bottom: 7rem;
}

.masthead {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: clamp(3.6rem, 8vw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.masthead.startle {
    animation: shake-error 0.45s ease-in-out 1;
}

@keyframes shake-error {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-4px); }
    40%  { transform: translateX(4px); }
    60%  { transform: translateX(-3px); }
    80%  { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

.subtitle {
    margin: 1rem 0 0;
    font-family: 'Cormorant SC', 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    color: var(--sage);
}

/* ---------- The Article column ---------- */

article {
    max-width: 580px;
    width: 100%;
    position: relative;
}

/* ---------- The Day's Lead ---------- */

.lead { margin-bottom: 7rem; }

.lead-para {
    font-size: 1.375rem;
    line-height: 1.85;
    margin: 0 0 2.4rem;
    color: var(--dusk);
}

.lead-para em {
    font-style: italic;
}

.drop-cap {
    float: left;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(4.5rem, 9vw, 6rem);
    line-height: 0.85;
    margin: 0.4rem 0.75rem -0.2rem 0;
    color: var(--ink);
    transition: color 1.4s ease-out;
}

.drop-cap.warm { color: var(--candle); }

/* ---------- Wax droplets (the only "bullets") ---------- */

.wax-droplet {
    display: flex;
    justify-content: center;
    margin: 0 0 2.4rem;
    opacity: 0;
    transform: translateY(0.3rem);
}

.wax-droplet.lit {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.wax-droplet svg path {
    fill: var(--candle);
}

.wax-droplet svg {
    filter: drop-shadow(2px 4px 0 var(--wax-shadow));
}

/* ---------- The Entries ---------- */

.entries { margin-bottom: 7rem; }

.entry {
    margin: 0 auto 4.6rem;
    width: 100%;
    position: relative;
}

/* breathing column width — asymmetric, deliberate non-pattern */
.entry.e-1  { max-width: 580px; }
.entry.e-2  { max-width: 560px; }
.entry.e-3  { max-width: 540px; }
.entry.e-4  { max-width: 580px; }
.entry.e-5  { max-width: 520px; }
.entry.e-6  { max-width: 556px; }
.entry.e-7  { max-width: 580px; }
.entry.e-8  { max-width: 552px; }
.entry.e-9  { max-width: 524px; }
.entry.e-10 { max-width: 580px; }
.entry.e-11 { max-width: 548px; }
.entry.e-12 { max-width: 564px; }

/* margin asterism — "my favourite of the day", never explained */
.entry.e-4::before,
.entry.e-9::before {
    content: '\2042';
    position: absolute;
    left: -3rem;
    top: 0.1rem;
    font-size: 1.1rem;
    color: var(--sage);
    line-height: 1;
}

.ordinal {
    font-family: 'Cormorant SC', 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.24em;
    color: var(--sage);
    margin: 0 0 0.8rem;
}

.entry-body {
    font-size: 1.0625rem;
    line-height: 1.75;
    margin: 0;
    color: var(--dusk);
}

.entry-body em { font-style: italic; }

/* ---------- The Aside ---------- */

.aside {
    margin: 0 0 7rem 4rem;
    padding-left: 1.4rem;
    border-left: 1px solid var(--wax-shadow);
}

.aside p {
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--dusk);
    margin: 0;
}

/* ---------- The Closing Wax ---------- */

.closing-wax {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
}

.wax-pool {
    display: block;
    transform-origin: center;
    animation: breathe 6s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.015); }
}

.closing-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--ink);
    text-align: center;
    margin: 0;
}

/* ---------- Responsive: the one breakpoint ---------- */

@media (max-width: 640px) {
    main { padding: 3rem 1.6rem 6rem; }

    .candle { width: 48px; height: 150px; }

    .masthead { font-size: clamp(3rem, 13vw, 3.6rem); }
    .lead-para { font-size: 1.21rem; }
    .entry-body { font-size: 0.94rem; }
    .aside { margin-left: 1.2rem; }
    .aside p { font-size: 0.99rem; }

    .entry.e-4::before,
    .entry.e-9::before { left: -1.4rem; }
}

@media (max-width: 720px) {
    .entry.e-4::before,
    .entry.e-9::before { left: -1.4rem; }
}