/* ============================================================
   Linktwos banners for TogWise (legalical.com)
   Four banners, one design, one size. Each is a single link to
   linktwos.com. Same look as the Linktwos Instagram posts:
   Sora headline, brand colours, the official logo files.

   Keep these files together in the same folder:
   linktwos-banners.css, lt-sora-800.woff2, lt-logo.png,
   lt-mark.png, lt-mark-white.png
   ============================================================ */

@font-face{
  font-family:"LT Sora";font-style:normal;font-weight:800;font-display:swap;
  src:url("lt-sora-800.woff2") format("woff2");
}

.lt-ad{
  --lt-ink:#07090d;            /* the near-black of the Instagram posts */
  --lt-cyan:#18cad9;           /* Vivid Cyan  */
  --lt-azure:#1ba8e6;          /* Vivid Azure */
  --lt-blue:#1d66fa;           /* Vivid Blue, the CTA colour */
  --lt-soft:#dfe4ee;
  --lt-faint:#b4bdcf;
  --lt-display:"LT Sora","Sora",var(--font,system-ui),sans-serif;
  container-type:inline-size;
  display:block;font-family:inherit;text-align:left;
}
.lt-ad *,.lt-ad *::before,.lt-ad *::after{box-sizing:border-box;margin:0;padding:0}

