/* TWF deck furniture: 1280x720 slide canvas and the five-device grammar.
   Devices: highlight block (ration: one per headline, two per slide), chamfer
   container (the only container), orbit rings, contour textures, edge bars.
   Corners stay square; the chamfer is a 45 degree cut, never a radius. */

.twf-slide{position:relative;width:1280px;height:720px;overflow:hidden;margin:0 auto;background:var(--grad-deck);color:var(--text-primary);font-family:var(--font-brand)}
.twf-slide--social{background:var(--grad-social)}
.twf-slide--depth{background:var(--grad-depth)}

/* Footer: identical on every content slide; page number right-aligned */
.twf-footer{position:absolute;left:80px;right:80px;bottom:40px;display:flex;align-items:center;gap:40px;font-weight:var(--weight-heavy);font-size:12px;letter-spacing:0.02em;color:var(--text-secondary)}
.twf-footer .twf-footer-mark{width:26px;height:26px;flex-shrink:0}
.twf-footer .twf-footer-page{margin-left:auto}

/* Slide scaffold: standard head block and safe content zone for layout masters */
.twf-slide-head{position:absolute;left:80px;right:80px;top:64px;display:flex;flex-direction:column;gap:16px}
.twf-slide-zone{position:absolute;left:80px;right:80px;top:240px;bottom:96px}

/* Type roles */
.twf-eyebrow{font-weight:var(--weight-heavy);font-size:20px;letter-spacing:0.18em;text-transform:uppercase;color:var(--twf-cyan-bright)}
.twf-headline{margin:0;font-weight:var(--weight-black);line-height:1.03;letter-spacing:var(--ls-body)}
.twf-headline--title{font-size:96px}
.twf-headline--statement{font-size:76px}
.twf-headline--section{font-size:56px}
.twf-headline--dense{font-size:48px}
.twf-body{margin:0;font-weight:var(--weight-light);font-size:20px;line-height:1.35;letter-spacing:var(--ls-body);color:var(--text-secondary)}
.twf-source{font-weight:var(--weight-roman);font-size:12px;line-height:1.4;color:var(--text-secondary)}

/* Device 1: highlight block (marker). Wrap-safe: each line fragment gets its
   own box (box-decoration-break), and transparent borders + padding-box clip
   pull the painted marker inside the line box so it never bleeds into the
   next line at display line-heights. Radius is ink, not a container: the
   marker is the single sanctioned rounding outside circles. */
.twf-highlight{
  background:var(--twf-ice-cyan);
  color:var(--twf-navy-deepest);
  font-family:var(--font-marker);
  padding:0 0.16em;
  border-radius:0.12em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* Emphasis devices (2026-07-16): marker, ink shift, underscore rule, corner
   brackets and block bar are five equally supported devices, selectable per
   deck. Rationing applies to all: one per headline, maximum two per slide.
   Ink shift and underscore are wrap-safe; brackets are for single-line
   phrases (pseudo-element ticks are decorative in PPTX export); block bar is
   block-level, for full statements and pull quotes rather than inline
   phrases. Sanctioned combination: brackets plus ink shift
   (class="twf-em-brackets twf-em-ink") counts as one emphasis. */
.twf-em-ink{color:var(--twf-cyan-bright)}
.twf-em-underscore{background-image:linear-gradient(var(--twf-ice-cyan),var(--twf-ice-cyan));background-size:100% 0.09em;background-position:0 96%;background-repeat:no-repeat;padding-bottom:0.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.twf-em-brackets{position:relative;padding:0.08em 0.22em}
.twf-em-brackets::before,.twf-em-brackets::after{content:"";position:absolute;width:0.42em;height:0.42em;border:0 solid var(--twf-cyan-bright)}
.twf-em-brackets::before{left:0;top:0;border-left-width:2px;border-top-width:2px}
.twf-em-brackets::after{right:0;bottom:0;border-right-width:2px;border-bottom-width:2px}
.twf-em-bar{border-left:0.16em solid var(--twf-cyan-bright);padding-left:0.5em}

/* Device 2: chamfer container (bottom-right cut, size --chamfer) */
.twf-card{position:relative;padding:28px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%)}
/* Outline stroke as ONE ring shape (nonzero winding: outer chamfer path,
   inner path traced in reverse). One geometry, so the straight edges and the
   diagonal always connect exactly; no rotated segments, no joint offsets.
   The inner diagonal sits 1px inside along the normal, hence the 0.41px
   (stroke * (sqrt(2) - 1)) axis correction. */
.twf-card--outline{background:var(--surface-card)}
.twf-card--outline::before{
  content:"";
  position:absolute;
  inset:0;
  background:color-mix(in srgb,var(--stroke-line) 50%,transparent);
  clip-path:polygon(
    0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 0,
    1px 1px, 1px calc(100% - 1px),
    calc(100% - var(--chamfer) - 0.41px) calc(100% - 1px),
    calc(100% - 1px) calc(100% - var(--chamfer) - 0.41px),
    calc(100% - 1px) 1px, 1px 1px
  );
  pointer-events:none;
}
.twf-card--plate{background:var(--twf-off-white);color:var(--text-on-light)}
.twf-card--accent{background:var(--twf-ice-cyan);color:var(--twf-navy-deepest)}

/* Device 3: orbit rings (regular geometry only; never fake data relationships) */
.twf-orbit{position:absolute;border-radius:var(--radius-full);border:1px solid color-mix(in srgb,var(--twf-ice) 30%,transparent);pointer-events:none}

/* Device 5: edge bars and rules */
.twf-tick{position:absolute;left:0;width:12px;height:96px;background:var(--twf-white)}
.twf-tick--accent{background:var(--twf-ice-cyan)}
.twf-rule-v{width:1px;align-self:stretch;background:color-mix(in srgb,var(--stroke-line) 50%,transparent)}

/* Statement backdrop glow */
.twf-glow{position:absolute;border-radius:var(--radius-full);background:radial-gradient(closest-side,color-mix(in srgb,var(--twf-glow) 80%,transparent),transparent);pointer-events:none}