/* LUCY LU — static rebuild of lulucy.org */
:root {
  --bg: #000;
  --ink: #fff;
  --ink-dim: #b0b0b0;
  --card: #1b1b1b;
  --chip: #fff86b;
  --header-h: 170px;
  --mono: 'Courier Prime', 'Courier New', monospace;
  --display: 'Jost', 'Futura', sans-serif;
  --z: 1;
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif; overflow-x: hidden; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }

/* ── header & menu ─────────────────────────────────────────── */
.site-header { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(max(0px, (100vw - 1440px) / 2) + 100px); background: #000; position: relative; z-index: 20; }
.logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }
.logo-name { font-family: var(--display); font-weight: 400; font-size: 49px; letter-spacing: .01em; -webkit-text-stroke: .6px #fff; }
.logo-tag { font-family: var(--mono); font-weight: 700; font-size: 17px; letter-spacing: .12em; margin-top: 12px; padding-left: 4px; }
.header-actions { display: flex; align-items: center; gap: 26px; }
.pill { background: #fff; color: #000; font-family: var(--mono); font-weight: 700; font-size: 16px; letter-spacing: .06em; text-decoration: none; padding: 8px 38px; border-radius: 999px; }
.pill:hover { background: #ddd; }
.burger { width: 40px; height: 32px; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; }
.burger span { display: block; height: 4px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .25s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(14px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-14px) rotate(-45deg); }
/* The menu starts below the header, shrinks its text on short screens (an iPad on its side with
   browser bars), and scrolls if it still doesn't fit. "safe center" keeps the top reachable. */
.menu { position: fixed; inset: 0; z-index: 15; background: rgba(0,0,0,.94); display: flex; flex-direction: column; justify-content: safe center; align-items: center; gap: clamp(16px, 4vh, 40px); padding: calc(var(--header-h) + 8px) 16px 24px; overflow-y: auto; overscroll-behavior: contain; }
.menu[hidden] { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; text-align: center; columns: 2; column-gap: 80px; }
.menu li { padding: clamp(4px, 1.2vh, 10px) 0; break-inside: avoid; }
.menu ul a { font-family: var(--display); font-size: clamp(24px, 5.4vh, 40px); text-decoration: none; }
.menu ul a:hover { color: var(--chip); }
body.menu-open { overflow: hidden; }
.menu-socials, .footer-socials { display: flex; gap: 18px; justify-content: center; }
.menu-socials img, .footer-socials img { width: 28px; height: 28px; opacity: .9; }
/* a page's own list of socials (the contact page); the footer row would repeat it */
.no-footer-socials .footer-socials { display: none; }
.social-list { display: flex; flex-direction: column; gap: 26px; }
.social-list a { display: flex; align-items: center; gap: 30px; color: #fff; text-decoration: none; font-size: 22px; }
.social-list img { width: 42px; height: 42px; flex-shrink: 0; }
.social-list a:hover span { text-decoration: underline; }
.site-footer { padding: 40px 16px 50px; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--ink-dim); border-top: 1px solid #1a1a1a; }

/* ── positioned pages (desktop) ────────────────────────────── */
/* Each element sits where it was on the 1440px-wide original; site.js scales the whole
   canvas down with zoom on narrower windows. */
/* Fixed background behind a whole page, as Wix's page background. */
.page-bg { position: fixed; inset: 0; z-index: -1; }
body.has-page-bg { background: transparent; }
.page-bg img, .page-bg video { width: 100%; height: 100%; object-fit: cover; }
.sect { display: contents; }
.canvas { position: relative; width: 1440px; margin: 0 auto; overflow: hidden; zoom: var(--z); }
.grp { display: contents; }
.el { position: absolute; }
.el.pic { overflow: hidden; display: block; }
.el.pic img { width: 100%; height: 100%; max-width: none; }
.el.text { line-height: 1.4; overflow-wrap: break-word; }
.el.text p, .el.text h1, .el.text h2, .el.text h3, .el.text h4, .el.text h5, .el.text h6 { margin: 0; font-weight: inherit; }
.el.text ul, .el.text ol { margin: 0; padding-left: 1.3em; }
.el.text a { text-decoration: none; }
.el.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; transition: filter .2s, opacity .2s; }
.el.btn:hover { filter: brightness(1.12); }
.el.btn.plain { justify-content: flex-start; }
.el.btn.plain:hover { opacity: .8; filter: none; }
.el.frame { border: 0; background: #000; }
.el.vid { background: #000; }
.el.feed { position: absolute; }
.mailform { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 14px; }
.mailform input, .mailform textarea { font: inherit; color: #111; background: #fff; border: 1px solid #999; border-radius: 0; padding: 10px; margin-bottom: 12px; }
.mailform button { align-self: flex-start; font: 700 14px var(--mono); letter-spacing: .08em; background: #111; color: #fff; border: 0; border-radius: 999px; padding: 12px 36px; cursor: pointer; }
.mailform button:hover { background: #333; }

/* ── post cards ────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.card { background: var(--card); display: flex; flex-direction: column; }
.card-img { aspect-ratio: 4 / 3; background: #111; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover .card-img img { transform: scale(1.03); }
.card-body { padding: 28px 20px 34px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.card time, .post-meta { font-family: var(--mono); font-size: 12px; color: #ddd; }
.chip { display: inline-block; font-family: var(--display); font-size: 12px; color: var(--chip); border: 2px solid var(--chip); border-radius: 999px; padding: 1px 10px; text-decoration: none; }
.card h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin: 4px 0 0; font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.card h3 a { text-decoration: none; }
.card p { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: #ddd; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.more { text-align: center; font-family: var(--mono); margin: 24px 0; }
.blog-layout { position: relative; }
.cat-nav { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 15px; border: 1px solid #fff; border-radius: 20px; padding: 16px 12px; }
.cat-nav a { text-decoration: none; padding: 8px 0; }
.cat-nav a[aria-current] { color: var(--chip); }
.page-lately .blog-layout > .cat-nav { position: absolute; z-index: 10; background: rgba(0,0,0,.35); backdrop-filter: blur(4px); top: 40px; left: calc(50% + 520px * var(--z)); width: 200px; }
.listing { max-width: 1200px; margin: 0 auto; padding: 20px 16px 80px; }
.listing h1 { font-family: var(--display); font-weight: 400; font-size: 72px; margin: 0 0 32px; }
.listing .blog-layout { display: grid; grid-template-columns: 1fr 220px; gap: 24px; align-items: start; }

/* ── posts ─────────────────────────────────────────────────── */
.post { max-width: 740px; margin: 0 auto; padding: 50px 16px 80px; }
.post h1 { font-family: var(--display); font-weight: 600; font-size: 32px; line-height: 1.2; margin: 14px 0 22px; }
.post-body { font-size: 15px; line-height: 1.7; }
.post-body p { margin: 0 0 1em; }
.post-body img, .post-body video.embed { width: 100%; height: auto; margin: 24px 0; }
.post-body a { color: #9fd3ff; }
.post-body h2, .post-body h3 { font-family: var(--display); font-weight: 600; margin: 1.6em 0 .6em; }
.post-body blockquote { border-left: 3px solid var(--chip); margin: 1.4em 0; padding: 0 0 0 16px; color: var(--ink-dim); }
.post-body pre { background: #111; padding: 14px; overflow: auto; border-radius: 6px; }
.post-body table { border-collapse: collapse; width: 100%; font-size: 14px; }
.post-body td, .post-body th { border: 1px solid #333; padding: 6px 8px; }
.embed { margin: 24px 0; width: 100%; }
.embed iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.embed.yt { aspect-ratio: 16 / 9; }
.post-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 40px; }
.post-nav { display: flex; justify-content: space-between; gap: 24px; margin-top: 50px; padding-top: 24px; border-top: 1px solid #222; font-family: var(--mono); font-size: 13px; }
.post-nav a { text-decoration: none; color: var(--ink-dim); max-width: 45%; }
.post-nav a:hover { color: #fff; }

/* ── small screens: stack elements in reading order ────────── */
@media (max-width: 760px) {
  :root { --header-h: 96px; }
  .site-header { padding: 0 16px; }
  .logo-name { font-size: 30px; }
  .logo-tag { font-size: 11px; margin-top: 8px; }
  .header-actions { gap: 16px; }
  .pill { font-size: 12px; padding: 6px 16px; }
  .burger { width: 30px; height: 24px; }
  .burger span { height: 3px; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }
  .menu ul { columns: 1; }
  .menu ul a { font-size: clamp(22px, 4.4vh, 30px); }

  .canvas { zoom: 1 !important; width: auto; height: auto !important; overflow: visible; display: flex; flex-direction: column; gap: 14px; padding: 16px; }
  .el { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; min-height: 0 !important; max-width: 100%; }
  .el.box, .el.bg { display: none; }
  .sect { display: flex; flex-direction: column; gap: 14px; margin: 0 -16px; padding: 24px 16px; background: var(--s-bg); }
  /* a section's backdrop image or video fills it here too, behind its content */
  .sect { position: relative; isolation: isolate; }
  .sect > .el.backdrop { display: block; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none; aspect-ratio: auto; z-index: -1 !important; }
  .el.text [style*="--ls"] { letter-spacing: min(var(--ls), .1em) !important; } /* wide tracking doesn't fit */
  .grp { display: flex; flex-direction: column; gap: 12px; position: relative; padding: 20px; background: var(--g-bg); border-radius: var(--g-radius); overflow: hidden; }
  .grp > .el.cover { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; z-index: 0; }
  .grp:has(> .el.cover) { min-height: 240px; justify-content: flex-end; }
  .grp > :not(.cover) { z-index: 1; }
  .el.pic { aspect-ratio: var(--ar); max-width: min(100%, var(--w, 100%)); } /* small icons keep their size */
  .el.pic img { height: 100%; }
  .el.vid { aspect-ratio: var(--ar); width: 100% !important; }
  .el.frame { width: 100% !important; aspect-ratio: var(--ar); }
  .el.frame.wide { aspect-ratio: auto; height: 75vh !important; }
  .el.text { font-size: min(var(--size, 1em), 44px) !important; }
  .el.text [style*="--fs"] { font-size: min(var(--fs), 44px) !important; }
  .el.btn { padding: 14px 20px; align-self: flex-start; min-width: 160px; }
  .el.btn.plain { font-size: 30px !important; padding: 0; }
  .el.feed { width: auto !important; }
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .page-lately .blog-layout > .cat-nav, .listing .blog-layout > .cat-nav { position: static; width: auto; margin: 16px; }
  .listing .blog-layout { grid-template-columns: 1fr; }
  .listing h1 { font-size: 44px; }
  .post h1 { font-size: 26px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .site-header { padding: 0 40px; }
}