/* Hallmark · shape: Split Studio · genre: editorial · theme: Studio (deal 1/3, seed personal-romanian-freelance-web-b43e) · job: hire · draw: dbd8e5
 * hero: Stage · nav: edge-aligned · footer: mast · imagery: built demonstrative websites · signature: a visitor-controlled live visual direction
 * axes: light/roman-serif/warm · posture: restrained · contrast: pass · fold: pass · hero-review: subagent, 2 resolved · finish-review: subagent, 2 resolved · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S3 R4 V4 · weakest: S, made the website itself a working design sample rather than invented client evidence */
/* Hallmark · dismissed 58 · 88 Romanian words occur only where short FAQ controls meet labelled contact fields; each section remains concise and scannable */
@import url('./tokens.css');
@import url('./base.css');
:root { --sample-cream: #f6eddb; --sample-coffee: #632a1d; --sample-coral: #eab18a; --sample-sand: #eee8dc; --sample-brown: #584b3d; --sample-lilac: #c7b8e2; --sample-violet: #2f2443; --sample-lime: #d9eb7c; --sample-night: #142a23; --sample-shade-top: #142a2399; --sample-shade-mid: #142a2355; --sample-shade-base: #142a23ed; }
:root { --color-contact-rule: #46535c; --color-contact-muted: #aab7bd; --color-contact-focus: #e98239; --color-contact-secondary: #c7d2d7; --color-demo-paper: #e7e8e2; --color-demo-ink: #202822; --color-demo-rule: #bcc0b8; --color-demo-dark: #20372f; --color-demo-light: #f0f1e7; --color-demo-white: #fafbf8; --color-overlay: #101923a6; --color-focus: #a63d09; --container: 1440px; --text-display: clamp(3.6rem, 6.7vw, 6.6rem); --text-section: clamp(2.5rem, 4.2vw, 4.4rem); }
html { scroll-behavior: smooth; }
body { font-weight: 400; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }
a { text-decoration: none; }
button { color: inherit; cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
button:active, .button:active { transform: translateY(1px); }
.skip { position: absolute; top: -100px; left: 16px; z-index: var(--z-toast); background: var(--color-ink); color: var(--color-paper); padding: var(--space-sm) 20px; }
.skip:focus-visible { top: 12px; }
.site-header { display: flex; align-items: center; height: 100px; gap: var(--space-xl); }
.wordmark { display: inline-flex; align-items: baseline; gap: var(--space-2xs); font-family: var(--font-display); font-size: 39px; line-height: 1; letter-spacing: -.06em; }
.logo-mark { width: 9px; height: 9px; background: var(--color-accent); display: inline-block; }
.site-header nav { margin-left: auto; display: flex; align-items: center; gap: 32px; }
.site-header nav a, .nav-contact { display: inline-flex; align-items: center; min-height: 48px; font-size: 14px; white-space: nowrap; }
.site-header nav a:hover, .text-link:hover, .demo-bottom a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 5px; }
.nav-contact { border-bottom: 1px solid var(--color-ink); margin-left: var(--space-lg); }
.nav-contact:hover { border-color: var(--color-accent); }
.menu-toggle { display: none; background: none; border: 0; width: 48px; height: 48px; padding: var(--space-sm); }
.menu-toggle span { display: block; height: 1px; background: var(--color-ink); margin: var(--space-xs) 0; }
.hero { background-image: radial-gradient(circle at 1px 1px, var(--color-dot) .6px, transparent .9px); background-size: 24px 24px; }
.intro-layout { min-height: calc(100svh - 100px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 72px; padding-top: 48px; padding-bottom: 72px; }
.intro-copy { padding-bottom: var(--space-sm); }
.hero h1 { max-width: 10.5ch; line-height: .99; letter-spacing: -.045em; }
.intro-copy .lead { max-width: 31ch; margin-top: 28px; font-size: 19px; color: var(--color-ink-2); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xl); }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-lg); min-height: 52px; border: 1px solid var(--color-ink); border-radius: 2px; background: var(--color-accent); color: var(--color-accent-ink); font-size: 15px; font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 2px var(--color-paper); }
.button:hover { background: color-mix(in oklab, var(--color-accent) 85%, var(--color-paper)); }
.text-link { min-height: 48px; display: inline-flex; align-items: center; font-size: 14px; border-bottom: 1px solid var(--color-rule); white-space: nowrap; }
.hero-example { margin: 0; width: 100%; min-width: 0; }
.crop { position: relative; }
.crop::after { content: ''; position: absolute; inset: -9px; pointer-events: none; background: linear-gradient(var(--color-mark), var(--color-mark)) 0 9px / 6px 1px no-repeat, linear-gradient(var(--color-mark), var(--color-mark)) 9px 0 / 1px 6px no-repeat, linear-gradient(var(--color-mark), var(--color-mark)) 100% calc(100% - 9px) / 6px 1px no-repeat, linear-gradient(var(--color-mark), var(--color-mark)) calc(100% - 9px) 100% / 1px 6px no-repeat; }
.example-board { --demo-bg: var(--color-demo-paper); --demo-fg: var(--color-demo-ink); background: var(--demo-bg); color: var(--demo-fg); padding: var(--space-lg); overflow: visible; box-shadow: var(--shadow-sheet); }
.demo-top, .demo-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.demo-top { font-size: 11px; }
.demo-brand { font-family: var(--font-display); font-size: 30px; letter-spacing: -.06em; }
.demo-title { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 48px); line-height: 1.06; letter-spacing: -.035em; margin: 32px 0 var(--space-lg); }
.demo-image { overflow: clip; height: clamp(210px, 24vh, 290px); }
.demo-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.demo-bottom { font-size: 10px; margin-top: 20px; }
.demo-bottom a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.example-board[data-style='contrast'] { --demo-bg: var(--color-demo-dark); --demo-fg: var(--color-demo-light); }
.example-board[data-style='contrast'] .demo-title { font-family: var(--font-body); font-weight: 600; letter-spacing: -.06em; }
.example-board[data-style='minimal'] { --demo-bg: var(--color-demo-white); --demo-fg: var(--color-demo-ink); }
.example-board[data-style='minimal'] .demo-title { font-family: var(--font-body); font-weight: 400; font-size: clamp(25px, 2.9vw, 43px); }
.example-caption { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); font-size: 11px; color: var(--color-muted); }
.style-picker { display: flex; gap: var(--space-3xs); }
.style-picker button { font-size: 11px; border: 0; background: transparent; padding: 0 var(--space-xs); min-height: 44px; }
.style-picker button[aria-pressed='true'] { color: var(--color-ink); text-decoration: underline; text-underline-offset: 5px; }
.style-picker button:hover { background: var(--color-paper-2); }
@media(min-width: 1600px) { .intro-layout { min-height: 850px; } }
@media(max-width: 1100px) { .intro-layout { gap: var(--space-xl); } .hero-actions { gap: var(--space-md); } .hero h1 { font-size: clamp(3.5rem, 6.6vw, 5rem); } .example-caption { font-size: 12px; } }
@media(max-width: 800px) { .site-header { height: 80px; gap: var(--space-md); } .site-header nav { gap: var(--space-md); } .nav-contact { margin-left: var(--space-xs); } .intro-layout { min-height: auto; grid-template-columns: minmax(0, 1fr); gap: 56px; padding-top: var(--space-xl); padding-bottom: 72px; } .hero h1 { max-width: 12ch; font-size: clamp(3.7rem, 10vw, 6rem); } .intro-copy .lead { max-width: 38ch; } .hero-example { max-width: 620px; } .demo-title { font-size: clamp(36px, 6vw, 48px); } .demo-image { height: 280px; } .example-caption { font-size: 13px; } .style-picker button { font-size: 13px; padding-inline: var(--space-sm); } }
@media(max-width: 600px) { .site-header { position: relative; } .wordmark { font-size: 34px; } .nav-contact { margin-left: auto; font-size: 13px; } .menu-toggle { display: block; margin-right: calc(-1 * var(--space-xs)); } .site-header nav { display: none; position: absolute; top: 72px; left: var(--gutter); right: var(--gutter); z-index: var(--z-dropdown); background: var(--color-paper-hi); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); } .site-header nav.is-open { display: grid; gap: 0; } .site-header nav a { font-size: 16px; } .hero h1 { font-size: clamp(3.4rem, 11.6vw, 4.5rem); } .intro-copy .lead { font-size: 17px; } .hero-actions { gap: var(--space-md); margin-top: 28px; } .button { padding-inline: var(--space-md); font-size: 14px; } .text-link { font-size: 13px; } .example-board { padding: 20px; } .demo-title { margin-top: 32px; font-size: 37px; } .demo-image { height: 220px; } .demo-top { font-size: 10px; } .demo-bottom { font-size: 9px; gap: var(--space-xs); } .example-caption { align-items: flex-start; gap: 0; } .style-picker button:first-child { padding-left: 0; } }
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.example-caption { margin-top: 0; margin-bottom: var(--space-md); }
.menu-toggle { margin-right: calc(-1 * var(--space-xs)); }
.hero h1 { max-width: 12ch; }
.section { padding-block: var(--section-gap-s); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap-columns); margin-bottom: var(--space-2xl); }
.section-heading > p { color: var(--color-ink-2); max-width: 30ch; font-size: 16px; padding-bottom: var(--space-xs); }
.work { background: var(--color-paper-hi); }
.work-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: start; }
.project { min-width: 0; }
.project-journal { margin-top: var(--space-3xl); }
.project-visual { display: block; width: 100%; border: 0; padding: 0; text-align: left; position: relative; overflow: clip; min-height: 360px; aspect-ratio: 1.35; }
.architecture-project { background: var(--color-demo-ink); color: var(--color-demo-light); }
.architecture-project img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 65% center; }
.architecture-title { position: absolute; bottom: 28px; left: 32px; font-family: var(--font-display); font-size: 100px; line-height: 1; letter-spacing: -.06em; background: var(--color-demo-ink); padding: 0 var(--space-md) var(--space-xs); }
.project-open { position: absolute; right: 20px; top: 20px; border: 1px solid var(--color-demo-rule); width: 44px; height: 44px; display: grid; place-items: center; font-size: 25px; background: var(--color-paper-hi); color: var(--color-ink); border-radius: 50%; }
.project-open:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.project-open:focus-visible { outline: 2px solid var(--color-ink); outline-offset: -5px; }
.demo-bottom { font-size: 12px; flex-wrap: wrap; }
.journal-project { background: var(--color-demo-dark); color: var(--color-demo-light); padding: var(--space-lg); display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1.05; }
.journal-mast { font-family: var(--font-display); font-size: 42px; letter-spacing: -.05em; }
.journal-rule { border-bottom: 1px solid currentColor; opacity: .4; margin: var(--space-lg) 0; }
.journal-title { font-family: var(--font-display); font-size: clamp(42px, 4.5vw, 65px); line-height: 1.03; letter-spacing: -.04em; }
.journal-foot { margin-top: var(--space-xl); font-size: 12px; display: flex; justify-content: space-between; gap: var(--space-md); }
.project-caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); margin-top: var(--space-lg); }
.project-caption h3 { font-size: 30px; }
.project-caption p { grid-row: 2; color: var(--color-muted); font-size: 14px; }
.project-caption > span { grid-column: 2; grid-row: 1; color: var(--color-muted); align-self: center; font-size: 12px; }
.services { background: var(--color-paper-2); }
.services-layout, .questions-layout, .contact-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); }
.services-intro p { margin-top: var(--space-lg); max-width: 28ch; color: var(--color-ink-2); }
.services-intro .text-link { margin-top: var(--space-lg); }
details { border-bottom: 1px solid var(--color-rule); }
summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); cursor: pointer; list-style: none; min-height: 92px; padding-block: var(--space-lg); }
summary::-webkit-details-marker { display: none; }
summary > span { font-family: var(--font-body); font-weight: 400; flex-shrink: 0; font-size: 25px; width: 28px; text-align: center; }
details[open] > summary > span { transform: rotate(45deg); }
summary:hover { color: var(--color-muted); }
.service-list { border-top: 1px solid var(--color-ink); }
.service-list h3 { font-size: clamp(26px, 2.5vw, 36px); }
details > p { padding: 0 var(--space-xl) var(--space-lg) 0; color: var(--color-ink-2); max-width: 58ch; }
.process { padding-block: var(--section-gap); }
.process-list { list-style: none; counter-reset: steps; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.process-list li { counter-increment: steps; border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); }
.process-list li::before { content: '0' counter(steps); display: block; font-family: var(--font-display); font-size: 54px; line-height: 1; margin-bottom: var(--space-xl); color: var(--color-muted); }
.process-list h3 { font-size: 30px; }
.process-list p { max-width: 30ch; margin-top: var(--space-md); color: var(--color-ink-2); }
.questions { padding-top: 0; }
.faq-list { border-top: 1px solid var(--color-ink); }
.faq-list summary { min-height: 80px; font-size: 17px; }
.contact { background: var(--color-ink); color: var(--color-paper); --color-rule: var(--color-contact-rule); --color-muted: var(--color-contact-muted); --color-focus: var(--color-contact-focus); --color-ink-2: var(--color-contact-secondary); }
.contact h2 { color: inherit; }
.contact-copy > p { font-size: 19px; margin-top: var(--space-lg); color: var(--color-ink-2); }
#direct-contact { display: grid; justify-items: start; gap: var(--space-xs); margin-top: var(--space-xl); }
#direct-contact a { min-height: 44px; align-content: center; text-decoration: underline; text-underline-offset: 5px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.field { display: grid; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.field label { font-size: 14px; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; border: 1px solid var(--color-muted); background: transparent; color: var(--color-paper); border-radius: 2px; padding: var(--space-sm) var(--space-md); font-size: 16px; }
.field input, .field select { height: 52px; }
.field select { color-scheme: dark; }
.field select option { background: var(--color-ink); }
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); opacity: 1; }
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.form-note { font-size: 13px; color: var(--color-muted); margin-bottom: var(--space-lg); max-width: 53ch; }
.form-status { min-height: 1.55em; margin-top: var(--space-md); color: var(--color-paper); font-size: 14px; }
.site-footer { padding-block: var(--space-2xl) var(--space-lg); }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-columns); margin-bottom: var(--space-2xl); }
.footer-top .wordmark { font-size: 68px; }
.footer-top p { font-size: 14px; color: var(--color-ink-2); margin-right: auto; margin-left: var(--space-xl); }
.footer-bottom { border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); color: var(--color-muted); font-size: 12px; }
.footer-bottom a { text-decoration: underline; }
dialog { background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: 3px; width: min(620px, calc(100% - 32px)); padding: var(--space-xl); max-height: calc(100svh - 40px); overflow: auto; }
dialog::backdrop { background: var(--color-overlay); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); color: var(--color-muted); font-size: 14px; }
.close-dialog { background: none; border: 0; width: 48px; height: 48px; font-size: 30px; }
.close-dialog:hover { background: var(--color-paper-2); }
dialog h2 { font-size: 54px; margin-bottom: var(--space-lg); }
dialog ul { padding-left: var(--space-lg); margin-block: var(--space-lg); }
dialog li + li { margin-top: var(--space-xs); }
.dialog-note { font-size: 14px; color: var(--color-muted); margin-bottom: var(--space-lg); }
@media(max-width: 900px) { .project-visual { min-height: 300px; } .journal-title { font-size: 42px; } .journal-foot { font-size: 10px; } .services-layout, .questions-layout, .contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .services-intro .text-link { margin-top: var(--space-md); } .process-list h3 { font-size: 26px; } }
@media(max-width: 600px) { .section { padding-block: 72px; } .section-heading { display: block; margin-bottom: var(--space-xl); } .section-heading > p { margin-top: var(--space-lg); font-size: 15px; } .work-layout { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); } .project-journal { margin-top: 0; } .project-visual { min-height: 320px; } .journal-title { font-size: 52px; } .journal-foot { font-size: 12px; } .architecture-title { font-size: 80px; } .process-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } .process-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-lg); } .process-list li::before { font-size: 36px; margin-bottom: 0; } .process-list p { max-width: none; font-size: 15px; } .questions { padding-top: 0; } .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; } .footer-top { flex-wrap: wrap; margin-bottom: var(--space-xl); } .footer-top .wordmark { font-size: 56px; } .footer-top p { margin: 0; font-size: 12px; } .footer-top .text-link { margin-left: auto; } .footer-bottom { font-size: 11px; } dialog { padding: var(--space-lg); } .contact-copy > p { font-size: 17px; } .faq-list summary { font-size: 16px; } }

