/* Hallmark · genre: editorial · macrostructure: Letter · theme: Garden · enrichment: none (typography only) · nav: N6 masthead, reworked as a left-aligned letterhead · footer: Ft2 inline single line (Ft6 letter close lives in the home letter) · tone: warm, crafted · anchor hue: 140 leaf-green
 * Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V4
 * Concept: the whole site is a letter from Vladimir. Letterhead on top, the home page is the letter,
 * the other pages are the enclosures. One memorable element: the letterhead + signed letter.
 */

html, body { overflow-x: clip; }
:root { --sheet: 74rem; }
/* Large screens: the letter grows with the window instead of leaving half of it empty */
@media (min-width: 90rem) { html { font-size: clamp(100%, 0.45vw + 0.6rem, 118%); } }

body {
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  font-variant-numeric: oldstyle-nums;
  padding-inline: var(--page-gutter);
  padding-bottom: calc(var(--space-3xl) + env(safe-area-inset-bottom));
}

a {
  color: var(--color-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--color-rule-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) {
  a:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }
}
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  color: var(--color-ink);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}
h1 { font-size: var(--text-display-s); line-height: var(--lh-tight); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
p { margin: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Letterhead (header on every page) ─────────────────────── */
.letterhead {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-xl) var(--space-sm);
  margin-inline: auto;
  max-width: var(--sheet);
  border-bottom: 3px double var(--color-rule-2);
}
.letterhead__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-ink);
  text-decoration: none;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
}
.letterhead__mark { width: 1.4em; height: 1.4em; flex: none; margin-block: -0.15em; }
.letterhead__line {
  font-style: italic;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.letterhead__nav {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-lg);
  row-gap: var(--space-2xs);
  font-size: var(--text-sm);
}
.letterhead__nav a {
  display: inline-block;
  padding-block: var(--space-xs);
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-ink-2);
}
.letterhead__nav a[aria-current="page"] {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

main {
  margin-inline: auto;
  max-width: var(--sheet);
  padding-block: var(--space-2xl) var(--space-3xl);
}

/* ── The letter (home) ─────────────────────────────────────── */
.letter {
  max-width: var(--measure-letter);
  display: grid;
  gap: var(--space-md);
}
.letter__greeting { margin-bottom: var(--space-sm); }
.letter__lede { font-size: var(--text-md); line-height: 1.5; color: var(--color-ink); }
.letter__break {
  border: 0;
  margin: var(--space-lg) 0;
  height: auto;
  color: var(--color-rule-2);
}
.letter__break::after {
  content: "* * *";
  letter-spacing: 0.6em;
  font-size: var(--text-sm);
}
.letter__sign {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: end;
}
.letter__portrait {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--color-paper-3);
}
.letter__sign > div { display: grid; gap: var(--space-sm); }
.letter__signature {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink);
  line-height: 1;
  transform: rotate(-2deg);
  transform-origin: left center;
  justify-self: start;
}
.letter__ps {
  margin-top: var(--space-xl);
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 48ch;
}
.letter__ps-mark {
  font-family: var(--font-display);
  color: var(--color-accent-2);
  margin-inline-end: var(--space-2xs);
}

/* ── Before / after slider (Lavori) ────────────────────────── */
.before-after { display: grid; gap: var(--space-lg); padding-top: var(--space-xl); border-top: var(--rule) solid var(--color-rule); align-items: center; }
.before-after__text { display: grid; gap: var(--space-sm); max-width: 40ch; }
@media (min-width: 48rem) {
}

/* ── Lavori (portfolio) ────────────────────────────────────── */
.work__honest { font-size: var(--text-sm); color: var(--color-muted); }
.work__tag { justify-self: start; font-size: var(--text-sm); color: var(--color-accent-2); border: var(--rule) solid currentColor; border-radius: 999px; padding: 0 var(--space-xs); }
.work { display: grid; gap: var(--space-lg); padding-top: var(--space-xl); border-top: var(--rule) solid var(--color-rule); }
.work__shots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.32fr); gap: var(--space-md); align-items: end; }
.work__shots img { width: 100%; height: auto; border: var(--rule) solid var(--color-rule-2); border-radius: var(--radius); background: var(--color-paper-3); }
.work__text { display: grid; gap: var(--space-sm); max-width: var(--measure); }
.work__kind { font-size: var(--text-sm); color: var(--color-muted); }
.work__open {
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-xs) var(--space-lg);
  border: var(--rule) solid var(--color-ink); border-radius: var(--radius); text-decoration: none; white-space: nowrap;
  font-family: var(--font-display);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .work__open:hover { background: var(--color-ink); color: var(--color-paper); } }
.work__open:active { transform: translateY(1px); }

