/* ============================================================ Monet Morales Studio ------------------------------------------------------------ A quiet, image-led theme: warm paper background, a wide-tracked wordmark centered in the nav, and work presented in a narrow centered column with a lot of air around it. The reset + box-sizing lives inline in for fast first paint; everything else lives here. ============================================================ */ :root { /* --- Color --- */ --paper: #fdfbf3; /* warm cream page background */ --paper-deep: #f4eee0; /* linen, for empty photo slots */ --ink: #2b2620; /* warm near-black, all body text */ --ink-soft: #6e6559; /* captions, secondary copy */ --ink-faint: #a2988a; /* labels inside empty slots */ --rule: rgba(43, 38, 32, 0.13); /* --- Type --- */ --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; /* --- Layout --- */ --header-height: 74px; --gutter: clamp(1.25rem, 4vw, 3.25rem); /* The narrow reading/viewing column that most content sits in. Kept close to the photographs' native width so they aren't upscaled and softened. */ --column: min(500px, 84vw); /* Vertical rhythm between stacked work items. */ --stack-gap: clamp(5rem, 11vw, 10rem); } html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); background: var(--paper); } body { font-family: var(--sans); color: var(--ink); background: var(--paper); font-size: 16.5px; line-height: 1.8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.menu-open { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } /* Headings carry no look of their own — the type utilities below do the work. This keeps an unclassed

from falling back to bold browser defaults. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: 400; } /* ============================================================ Type utilities ============================================================ */ /* Small wide-tracked uppercase — nav, labels, project titles. */ .micro { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.4; } .eyebrow { font-size: 0.69rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.4; } /* The one genuinely large piece of type on the site. Deliberately restrained — the photographs carry the page, not the headline. */ .display { font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 400; line-height: 1.35; letter-spacing: -0.005em; } .lede { font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.75; color: var(--ink-soft); } /* Understated link underline that sits away from the baseline. */ .link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: var(--rule); transition: text-decoration-color 0.25s ease; } .link:hover { text-decoration-color: var(--ink); } /* ============================================================ Header — two links, wordmark, two links, spread edge to edge ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); height: var(--header-height); display: flex; align-items: center; padding-inline: var(--gutter); } .site-nav { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; } .site-nav a { color: var(--ink); } .nav-link { justify-self: center; color: var(--ink-soft); transition: color 0.25s ease; } .nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); } /* Wordmark sits in the middle column. */ .wordmark { justify-self: center; font-size: 0.95rem; letter-spacing: 0.3em; text-transform: uppercase; /* The tracking adds trailing space on the right; nudge back to center. */ text-indent: 0.3em; white-space: nowrap; } /* Hamburger — desktop-hidden, styling matches the rest of the header. */ .menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; margin-inline-start: auto; } .menu-toggle span { width: 22px; height: 1px; background: var(--ink); } .mobile-nav { position: fixed; inset: var(--header-height) 0 0 0; z-index: 49; background: var(--paper); display: flex; flex-direction: column; padding: 1.5rem var(--gutter); transform: translateX(100%); transition: transform 0.3s ease; } .mobile-nav.open { transform: translateX(0); } .mobile-nav a { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); } @media (max-width: 800px) { .site-nav { grid-template-columns: 1fr auto; } .nav-link { display: none; } .wordmark { justify-self: start; } .menu-toggle { display: flex; } } /* ============================================================ Page scaffolding ============================================================ */ /* The narrow centered column nearly everything sits in. */ .column { width: var(--column); margin-inline: auto; } /* A wider column for the occasional full-width image. */ .column--wide { width: min(1000px, 92vw); } .section { padding-block: clamp(3.5rem, 9vw, 7rem); } .section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); } .rule { border: 0; border-top: 1px solid var(--rule); margin-block: clamp(3rem, 7vw, 5rem); } /* ============================================================ Home — opening image and statement ============================================================ */ .opening { padding-top: clamp(2.5rem, 7vw, 5rem); padding-bottom: clamp(3rem, 8vw, 6rem); } .opening-figure { margin-bottom: clamp(2rem, 5vw, 3.25rem); } /* Fill the column, so the opening image lines up with the plates below it rather than sitting at its own natural width. */ .opening-figure img { width: 100%; } /* Full column width — a `ch` cap here would be measured in body-text size and would crush the much larger .display into a narrow ribbon. Cap the lede instead, where the unit actually matches the font it constrains. */ .opening-statement { text-align: center; } .opening-statement .eyebrow { margin-bottom: 1.1rem; } .opening-statement .display { margin-bottom: 1.1rem; } .opening-statement .lede { max-width: 40ch; margin-inline: auto; } /* ============================================================ Work — a vertical stack of plates in the narrow column ============================================================ */ .stack { display: flex; flex-direction: column; gap: var(--stack-gap); } .plate { display: block; } .plate-media { overflow: hidden; background: var(--paper-deep); } .plate-media img { width: 100%; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .plate:hover .plate-media img { transform: scale(1.02); } .plate-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; margin-top: 1.1rem; } .plate-title { color: var(--ink); } .plate-meta { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-soft); text-align: right; } /* Empty photo slot — deliberately plain, and labeled as a placeholder so nothing here reads as finished work. Replace with a real . */ .plate-media--empty { aspect-ratio: 3 / 4; display: grid; place-items: center; border: 1px solid var(--rule); background: var(--paper-deep); } .plate-media--empty span { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); } /* ============================================================ Studio — text page ============================================================ */ /* Space the paragraphs *inside* each entry — a `.prose > * + *` rule would only reach the .entry wrappers and leave their paragraphs running together. The
keeps its own larger margins by staying out of this selector. */ .entry > * + * { margin-top: 1.35rem; } .prose p { color: var(--ink-soft); } .prose .display { color: var(--ink); } .entry + .entry { margin-top: clamp(2.75rem, 6vw, 4rem); } .entry-heading { margin-bottom: 0.9rem; } /* Contact rows — label left, value right, hairline between. */ .detail-list { border-top: 1px solid var(--rule); } .detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding-block: 0.9rem; border-bottom: 1px solid var(--rule); } .detail-row dd { color: var(--ink-soft); text-align: right; } /* ============================================================ Footer ============================================================ */ .site-footer { border-top: 1px solid var(--rule); padding: clamp(2.5rem, 6vw, 4rem) var(--gutter); margin-top: clamp(3rem, 8vw, 6rem); } .footer-inner { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; justify-content: space-between; align-items: center; color: var(--ink-soft); } .footer-links { display: flex; gap: 1.75rem; flex-wrap: wrap; } /* ============================================================ Scroll-in fade — echoes the soft entrances on the reference site. Only applied once JS adds .reveal-ready, so with JS disabled everything is simply visible. ============================================================ */ .reveal-ready .reveal { opacity: 0; transform: translateY(14px); transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-ready .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal-ready .reveal { opacity: 1; transform: none; transition: none; } .plate-media img { transition: none; } .plate:hover .plate-media img { transform: none; } }