/* =========================================================================
   Marketing Kit — page-level styles
   Visual system matches brand site; adds exhibit framing + stages.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--sdtw-charcoal);color:var(--sdtw-bone);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--sdtw-parchment);color:var(--sdtw-charcoal)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ---------- Nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 64px;border-bottom:.5px solid var(--rule-soft);position:sticky;top:0;background:rgba(41,41,43,.85);backdrop-filter:blur(8px);z-index:20}
.nav .brand{display:flex;gap:14px;align-items:center}
.nav .brand img{height:32px}
.nav .brand .pill{font-family:var(--font-display);text-transform:uppercase;font-size:11px;letter-spacing:.14em;border:.5px solid var(--rule);padding:4px 8px 3px;color:var(--fg-2)}
.nav a.back{font-family:var(--font-display);text-transform:uppercase;font-size:12px;letter-spacing:.12em;color:var(--fg-2)}
.nav a.back:hover{color:var(--sdtw-bone)}

/* ---------- Masthead ---------- */
.mast{max-width:1400px;margin:0 auto;padding:96px 64px 56px;border-bottom:.5px solid var(--rule-soft)}
.mast .meta{font-family:var(--font-display);text-transform:uppercase;font-size:11px;letter-spacing:.18em;color:var(--fg-3);display:flex;gap:32px;margin-bottom:32px;flex-wrap:wrap}
.mast .meta span::before{content:"■  ";color:var(--sdtw-parchment);letter-spacing:0}
.mast h1{font-family:var(--font-display);text-transform:uppercase;font-weight:500;letter-spacing:-.008em;line-height:.88;font-size:clamp(64px,10vw,144px);margin:0 0 28px}
.mast h1 .ital{font-family:var(--font-serif);font-style:italic;font-weight:400;text-transform:none;color:var(--sdtw-parchment);letter-spacing:-.02em}
.mast .lede{font-family:var(--font-serif);font-size:clamp(20px,1.7vw,26px);line-height:1.4;max-width:820px;margin:0 0 40px;color:var(--fg-1)}
.kit-toc{display:flex;gap:1px;background:var(--rule-soft);margin-top:8px}
.kit-toc a{flex:1;padding:18px 20px;background:var(--sdtw-charcoal);font-family:var(--font-display);text-transform:uppercase;font-size:12px;letter-spacing:.14em;color:var(--fg-2);transition:background .15s,color .15s}
.kit-toc a:hover{background:var(--sdtw-ink);color:var(--sdtw-parchment)}

/* ---------- Section shell ---------- */
.sec{max-width:1400px;margin:0 auto;padding:80px 64px;border-top:.5px solid var(--rule-soft)}
.sec .head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;gap:40px;flex-wrap:wrap}
.sec .head h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(32px,4vw,56px);line-height:.95;margin:0;font-weight:500;letter-spacing:-.005em}
.sec .head .lead{font-family:var(--font-serif);font-size:17px;color:var(--fg-2);max-width:440px;line-height:1.4}
.sec .ix{font-family:var(--font-display);text-transform:uppercase;font-size:11px;letter-spacing:.18em;color:var(--fg-3);margin-bottom:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- Exhibit shell (for banners + email header + posts) ---------- */
.exhibit{margin-bottom:56px}
.exhibit:last-child{margin-bottom:0}
.exhibit-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px;padding-bottom:14px;border-bottom:.5px solid var(--rule-soft);flex-wrap:wrap}
.exhibit-head .k{font-family:var(--font-display);text-transform:uppercase;font-size:13px;letter-spacing:.08em;color:var(--sdtw-bone);margin-bottom:4px;font-weight:500}
.exhibit-head .v{font-family:var(--font-sans);font-size:12px;color:var(--fg-3);letter-spacing:.04em}
.export-btn{font-family:var(--font-display);text-transform:uppercase;font-size:11px;letter-spacing:.14em;padding:10px 16px;border:1px solid var(--sdtw-bone);background:transparent;color:var(--sdtw-bone);transition:background .15s,color .15s}
.export-btn:hover{background:var(--sdtw-bone);color:var(--sdtw-charcoal)}
.export-btn:disabled{opacity:.5;cursor:wait}

