/* The typeface is saved locally from the same Google Fonts definition used by the reference. */
@font-face {
  font-family: "Luana Sans";
  src: url("assets/fonts/plus-jakarta-sans.woff2") format("woff2");
  font-display: swap;
  font-weight: 500 700;
}

/* Global visual tokens keep the warm ivory and deep botanical palette consistent. */
:root {
  --ink: #101811;
  --pine: #102818;
  --pine-light: #173f22;
  --cream: #f7f7ed;
  --paper: #fffbed;
  --lime: #e9ef96;
  --yellow: #ffe779;
  --line: rgba(21, 54, 31, 0.1);
  --soft-shadow: 0 1rem 2.25rem rgba(68, 47, 10, 0.12);
  font-family: "Luana Sans", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--pine);
}

/* Reset removes browser differences without changing semantic controls. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--pine); }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--pine); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { border: 0; cursor: pointer; }

/* Ambient canvas is deliberately fixed behind the portfolio shell. */
#ambient-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .7; }

/* Outer shell reproduces the floating rounded page treatment. */
.site-shell { margin: 0 auto; max-width: 94rem; padding: .75rem; position: relative; z-index: 1; }
.page-shell { background: var(--cream); border: 1px solid rgba(255,255,255,.15); border-radius: 2rem; box-shadow: 0 1.5rem 5rem rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.82); overflow: hidden; position: relative; }
.page-shell::before { background-image: linear-gradient(135deg, rgba(17,53,25,.22) 1px, transparent 1px); background-size: 1.5rem 1.5rem; content: ""; inset: 0; opacity: .18; pointer-events: none; position: absolute; }

