/* UNIQUE_STYLE: product-night-stage */
* { box-sizing: border-box; }
:root {
  --night: #06070a;
  --midnight: #0c1118;
  --panel: #111821;
  --panel-strong: #161f2a;
  --ink: #f7efe2;
  --paper: #fff7e8;
  --muted: #b6ab9c;
  --dim: #786f63;
  --brass: #d5a34d;
  --brass-deep: #8b6125;
  --brass-soft: rgba(213, 163, 77, .26);
  --graphite: #202933;
  --graphite-soft: #303b47;
  --lens: #fff0c6;
  --line: rgba(247, 239, 226, .14);
  --line-strong: rgba(247, 239, 226, .24);
  --shadow: rgba(0, 0, 0, .58);
  --max: 1160px;
  --radius: 28px;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 76% 4%, rgba(213, 163, 77, .22), transparent 29rem),
    radial-gradient(circle at 12% 12%, rgba(255, 247, 232, .10), transparent 21rem),
    linear-gradient(180deg, #10131a 0%, var(--night) 54%, #030405 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.58;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 36%, rgba(255,255,255,.035) 36.2%, transparent 36.7% 100%),
    radial-gradient(circle at 50% 110%, rgba(213, 163, 77, .14), transparent 34rem);
  opacity: .75;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--brass); outline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }

.lumo-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: min(var(--max), calc(100% - 36px));
  margin: 18px auto 0;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  background: rgba(6, 7, 10, .80);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 18px 70px rgba(0, 0, 0, .36);
  backdrop-filter: blur(18px) saturate(130%);
}
.lumo-brand {
  min-height: 44px;
  padding: 5px 12px 6px 16px;
  display: grid;
  align-content: center;
  gap: 0;
}
.lumo-brand span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  line-height: .9;
  letter-spacing: -.055em;
}
.lumo-brand small {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .60rem;
  font-weight: 900;
}
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  color: var(--muted);
  font-size: .77rem;
  font-weight: 850;
}
nav a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
}
nav a:hover { color: var(--ink); border-color: rgba(213, 163, 77, .48); background: rgba(255,255,255,.045); }

section, footer { position: relative; width: min(var(--max), calc(100% - 36px)); margin-left: auto; margin-right: auto; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.06em; text-wrap: balance; }
h1 { max-width: 10.2ch; margin: 0 0 24px; font-size: clamp(3.25rem, 7vw, 7.1rem); line-height: .88; }
h2 { max-width: 12ch; margin: 0 0 18px; font-size: clamp(2.12rem, 4.8vw, 4.25rem); line-height: .94; }
h3 { margin: 0 0 8px; font-size: 1.04rem; letter-spacing: -.02em; }

