/* Examples and templates. Each canvas is a size container; everything inside is measured in
   design units through --k (1 unit = 1 px of the real artwork), so the artwork scales with the page. */

.ex-group { margin-bottom: 64px; }
.ex-row { display: grid; gap: 24px; margin: 24px 0 8px; align-items: start; }
.ex-row-3 { grid-template-columns: repeat(3, 1fr); }
.ex-row-story { grid-template-columns: 1fr 1fr 1.25fr; }
.ex-row-print { grid-template-columns: 1fr 1fr; }
.ex-row-cards { grid-template-columns: 1fr 1fr; max-width: 760px; }
.ex-row-email { grid-template-columns: minmax(0, 600px) minmax(260px, 1fr); }
.ex { margin: 0; min-width: 0; }
.ex figcaption { font-size: 14px; line-height: 1.5; margin-top: 12px; color: var(--hux-slate-green); }
.ex figcaption strong { color: var(--hux-forest-ink); }
.ex-notes { align-self: stretch; }
.ex-notes ul { margin: 0; padding-left: 20px; }
@media (max-width: 900px) {
  .ex-row-3, .ex-row-story, .ex-row-print, .ex-row-email { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ex-row-3, .ex-row-story, .ex-row-print, .ex-row-cards, .ex-row-email { grid-template-columns: 1fr; }
}

.ex-canvas {
  container-type: inline-size; position: relative; overflow: hidden; width: 100%;
  border-radius: var(--hux-radius-panel); background: var(--hux-linen); color: var(--hux-slate-green);
  font-family: var(--hux-font); line-height: 1.3;
}
.ex-ig { aspect-ratio: 4 / 5; --k: calc(100cqw / 1080); }
.ex-story { aspect-ratio: 9 / 16; --k: calc(100cqw / 1080); }
.ex-a4 { aspect-ratio: 210 / 297; --k: calc(100cqw / 1000); }   /* 1000 units across 210 mm */
.ex-card { aspect-ratio: 90 / 55; --k: calc(100cqw / 900); }    /* 10 units per mm */
.ex-email { --k: calc(100cqw / 600); background: var(--hux-linen); }

.ex-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ex-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--hux-forest-ink-rgb) / .62) 0%, rgb(var(--hux-forest-ink-rgb) / .28) 45%, rgb(var(--hux-forest-ink-rgb) / 0) 80%); }
.on-dark { color: var(--hux-white); }
.ex-eyebrow { font-size: calc(28 * var(--k)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hux-sage); margin: 0 0 calc(18 * var(--k)); line-height: 1.3; }
.ex-eyebrow.on-dark { color: var(--hux-white); }
.ex-headline { font-size: calc(84 * var(--k)); font-weight: 400; letter-spacing: -0.025em; line-height: 1.06; color: var(--hux-forest-ink); margin: 0; text-wrap: balance; }
.ex-headline.on-dark { color: var(--hux-white); }
.ex-body { font-size: calc(34 * var(--k)); line-height: 1.45; color: var(--hux-slate-green); margin: calc(28 * var(--k)) 0 0; max-width: 24ch; }

/* Instagram 4:5 */
.ex-safe { position: absolute; inset: calc(80 * var(--k)); display: flex; flex-direction: column; justify-content: flex-end; }
.ex-text-card .ex-safe { justify-content: center; }
.ex-text-card .ex-headline { font-size: calc(76 * var(--k)); max-width: 11ch; }
.ex-fern { position: absolute; right: calc(-90 * var(--k)); top: calc(90 * var(--k)); width: calc(520 * var(--k)); color: var(--hux-fern); opacity: .95; }
.ex-fern svg { width: 100%; height: auto; }
.ex-fern-bottom { top: auto; bottom: calc(-140 * var(--k)); right: auto; left: calc(-120 * var(--k)); transform: scaleX(-1); width: calc(620 * var(--k)); }
.ex-review-card { background: var(--hux-pale-sage); }
.ex-review-card .ex-safe { justify-content: center; }
.ex-stars { font-size: calc(44 * var(--k)); letter-spacing: 0.08em; color: var(--hux-honey); margin: 0 0 calc(32 * var(--k)); line-height: 1; }
.ex-quote { font-size: calc(56 * var(--k)); font-weight: 400; letter-spacing: -0.02em; line-height: 1.18; color: var(--hux-forest-ink); margin: 0 0 calc(48 * var(--k)); text-wrap: pretty; }
.ex-name { font-size: calc(32 * var(--k)); font-weight: 500; color: var(--hux-forest-ink); margin: 0; }
.ex-source { font-size: calc(28 * var(--k)); color: var(--hux-slate-green); margin: calc(6 * var(--k)) 0 0; }

