/* =================================================================
   SEWOZARCHOU NEOCITIES SITE  —  STYLE.CSS
   =================================================================
   A soft "light lily & lavender" aesthetic with a quilted
   diamond background, scalloped lace borders, little bow
   dividers, dotted frames, and cute fonts.

   Cute CSS tricks borrowed from pochi.crd.co:
     • a custom cute font (Pacifico + Quicksand from Google Fonts)
     • outlined "puffy" headings using -webkit-text-stroke
     • a gentle floating animation on the character art
     • blur + italic hover on links
     • a custom text-selection color
     • organic "blob" border-radius on the example images
     • a pop animation on the social buttons

   HOW TO USE THIS FILE:
   - All the colors live in the ":root" block below. Change a
     color there and it updates everywhere on the site.
   - The lace scallop edges, bow dividers and quilted diamond
     background are made with pure CSS — no images needed, so it
     works great on Neocities.
   - Each section has comments explaining what it does.
   ================================================================= */


/* =================================================================
   1. COLOR SETTINGS  (change these to restyle the whole site!)
   ================================================================= */
:root {
  /* --- Backgrounds (WHITE-forward: near-white with a faint lavender tint) --- */
  --cream:        #ffffff;  /* pure white, the dominant color now       */
  --cream-deep:   #ffffff;  /* panels are pure white                     */
  --panel-tint:   #faf8fe;  /* whisper of lavender for subtle panels     */
  --lily-pink:    #f1dcec;  /* light lily pink (accent)                  */
  --lily-pink-2:  #e6c4d8;  /* a touch deeper pink for borders           */
  --lavender:     #ece5f7;  /* very light lavender accent                */
  --lavender-2:   #c4b5e0;  /* deeper lavender for borders               */
  --lily:         #f7f1fb;  /* pale lily                                 */

  /* --- Text (PURPLE-forward now, not pink) --- */
  --text-main:    #7a6c8c;  /* dusty mauve-purple body text              */
  --text-soft:    #b0a6c2;  /* faded text for notes                      */
  --text-purple:  #8a5fc2;  /* bright purple for headings (was pink)     */
  --text-lav:     #8a72c4;  /* lavender accent for sub-headings          */

  /* --- Cute soft pastel-blue accent (tone #c6dbef) --- */
  --cyan:         #a9c8e8;  /* soft pastel blue for trims & glows        */
  --cyan-soft:    #c6dbef;  /* lighter pale blue for backgrounds         */
  --cyan-text:    #5b8ec2;  /* a bit deeper pastel blue for text on bg   */

  /* --- Lace & borders (kept pastel as TRIMS, not big fills) --- */
  --lace:         #e8d4f2;  /* lavender-tinted scallop lace edge         */
  --dot:          #d4c1e8;  /* dotted border color                       */
  --dash:         #d8c5ec;  /* dashed border color                       */

  /* --- Status --- */
  --status-open:  #8fcf8f;  /* soft green for "open"                     */
  --status-open-bg:#eafaf0; /* pale mint background                      */
  --warn:         #d98aa6;  /* soft rose for DNI warning                 */
  --warn-bg:      #fbeef4;  /* pale rose background                      */

  /* --- Buttons (WHITE) --- */
  --btn-bg:       #ffffff;  /* button background = white                 */
  --btn-edge:     #d8c5ec;  /* button border                             */

  /* --- Quilt background seam colors (faint, on near-white) --- */
  --seam-light:   rgba(255,255,255,0.9);    /* the bright quilt seams   */
  --seam-soft:    rgba(170,145,210,0.16);   /* a soft shadowy seam      */
}


/* =================================================================
   2. GLOBAL RESET & BODY
   ================================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* PURPLE BOW-TIE CURSOR  (from cursors-4u.com)
     A cute little purple bow follows your mouse everywhere!        */
  cursor: url('https://cdn.cursors-4u.net/previews/purple-bow-tie-7f629c52-32.webp') 35 41, auto !important;
}

