/* ==========================================================================
   POSA — Shared components: buttons, links, glossy logo, header,
   mobile menu, footer
   ========================================================================== */

/* ---------- Buttons -------------------------------------------------------
   Hover: a soft arch rises from the bottom and fills the pill
   (Softlife pattern). Pure CSS, so it costs nothing on touch devices. */
.btn {
  --btn-bg: var(--chianti);
  --btn-fg: var(--white);
  --btn-fill: var(--pink);
  --btn-fill-fg: var(--chianti);
  --btn-border: var(--chianti);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 3.125rem;              /* 50px — comfortable touch target */
  padding: .75rem 1.75rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  transition: color var(--dur-ui) var(--ease-soft);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  clip-path: inset(100% 30% 0 30% round 999px 999px 0 0);
  transition: clip-path .6s var(--ease-soft);
}
@media (hover: hover) {
  .btn:hover { color: var(--btn-fill-fg); }
  .btn:hover::before { clip-path: inset(0 0 0 0 round 999px 999px 0 0); }
}
.btn:focus-visible { outline-offset: 3px; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--chianti);
  --btn-fill: var(--chianti);
  --btn-fill-fg: var(--white);
}
.btn--light {               /* on chianti backgrounds */
  --btn-bg: var(--pink);
  --btn-fg: var(--chianti);
  --btn-fill: var(--white);
  --btn-fill-fg: var(--chianti);
  --btn-border: var(--pink);
}
.btn--sm { min-height: 2.75rem; padding: .55rem 1.25rem; font-size: .875rem; }

.btn__arrow { transition: transform var(--dur-ui) var(--ease-soft); }
@media (hover: hover) { .btn:hover .btn__arrow { transform: translateX(3px); } }

/* ---------- Text link with drawn underline ---------- */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding-block: .35em;
  font-weight: 500;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .6s var(--ease-soft);
}
@media (hover: hover) {
  .link:hover { background-size: 0 1px; background-position: 100% 100%; }
}

/* ---------- Glossy embossed logo ----------------------------------------- */
.logo { display: inline-block; line-height: 0; }
/* The gloss + emboss are BAKED into assets/logo/logo-posa-gloss*.svg
   (no CSS filter / drop-shadow at runtime → nothing to repaint on scroll). */
