/* Tax calendar page. Design plan: _work/design-plan.md; site plan: _work/site-plan.md (Calendar).
   Opener: a desk calendar flips from today to the next deadline beside a live countdown.
   Set piece: the twelve months as calendar sheets, filtered by who you are (Flip), each date saved as an .ics file. */

@keyframes tc-drift-40 { to { background-position: 0 40px; } }
@keyframes tc-drift-32 { to { background-position: 0 32px; } }
@keyframes tc-pulse-y { 0% { box-shadow: 0 0 0 0 rgba(242,214,75,.55); } 75%, 100% { box-shadow: 0 0 0 11px rgba(242,214,75,0); } }
@keyframes tc-pulse-c { 0% { box-shadow: 0 0 0 0 rgba(163,24,62,.45); } 75%, 100% { box-shadow: 0 0 0 10px rgba(163,24,62,0); } }
@keyframes tc-glow { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-46%, -54%) scale(1.12); } }

/* ---------- 1. Opener ---------- */
.tc-open { position: relative; overflow: clip; background: var(--ink-blue); color: var(--on-dark); padding: calc(var(--head-h) + clamp(28px, 5vh, 64px)) 0 clamp(44px, 7vh, 84px); }
.tc-open__ruling { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, rgba(255,255,255,.045) 39px, rgba(255,255,255,.045) 40px); animation: tc-drift-40 18s linear infinite; }
.tc-open__ruling::before { content: ''; position: absolute; top: 0; bottom: 0; left: clamp(18px, 3.4vw, 54px); width: 1px; background: rgba(163,24,62,.7); }
.tc-open__glow { position: absolute; left: 74%; top: 52%; width: 62vmax; height: 62vmax; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(163,24,62,.34), rgba(163,24,62,0)); pointer-events: none; animation: tc-glow 12s ease-in-out infinite alternate; }
.tc-open__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.tc-open h1 { color: #fff; font-size: clamp(2.6rem, min(4.8vw, 8.6vh), 4.9rem); margin-bottom: clamp(16px, 2.4vh, 26px); }
.tc-open__lede { color: var(--on-dark-soft); margin-bottom: clamp(22px, 3.2vh, 34px); }
.tc-open__ctas { margin-top: clamp(22px, 3.4vh, 36px); }

/* The live countdown */
.cd { border-top: 2px solid rgba(255,255,255,.75); padding-top: 14px; }
.cd__what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; font-size: 1.05rem; line-height: 1.4; }
.cd__k { flex: 1 0 100%; font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--highlight); }
.cd__what b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 1.8vw, 1.7rem); color: #fff; }
.cd__t { color: var(--on-dark); font-weight: 600; }
.cd__clock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cd__unit { display: grid; gap: 2px; padding: 4px 16px 0 0; }
.cd__unit + .cd__unit { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.18); }
.cd__num { display: block; overflow: clip; font-weight: 600; font-size: clamp(2.6rem, min(4.6vw, 8vh), 4.4rem); line-height: 1; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.cd__unit:first-child .cd__num { color: var(--highlight); }
.cd__num i { display: inline-block; font-style: normal; }
.cd__unit small { font-size: .95rem; font-weight: 600; color: var(--on-dark-soft); }

/* The desk calendar */
.desk { position: relative; justify-self: center; width: min(100%, 440px); perspective: 1400px; }
.desk__tilt { position: relative; transform-style: preserve-3d; padding-top: 22px; }
.desk__back { position: absolute; left: 6%; right: 6%; top: 18px; bottom: -22px; background: #3A0F19; transform: translateZ(-40px) rotateX(8deg); box-shadow: 0 40px 60px rgba(0,0,0,.45); }
.desk__back::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: #24070E; }
.desk__pages { position: relative; height: clamp(420px, min(60vh, 40vw), 500px); transform-style: preserve-3d; }
.dk { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; isolation: isolate; background: #FFFEFB; color: var(--ink); padding: 0 0 12px; transform-origin: 50% 0; backface-visibility: hidden; box-shadow: 0 1px 0 #E7DADD, 0 3px 0 #F5ECEE, 0 4px 0 #E7DADD, 0 26px 40px rgba(0,0,0,.35); }
.dk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,32,47,.28), rgba(19,32,47,0) 40%); opacity: var(--shade, 0); pointer-events: none; }
.dk__month { align-self: stretch; margin: 0; padding: 20px 16px 14px; background: var(--crimson); color: #fff; text-align: center; font-weight: 700; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; }
.dk__daywrap { position: relative; }
.dk__day { margin: 0; padding: 0 .18em; font-family: var(--serif); font-size: clamp(6rem, min(13vh, 9vw), 9.4rem); line-height: 1.12; color: var(--ink); text-align: center; }
.dk--due .dk__day { color: var(--claret); }
.dk__ring { position: absolute; left: 50%; top: 54%; width: 200%; height: 118%; transform: translate(-50%, -50%) rotate(-5deg); overflow: visible; pointer-events: none; }
.dk__ring path { fill: none; stroke: var(--crimson); stroke-width: 4; stroke-linecap: round; }
.dk__dow { margin: 0 0 18px; font-weight: 700; font-size: 1.05rem; color: var(--ink-soft); }
.dk__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: calc(100% - 40px); margin: auto 0 0; padding: 10px 10px 4px; border-top: 1.5px solid var(--ink); font-size: .85rem; line-height: 1; text-align: center; }
.dk__grid b, .dk__grid span, .dk__grid i { display: grid; place-items: center; height: 19px; font-style: normal; }
.dk__grid b { font-weight: 700; color: var(--claret); }
.dk__grid span { position: relative; font-weight: 600; color: var(--ink-soft); }
.dk__grid .is-due::before { content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 17px; margin: -9px 0 0 -13px; border: 1.5px solid var(--crimson); border-radius: 50%; }
.dk__grid .is-on { color: #fff; }
.dk__grid .is-on::after { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 24px; height: 18px; margin: -9px 0 0 -12px; border-radius: 50%; background: var(--crimson); }
.dk--today .dk__grid .is-on::after { background: var(--ink); }
.dk__grid span { z-index: 0; }
.dk__note { display: grid; gap: 2px; width: 100%; margin: 0; padding: 0 22px; text-align: center; line-height: 1.3; }
.dk__note b { font-size: 1.08rem; color: var(--ink); }
.dk__note b i { font-style: normal; font-weight: 600; color: var(--crimson); white-space: nowrap; }
.dk__note span { font-size: .95rem; color: var(--ink-soft); }
.dk--today .dk__month { background: var(--ink); }
.dk--today .dk__note b { color: var(--claret); }
.desk__rings { position: absolute; left: 7%; right: 7%; top: 8px; z-index: 30; display: flex; justify-content: space-between; transform: translateZ(2px); }
.desk__rings i { width: 9px; height: 30px; border-radius: 5px; background: linear-gradient(90deg, #8F8A8C, #F2EFF0 45%, #9A9496); box-shadow: 0 3px 4px rgba(0,0,0,.35); }
.desk__cap { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 44px 0 0; font-weight: 600; color: var(--on-dark); }
.desk__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--highlight); animation: tc-pulse-y 2.2s infinite; }

/* Page order: today on top while motion runs; without motion the next deadline shows, ring drawn */
.dk[data-dk="0"] { z-index: 10; } .dk[data-dk="1"] { z-index: 9; } .dk[data-dk="2"] { z-index: 8; } .dk[data-dk="3"] { z-index: 7; }
.no-js .dk--today, .rm .dk--today, .motion-fail .dk--today { visibility: hidden; }
.motion:not(.motion-fail) [data-tc-in] { opacity: 0; }
.motion:not(.motion-fail) .dk__ring path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }

@media (min-width: 901px) and (max-height: 860px) {
  .tc-open { padding-top: calc(var(--head-h) + 20px); padding-bottom: 36px; }
  .desk__pages { height: min(60vh, 470px); }
  .dk__day { font-size: min(11vh, 7.4rem); }
  .desk__cap { margin-top: 34px; }
}
@media (max-width: 900px) {
  .tc-open__grid { grid-template-columns: minmax(0, 1fr); }
  .desk { width: min(100%, 360px); }
  .desk__pages { height: 440px; }
  .dk__day { font-size: 6.4rem; }
}
@media (max-width: 560px) {
  .tc-open h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .tc-open__ctas .btn { flex: 1 1 100%; }
  .cd__unit { padding-right: 8px; }
  .cd__unit + .cd__unit { padding-left: 10px; }
  .cd__num { font-size: 2.3rem; }
  .cd__unit small { font-size: .88rem; }
  .desk { width: min(100% - 24px, 320px); }
  .desk__pages { height: 300px; }
  .dk__day { font-size: 5.6rem; }
  .dk__grid { display: none; }
  .desk__cap { margin-top: 36px; }
}

/* ---------- 2. Every deadline: twelve calendar sheets ---------- */
.tl { overflow: clip; }
.tl__ruling { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(117,21,35,.06) 31px, rgba(117,21,35,.06) 32px); animation: tc-drift-32 20s linear infinite; }
.tl .wrap { position: relative; }
.tl__head { display: grid; gap: 16px; margin-bottom: clamp(26px, 3vw, 40px); }
.tl__head .lede { margin: 0; max-width: 120ch; }
.tl__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-bottom: clamp(26px, 3vw, 40px); }
.tl__filter { position: relative; display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 14px 30px rgba(34,9,15,.06); }
.tl__filter button { position: relative; z-index: 1; min-height: 48px; padding: 8px 18px; border: 0; border-radius: var(--btn-r); background: none; font-weight: 700; font-size: 1rem; color: var(--ink); cursor: pointer; transition: color .35s var(--ease); }
.tl__filter button:hover:not([aria-pressed="true"]) { color: var(--crimson); }
.tl__filter button[aria-pressed="true"] { color: #fff; background: var(--claret); transition: color .35s, background-color 0s .35s; } /* its own colour once the ink has slid under it */
.tl__ink { position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-radius: var(--btn-r); background: var(--claret); }
.no-js .tl__ink, .motion-fail .tl__ink { display: none; }
.no-js .tl__filter button[aria-pressed="true"], .motion-fail .tl__filter button[aria-pressed="true"] { background: var(--claret); }
.no-js .tl__filter { display: none; }
.tl__count { margin: 0; font-weight: 600; color: var(--ink-soft); }
.tl__count b { font-size: 1.3rem; color: var(--claret); }
.tl__all { margin-left: auto; }
.tl__all svg { width: 20px; height: 20px; }

.tl__months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); align-items: start; }
.tm { position: relative; background: #fff; border: 1px solid var(--rule); box-shadow: 0 18px 36px rgba(34,9,15,.08); }
.tm__head { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 22px 20px 12px; background: var(--claret); color: #fff; }
.tm__head::before { content: ''; position: absolute; left: 14px; right: 14px; top: 7px; height: 6px; background: radial-gradient(circle, rgba(255,255,255,.85) 2.2px, transparent 2.6px) 0 0 / 22px 6px repeat-x; }
.tm__head h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.tm__head span { font-weight: 700; font-size: .95rem; color: #F6D8DF; }
.tm--now .tm__head { background: var(--crimson); }
.tm--now::after { animation: tc-bob 2.6s ease-in-out infinite alternate; content: 'This month'; position: absolute; right: 14px; top: -14px; padding: 3px 10px; background: var(--highlight); color: var(--ink); font-weight: 700; font-size: .85rem; }
.tm__list { padding: 4px 0 0; overflow: hidden; }
.tm__list .ti { margin-bottom: -1px; }
.ti { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 14px 14px 18px; border-bottom: 1px dashed #E2D3D7; }

.ti__day { margin: 0; display: grid; justify-items: center; line-height: 1; }
.ti__day span { font-family: var(--serif); font-size: 2rem; color: var(--claret); line-height: 1.05; }
.ti__day small { margin-top: 3px; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.ti__body p { margin: 0; }
.ti__t { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.ti__n { margin-top: 3px !important; font-size: .95rem; line-height: 1.45; color: var(--ink-soft); }
.ti--monthly { padding-block: 10px; }
.ti--monthly .ti__day span { font-size: 1.6rem; }
.ti--monthly .ti__t { font-size: .98rem; }
.ti--monthly .ti__who { margin-top: 2px !important; }
.ti__who { margin-top: 6px !important; font-size: .9rem; font-weight: 700; color: var(--crimson); }
.ti__ics { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--rule); border-radius: var(--btn-r); background: #fff; color: var(--claret); cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.ti__ics svg { width: 22px; height: 22px; }
.ti__ics:hover, .ti__ics:focus-visible { background: var(--claret); border-color: var(--claret); color: #fff; transform: translateY(-2px); }
.ti__ics.is-saved { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.ti--next { background: linear-gradient(90deg, rgba(242,214,75,.32), rgba(242,214,75,0) 80%); }
.ti--next::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--highlight); }
.ti--next::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; pointer-events: none; background: linear-gradient(90deg, rgba(242,214,75,0), rgba(242,214,75,.45) 50%, rgba(242,214,75,0)); transform: translateX(-100%); opacity: 0; }
.motion .ti--next::after { animation: tc-sweep 4.5s cubic-bezier(.5,0,.4,1) 1s infinite; }
@keyframes tc-sweep { 0% { transform: translateX(-100%); opacity: 1; } 45% { transform: translateX(100%); opacity: 1; } 46%, 100% { opacity: 0; } }
.tm__head::before { background-position: var(--hx, 0px) 0; }
.tm__head h3 { transform: translateX(var(--mx, 0px)); }
.ti--next .ti__day span::after { content: ''; display: block; width: 8px; height: 8px; margin: 4px auto 0; border-radius: 50%; background: var(--crimson); animation: tc-pulse-c 2.2s infinite; }
.tm__none { margin: 0; padding: 18px 20px; color: var(--ink-soft); font-style: italic; }
.ti[hidden], .tm__none[hidden] { display: none; }
.tl__foot { margin: clamp(26px, 3vw, 40px) 0 0; color: var(--ink-soft); max-width: 120ch; }
.tl__foot a { color: var(--claret); font-weight: 700; }
@media (max-width: 1100px) { .tl__months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .tl__months { grid-template-columns: minmax(0, 1fr); }
  .tl__filter { width: 100%; }
  .tl__filter button { flex: 1 1 auto; padding-inline: 12px; }
  .tl__all { margin-left: 0; }
  .ti { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding-left: 14px; }
}

/* ---------- 3. Making Tax Digital ---------- */
.tm-mtd { overflow: clip; }
.tm-mtd__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 5.5vw, 96px); align-items: center; }
.tm-mtd__media { position: relative; margin: 0; padding: 28px 0 30px 26px; }
.tm-mtd__ring { position: absolute; left: -4%; top: -4%; width: 108%; height: 108%; overflow: visible; pointer-events: none; }
.tm-mtd__ring ellipse { fill: none; stroke: var(--crimson); stroke-width: 1.5; stroke-dasharray: 6 10; opacity: .55; animation: dash-turn 34s linear infinite; }
.tm-mtd__frame { position: relative; aspect-ratio: 1264 / 848; max-height: var(--media-cap); box-shadow: -22px 22px 0 rgba(117,21,35,.1); }
.tm-mtd__frame img { position: absolute; inset: -6% 0 auto; height: 112%; }
@keyframes tc-breathe { from { transform: scale(1); } to { transform: scale(1.03); } }
.motion .tm-mtd__frame { animation: tc-breathe 9s ease-in-out infinite alternate; }
.tm-mtd__cap { left: auto; right: -14px; bottom: 30px; transform: translateY(50%); border-left: 3px solid var(--crimson); box-shadow: 0 10px 24px rgba(34,9,15,.14); }
.tm-mtd__copy h2 { margin-bottom: 18px; }
.tm-mtd__copy .lede { margin-bottom: 26px; color: var(--ink); }
.phase { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 28px; padding: 26px 0 0; list-style: none; }
.phase::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: rgba(117,21,35,.18); }
.phase::after { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--crimson); transform-origin: left; transform: scaleX(var(--p, 1)); }
.phase li { position: relative; display: grid; align-content: start; gap: 2px; padding-right: 14px; }
.phase__dot { position: absolute; left: 0; top: -26px; width: 16px; height: 16px; border-radius: 50%; background: var(--blush); border: 2.5px solid var(--crimson); z-index: 1; }
.phase li:first-child .phase__dot { background: var(--crimson); animation: tc-pulse-c 2.2s infinite; }
.phase b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 1.6vw, 1.5rem); color: var(--claret); line-height: 1.2; }
.phase span:last-child { font-size: .98rem; color: var(--ink-soft); line-height: 1.4; }
.tm-mtd__ticks { margin-bottom: 22px; font-weight: 600; }
@media (max-width: 900px) { .tm-mtd__grid { grid-template-columns: minmax(0, 1fr); } .tm-mtd__media { padding: 20px 8px 30px 14px; } .tm-mtd__cap { right: 0; } }
@media (max-width: 520px) {
  .phase { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 30px; gap: 14px; }
  .phase::before, .phase::after { left: 7px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; transform: scaleY(var(--p, 1)); transform-origin: top; }
  .phase__dot { left: -30px; top: 4px; }
}

