/* Hallmark · shape: Photographic · genre: editorial · theme: Hedgerow (deal 3/3, seed estonian-forestry-company-forest-4c74·49bd0c19·2026-10-22·r0) · job: hire · draw: 4ee763
 * hero: Ledge · nav: edge-aligned (swapped from banner: no real announcement to carry) · footer: statement · imagery: photographs, Wikimedia Commons 3 (Estonian forests, CC BY-SA), natural · signature: the five cutting types set as a field-guide index · hedgerow: hedge
 * axes: dark/high-contrast-serif/chromatic-green · posture: drenched · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: P, a service page argues little; the raie index and the keep-the-land table carry the argument instead of slogans */
/* Hallmark · dismissed F4 · "Vaata raieliike" is the outlined secondary on a transparent ground, only the primary is filled */
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 72px; }

/* skip link */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* nav: edge-aligned */
.nav { position: relative; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.wordmark { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; color: var(--color-ink); text-decoration: none; }
.wordmark:hover { color: var(--color-accent-2); }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav__links { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.nav__links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* controls */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: 1.5px solid var(--color-accent); border-radius: var(--radius-pill); font: 700 var(--text-sm)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn--secondary { background: transparent; color: var(--color-accent); }
.btn--secondary:hover { background: color-mix(in oklab, var(--color-accent) 12%, transparent); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
a { text-decoration-color: var(--color-accent); }

/* hero: Ledge, the canopy as the field, the head resting at its base */
.hero { position: relative; display: grid; min-height: calc(100dvh - var(--nav-h) - 49px); }
.hero__photo { grid-area: 1 / 1; margin: 0; min-height: 520px; }
.hero__photo > img { object-position: 50% 40%; }
.hero__plate { grid-area: 1 / 1; position: relative; z-index: 2; align-self: end; padding-block: var(--space-3xl) var(--space-2xl); background: linear-gradient(to top, color-mix(in oklab, var(--color-paper) 88%, transparent) 0%, color-mix(in oklab, var(--color-paper) 62%, transparent) 55%, transparent 100%); }
.hero__inner { display: grid; gap: var(--space-lg); }
.hero h1 { max-width: 16ch; font-size: clamp(2.75rem, 5.5vw + 0.5rem, 6rem); line-height: 1.04; }
.hero .lead { color: var(--color-ink); }

/* raied: the field-guide index */
.raied { padding-block: var(--section-gap) var(--section-gap-s); }
.raied__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.raied__head { display: grid; gap: var(--space-lg); position: sticky; top: var(--space-2xl); }
.raied__head .lead { color: var(--color-ink-2); }
.index { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--color-accent); }
.index > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); grid-template-areas: "name kind" "line line"; gap: var(--space-xs) var(--gap-columns); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.index h3 { grid-area: name; font-size: var(--text-2xl); }
.index__kind { grid-area: kind; align-self: end; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.index p { grid-area: line; color: var(--color-ink-2); }

/* showcase: the forwarder at work */
.showcase { padding-block: var(--section-gap-s) var(--section-gap); }
.showcase__frame { margin: 0; aspect-ratio: 21 / 9; min-height: 360px; }
.showcase__frame > img { object-position: 50% 82%; outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.caption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }

/* ostame: the cream band, the one table */
.band--cream { background: var(--color-ink); color: var(--color-paper); --color-rule: color-mix(in oklab, var(--color-paper) 22%, var(--color-ink)); }
.ostame { padding-block: var(--section-gap-s); }
.ostame__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.ostame__head .lead { justify-self: end; color: color-mix(in oklab, var(--color-paper) 85%, var(--color-ink)); }
.deals { width: 100%; border-collapse: collapse; }
.deals thead th { padding: 0 0 var(--space-sm); font-size: var(--text-sm); font-weight: 500; text-align: left; white-space: nowrap; color: color-mix(in oklab, var(--color-paper) 80%, var(--color-ink)); border-bottom: 1.5px solid var(--color-accent-deep); }
.deals tbody th, .deals td { padding-block: var(--space-lg); vertical-align: baseline; border-bottom: var(--rule-hair) solid var(--color-rule); }
.deals tbody th { width: 34%; padding-right: var(--space-lg); font: 400 var(--text-2xl)/1.15 var(--font-display); text-align: left; }
.deals td { padding-right: var(--space-lg); font-size: var(--text-md); }
.deals td:last-child { width: 14%; padding-right: 0; font: 400 var(--text-xl)/1.2 var(--font-display); }
.deals__yes { color: var(--color-accent-deep); }

/* start: what to send, beside a thinned stand */
.start { padding-block: var(--section-gap-l) var(--section-gap); }
.start__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.start__text { display: grid; gap: var(--space-2xl); }
.facts { margin: 0; display: grid; }
.facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gap-columns); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.facts dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.facts dd { margin: 0; color: var(--color-ink); }
.start__photo { margin: 0; aspect-ratio: 4 / 3; min-height: 440px; }
.start__photo > img { object-position: 40% 50%; outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }

/* nou: services as rows */
.nou { padding-block: var(--section-gap-s) var(--section-gap); }
.nou__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl) var(--space-3xl); align-items: center; }
.nou__text { display: grid; gap: var(--space-xl); }
.nou__photo { margin: 0; aspect-ratio: 4 / 3; min-height: 360px; }
.nou__photo > img { outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.nou__rows { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-muted); }
.nou__rows > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--space-xs) var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nou__rows h3 { font-size: var(--text-2xl); }
.nou__rows p { color: var(--color-ink-2); }

