/* Sunday Standard: the design preview of the kit's six-page Canva website (2026-10-03).

   A page-by-page recreation in HTML of the Canva master W01 (Home, About, Services, Work, FAQs, and
   Contact, 23 sections), checked against its native exports of 2026-10-02. It is a preview: the
   studio is fictional, nothing here is a form, and this HTML is not part of the kit, whose website
   is the Canva template. The kit's colors and type, self-hosted from the site's /fonts/kits/
   (open license, OFL.txt beside them). Canva's headline outline (thickness 23 on Instrument Serif)
   is matched by eye with a stroke in the letters' own color, not copied as a number. */

@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/kits/InstrumentSerif-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/kits/Outfit-Variable.woff2') format('woff2'); }
@font-face { font-family: 'Luxurious Script'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/kits/LuxuriousScript-Regular.woff2') format('woff2'); }

:root {
  --cream: #F7F2E8;
  --green: #E9E6B7;
  --wine: #4B2339;
  --lilac: #BFC0D8;
  --wine-soft: rgba(75, 35, 57, .62);
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script: 'Luxurious Script', 'Snell Roundhand', cursive;
  --gutter: clamp(20px, 5.7vw, 80px);
  --max: 1366px;
  --line: 1.5px;
  --purple: #D9CBF2;
  /* The master's stripes, measured on the Contact export: 62 green, 4 cream, 11 green, 2 cream. */
  --stripes: repeating-linear-gradient(90deg, var(--green) 0 62px, var(--cream) 62px 66px, var(--green) 66px 77px, var(--cream) 77px 79px);
  /* And the finer stripes behind Home's correspondence, measured the same way. */
  --stripes-fine: repeating-linear-gradient(90deg, var(--green) 0 29px, var(--cream) 29px 30.5px, var(--green) 30.5px 34.5px, var(--cream) 34.5px 35.5px, var(--green) 35.5px 59.5px, var(--cream) 59.5px 61.5px);
}

* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--wine);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
:focus-visible { outline: 3px solid var(--wine); outline-offset: 3px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 14px; background: var(--wine); color: var(--cream); font: 600 14px/1 var(--sans); }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ the preview's own bar */
/* Not part of the Canva website: a thin bar in Tide's navy that says what this is and leads back. */
.preview {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px;
  padding: 9px var(--gutter);
  background: #0C1B33; color: #F3F1EB;
  font: 400 13px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.preview p { max-width: 82ch; }
.preview strong { font-weight: 650; }
.preview a { display: inline-flex; align-items: center; min-height: 32px; color: #F3F1EB; font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.preview a:focus-visible { outline-color: #F3F1EB; }

/* ------------------------------------------------------------------ the studio's header */
.top { background: var(--cream); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 4px; padding-right: clamp(14px, 1.2vw, 20px); }
.brand { font: 600 clamp(12px, 1vw, 14px)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; gap: 0 clamp(12px, 1.35vw, 19px); margin: 0; padding: 0; list-style: none; }
.nav a { display: inline-flex; align-items: center; min-height: 48px; font: 600 clamp(16px, 1.8vw, 25px)/1 var(--sans); color: var(--wine-soft); text-decoration: none; }
.nav a[aria-current='page'] { color: var(--wine); }
.nav a:hover { color: var(--wine); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }

/* ------------------------------------------------------------------ sections */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 7.4vw, 104px); }
.section.cream { background: var(--cream); }
.section.green { background: var(--green); }
.section.lilac { background: var(--lilac); }
.section.wine { background: var(--wine); color: var(--cream); }
.section.striped { background: var(--stripes); }
.rule { height: 5px; border-block: 1.5px solid var(--wine); background: var(--cream); }

.label { display: block; font: 600 clamp(12px, 1.2vw, 16.5px)/1.25 var(--sans); letter-spacing: .01em; text-transform: uppercase; }
.label.wide { letter-spacing: .2em; }
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.35vw, 76px);
  line-height: .9;
  letter-spacing: -.012em;
  -webkit-text-stroke: .028em currentColor;
  paint-order: stroke fill;
  text-wrap: balance;
}
.lead { font-weight: 350; font-size: clamp(17px, 1.8vw, 24.5px); letter-spacing: .03em; line-height: 1.32; }
/* Home's opening line is the largest heading the master sets. */
.display.xl { font-size: clamp(46px, 6.2vw, 88px); }
.copy { font-weight: 350; font-size: clamp(16px, 1.55vw, 21px); line-height: 1.4; }
.fine { font-weight: 400; font-size: clamp(12.5px, 1vw, 14px); letter-spacing: .02em; }