/* Five miniature brand worlds, framed by the existing editorial system. */
.template-gallery { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-2xl) var(--space-xl); align-items: start; }
.template-frame { position: relative; overflow: hidden; min-width: 0; padding: 28px; aspect-ratio: 1.12; container-type: inline-size; }
.template-frame .project-open { top: auto; bottom: 22px; right: 24px; z-index: 2; background: transparent; border-color: currentColor; color: inherit; }
.template-frame .project-open:hover { background: var(--color-paper-hi); color: var(--color-ink); }
.template-frame .project-open:focus-visible { outline-color: currentColor; }
.template-frame .sample-bottom { padding-right: 52px; }
.sample-nav, .sample-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); font-size: 11px; }
.sample-logo { font-family: var(--font-display); font-size: 30px; letter-spacing: -.06em; line-height: 1; }
.sample-nav { padding-bottom: var(--space-md); border-bottom: 1px solid color-mix(in srgb,currentColor 25%,transparent); }
.sample-bottom { min-height: 44px; font-size: 11px; }
.sample-bottom > span:last-child { font-size: 18px; }
.sample-index, .sample-eyebrow, .sample-small { font-size: 11px; font-family: var(--font-body); letter-spacing: 0; }
.sample-line { background: var(--color-demo-paper); color: var(--color-demo-ink); display: flex; flex-direction: column; }
.line-head { display: flex; justify-content: space-between; align-items: flex-end; margin-block: var(--space-lg); gap: var(--space-md); }
.line-head > span:first-child { font-family: var(--font-display); font-size: clamp(28px,6.6cqw,45px); line-height: 1.06; letter-spacing: -.045em; }
.sample-line > img { width: 100%; min-height: 0; flex: 1; object-fit: cover; }
.sample-line .sample-bottom { margin-top: var(--space-sm); }
.coffee-offset { margin-top: 80px; }
.sample-coffee { background: var(--sample-cream); color: var(--sample-coffee); display: flex; flex-direction: column; }
.coffee-head { position: relative; font-size: clamp(32px,7.4cqw,50px); font-family: var(--font-display); line-height: 1.06; letter-spacing: -.05em; margin-block: var(--space-lg); z-index: 1; }
.coffee-head > span { font-size: .77em; font-weight: 400; }
.coffee-art { position: relative; flex: 1; min-height: 130px; }
.coffee-art img { position: absolute; width: 100%; height: 100%; object-fit: cover; border-radius: 140px 140px 0 0; }
.coffee-seal { position: absolute; right: 18px; top: -22px; width: 90px; height: 90px; display: grid; place-content: center; border-radius: 50%; background: var(--sample-coral); font-size: 12px; line-height: 1.4; text-align: center; transform: rotate(12deg); }
.sample-coffee .sample-bottom { margin-top: var(--space-sm); }
.sample-beauty { background: var(--sample-sand); color: var(--sample-brown); display: flex; flex-direction: column; }
.sample-beauty .sample-logo { letter-spacing: .04em; }
.beauty-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; flex: 1; min-height: 0; gap: var(--space-md); margin-block: var(--space-lg); }
.beauty-content > div { z-index: 1; }
.beauty-content p { font-family: var(--font-display); font-size: clamp(32px,7.5cqw,54px); line-height: 1.03; letter-spacing: -.05em; margin-block: var(--space-lg); }
.beauty-content img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 140px 140px 0 0; }
.hotel-offset { margin-top: 80px; }
.sample-hotel { background: var(--sample-night); color: var(--sample-cream); display: flex; flex-direction: column; isolation: isolate; }
.hotel-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.sample-hotel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--sample-shade-top), var(--sample-shade-mid) 30%, var(--sample-shade-base)); z-index: -1; }
.sample-hotel .sample-logo { letter-spacing: .16em; font-size: 24px; }
.hotel-head { margin-top: auto; padding-block: var(--space-xl) var(--space-lg); }
.hotel-head p { font-family: var(--font-display); font-size: clamp(40px,10cqw,68px); line-height: 1; letter-spacing: -.04em; margin-top: var(--space-md); }
.sample-hotel .sample-bottom { border-top: 1px solid color-mix(in srgb,currentColor 30%,transparent); }
.project-wide { grid-column: 1 / -1; }
.sample-creative { background: var(--sample-lilac); color: var(--sample-violet); aspect-ratio: 2.5; padding: 32px; display: flex; flex-direction: column; }
.sample-creative .sample-logo { font-family: var(--font-body); font-weight: 600; font-size: 32px; letter-spacing: -.09em; }
.creative-content { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; flex: 1; min-height: 260px; gap: var(--space-xl); }
.creative-content > p { font-family: var(--font-body); font-size: clamp(42px,6.7cqw,85px); line-height: .98; letter-spacing: -.075em; font-weight: 500; }
.creative-content > p > span { font-family: var(--font-display); font-weight: 400; }
.creative-art { position: relative; height: 260px; }
.art-disc { position: absolute; height: 210px; width: 210px; border-radius: 50%; top: 25px; left: calc(50% - 105px); }
.disc-one { background: var(--sample-violet); transform: translateX(-55px); }
.disc-two { background: var(--sample-lime); transform: translateX(40px); }
.disc-three { border: 1px solid var(--sample-violet); transform: translate(4px,-20px); }
.art-label { position: absolute; left: 50%; top: 50%; transform: translate(-20%,-50%) rotate(-9deg); color: var(--sample-violet); font-size: 27px; font-weight: 600; line-height: .9; letter-spacing: -.06em; }
.sample-creative .sample-bottom { border-top: 1px solid color-mix(in srgb,currentColor 25%,transparent); padding-top: var(--space-sm); }
.sample-creative .sample-bottom > span:last-child { font-size: 12px; }
.form-trap { display: none; }
@media (max-width: 1100px) { .template-frame { padding: var(--space-lg); aspect-ratio: 1; } .sample-creative { aspect-ratio: auto; } .sample-nav { font-size: 10px; } .coffee-offset,.hotel-offset { margin-top: 56px; } .beauty-content p { margin-block: var(--space-md); } .sample-eyebrow,.sample-small { font-size: 10px; } }
@media (max-width: 760px) { .template-gallery { grid-template-columns: minmax(0,1fr); gap: 44px; } .coffee-offset,.hotel-offset { margin-top: 0; } .template-frame { aspect-ratio: 1.12; } .sample-creative { aspect-ratio: auto; } .creative-content { grid-template-columns: 1fr; gap: var(--space-md); padding-top: var(--space-xl); } .creative-content > p { font-size: clamp(42px,9cqw,68px); } .creative-art { height: 240px; } .sample-nav { font-size: 11px; } .sample-eyebrow,.sample-small { font-size: 11px; } .project-caption { margin-top: var(--space-md); } .project-caption h3 { font-size: 27px; } .project-caption p { font-size: 12px; } }
@media (max-width: 400px) { .template-frame { aspect-ratio: auto; min-height: 350px; padding: 20px; } .sample-nav { gap: var(--space-xs); font-size: 9px; } .sample-logo { font-size: 26px; } .sample-line > img { height: 160px; flex: none; } .sample-bottom { font-size: 9px; } .sample-eyebrow,.sample-small { font-size: 9px; } .beauty-content { min-height: 230px; } .sample-coffee .coffee-head { font-size: 32px; } .coffee-art { min-height: 135px; } .coffee-seal { width: 72px; height: 72px; font-size: 10px; } .sample-creative .sample-bottom > span:last-child { display: none; } .project-caption > span { font-size: 10px; } }
@media (max-width: 1100px) { .template-frame:not(.sample-creative) { min-height: 400px; } }
.template-frame .sample-nav, .template-frame .sample-bottom { flex-shrink: 0; }
.template-frame:hover { text-decoration: none; }
.template-frame:hover .project-open { background: var(--color-paper-hi); color: var(--color-ink); }
.template-frame:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
.project-caption > span a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.project-caption h3 a:hover { text-decoration: underline; text-underline-offset: 5px; }

