/* ====================================================================
   ABOUT.CSS — Founder's Notes page
   --------------------------------------------------------------------
   Δομή σε μικρά parts (αντιστοιχεί 1-προς-1 με τα sections του HTML):
     0) .notes-header       — premium masthead (monogram, edition, signoff)
     1) .notes-intro        — επιστολική εισαγωγή με drop-cap & stamp
     2) .notes-story        — main story (text column + pull-quote)
     3) .notes-founders     — οι δύο ιδρύτριες (2 portrait cards)
     4) .values-section     — αρχές του brand (σκούρο background)
     5) .notes-signature    — υπογραφή κλεισίματος
     6) ornamental keyframes (subtle drift για το stamp/portrait shader)
   ==================================================================== */


/* ====================================================================
   0) NOTES HEADER — premium masthead override (μόνο για Founder's Notes)
   --------------------------------------------------------------------
   Overrides on top of the shared .page-header (από layout.css):
   • breadcrumb πάνω-πάνω αντί για κάτω
   • monogram emblem με δαχτυλίδι
   • edition strip (Vol. I · Skinya Maison)
   • signoff line (From two mothers, with love)
   • αποκρύβει το default "Skinya · Maison" stamp στην πάνω-δεξιά γωνία
   ==================================================================== */
/* 0a) frame — compact, layered soft backdrop (χωρίς το παλιό κενό) */
.notes-header{
  min-height:520px;
  padding:5rem 3rem 0;max-width:none;border-bottom:none;
  background:
    linear-gradient(180deg,
      rgba(244,231,220,0.50) 0%,
      rgba(244,231,220,0.22) 28%,
      rgba(244,231,220,0.45) 60%,
      rgba(244,231,220,0.85) 85%,
      rgba(244,231,220,1) 100%),
    url('../Our%20notes,%20written%20with.png') 35% center/cover no-repeat,
    var(--ivory);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.notes-header::before{content:none}
.notes-header::after{content:none}
.notes-header .page-header-content{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0;max-width:760px;margin:0 auto;
  position:relative;z-index:2;
}

/* 0b) side ornaments — διακριτικά botanical wisps (SVG inline, no asset deps) */
.notes-ornament{
  position:absolute;top:50%;transform:translateY(-50%);
  width:280px;height:380px;pointer-events:none;
  opacity:.32;z-index:1;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.notes-ornament--left{
  left:-40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 380' fill='none' stroke='%23b86840' stroke-width='1' stroke-linecap='round'><path d='M40 360 Q 70 240, 110 180 Q 150 110, 130 30' opacity='.7'/><path d='M110 180 Q 70 170, 50 200' opacity='.5'/><path d='M120 130 Q 160 120, 180 100' opacity='.5'/><path d='M125 80 Q 95 70, 75 95' opacity='.45'/><ellipse cx='130' cy='30' rx='14' ry='8' transform='rotate(-25 130 30)' opacity='.55'/><ellipse cx='180' cy='100' rx='14' ry='8' transform='rotate(20 180 100)' opacity='.5'/><ellipse cx='75' cy='95' rx='12' ry='7' transform='rotate(-30 75 95)' opacity='.45'/><ellipse cx='50' cy='200' rx='12' ry='7' transform='rotate(40 50 200)' opacity='.5'/></svg>");
}
.notes-ornament--right{
  right:-40px;transform:translateY(-50%) scaleX(-1);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 380' fill='none' stroke='%23b86840' stroke-width='1' stroke-linecap='round'><path d='M40 360 Q 70 240, 110 180 Q 150 110, 130 30' opacity='.7'/><path d='M110 180 Q 70 170, 50 200' opacity='.5'/><path d='M120 130 Q 160 120, 180 100' opacity='.5'/><path d='M125 80 Q 95 70, 75 95' opacity='.45'/><ellipse cx='130' cy='30' rx='14' ry='8' transform='rotate(-25 130 30)' opacity='.55'/><ellipse cx='180' cy='100' rx='14' ry='8' transform='rotate(20 180 100)' opacity='.5'/><ellipse cx='75' cy='95' rx='12' ry='7' transform='rotate(-30 75 95)' opacity='.45'/><ellipse cx='50' cy='200' rx='12' ry='7' transform='rotate(40 50 200)' opacity='.5'/></svg>");
}

/* 0c) eyebrow (Our Story) — handwritten στην αριστερή σελίδα του βιβλίου, ελαφριά κλίση */
.notes-header .eyebrow{
  position:absolute;top:30%;left:14%;
  margin:0;color:var(--gold-leaf);font-size:.78rem;letter-spacing:.55em;font-weight:600;
  transform:rotate(-6deg);transform-origin:left center;
  z-index:3;white-space:nowrap;
}

/* 0d) title — premium serif με gradient em */
.notes-header h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.5rem,2.7vw,2.4rem);
  font-weight:500;line-height:1.12;letter-spacing:-.015em;
  margin:0 0 1.8rem;max-width:680px;color:var(--aubergine);
}
.notes-header h1 em{
  font-weight:400;font-style:italic;
  background:linear-gradient(135deg,var(--plum-deep) 0%,var(--gold-leaf) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.05em;
}

/* 0e) subtitle */
.notes-header p{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:1.2rem;max-width:580px;opacity:.78;line-height:1.6;
  color:var(--aubergine);
}
.notes-header p em{font-style:italic;color:var(--plum-deep);opacity:1}

/* 0f) tagline — μικρό italic κάτω από το subtitle */
.notes-header .notes-tagline{
  margin-top:1.6rem;font-size:.95rem;opacity:.55;letter-spacing:.02em;
}

/* 0g) tagline — handwritten-style στην κάτω-αριστερή πλευρά του banner */
.notes-points{
  position:absolute;bottom:8%;left:22%;
  margin:0;padding:0;border:none;background:transparent;
  width:auto;max-width:none;
  z-index:3;
  transform:rotate(-4deg);transform-origin:left center;
}
.notes-point{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;
  color:var(--aubergine);font-size:1.25rem;letter-spacing:.005em;
  opacity:.82;
}
.notes-point strong{font-weight:400;color:var(--aubergine);font-style:italic}
.notes-point-icon{color:var(--gold-leaf);font-size:.95rem;opacity:.85}


/* ====================================================================
   1) NOTES INTRO — letter layout (sender column + body column)
   ==================================================================== */
/* Seamless fade transition from notes-header — no hard divider line */
.notes-intro{background:var(--ivory);padding:4rem 3rem 5rem;position:relative;margin-top:-1px}
.notes-intro::before{content:none}

/* 1a) overall 2-column grid */
.notes-letter{
  max-width:980px;margin:0 auto;
  display:grid;grid-template-columns:230px 1fr;gap:4rem;
  align-items:start;
}

/* 1b) sender column (μικρή φωτογραφία/υπογραφή) */
.letter-sender{
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.2rem;
  padding-top:.5rem;
}
.letter-portrait{
  width:140px;height:140px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(40% 50% at 30% 30%, var(--champagne) 0%, transparent 65%),
    radial-gradient(40% 50% at 70% 70%, var(--plum-deep) 0%, transparent 65%),
    linear-gradient(160deg,var(--lilac-cream),var(--lavender-dust));
  box-shadow:0 20px 50px rgba(61,42,30,0.12);
  position:relative;overflow:hidden;
}
.letter-portrait::after{
  content:'';position:absolute;inset:6px;border:1px solid rgba(253,251,246,0.5);border-radius:50%;
}
.letter-portrait-initial{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:4.2rem;font-weight:300;color:var(--ivory);
  text-shadow:0 4px 20px rgba(61,42,30,0.25);
  position:relative;z-index:1;line-height:1;
}
.letter-meta{display:flex;flex-direction:column;align-items:center;gap:.3rem;margin-top:.5rem}
.letter-meta-line{font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-leaf);opacity:.8}
.letter-meta-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:1.15rem;color:var(--aubergine)}
.letter-meta-loc{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.9rem;color:var(--plum-deep);opacity:.75}

