/* ==========================================================================
   newsletter.html — page styles (loads after styles.css)
   ========================================================================== */

/* ---------- Intro + signup ---------- */
.nl-hero { padding-block: clamp(36px, 6vw, 84px) clamp(44px, 6vw, 80px); }
.nl-hero__copy { display: grid; gap: 22px; justify-items: start; }
.nl-hero__copy h1 { max-width: 13ch; }
.nl-hero__copy .lede { max-width: 36ch; }
.nl-hero__copy .go { margin-top: -4px; }
.nl-hero__photo .photo { aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
@media (min-width: 900px) { .nl-hero__photo .photo { rotate: 1deg; } }
.nl-hero__photo figcaption { margin-top: 14px; }

/* ---------- Why it's different: statement + the gear I write about ---------- */
.nl-get { padding-top: clamp(16px, 2.5vw, 32px); }
.nl-why { gap: clamp(36px, 5vw, 72px); }
.nl-lit { max-width: 24ch; font-size: clamp(1.875rem, 1.3rem + 1.9vw, 3rem); line-height: 1.12; letter-spacing: -0.02em; }

/* two blog thumbnails, overlapping like prints on a table */
.nl-gear { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.nl-gear figure { margin: 0; }
.nl-gear .photo { aspect-ratio: 960 / 502; border: 6px solid var(--white); border-radius: 16px; box-shadow: var(--shadow); transition: rotate 0.35s var(--bounce), translate 0.35s var(--bounce); }
.nl-gear__a { grid-column: 1 / 11; grid-row: 1; }
.nl-gear__a .photo { rotate: -2deg; }
.nl-gear__b { position: relative; z-index: 1; grid-column: 3 / 13; grid-row: 2; margin-top: -13%; }
.nl-gear__b .photo { rotate: 1.5deg; }
.nl-gear figure:hover .photo { rotate: 0deg; translate: 0 -4px; }
.nl-gear__cap { grid-column: 1 / -1; max-width: 44ch; margin-top: 20px; color: var(--muted); font-size: 0.98rem; }
.nl-gear__cap .link { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* ---------- What you can expect: sticky heading + a grid of cream cards ---------- */
.nl-expect { display: grid; gap: clamp(24px, 3vw, 36px); margin-top: clamp(72px, 9vw, 120px); }
@media (min-width: 900px) {
  .nl-expect { grid-template-columns: 0.72fr 1.28fr; column-gap: clamp(40px, 5vw, 72px); align-items: start; }
  .nl-expect__side { position: sticky; top: 100px; align-self: start; }
}
.nl-expect__list { display: grid; gap: 10px; }
@media (min-width: 560px) { .nl-expect__list { grid-template-columns: 1fr 1fr; gap: 14px; } }
.nl-expect__list li { display: flex; align-items: flex-start; gap: 14px; padding: clamp(15px, 2vw, 22px) clamp(18px, 2vw, 22px); border-radius: 16px; background: var(--cream); color: var(--ink); font-weight: 500; line-height: 1.45; }
.nl-expect__list li::before {
  content: ""; flex: none; width: 26px; height: 26px; margin-top: -1px; border: 2px solid var(--ink); border-radius: 8px;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2E31' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
  transition: rotate 0.3s var(--bounce);
}
.nl-expect__list li:nth-child(odd)::before { rotate: -4deg; }
.nl-expect__list li:hover::before { rotate: 8deg; }
.nl-expect__note { max-width: 30ch; margin-top: 18px; color: var(--ink); font-weight: 600; font-size: 1.1rem; }

/* ---------- Read a past issue ---------- */
/* phone: copy, envelope, archive list. desktop: copy + list on the left, envelope on the right */
.nl-issue { display: grid; gap: clamp(32px, 5vw, 48px); grid-template-areas: "copy" "env" "more"; }
.nl-issue__copy { grid-area: copy; }
.nl-issue__archive { grid-area: more; }
.nl-env-stage { grid-area: env; }
@media (min-width: 900px) {
  .nl-issue { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: "copy env" "more env"; column-gap: clamp(32px, 5vw, 64px); row-gap: 28px; align-items: start; }
}
.nl-issue__copy .lede { margin-top: 16px; }
.nl-issue__copy .lede cite { font-weight: 600; }
.nl-issue__copy > p:not(.lede) { margin-top: 12px; color: var(--muted); }
.nl-issue__more-title { font-size: 1.05rem; letter-spacing: 0; }
.nl-issue__more { display: grid; gap: 8px; margin: 12px 0 10px; }
.nl-issue__more li { padding-left: 18px; position: relative; }
.nl-issue__more li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

/* The envelope: a <details>. The summary is the envelope, the content is the letter. */
.nl-env-stage { width: 100%; max-width: 580px; justify-self: center; }
.nl-env > summary { display: block; padding-top: 6px; border-radius: 12px; list-style: none; cursor: pointer; transition: padding-top 0.55s var(--ease); }
.nl-env > summary::-webkit-details-marker { display: none; }
.nl-env[open] > summary { padding-top: 35%; }

.nl-env__body {
  position: relative; display: block; aspect-ratio: 8 / 5;
  border-radius: 10px; background: #C9A26B;
  box-shadow: 0 34px 50px -30px rgba(42, 46, 49, 0.6);
  perspective: 1100px;
  transition: transform 0.35s var(--bounce);
}
.nl-env:not([open]) > summary:hover .nl-env__body { transform: translateY(-5px) rotate(-1.2deg); }

/* front folds of the envelope */
.nl-env__pocket { position: absolute; inset: 0; z-index: 2; border-radius: 10px; background: #E6C995; clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); }
.nl-env__pocket::before, .nl-env__pocket::after { content: ""; position: absolute; inset: 0; }
.nl-env__pocket::before { background: #EDD3A4; clip-path: polygon(0 0, 50% 56%, 0 100%); }
.nl-env__pocket::after { background: #EFD8AC; clip-path: polygon(100% 0, 50% 56%, 100% 100%); }

/* top flap: lifts a little on hover, flips up when open */
.nl-env__flap {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 56%;
  border-radius: 10px 10px 0 0; background: #DFBE86;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transition: transform 0.6s var(--ease), background-color 0s 0.2s;
}
.nl-env:not([open]) > summary:hover .nl-env__flap { transform: rotateX(26deg); }
.nl-env[open] .nl-env__flap { transform: rotateX(180deg); background-color: #CFAB74; }

.nl-env__to { position: absolute; z-index: 3; left: 8%; bottom: 13%; color: var(--ink); font-size: clamp(1.15rem, 0.8rem + 1.4vw, 1.7rem); line-height: 1; rotate: -4deg; }
.nl-env__stamp { position: absolute; z-index: 3; right: 6%; bottom: 10%; width: 15%; padding: 4px; background: var(--white); rotate: 5deg; outline: 4px dotted #E6C995; outline-offset: -2px; box-shadow: 0 2px 4px rgba(42, 46, 49, 0.2); }
.nl-env__stamp img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }

.nl-env__seal {
  position: absolute; z-index: 4; left: 50%; top: 56%; translate: -50% -50%;
  display: grid; place-items: center; width: clamp(66px, 16%, 92px); aspect-ratio: 1;
  border-radius: 50%; background: var(--yellow); color: var(--ink);
  font-weight: 700; font-size: clamp(0.8rem, 0.7rem + 0.3vw, 0.95rem); line-height: 1.05; text-align: center;
  box-shadow: 0 6px 14px -6px rgba(42, 46, 49, 0.55);
  rotate: -8deg;
  transition: rotate 0.35s var(--bounce), scale 0.35s var(--bounce), opacity 0.2s;
}
.nl-env:not([open]) > summary:hover .nl-env__seal { rotate: 6deg; scale: 1.08; }
.nl-env[open] .nl-env__seal { opacity: 0; scale: 0.4; }

.nl-env__close {
  position: absolute; z-index: 4; left: 50%; top: 9%; translate: -50% 0;
  display: none; padding: 7px 14px; border-radius: 999px;
  background: var(--ink); color: var(--white); font-weight: 600; font-size: 0.9rem; line-height: 1.2; white-space: nowrap;
}
.nl-env[open] .nl-env__close { display: block; }

/* the letter, pulled out and laid on top */
.nl-letter {
  position: relative; z-index: 5; width: 92%; margin: -32% auto 0;
  padding: clamp(22px, 4vw, 36px);
  border-radius: 8px; background: var(--white);
  box-shadow: 0 1px 2px rgba(42, 46, 49, 0.08), 0 28px 48px -26px rgba(42, 46, 49, 0.55);
  rotate: -0.5deg;
}
.nl-letter__meta { color: var(--muted); font-size: 0.92rem; }
.nl-letter__subject { margin: 6px 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.nl-letter__body { font-size: 1rem; line-height: 1.6; }
.nl-letter__body p { margin-bottom: 0.9em; }
.nl-letter__body strong { color: var(--ink); }
.nl-letter__fade { -webkit-mask-image: linear-gradient(#000 10%, transparent 95%); mask-image: linear-gradient(#000 10%, transparent 95%); }
.nl-letter .btn { margin-top: 4px; }
@keyframes nl-pull { from { opacity: 0; translate: 0 48px; rotate: 3deg; } to { opacity: 1; translate: 0 0; rotate: -0.5deg; } }
.nl-env[open] .nl-letter { animation: nl-pull 0.7s 0.15s var(--bounce) both; }

/* ---------- About Nick: cutout portrait on a yellow tile ---------- */
.nl-bio__photo { width: 100%; max-width: 500px; justify-self: center; }
@media (min-width: 900px) { .nl-bio__photo { position: sticky; top: 100px; align-self: start; } }
.nl-bio__photo .photo { aspect-ratio: 1; rotate: -1.5deg; box-shadow: var(--shadow); }
.nl-bio__photo .photo img { object-position: 50% 100%; transition: scale 0.5s var(--ease); transform-origin: 50% 100%; }
.nl-bio__photo:hover .photo img { scale: 1.04; }
.nl-bio__photo .note { margin: 16px 0 0 10px; }
.nl-bio__wave { display: inline-block; transform-origin: 70% 80%; }
.nl-bio:hover .nl-bio__wave { animation: wave 1.6s ease-in-out infinite; }
.nl-bio__links { margin-top: 1.6rem; gap: 16px 24px; }

/* ---------- FAQ: heading on the side, questions as cream cards ---------- */
.nl-faq { padding-top: 0; }
.nl-faq__grid { display: grid; gap: 22px clamp(40px, 5vw, 72px); }
@media (min-width: 900px) {
  .nl-faq__grid { grid-template-columns: 0.72fr 1.28fr; align-items: start; }
  .nl-faq__side { position: sticky; top: 100px; align-self: start; }
}
.nl-faq__side p { margin-top: 12px; color: var(--muted); }
.nl-faq .faq { display: grid; gap: 12px; border-top: 0; }
.nl-faq .faq details { padding-inline: 22px; border-bottom: 0; border-radius: 16px; background: var(--cream); }
.nl-faq .faq details > div { padding-bottom: 20px; }

/* ---------- Final signup (ink, no yellow: the footer below is yellow) ---------- */
.nl-join { text-align: center; }
.nl-join .wrap { display: grid; justify-items: center; }
.nl-join .lede { margin-top: 10px; }
.nl-join .signup { margin-top: 26px; }
.nl-join .signup:focus-within { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35); }

/* ==========================================================================
   Motion (page-specific). Shared pieces (.words, .lit, .reveal, .stagger,
   .parallax) live in motion.css. Everything here is off for reduced motion,
   scroll-driven parts also need animation-timeline support, and the default
   styles above are the finished state.
   ========================================================================== */
/* hero photo: wipes up from the bottom (expanded inset so the shadow isn't clipped) */
@keyframes nl-wipe { from { clip-path: inset(100% -12% -12% -12% round 22px); } to { clip-path: inset(-12% -12% -12% -12% round 22px); } }
/* envelope: arrives lying back on the table, then stands up to face you */
@keyframes nl-env-in {
  0% { opacity: 0; translate: 0 180px; rotate: -7deg; scale: 0.86; transform: perspective(1400px) rotateX(58deg); }
  45% { opacity: 1; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; transform: perspective(1400px) rotateX(0deg); }
}
/* "To: a friend" writes itself left to right */
@keyframes nl-write { from { clip-path: inset(-30% 100% -30% -10%); } to { clip-path: inset(-30% -10% -30% -10%); } }
/* the stamp gets slapped on */
@keyframes nl-stamp { 0% { opacity: 0; scale: 2.4; } 55% { opacity: 1; scale: 0.9; } 100% { opacity: 1; scale: 1; } }
/* checklist: the box pops, then the tick appears */
@keyframes nl-pop { 0% { scale: 0; } 65% { scale: 1.25; } 100% { scale: 1; } }
@keyframes nl-tick { from { background-size: 0 0; } to { background-size: 15px 15px; } }
/* closing band: a rounded card that widens to full bleed */
@keyframes nl-band { from { clip-path: inset(0 clamp(12px, 5vw, 80px) round 40px); } to { clip-path: inset(0 0 round 0); } }

@media (prefers-reduced-motion: no-preference) {
  /* Hero: the highlighter strokes "Friends", then carries on to "Newsletter" */
  .nl-hero .words .w.hl { animation-duration: 0.9s, 0.5s; }
  .nl-hero .words .w.hl + .w.hl { animation-delay: calc(var(--i) * 75ms + 0.05s), 1.05s; }
  .nl-hero__photo .photo { animation: nl-wipe 1.1s 0.2s cubic-bezier(0.7, 0, 0.2, 1) backwards; }
  .nl-hero__photo .photo img { animation: m-zoom 1.6s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .nl-hero__photo figcaption { animation: rise 0.6s 1s var(--ease) both; }

  @supports (animation-timeline: view()) {
    /* Hero photo drifts up and away as you scroll on */
    .nl-hero__photo { animation: m-drift linear both; animation-timeline: view(); animation-range: exit -10% exit 100%; }

    /* Lit statement: the last word gets a highlighter once it lights up */
    .nl-lit .w.hl {
      background-repeat: no-repeat;
      animation: m-lit linear both, m-draw linear both;
      animation-timeline: --lit, --lit;
      animation-range:
        cover calc(16% + var(--i) * var(--step)) cover calc(22% + var(--i) * var(--step)),
        cover calc(23% + var(--i) * var(--step)) cover calc(31% + var(--i) * var(--step));
    }

    /* Checklist: each row rises (.stagger), then its box pops and gets ticked.
       Uses scale + background-size, so the hover rotate on the box still works. */
    .nl-expect__list li { view-timeline-name: --tick; }
    .nl-expect__list li::before {
      animation: nl-pop linear both, nl-tick linear both;
      animation-timeline: --tick, --tick;
      animation-range: cover 6% cover 16%, cover 14% cover 22%;
    }
    .nl-expect__list li:nth-child(even)::before { animation-range: cover 10% cover 20%, cover 18% cover 26%; }

    /* Envelope: the wrapper tilts up flat (the details/summary keep their own hover + open transforms) */
    .nl-env-stage {
      view-timeline-name: --env; transform-origin: 50% 100%;
      animation: nl-env-in cubic-bezier(0.3, 0.6, 0.35, 1) both; animation-timeline: --env; animation-range: entry 0% cover 40%;
    }
    .nl-env__to { animation: nl-write linear both; animation-timeline: --env; animation-range: cover 30% cover 42%; }
    .nl-env__stamp { animation: nl-stamp linear both; animation-timeline: --env; animation-range: cover 38% cover 46%; }

    /* Closing band widens to full bleed as it arrives */
    .nl-join { animation: nl-band linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}