/* sarkikoski.fi – two boards side by side, lake blue (Softworks) and reed
   green (Maatila), with a light trim board running across both.
   One family (Archivo, variable wght 100–900, wdth 62–125 %), five colours. */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    src: url('../fonts/archivo-latin-standard-normal.woff2') format('woff2-variations'),
         url('../fonts/archivo-latin-standard-normal.woff2') format('woff2');
}

:root {
    --oxblood: #1b3a4b;  /* Softworks board (lake) */
    --ochre:   #4f6a3a;  /* Maatila board (reed) */
    --trim:    #eef0ec;  /* type on the boards, the trim band, contact band */
    --rose:    #dee3da;  /* quieter type on the boards */
    --tar:     #0c1a22;  /* type on trim */
    --soot:    #646d71;  /* quieter type on trim */

    --pad: clamp(1.5rem, 4.4vw, 5rem);
    /* Text width of one board (container units would stop the subgrid). */
    --cw: calc(50vw - 2 * var(--pad));

    color-scheme: light;
    font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--trim);
    color: var(--tar);
    font-kerning: normal;
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, p, dl, dd, address, table { margin: 0; }
address { font-style: normal; }

a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.16em; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.nw { white-space: nowrap; }

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

/* ---------- Language switch: the only top-level control ---------- */

.lang {
    position: absolute;
    top: calc(var(--pad) * 0.5);
    right: var(--pad);
    z-index: 2;
    color: var(--trim);
    font-size: 1rem;
    font-weight: 650;
    text-decoration-thickness: 2px;
}

/* ---------- The diptych: two boards, one shared row structure ---------- */

.diptych {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, auto);
}

.board {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    padding: calc(var(--pad) * 1.6) var(--pad) calc(var(--pad) * 1.2);
    color: var(--trim);
}

.board--maatila   { grid-column: 2; background: var(--ochre); }
.board--softworks { grid-column: 1; background: var(--oxblood); }

.board__title {
    grid-row: 1;
    margin-left: -0.04em;
    padding-bottom: clamp(2rem, 4.5vh, 3.5rem);
    /* Sized to fit one line in its half; the rem floor keeps text-only zoom working. */
    font-size: max(1.5rem, var(--cw) * 0.11);
    font-weight: 780;
    font-stretch: 86%;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.board__intro {
    grid-row: 2;
    padding-bottom: 2rem;
}
.board__intro p {
    font-size: clamp(1.25rem, 1.8vw, 1.75rem);
    font-weight: 480;
    line-height: 1.25;
    max-width: 42ch;
    text-wrap: balance;
}

/* ---------- The trim band: one white board nailed across both halves ---------- */

.band {
    grid-row: 3;
    margin-inline: calc(var(--pad) * -1);
    padding: 0.95rem var(--pad) 1.05rem;
    background: var(--trim);
    font-size: clamp(1.625rem, calc(var(--cw) * 0.05), 3.25rem);
    font-weight: 860;
    font-stretch: 62%;
    line-height: 1.02;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}
.board--maatila   .band { color: var(--ochre); }
.board--softworks .band { color: var(--oxblood); }

/* Sold out: the trim board is missing from the Maatila half. */
.board--maatila .band--sold_out { background: var(--tar); color: var(--trim); }

/* ---------- Rows: price list (table) and service list (dl) share one rhythm ---------- */

.board__rows { grid-row: 4; padding-top: 1.75rem; }
.board__rows > * + * { margin-top: 1.25rem; }

.note { font-size: 1.25rem; font-weight: 650; max-width: 36ch; }

.rows {
    width: 100%;
    border-collapse: collapse;
}

/* Every row has the same pitch on both boards; the hairline only closes a
   group (one honey type with several sizes). */
.rows th, .rows td {
    padding: 0.8rem 0;
    border-bottom: 1px solid transparent;
    vertical-align: baseline;
    text-align: left;
    line-height: 1.25;
}
.rows, .services { border-top: 2px solid var(--trim); }
.rows tbody tr:last-child > *, .rows th[rowspan] { border-bottom-color: var(--rose); }

.rows th {
    width: 100%;
    padding-right: 1.5rem;
}

.rows th, .services dt { font-size: 1.3125rem; font-weight: 700; }

.rows .size, .services dd {
    color: var(--rose);
    font-size: 1.1875rem;
    text-align: right;
}
.rows .size { padding-right: 1.5rem; white-space: nowrap; }

/* Service list: name left, detail right, the same pitch and hairlines as the price rows. */
.services {
    display: grid;
    grid-template-columns: auto 1fr;
    line-height: 1.25;
}
.services dt, .services dd { padding: 0.8rem 0; border-bottom: 1px solid var(--rose); }
.services dd { padding-left: 1.5rem; }

/* Desktop: keep honey and service names on one line; long details wrap instead. */
@media (min-width: 52.01rem) {
    .rows th, .services dt { white-space: nowrap; }
}

.rows .price {
    text-align: right;
    font-size: 1.3125rem;
    font-weight: 800;
    white-space: nowrap;
}
.rows .price--ask { font-size: 1.125rem; font-weight: 600; }

.board__close {
    grid-row: 5;
    padding-top: 1.5rem;
    font-size: 1.125rem;
    font-weight: 500;
    max-width: 44ch;
}
.board__close a { font-weight: 700; white-space: nowrap; }

/* ---------- Contact band ---------- */

.contact {
    background: var(--trim);
    color: var(--tar);
    padding: calc(var(--pad) * 1.1) var(--pad) var(--pad);
}

.contact__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 2.5rem var(--pad);
    align-items: start;
}

