/*
Theme Name: Magnolia Tattoo
Theme URI: https://github.com/medeldomingo/magnolia-tattoo
Author: Magnolia Tattoo
Description: A full-width one-page theme for a solo tattoo artist. An animated hero row, an Instagram gallery pinned up as taped polaroids, and a booking section that renders through Fluent Forms. Light "atelier grey-paper" palette, self-hosted fonts, and no JavaScript library or CDN call of any kind.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: magnolia-tattoo
Tags: one-column, full-width-template, custom-colors, custom-logo, custom-menu, featured-images, translation-ready

Bundled, GPL-compatible:
  Instrument Serif, Inter, Caveat — SIL OFL 1.1 (assets/fonts/*-LICENSE.txt)
*/

@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif-latin-400-normal.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif-latin-400-italic.woff2")
    format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("assets/fonts/caveat-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Magnolia Tattoo — design tokens
   Atelier grey-paper. Committed light: one visual world, not a mode.
   The neutral carries a cool grey-green bias rather than a warm cream
   one, which is what keeps it out of the usual paper-and-serif register.
   Cards sit LIGHTER than the ground so paper lifts off the page.
   ============================================================ */
:root {
  --paper: #f1f0ec; /* page ground */
  --paper-2: #e7e5df; /* recessed: pills, fields, icon chips */
  --card: #fcfbf8; /* polaroids + paper cards */
  --rule: #dad7ce; /* hairlines, borders, dashed rules */
  --ink: #16150f; /* primary text */
  --ink-2: #4a473e; /* secondary text */
  --ink-3: #6e695d; /* labels, tertiary, icons — 4.79:1 on --paper */
  --ink-hover: #2e2c22; /* solid button hover */
  --sticky: #e8e2a0; /* sticky note */
  --pin: #7e2417; /* oxblood — pushpins, focus ring, small accents */
  --tape: rgba(196, 186, 160, 0.55);

  /* Shadows are shallow and warm-neutral. Heavy black shadow is the
     first thing that reads as wrong once the ground goes light. */
  --lift: 0 10px 26px rgba(40, 36, 28, 0.13), 0 2px 5px rgba(40, 36, 28, 0.09);
  --lift-lg:
    0 20px 46px rgba(40, 36, 28, 0.17), 0 3px 8px rgba(40, 36, 28, 0.1);

  --frame: clamp(12px, 1.2vw, 18px); /* polaroid border */

  --f-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-hand: "Caveat", "Bradley Hand", cursive;

  --step-xl: clamp(2.75rem, 7.2vw, 5.25rem);
  --step-l: clamp(2rem, 4.4vw, 3.4rem);
  --step-m: clamp(1.5rem, 2.6vw, 2.1rem);
  --label: 0.7rem;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --bay: clamp(4.5rem, 11vw, 9rem); /* vertical rhythm between sections */
  --wrap: 1180px;
  --radius: 14px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
}
img,
canvas {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--pin);
  outline-offset: 3px;
  border-radius: 4px;
}

/* film grain — one fixed layer over the whole page */
.mt-grain {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.15;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mt-wrap {
  width: min(var(--wrap), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.mt-section {
  padding-block: var(--bay);
  position: relative;
}

/* ---------- shared type ---------- */
.mt-eyebrow {
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.mt-h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--step-l);
  line-height: 1.02;
  margin: 0.5rem 0 0;
  text-wrap: balance;
  letter-spacing: -0.01em;
}
.mt-lede {
  color: var(--ink-2);
  max-width: 46ch;
  margin: 1rem 0 0;
}
.mt-head {
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.mt-head--center {
  text-align: center;
}
.mt-head--center .mt-lede {
  margin-inline: auto;
}

/* ---------- buttons ---------- */
.mt-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.25s,
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.mt-btn--solid {
  background: var(--ink);
  color: var(--paper);
}
.mt-btn--solid:hover {
  transform: translateY(-2px);
  background: var(--ink-hover);
}
.mt-btn--ghost {
  border-color: var(--rule);
  color: var(--ink);
}
.mt-btn--ghost:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* ---------- paper primitives (tape / polaroid / sticky) ---------- */
.mt-tape {
  position: absolute;
  width: 86px;
  height: 26px;
  background: var(--tape);
  backdrop-filter: blur(1px);
  box-shadow: 0 1px 3px rgba(40, 36, 28, 0.18);
  /* torn ends */
  clip-path: polygon(
    0 12%,
    4% 0,
    96% 4%,
    100% 16%,
    99% 88%,
    95% 100%,
    5% 96%,
    1% 84%
  );
  z-index: 3;
}
.mt-tape::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.05) 0 2px,
    transparent 2px 5px
  );
}

