@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');
:root {
    --ink:#302c27;
    --cream:#faf8f3;
    --muted:#777169;
    --line:#e5e0d7;
    --sand:#e8d7c0
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'DM Sans',sans-serif
}

a {
    color:inherit;
    text-decoration:none
}

button,input,textarea {
    font:inherit
}

button {
    cursor:pointer
}

.header {
    height:100px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 6%;
    border-bottom:1px solid var(--line);
    background:var(--cream);
    position:sticky;
    top:0;
    z-index:10
}

.brand {
    font-size:18px;
    letter-spacing:.13em;
    font-weight:700;
    line-height:1.3
}

.brand em {
    font-family:'Playfair Display',serif;
    font-weight:400;
    letter-spacing:0;
    font-size:20px
}

.brand span {
    display:block;
    font-size:9px;
    letter-spacing:.24em;
    font-weight:500;
    color:var(--muted);
    margin-top:6px
}

nav {
    display:flex;
    gap:34px
}

nav a {
    font-size:13px
}

nav a:hover,.textlink:hover {
    color:#aa705b
}

.menu {
    display:none;
    border:0;
    background:none;
    font-size:26px
}

.hero {
    min-height:680px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6%;
    align-items:center;
    padding:70px 8% 90px
}

.eyebrow {
    font-size:11px;
    letter-spacing:.23em;
    font-weight:700;
    color:#9a725f;
    margin:0 0 24px
}

h1,h2,h3 {
    font-family:'Playfair Display',serif;
    font-weight:400
}

h1 {
    font-size:clamp(55px,6vw,104px);
    line-height:1.07;
    letter-spacing:-.045em;
    margin:0 0 28px
}

h1 i,h2 i {
    font-weight:400;
    color:#a87562
}

.hero-copy>p:not(.eyebrow),.about-copy>p:not(.eyebrow) {
    font-size:16px;
    line-height:1.9;
    color:var(--muted);
    max-width:490px
}

.button {
    display:inline-flex;
    gap:44px;
    align-items:center;
    justify-content:space-between;
    padding:17px 23px;
    font-size:12px;
    font-weight:600;
    margin-top:25px;
    transition:transform .25s,background .25s
}

.button:hover {
    transform:translateY(-3px)
}

.dark {
    background:var(--ink);
    color:white;
    border:1px solid var(--ink)
}

.outline {
    border:1px solid var(--ink)
}

.hero-art {
    position:relative
}

.abstract-art {
    position:relative;
    overflow:hidden;
    background:#d4b7a1
}

.art-main {
    aspect-ratio:4/5;
    border:16px solid #eee8df;
    box-shadow:0 20px 50px #5b4a3c25
}

.sun {
    position:absolute;
    top:12%;
    right:12%;
    width:45%;
    aspect-ratio:1;
    border-radius:50%;
    background:#e8c59b
}

.shape {
    position:absolute
}

.shape-one {
    background:#8b5549;
    width:72%;
    height:75%;
    left:-14%;
    bottom:-22%;
    border-radius:52% 48% 0 0;
    transform:rotate(-24deg)
}

.shape-two {
    background:#e7ddca;
    width:40%;
    height:86%;
    right:8%;
    bottom:-18%;
    border-radius:55% 45% 0 0;
    transform:rotate(19deg)
}

.shape-three {
    background:#6c7767;
    width:32%;
    height:54%;
    left:42%;
    bottom:-10%;
    border-radius:50% 50% 0 0;
    transform:rotate(-29deg)
}

.art-caption {
    position:absolute;
    bottom:-28px;
    right:0;
    font-size:11px;
    color:var(--muted)
}

.section {
    padding:115px 8%
}

.intro {
    text-align:center;
    max-width:900px;
    margin:auto
}

.intro h2 {
    font-size:clamp(38px,4vw,65px);
    line-height:1.2;
    margin:0 0 24px
}

.intro>p:last-child {
    line-height:1.9;
    color:var(--muted);
    max-width:650px;
    margin:auto
}

.courses {
    background:#f0ebe3
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin-bottom:44px
}

.section-heading h2,.about h2,.contact h2 {
    font-size:clamp(40px,4.4vw,70px);
    line-height:1.15;
    margin:0
}

.section-heading>p {
    max-width:320px;
    line-height:1.8;
    color:var(--muted);
    font-size:14px
}

.cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:23px
}

.course {
    background:var(--cream)
}

.arttile {
    height:310px;
    position:relative;
    overflow:hidden
}

.tile-draw {
    background:#d9c9b3
}

.drawing {
    position:absolute;
    font-size:230px;
    transform:rotate(-24deg);
    color:#584f46;
    top:0;
    left:30%
}

.tile-paint {
    background:#c3c8b5
}

.paint-blob {
    position:absolute;
    width:72%;
    height:90%;
    background:#a95e4b;
    top:20%;
    left:15%;
    border-radius:40% 60% 70% 30%;
    transform:rotate(32deg);
    box-shadow:70px -80px 0 -15px #e6d5ac
}