.head { display: grid; gap: clamp(22px, 3vw, 42px); justify-items: start; }
.center { text-align: center; justify-items: center; }
.center .lead, .center .copy { max-width: 46ch; }

/* Buttons: a pill keylined in wine, and a plain underlined link. */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: clamp(48px, 3.8vw, 52px); min-width: clamp(0px, 20vw, 276px); padding: 10px clamp(26px, 3vw, 44px);
  border: var(--line) solid var(--wine); border-radius: 999px;
  font: 600 clamp(14px, 1.2vw, 16.5px)/1.1 var(--sans); text-decoration: none; color: var(--wine);
  background: transparent;
}
.pill.fill-cream { background: var(--cream); }
.pill.fill-green { background: var(--green); border-color: var(--green); }
.pill.fill-lilac { background: var(--lilac); }
.pill.fill-purple { background: var(--purple); }
/* The larger pills the master sets on Home's lilac band and at the foot of About and Work. */
.pill.lg { min-height: clamp(52px, 4.6vw, 64px); min-width: clamp(0px, 25vw, 340px); font-size: clamp(15px, 1.4vw, 19.5px); }
.pill:hover { background: var(--wine); color: var(--cream); }
.pill.fill-green:hover { background: var(--cream); border-color: var(--cream); color: var(--wine); }
.link { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; font: 650 clamp(15px, 1.45vw, 20px)/1.1 var(--sans); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.link.sm { font-size: clamp(13px, 1.15vw, 16px); font-weight: 600; }
.wine .link, .wine .label { color: var(--cream); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(20px, 2.4vw, 34px); }

/* Two columns that stack on a phone. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split.top-align { align-items: start; }
.split > .end { justify-self: end; }
.split.wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 42px); }
/* The master's cards reach a little past the words' margin on each side. */
.three.cards { width: calc(100% + 2 * clamp(0px, 1.9vw, 26px)); margin-inline: calc(-1 * clamp(0px, 1.9vw, 26px)); }

/* Cards: keylined boxes, cream or pale green, with a title and a line or two. */
.card { position: relative; display: grid; align-content: start; gap: clamp(12px, 1.5vw, 20px); min-height: clamp(170px, 19vw, 262px); padding: clamp(22px, 2.6vw, 36px) clamp(18px, 1.9vw, 26px); border: var(--line) solid var(--wine); }
.card.tall { min-height: clamp(190px, 25.6vw, 350px); }
.card.cream { background: var(--cream); }
.card.green { background: var(--green); }
.card.short { min-height: clamp(110px, 10.3vw, 140px); }
.card h3, .item h3 { font: 600 clamp(18px, 1.88vw, 26px)/1.2 var(--sans); }
.card p, .item p { font-weight: 350; font-size: clamp(16px, 1.68vw, 23px); line-height: 1.34; letter-spacing: .005em; }
.item { display: grid; align-content: start; gap: clamp(8px, 1vw, 14px); }

/* The lilac ribbon bookmark that hangs from a card's top edge. */
.ribbon { position: absolute; top: -16px; right: clamp(10px, 1.2vw, 16px); width: clamp(28px, 2.6vw, 36px); height: clamp(52px, 4.6vw, 64px); background: var(--lilac); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.ribbon::after { content: ''; position: absolute; top: 9px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--cream); }
.card .ribbon { top: -1.5px; }

/* The project-brief panel: pale green inside two fine wine keylines, its items stacked. */
.brief { position: relative; padding: 10px; background: var(--green); }
.brief-in { display: grid; gap: clamp(18px, 2vw, 26px); padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px); outline: 1px solid var(--wine); outline-offset: -1px; box-shadow: inset 0 0 0 4px var(--green), inset 0 0 0 5px var(--wine); }
.brief .item p { font-size: clamp(15px, 1.4vw, 19px); }
.brief .item h3 { font-size: clamp(17px, 1.6vw, 22px); }
.brief .ribbon { top: -10px; right: clamp(40px, 5vw, 70px); }

/* The four-point spark. */
.spark { display: block; width: clamp(28px, 2.6vw, 38px); height: auto; color: var(--wine); }