/* kontakt */
.kontakt { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.kontakt__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.kontakt__list { margin: 0; display: grid; border-top: 1.5px solid var(--color-accent); }
.kontakt__list > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.kontakt__list dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.kontakt__value { margin: 0; font: 400 clamp(1.25rem, 6vw, var(--text-2xl))/1.2 var(--font-display); overflow-wrap: break-word; min-width: 0; }
.kontakt__value a { white-space: nowrap; }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* footer: statement */
.footer { padding-block: var(--section-gap) var(--space-2xl); }
.footer__statement { max-width: 22ch; font: 400 var(--text-display-s)/1.08 var(--font-display); text-wrap: balance; }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-muted); }
.footer__links { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); white-space: nowrap; }
.footer__links a:hover { color: var(--color-ink); }
.footer__links a:focus-visible, .footer__credits a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.footer__credits { margin-top: var(--space-lg); max-width: 70ch; font-size: var(--text-sm); color: var(--color-muted); }

/* coming-soon page */
.soon { position: relative; display: grid; min-height: 100dvh; }
.soon .hero__photo { min-height: 100dvh; }
.soon__plate { grid-area: 1 / 1; position: relative; z-index: 2; display: grid; align-content: space-between; padding-block: var(--space-xl) var(--space-2xl); background: linear-gradient(to top, color-mix(in oklab, var(--color-paper) 90%, transparent) 0%, color-mix(in oklab, var(--color-paper) 55%, transparent) 60%, color-mix(in oklab, var(--color-paper) 35%, transparent) 100%); }
.soon__inner { display: grid; gap: var(--space-lg); }
.soon h1 { max-width: 14ch; font-size: clamp(2.75rem, 5.5vw + 0.5rem, 6rem); line-height: 1.04; }
.soon .lead { color: var(--color-ink); }

/* responsive */
@media (max-width: 60rem) {
  .raied__grid, .ostame__head, .start__grid, .nou__grid, .kontakt__grid { grid-template-columns: minmax(0, 1fr); }
  .raied__head { position: static; }
  .nou__photo { min-height: 0; }
  .ostame__head .lead { justify-self: start; }
  .start__grid { gap: var(--space-xl); }
  .showcase__frame { aspect-ratio: 4 / 3; min-height: 0; }
  .start__photo { min-height: 0; }
}
@media (max-width: 40rem) {
  .nav__links { gap: var(--space-md); }
  .index > li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "kind" "line"; }
  .deals thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .deals, .deals tbody, .deals tr, .deals tbody th, .deals td { display: block; width: auto; }
  .deals tr { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .deals tbody th, .deals td { padding-block: var(--space-2xs); border: 0; }
  .deals td:last-child::before { content: "Maa jääb teile: "; font: 500 var(--text-sm)/1.4 var(--font-body); color: color-mix(in oklab, var(--color-paper) 80%, var(--color-ink)); }
  .nou__rows > li, .kontakt__list > div, .facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } }
.kontakt__value a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; transition: text-decoration-thickness var(--dur-short) var(--ease-out); }
.kontakt__value a:hover { text-decoration-thickness: 2px; }
.kontakt__value a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.soon__mail { font: 400 var(--text-xl)/1.2 var(--font-display); }
.soon__mail a { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.soon__mail a:hover { text-decoration-thickness: 2px; }
.soon__mail a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }