/* ============================================================
   NASTASI FOODS — contact.css
   ------------------------------------------------------------
   Page sheet for contact.html. Loads LAST, after pages.css, so
   it can re-tone the shared .biz-card (built for a dark band)
   onto a light one without touching pages.css.

   The brief: "siendo verde oscura se ve horrorosa, no quiero
   secciones oscuras sin vida." So there is no dark band on this
   page at all. Every panel is a .vcard — the SVG ticket card
   from shapes.css — in a label colour, tilted a degree or two,
   sitting on the sunlit paper.

   Modelled on pizza-amici.nl/contact, whose contact scene is one
   big beige card holding the heading + form, a small blue card
   rotated +3deg overlapping its right edge with the details, and
   three snapshots at ±4-5deg tucked behind it. Their cards are
   .card + an absolutely-positioned .card-shape SVG + .card-content;
   .vcard is the same construction, already built.
   ============================================================ */


/* ============================================================
   1. THE DESK
   ============================================================ */

/* Snapshots deliberately run off the left and right edges, the way
   the reference's do. overflow:hidden is what makes that safe —
   without it they would widen the document. */
.contact-hero { position: relative; overflow: hidden; }
.contact-hero .breadcrumb { position: relative; z-index: 4; }

/* One centred docket with everything else arranged around it — the
   reference's composition measured at 1440: the card is 528 wide and dead
   centre, the details card overlaps its right edge, and the snapshots sit
   OUTSIDE it on both sides at 235–267px.

   The old two-column grid pushed the docket left and stacked the info cards
   in a right-hand rail, which left the photographs with nowhere to go: they
   ended up underneath the docket, and all you saw was a sliver of
   perforation. Centring the docket is what frees both margins. */
.chero {
  position: relative;
  margin-top: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}


/* ---------- 1a. the collage behind everything ---------- */
.chero__collage {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}

/* .cut--stamp brings the perforation, the paper fill and the padding;
   all this adds is where the snapshot sits and how far it leans.
   .stamp-shadow gives it lift with drop-shadow(), because a mask
   clips box-shadow. */
.chero__snap {
  position: absolute; margin: 0;
  --perf: 6px; --gap: 17px;
}
.chero__snap img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
}
/* Sized off the reference (235 / 261 / 267 at a 1440 viewport) rather than
   the 146–168px they were: at that size, half-hidden behind the docket,
   they read as debris rather than as photographs. They tuck a little way
   under the docket's edges on purpose — that overlap is what makes the
   scene a desk instead of three columns. */
.chero__snap--a { top: -1rem;    left: 0.5rem;  width: clamp(150px, 17vw, 244px); transform: rotate(-5deg);  z-index: 1; }
.chero__snap--b { top: 44%;      left: 4.5rem;  width: clamp(132px, 15vw, 214px); transform: rotate(4.5deg); z-index: 0; }
.chero__snap--c { bottom: clamp(2rem, 5vw, 4rem); right: -1rem; width: clamp(140px, 16.5vw, 236px); transform: rotate(5.5deg); z-index: 0; }

/* THE SEAL. This slot used to hold .chero__postmark — two dashed rings
   and "NJ 07095" — which is the empty circle Sergio pointed at and asked
   to fill with the pizza wheel. It is the same .disc primitive the home
   page and both form pages use (shapes.css §disc), so it inherits the
   fallback wax seal if the artwork 404s.

   It turns on a keyframe, not a scroll ramp: contact.html loads no rAF
   loop, and this is a decorative wheel parked under a corner of the
   docket, not a scene. Bigger than the postmark was (186px), because
   half of it is tucked under the card. */
.chero .disc--contact {
  left: 15%; bottom: clamp(-9rem, -8vw, -5rem);
  width: clamp(190px, 21vw, 300px); z-index: 0;
  animation: chero-turn 52s linear infinite;
}
@keyframes chero-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .chero .disc--contact { animation: none; transform: rotate(-12deg); }
}


/* ---------- 1b. the docket: heading + the live form ---------- */
/* 580 not "whatever 1.18fr comes to": the reference's card is 528 at 1440,
   i.e. ~37% of the viewport, and a form card that grows with the page ends
   up with 70-character input labels. */
.chero__form {
  position: relative; z-index: 2;
  width: min(100%, 580px);
  margin-inline: auto;
}

/* .vcard__body doubles as the .form-card forms.js looks for with
   closest(), so the success panel is found in the same box. Its
   own panel styling has to go — the drawn ticket is the panel. */
.chero__form .vcard__body {
  background: none; border: 0; box-shadow: none; border-radius: 0;
  padding: clamp(1.5rem, 1rem + 2.4vw, 3.25rem);
}