body {
  /* ---------------------------------------------------------------
     THE QUILTED DIAMOND BACKGROUND  (light purple)
     ---------------------------------------------------------------
     Layered, from back to front:
       1) a soft vertical lavender gradient (the base color)
       2) thin LIGHT seams going up-right  (45deg)
       3) thin LIGHT seams going down-right (-45deg)
       4) thin SOFT shadow seams offset by half a tile,
          so the diamonds look gently puffy / quilted.

     The repeating-linear-gradient at 45° and -45° cross each other
     to draw a repeating diamond grid — like quilted fabric!
     --------------------------------------------------------------- */
  background-color: #ffffff;
  background-image:
    /* (2) light seams at +45deg (these form the diamond grid) */
    repeating-linear-gradient(45deg,
      transparent 0,
      transparent 27px,
      var(--seam-light) 27px,
      var(--seam-light) 29px),

    /* (3) light seams at -45deg (crosses the first set → diamonds) */
    repeating-linear-gradient(-45deg,
      transparent 0,
      transparent 27px,
      var(--seam-light) 27px,
      var(--seam-light) 29px),

    /* (4) soft shadowy seams, offset, for the puffy quilted look */
    repeating-linear-gradient(45deg,
      transparent 0,
      transparent 27px,
      var(--seam-soft) 28px,
      var(--seam-soft) 29px),
    repeating-linear-gradient(-45deg,
      transparent 0,
      transparent 27px,
      var(--seam-soft) 28px,
      var(--seam-soft) 29px),

    /* (1) base gradient at the BOTTOM of the stack — near-white with
       just a whisper of lavender at the edges so it stays light & airy. */
    linear-gradient(180deg,
      #ffffff 0%,
      #fbf9fe 50%,
      #f6f3fb 100%);

  font-family: "Quicksand", "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--text-main);
  line-height: 1.75;

  /* Center everything and cap the width on big screens */
  max-width: 880px;
  margin: 0 auto;
  padding: 10px 18px 60px 18px;
  min-height: 100vh;
}


/* =================================================================
   2b. CUTE FONTS  (loaded from Google Fonts in each HTML file)
   ================================================================= */
/* Headings use "Pacifico" — a soft rounded script font.
   Body text uses "Quicksand" — a soft rounded sans-serif.
   Both are set up in the HTML <head> via a <link> tag.      */


/* =================================================================
   2c. CUSTOM TEXT-SELECTION COLOR  (a cute pochi trick!)
   ================================================================= */
/* When you highlight text on the site, it turns lavender with
   white text instead of the boring default blue.              */
::selection {
  background: var(--lavender-2);
  color: #ffffff;
  text-shadow: none;
}
::-moz-selection {           /* same thing for Firefox */
  background: var(--lavender-2);
  color: #ffffff;
}


/* =================================================================
   3. THE LACE SCALLOP BORDER  (top & bottom decoration)
   ================================================================= */
/* A row of little scalloped semicircles that look like lace trim.
   It uses a repeating radial gradient — no images needed!        */
.lace-top,
.lace-bottom {
  height: 16px;
  background:
    radial-gradient(circle at 50% 100%,
      var(--lace) 0,
      var(--lace) 10px,
      transparent 11px);
  background-size: 22px 16px;
  background-repeat: repeat-x;
  background-position: top center;
  margin: 8px 0;
}
/* The bottom scallops flip upside down */
.lace-bottom {
  background-position: bottom center;
  transform: scaleY(-1);
}


/* =================================================================
   4. THE BOW DIVIDER  (a little bow made of CSS)
   ================================================================= */
/* A decorative row with a tiny bow in the center, used to separate
   sections. The bow is built from two rounded shapes (the loops)
   and a small center knot.                                       */
.bow-divider {
  text-align: center;
  margin: 26px 0 22px 0;
  position: relative;
  height: 28px;
}

/* The dotted line on either side of the bow */
.bow-divider::before,
.bow-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 38%;
  height: 0;
  border-top: 2px dotted var(--dot);
}
.bow-divider::before { left: 2%; }
.bow-divider::after  { right: 2%; }

/* The bow sits in the center, on top of the lines */
.bow {
  display: inline-block;
  position: relative;
  width: 34px;
  height: 26px;
  z-index: 1;
  background: transparent;
}

/* Two loops of the bow (left & right) */
.bow::before,
.bow::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 14px;
  height: 16px;
  background: var(--lily-pink);
  border: 2px solid var(--lily-pink-2);
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
}
.bow::before { left: 0;  transform: rotate(12deg); }
.bow::after  { right: 0; transform: rotate(-12deg); }

/* The center knot of the bow */
.bow-knot {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 13px;
  background: var(--lily-pink-2);
  border-radius: 3px;
  z-index: 2;
}


/* =================================================================
   5. THE HEADER  (character art + site name)
   ================================================================= */
.header {
  text-align: center;
  padding: 14px 0 6px 0;
}

