/* A tag of kind Holy day (docs/spec/holy-day-tag.md, docs/design/holy-day-tag.html): everything centred. */
.hdt { --ink-faint: #9A8F80; padding-bottom: 48px; }
.hdt .crumbs { text-align: center; padding-top: 24px; font-size: 13px; }
.hdt .kick { display: block; font: 600 11px/1 var(--cond, var(--sans)); letter-spacing: .08em; text-transform: uppercase; color: var(--seal); margin-bottom: 8px; }

/* hero */
.hdt .fh { text-align: center; padding: 34px 0 30px; }
.hdt .seal2 { width: 132px; height: 132px; margin: 0 auto 22px; border-radius: 50%; border: 2px solid var(--seal); display: grid; place-content: center; position: relative; background: var(--white); }
.hdt .seal2::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--seal) 45%, transparent); }
.hdt .seal2 small { font: 600 10px/1 var(--cond, var(--sans)); letter-spacing: .12em; color: var(--seal); }
.hdt .seal2 b { font: 700 44px/1 var(--serif); color: var(--seal); margin: 6px 0 2px; }
.hdt .seal2 i { font: 600 10px/1 var(--cond, var(--sans)); font-style: normal; letter-spacing: .08em; color: var(--ink-faint); }
.hdt .fh .ko { font: 700 clamp(22px, 2.6vw, 28px)/1.2 var(--kr); color: var(--ink-soft); margin: 0 0 4px; word-break: keep-all; }
.hdt .fh .ko em { font-style: normal; font-weight: 500; color: var(--ink-faint); margin-left: 10px; font-size: .78em; }
.hdt .fh h1 { font: 600 clamp(46px, 6.4vw, 80px)/1 var(--serif); letter-spacing: -.035em; margin: 0 0 16px; overflow-wrap: anywhere; }
.hdt .fh .lead { font: 400 19px/1.6 var(--serif); color: var(--ink-soft); margin: 0 auto; max-width: 56ch; }
.hdt .fh .est { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center; margin-top: 16px; font: 600 11px/1 var(--cond, var(--sans)); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.hdt .fh .est i { width: 4px; height: 4px; border-radius: 50%; background: var(--rule); }

/* date strip */
.hdt .ds { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 18px 0; margin: 0 0 6px; }
.hdt .ds .big { display: flex; align-items: baseline; gap: 10px; }
.hdt .ds .big b { font: 700 54px/1 var(--serif); color: var(--seal); }
.hdt .ds .big span { font: 500 13px/1.25 var(--sans); color: var(--ink-soft); }
.hdt .ds .when { text-align: center; }
.hdt .ds .when small { display: block; font: 600 10.5px/1 var(--cond, var(--sans)); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.hdt .ds .when b { font: 600 22px/1.2 var(--serif); }
.hdt .ds .when span { display: block; font: 400 13px/1.4 var(--sans); color: var(--ink-soft); margin-top: 4px; }
.hdt .ds .acts { display: flex; gap: 8px; }
.hdt .ds .acts a { height: 42px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 99px; border: 1px solid var(--rule); background: var(--white); color: var(--ink); font: 600 13px/1 var(--sans); text-decoration: none; }
.hdt .ds .acts a.m { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 760px) {
  .hdt .ds { grid-template-columns: 1fr; text-align: center; gap: 12px; }
  .hdt .ds .big, .hdt .ds .acts { justify-content: center; }
}
.hdt .yrstrip { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 12px 0 0; padding: 0; list-style: none; }
.hdt .yrstrip li { font: 500 12.5px/1 var(--sans); border: 1px solid var(--rule); border-radius: 99px; padding: 7px 11px; background: var(--white); color: var(--ink-soft); }
.hdt .yrstrip li b { color: var(--ink); font-weight: 600; margin-right: 5px; }
.hdt .yrstrip li.past { opacity: .55; }
.hdt .yrstrip li.now { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hdt .yrstrip li.now b { color: var(--paper); }

/* sections */
.hdt .sx { padding: 34px 0 6px; }
.hdt .sxh { text-align: center; margin: 0 0 22px; }
.hdt .sxh h2 { font: 600 30px/1.15 var(--serif); margin: 0; }
.hdt .sxh p { font: 400 14px/1.4 var(--sans); color: var(--ink-soft); margin: 6px 0 0; }
.hdt .ab { max-width: 720px; margin: 0 auto; }
.hdt .ab p { font: 400 19px/1.75 var(--serif); margin: 0 0 1em; }
.hdt .qq { max-width: 760px; margin: 10px auto 0; text-align: center; padding: 26px 30px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.hdt .qq p { font: italic 400 24px/1.5 var(--serif); margin: 0 0 12px; }
.hdt .qq cite { font: 500 13px/1.4 var(--sans); font-style: normal; color: var(--ink-soft); }

/* texts by year */
.hdt .tl2 { max-width: 860px; margin: 0 auto; }
.hdt .tl2 .y { display: grid; grid-template-columns: 120px 28px minmax(0, 1fr); align-items: start; }
.hdt .yl { text-align: right; padding-top: 14px; }
.hdt .yl b { display: block; font: 700 28px/1 var(--serif); }
.hdt .yl small { font: 600 10.5px/1.6 var(--cond, var(--sans)); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.hdt .yd { position: relative; align-self: stretch; }
.hdt .yd::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: var(--rule); }
.hdt .yd::after { content: ""; position: absolute; left: 7px; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 3px solid var(--seal); }
.hdt .yc { padding: 8px 0 18px; }
.hdt .yc a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 16px; margin: 0 0 8px; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); color: var(--ink); text-decoration: none; }
.hdt .yc a:hover { border-color: var(--ink); }
.hdt .yc b { display: block; font: 600 17px/1.3 var(--serif); }
.hdt .yc small { display: block; font: 500 12px/1.3 var(--sans); color: var(--ink-faint); margin-top: 3px; }
.hdt .yc .t { font: 600 10px/1 var(--cond, var(--sans)); letter-spacing: .05em; text-transform: uppercase; border-radius: 5px; padding: 5px 7px; background: var(--paper-deep); color: var(--ink-soft); }
.hdt .yc .t.p { background: #E3E6EE; color: #2E4A6B; }
@media (max-width: 600px) {
  .hdt .tl2 .y { grid-template-columns: 22px minmax(0, 1fr); }
  .hdt .yl { grid-column: 2; text-align: left; padding-top: 10px; }
  .hdt .yd { grid-row: 1 / 3; grid-column: 1; }
  .hdt .yc { grid-column: 2; }
  .hdt .yd::before { left: 9px; }
  .hdt .yd::after { left: 3px; }
}
.hdt .more2 { text-align: center; margin: 6px 0 0; }
.hdt .more2 a { font: 600 14px/1 var(--sans); }
.hdt .oth { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hdt .oth a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; border-radius: 99px; border: 1px solid var(--rule); background: var(--white); color: var(--ink); text-decoration: none; font: 500 14px/1 var(--sans); }
.hdt .oth a em { font: 600 11px/1 var(--cond, var(--sans)); font-style: normal; color: var(--seal); }