.lt-label{
  display:block;margin:0 2px 7px;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1;
  color:var(--ink-faint,#8a90a6);
}

/* ---------- the banner ----------
   Every measurement is a share of the banner's own width (cqi),
   so the banner scales like a picture and all four stay identical. */
.lt-b{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  aspect-ratio:4/5;
  border-radius:2.6cqi;
  background:var(--lt-ink);color:#fff;text-decoration:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 18px 40px -22px rgba(7,9,13,.55);
  -webkit-tap-highlight-color:transparent;
}
.lt-b:focus-visible{outline:2px solid var(--lt-cyan);outline-offset:3px}

/* ---------- the artwork panel (top of the banner) ---------- */
.lt-art{
  position:relative;display:flex;flex-direction:column;justify-content:center;flex:none;height:37%;overflow:hidden;
  padding:6.2cqi;font-size:1cqi;          /* 1em = 1% of the banner's width */
}
.lt-tall .lt-art,.lt-rail .lt-art{height:42%;padding:7cqi;font-size:1.13cqi}

/* 1. night sky and the logo mark */
.lt-b1 .lt-art{
  background-image:
    radial-gradient(closest-side at 50% 50%,rgba(24,202,217,.30),transparent 78%),
    radial-gradient(1.6px 1.6px at 11% 20%,#fff 50%,transparent 52%),
    radial-gradient(1.2px 1.2px at 26% 74%,rgba(255,255,255,.7) 50%,transparent 52%),
    radial-gradient(1.3px 1.3px at 40% 11%,rgba(255,255,255,.85) 50%,transparent 52%),
    radial-gradient(1.2px 1.2px at 60% 86%,rgba(255,255,255,.6) 50%,transparent 52%),
    radial-gradient(1.8px 1.8px at 76% 15%,#fff 50%,transparent 52%),
    radial-gradient(1.2px 1.2px at 89% 62%,rgba(255,255,255,.7) 50%,transparent 52%),
    radial-gradient(1.1px 1.1px at 94% 9%,rgba(255,255,255,.5) 50%,transparent 52%),
    radial-gradient(1.3px 1.3px at 6% 88%,rgba(255,255,255,.6) 50%,transparent 52%),
    radial-gradient(1.1px 1.1px at 18% 48%,rgba(255,255,255,.45) 50%,transparent 52%),
    radial-gradient(1.4px 1.4px at 82% 90%,rgba(255,255,255,.75) 50%,transparent 52%);
}
.lt-b1 .lt-art::after{
  content:"";display:block;width:56%;margin:0 auto;aspect-ratio:420/160;
  background:url("lt-mark.png") center/contain no-repeat;
}

/* 2. the cold message nobody answered */
.lt-b2 .lt-art{justify-content:flex-end;gap:2.2em}
.lt-msg{
  display:block;font-size:5.9em;line-height:1.34;color:#a4aec2;
  text-decoration:line-through;text-decoration-color:var(--lt-blue);text-decoration-thickness:.1em;
}
.lt-read{display:block;font-size:3.3em;line-height:1;color:#8791a5;text-align:right;letter-spacing:.02em}

/* 3. the sum */
.lt-b3 .lt-art{justify-content:flex-end}
.lt-sum{display:block;font-family:var(--lt-display);font-weight:800;font-size:15.2em;line-height:1;letter-spacing:-.04em;color:#7f8aa3;white-space:nowrap}
.lt-sum b{
  font-weight:800;color:var(--lt-cyan);
  background:linear-gradient(95deg,#2ee0ee,#3db8ff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* 4. brand colour block and the white mark */
.lt-b4 .lt-art{background:linear-gradient(135deg,var(--lt-cyan),var(--lt-blue) 85%)}
.lt-b4 .lt-art::after{
  content:"";display:block;width:50%;margin:0 auto;aspect-ratio:300/115;
  background:url("lt-mark-white.png") center/contain no-repeat;
}
.lt-b4 .lt-body,.lt-b2 .lt-body,.lt-b3 .lt-body{margin-top:5.4cqi}

.lt-body{
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
  padding:0 6.2cqi;gap:2.4cqi;position:relative;
}
.lt-kick{
  display:block;font-family:var(--lt-display);font-weight:800;
  font-size:max(8.5px,2.75cqi);letter-spacing:.16em;text-transform:uppercase;line-height:1.3;color:var(--lt-faint);
}
.lt-kick::before{
  content:"";display:block;width:11cqi;height:.8cqi;margin-bottom:2.6cqi;border-radius:1cqi;
  background:linear-gradient(90deg,var(--lt-azure),var(--lt-blue));
}
.lt-h{
  display:block;font-family:var(--lt-display);font-weight:800;
  font-size:7.3cqi;line-height:1.1;letter-spacing:-.025em;text-wrap:balance;
}
.lt-h em{
  display:block;font-style:normal;color:#2ee0ee;
  background:linear-gradient(95deg,#2ee0ee,#3db8ff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* the short one gets room to shout */
.lt-b1 .lt-h{font-size:11cqi;line-height:1.02}
.lt-p{display:block;font-size:max(11px,4.05cqi);line-height:1.42;font-weight:500;color:var(--lt-soft)}

.lt-foot{
  display:flex;align-items:center;gap:5cqi;flex:none;
  padding:0 6.2cqi 6.2cqi;
}
.lt-logo{                      /* the official stacked lock-up, untouched */
  display:block;flex:none;width:19cqi;aspect-ratio:3200/1645;
  background:url("lt-logo.png") center/contain no-repeat;
}
.lt-btn{
  display:flex;align-items:center;justify-content:space-between;gap:2cqi;flex:1 1 auto;
  height:12cqi;padding:0 4.4cqi;border-radius:1.2cqi;
  background:var(--lt-blue);color:#fff;
  font-family:var(--lt-display);font-weight:800;font-size:max(11px,4.1cqi);letter-spacing:-.005em;line-height:1;white-space:nowrap;
  transition:background-color .15s ease;
}
.lt-btn svg{width:4.6cqi;height:4.6cqi;flex:none;transition:transform .15s ease}
.lt-b:hover .lt-btn{background:#3a7bff}
.lt-b:hover .lt-btn svg{transform:translateX(1cqi)}

/* ---------- tall shape: the side gaps (1:2, 300 x 600 at full size) ---------- */
.lt-rail .lt-b,.lt-tall .lt-b{aspect-ratio:1/2;border-radius:3cqi}
.lt-rail .lt-body,.lt-tall .lt-body{padding:0 7cqi;gap:3cqi}
.lt-rail .lt-b1 .lt-body,.lt-tall .lt-b1 .lt-body{margin-top:0}
.lt-rail .lt-b2 .lt-body,.lt-rail .lt-b3 .lt-body,.lt-rail .lt-b4 .lt-body,.lt-tall .lt-b2 .lt-body,.lt-tall .lt-b3 .lt-body,.lt-tall .lt-b4 .lt-body{margin-top:7cqi}
.lt-rail .lt-kick,.lt-tall .lt-kick{font-size:max(8.5px,3.25cqi)}
.lt-rail .lt-kick::before,.lt-tall .lt-kick::before{width:13cqi;height:1cqi;margin-bottom:3.2cqi}
.lt-rail .lt-h,.lt-tall .lt-h{font-size:9.9cqi}
.lt-rail .lt-b1 .lt-h,.lt-tall .lt-b1 .lt-h{font-size:14.2cqi}
.lt-rail .lt-p,.lt-tall .lt-p{font-size:max(11px,5cqi)}
.lt-rail .lt-foot,.lt-tall .lt-foot{padding:0 7cqi 7cqi;gap:5cqi}
.lt-rail .lt-logo,.lt-tall .lt-logo{width:22cqi}
.lt-rail .lt-btn,.lt-tall .lt-btn{height:14cqi;padding:0 4.6cqi;border-radius:1.4cqi;font-size:max(11px,4.7cqi)}
.lt-rail .lt-btn svg,.lt-tall .lt-btn svg{width:5.2cqi;height:5.2cqi}

/* ---------- wide shape: inside the page on tablets (5:2) ---------- */
@container (min-width:520px){
  .lt-inline .lt-b{aspect-ratio:5/2;display:grid;grid-template-columns:38% 1fr;grid-template-rows:1fr auto;border-radius:1.5cqi}
  .lt-inline .lt-art{grid-row:1/3;height:100%;padding:3.6cqi;font-size:.5cqi}
  .lt-inline .lt-b2 .lt-art,.lt-inline .lt-b3 .lt-art{justify-content:center}
  .lt-inline .lt-b .lt-body{margin:0;padding:3.6cqi 4cqi 0 3.4cqi;gap:1.3cqi}
  .lt-inline .lt-kick{font-size:max(8.5px,1.5cqi)}
  .lt-inline .lt-kick::before{width:6cqi;height:.45cqi;margin-bottom:1.5cqi}
  .lt-inline .lt-h{font-size:3.9cqi}
  .lt-inline .lt-b1 .lt-h{font-size:5.8cqi}
  .lt-inline .lt-p{font-size:max(11px,2.15cqi)}
  .lt-inline .lt-foot{padding:0 4cqi 3.6cqi 3.4cqi;gap:2.6cqi}
  .lt-inline .lt-logo{width:10cqi}
  .lt-inline .lt-btn{flex:0 0 auto;height:6cqi;padding:0 2.4cqi;gap:2.2cqi;border-radius:.6cqi;font-size:max(11px,2.15cqi)}
  .lt-inline .lt-btn svg{width:2.4cqi;height:2.4cqi}
}

/* ============================================================
   Where they sit
   .lt-rail   the side gaps, 1280px and wider, follows the scroll
   .lt-inline inside the page, below 1280px (phones and tablets)
   ============================================================ */
.lt-rail{display:none}
.lt-inline{margin-top:40px}
@media (max-width:560px){.lt-inline .lt-ad{max-width:400px;margin-inline:auto}}
@media (min-width:1280px){
  .lt-rail{
    display:flex;flex-direction:column;gap:28px;align-self:stretch;
    flex:1 1 240px;min-width:240px;max-width:300px;padding-top:18px;
  }
  .lt-seg{flex:1 1 0}
  .lt-seg .lt-ad{position:sticky;top:18px;margin-inline:auto;width:min(100%,calc((100vh - 62px) / 2))}
  .lt-inline{display:none}
}
@media (prefers-reduced-motion:reduce){.lt-btn,.lt-btn svg{transition:none}}