/*
  Dart Studio — Hostinger static stylesheet.
  Place any licensed Avenir webfont files in ./assets/fonts/ and uncomment
  the @font-face rule below if you own a webfont licence.
*/
/* @font-face { font-family: "Avenir Custom"; src: url("./assets/fonts/Avenir.woff2") format("woff2"); font-display: swap; } */

:root { --canvas:#F3F2EB; --ink:#3F403C; --glass:rgba(255,255,255,.42); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--canvas); color:var(--ink); font-family:Avenir,"Avenir Next",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; }
button,a { font:inherit; } button { color:inherit; } a { color:inherit; }
.site { min-height:100vh; overflow:hidden; background:var(--canvas); color:var(--ink); transition:background .42s ease,color .42s ease; }
.site.dark { --canvas:#1B1C1E; --ink:#EDECE6; --glass:rgba(255,255,255,.08); }
.glass { border:1px solid rgba(255,255,255,.66); background:var(--glass); box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -1px 12px rgba(255,255,255,.28),0 8px 28px rgba(51,52,48,.09),1px 0 5px rgba(169,221,245,.18),-1px 0 5px rgba(242,200,206,.18); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); }

.brand-mark { position:fixed; z-index:20; top:18px; left:20px; display:grid; width:36px; height:36px; place-items:center; border-radius:14px 14px 14px 5px; background:linear-gradient(135deg,rgba(169,221,245,.95),rgba(216,206,242,.82) 55%,rgba(242,200,206,.85)); box-shadow:inset 0 1px 1px rgba(255,255,255,.95),0 7px 20px rgba(63,64,60,.09); text-decoration:none; transition:transform .2s ease; }
.brand-mark:hover { transform:rotate(8deg); }.brand-mark span { width:14px; height:14px; border:2px solid rgba(255,255,255,.86); border-radius:50%; box-shadow:0 0 0 4px rgba(255,255,255,.19); }

.theme-toggle { position:fixed; z-index:20; top:18px; left:50%; width:60px; height:32px; padding:0; transform:translateX(-50%); border-radius:999px; cursor:pointer; transition:transform .16s ease; }.theme-toggle:active { transform:translateX(-50%) scale(.94); }.theme-icon { position:absolute; top:8px; z-index:2; width:15px; height:15px; color:var(--ink); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; transition:opacity .32s ease,transform .32s ease; }.sun { left:8px; }.moon { right:8px; opacity:.35; transform:rotate(-40deg); }.toggle-thumb { position:absolute; z-index:3; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.92); box-shadow:inset 0 1px 1px white,0 3px 10px rgba(0,0,0,.15); transition:transform .36s cubic-bezier(.23,1,.32,1),background .36s ease; }.dark .toggle-thumb { transform:translateX(28px); background:rgba(42,42,45,.92); }.dark .sun { opacity:.35; transform:rotate(40deg); }.dark .moon { opacity:1; transform:rotate(0); }