.mt-polaroid {
  position: relative;
  background: var(--card);
  padding: var(--frame) var(--frame) 0;
  box-shadow: var(--lift);
  transition:
    transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 0.4s;
  will-change: transform;
}
.mt-polaroid__img {
  aspect-ratio: 1;
  width: 100%;
  background: var(--paper-2);
  object-fit: cover;
  max-height: 300px;
}
.mt-polaroid__cap {
  font-family: var(--f-hand);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ink);
  padding: 0.7rem 0.2rem 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.mt-polaroid__cap span:last-child {
  font-size: 0.95rem;
  opacity: 0.6;
}

.mt-sticky {
  background: var(--sticky);
  color: #3b380f;
  font-family: var(--f-hand);
  font-size: 1.2rem;
  line-height: 1.25;
  padding: 1rem 1.05rem 1.3rem;
  width: 162px;
  box-shadow: var(--lift);
  /* peeled bottom-right corner */
  clip-path: polygon(0 0, 100% 0, 100% 82%, 82% 100%, 0 100%);
}

/* ============================================================
   Nav
   ============================================================ */
.mt-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem var(--gutter);
  transition:
    background 0.35s,
    backdrop-filter 0.35s,
    border-color 0.35s;
  border-bottom: 1px solid transparent;
}
.mt-nav[data-stuck="true"] {
  background: rgba(241, 240, 236, 0.88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--rule);
}
.mt-nav__brand {
  font-family: var(--f-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  margin-inline-end: auto;
}
.custom-logo-link {
  max-width: 25px;
  display: inline-block;
}
@media (min-width: 576px) {
  .custom-logo-link {
    max-width: 60px;
  }
}
.custom-logo-link img {
  height: auto;
}
.mt-nav__links {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mt-nav__links a {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-3);
  transition: color 0.2s;
  position: relative;
}
.mt-nav__links a:hover,
.mt-nav__links a[aria-current="true"] {
  color: var(--ink);
}
.mt-nav__links a[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset-block-end: -6px;
  inset-inline: 0;
  height: 1px;
  background: var(--pin);
}
.mt-nav .mt-btn {
  padding: 0.6rem 1.15rem;
  font-size: 0.5rem;
}
@media (min-width: 425px) {
  .mt-nav .mt-btn {
    font-size: 0.78rem;
  }
}
@media (max-width: 860px) {
  .mt-nav__links {
    display: none;
  }
}

/* ============================================================
   Hero
   ============================================================ */
.mt-hero {
  --fan-step: 0.55s;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 6rem 2rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.mt-hero::before {
  /* smoke wash behind the fan */
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: 38%;
  inset-inline: -10%;
  height: 70%;
  background: radial-gradient(
    60% 55% at 50% 40%,
    rgba(120, 112, 96, 0.14),
    transparent 70%
  );
  filter: blur(30px);
}
.mt-hero__copy {
  text-align: center;
  max-width: min(760px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.mt-hero__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--step-xl);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 1rem 0 0;
  text-wrap: balance;
}
.mt-hero__title em {
  font-style: italic;
  color: var(--ink-2);
}
.mt-hero__sub {
  color: var(--ink-2);
  margin: 1.15rem auto 0;
  max-width: 52ch;
}
.mt-hero__cta {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  /* Resolves just after the centre card, so the hero settles as one motion
     rather than leaving live buttons under a row that is still arriving. */
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity 0.6s ease-out,
    translate 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
  transition-delay: calc(3 * var(--fan-step, 0.55s) + 0.2s);
}
.mt-hero.is-in .mt-hero__cta {
  opacity: 1;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .mt-hero__cta {
    opacity: 1;
    translate: 0 0;
    transition: none;
    transition-delay: 0s;
  }
}

.mt-fan {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  width: 100%;
  overflow: hidden;
}

/* A fixed row, not a slider.
   Size runs inverted per the peg: largest at the edges, smallest in the
   middle. --d is the item's distance from centre (0-3) and --s its side
   (-1 left, 0 centre, 1 right); both are written into the markup, so the
   arrangement needs no JavaScript and cannot drift out of sync.
   Width is real width rather than a scale transform, so the gaps between
   cards are actual spacing instead of the slack a shrunken card leaves. */
.mt-fan__row {
  /* A <ul> without this keeps its markers and the UA's 40px
     padding-inline-start, which pushes the whole row off-centre. */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 0.9vw, 0.9rem);
  /* Top padding absorbs the lift the outer cards get, so overflow:hidden on
     the wrapper cannot shave their top edge. */
  padding-block: 2.25rem 1.5rem;

  /* One step of delay per pair, so each entrance reads as its own beat
     instead of blurring into the next. */
  --fan-step: 0.55s;
}
.mt-fan__item {
  /* flex-basis 0 with a grow factor proportional to --d: the row divides the
     full width between the cards in the right ratio at every viewport, so it
     is always exactly full-bleed and nothing is ever cut off. A fixed width
     can only be correct at one screen size. */
  flex: calc(1 + var(--d, 0) * 0.22) 1 0;
  min-width: 0;
  translate: 0 calc(var(--d, 0) * -9px);
}
.mt-fan__card {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 2/3;
  border-radius: 14px;
  background: var(--paper-2);
  box-shadow: var(--lift);
}
.mt-fan__card :is(img, canvas) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Entrance: the biggest cards arrive first, sliding in from the side they
   sit on, and the cascade runs inward to the smallest. Delay is keyed off
   --d so ordering and size stay described by the same number. */
.mt-fan__item {
  opacity: 0;
  transition:
    opacity 0.75s ease-out,
    translate 0.75s cubic-bezier(0.2, 0.7, 0.3, 1);
  transition-delay: calc((3 - var(--d, 0)) * var(--fan-step, 0.55s));
}
.mt-fan__item {
  translate: calc(var(--s, 0) * 70px) calc(var(--d, 0) * -9px);
}
.mt-fan.is-in .mt-fan__item {
  opacity: 1;
  translate: 0 calc(var(--d, 0) * -9px);
}

.mt-fan__item:first-child,
.mt-fan__item:nth-child(2),
.mt-fan__item:nth-child(3) {
  transform: perspective(400px) rotateY(370deg);
}

.mt-fan__item:last-child,
.mt-fan__item:nth-child(5),
.mt-fan__item:nth-child(6) {
  transform: perspective(400px) rotateY(350deg);
}
@media (max-width: 760px) {
  .mt-fan__item:first-child,
  .mt-fan__item:last-child {
    display: none;
  }
}
@media (max-width: 480px) {
  .mt-fan__item:nth-child(2),
  .mt-fan__item:nth-last-child(2) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mt-fan__item {
    opacity: 1;
    translate: 0 calc(var(--d, 0) * -9px);
    transition: none;
    transition-delay: 0s;
  }
}

/* ============================================================
   Artist
   ============================================================ */
.mt-artist {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .mt-artist {
    grid-template-columns: 1fr;
  }
}
.mt-artist__media {
  position: relative;
}
.mt-artist__portrait {
  position: relative;
  transform: rotate(-1.6deg);
}
.mt-artist__portrait .mt-polaroid__img {
  aspect-ratio: 3/4;
}
.mt-artist__sig {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  line-height: 1;
  margin: -0.35em 0 0;
  position: relative;
  z-index: 4;
  padding-inline-start: 0.15em;
  color: var(--ink);
}

.mt-facts {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.35rem;
}
.mt-facts li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
}
.mt-facts svg {
  width: 18px;
  height: 18px;
  margin-top: 0.3rem;
  color: var(--pin);
  flex: none;
}
.mt-facts h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.15rem;
  letter-spacing: 0.01em;
}
.mt-facts p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.925rem;
}