/* 1c) body column (το γράμμα) */
.letter-body{text-align:left}
.notes-greeting{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.5rem;color:var(--plum-deep);margin-bottom:1.5rem;letter-spacing:.01em}
.notes-lead{font-family:'Cormorant Garamond',serif;font-size:1.45rem;line-height:1.7;color:var(--aubergine);font-weight:400}
.notes-lead em{font-style:italic;color:var(--plum-deep)}
.dropcap{float:left;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:4.8rem;line-height:.85;padding:.3rem .7rem 0 0;color:var(--plum-deep)}

/* 1d) divider */
.notes-divider{display:flex;align-items:center;justify-content:flex-start;gap:1rem;margin-top:2.5rem;color:var(--mauve-soft);font-size:.85rem}
.notes-divider span{flex:0 0 50px;height:1px;background:var(--mauve-soft);opacity:.5}


/* ====================================================================
   1.5) NOTES MOOD — editorial mood photo + hand-drawn botanical sketch
   --------------------------------------------------------------------
   Asymmetric 2-column: real mood photo αριστερά (3:4 aspect),
   hand-drawn sprig + italic quote δεξιά (vertical centered).
   ==================================================================== */
.notes-mood{background:var(--ivory);padding:3rem 3rem 5rem;position:relative}
.notes-mood-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:5rem;align-items:center}
/* Mood photo card */
.notes-mood-photo{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:linear-gradient(160deg,var(--rose-warm) 0%,var(--lavender-dust) 50%,var(--mauve-soft) 100%);box-shadow:0 30px 60px -20px rgba(61,42,30,0.3),0 8px 18px rgba(61,42,30,0.1)}
.notes-mood-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s ease}
.notes-mood-photo:hover img{transform:scale(1.03)}
.notes-mood-photo::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 25%,rgba(253,251,246,0.18) 0%,transparent 60%);pointer-events:none}
/* Aside column — sketch + quote */
.notes-mood-aside{display:flex;flex-direction:column;align-items:flex-start;gap:2rem;padding:1rem 0}
.notes-mood-sketch{width:110px;height:auto;color:var(--mauve-soft);opacity:.7}
.notes-mood-quote{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.35;color:var(--aubergine);margin:0;max-width:420px}
.notes-mood-quote em{font-style:italic;color:var(--plum-deep)}
.notes-mood-cite{font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-leaf);font-weight:500}