/* The head is a two-column grid purely so the rubber stamp has a
   reserved lane. Floating it absolutely over the copy "worked" only
   while the headline and the lede happened to be short — the lede's
   third line ran under it the moment the wrap changed. Grid makes the
   collision impossible instead of unlikely: the stamp takes the
   top-right cell, the eyebrow the top-left, and the headline and lede
   span the full width underneath it. */
.chero__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 1.5rem;
  margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
}
.chero__head .eyebrow { grid-column: 1; grid-row: 1; align-self: center; margin-bottom: 0.9rem; }
.chero h1 { grid-column: 1 / -1; grid-row: 2; }
.chero__lede { grid-column: 1 / -1; grid-row: 3; }
/* Sergio's copy is two paragraphs. The head is an explicit grid, so a
   second one has to be given its own row — left on row 3 both lede
   paragraphs would be stacked in the same cell, printed over each other. */
.chero__lede--2 { grid-row: 4; font-size: var(--fs-small); margin-top: 0.7rem; }
.chero h1 {
  font-family: var(--font-hero);
  font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem);
  font-weight: 700;
  font-variation-settings: "wdth" 92;
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 15ch;
}
.chero__lede {
  color: var(--text-muted);
  font-size: var(--fs-lead);
  max-width: 44ch;
  margin-top: 1rem;
}

/* The rubber stamp, in its reserved top-right cell (see .chero__head). */
.chero__rubber {
  grid-column: 2; grid-row: 1; justify-self: end;
  padding: 0.6rem 0.9rem;
  border: 2.5px solid color-mix(in srgb, var(--stamp) 55%, transparent);
  border-radius: 4px;
  color: color-mix(in srgb, var(--stamp) 82%, transparent);
  font-family: var(--font-mono);
  font-size: 0.62rem; line-height: 1.5;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-align: center;
  transform: rotate(6deg);
  opacity: 0.9;
}
.chero__rubber b { font-weight: 500; font-size: 0.72rem; }

/* the docket reference line above the fields */
.chero__formline {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem;
  margin-bottom: 1.5rem; padding-bottom: 0.85rem;
  border-bottom: 1.5px dashed var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-faint);
}
.chero__formline span { display: inline-flex; align-items: center; gap: 1.1rem; }
.chero__formline span + span::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: 0.55;
}


/* ---------- 1c. the rail: business card + hours ---------- */
/* Lifted out of flow so the docket can be centred in the full width. It
   lands on the docket's right margin exactly the way the reference's blue
   details card does, and the right-hand snapshot passes behind it. */
.chero__rail {
  position: absolute; z-index: 3;
  top: clamp(1.5rem, 4vw, 4.5rem); right: 0;
  width: clamp(258px, 24vw, 332px);
  display: grid; gap: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

/* .biz-card was built for the dark band on the home page: a green
   gradient with brass type. Here it is a pale-blue label card that
   overlaps the docket's right edge — the reference's move exactly,
   only done in flow with a negative margin so it can never widen
   the page. */
.chero__rail .biz-card {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0;
  transform: rotate(1.6deg);
  transform-origin: 50% 0;
  /* The overlap now comes from the rail being absolutely positioned in the
     right margin while the docket is centred — at 1280 that is a 10px
     kiss of the docket's edge, which is the reference's move. The old
     negative margin was the grid-era way of getting there and would now
     stretch the card past its own column. */
}
.chero__rail .biz-card .vcard__body { padding: clamp(1.4rem, 1rem + 1.5vw, 2.1rem); }
.chero__rail .biz-card__brand { color: currentColor; font-size: 1.45rem; }
.chero__rail .biz-card__sub { color: color-mix(in srgb, var(--adriatic-ink) 68%, transparent); }
.chero__rail .biz-card__rows .row svg { color: var(--adriatic-ink); opacity: 0.72; }
.chero__rail .biz-card__rows .k { color: color-mix(in srgb, var(--adriatic-ink) 66%, transparent); }
.chero__rail .biz-card__rows .v { color: var(--adriatic-ink); }
.chero__rail .biz-card__rows a.v:hover { color: var(--stamp); }
.chero__rail .biz-card__visit { margin-top: 0.25rem; }
/* pages.css sets this one with !important for the dark card */
.chero__rail .biz-card__map {
  color: var(--adriatic-ink) !important;
  border-color: color-mix(in srgb, var(--adriatic-ink) 45%, transparent);
  display: inline-flex; margin-top: 1.1rem;
}

/* opening hours, on saffron — pinned into the LEFT margin, opposite the
   business card, so the desk has weight on both sides */
.chero__hours {
  position: absolute; z-index: 3;
  left: 0; bottom: clamp(1rem, 3vw, 3rem);
  width: clamp(240px, 22vw, 300px);
  transform: rotate(-1.2deg); transform-origin: 50% 100%;
}
.chero__hours .vcard__body { padding: clamp(1.4rem, 1rem + 1.5vw, 2.1rem); }
.chero__hours-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  margin-bottom: 1rem;
}
.hours-list { display: grid; gap: 0.55rem; margin: 0; }
.hours-list > div {
  display: flex; align-items: baseline; gap: 0.75rem;
  font-size: var(--fs-small);
}
.hours-list dt { font-weight: 600; white-space: nowrap; }
.hours-list dd {
  margin: 0; font-family: var(--font-mono); font-size: 0.78rem;
  white-space: nowrap;
}
/* the dotted leader that fills the gap on a printed timetable */
.hours-list > div::after {
  content: ""; order: 1; flex: 1 1 auto; height: 0;
  margin-bottom: 0.28em;
  border-bottom: 1.5px dotted color-mix(in srgb, var(--ink) 32%, transparent);
}
.hours-list dd { order: 2; }
.chero__note {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1.5px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  font-size: var(--fs-micro);
  color: color-mix(in srgb, var(--ink) 76%, transparent);
}