/* ------------------------------------------------------------------ the drawn pieces */
/* The wordmark: the script S across two lines of capitals, the studio's line under it. */
.wordmark { display: grid; justify-items: center; gap: .55em; color: var(--wine); font-size: clamp(20px, 2.25vw, 31px); }
.wm { position: relative; display: grid; padding: .5em 0 .55em 1.6em; }
.wm .s { position: absolute; left: 0; top: 50%; font: 400 4.55em/1 var(--script); transform: translate(-.2em, -50%); }
.wm .l { position: relative; font: 400 1em/1.03 var(--serif); letter-spacing: -.012em; -webkit-text-stroke: .018em currentColor; text-transform: uppercase; }
.wm .l2 { padding-left: .08em; }
.wordmark .tag { font: 600 .43em/1 var(--sans); letter-spacing: .01em; text-transform: uppercase; }
.wordmark.small { font-size: clamp(9px, .95vw, 13px); }
/* Inside a drawn card, the wordmark takes its size from the card (container query units), as the master's does. */
.sample, .framed, .note, .invite { container-type: inline-size; }
.sample .wordmark { font-size: 5.3cqi; }
.framed .wordmark { font-size: 5.8cqi; }
.note .wordmark { font-size: 5.6cqi; }
.wordmark.bare .tag { display: none; }
/* The identity sample: pale green in a wine keyline, a lilac frame inside it, the cream card in that. */
.sample { position: relative; aspect-ratio: 582 / 414; background: var(--green); border: var(--line) solid var(--wine); }
.sample .frame { position: absolute; left: 6.9%; right: 7.2%; top: 15%; bottom: 16%; background: var(--lilac); }
.sample .card-in { position: absolute; left: 1.7%; right: 1.7%; top: 11%; bottom: 10.5%; display: grid; place-items: center; background: var(--cream); }
.sample .card-in::before { content: ''; position: absolute; inset: 3.4%; border: 1px solid var(--wine); opacity: .75; }
.seal { position: absolute; width: clamp(64px, 7.6vw, 106px); height: auto; right: -5.4%; bottom: -12%; }
.sample-caption { margin-top: clamp(20px, 2.4vw, 34px); text-align: center; }

/* A lilac-framed card holding the wordmark (Work's study, and the business card). */
.framed { display: grid; place-items: center; padding: 6% 5.5%; background: var(--lilac); }
.framed .card-in { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 2 / 1; background: var(--cream); }
.framed .card-in::before { content: ''; position: absolute; inset: 4%; border: 1px solid var(--wine); opacity: .75; }

/* The envelope: its flap and its fold as fine wine lines, a small seal where they meet. */
.envelope { display: block; width: 100%; height: auto; }

