/* ==========================================================================
   Taj Almusk for Perfume and Cosmetics LLC
   شركة تاج المسك للعطور ومستحضرات التجميل ذ.م.م

   Design direction — deliberately NOT the Al-Dallal system.
   Al-Dallal is dark-dominant navy + gold, card grids, alternating dark bands.
   This is light-dominant bone paper, high-contrast didone display type, a
   printed-catalogue index rather than cards, numbered chapters, per-house
   accent colours, and exactly one dark band used as punctuation.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:        #191512;
  --ink-soft:   #4A4038;
  --ink-mute:   #7B6E62;
  --paper:      #F6F2EB;
  --paper-2:    #EDE6DA;
  --paper-3:    #E3D9C9;
  --dark:       #191512;
  --on-dark:    #F0EAE0;
  --on-dark-mut:#A79A8B;

  --wine:       #7A2E3E;   /* primary accent — house colour of Taj Almusk */
  --wine-deep:  #5B1F2C;
  --bronze:     #B8845F;

  --isadora:    #4F6B7A;   /* per-house accents */
  --abh:        #9C6B62;
  --revitalash: #71887A;

  --line:       rgba(25,21,18,.16);
  --line-soft:  rgba(25,21,18,.09);
  --line-dark:  rgba(240,234,224,.20);

  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans:    "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1260px;
  --gut: clamp(20px, 5vw, 60px);
  --band: clamp(60px, 8vw, 118px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --head-h: 68px;
}

html[lang="ar"]{
  --display: "Readex Pro", "Segoe UI", sans-serif;
  --sans:    "Almarai", "Segoe UI", sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:clamp(15.5px,1.02vw,17px);
  line-height:1.7; font-weight:350;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{margin:0; font-weight:400; line-height:1.08; letter-spacing:-.015em}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{
  line-height:1.42; letter-spacing:0; font-weight:600;
}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
::selection{background:var(--wine); color:var(--paper)}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.wrap--narrow{max-width:880px}

.skip{position:absolute; inset-inline-start:-9999px; top:0; z-index:200;
  background:var(--wine); color:#fff; padding:12px 20px; font-weight:500}
.skip:focus{inset-inline-start:0}

/* ==========================================================================
   HEADER — light, hairline, no blur-glass
   ========================================================================== */
.site-head{
  position:sticky; top:0; z-index:100;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.head-in{
  display:flex; align-items:center; gap:clamp(14px,3vw,40px);
  min-height:var(--head-h); max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
}
.brandmark{display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto}
.brandmark img{block-size:34px; inline-size:auto}
.bm-txt{display:flex; flex-direction:column; line-height:1}
.bm-name{
  font-family:var(--display); font-size:clamp(18px,1.6vw,23px);
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
}
html[lang="ar"] .bm-name{letter-spacing:0; text-transform:none; font-size:clamp(17px,1.5vw,21px)}
.bm-sub{
  font-size:9px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--wine); margin-top:6px; font-weight:500;
}
html[lang="ar"] .bm-sub{letter-spacing:.03em; text-transform:none; font-size:11px; margin-top:5px}

.nav{margin-inline-start:auto; display:flex; align-items:center; gap:clamp(12px,2.1vw,30px)}
.nav a{
  text-decoration:none; color:var(--ink-soft); font-size:12px; letter-spacing:.15em;
  text-transform:uppercase; font-weight:500; padding:6px 0; position:relative;
  transition:color .22s var(--ease); white-space:nowrap;
}
html[lang="ar"] .nav a{letter-spacing:0; text-transform:none; font-size:14.5px; font-weight:400}
.nav a::after{
  content:""; position:absolute; inset-inline:0; bottom:0; block-size:1px;
  background:var(--wine); transform:scaleX(0); transform-origin:inline-start;
  transition:transform .28s var(--ease);
}
.nav a:hover{color:var(--wine)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--wine)}

.lang{
  text-decoration:none; border:1px solid var(--line); color:var(--ink);
  padding:6px 14px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  transition:.22s var(--ease); white-space:nowrap; font-weight:500;
}
html[lang="ar"] .lang{letter-spacing:.04em; font-size:12.5px}
.lang:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}

