/* The elf door sheets: an A4 page drawn in SVG, one millimetre per unit, put together from the
   parts in templates/doors/. `.outline` is the same sheet to colour in; `.size-m` and `.size-s`
   make the door smaller. Used by the page where a visitor chooses the parts, and by the bare
   page that the ready-made PDFs are printed from. */
@page { size: A4 portrait; margin: 0; }

.sheet { display: block; background: #FFFFFF; }
.sheet .s { stroke: #1C2B22; stroke-width: 0.9; stroke-linejoin: round; stroke-linecap: round; }
.sheet .s-thin { stroke-width: 0.5; }
.sheet .soft { stroke-opacity: 0.35; }
.sheet .nofill { fill: none; }
.sheet .cut { fill: none; stroke: #8A9189; stroke-width: 0.35; stroke-dasharray: 2 1.6; }
/* A line to write on by hand. */
.sheet .write { fill: none; stroke: #1C2B22; stroke-width: 0.45; stroke-linecap: round; stroke-dasharray: 0.1 1.5; }
.sheet .dot { fill: #1C2B22; }
.sheet .is-off { display: none; }

.sheet .c-red { fill: #B3202A; }
.sheet .c-green { fill: #1F5B3A; }
.sheet .c-leaf { fill: #2F7A4E; }
.sheet .c-green-light { fill: #CFE3D5; }
.sheet .c-gold { fill: #F2C94C; }
.sheet .c-glow { fill: #FFE9A8; }
.sheet .c-wood { fill: #B9824E; }
.sheet .c-wood-light { fill: #E9D3B4; }
.sheet .c-stone { fill: #D9D4C7; }
.sheet .c-iron { fill: #4A4238; }
.sheet .c-white { fill: #FFFFFF; }
.sheet .c-ink { fill: #1C2B22; }
.sheet .c-candy { fill: url(#candy); }

.sheet .t-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: 10px; fill: #1C2B22; }
.sheet .t-body { font-family: 'DM Sans', sans-serif; font-size: 3.5px; fill: #3C4A41; }
.sheet .t-foot { font-family: 'DM Sans', sans-serif; font-size: 3px; fill: #5C685F; text-anchor: middle; }
.sheet .t-hand { font-family: 'Caveat', cursive; font-weight: 700; font-size: 10px; fill: #1C2B22; text-anchor: middle; }
.sheet .t-hand-small { font-size: 7.6px; }
.sheet .t-cut { font-size: 4px; fill: #8A9189; }
.sheet .t-dot { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 3.6px; fill: #1C2B22; }

.sheet .art { transform-origin: 105px 150px; }
.sheet.size-m .art { transform: scale(0.7); }
.sheet.size-s .art { transform: scale(0.5); }

.sheet.outline .c-red, .sheet.outline .c-green, .sheet.outline .c-leaf, .sheet.outline .c-green-light, .sheet.outline .c-gold,
.sheet.outline .c-glow, .sheet.outline .c-wood, .sheet.outline .c-wood-light, .sheet.outline .c-stone, .sheet.outline .c-iron { fill: #FFFFFF; }
.sheet.outline .c-candy { fill: url(#candy-outline); }
.sheet.outline .soft { stroke-opacity: 1; }

/* The realistic doors (door-4 to door-9, from tools/door-art/make.mjs): their own gradients in `fill`,
   thin outlines, and lines of texture. Light and shadow are left out of a sheet to colour in. */
.sheet .r { stroke: #1F150D; stroke-width: 0.35; stroke-linejoin: round; stroke-linecap: round; }
.sheet .s-line { stroke: #1F150D; stroke-width: 0.45; stroke-linecap: round; }
.sheet .glazing { stroke-width: 0.8; }
.sheet .thick { stroke-width: 1; }
.sheet .grain { fill: none; stroke: #24140A; stroke-width: 0.16; stroke-opacity: 0.42; stroke-linecap: round; }
.sheet .grain-bark { stroke-width: 0.42; stroke-opacity: 0.6; }
.sheet .grain-soft { stroke-opacity: 0.14; }
.sheet .grain-speck { stroke-width: 0.3; stroke-opacity: 0.4; }
.sheet .needles { fill: none; stroke-width: 0.42; stroke-linecap: round; }
.sheet .icing { fill: none; stroke: #FFFDF6; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sheet .icing-thin { stroke-width: 0.8; }
.sheet .candy-swirl { fill: #C42430; }
.sheet .only-outline { display: none; }
.sheet.outline .g { fill: #FFFFFF; }
.sheet.outline .shade, .sheet.outline .only-colour { display: none; }
.sheet.outline .only-outline { display: inline; }
.sheet.outline .r, .sheet.outline .s-line, .sheet.outline .glazing { stroke: #1C2B22; stroke-width: 0.6; }
.sheet.outline .grain { stroke: #1C2B22; stroke-opacity: 0.45; }
.sheet.outline .grain-soft { stroke-opacity: 0.12; }
.sheet.outline .grain-bark { stroke-width: 0.25; stroke-opacity: 0.6; }
.sheet.outline .needles { stroke: #1C2B22; stroke-width: 0.22; stroke-opacity: 0.7; }
.sheet.outline .icing { stroke: #1C2B22; stroke-width: 0.5; }
.sheet.outline .needles { stroke: #1C2B22; }
.sheet.outline .candy-swirl { fill: #FFFFFF; stroke: #1C2B22; stroke-width: 0.4; }

/* The bare page: nothing but the sheet, at its real size. */
html:has(.door-bare), .door-bare { margin: 0; background: #FFFFFF; }
.door-bare .sheet { width: 210mm; height: 297mm; }
.door-bare .sheet:not(:first-of-type) { break-before: page; }

/* The page where the parts are chosen. */
.door-choose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 40px; padding-bottom: 72px; }
.door-controls { display: flex; flex-direction: column; gap: 18px; }
.door-controls h1 { font-size: clamp(32px, 4.5vw, 46px); }
.door-group { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 16px; }
.door-group h2 { font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
.door-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.door-pills a { padding: 9px 16px; border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 700; color: var(--ink); text-decoration: none; background: var(--card); }
.door-pills a:hover { border-color: var(--red); color: var(--red); }
.door-pills a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--card); }
/* What the sheet can become, always beside the choices. It is not printed. */
.door-finished { display: flex; align-items: center; gap: 14px; margin: 0; padding: 10px 14px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; }
.door-finished img { display: block; width: 96px; height: 120px; object-fit: contain; border-radius: 6px; background: #FFFFFF; }
.door-finished figcaption { font-size: 15px; line-height: 1.4; }

/* A door's own page. */
.door-page-back { margin: 0 0 8px; }
.door-page-what { margin: 0 0 16px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; font-size: 15px; }
.door-page-pictures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; margin: 24px 0; }
.door-page-pictures figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.door-page-pictures img, .door-play svg { display: block; width: 100%; height: auto; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; }
.door-page-pictures figcaption { font-size: 15px; color: var(--ink-soft); }
.door-play .cut, .door-play .t-cut { display: none; }
/* The door being coloured in: the finished picture, until the drawing takes its place. */
.door-fill-frame { position: relative; overflow: hidden; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; }
.door-page-pictures .door-fill-frame img { border: 0; border-radius: 0; }
.door-page-pictures .link-button { color: var(--red-dark); text-decoration: underline; }
.door-fill-art { display: none; }
.door-page-pictures .door-fill-art.is-drawn { display: block; width: 100%; height: auto; border: 0; border-radius: 0; }
.door-fill-art .cut, .door-fill-art .t-cut { display: none; }
.door-fill-under { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.door-more { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.door-more a { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--ink); text-decoration: none; }
.door-more a:hover { color: var(--red); text-decoration: underline; }
.door-more img { display: block; width: 100%; height: 150px; object-fit: contain; background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; }

/* The two tabs of the chooser: the door, and the things to put by it. */
.door-tabs { display: flex; gap: 0; box-sizing: border-box; height: 50px; border-bottom: 2px solid var(--ink); }
.door-tabs a { display: flex; align-items: center; padding: 0 20px; border: 2px solid transparent; border-bottom: 0; border-radius: 12px 12px 0 0; font-weight: 700; color: var(--ink); text-decoration: none; }
.door-tabs a:hover { color: var(--red); }
.door-tabs a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--card); }
/* The print button at the top. A visitor sent here to print has it pointed out, a few times. */
.door-print-top .btn.is-ready { animation: door-print-ready 1.2s ease-out 0.3s 3; }
@keyframes door-print-ready {
  from { box-shadow: 0 0 0 0 rgba(179, 32, 42, 0.55); }
  to { box-shadow: 0 0 0 16px rgba(179, 32, 42, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .door-print-top .btn.is-ready { animation: none; box-shadow: 0 0 0 4px rgba(179, 32, 42, 0.35); }
}
.door-name { display: flex; flex-direction: column; gap: 8px; }
.door-name label { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
.door-name-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.door-name textarea { width: 100%; box-sizing: border-box; resize: vertical; min-width: 0; padding: 10px 14px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; line-height: 1.4; }
/* A pen writing inside the field for the words on the sign. */
.door-name textarea { padding-left: 44px; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%231C2B22' stroke-width='1.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M9 15.5 L18.5 6 L21 8.5 L11.5 18 L8.2 18.8 Z' fill='%23F2C94C'/%3E%3Cpath d='M18.5 6 L19.8 4.7 a1.3 1.3 0 0 1 1.8 0 L22.3 5.4 a1.3 1.3 0 0 1 0 1.8 L21 8.5 Z' fill='%23B3202A'/%3E%3Cpath d='M8.2 18.8 L9 15.5 L11.5 18 Z' fill='%231C2B22'/%3E%3Cpath d='M1.5 21.5 c1.2 -2.2 2.4 -2.2 3 0 s1.8 2.2 3 0 s1.8 -2.2 3 0' fill='none' stroke='%231F5B3A' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat 12px 10px / 22px 22px; }
.door-after { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 8px; padding: 22px 24px; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; }
.door-after h2 { font-size: 24px; }
.door-after p { color: var(--ink-soft); }
.door-after.is-on { border-color: var(--red); box-shadow: 0 0 0 4px rgba(179, 32, 42, 0.14); }
/* On the pages that offer the ready-made sheets: the size, chosen once, and what each door offers. */
.door-size { margin-top: 8px; }
.door-get { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin-top: auto; }
.door-get .btn { text-align: center; justify-content: center; }
.door-get .text-link { padding: 10px 0 2px; text-align: center; font-size: 15px; }
.door-preview { position: sticky; top: 16px; }
.door-preview .sheet { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45); }
/* Several sheets are taller than the screen, so they scroll with the page. */
.door-preview-many { position: static; }
.sheet-label { margin: 16px 0 6px; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
/* The first sheet's label has a place of its own beside the tabs, empty when there is one sheet, so
   a sheet's top edge is always level with the line under the tabs and nothing jumps. */
.door-preview > .sheet-label:first-child { display: flex; align-items: flex-end; box-sizing: border-box; height: 48px; margin: 0; padding-bottom: 8px; }
@media (max-width: 860px) {
  /* The tabs stay on top, then the sheet, then the choices. */
  .door-choose { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .door-controls { display: contents; }
  .door-tabs { order: -2; }
  .door-preview { position: static; order: -1; max-width: 420px; }
  .door-preview > .sheet-label:first-child { height: auto; padding-bottom: 6px; }
  .door-preview > .sheet-label:empty { display: none; }
}

@media print {
  body { background: #FFFFFF !important; }
  body::before, .skip-link, header.nav, footer.footer, .cookie, .door-controls, .sheet-label { display: none !important; }
  /* Each sheet of accessories is a page of its own. */
  .sheet:not(:first-of-type) { break-before: page; }
  .door-choose { display: block; padding: 0; max-width: none; }
  .door-preview { position: static; }
  .door-preview .sheet { width: 210mm; height: 297mm; border: none; border-radius: 0; box-shadow: none; }
}

/* A printer feeding out a door and scissors cutting it, beside the steps, for as long as the
   page is open.
   Nothing moves for reduced motion.
   The scissors sit right of the printer, as wide as it, with their blades at the height of the
   paper that comes out; --cut-to is how far they reach, in the scissors' units, for the tip to
   meet the paper's edge (at x 90 of the printer's 120, or 82 for the sheet that mirrors the
   page). */
.craft { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 0; margin: 8px 0 4px; }
.craft svg { display: block; width: 104px; height: auto; overflow: visible; }
.craft .craft-scissors { margin-top: 43px; --cut-to: -57px; }
.craft-large .craft-scissors { margin-top: 65px; --cut-to: -66px; }
.craft-paper { fill: #FFFFFF; stroke: var(--ink); stroke-width: 2; }
.craft-ink-line { fill: none; stroke: var(--line); stroke-width: 2.5; stroke-linecap: round; }
.craft-body { fill: var(--red); stroke: var(--ink); stroke-width: 2.5; }
.craft-lid { fill: var(--red-dark); }
.craft-slot { fill: var(--ink); }
.craft-light { fill: #F2C94C; stroke: var(--ink); stroke-width: 1.5; }
.craft-door { fill: var(--green); stroke: var(--ink); stroke-width: 1.5; }
.craft-knob { fill: #F2C94C; }
.craft-cut { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 2.5; }
.craft-steel { fill: #D5D9DD; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.craft-arm { fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round; }
.craft-ring { fill: none; stroke: var(--red); stroke-width: 5; }

.craft-sheet { transform-box: view-box; transform-origin: 60px 66px; animation: craft-print 4s ease-in-out 0.4s infinite both; }
.craft-printer .craft-light { animation: craft-blink 1s steps(2, jump-none) 0s infinite; }
@keyframes craft-print {
  0%, 8% { transform: translateY(-62px) rotate(0deg); }
  55% { transform: translateY(0) rotate(0deg); }
  63% { transform: translateY(0) rotate(-4deg); }
  71% { transform: translateY(0) rotate(3deg); }
  79% { transform: translateY(0) rotate(-1.5deg); }
  87%, 100% { transform: translateY(0) rotate(0deg); }
}
@keyframes craft-blink { from { fill: #F2C94C; } to { fill: #7FBF6A; } }

/* The scissors come in like a hand would: from below on the right, tilted, in a curve that
   straightens out at the paper's edge. They open on the way, push in a little and snip shut
   there, then draw back the same way and fade, for as long as the page is open. The whole
   pair moves along the curve; each blade only turns about the screw. */
.craft-scissors-move, .craft-blade-low, .craft-blade-high { transform-box: view-box; transform-origin: 72px 40px; }
.craft-scissors-move { animation: craft-hand 3.6s linear 0.4s infinite both; }
.craft-blade-low { animation: craft-snip-low 3.6s linear 0.4s infinite both; }
.craft-blade-high { animation: craft-snip-high 3.6s linear 0.4s infinite both; }
@keyframes craft-hand {
  0% { transform: translate(34px, 30px) rotate(-16deg); opacity: 0; animation-timing-function: ease-out; }
  10% { transform: translate(24px, 22px) rotate(-13deg); opacity: 1; animation-timing-function: ease-in-out; }
  32% { transform: translate(calc(var(--cut-to) * 0.45), 7px) rotate(-6deg); animation-timing-function: ease-out; }
  52% { transform: translate(var(--cut-to), 0) rotate(0deg); animation-timing-function: ease-in-out; }
  60% { transform: translate(calc(var(--cut-to) - 3px), 0) rotate(1deg); }
  76% { transform: translate(calc(var(--cut-to) - 3px), 0) rotate(0deg); animation-timing-function: ease-in; }
  86% { transform: translate(calc(var(--cut-to) * 0.5), 9px) rotate(-7deg); opacity: 1; }
  100% { transform: translate(34px, 30px) rotate(-16deg); opacity: 0; }
}
@keyframes craft-snip-low {
  0%, 12% { transform: rotate(0deg); animation-timing-function: ease-in-out; }
  52% { transform: rotate(-18deg); animation-timing-function: ease-in-out; }
  74%, 100% { transform: rotate(0deg); }
}
@keyframes craft-snip-high {
  0%, 12% { transform: rotate(0deg); animation-timing-function: ease-in-out; }
  52% { transform: rotate(18deg); animation-timing-function: ease-in-out; }
  74%, 100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .craft-sheet, .craft-light, .craft-scissors-move, .craft-blade-low, .craft-blade-high { animation: none !important; }
}
.craft-large svg { width: 136px; }
.door-over { margin: 0; padding: 8px 12px; border-left: 3px solid var(--red); background: var(--card); font-size: 15px; color: var(--ink); }
.door-over [data-sign-over] { text-decoration: line-through; color: var(--red-dark); }

/* The lettering on the mats and signs. Fraunces and DM Sans are wider than Caveat, so they are
   set at 0.8 of its size; a line then takes about as much room, and the sign's own lines,
   scaled from the size of .t-hand, fit as they are measured. */
.sheet.font-s .t-hand { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 8px; }
.sheet.font-p .t-hand { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 8px; }
.sheet.font-s .t-hand-small, .sheet.font-p .t-hand-small { font-size: 5.4px; }
.door-pills .pill-font-c { font-family: 'Caveat', cursive; font-size: 1.2em; }
.door-pills .pill-font-s { font-family: 'Fraunces', Georgia, serif; }
.door-pills .pill-font-p { font-family: 'DM Sans', sans-serif; }