.product-hero {
  min-height: 770px;
  padding: 76px 0 62px;
  display: grid;
  grid-template-columns: minmax(0, .74fr) minmax(440px, 1fr);
  gap: clamp(36px, 6.8vw, 92px);
  align-items: center;
}
.lumo-kicker {
  margin: 0 0 14px;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .68rem;
  font-weight: 950;
}
.launch-copy p:not(.lumo-kicker),
.micro-proof p,
.launch-note p,
.beam-proof p,
.material-heading p,
.spec-intro p {
  max-width: 660px;
  color: var(--muted);
  font-size: 1.06rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.quiet-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 17px;
  border: 1px solid rgba(213,163,77,.52);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 900;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.quiet-link.primary { background: linear-gradient(135deg, #f0c36a, var(--brass)); color: #11100d; box-shadow: 0 20px 48px rgba(213,163,77,.20); }
.quiet-link.secondary { background: rgba(255,255,255,.035); color: var(--muted); }
.quiet-link:hover { transform: translateY(-1px); border-color: var(--paper); }
.quiet-link.large {
  margin-top: 18px;
  min-height: 0;
  padding: 0 0 7px;
  border: 0;
  border-bottom: 1px solid rgba(213,163,77,.75);
  border-radius: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 4vw, 3.35rem);
  letter-spacing: -.05em;
}
.hero-ledger {
  margin: 34px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.hero-ledger div {
  min-height: 96px;
  padding: 16px;
  display: grid;
  align-content: end;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
}
.hero-ledger dt {
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .62rem;
  font-weight: 950;
}
.hero-ledger dd { margin: 7px 0 0; color: var(--paper); font-weight: 850; }

.lamp-stage {
  position: relative;
  min-height: 650px;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.03) 1px, transparent 1px),
    radial-gradient(circle at 56% 45%, rgba(255, 232, 175, .16), transparent 17rem),
    linear-gradient(180deg, #141b23, #050607 72%);
  background-size: 48px 48px, 48px 48px, auto, auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 54px 160px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.035);
}
.lamp-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse at 52% 45%, transparent 0 28%, rgba(6,7,10,.18) 49%, rgba(6,7,10,.82) 100%),
    linear-gradient(180deg, rgba(6,7,10,.12), rgba(6,7,10,.52));
  pointer-events: none;
}
.lamp-stage::after {
  content: "PHOTOGRAPHIC OBJECT STUDY  /  STATIC TEASER";
  position: absolute;
  left: 24px;
  top: 24px;
  z-index: 6;
  color: rgba(247,239,226,.60);
  font-size: .60rem;
  letter-spacing: .18em;
  font-weight: 950;
}
.lamp-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
  filter: saturate(.82) contrast(1.08) brightness(.72);
  transform: scale(1.015);
}
.beam-field {
  position: absolute;
  inset: -8% -12% -4%;
  z-index: 4;
  background:
    conic-gradient(from 212deg at 55% 31%, transparent 0 14deg, rgba(255,239,193,.46) 16deg 43deg, rgba(213,163,77,.18) 54deg, transparent 79deg),
    radial-gradient(ellipse at 55% 63%, rgba(255,239,199,.30), rgba(213,163,77,.12) 28%, rgba(213,163,77,.04) 52%, transparent 72%);
  clip-path: polygon(28% 0, 72% 0, 94% 100%, 6% 100%);
  mix-blend-mode: screen;
  filter: blur(8px);
  opacity: .86;
  pointer-events: none;
}
.shade-aperture {
  position: absolute;
  left: 37%;
  top: 29%;
  z-index: 5;
  width: min(250px, 42%);
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,241,204,.88), rgba(213,163,77,.28) 54%, transparent 74%);
  filter: blur(2px);
  opacity: .52;
}
.product-silhouette {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  bottom: 20px;
  z-index: 5;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: calc(var(--radius) - 8px);
  box-shadow: inset 0 -120px 120px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  pointer-events: none;
}
.stage-plaque {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0;
  min-width: min(448px, calc(100% - 44px));
  overflow: hidden;
  border: 1px solid rgba(247,239,226,.18);
  border-radius: 18px;
  background: rgba(6,7,10,.70);
  backdrop-filter: blur(16px) saturate(140%);
}
.stage-plaque strong,
.stage-plaque span {
  padding: 14px 15px;
  border-left: 1px solid rgba(247,239,226,.13);
  color: var(--muted);
  font-size: .70rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 950;
}
.stage-plaque strong { border-left: 0; color: var(--brass); }
.lamp-stage figcaption {
  position: absolute;
  left: 24px;
  bottom: 25px;
  z-index: 7;
  max-width: 210px;
  color: rgba(247,239,226,.58);
  font-size: .72rem;
  line-height: 1.45;
}

