/* lauralouiseblatt.com 5.0.0: the Experiatum house for Lauralouise Blatt.
   Ink #0a0a0c, brass metal gradients (never a flat yellow), Russo One
   uppercase headings with a shimmer, Inter body, numbered glass panels at
   .88 opacity where text sits, a slow gear texture. House rules: no slanted type,
   no radius above 10px, no text under 13px, words never over a photograph.
   Everything reads without the script; the motion only adds. */

:root {
  --ink: #0a0a0c;
  --ink-2: #111116;
  --panel: rgba(14, 14, 19, .9);
  --panel-2: rgba(20, 20, 26, .92);
  --text: #fff;
  --body: #d4d4d8;
  --muted: #a6a6ad;
  --brass-light: #f9e6bd;
  --brass: #e0c592;
  --brass-rich: #b17e38;
  --brass-deep: #8f6229;
  --metal: linear-gradient(135deg, #f9e6bd 0%, #e0c592 20%, #b17e38 48%, #b17e38 72%, #d9b26e 100%);
  --metal-text: linear-gradient(180deg, #f9e6bd 0%, #e0c592 35%, #b17e38 75%, #8f6229 100%);
  --border: rgba(177, 126, 56, .34);
  --border-soft: rgba(177, 126, 56, .2);
  --button-ink: #1a1206;
  --f-display: 'Russo One', 'Inter', sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 8px;
  --r-card: 10px;
  --wrap: min(100% - 32px, 1840px);
  --gap: clamp(16px, 2.4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--body); font: 400 17px/1.65 var(--f-body); overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brass-light); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
em, i, cite { font-style: normal; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; color: var(--text); line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: clamp(24px, 2.6vw, 40px); background: var(--metal-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
h3 { font-size: clamp(16px, 1.3vw, 20px); }
h3 a { color: var(--text); text-decoration: none; }
h3 a:hover { color: var(--brass-light); }
p { margin: 0 0 1em; }

.ll-wrap { width: var(--wrap); margin-inline: auto; }
.ll-skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--metal); color: var(--button-ink); padding: 10px 14px; border-radius: var(--r); font-size: 15px; }
.ll-skip:focus { left: 16px; }

/* Atmosphere: ink, a faint brass glow and a slow gear. */
.ll-atm { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: radial-gradient(1200px 700px at 85% -10%, rgba(177, 126, 56, .12), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(177, 126, 56, .08), transparent 60%), var(--ink); }
.ll-gear { position: absolute; pointer-events: none; width: 640px; height: 640px; opacity: .05;
  background: repeating-conic-gradient(from 0deg, rgba(224, 197, 146, .9) 0deg 3deg, transparent 3deg 16deg), repeating-radial-gradient(circle, rgba(224, 197, 146, .6) 0 1px, transparent 1px 46px);
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 63%); mask-image: radial-gradient(closest-side, #000 62%, transparent 63%);
  animation: ll-spin 80s linear infinite; }
.ll-gear--atm { right: -300px; top: 30%; width: 900px; height: 900px; opacity: .04; }
@keyframes ll-spin { to { transform: rotate(360deg); } }

/* Header: two rows, sticky. Row one is the brand and the two calls to
   action; row two is the page list. */
.ll-head { position: sticky; top: 0; z-index: 20; background: rgba(10, 10, 12, .94); border-bottom: 1px solid var(--border-soft); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ll-head-1 { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
.ll-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.ll-mono { width: 46px; height: 46px; flex: none; }
.ll-mono--lg { width: 72px; height: 72px; }
.ll-brand-t { display: flex; flex-direction: column; min-width: 0; }
.ll-brand-n { font: 400 19px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--text); }
.ll-brand-s { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-head-cta { display: flex; gap: 10px; flex: none; }
.ll-head-2 { border-top: 1px solid var(--border-soft); }
.ll-head-2 ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 2.4vw, 36px); overflow-x: auto; scrollbar-width: none; }
.ll-head-2 ul::-webkit-scrollbar { display: none; }
.ll-head-2 a { display: block; padding: 10px 0; font: 400 14px/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; color: var(--body); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.ll-head-2 a:hover { color: var(--brass-light); }
.ll-head-2 a[aria-current="page"] { color: var(--brass); border-bottom-color: var(--brass-rich); }

/* Buttons: brass metal, squared corners. */
.ll-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border-radius: var(--r); border: 1px solid var(--brass-deep);
  background: var(--metal); color: var(--button-ink); font: 600 15px/1.2 var(--f-body); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.ll-btn:hover { color: var(--button-ink); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(177, 126, 56, .4); }
.ll-btn--ghost { background: transparent; color: var(--brass); border-color: var(--border); }
.ll-btn--ghost:hover { color: var(--brass-light); border-color: var(--brass-rich); box-shadow: none; }
.ll-btn--sm { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.ll-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 6px; }
.ll-link { font-weight: 600; }

.ll-eyebrow { display: flex; align-items: center; gap: 10px; font: 600 13px/1.3 var(--f-body); text-transform: uppercase; letter-spacing: .16em; color: var(--brass); margin: 0 0 12px; }
.ll-num { font: 400 14px/1 var(--f-display); color: var(--button-ink); background: var(--metal); padding: 6px 8px; border-radius: 5px; letter-spacing: .04em; }
.ll-lead { font-size: clamp(18px, 1.35vw, 22px); line-height: 1.55; color: var(--text); }

/* Shimmer: brass light passing across the main heading. */
.ll-sheen { font-size: clamp(40px, 6vw, 96px); line-height: 1.02; margin: 0 0 14px;
  background: linear-gradient(100deg, #fff 0%, #f9e6bd 30%, #e0c592 46%, #fff 52%, #e0c592 58%, #d6ad66 100%); background-size: 240% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ll-shimmer 9s linear infinite; }
@keyframes ll-shimmer { 0% { background-position: 120% center; } 100% { background-position: -120% center; } }

/* Hero: the photograph beside the words, on solid ink, never under them. */
.ll-hero { padding: clamp(28px, 5vw, 80px) 0 clamp(24px, 3vw, 48px); background: var(--ink); }
.ll-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 760px); gap: clamp(24px, 4vw, 72px); align-items: center; }
.ll-hero-photo { margin: 0; justify-self: end; width: 100%; max-width: 760px; }
.ll-hero-photo img { width: 100%; max-width: 760px; border-radius: var(--r-card); border: 1px solid var(--border-soft); }
.ll-tagline { font: 400 clamp(17px, 1.5vw, 24px)/1.35 var(--f-display); text-transform: uppercase; letter-spacing: .05em; color: var(--brass); }
.ll-proof { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ll-proof li { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--r-card); padding: 14px 16px; }
.ll-proof strong { display: block; font: 400 clamp(22px, 2vw, 30px)/1.1 var(--f-display); background: var(--metal-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ll-proof span { font-size: 14px; color: var(--muted); }

/* The reel: small, beside a line of text. */
.ll-reel-row { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 64px); align-items: center; }
.ll-reel { position: relative; max-width: 640px; }
.ll-reel video { width: 100%; border-radius: var(--r-card); border: 1px solid var(--border); background: #000; aspect-ratio: 16 / 9; }
.ll-reel-ctl { display: flex; gap: 8px; margin-top: 10px; }
.ll-reel-ctl[hidden] { display: none; }
.ll-reel-copy h2 { font-size: clamp(22px, 2.2vw, 34px); }

/* Sections and numbered glass panels. */
.ll-sec { padding: clamp(18px, 2.6vw, 40px) 0; }
.ll-panel { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); padding: clamp(20px, 3vw, 52px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .03); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ll-panel > .ll-gear { right: -260px; top: -220px; opacity: .045; }
.ll-panel > *:not(.ll-gear) { position: relative; z-index: 1; }
.ll-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brass-rich), transparent); opacity: .8; }
.ll-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--gap); align-items: center; }
.ll-split--flip > .ll-panel { order: 2; }
.ll-photo { margin: 0; }
.ll-photo img { width: 100%; max-width: 960px; border-radius: var(--r-card); border: 1px solid var(--border-soft); }
.ll-more { margin: 18px 0 0; }