.site-header .wordmark { flex-shrink: 0; }
@media(max-width: 600px) { .site-header { gap: var(--space-sm); } .site-header .wordmark { font-size: 27px; } .site-header .nav-contact { font-size: 12px; } }

/* Audit refinement: quieter controls, clearer gallery hierarchy and resilient navigation. */
.button { border-color: transparent; box-shadow: none; border-radius: 4px; }
.hero .button { padding-inline: 28px; }
.intro-layout { min-height: min(760px, calc(100svh - 100px)); }
.example-caption { gap: var(--space-sm); flex-wrap: wrap; }
.style-picker { gap: var(--space-xs); }
.style-picker button { min-height: 44px; padding-inline: var(--space-sm); border-radius: 3px; }
.style-picker button[aria-pressed='true'] { background: var(--color-paper-hi); text-decoration-color: var(--color-accent); text-underline-offset: 5px; }
.template-frame { overflow: clip; }
.template-frame .project-open { transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short); }
.template-frame:hover .project-open { transform: rotate(45deg); }
.project-caption { padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.project-caption > span { color: var(--color-ink); font-size: 13px; }
.project-caption p { font-size: 14px; line-height: 1.6; }
.sample-bottom > span:last-child { font-size: inherit; }
.art-label { font-size: 25px; letter-spacing: -.04em; line-height: 1.08; }
.field-error { color: var(--color-contact-secondary); font-size: 13px; line-height: 1.5; }
.field-error:empty { display: none; }
.field input, .field textarea, .field select { border-color: var(--color-contact-rule); background: color-mix(in srgb, var(--color-paper) 4%, transparent); border-radius: 4px; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--color-muted); }
.field input:disabled, .field textarea:disabled, .field select:disabled { background: var(--color-contact-rule); color: var(--color-contact-secondary); cursor: wait; }
.form-status:not(:empty) { border-left: 2px solid var(--color-accent); padding: var(--space-sm) var(--space-md); background: color-mix(in srgb, var(--color-paper) 5%, transparent); }
.form-status[data-state='success'] { border-color: var(--color-contact-secondary); }
.contact .button:focus-visible { outline-offset: 5px; }
.error-page { min-height: 75svh; display: grid; align-content: center; padding-block: var(--space-3xl); }
.error-page p { margin-block: var(--space-lg); max-width: 48ch; }
.error-page .button { justify-self: start; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .button { transition: background-color var(--dur-short), transform var(--dur-short) var(--ease-out); }
  .button:hover { transform: translateY(-2px); }
  .button:active { transform: translateY(1px); }
}
@media (max-width:800px) {
  .site-header { position: relative; height: auto; min-height: 88px; flex-wrap: wrap; gap: var(--space-sm); }
  .site-header .wordmark { font-size: 30px; }
  .nav-contact { margin-left: auto; }
  .site-header nav { position: static; display: flex; flex-basis: 100%; order: 4; gap: var(--space-lg); padding: 0 0 var(--space-md); border: 0; background: none; margin: 0; }
  .site-header nav a { font-size: 14px; }
  .menu-toggle { display: none; flex-shrink: 0; }
  .js .menu-toggle { display: block; }
  .js .site-header nav { display: none; position: absolute; top: calc(100% - 4px); left: var(--gutter); right: var(--gutter); background: var(--color-paper-hi); border: 1px solid var(--color-rule); padding: var(--space-sm) var(--space-lg); z-index: var(--z-dropdown); }
  .js .site-header nav.is-open { display: grid; gap: 0; }
  .menu-toggle[aria-expanded='true'] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .menu-toggle[aria-expanded='true'] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .intro-layout { min-height: auto; }
  .style-picker button { font-size: 13px; }
}
@media (max-width:400px) {
  .site-header .wordmark { font-size: 27px; }
  .site-header .nav-contact { font-size: 12px; }
  .project-caption p { font-size: 13px; }
  .project-caption > span { font-size: 12px; }
}