/* ============================================================
OCA decor kit: "sunlit coastal scrapbook"
Doodles, dividers, inner-page hero, photo frames, patterned
bands, icon helpers and scroll motion. PHP helpers live in
app/partials/decor.php (usage notes at the top of that file).
============================================================ */
/* --- Tokens ------------------------------------------------ */
:root {
/* Pastel tints + deeper inks (icon sets, frames, tape). Ink on tint is >= 3:1. */
--tint-sky: #DCEBFA; --ink-sky: #3E79B5;
--tint-coral: #FFDCD3; --ink-coral: #D2341D;
--tint-sun: #FFE7AE; --ink-sun: #A86A00;
--tint-sea: #D3EEE3; --ink-sea: #2A7F55;
--tint-lilac: #E9DEFA; --ink-lilac: #7458A3;
--tint-peach: #FFE0C7; --ink-peach: #C2620A;
--ease-soft: cubic-bezier(.22, .61, .36, 1);
--paper-shadow: 0 1px 2px rgba(98, 42, 20, .12), 0 14px 28px -10px rgba(98, 42, 20, .32);
--overlap: clamp(56px, 8vw, 112px);
/* Warm navy photo overlay (shared look with the home hero). Keeps white text >= 4.5:1. */
--overlay-warm-navy:
radial-gradient(ellipse 60% 56% at 50% 62%, rgba(12, 30, 54, .5) 0%, rgba(12, 30, 54, 0) 74%),
linear-gradient(180deg, rgba(10, 26, 48, .68) 0%, rgba(14, 34, 60, .4) 30%, rgba(18, 42, 72, .4) 66%, rgba(22, 50, 86, .55) 100%),
linear-gradient(115deg, rgba(62, 121, 181, .3) 0%, rgba(62, 121, 181, .08) 55%, rgba(150, 74, 30, .24) 100%);
}
/* Patterned band tiles (hand-drawn, generated) */
/* @generated-bands-begin */
:root {
--band-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke-width='1.8' stroke-linecap='round'%3E%3Cg transform='translate(110.7 131.7) rotate(-15) scale(1.5)' stroke='%23D06A06' stroke-opacity='.5'%3E%3Cpath d='M-8 2c1.6-3.4 3.4-3.6 4.6-.6s3.2 3.2 4.6 0 3.2-3.4 4.6-.4'/%3E%3C/g%3E%3Cg transform='translate(203.1 113.3) rotate(-46) scale(1.5)' stroke='%23FFFFFF' stroke-opacity='.6'%3E%3Cpath d='M-11 1c2.2-3.6 4.4-3.6 5.5 0s3.3 3.6 5.5 0 3.3-3.6 5.5 0 3.3 3.6 5.5 0'/%3E%3C/g%3E%3Cg transform='translate(40.4 81.5) rotate(58) scale(1.5)' stroke='%23FFD873'%3E%3Cpath d='M-11 1c2.2-3.6 4.4-3.6 5.5 0s3.3 3.6 5.5 0 3.3-3.6 5.5 0 3.3 3.6 5.5 0'/%3E%3C/g%3E%3Cg transform='translate(39.8 180.7) rotate(-17) scale(1.5)' stroke='%23D06A06' stroke-opacity='.5'%3E%3Cpath d='M-8 2c1.6-3.4 3.4-3.6 4.6-.6s3.2 3.2 4.6 0 3.2-3.4 4.6-.4'/%3E%3C/g%3E%3Cg transform='translate(157.9 30.2) rotate(-54) scale(1.5)' stroke='%23FFFFFF' stroke-opacity='.6'%3E%3Cpath d='M-11 1c2.2-3.6 4.4-3.6 5.5 0s3.3 3.6 5.5 0 3.3-3.6 5.5 0 3.3 3.6 5.5 0'/%3E%3C/g%3E%3Cg transform='translate(214.5 211.1) rotate(-37) scale(1.5)' stroke='%23FFD873'%3E%3Cpath d='M-11 1c2.2-3.6 4.4-3.6 5.5 0s3.3 3.6 5.5 0 3.3-3.6 5.5 0 3.3 3.6 5.5 0'/%3E%3C/g%3E%3Cg transform='translate(78.7 35.8) rotate(36) scale(1.5)' stroke='%23D06A06' stroke-opacity='.5'%3E%3Cpath d='M-8 2c1.6-3.4 3.4-3.6 4.6-.6s3.2 3.2 4.6 0 3.2-3.4 4.6-.4'/%3E%3C/g%3E%3Cg transform='translate(134.6 191.8) rotate(24) scale(1.5)' stroke='%23FFFFFF' stroke-opacity='.6'%3E%3Cpath d='M-11 1c2.2-3.6 4.4-3.6 5.5 0s3.3 3.6 5.5 0 3.3-3.6 5.5 0 3.3 3.6 5.5 0'/%3E%3C/g%3E%3Cg transform='translate(215.3 50.3) rotate(66) scale(1.5)' stroke='%23FFD873'%3E%3Cpath d='M-11 1c2.2-3.6 4.4-3.6 5.5 0s3.3 3.6 5.5 0 3.3-3.6 5.5 0 3.3 3.6 5.5 0'/%3E%3C/g%3E%3Cg transform='translate(149.1 88) rotate(57) scale(1.5)' stroke='%23D06A06' stroke-opacity='.5'%3E%3Cpath d='M-8 2c1.6-3.4 3.4-3.6 4.6-.6s3.2 3.2 4.6 0 3.2-3.4 4.6-.4'/%3E%3C/g%3E%3Ccircle cx='114.4' cy='154.6' r='2' fill='%23FFFFFF' fill-opacity='.55'/%3E%3Ccircle cx='156.6' cy='41.4' r='2' fill='%23FFFFFF' fill-opacity='.55'/%3E%3Ccircle cx='12.4' cy='92.4' r='2' fill='%23FFFFFF' fill-opacity='.55'/%3E%3Ccircle cx='70.3' cy='188.3' r='2' fill='%23FFFFFF' fill-opacity='.55'/%3E%3Ccircle cx='161.9' cy='142.3' r='2' fill='%23FFFFFF' fill-opacity='.55'/%3E%3Ccircle cx='22.9' cy='190.1' r='2' fill='%23FFFFFF' fill-opacity='.55'/%3E%3Ccircle cx='84.1' cy='99' r='2' fill='%23FFFFFF' fill-opacity='.55'/%3E%3Ccircle cx='195.3' cy='14.1' r='2' fill='%23FFFFFF' fill-opacity='.55'/%3E%3Ccircle cx='227.2' cy='218.3' r='2' fill='%23FFFFFF' fill-opacity='.55'/%3E%3C/svg%3E");
--band-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke-width='2' stroke-linecap='round'%3E%3Cg transform='translate(49 160.2) rotate(-17)' stroke='%232D5A8A'%3E%3Cpath d='M0-6.5 1.8-2 6.6-1.8 2.9 1.2 4.1 6 0 3.3-4.1 6-2.9 1.2-6.6-1.8-1.8-2Z' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(148.6 115.6) rotate(-19)' stroke='%232D5A8A' stroke-opacity='.75'%3E%3Cpath d='M0 5.6C-1.6 4.4-6 1.4-6-1.9-6-3.9-4.5-5.2-2.9-5.2-1.6-5.2-.6-4.4 0-3.3.6-4.4 1.6-5.2 2.9-5.2 4.5-5.2 6-3.9 6-1.9 6 1.4 1.6 4.4 0 5.6Z' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(121.1 64) rotate(13)' stroke='%232F5E91'%3E%3Cpath d='M-10 1c2-2.6 4.2-2.6 5.6-.4S-1 3.2.6 .6 4.4-2 6 .4 9 2.6 10 1'/%3E%3C/g%3E%3Cg transform='translate(14.7 92.7) rotate(-26)' stroke='%232D5A8A' stroke-opacity='.55'%3E%3Cpath d='M0-6.5 1.8-2 6.6-1.8 2.9 1.2 4.1 6 0 3.3-4.1 6-2.9 1.2-6.6-1.8-1.8-2Z' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(182.3 63.2) rotate(5)' stroke='%232D5A8A'%3E%3Cpath d='M0-6.5 1.8-2 6.6-1.8 2.9 1.2 4.1 6 0 3.3-4.1 6-2.9 1.2-6.6-1.8-1.8-2Z' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(63.3 23) rotate(5)' stroke='%232D5A8A' stroke-opacity='.75'%3E%3Cpath d='M0 5.6C-1.6 4.4-6 1.4-6-1.9-6-3.9-4.5-5.2-2.9-5.2-1.6-5.2-.6-4.4 0-3.3.6-4.4 1.6-5.2 2.9-5.2 4.5-5.2 6-3.9 6-1.9 6 1.4 1.6 4.4 0 5.6Z' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(225.5 170.6) rotate(14)' stroke='%232F5E91'%3E%3Cpath d='M-10 1c2-2.6 4.2-2.6 5.6-.4S-1 3.2.6 .6 4.4-2 6 .4 9 2.6 10 1'/%3E%3C/g%3E%3Cg transform='translate(40.5 210.7) rotate(4)' stroke='%232D5A8A' stroke-opacity='.55'%3E%3Cpath d='M0-6.5 1.8-2 6.6-1.8 2.9 1.2 4.1 6 0 3.3-4.1 6-2.9 1.2-6.6-1.8-1.8-2Z' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(86.7 116.8) rotate(25)' stroke='%232D5A8A'%3E%3Cpath d='M0-6.5 1.8-2 6.6-1.8 2.9 1.2 4.1 6 0 3.3-4.1 6-2.9 1.2-6.6-1.8-1.8-2Z' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(174 175.7) rotate(-13)' stroke='%232D5A8A' stroke-opacity='.75'%3E%3Cpath d='M0 5.6C-1.6 4.4-6 1.4-6-1.9-6-3.9-4.5-5.2-2.9-5.2-1.6-5.2-.6-4.4 0-3.3.6-4.4 1.6-5.2 2.9-5.2 4.5-5.2 6-3.9 6-1.9 6 1.4 1.6 4.4 0 5.6Z' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(166.2 224.5) rotate(-24)' stroke='%232F5E91'%3E%3Cpath d='M-10 1c2-2.6 4.2-2.6 5.6-.4S-1 3.2.6 .6 4.4-2 6 .4 9 2.6 10 1'/%3E%3C/g%3E%3Cg transform='translate(87.8 210.5) rotate(4)' stroke='%232D5A8A' stroke-opacity='.55'%3E%3Cpath d='M0-6.5 1.8-2 6.6-1.8 2.9 1.2 4.1 6 0 3.3-4.1 6-2.9 1.2-6.6-1.8-1.8-2Z' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(201.2 118.1) rotate(-13)' stroke='%232D5A8A'%3E%3Cpath d='M0-6.5 1.8-2 6.6-1.8 2.9 1.2 4.1 6 0 3.3-4.1 6-2.9 1.2-6.6-1.8-1.8-2Z' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(125.4 168.5) rotate(29)' stroke='%232D5A8A' stroke-opacity='.75'%3E%3Cpath d='M0 5.6C-1.6 4.4-6 1.4-6-1.9-6-3.9-4.5-5.2-2.9-5.2-1.6-5.2-.6-4.4 0-3.3.6-4.4 1.6-5.2 2.9-5.2 4.5-5.2 6-3.9 6-1.9 6 1.4 1.6 4.4 0 5.6Z' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(223.7 15.4) rotate(25)' stroke='%232F5E91'%3E%3Cpath d='M-10 1c2-2.6 4.2-2.6 5.6-.4S-1 3.2.6 .6 4.4-2 6 .4 9 2.6 10 1'/%3E%3C/g%3E%3Cg transform='translate(62.1 72.6) rotate(11)' stroke='%232D5A8A' stroke-opacity='.55'%3E%3Cpath d='M0-6.5 1.8-2 6.6-1.8 2.9 1.2 4.1 6 0 3.3-4.1 6-2.9 1.2-6.6-1.8-1.8-2Z' stroke-linejoin='round'/%3E%3C/g%3E%3Ccircle cx='222.6' cy='39.4' r='1.6' fill='%232D5A8A'/%3E%3Ccircle cx='13.3' cy='231.7' r='1.6' fill='%232D5A8A'/%3E%3Ccircle cx='49.3' cy='35' r='1.6' fill='%232D5A8A'/%3E%3Ccircle cx='153.9' cy='85.4' r='1.6' fill='%232D5A8A'/%3E%3Ccircle cx='222.9' cy='79.6' r='1.6' fill='%232D5A8A'/%3E%3Ccircle cx='142.7' cy='216.8' r='1.6' fill='%232D5A8A'/%3E%3Ccircle cx='166.6' cy='18.9' r='1.6' fill='%232D5A8A'/%3E%3Ccircle cx='205.4' cy='140.1' r='1.6' fill='%232D5A8A'/%3E%3Ccircle cx='218.1' cy='181.4' r='1.6' fill='%232D5A8A'/%3E%3Ccircle cx='164.4' cy='145.2' r='1.6' fill='%232D5A8A'/%3E%3C/svg%3E");
--band-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168'%3E%3Ccircle cx='9.9' cy='25.1' r='3' fill='%237A3D24'/%3E%3Cg transform='translate(67.7 111.9) rotate(17)' fill='%237A3D24'%3E%3Crect x='-3.1' y='-3.1' width='6.3' height='6.3' rx='1'/%3E%3C/g%3E%3Ccircle cx='43.2' cy='123.2' r='1.8' fill='%23D9A441' fill-opacity='.38'/%3E%3Cg transform='translate(108.6 28.8) rotate(-18)' fill='%23D9A441' fill-opacity='.26'%3E%3Crect x='-2.3' y='-2.3' width='4.7' height='4.7' rx='.8'/%3E%3C/g%3E%3Ccircle cx='89.4' cy='76.1' r='3.2' fill='%237A3D24'/%3E%3Cg transform='translate(70.7 159.4) rotate(17)' fill='%237A3D24'%3E%3Crect x='-3.5' y='-3.5' width='7' height='7' rx='1'/%3E%3C/g%3E%3Ccircle cx='150.8' cy='69.2' r='2.1' fill='%23D9A441' fill-opacity='.38'/%3E%3Cg transform='translate(38.2 58.2) rotate(4)' fill='%23D9A441' fill-opacity='.26'%3E%3Crect x='-2.2' y='-2.2' width='4.3' height='4.3' rx='.8'/%3E%3C/g%3E%3Ccircle cx='153' cy='135.5' r='3.3' fill='%237A3D24'/%3E%3Cg transform='translate(62 39) rotate(2)' fill='%237A3D24'%3E%3Crect x='-3.1' y='-3.1' width='6.2' height='6.2' rx='1'/%3E%3C/g%3E%3Ccircle cx='135.1' cy='158.3' r='2' fill='%23D9A441' fill-opacity='.38'/%3E%3Cg transform='translate(12.6 119.7) rotate(2)' fill='%23D9A441' fill-opacity='.26'%3E%3Crect x='-2.2' y='-2.2' width='4.4' height='4.4' rx='.8'/%3E%3C/g%3E%3Ccircle cx='140' cy='107' r='3.4' fill='%237A3D24'/%3E%3Cg transform='translate(106.3 135.1) rotate(-12)' fill='%237A3D24'%3E%3Crect x='-4' y='-4' width='7.9' height='7.9' rx='1'/%3E%3C/g%3E%3Ccircle cx='23' cy='157.4' r='1.5' fill='%23D9A441' fill-opacity='.38'/%3E%3Cg transform='translate(101.1 104.7) rotate(-17)' fill='%23D9A441' fill-opacity='.26'%3E%3Crect x='-2.2' y='-2.2' width='4.4' height='4.4' rx='.8'/%3E%3C/g%3E%3Ccircle cx='34.8' cy='14.9' r='3.6' fill='%237A3D24'/%3E%3Cg transform='translate(63.3 69) rotate(1)' fill='%237A3D24'%3E%3Crect x='-3.3' y='-3.3' width='6.7' height='6.7' rx='1'/%3E%3C/g%3E%3Ccircle cx='13.1' cy='81.3' r='2.1' fill='%23D9A441' fill-opacity='.38'/%3E%3Cg transform='translate(112 57.2) rotate(-17)' fill='%23D9A441' fill-opacity='.26'%3E%3Crect x='-2.4' y='-2.4' width='4.8' height='4.8' rx='.8'/%3E%3C/g%3E%3Ccircle cx='138.6' cy='16.6' r='2.8' fill='%237A3D24'/%3E%3Cg transform='translate(81.3 17.4) rotate(-1)' fill='%237A3D24'%3E%3Crect x='-3' y='-3' width='6' height='6' rx='1'/%3E%3C/g%3E%3C/svg%3E");
--band-shells: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' fill='none' stroke-width='1.6' stroke-linecap='round'%3E%3Cg transform='translate(103.3 69.7) rotate(-7) scale(1.3)' stroke='%23C08A2E' stroke-opacity='.42'%3E%3Cpath d='M-1 7C-4 5-6.4 2-7 -1.4l1.6-3 3-2.2 3.4-.6 3.4.8 2.8 2.4 1.2 3.2C7.6 1.8 5 5.2 1.4 7.2Z' stroke-linejoin='round'/%3E%3Cpath d='M0 6.4-3.2-4.6M0 6.4 0-6.6M0 6.4 3.4-4.4'/%3E%3C/g%3E%3Cg transform='translate(55.2 222.7) rotate(-34) scale(1.3)' stroke='%23E07A62' stroke-opacity='.34'%3E%3Cpath d='M0-7.4 1.9-2.6 7-2.2 3.1 1.2 4.4 6.6 0 3.8-4.4 6.6-3.1 1.2-7-2.2-1.9-2.6Z' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(147.5 172.6) rotate(-22) scale(1.3)' stroke='%233E79B5' stroke-opacity='.26'%3E%3Cpath d='M-9 1c1.8-2.4 3.8-2.4 5 0s3.2 2.4 5 0 3.2-2.4 5 0'/%3E%3C/g%3E%3Cg transform='translate(206 116.4) rotate(-11) scale(1.3)' stroke='%23C08A2E' stroke-opacity='.42'%3E%3Cpath d='M-1 7C-4 5-6.4 2-7 -1.4l1.6-3 3-2.2 3.4-.6 3.4.8 2.8 2.4 1.2 3.2C7.6 1.8 5 5.2 1.4 7.2Z' stroke-linejoin='round'/%3E%3Cpath d='M0 6.4-3.2-4.6M0 6.4 0-6.6M0 6.4 3.4-4.4'/%3E%3C/g%3E%3Cg transform='translate(180 55.5) rotate(-15) scale(1.3)' stroke='%23E07A62' stroke-opacity='.34'%3E%3Cpath d='M0-7.4 1.9-2.6 7-2.2 3.1 1.2 4.4 6.6 0 3.8-4.4 6.6-3.1 1.2-7-2.2-1.9-2.6Z' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(172.3 237.5) rotate(-31) scale(1.3)' stroke='%233E79B5' stroke-opacity='.26'%3E%3Cpath d='M-9 1c1.8-2.4 3.8-2.4 5 0s3.2 2.4 5 0 3.2-2.4 5 0'/%3E%3C/g%3E%3Cg transform='translate(30 89.2) rotate(29) scale(1.3)' stroke='%23C08A2E' stroke-opacity='.42'%3E%3Cpath d='M-1 7C-4 5-6.4 2-7 -1.4l1.6-3 3-2.2 3.4-.6 3.4.8 2.8 2.4 1.2 3.2C7.6 1.8 5 5.2 1.4 7.2Z' stroke-linejoin='round'/%3E%3Cpath d='M0 6.4-3.2-4.6M0 6.4 0-6.6M0 6.4 3.4-4.4'/%3E%3C/g%3E%3Cg transform='translate(213.9 186.3) rotate(-23) scale(1.3)' stroke='%23E07A62' stroke-opacity='.34'%3E%3Cpath d='M0-7.4 1.9-2.6 7-2.2 3.1 1.2 4.4 6.6 0 3.8-4.4 6.6-3.1 1.2-7-2.2-1.9-2.6Z' stroke-linejoin='round'/%3E%3C/g%3E%3Cg transform='translate(71.1 145) rotate(26) scale(1.3)' stroke='%233E79B5' stroke-opacity='.26'%3E%3Cpath d='M-9 1c1.8-2.4 3.8-2.4 5 0s3.2 2.4 5 0 3.2-2.4 5 0'/%3E%3C/g%3E%3Cg transform='translate(237.4 25.2) rotate(-5) scale(1.3)' stroke='%23C08A2E' stroke-opacity='.42'%3E%3Cpath d='M-1 7C-4 5-6.4 2-7 -1.4l1.6-3 3-2.2 3.4-.6 3.4.8 2.8 2.4 1.2 3.2C7.6 1.8 5 5.2 1.4 7.2Z' stroke-linejoin='round'/%3E%3Cpath d='M0 6.4-3.2-4.6M0 6.4 0-6.6M0 6.4 3.4-4.4'/%3E%3C/g%3E%3Cg transform='translate(51.4 27.5) rotate(-28) scale(1.3)' stroke='%23E07A62' stroke-opacity='.34'%3E%3Cpath d='M0-7.4 1.9-2.6 7-2.2 3.1 1.2 4.4 6.6 0 3.8-4.4 6.6-3.1 1.2-7-2.2-1.9-2.6Z' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
}
/* @generated-bands-end */
/* ============================================================
1. Doodles
============================================================ */
.doodle {
display: inline-block;
flex: none;
width: var(--doodle-w, 48px);
max-width: none;
height: auto;
color: var(--doodle-color, currentColor);
rotate: var(--doodle-rotate, 0deg);
vertical-align: middle;
overflow: visible;
pointer-events: none;
}
.doodle--flip { scale: -1 1; }
/* Inline next to a word or title: sized to the text */
.doodle--inline {
width: 1.15em;
margin: 0 .2em;
vertical-align: -0.14em;
stroke-width: 3.4;
}
/* Corner placement inside a section (behind content, never affects layout) */
.doodle--tl, .doodle--tr, .doodle--bl, .doodle--br {
position: absolute;
z-index: -1;
}
.doodle--tl { top: var(--dy, clamp(1.25rem, 3vw, 2.75rem)); left: var(--dx, clamp(1rem, 4vw, 4.5rem)); }
.doodle--tr { top: var(--dy, clamp(1.25rem, 3vw, 2.75rem)); right: var(--dx, clamp(1rem, 4vw, 4.5rem)); }
.doodle--bl { bottom: var(--dy, clamp(1.25rem, 3vw, 2.75rem)); left: var(--dx, clamp(1rem, 4vw, 4.5rem)); }
.doodle--br { bottom: var(--dy, clamp(1.25rem, 3vw, 2.75rem)); right: var(--dx, clamp(1rem, 4vw, 4.5rem)); }
.doodle--front { z-index: 2; }
/* The section (or .decor-host) holding a corner doodle becomes its positioning + stacking context */
.decor-host,
:is(section, .section):has(> .doodle--tl, > .doodle--tr, > .doodle--bl, > .doodle--br,
> .container > .doodle--tl, > .container > .doodle--tr, > .container > .doodle--bl, > .container > .doodle--br) {
position: relative;
isolation: isolate;
}
/* Pointing at a heading: put the doodle inside .hand-underline or .doodle-anchor */
.doodle-anchor { position: relative; display: inline-block; }
.doodle--point-r,
.doodle--point-l {
position: absolute;
top: -.55em;
width: 1.05em;
}
.doodle--point-r { left: 100%; margin-left: .18em; }
.doodle--point-l { right: 100%; margin-right: .18em; }
@media (max-width: 959px) {
.doodle--tl, .doodle--tr, .doodle--bl, .doodle--br { width: calc(var(--doodle-w, 48px) * .74); }
.doodle--hide-md { display: none; }
}
@media (max-width: 767px) {
.doodle--point-r, .doodle--point-l { display: none; }
}
@media (max-width: 599px) {
.doodle--tl:not(.doodle--keep), .doodle--tr:not(.doodle--keep),
.doodle--bl:not(.doodle--keep), .doodle--br:not(.doodle--keep),
.doodle--hide-sm { display: none; }
}
/* Draw-in once when revealed (motion.js adds .is-revealed). No JS = fully drawn. */
html.js .doodle--draw .d-s {
stroke-dasharray: 1 2;
stroke-dashoffset: 0;
transition: stroke-dashoffset 1.1s var(--ease-soft) calc(var(--d, 0) * 110ms + var(--draw-delay, 0ms));
}
html.js .doodle--draw:not(.is-revealed) .d-s { stroke-dashoffset: 1.02; }
html.js .doodle--draw :is(.d-t, .d-dash, .d-dot) { transition: opacity .7s ease-out calc(.5s + var(--draw-delay, 0ms)); }
html.js .doodle--draw:not(.is-revealed) :is(.d-t, .d-dash, .d-dot) { opacity: 0; }
/* Safety net if motion.js never runs (it adds .motion-ready to ) */
html.js:not(.motion-ready) .doodle--draw:not(.is-revealed) .d-s { animation: decor-drawn 0s 4s forwards; }
html.js:not(.motion-ready) .doodle--draw:not(.is-revealed) :is(.d-t, .d-dash, .d-dot) { animation: decor-show 0s 4s forwards; }
html.js .doodle--draw.is-instant :is(.d-s, .d-t, .d-dash, .d-dot) { transition: none; }
@keyframes decor-drawn { to { stroke-dashoffset: 0; } }
/* ============================================================
2. Section dividers
============================================================ */
.divider {
position: absolute;
left: 0;
right: 0;
z-index: 1;
height: var(--divider-h, 64px);
line-height: 0;
pointer-events: none;
}
.divider--bottom { bottom: -1px; }
.divider--top { top: -1px; }
.divider svg {
display: block;
width: 100%;
max-width: none;
height: 100%;
overflow: hidden;
}
.divider--top svg { scale: 1 -1; }
.divider--flip svg { scale: -1 1; }
.divider--top.divider--flip svg { scale: -1 -1; }
.divider--waves-layered { --divider-h: clamp(44px, 7.5vw, 120px); }
@supports (color: color-mix(in srgb, red 50%, white)) {
.divider__mid { fill: color-mix(in srgb, var(--divider-fill) 52%, #fff); fill-opacity: 1; }
}
.divider--scallop { --divider-h: 23px; }
.divider--torn { --divider-h: 46px; }
.divider--torn svg { filter: drop-shadow(0 -2px 2px rgba(98, 42, 20, .14)); }
.divider--top.divider--torn svg { filter: drop-shadow(0 -2px 2px rgba(98, 42, 20, .14)); }
.divider--torn .divider__fiber { fill: color-mix(in srgb, var(--divider-fill) 30%, #fff); }
.divider--curve { --divider-h: clamp(28px, 4.5vw, 72px); }
.divider--doodle-wave { --divider-h: clamp(60px, 6vw, 90px); }
@media (max-width: 599px) {
.divider--scallop { --divider-h: 18px; }
.divider--torn { --divider-h: 36px; }
}
/* Room for the divider so content never sits under it */
/* isolate so the divider's z-index stays inside its own section (cards overlapping from the next section stay on top) */
:is(section, .section):has(> .divider),
.section--has-divider,
.section--has-divider-top { position: relative; isolation: isolate; }
.section--has-divider { padding-bottom: calc(var(--space-4xl) + var(--divider-space, 64px)); }
.section--has-divider-top { padding-top: calc(var(--space-4xl) + var(--divider-space-top, 64px)); }
.section--has-divider:has(> .divider--bottom.divider--waves-layered) { --divider-space: clamp(44px, 7.5vw, 120px); }
.section--has-divider:has(> .divider--bottom.divider--scallop) { --divider-space: 20px; }
.section--has-divider:has(> .divider--bottom.divider--torn) { --divider-space: 40px; }
.section--has-divider:has(> .divider--bottom.divider--curve) { --divider-space: clamp(28px, 4.5vw, 72px); }
.section--has-divider:has(> .divider--bottom.divider--doodle-wave) { --divider-space: clamp(60px, 6vw, 90px); }
.section--has-divider-top:has(> .divider--top.divider--waves-layered) { --divider-space-top: clamp(44px, 7.5vw, 120px); }
.section--has-divider-top:has(> .divider--top.divider--scallop) { --divider-space-top: 20px; }
.section--has-divider-top:has(> .divider--top.divider--torn) { --divider-space-top: 40px; }
.section--has-divider-top:has(> .divider--top.divider--curve) { --divider-space-top: clamp(28px, 4.5vw, 72px); }
.section--has-divider-top:has(> .divider--top.divider--doodle-wave) { --divider-space-top: clamp(60px, 6vw, 90px); }
/* ============================================================
3. Inner-page hero (page_hero())
============================================================ */
.page-hero {
--hero-wave-h: clamp(44px, 7.5vw, 120px);
--hero-gap: clamp(2.75rem, 4.6vw, 4.25rem);
position: relative;
isolation: isolate;
overflow-x: clip;
margin-top: calc(-1 * var(--header-height));
padding: calc(var(--header-height) + var(--space-lg)) 0 calc(var(--hero-gap) + var(--hero-wave-h));
text-align: center;
color: var(--color-white);
background:
radial-gradient(circle at 86% 18%, rgba(255, 209, 102, .2) 0, rgba(255, 209, 102, 0) 34%),
radial-gradient(circle at 8% 90%, rgba(255, 255, 255, .08) 0, rgba(255, 255, 255, 0) 30%),
linear-gradient(160deg, var(--color-ocean) 0%, var(--color-ocean-dark) 100%);
}
/* Legacy markup (single 60px wave, no page_hero()) keeps a proportionate gap */
.page-hero:not(:has(> .divider)) { --hero-wave-h: clamp(28px, 4.17vw, 60px); }
.page-hero--plain::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--band-doodle);
background-size: 240px;
opacity: .55;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 45%);
mask-image: linear-gradient(180deg, transparent 0, #000 45%);
}
.page-hero--photo {
--hero-gap: clamp(3rem, 5.2vw, 5rem);
background: var(--color-ocean-dark);
}
.page-hero__media {
position: absolute;
inset: 0;
z-index: -2;
}
.page-hero__img {
display: block;
width: 100%;
max-width: none;
height: 100%;
object-fit: cover;
}
.page-hero__overlay {
position: absolute;
inset: 0;
z-index: -1;
background: var(--overlay-warm-navy);
}
.page-hero__inner { position: relative; }
.page-hero__eyebrow {
display: inline-block;
margin: 0 0 .85rem;
padding: .38em 1.15em;
border: 1.5px solid rgba(255, 255, 255, .45);
border-radius: 999px;
background: rgba(10, 26, 48, .28);
color: var(--color-white);
font-size: .8rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: .14em;
text-transform: uppercase;
}
.page-hero__title {
max-width: 22ch;
margin: 0 auto .3em;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.9rem, 2.1rem + 3.6vw, 4.75rem);
line-height: 1.02;
letter-spacing: .02em;
color: var(--color-white);
text-wrap: balance;
text-shadow: 0 2px 12px rgba(8, 22, 42, .35);
}
.page-hero__subtitle {
max-width: 38rem;
margin: 0 auto;
font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
line-height: 1.55;
color: rgba(255, 255, 255, .96);
text-wrap: pretty;
text-shadow: 0 1px 8px rgba(8, 22, 42, .45);
}
.page-hero__content {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-md);
margin-top: var(--space-xl);
}
.page-hero .page-hero__wave {
--divider-h: var(--hero-wave-h);
z-index: 1;
}
.page-hero__doodle {
position: absolute;
z-index: 0;
opacity: .92;
}
.page-hero__doodle--1 { left: clamp(.5rem, 5vw, 6rem); top: -.25rem; }
.page-hero__doodle--2 { right: clamp(.5rem, 6vw, 7rem); top: .75rem; }
.page-hero__doodle--3 { right: clamp(2rem, 16vw, 15rem); bottom: -2.25rem; }
@media (max-width: 1023px) {
.page-hero__doodle { display: none; }
}
/* ============================================================
4. Photo frames
============================================================ */
/* Polaroid: ![]()
.. */
/* Defaults at zero specificity so .photo-mosaic can vary them and modifier classes always win */
:where(.polaroid) {
--tilt: -2deg;
--tape: var(--color-marigold-light);
}
.polaroid {
--pol-pad: clamp(6px, 1.1vw, 11px);
--pol-foot: clamp(24px, 3.2vw, 40px);
position: relative;
display: block;
margin: 0;
padding: var(--pol-pad) var(--pol-pad) var(--pol-foot);
background: #fff;
border-radius: 3px;
box-shadow: var(--paper-shadow);
rotate: calc(var(--tilt) * var(--tilt-scale, 1));
transition: rotate .35s var(--ease-soft), translate .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
.polaroid img {
display: block;
width: 100%;
max-width: none;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 1px;
background: var(--color-sand);
}
.polaroid--square img { aspect-ratio: 1; }
.polaroid--portrait img { aspect-ratio: 4 / 5; }
.polaroid--wide img { aspect-ratio: 16 / 10; }
.polaroid.polaroid--tilt-l { --tilt: -3deg; }
.polaroid.polaroid--tilt-r { --tilt: 2.5deg; }
.polaroid.polaroid--tilt-0 { --tilt: 0deg; }
.polaroid:has(> .polaroid__caption) { padding-bottom: calc(var(--pol-pad) * .6); }
.polaroid__caption {
display: block;
min-height: calc(var(--pol-foot) - var(--pol-pad) * .6);
padding: .3em .3em .1em;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.3rem, 1.05rem + .7vw, 1.65rem);
line-height: 1.05;
letter-spacing: .03em;
color: var(--color-brown);
text-align: center;
text-wrap: balance;
}
/* Washi tape */
.polaroid--tape::before,
.polaroid--tape-corners::before,
.polaroid--tape-corners::after {
content: '';
position: absolute;
z-index: 2;
height: clamp(18px, 2vw, 24px);
background-color: var(--tape);
background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 5px, rgba(255, 255, 255, 0) 5px 11px);
opacity: .82;
box-shadow: 0 1px 1px rgba(98, 42, 20, .08);
clip-path: polygon(0 10%, 4% 0, 96% 4%, 100% 16%, 97% 36%, 100% 56%, 96% 78%, 100% 100%, 3% 96%, 0 80%, 4% 60%, 0 40%, 3% 22%);
pointer-events: none;
}
.polaroid--tape::before {
top: calc(clamp(18px, 2vw, 24px) / -2);
left: 50%;
width: clamp(56px, 36%, 104px);
translate: -50% 0;
rotate: -3deg;
}
.polaroid--tape-corners::before,
.polaroid--tape-corners::after { top: 4px; width: clamp(44px, 26%, 72px); }
.polaroid--tape-corners::before { left: -14px; rotate: -38deg; }
.polaroid--tape-corners::after { right: -14px; rotate: 38deg; }
.polaroid.polaroid--tape-sun { --tape: var(--color-marigold-light); }
.polaroid.polaroid--tape-sky { --tape: #8FC1EE; }
.polaroid.polaroid--tape-coral { --tape: #FFA594; }
.polaroid.polaroid--tape-sea { --tape: #92D6BE; }
.polaroid.polaroid--tape-lilac { --tape: #C8B5F0; }
/* Hover only when the polaroid is (inside) something clickable */
a.polaroid:hover, a:hover > .polaroid, button:hover > .polaroid, .polaroid--hover:hover,
a.polaroid:focus-visible, a:focus-visible > .polaroid {
rotate: 0deg;
translate: 0 -5px;
box-shadow: 0 2px 4px rgba(98, 42, 20, .12), 0 22px 36px -12px rgba(98, 42, 20, .38);
}
/* Tilted frames, tape and offset blocks may poke past the gutter: never let them scroll the page sideways */
:is(section, .section):has(.polaroid, .photo-mosaic, .frame-offset, .stamp-ring) { overflow-x: clip; }
/* Scrapbook mosaic of 4-6 polaroids: 3 or 4 across, 2 across on phones, rows centred */
.photo-mosaic {
--cols: 3;
--gap: clamp(16px, 2.6vw, 34px);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: calc(var(--gap) * 1.15) var(--gap);
margin: 0;
padding: 16px 6px 14px;
list-style: none;
}
.photo-mosaic:has(> :nth-child(4):last-child),
.photo-mosaic--4 { --cols: 4; }
.photo-mosaic > * {
flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
min-width: 0;
}
.photo-mosaic > :where(:nth-child(6n+1)) { --tilt: -2.6deg; --tape: var(--color-marigold-light); }
.photo-mosaic > :where(:nth-child(6n+2)) { --tilt: 1.9deg; --tape: #8FC1EE; margin-top: 18px; }
.photo-mosaic > :where(:nth-child(6n+3)) { --tilt: -1.3deg; --tape: #FFA594; margin-top: 4px; }
.photo-mosaic > :where(:nth-child(6n+4)) { --tilt: 2.6deg; --tape: #92D6BE; margin-top: 14px; }
.photo-mosaic > :where(:nth-child(6n+5)) { --tilt: -2deg; --tape: #C8B5F0; }
.photo-mosaic > :where(:nth-child(6n+6)) { --tilt: 1.5deg; --tape: var(--color-marigold-light); margin-top: 12px; }
@media (max-width: 767px) {
.photo-mosaic:has(> :nth-child(4):last-child), .photo-mosaic--4 { --cols: 2; }
}
@media (max-width: 599px) {
.photo-mosaic { --cols: 2; --gap: 14px; padding-inline: 4px; }
.photo-mosaic > * { --tilt-scale: .7; }
.photo-mosaic > :where(:nth-child(6n+2), :nth-child(6n+4), :nth-child(6n+6)) { margin-top: 10px; }
}
/* Offset colour block behind a portrait: ![]()
![]()
*/
.stamp-ring {
--ring: var(--color-ocean);
position: relative;
display: inline-block;
padding: 5px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 3px var(--ring), 0 12px 26px -10px rgba(98, 42, 20, .38);
}
.stamp-ring::after {
content: '';
position: absolute;
inset: -11px;
border: 2px dashed var(--ring);
border-radius: 50%;
opacity: .75;
pointer-events: none;
transition: rotate .6s var(--ease-soft);
}
.stamp-ring > img {
display: block;
width: 100%;
max-width: none;
height: auto;
aspect-ratio: 1;
object-fit: cover;
border: 0;
border-radius: 50%;
margin: 0;
}
a:hover .stamp-ring::after, a:focus-visible .stamp-ring::after, .stamp-ring--hover:hover::after { rotate: 24deg; }
.stamp-ring--ocean { --ring: var(--color-ocean); }
.stamp-ring--red { --ring: var(--color-red); }
.stamp-ring--marigold { --ring: var(--color-marigold); }
.stamp-ring--gold { --ring: var(--color-gold); }
.stamp-ring--sea { --ring: #2E8B57; }
.stamp-ring--lilac { --ring: #7B5EA7; }
.stamp-ring--brown { --ring: var(--color-brown); }
/* Cards or photos straddling a section edge.
.overlap-up first thing in a section: pulls up into the section above.
.overlap-down last thing in a section: hangs down into the section below.
The sections are padded automatically; set --overlap on (or both sections) to change the depth. */
.overlap-up, .overlap-down { position: relative; z-index: 3; }
.overlap-up { margin-top: calc(-1 * var(--overlap)); }
.overlap-down { margin-bottom: calc(-1 * var(--overlap)); }
.section--flush-top,
:is(section, .section):has(> .overlap-up:first-child, > .container > .overlap-up:first-child) {
display: flow-root;
padding-top: 0;
}
.section--flush-bottom,
:is(section, .section):has(> .overlap-down:last-child, > .container > .overlap-down:last-child) {
display: flow-root;
padding-bottom: 0;
}
/* the hanging element must paint over the next section's background */
:is(section, .section):has(> .overlap-down:last-child, > .container > .overlap-down:last-child) {
position: relative;
z-index: 2;
}
.section--room-bottom,
:is(section, .section):has(+ :is(section, .section) > .overlap-up:first-child, + :is(section, .section) > .container > .overlap-up:first-child) {
padding-bottom: calc(var(--space-4xl) + var(--overlap));
}
.section--room-top,
:is(section, .section):has(> .overlap-down:last-child, > .container > .overlap-down:last-child) + :is(section, .section) {
padding-top: calc(var(--space-4xl) + var(--overlap));
}
/* ============================================================
5. Patterned bands (use with .section)
============================================================ */
.band--squiggle {
background-color: var(--color-marigold);
background-image: var(--band-squiggle);
background-size: 240px;
color: var(--color-brown);
}
.band--squiggle :is(h1, h2, h3, h4, .section-title, .section-subtitle, p, li) { color: var(--color-brown); }
.band--squiggle a:not(.btn) { color: var(--color-brown); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.band--squiggle .hand-underline::after { background: var(--color-white); opacity: .6; }
.band--doodle {
background-color: var(--color-ocean);
/* a whisper of navy keeps white text comfortably above 4.5:1 */
background-image: var(--band-doodle), linear-gradient(rgba(24, 56, 96, .1), rgba(24, 56, 96, .1));
background-size: 240px, auto;
color: var(--color-white);
}
.band--doodle :is(h1, h2, h3, h4, .section-title, p, li) { color: var(--color-white); }
.band--doodle .section-subtitle { color: var(--color-white); }
.band--doodle a:not(.btn) { color: var(--color-white); text-decoration: underline; text-decoration-color: var(--color-marigold-light); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.band--doodle .hand-underline::after { background: var(--color-marigold); opacity: .9; }
.band--dots {
background-color: var(--color-brown);
background-image: var(--band-dots);
background-size: 168px;
color: var(--color-cream);
}
.band--dots :is(h1, h2, h3, h4, .section-title) { color: var(--color-marigold); }
.band--dots :is(p, li, .section-subtitle) { color: var(--color-cream); }
.band--dots a:not(.btn) { color: var(--color-marigold-light); text-decoration: underline; text-underline-offset: 3px; }
.band--dots .hand-underline::after { background: var(--color-red); opacity: .8; }
.band--shells {
background-color: var(--color-sand);
background-image: var(--band-shells);
background-size: 260px;
color: var(--color-text);
}
.band--shells :is(h1, h2, h3, h4) { color: var(--color-brown); }
.band--shells .section-subtitle { color: #6A5E58; }
/* ============================================================
6. Icons (icon())
============================================================ */
.icon {
display: inline-block;
flex: none;
max-width: none;
height: auto;
vertical-align: middle;
overflow: visible;
}
.icon--inline {
width: 1.75em;
height: 1.75em;
margin-right: .35em;
vertical-align: -.5em;
}
/* ============================================================
7. Motion: scroll reveal, wiggle, lift (motion.js)
============================================================ */
html.js [data-reveal]:not(.is-revealed),
html.js [data-reveal-stagger]:not(.is-revealed) > * {
opacity: 0;
}
/* Safety net: if motion.js never runs (it adds .motion-ready), show everything after 4s */
html.js:not(.motion-ready) [data-reveal]:not(.is-revealed),
html.js:not(.motion-ready) [data-reveal-stagger]:not(.is-revealed) > * {
animation: decor-show 0s 4s forwards;
}
html.js [data-reveal].is-revealed:not(.is-instant) {
animation: decor-rise .5s ease-out var(--reveal-delay, 0ms) backwards;
}
html.js [data-reveal="fade"].is-revealed:not(.is-instant) {
animation-name: decor-fade;
}
html.js [data-reveal-stagger].is-revealed:not(.is-instant) > * {
animation: decor-rise .5s ease-out var(--reveal-delay, 0ms) backwards;
}
@keyframes decor-rise { from { opacity: 0; translate: 0 12px; } }
@keyframes decor-fade { from { opacity: 0; } }
@keyframes decor-show { to { opacity: 1; } }
/* Icons rotate +-4deg once on hover of themselves or a hovered link/button/.wiggle-host */
@keyframes decor-wiggle {
0% { rotate: 0deg; }
25% { rotate: -4deg; }
55% { rotate: 4deg; }
80% { rotate: -1.5deg; }
100% { rotate: 0deg; }
}
.wiggle-on-hover:hover,
:is(a, button, .wiggle-host):hover .wiggle-on-hover,
:is(a, button):focus-visible .wiggle-on-hover {
animation: decor-wiggle .55s ease-in-out 1;
}
/* Small lift for clickable cards only */
.lift-on-hover { transition: translate .25s var(--ease-soft), box-shadow .25s var(--ease-soft); }
.lift-on-hover:hover,
.lift-on-hover:focus-within {
translate: 0 -4px;
box-shadow: 0 16px 32px -12px rgba(98, 42, 20, .3);
}
/* ============================================================
8. Reduced motion + print
============================================================ */
@media (prefers-reduced-motion: reduce) {
html.js [data-reveal],
html.js [data-reveal-stagger] > *,
html.js [data-reveal]:not(.is-revealed),
html.js [data-reveal-stagger]:not(.is-revealed) > * {
opacity: 1 !important;
animation: none !important;
}
html.js .doodle--draw .d-s { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
html.js .doodle--draw :is(.d-t, .d-dash, .d-dot) { opacity: 1; transition: none; }
.wiggle-on-hover, .wiggle-on-hover:hover, :is(a, button, .wiggle-host):hover .wiggle-on-hover { animation: none; }
.polaroid, .lift-on-hover, .stamp-ring::after { transition: none; }
a.polaroid:hover, a:hover > .polaroid, .polaroid--hover:hover, .lift-on-hover:hover, .lift-on-hover:focus-within { translate: none; }
a:hover .stamp-ring::after, .stamp-ring--hover:hover::after { rotate: none; }
}
@media print {
[data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; animation: none !important; }
.doodle--draw .d-s { stroke-dasharray: none !important; }
.page-hero__media, .page-hero__overlay, .page-hero__doodle { display: none; }
.page-hero { color: #000; background: none; }
.page-hero__title, .page-hero__subtitle { color: #000; text-shadow: none; }
}