/* ═══════════════════════════════════════════════
   BEATRICE SCROFANI — Unified Design System
   Palette, typography and background shared
   between index.html and all sub-pages.
═══════════════════════════════════════════════ */
 
/* ── Tokens ── */
:root {
    --teal:       #3aada8;
    --teal-deep:  #1e6e6a;
    --teal-pale:  #a8dbd8;
    --jungle:     #2a4e3a;
    --leaf:       #4a8860;
    --autumn:     #c05a28;
    --amber:      #d4983a;
    --ivory:      #faf8f3;
    --ivory-deep: #f0ebe0;
    --stone:      #c8bfb0;
    --ink:        #1e2820;
    --serif:      'Cormorant Garamond', Georgia, serif;
    --serif-sc:   'Cormorant SC', Georgia, serif;
    --sans:       'Montserrat', sans-serif;
}
 
/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
 
/* ════════════════════════════════════════════
   SHARED BOTANICAL BACKGROUND
   Used by body (index) and body-prestige (sub-pages)
   Identical gradient — ivory heart, sage/moss edges,
   amber warmth bottom, delicate botanical spirit.
════════════════════════════════════════════ */
.body-prestige,
body {
    font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    color: var(--ink);
    min-height: 100vh;
 
    background:
        /* ivory heart */
        radial-gradient(ellipse 60% 55% at 50% 50%,
            rgba(250,248,243,1)   0%,
            rgba(250,248,243,.6)  55%,
            rgba(250,248,243,0)   100%),
        /* sage mist top-left */
        radial-gradient(ellipse 65% 55% at -5% 0%,
            rgba(142,186,152,.55) 0%,
            rgba(142,186,152,.25) 45%,
            transparent           70%),
        /* moss top-right */
        radial-gradient(ellipse 60% 50% at 105% 0%,
            rgba(90,140,110,.45)  0%,
            rgba(130,180,140,.22) 40%,
            transparent           65%),
        /* amber bottom-left */
        radial-gradient(ellipse 55% 50% at -5% 105%,
            rgba(210,162,80,.5)   0%,
            rgba(230,195,120,.25) 42%,
            transparent           68%),
        /* warm earth bottom-right */
        radial-gradient(ellipse 50% 48% at 108% 105%,
            rgba(192,130,70,.45)  0%,
            rgba(220,175,110,.2)  40%,
            transparent           65%),
        /* pale teal mid-left */
        radial-gradient(ellipse 35% 50% at -3% 55%,
            rgba(120,195,188,.35) 0%,
            transparent           60%),
        /* pale sage mid-right */
        radial-gradient(ellipse 32% 48% at 105% 52%,
            rgba(110,175,140,.3)  0%,
            transparent           58%),
        /* base: warm ivory parchment */
        linear-gradient(160deg,
            #eef4ec 0%,
            #f4f0e4 35%,
            #f8f5ee 60%,
            #eef2e8 100%);
 
    background-attachment: fixed;
}
 
/* paper grain — shared */
body::before,
.body-prestige::before {
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E");
    background-size:300px; opacity:.5;
}
 
/* ════════════════════════════════════════════
   INDEX.HTML — layout classes
   (kept minimal since index embeds its own <style>)
════════════════════════════════════════════ */
 
/* Editorial grid (legacy, kept for compatibility) */
.editorial-grid {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    align-items: center;
    width: 90%;
    max-width: 1400px;
    position: relative;
}
 
/* ════════════════════════════════════════════
   PRESENTAZIONE.HTML — full design
════════════════════════════════════════════ */
 
/* ── Layout ── */
.body-prestige {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}
 
/* ── Back link ── */
.nav-minimal {
    position: absolute;
    top: 2.4rem;
    left: 2.6rem;
    z-index: 100;
}
 
.home-link {
    font-family: var(--sans);
    text-decoration: none;
    color: var(--jungle);
    font-size: .48rem;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: .42em;
    opacity: .45;
    position: relative;
    padding-bottom: 2px;
    transition: opacity .4s, color .4s;
}
.home-link::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 0; height: 1px;
    background: var(--teal-deep);
    transition: width .45s cubic-bezier(.22,1,.36,1);
}
.home-link:hover { opacity: 1; color: var(--teal-deep); }
.home-link:hover::after { width: 100%; }
 
/* ── Art sheet ── */
.main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
}
 