/* ============================================================
   2. THE EDGE between the desk and what-happens-next
   The teeth are the colour of the band below; the strip they sit
   in is the colour the sunlit band ends on, so there is no seam.
   ============================================================ */
.edge-band { background: var(--bone-deep); line-height: 0; }


/* ============================================================
   3. WHAT HAPPENS NEXT
   ============================================================ */
/* The three tickets are now .pinsteps — index cards pinned to the wall with
   a dashed thread running between them. Only the spacing lives here. */
.next-band { background: var(--bone-pure); }
.next-strip {
  gap: clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
  max-width: 1000px; margin-inline: auto;
}
.next-strip .pinstep:nth-child(3) { margin-top: clamp(1rem, 2.4vw, 2.4rem); }


/* ============================================================
   4. THREE FASTER WAYS IN — the closing CTA
   ============================================================ */
.ways-band { background: var(--bone); }
.ways-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  align-items: stretch;
}
.way {
  --tw: -1.2deg;
  display: block; text-decoration: none; color: var(--vc-ink);
  transform: rotate(var(--tw));
  transition: transform var(--dur-mid) var(--ease-out);
}
.way:nth-child(2) { --tw: 0.9deg; }
.way:nth-child(3) { --tw: -0.6deg; }
.way .vcard__body {
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.15rem);
  display: flex; flex-direction: column; height: 100%;
}
.way__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid currentColor; opacity: 0.85;
  margin-bottom: 1rem;
}
.way__icon svg { width: 21px; height: 21px; }
.way h3 { font-size: var(--fs-h4); margin-bottom: 0.5rem; }
.way p { font-size: var(--fs-small); opacity: 0.86; margin-bottom: 1.25rem; }
.way__go {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1.5px solid currentColor;
  align-self: flex-start;
}
.way__go svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }

/* a tap fires :hover on touch and then latches, so the lift is
   gated to real pointers */
@media (hover: hover) and (pointer: fine) {
  .way:hover { transform: rotate(var(--tw)) translateY(-7px); }
  .way:hover .way__go svg { transform: translateX(4px); }
}
.way:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }

/* the sign-off: a handwritten note, then two tickets */
.ways-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(0.85rem, 0.5rem + 1vw, 1.5rem);
  margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
}
.ways-foot__hand {
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
  color: var(--stamp);
  transform: rotate(-2deg);
  margin: 0;
}


/* ============================================================
   5. NARROWER VIEWPORTS
   The collage is the first thing to go: below ~1080px the docket
   needs the whole width and the snapshots would sit on the type.
   ============================================================ */
@media (max-width: 1080px) {
  .chero__collage { display: none; }
  /* back into flow, under the docket */
  .chero__rail {
    position: static; width: auto;
    margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
  .chero__form { width: 100%; }
  .chero__rail .biz-card { transform: rotate(1deg); }
  .chero__hours {
    position: static; width: auto;
    margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    transform: rotate(-0.8deg);
  }
}

@media (max-width: 900px) {
  .next-strip, .ways-grid { grid-template-columns: minmax(0, 1fr); }
  .next-step--2 { margin-top: 0; }
}

@media (max-width: 640px) {
  .chero__rubber { display: none; }
  .chero h1 { max-width: none; }
  .chero__rail .biz-card,
  .chero__hours,
  .next-step,
  .way { transform: none; }
  .ways-foot { flex-direction: column; }
}


/* ============================================================
   6. REDUCED MOTION
   The tilts stay — they are layout, not motion. Only the moving
   parts are stilled.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .way { transition: none; }
  .way:hover { transform: rotate(var(--tw)); }
  .way:hover .way__go svg { transform: none; }
}