.tile-mentor {
    background:#b78e7a;
    display:grid;
    place-items:center
}

.mentor-mark {
    font-family:'Playfair Display',serif;
    font-size:150px;
    color:#f1e5d6
}

.course-content {
    padding:27px
}

.course-content>span {
    font-size:10px;
    letter-spacing:.2em;
    color:#9a725f
}

.course h3 {
    font-size:36px;
    margin:13px 0
}

.course p {
    font-size:13px;
    line-height:1.8;
    color:var(--muted);
    min-height:68px
}

.course a,.textlink {
    font-size:13px;
    font-weight:700;
    border-bottom:1px solid currentColor;
    padding-bottom:7px
}

.about {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12%;
    align-items:center
}

.portrait {
    aspect-ratio:4/5;
    background:#b9b6a6
}

.about-art>span {
    display:block;
    margin-top:15px;
    font-size:10px;
    letter-spacing:.15em
}

.about-copy p {
    margin:25px 0
}

.about-copy .textlink {
    display:inline-block;
    margin-top:20px
}

.gallery {
    text-align:center;
    background:#f0ebe3
}

.gallery .section-heading {
    text-align:left
}

.gallery-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px
}

.gallery-art {
    aspect-ratio:4/5
}

.gallery-art.two {
    background:#b3b6a0
}

.gallery-art.three {
    background:#c9aa91
}

.gallery-item p {
    display:flex;
    justify-content:space-between;
    font-size:13px
}

.notice {
    font-size:11px;
    color:#8a8177;
    line-height:1.6
}

.contact {
    text-align:center;
    max-width:900px;
    margin:auto
}

.contact>p:not(.eyebrow) {
    color:var(--muted);
    line-height:1.8
}

form {
    text-align:left;
    margin:50px auto 0;
    max-width:650px
}

label {
    display:block;
    font-size:12px;
    font-weight:600;
    margin-bottom:20px
}

.fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}

input,textarea {
    display:block;
    width:100%;
    padding:16px;
    margin-top:10px;
    background:transparent;
    border:1px solid #d7d0c5;
    border-radius:0;
    outline-color:#a87562
}

footer {
    border-top:1px solid var(--line);
    padding:45px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px
}

footer p,footer>a:last-child {
    font-size:11px;
    color:var(--muted)
}

@media(max-width:850px) {
    .header {
        height:80px;
        padding:0 5%
    }

    .menu {
        display:block
    }

    nav {
        display:none;
        position:absolute;
        top:80px;
        left:0;
        right:0;
        background:var(--cream);
        padding:28px 6%;
        flex-direction:column;
        box-shadow:0 15px 25px #0001
    }

    nav.open {
        display:flex
    }

    .hero {
        grid-template-columns:1fr;
        padding:70px 6%;
        gap:60px
    }

    .hero-art {
        max-width:570px
    }

    .section {
        padding:75px 6%
    }

    .cards,.gallery-grid {
        grid-template-columns:1fr 1fr
    }

    .about {
        gap:7%
    }

}

@media(max-width:600px) {
    .brand {
        font-size:13px
    }

    .brand em {
        font-size:16px
    }

    .brand span {
        font-size:7px
    }

    .hero {
        padding-top:50px
    }

    .hero h1 {
        font-size:56px
    }

    .section-heading {
        display:block
    }

    .cards,.gallery-grid,.about,.fields {
        grid-template-columns:1fr
    }

    .arttile {
        height:270px
    }

    .about-art {
        max-width:440px
    }

    footer {
        flex-direction:column;
        align-items:start
    }

    .section {
        padding:65px 6%
    }

}

/* YouTube link and hero action */
.hero-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:12px
}

.youtube-button {
    background:#c72b28;
    color:#fff;
    border:1px solid #c72b28;
    text-decoration:none;
    transition:transform .2s,background .2s
}

.youtube-button:hover {
    background:#a91e1b;
    transform:translateY(-2px)
}

.youtube-nav {
    color:#b42322!important;
    font-weight:700
}

@media(max-width:520px) {
    .hero-actions {
        align-items:stretch;
        flex-direction:column
    }

    .hero-actions .button {
        text-align:center
    }

}

/* Fotografii reale: secțiunea Despre, cursuri și galerie */
.hero-art .art-main img,
.about-art .portrait img,
.arttile img,
.gallery-image-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-art .portrait {
  overflow: hidden;
  border-radius: 3px;
}
.about-art .portrait img {
  object-position: center 38%;
}
.gallery-image-link {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #e6ded4;
}
.gallery-image-link img {
  transition: transform 350ms ease;
}
.gallery-image-link:hover img {
  transform: scale(1.045);
}
.gallery-item p {
  margin-top: 12px;
  text-align: left;
}

/* Formular contact: antispam și mesaje de stare */
.contact-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#contact-status[data-state="success"] { color: #226342; }
#contact-status[data-state="error"] { color: #a13030; }