/* ============================================================
   Whitebark OÜ — Typewriter / paper aesthetic
   Strategy: mobile-first, fluid via clamp(), one breakpoint at 600px.
   No frameworks. No build step.
   ============================================================ */

/* ---- CSS custom properties --------------------------------- */
:root {
  --paper:    #f4ecd8;   /* cream background */
  --ink:      #2b2419;   /* warm dark, not pure black */
  --ink-faint: #7a6a55;  /* faded ink for secondary text */
  --accent:   #8b3a2a;   /* dried-red for the stamp */

  /* Fluid type scale using clamp(min, preferred, max).
     The preferred value uses vw so it scales between breakpoints.
     Formula: min + (max-min) * (vw - 320px) / (1400px - 320px) */
  --text-xs:  clamp(0.75rem,  1.5vw, 0.875rem);
  --text-sm:  clamp(0.875rem, 2vw,   1rem);
  --text-base:clamp(1rem,     2.5vw, 1.125rem);
  --text-lg:  clamp(1.25rem,  3vw,   1.5rem);
  --text-xl:  clamp(1.75rem,  5vw,   2.75rem);
  --text-2xl: clamp(2.5rem,   7vw,   4rem);

  --measure: 65ch;   /* comfortable reading line length */
  --gap: clamp(2rem, 6vw, 5rem);
}

/* ---- Reset / base ----------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* Paper texture via an SVG noise filter embedded as a data URI.
   The feTurbulence generates fractal noise; feColorMatrix desaturates
   and drops opacity so it reads as a very subtle paper grain. */
body {
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--ink);
  background-color: var(--paper);

  /* Inline SVG noise as data URI — no external image needed */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeBlend in='SourceGraphic' mode='multiply' result='blend'/%3E%3CfeComposite in='blend' in2='SourceGraphic' operator='in'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");

  /* Disable ligatures for mechanical typewriter feel */
  font-feature-settings: "liga" 0, "calt" 0, "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle ink bleed on body text */
p, address, li {
  text-shadow: 0 0 0.3px var(--ink);
}

a {
  color: var(--ink);
  text-underline-offset: 3px;
}

a:hover, a:focus-visible {
  color: var(--accent);
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---- Layout shell ----------------------------------------- */
.site-header,
.section-inner,
.footer-inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* ---- Header ----------------------------------------------- */
.site-header {
  position: relative;
  padding-block: var(--gap);
  border-bottom: 2px solid var(--ink);
  /* extra padding on the inner div is handled above */
}

.header-inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.dateline {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  text-shadow: none;
}

.company-name {
  font-family: 'Special Elite', serif;
  font-size: var(--text-2xl);
  font-weight: normal;
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin-bottom: 1.25rem;
  text-shadow: 1px 1px 0 rgba(43,36,25,0.08);
}

.tagline {
  font-size: var(--text-lg);
  color: var(--ink-faint);
  min-height: 2em; /* reserve space so page doesn't jump */
}

/* ---- Typing animation (CSS only, fires once on load) -------
   Uses steps() to make the cursor advance character by character.
   The ::after pseudo-element is the blinking cursor.
   The animation reveals text by animating max-width from 0 to full. */
.typewriter span {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  /* We animate max-width; the JS fills in the text and sets the width */
  border-right: 2px solid var(--ink);
  animation:
    type-cursor 0.6s step-end infinite,
    type-stop-cursor 0s 3.5s forwards; /* stop blinking after typing done */
}

@keyframes type-cursor {
  0%, 100% { border-color: var(--ink); }
  50%       { border-color: transparent; }
}

@keyframes type-stop-cursor {
  to { border-color: transparent; }
}

/* ---- Stamp (desktop only) ---------------------------------- */
.stamp {
  display: none; /* hidden on mobile */
  position: absolute;
  top: clamp(1.5rem, 4vw, 2.5rem);
  right: clamp(1.5rem, 5vw, 4rem);
  font-family: 'Special Elite', serif;
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  color: var(--accent);
  border: 3px solid var(--accent);
  padding: 0.35em 0.7em;
  border-radius: 3px;
  transform: rotate(8deg);
  opacity: 0.55;
  pointer-events: none;
  /* Double border for stamp look */
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* ---- Sections --------------------------------------------- */
section {
  padding-block: var(--gap);
  border-bottom: 1px solid rgba(43,36,25,0.2);
}

section:last-of-type {
  border-bottom: none;
}

.section-inner {
  position: relative;
}

h2 {
  font-family: 'Special Elite', serif;
  font-size: var(--text-xl);
  font-weight: normal;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  text-shadow: 1px 1px 0 rgba(43,36,25,0.06);
}

p + p {
  margin-top: 1em;
}

/* ---- Margin note (desktop only) ----------------------------
   Positioned in the left margin outside the content column.
   Using negative margin-left to escape the centered container. */
.margin-note {
  display: none;
}

/* ---- Contact section -------------------------------------- */
address {
  font-style: normal;
  margin-top: 1.25rem;
  line-height: 2;
}

.contact-link {
  font-size: var(--text-lg);
  font-weight: 700;
  display: inline-block;
  min-height: 44px;       /* minimum touch target */
  line-height: 44px;
}

.location {
  color: var(--ink-faint);
  font-size: var(--text-sm);
}

/* ---- Footer ----------------------------------------------- */
.site-footer {
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 2px solid var(--ink);
}

.footer-inner {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  text-shadow: none;
}

/* ============================================================
   DESKTOP ENHANCEMENTS — 600px+
   Drop these rules and the site still works fine on mobile.
   ============================================================ */
@media (min-width: 600px) {

  /* Show the stamp in the header corner */
  .stamp {
    display: block;
  }

  /* Show the margin annotation beside the "What we do" section.
     We pull it out of flow using absolute positioning and place it
     to the left of the section-inner container. */
  .margin-note {
    display: block;
    position: absolute;
    left: calc(-1 * clamp(2rem, 6vw, 4rem));
    top: 0.25rem;
    font-size: var(--text-xs);
    color: var(--ink-faint);
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: top left;
    white-space: nowrap;
    letter-spacing: 0.15em;
    font-family: 'Special Elite', serif;
  }

  /* Slight tilt on "what we do" section to add life on desktop */
  .section-what .section-inner {
    transform: rotate(-0.3deg);
    transform-origin: center top;
  }
}