.logo__img { display: block; width: 100%; height: auto; }
@media (hover: hover) {
  .logo .logo__img { transition: opacity .3s; }
  .logo:hover .logo__img { opacity: .85; }
}
/* .logo__mark (CSS mask) is kept only for tiny non-fixed uses (Instagram avatar) */
.logo__mark {
  display: block;
  width: 100%;
  aspect-ratio: 602 / 574;
  /* Logo mark, vectorised from the client's file (source: assets/logo/logo-posa.svg).
     Inlined as a data URI so the mask also works when index.html is opened
     straight from disk (file:// blocks external mask images). */
  --logo-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1806 1722' version='1'%3E%3Cpath d='M 20 16 C 17 18,17 1706,20 1708 C 21 1709,193 1709,900 1709 C 1769 1709,1779 1708,1781 1707 C 1782 1705,1782 1588,1782 861 C 1782 398,1782 17,1781 17 C 1781 14,23 14,20 16 M 60 59 C 58 62,57 849,59 853 C 60 855,66 855,475 855 C 776 855,891 855,892 854 C 893 852,892 60,891 58 C 890 57,841 57,475 57 L 61 57 60 59 M 909 58 C 908 60,907 852,909 854 C 909 855,1737 855,1739 854 C 1741 852,1742 62,1739 59 C 1738 57,1724 57,1324 57 C 978 57,910 57,909 58 M 1290 192 C 1287 192,1280 193,1274 194 C 1264 195,1261 196,1244 200 C 1192 212,1157 229,1126 258 C 1108 274,1090 299,1082 317 C 1080 320,1079 322,1078 323 C 1077 325,1072 337,1070 344 C 1062 366,1057 389,1055 415 C 1052 465,1055 512,1064 538 C 1065 541,1067 548,1069 554 C 1071 559,1073 564,1073 565 C 1074 565,1074 566,1074 567 C 1074 569,1083 587,1091 599 C 1141 680,1234 718,1362 709 C 1467 702,1552 645,1582 562 C 1583 559,1585 553,1586 550 C 1590 541,1593 525,1596 507 C 1601 482,1602 427,1598 403 C 1589 344,1569 300,1535 265 C 1504 234,1473 216,1422 203 C 1410 199,1391 195,1387 195 C 1385 195,1380 194,1376 193 C 1367 192,1300 191,1290 192 M 262 202 C 261 202,261 314,261 451 C 261 688,261 699,263 701 C 266 703,418 702,419 700 C 420 699,420 667,420 619 C 420 544,420 540,422 539 C 423 538,453 538,501 538 C 584 537,585 537,602 531 C 604 530,609 529,612 528 C 638 519,665 498,683 474 C 687 469,688 466,695 454 C 700 445,706 425,708 414 C 709 410,709 407,710 407 C 710 406,711 401,712 394 C 718 341,701 283,669 249 C 649 228,618 211,590 206 C 585 205,580 203,578 203 C 574 201,262 200,262 202 M 1318 310 C 1317 310,1312 310,1306 311 C 1257 317,1223 355,1218 411 C 1213 467,1218 511,1231 536 C 1247 565,1272 583,1302 587 C 1314 589,1352 588,1359 586 C 1362 585,1366 583,1368 583 C 1375 581,1390 573,1396 568 C 1415 554,1430 526,1434 500 C 1435 496,1436 489,1436 484 C 1438 472,1438 426,1436 413 C 1435 407,1434 401,1434 400 C 1434 397,1428 377,1426 372 C 1426 371,1424 369,1424 367 C 1419 355,1403 336,1391 328 C 1381 320,1364 313,1354 312 C 1337 309,1323 309,1318 310 M 421 317 C 419 319,419 422,421 424 C 422 425,434 425,467 425 L 510 424 518 422 C 540 414,551 395,551 370 C 551 342,536 321,511 317 C 501 316,423 316,421 317 M 60 871 L 58 872 58 1268 C 58 1644,58 1664,60 1665 C 62 1667,889 1667,891 1665 C 893 1662,893 872,890 870 C 887 868,63 869,60 871 M 909 870 C 907 873,906 1663,909 1665 C 910 1666,964 1666,1324 1666 C 1733 1666,1738 1666,1740 1665 C 1741 1663,1741 1608,1741 1267 C 1741 878,1740 872,1739 870 C 1736 868,912 868,909 870 M 432 1014 C 404 1018,399 1019,384 1022 C 297 1043,246 1098,246 1173 C 246 1189,249 1206,252 1216 C 254 1219,255 1223,255 1223 C 255 1224,257 1228,259 1233 C 269 1253,286 1272,304 1284 C 308 1286,311 1288,312 1289 C 314 1291,328 1298,338 1302 C 355 1309,381 1317,408 1323 C 415 1325,425 1327,432 1328 C 438 1330,445 1331,448 1332 C 452 1332,459 1334,464 1335 C 468 1336,477 1338,482 1339 C 492 1341,495 1342,513 1348 C 538 1355,549 1366,549 1382 C 549 1399,538 1409,510 1415 C 489 1420,443 1417,426 1410 C 413 1405,403 1395,398 1384 C 396 1378,393 1364,393 1358 C 393 1351,397 1352,313 1352 C 249 1352,239 1353,238 1354 C 237 1356,237 1366,238 1379 C 244 1434,274 1478,322 1501 C 339 1509,340 1510,351 1513 C 373 1520,392 1525,410 1527 C 415 1528,423 1528,426 1529 C 454 1533,515 1532,540 1529 C 545 1528,551 1527,554 1527 C 582 1523,621 1510,642 1497 C 674 1477,699 1444,707 1414 C 714 1386,714 1380,714 1359 C 713 1348,713 1338,712 1334 C 709 1322,708 1318,705 1312 C 702 1302,694 1287,691 1284 C 691 1284,689 1281,686 1278 C 679 1269,662 1254,651 1248 C 633 1238,612 1230,594 1225 C 581 1221,550 1213,546 1212 C 545 1212,541 1211,537 1210 C 527 1208,507 1204,502 1203 C 500 1203,495 1202,492 1201 C 488 1200,479 1198,472 1196 C 425 1186,409 1176,409 1157 C 409 1141,423 1128,447 1123 C 460 1120,489 1120,502 1122 C 527 1128,545 1145,548 1165 C 549 1173,550 1175,552 1175 C 554 1176,587 1176,626 1176 L 698 1176 699 1174 C 701 1172,701 1169,700 1157 C 699 1143,698 1138,692 1121 C 682 1089,656 1060,619 1041 C 606 1035,599 1032,585 1028 C 581 1026,576 1025,575 1024 C 571 1023,555 1019,536 1016 C 516 1013,452 1012,432 1014 M 1232 1023 C 1230 1026,1229 1028,1221 1049 C 1218 1058,1215 1066,1214 1068 C 1214 1069,1213 1072,1212 1074 C 1210 1079,1206 1091,1205 1094 C 1204 1095,1201 1102,1199 1108 C 1197 1115,1193 1124,1191 1128 C 1190 1133,1188 1137,1188 1138 C 1188 1139,1188 1140,1187 1141 C 1187 1141,1186 1143,1185 1144 C 1185 1146,1182 1153,1180 1159 C 1177 1166,1173 1176,1171 1182 C 1169 1188,1165 1197,1163 1203 C 1161 1209,1159 1214,1159 1214 C 1159 1215,1153 1232,1151 1236 C 1150 1238,1147 1244,1145 1250 C 1141 1261,1138 1269,1135 1278 C 1133 1282,1131 1288,1130 1290 C 1129 1293,1127 1298,1126 1300 C 1125 1303,1122 1312,1118 1320 C 1115 1329,1112 1337,1111 1339 C 1109 1346,1102 1365,1096 1381 C 1092 1390,1089 1399,1088 1402 C 1087 1404,1085 1410,1083 1414 C 1081 1419,1079 1425,1078 1426 C 1078 1428,1076 1434,1074 1440 C 1072 1445,1070 1450,1069 1452 C 1069 1453,1066 1459,1064 1466 C 1061 1473,1058 1480,1057 1482 C 1056 1485,1055 1489,1054 1491 C 1052 1495,1046 1514,1044 1518 C 1043 1523,1041 1523,1126 1523 C 1188 1523,1205 1523,1206 1522 C 1207 1520,1223 1473,1228 1453 C 1229 1452,1230 1451,1230 1450 C 1232 1449,1413 1448,1414 1450 C 1414 1450,1417 1457,1420 1466 C 1423 1475,1425 1482,1426 1483 C 1427 1484,1427 1487,1428 1489 C 1429 1492,1432 1503,1436 1514 C 1440 1524,1430 1523,1525 1523 C 1620 1523,1612 1524,1609 1515 C 1606 1507,1604 1502,1603 1500 C 1600 1494,1592 1473,1592 1472 C 1592 1472,1591 1468,1589 1464 C 1587 1460,1583 1449,1580 1440 C 1577 1431,1573 1422,1573 1420 C 1572 1419,1568 1410,1565 1401 C 1562 1392,1559 1383,1558 1381 C 1557 1379,1555 1374,1553 1370 C 1552 1367,1549 1359,1547 1352 C 1544 1346,1541 1338,1539 1333 C 1537 1328,1534 1322,1533 1318 C 1531 1314,1529 1308,1528 1304 C 1526 1301,1524 1294,1522 1290 C 1521 1287,1518 1281,1517 1277 C 1516 1273,1513 1266,1511 1262 C 1505 1246,1504 1243,1500 1232 C 1498 1227,1496 1220,1494 1217 C 1493 1214,1491 1210,1491 1208 C 1490 1204,1487 1197,1485 1193 C 1483 1189,1481 1181,1477 1172 C 1476 1168,1474 1164,1474 1164 C 1474 1163,1473 1161,1473 1160 C 1472 1158,1471 1154,1469 1150 C 1467 1147,1466 1143,1466 1143 C 1466 1142,1466 1141,1465 1140 C 1464 1140,1464 1139,1464 1138 C 1464 1137,1462 1133,1461 1129 C 1459 1124,1455 1115,1452 1108 C 1450 1100,1447 1092,1446 1090 C 1445 1088,1441 1079,1438 1071 C 1436 1063,1432 1054,1431 1051 C 1429 1047,1428 1044,1428 1044 C 1428 1043,1427 1041,1427 1040 C 1426 1039,1424 1035,1423 1031 C 1422 1028,1420 1024,1419 1023 L 1417 1021 1326 1021 L 1234 1021 1232 1023 M 1322 1160 C 1321 1160,1321 1162,1321 1164 C 1320 1166,1318 1174,1315 1182 C 1313 1189,1311 1196,1311 1197 C 1311 1198,1310 1202,1308 1206 C 1306 1210,1304 1218,1302 1224 C 1300 1230,1299 1235,1298 1236 C 1298 1237,1297 1240,1296 1244 C 1295 1247,1293 1252,1292 1256 C 1290 1263,1287 1271,1284 1282 C 1283 1285,1281 1293,1279 1300 C 1270 1328,1268 1334,1270 1335 C 1273 1337,1375 1336,1377 1335 C 1379 1333,1379 1333,1376 1324 C 1371 1308,1367 1296,1366 1293 C 1366 1292,1364 1286,1362 1280 C 1360 1274,1358 1268,1357 1266 C 1357 1264,1355 1260,1354 1256 C 1354 1253,1352 1249,1352 1248 C 1352 1247,1350 1241,1348 1234 C 1346 1228,1344 1220,1343 1216 C 1341 1212,1339 1204,1338 1199 C 1336 1194,1334 1186,1332 1182 C 1331 1179,1330 1173,1329 1171 C 1328 1169,1328 1166,1327 1164 C 1327 1163,1326 1162,1326 1161 C 1325 1159,1323 1158,1322 1160' fill-rule='evenodd'/%3E%3C/svg%3E");
  -webkit-mask: var(--logo-mask) center / contain no-repeat;
          mask: var(--logo-mask) center / contain no-repeat;
  background:
    /* moving gloss band */
    linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, 0) 58%) 130% 0 / 260% 100% no-repeat,
    /* static top highlight → lacquer feel */
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 42%),
    /* chianti body */
    radial-gradient(130% 110% at 28% 12%, var(--chianti-hi) 0%, var(--chianti) 48%, var(--chianti-lo) 100%);
}
.logo--full .logo__mark {
  aspect-ratio: 602 / 633;
  /* full lockup (with "SOCIAL MEDIA ARCHITECT"); needs http(s) to load */
  -webkit-mask-image: url("../assets/logo/logo-posa-full.svg");
          mask-image: url("../assets/logo/logo-posa-full.svg");
}
/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 300;
  padding: .7rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--chianti);
  color: var(--white);
  font-size: .875rem;
  transform: translateY(-160%);
  transition: transform .3s var(--ease-soft);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Header ---------- */