/* Stories 9:16 */
.ex-guide { position: absolute; left: 0; right: 0; border-top: 1px dashed rgb(255 255 255 / .55); pointer-events: none; }
.ex-guide-top { top: calc(270 * var(--k)); }
.ex-guide-bottom { top: calc((1920 - 670) * var(--k)); }
.ex-guide::after { position: absolute; right: calc(24 * var(--k)); font-size: calc(22 * var(--k)); color: rgb(255 255 255 / .8); letter-spacing: 0.04em; }
.ex-guide-top::after { content: "270 px"; top: calc(-32 * var(--k)); }
.ex-guide-bottom::after { content: "670 px"; top: calc(8 * var(--k)); }
.ex-story-copy { position: absolute; left: calc(80 * var(--k)); right: calc(140 * var(--k)); bottom: calc(700 * var(--k)); }
.ex-story-copy .ex-headline { font-size: calc(88 * var(--k)); max-width: 10ch; }
.ex-pill { display: inline-block; margin-top: calc(48 * var(--k)); padding: calc(24 * var(--k)) calc(44 * var(--k)); border-radius: 999px; background: var(--hux-white); color: var(--hux-forest-ink); font-size: calc(32 * var(--k)); font-weight: 500; line-height: 1; }
.ex-endcard { background: var(--hux-linen); }
.ex-endcard-copy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(80 * var(--k)); }
.ex-endcard-logo { width: calc(560 * var(--k)); margin-bottom: calc(96 * var(--k)); }
.ex-endcard-line { font-size: calc(64 * var(--k)); letter-spacing: -0.025em; color: var(--hux-forest-ink); margin: 0 0 calc(32 * var(--k)); line-height: 1.1; }
.ex-endcard-url { font-size: calc(36 * var(--k)); font-weight: 500; color: var(--hux-deep-green); margin: 0; }

/* A4 spec sheet: 1000 units wide, 71 units = 15 mm margin */
.ex-spec { background: var(--hux-white); border: 1px solid var(--hux-hairline); padding: calc(71 * var(--k)); display: flex; flex-direction: column; gap: calc(22 * var(--k)); color: var(--hux-slate-green); }
.ex-spec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(26 * var(--k)); }
.ex-spec-logo { width: calc(150 * var(--k)); }
.ex-spec .ex-eyebrow { font-size: calc(15 * var(--k)); margin: 0; }
.ex-spec-title { font-size: calc(52 * var(--k)); font-weight: 400; letter-spacing: -0.025em; line-height: 1.05; color: var(--hux-forest-ink); margin: 0; }
.ex-spec-sub { font-size: calc(21 * var(--k)); margin: 0; color: var(--hux-slate-green); }
.ex-spec-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: calc(28 * var(--k)); margin-top: calc(12 * var(--k)); }
.ex-spec-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(24 * var(--k)); }
.ex-layers { display: flex; flex-direction: column; gap: calc(4 * var(--k)); justify-content: center; }
.ex-layer { --h: 1; height: calc(var(--h) * 34 * var(--k)); border-radius: calc(8 * var(--k)); background: var(--hux-sand); display: flex; align-items: center; padding: 0 calc(18 * var(--k)); font-size: calc(17 * var(--k)); color: var(--hux-forest-ink); }
.ex-layer:nth-child(1) { background: var(--hux-mist); }
.ex-layer:nth-child(2) { background: var(--hux-pale-sage); }
.ex-layer:nth-child(3) { background: var(--hux-sand); }
.ex-layer-springs { background: repeating-linear-gradient(90deg, var(--hux-hairline) 0 calc(2 * var(--k)), var(--hux-white) calc(2 * var(--k)) calc(14 * var(--k))); border: 1px solid var(--hux-hairline); }
.ex-layer:nth-child(5) { background: var(--hux-sand); }
.ex-spec-table { width: 100%; border-collapse: collapse; font-size: calc(18 * var(--k)); margin-top: calc(12 * var(--k)); }
.ex-spec-table th, .ex-spec-table td { text-align: left; padding: calc(12 * var(--k)) calc(8 * var(--k)) calc(12 * var(--k)) 0; border-top: 1px solid var(--hux-hairline); vertical-align: top; }
.ex-spec-table th { font-weight: 500; color: var(--hux-forest-ink); width: 18%; }
.ex-spec-table td { width: 32%; color: var(--hux-slate-green); }
.ex-spec-table tr:last-child th, .ex-spec-table tr:last-child td { border-bottom: 1px solid var(--hux-hairline); }
.ex-certs { display: flex; flex-wrap: wrap; gap: calc(10 * var(--k)); }
.ex-certs span { font-size: calc(16 * var(--k)); padding: calc(9 * var(--k)) calc(16 * var(--k)); border-radius: 999px; background: var(--hux-mist); color: var(--hux-deep-green); font-weight: 500; }
.ex-spec-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: calc(20 * var(--k)); font-size: calc(16 * var(--k)); line-height: 1.5; }
.ex-spec-foot strong { color: var(--hux-forest-ink); font-weight: 500; }
.ex-qr { width: calc(96 * var(--k)); height: calc(96 * var(--k)); border-radius: calc(10 * var(--k)); background: var(--hux-sand); display: flex; align-items: center; justify-content: center; font-size: calc(18 * var(--k)); color: var(--hux-moss); flex: none; }

