/* =============================================================================
 * xmas.css — every style for /christmas/.
 *
 * Part 1 is the site's own page furniture, copied from the inline <style> in
 * include/category-v2.inc (fonts, nav colours, cookie notice), so the header
 * and footer look exactly as they do on a category page.
 * Part 2 is the Christmas shop. Every rule is scoped under .xmas, so nothing
 * here can reach the header, the footer or any other page.
 * ========================================================================== */

/* ---- Part 1: site furniture (from category-v2.inc) ---------------------- */
@font-face{font-family:'myNinna';src:url('/fonts/Ninna-Regular.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/poppins-600.woff2') format('woff2')}
@font-face{font-family:'FontAwesome';src:url('/assets/fonts/fa-subset.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:swap}
.scrollToTop{background-color:#676767;border:2px solid #676767}
.mu-main-navbar .mu-main-nav li a:hover,.mu-main-navbar .mu-main-nav li a:focus,
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus,
.mu-footer-copyright p a:hover,.mu-footer-copyright p a:focus,
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,
.mu-main-navbar .navbar-header .navbar-brand span{color:#676767}
.mu-footer-social a:hover{background-color:#222}
.navbar-default .navbar-toggle .icon-bar{background-color:#676767}
.db-cookie{position:fixed;left:0;right:0;bottom:0;z-index:120;background:rgba(51,51,51,.94);color:#fff;padding:14px 40px 16px 16px;text-align:center;font-family:'Poppins',sans-serif;font-size:13px;line-height:1.5}
.db-cookie__t{display:block;font-size:17px;font-weight:600;margin-bottom:4px}
.db-cookie__ok{background:none;border:0;color:#e8b73a;font:inherit;font-weight:700;cursor:pointer;padding:0 10px}
.db-cookie a{color:#e8b73a}
.db-cookie__x{position:absolute;top:8px;right:14px;color:#fff;font-size:15px;background:none;border:0;cursor:pointer;line-height:1}
.x-preview{background:#7d1527;color:#fff;font:600 13px/1.4 'Poppins',sans-serif;text-align:center;padding:8px 16px}

/* ---- Part 2: the Christmas shop ----------------------------------------- */
/* "Private Viewing": stone paper, ink type, the green of the shop's own gift
   ribbon as the one accent, and the black of its box for the one dark band.
   Newsreader carries the voice; Hanken Grotesk carries facts (prices,
   counts, labels). No drawn decoration and no metallic effects. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('fonts/newsreader.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 500;font-display:swap;
  src:url('fonts/newsreader-italic.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('fonts/hanken-grotesk.woff2') format('woff2')}

.xmas{
  --stone:#f3efe7; --ivory:#fbf9f5; --paper:#ebe5da; --ink:#1d1b18; --ink2:#4a443b; --mute:#6c655a; --rule:#d5cec1;
  --green:#1d5a3c; --green-dk:#143f2a; --box:#1e1d1a;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',-apple-system,'Segoe UI',Roboto,sans-serif;
  --gut:20px;
  display:flow-root;background:var(--stone);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.55;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
.xmas *,.xmas *::before,.xmas *::after{box-sizing:border-box}
.xmas ul,.xmas ol{list-style:none;margin:0;padding:0}
.xmas p,.xmas h1,.xmas h2,.xmas h3,.xmas figure{margin:0}
.xmas h1,.xmas h2,.xmas h3{text-transform:none;letter-spacing:0;color:inherit}
.xmas img{max-width:100%;height:auto;display:block}
/* A photo missing on the server leaves a plain paper panel, not alt text. */
.xmas .x-card__img img,.xmas .x-present__img img,.xmas .x-persona__img img,.xmas .x-week img{color:transparent;font-size:0}
.xmas em,.xmas i{font-style:italic}
.xmas a{color:inherit;text-decoration:none}
.xmas p a,.xmas .x-skip a,.xmas .x-anyline a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--green);
  text-decoration-thickness:1px;text-underline-offset:4px}
.xmas p a:hover,.xmas p a:focus{color:var(--green)}
.xmas a:focus-visible,.xmas button:focus-visible,.xmas summary:focus-visible,.xmas [tabindex]:focus-visible{
  outline:2px solid var(--green);outline-offset:3px}
.xmas .x-q:focus{outline:none}

/* Type */
.xmas .x-lab{display:block;font:500 11px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.xmas .x-lab--g{color:var(--green)}
.xmas .x-q{font:300 36px/1.02 var(--serif);letter-spacing:-.02em;margin:0 0 20px}
.xmas .x-q--hero{font-size:52px;line-height:.96;letter-spacing:-.028em;margin:16px 0 18px}
.xmas .x-h2{font:300 34px/1.04 var(--serif);letter-spacing:-.018em;margin:14px 0 16px}
.xmas .x-lede{font:400 17px/1.5 var(--serif);color:var(--ink2);max-width:34ch}

/* Buttons: one solid style in ribbon green, square, with plain words */
.xmas .x-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;
  background:var(--green);color:#fff;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  transition:background-color .2s}
.xmas .x-btn:hover,.xmas .x-btn:focus{background:var(--green-dk);color:#fff}
.xmas .x-btn--line{display:flex;width:100%;background:none;color:var(--ink);border-top:1px solid var(--ink);
  border-bottom:1px solid var(--rule);min-height:60px;gap:12px}
.xmas .x-btn--line span{color:var(--mute);letter-spacing:.06em;text-transform:none;font-weight:400}
.xmas .x-btn--line:hover,.xmas .x-btn--line:focus{background:var(--paper);color:var(--ink)}

/* ---- The evergreen ribbon, tied across the top-left of the page ----
   It reaches 20px up onto the white header. Its top 13% is faded out, so the
   branches soften into the white rather than stopping in a straight line.
   The header has 21px of clear white below its lowest content at every
   width, so the overlap (capped at 20px) never touches a letter.
   Phones: full width (600/1800 = 33.3vw tall). Desktop: 560px wide. */
.xmas{position:relative}
/* The ribbon itself is now drawn by the header (include/xmas/xmas_nav.inc),
   so it stays with the navigation when the page scrolls. */

/* ---- The first screen: the finder beside the owner's own photograph ---- */
.xmas .x-top{display:flex;flex-direction:column;padding:0 var(--gut) 36px}
.xmas .x-finder{min-width:0}
/* The owner's box photo, whole and uncropped, multiplied onto the page: its
   white becomes the page colour and its real shadows stay as photographed.
   Its background was faded to pure white towards the image edges (which also
   removed the strip of table on the right), so no edge or frame can show. */
.xmas .x-gift{order:-1;margin:0 0 20px}
.xmas .x-gift__img{display:block;max-width:420px;margin:0 auto}
/* The boxes end about three quarters down the image; the caption tucks up
   into the empty (transparent) space below them. */
.xmas .x-gift__img img{width:100%;height:auto;margin-bottom:-20%;mix-blend-mode:multiply}
.xmas .x-gift figcaption{margin:0 auto;font:italic 400 15px/1.45 var(--serif);color:var(--ink2);max-width:46ch}
/* With no photo under it (a step is open), leave room for the ribbon. */
.xmas .x-top{padding-top:calc(33.3vw - 24px)}
.xmas .x-step--who{padding-top:2px}
.xmas .x-who{border-top:1px solid var(--ink);margin-top:30px}
.xmas .x-who__a{display:flex;align-items:center;gap:16px;min-height:64px;padding:10px 0;
  border-bottom:1px solid var(--rule);transition:color .2s}
.xmas .x-who__n{font:400 25px/1.1 var(--serif);letter-spacing:-.01em}
/* The insignia: a fine line drawing in ribbon green, in a thin ring like a
   hallmark stamp. It fills with the green on hover. */
.xmas .x-ins{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;
  border:1px solid #cfc6b6;color:var(--green);background:#f7f4ee;transition:background-color .2s,color .2s,border-color .2s}
.xmas .x-ins svg{width:30px;height:34px}
.xmas .x-who__a:hover .x-ins,.xmas .x-who__a:focus .x-ins,.xmas .x-who__a.is-on .x-ins{background:var(--green);border-color:var(--green);color:#fff}
.xmas .x-who__a:hover .x-who__n,.xmas .x-who__a:focus .x-who__n,.xmas .x-who__a.is-on .x-who__n{font-style:italic;color:var(--green)}

/* Once a step is open the finder takes the whole width and the landing-only
   sections step aside (main.is-step is set by the page and by xmas.js). */
.xmas.is-step .x-landing{display:none!important}

/* ---- The service, said plainly ---- */
/* Sections alternate between the stone page and a lighter ivory band, each
   starting on a hairline, so one never runs into the next:
   first screen (stone) / how we help (ivory) / personality (stone) /
   budgets (ivory) / piece of the week (stone) / one of one (ivory). */
.xmas .x-service-intro,.xmas .x-service,.xmas .x-intro-budget,.xmas .x-promise{background:var(--ivory)}
.xmas.is-step .x-promise{background:var(--stone)}
.xmas .x-intro-quiz,.xmas .x-intro-budget{border-top:1px solid var(--rule)}
.xmas .x-service{border-bottom:1px solid var(--rule)}
.xmas .x-service-intro{padding:52px var(--gut) 28px;border-top:1px solid var(--rule)}
.xmas .x-service-intro .x-h2{margin-bottom:12px}
.xmas .x-service{display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule)}
.xmas .x-service>div{padding:22px var(--gut) 24px;border-bottom:1px solid var(--rule)}
.xmas .x-n{font:500 11px var(--sans);letter-spacing:.16em;color:var(--green)}
.xmas .x-service h2{font:400 21px/1.2 var(--serif);margin:8px 0 6px}
.xmas .x-service p{font-size:14px;line-height:1.55;color:var(--ink2)}
.xmas .x-ask{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px}
.xmas .x-ask a{display:inline-block;padding:4px 0;font-weight:500;color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--green);text-underline-offset:5px}
.xmas .x-deadline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;padding:16px var(--gut);
  background:var(--box);color:#a9a196;font-size:13px}
.xmas .x-deadline__d{font:italic 400 19px/1.3 var(--serif);color:#fff}

/* ---- Personalities (landing and step 2) ---- */
.xmas .x-intro-quiz,.xmas .x-intro-budget{padding:56px var(--gut)}
.xmas .x-intro-quiz .x-btn{margin-top:24px}
.xmas .x-personas{display:grid;grid-template-columns:1fr;gap:18px;margin-top:34px}
/* Each personality is its own framed card: ivory on the stone page, a fine
   border that turns green on hover. */
.xmas .x-personas>li{display:flex}
.xmas .x-persona{display:grid;grid-template-columns:38% 1fr;gap:18px;align-items:center;width:100%;
  padding:12px;background:var(--ivory);border:1px solid #d9d1c3;transition:border-color .2s,background-color .2s}
.xmas .x-persona:hover,.xmas .x-persona:focus-visible,.xmas .x-persona.is-on{border-color:var(--green);background:#fff}
.xmas .x-persona__txt{padding-right:8px}
.xmas .x-persona__img{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.xmas .x-persona__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.xmas .x-persona__name{display:block;font:400 22px/1.12 var(--serif);margin:6px 0 6px;transition:color .2s}
.xmas .x-persona__spot{display:block;font-size:13px;line-height:1.5;color:var(--mute)}
.xmas .x-persona:hover .x-persona__name,.xmas .x-persona:focus .x-persona__name,.xmas .x-persona.is-on .x-persona__name{color:var(--green);font-style:italic}
.xmas .x-persona:hover .x-persona__img img{transform:scale(1.03)}
.xmas .x-style .x-btn{margin-top:22px}
.xmas .x-style .x-lab{margin-top:40px}
.xmas .x-style .x-personas{margin-top:18px}
.xmas .x-skip{margin-top:16px;font-size:14px}

/* ---- Budgets named like presents ---- */
.xmas .x-presents{display:grid;grid-template-columns:1fr 1fr;gap:28px 16px;margin-top:30px}
.xmas .x-present{display:block}
.xmas .x-present__img{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--paper)}
.xmas .x-present__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.xmas .x-present:hover .x-present__img img{transform:scale(1.03)}
.xmas .x-present__name{display:block;font:400 21px/1.15 var(--serif);margin-top:12px}
.xmas .x-present__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;margin-top:4px;font-size:12.5px;color:var(--mute);
  font-variant-numeric:tabular-nums}
.xmas .x-present:hover .x-present__name,.xmas .x-present.is-on .x-present__name{color:var(--green)}
.xmas .x-present--none{opacity:.45}
.xmas .x-anyline{margin-top:30px;font-size:14px}
.xmas .x-reserve-line{margin-top:10px;font-size:13px;color:var(--mute)}

/* ---- The owner's own Christmas photograph, as a wide band ---- */

/* ---- The Christmas selection ---- */

/* ---- Piece of the week ---- */
.xmas .x-week{display:grid;gap:26px;padding:56px var(--gut);border-top:1px solid var(--rule)}
.xmas .x-week__img{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--paper)}
.xmas .x-week__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.xmas .x-week__img:hover img{transform:scale(1.02)}
.xmas .x-week .x-h2 a:hover{color:var(--green)}
.xmas .x-week__story{font:400 18px/1.6 var(--serif);color:var(--ink2);max-width:44ch;margin-bottom:18px}
.xmas .x-week__price{font:500 18px var(--sans);font-variant-numeric:tabular-nums;margin-bottom:20px}
.xmas .x-week__price span{font-weight:400;font-size:13.5px;color:var(--mute);margin-left:8px}
.xmas .x-week__past{grid-column:1 / -1;border-top:1px solid var(--rule);padding-top:22px}
.xmas .x-week__past ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;margin-top:16px}
.xmas .x-week__thumb{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--paper);margin-bottom:10px}
.xmas .x-week__thumb img{width:100%;height:100%;object-fit:cover}
.xmas .x-week__t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:400 15px/1.3 var(--serif);margin-top:4px}
.xmas .x-week__p{display:block;margin-top:3px;font-size:13.5px;font-weight:500;font-variant-numeric:tabular-nums}

/* ---- Promise and the deposit explainer ---- */
.xmas .x-promise{display:grid;gap:28px;padding:44px var(--gut);border-top:1px solid var(--rule)}
.xmas .x-promise__t{font:300 34px/1 var(--serif);letter-spacing:-.02em;margin-bottom:14px}
.xmas .x-promise__p{font:400 17px/1.55 var(--serif);color:var(--ink2);max-width:46ch}
.xmas .x-appt{margin-top:12px;font-size:13.5px;color:var(--ink2)}
.xmas .x-promise .x-appt{font-size:14.5px;margin-top:18px}
.xmas .x-howto{background:var(--paper);padding:48px var(--gut) 56px}
.xmas .x-howto__h{font:300 32px/1.05 var(--serif);letter-spacing:-.018em;margin:12px 0 26px}
.xmas .x-howto__steps{counter-reset:x-step;display:grid;gap:22px}
.xmas .x-howto__steps li{position:relative;padding-left:52px;counter-increment:x-step}
.xmas .x-howto__steps li::before{content:counter(x-step);position:absolute;left:0;top:-6px;
  font:300 36px/1 var(--serif);color:var(--green)}
.xmas .x-howto__steps b{display:block;font:400 19px/1.25 var(--serif)}
.xmas .x-howto__steps span{display:block;font-size:14px;color:var(--ink2);margin-top:2px}
.xmas .x-howto__q{margin-top:26px;font-size:14px;color:var(--ink2)}

/* ---- The trail of answers on every step ---- */
/* Dividers only from 600px: on a phone the line wraps, and a divider would
   start the second line. */
.xmas .x-trail{display:flex;flex-wrap:wrap;gap:0 22px;margin:0 0 22px;font-size:13px;color:var(--ink2)}
.xmas .x-trail li{display:flex;align-items:baseline;gap:8px}
@media (min-width:600px){
  .xmas .x-trail{gap:0}
  .xmas .x-trail li+li::before{content:'';width:1px;height:12px;background:var(--rule);margin:0 14px;align-self:center}
}
.xmas .x-trail span{font-weight:500;color:var(--ink)}
.xmas .x-trail i{font-weight:400;color:var(--ink2)}
.xmas .x-trail a{padding:10px 0;font-size:12px;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.xmas .x-trail a:hover{color:var(--green)}

/* ---- Results ---- */
.xmas .x-results__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:28px}
.xmas .x-results__head .x-q{margin:0}
.xmas .x-results__n{font-size:12px;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.xmas .x-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px 16px}
.xmas .x-card{display:flex;flex-direction:column;min-width:0}
.xmas .x-card__link{display:block}
.xmas .x-card__img{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--paper)}
.xmas .x-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.xmas .x-card__link:hover .x-card__img img{transform:scale(1.03)}
.xmas .x-card__pick{display:block;margin-top:12px;font:500 10.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.xmas .x-card__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font:400 16px/1.3 var(--serif);margin-top:10px}
.xmas .x-card__pick+.x-card__title{margin-top:4px}
.xmas .x-card__price{display:block;margin-top:6px;font:500 15px var(--sans);font-variant-numeric:tabular-nums}
.xmas .x-card__link:hover .x-card__title{color:var(--green)}
.xmas .x-card__dep{font-size:12.5px;color:var(--mute);margin-top:1px}
.xmas .x-more{margin-top:44px}
.xmas .x-empty p{margin-bottom:12px;font:400 17px/1.55 var(--serif);color:var(--ink2)}

/* Drop a hint / send this list: a quiet text link that opens to three */
.xmas .x-share{margin-top:6px}
.xmas .x-share__btn{display:inline-flex;align-items:center;min-height:36px;cursor:pointer;list-style:none;
  font-size:12.5px;color:var(--ink2);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px}
.xmas .x-share__btn::-webkit-details-marker{display:none}
.xmas .x-share__btn:hover{color:var(--green);text-decoration-color:var(--green)}
.xmas .x-share__menu{display:flex;flex-wrap:wrap;gap:4px 16px;padding-bottom:6px}
.xmas .x-share__menu a,.xmas .x-share__menu button{display:inline-flex;align-items:center;min-height:36px;padding:0;
  border:0;background:none;font:500 12.5px var(--sans);color:var(--green);cursor:pointer}
.xmas .x-after{display:grid;gap:0;margin-top:56px;border-top:1px solid var(--ink)}
.xmas .x-after__item{padding:22px 0;border-bottom:1px solid var(--rule)}
.xmas .x-after__t{font:400 22px/1.2 var(--serif);margin-bottom:4px}
.xmas .x-after__item>p{font-size:14px;color:var(--ink2)}
.xmas .x-after .x-share__btn{font-size:14px;color:var(--ink);text-decoration-color:var(--green);font-weight:500}

/* ---- The quiz ---- */
.xmas .x-quizbar{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.xmas .x-quizbar__back{display:inline-flex;align-items:center;min-height:44px;font-size:13px;color:var(--ink2);
  text-decoration:underline;text-underline-offset:3px}
.xmas .x-quizbar__n{margin-left:auto;font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.xmas .x-quizbar__track{flex:1 0 100%;height:2px;background:var(--rule)}
.xmas .x-quizbar__track span{display:block;height:100%;background:var(--green);transition:width .4s ease-out}
.xmas .x-quiztip{margin:-8px 0 20px;font:italic 400 16px/1.5 var(--serif);color:var(--ink2);max-width:52ch}
.xmas .x-answers{border-top:1px solid var(--ink);max-width:820px}
.xmas .x-ans{display:block;padding:16px 0 15px;border-bottom:1px solid var(--rule)}
.xmas .x-ans__l{display:block;font:400 23px/1.2 var(--serif);letter-spacing:-.005em;transition:color .2s}
.xmas .x-ans__d{display:block;margin-top:3px;font-size:13px;color:var(--mute)}
.xmas .x-ans:hover .x-ans__l,.xmas .x-ans:focus .x-ans__l,.xmas .x-ans.is-on .x-ans__l{color:var(--green);font-style:italic}

/* ---- The reveal ---- */
.xmas .x-reveal{margin:12px 0 34px}
.xmas .x-reveal__she{font:italic 300 24px/1.2 var(--serif);color:var(--green);margin-bottom:14px}
.xmas .x-reveal__lab{font:500 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.xmas .x-reveal__name{font-size:48px;line-height:.98;letter-spacing:-.028em;margin:10px 0 0}
.xmas .x-reveal__streak{margin-top:10px;font:400 18px var(--serif);color:var(--ink2)}
.xmas .x-reveal__streak em{color:var(--green)}
.xmas .x-reveal__tag{margin-top:14px;font:italic 300 22px/1.3 var(--serif);color:var(--ink2)}
.xmas .x-reveal__body{display:grid;gap:30px;border-top:1px solid var(--ink);padding-top:26px}
.xmas .x-reveal__blurb{font:400 18px/1.6 var(--serif);color:var(--ink);margin-bottom:24px;max-width:44ch}
.xmas .x-reveal__h{font:500 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:22px 0 8px}
.xmas .x-reveal__h:first-child{margin-top:0}
.xmas .x-yes li,.xmas .x-no li{position:relative;padding:5px 0 5px 22px;font:400 17px/1.4 var(--serif)}
.xmas .x-yes li::before,.xmas .x-no li::before{content:'';position:absolute;left:0;top:16px;width:11px;height:1px;background:var(--green)}
.xmas .x-no li{color:var(--mute)}
.xmas .x-no li::before{background:var(--rule)}
.xmas .x-mix li{display:grid;grid-template-columns:100px 1fr 40px;align-items:center;gap:12px;padding:5px 0;font-size:13px}
.xmas .x-mix__bar{height:3px;background:var(--rule)}
.xmas .x-mix__bar span{display:block;height:100%;background:var(--x-p,var(--ink));transform-origin:left;animation:x-grow .9s .2s ease-out both}
@keyframes x-grow{from{transform:scaleX(0)}}
.xmas .x-mix__v{text-align:right;color:var(--mute);font-variant-numeric:tabular-nums}
.xmas .x-notes{margin:30px 0 0;padding:4px 0 4px 18px;border-left:2px solid var(--green);font-size:14px;color:var(--ink2);max-width:72ch}
.xmas .x-notes li{padding:4px 0}
.xmas .x-notes b{color:var(--ink);font-weight:600}
/* The end of the quiz: straight on to a budget */
.xmas .x-reveal__shop{margin:38px 0 30px;padding-top:26px;border-top:1px solid var(--rule)}
.xmas .x-reveal__shop .x-presents{margin-top:18px}
.xmas .x-step--reveal>.x-btn{width:100%}

/* ---- Dialog (the deposit explainer, opened by xmas.js) ---- */
.x-dialog{border:0;padding:0;max-width:100%;width:100%;margin:auto 0 0;background:#ebe5da;color:#1d1b18}
.x-dialog.xmas{overflow:auto;max-height:92vh;background:#ebe5da}
.x-dialog::backdrop{background:rgba(20,18,15,.55)}
.x-dialog__x{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:none;font-size:28px;
  line-height:1;color:#1d1b18;cursor:pointer}

/* ---- Wider phones and tablets ---- */
@media (min-width:600px){
  .xmas{--gut:32px}
  .xmas .x-q{font-size:44px}
  .xmas .x-q--hero{font-size:64px}
  .xmas .x-h2{font-size:42px}
  .xmas .x-who{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
  .xmas .x-service{grid-template-columns:1fr 1fr}
  .xmas .x-service>div:nth-child(odd){border-right:1px solid var(--rule)}
  .xmas .x-personas{grid-template-columns:1fr 1fr;gap:20px}
  .xmas .x-persona{grid-template-columns:44% 1fr}
  .xmas .x-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 20px}
  .xmas .x-after{grid-template-columns:1fr 1fr;column-gap:40px}
  .xmas .x-reveal__name{font-size:68px}
  .xmas .x-reveal__body{grid-template-columns:7fr 5fr;gap:56px}
  .xmas .x-step--reveal>.x-btn{width:auto}
  .xmas .x-promise{grid-template-columns:4fr 8fr;gap:48px;align-items:baseline}
  .xmas .x-week__past ul{grid-template-columns:repeat(4,minmax(0,1fr))}
  .x-dialog{max-width:560px;margin:auto}
}

/* ---- Desktop ---- */
@media (min-width:992px){
  .xmas{--gut:72px}
  /* Two measured columns, never stretched: on wide screens the space goes
     to the margins, not into a bigger photo. */
  .xmas .x-top{display:grid;grid-template-columns:minmax(0,760px) minmax(0,520px);justify-content:space-between;
    gap:0 64px;align-items:center;max-width:calc(1170px + 2 * var(--gut));margin:0 auto;padding:96px var(--gut) 72px}
  .xmas .x-gift{order:0;margin:0}
  .xmas .x-gift__img{max-width:none}
  .xmas .x-gift figcaption{margin:14px 0 0;font-size:15px;max-width:46ch}
  .xmas .x-q{font-size:56px}
  .xmas .x-q--hero{font-size:88px}
  .xmas .x-h2{font-size:52px}
  .xmas .x-lede{font-size:19px}
  .xmas .x-who__n{font-size:28px}
  .xmas.is-step .x-top{display:block;max-width:none;padding:120px var(--gut) 72px}
  .xmas .x-service{grid-template-columns:repeat(4,1fr)}
  .xmas .x-service>div{padding:30px 32px 32px;border-bottom:0;border-right:1px solid var(--rule)}
  .xmas .x-service>div:first-child{padding-left:var(--gut)}
  .xmas .x-service>div:last-child{border-right:0;padding-right:var(--gut)}
  .xmas .x-intro-quiz{display:grid;grid-template-columns:4fr 8fr;gap:64px;padding:104px var(--gut) 96px}
  .xmas .x-intro-quiz .x-personas{margin-top:0}
  .xmas .x-style{display:grid;grid-template-columns:4fr 8fr;gap:64px;align-items:start}
  .xmas .x-style .x-lab{margin-top:0}
  .xmas .x-intro-budget{padding:96px var(--gut) 104px}
  .xmas .x-presents{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
  .xmas .x-presents li:nth-child(even){margin-top:56px}
  .xmas .x-present__name{font-size:23px}
  .xmas .x-promise{padding:72px var(--gut)}
  .xmas .x-promise__t{font-size:52px}
  .xmas .x-week{grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:40px 72px;align-items:center;padding:96px var(--gut)}
  .xmas .x-week__past ul{grid-template-columns:repeat(6,minmax(0,1fr))}
  .xmas .x-service-intro{padding:80px var(--gut) 32px}
  .xmas .x-service-intro .x-lede{max-width:52ch}
  .xmas .x-promise__p{font-size:19px}
  .xmas .x-howto{padding:80px var(--gut) 88px}
  .xmas .x-howto__in{display:grid;grid-template-columns:4fr 8fr;gap:0 64px}
  .xmas .x-howto__in>.x-lab{grid-column:1 / -1}
  .xmas .x-howto__h{font-size:44px;margin-top:14px}
  .xmas .x-howto__steps{grid-template-columns:repeat(3,1fr);gap:32px;padding-top:22px}
  .xmas .x-howto__steps li{padding-left:0;padding-top:52px}
  .xmas .x-howto__q{grid-column:2}
  .xmas .x-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 28px;grid-auto-flow:dense}
  /* A large piece every so often breaks the grid's rhythm, like a feature
     page in a catalogue. */
  .xmas .x-card:nth-child(9n+1){grid-column:span 2;grid-row:span 2}
  .xmas .x-card:nth-child(9n+1) .x-card__title{font-size:22px}
  .xmas .x-card:nth-child(9n+1) .x-card__price{font-size:17px}
  .xmas .x-ans__l{font-size:26px}
  .xmas .x-answers--3{max-width:820px}
  .xmas .x-reveal__name{font-size:88px}
  .xmas .x-step--quiz,.xmas .x-step--reveal{max-width:1040px}
}

/* From 1200px the site header is position:fixed (nav-v2.inc), 99px tall.
   Category pages leave room with #mu-chef's padding; this does the same. */
@media (min-width:1200px){
  .xmas{margin-top:99px}
}
/* Jumps to a part of the page (#x-finder, #x-howto, "show more") stop a
   little below the top; from 1200px also below the fixed 99px header, which
   would otherwise cover the question. xmas.js uses the same margin. */
.xmas [id]{scroll-margin-top:16px}
@media (min-width:1200px){
  .xmas [id]{scroll-margin-top:123px}
}
@media (prefers-reduced-motion:reduce){
  .xmas *,.xmas *::before,.xmas *::after{animation:none!important;transition:none!important}
}

/* ---- The quiz: pictures, meter, swatches and "her picture so far" ----------
   Added for the visual quiz (xmas_quiz.inc). Photos live in
   /christmas/assets/img/quiz/q1a.webp ... q7d.webp. */
.xmas .x-quizside{display:none}
.xmas .x-answers--vis .x-ans{display:flex;align-items:center;gap:16px}
.xmas .x-ans__txt{display:block;min-width:0}
.xmas .x-ans__pic{flex:0 0 76px;width:76px;aspect-ratio:1;overflow:hidden;background:var(--paper)}
.xmas .x-ans__pic img{width:100%;height:100%;object-fit:cover;color:transparent;font-size:0;transition:transform .5s ease-out}

/* Volume meter: four rising bars; "something you've never heard" wobbles */
.xmas .x-ans__meter{flex:0 0 38px;display:inline-flex;align-items:flex-end;gap:3px;height:28px}
.xmas .x-ans__meter i{display:block;width:7px;background:var(--rule)}
.xmas .x-ans__meter i:nth-child(1){height:7px}
.xmas .x-ans__meter i:nth-child(2){height:14px}
.xmas .x-ans__meter i:nth-child(3){height:21px}
.xmas .x-ans__meter i:nth-child(4){height:28px}
.xmas .x-ans__meter i.on{background:var(--green)}
.xmas .x-ans__meter--odd i{background:#a8864a}
.xmas .x-ans__meter--odd i:nth-child(1){height:19px}
.xmas .x-ans__meter--odd i:nth-child(2){height:8px}
.xmas .x-ans__meter--odd i:nth-child(3){height:26px}
.xmas .x-ans__meter--odd i:nth-child(4){height:13px}

/* Metal swatches */
.xmas .x-ans__sw{flex:0 0 36px;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.14)}
.xmas .x-ans__sw--y{background:linear-gradient(135deg,#f6e3a6 0%,#d4a94b 38%,#a97c26 62%,#e9c873 100%)}
.xmas .x-ans__sw--w{background:linear-gradient(135deg,#fff 0%,#d6d8db 38%,#a6aaaf 62%,#eceef0 100%)}
.xmas .x-ans__sw--r{background:linear-gradient(135deg,#f8d9c8 0%,#e0a68c 38%,#b8735a 62%,#f0c3ae 100%)}
.xmas .x-ans__sw--mix{background:conic-gradient(#d4a94b 0 33.3%,#c9ccd0 0 66.6%,#e0a68c 0)}

/* The panel */
.xmas .x-quizside{background:var(--green-dk);color:#efe6d2;padding:28px 28px 24px}
.xmas .x-quizside__k{font:500 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#d9c08a}
.xmas .x-quizside__lean{margin-top:16px;font-size:13px;color:#c9bfa8}
.xmas .x-quizside__h{margin-top:4px;font:400 32px/1.05 var(--serif);letter-spacing:-.015em;color:#fbf6ea}
.xmas .x-quizside__h em{color:#d9c08a}
.xmas .x-quizside__tg{display:block;margin-top:6px;font:italic 300 16px/1.35 var(--serif);color:#c9bfa8}
.xmas .x-quizside__four{margin-top:18px}
.xmas .x-quizside__four li{padding:9px 0 9px 14px;border-left:1px solid #d9c08a;margin-bottom:6px}
.xmas .x-quizside__nm{display:block;font:400 20px/1.15 var(--serif);color:#fbf6ea}
.xmas .x-quizside__four .x-quizside__tg{margin-top:2px;font-size:14px}
.xmas .x-quizside__note{margin-top:16px;font-size:13px;line-height:1.5;color:#c9bfa8}
.xmas .x-quizside__n{margin-top:20px;padding-top:14px;border-top:1px solid rgba(217,192,138,.3);font-size:12px;letter-spacing:.06em;color:#d9c08a;font-variant-numeric:tabular-nums}
.xmas .x-mix--side{margin-top:20px}
.xmas .x-mix--side li{grid-template-columns:96px 1fr 36px;color:#efe6d2}
.xmas .x-mix--side .x-mix__bar{background:rgba(239,230,210,.16)}
.xmas .x-mix--side .x-mix__bar span{background:#d9c08a}
.xmas .x-mix--side .x-mix__v{color:#c9bfa8}
.xmas .x-mix--side li:first-child .x-mix__k{color:#fbf6ea;font-weight:500}

@media (min-width:992px){
  .xmas .x-step--quiz{max-width:1240px}
  .xmas .x-quizgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
  .xmas .x-quizside{display:block;position:sticky;top:24px;margin-top:70px}
  .xmas .x-answers--pic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:none;border-top:0}
  .xmas .x-answers--pic .x-ans{flex-direction:column;align-items:stretch;gap:0;height:100%;padding:0;border-bottom:0}
  .xmas .x-answers--pic .x-ans__pic{flex:none;width:100%}
  .xmas .x-answers--pic .x-ans__txt{padding:14px 0 0;border-top:1px solid var(--ink);margin-top:14px}
  .xmas .x-answers--pic .x-ans__l{font-size:21px}
  .xmas .x-answers--pic .x-ans:hover .x-ans__pic img,.xmas .x-answers--pic .x-ans:focus .x-ans__pic img{transform:scale(1.04)}
}
@media (min-width:1200px){
  .xmas .x-quizside{top:123px}
}
@media (prefers-reduced-motion:reduce){
  .xmas .x-ans__pic img{transition:none}
}