/* ---------- 4. Call to action ---------- */
.tc-cta { overflow: clip; padding-block: clamp(64px, 8vw, 110px); }
.tc-cta__oval { position: absolute; left: -12vw; top: -30%; width: 64vw; height: 150%; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); box-shadow: inset 0 0 0 40px rgba(255,255,255,.03), inset 0 0 0 80px rgba(255,255,255,.02); animation: wobble 24s ease-in-out infinite alternate; pointer-events: none; }
.tc-cta__grid { position: relative; display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: clamp(36px, 5.5vw, 96px); align-items: center; }
.tc-cta__ph { position: relative; margin: 0; padding: 0 30px 30px 0; }
.tc-cta__ph::before { content: ''; position: absolute; inset: 18px 0 0 18px; border: 1.5px solid rgba(255,255,255,.55); pointer-events: none; }
.tc-cta__frame { position: relative; aspect-ratio: 1; max-height: var(--media-cap); }
.tc-cta__frame img { position: absolute; inset: -6% 0 auto; height: 112%; }
.tc-cta__stamp { position: absolute; right: 14px; bottom: 6px; z-index: 2; width: 150px; height: 94px; display: grid; place-content: center; text-align: center; border: 3px solid var(--crimson); outline: 1.5px solid var(--crimson); outline-offset: -9px; border-radius: 50%; color: var(--crimson); background: rgba(255,255,255,.93); transform: rotate(-11deg); box-shadow: 0 12px 26px rgba(0,0,0,.25); }
.tc-cta__stamp span { font-family: var(--serif); font-size: 1.4rem; line-height: 1; text-transform: uppercase; letter-spacing: .05em; }
.tc-cta__stamp small { margin-top: 4px; font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; }
.tc-cta__copy h2 { color: #fff; margin-bottom: 18px; }
.tc-cta__copy > p { font-size: clamp(1.08rem, 1.25vw, 1.2rem); color: #FBE3E8; margin-bottom: 26px; max-width: 120ch; }
.tc-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 3.4vw, 44px); }
.tc-next a { position: relative; display: grid; gap: 4px; height: 100%; padding: 18px 54px 18px 18px; background: #fff; color: var(--ink); text-decoration: none; border-top: 4px solid var(--highlight); transition: box-shadow .4s var(--ease); }
.tc-next a:hover { box-shadow: 0 20px 36px rgba(0,0,0,.25); }
.tc-next b { font-size: 1.06rem; line-height: 1.25; }
.tc-next span { font-size: .95rem; line-height: 1.4; color: var(--ink-soft); }
.tc-next svg { position: absolute; right: 16px; bottom: 18px; width: 20px; color: var(--crimson); transition: transform .35s var(--ease); }
.tc-next a:hover svg { transform: translateX(4px); }
@media (max-width: 1100px) { .tc-next { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .tc-cta__grid { grid-template-columns: minmax(0, 1fr); } .tc-cta__ph { width: min(78%, 360px); } }
@keyframes tc-bob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-5px) rotate(1deg); } }
.rm .tm--now::after { animation: none; }