/* A circular brass instrument carrying a paper route. The paper may grow beyond the case. */
.crafted-compass{--ink:#494c3b;--accent:#a18546;--paper:#f7f0dc;position:relative;isolation:isolate;width:100%;max-width:710px;margin:0 auto;padding:29px 14px 10px;color:var(--ink);font-family:Georgia,'Times New Roman',serif;box-sizing:border-box}
.crafted-compass *,.crafted-compass *::before,.crafted-compass *::after{box-sizing:border-box}
.crafted-compass [hidden]{display:none!important}
.compass-definitions{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.compass-moment{position:relative;min-width:0}
.compass-instrument{display:grid;grid-template-columns:minmax(0,1fr);position:relative;min-width:0}
.compass-bezel{position:relative;grid-area:1/1;width:100%;aspect-ratio:1;align-self:start;z-index:0;pointer-events:none;filter:drop-shadow(0 12px 10px #58472832)}
.compass-dial,.compass-bearing{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.compass-dial{z-index:2}
.compass-direction{font:500 25px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.055em}
.compass-intercardinal{font-size:12px;letter-spacing:.09em}
.compass-carry-loop{position:absolute;left:44%;top:-5.1%;width:12%;height:12%;border-radius:50%;border:8px solid #b39755;background:transparent;box-shadow:inset 1px 1px 1px #65532b,inset 0 0 0 3px #e9d69c,0 0 0 1px #695122,1px 2px 1px #dac790;z-index:0}
.compass-winding-crown{position:absolute;left:46.2%;top:.2%;width:7.6%;height:5.5%;border:1px solid #937033;border-radius:3px;background:repeating-linear-gradient(90deg,#876a34 0 2px,#d7c084 3px 5px,#b09556 6px 7px);box-shadow:0 -2px 0 #ccb57b,0 2px 3px #5a482747;z-index:1}
.compass-bearing{z-index:3;transform:rotate(var(--compass-bearing,0deg));transform-origin:50% 50%;filter:drop-shadow(1px 2px 1px #454b394d)}
.compass-bearing-trail{opacity:.55}
.compass-chart{position:relative;z-index:4;grid-area:1/1;justify-self:center;align-self:start;width:64%;min-width:0;min-height:365px;margin:26% 0 5%;padding:43px 38px 31px;background:repeating-linear-gradient(0deg,#a99a7106 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#a99a7105 0 1px,transparent 1px 3px),linear-gradient(112deg,#fdf8e9,#f2e7cd);border:1px solid #b4a6798f;border-radius:3px 3px 3px 13px;box-shadow:0 5px 7px #60543733,4px 8px 0 -3px #dbcca852,0 0 0 3px #f3e8cb;display:flex;flex-direction:column;justify-content:center}
.compass-chart::before{content:"";position:absolute;inset:13px;border:1px solid #b2a57566;pointer-events:none}
.compass-chart::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(112deg,#fff5 0,transparent 23% 78%,#b4a26a13);pointer-events:none}
.compass-chart-pin{position:absolute;left:calc(50% - 5px);top:15px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 31% 28%,#ede4bd 0,#bbab77 39%,#7a704b 80%);border:1px solid #92845b;box-shadow:1px 2px 2px #55483152;z-index:5}
.compass-chart-pin::after{content:"";position:absolute;top:3px;left:1px;right:1px;height:1px;transform:rotate(-33deg);background:#75693f}
.compass-paper-corner{position:absolute;top:24px;width:24px;height:24px;border-top:1px solid #b3a372;pointer-events:none}
.compass-paper-corner-tl{left:23px;border-left:1px solid #b3a372}.compass-paper-corner-tr{right:23px;border-right:1px solid #b3a372}
.crafted-compass .programme-lettering{position:relative;z-index:2;min-width:0;width:100%;color:var(--ink);text-align:center;overflow-wrap:anywhere;hyphens:auto;text-shadow:0 1px 0 #fff7;mix-blend-mode:normal;opacity:1;transform:none}
.crafted-compass .programme-lettering .programme-number{display:block;font:500 12px/1.5 'DM Sans',Arial,sans-serif!important;letter-spacing:.18em!important;margin:0 0 18px!important}
.crafted-compass .programme-lettering time{display:block;font:500 clamp(25px,4.6cqi,34px)/1.2 'Cormorant Garamond',Georgia,serif!important;letter-spacing:.035em!important;margin:0 0 14px!important}
.crafted-compass .programme-lettering h4{font:500 clamp(32px,5.7cqi,46px)/1.12 'Cormorant Garamond',Georgia,serif!important;font-style:italic!important;letter-spacing:-.018em!important;text-transform:none!important;margin:0 0 19px!important;overflow-wrap:anywhere}
.crafted-compass .programme-lettering p{font:400 17px/1.58 Georgia,'Times New Roman',serif!important;letter-spacing:0!important;margin:0!important;white-space:pre-line;overflow-wrap:anywhere}
.compass-chart-rule{display:flex;align-items:center;justify-content:center;gap:9px;margin:22px auto 13px;width:105px;color:#b19b61;line-height:1}
.compass-chart-rule i{height:1px;flex:1;background:linear-gradient(90deg,transparent,#b19b6188)}.compass-chart-rule i:last-child{transform:scaleX(-1)}.compass-chart-rule b{font:400 19px/1 Georgia,serif}
.compass-dedication{position:relative;z-index:2;color:#68674e;text-align:center;font:italic 16px/1.5 'Cormorant Garamond',Georgia,serif;overflow-wrap:anywhere}
.compass-paper-fold{position:absolute;left:-1px;bottom:-1px;width:24px;height:27px;clip-path:polygon(0 0,100% 100%,0 100%);background:linear-gradient(42deg,#cbbb93,#fbf4dc 45%,#e0d1ad);border-radius:0 0 0 11px;box-shadow:2px -2px 3px #8a79514d;z-index:3}
.compass-controls.programme-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin:15px auto 14px;padding:0;color:var(--ink)}
.compass-controls.programme-controls button{display:grid;place-items:center;width:59px;min-height:48px;padding:10px;border:1px solid #aa925853;border-radius:50% 50% 3px 3px;background:linear-gradient(130deg,#fbf4df,#e8dbb7);box-shadow:inset 0 1px 0 #fff9,0 2px 0 #baa6794d;color:var(--ink);cursor:pointer}
.compass-controls.programme-controls button:disabled{opacity:.32;cursor:default;box-shadow:none}
.compass-controls.programme-controls button svg{display:block;width:30px;height:21px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.compass-controls.programme-controls p{font:400 14px/1.5 'DM Sans',Arial,sans-serif!important;letter-spacing:.12em!important;margin:0!important}
.compass-index.programme-time-index{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 auto;padding:0;max-width:100%}
.compass-index.programme-time-index button{position:relative;display:flex;align-items:center;gap:7px;justify-content:center;min-width:58px;min-height:44px;padding:8px 10px;border:1px solid transparent;border-radius:2px;background:transparent;color:var(--ink);font:400 14px/1.4 'DM Sans',Arial,sans-serif!important;letter-spacing:0!important;cursor:pointer}
.compass-index.programme-time-index button i{width:5px;height:5px;flex:0 0 5px;transform:rotate(45deg);border:1px solid #a69360}
.compass-index.programme-time-index button[aria-pressed=true]{border-color:#b29b6780;background:#f7eed7;box-shadow:inset 0 0 0 2px #fffbef}
.compass-index.programme-time-index button[aria-pressed=true] i{background:#788165;border-color:#788165}
.crafted-compass button:focus-visible{outline:2px solid #666e53;outline-offset:3px}
.compass-sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.compass-empty{text-align:center;font:400 17px/1.6 Georgia,serif;padding:28px}
.crafted-compass{overflow-x:clip}

@media(prefers-reduced-motion:no-preference){
 .compass-moment.moment-turning .compass-bearing{animation:compass-find-bearing 1.1s cubic-bezier(.22,.7,.2,1) both}
 .compass-moment.moment-turning .compass-chart{animation:compass-chart-settle .75s ease both}
 .compass-moment.moment-turning .compass-bearing-trail{animation:compass-bearing-glint 1.15s ease both}
}
@keyframes compass-find-bearing{0%{transform:rotate(var(--compass-bearing-start,-55deg))}72%{transform:rotate(calc(var(--compass-bearing) + 4deg))}100%{transform:rotate(var(--compass-bearing))}}
@keyframes compass-chart-settle{from{transform:translateY(3px) rotate(.35deg)}to{transform:translateY(0) rotate(0)}}
@keyframes compass-bearing-glint{0%,100%{opacity:.55}55%{opacity:1}}

@container(max-width:600px){
 .crafted-compass{padding:20px 4px 8px;max-width:500px}
 .compass-carry-loop{border-width:5px;box-shadow:inset 1px 1px 1px #65532b,inset 0 0 0 2px #e9d69c,0 0 0 1px #695122,1px 2px 1px #dac790}
 .compass-chart{width:73%;min-height:295px;margin-top:26%;margin-bottom:6%;padding:33px 26px 25px;border-radius:2px 2px 2px 10px;box-shadow:0 4px 6px #60543733,3px 6px 0 -2px #dbcca84d,0 0 0 2px #f3e8cb}
 .compass-chart::before{inset:9px}
 .compass-chart-pin{top:12px;width:8px;height:8px;left:calc(50% - 4px)}.compass-chart-pin::after{top:2px}
 .compass-paper-corner{top:18px;width:15px;height:16px}.compass-paper-corner-tl{left:16px}.compass-paper-corner-tr{right:16px}
 .crafted-compass .programme-lettering .programme-number{font-size:11px!important;letter-spacing:.16em!important;margin-bottom:14px!important}
 .crafted-compass .programme-lettering time{font-size:25px!important;margin-bottom:10px!important}
 .crafted-compass .programme-lettering h4{font-size:clamp(30px,8.6cqi,39px)!important;line-height:1.1!important;margin-bottom:16px!important}
 .crafted-compass .programme-lettering p{font-size:16px!important;line-height:1.55!important}
 .compass-chart-rule{margin-top:18px;margin-bottom:10px;width:80px;gap:7px}
 .compass-dedication{font-size:16px;line-height:1.35}
 .compass-controls.programme-controls{margin-top:8px;gap:19px}
 .compass-index.programme-time-index{gap:3px}
 .compass-index.programme-time-index button{font-size:13px!important;padding-inline:8px;min-width:55px}
}
@container(max-width:360px){
 .crafted-compass{padding-inline:0}
 .compass-chart{width:74%;padding-inline:21px;padding-top:32px;margin-top:26%}
 .crafted-compass .programme-lettering h4{font-size:30px!important}
 .compass-dedication{font-size:16px}
}
.motion-paused .crafted-compass *,.motion-paused .crafted-compass *::after,[data-motion=paused] .crafted-compass *,[data-motion=paused] .crafted-compass *::after,[data-site-motion=paused] .crafted-compass *,[data-site-motion=paused] .crafted-compass *::after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.crafted-compass *,.crafted-compass *::before,.crafted-compass *::after{animation:none!important;transition:none!important}}