/* ============================================================
   Board (Instagram gallery)
   ============================================================ */
.mt-board {
  position: relative;
}
/* Column count is a setting, defaulting to 3 — at 4 the photographs get
   too small to read. minmax(0,1fr) so a wide image cannot push the track
   past its share. */
.mt-board__grid {
  display: grid;
  grid-template-columns: repeat(var(--board-cols, 3), minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem) clamp(1.25rem, 2.5vw, 2.25rem);
  align-items: start;
}
@media (max-width: 820px) {
  .mt-board__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 470px) {
  .mt-board__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.mt-board__grid .mt-polaroid:hover {
  transform: rotate(0deg) scale(1.035);
  box-shadow: var(--lift-lg);
  z-index: 6;
}
/* Scattered, not aligned. Uniform heights read as a spreadsheet; the peg has
   the photos sitting at different depths and sizes, pinned up over time.
   --off and --sc come from a fixed table, so the arrangement is stable
   across reloads rather than reshuffling on every request. */
.mt-board__item {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  margin-block-start: calc(var(--off, 0) * 1px);
}
.mt-board__item .mt-polaroid {
  width: calc(var(--sc, 1) * 100%);
  margin-inline: auto;
}
.mt-board__note {
  position: absolute;
  z-index: 7;
  pointer-events: none;
}
/* Both notes are placed to fall across image area only — low enough and they
   sit on a polaroid's date caption and hide it. */
.mt-board__note--a {
  inset-block-start: -8%;
  inset-inline-end: -2%;
  rotate: 7deg;
}
.mt-board__note--b {
  inset-block-end: 19%;
  inset-inline-start: -3%;
  rotate: -6deg;
}
@media (max-width: 760px) {
  .mt-board__note {
    display: none;
  }
}
.mt-board__foot {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.mt-board__fallback {
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  color: var(--ink-2);
  font-size: 0.9rem;
}

/* ============================================================
   FAQ
   ============================================================ */
.mt-faq {
  display: grid;
  gap: 0.75rem 1.5rem;
  align-content: start;
}
@media (min-width: 576px) {
  .mt-faq {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}
.mt-faq details {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  transition:
    border-radius 0.25s,
    border-color 0.25s,
    background 0.25s;
  height: max-content;
}
.mt-faq details[open] {
  border-radius: 20px;
  border-color: var(--rule);
  background: var(--card);
}
.mt-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.925rem;
  font-weight: 600;
}
.mt-faq summary::-webkit-details-marker {
  display: none;
}
.mt-faq summary::after {
  content: "";
  margin-inline-start: auto;
  flex: none;
  width: 11px;
  height: 11px;
  background: currentColor;
  transition: rotate 0.3s;
  clip-path: polygon(
    46% 0,
    54% 0,
    54% 46%,
    100% 46%,
    100% 54%,
    54% 54%,
    54% 100%,
    46% 100%,
    46% 54%,
    0 54%,
    0 46%,
    46% 46%
  );
}
.mt-faq details[open] summary::after {
  rotate: 45deg;
}
.mt-faq__body {
  padding: 0 1.4rem 1.25rem;
  color: var(--ink-2);
  font-size: 0.9rem;
  margin: 0;
}

/* ============================================================
   Quote
   ============================================================ */
.mt-quote {
  text-align: center;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.mt-quote blockquote {
  margin: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.35rem, 3vw, 2.15rem);
  line-height: 1.35;
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}
.mt-quote cite {
  display: block;
  margin-top: 1.5rem;
  font-style: normal;
  font-size: var(--label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ============================================================
   Booking
   ============================================================ */
.mt-booking {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) {
  .mt-booking {
    grid-template-columns: 1fr;
  }
}
.mt-contact {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.mt-contact a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  transition:
    border-color 0.25s,
    background 0.25s;
}
.mt-contact a:hover {
  border-color: var(--ink-3);
  background: var(--card);
}
.mt-contact__ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  color: var(--ink-2);
}
.mt-contact__ico svg {
  width: 17px;
  height: 17px;
}
.mt-contact small {
  display: block;
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.mt-contact b {
  font-weight: 400;
  font-size: 0.925rem;
}

.mt-form {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 1rem;
}
/* minmax(0,…) rather than a bare 1fr: a 1fr track is minmax(auto,1fr) and
   refuses to shrink below its content's min-content width. Native date and
   file controls carry a wide intrinsic width — in WebKit especially — so a
   bare 1fr lets the track outgrow the form instead of squeezing, and the
   fields slide over one another. */
.mt-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}
/* date + time side by side is cramped even when it behaves; stack sooner */
@media (max-width: 640px) {
  .mt-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.forminator-ui.forminator-custom-form[data-design="default"] .forminator-field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}
.forminator-ui.forminator-custom-form[data-design="default"]
  .forminator-field
  .forminator-label {
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.forminator-ui.forminator-custom-form[data-design="default"]
  .forminator-field
  :is(input, .forminator-select, textarea) {
  font-family: inherit;
  font-size: 0.925rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  transition: border-color 0.2s;
}

.forminator-ui
  .forminator-field
  :is(input, .forminator-select, textarea)::placeholder {
  color: var(--ink-3);
}
.forminator-ui
  .forminator-field
  :is(input, .forminator-select, textarea):hover {
  border-color: var(--ink-3);
}
.forminator-ui.forminator-custom-form[data-design="default"]
  .forminator-field
  textarea {
  resize: vertical;
  min-height: 110px;
}

/* ---------- native date/time controls ----------
   WebKit builds these out of a shadow tree that ignores most of the box
   model set on the host: it applies its own padding, centres the value and
   reserves an intrinsic width. Left alone on iOS the value text collides
   with the picker button and the field outgrows its column. Each part has
   to be reset explicitly — resetting the host alone does nothing. */
.forminator-ui.forminator-custom-form[data-design="default"]
  .forminator-field
  input[type="date"],
.forminator-ui.forminator-custom-form[data-design="default"]
  .forminator-field
  input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 2.95rem; /* match the other controls' box */
  font-variant-numeric: tabular-nums;
}
.forminator-ui.forminator-custom-form[data-design="default"]
  .forminator-field
  input[type="date"]::-webkit-datetime-edit,
.forminator-ui.forminator-custom-form[data-design="default"]
  .forminator-field
  input[type="time"]::-webkit-datetime-edit {
  padding: 0;
  line-height: 1.2;
}
.forminator-ui
  .forminator-field
  input[type="date"]::-webkit-date-and-time-value,
.forminator-ui
  .forminator-field
  input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  padding: 0;
}
/* keep the picker button in flow so it can't sit on top of the value */
.forminator-ui
  .forminator-field
  input[type="date"]::-webkit-calendar-picker-indicator,
.forminator-ui
  .forminator-field
  input[type="time"]::-webkit-calendar-picker-indicator {
  flex: none;
  margin: 0;
  padding: 0;
  margin-inline-start: 0.5rem;
  width: 1.05rem;
  height: 1.05rem;
  opacity: 0.55;
  cursor: pointer;
}
.forminator-ui
  .forminator-field
  input[type="date"]:hover::-webkit-calendar-picker-indicator,
.forminator-ui
  .forminator-field
  input[type="time"]:hover::-webkit-calendar-picker-indicator {
  opacity: 0.85;
}

/* "Choose Files / No file chosen" gives this a wide intrinsic width — the
   same track blow-out one field further down. */
.forminator-ui.forminator-custom-form[data-design="default"]
  .forminator-field
  input[type="file"] {
  font-size: 0.85rem;
  padding: 0.62rem 0.7rem;
}
.forminator-ui
  .forminator-field
  input[type="file"]::-webkit-file-upload-button {
  font-family: inherit;
  font-size: 0.82rem;
  margin-inline-end: 0.6rem;
  padding: 0.4rem 0.8rem;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink);
}
.forminator-ui.forminator-custom-form[data-design="default"]
  .forminator-field
  select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 55%,
    calc(100% - 14px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.mt-form__note {
  font-size: 0.8rem;
  color: var(--ink-2);
  margin: 0;
}
.mt-form .mt-btn {
  justify-content: center;
  width: 100%;
}

/* ============================================================
   Footer
   ============================================================ */
.mt-footer {
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  border-top: 1px solid var(--rule);
  overflow: hidden;
}
.mt-footer__mark {
  font-family: var(--f-display);
  font-size: clamp(2.3rem, 11.5vw, 11rem);
  line-height: 0.85;
  text-align: center;
  color: var(--ink-3);
  letter-spacing: -0.02em;
  margin: 0 0 2rem;
  user-select: none;
}
@media (min-width: 992px) {
  .mt-footer__mark {
    font-size: clamp(2.3rem, 12.5vw, 10.2rem);
  }
}
.mt-footer__bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--ink-2);
}
.mt-footer__bar a {
  text-decoration: none;
}
.mt-footer__bar a:hover {
  color: var(--ink);
}

