/* =========================================================
   About — "Who is Chaychi" + carpet ornament helper
   ========================================================= */

.carpet-border{
  position: relative;
}
.carpet-strip{
  height: 14px;
  width: 100%;
  background-repeat: repeat-x;
  background-size: 44px 14px;
  opacity: 0.7;
}
.carpet-strip--copper{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='14' viewBox='0 0 44 14'%3E%3Cpath d='M0 7 L7 0 L14 7 L7 14 Z M22 7 L29 0 L36 7 L29 14 Z' fill='%23C9843F'/%3E%3C/svg%3E");
}
.carpet-strip--ink{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='14' viewBox='0 0 44 14'%3E%3Cpath d='M0 7 L7 0 L14 7 L7 14 Z M22 7 L29 0 L36 7 L29 14 Z' fill='%23241A10'/%3E%3C/svg%3E");
}

.about__grid{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.about__statement{
  font-family: var(--f-display);
  font-size: var(--step-3);
  line-height: 1.15;
}
.about__statement em{
  font-style: normal;
  color: var(--pomegranate);
}

.about__body{ margin-top: 1.6rem; }
.about__body p + p{ margin-top: 1rem; }

.table-scene{
  position: relative;
  padding: 2.5rem 1.5rem;
  border-radius: var(--radius-l);
  background:
    radial-gradient(ellipse at 50% 120%, rgba(0,0,0,0.35), transparent 60%),
    var(--bark);
  border: 1px solid var(--line);
  overflow: hidden;
}

.table-scene__cloth{
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%233C2C1D' stroke-width='1'%3E%3Cpath d='M30 2 L52 30 L30 58 L8 30 Z'/%3E%3Ccircle cx='30' cy='30' r='9'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
  opacity: 0.6;
}

.value-grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.value-card{
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1.4rem;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.value-card:hover{ transform: translateY(-4px); border-color: var(--copper-dim); }

.value-card__icon{
  width: 34px; height: 34px;
  color: var(--copper);
  margin-bottom: 0.9rem;
}

.value-card h4{
  font-size: 1.05rem;
  color: var(--cream);
  margin-bottom: 0.35rem;
}
.value-card p{
  font-size: 0.9rem;
  color: var(--sand);
}
.value-card__tag{
  display: block;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: var(--copper);
  opacity: 0.8;
  margin-top: 0.6rem;
}

@media (max-width: 900px){
  .about__grid{ grid-template-columns: 1fr; }
  .value-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .value-grid{ grid-template-columns: 1fr; }
}