/* A4 brochure cover */
.ex-brochure { background: var(--hux-forest-ink); }
.ex-brochure .ex-scrim { background: linear-gradient(to top, rgb(var(--hux-forest-ink-rgb) / .68) 0%, rgb(var(--hux-forest-ink-rgb) / .3) 40%, rgb(var(--hux-forest-ink-rgb) / 0) 70%); }
.ex-brochure-headline { position: absolute; left: calc(71 * var(--k)); right: calc(71 * var(--k)); bottom: calc(190 * var(--k)); font-size: calc(92 * var(--k)); letter-spacing: -0.025em; line-height: 1.02; margin: 0; max-width: 8ch; }
.ex-brochure-logo { position: absolute; right: calc(71 * var(--k)); bottom: calc(71 * var(--k)); width: calc(220 * var(--k)); }

/* Business card, 900 units = 90 mm */
.ex-card-front { background: var(--hux-linen); border: 1px solid var(--hux-hairline); }
.ex-card-logo { position: absolute; left: calc(60 * var(--k)); top: calc(60 * var(--k)); width: calc(300 * var(--k)); }
.ex-card-details { position: absolute; left: calc(60 * var(--k)); bottom: calc(60 * var(--k)); font-size: calc(26 * var(--k)); line-height: 1.5; color: var(--hux-slate-green); }
.ex-card-details p { margin: 0; }
.ex-card-name { font-weight: 500; color: var(--hux-forest-ink); font-size: calc(30 * var(--k)); margin-bottom: calc(4 * var(--k)) !important; }
.ex-card-back { background: var(--hux-deep-green); display: flex; align-items: center; justify-content: center; }
.ex-card-mark { height: calc(150 * var(--k)); width: auto; }

/* Email, 600 units */
.ex-email { border: 1px solid var(--hux-hairline); }
.ex-email-inner { padding: calc(24 * var(--k)); display: flex; flex-direction: column; gap: calc(16 * var(--k)); }
.ex-email-head { padding: calc(8 * var(--k)) 0; }
.ex-email-head img { width: calc(140 * var(--k)); }
.ex-email-block { background: var(--hux-white); border-radius: calc(16 * var(--k)); padding: calc(24 * var(--k)); }
.ex-email-hero { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: calc(16 * var(--k)); margin-bottom: calc(24 * var(--k)); }
.ex-email .ex-eyebrow { font-size: calc(14 * var(--k)); margin-bottom: calc(10 * var(--k)); }
.ex-email h3 { font-size: calc(28 * var(--k)); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 calc(12 * var(--k)); color: var(--hux-forest-ink); }
.ex-email p { font-size: calc(16 * var(--k)); line-height: 1.6; margin: 0 0 calc(20 * var(--k)); }
.ex-email-btn { display: inline-block; padding: calc(14 * var(--k)) calc(24 * var(--k)); border-radius: 999px; background: var(--hux-sage); color: var(--hux-white); font-size: calc(15 * var(--k)); font-weight: 500; line-height: 1.2; }
.ex-email-foot { background: var(--hux-sand); border-radius: calc(16 * var(--k)); padding: calc(20 * var(--k)) calc(24 * var(--k)); }
.ex-email-foot p { font-size: calc(14 * var(--k)); line-height: 1.5; margin: 0 0 calc(8 * var(--k)); }
.ex-email-foot p:last-child { margin: 0; }
/* Story cover: the copy sits above the 670 px bottom safe line, so the shade sits behind it rather than at the bottom edge */
.ex-story .ex-scrim { background: linear-gradient(to top, rgb(var(--hux-forest-ink-rgb) / .2) 0%, rgb(var(--hux-forest-ink-rgb) / .58) 34%, rgb(var(--hux-forest-ink-rgb) / .58) 60%, rgb(var(--hux-forest-ink-rgb) / 0) 82%); }