/* Header navigation uses the same compact editorial spacing. */
.site-header { border-bottom: 1px solid var(--line); position: relative; z-index: 3; }
.navigation { align-items: center; display: flex; gap: 1rem; justify-content: space-between; padding: 1rem 1.25rem; }
.brand-mark { align-items: center; background: rgba(255,255,255,.7); border: 1px solid rgba(20,51,28,.1); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 .75rem 1.75rem rgba(17,52,24,.08); display: inline-flex; font-size: .875rem; font-weight: 700; gap: .5rem; padding: .5rem .75rem; }
.brand-symbol { align-items: center; background: linear-gradient(180deg,#2e6d39,#102d18); border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 4px rgba(0,0,0,.22); color: var(--lime); display: grid; font-size: 1.1rem; height: 1.75rem; place-items: center; width: 1.75rem; }
.nav-links { align-items: center; color: rgba(19,37,22,.6); display: flex; font-size: .75rem; font-weight: 700; gap: 2rem; }
.nav-links a, .access-link, .text-link, .button { transition: color .25s ease, background .25s ease, transform .25s ease; }
.nav-links a:hover, .text-link:hover { color: var(--ink); }
.access-link { background: #0e2113; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 6px rgba(0,0,0,.28), 0 .75rem 1.5rem rgba(16,50,24,.18); color: white; font-size: .75rem; font-weight: 700; padding: .625rem 1rem; }
.access-link:hover, .button-dark:hover { background: #173b20; }

/* The hero keeps a viewport-height art direction with structural grid marks. */
.hero-section { background: radial-gradient(circle at 15% 8%, rgba(232,255,208,.95), transparent 31%), radial-gradient(circle at 82% 18%, rgba(255,230,128,.45), transparent 24%), linear-gradient(180deg,#f2fde9 0%,#fffef7 74%); color: #050705; height: 100vh; min-height: 43.75rem; overflow: hidden; position: relative; }
#hero-canvas { height: 100%; inset: 0; pointer-events: none; position: absolute; width: 100%; z-index: 0; }
.hero-frame { border: 1px solid rgba(23,63,34,.1); inset: 1rem; pointer-events: none; position: absolute; z-index: 2; }
.frame-line { position: absolute; }
.frame-left, .frame-right { border-left: 1px solid rgba(23,63,34,.1); height: 100%; top: 0; }
.frame-left { left: 15%; }.frame-right { right: 15%; }.frame-middle { border-top: 1px solid rgba(23,63,34,.1); left: 0; opacity: .3; right: 0; top: 50%; }
.corner { height: .75rem; position: absolute; width: .75rem; }
.corner-tl { border-left: 1px solid rgba(23,63,34,.3); border-top: 1px solid rgba(23,63,34,.3); left: -1px; top: -1px; }.corner-tr { border-right: 1px solid rgba(23,63,34,.3); border-top: 1px solid rgba(23,63,34,.3); right: -1px; top: -1px; }.corner-bl { border-bottom: 1px solid rgba(23,63,34,.3); border-left: 1px solid rgba(23,63,34,.3); bottom: -1px; left: -1px; }.corner-br { border-bottom: 1px solid rgba(23,63,34,.3); border-right: 1px solid rgba(23,63,34,.3); bottom: -1px; right: -1px; }
.hero-meta { display: flex; font-size: .75rem; justify-content: space-between; left: 2.25rem; position: absolute; right: 2.25rem; z-index: 4; }
.hero-meta p { color: rgba(23,63,34,.6); font-weight: 500; line-height: 1.55; margin: 0; max-width: 12.5rem; }.hero-meta-top { align-items: center; top: 2.25rem; }.hero-meta-bottom { align-items: flex-end; bottom: 2.25rem; }
.hero-meta-top p { align-items: center; display: flex; gap: .75rem; letter-spacing: .12em; text-transform: uppercase; }.hero-meta-top p i { background: rgba(23,63,34,.4); border-radius: 50%; height: .375rem; width: .375rem; }
.hero-mode { display: flex; gap: 1.5rem; }.hero-mode button { background: transparent; color: rgba(23,63,34,.6); font-size: .75rem; font-weight: 500; padding: .25rem; }.hero-mode button:hover { color: var(--ink); }
.hero-meta-bottom > div { align-items: center; color: rgba(19,37,22,.6); display: flex; gap: 1rem; }.hero-meta-bottom button { background: transparent; border: 1px solid rgba(23,63,34,.1); border-radius: 50%; color: var(--pine-light); font-size: 1rem; height: 2rem; width: 2rem; }
.hero-copy { align-items: center; display: flex; inset: 0; justify-content: center; mix-blend-mode: multiply; pointer-events: none; position: absolute; z-index: 3; }.hero-copy h1 { color: #0a0c0a; font-size: clamp(6rem, 19vw, 16rem); font-weight: 500; letter-spacing: -.09em; line-height: .8; margin: 0; text-align: center; text-transform: uppercase; }.hero-copy em { background: linear-gradient(90deg,#161a16,#8b8e8d); background-clip: text; color: transparent; display: block; font-style: italic; font-weight: 500; margin-top: .08em; }
.card-cluster { height: 26.25rem; left: 50%; perspective: 1000px; position: absolute; top: 50%; transform: translate(-50%,-50%); transform-style: preserve-3d; width: 20rem; z-index: 2; }.asset-card { background: rgba(255,255,255,.4); border: 1px solid rgba(23,63,34,.1); border-radius: 1.5rem; box-shadow: 0 1.5rem 2.75rem rgba(23,63,34,.16); cursor: grab; inset: 0; padding: .25rem; position: absolute; touch-action: none; transform-style: preserve-3d; }.asset-card:active { cursor: grabbing; }.asset-card img { border-radius: 1.25rem; height: 100%; object-fit: cover; pointer-events: none; width: 100%; }

/* Reusable content spacing and editorial typography. */
.eyebrow { color: rgba(46,99,56,.65); font-size: .75rem; font-weight: 700; letter-spacing: .18rem; margin: 0; text-transform: uppercase; }.intro-section, .notes-section, .collection-section, .featured-story, .journal-section { border-top: 1px solid var(--line); position: relative; z-index: 1; }.intro-section { background: linear-gradient(180deg,#fffbea,#fffef9 66%); overflow: hidden; padding: 5rem clamp(1.25rem,5vw,4rem); }.intro-grid { align-items: center; display: grid; gap: 3rem; grid-template-columns: minmax(0,1fr) minmax(18rem,1fr); margin-top: 1.25rem; }.intro-copy h2, .notes-copy h2, .section-heading h2, .featured-story h2, .journal-copy h2, .newsletter-panel h2 { font-size: clamp(2.25rem,5vw,4rem); letter-spacing: -.06em; line-height: 1.05; margin: 0; }.intro-copy > p, .notes-copy > p, .section-heading p, .featured-story > div > p, .journal-copy > p, .newsletter-panel > div p { color: rgba(22,27,18,.7); font-size: .94rem; font-weight: 600; line-height: 1.75; margin: 1.5rem 0 0; max-width: 36rem; }.button-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }.button { align-items: center; border-radius: 999px; display: inline-flex; font-size: .75rem; font-weight: 700; gap: .5rem; padding: .85rem 1.25rem; }.button-dark { background: #0e2113; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 6px rgba(0,0,0,.28); color: white; }.button-light { background: rgba(255,255,255,.55); color: var(--ink); }.button-light:hover { background: white; transform: translateY(-2px); }
.intro-editorial { min-height: 34rem; position: relative; }.editorial-card { background: white; border: 1px solid rgba(255,255,255,.7); border-radius: 1.5rem; box-shadow: var(--soft-shadow); overflow: hidden; padding: .25rem; position: absolute; }.editorial-card img { border-radius: 1.15rem; height: 100%; object-fit: cover; width: 100%; }.editorial-main { height: 88%; left: 12%; top: 0; transform: rotate(3deg); width: 54%; }.editorial-side { bottom: 0; height: 52%; right: 2%; transform: rotate(-6deg); width: 38%; }.look-caption { bottom: 1rem; display: grid; font-size: .75rem; gap: .35rem; left: 0; position: absolute; }.look-caption strong { font-size: .85rem; }.look-caption span { color: rgba(22,27,18,.65); }.ribbon-gallery { display: grid; gap: 1rem; grid-template-columns: 1.15fr .85fr .7fr .8fr; margin-top: 4.5rem; }.ribbon-gallery img { border-radius: 1.5rem; box-shadow: var(--soft-shadow); height: 15rem; object-fit: cover; width: 100%; }.ribbon-gallery span { align-items: flex-end; color: rgba(22,27,18,.6); display: flex; font-size: .75rem; font-weight: 700; letter-spacing: .18rem; padding: 1rem 0; text-transform: uppercase; }

/* The notes section reproduces the warm cards and testimonial layout. */
.notes-section { background: #f8f5eb; display: grid; gap: 1.5rem; grid-template-columns: 1.2fr .8fr; overflow: hidden; padding: 4rem clamp(1.25rem,5vw,4rem); }.notes-gallery { display: grid; gap: 1rem; grid-template-columns: repeat(3,1fr); }.notes-gallery article { background: white; border: 1px solid rgba(255,255,255,.7); border-radius: 1.5rem; box-shadow: var(--soft-shadow); overflow: hidden; padding: .25rem; }.notes-gallery article:nth-child(2) { transform: translateY(2.75rem); }.notes-gallery article:nth-child(3) { transform: translateY(.75rem); }.notes-gallery img { border-radius: 1.15rem; height: 21rem; object-fit: cover; width: 100%; }.notes-copy { align-self: center; padding: 2rem; }.text-link { align-items: center; display: inline-flex; font-size: .75rem; font-weight: 700; gap: .5rem; margin-top: 2rem; }.portrait-strip { align-items: center; display: flex; grid-column: 1 / -1; justify-content: center; margin: 4rem 0 .5rem; }.portrait-strip img { border: 3px solid #f8f5eb; border-radius: 50%; height: 5rem; margin-left: -1rem; object-fit: cover; width: 5rem; }.portrait-strip img:first-child { margin-left: 0; }.testimonial-panel { background: #fffef7; border: 1px solid rgba(23,63,34,.1); border-radius: 1.75rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1rem 2.25rem rgba(68,47,10,.1); grid-column: 1 / -1; padding: clamp(1.5rem,4vw,3rem); }.testimonial-panel blockquote { font-size: clamp(1.6rem,3vw,2.5rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.2; margin: 0; max-width: 58rem; }.testimonial-footer { align-items: end; display: flex; justify-content: space-between; margin-top: 2rem; }.testimonial-footer p { display: grid; font-size: .75rem; gap: .35rem; margin: 0; }.testimonial-footer p span { color: rgba(22,27,18,.55); }.carousel-controls { display: flex; gap: .5rem; }.carousel-controls button { background: #f7f7f2; border: 1px solid var(--line); border-radius: 50%; height: 2.25rem; width: 2.25rem; }.carousel-controls button:hover { background: var(--yellow); }.newsletter-panel { align-items: start; background: #fffbed; border-radius: 1.75rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1rem 2.25rem rgba(68,47,10,.08); display: grid; gap: 2rem; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; margin-top: 2.25rem; padding: clamp(1.5rem,4vw,3rem); }.newsletter-panel h2 { font-size: clamp(1.8rem,3vw,2.75rem); }.newsletter-panel form { align-self: center; }.newsletter-panel label { display: block; font-size: .7rem; font-weight: 700; margin-bottom: .6rem; }.newsletter-panel form > div { background: white; border: 1px solid var(--line); border-radius: 999px; display: flex; overflow: hidden; padding: .3rem; }.newsletter-panel input { background: transparent; border: 0; flex: 1; font-size: .8rem; min-width: 0; outline: 0; padding: .65rem .8rem; }.newsletter-panel form button { background: var(--yellow); border-radius: 999px; color: var(--ink); font-size: .7rem; font-weight: 700; padding: .7rem 1rem; }.form-message { color: #315d39; font-size: .72rem; font-weight: 600; margin: .75rem 0 0; min-height: 1rem; }

/* Collection area uses a pale card grid and interactive category tabs. */
.collection-section { background: linear-gradient(180deg,#fffbea,#fffef9 66%); padding: 4rem clamp(1.25rem,5vw,4rem); }.section-heading { align-items: end; display: flex; gap: 2rem; justify-content: space-between; }.section-heading h2 { margin-top: .75rem; }.section-heading > div > p:last-child { margin-bottom: 0; }.section-heading .text-link { flex: none; margin: 0 0 .75rem; }.collection-tabs { background: rgba(255,255,255,.55); border: 1px solid rgba(24,61,32,.1); border-radius: 1.35rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 .75rem 2rem rgba(40,44,18,.06); display: grid; grid-template-columns: repeat(6,1fr); margin: 2.5rem 0 2rem; overflow: hidden; padding: .25rem; }.collection-tabs button { background: transparent; border-radius: 1rem; color: var(--ink); font-size: .72rem; font-weight: 700; min-height: 3rem; padding: .75rem; }.collection-tabs button[aria-selected="true"] { background: var(--yellow); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 6px rgba(128,98,0,.16), 0 .5rem 1.25rem rgba(184,139,0,.12); }.product-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4,1fr); }.product-grid article { background: white; border: 1px solid rgba(255,255,255,.7); border-radius: 1.5rem; box-shadow: var(--soft-shadow); overflow: hidden; padding: .25rem; }.product-grid img, .product-grid video { border-radius: 1.15rem; height: 18rem; object-fit: cover; transition: transform .7s ease; width: 100%; }.product-grid article:hover img, .product-grid article:hover video { transform: scale(1.03); }

/* Feature story mirrors the asymmetric two-column editorial content. */
.featured-story { align-items: center; background: linear-gradient(180deg,#fffbea 0%,#fffef9 66%); display: grid; gap: clamp(2rem,7vw,6rem); grid-template-columns: .9fr 1.1fr; padding: 5rem clamp(1.25rem,5vw,4rem); }.featured-story h2 { margin-top: .75rem; }.story-images { display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr; padding-bottom: 4rem; }.story-images article { background: white; border: 1px solid rgba(255,255,255,.7); border-radius: 1.5rem; box-shadow: var(--soft-shadow); overflow: hidden; padding: .25rem; }.story-images article:last-child { margin-top: 5rem; }.story-images img { border-radius: 1.15rem; height: 30rem; object-fit: cover; width: 100%; }.story-images article:last-child img { height: 25rem; }

/* O jornal usa uma divisão estrita entre texto editorial e imagem. */
.journal-section { background: white; display: grid; grid-template-columns: .9fr 1.1fr; }.journal-copy { padding: clamp(2rem,5vw,4rem); }.journal-copy h2 { font-size: clamp(2rem,4vw,3.2rem); margin-top: .6rem; }.journal-image { min-height: 27rem; overflow: hidden; padding: clamp(1.25rem,4vw,2.5rem); }.journal-image img { border: 1px solid rgba(255,255,255,.75); border-radius: 1.65rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 1.5rem 3rem rgba(22,68,32,.13); height: 100%; min-height: 24rem; object-fit: cover; width: 100%; }

/* Footer preserves the plant-green closing block from the original site. */
.site-footer { background: #98b988; padding: 2.5rem clamp(1.25rem,5vw,4rem); position: relative; z-index: 1; }.footer-grid { border-bottom: 1px solid rgba(23,63,34,.15); display: grid; gap: 2rem; grid-template-columns: 1.3fr repeat(3,.7fr); padding-bottom: 2.5rem; }.footer-brand { display: inline-block; font-size: 1.25rem; font-weight: 700; letter-spacing: -.05em; }.footer-grid p { color: rgba(16,35,21,.65); font-size: .75rem; font-weight: 600; line-height: 1.7; max-width: 18rem; }.footer-grid h3 { font-size: .75rem; margin: .25rem 0 1rem; }.footer-grid > div:not(:first-child) a { color: rgba(16,35,21,.65); display: block; font-size: .75rem; font-weight: 600; margin: .75rem 0; }.social-links { display: flex; gap: .5rem; margin-top: 1.25rem; }.social-links a { align-items: center; background: #13391d; border-radius: .5rem; color: white; display: grid; height: 2rem; place-items: center; width: 2rem; }.footer-bottom { align-items: center; color: rgba(16,35,21,.55); display: flex; font-size: .75rem; font-weight: 600; gap: 1rem; justify-content: space-between; padding-top: 1.5rem; }.footer-bottom > div { display: flex; gap: 1.25rem; }.footer-bottom p { margin: 0; }

/* Tablet and mobile rules preserve the same information hierarchy on narrow viewports. */
@media (max-width: 900px) { .nav-links { display: none; }.intro-grid, .featured-story, .journal-section { grid-template-columns: 1fr; }.intro-editorial { min-height: 30rem; }.notes-section { grid-template-columns: 1fr; }.notes-copy { padding: 1rem 0; }.newsletter-panel { grid-template-columns: 1fr 1fr; }.newsletter-panel form { grid-column: auto; }.product-grid { grid-template-columns: repeat(2,1fr); }.footer-grid { grid-template-columns: repeat(3,1fr); }.footer-grid > div:first-child { grid-column: 1 / -1; }.story-images { max-width: 42rem; }.journal-image { min-height: 24rem; } }
@media (max-width: 620px) { .site-shell { padding: 0; }.page-shell { border-radius: 0; }.curtain-card { border-radius: 1.5rem; }.hero-section { min-height: 38rem; }.hero-frame { inset: .75rem; }.frame-left, .frame-right { display: none; }.hero-meta { left: 1.5rem; right: 1.5rem; }.hero-mode { gap: .25rem; }.hero-mode button:last-child { display: none; }.hero-meta-bottom > p { max-width: 10rem; }.hero-copy h1 { font-size: clamp(5rem,25vw,8rem); }.card-cluster { height: 20rem; width: 15.5rem; }.intro-section, .notes-section, .collection-section, .featured-story { padding-bottom: 3rem; padding-top: 3rem; }.ribbon-gallery { grid-template-columns: 1fr 1fr; }.ribbon-gallery img { height: 11rem; }.ribbon-gallery img:nth-child(3) { display: none; }.notes-gallery img { height: 14rem; }.notes-gallery article:nth-child(2) { transform: translateY(1.5rem); }.newsletter-panel { grid-template-columns: 1fr; }.newsletter-panel form { grid-column: auto; }.section-heading { align-items: start; flex-direction: column; }.section-heading .text-link { margin: 0; }.collection-tabs { grid-template-columns: repeat(2,1fr); }.product-grid { grid-template-columns: 1fr 1fr; }.product-grid img, .product-grid video { height: 14rem; }.story-images { gap: .75rem; }.story-images article:last-child { margin-top: 2rem; }.story-images img { height: 20rem; }.story-images article:last-child img { height: 16rem; }.footer-grid { grid-template-columns: 1fr 1fr; }.footer-bottom { align-items: start; flex-direction: column; }.footer-bottom p { line-height: 1.6; } }

/* Reduced-motion users receive the full layout without nonessential movement. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }