:root {
  color-scheme:light;
  --paper:#faf8f3;
  --ink:#232724;
  --line:#cdcfc4;
  --accent:#31554c;
  --tint:#e3ecdf;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper)
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

.cherry {
  --accent:#793247;
  --tint:#f3dee4
}

.print-textile {
  --accent:#294f77;
  --tint:#d7e7f6
}

.shopcherrypie {
  --accent:#604274;
  --tint:#ede0f0
}

.wrap {
  max-width:1040px;
  margin:auto;
  padding:0 6% 72px
}

header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:27px 0 23px;
  border-bottom:1px solid var(--line)
}

a {
  color:inherit
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-size:clamp(18px,2.2vw,23px);
  font-weight:680;
  letter-spacing:-.035em
}

.mark {
  min-width:46px;
  height:43px;
  padding:0 7px;
  display:grid;
  place-items:center;
  color:var(--paper);
  background:var(--accent);
  border-radius:2px 10px 2px 2px;
  font:700 23px Georgia,serif;
  letter-spacing:-.07em
}

.purpose {
  font-size:14px;
  color:#565d54
}

.intro {
  display:grid;
  grid-template-columns:1fr .72fr;
  gap:clamp(30px,5vw,70px);
  align-items:center;
  margin:clamp(42px,7vw,86px) 0 clamp(34px,5vw,58px)
}

h1 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.055em;
  margin:0;
  font-size:clamp(44px,6.7vw,78px);
  overflow-wrap:break-word
}

p {
  font-size:clamp(17px,1.7vw,20px);
  line-height:1.5;
  color:#495047;
  margin:20px 0 0
}

.art,.photo {
  width:100%;
  height:clamp(175px,22vw,244px);
  border-radius:3px
}

.photo {
  object-fit:cover
}

.art {
  overflow:hidden;
  position:relative;
  display:grid;
  place-items:center;
  background:var(--tint);
  color:var(--accent)
}

.art i,.art i:before,.art i:after {
  position:absolute;
  width:74%;
  height:150%;
  border:1px solid currentColor;
  content:"";
  transform:rotate(-16deg)
}

.art i {
  left:31%;
  top:-17%
}

.art i:before {
  inset:7% 0 0 -10%;
  transform:none;
  width:100%;
  height:100%
}

.art i:after {
  inset:14% 0 0 -20%;
  transform:none;
  width:100%;
  height:100%
}

.art b {
  font:italic 700 clamp(88px,10vw,145px)/1 Georgia,serif;
  letter-spacing:-.09em;
  position:relative
}

.choices {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-block:1px solid var(--line)
}

.choice {
  display:flex;
  align-items:center;
  gap:12px;
  padding:26px 15px;
  text-decoration:none;
  font-size:clamp(18px,2.3vw,26px);
  font-weight:600;
  min-height:76px
}

.choice+.choice {
  border-left:1px solid var(--line)
}

.choice:hover,.choice:focus-visible {
  background:var(--tint)
}

.arrow {
  margin-left:auto;
  font-size:20px;
  font-weight:400
}

.dot {
  display:inline-block;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--tone);
  flex:none
}

.great {
  --tone:#3b7163
}

.average {
  --tone:#ac702d
}

.bad {
  --tone:#ad4a48
}

.back,.secondary {
  display:inline-block;
  padding:12px 0;
  font-size:15px;
  text-underline-offset:4px
}

.back {
  margin-top:24px;
  text-decoration:none
}

.panel {
  max-width:660px;
  margin:24px auto 0
}

.panel h1 {
  font-size:clamp(40px,5.7vw,68px)
}

.selected {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  margin:0 0 15px
}

.selected .dot {
  width:10px;
  height:10px
}

.panel form {
  margin-top:28px
}

.panel label {
  display:block;
  margin:20px 0 8px;
  font-size:16px;
  font-weight:600
}

.panel small {
  font-weight:400;
  color:#586055;
  margin-left:5px
}

.panel input:not([type=hidden]),textarea {
  width:100%;
  padding:12px 14px;
  border:1px solid #969e92;
  border-radius:4px;
  background:#fffdf9;
  color:var(--ink);
  font:inherit;
  font-size:16px
}

.panel textarea {
  resize:vertical;
  min-height:104px
}

.trap {
  display:none
}

.button {
  width:fit-content;
  display:flex;
  align-items:center;
  gap:20px;
  background:var(--accent);
  color:white;
  text-decoration:none;
  padding:14px 22px;
  border:0;
  border-radius:4px;
  margin-top:24px;
  cursor:pointer;
  font:600 16px/1.4 Inter,"Segoe UI",Arial,sans-serif
}

.button:hover {
  filter:brightness(.9)
}

.secondary {
  margin-top:9px
}

.error {
  background:#f6e1de;
  color:#763732;
  padding:12px 16px;
  border-radius:3px;
  font-size:16px
}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid #326cc5;
  outline-offset:3px
}

@media(max-width:640px) {
  .wrap {
    padding:0 20px 32px
  }
  header {
    padding:17px 0
  }
  .purpose {
    font-size:12px
  }
  .mark {
    min-width:36px;
    height:35px;
    font-size:20px
  }
  .brand {
    gap:8px
  }
  .intro {
    grid-template-columns:1fr;
    gap:20px;
    margin:31px 0 22px
  }
  .art,.photo {
    height:140px
  }
  .art b {
    font-size:90px
  }
  .choices {
    display:block
  }
  .choice {
    min-height:56px;
    padding:15px 7px
  }
  .choice+.choice {
    border-left:0;
    border-top:1px solid var(--line)
  }
  .back {
    margin-top:10px
  }
  .panel {
    margin-top:16px
  }
  .panel form {
    margin-top:22px
  }
  .button {
    max-width:100%
  }
}

@media(max-width:360px) {
  .wrap {
    padding-inline:14px
  }
  .purpose {
    font-size:11px
  }
}