.art-sheet {
    background: rgba(250,248,243,.88);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(200,190,176,.35);
    width: 560px;
    height: 88vh;
    max-height: 760px;
    padding: 4rem 3.8rem;
    box-shadow:
        0 40px 100px rgba(42,78,58,.08),
        0 12px 40px  rgba(42,78,58,.06),
        0  2px  8px  rgba(42,78,58,.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    animation: revealSheet 1.8s cubic-bezier(.22,1,.36,1);
}
 
/* four botanical corner marks on the sheet */
.art-sheet::before,
.art-sheet::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    pointer-events: none;
}
.art-sheet::before {
    top: 1.4rem; left: 1.4rem;
    border-top: 1px solid var(--stone);
    border-left: 1px solid var(--stone);
}
.art-sheet::after {
    bottom: 1.4rem; right: 1.4rem;
    border-bottom: 1px solid var(--stone);
    border-right: 1px solid var(--stone);
}
 
/* ── Sheet header ── */
.sheet-header { text-align: center; }
 
.main-name {
    font-family: var(--serif);
    font-style: italic;
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: .12em;
    color: var(--teal-deep);
    line-height: 1.1;
}
 
.sheet-meta {
    font-family: var(--sans);
    font-size: .44rem;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: .38em;
    color: var(--stone);
    margin-top: .9rem;
}
 
/* ornament line */
.ornament {
    display: flex;
    align-items: center;
    gap: .7rem;
    justify-content: center;
    margin: 1.6rem auto 0;
}
.ornament::before,
.ornament::after {
    content: '';
    height: 1px;
    width: 1.8rem;
    background: var(--amber);
    opacity: .4;
}
.ornament {
    /* replace div with pseudo-element approach */
    width: 100%;
    position: relative;
}
.ornament::before {
    flex: 0 0 1.8rem;
}
.ornament::after {
    flex: 0 0 1.8rem;
}
 
/* keep original ornament as simple line */
div.ornament {
    width: 2.2rem;
    height: 1px;
    background: linear-gradient(to right, var(--teal), var(--amber));
    margin: 1.6rem auto 0;
    opacity: .5;
    display: block;
}
 
/* ── Sheet sections ── */
.sheet-content {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    flex: 1;
    justify-content: center;
}
 
.section-block { text-align: center; }
 
.section-label {
    font-family: var(--sans);
    font-size: .4rem;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: .42em;
    color: var(--teal);
    opacity: .6;
    margin-bottom: 1.2rem;
    display: block;
}
 
.entry-luxe { margin-bottom: 1rem; }
 
.entry-title {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--ink);
    line-height: 1.3;
}
 
.entry-sub {
    font-family: var(--sans);
    font-size: .55rem;
    font-weight: 200;
    color: var(--stone);
    font-style: normal;
    margin-top: .3rem;
    letter-spacing: .05em;
}
 
.interests-line {
    font-family: var(--serif);
    font-style: italic;
    font-size: .88rem;
    letter-spacing: .04em;
    color: var(--jungle);
    opacity: .7;
    line-height: 1.8;
}
 
/* ── Sheet footer ── */
.sheet-footer { text-align: center; }
 
.seal-bambou {
    width: 18px;
    opacity: .15;
    filter: sepia(40%) saturate(.8) brightness(.85);
    transition: opacity .5s ease;
}
.sheet-footer:hover .seal-bambou { opacity: .3; }
 
/* ── Animations ── */
@keyframes revealSheet {
    from { opacity:0; transform:translateY(24px); filter:blur(4px); }
    to   { opacity:1; transform:translateY(0);    filter:blur(0); }
}
@keyframes fadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}
 
/* ── Legacy nav classes (index) ── */
.vertical-nav {
    display: flex;
    flex-direction: column;
    gap: 40px;
    border-right: 1px solid rgba(42,78,58,.1);
    padding: 20px 0;
}
 
.nav-item {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-decoration: none;
    color: var(--jungle);
    text-transform: uppercase;
    font-family: var(--sans);
    font-size: .55rem;
    font-weight: 200;
    letter-spacing: .35em;
    opacity: .45;
    transition: .5s cubic-bezier(.19,1,.22,1);
}
.nav-item:hover { opacity:1; color:var(--teal-deep); }
 
/* bamboo symbol */
.refined-symbol { position:absolute; bottom:0; right:0; padding:20px; }
.bambu-icon {
    width:28px; opacity:.18;
    filter:sepia(30%) saturate(.8) brightness(.9);
    transition:opacity 1s ease;
}
.refined-symbol:hover .bambu-icon { opacity:.38; }
 
/* ── Responsive ── */
@media (max-height: 700px) {
    .art-sheet { height:98vh; padding:2.5rem 3rem; }
    .main-name { font-size:1.6rem; }
    .sheet-content { gap:1rem; }
    .entry-luxe { margin-bottom:.6rem; }
}
 
@media (max-width: 600px) {
    .art-sheet { width:92vw; padding:2.5rem 2rem; }
    .main-name { font-size:1.5rem; letter-spacing:.08em; }
    .interests-line { white-space:normal; }
    .nav-minimal { top:1.5rem; left:1.5rem; }
}