/* ---------- Stage — displays canvases at real px, scales on narrow viewports ----------
   Strategy: each .stage holds a .shrink wrapper sized to (native * scale). The canvas
   inside is at native px with transform-origin top-left and transform:scale(var(--s)).
   The wrapper's fixed size matches the scaled canvas, so layout is honest. We compute
   a scale via --s based on viewport breakpoints per-stage variant.
---------------------------------------------------------------------------------------- */
.stage{
  background:
    linear-gradient(45deg, rgba(201,199,186,.04) 25%, transparent 25%, transparent 75%, rgba(201,199,186,.04) 75%) 0 0 / 12px 12px,
    linear-gradient(45deg, rgba(201,199,186,.04) 25%, transparent 25%, transparent 75%, rgba(201,199,186,.04) 75%) 6px 6px / 12px 12px,
    var(--sdtw-ink);
  padding:40px;
  border:.5px solid var(--rule-soft);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.shrink{
  /* sized to (native_w * --s) × (native_h * --s); holds the canvas */
  width:calc(var(--cw) * var(--s));
  height:calc(var(--ch) * var(--s));
  position:relative;
  flex-shrink:0;
}
.shrink > .canvas{
  position:absolute;top:0;left:0;
  width:var(--cw);height:var(--ch);
  transform-origin:top left;
  transform:scale(var(--s));
}

/* Default scale */
.stage-1128{--s:1}     /* 1128w banner */
.stage-1920{--s:0.65}  /* 1920w event cover */
.stage-600 {--s:1}     /* 600w email header */

@media (max-width:1280px){
  .stage-1920{--s:0.5}
  .stage-1128{--s:0.75}
}
@media (max-width:1060px){
  .stage-1920{--s:0.4}
  .stage-1128{--s:0.6}
  .stage-600 {--s:0.85}
  .stage{padding:28px}
}
@media (max-width:780px){
  .stage-1920{--s:0.3}
  .stage-1128{--s:0.42}
  .stage-600 {--s:0.65}
  .stage{padding:20px}
}
@media (max-width:520px){
  .stage-1920{--s:0.2}
  .stage-1128{--s:0.28}
  .stage-600 {--s:0.48}
}

/* ---------- Canvas base ---------- */
.canvas{position:relative;overflow:hidden;background:var(--sdtw-charcoal);color:var(--sdtw-bone);font-family:var(--font-sans)}

/* ---------- POSTS GRID ---------- */
.posts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px 32px}
.post-pair{display:contents}
.post-exhibit{display:flex;flex-direction:column;gap:14px}
.post-exhibit .exhibit-head{margin-bottom:0;padding-bottom:12px}
.post-exhibit .stage{padding:24px}

.post-stage-1080sq{--s:0.46}
.post-stage-1080v {--s:0.37}

@media (max-width:1400px){
  .post-stage-1080sq{--s:0.38}
  .post-stage-1080v {--s:0.30}
}
@media (max-width:1060px){
  .posts-grid{grid-template-columns:1fr;gap:36px}
  .post-stage-1080sq{--s:0.48}
  .post-stage-1080v {--s:0.40}
}
@media (max-width:640px){
  .post-stage-1080sq{--s:0.28}
  .post-stage-1080v {--s:0.22}
}