/* The character illustration placeholder.
   It's a circle, and it gently floats up & down — a cute
   animation borrowed from pochi.crd.co (see .float below).       */
.char-art {
  width: 130px;
  max-width: 38vw;
  height: auto;
  border-radius: 0%;            /* circular like the reference */
  border: 0px solid var(--lily-pink-2);
  /* a cute CYAN halo ring around the art */
  box-shadow: 0 0 0 0px var(--cream), 0 0 0 0px var(--cyan), 0 0 0px rgba(169,200,232,0.55);
  background: var(--cream-deep);
  object-fit: cover;
}

/* GENTLE FLOATING ANIMATION  (pochi.crd.co keyframes)
   The art bobs up and down just a few pixels — very subtle.      */
.float {
  animation: floating 4s ease-in-out infinite;
}
@keyframes floating {
  0%   { transform: translate(0, 1px); }
  50%  { transform: translate(0, 8px); }
  100% { transform: translate(0, 1px); }
}

/* The site name in a soft rounded script font ("Pacifico"). */
.site-name {
  font-family: "Pacifico", "Comic Sans MS", cursive;
  font-size: 2.5rem;
  color: var(--text-purple);
  letter-spacing: 1px;
  margin: 12px 0 4px 0;

  /* MULTI-DIRECTION OUTLINE  (an ishimori.crd.co trick!)
     A 1px white outline on ALL four sides of each letter, plus a
     soft lavender drop shadow. Together they make the script
     heading look like a cute puffy sticker — readable on white.   */
  text-shadow:
    -1px 0 0 #ffffff, 0 1px 0 #ffffff,
    1px 0 0 #ffffff,  0 -1px 0 #ffffff,
    2px 2px 0 rgba(196,181,224,0.55);
}

/* A tiny subtitle under the name.
   It gently cycles through pastel lavender shades — a "rainbow
   pulse" effect borrowed from ishimori.crd.co (softened & slowed). */
.site-sub {
  font-size: 0.82rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
  animation: rainbow-pulse 6s linear infinite;
}

/* RAINBOW-PULSE KEYFRAMES  (from ishimori.crd.co, purple set)
   Cycles through soft purple → lilac → lavender → violet → white,
   then loops. Slowed to 6s so it's gentle, not flashing.            */
