@font-face{font-family:CormorantClassic;src:url("fonts/cormorant-italic.ttf");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:CormorantClassic;src:url("fonts/cormorant-normal.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Cardo;src:url("fonts/cardo-italic.ttf");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Cardo;src:url("fonts/cardo-normal.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:BodoniModa;src:url("fonts/bodonimoda-italic.ttf");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:BodoniModa;src:url("fonts/bodonimoda-normal.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:PlayfairDisplay;src:url("fonts/playfairdisplay-italic.ttf");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:PlayfairDisplay;src:url("fonts/playfairdisplay-normal.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Bellefair;src:url("fonts/bellefair-normal.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:EBGaramond;src:url("fonts/ebgaramond-italic.ttf");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:EBGaramond;src:url("fonts/ebgaramond-normal.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:LibreBaskerville;src:url("fonts/librebaskerville-italic.ttf");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:LibreBaskerville;src:url("fonts/librebaskerville-normal.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Forum;src:url("fonts/forum-normal.ttf");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url("fonts/manrope.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url("../assets/fonts/cormorant-garamond-latin.woff2") format("woff2");font-weight:300 400;font-style:normal;font-display:swap}

*{box-sizing:border-box}
body,h1,h2,p{margin:0}
body{font-family:Manrope,system-ui,sans-serif;color:#282923;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:4px}
button{font:inherit;color:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:5px}
[hidden]{display:none!important}
.gallery-page{background:#faf9f6}
.gallery-header,.gallery-main{max-width:1504px;margin:auto;padding-inline:clamp(22px,4.2vw,72px)}
.gallery-header{height:94px;display:flex;align-items:center;justify-content:space-between;font-size:13px}
.studio-label{text-decoration:none;font-weight:600}.studio-label span{font-weight:400;color:#77786f;margin-left:10px}
.edition-label{color:#77786f;font-size:11px;letter-spacing:.1em}
.gallery-intro{display:flex;justify-content:space-between;gap:30px;align-items:end;margin:54px 0 42px}
.eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:17px;color:#717369}
.gallery-intro h1{font:400 clamp(38px,4.2vw,65px)/1.05 Forum,Georgia,serif;letter-spacing:-.025em}
.intro-note{font-size:12px;line-height:1.8;color:#6b6d64;padding-bottom:3px}
.gallery-controls{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ddded5;padding:20px 0 30px;gap:20px}
.filters{display:flex;gap:6px}.filters button{border:0;background:transparent;padding:9px 14px;border-radius:3px;color:#707268;font-size:11px;min-height:36px}
.filters button[aria-pressed=true]{background:#292e27;color:#fff}.gallery-controls p{font-size:11px;color:#77786f}
.gallery-controls a{color:#353a2f}
.design-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px;row-gap:42px}
.design-preview{display:block;position:relative;text-decoration:none;aspect-ratio:1.6;overflow:hidden}
.design-preview>.canvas{width:100%;height:100%}
.open-hint{position:absolute;bottom:15px;right:15px;background:#fff;color:#2b2d26;border:1px solid #e4e4dd;padding:9px 12px;font-size:10px;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.design-preview:hover .open-hint,.design-preview:focus-visible .open-hint{opacity:1;transform:none}
.tile-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0 7px}
.tile-heading h2{font-size:13px;font-weight:500}.tile-heading h2 span{font-size:10px;color:#7f8177;font-weight:400;margin-right:9px;font-variant-numeric:tabular-nums}
.pick-note{font-size:9px;color:#5b6955;background:#eaf0e5;padding:4px 7px;white-space:nowrap}
.tile-description{font-size:11px;line-height:1.75;color:#74756e;max-width:440px}
.gallery-footer{display:flex;justify-content:space-between;gap:20px;padding:34px 0 42px;margin-top:55px;border-top:1px solid #ddded5;font-size:11px;color:#74756e}

/* The review controls sit outside the website designs. */
.concept-page{background:#e8e8e3}
.review-toolbar{min-height:64px;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:#faf9f6;border-bottom:1px solid #dedfd7;font-size:11px}
.review-toolbar a{text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.back-link{white-space:nowrap}.review-name{font-size:12px;color:#63675c;text-align:center}
.review-actions{display:flex;gap:18px;align-items:center}.review-actions button{font-size:11px;background:transparent;border:1px solid #cfd2c7;border-radius:3px;padding:9px 12px;min-height:38px}
.review-actions button[aria-pressed=true]{background:#e2e7db}.stepper{display:flex;gap:4px}.stepper a{justify-content:center;width:36px;border:1px solid #dddfd6;border-radius:3px;font-size:17px}
.review-frame{height:calc(100svh - 64px);min-height:430px}
.review-frame>.canvas{width:100%;height:100%}
.review-frame.mobile-preview{width:390px;max-width:calc(100% - 32px);height:844px;min-height:0;margin:18px auto;border:1px solid #d3d4ce}
.clean-view .review-toolbar{display:none}.clean-view .review-frame{height:100svh;min-height:320px}

/* All artboards share four pieces of content; each has its own composition. */
.canvas{container-type:size;position:relative;isolation:isolate;--ink:#292b25;--paper:#f3efe6;color:var(--ink);background:var(--paper)}
.surface{width:100%;height:100%;padding:6cqw 7cqw;display:flex;flex-direction:column;justify-content:space-between}
.canvas .meta{font-family:Manrope,system-ui,sans-serif;font-size:clamp(8px,1.25cqw,14px);font-weight:400;line-height:1.6}
.canvas .wordmark{font-weight:400;line-height:1;letter-spacing:-.03em}
.canvas .tagline{font-size:clamp(12px,2.4cqw,27px);line-height:1.3;font-weight:400}
.canvas .contact{display:inline-flex;align-items:center;font-family:Manrope,system-ui,sans-serif;font-size:clamp(8px,1.4cqw,15px);line-height:1.5;text-decoration:none;white-space:nowrap;font-weight:400}
.review-frame .contact{min-height:44px}
.canvas a.contact:hover{text-decoration:underline}
.canvas .foot{display:flex;justify-content:space-between;align-items:center;gap:4cqw}
.line-mark{display:block;width:5cqw;height:1px;background:currentColor}

/* 01 — a traditional letterhead, with generous space around the signature. */
.direction-01{--paper:#f1eee5;--ink:#35382e}
.direction-01 .meta{letter-spacing:.08em;font-size:clamp(8px,1.15cqw,13px)}
.direction-01 .identity{padding-bottom:1cqw}
.direction-01 .wordmark{font-family:Forum,Georgia,serif;font-size:clamp(30px,11.8cqw,156px);letter-spacing:-.035em}
.direction-01 .tagline{font-family:Forum,Georgia,serif;font-style:italic;margin-top:2.3cqw;font-size:clamp(13px,2.8cqw,32px)}
.direction-01 .foot{border-top:1px solid #c3c4b6;padding-top:2.2cqw}
.direction-01 .line-mark{width:2cqw}

/* 02 — a modern, compact wordmark held to a left-hand grid. */
.direction-02{--paper:#f5f6f1;--ink:#243d35}
.direction-02 .surface{padding:5.5cqw 8cqw}
.direction-02 .meta{align-self:flex-end;text-align:left;line-height:1.5}
.direction-02 .wordmark{font-family:Manrope,system-ui,sans-serif;font-size:clamp(35px,12.6cqw,156px);font-weight:500;line-height:.92;letter-spacing:-.075em;margin-block:2cqw}
.direction-02 .tagline{font-size:clamp(11px,1.85cqw,22px);line-height:1.45;letter-spacing:-.015em}
.direction-02 .foot{align-items:end}

/* 03 — cinematic space, with a smaller and quieter supporting line. */
.direction-03{--paper:#17262b;--ink:#ece5d6}
.direction-03 .surface{align-items:center;text-align:center;padding-block:6cqw 5cqw}
.direction-03 .meta{color:#bec5c0;font-size:clamp(8px,1.08cqw,12px);letter-spacing:.12em}
.direction-03 .wordmark{font-family:Cormorant,Georgia,serif;font-size:clamp(34px,11.8cqw,154px);font-weight:400;letter-spacing:.015em}
.direction-03 .tagline{font-family:Forum,Georgia,serif;font-size:clamp(13px,2.6cqw,29px);color:#d0d2c7;margin-top:2cqw}
.direction-03 .foot{flex-direction:column;gap:2.2cqw}
.direction-03 .line-mark{width:3cqw;color:#aab3a7}
.direction-03 .contact{color:#c6cec5}

/* 04 — an italic signature and a contrasting note in the right margin. */
.direction-04{--paper:#4b2631;--ink:#f2dfc8}
.direction-04 .meta{color:#dac3b8;letter-spacing:.055em}
.direction-04 .identity{display:grid;grid-template-columns:1.15fr 1fr;align-items:end;gap:5cqw;margin:auto 0}
.direction-04 .wordmark{font-family:Forum,Georgia,serif;font-size:clamp(38px,12cqw,154px);line-height:.93}
.direction-04 .wordmark em{font-weight:400;letter-spacing:-.05em}
.direction-04 .side-note{border-left:1px solid #946c73;padding-left:4cqw;padding-block:1.5cqw;display:flex;flex-direction:column;gap:4cqw}
.direction-04 .tagline{font-family:Forum,Georgia,serif;font-size:clamp(15px,3.15cqw,38px)}
.direction-04 .contact{font-size:clamp(8px,1.24cqw,14px);color:#dec8bd}

/* 05 — the composition has the scale and proportion of printed stationery. */
.direction-05{--paper:#dfe2dc;--ink:#353a33}
.direction-05 .surface{padding:0;display:grid;grid-template-columns:1fr;place-items:center}
.business-card{background:#faf8f1;width:min(78cqw,118cqh);aspect-ratio:1.72;padding:4.8cqw;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 4px 16px #25332609;border:1px solid #d4d5cc}
.direction-05 .card-top{display:flex;justify-content:space-between;gap:4cqw;align-items:start}
.direction-05 .wordmark{font-family:Manrope,system-ui,sans-serif;font-size:clamp(30px,7.5cqw,94px);font-weight:500;letter-spacing:-.08em;line-height:.86}
.direction-05 .wordmark span{display:block;font-family:Forum,Georgia,serif;font-size:.53em;font-weight:400;letter-spacing:-.02em;margin-top:.17em}
.direction-05 .meta{font-size:clamp(7px,1.03cqw,12px)}
.direction-05 .tagline{font-family:Forum,Georgia,serif;font-style:italic;font-size:clamp(12px,2.15cqw,25px)}
.direction-05 .contact{font-size:clamp(7px,1.15cqw,13px)}
.direction-05 .foot{gap:1.8cqw;align-items:end}

/* 06 — scale and alignment do all of the work. */
.direction-06{--paper:#f1f2ec;--ink:#282e2c}
.direction-06 .surface{padding:6cqw 7cqw}
.direction-06 .meta{font-size:clamp(8px,1.03cqw,12px);letter-spacing:.12em;text-transform:uppercase;border-top:1px solid #333932;padding-top:1.8cqw}
.direction-06 .wordmark{font-family:Manrope,system-ui,sans-serif;font-size:clamp(60px,22cqw,278px);font-weight:500;letter-spacing:-.095em;line-height:.92;display:flex;gap:3.5cqw;align-items:baseline}
.direction-06 .wordmark span{font-size:.125em;letter-spacing:-.02em;font-weight:400}
.direction-06 .foot{border-top:1px solid #333932;padding-top:1.8cqw}
.direction-06 .tagline{font-size:clamp(9px,1.5cqw,17px);letter-spacing:-.03em}
.direction-06 .contact{font-size:clamp(8px,1.22cqw,14px)}

/* 07 — an idea-led, softer composition. */
.direction-07{--paper:#e7e7d8;--ink:#3b4735}
.direction-07 .surface{padding:5cqw 6cqw}
.direction-07 .top-line{display:flex;align-items:center;justify-content:space-between;gap:3cqw}
.direction-07 .wordmark{font-family:Forum,Georgia,serif;font-size:clamp(21px,3.8cqw,43px)}
.direction-07 .tagline{font-family:Forum,Georgia,serif;font-size:clamp(33px,7.9cqw,106px);text-align:center;letter-spacing:-.025em;line-height:1.04;margin-block:3cqw}
.direction-07 .meta{font-size:clamp(8px,1.15cqw,13px);text-align:center;letter-spacing:.04em}
.direction-07 .contact{font-size:clamp(8px,1.23cqw,14px)}

/* 08 — an exhibition label, with an architectural hairline frame. */
.direction-08{--paper:#f4f0e8;--ink:#4a443e}
.direction-08 .surface{padding:3.5cqw}
.fine-frame{border:1px solid #a6a093;width:100%;height:100%;padding:3.5cqw;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center}
.direction-08 .meta{font-size:clamp(8px,1.02cqw,12px);letter-spacing:.06em}
.direction-08 .wordmark{font-family:Forum,Georgia,serif;font-size:clamp(37px,9cqw,119px);line-height:.87}
.direction-08 .tagline{font-family:Manrope,system-ui,sans-serif;font-size:clamp(8px,1.4cqw,16px);margin-top:2.8cqw;letter-spacing:-.02em}
.direction-08 .contact{font-size:clamp(8px,1.22cqw,14px)}

/* 09 — one colour of ink and an expansive italic wordmark. */
.direction-09{--paper:#f1f2ee;--ink:#29478d}
.direction-09 .surface{padding:5.5cqw 7cqw}
.direction-09 .meta{font-size:clamp(8px,1.12cqw,13px)}
.direction-09 .identity{margin:auto 0;padding-top:1cqw}
.direction-09 .wordmark{font-family:Forum,Georgia,serif;font-size:clamp(40px,12.3cqw,162px);font-style:italic;letter-spacing:-.035em;white-space:nowrap}
.direction-09 .tagline{text-align:right;font-family:Manrope,system-ui,sans-serif;font-size:clamp(10px,1.65cqw,19px);margin-top:3cqw;padding-right:1cqw}
.direction-09 .foot{border-top:1px solid #798bad;padding-top:2cqw}
.direction-09 .line-mark{width:1.4cqw;height:1.4cqw;background:transparent;border:1px solid currentColor}

/* 10 — a typographic imprint above a contrasting off-white sign-off. */
.direction-10{--paper:#282924;--ink:#eeecdf}
.direction-10 .surface{padding:0;display:grid;grid-template-columns:1fr;grid-template-rows:72% 28%}
.dark-field{padding:5cqw 7cqw;display:flex;flex-direction:column;justify-content:space-between;align-items:center}
.direction-10 .meta{font-size:clamp(8px,1.1cqw,13px);color:#c2c2b3;letter-spacing:.06em}
.direction-10 .wordmark{font-family:Manrope,system-ui,sans-serif;font-size:clamp(35px,9.5cqw,128px);font-weight:500;letter-spacing:-.065em;margin:auto 0}
.direction-10 .foot{background:#ece8dc;color:#33362e;padding:3cqw 7cqw;align-items:center}
.direction-10 .tagline{font-family:Forum,Georgia,serif;font-size:clamp(15px,2.75cqw,33px);line-height:1.06}
.direction-10 .contact{font-size:clamp(8px,1.3cqw,14px)}

/* Portrait compositions are designed again, rather than shrunk desktop cards. */
@container (max-aspect-ratio: 1/1){
  .surface{padding:10cqw 8cqw}
  .canvas .meta{font-size:clamp(10px,2.8cqw,14px)}
  .canvas .contact{font-size:clamp(12px,3.3cqw,16px)}
  .canvas .tagline{font-size:clamp(19px,5.5cqw,30px)}
  .direction-01 .wordmark{font-size:16cqw}
  .direction-01 .tagline{margin-top:6cqw;max-width:65cqw}
  .direction-01 .foot{padding-top:5cqw}
  .direction-02 .surface{padding:10cqw 8cqw}
  .direction-02 .wordmark{font-size:22cqw;line-height:.95}
  .direction-02 .foot{align-items:start;flex-direction:column;gap:6cqw}
  .direction-02 .tagline{font-size:5cqw}
  .direction-03 .surface{padding:11cqw 7cqw}
  .direction-03 .meta{max-width:58cqw;font-size:2.9cqw}
  .direction-03 .wordmark{font-size:16cqw;white-space:nowrap}
  .direction-03 .tagline{font-size:5.5cqw;max-width:65cqw;margin:5cqw auto 0}
  .direction-03 .foot{gap:7cqw}.direction-03 .line-mark{width:9cqw}
  .direction-04 .surface{padding:11cqw 9cqw}
  .direction-04 .meta{max-width:66cqw}
  .direction-04 .identity{grid-template-columns:1fr;gap:12cqw;width:100%;margin:auto 0}
  .direction-04 .wordmark{font-size:26cqw}
  .direction-04 .side-note{padding:0 0 0 5cqw;gap:5cqw}
  .direction-04 .tagline{font-size:7cqw}
  .direction-05 .business-card{width:86cqw;aspect-ratio:auto;min-height:108cqw;padding:8cqw}
  .direction-05 .card-top{flex-direction:column;gap:8cqw}
  .direction-05 .wordmark{font-size:19cqw}.direction-05 .meta{font-size:2.8cqw}
  .direction-05 .foot{flex-direction:column;align-items:start;gap:4cqw;margin-top:12cqw}
  .direction-05 .tagline{font-size:6cqw}.direction-05 .contact{font-size:3.1cqw}
  .direction-06 .surface{padding:10cqw 7cqw}
  .direction-06 .meta{font-size:2.7cqw;padding-top:5cqw;max-width:100%}
  .direction-06 .wordmark{font-size:33cqw;flex-direction:column;gap:4cqw;line-height:1}
  .direction-06 .wordmark span{font-size:.18em;letter-spacing:-.025em}
  .direction-06 .foot{padding-top:5cqw;flex-direction:column;align-items:start;gap:4cqw}
  .direction-06 .tagline{font-size:4.1cqw}
  .direction-07 .surface{padding:9cqw 7cqw}
  .direction-07 .top-line{flex-direction:column;align-items:start;gap:3cqw}
  .direction-07 .wordmark{font-size:8cqw}
  .direction-07 .tagline{font-size:10cqw;line-height:1.15;white-space:nowrap}
  .direction-07 .meta{font-size:2.8cqw;max-width:68cqw;align-self:center}
  .direction-08 .surface{padding:5cqw}
  .direction-08 .fine-frame{padding:8cqw 5cqw}
  .direction-08 .meta{font-size:2.8cqw;max-width:62cqw}
  .direction-08 .wordmark{font-size:20cqw}
  .direction-08 .tagline{font-size:3.8cqw;margin-top:7cqw;max-width:54cqw}
  .direction-09 .surface{padding:10cqw 8cqw}
  .direction-09 .wordmark{font-size:17cqw}
  .direction-09 .tagline{font-size:4.7cqw;max-width:62cqw;margin:7cqw 0 0 auto}
  .direction-09 .foot{padding-top:6cqw}.direction-09 .line-mark{width:3cqw;height:3cqw}
  .direction-10 .surface{grid-template-rows:68% 32%}
  .direction-10 .dark-field{padding:11cqw 7cqw}
  .direction-10 .meta{text-align:center;max-width:63cqw;font-size:2.8cqw}
  .direction-10 .wordmark{font-size:12.5cqw;white-space:nowrap}
  .direction-10 .foot{padding:8cqw;flex-direction:column;align-items:start;justify-content:center;gap:6cqw}
  .direction-10 .tagline{font-size:7.5cqw}
}

@media(max-width:720px){
  .gallery-header{height:72px}.studio-label span{margin-left:5px;font-size:11px}
  .gallery-intro{margin:32px 0 28px;display:block}.intro-note{margin-top:20px}
  .gallery-controls{align-items:start;gap:12px;flex-direction:column;padding-block:15px 25px}
  .design-grid{grid-template-columns:1fr;row-gap:34px}
  .tile-heading{margin-top:14px}.tile-description{font-size:11px}.pick-note{font-size:8px}
  .gallery-footer{flex-direction:column;gap:8px;margin-top:38px}
  .review-toolbar{padding:8px 14px;min-height:100px;flex-wrap:wrap;gap:0 14px}
  .review-name{margin-left:auto}.review-actions{width:100%;justify-content:space-between;gap:10px}
  .review-frame{height:calc(100svh - 100px);min-height:560px}
  .review-actions button{min-height:34px;padding:6px 10px}.stepper a{min-height:34px}
  .review-frame.mobile-preview{margin:12px auto}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Per-design comparison controls. Native radios retain keyboard behaviour. */
.variation-controls{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin-top:16px}
.variation-group{margin:0;padding:0;border:0;min-width:0}
.variation-group legend{font-size:9px;line-height:1.4;color:#697063;margin-bottom:6px;letter-spacing:.035em}
.segments{display:flex;border:1px solid #d4d8ce;border-radius:3px;padding:2px;gap:2px;background:#f4f5f0}
.segments label{position:relative;cursor:pointer;display:flex}
.segments input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.segments span{display:flex;align-items:center;justify-content:center;min-height:32px;padding:5px 10px;border-radius:2px;font-size:10px;line-height:1.3;color:#5a6354;white-space:nowrap}
.segments input:checked+span{background:#30392d;color:#fafbf7}
.segments input:focus-visible+span{outline:2px solid #53644a;outline-offset:3px}
.reset-variation{border:0;padding:8px 3px;background:transparent;font-size:10px;min-height:38px;color:#68745e;text-decoration:underline;text-underline-offset:3px}
.review-variations{background:#faf9f6;border-bottom:1px solid #dedfd7;padding:10px 24px 13px}
.review-variations .variation-controls{justify-content:center;margin:0;gap:20px}
.review-frame{height:calc(100svh - var(--review-controls-height,145px))}
.review-frame.mobile-preview{height:844px}
.clean-view .review-variations{display:none}
.clean-view .review-frame{height:100svh}

/* Every composition shares midnight blue and off-white. */
.canvas{--light-paper:#f5f5f2;--light-ink:#142238;--dark-paper:#142238;--dark-ink:#f5f5f2;--light-surface:color-mix(in srgb,#f5f5f2 96%,white);--dark-surface:color-mix(in srgb,#142238 94%,#f5f5f2)}
.canvas[data-appearance="light"]{--paper:var(--light-paper);--ink:var(--light-ink);--card:var(--light-surface,var(--light-paper));color-scheme:light}
.canvas[data-appearance="dark"]{--paper:var(--dark-paper);--ink:var(--dark-ink);--card:var(--dark-surface,var(--dark-paper));color-scheme:dark}
.canvas[data-palette="mono"]{--light-paper:#f3f3f3;--light-ink:#292929;--dark-paper:#202020;--dark-ink:#eeeeee;--light-surface:#fcfcfc;--dark-surface:#303030}
.canvas[data-appearance]{--muted:color-mix(in srgb,var(--ink) 82%,var(--paper));--rule:color-mix(in srgb,var(--ink) 35%,var(--paper));--band:color-mix(in srgb,var(--paper) 88%,var(--ink))}
.canvas[data-appearance] :is(.meta,.tagline,.contact){color:var(--muted)}
.canvas[data-appearance] :is(.foot,.meta,.side-note,.fine-frame){border-color:var(--rule)}
.canvas[data-appearance] .line-mark{color:var(--muted)}
.canvas[data-appearance] .business-card{background:var(--card);border-color:var(--rule);box-shadow:0 4px 16px rgb(0 0 0 / .04)}
.canvas[data-appearance].direction-10 .foot{background:var(--band);color:var(--ink)}
.canvas[data-appearance].direction-10 .foot :is(.tagline,.contact){color:var(--ink)}

/* Alignment is a composition choice: every text block follows the same axis. */
.canvas[data-align="left"]{--text-align:left;--item-align:flex-start;--content-align:flex-start}
.canvas[data-align="center"]{--text-align:center;--item-align:center;--content-align:center}
.canvas[data-align] :is(.surface,.fine-frame,.dark-field){text-align:var(--text-align)}
.canvas[data-align] :is(.meta,.wordmark,.tagline){text-align:var(--text-align)}
.canvas[data-align] .surface{align-items:stretch}
.canvas[data-align] .surface>.meta{align-self:stretch}
.canvas[data-align] .identity{width:100%}
.canvas[data-align] .foot{flex-direction:column;align-items:var(--item-align);justify-content:center;gap:1.5cqw}
.canvas[data-align] .card-top{flex-direction:column;align-items:var(--item-align);gap:2cqw}
.canvas[data-align] .top-line{flex-direction:column;align-items:var(--item-align);gap:1.5cqw}
.canvas[data-align] .fine-frame{align-items:stretch}
.canvas[data-align] .fine-frame>.contact{align-self:var(--item-align)}
.canvas[data-align] .dark-field{align-items:stretch}
.canvas[data-align] .dark-field>.wordmark{width:100%}
.canvas[data-align].direction-06 .wordmark{justify-content:var(--content-align)}
.canvas[data-align].direction-07 .meta{align-self:stretch;max-width:none}
.canvas[data-align].direction-08 .tagline{max-width:none}
.canvas[data-align="left"].direction-03 .tagline{margin-inline:0}
.canvas[data-align="left"].direction-09 .tagline{margin-inline:0;padding-right:0}
.canvas[data-align="center"].direction-01 .tagline,.canvas[data-align="center"].direction-09 .tagline{margin-inline:auto;padding-right:0}
.canvas[data-align="center"].direction-04 .identity{display:flex;flex-direction:column;gap:3cqw;align-items:center;justify-content:center}
.canvas[data-align="center"].direction-04 .wordmark{font-size:clamp(30px,9cqw,118px)}
.canvas[data-align="center"].direction-04 .side-note{align-items:center;border-left:0;border-top:1px solid var(--rule);padding:2cqw 0 0;gap:1.5cqw}
.canvas[data-align="center"].direction-04 .tagline{font-size:clamp(13px,2.5cqw,28px)}
.canvas[data-align="center"].direction-05 .business-card{justify-content:space-between}

@container (max-aspect-ratio:1/1){
  .canvas[data-align] .foot{gap:4cqw}
  .canvas[data-align] .card-top{gap:8cqw}
  .canvas[data-align] .top-line{gap:3cqw}
  .canvas[data-align].direction-06 .wordmark{align-items:var(--item-align)}
  .canvas[data-align="center"].direction-04 .identity{gap:7cqw}
  .canvas[data-align="center"].direction-04 .wordmark{font-size:22cqw}
  .canvas[data-align="center"].direction-04 .side-note{padding-top:5cqw;gap:4cqw}
  .canvas[data-align="center"].direction-04 .tagline{font-size:6cqw}
}

@media(max-width:720px){
  .variation-controls{gap:10px}
  .segments span{min-height:38px;padding-inline:10px}
  .review-variations{padding:10px 14px 12px}
  .review-variations .variation-controls{justify-content:flex-start;gap:10px}
}

/* 00 — the supplied composition, retained as the comparison baseline. */
.canvas.direction-00 .surface{justify-content:center;padding:6cqw 8cqw;font-family:Cormorant,Georgia,serif}
.canvas.direction-00 .wordmark{font-family:inherit;font-weight:300;font-size:clamp(34px,7.2cqw,92px);letter-spacing:.1em;line-height:1}
.canvas.direction-00 .tagline{font-family:inherit;font-weight:300;font-size:clamp(18px,3.6cqw,46px);letter-spacing:.04em;margin-top:1.4cqw}
.canvas.direction-00 .original-rule{border:0;background:var(--rule);height:1px;flex-shrink:0;width:5cqw;max-width:64px;margin:3.75cqw 0}
.canvas.direction-00[data-align="center"] .original-rule{margin-inline:auto}
.canvas.direction-00 .foot{gap:0}
.canvas.direction-00 .contact{font-family:inherit;font-weight:400;font-size:clamp(10px,1.4cqw,18px);letter-spacing:.1em;min-height:0}
.canvas.direction-00 .meta{font-family:inherit;font-weight:300;font-size:clamp(8px,1.25cqw,16px);letter-spacing:.18em;margin-top:.8cqw}
.canvas.direction-00 .meta,.canvas.direction-00 .contact{line-height:normal}
@media(max-resolution:1.4dppx){.canvas.direction-00 .wordmark,.canvas.direction-00 .tagline{font-weight:400}}
@container(max-aspect-ratio:1/1){
  .canvas.direction-00 .wordmark{font-size:10.8cqw}
  .canvas.direction-00 .tagline{font-size:5.65cqw;margin-top:3cqw;text-wrap:balance}
  .canvas.direction-00 .original-rule{width:9cqw;margin-block:8cqw}
  .canvas.direction-00 .contact{font-size:3.6cqw}
  .canvas.direction-00 .meta{font-size:3.34cqw;margin-top:2.6cqw}
}
.review-frame .canvas.direction-00 .surface{padding:clamp(48px,10cqw,120px) clamp(24px,8cqw,100px)}
.review-frame .canvas.direction-00 .wordmark{font-size:clamp(42px,9.5cqw,92px)}
.review-frame .canvas.direction-00 .tagline{font-size:clamp(22px,4.8cqw,46px);margin-top:clamp(10px,2cqw,18px);line-height:normal}
.review-frame .canvas.direction-00 .original-rule{width:clamp(36px,6cqw,64px);margin-block:clamp(28px,5cqw,48px)}
.review-frame .canvas.direction-00 .contact{font-size:clamp(14px,2cqw,18px)}
.review-frame .canvas.direction-00 .meta{font-size:clamp(13px,1.8cqw,16px);margin-top:10px}

/* Upright preserves the composition while removing italic styling. */
.canvas[data-italics="upright"] :is(em,.tagline,.wordmark){font-style:normal}

.font-control{display:flex;flex-direction:column;gap:6px;font-size:9px;color:#77786f}
.font-control select{font:inherit;font-size:11px;color:#282923;background:#faf9f6;border:1px solid #dedfd7;border-radius:3px;min-height:36px;padding:8px;max-width:190px}
.font-control select:focus-visible{outline:2px solid #142238;outline-offset:3px}
.canvas[data-font="bellefair"]{--chosen-font:Bellefair}
.canvas[data-font="forum"]{--chosen-font:Forum}
.canvas[data-font="ebgaramond"]{--chosen-font:EBGaramond}
.canvas[data-font="librebaskerville"]{--chosen-font:LibreBaskerville}
.canvas[data-font="cormorant"]{--chosen-font:Cormorant}
.canvas[data-font]:not([data-font="default"]) :is(.wordmark,.wordmark span,.tagline){font-family:var(--chosen-font),Georgia,serif;font-weight:400}

/* A restrained tonal gradient uses the selected palette in either appearance. */
.canvas[data-background="gradient"]{--gradient-end:color-mix(in srgb,var(--paper) 86%,var(--ink));background-image:linear-gradient(to bottom right,var(--paper) 0%,var(--gradient-end) 100%)}
.canvas[data-background="gradient"][data-appearance="dark"]{--gradient-end:color-mix(in srgb,var(--paper) 45%,black)}

/* Name casing leaves the tagline and contact details unchanged. */
.canvas[data-case="caps"] .wordmark{text-transform:uppercase}

.canvas[data-font="cormorantclassic"]{--chosen-font:CormorantClassic}

.canvas[data-font="cardo"]{--chosen-font:Cardo}

.canvas[data-font="bodonimoda"]{--chosen-font:BodoniModa}

.canvas[data-font="playfairdisplay"]{--chosen-font:PlayfairDisplay}

/* Give the full bureau name a more readable, deliberate presence. */
.canvas[data-bureau-size="larger"] .meta{font-size:clamp(11px,1.7cqw,20px);line-height:1.5}
.review-frame .canvas.direction-00[data-bureau-size="larger"] .meta{font-size:clamp(16px,2.2cqw,21px)}
@container(max-aspect-ratio:1/1){
  .canvas[data-bureau-size="larger"] .meta{font-size:clamp(14px,3.8cqw,18px);max-width:100%;text-wrap:balance}
}

.design-grid:has(>.design-tile:only-child){grid-template-columns:minmax(0,1fr);max-width:1000px;margin-inline:auto}

/* Match the divider to the wordmark row at every font size. */
.canvas.direction-04 .side-note{align-self:stretch;justify-content:space-between;padding-block:0}

.canvas.direction-04 .side-note{min-height:var(--wordmark-height,0px)}

/* Optional unified typography for Signature, including its supporting text. */
.canvas.direction-04[data-all-cormorant="on"] :is(.wordmark,.wordmark em,.tagline,.meta,.contact){font-family:Cormorant,Georgia,serif;font-weight:400}

/* Make the contact address easier to read in every composition. */
.canvas[class*="direction-"] .contact{font-size:clamp(12px,1.8cqw,20px)}
.review-frame .canvas.direction-00 .contact{font-size:clamp(16px,2.2cqw,20px)}
@container(max-aspect-ratio:1/1){
  .canvas[class*="direction-"] .contact{font-size:clamp(15px,4cqw,18px)}
}