/* ====================================================================
   2) NOTES STORY — main story (text column + pull-quote)
   ==================================================================== */
.notes-story{background:var(--ivory);padding:4rem 3rem 8rem}
.notes-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:5rem;align-items:start;max-width:1300px;margin:0 auto}

/* 2a) text column */
.notes-text h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.1;color:var(--aubergine);margin:1.2rem 0 2rem;letter-spacing:-.01em}
.notes-text h2 em{font-style:italic;color:var(--plum-deep)}
.notes-text p{font-size:1.05rem;color:var(--aubergine);margin-bottom:1.4rem;line-height:1.85;opacity:.88;font-weight:400}
.notes-text p em{font-style:italic;color:var(--plum-deep);font-weight:500;letter-spacing:.01em}

/* 2b) pull-quote card (sticky στο desktop) */
.notes-pullquote{position:sticky;top:6rem}
.pullquote-card{background:linear-gradient(160deg,var(--lavender-mist) 0%,var(--lilac-cream) 60%,var(--lavender-dust) 100%);padding:3.5rem 2.5rem;position:relative;text-align:center;overflow:hidden;border-radius:2px;box-shadow:0 20px 60px rgba(61,42,30,0.08)}
.pullquote-card::before{content:'';position:absolute;inset:1rem;border:1px solid rgba(253,251,246,0.5);pointer-events:none}
.pullquote-card::after{content:'';position:absolute;inset:-30%;background:radial-gradient(circle at 30% 20%, rgba(253,251,246,0.4), transparent 50%), radial-gradient(circle at 70% 80%, rgba(192,133,122,0.15), transparent 55%);pointer-events:none;mix-blend-mode:soft-light}
.pullquote-mark{font-family:'Cormorant Garamond',serif;font-size:4.5rem;line-height:.7;color:var(--ivory);display:block;margin-bottom:1rem;position:relative;z-index:1}
.pullquote-card blockquote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.7rem;line-height:1.45;color:var(--aubergine);margin:0 0 1.5rem;position:relative;z-index:1;font-weight:500}
.pullquote-card blockquote em{font-style:italic;color:var(--plum-deep)}
.pullquote-card cite{font-style:normal;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--plum-deep);position:relative;z-index:1}


/* ====================================================================
   3) NOTES FOUNDERS — οι δύο μαμάδες (2 portrait cards)
   ==================================================================== */
.notes-founders{background:var(--lavender-mist);padding:7rem 3rem}
.founders-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4rem;max-width:1100px;margin:0 auto}

/* 3a) card shell */
.founder-card{text-align:center}

