/* ============================================================
Atelier — shared stylesheet for the LionTree site build.
Ported from the atelier homepage so every page shares one
design system; page-specific tweaks stay inline per page.
============================================================ */
/* Root font-size tracks viewport WIDTH so the composition zooms with the window
rather than reflowing. Same system as the other three cuts. */
html { scroll-behavior: smooth; font-size: clamp(12px, 1.11vw, 26px); }
body {
background: #f7f6f1; color: #221a28;
font-family: "Roboto", system-ui, sans-serif;
-webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.shell { width: 90vw; max-width: 102rem; margin-inline: auto; }
.display { font-family: "Merriweather", Georgia, serif; }
.eyebrow { font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.66rem; color: #b18100; }
.eyebrow-mute { font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.66rem; color: #8c7e92; }
.hl { color: #5b2a6e; font-style: italic; }
/* ---- chapters: full-viewport panels ---- */
.chapter { min-height: 100svh; display: flex; flex-direction: column; }
/* ---- texture ---- */
.grain { position: absolute; inset: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply; opacity: 0.05; }
.grain-light { mix-blend-mode: screen; opacity: 0.07; }
.wash { position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(55% 75% at 80% 15%, rgba(91,42,110,0.07), rgba(91,42,110,0) 70%),
radial-gradient(45% 60% at 10% 90%, rgba(177,129,0,0.05), rgba(177,129,0,0) 70%); }
/* the house texture — Eric's hand-tiled laurel, masked so one file tints anywhere. */
.laurel-tile { position:absolute; inset:0; pointer-events:none;
-webkit-mask-image:url("./laurel_bg_middle_plain.svg"); mask-image:url("./laurel_bg_middle_plain.svg");
-webkit-mask-repeat:repeat; mask-repeat:repeat; -webkit-mask-size:222px; mask-size:222px; }
.tile-ivory { background-color:#f7f6f1; opacity:0.05; }
.tile-plum { background-color:#5b2a6e; opacity:0.04; }
/* hero recipe: 173px plum @5% on white · grain 345px @14% multiply · no fade/vignette */
.tile-hero { background-color:#5b2a6e; opacity:0.05; -webkit-mask-size:173px; mask-size:173px; }
.grain-hero { position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:0.14;
background-image:url("data:image/svg+xml;utf8,");
background-size:345px 345px; }
/* purple-chapter recipe: 126px ivory @6% on heritage purple · fade 38% · vignette 35% · grain 337px @10% soft-light */
.tile-purple { background-color:#f7f6f1; opacity:0.06; -webkit-mask-size:126px; mask-size:126px; }
.grain-purple { position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; opacity:0.10;
background-image:url("data:image/svg+xml;utf8,");
background-size:337px 337px; }
.fade-purple { position:absolute; inset:0; pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.38) 100%); }
.vignette-purple { position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 75% 75% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%); }
/* opaque grayscale grain, soft-light — reads as surface, not dirt (recipe: 344px @ 36%) */
.grain-soft { position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; opacity:0.36;
background-image:url("data:image/svg+xml;utf8,");
background-size:344px 344px; }
.fade-bottom { position:absolute; inset:0; pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.5) 100%); }
.vignette { position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 75% 75% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.2) 100%); }
/* ---- header ---- */
.topbar { position: fixed; inset-inline: 0; top: 0; z-index: 50; transition: background .35s ease, box-shadow .35s ease; }
.topbar.scrolled { background: rgba(247,246,241,0.94); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(34,26,40,0.08); }
/* the MENU trigger — fixed above the takeover; the hamburger morphs into a plus */
.menu-btn { position:fixed; top:1.45rem; right:5vw; z-index:100; display:inline-flex; align-items:center; gap:0.85rem;
cursor:pointer; background:none; border:0;
font-weight:500; letter-spacing:0.28em; text-transform:uppercase; font-size:0.66rem; color:#221a28; }
.menu-btn .bars { position:relative; width:2rem; height:1.5rem; display:inline-block; }
.menu-btn .bars span { position:absolute; left:0; top:50%; width:2rem; height:2px; background:#b18100;
transition: transform .45s cubic-bezier(.4,0,.2,1); }
.menu-btn .bars span:first-child { transform: translateY(calc(-50% - 0.27rem)); }
.menu-btn .bars span:last-child { transform: translateY(calc(-50% + 0.27rem)); }
.menu-btn.open .bars span:first-child { transform: translateY(-50%); }
.menu-btn.open .bars span:last-child { transform: translateY(-50%) rotate(90deg); }
.menu-btn:hover .bars span { background:#8a6400; }
/* ---- the takeover menu ---- */
.takeover { position: fixed; inset: 0; z-index: 90; background: #f7f6f1; overflow-y: auto;
clip-path: inset(0 0 100% 0); visibility: hidden;
transition: clip-path .7s cubic-bezier(.77,0,.18,1), visibility 0s linear .7s; }
.takeover.open { clip-path: inset(0 0 0% 0); visibility: visible; transition: clip-path .7s cubic-bezier(.77,0,.18,1); }
.takeover .menu-inner > * { opacity: 0; transform: translateY(1.2rem); transition: opacity .5s ease, transform .5s ease; }
.takeover.open .menu-inner > * { opacity: 1; transform: none; }
.takeover.open .menu-inner > *:nth-child(1) { transition-delay: .30s; }
.takeover.open .menu-inner > *:nth-child(2) { transition-delay: .38s; }
.takeover.open .menu-inner > *:nth-child(3) { transition-delay: .46s; }
.takeover.open .menu-inner > *:nth-child(4) { transition-delay: .54s; }
.menu-link { display:block; font-family:"Merriweather",Georgia,serif; font-weight:300; color:#221a28;
font-size: 2.3rem; line-height: 1.16; letter-spacing: -0.012em; text-decoration:none;
transition: color .25s ease, transform .3s ease; }
.menu-link em { font-style: italic; color: #5b2a6e; }
.menu-link:hover { color: #5b2a6e; transform: translateX(0.6rem); }
.menu-link .no { font-family:"Roboto",sans-serif; font-size:0.62rem; font-weight:500; letter-spacing:0.28em;
color:#b18100; vertical-align: 1.5em; margin-right: 0.9rem; }
.office-card { border-left: 2px solid #b18100; padding: 0.55rem 0 0.55rem 1rem; }
.office-card .city { font-family:"Merriweather",serif; font-weight:300; font-size:1.05rem; color:#221a28; }
/* the mark assembles from the separated logo layers (LT_sep_lion / LT_sep_wreath,
same viewBox so they stack exactly): the lion holds; the wreath grows from the stem
up both sides via an animated conic mask, locking at the exact logo. */
@property --wreath { syntax:''; initial-value:0deg; inherits:false; }
.mark-anim { position:relative; width:30rem; max-width:100%; aspect-ratio:295.5/290; opacity:0.75; }
.mark-anim img { position:absolute; inset:0; width:100%; height:100%; }
.mark-anim .lion { opacity:0; transition:opacity .7s ease .2s; }
.mark-anim .wreath-wrap { position:absolute; inset:0; --wreath:180deg;
-webkit-mask-image:conic-gradient(from 135deg at 50% 50%, black 0deg, black var(--wreath), transparent var(--wreath), transparent calc(360deg - var(--wreath)), black calc(360deg - var(--wreath)));
mask-image:conic-gradient(from 135deg at 50% 50%, black 0deg, black var(--wreath), transparent var(--wreath), transparent calc(360deg - var(--wreath)), black calc(360deg - var(--wreath))); }
.takeover.open .mark-anim .lion { opacity:1; }
.takeover.open .mark-anim .wreath-wrap { animation: wreathgrow 1.6s cubic-bezier(.3,0,.2,1) .4s both; }
@keyframes wreathgrow { from { --wreath:0deg; } to { --wreath:180deg; } }
/* ---- rotating hero keyword + gold highlight-bar ---- */
.rot-wrap { display: inline-grid; text-align: left; vertical-align: baseline;
transition: width .6s cubic-bezier(.4,0,.2,1); }
.rot-wrap > span { grid-area: 1 / 1; justify-self: start; white-space: nowrap; position: relative; z-index: 0;
opacity: 0; transform: translateY(0.5em); transition: opacity .45s ease .1s, transform .45s ease .1s; }
.rot-wrap > span.on { opacity: 1; transform: none; }
.rot-wrap > span.off { opacity: 0; transform: translateY(-0.4em); transition: opacity .28s ease, transform .28s ease; }
.rot-wrap > span::after { content: ""; position: absolute; left: -0.04em; right: -0.04em; bottom: 0.02em;
height: 0.30em; background: #b18100; opacity: 0.32; z-index: -1; transform: scaleX(0); transform-origin: left; }
.rot-wrap > span.on::after { transform: scaleX(1); transition: transform .7s cubic-bezier(.4,0,.2,1) .35s; }
/* ---- the pillar / case-study bar — reads as primary navigation, not footer links ---- */
.pillar-tab { position: relative; background:none; border:0; cursor:pointer; padding: 1.05rem 0 1.1rem;
display:inline-flex; align-items:baseline; gap:0.7rem; white-space:nowrap; text-decoration:none; }
.pillar-tab .no { font-weight:500; letter-spacing:0.2em; font-size:0.62rem; color:#b18100; }
.pillar-tab .lbl { font-family:"Merriweather",Georgia,serif; font-weight:300; font-size:1.2rem;
letter-spacing:-0.01em; color:#8c7e92; transition: color .25s ease; }
.pillar-tab::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:#b18100;
transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.4,0,.2,1); }
.pillar-tab:hover .lbl { color:#5b2a6e; }
.pillar-tab[aria-selected="true"] .lbl { color:#221a28; }
.pillar-tab[aria-selected="true"]::after { transform: scaleX(1); }
.pillar-panel { display:none; }
.pillar-panel.on { display:grid; animation: panelin .45s ease both; }
@keyframes panelin { from { opacity:0; transform: translateY(0.6rem); } to { opacity:1; transform:none; } }
.tomb { border-left: 2px solid rgba(177,129,0,0.55); padding-left: 1.1rem; }
/* ---- pull-out words (Jennifer's emphasis ask) — the hero's gold highlighter
stroke, reused as a quiet strip of big italic keywords ---- */
.pullouts { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.5rem 2rem; }
.pullouts .pw { font-family:"Merriweather",Georgia,serif; font-weight:300; font-style:italic;
font-size:1.3rem; letter-spacing:-0.01em; color:#5b2a6e; position:relative; z-index:0; white-space:nowrap; }
.pullouts .pw::after { content:""; position:absolute; left:-0.06em; right:-0.06em; bottom:0.06em;
height:0.3em; background:#b18100; opacity:0.26; z-index:-1; }
/* same stroke, inline inside a sentence */
.pw-inline { position:relative; z-index:0; font-style:italic; color:#5b2a6e; }
.pw-inline::after { content:""; position:absolute; left:-0.05em; right:-0.05em; bottom:0.05em;
height:0.3em; background:#b18100; opacity:0.26; z-index:-1; }
/* on purple grounds */
.dark .pullouts .pw, .pullouts.on-dark .pw { color:#e7c8f2; }
/* ---- key stats ---- */
.stat .num { font-family:"Merriweather",Georgia,serif; font-weight:300; letter-spacing:-0.02em;
font-size:3.4rem; line-height:1; color:#221a28; }
.stat .num .u { color:#5b2a6e; font-style:italic; }
.stat .lbl { margin-top:0.7rem; color:rgba(34,26,40,0.55); font-size:0.82rem; line-height:1.5; max-width:16rem; }
/* ---- gold-bordered callout (the Ducera kit piece) ---- */
.callout { border: 1px solid rgba(177,129,0,0.5); padding: 2.4rem 2.6rem; position: relative; background: rgba(255,255,255,0.5); }
.callout::before { content:""; position:absolute; top:-1px; left:2.6rem; width:3.2rem; height:3px; background:#b18100; }
/* soft lavender block behind a headline line */
.blockline { position: relative; display: inline-block; isolation: isolate; }
.blockline::before { content:""; position:absolute; inset: 0.06em -0.18em -0.02em -0.18em; background:#e7deec; z-index:-1; }
/* ---- interior page scaffolding ---- */
.page-hero { position:relative; background:#fff; overflow:hidden; padding-top:9rem; padding-bottom:3.4rem; }
.subnav { position:sticky; top:0; z-index:40; background:rgba(247,246,241,0.94); backdrop-filter:blur(8px);
border-bottom:1px solid rgba(34,26,40,0.1); }
.subnav .rail { display:flex; gap:2.4rem; overflow-x:auto; scrollbar-width:none; }
.cap-list { columns:2; column-gap:3rem; }
.cap-list li { break-inside:avoid; font-family:"Merriweather",Georgia,serif; font-weight:300; font-size:1.05rem;
color:#221a28; padding:0.55rem 0; border-bottom:1px solid rgba(34,26,40,0.08); list-style:none; }
@media (max-width:640px){ .cap-list { columns:1; } }
/* ---- filters (transactions / portfolio) ---- */
.filter-btn { font-weight:500; letter-spacing:0.16em; text-transform:uppercase; font-size:0.6rem;
color:#5b2a6e; background:none; border:1px solid rgba(91,42,110,0.3); padding:0.5rem 0.95rem; cursor:pointer;
transition: background .25s ease, color .25s ease, border-color .25s ease; }
.filter-btn:hover { border-color:#5b2a6e; }
.filter-btn.on { background:#5b2a6e; color:#fff; border-color:#5b2a6e; }
/* ---- placeholder marker — matches the existing "[placeholder — brag deck]" pattern ---- */
.ph { color:#b18100; }
/* ---- reveal on scroll ---- */
.rv { opacity: 0; transform: translateY(1.6rem); transition: opacity .8s ease, transform .8s ease; }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .12s; } .rv-d2 { transition-delay: .24s; } .rv-d3 { transition-delay: .36s; }
.mailto { font-family:"Merriweather",serif; font-weight:300; letter-spacing:-0.01em; color:#f7f6f1; text-decoration:none;
border-bottom: 2px solid rgba(177,129,0,0.7); padding-bottom: 0.12em; transition: border-color .3s ease, color .3s ease; }
.mailto:hover { color:#e7c8f2; border-color:#e7c8f2; }
.keyline { height:1px; background:rgba(34,26,40,0.1); border:0; }
/* ---- footer strip (shared, injected by atelier.js) ---- */
.site-footer { background:#2c1535; border-top:1px solid rgba(255,255,255,0.1); }
.preview-badge { position:fixed; bottom:1rem; right:1rem; z-index:60; background:#221a28; color:#fff;
padding:0.55rem 0.9rem; font-size:0.66rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase;
box-shadow:0 8px 24px rgba(0,0,0,0.3); }
.preview-badge a { color:#c9a9d6; text-decoration:none; }
@media (prefers-reduced-motion: reduce) {
.rv { opacity: 1; transform: none; transition: none; }
.takeover.open .mark-anim .wreath-wrap { animation: none; -webkit-mask-image: none; mask-image: none; }
.takeover.open .mark-anim .lion { transition: none; }
html { scroll-behavior: auto; }
}