.burger{
  display:none; margin-inline-start:auto; background:none; border:1px solid var(--line);
  color:var(--ink); inline-size:42px; block-size:38px; cursor:pointer;
}
.burger span{display:block; inline-size:17px; block-size:1px; background:currentColor; margin:4px auto}

@media (max-width:980px){
  .burger{display:block}
  .nav{
    position:fixed; inset:var(--head-h) 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:4px var(--gut) 24px; gap:0; margin:0;
    max-block-size:0; overflow:hidden; transition:max-block-size .36s var(--ease);
  }
  .nav.open{max-block-size:min(78vh,600px); overflow:auto}
  .nav a{padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:13px}
  .nav .lang{margin-top:18px; text-align:center; border-color:var(--ink)}
}

/* ==========================================================================
   SHARED PIECES
   ========================================================================== */
.band{padding-block:var(--band)}
.band--paper{background:var(--paper)}
.band--paper-2{background:var(--paper-2)}
.band--paper-3{background:var(--paper-3)}
.band--dark{background:var(--dark); color:var(--on-dark)}
.band--tight{padding-block:clamp(38px,5vw,66px)}

.kicker{
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; font-weight:600;
  color:var(--wine); margin:0 0 20px; display:flex; align-items:center; gap:14px;
}
html[lang="ar"] .kicker{letter-spacing:.04em; text-transform:none; font-size:13px; font-weight:700}
.kicker::after{content:""; flex:1; block-size:1px; background:var(--line); max-inline-size:110px}
.band--dark .kicker{color:var(--bronze)}
.band--dark .kicker::after{background:var(--line-dark)}

.d-xl{font-family:var(--display); font-size:clamp(40px,7.2vw,96px); line-height:.98; letter-spacing:-.025em}
.d-lg{font-family:var(--display); font-size:clamp(30px,4.6vw,58px); line-height:1.04; letter-spacing:-.02em}
.d-md{font-family:var(--display); font-size:clamp(23px,2.8vw,36px); line-height:1.14}
.d-sm{font-family:var(--display); font-size:clamp(19px,2vw,25px); line-height:1.2}
html[lang="ar"] .d-xl{font-size:clamp(29px,5.2vw,64px); line-height:1.3; letter-spacing:0}
html[lang="ar"] .d-lg{font-size:clamp(25px,3.8vw,46px); line-height:1.35; letter-spacing:0}
html[lang="ar"] .d-md{font-size:clamp(21px,2.5vw,31px); line-height:1.4}
html[lang="ar"] .d-sm{font-size:clamp(18px,1.9vw,23px); line-height:1.45}

.lead{font-size:clamp(17px,1.4vw,20.5px); line-height:1.66; max-width:60ch; color:var(--ink-soft)}
.band--dark .lead{color:var(--on-dark-mut)}
.measure{max-width:64ch}

.hr{block-size:1px; background:var(--line); border:0; margin:0}
.band--dark .hr{background:var(--line-dark)}

/* buttons — squared, hairline, no fills except the primary */
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.btn{
  display:inline-block; text-decoration:none; padding:13px 28px; font-size:11.5px;
  letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--ink); transition:.24s var(--ease);
}
html[lang="ar"] .btn{letter-spacing:.03em; text-transform:none; font-size:14px; font-weight:700}
.btn--fill{background:var(--wine); border-color:var(--wine); color:#fff}
.btn--fill:hover{background:var(--wine-deep); border-color:var(--wine-deep)}
.btn--line{color:var(--ink)}
.btn--line:hover{background:var(--ink); color:var(--paper)}
.band--dark .btn--line{color:var(--on-dark); border-color:var(--on-dark)}
.band--dark .btn--line:hover{background:var(--on-dark); color:var(--ink)}

/* ==========================================================================
   HERO — asymmetric: headline left, house index right
   ========================================================================== */
.hero{padding-block:clamp(56px,8vw,110px) clamp(44px,6vw,84px); background:var(--paper)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:end}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr; align-items:start}}
.hero h1{font-family:var(--display); font-size:clamp(36px,6.6vw,88px); line-height:.99; letter-spacing:-.028em; max-width:16ch}
html[lang="ar"] .hero h1{font-size:clamp(27px,4.9vw,60px); line-height:1.3; letter-spacing:0; max-width:19ch}
.hero .sub{
  margin-top:20px; font-size:clamp(12.5px,1.05vw,15px); letter-spacing:.14em;
  text-transform:uppercase; color:var(--wine); font-weight:500;
}
html[lang="ar"] .hero .sub{letter-spacing:0; text-transform:none; font-size:clamp(14px,1.2vw,17px); font-weight:700}
.hero .lead{margin-top:26px}

