/* ==========================================================================
   Hadiya - static design system

   The hand-drawn visual vocabulary: wobbly borders, tape, thumbtacks, hard
   shadows, scribble underlines. Shared by index.html and about.html, which is
   why it lives here rather than inline - a border tweak has to land on every
   page at once.

   Movement is NOT here. That is assets/css/animations.css, which also owns
   every initial hidden state. Never hide an element from this file: anything
   hidden outside the html.js-anim scope stays hidden when JS fails.
   ========================================================================== */

body {
  background-color: #fdfbf7;
  background-image: radial-gradient(#e5e0d8 1px, transparent 1px);
  background-size: 24px 24px;
  color: #2d2d2d;
  overflow-x: hidden;
}

/* --- Ruled notebook page -------------------------------------------------
   The about page hero. The dot grid is the home page's texture, so this is
   deliberately a different sheet of paper: exercise-book rules with the red
   margin line down the left.

   The rule spacing is a custom property, and .ruled owns its own vertical
   padding, so text set to `line-height: var(--rule)` lands one line per band
   with the rule sitting under it. Set the line-height with a matching
   Tailwind `leading-[44px] md:leading-[66px]` or the text drifts off the
   lines. Horizontal padding is left to Tailwind. */
.ruled {
  --rule: 44px;
  padding-top: var(--rule);
  padding-bottom: var(--rule);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--rule) - 1px),
    #dbe4f0 calc(var(--rule) - 1px),
    #dbe4f0 var(--rule)
  );
  background-origin: padding-box;
  background-position: 0 0;
}

.ruled-margin::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.5rem;
  width: 2px;
  background-color: rgba(255, 77, 77, 0.4);
}

@media (min-width: 768px) {
  .ruled {
    --rule: 66px;
  }

  .ruled-margin::before {
    left: 3rem;
  }
}
.wobbly {
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important;
  border: 3px solid #2d2d2d;
}
.wobbly-alt {
  border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px !important;
  border: 3px solid #2d2d2d;
}
.wobbly-input {
  border-radius: 20px 255px 15px 225px / 255px 15px 225px 15px !important;
  border: 2px solid #2d2d2d;
}
.shadow-hard {
  box-shadow: 4px 4px 0px 0px #2d2d2d !important;
  transition: all 0.1s ease-in-out;
}
.shadow-hard:active,
.btn-press:active {
  box-shadow: 0px 0px 0px 0px #2d2d2d !important;
  transform: translate(4px, 4px) !important;
}
.tape {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 80px;
  height: 24px;
  background-color: rgba(230, 230, 230, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 10;
}
.tape-corner {
  position: absolute;
  top: -10px;
  right: -10px;
  transform: rotate(45deg);
  width: 60px;
  height: 20px;
  background-color: rgba(230, 230, 230, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 10;
}
.thumbtack {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #ff4d4d;
  border: 2px solid #2d2d2d;
  z-index: 10;
}
.scribble-underline {
  position: relative;
  display: inline-block;
}
.scribble-underline::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 8px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M 0 5 Q 25 0 50 5 T 100 5" stroke="%232d2d2d" stroke-width="2" fill="none"/></svg>')
    no-repeat center/cover;
}
.dashed-arrow {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%) rotate(15deg);
  width: 60px;
  height: 60px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M 10 10 Q 50 90 90 90 M 70 70 L 90 90 L 90 70" stroke="%232d2d2d" stroke-width="4" stroke-dasharray="8,4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    no-repeat center/contain;
}

/* --- Service sketches: strokes draw themselves when scrolled into view --- */
.sketch svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
/* Dash values are applied inline by JS, so a sketch with no JS - or one
   shown under reduced motion - keeps the dashes its own markup declares. */
.sketch.is-drawn [data-draw] {
  stroke-dashoffset: 0 !important;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--delay, 0ms);
}

/* --- Nav logo ---
   assets/images/logo.png is a pure white wordmark drawn for the old
   dark theme, so it is invisible on paper. invert(0.82) maps its white
   to #2e2e2e, close enough to pencil-black that no second colour
   version of the file is needed. Drop the filter if the asset is ever
   replaced with a dark one. */
.nav-logo {
  filter: invert(0.82);
}

/* --- Margin annotation: a note pinned in the gutter with an arrow --- */
.margin-note {
  font-size: 1rem;
  line-height: 1.3;
  transform: rotate(-4deg);
}

/* --- Brief checkboxes: hand-ticked boxes instead of browser defaults --- */
.brief-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.brief-check span {
  position: relative;
  padding-left: 2.25rem;
  display: inline-block;
  cursor: pointer;
}
.brief-check span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid #2d2d2d;
  border-radius: 20px 255px 15px 225px / 255px 15px 225px 15px;
  background: #fdfbf7;
}
.brief-check span::after {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.1em;
  width: 1.35rem;
  height: 1.35rem;
  opacity: 0;
  transform: scale(0.5) rotate(-12deg);
  transition: all 0.15s ease-out;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 3 13 Q 8 15 10 20 Q 14 8 22 2" stroke="%23ff4d4d" stroke-width="3.5" fill="none" stroke-linecap="round"/></svg>')
    no-repeat center/contain;
}
.brief-check input:checked + span::after {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.brief-check input:focus-visible + span::before {
  outline: 3px solid #ff4d4d;
  outline-offset: 3px;
}

/* --- Accessibility floor --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #ff4d4d;
  outline-offset: 3px;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.75rem 1.25rem;
  background: #fff9c4;
  border: 3px solid #2d2d2d;
}
@media (prefers-reduced-motion: reduce) {
  .sketch.is-drawn [data-draw] {
    transition: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}