.beam-proof,
.material-story,
.desk-vignettes,
.micro-proof,
.launch-note {
  margin-top: 66px;
  padding: clamp(28px, 5vw, 56px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.022)),
    rgba(8, 10, 13, .54);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 28px 110px rgba(0,0,0,.24);
}
.beam-proof {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: clamp(24px, 5vw, 54px);
  align-items: stretch;
}
.beam-board {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 58% 39%, rgba(255,236,187,.44), rgba(213,163,77,.15) 32%, transparent 66%),
    linear-gradient(135deg, #171e26, #07090d 75%);
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}
.beam-board::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 76px;
  height: 82px;
  background: linear-gradient(135deg, rgba(247,239,226,.20), rgba(247,239,226,.045));
  border: 1px solid rgba(247,239,226,.16);
  transform: skewX(-12deg);
  box-shadow: 0 20px 70px rgba(213,163,77,.12);
}
.beam-board::after {
  content: "";
  position: absolute;
  left: 35%;
  top: -26px;
  width: 156px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(90deg, #111821, #394451, #111821);
  box-shadow: 0 24px 64px rgba(255,239,199,.08);
}
.beam-board span {
  position: absolute;
  padding: 8px 10px;
  background: rgba(6,7,10,.76);
  border: 1px solid rgba(213,163,77,.42);
  border-radius: 999px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .61rem;
  font-weight: 950;
  backdrop-filter: blur(10px);
}
.beam-board span:nth-child(1) { left: 9%; top: 18%; }
.beam-board span:nth-child(2) { right: 10%; top: 25%; }
.beam-board span:nth-child(3) { left: 24%; bottom: 20%; }
.beam-board span:nth-child(4) { right: 13%; bottom: 15%; }

.spec-rail {
  margin-top: 66px;
  display: grid;
  grid-template-columns: 1.12fr repeat(3, minmax(0, .82fr));
  gap: 10px;
  align-items: stretch;
}
.spec-intro,
.spec-rail article {
  min-height: 255px;
  padding: 25px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: 24px;
}
.spec-rail article {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.spec-rail article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brass), rgba(213,163,77,.18), transparent);
}
.spec-rail article::after {
  content: "";
  position: absolute;
  right: -36px;
  top: -42px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 1px solid rgba(213,163,77,.16);
  background: radial-gradient(circle, rgba(213,163,77,.13), transparent 64%);
}
.spec-rail span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .66rem;
  font-weight: 950;
}
.spec-rail strong {
  display: block;
  margin: 14px 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: .86;
  letter-spacing: -.07em;
  color: var(--brass);
}
.spec-rail p,
.material-grid p,
.vignette-grid p { color: var(--muted); margin-bottom: 0; }

.material-heading {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 430px);
  gap: 28px;
  align-items: end;
}
.material-heading p:last-child { margin-bottom: 20px; }
.material-layout {
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 14px;
}
.detail-photo {
  position: relative;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #080a0d;
}
.detail-photo img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  filter: saturate(.88) contrast(1.06) brightness(.74);
}
.detail-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,7,10,.78));
}
.detail-photo figcaption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 2;
  color: rgba(247,239,226,.70);
  font-size: .78rem;
}
.material-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.swatch {
  min-height: 420px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--line);
  border-radius: 24px;
}
.swatch span {
  display: block;
  margin-bottom: auto;
  height: 156px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: inset 0 0 34px rgba(0,0,0,.25), 0 18px 50px rgba(0,0,0,.20);
}
.swatch.graphite span { background: linear-gradient(135deg, #525d67, #151b22 62%, #303842); }
.swatch.brass span { background: linear-gradient(125deg, #79501c, #ffc36b 28%, #b77b2d 55%, #4b351a); }
.swatch.lens span { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.90), rgba(255,239,199,.56) 38%, rgba(255,239,199,.12) 70%); }

.vignette-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
}
.vignette-grid article {
  min-height: 220px;
  padding: 21px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.012));
}
.vignette-grid span {
  display: inline-block;
  margin-bottom: 56px;
  color: var(--brass);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .14em;
}
.micro-proof {
  background:
    linear-gradient(135deg, rgba(213,163,77,.15), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
}
.launch-note { text-align: center; margin-bottom: 66px; }
.launch-note h2 { margin-left: auto; margin-right: auto; }
.launch-note p { margin-left: auto; margin-right: auto; }

footer {
  margin-bottom: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--muted);
  font-size: .92rem;
}
footer p { margin: 0; }
footer a { color: var(--brass); font-weight: 900; }