/* ============================================================
   Gradient wordmarks
   Declared last on purpose: both elements set a solid colour in their own
   rules, and at equal specificity the later declaration wins — defined
   earlier, this enhancement was silently overridden.
   The solid colours stay as the fallback. Without the @supports guard,
   color:transparent renders these invisible wherever background-clip:text
   is unsupported.
   ============================================================ */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .mt-artist__sig {
    background-image: linear-gradient(
      180deg,
      var(--ink) 12%,
      rgba(22, 21, 15, 0.26) 96%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .mt-footer__mark {
    background-image: linear-gradient(
      180deg,
      rgba(22, 21, 15, 0.52) 6%,
      rgba(22, 21, 15, 0.09) 94%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ============================================================
   Scroll reveal
   ============================================================ */
.mt-rise {
  opacity: 0;
  translate: 0 22px;
  transition:
    opacity 0.7s ease,
    translate 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.mt-rise.is-in {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .mt-rise {
    opacity: 1;
    translate: 0 0;
  }
  .mt-polaroid {
    transform: none !important;
  }
}
/* ============================================================
   Theme-only additions (not present in the preview mockup)
   ============================================================ */

/* skip link — visible only once focused */
.mt-skip {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: 1rem;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 10px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.mt-skip:focus {
  inset-block-start: 0;
}

/* a polaroid whose image has not been chosen yet — hold the frame's shape */
.mt-polaroid__img--empty {
  display: block;
  aspect-ratio: 1;
  width: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--paper-2) 0 8px,
    var(--paper) 8px 16px
  );
}

/* ---------- generic pages: archives, search, 404, standalone posts ---------- */
.mt-page {
  padding-block-start: clamp(4rem, 9vw, 7rem);
}
.mt-entry {
  padding-block: 2rem;
  border-bottom: 1px solid var(--rule);
}
.mt-entry:last-of-type {
  border-bottom: 0;
}
.mt-entry__body {
  margin-top: 1rem;
  max-width: 68ch;
}
.mt-entry__body :is(h2, h3, h4) {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.15;
}
.mt-entry__body a {
  color: var(--pin);
}
.mt-entry__body img {
  height: auto;
  border-radius: 4px;
}
.mt-entry__body blockquote {
  margin: 1.5rem 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--pin);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.15rem;
}
.mt-entry__body :is(pre, code) {
  background: var(--paper-2);
  border-radius: 6px;
}
.mt-entry__body pre {
  padding: 1rem;
  overflow-x: auto;
}
.mt-pagination {
  margin-top: 2.5rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.mt-pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.875rem;
}
.mt-pagination .page-numbers.current {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.mt-form__setup {
  display: grid;
  gap: 0.85rem;
  text-align: center;
  padding: 1rem 0;
}
.mt-form__setup-title {
  font-family: var(--f-display);
  font-size: 1.5rem;
  margin: 0;
}
.mt-form__setup p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.925rem;
}
.mt-form__setup .mt-btn {
  justify-self: center;
}

/* ---- fields ---- */
.mt-form
  :is(
    .forminator-input,
    .forminator-textarea,
    .forminator-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="password"],
    select,
    textarea
  ) {
  font-family: inherit;
  font-size: 0.925rem;
  color: var(--ink);
  /* background-COLOR, not the background shorthand: the shorthand resets
     background-image, and this rule outranks the select-arrow rule below,
     so it would wipe the arrow off every dropdown on the page. */
  background-color: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.mt-form :is(input, select, textarea)::placeholder {
  color: var(--ink-3);
}
.mt-form :is(input, select, textarea):hover {
  border-color: var(--ink-3);
}
.mt-form :is(input, select, textarea):focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(22, 21, 15, 0.07);
  outline: none;
}
.mt-form :is(.forminator-textarea, textarea) {
  resize: vertical;
  min-height: 110px;
}

/* Field labels. A bare <label> carrying no class is the field label in most
   plugins' output; an option label inside a checkbox or radio group always
   carries one, which is what keeps those out of this rule and in the
   larger, sentence-case treatment below. */
.mt-form :is(.forminator-label, label:not([class])) {
  display: block;
  margin: 0 0 0.4rem;
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
}
.mt-form .forminator-required {
  color: var(--pin);
}
.mt-form :is(.forminator-description, .forminator-hint) {
  color: var(--ink-3);
  font-size: 0.8rem;
  margin-top: 0.3rem;
}

/* ---- rows ----
   grid-auto-flow:column with an explicit minmax(0,1fr) auto-column gives N
   equal tracks for N fields, whatever width classes the plugin put on them.
   The 0 minimum is the point: a bare 1fr is minmax(auto,1fr) and will not
   shrink past its content, which is how a date or file control drags a
   track wider than the form. Same fix as .mt-form__row. */
.mt-form .forminator-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 0 0 1rem;
}
.mt-form :is(.forminator-col, .forminator-field) {
  min-width: 0;
}
/* date + time side by side is cramped even when it behaves; stack sooner */
@media (max-width: 640px) {
  .mt-form .forminator-row {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
}

/* ---- choices ---- */
.mt-form :is(.forminator-checkbox, .forminator-radio) {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  margin: 0 0 0.35rem;
}
.mt-form :is(.forminator-checkbox, .forminator-radio) input {
  width: auto;
  min-width: 0;
}

/* ---- validation and response ---- */
.mt-form :is(.forminator-error-message, .forminator-validation-message) {
  color: var(--pin);
  font-size: 0.82rem;
  margin-top: 0.3rem;
}
.mt-form
  :is(.forminator-has_error, .forminator-is_error)
  :is(input, select, textarea) {
  border-color: var(--pin);
}
.mt-form .forminator-response-message {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem;
  color: var(--ink);
  margin: 0 0 1rem;
}
.mt-form .forminator-response-message.forminator-error {
  border-color: var(--pin);
  color: var(--pin);
}

/* ---- submit ---- */
.mt-form
  :is(.forminator-button-submit, button[type="submit"], input[type="submit"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600 !important;
  padding: 0.9rem 1.6rem;
  border-radius: 999px !important;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--ink);
  color: var(--paper);
  transition:
    transform 0.25s,
    background 0.25s;
}
.mt-form
  :is(
    .forminator-button-submit,
    button[type="submit"],
    input[type="submit"]
  ):hover {
  background: var(--ink-hover);
  transform: translateY(-2px);
}

/* ---- file upload ----
   Written after the submit rule and with two classes of its own, so the
   upload control cannot inherit the full-width pill treatment whichever
   way Forminator labels it. */
.mt-form
  :is(.forminator-button.forminator-button-upload, .forminator-upload-button) {
  width: auto;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink);
  transition: border-color 0.2s;
}
.mt-form
  :is(
    .forminator-button.forminator-button-upload,
    .forminator-upload-button
  ):hover {
  border-color: var(--ink-3);
  transform: none;
}
.mt-form :is(.forminator-file-upload, .forminator-multi-upload) {
  background: var(--card);
  border: 1px dashed var(--rule);
  border-radius: 10px;
  padding: 1rem;
  color: var(--ink-2);
  font-size: 0.85rem;
}
/* "Choose Files / No file chosen" carries a wide intrinsic width — the same
   track blow-out the row above guards against. */
.mt-form input[type="file"] {
  font-size: 0.85rem;
  padding: 0.62rem 0.7rem;
}
/* Two separate rules, and never inside :is().
   A pseudo-element is not valid in a forgiving selector list, so :is()
   drops that argument silently and the declarations never apply — which is
   what left this button unstyled before. Measured in Chromium: the same
   padding gives 253px inside :is() against 564px written standalone. */
.mt-form input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: 0.82rem;
  margin-inline-end: 0.6rem;
  padding: 0.4rem 0.8rem;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink);
}
.mt-form input[type="file"]::-webkit-file-upload-button {
  font-family: inherit;
  font-size: 0.82rem;
  margin-inline-end: 0.6rem;
  padding: 0.4rem 0.8rem;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink);
}