.intro { position:relative; display:grid; min-height:100svh; place-items:center; padding:60px 24px; overflow:hidden; transition:opacity .08s linear; will-change:opacity,transform; }.film { position:absolute; inset:0 0 auto; height:60%; opacity:.58; pointer-events:none; filter:blur(8px); background:radial-gradient(ellipse at 18% 10%,rgba(169,221,245,.62),transparent 31%),radial-gradient(ellipse at 82% 26%,rgba(242,200,206,.54),transparent 31%),radial-gradient(ellipse at 62% 72%,rgba(246,231,182,.52),transparent 38%),radial-gradient(ellipse at 8% 85%,rgba(216,206,242,.45),transparent 34%); -webkit-mask-image:linear-gradient(to bottom,black 0%,black 54%,transparent 100%); mask-image:linear-gradient(to bottom,black 0%,black 54%,transparent 100%); }.film::after { content:""; position:absolute; inset:-20%; background:linear-gradient(100deg,transparent 24%,rgba(255,255,255,.45) 45%,transparent 64%); transform:rotate(-11deg); animation:film-drift 13s ease-in-out infinite alternate; }@keyframes film-drift { from { transform:translateX(-5%) rotate(-11deg); }to { transform:translateX(8%) rotate(-11deg); } }
.intro-inner { position:relative; z-index:1; display:flex; width:min(100%,420px); flex-direction:column; align-items:center; gap:28px; text-align:center; }.intro-inner>* { opacity:0; transform:translateY(22px); transition:opacity .64s cubic-bezier(.23,1,.32,1),transform .64s cubic-bezier(.23,1,.32,1); }.intro-inner.visible>* { opacity:1; transform:none; }.intro-inner.visible .intro-copy { transition-delay:.14s; }.intro-inner.visible .cta { transition-delay:.28s; }
.portrait { position:relative; width:148px; height:148px; overflow:hidden; border-radius:50%; background:#fff; }.portrait-ring { position:absolute; inset:-10px; border:1px solid rgba(255,255,255,.68); border-radius:50%; background:rgba(255,255,255,.48); box-shadow:inset 0 1px 1px rgba(255,255,255,.94),inset 0 -1px 10px rgba(255,255,255,.52),0 6px 24px rgba(63,64,60,.08); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }.portrait-image,.portrait-placeholder { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; }.portrait-image { object-position:center 8%; }.portrait-placeholder { display:grid; place-items:center; background:radial-gradient(circle at 30% 25%,rgba(169,221,245,.35),transparent 60%),radial-gradient(circle at 75% 75%,rgba(242,200,206,.3),transparent 60%),#edebe0; }.portrait-placeholder::before { content:""; width:43px; height:43px; border:1px solid rgba(255,255,255,.75); border-radius:50%; box-shadow:0 45px 0 -13px rgba(255,255,255,.72); }
.intro-copy { max-width:360px; margin:0; font-size:16px; font-weight:200; line-height:1.55; }.intro-copy b { font-weight:700; }.cta { position:relative; display:inline-flex; width:100%; align-items:center; justify-content:center; gap:10px; overflow:hidden; padding:17px 30px; border:1px solid rgba(255,255,255,.66); border-radius:999px; background:rgba(255,255,255,.42); color:var(--ink); font-size:15.5px; font-weight:500; text-decoration:none; box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -1px 12px rgba(255,255,255,.36),0 8px 28px rgba(51,52,48,.09); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); transition:transform .14s ease; }.cta::before { content:""; position:absolute; z-index:0; inset:-50%; opacity:.65; background:radial-gradient(circle at 20% 25%,rgba(169,221,245,.62),transparent 28%),radial-gradient(circle at 78% 28%,rgba(242,200,206,.52),transparent 27%),radial-gradient(circle at 58% 80%,rgba(246,231,182,.48),transparent 30%),radial-gradient(circle at 12% 84%,rgba(216,206,242,.42),transparent 26%); animation:cta-light 11s ease-in-out infinite alternate; }.cta>* { position:relative; z-index:1; }.cta:active { transform:scale(.975); }@keyframes cta-light { from { transform:translate(-4%,-2%) rotate(-4deg); }to { transform:translate(5%,3%) rotate(4deg); } }

.archive { display:flex; justify-content:center; padding:40px 20px 100px; }.folders { display:flex; width:100%; max-width:920px; flex-wrap:wrap; justify-content:center; gap:22px; }.folder { position:relative; display:flex; width:220px; height:160px; align-items:flex-end; padding:0; overflow:hidden; border:0; clip-path:polygon(0 14%,34% 14%,42% 0,100% 0,100% 100%,0 100%); background:rgba(255,255,255,.46); box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px 14px rgba(255,255,255,.45),0 10px 30px rgba(63,64,60,.07); cursor:pointer; transition:transform .22s cubic-bezier(.23,1,.32,1),box-shadow .22s ease; }.folder:hover,.folder:focus-visible { box-shadow:inset 0 1px 1px rgba(255,255,255,.96),inset 0 -1px 18px rgba(255,255,255,.6),0 16px 38px rgba(63,64,60,.12); }.folder:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }.folder-light { position:absolute; inset:0; background:radial-gradient(circle at 25% 85%,rgba(169,221,245,.5),transparent 40%),radial-gradient(circle at 85% 20%,rgba(246,231,182,.4),transparent 42%),radial-gradient(circle at 65% 90%,rgba(216,206,242,.35),transparent 40%); opacity:.88; }.folder-label { position:relative; z-index:1; padding:20px 22px; font-size:16px; font-weight:500; }.food { transform:rotate(-1.4deg); }.interior { margin-top:34px; transform:rotate(.8deg); }.exterior { margin-top:10px; transform:rotate(-.6deg); }.food:hover { transform:translateY(-6px) rotate(-1.4deg); }.interior:hover { transform:translateY(-6px) rotate(.8deg); }.exterior:hover { transform:translateY(-6px) rotate(-.6deg); }