@media (max-width: 1040px) {
  .product-hero,
  .beam-proof,
  .spec-rail,
  .material-heading,
  .material-layout { grid-template-columns: 1fr; min-height: auto; }
  .product-hero { padding-top: 58px; }
  .lamp-stage { min-height: 620px; }
  .spec-intro, .spec-rail article { min-height: 210px; }
  .material-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .lumo-header { border-radius: 24px; align-items: flex-start; }
  nav { max-width: 320px; }
  .hero-ledger, .material-grid, .vignette-grid { grid-template-columns: 1fr; }
  .lamp-stage { min-height: 540px; }
  .lamp-stage figcaption { display: none; }
  .stage-plaque { grid-template-columns: 1fr; }
  .stage-plaque strong, .stage-plaque span { border-left: 0; border-top: 1px solid rgba(247,239,226,.13); }
  .stage-plaque strong { border-top: 0; }
  .swatch, .detail-photo img { min-height: 300px; }
}
@media (max-width: 560px) {
  .lumo-header {
    width: min(100% - 22px, var(--max));
    flex-direction: column;
    align-items: stretch;
  }
  section, footer { width: min(100% - 22px, var(--max)); }
  nav, nav a, .hero-actions, .quiet-link { width: 100%; }
  nav { max-width: none; }
  h1 { font-size: clamp(2.75rem, 15vw, 4.75rem); }
  h2 { max-width: 13ch; }
  .product-hero { gap: 28px; padding-bottom: 44px; }
  .lamp-stage { min-height: 455px; border-radius: 22px; }
  .lamp-stage::after { left: 18px; top: 18px; max-width: 190px; line-height: 1.45; }
  .beam-field { opacity: .72; }
  .shade-aperture { left: 29%; width: 210px; }
  .product-silhouette { left: 14px; right: 14px; top: 14px; bottom: 14px; }
  .stage-plaque { right: 14px; left: 14px; bottom: 14px; min-width: 0; }
  .beam-proof, .material-story, .desk-vignettes, .micro-proof, .launch-note { margin-top: 42px; padding: 24px; border-radius: 22px; }
  .beam-board { min-height: 286px; }
  .spec-rail { margin-top: 42px; }
  .spec-intro, .spec-rail article, .swatch, .detail-photo { border-radius: 20px; }
  footer { display: block; }
  footer a { display: inline-block; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Design vocabulary: productnightstage tasklamp graphitealuminum brasshinge frostedlens studiodesk productstill softreflection apertureglow dimprofile shadegeometry machinedbase readingpool materialfinish objectportrait launchnote industrialdesign beamfalloff tactileknob powdercoat lensdiffusion furnituregrade latework instrumentrail stageplaque materialtray deskvignette photographiclamp premiumproduct understatedlaunch warmtaskpool */


/* Shared demo navigation back to the Website Development page. */
.wd-back-link {
  position: sticky;
  top: 12px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin: 12px 0 0 max(12px, calc((100vw - var(--max, 1120px)) / 2));
  padding: 0.58rem 0.86rem;
  border: 1px solid rgba(30, 40, 34, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: inherit;
  font: 800 0.86rem/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(30, 40, 34, 0.12);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

.wd-back-link:hover,
.wd-back-link:focus-visible,
.footer-back-to-web-development:hover,
.footer-back-to-web-development:focus-visible {
  text-decoration: none;
  transform: translateY(-1px);
}

.footer-back-to-web-development {
  display: inline-flex;
  margin-left: 1rem;
  font-weight: 900;
}

@media (max-width: 660px) {
  .wd-back-link {
    margin-left: 11px;
    max-width: calc(100vw - 22px);
  }

  .footer-back-to-web-development {
    display: inline-flex;
    margin-left: 0;
    margin-top: 0.7rem;
  }
}