/* Torö Vingård — component styles. Values come from tokens.css; nothing here declares a token. */
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; }

/* Focus: one ring everywhere, solid, ink-strong. */
.tv-btn:focus-visible, .tv-oval:focus-visible, .tv-field__input:focus-visible, .tv-field__area:focus-visible, .tv-card:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}

/* Oval — a hand-drawn loop around a word */
.tv-oval { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0.32em 0.95em 0.38em; font-family: var(--font-sans); font-size: 20px; line-height: 1; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; background: none; border: 0; cursor: default; white-space: nowrap; }
a.tv-oval, button.tv-oval { cursor: pointer; }
.tv-oval--lg { font-size: 26px; }
.tv-oval__ink { position: absolute; inset: -0.08em -0.12em; width: calc(100% + 0.24em); height: calc(100% + 0.16em); overflow: visible; fill: none; stroke: var(--brick); stroke-width: var(--stroke-pen); stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.tv-oval__text { position: relative; }
a.tv-oval:hover .tv-oval__ink, button.tv-oval:hover .tv-oval__ink { stroke-width: 2.25px; }
a.tv-oval:hover, button.tv-oval:hover { color: var(--ink-strong); }

/* Monogram — one letter in a drawn ring */
.tv-mono { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--ink); }
.tv-mono .tv-oval__ink { inset: 0; width: 100%; height: 100%; }
.tv-mono__letter { position: relative; font-family: var(--font-serif); font-style: italic; line-height: 1; transform: translateY(-0.04em); }

/* Eyebrow — monogram + italic edition line */
.tv-eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); }
.tv-eyebrow__text { font-family: var(--font-serif); font-style: italic; font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; }

/* Label — boxed italic aside */
.tv-label { display: inline-block; padding: var(--space-1) var(--space-2) 5px; border: var(--stroke-hairline) solid var(--ink); border-radius: var(--radius-label); font-family: var(--font-serif); font-style: italic; font-size: 18px; line-height: 1.2; color: var(--ink); }

/* Buttons */
.tv-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-0); font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
.tv-btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: 12px; }
.tv-btn--solid { background: var(--ink); color: var(--on-ink); border: var(--stroke-hairline) solid var(--ink); }
.tv-btn--solid:hover { background: var(--ink-strong); border-color: var(--ink-strong); }
.tv-btn--outline { background: transparent; color: var(--ink); border: var(--stroke-hairline) solid var(--ink); }
.tv-btn--outline:hover { background: var(--ink); color: var(--on-ink); }
.tv-btn--link { min-height: 0; padding: 0; background: none; border: 0; font-family: var(--font-serif); font-style: italic; font-size: 20px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tv-btn--link:hover { color: var(--ink-strong); text-decoration-thickness: 2px; }
.tv-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.tv-btn-oval { font-size: 20px; }

/* Dividers */
.tv-divider { border: 0; height: 0; border-top: var(--stroke-hairline) solid var(--line); margin: var(--space-6) 0; }
.tv-divider--ink { border-top-color: var(--ink); }
.tv-divider-v { display: inline-block; width: 0; height: 1.1em; border-left: var(--stroke-pen) solid var(--brick); transform: rotate(4deg); vertical-align: middle; }

/* Illustration */
.tv-ill { position: relative; margin: 0; color: var(--brick); container-type: inline-size; }
.tv-ill--graphite { color: var(--graphite); }
.tv-ill__svg { display: block; width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: var(--stroke-drawing); stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.tv-ill__signature { position: absolute; left: -2%; top: 4%; font-family: var(--font-script); font-size: clamp(72px, 46cqw, 260px); line-height: 0.9; color: var(--brick); transform: rotate(-6deg); white-space: nowrap; pointer-events: none; }

/* Card — the invitation card */
.tv-card { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8) var(--space-8) var(--space-8); background: var(--paper-raised); border-radius: var(--radius-frame); color: var(--ink); text-decoration: none; }
a.tv-card:hover .tv-card__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tv-card__art { padding: 0 var(--space-6); }
.tv-card__title { margin: 0; text-align: center; font-family: var(--font-sans); font-size: 13px; line-height: 1.2; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.tv-card__cols { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); }
.tv-card__desc { margin: 0; flex: 1 1 auto; max-width: 30ch; font-size: 14px; line-height: 1.45; color: var(--ink); }
.tv-card__meta { margin: 0; flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 14px; line-height: 1.45; color: var(--ink); }
.tv-card__note { font-size: 11px; letter-spacing: 0.04em; color: var(--ink-soft); }

/* Fields — underline only */
.tv-field { display: flex; flex-direction: column; gap: var(--space-2); }
.tv-field__label { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.tv-field__input, .tv-field__area { font: 400 18px/1.4 var(--font-sans); color: var(--ink); background: transparent; border: 0; border-bottom: var(--stroke-hairline) solid var(--ink); border-radius: var(--radius-0); padding: var(--space-2) 0; }
.tv-field__area { border: var(--stroke-hairline) solid var(--ink); padding: var(--space-3); resize: vertical; }
.tv-field__input::placeholder, .tv-field__area::placeholder { font-family: var(--font-serif); font-style: italic; color: var(--ink-soft); opacity: 1; }
.tv-field__input:focus, .tv-field__area:focus { border-color: var(--ink-strong); box-shadow: 0 1px 0 0 var(--ink-strong); }
.tv-field__area:focus { box-shadow: inset 0 0 0 1px var(--ink-strong); }
.tv-field__hint { font-size: 13px; color: var(--ink-soft); }

/* Poster — the composition: content at the top, drawing in the middle-right, label at the foot */
.tv-poster { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-8); min-height: 680px; padding: var(--space-12); background: var(--paper); color: var(--ink); box-sizing: border-box; }
.tv-poster__top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.tv-poster__title { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: 88px; line-height: 0.94; letter-spacing: -0.025em; text-transform: uppercase; color: var(--ink); }
.tv-poster__places { display: flex; align-items: center; gap: var(--space-3); }
.tv-poster__aside { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 1.25; max-width: 28ch; }
.tv-poster__art { display: flex; align-items: center; justify-content: flex-end; }
.tv-poster__art .tv-ill { width: 62%; }
.tv-poster__foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.tv-poster__footer { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.25; max-width: 34ch; }
@media (max-width: 640px) {
  .tv-poster { padding: var(--space-8); min-height: 560px; }
  .tv-poster__title { font-size: 52px; }
  .tv-poster__art .tv-ill { width: 90%; }
}