/* Lace the Rainbow — all rules scoped to .ltr-page so nothing leaks into the host site. */
.ltr-page{
  color-scheme:light;
  --red:#D2461F; --orange:#EE7A1A; --yellow:#F2B21B; --green:#3FA535; --grape:#6A2C7A;
  --bg:#FFFAF5; --surface:#FBEDE2; --ink:#1B1310; --muted:#6B5A52; --line:#EADBCF;
  --accent:#C73E18; --band:#1B1310; --band-ink:#FFF1E4; --band-muted:#CDB9AC;
  --display:"Anton", Impact, "Arial Narrow", sans-serif;
  --sans:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ltr-page{
    color-scheme:dark;
    --bg:#15100E; --surface:#221916; --ink:#FFF1E4; --muted:#BFAEA4; --line:#35291F;
    --accent:#FF7247; --band:#0E0A09; --band-ink:#FFF1E4; --band-muted:#B3A196;
  }
}
:root[data-theme="dark"] .ltr-page{
  color-scheme:dark;
  --bg:#15100E; --surface:#221916; --ink:#FFF1E4; --muted:#BFAEA4; --line:#35291F;
  --accent:#FF7247; --band:#0E0A09; --band-ink:#FFF1E4; --band-muted:#B3A196;
}
.ltr-page, .ltr-page *{box-sizing:border-box}
.ltr-page{background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; margin:0}
.ltr-page img{max-width:100%; display:block; height:auto}
.ltr-page .wrap{max-width:1160px; margin:0 auto; padding-inline:24px}
.ltr-page h1, .ltr-page h2, .ltr-page h3{margin:0; text-wrap:balance}
.ltr-page h2{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(2.2rem,5vw,3.6rem); line-height:.98; letter-spacing:.005em}
.ltr-page h3{font-size:1.15rem; font-weight:700; line-height:1.3}
.ltr-page p{margin:0}
.ltr-page .eyebrow{font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:500}
.ltr-page .lede{font-size:1.12rem; color:var(--muted); max-width:62ch}
.ltr-page .sec-head{display:grid; gap:14px; margin-bottom:40px; max-width:780px}
.ltr-page section{padding-block:88px}
.ltr-page figure{margin:0}
.ltr-page figcaption{font-family:var(--mono); font-size:.72rem; color:var(--muted); margin-top:10px; line-height:1.45}
.ltr-page :focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* flavor strip: the one recurring device */
.ltr-page .strip{display:flex; height:10px}
.ltr-page .strip i{flex:1}
.ltr-page .strip i:nth-child(1){background:var(--red)} .ltr-page .strip i:nth-child(2){background:var(--orange)} .ltr-page .strip i:nth-child(3){background:var(--yellow)} .ltr-page .strip i:nth-child(4){background:var(--green)} .ltr-page .strip i:nth-child(5){background:var(--grape)}

/* HERO */
.ltr-page .hero{background:var(--band); color:var(--band-ink)}
.ltr-page .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; padding-block:64px 72px}
.ltr-page .hero .eyebrow{color:var(--yellow)}
.ltr-page .hero h1{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(4rem,11vw,9rem); line-height:.86; margin-top:18px; letter-spacing:-.005em}
.ltr-page .hero h1 span{display:block}
.ltr-page .hero h1 .r{background:linear-gradient(90deg,var(--red),var(--orange) 25%,var(--yellow) 48%,var(--green) 72%,#9B4FB0); -webkit-background-clip:text; background-clip:text; color:transparent}
.ltr-page .hero .tag{font-size:1.2rem; color:var(--band-muted); margin-top:24px; max-width:40ch}
.ltr-page .hero-img img{border-radius:2px; width:100%; aspect-ratio:742/824; object-fit:cover}
.ltr-page .meta{display:grid; grid-template-columns:repeat(4,auto); gap:24px; margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,241,228,.18)}
.ltr-page .meta dt{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--band-muted)}
.ltr-page .meta dd{margin:4px 0 0; font-size:.94rem}

/* IDEA */
.ltr-page .idea{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.ltr-page .pull{font-family:var(--display); text-transform:uppercase; font-size:clamp(2.6rem,6vw,4.6rem); line-height:.95; color:var(--accent)}
.ltr-page .prose{display:grid; gap:1em; max-width:60ch}
.ltr-page .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:56px}
.ltr-page .pillars > div{display:grid; gap:8px; align-content:start; padding-top:16px; border-top:3px solid var(--ink)}
.ltr-page .pillars p{color:var(--muted); font-size:.97rem}