site-header, site-footer { display: contents; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--white);          /* solid: no backdrop-filter (repaints every scroll frame) */
  border-bottom: 1px solid transparent;
  transition: transform .6s var(--ease-soft), border-color .4s, background-color .4s;
}
.site-header.is-scrolled { border-bottom-color: var(--chianti-12); }
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.site-header__logo { width: 3.25rem; flex: none; }

.site-nav { margin-left: auto; display: none; }
.site-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: clamp(1.25rem, 2vw, 2.25rem); row-gap: 0; }
.site-nav a {
  position: relative;
  font-size: .9375rem;
  padding-block: .4rem;
  color: var(--chianti-80);
  transition: color .3s;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .1rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--ease-soft);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--chianti); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.site-header__cta { margin-left: auto; display: none; }

/* Hamburger */
.menu-toggle {
  margin-left: auto;
  width: 3rem; height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--chianti-12);
  transition: background-color .3s;
}
.menu-toggle:hover { background: var(--pink-soft); }
.menu-toggle__bars, .menu-toggle__bars::before {
  display: block;
  width: 1.15rem;
  height: 1px;
  background: var(--chianti);
}
.menu-toggle__bars { position: relative; transform: translateY(-3px); }
.menu-toggle__bars::before { content: ""; position: absolute; top: 7px; width: .75rem; right: 0; }

