/* ------------------------------------------------------------------
   Yohhan Dalvi · Portfolio
   Desktop layout mirrors the 1696px-wide design: every position is in
   design pixels, scaled with --u (1 design px). Below 860px the page
   switches to a stacked mobile layout.
------------------------------------------------------------------- */

:root {
  --cream: #f3ebe9;
  --ink: #111014;
  --purple: #4f438d;
  --purple-dark: #403878;
  --board: #494084;
  --lavender: #d2c8e6;
  --navy: #2b2560;

  --f-display: "Lilita One", "Arial Black", sans-serif;
  --f-hand: "Shantell Sans", "Comic Sans MS", cursive;
  --f-sans: "Poppins", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-hand);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, p, figure { margin: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* paper grain */
.paper, .board { position: relative; }
.paper::before, .board::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.board::before { opacity: .9; }

/* ---------- stage / design-pixel system ---------- */
.stage {
  position: relative;
  width: 100%;
  margin: 0 auto;
  container-type: inline-size;
}
.stage--paper { aspect-ratio: 1696 / 1552; }
.stage--board { aspect-ratio: 1696 / 976; }

.stage * { --u: calc(100cqw / 1696); }
.abs {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w, auto) * var(--u));
}
.abs[style*="--h"] { height: calc(var(--h) * var(--u)); }
.doodle { pointer-events: none; user-select: none; }

/* ---------- hero ---------- */
.ltr {
  width: auto;
  font-family: var(--f-display);
  font-size: calc(var(--fs) * var(--u));
  line-height: 1;
  color: var(--purple);
  transform: rotate(var(--r));
  transform-origin: 50% 60%;
  -webkit-text-stroke: calc(2 * var(--u)) var(--purple);
}
.l-left  { text-shadow: calc(-9 * var(--u)) calc(9 * var(--u)) 0 var(--ink); }
.l-right { text-shadow: calc(9 * var(--u)) calc(9 * var(--u)) 0 var(--ink); }

.hero-photo {
  background: #fff;
  padding: calc(10 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.08);
  z-index: 2;
}
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  filter: grayscale(1) contrast(1.05);
}

.tag { z-index: 2; display: grid; place-items: center; transform: rotate(-2deg); }
.tag svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #0f0d0e; }
.tag span {
  position: relative;
  font-family: var(--f-hand); font-weight: 600;
  font-size: calc(33 * var(--u));
  letter-spacing: calc(1.6 * var(--u));
  color: #fff;
  padding-top: calc(6 * var(--u));
}