/* ---- native date / time ----
   WebKit builds these out of a shadow tree that ignores most of the box
   model set on the host: its own padding, a centred value and a reserved
   intrinsic width. Left alone on iOS the value collides with the picker
   button and the field outgrows its column. Each part needs resetting
   explicitly — resetting the host alone does nothing. */
.mt-form :is(input[type="date"], input[type="time"]) {
  -webkit-appearance: none;
  appearance: none;
  min-height: 2.95rem; /* match the other controls' box */
  font-variant-numeric: tabular-nums;
}
.mt-form input[type="date"]::-webkit-datetime-edit,
.mt-form input[type="time"]::-webkit-datetime-edit {
  padding: 0;
  line-height: 1.2;
}
.mt-form input[type="date"]::-webkit-date-and-time-value,
.mt-form input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  padding: 0;
}
.mt-form input[type="date"]::-webkit-calendar-picker-indicator,
.mt-form input[type="time"]::-webkit-calendar-picker-indicator {
  flex: none;
  margin: 0;
  padding: 0;
  margin-inline-start: 0.5rem;
  width: 1.05rem;
  height: 1.05rem;
  opacity: 0.55;
  cursor: pointer;
}
.mt-form input[type="date"]:hover::-webkit-calendar-picker-indicator,
.mt-form input[type="time"]:hover::-webkit-calendar-picker-indicator {
  opacity: 0.85;
}