/* the vertical house index */
.house-index{border-top:1px solid var(--ink)}
.hi-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:14px;
  padding:15px 0; border-bottom:1px solid var(--line); text-decoration:none;
  transition:.24s var(--ease);
}
.hi-row:hover{padding-inline-start:8px}
.hi-n{font-family:var(--display); font-size:13px; color:var(--ink-mute)}
.hi-name{font-family:var(--display); font-size:clamp(17px,1.6vw,22px); line-height:1.15}
html[lang="ar"] .hi-name{font-size:clamp(15px,1.4vw,19px); line-height:1.4}
.hi-org{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); font-weight:500}
html[lang="ar"] .hi-org{letter-spacing:0; text-transform:none; font-size:12px}
.hi-row:hover .hi-name{color:var(--wine)}

/* ---------- figures strip ---------- */
.figs{border-top:1px solid var(--ink); border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.fig{padding:26px clamp(14px,2vw,28px) 26px 0; border-inline-end:1px solid var(--line-soft)}
.fig:last-child{border-inline-end:0}
.fig .n{font-family:var(--display); font-size:clamp(30px,3.6vw,46px); line-height:1; color:var(--wine)}
html[lang="ar"] .fig .n{font-size:clamp(25px,3vw,38px)}
.fig .t{margin-top:9px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); font-weight:500}
html[lang="ar"] .fig .t{letter-spacing:0; text-transform:none; font-size:13.5px}

/* ==========================================================================
   NUMBERED CHAPTERS — the structural signature of this site
   ========================================================================== */
.chapter{display:grid; grid-template-columns:clamp(56px,7vw,104px) minmax(0,1fr); gap:clamp(14px,2.5vw,36px);
  padding-block:clamp(30px,4vw,52px); border-top:1px solid var(--line)}
.chapter:first-of-type{border-top:1px solid var(--ink)}
.chapter .num{font-family:var(--display); font-size:clamp(19px,2vw,26px); color:var(--ink-mute); line-height:1.2}
.chapter h3{font-family:var(--display); font-size:clamp(22px,2.5vw,33px); margin-bottom:12px}
.chapter p{color:var(--ink-soft); max-width:58ch}
.band--dark .chapter{border-color:var(--line-dark)}
.band--dark .chapter:first-of-type{border-top-color:var(--on-dark)}
.band--dark .chapter p{color:var(--on-dark-mut)}
.band--dark .chapter .num{color:var(--on-dark-mut)}
@media (max-width:620px){.chapter{grid-template-columns:1fr; gap:6px}}

.head-block{max-width:66ch; margin-bottom:clamp(30px,4vw,52px)}

/* ==========================================================================
   BRAND CHAPTERS (brands page) — accent-coded
   ========================================================================== */
.house{padding-block:clamp(44px,6vw,84px); border-top:1px solid var(--ink)}
.house-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(20px,4vw,60px); align-items:start}
@media (max-width:860px){.house-head{grid-template-columns:1fr}}
.house .mark{
  font-family:var(--display); font-size:clamp(30px,4.6vw,58px); line-height:1.02;
  letter-spacing:-.02em; color:var(--accent,var(--ink));
}
html[lang="ar"] .house .mark{font-size:clamp(24px,3.6vw,42px); line-height:1.3; letter-spacing:0}
.house .origin{font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  color:var(--accent,var(--wine)); margin-bottom:14px}
html[lang="ar"] .house .origin{letter-spacing:.03em; text-transform:none; font-size:12.5px}
.house .say{font-family:var(--display); font-size:clamp(17px,1.7vw,23px); font-style:italic;
  color:var(--ink-soft); margin-top:16px; max-width:26ch}
html[lang="ar"] .house .say{font-style:normal; line-height:1.5}
.house .body p{color:var(--ink-soft)}