.ll-quote { margin: 18px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--brass-rich); }
.ll-quote p { font-size: clamp(18px, 1.3vw, 21px); line-height: 1.55; color: var(--text); margin: 0 0 6px; }
.ll-quote footer { font-size: 14px; color: var(--brass); letter-spacing: .04em; }

.ll-cards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.ll-card { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--r-card); padding: 18px 20px; }
.ll-card p { margin: 0 0 .5em; }
.ll-role { font-size: 14px; color: var(--brass); letter-spacing: .03em; }

.ll-career { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; gap: 8px; }
.ll-career li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.ll-career strong { color: var(--text); font-weight: 600; }
.ll-career span { color: var(--muted); font-size: 15px; }

/* Books (5.0.1): covers about 220px wide (every cover file is 391px or
   wider, so never above native), two or three columns across the width. */
.ll-books { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 18px; }
.ll-book { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--r-card); padding: 18px; }
.ll-book img { width: 220px; max-width: 100%; border-radius: 4px; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.ll-book p { font-size: 15px; margin: 0 0 .5em; }

.ll-faq details { border-bottom: 1px solid var(--border-soft); padding: 4px 0; }
.ll-faq summary { cursor: pointer; list-style: none; padding: 12px 0; }
.ll-faq summary::-webkit-details-marker { display: none; }
.ll-faq summary h3 { display: inline; font-size: clamp(16px, 1.2vw, 19px); }
.ll-faq summary::after { content: "+"; float: right; color: var(--brass); font: 400 20px/1 var(--f-display); }
.ll-faq details[open] summary::after { content: "\2212"; }
.ll-faq details p { margin: 0 0 14px; }

/* 5.0.2: every film on every page is 640px at most (ll-vcap), in a row
   beside its words at desktop, stacked on a phone. */
.ll-vcap { width: 100%; max-width: 640px; }
.ll-filmrow { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; margin-top: 8px; }
.ll-filmrow-copy > p { margin: 0 0 .7em; }
@media (max-width: 1000px) { .ll-filmrow { grid-template-columns: minmax(0, 1fr); } }
/* 5.0.2 compact home rows: ventures as a line of links, books as small tiles. */
.ll-panel--slim { padding: clamp(18px, 2.2vw, 32px) clamp(20px, 3vw, 44px); }
.ll-panel--slim h2 { margin-bottom: 10px; font-size: clamp(22px, 1.8vw, 30px); }
.ll-sec:has(> .ll-wrap > .ll-panel--slim) { padding: clamp(10px, 1.2vw, 18px) 0; }.ll-panel--slim .ll-more { margin-top: 12px; }
.ll-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.ll-row li { display: flex; flex-direction: column; font-size: 17px; font-weight: 600; }
.ll-row span { font-size: 14px; font-weight: 400; color: var(--muted); }
.ll-covers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.ll-covers li { width: 88px; }
.ll-covers a { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.35; color: var(--text); }
.ll-covers img { width: 88px; height: auto; border-radius: 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
.ll-bullets { margin: 6px 0 0; padding-left: 20px; }
.ll-bullets li { margin: 0 0 .4em; }
.ll-film { margin: 0; max-width: 640px; }
.ll-film video { width: 100%; border-radius: var(--r-card); border: 1px solid var(--border); background: #000; }
.ll-film figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }

/* Small click-to-play films (the introduction, the members' reel): 640px
   at most, a third of the 1920px source, beside their words. */
.ll-smallfilm { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.ll-smallfilm video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.ll-smallfilm-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; min-height: 52px; }
.ll-smallfilm-play[hidden] { display: none; }
.ll-smallfilm--intro .ll-smallfilm-play { left: 70%; }

/* Testimonials (5.0.1): one static grid of endorsements, one card per
   person, beside the members' reel from 1100px, below it under that. */
.ll-members { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; min-width: 0; margin-top: 18px; }
@media (min-width: 1100px) { .ll-members { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); } }
.ll-members-film { margin: 0; max-width: 640px; }
.ll-members-film figcaption { margin-top: 10px; font-size: 15px; color: var(--muted); }
.ll-endorse { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
/* 5.0.2: the six quotes about her stand in one row on a wide screen. */
@media (min-width: 1500px) { .ll-endorse { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ll-tq-card { padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; background: linear-gradient(160deg, rgba(22, 20, 18, .92), rgba(8, 8, 12, .96)); border: 1px solid var(--border-soft); border-top: 2px solid var(--brass-rich); border-radius: var(--r-card); }
.ll-tq-q { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text); font-style: normal; }
.ll-tq-n { margin: 0; font-family: var(--f-display); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--brass); }
.ll-tq-r { display: block; margin-top: 4px; font-family: var(--f-body); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.ll-attr { font-size: 14px; color: var(--brass); letter-spacing: .04em; margin: 4px 0 0; }
@media (max-width: 700px) {
  .ll-tq-q { font-size: 15px; }
  .ll-smallfilm--intro .ll-smallfilm-play { left: 50%; }
}

.ll-press-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.ll-press-photos figure { margin: 0; }
.ll-press-photos img { border-radius: var(--r-card); border: 1px solid var(--border-soft); max-width: 100%; }
.ll-press-photos p { margin: 8px 0 0; font-size: 15px; }

.ll-page-hero { padding: clamp(32px, 5vw, 80px) 0 clamp(12px, 2vw, 24px); }
.ll-page-hero .ll-lead { max-width: 900px; }

/* Footer: the LB monogram, the booking line, the intro card, then links. */
.ll-foot { margin-top: clamp(24px, 4vw, 64px); padding: clamp(24px, 3vw, 48px) 0 28px; border-top: 1px solid var(--border-soft); background: linear-gradient(180deg, transparent, rgba(177, 126, 56, .05)); }
.ll-foot-call { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 32px; align-items: center; }
.ll-foot-call .ll-brand-s { white-space: normal; }
.ll-foot-t { font: 400 clamp(20px, 2vw, 30px)/1.2 var(--f-display); text-transform: uppercase; color: var(--text); margin: 6px 0 0; }
.ll-foot-call .ll-actions { grid-column: 1; }
.ll-foot-card { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--panel-2); text-decoration: none; color: var(--body); min-width: 240px; }
.ll-foot-card strong { color: var(--text); font: 400 18px/1.2 var(--f-display); text-transform: uppercase; }
.ll-foot-card .ll-eyebrow { margin: 0; }
.ll-foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 28px 0; }
.ll-foot-grid nav { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--r-card); padding: 18px 20px; }
.ll-foot-h { font-size: 15px; letter-spacing: .1em; margin: 0 0 10px; }
.ll-foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ll-foot-grid a { color: var(--body); text-decoration: none; font-size: 15px; }
.ll-foot-grid a:hover { color: var(--brass-light); }
.ll-foot-base { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--muted); }
.ll-version { color: var(--brass); }