/* ---------- EMAIL ---------- */
.email-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:64px}
@media (max-width:1060px){.email-pair{grid-template-columns:1fr}}
.email-card{display:flex;flex-direction:column;border:.5px solid var(--rule-soft);background:var(--sdtw-ink)}
.ec-head{padding:22px 24px;border-bottom:.5px solid var(--rule-soft);display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.ec-head .k{font-family:var(--font-display);text-transform:uppercase;font-size:12px;letter-spacing:.12em;color:var(--sdtw-bone);margin-bottom:4px}
.ec-head .v{font-family:var(--font-sans);font-size:12px;color:var(--fg-3)}
.ec-head .v strong{color:var(--sdtw-parchment);font-weight:500}
.ec-actions{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--font-display);text-transform:uppercase;font-size:10px;letter-spacing:.14em;padding:8px 12px;border:.5px solid var(--rule-soft);background:transparent;color:var(--fg-2);transition:background .15s,color .15s,border-color .15s}
.chip:hover{background:var(--sdtw-bone);color:var(--sdtw-charcoal);border-color:var(--sdtw-bone)}
.email-preview{padding:32px;max-height:640px;overflow:auto;background:#f1f0e9}
.email-preview::-webkit-scrollbar{width:8px}
.email-preview::-webkit-scrollbar-thumb{background:rgba(41,41,43,.3)}

/* ---------- DIRECT INVITES ---------- */
.dir-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
@media (max-width:960px){.dir-grid{grid-template-columns:1fr;gap:36px}}
.dir-title{font-family:var(--font-display);text-transform:uppercase;font-size:18px;letter-spacing:.04em;font-weight:500;margin:0 0 22px;display:flex;justify-content:space-between;align-items:baseline;border-bottom:.5px solid var(--rule-soft);padding-bottom:12px}
.dir-title span{font-size:11px;color:var(--fg-3);letter-spacing:.14em}
.copy-stack{display:flex;flex-direction:column;gap:12px}
.copy-card{border:.5px solid var(--rule-soft);background:var(--sdtw-ink);padding:20px 22px;position:relative;cursor:pointer;transition:background .15s,border-color .15s}
.copy-card:hover{background:var(--sdtw-charcoal);border-color:var(--sdtw-parchment)}
.copy-card .label{font-family:var(--font-display);text-transform:uppercase;font-size:10px;letter-spacing:.16em;color:var(--sdtw-parchment);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.copy-card .label .copy-hint{font-family:var(--font-sans);font-size:10px;color:var(--fg-3);letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity .15s}
.copy-card:hover .copy-hint{opacity:1}
.copy-card .body{font-family:var(--font-serif);font-size:15px;line-height:1.5;color:var(--fg-1);white-space:pre-wrap;margin:0}
.copy-card.copied{background:var(--sdtw-moss);border-color:var(--sdtw-parchment)}

/* ---------- Contact/foot — consistent with other pages ---------- */
.contact{max-width:1400px;margin:0 auto;padding:72px 64px;border-top:.5px solid var(--rule-soft);display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
.contact h3{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(32px,4vw,56px);margin:0 0 16px;line-height:1;font-weight:500;letter-spacing:-.005em}
.contact p{font-family:var(--font-serif);font-size:18px;color:var(--fg-2);line-height:1.4;max-width:480px;margin:0}
.contact .mail{display:inline-flex;align-items:center;gap:14px;padding:20px 26px;border:1px solid var(--sdtw-bone);background:var(--sdtw-bone);color:var(--sdtw-charcoal);font-family:var(--font-display);text-transform:uppercase;font-size:13px;letter-spacing:.1em;justify-self:end}
.contact .mail:hover{background:var(--sdtw-parchment);border-color:var(--sdtw-parchment)}
.foot{padding:28px 64px;border-top:.5px solid var(--rule-soft);display:flex;justify-content:space-between;font-family:var(--font-display);text-transform:uppercase;font-size:11px;letter-spacing:.14em;color:var(--fg-3);flex-wrap:wrap;gap:12px}

.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);background:var(--sdtw-bone);color:var(--sdtw-charcoal);padding:14px 22px;font-family:var(--font-display);text-transform:uppercase;font-size:12px;letter-spacing:.14em;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s;border-left:3px solid var(--sdtw-parchment)}
.toast.show{opacity:1}

@media (max-width:960px){
  .nav{padding:18px 24px}
  .mast{padding:64px 24px 40px}
  .kit-toc{flex-wrap:wrap}
  .kit-toc a{flex:1 1 45%}
  .sec{padding:56px 24px}
  .contact{padding:56px 24px;display:block}
  .contact .mail{margin-top:24px}
  .foot{padding:24px 24px;flex-direction:column;gap:10px}
}