@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Serif+Display:ital@0;1&display=swap');

:root { --ink: #17393b; --cream: #fff9e9; --coral: #ff634d; --yellow: #ffcb49; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: "DM Sans", sans-serif; }
main { min-height: 100svh; overflow: hidden; position: relative; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--coral); outline-offset: 6px; }
.sun { position: absolute; right: -14vw; top: -19vw; width: 42vw; height: 42vw; border-radius: 50%; background: var(--yellow); }
nav { width: min(1240px, 100%); margin: 0 auto; padding: 27px 34px; position: relative; }
.logo { font-size: 29px; font-weight: 700; letter-spacing: -2px; }
.logo span, h1 i { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-style: italic; }
.hero { width: min(1160px, calc(100% - 68px)); margin: auto; padding: 60px 0 90px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; align-items: center; position: relative; }
.eyebrow { font: 10px/1.8 "DM Mono", monospace; letter-spacing: 1.2px; }
.eyebrow b { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--coral); }
h1 { font-size: clamp(70px, 8.2vw, 116px); font-weight: 500; line-height: .9; letter-spacing: -6px; margin: 25px 0 30px; }
.lede { font-size: 15px; line-height: 1.7; }
footer { padding: 32px max(7vw, 24px); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--ink); color: var(--cream); }
footer p { font: italic 20px "DM Serif Display", Georgia, serif; margin: 0; }
footer small { font: 10px "DM Mono", monospace; }
.skip { position: fixed; top: 10px; left: 10px; z-index: 10; background: var(--cream); padding: 15px; transform: translateY(-160%); }
.skip:focus { transform: translateY(0); }

/* Six anonymous members of the crabby crew. */
.family-art{position:relative;padding:40px 0}.family-sticker{background:#fffdf6;border:3px solid var(--ink);border-radius:48% 48% 35% 35% / 25% 25% 20% 20%;padding:48px 22px 32px;box-shadow:0 0 0 9px #fffdf6,0 0 0 11px var(--ink),12px 20px 0 10px #17393b16;transform:rotate(4deg);text-align:center}.sticker-top{font:700 17px "DM Sans",sans-serif;letter-spacing:2px;margin:0 0 45px}.sticker-bottom{font:italic 20px "DM Serif Display",Georgia,serif;margin:30px 0 0}.sticker-note{text-align:right;font:italic 19px "DM Serif Display",Georgia,serif;transform:rotate(-6deg);margin-top:32px}.crab-family{display:flex;align-items:end;justify-content:center;gap:18px;height:126px}.member{--shell:var(--coral);--size:64px;flex:0 0 var(--size);position:relative}.little-crab{height:calc(var(--size)*.68);width:var(--size);border-radius:48% 48% 42% 42%;background:var(--shell);position:relative;margin-bottom:21px}.member>span{font:9px "DM Mono",monospace;white-space:nowrap}.little-crab:before,.little-crab:after{content:"";position:absolute;width:25%;height:30%;bottom:-10%;border-top:3px solid var(--shell);border-bottom:3px solid var(--shell)}.little-crab:before{left:-13%;transform:rotate(-25deg)}.little-crab:after{right:-13%;transform:rotate(25deg)}.claw{position:absolute;top:-8%;width:26%;height:52%;border:6px solid var(--shell);border-top-color:transparent;border-radius:50%}.claw.left{left:-26%;transform:rotate(-32deg)}.claw.right{right:-26%;transform:rotate(32deg)}.stalk{position:absolute;top:-22%;height:35%;width:5px;background:var(--shell);border-radius:9px}.stalk:before{content:"";position:absolute;top:-3px;left:-1px;width:7px;height:7px;background:var(--ink);border-radius:50%}.stalk.left{left:28%}.stalk.right{right:28%}.smile{position:absolute;left:38%;top:40%;width:24%;height:23%;border:2px solid var(--ink);border-top:0;border-radius:0 0 20px 20px}.mom{--shell:#de655c;--size:61px}.sister{--shell:#e29e21;--size:49px}.brother{--shell:#369fa8;--size:42px}.baby{--shell:#ef907c;--size:30px}.dog{--shell:#aa754c;--size:43px}.pacifier{position:absolute;width:11px;height:7px;border-radius:50%;background:var(--cream);left:32%;top:40%}.pacifier:after{content:"";position:absolute;border:2px solid var(--ink);border-radius:50%;width:5px;height:5px;left:1px;top:2px}.dog .stalk{height:65%;width:12px;top:-8%;border-radius:50%;background:#79543a}.dog .stalk.left{left:-3%;transform:rotate(20deg)}.dog .stalk.right{right:-3%;transform:rotate(-20deg)}.dog .stalk:before{top:4px;width:4px;height:4px}.dog .stalk.left:before{left:15px}.dog .stalk.right:before{left:-7px}.dog-nose{position:absolute;left:43%;top:35%;width:7px;height:5px;background:var(--ink);border-radius:50%}.tongue{position:absolute;left:46%;top:58%;width:7px;height:10px;background:#faafa0;border-radius:0 0 6px 6px}
/* Allow for the claws outside each shell, plus room for the kids' gear. */
.baby-pacifier { position: absolute; width: 22px; height: auto; left: 50%; top: 28%; transform: translateX(-50%); z-index: 3; }
.crab-family { gap: 44px; }
.dad { --size: 60px; }
.mom { --size: 57px; }
.little-crab { margin-bottom: 36px; }
.ice-skates { position: absolute; width: 112%; height: auto; left: -6%; top: 87%; z-index: 2; }
.soccer-ball { position: absolute; width: 31px; height: 31px; right: -15px; top: 65%; z-index: 2; transform: rotate(12deg); }
@media (min-width: 761px) and (max-width: 1200px) {
  .hero { grid-template-columns: 1fr; max-width: 650px; padding-top: 35px; }
  .family-art { max-width: 580px; width: 100%; justify-self: center; }
}
@media (max-width: 760px) {
  .sun { width: 80vw; height: 80vw; right: -32vw; top: -28vw; }
  nav { padding: 20px 23px; }
  .hero { width: calc(100% - 46px); grid-template-columns: 1fr; gap: 15px; padding: 40px 0; }
  h1 { font-size: clamp(64px, 13vw, 96px); letter-spacing: -4px; }
  .eyebrow { font-size: 9px; }
  footer { flex-wrap: wrap; padding: 28px 24px; }
  footer .logo { display: none; }
  footer p { font-size: 18px; }
.family-art{width:min(100%,470px);justify-self:center;padding:35px 12px 0}.family-sticker{padding:35px 12px 25px}.sticker-top{font-size:12px;letter-spacing:1.5px;margin-bottom:28px}.crab-family{gap:12px;height:90px}.member{--size:46px}.mom{--size:44px}.sister{--size:35px}.brother{--size:30px}.baby{--size:23px}.dog{--size:32px}.claw{border-width:4px}.member>span{font-size:7px}.sticker-bottom{font-size:16px;margin-top:22px}.sticker-note{font-size:17px}
}
@media(max-width:370px){nav{padding:20px 18px}.logo{font-size:25px}.pill{font-size:10px}.crab-family{gap:10px}.member{--size:37px}.mom{--size:36px}.sister{--size:30px}.brother{--size:26px}.baby{--size:20px}.dog{--size:27px}.sticker-bottom{font-size:14px}.sticker-top{font-size:10px}}

@media (max-width: 760px) {
  .crab-family { display: grid; grid-template-columns: repeat(3, 1fr); height: auto; gap: 35px 14px; padding: 16px 7px 0; }
  .member { --size: 46px; width: var(--size); justify-self: center; }
  .mom { --size: 44px; }
  .sister { --size: 40px; }
  .brother { --size: 36px; }
  .baby { --size: 26px; }
  .dog { --size: 35px; }
  .member > span { font-size: 8px; }
  .soccer-ball { width: 28px; height: 28px; right: -12px; }
}
@media (max-width: 370px) {
  .dad { --size: 40px; }
  .mom { --size: 38px; }
  .sister { --size: 36px; }
}