/* ---- native select arrow ---- */
.mt-form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 55%,
    calc(100% - 14px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

/* ---- Select2, the dropdown Forminator uses for choice fields ----
   The control sits inside the form; the panel is appended to <body>, so it
   is styled outside .mt-form below. */
/* The one !important in the theme, and only because Select2 writes a pixel
   width straight onto this element's style attribute from JavaScript —
   an inline declaration cannot be beaten any other way. */
.mt-form .select2-container {
  width: 100% !important;
}
.mt-form .select2-container .select2-selection--single {
  height: auto;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
}
.mt-form .select2-container .select2-selection__rendered {
  padding: 0;
  line-height: 1.3;
  color: var(--ink);
  font-size: 0.925rem;
}
.mt-form .select2-container .select2-selection__arrow {
  height: auto;
  inset-block-start: 50%;
  translate: 0 -50%;
  inset-inline-end: 0.85rem;
}

.select2-dropdown {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--lift);
  font-family: var(--f-body);
  color: var(--ink);
  overflow: hidden;
}
.select2-results__option {
  font-size: 0.9rem;
  padding: 0.55rem 0.95rem;
}
.select2-results__option--highlighted {
  background: var(--paper-2);
  color: var(--ink);
}
.select2-results__option[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* ---- the date picker, likewise appended to <body> ---- */
:is(.ui-datepicker, .forminator-calendar) {
  /* background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--lift-lg);
  font-family: var(--f-body);
  color: var(--ink);
  padding: 0.5rem; */
}
:is(.ui-datepicker, .forminator-calendar) .ui-datepicker-header {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-weight: 600;
}
:is(.ui-datepicker, .forminator-calendar) td a {
  border-radius: 6px;
  text-align: center;
}
:is(.ui-datepicker, .forminator-calendar) td a:hover {
  background: var(--paper-2);
}
:is(.ui-datepicker, .forminator-calendar)
  td
  :is(.ui-state-active, .ui-state-highlight) {
  background: var(--ink);
  color: var(--paper);
  border-radius: 6px;
}
.forminator-ui#forminator-module-50.forminator-design--default
  .forminator-select2
  + .forminator-select
  .selection
  .select2-selection--single[role="combobox"] {
  border: none;
}
.forminator-ui.forminator-custom-form[data-design="default"]
  select.forminator-select2
  + .forminator-select {
  padding: 4px;
}
.forminator-ui#forminator-module-50.forminator-design--default
  .forminator-select2
  + .forminator-select
  .selection
  .select2-selection--single[role="combobox"]:hover {
  background: none !important;
}
.forminator-ui#forminator-module-50.forminator-design--default
  .forminator-select2
  + .forminator-select
  .selection
  .select2-selection--single[role="combobox"]:focus {
  outline: none !important;
  outline-offset: 0;
  background: none !important;
}

.forminator-ui#forminator-module-50.forminator-design--default
  .forminator-select2
  + .forminator-select
  .selection
  .select2-selection--single[role="combobox"]
  .select2-selection__arrow {
  position: absolute;
  right: 0;
}
.forminator-timepicker {
  margin-top: 0.5rem;
}
.forminator-ui#forminator-module-50.forminator-design--default
  .forminator-error-message {
  background-color: #fa859b !important;
}

/* ---- Forminator file upload ---- */

/* Ang hilera: button + filename + ✕, iisang linya at pinapayagang lumiit. */
.mt-form
  :is(.forminator-file-upload, .forminator-multi-upload, [class*="upload"]) {
  /* display: flex; */
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.45rem 0.5rem;
}
/* Ito ang tunay na susi. Ang flex item ay may automatic minimum na
   min-content, kaya hindi lumiliit sa ilalim ng teksto nito at hindi
   kailanman lumalabas ang ellipsis. min-width:0 ang nag-aalis niyon. */
.mt-form
  :is(.forminator-file-upload, .forminator-multi-upload, [class*="upload"])
  > * {
  min-width: 0;
}