/* ─────────────────────────────────────────────────────────────────
Shané L. Photography — shared + direction styles
───────────────────────────────────────────────────────────────── */
/* image-slot defaults: dim warm muted, monospace placeholder caption */
/* Slots are always interactive — never let a sibling overlay block clicks. */
image-slot { position: relative; z-index: 1; }
image-slot {
--is-placeholder-bg: rgba(122, 106, 82, 0.10);
--is-placeholder-fg: rgba(243, 237, 226, 0.55);
--is-placeholder-stripe: rgba(243, 237, 226, 0.04);
background: var(--is-placeholder-bg);
font-family: 'JetBrains Mono', monospace !important;
font-size: 10px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--is-placeholder-fg) !important;
}
/* Smooth scroll-in animations (used across all directions) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.2s cubic-bezier(.22,.61,.36,1), transform 1.2s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-slow { transition-duration: 1.6s; }
.reveal-fast { transition-duration: 0.7s; }
.reveal-up-sm { transform: translateY(14px); }
.reveal-left { transform: translateX(-32px); }
.reveal-left.in { transform: none; }
/* ─── CINEMATIC ────────────────────────────────────────────────── */
/* Quiet-luxury palette (scoped to cinematic / default direction) */
.cin {
--ql-bg: #FDFBF7; /* premium warm cream */
--ql-bg2: #EFE9DC; /* secondary / depth */
--ql-text: #2B2B2B; /* soft black body */
--ql-head: #1C2E24; /* deep Texas forest green — headings */
--ql-muted: #8A8273; /* muted warm grey */
--ql-accent: #C49A45; /* warm trophy gold — fine accents */
--ql-cta: #1C2E24; /* forest green — buttons */
--ql-cta-hover: #142019; /* darker green hover */
--ql-line: rgba(28, 46, 36, 0.16);
background: var(--ql-bg);
color: var(--ql-text);
font-family: 'Lato', system-ui, sans-serif;
font-weight: 400;
font-size: 17px;
line-height: 1.7;
letter-spacing: 0;
}
.cin h1, .cin h2, .cin h3, .cin .serif {
font-family: 'Cinzel', serif;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ql-head);
}
.cin h1 em, .cin h2 em, .cin h3 em { font-style: normal; }
.cin .mono { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.cin .brass { color: var(--ql-accent); }
.cin a { text-decoration: none; }
.cin-nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
display: flex; justify-content: space-between; align-items: center;
padding: 18px 44px;
background: rgba(244, 239, 230, 0.88);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--ql-line);
}
.cin-nav .logo { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 22px; letter-spacing: 0.01em; color: var(--ql-text); }
.cin-nav .logo em { font-style: italic; color: var(--ql-accent); }
.cin-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 36px; align-items: center; }
.cin-nav ul a { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ql-text); opacity: 0.75; transition: opacity 0.2s, color 0.2s; }
.cin-nav ul a:hover { opacity: 1; color: var(--ql-accent); }
/* Last nav item = forest-green CTA block */
.cin-nav ul li:last-child a {
opacity: 1; color: #FDFBF7; background: var(--ql-cta);
padding: 11px 22px; border-radius: 0; letter-spacing: 0.15em; border: 2px solid var(--ql-cta);
transition: background 0.3s ease, color 0.3s ease;
}
.cin-nav ul li:last-child a:hover { background: transparent; color: var(--ql-cta); }
.cin-hero { position: relative; height: 100vh; min-height: 720px; overflow: hidden; }
.cin-hero image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Keep a soft scrim so the headline reads over the photograph */
.cin-hero .vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,24,20,0.28) 0%, transparent 26%, transparent 48%, rgba(28,24,20,0.72) 100%); pointer-events: none; }
.cin-hero .copy { position: absolute; left: 44px; right: 44px; bottom: 56px; z-index: 2; pointer-events: none; }
.cin-hero .copy a, .cin-hero .copy button { pointer-events: auto; }
.cin-hero .kicker { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: #D9B65C; margin-bottom: 18px; }
.cin-hero h1 { font-family: 'Cinzel', serif; font-size: clamp(34px, 5vw, 74px); line-height: 1.12; margin: 0 0 24px; color: #FDFBF7; letter-spacing: 0.04em; }
.cin-hero h1 em { font-style: normal; color: #D9B65C; }
.cin-hero .lede { max-width: 620px; font-size: 18px; line-height: 1.6; color: rgba(244, 239, 230, 0.9); }
.cin-hero .cta-row { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.cin-hero .btn-primary { background: var(--ql-cta); color: #FDFBF7; border: 2px solid var(--ql-cta); padding: 16px 36px; border-radius: 0; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; transition: all 0.3s ease; }
.cin-hero .btn-primary:hover { background: #FDFBF7; color: var(--ql-cta); border-color: #FDFBF7; }
.cin-hero .btn-primary:active { transform: translateY(1px); }
.cin-hero .btn-secondary { border: 2px solid rgba(253, 251, 247, 0.6); color: #FDFBF7; padding: 16px 36px; border-radius: 0; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; transition: all 0.3s ease; }
.cin-hero .btn-secondary:hover { background: rgba(253, 251, 247, 0.12); border-color: #FDFBF7; }
.cin-hero .meta { position: absolute; right: 44px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; font-family: 'Lato', sans-serif; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(244, 239, 230, 0.7); white-space: nowrap; pointer-events: none; z-index: 2; }
.cin-hero .scroll { position: absolute; left: 44px; bottom: 56px; display: none; }
.cin-section { padding: 130px 44px; max-width: 1480px; margin: 0 auto; }
/* Commercial service banner (above gallery) */
.cin-svcbar { background: var(--ql-head); color: #FDFBF7; padding: 70px 44px; text-align: center; }
.cin-svcbar-inner { max-width: 1100px; margin: 0 auto; }
.cin-svcbar .svc-labels { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.cin-svcbar .svc-labels span { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(19px, 2.1vw, 28px); color: #FDFBF7; letter-spacing: 0.005em; }
.cin-svcbar .svc-labels i { width: 6px; height: 6px; background: var(--ql-accent); border-radius: 50%; display: inline-block; flex: none; }
.cin-svcbar p { margin: 22px auto 0; max-width: 62ch; color: rgba(253, 251, 247, 0.82); font-size: 17px; line-height: 1.6; }
/* B2B value-proposition band */
.cin-value { max-width: 1480px; margin: 0 auto; padding: 110px 44px; border-bottom: 1px solid var(--ql-line); }
.cin-statement { font-family: 'Playfair Display', serif; font-weight: 500; font-size: clamp(26px, 3vw, 40px); line-height: 1.32; letter-spacing: -0.01em; color: var(--ql-text); max-width: 26ch; margin: 8px 0 72px; }
.cin-statement em { font-style: italic; color: var(--ql-accent); }
.cin-value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 56px; margin-top: 8px; }
.cin-value-item .vn { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ql-accent); margin-bottom: 20px; }
.cin-value-item .vn span { color: var(--ql-muted); }
.cin-value-item h3 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 27px; line-height: 1.12; margin: 0 0 14px; color: var(--ql-head); }
.cin-value-item p { color: var(--ql-text); opacity: 0.82; font-size: 16px; line-height: 1.65; margin: 0; max-width: 40ch; }
.cin-section.tight { padding: 100px 44px; }
.cin-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ql-accent); }
.cin-eyebrow .rule { flex: 0 0 48px; height: 1px; background: var(--ql-accent); }
.cin-gallery h2 { font-size: clamp(38px, 5vw, 68px); margin: 0 0 80px; max-width: 760px; line-height: 1.08; }
.cin-gallery h2 em { font-style: italic; color: var(--ql-accent); }
.cin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.cin-frame { position: relative; }
.cin-frame.tall image-slot { aspect-ratio: 3/4; }
.cin-frame.wide image-slot { aspect-ratio: 16/10; }
.cin-frame.square image-slot { aspect-ratio: 1/1; }
.cin-frame.offset-down { margin-top: 96px; }
.cin-frame.offset-up { margin-top: -48px; }
.cin-frame image-slot { width: 100%; height: auto; border-radius: 0; border: 1px solid rgba(28, 46, 36, 0.12); box-shadow: 0 6px 22px rgba(0,0,0,0.05); transition: transform 0.45s cubic-bezier(.22,.61,.36,1), box-shadow 0.45s; }
.cin-frame:hover image-slot { transform: scale(1.02); box-shadow: 0 14px 34px rgba(0,0,0,0.12); }
.cin-caption { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-family: 'Lato', sans-serif; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ql-muted); }
.cin-caption .title { color: var(--ql-text); }
.cin-grid-full image-slot { width: 100%; aspect-ratio: 21/9; margin: 48px 0; }
/* Gallery use-case group label */
.cin-group { max-width: 720px; margin: 72px 0 30px; }
.cin-group-eyebrow { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ql-accent); display: block; margin-bottom: 12px; }
.cin-group h3 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 10px; }
.cin-group p { font-family: 'Lato', sans-serif; color: var(--ql-text); opacity: 0.82; font-size: 16px; line-height: 1.6; margin: 0; }
/* Full-width hero feature image (anchors the gallery) */
.cin-frame-feature { margin: 0 0 8px; }
.cin-frame-feature image-slot { width: 100%; height: auto; aspect-ratio: 3/2; display: block; }
/* Portrait variant — centered, not full-bleed, no crop */
.cin-frame-feature.portrait { max-width: 760px; margin-left: auto; margin-right: auto; }
.cin-frame-feature.portrait image-slot { aspect-ratio: 3/4; }
/* Full-width frame with natural aspect (no forced ratio) — used for landscape hero pieces in the gallery flow */
.cin-frame-fullwide { margin: 48px 0; }
.cin-frame-fullwide image-slot { width: 100%; height: auto; aspect-ratio: 4/3; display: block; }
.cin-about { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
.cin-about image-slot { width: 100%; aspect-ratio: 3/4; border-radius: 2px; }
.cin-about h2 { font-size: clamp(34px, 4.5vw, 56px); line-height: 1.08; margin: 0 0 28px; }
.cin-about h2 em { font-style: italic; color: var(--ql-accent); }
.cin-about p { color: var(--ql-text); opacity: 0.86; margin: 0 0 18px; max-width: 56ch; }
.cin-about .sig { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700; font-size: 28px; margin-top: 32px; color: var(--ql-accent); }
.cin-services h2 { font-size: clamp(38px, 5vw, 68px); line-height: 1.08; margin: 0 0 18px; max-width: 760px; }
.cin-services h2 em { font-style: italic; color: var(--ql-accent); }
.cin-services .svc-intro { color: var(--ql-text); opacity: 0.8; max-width: 56ch; margin: 0 0 56px; font-size: 18px; }
/* Premium package cards */
.cin-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.cin-pkg { display: flex; flex-direction: column; background: var(--ql-bg2); border: 1px solid var(--ql-line); border-radius: 3px; padding: 38px 32px; transition: transform 0.4s cubic-bezier(.22,.61,.36,1), box-shadow 0.4s; }
.cin-pkg.featured { background: #F0EAD9; border-color: rgba(196, 154, 69, 0.5); box-shadow: 0 1px 0 rgba(196, 154, 69, 0.45) inset; }
.cin-pkg:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(74, 69, 63, 0.5); }
.cin-pkg .tier { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ql-accent); margin-bottom: 18px; }
.cin-pkg .tier .badge { float: right; background: var(--ql-accent); color: #fff; padding: 3px 10px; border-radius: 999px; font-size: 9px; letter-spacing: 0.14em; }
.cin-pkg h3 { font-size: 27px; line-height: 1.1; margin: 0 0 16px; }
.cin-pkg .pkg-num { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.22em; color: var(--ql-accent); margin-bottom: 14px; }
.cin-pkg .pkg-desc { color: var(--ql-text); opacity: 0.85; font-size: 15px; line-height: 1.6; margin: 0 0 22px; }
.cin-pkg .pkg-incl { margin: 0 0 28px; flex: 1; }
.cin-pkg .pkg-incl span { display: block; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ql-accent); margin-bottom: 7px; }
.cin-pkg .pkg-incl p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ql-text); opacity: 0.8; }
.cin-pkg .price-block { margin-top: auto; padding-top: 4px; }
.cin-pkg .rate { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 20px; line-height: 1.1; color: var(--ql-head); }
.cin-pkg .rate strong { font-size: 28px; }
.cin-pkg .rate-sub { font-family: 'Lato', sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ql-muted); margin-top: 8px; }
.cin-pkg .pkg-cta { margin-top: 26px; display: inline-block; text-align: center; background: transparent; border: 2px solid var(--ql-cta); color: var(--ql-cta); padding: 14px 22px; border-radius: 0; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; transition: all 0.3s ease; }
.cin-pkg .pkg-cta:hover { background: var(--ql-cta); color: #FDFBF7; }
.cin-pkg.featured .pkg-cta { background: var(--ql-cta); color: #FDFBF7; border-color: var(--ql-cta); }
.cin-pkg.featured .pkg-cta:hover { background: transparent; color: var(--ql-cta); }
.cin-services .svc-note { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--ql-line); color: var(--ql-muted); font-size: 15px; }
.cin-services .svc-note em { font-style: italic; color: var(--ql-text); }
.cin-contact { background: var(--ql-bg2); padding: 130px 44px; }
.cin-contact .wrap { max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: start; }
.cin-contact h2 { font-size: clamp(44px, 6vw, 84px); line-height: 1.0; margin: 0 0 24px; }
.cin-contact h2 em { font-style: italic; color: var(--ql-accent); }
.cin-contact .lede { color: var(--ql-text); opacity: 0.84; max-width: 40ch; margin-bottom: 32px; font-size: 18px; }
.cin-contact .contact-list { font-family: 'Lato', sans-serif; font-size: 13px; letter-spacing: 0.04em; color: var(--ql-text); display: grid; gap: 14px; }
.cin-contact .contact-list span { color: var(--ql-muted); margin-right: 14px; text-transform: uppercase; font-size: 11px; letter-spacing: 0.16em; display: inline-block; min-width: 48px; }
.cin-form { display: grid; gap: 20px; background: var(--ql-bg); border: 1px solid var(--ql-line); border-radius: 3px; padding: 36px; }
.cin-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cin-form label { display: grid; gap: 8px; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ql-muted); }
.cin-form input, .cin-form select, .cin-form textarea {
appearance: none; background: #fff; border: 1px solid var(--ql-line); border-radius: 2px;
color: var(--ql-text); font: 400 16px/1.5 'Lato', sans-serif; padding: 13px 14px; outline: none; width: 100%;
transition: border-color 0.25s, box-shadow 0.25s;
}
.cin-form input:focus, .cin-form select:focus, .cin-form textarea:focus { border-color: var(--ql-accent); box-shadow: 0 0 0 3px rgba(196, 154, 69, 0.16); }
.cin-form textarea { resize: vertical; min-height: 104px; }
.cin-form select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 32px; }
.cin-form select option { background: #fff; color: var(--ql-text); }
.cin-form button {
margin-top: 8px; justify-self: start;
appearance: none; border: 2px solid var(--ql-cta); background: var(--ql-cta); color: #FDFBF7;
font-family: 'Lato', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
padding: 16px 40px; border-radius: 0; cursor: pointer; transition: all 0.3s ease;
}
.cin-form button:hover { background: transparent; color: var(--ql-cta); }
.cin-form button:active { transform: translateY(1px); }
.cin-form button:disabled { opacity: 0.6; cursor: default; }
.cin-foot { padding: 40px 44px; border-top: 1px solid var(--ql-line); display: flex; justify-content: space-between; align-items: center; font-family: 'Lato', sans-serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ql-muted); background: var(--ql-bg); }
/* ─── EDITORIAL ────────────────────────────────────────────────── */
.ed {
background: var(--c-bone);
color: var(--c-ink);
font-family: 'Newsreader', serif;
font-weight: 400;
font-size: 17px;
line-height: 1.6;
}
.ed h1, .ed h2, .ed h3 {
font-family: 'Newsreader', serif; font-weight: 400; letter-spacing: -0.015em;
}
.ed .mono { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.ed em.italic { font-style: italic; font-family: 'Newsreader', serif; }
.ed a { text-decoration: none; color: inherit; }
.ed-nav {
position: sticky; top: 0; z-index: 50;
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
padding: 16px 40px;
background: rgba(243, 237, 226, 0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(26, 22, 18, 0.08);
}
.ed-nav .mast { font-family: 'Newsreader', serif; font-weight: 500; font-size: 18px; letter-spacing: 0.01em; }
.ed-nav .mast em { font-style: italic; color: var(--c-taupe); }
.ed-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; justify-self: center; }
.ed-nav ul a { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-shadow); }
.ed-nav ul a:hover { color: var(--c-brass); }
.ed-nav .right { justify-self: end; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-taupe); }
.ed-mast {
padding: 40px 40px 0;
display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 24px;
border-bottom: 1px solid rgba(26, 22, 18, 0.12);
}
.ed-mast .vol { grid-column: 1 / 13; display: flex; justify-content: space-between; align-items: baseline; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-taupe); margin-bottom: 12px; }
.ed-mast .title { grid-column: 1 / 13; font-size: clamp(80px, 11vw, 184px); line-height: 0.92; margin: 0; letter-spacing: -0.03em; }
.ed-mast .title em { font-style: italic; color: var(--c-taupe); }
.ed-mast .lede-block { grid-column: 1 / 5; padding: 32px 0 56px; }
.ed-mast .lede-block p { font-size: 22px; line-height: 1.4; margin: 0; }
.ed-mast .lede-block .drop::first-letter { font-size: 64px; line-height: 0.85; float: left; padding: 8px 8px 0 0; font-weight: 500; }
.ed-mast .lede-block .by { margin-top: 24px; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-taupe); }
.ed-mast .hero-img { grid-column: 5 / 13; padding-bottom: 48px; }
.ed-mast .hero-img image-slot { width: 100%; aspect-ratio: 4/3; --is-placeholder-bg: rgba(26, 22, 18, 0.06); --is-placeholder-fg: rgba(26, 22, 18, 0.5); }
.ed-mast .hero-img .cap { display: flex; justify-content: space-between; margin-top: 12px; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-taupe); }
.ed-section { padding: 96px 40px; max-width: 1640px; margin: 0 auto; }
.ed-section .eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-taupe); }
.ed-section .eyebrow .rule { flex: 1; height: 1px; background: rgba(26, 22, 18, 0.18); }
.ed-section .eyebrow .rule.short { flex: 0 0 64px; }
.ed-section h2 { font-size: clamp(48px, 6vw, 96px); line-height: 0.98; margin: 0 0 64px; letter-spacing: -0.02em; max-width: 18ch; }
.ed-section h2 em { font-style: italic; color: var(--c-taupe); }
.ed-gallery .grid {
display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
border-top: 1px solid rgba(26, 22, 18, 0.12); padding-top: 48px;
}
.ed-tile image-slot { width: 100%; --is-placeholder-bg: rgba(26, 22, 18, 0.06); --is-placeholder-fg: rgba(26, 22, 18, 0.5); }
.ed-tile .cap { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 14px; }
.ed-tile .cap .t { font-family: 'Newsreader', serif; font-style: italic; font-size: 16px; }
.ed-tile .cap .m { font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-taupe); white-space: nowrap; }
.ed-t1 { grid-column: 1 / 8; } .ed-t1 image-slot { aspect-ratio: 4/3; }
.ed-t2 { grid-column: 8 / 13; padding-top: 64px; } .ed-t2 image-slot { aspect-ratio: 3/4; }
.ed-t3 { grid-column: 1 / 5; } .ed-t3 image-slot { aspect-ratio: 3/4; }
.ed-t4 { grid-column: 5 / 11; } .ed-t4 image-slot { aspect-ratio: 4/3; }
.ed-t5 { grid-column: 11 / 13; padding-top: 32px; } .ed-t5 image-slot { aspect-ratio: 2/3; }
.ed-t6 { grid-column: 1 / 13; } .ed-t6 image-slot { aspect-ratio: 21/9; }
.ed-about { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: start; }
.ed-about .pic { grid-column: 1 / 5; }
.ed-about .pic image-slot { width: 100%; aspect-ratio: 3/4; --is-placeholder-bg: rgba(26, 22, 18, 0.06); --is-placeholder-fg: rgba(26, 22, 18, 0.5); }
.ed-about .pic .cap { font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-taupe); margin-top: 12px; }
.ed-about .copy { grid-column: 6 / 13; }
.ed-about .drop { font-size: 24px; line-height: 1.45; }
.ed-about .drop::first-letter { font-family: 'Newsreader', serif; font-style: italic; font-size: 96px; line-height: 0.85; float: left; padding: 12px 14px 0 0; color: var(--c-taupe); }
.ed-about .cols { columns: 2; column-gap: 32px; margin-top: 24px; font-size: 16px; line-height: 1.65; }
.ed-about .cols p { margin: 0 0 14px; break-inside: avoid; }
.ed-about .sig { font-style: italic; font-size: 28px; color: var(--c-taupe); margin-top: 32px; }
.ed-services .list { border-top: 1px solid var(--c-ink); }
.ed-svc { display: grid; grid-template-columns: 60px 4fr 5fr 160px; gap: 32px; align-items: baseline; padding: 32px 0; border-bottom: 1px solid rgba(26, 22, 18, 0.18); }
.ed-svc .n { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.16em; color: var(--c-taupe); }
.ed-svc h3 { font-size: 32px; margin: 0; line-height: 1.05; }
.ed-svc h3 em { font-style: italic; color: var(--c-taupe); }
.ed-svc .d { font-size: 15px; line-height: 1.55; color: var(--c-shadow); }
.ed-svc .p { font-family: 'Newsreader', serif; font-style: italic; font-size: 22px; text-align: right; }
.ed-svc .p small { display: block; font-style: normal; font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.18em; color: var(--c-taupe); text-transform: uppercase; margin-top: 4px; }
.ed-contact {
background: var(--c-ink); color: var(--c-bone);
padding: 96px 40px;
}
.ed-contact .wrap { max-width: 1640px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; }
.ed-contact .left { grid-column: 1 / 7; }
.ed-contact h2 { font-size: clamp(48px, 6vw, 96px); line-height: 0.98; margin: 0 0 24px; color: var(--c-bone); letter-spacing: -0.02em; }
.ed-contact h2 em { font-style: italic; color: var(--c-brass); }
.ed-contact .lede { font-size: 20px; line-height: 1.5; color: rgba(243, 237, 226, 0.78); margin-bottom: 36px; max-width: 38ch; }
.ed-contact .info { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(243, 237, 226, 0.75); display: grid; gap: 12px; }
.ed-contact .info span { color: rgba(243, 237, 226, 0.4); margin-right: 14px; }
.ed-contact .right { grid-column: 8 / 13; }
.ed-form { display: grid; gap: 22px; }
.ed-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ed-form label { display: grid; gap: 8px; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(243, 237, 226, 0.5); }
.ed-form input, .ed-form select, .ed-form textarea {
appearance: none; background: transparent; border: none; border-bottom: 1px solid rgba(243, 237, 226, 0.25);
color: var(--c-bone); font: 400 17px/1.5 'Newsreader', serif; padding: 10px 0; outline: none; width: 100%;
}
.ed-form input:focus, .ed-form select:focus, .ed-form textarea:focus { border-bottom-color: var(--c-brass); }
.ed-form select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0 center; padding-right: 22px; }
.ed-form select option { background: var(--c-ink); color: var(--c-bone); }
.ed-form textarea { resize: vertical; min-height: 96px; }
.ed-form button {
margin-top: 12px; justify-self: start;
background: var(--c-brass); color: var(--c-ink); border: none;
font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
padding: 18px 36px; cursor: pointer; transition: all 0.3s;
}
.ed-form button:hover { background: var(--c-bone); }
.ed-foot { padding: 32px 40px; border-top: 1px solid rgba(243, 237, 226, 0.12); display: flex; justify-content: space-between; align-items: center; background: var(--c-ink); color: rgba(243, 237, 226, 0.5); font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
/* ─── RUGGED ──────────────────────────────────────────────────── */
.rg {
background: #161310;
color: #e8dfcf;
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
line-height: 1.6;
position: relative;
}
.rg::before {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
background-image: radial-gradient(rgba(243, 237, 226, 0.018) 1px, transparent 1px);
background-size: 3px 3px;
mix-blend-mode: overlay;
opacity: 0.6;
}
.rg h1, .rg h2, .rg h3, .rg .display {
font-family: 'Archivo Black', sans-serif;
letter-spacing: -0.02em;
text-transform: uppercase;
color: #f3ede2;
}
.rg .brass { color: var(--c-brass); }
.rg .label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(232, 223, 207, 0.55); }
.rg a { text-decoration: none; color: inherit; }
.rg-nav {
position: sticky; top: 0; z-index: 50;
display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
padding: 16px 36px;
background: rgba(22, 19, 16, 0.92); backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(201, 163, 107, 0.25);
font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
}
.rg-nav .brand { display: flex; align-items: center; gap: 12px; }
.rg-nav .brand .mark { width: 28px; height: 28px; border: 1.5px solid var(--c-brass); display: grid; place-items: center; color: var(--c-brass); font-family: 'Archivo Black', sans-serif; font-size: 12px; letter-spacing: 0; }
.rg-nav .brand b { font-family: 'Archivo Black', sans-serif; font-size: 13px; letter-spacing: 0.05em; color: #f3ede2; }
.rg-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; justify-self: center; }
.rg-nav ul a { color: rgba(232, 223, 207, 0.7); }
.rg-nav ul a:hover { color: var(--c-brass); }
.rg-nav .meta { color: rgba(232, 223, 207, 0.5); }
.rg-hero {
position: relative; padding: 80px 36px 96px;
border-bottom: 1px solid rgba(201, 163, 107, 0.25);
overflow: hidden;
}
.rg-hero .grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: end;
max-width: 1640px; margin: 0 auto;
position: relative; z-index: 2;
}
.rg-hero .title { font-size: clamp(60px, 9vw, 148px); line-height: 0.9; margin: 0; }
.rg-hero .title .brass { color: var(--c-brass); }
.rg-hero .title .slash { color: rgba(232, 223, 207, 0.3); }
.rg-hero .lede { max-width: 44ch; color: rgba(232, 223, 207, 0.78); margin: 32px 0 0; font-size: 15px; }
.rg-hero .pic { position: relative; }
.rg-hero .pic image-slot { width: 100%; aspect-ratio: 4/5; }
.rg-hero .stamp {
pointer-events: none;
position: absolute; top: 16px; right: 16px;
width: 96px; height: 96px;
border: 2px solid var(--c-brass); color: var(--c-brass);
border-radius: 50%;
display: grid; place-items: center; text-align: center;
font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
background: rgba(22, 19, 16, 0.8); backdrop-filter: blur(6px);
transform: rotate(-12deg);
line-height: 1.3;
}
.rg-hero .stamp b { font-family: 'Archivo Black', sans-serif; font-size: 12px; letter-spacing: 0.04em; color: var(--c-brass); display: block; margin-bottom: 2px; }
.rg-hero .tags { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.rg-hero .tags span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid rgba(201, 163, 107, 0.45); color: var(--c-brass); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.rg-hero .tags span::before { content: ""; width: 6px; height: 6px; background: var(--c-brass); border-radius: 50%; }
.rg-hero .bigword {
position: absolute; right: -2vw; top: 24%; z-index: 1;
font-family: 'Archivo Black', sans-serif; font-size: 22vw; line-height: 0.85;
color: rgba(201, 163, 107, 0.05); letter-spacing: -0.04em;
pointer-events: none; user-select: none;
}
.rg-section { padding: 96px 36px; max-width: 1640px; margin: 0 auto; position: relative; z-index: 2; }
.rg-section .head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 56px; gap: 32px; border-bottom: 1px solid rgba(201, 163, 107, 0.25); padding-bottom: 24px; }
.rg-section h2 { font-size: clamp(40px, 5.5vw, 80px); line-height: 0.95; margin: 0; max-width: 14ch; }
.rg-section h2 .brass { color: var(--c-brass); }
.rg-section .head .meta { text-align: right; color: rgba(232, 223, 207, 0.55); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.rg-section .head .meta b { display: block; color: var(--c-brass); font-family: 'Archivo Black', sans-serif; font-size: 18px; letter-spacing: 0.04em; }
.rg-contact-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rg-frame {
position: relative; padding: 16px; background: #1d1814;
border: 1px solid rgba(201, 163, 107, 0.25);
}
.rg-frame image-slot { width: 100%; aspect-ratio: 1/1; }
.rg-frame.wide { grid-column: span 2; } .rg-frame.wide image-slot { aspect-ratio: 2/1; }
.rg-frame .id { display: grid; grid-template-columns: 1fr auto; align-items: baseline; margin-top: 12px; gap: 8px; }
.rg-frame .id .num { font-family: 'Archivo Black', sans-serif; font-size: 18px; color: var(--c-brass); letter-spacing: 0; }
.rg-frame .id .spec { text-align: right; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(232, 223, 207, 0.55); }
.rg-frame .id .spec b { display: block; color: #f3ede2; font-family: 'Archivo Black', sans-serif; font-size: 11px; letter-spacing: 0.04em; margin-bottom: 2px; }
.rg-frame .corner { position: absolute; width: 16px; height: 16px; border: 2px solid var(--c-brass); }
.rg-frame .corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.rg-frame .corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.rg-frame .corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.rg-frame .corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.rg-about { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
.rg-about .pic { position: relative; }
.rg-about .pic image-slot { width: 100%; aspect-ratio: 4/5; }
.rg-about .pic .tag {
position: absolute; bottom: -16px; left: -16px;
background: var(--c-brass); color: var(--c-ink);
padding: 10px 16px; font-family: 'Archivo Black', sans-serif; font-size: 11px; letter-spacing: 0.06em;
}
.rg-about .copy h2 { font-size: clamp(44px, 5vw, 72px); line-height: 0.95; margin: 0 0 28px; }
.rg-about .copy h2 .brass { color: var(--c-brass); }
.rg-about .copy p { color: rgba(232, 223, 207, 0.8); margin: 0 0 16px; max-width: 56ch; }
.rg-about .meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(201, 163, 107, 0.25); }
.rg-about .meta-grid .row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 0; }
.rg-about .meta-grid .row .k { color: rgba(232, 223, 207, 0.45); }
.rg-about .meta-grid .row .v { color: #f3ede2; }
.rg-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.rg-svc { position: relative; padding: 32px 28px; border: 1px solid rgba(201, 163, 107, 0.3); background: #1d1814; transition: transform 0.3s, border-color 0.3s; }
.rg-svc:hover { transform: translate(-2px, -2px); border-color: var(--c-brass); box-shadow: 4px 4px 0 rgba(201, 163, 107, 0.4); }
.rg-svc .corner { position: absolute; width: 14px; height: 14px; border: 2px solid var(--c-brass); }
.rg-svc .corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.rg-svc .corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.rg-svc .corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.rg-svc .corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.rg-svc .head-row { display: flex; justify-content: space-between; align-items: start; margin-bottom: 18px; gap: 16px; }
.rg-svc .num { font-family: 'Archivo Black', sans-serif; font-size: 36px; color: rgba(201, 163, 107, 0.45); line-height: 1; }
.rg-svc .badge { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--c-brass); color: var(--c-brass); white-space: nowrap; }
.rg-svc h3 { font-size: 22px; margin: 0 0 12px; line-height: 1.1; }
.rg-svc h3 .brass { color: var(--c-brass); }
.rg-svc .desc { color: rgba(232, 223, 207, 0.78); font-size: 13px; margin: 0 0 20px; }
.rg-svc .price-row { display: flex; justify-content: space-between; align-items: end; padding-top: 16px; border-top: 1px dashed rgba(201, 163, 107, 0.3); }
.rg-svc .price-row .p { font-family: 'Archivo Black', sans-serif; font-size: 26px; color: #f3ede2; }
.rg-svc .price-row .u { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(232, 223, 207, 0.55); text-align: right; }
.rg-contact {
border-top: 2px solid var(--c-brass);
background: #1a1410;
padding: 96px 36px;
position: relative; z-index: 2;
}
.rg-contact .wrap { max-width: 1640px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; }
.rg-contact .left h2 { font-size: clamp(48px, 6.5vw, 96px); line-height: 0.92; margin: 0 0 24px; }
.rg-contact .left h2 .brass { color: var(--c-brass); }
.rg-contact .left .lede { color: rgba(232, 223, 207, 0.78); font-size: 14px; max-width: 38ch; margin-bottom: 32px; }
.rg-contact .left .info { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid rgba(201, 163, 107, 0.3); }
.rg-contact .left .info .row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.rg-contact .left .info .row .k { color: rgba(232, 223, 207, 0.5); }
.rg-contact .left .info .row .v { color: #f3ede2; }
.rg-form { display: grid; gap: 18px; padding: 32px; background: #1d1814; border: 1px solid rgba(201, 163, 107, 0.3); position: relative; }
.rg-form .corner { position: absolute; width: 14px; height: 14px; border: 2px solid var(--c-brass); }
.rg-form .corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.rg-form .corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.rg-form .corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.rg-form .corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.rg-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rg-form label { display: grid; gap: 6px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(232, 223, 207, 0.55); }
.rg-form input, .rg-form select, .rg-form textarea {
appearance: none; background: #161310; border: 1px solid rgba(201, 163, 107, 0.25);
color: #f3ede2; font: 400 13px/1.5 'JetBrains Mono', monospace; padding: 12px 14px; outline: none; width: 100%;
transition: border-color 0.2s;
}
.rg-form input:focus, .rg-form select:focus, .rg-form textarea:focus { border-color: var(--c-brass); }
.rg-form select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.rg-form select option { background: #161310; color: #f3ede2; }
.rg-form textarea { resize: vertical; min-height: 96px; }
.rg-form button {
margin-top: 8px; justify-self: stretch;
background: var(--c-brass); color: var(--c-ink); border: none;
font-family: 'Archivo Black', sans-serif; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
padding: 18px 24px; cursor: pointer; transition: all 0.2s;
}
.rg-form button:hover { background: #f3ede2; }
.rg-foot { padding: 28px 36px; border-top: 1px solid rgba(201, 163, 107, 0.25); display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(232, 223, 207, 0.4); }
.rg-foot .brass { color: var(--c-brass); }
/* Density modifiers (driven by Tweaks panel via body[data-density]) */
body[data-density="compact"] .cin-section,
body[data-density="compact"] .ed-section,
body[data-density="compact"] .rg-section,
body[data-density="compact"] .cin-contact,
body[data-density="compact"] .ed-contact,
body[data-density="compact"] .rg-contact { padding-top: 72px; padding-bottom: 72px; }
body[data-density="comfy"] .cin-section,
body[data-density="comfy"] .ed-section,
body[data-density="comfy"] .rg-section,
body[data-density="comfy"] .cin-contact,
body[data-density="comfy"] .ed-contact,
body[data-density="comfy"] .rg-contact { padding-top: 180px; padding-bottom: 180px; }
/* Optional grain overlay on body */
body[data-grain="1"]::after {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.45;
mix-blend-mode: overlay;
}
/* Responsive niceties */
@media (max-width: 920px) {
.cin-grid, .cin-about, .cin-contact .wrap, .ed-about, .ed-contact .wrap, .rg-hero .grid, .rg-about, .rg-services, .rg-contact .wrap { grid-template-columns: 1fr !important; }
.cin-packages { grid-template-columns: 1fr !important; }
.cin-value-grid { grid-template-columns: 1fr !important; gap: 40px; }
.cin-service { grid-template-columns: 1fr; gap: 8px; }
.cin-service .price { text-align: left; }
.ed-svc { grid-template-columns: 40px 1fr; }
.ed-svc .d, .ed-svc .p { grid-column: 2; }
.rg-contact-sheet { grid-template-columns: 1fr 1fr; }
.rg-frame.wide { grid-column: span 2; }
}