@media (min-width: 640px) {
  .site-header__cta { display: inline-flex; }
  .menu-toggle { margin-left: 0; }
}
@media (min-width: 1080px) {
  .site-nav { display: block; }
  .site-header__cta { margin-left: var(--s-4); }
  .menu-toggle { display: none; }
  .site-header__logo { width: 3.75rem; }
}

/* ---------- Mobile menu (full-screen pink sheet) ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--pink);
  color: var(--chianti);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s var(--ease-arch), visibility 0s linear .9s;
}
.menu.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path .9s var(--ease-arch), visibility 0s;
}
.menu__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--s-6);
}
.menu__top {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu__close {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: 1px solid rgba(85, 18, 18, .25);
  display: grid;
  place-items: center;
}
.menu__close svg { width: 1rem; height: 1rem; }

.menu__list { margin: var(--s-6) 0 var(--s-7); }
.menu__list li { border-top: 1px solid rgba(85, 18, 18, .18); }
.menu__list li:last-child { border-bottom: 1px solid rgba(85, 18, 18, .18); }
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: .85rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.menu__list a[aria-current="page"] { font-style: italic; }
.menu__num { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; opacity: .7; min-width: 1.6rem; }

/* staggered entrance of links */
.menu__list li, .menu__foot {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .5s, transform .9s var(--ease-soft);
}
.menu.is-open .menu__list li, .menu.is-open .menu__foot {
  opacity: 1;
  transform: none;
  transition-delay: calc(.3s + var(--i, 0) * .06s);
}
.menu__foot { margin-top: auto; display: grid; gap: var(--s-5); }
.menu__contacts { display: grid; gap: .35rem; font-size: var(--fs-small); }
.menu__contacts a { width: fit-content; }