@keyframes rainbow-pulse {
  0%   { color: #8a5fc2; }   /* bright purple      */
  25%  { color: #9f8fed; }   /* lilac              */
  50%  { color: #b79ce0; }   /* soft lavender      */
  75%  { color: #6f4eb0; }   /* deep violet        */
  100% { color: #8a5fc2; }   /* back to start      */
}


/* =================================================================
   6. NAVIGATION  (dashed-border pill buttons)
   ================================================================= */
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 8px 0;
}

.nav-btn {
  display: inline-block;
  padding: 7px 18px;
  background: var(--btn-bg);
  color: var(--text-purple);
  text-decoration: none;
  font-size: 0.95rem;
  font-family: "Quicksand", "Trebuchet MS", sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 2px dashed var(--btn-edge);
  border-radius: 999px;          /* pill shape */
  transition: all 0.2s ease;
}
.nav-btn:hover {
  background: var(--lavender);
  color: var(--cyan-text);
  border-style: solid;
  border-color: var(--cyan-text);
  transform: translateY(-2px);
  box-shadow: 0 0 8px rgba(169,200,232,0.6);
}
/* The current page button gets a solid lavender accent */
.nav-btn.current {
  background: var(--lavender);
  color: #ffffff;
  border-style: solid;
  border-color: var(--lavender-2);
}


/* =================================================================
   7. CONTENT PANELS  (dotted-border boxes with scalloped tops)
   ================================================================= */
/* Each content section is a soft lavender box with a dotted border
   and a scalloped lace edge along the top (inside the border).   */
.panel {
  background: var(--cream-deep);     /* now pure white */
  border: 2px dotted var(--dot);
  border-radius: 14px;
  padding: 22px 26px 20px 26px;
  margin: 18px 0;
  position: relative;
  box-shadow: 0 3px 12px rgba(170,145,210,0.14);
}

/* The little lace scallop strip sitting inside the top of a panel */
.panel::before {
  content: "";
  display: block;
  height: 12px;
  margin: -8px -10px 14px -10px;
  background:
    radial-gradient(circle at 50% 0%,
      var(--lace) 0,
      var(--lace) 7px,
      transparent 8px);
  background-size: 18px 12px;
  background-repeat: repeat-x;
}

/* Panel headings (h2 inside panels) — cute puffy outlined style.
   White multi-direction outline (ishimori trick) reads great on
   the white panels, with a soft lavender shadow for depth.        */
.panel h2 {
  font-family: "Pacifico", "Comic Sans MS", cursive;
  font-size: 1.5rem;
  color: var(--text-purple);
  text-align: center;
  margin: 6px 0 14px 0;
  font-weight: normal;
  text-shadow:
    -1px 0 0 #ffffff, 0 1px 0 #ffffff,
    1px 0 0 #ffffff,  0 -1px 0 #ffffff,
    2px 2px 0 rgba(196,181,224,0.5);
}
/* A decorative flourish around heading text like "✿ about me ✿".
   The little stars are bright CYAN now for a cute pop of color.    */
.panel h2.flourish::before { content: "✿ "; color: var(--cyan); }
.panel h2.flourish::after  { content: " ✿"; color: var(--cyan); }

/* Sub-headings (h3) */
.panel h3 {
  font-family: "Quicksand", "Trebuchet MS", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-lav);
  margin: 16px 0 6px 0;
  letter-spacing: 0.5px;
}

/* Paragraphs */
.panel p { margin: 8px 0; }
.panel p:first-of-type { margin-top: 0; }


/* =================================================================
   7b. CUTE LINK HOVER  (blur + italic — a pochi trick!)
   ================================================================= */
/* Plain links inside panels get a gentle blur-and-italic effect
   when you hover, like on pochi.crd.co. (It's subtle so it stays
   readable.)                                                       */
.panel a:not(.nav-btn):not(.social-btn) {
  color: var(--text-lav);
  text-decoration: none;
  border-bottom: 1px dotted var(--dot);
  transition: all 0.15s ease;
}
.panel a:not(.nav-btn):not(.social-btn):hover {
  filter: blur(0.6px);
  font-style: italic;
  color: var(--text-purple);
}


/* =================================================================
   8. LISTS  (little flower bullets)
   ================================================================= */
.lily-list {
  list-style: none;
  margin: 8px 0 4px 0;
  padding-left: 6px;
}
.lily-list li {
  padding: 3px 0 3px 24px;
  position: relative;
}
/* A tiny flower bullet drawn with a CSS character — bright cyan! */
.lily-list li::before {
  content: "❀";
  position: absolute;
  left: 2px;
  top: 3px;
  color: var(--cyan);
  font-size: 0.85rem;
}

/* Two-column list layout (Will / Won't Draw) */
.two-col {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.two-col .col {
  flex: 1;
  min-width: 230px;
}


/* =================================================================
   9. STATUS INDICATORS  (COMMS / TRADES / REQUESTS pills)
   ================================================================= */
.status-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 10px 0;
}
.status-item {
  text-align: center;
  min-width: 110px;
}
.status-item .label {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 4px;
}
.status-item .value {
  display: inline-block;
  padding: 3px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: bold;
  border: 2px dotted var(--dot);
  background: var(--cream);
}
/* Open = green */
.status-item .value.open {
  color: #5fae5f;
  border-color: var(--status-open);
  background: var(--status-open-bg);
}
/* Closed = rose */
.status-item .value.closed {
  color: var(--warn);
  border-color: var(--warn);
  background: var(--warn-bg);
}
/* Maybe = lavender */
.status-item .value.maybe {
  color: var(--text-lav);
  border-color: var(--lavender-2);
  background: var(--lavender);
}


/* =================================================================
   10. PRICE TABLES
   ================================================================= */
.price-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 0.95rem;
}
.price-table th,
.price-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px dotted var(--dot);
}
.price-table th {
  color: var(--text-purple);
  font-family: "Pacifico", "Comic Sans MS", cursive;
  font-weight: normal;
  letter-spacing: 1px;
}
.price-table td:last-child { text-align: right; color: var(--text-purple); }
.price-table tr:nth-child(even) td { background: rgba(231,221,247,0.35); }


/* =================================================================
   11. EXAMPLE IMAGE GRID  (placeholder art slots)
   ================================================================= */
.example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 14px 0;
}
.example-card { text-align: center; }

/* ORGANIC "BLOB" BORDER RADIUS  (a cute pochi trick!)
   Instead of a plain square or circle, the image gets a soft
   wobbly organic outline. Combined with a dashed border + soft
   shadow it looks like a cute sticker.                            */