.spec{list-style:none; margin:26px 0 0; padding:0}
.spec li{display:grid; grid-template-columns:minmax(112px,.36fr) 1fr; gap:16px;
  padding:12px 0; border-top:1px solid var(--line-soft); align-items:baseline}
.spec li:last-child{border-bottom:1px solid var(--line-soft)}
.spec .sk{font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--accent,var(--wine))}
html[lang="ar"] .spec .sk{letter-spacing:.03em; text-transform:none; font-size:12.5px}
.spec .sv{font-size:15px; color:var(--ink-soft)}
@media (max-width:600px){.spec li{grid-template-columns:1fr; gap:3px}}

.tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:20px}
.tag{border:1px solid var(--line); padding:6px 13px; font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-soft); font-weight:500}
html[lang="ar"] .tag{letter-spacing:0; text-transform:none; font-size:13px}

/* ==========================================================================
   CATALOGUE — a printed index, not cards. This is the products page.
   ========================================================================== */
.jump{
  position:sticky; top:var(--head-h); z-index:60; background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
.jump-in{display:flex; gap:clamp(14px,2.4vw,34px); align-items:center; overflow-x:auto;
  max-width:var(--wrap); margin-inline:auto; padding:13px var(--gut); scrollbar-width:none}
.jump-in::-webkit-scrollbar{display:none}
.jump a{text-decoration:none; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); white-space:nowrap; font-weight:600; transition:color .2s}
html[lang="ar"] .jump a{letter-spacing:0; text-transform:none; font-size:13.5px}
.jump a:hover{color:var(--wine)}

.cat{padding-block:clamp(40px,5.5vw,76px); border-top:1px solid var(--ink); scroll-margin-top:130px}
.cat-head{display:flex; flex-wrap:wrap; gap:12px 26px; align-items:baseline; margin-bottom:26px}
.cat-head .mark{font-family:var(--display); font-size:clamp(26px,3.6vw,46px); color:var(--accent,var(--ink)); line-height:1}
html[lang="ar"] .cat-head .mark{font-size:clamp(21px,2.9vw,34px); line-height:1.3}
.cat-head .meta{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); font-weight:600}
html[lang="ar"] .cat-head .meta{letter-spacing:.03em; text-transform:none; font-size:12.5px}

.group{margin-top:30px}
.group > h4{
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; font-weight:700;
  color:var(--accent,var(--wine)); padding-bottom:9px; border-bottom:1px solid var(--accent,var(--wine));
}
html[lang="ar"] .group > h4{letter-spacing:.03em; text-transform:none; font-size:13.5px}
.items{list-style:none; margin:0; padding:0}
.items li{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(12px,2vw,32px);
  padding:13px 0; border-bottom:1px solid var(--line-soft); align-items:baseline;
}
.items .pn{font-size:15.5px; font-weight:500; color:var(--ink)}
.items .pd{font-size:14.5px; color:var(--ink-mute); line-height:1.55}
@media (max-width:700px){
  .items li{grid-template-columns:1fr; gap:3px; padding:12px 0}
  .items .pd{font-size:14px}
}

.note{
  margin-top:26px; padding:18px 20px; border-inline-start:2px solid var(--accent,var(--wine));
  background:rgba(25,21,18,.035); font-size:14.5px; color:var(--ink-soft);
}

/* ==========================================================================
   CHANNELS / SIMPLE PANELS
   ========================================================================== */
.panels{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--line)}
.panel{background:var(--paper); padding:clamp(22px,2.6vw,32px)}
.band--paper-2 .panel{background:var(--paper-2)}
.band--paper-3 .panel{background:var(--paper-3)}
.panel .num{font-family:var(--display); font-size:13px; color:var(--wine); display:block; margin-bottom:12px}
.panel h3{font-family:var(--display); font-size:clamp(19px,1.9vw,24px); margin-bottom:10px}
.panel p{color:var(--ink-soft); font-size:15px}

/* ==========================================================================
   CONTACT — works on both dark and light bands
   ========================================================================== */