/* Phones and tablets. */
@media (max-width: 1100px) {
  .ll-reel-row { grid-template-columns: minmax(0, 1fr); }
  .ll-reel { max-width: 640px; }
}
@media (max-width: 900px) {
  body { font-size: 16px; }
  .ll-hero-grid, .ll-split { grid-template-columns: minmax(0, 1fr); }
  .ll-hero-photo { justify-self: start; }
  /* Phone hero (5.0.1): the portrait comes straight after the h1, about
     56vh tall, cropped to fit, never drawn wider than its 760px file. */
  .ll-hero { padding-top: 18px; }
  .ll-hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .ll-hero-copy { display: contents; }
  .ll-hero-copy > * { order: 3; }
  .ll-hero-copy > .ll-eyebrow { order: 1; }
  .ll-hero-copy > h1 { order: 2; }
  .ll-hero-photo { order: 2; margin: 4px 0 18px; max-width: 760px; }
  .ll-hero-photo img { height: 56vh; max-height: 740px; width: 100%; max-width: 760px; object-fit: cover; object-position: 50% 20%; }
  .ll-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
  .ll-proof li { padding: 10px 8px; }
  .ll-proof strong { font-size: 16px; }
  .ll-proof span { font-size: 13px; line-height: 1.35; display: block; margin-top: 4px; }
  .ll-split--flip > .ll-panel { order: 0; }
  .ll-foot-call { grid-template-columns: minmax(0, 1fr); }
  .ll-foot-card { grid-column: 1; grid-row: auto; min-width: 0; }
  .ll-foot-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ll-brand-s { display: none; }
  .ll-head-cta .ll-btn--ghost { display: none; }
  .ll-mono { width: 38px; height: 38px; }
  .ll-brand-n { font-size: 16px; }
  .ll-book { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
  .ll-book img { width: 120px; }
  /* The page row scrolls sideways; a fade at the right edge says so, and
     the end padding lets the last tab clear the fade. */
  .ll-head-2 ul { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 56px; gap: 18px; }
  .ll-head-2 a { padding: 9px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ll-gear, .ll-sheen { animation: none !important; }
  .ll-btn { transition: none; }
}
@media print {
  .ll-head, .ll-atm, .ll-reel-ctl, .ll-foot-grid { display: none; }
  body { background: #fff; color: #000; }
}