/* Soapberry Creative — webfonts.
   Classical Romance (display), Newsreader (body), Archivo (labels). */
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/newsreader-italic-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/newsreader-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/newsreader-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/newsreader-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
  font-family: "Classical Romance";
  src: url("../fonts/classical-romance.ttf") format("truetype");
  font-weight: 700;
}

/* Soapberry Creative — color tokens.
   Monochrome, plus ONE accent used in tiny doses: arrows, counters,
   separators, selection. Never for backgrounds, buttons, or headlines. */
:root {
  /* Base ink scale */
  --ink-950: #111110;
  --ink-900: #1a1a19;
  --ink-800: #2b2b2a;
  --ink-700: #404040;
  --ink-600: #5c5c5a;
  --ink-500: #757573;
  --ink-400: #949492;
  --ink-300: #b9b9b6;
  --ink-200: #d8d8d4;
  --ink-100: #eaeae6;
  --ink-050: #f4f4f1;
  --white: #ffffff;

  /* Accent — "soapberry" persimmon. Tiny doses only. */
  --accent: #e8501a;

  /* Semantic — light surfaces */
  --surface-page: var(--white);
  --surface-alt: var(--ink-050);
  --surface-inverse: var(--ink-950);
  --surface-card: var(--white);

  --text-display: var(--ink-950);
  --text-body: var(--ink-800);
  --text-muted: var(--ink-500);
  --text-inverse: var(--white);
  --text-inverse-muted: var(--ink-400);

  --border-hairline: rgba(17, 17, 16, 0.14);
  --border-strong: var(--ink-950);
  --border-inverse: rgba(255, 255, 255, 0.22);

  /* Interactive */
  --btn-bg: var(--ink-950);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--ink-800);

  /* Media placeholder gradient stops (grayscale, cinematic) */
  --media-g1: #3a3a38;
  --media-g2: #191918;
  --media-g3: #6b6b68;
}

/* Soapberry Creative — typography tokens.
   Fully editorial: serif display + serif body, grotesque only for micro labels. */
:root {
  --font-display: "Classical Romance", "Playfair Display", Georgia, serif;
  --font-body: "Newsreader", Georgia, "Times New Roman", serif;
  --font-label: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Scale */
  --text-hero: clamp(3.5rem, 9vw, 8.5rem);      /* 56–136px, Abril */
  --text-display: clamp(2.75rem, 5.5vw, 5rem);  /* 44–80px, Abril */
  --text-h2: clamp(2rem, 3.5vw, 3.25rem);       /* 32–52px, Abril */
  --text-h3: 1.75rem;                            /* 28px, Newsreader 500 */
  --text-lead: 1.375rem;                         /* 22px, Newsreader */
  --text-body: 1.125rem;                         /* 18px, Newsreader */
  --text-small: 0.9375rem;                       /* 15px */
  --text-label: 0.75rem;                         /* 12px, Archivo caps */

  /* Leading */
  --leading-display: 0.98;
  --leading-tight: 1.15;
  --leading-body: 1.55;

  /* Tracking */
  --tracking-display: -0.01em;
  --tracking-label: 0.18em;
}

/* Soapberry Creative — spacing, radii, borders, shadows, layout. */
:root {
  /* Spacing scale (4-base) */
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */
  --space-section: clamp(5rem, 10vw, 10rem);

  /* Radii — sharp, editorial. Pills only for buttons/tags. */
  --radius-none: 0;
  --radius-pill: 999px;

  /* Borders */
  --border-w: 1px;

  /* Shadows — the brand avoids drop shadows; depth comes from ink contrast. */
  --shadow-none: none;

  /* Layout */
  --container-max: 90rem;      /* 1440 */
  --container-pad: clamp(1.25rem, 4vw, 4rem);
  --grid-gap: clamp(1rem, 2vw, 2rem);
}

/* Soapberry Creative — motion tokens.
   Motion is a core brand trait: long expressive ease-outs, reveals from below,
   slow parallax drift. Nothing bounces; nothing is instant. */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ /* expo-out — default */
  --ease-inout: cubic-bezier(0.83, 0, 0.17, 1); /* @kind other */ /* for masks/wipes */
  --duration-fast: 250ms; /* @kind other */
  --duration-base: 600ms; /* @kind other */
  --duration-slow: 1000ms; /* @kind other */
  --duration-reveal: 1200ms; /* @kind other */
  --reveal-distance: 48px;
  --parallax-drift: 12%;
}

/* Soapberry Creative — minimal base element styles. */
:root { color-scheme: light; }

::selection { background: var(--accent); color: var(--white); }

.sb-body,
body.sb {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sb-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-display);
  margin: 0;
}

/* "Classical Romance" auto-swaps word-final e/l for a swash alternate via
   its contextual-alternates (calt) OpenType feature. Disable that so
   headlines render the plain letterforms instead. */
h1, h2, h3, .sb-display {
  font-feature-settings: "calt" 0;
  font-variant-ligatures: none;
}

.sb-label {
  white-space: nowrap;
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Cinematic monochrome media placeholder surface */
.sb-media {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, var(--media-g3) 0%, transparent 55%),
    radial-gradient(100% 120% at 85% 90%, var(--media-g1) 0%, transparent 60%),
    linear-gradient(160deg, var(--media-g1) 0%, var(--media-g2) 100%);
}
.sb-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSIyIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjE2MCIgaGVpZ2h0PSIxNjAiIGZpbHRlcj0idXJsKCNuKSIgb3BhY2l0eT0iMC41Ii8+PC9zdmc+");
  opacity: 0.14;
  mix-blend-mode: overlay;
  pointer-events: none;
}



  html { scroll-behavior: auto; }
  body { margin: 0; }
  @media (max-width: 900px) {
    main [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  }