.details{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(18px,3vw,36px)}
.details .k{display:block; font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  font-weight:600; color:var(--wine); margin-bottom:8px}
html[lang="ar"] .details .k{letter-spacing:.03em; text-transform:none; font-size:12.5px}
.details .v{font-size:15.5px; line-height:1.6; color:var(--ink)}
.details .v a{color:var(--wine); text-decoration:none; border-bottom:1px solid var(--line)}
.details .v a:hover{color:var(--ink)}
/* dark-band pair — every component coloured for light needs one of these */
.band--dark .details .k{color:var(--bronze)}
.band--dark .details .v{color:var(--on-dark)}
.band--dark .details .v a{color:var(--bronze); border-bottom-color:var(--line-dark)}
.band--dark .details .v a:hover{color:var(--on-dark)}

.maplink{display:inline-block; margin-top:16px; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--wine); text-decoration:none; font-weight:600}
html[lang="ar"] .maplink{letter-spacing:.03em; text-transform:none; font-size:13.5px}
.maplink:hover{color:var(--ink)}
.band--dark .maplink{color:var(--bronze)}
.band--dark .maplink:hover{color:var(--on-dark)}

/* NOTE: never pair aspect-ratio with min-block-size here — the min height
   back-propagates through the ratio into a min WIDTH and blows out phones.
   Change the ratio at the breakpoint instead. */
.map{margin-top:clamp(24px,3.5vw,40px); border:1px solid var(--line); aspect-ratio:16/7; background:var(--paper-3)}
.band--dark .map{border-color:var(--line-dark)}
@media (max-width:700px){.map{aspect-ratio:4/3}}
.map iframe{inline-size:100%; block-size:100%; border:0; display:block}

/* ---------- form ---------- */
.form{display:grid; gap:15px}
.pair{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:15px}
.field{display:grid; gap:6px}
.field label{font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--ink-mute)}
html[lang="ar"] .field label{letter-spacing:.03em; text-transform:none; font-size:12.5px}
.field input,.field textarea,.field select{
  font:inherit; font-size:15.5px; padding:12px 14px; background:transparent;
  border:0; border-bottom:1px solid var(--line); color:var(--ink); border-radius:0;
}
.field select{padding-inline-start:0}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0; border-bottom-color:var(--wine); box-shadow:0 1px 0 0 var(--wine);
}
.field textarea{min-block-size:130px; resize:vertical; border:1px solid var(--line); padding:13px 14px}
.field textarea:focus{border-color:var(--wine); box-shadow:none}
.form-note{font-size:13px; color:var(--ink-mute)}
.hp{position:absolute; inset-inline-start:-9999px; opacity:0}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot{background:var(--dark); color:var(--on-dark-mut); padding-block:clamp(44px,5.5vw,70px) 0}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(auto-fit,minmax(140px,1fr)); gap:clamp(26px,4vw,52px)}
.foot-legal{font-family:var(--display); font-size:clamp(19px,2vw,26px); color:var(--on-dark); line-height:1.2}
html[lang="ar"] .foot-legal{line-height:1.5}
.foot-tag{margin-top:12px; font-size:14.5px; max-width:44ch}
.foot-col h4{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--bronze);
  margin-bottom:15px; font-weight:600}
html[lang="ar"] .foot-col h4{letter-spacing:.03em; text-transform:none; font-size:12.5px}
.foot-col ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.foot-col a{color:var(--on-dark-mut); text-decoration:none; font-size:14.5px; transition:color .2s}
.foot-col a:hover{color:var(--on-dark)}
.foot-bar{margin-top:clamp(34px,4.5vw,54px); border-top:1px solid var(--line-dark); padding-block:20px;
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:12.5px}

/* ---------- 404 ---------- */
.oops{min-block-size:58vh; display:grid; align-content:center}

/* ---------- RTL ---------- */
[dir="rtl"] .nav a::after{transform-origin:right}
[dir="rtl"] .fig{padding:26px 0 26px clamp(14px,2vw,28px)}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(14px); transition:opacity .65s var(--ease), transform .65s var(--ease)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  .hi-row:hover{padding-inline-start:0}
}

@media print{
  .site-head,.nav,.map,.actions,.jump{display:none}
  body{background:#fff; color:#000}
  .band--dark,.site-foot{background:#fff !important; color:#000 !important}
}