.placeholder-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 2px dashed var(--dash);
  background: var(--panel-tint);   /* near-white with a lavender whisper */
  box-shadow: 0 2px 8px rgba(160,130,190,0.18);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;

  /* a gentle pop animation so the cards feel alive */
  animation: pop 3.5s ease-in-out infinite;
}

.example-label {
  display: block;
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--text-purple);
  font-family: "Pacifico", "Comic Sans MS", cursive;
}
.example-sub {
  display: block;
  font-size: 0.78rem;
  color: var(--text-soft);
}

/* POP ANIMATION  (pochi.crd.co keyframes) — a soft breathing scale */
@keyframes pop {
  from { transform: scale(0.97); }
  50%  { transform: scale(1.00); }
  to   { transform: scale(0.97); }
}


/* =================================================================
   12. STATUS BANNER  (big "OPEN" strip)
   ================================================================= */
.status-banner {
  text-align: center;
  padding: 10px;
  margin: 16px 0;
  background: var(--status-open-bg);
  border: 2px dotted var(--status-open);
  border-radius: 999px;
  color: #5fae5f;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 1.05rem;
  font-family: "Pacifico", "Comic Sans MS", cursive;
}


/* =================================================================
   13. SOCIAL LINKS  (pill buttons in a row)
   ================================================================= */
.socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 12px 0;
}
.social-btn {
  display: inline-block;
  padding: 6px 16px;
  background: var(--btn-bg);
  color: var(--text-purple);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: "Quicksand", "Trebuchet MS", sans-serif;
  border: 2px dashed var(--btn-edge);
  border-radius: 999px;
  transition: all 0.2s ease;
}
/* On hover the button pops gently + turns lavender with a blue glow! */
.social-btn:hover {
  background: var(--lavender);
  color: var(--cyan-text);
  border-color: var(--cyan-text);
  border-style: solid;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 10px rgba(169,200,232,0.5);
}


/* =================================================================
   14. WARNING BOX  (DNI list)
   ================================================================= */
.warn-box {
  background: var(--warn-bg);
  border: 2px dotted var(--warn);
  border-radius: 14px;
  padding: 20px 24px 18px 24px;
  margin: 18px 0;
  position: relative;
  box-shadow: 0 3px 10px rgba(180,110,140,0.14);
}
.warn-box::before {
  content: "";
  display: block;
  height: 12px;
  margin: -8px -10px 14px -10px;
  background:
    radial-gradient(circle at 50% 0%,
      var(--warn) 0,
      var(--warn) 7px,
      transparent 8px);
  background-size: 18px 12px;
  background-repeat: repeat-x;
}
.warn-box h2 {
  color: var(--warn);
  text-align: center;
  font-weight: normal;
  font-family: "Pacifico", "Comic Sans MS", cursive;
  text-shadow:
    -1px 0 0 #ffffff, 0 1px 0 #ffffff,
    1px 0 0 #ffffff,  0 -1px 0 #ffffff,
    2px 2px 0 rgba(190,120,150,0.4);
}


/* =================================================================
   15. FOOTER
   ================================================================= */
.footer {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-soft);
  margin-top: 26px;
  padding-top: 14px;
  border-top: 2px dotted var(--cyan);
}


/* =================================================================
   16. SMALL HELPER CLASSES
   ================================================================= */
.center { text-align: center; }
.note   { color: var(--text-soft); font-size: 0.85rem; font-style: italic; }
.hl     { background: var(--cyan-soft); color: #4a7aa8; border-radius: 4px; padding: 0 5px; font-weight: 600; }
.kao    { font-size: 1.05em; }

/* Circular avatar (for the about page) — floats too! */
.avatar {
  display: block;
  margin: 0 auto 12px auto;
  width: 120px;
  height: 120px;
  border-radius: 0%;
  border: 0px solid var(--lily-pink-2);
  box-shadow: 0 0 0 0px var(--cream), 0 0 0 0px var(--dot);
  background: var(--cream-deep);
  object-fit: cover;
}
.avatar.float {
  animation: floating 4s ease-in-out infinite;
}


/* =================================================================
   17. RESPONSIVE  (looks good on phones too)
   ================================================================= */
@media (max-width: 520px) {
  .site-name { font-size: 2rem; }
  .panel     { padding: 18px 16px; }
  .nav       { gap: 8px; }
  .nav-btn   { padding: 6px 12px; font-size: 0.9rem; }
}