/* Correspondence: the thank-you note and the invitation, on stripes. */
.stripes-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 30px); padding: clamp(28px, 4.4vw, 60px) clamp(24px, 3.3vw, 46px) clamp(14px, 1.6vw, 22px); background: var(--stripes-fine); }
.stripes-panel figure { margin: 0; display: grid; gap: clamp(14px, 1.6vw, 22px); }
.stripes-panel figcaption { text-align: center; font: 600 clamp(15px, 1.4vw, 20px)/1.1 var(--sans); }
.note { position: relative; display: grid; place-items: center; aspect-ratio: 13 / 20; padding: 7%; background: var(--lilac); }
.note .paper { position: relative; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; width: 100%; height: 100%; padding: 14% 10% 9%; background: var(--cream); text-align: center; }
.note .paper::before, .note .paper::after { content: ''; position: absolute; border: 1px solid var(--wine); opacity: .8; }
.note .paper::before { inset: 13% 7% 9% 4%; }
.note .paper::after { inset: 16% 4% 6% 7%; }
.note .spark { width: 14%; }
.note .say { font: 400 13.4cqi/.88 var(--serif); -webkit-text-stroke: .025em currentColor; }
.invite { display: grid; justify-items: center; align-content: space-between; aspect-ratio: 2 / 3; padding: 10% 7% 7%; background: var(--cream); text-align: center; }
.invite.keyline { border: var(--line) solid var(--wine); }
.invite .k { font: 600 3.4cqi/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.invite .n { font: 400 13cqi/.88 var(--serif); -webkit-text-stroke: .02em currentColor; }
.invite .k.rsvp { text-transform: none; letter-spacing: .1em; }
.invite .h { font: 400 3.4cqi/1.2 var(--sans); }
.invite .box { display: grid; gap: 1.4em; width: 100%; padding: 12% 6%; background: var(--green); outline: 1px solid var(--wine); outline-offset: -4px; font: 400 3.4cqi/1.2 var(--sans); }
.invite .box b { font-weight: 600; }
.invite .sprig { position: absolute; }
.invite-wrap { position: relative; }
.invite-wrap .sprig { position: absolute; top: 9%; right: 9%; width: 8%; height: auto; }

/* ------------------------------------------------------------------ page parts */
/* Home's hero. */
.hero { padding-top: clamp(40px, 5vw, 72px); }
.hero .split { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: start; }
.hero .intro { display: grid; gap: clamp(26px, 4vw, 60px); justify-items: start; }
.hero .intro .display { margin-top: clamp(-6px, 1vw, 12px); }
.hero .intro .lead { max-width: 21.5em; }
.hero .art { padding-top: clamp(20px, 3.4vw, 56px); padding-right: clamp(0px, 1.5vw, 20px); }
.hero .foot { display: flex; justify-content: space-between; align-items: end; margin-top: clamp(28px, 3vw, 44px); }

/* The dark closing section on Home. */
.closing .split { grid-template-columns: minmax(0, .36fr) minmax(0, .64fr); align-items: end; }
.closing .envelope { max-width: 285px; margin-bottom: clamp(0px, 5vw, 70px); }
.closing .display { color: var(--cream); }
.closing .lead { color: var(--cream); }
.signoff { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px 30px; margin-top: clamp(48px, 6vw, 90px); }
.signoff .name { display: block; font: 500 clamp(26px, 3.2vw, 44px)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.signoff .what { display: block; margin-top: 8px; font: 400 clamp(14px, 1.2vw, 17px)/1.3 var(--sans); }

/* The line at the foot of Work and FAQs. */
.footline { font: 400 clamp(13px, 1.15vw, 16px)/1.4 var(--sans); }

/* Contact's panels on stripes. */
.panel { position: relative; padding: clamp(28px, 3.6vw, 52px) clamp(22px, 3.6vw, 52px); background: var(--cream); }
.panels { display: grid; gap: clamp(36px, 4.8vw, 66px); padding-block: clamp(24px, 3vw, 34px) clamp(24px, 3vw, 34px); }
.placeholder { font: 600 clamp(18px, 1.9vw, 26px)/1.2 var(--sans); letter-spacing: .03em; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.contact-art .envelope { max-width: 300px; }
.demo { max-width: 46ch; padding: 10px 12px; border-left: 3px solid var(--lilac); background: rgba(191, 192, 216, .22); font: 400 clamp(13px, 1.05vw, 14.5px)/1.45 var(--sans); }

/* FAQs: the questions down the right, each a heading with its answer. */
.qa { display: grid; gap: clamp(30px, 4vw, 58px); }
.qa .item h3 { font-size: clamp(18px, 1.75vw, 24px); }
.qa .item p { font-weight: 350; font-size: clamp(15.5px, 1.45vw, 20px); }

/* Work's applications. */
.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); align-items: end; }
.uses figure { margin: 0; display: grid; gap: clamp(14px, 1.6vw, 22px); }
.uses .pic { display: grid; place-items: end start; min-height: clamp(150px, 17vw, 236px); }
.uses .pic > * { width: 100%; }
.uses .pic .narrow { width: 52%; justify-self: center; }

/* ------------------------------------------------------------------ narrower screens */
@media (max-width: 900px) {
  .split, .split.wide-left, .hero .split, .closing .split { grid-template-columns: minmax(0, 1fr); }
  /* One column, so the drawn pieces keep the size they have beside the words rather than fill it. */
  .hero .art, .stripes-panel, .framed, .contact-art, .brief { width: 100%; max-width: 560px; }
  .hero .art { padding-right: 5%; }
  .card, .card.tall { min-height: 0; }
  .order-first { order: -1; }
  .split > .end { justify-self: start; }
}
@media (max-width: 700px) {
  .three, .uses { grid-template-columns: minmax(0, 1fr); }
  .uses .pic { min-height: 0; place-items: start; }
  .uses .pic > * { width: min(100%, 420px); }
  .uses .pic .narrow { width: min(62%, 260px); justify-self: start; }
}
@media (max-width: 700px) {
  .top .wrap { padding-block: 8px 4px; }
  /* Six links in two rows of three on a phone, rather than five and one left over. */
  .nav { display: grid; grid-template-columns: repeat(3, auto); gap: 0 22px; }
  .preview { font-size: 12.5px; }
  .sample-caption { margin-top: clamp(40px, 12vw, 52px); }
}
@media (prefers-reduced-motion: no-preference) {
  .pill, .nav a { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
}