/* 3b) portrait — shader gradient αντί για φωτογραφία */
.founder-portrait{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;margin-bottom:2rem;display:flex;align-items:center;justify-content:center;isolation:isolate;border-radius:2px;box-shadow:0 30px 70px rgba(61,42,30,0.12)}
.founder-portrait::before{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,var(--lilac-cream),var(--lavender-dust),var(--mauve-soft));filter:saturate(1.1);animation:portraitDrift 18s ease-in-out infinite alternate}
.founder-portrait::after{content:'';position:absolute;inset:0;z-index:1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='ngf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85'/%3E%3CfeColorMatrix values='0 0 0 0 0.30 0 0 0 0 0.20 0 0 0 0 0.14 0 0 0 0.20 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ngf)'/%3E%3C/svg%3E");mix-blend-mode:overlay;opacity:.55;pointer-events:none}

/* 3c) portrait variants — διαφορετικά color blends ανά founder */
.founder-portrait--one::before{background:radial-gradient(45% 55% at 30% 35%, var(--champagne) 0%, transparent 65%),radial-gradient(40% 50% at 75% 70%, var(--plum-deep) 0%, transparent 60%),linear-gradient(160deg,var(--lilac-cream) 0%,var(--lavender-dust) 60%,var(--mauve-soft) 100%)}
.founder-portrait--two::before{background:radial-gradient(45% 55% at 70% 30%, var(--rose-warm) 0%, transparent 65%),radial-gradient(40% 50% at 25% 75%, var(--aubergine) 0%, transparent 60%),linear-gradient(160deg,var(--lavender-dust) 0%,var(--gold-soft) 55%,var(--mauve-soft) 100%)}

/* 3d) initial overlay + tag chip */
.founder-initial{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:7rem;color:var(--ivory);text-shadow:0 6px 30px rgba(61,42,30,0.3);position:relative;z-index:2;line-height:1}
.founder-tag{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);font-size:.65rem;letter-spacing:.35em;text-transform:uppercase;color:var(--ivory);background:rgba(61,42,30,0.35);backdrop-filter:blur(6px);padding:.5rem 1rem;z-index:2}

/* 3e) text under portrait */
.founder-card h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.6rem;color:var(--aubergine);margin-bottom:1rem}
.founder-card h3 em{font-style:italic;color:var(--plum-deep);letter-spacing:.05em}
.founder-bio{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem;color:var(--plum-deep);line-height:1.6;max-width:340px;margin:0 auto}


/* ====================================================================
   4) VALUES SECTION — οι αρχές μας (σκούρο background)
   ==================================================================== */
.values-section{background:linear-gradient(135deg,var(--plum-deep),var(--aubergine));color:var(--ivory);padding:7rem 3rem}
.values-section .section-head h2{color:var(--ivory)}
.values-section .section-head h2 em{color:var(--lavender-dust)}
.values-section .section-head p{color:var(--lavender-dust)}
.values-section .section-head .eyebrow{color:var(--lavender-dust)}
.values-section .section-head .eyebrow::before,.values-section .section-head .eyebrow::after{background:var(--lavender-dust)}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;max-width:1050px;margin:0 auto}
.value{text-align:center;padding:2.5rem 1.5rem;border:1px solid rgba(212,173,138,0.2);transition:all .4s ease}
.value:hover{background:rgba(212,173,138,0.1);transform:translateY(-6px)}
.value-num{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.9rem;color:var(--lavender-dust);letter-spacing:.3em;margin-bottom:1rem}
.value h4{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.6rem;margin-bottom:1rem}
.value h4 em{font-style:italic;color:var(--lavender-dust)}
.value p{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--lilac-cream);font-size:1rem;line-height:1.55}


/* ====================================================================
   5) SIGNATURE — υπογραφή κλεισίματος
   ==================================================================== */
.notes-signature{background:var(--ivory);padding:6rem 3rem 8rem;text-align:center}
.signature-content{max-width:520px;margin:0 auto;position:relative}
.signature-closing{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.4rem;color:var(--plum-deep);margin-bottom:.6rem}
.signature-name{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:2.2rem;color:var(--aubergine);line-height:1.2}
.signature-name em{font-style:italic;color:var(--plum-deep);letter-spacing:.02em}
.signature-line{width:90px;height:1px;background:var(--mauve-soft);margin:2.2rem auto 0;opacity:.6}


/* ====================================================================
   6) ORNAMENTAL KEYFRAMES — subtle drift
   ==================================================================== */
@keyframes stampDrift{
  0%   {transform:rotate(0deg)}
  50%  {transform:rotate(4deg)}
  100% {transform:rotate(-3deg)}
}
@keyframes portraitDrift{
  0%   {transform:translate3d(0,0,0) scale(1.08)}
  50%  {transform:translate3d(4%,-3%,0) scale(1.15) rotate(6deg)}
  100% {transform:translate3d(-3%,4%,0) scale(1.10) rotate(-4deg)}
}
@media (prefers-reduced-motion:reduce){
  .notes-stamp,
  .founder-portrait::before{animation:none}
}