.contact { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; padding:20px 20px 90px; }.contact-panel { display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:999px; color:var(--ink); font-size:14.5px; font-weight:500; text-decoration:none; transition:transform .14s ease; }.contact-panel:hover { transform:translateY(-2px); }.contact-panel:active { transform:scale(.975); }.icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

.viewer-backdrop { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:24px; background:rgba(243,242,235,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); animation:fade .26s ease; }.viewer { position:relative; display:flex; width:min(680px,100%); max-height:84vh; aspect-ratio:4/5; align-items:center; justify-content:center; padding:20px; border:1px solid rgba(255,255,255,.68); border-radius:22px; background:rgba(255,255,255,.28); box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -1px 16px rgba(255,255,255,.28),0 24px 60px rgba(0,0,0,.18); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); animation:viewer-in .42s cubic-bezier(.23,1,.32,1); }.viewer-stage { position:relative; display:grid; width:100%; height:100%; place-items:center; overflow:hidden; border-radius:14px; background:radial-gradient(circle at 30% 25%,rgba(169,221,245,.16),transparent 55%),rgba(255,255,255,.3); }.viewer-image { display:block; width:100%; min-width:100%; height:100%; min-height:100%; object-fit:cover; object-position:center; animation:image-in .3s ease; }.empty-image { position:relative; width:34px; height:34px; border:1.5px solid currentColor; border-radius:8px; opacity:.4; }.empty-image::before { content:""; position:absolute; bottom:6px; left:6px; width:19px; height:12px; border-top:1.5px solid; border-left:1.5px solid; transform:skewY(-32deg); }.arrow,.close { position:absolute; z-index:2; display:grid; place-items:center; border:1px solid rgba(255,255,255,.8); background:rgba(255,255,255,.85); color:#3F403C; cursor:pointer; box-shadow:0 6px 18px rgba(63,64,60,.12); }.arrow { top:50%; width:42px; height:42px; border-radius:10px; transform:translateY(-50%); }.arrow:hover { transform:translateY(-50%) scale(1.05); }.arrow:disabled { opacity:.35; cursor:default; }.left { left:-14px; }.right { right:-14px; }.close { top:-16px; right:-16px; width:34px; height:34px; border-radius:50%; font-size:20px; }@keyframes fade { from { opacity:0; }to { opacity:1; } }@keyframes viewer-in { from { opacity:0; transform:scale(.96); }to { opacity:1; transform:scale(1); } }@keyframes image-in { from { opacity:0; transform:translateX(10px); }to { opacity:1; transform:none; } }

@media (max-width:720px) { .folders { flex-direction:column; align-items:center; gap:26px; }.folder { width:min(320px,84vw); margin-top:0!important; transform:none!important; }.folder:nth-child(2) { align-self:flex-end; margin-right:4vw!important; }.folder:nth-child(3) { align-self:flex-start; margin-left:4vw!important; } }
@media (max-width:560px) { .brand-mark { top:15px; left:16px; width:31px; height:31px; }.viewer { width:100%; aspect-ratio:3/4; padding:14px; }.left { left:6px; }.right { right:6px; }.close { top:10px; right:10px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }