/* =========================================================
   ANGEOLOGY — story.css (loads after style.css)
   Our story, told as a diary on a string of pearls.
   ========================================================= */

/* ---------- hero: the open diary ---------- */
.st-hero { max-width: 1240px; margin: 0 auto; padding: 130px var(--gutter) 90px; }
.st-head { text-align: center; }
.st-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(84px, 12vw, 210px); line-height: 1.2; letter-spacing: -.03em; }
.st-title .hl-in { display: inline-block; }
.st-title .script { font-size: 1.08em; color: var(--rose); padding: 0 .08em; }
.st-sub { margin: 6px 0 0; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--graphite); }

.diary { display: grid; grid-template-columns: 1fr 1fr; max-width: 1000px; margin: 60px auto 0; padding: 16px; border-radius: 20px; background: var(--rose-ink); box-shadow: 0 50px 80px -40px rgba(64, 46, 42, .6); perspective: 1600px; }
.diary-page { position: relative; min-height: 460px; }
.dp-left {
  padding: 50px 42px 40px; border-radius: 8px 0 0 8px;
  background: repeating-linear-gradient(180deg, transparent 0 35px, rgba(169, 76, 100, .18) 35px 36px) 0 3px / 100% 100% no-repeat, var(--paper);
  box-shadow: inset -24px 0 30px -24px rgba(64, 46, 42, .3);
}
.dp-right { display: grid; place-items: center; padding: 50px 30px; border-radius: 0 8px 8px 0; background: radial-gradient(circle, rgba(255, 255, 255, .85) 2.6px, transparent 3.1px) 0 0 / 24px 24px, var(--petal); box-shadow: inset 24px 0 30px -24px rgba(64, 46, 42, .3); }
.dp-date { margin: 0 0 6px; font-family: var(--script); font-size: 46px; line-height: 1.2; color: var(--rose-ink); }
.dp-line { margin: 0; font-family: var(--serif); font-style: italic; font-size: 23px; line-height: 36px; }
.dp-sign { margin: 18px 0 0; text-align: right; font-size: 32px; color: var(--rose-ink); }
.dp-pearl { position: absolute; left: 30px; bottom: 26px; width: 34px; animation: bob 4s ease-in-out infinite; }
.dp-polaroid { width: 78%; margin: 0; rotate: 4deg; }
.dp-bow { position: absolute; top: -26px; right: 26px; width: 110px; rotate: 12deg; animation: bowSway 4.5s ease-in-out infinite; }

/* ---------- entries on a string of pearls ---------- */
.entries { position: relative; max-width: 1120px; margin: 0 auto; padding: 70px var(--gutter) 90px; }
.string { position: absolute; left: 50%; top: 0; width: 120px; height: 100%; margin-left: -60px; overflow: visible; pointer-events: none; }
.string path { fill: none; stroke: #d9c7ce; stroke-width: 2; vector-effect: non-scaling-stroke; }
.entry-list { position: relative; list-style: none; margin: 0; padding: 0; }
.entry { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 130px; align-items: center; margin-bottom: 90px; }
.entry:nth-child(even) .entry-card { order: 2; }
.entry-pearl { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; z-index: 2; background: url(../img/deco/pearl.png) center / cover; filter: drop-shadow(0 4px 6px rgba(64, 46, 42, .25)); }
.entry-card { padding: 32px 34px; background: var(--paper); border-radius: 22px; box-shadow: 0 0 0 1px var(--line), 0 30px 50px -30px rgba(64, 46, 42, .45); }
.entry-date { margin: 0 0 6px; font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--rose-ink); }
.entry-title { margin: 0 0 12px; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 3.6vw, 52px); line-height: 1.2; }
.entry-title .script { font-size: 1.12em; color: var(--rose-ink); }
.entry-card p:not(.entry-date) { margin: 0 0 12px; font-size: 15px; }
.entry-photo { width: 66%; margin: 0; justify-self: center; rotate: -4deg; }
.entry:nth-child(even) .entry-photo { rotate: 4deg; }
.entry-deco { width: 170px; justify-self: center; animation: bob 5s ease-in-out infinite; }
.entry-wings { width: 280px; }

/* ---------- founder letter ---------- */
.letter-sec { padding: 130px var(--gutter); background: radial-gradient(circle, rgba(255, 255, 255, .85) 2.6px, transparent 3.1px) 0 0 / 26px 26px, var(--petal); }
.letter-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 6vw, 90px); align-items: center; max-width: 1150px; margin: 0 auto; }
.founder { position: relative; margin: 0; padding-top: 30px; }
.founder .slot, .founder .slot.has-img { background: repeating-linear-gradient(90deg, var(--lilac) 0 20px, var(--cream) 20px 40px); }
.founder .slot { border-radius: 999px 999px 18px 18px; box-shadow: 0 0 0 1px var(--espresso), 0 0 0 10px var(--paper), 0 0 0 11px var(--rose); }
.founder-pin { position: absolute; top: 0; left: 50%; width: 150px; margin-left: -75px; rotate: -6deg; z-index: 2; filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, .18)); }
.founder-letter {
  position: relative; padding: 50px clamp(26px, 4vw, 54px) 44px; rotate: 1.5deg;
  background: repeating-linear-gradient(180deg, transparent 0 33px, rgba(169, 76, 100, .16) 33px 34px) 0 120px / 100% 100% no-repeat, var(--paper);
  box-shadow: 0 50px 80px -40px rgba(169, 76, 100, .6);
}
.fl-kicker { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--rose-ink); }
.fl-dear { margin: 6px 0 12px; font-size: 56px; line-height: 1.2; color: var(--rose-ink); }
.founder-letter p:not(.fl-kicker):not(.fl-dear):not(.fl-sign):not(.fl-name) { margin: 0 0 12px; font-size: 16px; line-height: 34px; }
.fl-sign { margin: 16px 0 0; font-size: 34px; line-height: 1.2; color: var(--rose-ink); }
.fl-name { margin: 2px 0 0; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--graphite); }