.contact__col { font-size: 1.125rem; line-height: 1.5; }
.contact__col > * + * { margin-top: 1rem; }

.phone {
    font-size: clamp(2.75rem, 5.6vw, 5.5rem);
    font-weight: 820;
    font-stretch: 78%;
    line-height: 0.95;
    letter-spacing: -0.015em;
    white-space: nowrap;
}
.phone a { color: var(--ochre); text-decoration: none; }
.phone a:hover { text-decoration: underline; text-decoration-thickness: 0.06em; }

.actions { font-size: 1.375rem; font-weight: 750; color: var(--soot); }
.actions a { color: var(--ochre); }

.hint { max-width: 38ch; font-size: 1rem; }

.more { font-weight: 700; }

.mails dt { font-size: 0.875rem; color: var(--soot); }
.mails dt:not(:first-child) { margin-top: 0.75rem; }
.mails dd { font-weight: 600; overflow-wrap: anywhere; }

.company {
    margin-top: calc(var(--pad) * 1.2);
    font-size: 0.875rem;
    color: var(--soot);
}

/* ---------- 404: the same diptych ---------- */

.diptych--lost { grid-template-rows: auto; min-height: 80vh; min-height: 80svh; }
.diptych--lost .board { grid-row: 1; display: flex; flex-direction: column; justify-content: flex-end; }

.lost__code {
    font-size: max(6rem, var(--cw) * 0.62);
    font-weight: 850;
    font-stretch: 70%;
    line-height: 0.8;
    letter-spacing: -0.01em;
    margin-left: -0.05em;
}

.lost__text { font-size: clamp(1.5rem, calc(var(--cw) * 0.036), 2.5rem); font-weight: 550; line-height: 1.2; }
.lost__text > * + * { margin-top: 0.5rem; }
.lost__text a { font-weight: 750; }

/* ---------- Narrow screens: stack, Maatila first ---------- */

@media (max-width: 52rem) {
    :root { --cw: calc(100vw - 2 * var(--pad)); }
    .diptych, .diptych--lost { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
    .board--maatila, .board--softworks, .diptych--lost .board { grid-column: 1; grid-row: auto; }
    .board { display: flex; flex-direction: column; padding-top: 4.5rem; }
    .rows th, .services dt { font-size: 1.125rem; }
    .contact__grid { grid-template-columns: 1fr; }
    .lang { top: 1.25rem; }
}

/* Very narrow: the service detail goes under its name. */
@media (max-width: 30rem) {
    .services { grid-template-columns: 1fr; }
    .services dt { padding-bottom: 0; border-bottom: 0; }
    .services dd { padding-top: 0.2rem; padding-left: 0; text-align: left; }
}

@media (min-width: 52.01rem) and (max-width: 72rem) {
    .contact__grid { grid-template-columns: 1fr 1fr; }
    .contact__col--phone { grid-column: 1 / -1; }
}