/* Browser mock (concept studies, Sketch preview) and the Sketch mini site.
   The Sketch site is drawn on a 1280px-wide canvas where 1em = 16px, then scaled
   with container units, so it stays crisp at any size. */

.mock {
  container-type: inline-size;
  display: flex; flex-direction: column; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 14px; background: #fff;
}
.mock-bar {
  flex: none; display: flex; align-items: center; gap: 0.55cqw; height: 3.3cqw; padding: 0 1.4cqw;
  background: #ece6dc; border-bottom: 1px solid rgba(31, 39, 49, 0.08);
}
.mock-bar i { width: 0.85cqw; height: 0.85cqw; border-radius: 50%; background: #d5cbbb; }
.mock-bar i:nth-child(1) { background: #e8806e; }
.mock-bar i:nth-child(2) { background: #e9c065; }
.mock-bar i:nth-child(3) { background: #8fc27d; }
.mock-bar span {
  margin: 0 auto; transform: translateX(-2cqw); min-width: 34%; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0.5cqw 1.4cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.7);
  font: 400 0.95cqw/1 var(--sans); letter-spacing: 0.02em; color: rgba(31, 39, 49, 0.6); text-align: center;
}

/* concept study: a captured landing view filling the page area under the bar */
.mock .shot { display: block; flex: 1; min-height: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: #ece6dc; }

/* ---------- Sketch preview ----------
   A believable small-business landing page. Mood sets palette, photography and copy;
   voice sets the typefaces; layout rearranges the hero. Desktop canvas is 1280px
   wide (1em = 16px); the phone canvas is 390px wide. */

@font-face { font-family: "Fraunces"; src: url("../../studies/_fonts/fraunces-normal.woff2") format("woff2"); font-style: normal; font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../../studies/_fonts/manrope-normal.woff2") format("woff2"); font-style: normal; font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../../studies/_fonts/inter-normal.woff2") format("woff2"); font-style: normal; font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../../studies/_fonts/space-grotesk-normal.woff2") format("woff2"); font-style: normal; font-weight: 300 700; font-display: swap; }

.sk {
  /* warm café (default) */
  --bg: #f5efe5; --fg: #2a211a; --muted: rgba(42, 33, 26, 0.68); --rule: rgba(42, 33, 26, 0.14);
  --btn-bg: #2a211a; --btn-fg: #f5efe5; --accent: #9a4f2a; --surface: #ece3d5;
  --bar-bg: #2a211a; --bar-fg: #efe6d8;
  /* editorial serif (default) */
  --h-font: "Fraunces", Georgia, serif; --h-weight: 400; --h-track: -0.025em; --h-size: 4.4em;
  --b-font: "Manrope", system-ui, sans-serif; --b-size: 1em; --radius: 0;

  position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg); font-family: var(--b-font); font-size: 1.25cqw; line-height: 1.45;
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}
.sk[data-mood="ink"] {
  --bg: #121417; --fg: #efe7da; --muted: rgba(239, 231, 218, 0.64); --rule: rgba(239, 231, 218, 0.12);
  --btn-bg: #d4b48c; --btn-fg: #121417; --accent: #d4b48c; --surface: #1b1e22; --bar-bg: #0a0b0d; --bar-fg: #d4b48c;
}
.sk[data-mood="coast"] {
  --bg: #f3f6f5; --fg: #15333a; --muted: rgba(21, 51, 58, 0.7); --rule: rgba(21, 51, 58, 0.13);
  --btn-bg: #15333a; --btn-fg: #f3f6f5; --accent: #2f7f8a; --surface: #e2ebeb; --bar-bg: #dbe7e8; --bar-fg: #15333a;
}
.sk[data-mood="mono"] {
  --bg: #f5f5f3; --fg: #111111; --muted: rgba(17, 17, 17, 0.6); --rule: rgba(17, 17, 17, 0.14);
  --btn-bg: #111111; --btn-fg: #ffffff; --accent: #111111; --surface: #e8e8e5; --bar-bg: #111111; --bar-fg: #f5f5f3;
}
.sk[data-voice="grotesk"] { --h-font: "Inter", "Helvetica Neue", Arial, sans-serif; --h-weight: 600; --h-track: -0.045em; --h-size: 4.2em; --b-font: "Inter", "Helvetica Neue", Arial, sans-serif; --radius: 0.4em; }
.sk[data-voice="mono"] { --h-font: "Space Grotesk", "Helvetica Neue", sans-serif; --h-weight: 500; --h-track: -0.035em; --h-size: 4em; --b-font: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --b-size: 0.9em; --radius: 0; }

.sk-bar { flex: none; padding: 0.65em 1em; text-align: center; background: var(--bar-bg); color: var(--bar-fg); font: 500 0.7em/1.3 var(--b-font); letter-spacing: 0.05em; transition: background-color 0.6s, color 0.6s; }
.sk-nav { flex: none; display: flex; align-items: center; gap: 2.2em; padding: 1.25em 3em; border-bottom: 1px solid var(--rule); }
.sk-brand { margin-right: auto; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--h-weight) 1.5em/1.1 var(--h-font); letter-spacing: var(--h-track); }
.sk-links { display: flex; gap: 2em; font-size: calc(0.84em * var(--b-size) / 1em); white-space: nowrap; }
.sk-tools { display: flex; align-items: center; gap: 1.3em; }
.sk-ico { width: 1.15em; height: 1.15em; flex: none; }
.sk-burger { display: none; width: 1.3em; gap: 0.32em; flex-direction: column; }
.sk-burger i { display: block; height: 1.5px; background: currentColor; }
.sk-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 0.95em 1.6em; border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg); font: 600 0.8em/1 var(--b-font); letter-spacing: 0.02em; white-space: nowrap;
  transition: background-color 0.6s, color 0.6s;
}
.sk-btn-sm { padding: 0.75em 1.2em; font-size: 0.74em; }

.sk-hero { flex: 1; min-height: 0; display: grid; }
.sk-text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 2.4em 3em; min-width: 0; }
.sk-kicker { font: 600 0.68em/1.2 var(--b-font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.sk-h { display: block; margin: 0.5em 0 0.42em; font: var(--h-weight) var(--h-size)/1.02 var(--h-font); letter-spacing: var(--h-track); text-wrap: balance; }
.sk-p { display: block; max-width: 25em; font-size: var(--b-size); line-height: 1.55; color: var(--muted); }
.sk-actions { display: flex; align-items: center; gap: 1.6em; margin-top: 2em; }
.sk-link { font: 600 0.8em/1 var(--b-font); text-decoration: underline; text-underline-offset: 0.45em; text-decoration-thickness: 1px; }
.sk-media { position: relative; margin: 0; overflow: hidden; background: var(--surface); min-height: 0; }
.sk-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sk-media figcaption {
  position: absolute; left: 1.1em; bottom: 1.1em; padding: 0.55em 0.85em; background: rgba(16, 14, 12, 0.5); color: #fff;
  font: 500 0.64em/1 var(--b-font); letter-spacing: 0.03em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sk-cards { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4em; padding: 1.3em 3em 1.5em; border-top: 1px solid var(--rule); }
.sk-card { display: grid; grid-template-columns: 5.6em 1fr; grid-template-rows: 1fr 1fr; column-gap: 1em; min-width: 0; }
.sk-card img { grid-row: span 2; width: 5.6em; height: 4.2em; object-fit: cover; border-radius: calc(var(--radius) * 0.6); background: var(--surface); }
.sk-card b { align-self: end; font: var(--h-weight) 1.05em/1.2 var(--h-font); letter-spacing: var(--h-track); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-card em { align-self: start; margin-top: 0.3em; font-style: normal; font-size: 0.76em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* layouts */
.sk[data-layout="editorial"] .sk-hero { grid-template-columns: 1.08fr 1fr; }
.sk[data-layout="editorial"] .sk-media { margin: 2em 3em 2em 0; }
.sk[data-layout="split"] .sk-hero { grid-template-columns: 1fr 1fr; }
.sk[data-layout="split"] .sk-media { order: -1; }
.sk[data-layout="split"] .sk-text { padding-left: 3.5em; }
.sk[data-layout="split"] .sk-h { font-size: calc(var(--h-size) * 0.9); }
.sk[data-layout="centered"] .sk-hero { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.sk[data-layout="centered"] .sk-text { align-items: center; text-align: center; padding: 2em 3em 1.4em; }
.sk[data-layout="centered"] .sk-h { font-size: calc(var(--h-size) * 0.78); max-width: 14em; }
.sk[data-layout="centered"] .sk-p { max-width: 30em; }
.sk[data-layout="centered"] .sk-actions { margin-top: 1.4em; }
.sk[data-layout="centered"] .sk-media { margin: 0 3em; }

/* phone: same markup, re-laid for a 390px canvas under the status bar */
.sk.is-phone { font-size: 4.1cqw; padding-top: 2.6em; }
.sk.is-phone .sk-bar { font-size: 0.62em; padding: 0.7em 1.4em; }
.sk.is-phone .sk-nav { padding: 0.9em 1.25em; gap: 1em; }
.sk.is-phone .sk-brand { font-size: 1.2em; max-width: 9em; }
.sk.is-phone .sk-links, .sk.is-phone .sk-search, .sk.is-phone .sk-tools .sk-btn { display: none; }
.sk.is-phone .sk-burger { display: flex; }
.sk.is-phone .sk-hero { display: flex; flex-direction: column; }
.sk.is-phone .sk-media { order: -1; flex: none; height: 15.5em; margin: 0; }
.sk.is-phone .sk-text { padding: 1.4em 1.25em 1.2em; align-items: flex-start; text-align: left; }
.sk.is-phone .sk-h { font-size: calc(var(--h-size) * 0.56); max-width: none; }
.sk.is-phone .sk-p { font-size: calc(0.86em * var(--b-size) / 1em); }
.sk.is-phone .sk-actions { margin-top: 1.2em; gap: 1.2em; }
.sk.is-phone[data-layout="centered"] .sk-text { align-items: center; text-align: center; }
.sk.is-phone .sk-cards { grid-template-columns: 1fr 1fr; gap: 0.8em; padding: 1em 1.25em; }
.sk.is-phone .sk-card { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
.sk.is-phone .sk-card img { grid-row: auto; width: 100%; height: 5.6em; }
.sk.is-phone .sk-card b { margin-top: 0.5em; font-size: 0.9em; }
.sk.is-phone .sk-card em { font-size: 0.7em; margin-top: 0.15em; }
.sk.is-phone .sk-card:nth-child(3) { display: none; }