/* ---------- values: pinned notes ---------- */
.values { padding: 130px var(--gutter); }
.notes { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1240px; margin: 0 auto; padding: 30px 0 0; }
.note { position: relative; padding: 50px 26px 30px; box-shadow: 0 30px 40px -28px rgba(64, 46, 42, .5); transition: rotate .5s var(--ease), translate .5s var(--ease); }
.note h3 { margin: 0 0 16px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.15; }
.note p { margin: 0; font-size: 15px; }
.n1 { background: var(--cream); rotate: -3deg; }
.n2 { background: var(--petal); rotate: 2deg; margin-top: 30px; }
.n3 { background: var(--lilac); rotate: -2deg; }
.n4 { background: var(--almond); rotate: 3deg; margin-top: 30px; }
.note:hover { rotate: 0deg; translate: 0 -8px; }
.note-pin { position: absolute; top: -26px; left: 50%; width: 110px; margin-left: -55px; rotate: -8deg; filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, .18)); }

/* ---------- team ---------- */
.team { padding: 120px var(--gutter); background: radial-gradient(circle, rgba(255, 255, 255, .85) 2.6px, transparent 3.1px) 0 0 / 26px 26px, var(--lilac); }
.team-list { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; padding: 0; }
.member { text-align: center; }
.member .polaroid { width: 92%; margin: 0 auto 18px; rotate: -3deg; }
.member:nth-child(even) .polaroid { rotate: 3deg; }
/* cut-out portraits on polka dots and stripes, alternating */
.member .slot, .member .slot.has-img { background: radial-gradient(circle, rgba(255, 255, 255, .9) 3px, transparent 3.5px) 0 0 / 24px 24px, var(--petal); }
.member:nth-child(even) .slot, .member:nth-child(even) .slot.has-img { background: repeating-linear-gradient(90deg, var(--blush) 0 16px, var(--cream) 16px 32px); }
.member .slot img { object-position: 50% 100%; }
.m-role { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--rose-ink); }
.m-fav { margin: 6px 0 0; font-family: var(--serif); font-style: italic; font-size: 19px; }
.m-fav a { color: var(--rose-ink); }

/* ---------- studio ---------- */
.studio { padding: 130px var(--gutter); }
.studio-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px clamp(30px, 6vw, 90px); max-width: 1150px; margin: 0 auto; align-items: start; }
.studio-a { grid-row: 1 / 3; margin: 0; }
.studio-a .slot { border-radius: 22px; box-shadow: 0 0 0 1px var(--line), 0 40px 60px -34px rgba(64, 46, 42, .5); }
.studio-text > p:not(.sec-num) { margin: 18px 0 0; font-size: 16px; }
.studio-quote { margin: 30px 0 0; padding: 20px 0 0 24px; border-left: 2px solid var(--rose); font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.3; }
.studio-quote cite { display: block; margin-top: 8px; font-family: var(--sans); font-style: normal; font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--graphite); }
.studio-b { width: 56%; margin: 0; justify-self: end; rotate: 5deg; }

/* ---------- next page ---------- */
.next-page { padding: 110px var(--gutter) 130px; text-align: center; background: var(--cream); }
.np-kicker { margin: 0; font-family: var(--script); font-size: 34px; color: var(--rose-ink); }
.np-title { margin: 6px 0 30px; font-family: var(--serif); font-weight: 400; font-size: clamp(50px, 6.4vw, 104px); line-height: 1.15; }
.np-title .script { color: var(--rose); font-size: 1.1em; }
.next-page .btn-row { justify-content: center; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .diary { grid-template-columns: 1fr; }
  .dp-left { border-radius: 8px 8px 0 0; }
  .dp-right { border-radius: 0 0 8px 8px; }
  .string { left: 22px; }
  .entry { grid-template-columns: 1fr; gap: 26px; padding-left: 56px; }
  .entry:nth-child(even) .entry-card { order: 0; }
  .entry-pearl { left: 22px; top: 40px; }
  .entry-photo, .entry-deco { justify-self: start; width: 60%; }
  .entry-deco { width: 130px; }
  .letter-grid { grid-template-columns: 1fr; }
  .founder { width: min(80%, 380px); margin: 0 auto; }
  .notes, .team-list { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .n2, .n4 { margin-top: 0; }
  .studio-grid { grid-template-columns: 1fr; }
  .studio-a { grid-row: auto; }
}
@media (max-width: 560px) {
  .st-title { font-size: 22vw; }
  .dp-left { padding: 40px 24px 30px; }
  .dp-line { font-size: 19px; line-height: 32px; }
  .notes { grid-template-columns: 1fr; }
  .member .polaroid { width: 100%; }
  .m-fav { font-size: 16px; }
  .fl-dear { font-size: 44px; }
}