/* ── Inner pages ───────────────────────────────────────────── */
.page { display: grid; gap: var(--space-2xl); }
.page__head { display: grid; gap: var(--space-sm); max-width: var(--measure); }
.page__lede { font-size: var(--text-md); line-height: 1.5; color: var(--color-ink); }
.page section { display: grid; gap: var(--space-md); max-width: var(--measure); }
.page__next a { font-family: var(--font-display); font-size: var(--text-md); white-space: nowrap; }

/* Spec sheet (Cosa faccio) — F3, hairlines only */
.page section:has(> .spec) { max-width: 52rem; }
.spec { width: 100%; border-collapse: collapse; }
.spec tr { border-top: var(--rule) solid var(--color-rule); }
.spec tr:last-child { border-bottom: var(--rule) solid var(--color-rule); }
.spec th, .spec td { text-align: start; vertical-align: top; padding-block: var(--space-md); }
.spec th {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-ink);
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  padding-inline-end: var(--space-xl);
  width: 30%;
}
.spec__note { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }

.cases__pair { display: grid; gap: var(--space-xl); }
.cases__pair > div { display: grid; gap: var(--space-xs); align-content: start; }
.page section.cases { max-width: 52rem; }

/* Steps (Come lavoro) — F4, a genuine sequence */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl); max-width: var(--measure); counter-reset: none; }
.steps__item { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: var(--rule) solid var(--color-rule); }
.steps__item h2 { font-size: var(--text-md); margin-bottom: var(--space-xs); }
.steps__n {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-accent);
  font-variant-numeric: lining-nums;
}

/* FAQ */
.faq details { border-top: var(--rule) solid var(--color-rule); }
.faq details:last-of-type { border-bottom: var(--rule) solid var(--color-rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  font-family: var(--font-display);
  color: var(--color-ink);
  font-size: var(--text-base);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-accent); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: var(--space-md); max-width: 54ch; }

/* About (Chi sono) */
.about { display: grid; gap: var(--space-xl); }
.about__photo { margin: 0; max-width: 18rem; }
.about__photo img { border-radius: var(--radius); background: var(--color-paper-3); }
.about__text { display: grid; gap: var(--space-md); max-width: var(--measure); align-content: start; }

/* Contact (Contatti) */
.reach { display: grid; gap: var(--space-xl); justify-items: start; }
.reach__primary,
.dock__wa {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  text-decoration: none;
  font-family: var(--font-display);
  white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) {
  .reach__primary:hover, .dock__wa:hover { color: var(--color-accent-ink); background: var(--color-ink); transform: translateY(-1px); }
}
.reach__primary:active, .dock__wa:active { transform: translateY(0); }
.reach__list { margin: 0; display: grid; gap: var(--space-md); }
.reach__list div { display: grid; gap: var(--space-3xs); }
.reach__list dt { font-size: var(--text-sm); color: var(--color-muted); }
.reach__list dd { margin: 0; font-size: var(--text-md); overflow-wrap: anywhere; }

/* Legal */
.page--legal section { gap: var(--space-sm); }
.page--legal h2 { font-size: var(--text-md); }

/* ── Colophon (footer) ─────────────────────────────────────── */
.colophon {
  margin-inline: auto;
  max-width: var(--sheet);
  border-top: var(--rule) solid var(--color-rule);
  padding-block: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.colophon p { display: flex; flex-wrap: wrap; column-gap: var(--space-lg); row-gap: var(--space-xs); }
.colophon a { color: var(--color-muted); white-space: nowrap; }
.colophon__name { color: var(--color-ink-2); }

/* ── Mobile dock (C4 sticky bottom bar) ────────────────────── */
.dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--page-gutter) calc(var(--space-sm) + env(safe-area-inset-bottom));
  background: var(--color-paper);
  border-top: var(--rule) solid var(--color-rule);
}
.dock__wa { flex: 1 1 auto; justify-content: center; padding-inline: var(--space-md); font-size: 1rem; }
.dock__mail { padding-block: var(--space-sm); white-space: nowrap; font-size: 1rem; }
.page-contatti .dock { display: none; }

@media (min-width: 40rem) {
  .cases__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .about { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-2xl); }
}

@media (min-width: 60rem) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .dock { display: none; }
  .letterhead { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-xl); align-items: baseline; }
  .letterhead nav { grid-column: 1 / -1; }
}

/* Small phones: the spec table becomes a stacked list */
@media (max-width: 39.99rem) {
  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto; }
  .spec th { padding-block: var(--space-md) 0; padding-inline-end: 0; }
  .spec td { padding-block: var(--space-2xs) var(--space-md); }
}

.work__open span[aria-hidden="true"] { margin-inline-start: 0.35em; }