html.menu-open { overflow: hidden; }

@media (min-width: 1080px) { .menu { display: none; } }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: var(--chianti) url("../assets/img/grain.png") 0 0 / 160px 160px;
  color: var(--white);
  padding-top: clamp(4.5rem, 3rem + 6vw, 8rem);
  padding-bottom: var(--s-6);
  overflow: hidden;
}
.site-footer a { transition: color .3s; }
.site-footer a:hover { color: var(--pink); }

.footer__grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
}
.footer__brand { display: grid; gap: var(--s-5); align-content: start; }
.footer__logo { width: 7.5rem; }
.footer__tagline {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  max-width: 14em;
}
.footer__tagline .script { color: var(--pink); }
.footer__title {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: var(--s-4);
}
.footer__links { display: grid; gap: .45rem; font-size: var(--fs-small); }
.footer__links a { display: inline-block; padding-block: .15rem; }

.footer__bottom {
  margin-top: clamp(3.5rem, 2rem + 6vw, 6rem);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(240, 176, 187, .25);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

@media (min-width: 720px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer__brand { grid-column: auto; }
}

/* ---------- Photos: natural colour, no filters --------------------------
   (The old duotone used grayscale + multiply/lighten blend layers: muddy
   photos and a repaint on every scroll frame. Removed.) */
.photo {
  position: relative;
  overflow: hidden;
  background: var(--pink-soft);
  isolation: isolate;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ==========================================================================
   MOTION SYSTEM — shared UI (loader, cursor, curtain, transitions, labels)
   ========================================================================== */

/* ---------- Intro loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--chianti);
  clip-path: inset(0 0 0 0);
  cursor: pointer;
}
html:not(.show-loader) .loader,
html:not(.js-motion) .loader { display: none; }
html.loader-active, html.loader-active body { overflow: hidden; }
.loader__inner { position: relative; display: grid; justify-items: center; gap: 1.1rem; width: min(70vw, 17rem); }
.loader__drawing { width: 100%; color: var(--chianti); }
.loader__logo { position: absolute; top: 46%; left: 50%; width: 3.2rem; transform: translate(-50%, -50%); }
.loader__caption {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  letter-spacing: -.01em;
}
.loader__caption .script { font-size: 1.35em; }
.loader__bar { display: block; width: 100%; height: 1px; background: var(--chianti-12); overflow: hidden; }
.loader__bar span { display: block; height: 100%; background: var(--chianti); transform-origin: left; transform: scaleX(0); }
/* The loader runs on CSS alone (no wait for the scripts): lines draw 0–.32s,
   then the sheet lifts .3–.6s while the hero is already animating underneath.
   motion.js only removes it afterwards. */
.show-loader .loader { animation: loader-lift .3s .3s cubic-bezier(.76, 0, .24, 1) forwards; }
.show-loader .loader .ld { stroke-dasharray: 1; stroke-dashoffset: 1; animation: loader-draw .32s cubic-bezier(.65, 0, .35, 1) forwards; }
.show-loader .loader__logo, .show-loader .loader__caption { opacity: 0; animation: loader-fade .22s .04s ease-out forwards; }
.show-loader .loader__bar span { animation: loader-bar .32s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes loader-draw { to { stroke-dashoffset: 0; } }
@keyframes loader-fade { to { opacity: 1; } }
@keyframes loader-bar  { to { transform: scaleX(1); } }
@keyframes loader-lift { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }

/* ---------- Scroll-driven background colour shifts ----------
   With JS, sections become transparent and the body colour tweens between
   them (js/motion.js §4). Without JS / reduced motion, each section keeps its
   own static background. */
.section-ground { position: relative; isolation: isolate; background: none !important; }
/* JS inserts .ground-layer as the first child; only its TRANSFORM is
   scrubbed (scaleX ~.94 → 1), never clip-path or radius on a full-width box. */
.ground-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ground-color) url("../assets/img/grain.png") 0 0 / 160px 160px;
  transform-origin: 50% 0;
  pointer-events: none;
}
.section-ground .ground { display: none; }

/* ---------- Button label swap (sosocial) ---------- */
.btn__label { position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.25; }
.btn__label-in { position: relative; display: block; transition: transform .7s var(--ease-soft); }
.btn__label-copy { position: absolute; left: 0; top: 100%; width: 100%; }
@media (hover: hover) {
  .btn:hover .btn__label-in { transform: translateY(-100%); }
}

/* ---------- Custom cursor (fine pointer only; JS adds .has-cursor) ---------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 450;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--chianti);
  pointer-events: none;
  transition: width .45s var(--ease-soft), height .45s var(--ease-soft), background-color .3s, border-color .3s, opacity .3s;
  border: 1px solid transparent;
}
.cursor.is-link { width: 46px; height: 46px; background: rgba(240, 176, 187, .35); border-color: var(--chianti); }
.cursor.is-media { width: 76px; height: 76px; background: rgba(85, 18, 18, .12); border-color: var(--chianti); }
.cursor.is-dark { background: var(--pink); }
.cursor.is-dark.is-link, .cursor.is-dark.is-media { background: rgba(240, 176, 187, .2); border-color: var(--pink); }
.cursor.is-hidden { opacity: 0; }
.has-cursor body, .has-cursor a, .has-cursor button { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }

/* ---------- Page transition curtain (fallback when no cross-doc VT) ---------- */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 420;
  background: var(--chianti);
  pointer-events: none;
  transform: translateY(100%);
}
.curtain::before {          /* soft pink leading edge */
  content: "";
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 14px;
  background: var(--pink);
}

/* ---------- Native cross-document View Transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition { background: var(--chianti); }
  ::view-transition-old(root) { animation: vt-out .75s cubic-bezier(.65, 0, .35, 1) both; }
  ::view-transition-new(root) { animation: vt-in 1s cubic-bezier(.76, 0, .24, 1) both; }
}
@keyframes vt-out { to { transform: translateY(-4%) scale(.97); opacity: .35; } }
@keyframes vt-in  { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Header: current section label (Marginalia), desktop only ---------- */
.site-header__section {
  display: none;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chianti-60);
  white-space: nowrap;
}
.site-header__section:not(:empty)::before { content: "— "; }
@media (min-width: 1180px) { .site-header__section { display: inline-block; } }

/* ---------- Footer: giant tagline (Softlife giant wordmark, adapted) ---------- */
.footer__tagline--small { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); max-width: none; }
.footer__giant {
  margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.6rem, .8rem + 7.6vw, 9.5rem);
  line-height: .95;
  letter-spacing: -.035em;
  color: var(--white);
}
.footer__giant .script { color: var(--pink); font-size: 1.1em; }