.torn-line { height: calc(190 * var(--u)); }
.torn-stroke { fill: none; stroke: #8d8a88; stroke-width: 2.2; stroke-linejoin: round; }

/* ---------- badge ---------- */
.badge { z-index: 3; height: calc(1084 * var(--u)); }
.badge__lanyard { position: absolute; left: 0; top: 0; width: calc(360 * var(--u)); height: auto; z-index: 2; pointer-events: none; }
.badge__card {
  position: absolute;
  left: calc(102 * var(--u)); top: calc(500 * var(--u));
  width: calc(380 * var(--u)); height: calc(540 * var(--u));
  padding: calc(30 * var(--u)) calc(30 * var(--u)) 0;
  border-radius: calc(18 * var(--u));
  background: linear-gradient(160deg, #f7f6f4 0%, #e9e7e4 55%, #dedbd7 100%);
  border: calc(3 * var(--u)) solid rgba(255, 255, 255, .85);
  box-shadow:
    inset 0 0 0 calc(8 * var(--u)) rgba(255, 255, 255, .35),
    inset 0 calc(-6 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .06),
    calc(6 * var(--u)) calc(14 * var(--u)) calc(24 * var(--u)) rgba(40, 30, 60, .22);
  transform: rotate(-2deg);
  transform-origin: 47% 0;
}
.badge__card::before { /* slot the clip hooks into */
  content: ""; position: absolute; left: 50%; top: calc(10 * var(--u));
  width: calc(70 * var(--u)); height: calc(10 * var(--u));
  transform: translateX(-50%);
  border-radius: 99px; background: rgba(0, 0, 0, .12);
}
.badge__photo {
  width: 100%; height: calc(416 * var(--u));
  object-fit: cover;
  filter: grayscale(1);
}
.badge__text {
  display: flex; flex-direction: column;
  padding: calc(16 * var(--u)) calc(30 * var(--u)) 0 calc(28 * var(--u));
  color: #1c1a1f;
}
.badge__name { font-family: var(--f-hand); font-weight: 600; font-size: calc(38 * var(--u)); line-height: 1.1; }
.badge__role { font-family: var(--f-hand); font-weight: 600; font-size: calc(23 * var(--u)); margin-top: calc(4 * var(--u)); }
.badge__star { position: absolute; left: calc(30 * var(--u)); top: calc(989 * var(--u)); width: calc(80 * var(--u)); }

/* ---------- headings ---------- */
.h-script {
  font-family: var(--f-hand);
  font-weight: 800;
  color: var(--purple-dark);
  font-size: calc(68 * var(--u));
  letter-spacing: calc(-1 * var(--u));
  line-height: 1.1;
}
.h-underline { display: inline-block; position: relative; }
.h-underline::after {
  content: ""; position: absolute; left: 0; right: calc(30 * var(--u)); bottom: calc(-4 * var(--u));
  height: calc(4 * var(--u)); border-radius: 4px; background: var(--purple-dark);
  transform: rotate(-.6deg);
}
.h-scrawl { display: inline-block; position: relative; font-size: calc(64 * var(--u)); font-weight: 700; letter-spacing: 0; }
.h-scrawl::after {
  content: ""; position: absolute; left: 0; width: 66%; bottom: calc(-16 * var(--u)); height: calc(18 * var(--u));
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'><path d='M2 8 C 50 3, 120 2, 196 4 M30 12 C 70 9, 120 9, 170 10 M50 15 C 80 13, 110 13, 140 14' fill='none' stroke='%23403878' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
}

/* ---------- about ---------- */
.about p {
  margin-top: calc(12 * var(--u));
  margin-left: calc(8 * var(--u));
  font-size: calc(25.5 * var(--u));
  font-weight: 500;
  line-height: 1.64;
  letter-spacing: calc(.6 * var(--u));
  max-width: calc(600 * var(--u));
}
.about strong { font-family: var(--f-hand); font-weight: 600; font-size: calc(31 * var(--u)); }
.about .quote {
  margin-top: calc(22 * var(--u));
  margin-left: calc(-14 * var(--u));
  max-width: none;
  font-size: calc(30 * var(--u));
  line-height: 1.5;
}
.quote span {
  display: inline-block;
  background: var(--lavender);
  padding: calc(4 * var(--u)) calc(26 * var(--u)) calc(6 * var(--u)) calc(26 * var(--u));
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  clip-path: polygon(1% 8%, 6% 0, 30% 4%, 60% 1%, 96% 3%, 100% 20%, 98% 50%, 100% 80%, 96% 100%, 60% 96%, 30% 100%, 4% 97%, 0 80%, 2% 50%, 0 25%);
}

/* ---------- tech stack ---------- */
.tiles { display: flex; gap: calc(14 * var(--u)); margin-top: calc(34 * var(--u)); }
.tile {
  width: calc(94 * var(--u)); height: calc(94 * var(--u));
  border-radius: calc(14 * var(--u));
  background: var(--bg);
  color: var(--c);
  border: calc(3 * var(--u)) solid color-mix(in srgb, var(--c) 35%, transparent);
  display: grid; place-items: center;
  font-family: var(--f-sans); font-weight: 700;
  font-size: calc(46 * var(--u)); letter-spacing: calc(-1 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.12);
  transition: transform .2s ease;
}
.tile:hover { transform: translateY(calc(-4 * var(--u))) rotate(-2deg); }
.stack__more { margin-top: calc(18 * var(--u)); font-size: calc(24 * var(--u)); color: var(--navy); }

/* ---------- experience ---------- */
.vline { overflow: visible; }
.vline path { fill: none; stroke: var(--purple-dark); stroke-width: 2.4; stroke-linecap: round; }
.timeline { margin-top: calc(30 * var(--u)); }
.timeline li {
  display: flex; flex-direction: column;
  font-size: calc(24 * var(--u)); line-height: calc(33 * var(--u));
  font-weight: 500;
  color: var(--navy);
  padding: 0 0 calc(13 * var(--u));
}
.timeline li + li {
  padding-top: calc(13 * var(--u));
  background: radial-gradient(circle, var(--purple) 1.4px, transparent 1.8px) 0 0 / calc(22 * var(--u)) calc(6 * var(--u)) repeat-x;
  background-size: calc(22 * var(--u)) calc(6 * var(--u));
  background-repeat: repeat-x;
  background-position: 0 0;
  background-clip: border-box;
  width: calc(340 * var(--u));
}
.timeline .yr { font-size: calc(25 * var(--u)); }
.timeline span:nth-child(n+2) { font-size: calc(24 * var(--u)); }
.timeline span:nth-child(3) { color: #1d1a26; }

/* ---------- contact ---------- */
.contact__list { margin-top: calc(40 * var(--u)); display: grid; gap: calc(20 * var(--u)); }
.contact__list li { display: flex; align-items: center; gap: calc(34 * var(--u)); font-size: calc(28 * var(--u)); font-weight: 500; letter-spacing: calc(.5 * var(--u)); height: calc(44 * var(--u)); }
.contact__list a:hover { color: var(--purple); text-decoration: underline; text-decoration-thickness: 1px; }
.ic { width: calc(56 * var(--u)); flex: none; display: grid; place-items: center; }
.ic--gh, .ic--in { width: calc(46 * var(--u)); height: calc(46 * var(--u)); margin: 0 calc(5 * var(--u)); border-radius: 50%; }
.ic--gh { background: #151515; }
.ic--gh svg { width: 62%; fill: #fff; }
.ic--in { background: #0a66c2; color: #fff; border-radius: calc(10 * var(--u)); font-family: var(--f-sans); font-weight: 800; font-size: calc(24 * var(--u)); }

/* ---------- live services board ---------- */
.board { background: var(--board); color: #fff; overflow: hidden; }
.board { margin-top: calc(-2 * 100vw / 1696); }
.torn-edge { width: 100%; height: auto; position: relative; z-index: 1; }
.stage--board { z-index: 2; margin-top: calc(-110 * 100vw / 1696); }

.board__title h2 {
  font-family: var(--f-hand); font-weight: 700;
  font-size: calc(62 * var(--u)); line-height: 1.1; color: #fff;
  letter-spacing: calc(1 * var(--u));
}
.board__title .crown { position: absolute; left: calc(552 * var(--u)); top: calc(-14 * var(--u)); width: calc(76 * var(--u)); }
.board__title .underline { width: calc(470 * var(--u)); margin-top: calc(-8 * var(--u)); margin-left: calc(30 * var(--u)); }

.rays path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .9; }

.num {
  width: auto;
  font-family: var(--f-display);
  font-size: calc(var(--fs) * var(--u));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: calc(3.5 * var(--u)) var(--c);
  filter: drop-shadow(0 0 calc(6 * var(--u)) color-mix(in srgb, var(--c) 70%, transparent));
  transform: rotate(var(--r));
  opacity: .92;
}

.svc { transform: rotate(var(--r)); z-index: 2; }
.svc__card {
  position: relative; display: block;
  height: calc(var(--ch) * var(--u));
  background: #fff;
  padding: calc(14 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(15, 10, 50, .35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.svc a.svc__card:hover { transform: translateY(calc(-10 * var(--u))) rotate(-1deg); box-shadow: 0 calc(18 * var(--u)) calc(30 * var(--u)) rgba(15, 10, 50, .45); }
.svc--hero .svc__card { display: flex; flex-direction: column; justify-content: flex-end; padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(26 * var(--u)); }
.svc__brand { font-family: var(--f-sans); font-weight: 700; font-size: calc(54 * var(--u)); color: #000; letter-spacing: calc(-1 * var(--u)); line-height: 1; padding: calc(18 * var(--u)) calc(10 * var(--u)) 0; }

.svc__face {
  display: flex; flex-direction: column; justify-content: flex-end; gap: calc(8 * var(--u));
  height: 100%;
  background: #e1e7f3;
  padding: calc(26 * var(--u)) calc(22 * var(--u)) calc(40 * var(--u));
  color: #1b2340;
  position: relative;
}
.svc__face::before { /* the image-placeholder glyph from the design */
  content: ""; position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%);
  width: calc(80 * var(--u)); height: calc(66 * var(--u));
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 66'><rect x='2' y='2' width='76' height='62' rx='8' fill='none' stroke='%23c4cbd6' stroke-width='4'/><circle cx='26' cy='22' r='6' fill='none' stroke='%23c4cbd6' stroke-width='4'/><path d='M4 56 L28 36 L44 50 L56 40 L76 56' fill='none' stroke='%23c4cbd6' stroke-width='4' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  opacity: .9;
}
.svc__face b { font-family: var(--f-sans); font-weight: 700; font-size: calc(32 * var(--u)); line-height: 1.05; letter-spacing: calc(-.5 * var(--u)); position: relative; }
.svc__face small { font-family: var(--f-hand); font-size: calc(21 * var(--u)); color: #4a5370; position: relative; }

.tape {
  position: absolute; left: 50%; top: calc(-22 * var(--u));
  width: calc(124 * var(--u)); height: calc(38 * var(--u));
  transform: translateX(-50%) rotate(-2deg);
  background: linear-gradient(180deg, rgba(222, 212, 190, .92), rgba(205, 195, 172, .92));
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  clip-path: polygon(0 6%, 4% 0, 9% 8%, 14% 1%, 20% 6%, 100% 0, 97% 30%, 100% 60%, 97% 100%, 90% 94%, 84% 100%, 0 100%, 3% 70%, 0 40%);
  z-index: 2;
}

.svc__name {
  display: block; text-align: center;
  margin-top: calc(40 * var(--u));
  font-family: var(--f-hand); font-weight: 500;
  font-size: calc(31 * var(--u));
  letter-spacing: calc(1 * var(--u));
  white-space: nowrap;
  color: #fff;
  padding-bottom: calc(16 * var(--u));
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 20' preserveAspectRatio='none'><path d='M6 4 C 70 1, 150 1, 214 3 M40 10 C 90 7, 140 7, 180 9 M60 16 C 90 13, 120 13, 150 15' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'/></svg>") no-repeat center bottom / 72% calc(20 * var(--u));
}
.svc--hero .svc__name { margin-top: calc(30 * var(--u)); }

.note { z-index: 3; }
.note img { width: 100%; height: auto; }
.note--create { transition: transform .2s ease; }
.note--create:hover { transform: rotate(-1.5deg) scale(1.02); }

/* status pill on service cards */
.status {
  position: absolute; z-index: 3;
  right: calc(18 * var(--u)); top: calc(30 * var(--u));
  padding: calc(4 * var(--u)) calc(14 * var(--u));
  border: calc(2.5 * var(--u)) solid #d0483f; border-radius: calc(8 * var(--u));
  color: #d0483f; background: rgba(255, 255, 255, .7);
  font-family: var(--f-hand); font-weight: 700; font-size: calc(19 * var(--u));
  letter-spacing: calc(1.5 * var(--u)); text-transform: uppercase;
  transform: rotate(6deg);
}
.status--live { border-color: #1f9d55; color: #1f9d55; top: calc(20 * var(--u)); right: calc(16 * var(--u)); transform: rotate(4deg); }
.status--live::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .4em; border-radius: 50%; background: currentColor; vertical-align: .05em; }
.svc--tbd .svc__face b { font-size: calc(46 * var(--u)); color: #8a93ad; }

/* EzSetGo mini storefront */
.ezs {
  flex: 1; display: flex; flex-direction: column; gap: calc(10 * var(--u));
  margin-top: calc(40 * var(--u));
  border: calc(2 * var(--u)) solid #e6e3ee; border-radius: calc(10 * var(--u));
  background: linear-gradient(180deg, #f7f5fc, #fff);
  padding: 0 0 calc(12 * var(--u)); overflow: hidden;
  font-family: var(--f-sans); color: #121018;
}
.ezs__bar { display: flex; align-items: center; gap: calc(5 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); background: #ece9f4; }
.ezs__bar i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #c8c2d8; }
.ezs__bar em { font-style: normal; font-family: system-ui, sans-serif; font-size: calc(12 * var(--u)); color: #77708a; margin-left: calc(6 * var(--u)); white-space: nowrap; overflow: hidden; }
.ezs__hero { padding: calc(4 * var(--u)) calc(14 * var(--u)) 0; font-weight: 800; font-size: calc(21 * var(--u)); line-height: 1.15; letter-spacing: calc(-.4 * var(--u)); }
.ezs__btn { align-self: flex-start; margin-left: calc(14 * var(--u)); padding: calc(5 * var(--u)) calc(12 * var(--u)); border-radius: 99px; background: #121018; color: #fff; font-size: calc(12 * var(--u)); font-weight: 700; }
.ezs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); padding: calc(2 * var(--u)) calc(14 * var(--u)) 0; flex: 1; }
.ezs__grid i { border-radius: calc(6 * var(--u)); background: #e7e3f1; min-height: calc(40 * var(--u)); }
.ezs__grid i:nth-child(2) { background: #ddeee4; } .ezs__grid i:nth-child(3) { background: #f3e6d8; }

/* ==================================================================
   MOBILE: stack everything into a single readable column
================================================================== */
@media (max-width: 860px) {
  .stage { container-type: normal; width: 100%; padding: 0 16px; }
  .stage--paper, .stage--board { aspect-ratio: auto; height: auto; }
  .stage * { --u: 0.48px; }
  .stage--paper { display: flex; flex-direction: column; align-items: center; padding-top: 24px; padding-bottom: 56px; }
  .abs { position: relative; left: auto; top: auto; }
  .stage .abs[style*="--h"] { height: auto; }
  .stage .tag { height: 60px; }

  .d-plane { order: 1; align-self: flex-end; width: 140px; margin: -4px -6px -40px 0; }
  .d-ideas { order: 1; align-self: flex-start; width: 130px; }
  .d-sparkle, .torn-line, .vline, .d-arrow, .rays { display: none; }

  .title { order: 2; display: flex; justify-content: center; margin: 10px 0 12px; }
  .ltr { position: relative; left: auto; top: auto; font-size: clamp(46px, 13.5vw, 96px); }
  .ltr:nth-child(1), .ltr:nth-child(2), .ltr:nth-child(3), .ltr:nth-child(4) { text-shadow: -4px 4px 0 var(--ink); }
  .l-right { text-shadow: 4px 4px 0 var(--ink); }

  .hero-photo { order: 3; width: min(78vw, 340px); height: auto; aspect-ratio: 399 / 550; padding: 8px; transform: rotate(-1.5deg); }
  .tag { order: 4; width: min(88vw, 400px); height: 60px; margin-top: -26px; }
  .tag span { font-size: clamp(20px, 6vw, 28px); }
  .stage--paper > .doodle[src*="scribble"] { order: 4; width: 150px; margin-top: 4px; }

  .about { order: 5; width: 100%; max-width: 560px; margin-top: 34px; }
  .h-script { font-size: 46px; }
  .h-scrawl { font-size: 44px; }
  .about p { font-size: 20px; max-width: none; margin-left: 0; }
  .about strong { font-size: 23px; }
  .about .quote { font-size: 22px; margin-left: 0; }

  .stack { order: 6; width: 100%; max-width: 560px; margin-top: 40px; }
  .tiles { margin-top: 22px; gap: 14px; }
  .tile { width: 76px; height: 72px; font-size: 34px; border-radius: 12px; }
  .stack__more { font-size: 19px; }
  .stage--paper > .doodle[src*="smiley"] { order: 6; align-self: flex-end; width: 64px; margin-top: -40px; }

  .stage .badge, .stage .badge * { --u: 0.62px; }
  .badge { order: 7; margin: 30px 0 -10px -16px; align-self: flex-start; }

  .exp, .contact { width: 100%; max-width: 560px; margin-top: 40px; }
  .exp { order: 8; } .contact { order: 9; }
  .timeline { margin-top: 26px; }
  .timeline li { font-size: 18px; line-height: 1.4; padding-bottom: 10px; }
  .timeline li + li { padding-top: 10px; }
  .timeline li + li { width: 100%; max-width: 320px; background-size: 14px 6px; }
  .timeline .yr { font-size: 19px; }
  .timeline span:nth-child(n+2) { font-size: 20px; }
  .contact__list { margin-top: 30px; gap: 14px; }
  .contact__list li { font-size: 20px; gap: 18px; height: auto; word-break: break-word; }
  .ic { width: 34px; }
  .ic--gh, .ic--in { width: 30px; height: 30px; margin: 0 2px; font-size: 16px; }

  .torn-edge { min-height: 60px; object-fit: cover; object-position: left top; }
  .stage--board { margin-top: 0; padding-top: 10px; padding-bottom: 40px; display: flex; flex-direction: column; align-items: center; }
  .board__title { width: auto; text-align: center; }
  .board__title h2 { font-size: 36px; }
  .board__title .crown { left: auto; right: -30px; top: -20px; width: 42px; }
  .board__title .underline { width: 260px; margin: -2px auto 0; }
  .num { display: none; }

  .services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 18px; width: 100%; max-width: 560px; margin-top: 34px; }
  .svc { width: auto; }
  .svc--hero { grid-column: 1 / -1; justify-self: center; width: min(62vw, 240px); }
  .svc__card { height: 230px; padding: 9px; }
  .stage .svc--hero, .stage .svc--hero * { --u: 0.78px; }
  .svc--hero .svc__card { height: 330px; }
  .status { font-size: 12px; padding: 2px 8px; top: 18px; right: 10px; border-width: 2px; }
  .svc--hero .status { font-size: 15px; }
  .svc--tbd .svc__face b { font-size: 26px; }
  .svc__face { padding: 16px 12px 18px; }
  .svc__face::before { width: 46px; height: 38px; top: 42%; }
  .svc__face b { font-size: 19px; }
  .svc__face small { font-size: 15px; }
  .tape { width: 80px; height: 24px; top: -12px; }
  .svc__name { white-space: normal; font-size: 19px; margin-top: 16px; background-size: 80% 12px; padding-bottom: 12px; }

  .note--create { width: min(86vw, 360px); align-self: flex-start; margin: 40px 0 0 -16px; }
  .stage--board > .doodle[src*="oval"] { width: 180px; margin: 10px 0; }
  .note--thanks { width: min(80vw, 320px); align-self: flex-end; margin-right: -16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}