/* ── Wide screens: use the whole sheet ─────────────────────── */
.attachments { display: none; }
@media (min-width: 64rem) {
  /* Home: the letter on the left, its enclosures pinned on the right */
  .desk { display: grid; grid-template-columns: minmax(0, var(--measure-letter)) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  .attachments { display: grid; gap: var(--space-md); position: sticky; top: var(--space-xl); padding-top: var(--space-xs); }
  .attachments__label { font-size: var(--text-sm); font-style: italic; color: var(--color-muted); }
  .attachments__stack { position: relative; display: block; aspect-ratio: 16 / 13; text-decoration: none; }
  .attachments__stack img { position: absolute; width: 78%; height: auto; border: var(--rule) solid var(--color-rule-2); border-radius: var(--radius); background: var(--color-paper-3); box-shadow: 0 22px 40px -26px oklch(30% 0.04 140 / 0.55); transition: translate var(--dur-long, 420ms) var(--ease-out), rotate var(--dur-long, 420ms) var(--ease-out); }
  .attachments__stack img:nth-child(1) { left: 0; top: 0; rotate: -3deg; }
  .attachments__stack img:nth-child(2) { left: 11%; top: 13%; rotate: 1.5deg; }
  .attachments__stack img:nth-child(3) { left: 22%; top: 26%; rotate: -1deg; }
  @media (hover: hover) {
    .attachments__stack:hover img:nth-child(1) { translate: -10px -8px; rotate: -5deg; }
    .attachments__stack:hover img:nth-child(3) { translate: 10px 8px; rotate: 1deg; }
  }
  .attachments__list { list-style: none; margin: 0; padding: var(--space-md) 0 0; display: grid; gap: var(--space-2xs); border-top: var(--rule) solid var(--color-rule); font-size: var(--text-sm); }
  .attachments__list a { text-decoration: none; }
  .attachments__list a:hover { text-decoration: underline; }
  .attachments__list span { color: var(--color-muted); }

  /* Inner pages: title in the margin on the left, content on the right */
  .page:not(.page--legal) { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  .page:not(.page--legal) > .page__head { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: var(--space-xl); }
  .page:not(.page--legal) > :not(.page__head) { grid-column: 2; }

  /* Works: screenshots and text side by side */
  .work { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: var(--space-2xl); align-items: center; }
}

/* ── Before / after: two phones side by side + the concrete differences ── */
.before-after { gap: var(--space-xl); }
.phones { display: grid; grid-template-columns: repeat(2, minmax(0, 15.5rem)); gap: clamp(1rem, 4vw, 3rem); justify-content: start; }
.phone { margin: 0; display: grid; gap: var(--space-xs); }
.phone__label { font-family: var(--font-display); font-size: var(--text-md); color: var(--color-ink); }
.phone--after .phone__label { color: var(--color-accent); }
.phone__screen { position: relative; aspect-ratio: 390 / 780; overflow: hidden; border: 7px solid var(--color-ink); border-radius: 1.6rem; background: #e9e2c6; box-shadow: 0 24px 40px -26px oklch(30% 0.04 140 / 0.6); }
.phone__screen img { position: absolute; inset: 0 0 auto; width: 100%; height: auto; }
.phone--after .phone__screen img { animation: phone-scroll 16s ease-in-out 1s infinite alternate; }
.phone--after .phone__screen:hover img { animation-play-state: paused; }
@keyframes phone-scroll { 0%, 8% { translate: 0 0; } 92%, 100% { translate: 0 -70%; } }
@media (prefers-reduced-motion: reduce) { .phone--after .phone__screen img { animation: none; } }
.phone__note { position: absolute; inset: auto 12% 22% 12%; text-align: center; font-style: italic; font-size: var(--text-sm); line-height: 1.35; color: var(--color-muted); }
.pin { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-accent-2); color: #fff; font-size: 0.78rem; font-weight: 700; box-shadow: 0 0 0 2px #fff; }
.diffs { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--rule) solid var(--color-rule); }
.diffs li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: var(--space-sm); row-gap: var(--space-3xs); padding-block: var(--space-sm); border-bottom: var(--rule) solid var(--color-rule); }
.diffs__n { grid-row: span 3; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-accent-2); color: #fff; font-size: 0.78rem; font-weight: 700; }
.diffs__what { font-family: var(--font-display); color: var(--color-ink); }
.diffs__before, .diffs__after { font-size: var(--text-sm); padding-left: 1.4em; position: relative; }
.diffs__before { color: var(--color-muted); }
.diffs__before::before { content: "✗"; position: absolute; left: 0; color: var(--color-accent-2); }
.diffs__after { color: var(--color-ink); }
.diffs__after::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; }
@media (min-width: 40rem) {
  .diffs li { grid-template-columns: 1.5rem minmax(0, 7rem) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .diffs__n { grid-row: auto; }
}