/* DROPS */
.ltr-page .drops-bg{background:var(--surface)}
.ltr-page .drops{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.ltr-page .drop{display:grid; gap:14px; align-content:start}
.ltr-page .drop .pair{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ltr-page .drop .pair img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:2px}
.ltr-page .drop .solo img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:2px}
.ltr-page .drop .name{font-family:var(--display); text-transform:uppercase; font-size:1.9rem; line-height:1}
.ltr-page .drop .spec{font-family:var(--mono); font-size:.74rem; color:var(--muted); display:grid; gap:2px; border-top:1px solid var(--line); padding-top:10px}
.ltr-page .drop .spec b{color:var(--ink); font-weight:500}
.ltr-page .chipset{display:flex; gap:6px}
.ltr-page .chipset i{width:18px; height:18px; border-radius:50%; display:block; box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.ltr-page .drop p.why{color:var(--muted); font-size:.95rem}

/* COPY SYSTEM */
.ltr-page .lines{display:grid; border-top:1px solid var(--line)}
.ltr-page .line{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:24px; padding-block:22px; border-bottom:1px solid var(--line); align-items:baseline}
.ltr-page .line .say{font-family:var(--display); text-transform:uppercase; font-size:clamp(1.8rem,4vw,3rem); line-height:1}
.ltr-page .line .use{color:var(--muted); font-size:.95rem}
.ltr-page .line .use b{display:block; font-family:var(--mono); font-weight:500; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:4px}

/* OOH */
.ltr-page .ooh{display:grid; grid-template-columns:1.35fr 1fr; gap:20px}
.ltr-page .ooh .stack{display:grid; gap:20px}
.ltr-page .ooh img{width:100%; border-radius:2px; object-fit:cover}
.ltr-page .ooh .tall img{aspect-ratio:458/632}

/* SOCIAL */
.ltr-page .social{background:var(--band); color:var(--band-ink)}
.ltr-page .social h2{color:var(--band-ink)}
.ltr-page .social .lede{color:var(--band-muted)}
.ltr-page .social .eyebrow{color:var(--yellow)}
.ltr-page .social img{border-radius:2px}
.ltr-page .social figcaption{color:var(--band-muted)}
.ltr-page .caption-card{margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.ltr-page .caption-card > div{border-top:1px solid rgba(255,241,228,.2); padding-top:14px; display:grid; gap:6px}
.ltr-page .caption-card b{font-family:var(--mono); font-weight:500; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--yellow)}
.ltr-page .caption-card p{color:var(--band-muted); font-size:.95rem}

/* TONE */
.ltr-page .tone{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:3px solid var(--ink)}
.ltr-page .tone > div{padding:26px; display:grid; gap:10px; align-content:start}
.ltr-page .tone > div + div{border-left:3px solid var(--ink)}
.ltr-page .tone .word{font-family:var(--display); text-transform:uppercase; font-size:2.4rem; line-height:1}
.ltr-page .tone p{color:var(--muted); font-size:.95rem}
.ltr-page .result{margin-top:36px; font-size:1.3rem; max-width:48ch}
.ltr-page .result strong{color:var(--accent)}

/* AI */
.ltr-page .ai{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line)}
.ltr-page .ai > div{padding:22px 22px 22px 0; display:grid; gap:8px; align-content:start}
.ltr-page .ai > div + div{padding-left:22px; border-left:1px solid var(--line)}
.ltr-page .ai .who{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.ltr-page .ai .who.gpt{color:var(--accent)}
.ltr-page .ai p{font-size:.94rem; color:var(--muted)}

.ltr-page footer{background:var(--band); color:var(--band-muted); font-size:.88rem}
.ltr-page footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; padding-block:44px}
.ltr-page footer strong{color:var(--band-ink); font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:1.5rem; letter-spacing:.01em}
.ltr-page footer .legal{max-width:52ch}

@media (max-width:900px){
  .ltr-page .hero-grid, .ltr-page .idea, .ltr-page .ooh{grid-template-columns:1fr}
  .ltr-page .hero-img{max-width:460px}
  .ltr-page .drops, .ltr-page .pillars, .ltr-page .caption-card, .ltr-page .tone{grid-template-columns:1fr}
  .ltr-page .tone > div + div{border-left:0; border-top:3px solid var(--ink)}
  .ltr-page .ai{grid-template-columns:1fr 1fr}
  .ltr-page .ai > div{padding:18px 0!important; border-left:0!important; border-bottom:1px solid var(--line)}
  .ltr-page .meta{grid-template-columns:1fr 1fr}
  .ltr-page .line{grid-template-columns:1fr; gap:8px}
  .ltr-page section{padding-block:64px}
}
@media (max-width:520px){
  .ltr-page{font-size:16px}
  .ltr-page .wrap{padding-inline:18px}
  .ltr-page .ai{grid-template-columns:1fr}
}

.ltr-page [hidden]{display:none!important}